@charset "utf-8";
/* ============================================================
   ui-header.css  —  유저 PC 상단 헤더 · 메뉴 · 회원정보 바
   common.css 뒤에 읽혀서 덮어쓴다. common.css 는 수정하지 않는다.
   아이콘 이미지 파일이 없어 깨지던 자리를 전부 SVG 로 직접 그렸다.
   되돌리려면 head.sub.php 의 <link> 한 줄만 지우면 된다.
   ============================================================ */

/* 글꼴을 화면 전체에 적용한다.
   한글 화면이 촌스러워 보이는 가장 큰 원인이 기본 글꼴(맑은 고딕)이다. */
body {
	font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR",
	             -apple-system, BlinkMacSystemFont, "Segoe UI",
	             "Malgun Gothic", "맑은 고딕", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -.01em;
}

/* ------------------------------------------------------------
   1. 헤더 바탕 — 어두운 유리판 느낌. 스크롤해도 위에 붙어 있다.
   ------------------------------------------------------------ */
.header-arr {
	position: sticky;
	top: 0;
	z-index: 900;
	background:
		linear-gradient(180deg, rgba(16,16,20,.96) 0%, rgba(10,10,13,.94) 100%);
	border-bottom: 1px solid var(--u-line);
	box-shadow: 0 10px 30px rgba(0,0,0,.55);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}
/* 미세 그레인 — 평면감을 없앤다 */
.header-arr::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--u-grain);
	opacity: .03;
	pointer-events: none;
	mix-blend-mode: overlay;
}
/* 아래쪽 금색 실선 한 줄 */
.header-arr::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg,
		transparent, rgba(224,161,56,.35) 25%, rgba(224,161,56,.5) 50%,
		rgba(224,161,56,.35) 75%, transparent);
}
.header-arr .header { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   2. 로고 — logo3.png 가 없다. SVG 로 새로 그린다.
   ------------------------------------------------------------ */
.logo_top { display: inline-flex; align-items: center; }
.logo_top img { display: none; }          /* 깨진 이미지 숨김 */
.logo_top::after {
	content: "";
	display: block;
	width: 132px;
	height: 40px;
	background: linear-gradient(180deg, var(--u-gold-lite), var(--u-gold) 55%, var(--u-gold-deep));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 40'%3E%3Cpath d='M8 6h30v6.5L18.5 33.5H38V40H8v-6.5L27.5 12.5H8z' fill='%23fff'/%3E%3Ctext x='48' y='30' font-family='Segoe UI,Arial,sans-serif' font-size='22' font-weight='700' letter-spacing='4' fill='%23fff'%3EZONE%3C/text%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 40'%3E%3Cpath d='M8 6h30v6.5L18.5 33.5H38V40H8v-6.5L27.5 12.5H8z' fill='%23fff'/%3E%3Ctext x='48' y='30' font-family='Segoe UI,Arial,sans-serif' font-size='22' font-weight='700' letter-spacing='4' fill='%23fff'%3EZONE%3C/text%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	filter: drop-shadow(0 2px 10px rgba(224,161,56,.35));
	transition: filter .25s var(--u-ease);
}
.logo_top:hover::after { filter: drop-shadow(0 2px 18px rgba(224,161,56,.6)); }

/* ------------------------------------------------------------
   3. 메뉴 공통 — 깨진 아이콘 이미지를 전부 숨기고 SVG 로 대체
   ------------------------------------------------------------ */
.main_navigation ul,
.main_navigation1 ul {
	display: flex;
	/* ★ 세로 메뉴다. 한 줄에 하나씩 놓는다 (관리자 요청 2026-09-28)

	     > 회원 페이지 창모드로 진행 후 창크기 줄일 경우에 이미지처럼 위치 변경 …
	     > 로또랑 이벤트가 옆에 있는 게 문제

	   전에는 flex-wrap:wrap 이었다. 그래서 글자가 짧은 항목끼리 한 줄에 들어갔다
	   ('로또' 2글자 + '이벤트' 3글자, '입금' + '출금'). 창을 줄이면 더 심해졌다.
	   원래 이 메뉴는 항목마다 아래 테두리를 두른 한 줄짜리였다 (common.css 146행).
	   column 으로 두면 폭과 상관없이 늘 한 줄에 하나다. */
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main_navigation li,
.main_navigation1 li { margin: 0; padding: 0; }

.main_navigation li > a,
.main_navigation1 li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--u-radius-sm);
	color: var(--u-text-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s var(--u-ease-io), background .2s var(--u-ease-io),
	            transform .2s var(--u-ease);
}
/* 깨진 이미지 자리 제거 */
.main_navigation li img,
.main_navigation1 li img,
.main_navigation .hovePic,
.main_navigation1 .hovePic { display: none !important; }

/* 아이콘 자리 — 각 메뉴가 아래에서 자기 그림을 넣는다 */
.main_navigation li > a::before,
.main_navigation1 li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .25s var(--u-ease);
}
.main_navigation li > a .txt,
.main_navigation1 li > a .txt { display: inline; font-size: 14px; font-weight: 600; }

