@charset "utf-8";
/* ============================================================
   ui-site.css  —  세부 페이지 공통 틀
   입금·출금·마이페이지·배팅내역·게시판 등 안쪽 화면 전부에 적용된다.

   이 파일 하나로 모든 세부 페이지의 느낌을 맞춘다.
   화면마다 CSS 를 따로 만들지 않는다 — 만들면 반드시 서로 어긋난다.

   common.css 뒤에 읽혀 덮어쓴다. common.css 는 수정하지 않았다.
   대부분의 규칙을 .sub_content_arr (세부 페이지의 바깥 껍데기) 안으로 한정해
   메인 화면에는 영향을 주지 않는다.
   ============================================================ */

/* ------------------------------------------------------------
   1. 페이지 껍데기 — 카드 한 장 위에 내용이 올라간다
   ------------------------------------------------------------ */
.sub_content_arr {
	max-width: 1360px;
	margin: 22px auto 40px;
	padding: 26px 28px 30px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	background: var(--u-bg-1);
	color: var(--u-text);
	box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------
   2. 페이지 제목
   ------------------------------------------------------------ */
.sub_content_arr .subTitle_arr {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--u-line);
	color: var(--u-text);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.025em;
}
/* 제목 왼쪽 금색 막대 */
.sub_content_arr .subTitle_arr::before {
	content: "";
	flex: 0 0 3px;
	width: 3px;
	height: 17px;
	border-radius: 2px;
	background: var(--u-gold);
}
/* ★★ 2026-08-31 — 금색 막대가 제목 글자 **위에** 겹쳐 보이던 문제
     (사용자 지적: "입금 누르면 '충전하기' 의 '충' 자리에 노란 세로줄이 껴 있다")

     원인은 막대가 아니라 **제목 자신**이었다.
     `h2` 가 옛 CSS 에서 `position: absolute` 였다. 그래서 이 줄을 flex 로 만들어도
     제목은 흐름에서 빠져 **막대 자리부터 겹쳐 그려졌다.**
     실측 — 줄은 `left=285`, 제목은 `left=267`(18px 왼쪽) · `top` 도 20px 위였다.

     흐름으로 되돌리면 막대 → 제목 순서로 나란히 놓인다.
     글자 크기도 옛 값(25px / 줄높이 50px)이라 줄이 두꺼웠다 →
     게시판 제목(.subTitle_notice, 19px)과 같은 크기로 맞춘다. */
.sub_content_arr .subTitle_arr h2,
.sub_content_arr .subTitle_notice h2 {
	position: static !important;
	width: auto !important;
	height: auto !important;      /* 옛 CSS 가 50px 로 묶어 두어 제목 줄이 혼자 두꺼웠다 */
	margin: 0 !important;
	padding: 0 !important;
	font-size: 19px !important;
	line-height: 1.35 !important;
}
.sub_content_arr .titletext {
	color: var(--u-text-2);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.01em;
}

/* ------------------------------------------------------------
   3. 표 — 세부 페이지의 대부분이 표다. 여기가 제일 중요하다.
   ------------------------------------------------------------ */
.sub_content_arr table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius-sm);
	background: var(--u-bg-0);
	font-size: 13.5px;
}
.sub_content_arr thead th,
.sub_content_arr th {
	padding: 12px 12px;
	border-bottom: 1px solid var(--u-line);
	background: var(--u-bg-2);
	color: var(--u-text-2);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;
}
.sub_content_arr td {
	padding: 12px 12px;
	border-bottom: 1px solid rgba(255,255,255,.05);
	color: var(--u-text);
	text-align: center;
	vertical-align: middle;
	line-height: 1.55;
}
.sub_content_arr tbody tr:last-child td { border-bottom: 0; }
/* ⚠ `background` (묶음 속성) 이 아니라 반드시 `background-color` 를 쓴다.
   묶음으로 쓰면 그 칸에 원래 있던 `background-image` 까지 지워져,
   마우스를 올린 행만 색이 사라진다 (배팅내역에서 배팅한 칸의 금색이 사라졌다). */
.sub_content_arr tbody tr:hover td { background-color: rgba(255,255,255,.025); }

/* 금액·날짜처럼 자릿수가 맞아야 하는 것 */
.sub_content_arr td, .sub_content_arr th { font-variant-numeric: tabular-nums; }

/* 표가 넓으면 표만 좌우로 넘긴다. 화면 전체가 밀리지 않게 */
.sub_content_arr .table_scroll { overflow-x: auto; }

/* ------------------------------------------------------------
   4. 입력칸 · 선택상자
   ------------------------------------------------------------ */
.sub_content_arr input[type="text"],
.sub_content_arr input[type="password"],
.sub_content_arr input[type="number"],
.sub_content_arr input[type="tel"],
.sub_content_arr input[type="email"],
.sub_content_arr input[type="date"],
.sub_content_arr select,
.sub_content_arr textarea,
.sub_content_arr .bg_input,
.sub_content_arr .input0319,
.sub_content_arr .money_input {
	height: 42px;
	padding: 0 13px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: 9px;
	background: var(--u-bg-2);
	color: var(--u-text);
	font-size: 14px;
	outline: none;
	transition: border-color .18s var(--u-ease-io), box-shadow .18s var(--u-ease-io), background .18s var(--u-ease-io);
}
.sub_content_arr textarea { height: auto; min-height: 120px; padding: 12px 13px; line-height: 1.7; resize: vertical; }
.sub_content_arr input::placeholder,
.sub_content_arr textarea::placeholder { color: var(--u-text-3); }
.sub_content_arr input:hover,
.sub_content_arr select:hover,
.sub_content_arr textarea:hover { border-color: var(--u-line-2); }
.sub_content_arr input:focus,
.sub_content_arr select:focus,
.sub_content_arr textarea:focus {
	border-color: var(--u-line-gold);
	background: var(--u-bg-3);
	box-shadow: var(--u-ring);
}
/* 금액 칸은 숫자가 커야 읽힌다 */
.sub_content_arr .money, .sub_content_arr .money_input {
	font-size: 16px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.sub_content_arr input:-webkit-autofill,
.sub_content_arr input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--u-text);
	-webkit-box-shadow: 0 0 0 1000px var(--u-bg-3) inset;
	caret-color: var(--u-text);
}

/* ------------------------------------------------------------
   5. 버튼 — 색으로 역할을 구분한다
        노랑 = 실행(신청·저장)  ·  파랑 = 보조  ·  회색 = 선택지  ·  빨강 = 취소
   ------------------------------------------------------------ */
