@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════
   toolon-renewal-header.css  —  헤더/네비/메가메뉴 전용
   ══════════════════════════════════════════════════════════════════ */

:root {
	--toolon-primary:   #1E293B;
	--toolon-point:     #F97316;
	--toolon-point-dark:#EA580C;
	--toolon-slate:     #64748B;
	--toolon-bg:        #F7F7F5;
	--toolon-text:      #111827;
	--toolon-danger:    #DC2626;
	--toolon-success:   #16A34A;
	--toolon-line:      #E5E7EB;
	--toolon-soft:      #F8FAFC;
	--toolon-price:     #A81E12;  /* 가격/금액 강조색(벽돌레드) — 전 화면 공통 */
}

/* ── 공통 리셋 ─────────────────────────────────────────────────── */
.toolon-topbar,
.toolon-renewal-header,
.toolon-renewal-nav {
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR",
	             "Nanum Gothic", "Malgun Gothic", Arial, sans-serif;
	line-height: 1.4;
	letter-spacing: 0;
}

.toolon-topbar *,
.toolon-renewal-header *,
.toolon-renewal-nav * {
	box-sizing: border-box;
}

.toolon-container {
	width: 1248px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
}

#header {
	background: #fff;
	display: flow-root;
}

/* ── TOPBAR ─────────────────────────────────────────────────────── */
.toolon-topbar {
	background: var(--toolon-primary);
	color: var(--toolon-line);
	font-size: 12px;
}

.toolon-topbar-inner {
	width: 1248px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
	height: 32px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 18px;
}

.toolon-topbar-inner a {
	color: #CBD5E1;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.12s;
}

.toolon-topbar-inner a:hover {
	color: #fff;
}

.toolon-topbar-inner strong {
	color: #FED7AA;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	margin-left: 8px;
	padding-left: 18px;
	border-left: 1px solid #334155;
}

/* ── HEADER ─────────────────────────────────────────────────────── */
.toolon-renewal-header {
	position: relative;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--toolon-line);
}

.toolon-header-main {
	min-height: 86px;
	display: flex;
	align-items: center;
	gap: 24px;
}

/* 로고 */
.toolon-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	color: var(--toolon-primary);
	text-decoration: none;
	white-space: nowrap;
}

.toolon-logo:hover { color: var(--toolon-primary); text-decoration: none; }

.toolon-logo-mark {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--toolon-primary);
	border-radius: 12px;
	font-size: 18px;
	font-weight: 900;
}

.toolon-logo-main {
	display: block;
	font-size: 29px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
}

.toolon-logo-main .on { color: var(--toolon-point); }

.toolon-logo-sub {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--toolon-slate);
}

/* 검색 */
.toolon-search {
	flex: 1 1 auto;
	min-width: 280px;
	position: relative;
	z-index: 20;
}

.toolon-search-box {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--toolon-point);
	border-radius: 8px;
	overflow: hidden;
	height: 46px;
	background: #fff;
	position: relative;
	z-index: 2;
}

.toolon-search.is-suggest-open {
	z-index: 950;
}

.toolon-search.is-suggest-open .toolon-search-box {
	box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.12);
}

.toolon-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 400;
	color: var(--toolon-text);
	background: transparent;
}

.toolon-search-input::placeholder { color: #94A3B8; }

.toolon-search-btn {
	width: 58px;
	flex: 0 0 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--toolon-point);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.14s;
}

.toolon-search-btn:hover { background: var(--toolon-point-dark); }

.toolon-search-btn svg {
	stroke: #fff;
	width: 20px;
	height: 20px;
}

.toolon-search-label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}

.toolon-search-suggest.ui-autocomplete {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	width: 100% !important;
	max-height: 360px;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
	z-index: 1200;
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR",
	             "Nanum Gothic", "Malgun Gothic", Arial, sans-serif;
}

.toolon-search-suggest .ui-menu-item,
.toolon-search-suggest .toolon-suggest-static {
	margin: 0;
	padding: 0;
	list-style: none;
}

.toolon-search-suggest .ui-menu-item-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: inherit !important;
}

.toolon-search-suggest .toolon-suggest-static.ui-state-disabled {
	opacity: 1;
	pointer-events: auto;
}

.toolon-suggest-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid #F1F5F9;
	color: var(--toolon-slate);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	pointer-events: none;
}

.toolon-suggest-head strong {
	color: var(--toolon-primary);
	font-size: 13px;
	font-weight: 900;
}

.toolon-suggest-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 8px;
	color: var(--toolon-text);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.14s ease;
}