/* 올렸을 때 — 금색으로 밝아지고 살짝 떠오른다 */
.main_navigation li > a:hover,
.main_navigation1 li > a:hover {
	color: var(--u-gold-soft);
	background: rgba(224,161,56,.09);
	transform: translateY(-1px);
}
.main_navigation li > a:hover::before,
.main_navigation1 li > a:hover::before { transform: scale(1.12); }
.main_navigation li > a:focus-visible,
.main_navigation1 li > a:focus-visible { outline: none; box-shadow: var(--u-glow-gold); }

/* 윗줄(게임)은 더 크고 굵게 — 가장 중요한 메뉴다 */
.main_navigation ul { gap: 6px; padding: 10px 0 6px; }
.main_navigation li > a { padding: 12px 20px; color: var(--u-text); }
.main_navigation li > a::before { width: 22px; height: 22px; }
.main_navigation li > a .txt { font-size: 15.5px; font-weight: 700; }
.main_navigation li > a::after {           /* 밑줄이 자라나는 효과 */
	content: "";
	position: absolute;
	left: 20px; right: 20px; bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--u-gold), var(--u-gold-soft));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--u-ease);
}
.main_navigation li > a:hover::after { transform: scaleX(1); }

/* 아랫줄(기능)은 촘촘하게 */
.main_navigation1 ul {
	padding: 6px 0 10px;
	border-top: 1px solid var(--u-line);
}
.main_navigation1 li > a { padding: 8px 11px; }
.main_navigation1 li > a .txt { font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------
   4. 메뉴별 아이콘 — 주소로 구분해서 그림을 넣는다
   ------------------------------------------------------------ */
/* 스포츠 — 축구공 */
.main_navigation a[href*="game.php?g=S1"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2l3.6 2.6-1.4 4.3H9.8L8.4 9.8z'/%3E%3Cpath d='M12 3v4.2M20.6 9.8l-5 0M18.2 19l-4-4.9M5.8 19l4-4.9M3.4 9.8l5 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2l3.6 2.6-1.4 4.3H9.8L8.4 9.8z'/%3E%3Cpath d='M12 3v4.2M20.6 9.8l-5 0M18.2 19l-4-4.9M5.8 19l4-4.9M3.4 9.8l5 0'/%3E%3C/svg%3E");
}
/* 스윅스(스포츠북) — 베팅 용지 */
.main_navigation a[href*="view/swix.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='2.8' width='15' height='18.4' rx='2.4'/%3E%3Cpath d='M8.2 7.6h7.6M8.2 11.2h4.8'/%3E%3Cpath d='M8.4 16.2l1.7 1.7 3.6-3.9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='2.8' width='15' height='18.4' rx='2.4'/%3E%3Cpath d='M8.2 7.6h7.6M8.2 11.2h4.8'/%3E%3Cpath d='M8.4 16.2l1.7 1.7 3.6-3.9'/%3E%3C/svg%3E");
}
/* 미니게임 — 주사위 */
.main_navigation a[href*="game=mini"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' fill='%23fff' stroke='none'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.5' fill='%23fff' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' fill='%23fff' stroke='none'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.5' fill='%23fff' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}
/* 라이브카지노 — 칩 */
.main_navigation a[href*="game=casino"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 3v3.4M12 17.6V21M3 12h3.4M17.6 12H21'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 3v3.4M12 17.6V21M3 12h3.4M17.6 12H21'/%3E%3C/svg%3E");
}
/* 슬롯 — 릴 3칸 + 777 */
.main_navigation a[href*="game=slot"]:not([href*="k="])::before,
.main_navigation1 a[href*="game=slot"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3Cpath d='M5.6 9.4h1.8l-1.1 5M11.1 9.4h1.8l-1.1 5M16.6 9.4h1.8l-1.1 5' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3Cpath d='M5.6 9.4h1.8l-1.1 5M11.1 9.4h1.8l-1.1 5M16.6 9.4h1.8l-1.1 5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 입금 — 아래로 들어오는 화살표 */
.main_navigation1 a[href*="view/charge.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10m0 0l-3.6-3.6M12 13l3.6-3.6'/%3E%3Cpath d='M4 15v3.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10m0 0l-3.6-3.6M12 13l3.6-3.6'/%3E%3Cpath d='M4 15v3.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V15'/%3E%3C/svg%3E");
}
/* 출금 — 위로 나가는 화살표 */
.main_navigation1 a[href*="view/exchange.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13V3m0 0L8.4 6.6M12 3l3.6 3.6'/%3E%3Cpath d='M4 15v3.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13V3m0 0L8.4 6.6M12 3l3.6 3.6'/%3E%3Cpath d='M4 15v3.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V15'/%3E%3C/svg%3E");
}
/* 마이페이지 — 사람 */
.main_navigation1 a[href*="view/my.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}
/* 쪽지 — 봉투 */
.main_navigation1 a[href*="view/memo.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.6 7.2L12 13l8.4-5.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.6 7.2L12 13l8.4-5.8'/%3E%3C/svg%3E");
}
/* 복권 / 황금복권 — 티켓 */
.main_navigation1 a[href*="view/bok.php"]::before,
.main_navigation1 a[href*="view/gold_bok.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A2.5 2.5 0 0 1 5.5 6h13A2.5 2.5 0 0 1 21 8.5v1.7a2 2 0 0 0 0 3.6v1.7A2.5 2.5 0 0 1 18.5 18h-13A2.5 2.5 0 0 1 3 15.5v-1.7a2 2 0 0 0 0-3.6z'/%3E%3Cpath d='M14 6v12' stroke-dasharray='2 2.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A2.5 2.5 0 0 1 5.5 6h13A2.5 2.5 0 0 1 21 8.5v1.7a2 2 0 0 0 0 3.6v1.7A2.5 2.5 0 0 1 18.5 18h-13A2.5 2.5 0 0 1 3 15.5v-1.7a2 2 0 0 0 0-3.6z'/%3E%3Cpath d='M14 6v12' stroke-dasharray='2 2.4'/%3E%3C/svg%3E");
}
.main_navigation1 a[href*="gold_bok.php"] { color: var(--u-gold-soft); }
/* 룰렛 */
.main_navigation1 a[href*="view/roulette.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 3v6.8M12 14.2V21M3 12h6.8M14.2 12H21M5.6 5.6l4.8 4.8M13.6 13.6l4.8 4.8M18.4 5.6l-4.8 4.8M10.4 13.6l-4.8 4.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 3v6.8M12 14.2V21M3 12h6.8M14.2 12H21M5.6 5.6l4.8 4.8M13.6 13.6l4.8 4.8M18.4 5.6l-4.8 4.8M10.4 13.6l-4.8 4.8'/%3E%3C/svg%3E");
}
/* 출석체크 — 달력 + 체크 */
.main_navigation1 a[href*="view/att.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 9.6h17M8 3.2v3.4M16 3.2v3.4M9 14.6l2.2 2.2 4-4.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 9.6h17M8 3.2v3.4M16 3.2v3.4M9 14.6l2.2 2.2 4-4.2'/%3E%3C/svg%3E");
}
/* 로또 — 공 세 개 */
.main_navigation1 a[href*="view/lotto.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='7.5' cy='14' r='4.2'/%3E%3Ccircle cx='16.5' cy='14' r='4.2'/%3E%3Ccircle cx='12' cy='7.5' r='4.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='7.5' cy='14' r='4.2'/%3E%3Ccircle cx='16.5' cy='14' r='4.2'/%3E%3Ccircle cx='12' cy='7.5' r='4.2'/%3E%3C/svg%3E");
}
/* 이벤트 — 선물상자 */
.main_navigation1 a[href*="b=event"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3.5' y='9.5' width='17' height='10.5' rx='2'/%3E%3Cpath d='M2.5 9.5h19M12 9.5V20'/%3E%3Cpath d='M12 9.5S9.5 4 7.4 4.6C5.9 5 6.1 8 8.2 9.5M12 9.5s2.5-5.5 4.6-4.9c1.5.4 1.3 3.4-.8 4.9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3.5' y='9.5' width='17' height='10.5' rx='2'/%3E%3Cpath d='M2.5 9.5h19M12 9.5V20'/%3E%3Cpath d='M12 9.5S9.5 4 7.4 4.6C5.9 5 6.1 8 8.2 9.5M12 9.5s2.5-5.5 4.6-4.9c1.5.4 1.3 3.4-.8 4.9'/%3E%3C/svg%3E");
}
/* 자유게시판 / 게시판 — 말풍선 · 목록 */
.main_navigation1 a[href*="b=free"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.5c0 3.9-3.8 7-8.5 7-1 0-2-.1-2.9-.4L4 21l1.4-3.6C4.2 16.1 3.5 14.4 3.5 12.5c0-3.9 3.8-7 8.5-7s8.5 3.1 8.5 7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.5c0 3.9-3.8 7-8.5 7-1 0-2-.1-2.9-.4L4 21l1.4-3.6C4.2 16.1 3.5 14.4 3.5 12.5c0-3.9 3.8-7 8.5-7s8.5 3.1 8.5 7z'/%3E%3C/svg%3E");
}
.main_navigation1 a[href*="b=level"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01'/%3E%3C/svg%3E");
}
/* 배팅내역 — 영수증 */
.main_navigation1 a[href*="view/betting.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
}
/* 경기결과 — 그래프 */
.main_navigation1 a[href*="view/result.php"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16.5v-4M12.5 16.5v-8M17 16.5v-5.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16.5v-4M12.5 16.5v-8M17 16.5v-5.5'/%3E%3C/svg%3E");
}
/* 고객센터 — 헤드셋 */
.main_navigation1 a[href*="b=qna"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.8' y='13.5' width='4' height='6' rx='2'/%3E%3Crect x='17.2' y='13.5' width='4' height='6' rx='2'/%3E%3Cpath d='M20 19.5v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.8' y='13.5' width='4' height='6' rx='2'/%3E%3Crect x='17.2' y='13.5' width='4' height='6' rx='2'/%3E%3Cpath d='M20 19.5v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E");
}