.sub_content_arr .ui_btn_yellow,
.sub_content_arr .ui_btn_blue,
.sub_content_arr .ui_btn_gray,
.sub_content_arr .ui_btn_red,
.sub_content_arr button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .16s var(--u-ease-io), border-color .16s var(--u-ease-io),
	            color .16s var(--u-ease-io), transform .12s var(--u-ease-io);
}
.sub_content_arr .ui_btn_yellow {
	background: var(--u-gold); color: #1B1305; font-weight: 700;
}
.sub_content_arr .ui_btn_yellow:hover { background: #edb04c; }

.sub_content_arr .ui_btn_blue {
	background: rgba(255,255,255,.06); border-color: var(--u-line-2); color: var(--u-text);
}
.sub_content_arr .ui_btn_blue:hover { background: rgba(255,255,255,.10); }

.sub_content_arr .ui_btn_gray {
	background: var(--u-bg-2); border-color: var(--u-line); color: var(--u-text-2);
}
.sub_content_arr .ui_btn_gray:hover { border-color: var(--u-line-gold); color: var(--u-gold-soft); }

.sub_content_arr .ui_btn_red {
	background: rgba(196,85,61,.14); border-color: rgba(196,85,61,.45); color: #E39075;
}
.sub_content_arr .ui_btn_red:hover { background: rgba(196,85,61,.22); }

.sub_content_arr .ui_btn_yellow:active,
.sub_content_arr .ui_btn_blue:active,
.sub_content_arr .ui_btn_gray:active,
.sub_content_arr .ui_btn_red:active { transform: translateY(1px); }

/* 아래쪽에 모여 있는 실행 버튼들 */
.sub_content_arr .cash_bottom_btn {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/* ------------------------------------------------------------
   6. 탭
   ------------------------------------------------------------ */
.sub_content_arr .tabmenu01 {
	display: flex;
	gap: 6px;
	float: none !important;
	margin-bottom: 16px;
	padding: 0 !important;
	color: var(--u-text-2) !important;
	font-size: 13.5px !important;
}
.sub_content_arr .tabmenu01 a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 15px;
	border: 1px solid var(--u-line);
	border-radius: 999px;
	color: var(--u-text-2);
	text-decoration: none;
	transition: border-color .16s var(--u-ease-io), color .16s var(--u-ease-io), background .16s var(--u-ease-io);
}
.sub_content_arr .tabmenu01 a:hover { color: var(--u-gold-soft); border-color: var(--u-line-gold); }
.sub_content_arr .tabmenu01 a.on,
.sub_content_arr .tabmenu01 a.active {
	background: rgba(224,161,56,.13);
	border-color: var(--u-line-gold);
	color: var(--u-gold-soft);
	font-weight: 600;
}

/* ------------------------------------------------------------
   7. 안내 문구 · 주의 상자
   ------------------------------------------------------------ */
.sub_content_arr .info {
	padding: 14px 16px;
	border: 1px solid var(--u-line);
	border-left: 3px solid var(--u-gold);
	border-radius: 8px;
	background: rgba(224,161,56,.05);
	color: var(--u-text-2);
	font-size: 13px;
	line-height: 1.75;
}

/* 내용이 없을 때 */
.sub_content_arr .empty,
.sub_content_arr td.empty {
	padding: 40px 0;
	color: var(--u-text-3);
	font-size: 13.5px;
	text-align: center;
}

/* ------------------------------------------------------------
   8. 페이지 번호
   ------------------------------------------------------------ */
.sub_content_arr .paging,
.sub_content_arr .pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 20px;
}
.sub_content_arr .paging a,
.sub_content_arr .pagination a,
.sub_content_arr .paging strong,
.sub_content_arr .pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	border: 1px solid var(--u-line);
	border-radius: 8px;
	color: var(--u-text-2);
	font-size: 13px;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.sub_content_arr .paging a:hover,
.sub_content_arr .pagination a:hover { border-color: var(--u-line-gold); color: var(--u-gold-soft); }
.sub_content_arr .paging strong,
.sub_content_arr .pagination strong {
	background: rgba(224,161,56,.13);
	border-color: var(--u-line-gold);
	color: var(--u-gold-soft);
}

/* ------------------------------------------------------------
   9. 링크 · 잔글씨
   ------------------------------------------------------------ */
.sub_content_arr a { color: var(--u-text); }
.sub_content_arr a:hover { color: var(--u-gold-soft); }
.sub_content_arr .cont_back_arr01 { background: none; border: 0; }

/* ------------------------------------------------------------
   10. 좁은 화면
   ------------------------------------------------------------ */
@media (max-width: 1400px) {
	.sub_content_arr { margin: 16px 16px 30px; padding: 20px 18px 24px; }
}

/* ============================================================
   11. 껍데기를 안 쓰는 화면까지 덮기
       게시판(board.php)처럼 .sub_content_arr 를 쓰지 않는 화면이 있다.
       입력칸과 버튼은 본문 영역(.sub_content_arr_bg) 전체에 적용해 빠뜨리지 않는다.
       메인 화면(.main-page)에는 입력칸·이 버튼들이 없어 영향이 없다.
   ============================================================ */
.sub_content_arr_bg input[type="text"],
.sub_content_arr_bg input[type="password"],
.sub_content_arr_bg input[type="number"],
.sub_content_arr_bg select,
.sub_content_arr_bg textarea {
	border: 1px solid var(--u-line);
	border-radius: 9px;
	background: var(--u-bg-2);
	color: var(--u-text);
	outline: none;
}
/* 상단 줄 로그인 칸은 ui-open.css 가 따로 맡는다 (여기서 건드리지 않는다) */
.hd-login input { border-radius: 9px; }

/* ★ 읽기 전용 칸이 흰색으로 뜨던 문제
     코드에 style="background:#ddd" 가 직접 박혀 있어 CSS 로는 못 이겼다.
     읽기 전용이라는 것은 색이 아니라 흐린 글자와 점선 테두리로 알린다. */
.sub_content_arr_bg input[readonly],
.sub_content_arr_bg input[disabled],
.sub_content_arr_bg textarea[readonly] {
	background: rgba(255,255,255,.04) !important;
	border: 1px dashed var(--u-line-2) !important;
	color: var(--u-text-2) !important;
	cursor: default;
	-webkit-text-fill-color: var(--u-text-2);
	opacity: 1;
}

/* ------------------------------------------------------------
   12. 버튼 — 이 사이트에는 이름이 다른 두 벌이 섞여 있다
        buttons.css 의 .ui-button_*  ·  화면 코드의 .ui_btn_*
        둘 다 같은 모양으로 맞춘다.
   ------------------------------------------------------------ */
.sub_content_arr_bg [class*="ui-button_"],
.sub_content_arr_bg [class*="ui_btn_"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .16s var(--u-ease-io), border-color .16s var(--u-ease-io),
	            color .16s var(--u-ease-io), transform .12s var(--u-ease-io);
}
.sub_content_arr_bg [class*="ui-button_"]:active,
.sub_content_arr_bg [class*="ui_btn_"]:active { transform: translateY(1px); }