.toolon-suggest-item:hover,
.toolon-suggest-item.ui-state-active,
.toolon-search-suggest .ui-menu-item-wrapper.ui-state-active,
.toolon-search-suggest .ui-state-active .toolon-suggest-item {
	background: #F5F6F8 !important;
}

.toolon-suggest-main {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 9px;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.toolon-suggest-icon {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	background: #F8FAFC;
	color: var(--toolon-point);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

.toolon-suggest-icon.is-category {
	color: #0369A1;
}

.toolon-suggest-word {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.toolon-suggest-word mark {
	background: transparent;
	color: var(--toolon-point);
	font-weight: 900;
}

.toolon-suggest-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	color: var(--toolon-slate);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.toolon-suggest-badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 8px;
	background: #F1F5F9;
	color: #334155;
	font-size: 11px;
	font-weight: 900;
}

.toolon-suggest-badge.is-product {
	background: #FFF7ED;
	color: #C2410C;
}

.toolon-suggest-badge.is-category {
	background: #E0F2FE;
	color: #0369A1;
}

.toolon-suggest-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 6px;
	padding: 10px 12px;
	border-top: 1px solid #F1F5F9;
	color: var(--toolon-slate);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
}

.toolon-suggest-foot b {
	color: var(--toolon-point);
}

.toolon-suggest-all {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--toolon-primary);
	font-weight: 900;
	text-decoration: none;
	white-space: nowrap;
}

.toolon-suggest-all:hover {
	color: var(--toolon-point);
	text-decoration: none;
}

/* 헤더 액션 */
.toolon-header-actions {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
}

.toolon-ha {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 14px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--toolon-primary);
	cursor: pointer;
	transition: color 0.13s;
	white-space: nowrap;
}

.toolon-ha:hover {
	background: transparent;
	color: var(--toolon-point);
	text-decoration: none;
}

.toolon-ha-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* 장바구니 수량 배지 */
.toolon-ha-badge {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	box-sizing: border-box;
	background: var(--toolon-point);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	border-radius: 999px;
	border: 2px solid #fff;
	box-shadow: none;
	white-space: nowrap;
}

/* 모바일 장바구니 버튼 배지 */
.toolon-mobile-cart { position: relative; }
.toolon-mobile-cart-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	box-sizing: border-box;
	background: var(--toolon-point);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	border-radius: 999px;
	border: 2px solid #fff;
	box-shadow: none;
	white-space: nowrap;
}

.toolon-ha-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

.toolon-ha-text {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.toolon-ha-divider {
	display: block;
	width: 1px;
	height: 28px;
	background: var(--toolon-line);
	margin: 0 2px;
	flex: 0 0 auto;
}

/* 모바일 버튼 */
.toolon-mobile-menu,
.toolon-mobile-cart {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--toolon-line);
	border-radius: 8px;
	background: #fff;
	color: var(--toolon-primary);
	font-size: 20px;
	cursor: pointer;
}

/* ── NAV ────────────────────────────────────────────────────────── */
.toolon-renewal-nav.gnb {
	position: relative;
	z-index: 850;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid var(--toolon-line);
}

.toolon-nav-inner {
	display: flex;
	align-items: stretch;
	height: 56px;
}

.toolon-allcat {
	width: 188px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 0 0 188px;
	background: var(--toolon-primary);
	color: #fff !important;
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.14s;
}

.toolon-allcat:hover,
.toolon-allcat.is-active {
	background: #0F172A;
	color: #fff !important;
	text-decoration: none;
}

.toolon-navlinks {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

.toolon-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	padding: 0 8px;
	height: 56px;
	color: #1F2937;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color 0.12s, border-color 0.12s;
}

.toolon-nav-link:hover,
.toolon-nav-link.is-active {
	color: var(--toolon-point);
	border-bottom-color: var(--toolon-point);
	text-decoration: none;
}

/* ── 메가메뉴 컨테이너 ──────────────────────────────────────────── */
.toolon-mega-menu {
	position: absolute;
	top: 56px;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	display: none;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .15);
}

.toolon-renewal-nav:hover .toolon-mega-menu {
	display: block;
}

/* 개별 패널 */
.toolon-mega-panel {
	display: flex;
	width: 1248px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--toolon-line);
	border-top: 3px solid var(--toolon-primary);
	min-height: 308px;
}

/* 좌측 사이드바 */
.toolon-mega-left {
	width: 248px;
	flex: 0 0 248px;
	background: #fff;
	border-right: 1px solid var(--toolon-line);
	overflow-y: auto;
}