/* 쪽지 개수 — 0 이 아닐 때 눈에 띄게 */
#new_memo_cnt {
	display: inline-block;
	min-width: 17px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--u-gold);
	color: #1a1206;
	font-size: 11px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}

/* ------------------------------------------------------------
   5. 왼쪽 아래 배너 — 평생 도메인 안내 · 청소년 이용불가
   ------------------------------------------------------------
   예전에는 이 자리의 이미지를 깨진 이미지로 보고 숨긴 뒤 CSS 글자로 대신 그렸다.
   그러나 이미지는 멀쩡히 있었고
   (domaining.gif = Z 평생 도메인 제트.COM · minor_deny.gif = 18 청소년이용불가)
   기존 운영 z 와 같은 파일이다. 관리자 요청(2026-09-22)에 따라 원래 이미지를
   그대로 보여준다. 크기는 common.css 의 200px / 120px 를 그대로 쓴다. */
.bannermss img, .bannermss_19 img { display: block; }

/* ------------------------------------------------------------
   6. 회원정보 바 — 보유 금액이 가장 잘 보여야 한다
   ------------------------------------------------------------ */
.user-info-arr {
	background: linear-gradient(180deg, var(--u-bg-1), var(--u-bg-0));
	border-bottom: 1px solid var(--u-line);
}
.user-info-cont {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 0;
}
.user-info01 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: auto;
}
.user-info01 > li { display: flex; align-items: center; }
.user-info01 a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 10px;
	color: var(--u-text-2);
	font-size: 13px;
	text-decoration: none;
	transition: color .2s var(--u-ease-io), background .2s var(--u-ease-io);
}
.user-info01 a:hover { color: var(--u-gold-soft); background: rgba(255,255,255,.05); }
.user-info01 img { display: none; }