/* 빨강 = 신청·실행 (이 사이트가 원래 쓰던 뜻을 그대로 둔다. 색만 다듬는다) */
.sub_content_arr_bg .ui-button_red,
.sub_content_arr_bg .ui_btn_red {
	background: linear-gradient(180deg, #C6503A, #A33A26) !important;
	border-color: rgba(255,255,255,.10) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(163,58,38,.28);
}
.sub_content_arr_bg .ui-button_red:hover,
.sub_content_arr_bg .ui_btn_red:hover { background: linear-gradient(180deg, #D45C45, #B2422C) !important; }

/* 노랑 = 확인·저장 */
.sub_content_arr_bg .ui-button_yellow,
.sub_content_arr_bg .ui_btn_yellow {
	background: var(--u-gold) !important;
	border-color: transparent !important;
	color: #1B1305 !important;
}
.sub_content_arr_bg .ui-button_yellow:hover,
.sub_content_arr_bg .ui_btn_yellow:hover { background: #edb04c !important; }

/* 파랑 = 보조 */
.sub_content_arr_bg .ui-button_blue,
.sub_content_arr_bg .ui_btn_blue {
	background: rgba(255,255,255,.06) !important;
	border-color: var(--u-line-2) !important;
	color: var(--u-text) !important;
	font-weight: 600;
}
.sub_content_arr_bg .ui-button_blue:hover,
.sub_content_arr_bg .ui_btn_blue:hover { background: rgba(255,255,255,.11) !important; }

/* 회색 = 금액 선택 같은 보기 버튼 */
.sub_content_arr_bg .ui-button_gray,
.sub_content_arr_bg .ui_btn_gray {
	min-height: 38px;
	padding: 0 15px;
	background: var(--u-bg-2) !important;
	border-color: var(--u-line) !important;
	color: var(--u-text-2) !important;
	font-weight: 600;
	font-size: 13px;
}
.sub_content_arr_bg .ui-button_gray:hover,
.sub_content_arr_bg .ui_btn_gray:hover {
	border-color: var(--u-line-gold) !important;
	color: var(--u-gold-soft) !important;
}

/* 버튼 묶음 정렬 */
.sub_content_arr_bg .cash_bottom_btn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ============================================================
   13. 세부 화면을 눈으로 확인하고 고친 것 (2026-08-30, UI ④)
       16개 화면을 실제로 캡처해 보고 발견한 문제만 담는다.
       원칙은 그대로다 — 마크업은 지우지 않고 CSS 로 처리한다.
   ============================================================ */

/* ------------------------------------------------------------
   13-1. 없는 이미지가 "깨진 그림" 아이콘으로 보이던 것
        디자인은 새로 만들기로 했으므로 옛 이미지는 앞으로도 없다.
        따라서 이미지를 채우는 게 아니라 이미지 없이 성립하게 만든다.
   ------------------------------------------------------------ */

/* 화면 맨 아래 장식 띠 — 이미지가 전부였다. 없으면 띠 자체가 필요 없다 */
#footer .footer-png { display: none !important; }
#footer { min-height: 0; padding: 0; }

/* 환전 화면 롤링 카드의 종목 아이콘
   라벨(조합/스페셜·미니게임…)이 바로 옆에 있다. 라벨이 있는 자리에 아이콘을 또 넣지 않는다 */
.sub_content_arr img.progress_icon { display: none !important; }

/* 출석체크 달력의 도장 (2026-09-20 관리자 요청으로 되돌림)
   예전에는 그림이 없어 깨져 보였기에 금색 체크(✓)로 대신 그렸다.
   이제 기존 z 의 도장 그림(stamp.png / stamp_off.png · 66x66)이 들어와 있으므로
   **기존 사이트와 같이 출석 / 결석 도장**을 그대로 보여 준다. */
.sub_content_arr div:has(> img[src*="/att/stamp"]) {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
}
.sub_content_arr img[src*="/att/stamp"] {
	display: inline-block !important;
	width: 46px;
	height: 46px;
}

/* ------------------------------------------------------------
   13-2. 로또 번호가 배경에 묻혀 보이지 않던 것
        번호를 공 이미지로 그리던 화면이다. 이미지가 없으니 숫자만 남아
        어두운 바탕에 어두운 글자가 되어 사실상 안 보였다.
        → 이미지 없이 원형 번호로 그린다. (원판·돼지 그림 등은 ⑤ 시안에서 다시 만든다)
   ------------------------------------------------------------ */
.sub_content_arr .lot_wrap img { display: none !important; }
.sub_content_arr .lot_wrap .pannel_bg,
.sub_content_arr .lot_wrap .pannel {
	background: none !important;
	border: 0 !important;
}
.sub_content_arr .lot_wrap .num {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 4px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: 50%;
	background: var(--u-bg-2) !important;
	color: var(--u-text-2) !important;
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-indent: 0 !important;
	cursor: pointer;
	transition: border-color .16s var(--u-ease-io), color .16s var(--u-ease-io), background .16s var(--u-ease-io);
}
.sub_content_arr .lot_wrap .select .num:hover {
	border-color: var(--u-line-gold);
	color: var(--u-gold-soft);
}
/* 뽑힌 번호 · 당첨 번호 */
.sub_content_arr .lot_wrap .num.on,
.sub_content_arr .lot_wrap .num.sel {
	background: var(--u-gold) !important;
	border-color: transparent !important;
	color: #1B1305 !important;
	font-weight: 700;
}
/* 보너스 번호는 한 눈에 구분되게 테두리만 */
.sub_content_arr .lot_wrap .result_bonus .num.on {
	background: transparent !important;
	border: 1px solid var(--u-line-gold) !important;
	color: var(--u-gold-soft) !important;
}
/* 당첨번호와 보너스 사이 "+" — plus.png 자리 */
.sub_content_arr .lot_wrap .plus { display: inline-flex; align-items: center; padding: 0 10px; }
.sub_content_arr .lot_wrap .plus::after { content: "+"; color: var(--u-text-3); font-size: 16px; }

/* 당첨번호 여섯 개가 한 줄에 들어가지 않아 마지막 번호가 아래로 밀려 겹쳤다.
   폭에 맞춰 접히지 않게 한 줄로 고정한다. */
.sub_content_arr .lot_wrap .result {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 0;
	padding: 8px 0 4px;
}
.sub_content_arr .lot_wrap .result_num,
.sub_content_arr .lot_wrap .result_bonus {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	width: auto !important;
	height: auto !important;
}
/* 번호판(1~45)은 아홉 칸씩 다섯 줄로 가지런히.
   ★ 원래는 배경 그림 크기에 맞춰 높이가 고정돼 있었다. 그림이 없으면
     번호가 그 높이를 넘쳐 아래 버튼에 가려진다. 부모의 고정 높이부터 푼다. */
.sub_content_arr .lot_wrap .pannel_bg,
.sub_content_arr .lot_wrap .pannel,
.sub_content_arr .lot_wrap .wrap,
.sub_content_arr .lot_wrap .lot_wrap2 {
	position: static !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}
.sub_content_arr .lot_wrap { min-height: 0 !important; height: auto !important; }
.sub_content_arr .lot_wrap .select {
	display: grid !important;
	grid-template-columns: repeat(9, 42px);
	justify-content: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	margin: 18px auto 22px;
	padding: 0 !important;
}
.sub_content_arr .lot_wrap .select .num { margin: 0; }
/* 화면 위쪽을 크게 차지하던 장식 그림 자리 */
.sub_content_arr .lot_wrap .pig { display: none !important; }
/* 구매 버튼도 다른 버튼과 같이 단색으로 (광택·이중 테두리를 뺀다) */
.sub_content_arr .lot_wrap .btn_lotto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border: 1px solid transparent !important;
	border-radius: var(--u-radius-sm);
	background: var(--u-gold) !important;
	color: #1B1305 !important;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.sub_content_arr .lot_wrap .btn_lotto:hover { background: #edb04c !important; filter: none !important; }

/* ------------------------------------------------------------
   13-8. 환전 화면 롤링 진행바가 새하얘서 혼자 튀었다
        진행률은 금색으로, 바탕은 어둡게. 글자는 바 위에 얹는다.
   ------------------------------------------------------------ */
.sub_content_arr .progress {
	position: relative;
	overflow: hidden;
	height: 26px;
	border: 1px solid var(--u-line) !important;
	border-radius: 999px !important;
	background: var(--u-bg-2) !important;
}
.sub_content_arr .progress .ing {
	height: 100%;
	background: rgba(224,161,56,.35) !important;
	border-radius: 999px 0 0 999px;
}
.sub_content_arr .progress .txt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--u-text) !important;
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.sub_content_arr .progress_box > div:first-child {
	margin-bottom: 7px;
	color: var(--u-text-2);
	font-size: 13px;
	text-align: center;
}

/* ------------------------------------------------------------
   13-3. 내역이 하나도 없을 때 표 머리만 덩그러니 남던 것
        캐쉬내역·포인트내역·쪽지함·고객센터가 그랬다.
        행(td)이 하나도 없는 표에만 안내를 띄운다. 행이 생기면 저절로 원래 표로 돌아간다.
   ------------------------------------------------------------ */
.sub_content_arr table.bbs-list:not(:has(td)) {
	display: block;
	padding: 38px 0;
	border-top: 0;
	border-radius: 0 0 var(--u-radius-sm) var(--u-radius-sm);
	text-align: center;
}
.sub_content_arr table.bbs-list:not(:has(td))::after {
	content: "내역이 없습니다.";
	color: var(--u-text-3);
	font-size: 13.5px;
}
/* 표 머리와 본문이 두 개의 표로 나뉘어 있는 화면이 많다. 사이가 벌어지지 않게 붙인다 */
.sub_content_arr table.topth { border-radius: var(--u-radius-sm) var(--u-radius-sm) 0 0; border-bottom: 0; }
.sub_content_arr table.topth + table.bbs-list { border-radius: 0 0 var(--u-radius-sm) var(--u-radius-sm); border-top: 0; }

/* ------------------------------------------------------------
   13-4. 게시판 제목만 다른 화면과 모양이 달랐다
        게시판은 .subTitle_arr 가 아니라 .subTitle_notice 를 쓴다.
        같은 모양으로 맞춘다 (왼쪽 금색 막대 + 아래 구분선).
   ------------------------------------------------------------ */
.sub_content_arr .subTitle_notice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--u-line);
}
.sub_content_arr .subTitle_notice::before {
	content: "";
	flex: 0 0 3px;
	width: 3px;
	height: 17px;
	border-radius: 2px;
	background: var(--u-gold);
}
.sub_content_arr .subTitle_notice h2 {
	margin: 0;
	color: var(--u-gold);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.025em;
}
.sub_content_arr .subTitle_notice h2 small {
	margin-left: 6px;
	color: var(--u-text);
	font-size: 15px;
	font-weight: 700;
}

/* ------------------------------------------------------------
   13-5. 버튼에서 광택을 뺀다
        빨강 버튼만 그라데이션과 짙은 그림자가 남아 있어 혼자 튀었다.
        "효과를 겹치지 않는다 · 버튼은 단색" 이라는 기준에 맞춘다.
   ------------------------------------------------------------ */
.sub_content_arr_bg .ui-button_red,
.sub_content_arr_bg .ui_btn_red {
	background: #B4452F !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
}
.sub_content_arr_bg .ui-button_red:hover,
.sub_content_arr_bg .ui_btn_red:hover { background: #C4503A !important; }

/* ------------------------------------------------------------
   13-6. 빨간 글씨가 너무 강했다
        금액·주의 문구를 새빨간색으로 찍어 화면이 소란스러웠다.
        읽히되 튀지 않는 톤으로 낮춘다. (코드에 색이 직접 박혀 있어 !important 가 필요하다)
   ------------------------------------------------------------ */
.sub_content_arr font[color="red"],
.sub_content_arr font[color="#ff0000"],
.sub_content_arr font[color="#FF0000"],
.sub_content_arr .red,
.sub_content_arr .txt_red { color: #E08A70 !important; }

/* ------------------------------------------------------------
   13-7. 룰렛 화면 가운데가 크게 비어 있던 것
        ★ ⑤(2026-08-30)에서 원판을 실제로 만들었다.
          여기 있던 임시 규칙(.roul_area 의 height:auto !important)은
          새 원판의 크기(340px)를 막아서 지웠다.
          룰렛은 이제 pc/css/roulette.css 한 곳에서만 그린다.
   ------------------------------------------------------------ */

/* ============================================================
   14. 게임 화면 — 복권 · 황금복권 · 로또 (2026-08-31, UI ⑤)
       고른 시안: "라 · 보드" — 왼쪽은 조작, 오른쪽은 정보.
       룰렛만 시안 "나 · 드럼" 이고 전용 파일(pc/css/roulette.css)에서 그린다.

       세 화면 모두 "없는 그림"에 기대고 있었다.
       그림을 채우는 대신, 그림 없이 성립하도록 자리를 다시 잡는다.
   ============================================================ */

/* ------------------------------------------------------------
   14-1. 복권 · 황금복권 — 왼쪽 긁는 면 / 오른쪽 정보와 버튼

       옛 배치: 704×275 그림 상자 안에 긁는 면과 버튼이 절대좌표로
                겹쳐 있었다. 그림이 없으니 회색 네모 하나와 겹친 버튼만 남았다.

       ★ 왼쪽 칸 폭(460px)은 캔버스 크기와 같아야 한다.
         캔버스는 뷰에서 width="460" height="250" 으로 박혀 있고,
         화면 표시 크기가 그와 1:1 이라야 긁는 좌표가 맞는다.

       ★ 캔버스에 transform 을 쓰면 안 된다 —
         좌표 계산(getMouse)이 offsetLeft 를 쓰는데 transform 은 거기 반영되지 않는다.
   ------------------------------------------------------------ */
.sub_content_arr .lottery_area,
.sub_content_arr .gold_lottery_area {
	margin: 0;
	display: block;
}

.sub_content_arr .lottery_area .lottery_wrap,
.sub_content_arr .gold_lottery_area .lottery_wrap {
	position: relative;
	display: grid;
	grid-template-columns: 460px minmax(0, 1fr);
	gap: 12px 20px;
	justify-content: center;
	align-content: start;
	margin: 0 auto !important;
	width: 100% !important;
	max-width: 940px;
	height: auto !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* 긁기 전이라는 표시 — 옛 규칙은 검은 막으로 상자 전체를 덮어 버튼까지 가렸다.
   막 대신 덮개를 어둡게 죽인다. 배치에 전혀 영향을 주지 않는다 */
.sub_content_arr .lottery_area .lottery_wrap.blind:before,
.sub_content_arr .gold_lottery_area .lottery_wrap.blind:before { display: none !important; }
.sub_content_arr .lottery_area .lottery_wrap.blind .cvs_lottery,
.sub_content_arr .gold_lottery_area .lottery_wrap.blind .cvs_lottery { filter: brightness(.55); }

/* 결과가 드러나는 면 — 옛 값은 background:#ddd (그 회색 네모다) */
.sub_content_arr .lottery_area .lottery_wrap .secret_wrap,
.sub_content_arr .gold_lottery_area .lottery_wrap .secret_wrap {
	position: relative !important;
	grid-column: 1;
	grid-row: 1 / span 4;
	align-self: start;
	top: auto !important;
	right: auto !important;
	width: 460px !important;
	height: 250px !important;
	box-sizing: border-box;          /* 테두리를 크기 안쪽에 둔다 — 덮개(460x250)와 딱 맞게 */
	background: var(--u-bg-1) !important;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	gap: 8px;
}
.sub_content_arr .lottery_area .lottery_wrap .secret_wrap p,
.sub_content_arr .gold_lottery_area .lottery_wrap .secret_wrap p {
	margin: 0;
	color: var(--u-text) !important;
}
.sub_content_arr .lottery_area .lottery_wrap .secret_wrap .tit,
.sub_content_arr .gold_lottery_area .lottery_wrap .secret_wrap .tit {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
}
.sub_content_arr .lottery_area .lottery_wrap .secret_wrap .lottery_money,
.sub_content_arr .gold_lottery_area .lottery_wrap .secret_wrap .lottery_money {
	padding-top: 0;
	color: var(--u-gold) !important;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* 덮개(캔버스) — 긁는 면과 정확히 같은 자리·같은 크기
   ★ 2026-09-20 — absolute(top/left 0) 였는데, 격자가 가운데 정렬이라
     결과 칸은 0 이 아닌 자리에 있었다. 그래서 덮개만 왼쪽으로 삐져나가 보였고,
     긁으면 그 아래에 결과 칸이 없어 **검게** 보였다.
     결과 칸과 **같은 격자 칸**에 넣어 항상 겹치게 한다.
     (relative 라서 offsetLeft 가 제 위치를 알려 준다 — 마우스 좌표 계산이 맞는다) */
.sub_content_arr .lottery_area .lottery_wrap .cvs_lottery,
.sub_content_arr .gold_lottery_area .lottery_wrap .cvs_lottery {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	grid-column: 1;
	grid-row: 1 / span 4;
	align-self: start;
	justify-self: start;
	width: 460px;
	height: 250px;
	border-radius: var(--u-radius);
	z-index: 1;
	cursor: crosshair;
}

/* ---- 오른쪽 정보 칸 ---- */
.sub_content_arr .lot_info {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* 보유수량 — 굵은 알약이었다. 카드 한 장으로.
   ★ 세로로 쌓지 않는다. 복권 쪽 마크업이
     "복권 보유수량 : " + <span>N</span> + "개"  로 되어 있어서
     세로로 쌓으면 글자 조각마다 한 줄씩 차지해 세 줄로 쪼개진다.
     한 줄에 밑선을 맞춰 늘어놓는다 */
.sub_content_arr .lottery_area .lottery_count,
.sub_content_arr .gold_lottery_area .lottery_count {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	gap: 0 7px;
	margin: 0 !important;
	padding: 15px 18px !important;
	width: auto !important;
	height: auto !important;
	background: var(--u-bg-1) !important;
	border: 1px solid var(--u-line) !important;
	border-radius: var(--u-radius-sm) !important;
	color: var(--u-text-3) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: .13em;
	text-align: left !important;
}
/* 황금복권은 라벨 글자가 배경 그림 안에 들어 있었다. 그림이 없으니 숫자만 남는다 */
.sub_content_arr .gold_lottery_area .lottery_count::before { content: "황금복권 보유수량 :"; }
.sub_content_arr .lottery_area .lottery_count span,
.sub_content_arr .gold_lottery_area .lottery_count span {
	padding-right: 0 !important;
	color: var(--u-gold);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

/* 직전 결과 */
.sub_content_arr .lot_last {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 18px;
	background: var(--u-bg-1);
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius-sm);
}
.sub_content_arr .lot_last_lb {
	color: var(--u-text-3);
	font-size: 11px;
	letter-spacing: .13em;
}
.sub_content_arr .lot_last b { color: var(--u-text); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sub_content_arr .lot_last_dt { color: var(--u-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---- 오른쪽 버튼들 ---- */
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery1_wrap,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery1_wrap {
	position: static !important;
	grid-column: 2;
	grid-row: 2;
	z-index: auto;
}
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery2_wrap,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery2_wrap {
	position: static !important;
	grid-column: 2;
	grid-row: 3;
	z-index: auto;
}
.sub_content_arr .lottery_area .btn_lottery_next_wrap,
.sub_content_arr .gold_lottery_area .btn_lottery_next_wrap {
	grid-column: 2;
	grid-row: 4;
	margin: 0;
	width: auto;
}
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery1,
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery2,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery1,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery2,
.sub_content_arr .lottery_area .btn_lottery_next,
.sub_content_arr .gold_lottery_area .btn_lottery_next {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: static !important;
	margin: 0 !important;
	padding: 0 14px !important;
	width: 100% !important;
	height: 52px !important;
	background: var(--u-bg-2) !important;
	border: 1px solid var(--u-line-2) !important;
	border-radius: var(--u-radius-sm) !important;
	box-shadow: none !important;
	color: var(--u-text) !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background .16s var(--u-ease-io), border-color .16s var(--u-ease-io);
}
/* 첫 버튼(복권긁기)이 주된 동작이다 */
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery1,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery1 {
	background: var(--u-gold) !important;
	border-color: transparent !important;
	color: #1B1305 !important;
	font-weight: 700 !important;
}
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery1:hover,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery1:hover {
	background: #edb04c !important; box-shadow: none !important; transform: none !important;
}
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery2:hover,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery2:hover,
.sub_content_arr .lottery_area .btn_lottery_next:hover,
.sub_content_arr .gold_lottery_area .btn_lottery_next:hover {
	background: var(--u-bg-3) !important; border-color: var(--u-line-gold) !important;
	box-shadow: none !important; transform: none !important;
}
/* 황금복권 버튼은 글자가 두 줄(div 두 개)로 들어 있다 */
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery1 > div,
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery2 > div,
.sub_content_arr .gold_lottery_area .btn_lottery_next > div {
	display: inline; background: none; font-size: inherit; line-height: inherit;
}

/* 내역 표는 아래로 충분히 띄운다 */
.sub_content_arr .lottery .lottery_table,
.sub_content_arr .gold_lottery .lottery_table { margin-top: 34px !important; }

/* 좁은 화면에서는 위아래로 쌓는다 */
@media (max-width: 900px) {
	.sub_content_arr .lottery_area .lottery_wrap,
	.sub_content_arr .gold_lottery_area .lottery_wrap {
		grid-template-columns: 460px;
	}
	.sub_content_arr .lottery_area .lottery_wrap .secret_wrap,
	.sub_content_arr .gold_lottery_area .lottery_wrap .secret_wrap { grid-row: 1; }
	.sub_content_arr .lot_info { grid-column: 1; grid-row: 2; }
	.sub_content_arr .lottery_area .lottery_wrap .btn_lottery1_wrap,
	.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery1_wrap { grid-column: 1; grid-row: 3; }
	.sub_content_arr .lottery_area .lottery_wrap .btn_lottery2_wrap,
	.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery2_wrap { grid-column: 1; grid-row: 4; }
	.sub_content_arr .lottery_area .btn_lottery_next_wrap,
	.sub_content_arr .gold_lottery_area .btn_lottery_next_wrap { grid-column: 1; grid-row: 5; }
}

/* ------------------------------------------------------------
   14-2. 로또 — 왼쪽 번호판 / 오른쪽 회차 정보와 고른 번호

       옛 배치: 뷰(lotto.php)에 인라인 스타일이 박혀 있다.
                background:url(../images/lotto/bg.png) 과 padding-top:160px.
                그림이 없으니 화면 위쪽 3분의 1이 통째로 빈 칸이 됐다.
       ★ 마크업은 지우지 않는다 (프로젝트 규칙). CSS 로 덮는다.
   ------------------------------------------------------------ */
.sub_content_arr div[style*="lotto/bg.png"] { background: none !important; }
.sub_content_arr div[style*="padding-top:160px"] { padding-top: 0 !important; margin-left: 0 !important; }
/* 화면 전체가 오른쪽으로 밀려 있던 것 (left:3.5%) */
.sub_content_arr .lot_wrap { left: 0 !important; }

/* ★ .pannel 과 .wrap 을 상자에서 없애 자식들이 .pannel_bg 격자에 직접 놓이게 한다.
     (당첨결과·번호판은 .wrap 안, 구매버튼·고른번호는 .pannel_bg 안에 있어
      그대로는 한 격자에 넣을 수 없다) */
.sub_content_arr .lot_wrap .pannel,
.sub_content_arr .lot_wrap .pannel .wrap { display: contents !important; }

.sub_content_arr .lot_wrap .pannel_bg {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 14px 22px;
	align-content: start;
	text-align: left;
}

/* 왼쪽 — 번호판 */
.sub_content_arr .lot_wrap .select {
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: start;
	display: grid !important;
	grid-template-columns: repeat(9, 46px) !important;
	justify-content: center;
	align-content: start;
	gap: 8px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 20px !important;
	background: var(--u-bg-1);
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
}
.sub_content_arr .lot_wrap .select .num {
	margin: 0 !important;
	width: 46px !important;
	height: 46px !important;
	font-size: 15px !important;
}
.sub_content_arr .lot_wrap .select::before {
	content: "번호 6개를 고르세요";
	grid-column: 1 / -1;
	margin-bottom: 4px;
	color: var(--u-text-3);
	font-size: 11px;
	letter-spacing: .13em;
}

/* 오른쪽 1 — 지난 회차 당첨결과 */
.sub_content_arr .lot_wrap .result {
	grid-column: 2;
	grid-row: 1;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px 8px;
	margin: 0;
	padding: 16px 18px !important;
	width: auto !important;
	background: var(--u-bg-1);
	border: 1px solid var(--u-line);
	border-bottom: 1px solid var(--u-line) !important;
	border-radius: var(--u-radius);
}
.sub_content_arr .lot_wrap .result .inline:first-child {
	flex: 0 0 100%;
	margin-right: 0 !important;
	text-align: left;
}
/* 뷰에 color:white 가 직접 박혀 있어 CSS 로는 못 이긴다 → 자식까지 함께 잡는다 */
.sub_content_arr .lot_wrap .result .inline:first-child span,
.sub_content_arr .lot_wrap .result .inline:first-child div { color: var(--u-text-2) !important; }
.sub_content_arr .lot_wrap .result .inline:first-child strong { color: var(--u-gold) !important; font-weight: 700; }
.sub_content_arr .lot_wrap .result .num {
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	font-size: 14px !important;
}
.sub_content_arr .lot_wrap .result_num,
.sub_content_arr .lot_wrap .result_bonus { gap: 6px; }
.sub_content_arr .lot_wrap .plus::after { font-size: 17px; }

/* 오른쪽 2 — 이번 회차에 고른 번호 */
.sub_content_arr .lot_pick {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	background: var(--u-bg-1);
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
}
/* 숫자가 섞인 라벨이라 자간을 넓히면 "1 2 3 9회" 처럼 흩어져 보인다 */
.sub_content_arr .lot_pick_lb { color: var(--u-text-3); font-size: 11.5px; letter-spacing: .04em; }
.sub_content_arr .lot_pick_nums { display: flex; gap: 6px; }
.sub_content_arr .lot_wrap .lot_pick_nums .num {
	margin: 0 !important;
	width: 38px !important;
	height: 38px !important;
	font-size: 14px !important;
	cursor: default;
}
.sub_content_arr .lot_wrap .lot_pick_nums .num.slot {
	background: transparent !important;
	border: 1px dashed var(--u-line-2) !important;
}
.sub_content_arr .lot_pick_msg { margin: 0; color: var(--u-text-3); font-size: 12.5px; }

/* 오른쪽 3 — 구매 버튼 */
.sub_content_arr .lot_wrap .btn_lotto_wrap {
	grid-column: 2;
	grid-row: 3;
	align-self: start;
	margin: 0 !important;
	width: auto !important;
}
.sub_content_arr .lot_wrap .btn_lotto {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 52px;
}

/* 내역 표 — 아래 전체 폭 */
.sub_content_arr .lot_wrap .lot_table {
	grid-column: 1 / -1;
	grid-row: 4;
	margin: 20px auto 0 !important;
	width: 100%;
}
.sub_content_arr .lot_wrap .lot_table table { width: 100% !important; }

/* ------------------------------------------------------------
   15. 배팅카트 — 배팅금액 칸이 좁아 금액이 잘렸다 (2026-08-31 사용자 지적)

   > *"배팅금액 칸이 작아서 10만원 넘어가면 금액 뒷부분이 짤리는데"*

   실측 — `#bet_price` 의 실제 폭이 **70px** 이었다. `1,000,000` 을 넣으면
   `1,000,0` 까지만 보였다. 뷰(`inc/page_sports.php`)에 `style="width:80px"` 이
   **직접 박혀 있어서** CSS 로는 `!important` 라야 이긴다.

   한 줄(.cont_middle li)의 폭이 230px, 라벨이 64px 이라 입력칸에 쓸 수 있는 폭은 약 145px 이다.
   세 칸(예상배당률 · 배팅금액 · 예상배당금)을 **모두 128px** 로 맞춰 오른쪽 끝을 정렬한다.
   128px 이면 `10,000,000`(천만 원)까지 들어간다.

   ⚠ 카트 폭(.cart-content 250px / li 230px)을 줄이면 이 값도 같이 줄여야 한다.
   ------------------------------------------------------------ */
.cart-content .cont_middle input.money,
.cart-content .cont_middle input#bet_price,
.cart-content .cont_middle input#total_prize,
.cart-content .cont_middle input#total_ratio {
	width: 128px !important;
	box-sizing: border-box;
}
/* 세 줄의 글자 크기가 제각각(14px·16px)이라 오른쪽 끝이 어긋나 보였다. 하나로 맞춘다 */
.cart-content .cont_middle input.money { font-size: 14px !important; }
.cart-content .cont_middle input#bet_price { font-weight: 700 !important; }

/* ★ 미니게임 배팅슬립에도 같은 칸이 있다 — `mini_cart.css` 에서 **70px** 이다.
     `1,000,000` 이 안 들어간다. 같은 이유로 넓힌다.

     ⚠ `mini_cart.css` 는 `inc/page_mini.php` 안에서(=본문에서) 읽히므로
       head.sub.php 의 이 파일보다 **나중에** 온다. `!important` 라야 이긴다.
     ⚠ 개발서버에서는 미니게임 화면이 열리지 않아("다시 이용해 주세요")
       **눈으로 확인하지 못했다.** 미니게임이 열리는 날 다시 본다. */
.betslip_container .betslip_wrap .betslip_list .betslip_btm .betslip_price_wrap .bet_price,
input#bet_price.bet_price {
	width: 128px !important;
	box-sizing: border-box;
}

/* ------------------------------------------------------------
   16. 게임 고르기 화면(카지노 · 슬롯 · 미니게임)의 제목이
       게임 목록에 붙어 있던 것 (2026-08-31 사용자 지적)

   > *"미니게임, 카지노, 슬롯 눌렀을 때 제목란과 게임이 너무 붙어 있음"*

   ★ 붙어 있는 정도가 아니라 **겹쳐** 있었다.
     `common.css` 의 `.sub_content_arr h2 { position:absolute; top:0; height:50px }` 때문에
     제목이 흐름에서 빠져 **자리를 차지하지 않는다.** 그래서 목록이 제목 자리부터 그려졌다.
     실측 — 제목 `top=89`(높이 50 → 89~139), 목록 `top=115`. **제목 상자 안에서 목록이 시작한다.**

   ★ 이 화면만 제목을 `.subTitle_arr` 로 감싸지 않는다.
     그래서 앞의 2장(제목 규칙)이 걸리지 않아 **금색 막대도 밑줄도 없었다.**
     여기서 같은 모양으로 맞춘다 — 다른 세부 화면과 제목이 똑같아진다.

   ⚠ `> h2` 다. 자식 선택자라야 `.subTitle_arr h2`(감싼 화면)를 건드리지 않는다.
     실제로 이 모양의 화면은 게임 고르기 4개뿐이다 (casino · slot · slotsub · mini).
   ------------------------------------------------------------ */
.sub_content_arr > h2 {
	position: static !important;
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: auto !important;
	height: auto !important;
	margin: 0 0 22px !important;
	padding: 0 0 16px !important;
	border-bottom: 1px solid var(--u-line);
	color: var(--u-gold);
	font-size: 19px !important;
	font-weight: 700;
	line-height: 1.35 !important;
	letter-spacing: -.025em;
	text-align: left;
}
/* 제목 왼쪽 금색 막대 — 다른 세부 화면과 같은 것 */
.sub_content_arr > h2::before {
	content: "";
	flex: 0 0 3px;
	width: 3px;
	height: 17px;
	border-radius: 2px;
	background: var(--u-gold);
}
.sub_content_arr > h2 small {
	margin-left: 2px;
	color: var(--u-text);
	font-size: 15px !important;
	font-weight: 700;
}
/* <em class="ic"> 는 배경 그림용 빈 칸이다. 그림이 없으므로 자리만 차지한다 */
.sub_content_arr > h2 .ic { display: none !important; }

/* 목록 위쪽 여백 — 제목과 붙지 않게 한 번 더 띄운다 */
.sub_content_arr .companys { padding-top: 0 !important; }

/* 좁은 화면 */
@media (max-width: 980px) {
	.sub_content_arr .lot_wrap .pannel_bg { grid-template-columns: minmax(0, 1fr); }
	.sub_content_arr .lot_wrap .select     { grid-column: 1; grid-row: 2; grid-template-columns: repeat(5, 46px) !important; }
	.sub_content_arr .lot_wrap .result     { grid-column: 1; grid-row: 1; }
	.sub_content_arr .lot_pick             { grid-column: 1; grid-row: 3; }
	.sub_content_arr .lot_wrap .btn_lotto_wrap { grid-column: 1; grid-row: 4; }
	.sub_content_arr .lot_wrap .lot_table  { grid-column: 1; grid-row: 5; }
}

/* ------------------------------------------------------------
   배팅내역 — 배팅한 쪽 칸이 안 보이던 문제 (2026-09-03)

   배팅한 칸(td.Selected)은 원래 금색 배경이다. 그런데 그 칸 안에는
   팀이름·배당률을 나란히 놓으려고 표를 하나 더 넣어 두었고,
   위쪽 3장의 `.sub_content_arr table` 규칙이 그 안쪽 표까지 잡아
   거의 검정(--u-bg-0)인 배경을 금색 위에 덮어썼다.
   글씨는 common.css 가 검정으로 지정하므로 검정 위 검정이 되어
   어느 쪽에 배팅했는지 전혀 안 보였다.

   안쪽 표는 칸을 나누는 용도일 뿐이므로 배경·테두리를 없앤다.
   ------------------------------------------------------------ */
.sub_content_arr td.Selected  > table,
.sub_content_arr td.Selected2 > table,
.sub_content_arr td.noSelected > table,
.sub_content_arr td.noChoice  > table,
.sub_content_arr td.GameEnd   > table {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.sub_content_arr td.Selected  > table td,
.sub_content_arr td.Selected2 > table td,
.sub_content_arr td.noSelected > table td,
.sub_content_arr td.noChoice  > table td,
.sub_content_arr td.GameEnd   > table td {
	border-bottom: 0;
	padding: 6px 6px;
}

/* 금색 배경 위에 오도록 글씨를 진하게. common.css 의 !important 를
   이기려면 여기서도 !important 가 필요하다 */
.sub_content_arr td.Selected > table td { color: #151007 !important; font-weight: 700; }

/* ------------------------------------------------------------
   출석부(att.php) 달력의 년·월 선택 상자 (2026-09-04)

   옛 common.css 가 이 select 에 `color:#000`(검정)을 박아 두어, 새 UI 의
   어두운 배경 위에서 글씨가 묻혀 무슨 연·월인지 안 보였다.
   새 UI 의 다른 폼(select)과 같이 밝은 글씨 + 어두운 상자로 맞춘다.
   (common.css 의 선택자 특이도가 높아 color 는 !important 로 이긴다)
   ------------------------------------------------------------ */
.attendance .main-content .calendar-wrap .head .left-wrap select,
.attendance .calendar-wrap select {
	color: var(--u-text) !important;
	background: var(--u-bg-2);
	border: 1px solid var(--u-line);
	border-radius: 9px;
}
.attendance .calendar-wrap select:hover { border-color: var(--u-line-2); }
/* 펼친 목록(option)은 브라우저 기본이 흰 배경이라 글씨를 검정으로 둔다 */
.attendance .calendar-wrap select option { color: #000; background: #fff; }


/* ------------------------------------------------------------
   19. 글쓰기 화면 제목 (2026-09-20 관리자 요청)

   자유게시판·고객센터의 **글쓰기** 화면은 제목을 .subTitle_customer 로 감싼다.
   옛 CSS 가 그 안의 h2 를 position:absolute 로 띄워 두어 제목이 자리를 차지하지 못했고,
   그래서 제목 → 입력칸 순서가 아니라 **입력칸이 제목 위로 올라와 글자가 잘렸다.**
   목록 제목(.subTitle_arr · .subTitle_notice)에 해 둔 것과 같은 처리를 한다.
   ------------------------------------------------------------ */
.sub_content_arr .subTitle_customer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--u-line);
}
.sub_content_arr .subTitle_customer::before {
	content: "";
	flex: 0 0 3px;
	width: 3px;
	height: 17px;
	border-radius: 2px;
	background: var(--u-gold);
}
.sub_content_arr .subTitle_customer h2 {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--u-gold);
	font-size: 19px !important;
	line-height: 1.35 !important;
	font-weight: 700;
	letter-spacing: -.025em;
}

/* 황금복권의 '전체복권긁기' 버튼만 글자가 <div>전체</div><div>복권긁기</div> 두 조각이다.
   조각마다 다른 글꼴을 물려받아 "전체" 만 크게 보였다. 버튼 글꼴로 통일한다. (2026-09-20) */
.sub_content_arr .gold_lottery_area .lottery_wrap .btn_lottery2 > div,
.sub_content_arr .lottery_area .lottery_wrap .btn_lottery2 > div {
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* ── 배팅내역 타입 칸 (승무패·핸디캡·오버언더) ─────────────────────
   핸디캡인지 승무패인지 헷갈린다는 요청으로 넣었다 (관리자 2026-09-23).
   미니게임에는 표기하지 않는다. */.betting-list .bet-type { font-size:12px; color:#c9a227; white-space:nowrap; }

/* ---------- 8-20. 미니게임 영상 반응형 (관리자 요청 2026-09-23) ----------

   미니게임 화면은 왼쪽 영상 / 오른쪽 배팅칸 으로 가로 2단이다.
     .mini_game_bet  float:left · width:calc(100% - 300px)   ← 창이 좁아지면 줄어든다
     .bet_section    float:right · width:280px

   그런데 영상 iframe 은 width="1000" 처럼 **고정 크기**라 같이 줄지 않고,
   왼쪽 칸 밖으로 넘쳐서 오른쪽 배팅칸을 덮어 버렸다. 그래서 배팅을 못 했다.

   바깥 .view-wrapper 에 aspect-ratio 와 max-width 가 이미 있으므로,
   iframe 이 그 칸을 채우게만 하면 **비율을 지키며 같이 줄어든다.**
   원래 크기보다 커지지도 않는다 (max-width 가 막는다).

   ⚠ 마크업·아이디·자바스크립트는 손대지 않았다. 되돌리려면 이 절만 지우면 된다. */
.mini_game_bet .view-wrapper { width:100%; }
.mini_game_bet .view-wrapper .iframe-wrapper { width:100%; height:100%; }
.mini_game_bet .view-wrapper iframe {
	width:100% !important; height:100% !important; display:block; border:0;
}
/* 왼쪽 칸이 지나치게 좁아지면 영상이 보이지 않을 만큼 작아진다.
   그 아래로는 가로 스크롤로 보게 한다. */
.mini_game_bet { min-width:520px; }

/* ★ 창을 줄여도 레이아웃이 바뀌지 않게 한다 (관리자 요청 2026-09-28)

   > 회원 페이지 창모드로 진행 후 창크기 줄일 경우에 이미지처럼 위치 변경 및 글자 작아지는 현상 발생합니다.
   > 창크기가 작아지더라도 위치 고정, 글자 크기, 이미지 변동 안되고 기존틀 그대로 유지되게끔 부탁드립니다.

   PC 화면인데 반응형(@media) 규칙이 걸려 있어 창을 줄이면 위치와 글자 크기가 변했다.
   최소 너비를 두면 그 아래에서는 가로 스크롤이 생기고 레이아웃은 그대로 유지된다.
   1400px 은 이 사이트 컨테이너의 최대 너비(max-width:1400px)에 맞춘 값이다. */
html, body { min-width: 1400px; }