.toolon-mega-left-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 72px;
	padding: 0 22px;
	text-decoration: none;
	position: relative;
	border-bottom: 1px solid #F1F5F9;
	transition: background 0.12s;
}

.toolon-mega-left-item:last-child {
	border-bottom: none;
}

.toolon-mega-left-item:hover,
.toolon-mega-left-item.is-active {
	background: #FFFBF7;
	text-decoration: none;
}

.toolon-mega-left-item:hover::before,
.toolon-mega-left-item.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 3px;
	background: var(--toolon-point);
	border-radius: 0 2px 2px 0;
}

.toolon-mega-left-item strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #1F2937;
	line-height: 1.3;
}

.toolon-mega-left-item span {
	display: block;
	font-size: 12px;
	color: #94A3B8;
	margin-top: 3px;
	line-height: 1.3;
}

.toolon-mega-left-item .toolon-mega-left-cnt {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--toolon-slate);
}

/* 우측 패널 */
.toolon-mega-right {
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 28px 18px;
	overflow-y: auto;
}

.toolon-mega-top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--toolon-line);
}

.toolon-mega-top strong {
	font-size: 16px;
	font-weight: 800;
	color: var(--toolon-primary);
}

.toolon-mega-top span {
	font-size: 13px;
	color: var(--toolon-slate);
}

/* 대분류(LEV1) 전체 상품수 — 우측 끝 정렬 */
.toolon-mega-top .toolon-mega-top-cnt {
	margin-left: auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--toolon-slate);
}

/* 멀티컬럼(높이 기준 패킹) — 그룹 수/길이가 달라도 빈 컬럼에 채워져
   긴 그룹 때문에 다음 그룹이 한 줄 통째로 밀리지 않는다.
   그룹 내부는 소분류(LEV3)를 2개씩 배치해 세로 높이를 절반으로 줄인다. */
.toolon-mega-grid {
	columns: 230px;
	column-gap: 22px;
}

.toolon-mega-group {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;   /* 소분류 한 줄에 2개 */
	column-gap: 6px;
	align-content: start;
}

.toolon-mega-group h4 {
	grid-column: 1 / -1;              /* 중분류 제목은 전체 폭 */
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	margin: 0 0 8px 0;
	padding: 0 0 7px 11px;           /* 좌측 바 자리 확보 */
	border-bottom: 1px solid #F1F5F9;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--toolon-primary);
	line-height: 1.3;
}

/* 중분류(LEV2) 제목 좌측 포인트 바 — 아래 소분류(LEV3)와 구분 */
.toolon-mega-group h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	bottom: 8px;
	width: 3px;
	background: var(--toolon-point);
	border-radius: 0 2px 2px 0;
}

.toolon-mega-group h4 a {
	color: inherit;
	text-decoration: none;
}

.toolon-mega-group h4 a:hover {
	color: var(--toolon-point);
	text-decoration: none;
}

.toolon-mega-group > a {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	padding: 4px 7px;
	border-radius: 6px;
	text-decoration: none;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.1s, background 0.1s;
}

/* 중분류(LEV2) 제목 우측 상품수 라벨 */
.toolon-mega-h4-cnt {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	color: #94A3B8;
}

.toolon-mega-group a:hover {
	color: var(--toolon-point);
	background: #FFF7ED;
	text-decoration: none;
}

.toolon-mega-promo {
	column-span: all;
	margin-top: 4px;
	padding: 10px 16px;
	background: #FFF7ED;
	border-left: 3px solid var(--toolon-point);
	border-radius: 0 6px 6px 0;
	color: #9A3412;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.toolon-mega-promo span {
	display: inline-block;
	padding: 1px 7px;
	background: var(--toolon-point);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	border-radius: 4px;
	margin-right: 6px;
	vertical-align: middle;
}