/* 금액 — 숫자 폭 고정. 흔들리면 싸구려로 보인다 */
.user-info01 .mb_point,
.user-info01 .mb_mileage {
	color: var(--u-gold-soft);
	font-weight: 800;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.user-info01 #mb_nick { color: var(--u-text); font-weight: 700; }
.user-info01 .PointChange {
	border: 1px solid var(--u-line-gold);
	background: rgba(224,161,56,.07);
}

/* 공지 흐름 — 왼쪽에 점 하나 깜빡 */
.noticeText {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
	color: var(--u-text-2);
	font-size: 13px;
}
.noticeText .noticeicn {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--u-gold);
	box-shadow: 0 0 0 4px rgba(224,161,56,.15);
	animation: uiPulse 2.4s var(--u-ease-io) infinite;
}
@keyframes uiPulse {
	0%,100% { box-shadow: 0 0 0 4px rgba(224,161,56,.15); }
	50%     { box-shadow: 0 0 0 8px rgba(224,161,56,.04); }
}
.noticeText marquee { color: var(--u-text-2); }

/* ------------------------------------------------------------
   7. 로그인 팝업 — 이미지 없이도 형태가 유지되게
   ------------------------------------------------------------ */
#pop_login .modal_content {
	position: relative;
	border: 1px solid var(--u-line-2);
	border-radius: var(--u-radius-lg);
	background: linear-gradient(180deg, var(--u-bg-2), var(--u-bg-0));
	box-shadow: var(--u-shadow-lg);
}
#pop_login .logingirl, #pop_login .frm-logo { display: none; }
#pop_login h4 {
	margin: 0 0 18px;
	color: var(--u-text);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
}
#pop_login input {
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius-sm);
	background: var(--u-bg-2);
	color: var(--u-text);
	font-size: 15px;
	outline: none;
	transition: border-color .2s var(--u-ease-io), box-shadow .2s var(--u-ease-io);
}
#pop_login input:focus { border-color: var(--u-line-gold); box-shadow: var(--u-glow-gold); }
#pop_login #login-btn {
	width: 100%;
	height: 50px;
	margin-top: 6px;
	border: 0;
	border-radius: var(--u-radius-sm);
	background: linear-gradient(180deg, var(--u-gold-lite), var(--u-gold) 55%, var(--u-gold-deep));
	color: #1a1206;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(224,161,56,.25);
}
#pop_login #join-btn {
	display: block;
	margin-top: 12px;
	color: var(--u-text-2);
	font-size: 13px;
	text-align: center;
	text-decoration: none;
}
#pop_login #join-btn:hover { color: var(--u-gold-soft); }

/* ------------------------------------------------------------
   8. 좁은 화면에서 메뉴가 깨지지 않게 — 껐다 (관리자 요청 2026-09-28)

   > 창크기가 작아지더라도 위치 고정, 글자 크기, 이미지 변동 안되고
   > 기존틀 그대로 유지되게끔 부탁드립니다

   전에는 @media (max-width: 1280px) 에서 메뉴 글자를 13px → 12px 로 줄였다.
   그것이 요청서에 적힌 '글자 작아지는 현상' 이다.

   ui-site.css 끝에서 html, body 에 min-width:1400px 을 주었으므로 화면은
   1400px 아래로 좁아지지 않는다(그 아래는 가로 스크롤). 그러니 이 규칙은
   쓰이지 않아야 맞는데, 미디어쿼리는 body 폭이 아니라 **창(뷰포트) 폭**을 보므로
   창을 줄이면 그대로 발동했다. 그래서 글자만 작아졌다.

   메뉴는 이제 세로 한 줄짜리라 좁아질 일도 없다. 규칙을 지운다.
   되돌리려면 아래 주석을 풀면 된다.

   @media (max-width: 1280px) {
       .main_navigation1 li > a { padding: 7px 9px; }
       .main_navigation1 li > a .txt { font-size: 12px; }
   }
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.noticeText .noticeicn { animation: none; }
}


/* ------------------------------------------------------------
   왼쪽 메뉴 스크롤 (2026-09-20 관리자 요청)

   메뉴 항목이 많아 전체 높이가 1,200px 가까이 된다. 화면이 그보다 낮으면
   **페이지 전체를 내려야** 아래쪽(로또·이벤트·배팅내역)이 보였다.
   기존 z 처럼 **메뉴 칸은 화면 높이에 맞추고 그 안에서만** 스크롤되게 한다.
   (스크롤 막대는 기존과 같이 숨긴 채 휠·드래그로 움직인다 — common.css 의
    `.header::-webkit-scrollbar{display:none}` 를 그대로 둔다)
   ------------------------------------------------------------ */
.header-arr {
	height: 100vh;
	max-height: 100vh;
}
.header-arr .header {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;   /* 메뉴 끝까지 내려도 페이지가 따라 움직이지 않게 */
}