/* ── 반응형 ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
	.toolon-header-main { gap: 16px; }
	.toolon-logo-main   { font-size: 25px; }
	.toolon-nav-link    { font-size: 13px; padding: 0 6px; }
	.toolon-allcat      { width: 160px; flex-basis: 160px; font-size: 14px; }
	.toolon-mega-grid   { columns: 200px; }
}

@media (max-width: 1024px) {
	.toolon-container {
		max-width: none;
		width: 100%;
		padding: 0 16px;
	}

	.toolon-header-main {
		min-height: auto;
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 42px;
		gap: 10px;
		padding: 12px 16px;
	}

	.toolon-mobile-menu,
	.toolon-mobile-cart { display: inline-flex !important; }

	.toolon-mobile-menu { grid-column: 1; grid-row: 1; }
	.toolon-mobile-cart { grid-column: 3; grid-row: 1; justify-self: end; }

	.toolon-logo {
		grid-column: 2; grid-row: 1;
		justify-content: center;
		justify-self: center;
		min-width: 0; max-width: 100%;
	}

	.toolon-logo-mark  { width: 32px; height: 32px; font-size: 12px; }
	.toolon-logo-main  { font-size: 24px; }

	.toolon-logo-sub,
	.toolon-header-actions { display: none !important; }

	.toolon-search {
		grid-column: 1 / 4; grid-row: 2;
		width: 100%; max-width: 100%; min-width: 0;
		z-index: 340;
	}

	.toolon-search-suggest.ui-autocomplete {
		top: calc(100% + 7px) !important;
		max-height: 320px;
		padding: 7px;
	}

	.toolon-suggest-item {
		padding: 10px;
	}

	.toolon-renewal-nav { display: none; }
	.toolon-topbar      { display: none; }
}

@media (max-width: 640px) {
	.toolon-header-main {
		padding-left: 12px;
		padding-right: 12px;
	}

	.toolon-search-input { font-size: 14px; }

	.toolon-search-suggest.ui-autocomplete {
		top: calc(100% + 6px) !important;
		max-height: 310px;
	}

	.toolon-suggest-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
		padding: 7px 8px 9px;
	}

	.toolon-suggest-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 10px 9px;
	}

	.toolon-suggest-main {
		font-size: 14px;
	}

	.toolon-suggest-meta {
		justify-content: flex-start;
		padding-left: 37px;
		font-size: 11px;
	}

	.toolon-suggest-foot {
		display: block;
		padding: 9px;
	}

	.toolon-suggest-all {
		margin-top: 4px;
	}
}

/* ══════════════════════════════════════════════════════════════════
   모바일 드로어 메뉴
   ══════════════════════════════════════════════════════════════════ */

/* 햄버거 버튼: 세로 flex로 3줄 정렬 */
.toolon-mobile-menu.toolon-mobile-menu-btn {
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
}

.toolon-mobile-menu-btn span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--toolon-primary);
	border-radius: 99px;
	flex-shrink: 0;
	pointer-events: none;
}

/* 바디: 드로어 열림 시 스크롤 잠금 */
body.toolon-menu-open {
	overflow: hidden;
}

/* 딤 오버레이 */
.toolon-mobile-dim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s, visibility 0.18s;
	z-index: 980;
}

body.toolon-menu-open .toolon-mobile-dim {
	opacity: 1;
	visibility: visible;
}

/* 드로어 패널 */
.toolon-mobile-drawer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: min(86vw, 430px);
	background: #fff;
	z-index: 990;
	transform: translateX(calc(-100% - 80px));
	transition: transform 0.24s ease;
	box-shadow: 18px 0 42px rgba(15, 23, 42, 0.22);
	flex-direction: column;
	overflow: hidden;
}

body.toolon-menu-open .toolon-mobile-drawer {
	transform: translateX(0);
}

/* 모바일 전용 표시 */
@media (max-width: 1024px) {
	.toolon-mobile-dim    { display: block; }
	.toolon-mobile-drawer { display: flex; }
}

/* 드로어 헤더 */
.toolon-mobile-drawer-head {
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	border-bottom: 1px solid var(--toolon-line);
	background: #fff;
	flex-shrink: 0;
}

.toolon-mobile-drawer-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--toolon-primary);
	text-decoration: none;
}

.toolon-mobile-drawer-logo:hover {
	color: var(--toolon-primary);
	text-decoration: none;
}

.toolon-mobile-drawer-logo .toolon-logo-mark {
	width: 36px;
	height: 36px;
	font-size: 16px;
}

.toolon-mobile-drawer-logo b {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1;
	color: var(--toolon-primary);
}

.toolon-mobile-drawer-logo b span {
	color: var(--toolon-point);
}

.toolon-mobile-close {
	width: 42px;
	height: 42px;
	border: 0;
	background: var(--toolon-soft);
	border-radius: 12px;
	color: #475569;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.toolon-mobile-close:hover {
	background: #F1F5F9;
	color: var(--toolon-primary);
}

/* 빠른 접근 그리드 */
.toolon-mobile-quick {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--toolon-primary);
	flex-shrink: 0;
}

.toolon-mobile-quick a {
	height: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	text-decoration: none;
}

.toolon-mobile-quick a:last-child { border-right: 0; }

.toolon-mobile-quick a:hover {
	background: rgba(255, 255, 255, 0.1);
	text-decoration: none;
	color: #fff;
}

.toolon-mobile-quick i {
	font-size: 20px;
	line-height: 1;
}

/* 메뉴 타이틀 */
.toolon-mobile-menu-title {
	padding: 14px 20px 12px;
	border-bottom: 1px solid #EEF2F7;
	background: #FAFAF9;
	flex-shrink: 0;
}

.toolon-mobile-menu-title strong {
	display: block;
	color: var(--toolon-primary);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.6px;
}

.toolon-mobile-menu-title span {
	display: block;
	margin-top: 4px;
	color: var(--toolon-slate);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.3px;
}

/* 카테고리 목록 */
.toolon-mobile-category-list {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 96px;   /* 고정 바텀네비에 하단(로그아웃/사이트정보)이 가리지 않도록 */
	flex: 1 1 auto;
}

/* 드로어 하단: 로그아웃 + 사이트 정보 */
.toolon-mobile-foot {
	margin-top: 8px;
	padding: 16px;
	border-top: 1px solid var(--toolon-line);
	background: var(--toolon-soft);
}
.toolon-mobile-logout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 42px;
	margin-bottom: 14px;
	border: 1px solid #CBD5E1;
	border-radius: 9px;
	background: #fff;
	color: #475569;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}
.toolon-mobile-logout:hover { border-color: var(--toolon-primary); color: var(--toolon-primary); }
.toolon-mobile-info { display: flex; flex-direction: column; gap: 4px; }
.toolon-mobile-info strong { font-size: 13px; font-weight: 800; color: var(--toolon-primary); }
.toolon-mobile-info span { font-size: 11.5px; color: #94A3B8; line-height: 1.5; word-break: keep-all; }

.toolon-mobile-category-block h3 {
	margin: 0;
	padding: 12px 20px 7px;
	color: #60A5FA;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.7px;
	background: #fff;
	border-bottom: 1px solid var(--toolon-line);
}

.toolon-mobile-category-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
}

.toolon-mobile-category-grid a {
	min-height: 50px;
	display: flex;
	align-items: center;
	padding: 0 38px 0 16px;
	border-right: 1px solid #D7DCE3;
	border-bottom: 1px solid #D7DCE3;
	position: relative;
	color: #374151;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.45px;
	background: #fff;
	text-decoration: none;
}

.toolon-mobile-category-grid a:nth-child(2n) { border-right: 0; }

.toolon-mobile-category-grid a::after {
	content: '›';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #6379C8;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
}

.toolon-mobile-category-grid a:hover {
	background: #FFF7ED;
	color: var(--toolon-point-dark);
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════
   모바일 바텀 네비게이션
   ══════════════════════════════════════════════════════════════════ */
.toolon-bottom-nav {
	display: none;
}

@media (max-width: 1024px) {
	.toolon-bottom-nav {
		display: grid;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		height: 66px;
		background: var(--toolon-primary);
		color: #fff;
		grid-template-columns: repeat(5, 1fr);
		z-index: 1000;
		font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
	}

	.toolon-bottom-nav a,
	.toolon-bottom-nav button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		font-size: 11px;
		font-weight: 800;
		color: #fff;
		text-decoration: none;
		border: 0;
		background: transparent;
		cursor: pointer;
		font-family: inherit;
		line-height: 1.3;
		transition: background 0.12s;
		padding: 0;
	}

	.toolon-bottom-nav a:hover,
	.toolon-bottom-nav button:hover {
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
		text-decoration: none;
	}

	.toolon-bottom-nav span {
		font-size: 22px;
		line-height: 1;
		display: block;
	}

	body {
		padding-bottom: 66px;
	}
}

/* 소형 스크린 조정 */
@media (max-width: 420px) {
	.toolon-mobile-drawer { width: 88vw; }

	.toolon-mobile-category-grid a {
		font-size: 14px;
		min-height: 47px;
		padding-left: 14px;
		padding-right: 32px;
	}

	.toolon-mobile-quick a { font-size: 12px; }
	.toolon-mobile-quick i { font-size: 18px; }

	.toolon-mobile-category-block h3 { font-size: 17px; }
}

/* [smoke-fix 2026-06-13] 모바일 검색버튼 터치영역 44px 확보 (기존 42px → 44px, 높이만 보정) */
@media (max-width: 768px) {
	.toolon-search-btn { min-height: 44px; }
}