/* ==== css/Main.css ==== */
*{
	padding: 0;
	margin: 0;
	border: 0;
}
/*  폰트 깨지는 현상으로 D'Live는 사용하지 않고 산세리프2 사용함. */
@font-face{
	font-family: 'NanumGothicBold';
	src: url("../font/NanumGothicBold.ttf") format("truetype");
}


/* Layout */
/**
 *  1606131443 -  QA 수정.  메인 화면 포커스 깜박이는 현상
 */
body
{
	width: 1280px;
	height: 720px;
	background: black;
	overflow:hidden;
           font-family: 'NanumGothicBold', sans-serif;
	/*font-family: '산세리프2', 'NanumGothicBold', sans-serif;*/
           image-rendering: -webkit-optimize-contrast;
}


/*20250515_dblee_1107 개인정보취급방침과 이용약관 기능 구현*/
/* 수직 스크롤바 스타일링 */
::-webkit-scrollbar
{
  width: 10px; /* 스크롤바의 너비 조정 */
  background-color: #555;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb
{
  background-color: #f4eee4; /* 스크롤바의 색상 조정 */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover
{
  background-color: #5bb79d; /* 스크롤바에 호버 효과를 줄 경우 색상 변경 */
}
/* 수평 스크롤바 스타일링 */
::-webkit-scrollbar:horizontal
{
  height: 10px; /* 수평 스크롤바의 높이 조정 */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal
{
  background-color: #5bb79d; /* 수평 스크롤바의 색상 조정 */
}




#LOGLOG
{
	left: 760px;
	top: 50px;
	width: 500px;
	height: 650px;
	background: gray;
	opacity: 0.6;
	display: none;
	position:absolute;
}

/* 게임 UI화면 */

/*적군 score */
#score_you
{
	left: 916px;
	top: 126px;
	width: 65px;
	height: 32px;
	/*background-color: yellow;*/
	line-height: 32px;
	text-align: center;
	color: black;
	font-size: 30px;
	position: absolute;
}

/*아군 score */
#score_i
{
	left: 916px;
	top: 400px;
	width: 65px;
	height: 32px;
	/*background-color: yellow;*/
	line-height: 32px;
	text-align: center;
	color: black;
	font-size: 30px;
	position: absolute;
}

/* 화투패 돌아가는 모션을 담당하는 3D공간 */
#container
{
	left: 453px; /* 475 - 22 */
	top: 187px; /* 209 - 22 */
	width: 73px;
	height: 108px;
	position: absolute;

	/* 3D 공간 활성화 */

	-webkit-perspective: 800px;
	perspective: 800px;
}

#card
{
	width : 100%;
	height : 100%;
	display: none;
	position: absolute;
 	transform-style: preserve-3d;
/*
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	*/
}

.flipped
{
	-webkit-transform : rotateY(180deg);
	transform :	rotateY(180deg);
	/*transform-origin: 50% 50%;*/
}

.front {
	background-position: 0px 0px;
	background : url("../image/2_game/cards_yard/0.png");
	width : 73px;
	height : 108px;
	/*ckground-color: #ccc;*/
}
.back
 {
	/*ckground-color: #ccc;*/
	background-position: 0px 0px;
	/*background : url("../image/2_game/cards_yard/1.png");	*/
	width : 73px;
	height : 108px;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.face
{
	position: absolute;
	width: 73px;
	height: 108px;

	-webkit-backface-visibility: hidden;
	backface-visibility : hidden;
}


/* 각 화면 아래의 back button에 관한 것 */
.back_btn{
	left: 418px;
	top: 629px;
	width : 216px;
	height: 71px;
	color: white;
	background:url(../image/0_common/co_leftbt.png) no-repeat 0 0;
	background-position:0px 0px;
	line-height: 70px;
	font-size  : 26px;
	text-align : center;
	text-shadow: 1px 1px 1px black;
	position: absolute
}
.back_icon{
	left:	445px;
	top:	641px;
	width:	46px;
	height:	51px;
	background:url(../image/0_common/sm_returnIcon.png) no-repeat 0 0;
	background-position:0px 0px;
	position: absolute;
}
.back_text{
	left: 483px;
	top: 629px;
	width : 151px;
	height: 71px;
	color: white;
	line-height: 70px;
	font-size  : 26px;
	text-align : center;
	text-shadow: 1px 1px 1px black;
	position: absolute;
}

.back_focus{
	left:	418px;
	top:	629px;
	width:	216px;
	height: 71px;
	background:url(../image/0_common/co_leftbt_focus.png) no-repeat 0 0;
	background-position:0px 0px;
	position: absolute;
}
.start_focus{
	left:	0px; /*646px;*/
	top:	0px; /*629px;*/
	width:	216px;
	height: 71px;
	background:url(../image/0_common/co_rightbt_focus.png) no-repeat 0 0;
	background-position:0px 0px;
	position: absolute;
}
.start{
	left:	646px;
	top:	629px;
	width :	216px;
	height:	71px;
	color: white;
	background:url(../image/0_common/co_rightbt.png) no-repeat 0 0;
	background-position:0px 0px;
	line-height: 70px;
	font-size  : 26px;
	text-align : center;
	text-shadow: 1px 1px 1px black;
	position: absolute;
}
.start_text{
	left:	0px;
	top:	0px;
	width :	151px;
	height:	71px;
	color: white;
	line-height: 71px;
	font-size  : 26px;
	text-align : center;
	text-shadow: 1px 1px 1px black;
	position: absolute;
}

/* loading bar animation을 위해 */
.loader1 {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}


/**
 * S_BILLING_HISTORY 의 테이블에 사용함.
 */
.tg  {
    border-collapse:collapse;
    border-spacing:0;
    margin : auto;
}
.tg th{
    font-size:25px;
    font-weight:normal;
    height: 38px;
    /*padding-bottom: : 2px;*/
    /*border-style:solid;*/
    /*border-width:1px;*/
    overflow:hidden;
    word-break:normal;
    color: #ffffff;
    text-shadow: 1px 1px 1px black;
}
.tg td{
    font-size:20px;
    height: 42px;
    /*margin: auto;*/
    /*padding: 1px 0px;*/
    /*border-style:solid;*/
    /*border:1px solid red;*/
    overflow:hidden;
    word-break:normal;
    color: #5c3b2b;
}

.tg .tg-bhth{text-align:center;vertical-align:center}
.tg .tg-bhtd{text-align:center;vertical-align:center}

/* ===== 모바일 H5 전용 UX 스타일 (Phase 1 퀵윈) ===== */

/* 버튼 탭 눌림 피드백 */
.h5_pressed
{
	transform: scale(0.96);
	-webkit-transform: scale(0.96);
	filter: brightness(0.9);
	-webkit-filter: brightness(0.9);
	transition: transform 0.08s ease, filter 0.08s ease;
	-webkit-transition: -webkit-transform 0.08s ease, -webkit-filter 0.08s ease;
}

/* 낼 수 있는 손패 발광 효과 (margin으로 살짝 위로 올려 transform 충돌을 피한다) */
.h5_glow
{
	box-shadow: 0 0 14px 5px rgba(255, 205, 60, 0.85);
	border-radius: 6px;
	margin-top: -6px;
	transition: margin-top 0.15s ease, box-shadow 0.15s ease;
	-webkit-transition: margin-top 0.15s ease, box-shadow 0.15s ease;
}

/* 첫 탭으로 선택된 손패 (더 크게 솟음) */
.h5_lifted
{
	box-shadow: 0 0 18px 8px rgba(255, 230, 120, 0.95);
	border-radius: 6px;
	margin-top: -22px !important;
	transition: margin-top 0.12s ease, box-shadow 0.12s ease;
	-webkit-transition: margin-top 0.12s ease, box-shadow 0.12s ease;
}

/* 로비 '게임 시작' 버튼 강조 pulse */
@-webkit-keyframes h5_start_pulse
{
	0%   { -webkit-transform: scale(1.0); }
	50%  { -webkit-transform: scale(1.03); }
	100% { -webkit-transform: scale(1.0); }
}
@keyframes h5_start_pulse
{
	0%   { transform: scale(1.0); }
	50%  { transform: scale(1.03); }
	100% { transform: scale(1.0); }
}
.h5_start_btn
{
	-webkit-animation: h5_start_pulse 1.5s ease-in-out infinite;
	animation: h5_start_pulse 1.5s ease-in-out infinite;
	box-shadow: 0 0 16px 4px rgba(255, 200, 60, 0.75);
}

/* 네트워크 대전 턴 대기 게이지 */
#h5_turn_gauge
{
	display: none;
	left: 440px;
	top: 58px;
	width: 400px;
	height: 10px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 5px;
	overflow: hidden;
	position: absolute;
}
#h5_turn_gauge_bar
{
	width: 100%;
	height: 100%;
	background: #ffd93b;
	border-radius: 5px;
	transition: width 1s linear, background 0.3s ease;
	-webkit-transition: width 1s linear, background 0.3s ease;
}
#h5_turn_gauge_bar.h5_gauge_warn
{
	background: #ff5a3c;
}

/* 로봇 연습대전 중 "상대를 찾는 중" 표시 (2026-09-11) */
#h5_practice_ind
{
	display: none;
	left: 50%;
	top: 6px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	padding: 4px 16px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 16px;
	color: #ffe082;
	font-size: 18px;
	line-height: 24px;
	white-space: nowrap;
	position: absolute;
	z-index: 50;
	pointer-events: none;
}
#h5_practice_dot
{
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 5px;
	background: #7CFC00;
	vertical-align: middle;
	-webkit-animation: h5_practice_blink 1s ease-in-out infinite;
	animation: h5_practice_blink 1s ease-in-out infinite;
}
@-webkit-keyframes h5_practice_blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes h5_practice_blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }

/* 메인화면 타이틀 로고 숨김 (애니메이션 로직은 그대로 두고 표시만 제거) */
#Img_MM_logo
{
	display: none !important;
}

/* 이하 쓸모없음. */
/*******************/

/* ==== css/h5_portrait.css ==== */
/* 파일명: h5_portrait.css
   하는일: 세로모드(720 x 1280+) 화면별 배치 오버라이드.
           원본 JS가 그린 요소를 CSS !important 로 재배치한다 (원본 코드 무변경, 재드로잉에도 안정).
   구조: 상단 UI = top 앵커, 하단 UI = bottom 앵커, 배경 = 캔버스 전체 cover.
         캔버스 높이는 폰 비율에 따라 1280 이상으로 늘어난다(Main.screen_adjust) → 긴 폰도 꽉 참.
   스코프: html.h5p 일 때만 적용 (portrait=1 스위치) */

/* 메인화면 위/아래 여백 (1080 기준). --h5p_safe_t / --h5p_safe_b 는 메인화면만 쓴다.
   위 96: 가운데 카메라 구멍(폰 실측 x514~566, y0~96)을 재화바 줄이 피하려면 칸 사이를 크게 벌려야 해
   어색했다 (CEO 결정 A안). 카메라 줄에는 배경만 보인다.
   아래: 120 -> 40 으로 줄였다가 위와 같은 96 으로 맞춤 (2026-09-21 CEO 지시 - 메인만) */
html.h5p
{
    --h5p_safe_t: 96px;
    --h5p_safe_b: 96px;
    /* 서브화면(상점/미션/룰렛/우편/도움말/금고/랭킹/도신 대전 등) 아래쪽 요소를 내리는 양 (2026-09-21 CEO 지시).
       공통 이전 버튼 아래끝 96 -> 40. 그 위에 붙은 버튼/문구도 같이 내리고 목록은 그만큼 길게 (메인 아래 여백과는 따로 간다) */
    --h5p_sub_drop: 56px;
    /* 재화바가 있는 서브화면의 타이틀과 그 바로 아래 내용을 올리는 양 (2026-09-22 CEO 지시: 재화바-타이틀 간격 140 -> 120, 가이드 약 127).
       되돌리려면 0 으로 */
    --h5p_title_up: 20px;
    /* 남은 시간 알약(미션/도신 대전/랭킹) 윗변 - 셋을 같은 높이로 (2026-09-22 CEO 지시: 타이틀 아래로 조금 더 붙임).
       타이틀 올림(--h5p_title_up) 전 기준 값이라 실제 윗변은 430 - 20 = 410 */
    --h5p_timer_top: 430px;
}

/* 아래로 끌어 새로고침(모바일 크롬) 끄기 (2026-09-22 카카오 피드백: 메인에서 간헐적으로 게임이 재시작됨).
   원본의 touchmove preventDefault 는 window 리스너라 passive 로 무시돼 막지 못했다.
   게임 안 목록은 직접 굴리므로(h5_portrait_scroll_enable) 브라우저 스크롤 연쇄는 필요 없다 */
html.h5p,
html.h5p body
{
    overscroll-behavior: none;
}

/* 2026-10-20 되돌림: 넘침을 막으려고 html 에 overflow-x: hidden 을 걸었더니
   overflow-y 가 auto 가 되어(규격) 화면이 세로로 밀렸다 - 도신의 탑 클리어 보상 화면에서
   19px 밀린 채로 굳어 아래쪽 딤이 잘려 보였다 (CEO 지적, 기기 실측 scrollTop=19.33).
   원래대로 두면 body 의 overflow: hidden 이 화면에 적용되어 밀리지 않는다.
   애초에 이 규칙은 브라우저 자동 축소를 막지도 못했다 (넣은 뒤에도 배율이 0.741 로 떨어졌다) -
   그 증상은 부팅 가림막(h5_portrait.js h5p_boot_watch)이 막는다 */

/* ============ 재화바 + 버튼 (2026-09-21 CEO 지시) ============ */
/* 메인(.MMP_cur_item) / 서브화면(.H5PTOP_item) / 룰렛(.GAP_money_item) 재화바 칸 오른쪽 끝에 co_onebt 동그라미 + 를 얹는다.
   누름은 칸 전체가 받는다 (+ 는 누를 곳이라는 표시 - 칸만큼 넓게 눌려야 폰에서 잘 눌린다).
   숫자는 + 자리만큼 왼쪽으로: 칸 오른쪽 여백 72 = 오른쪽 4 + 크기 60 + 숫자와 틈 8.
   크기는 48 -> 60 (재화바 높이 65 안에 꽉 차게, 2026-09-21 CEO 지적 - 너무 작다) */
html.h5p .H5P_plus
{
    position: absolute;
    right: 4px;
    top: 11px;         /* 새 재화바 알약(y6~75) 한가운데 (2026-09-28 그림 교체) */
    width: 60px;
    height: 60px;
    /* 2026-10-08 CEO 전달 새 그림(co_plusbt.png 120x120, 동그라미와 + 가 한 장).
       ? 버튼들이 쓰는 co_onebt 과 섞이지 않게 파일을 따로 둔다 */
    background: url(../image/1_mainmenu/h5p/co_plusbt.png?v=3) no-repeat 0 0;
    background-size: 60px 60px;
    pointer-events: none;
}
/* + 모양은 2026-10-08 새 그림에 들어 있다 - CSS 로 그리던 십자는 끈다 (옛 코드는 지우지 않고 막아 둔다) */
html.h5p .H5P_plus::before,
html.h5p .H5P_plus::after
{
    content: none;
}

/* ============ 폰트 (나눔스퀘어라운드) ============ */
/* 원본은 NanumGothicBold.ttf(4MB) 한 벌만 써서 모든 글자가 굵게 나왔다.
   같은 인상을 유지하려고 기본 굵기를 700(Bold)로 둔다 - font-weight 를 따로 준 곳은 그 값이 이긴다.
   ttf 대신 woff2 로 변환해 4.0MB -> 0.69MB 로 줄였다 (안드로이드 크롬 36+ 지원).
   쓰는 굵기는 400(R) / 700(B) / 800(EB) 세 벌. 쓰는 곳이 없던 300(L)은 지웠다 (2026-09-12 CEO 지시) */

@font-face
{
    font-family: 'NanumSquareRound';
    src: url("../font/NanumSquareRoundR.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face
{
    font-family: 'NanumSquareRound';
    src: url("../font/NanumSquareRoundB.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face
{
    font-family: 'NanumSquareRound';
    src: url("../font/NanumSquareRoundEB.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* 게임 전체에 적용한다. 원본 요소들은 font-family 를 따로 주지 않아 body 에서 물려받는다 */
html.h5p body,
html.h5p input,
html.h5p textarea,
html.h5p button,
html.h5p select
{
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif !important;
    font-weight: 700;
}

/* ============ 공통 ============ */
/* 모바일에서 무엇을 누르면 안드로이드가 그 요소 모양대로 반투명 사각형을 잠깐 덮어씌운다.
   게임은 버튼마다 자체 눌림 연출이 있어 이 기본 하이라이트는 방해만 된다 (2026-09-10 CEO 지적).
   길게 눌렀을 때 뜨는 메뉴와 글자 선택도 같이 막는다 - 카드/버튼을 끌 때 글자가 잡히면 조작이 끊긴다 */
html.h5p,
html.h5p *
{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 글자를 골라야 하는 곳은 예외로 둔다 */
html.h5p input,
html.h5p textarea
{
    -webkit-user-select: text;
    user-select: text;
}

html.h5p
{
    background: #79c4e8 !important;
    min-height: 100%;
}
html.h5p body
{
    background: #79c4e8 !important;
}

/* [안전장치] 세로 CSS가 전체 크기를 부여한 씬 컨테이너가 "비어 있으면" 무조건 숨긴다.
   이 게임의 씬 div들은 처음에 빈 상태(display 기본값=block)로 존재하다가 JS가 내용을 채우는데,
   빈 div에 전체 크기가 잡히면 투명 방패처럼 모든 클릭을 가로챈다 (우편함/매칭대기 사고 원인).
   :empty 가드가 있으면 내용이 채워지는 순간 자동으로 보이고, empty() 되면 자동으로 사라진다.
   ** 앞으로 컨테이너에 width/height 100% 를 주는 화면은 반드시 이 목록에도 추가할 것! ** */
html.h5p #S_LOGO_div:empty,
html.h5p #S_MAILBOX_div:empty,
html.h5p #S_WAIT_div:empty,
html.h5p #S_GAME_div:empty,
html.h5p #S_SELECTSUN_div:empty,
html.h5p #S_GAMERESULT_div:empty,
html.h5p #S_AGREE_div:empty,
html.h5p #S_ATTENDANCE_div:empty,
html.h5p #S_EXITPOPUP_div:empty,
html.h5p #S_STORYMODE_div:empty,
html.h5p #S_STORYMODE_REWARD_div:empty,
html.h5p #S_POPUPYN_div:empty,
html.h5p #S_HELP_div:empty,
html.h5p #S_GONGJI_div:empty,
html.h5p #MS_popup_div:empty
{
    display: none !important;
}

/* ============ 종료 확인 팝업 (S_EXITPOPUP) ============ */
/* 요소들이 팝업 상대가 아닌 화면 절대좌표라 개별 재배치 (보드 369,155 기준 -280 이동 + 세로 중앙) */

html.h5p #S_EXITPOPUP_div
{
    position: absolute;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 100; /* 로비 캐릭터(z 20/30)보다 위 - 팝업 버튼 가림 방지 */
}
html.h5p #Img_EPU_bg
{
    width: 100% !important;
    height: 100% !important;
}
html.h5p #Img_EPU_board
{
    left: 133.5px !important;
    top: 50% !important;
    margin-top: -309px !important;
}
/* 문구 컨테이너: 자식(EPU_Txt_N)이 이 기준 절대좌표라 컨테이너만 옮기면 통째 이동 */
html.h5p #EPU_Txt_Img
{
    left: -420px !important;
    top: 50% !important;
    margin-top: -541.5px !important;
}
html.h5p #EPU_Txt_messge
{
    left: 148.5px !important;
    top: 50% !important;
    margin-top: 31.5px !important;
}
/* 예 | 아니오: 룰렛·환전 확인 팝업과 같은 디자이너 그림 버튼(337x104) 으로 (2026-10-01 CEO 지시).
   판은 133.5~946.5 (폭 813) - 양 끝 여백 54.5, 버튼 사이 30 */
html.h5p #EPU_btn1,
html.h5p #EPU_btn2
{
    top: 50% !important;
    /* 판 아랫변은 50% + 307.5 - 옛 버튼(124.5)과 같은 아래 여백 34.5 가 되게 169 */
    margin-top: 169px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
}
/* 2026-10-09 CEO 지시: 진행(예) 버튼은 모든 팝업에서 오른쪽. 자리만 맞바꿨고 누르는 동작은 그대로다 */
html.h5p #EPU_btn1
{
    left: 555px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a !important;
}
html.h5p #EPU_btn2
{
    left: 188px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a !important;
}
/* 확인 하나만 뜨는 안내 팝업(h5_portrait.js h5p_epu_mark): 판 한가운데로,
   쓰지 않는 회색 버튼은 감춘다 (2026-10-01 CEO 지적 - 왼쪽에 빈 버튼이 보였다) */
html.h5p #S_EXITPOPUP_div.h5p_epu_one #EPU_btn1
{
    left: 371.5px !important;
}
html.h5p #S_EXITPOPUP_div.h5p_epu_one #EPU_btn2
{
    display: none !important;
}
/* 리모컨용 포커스 링: 가로 좌표로 그려지므로 터치 전용 세로에선 숨김 */
html.h5p #EPU_btn_focus { display: none !important; }

/* [게이트 화면 통짜 축소] 약관 동의/출석부는 배경 그림에 좌우 박스가 박힌 가로(1280x720) 전용 화면.
   요소 재배치 대신 화면 전체를 0.5625배(=720/1280)로 축소해 세로 중앙에 통째로 보여준다.
   신규 유저 최초 1~2회만 보는 화면이라 축소 표시를 허용한다 */
html.h5p #S_AGREE_div,
/* 출석 팝업을 4x2 로 바꾸면서 세로로 길어졌다.
   원래는 가로 1280x720 을 0.5625 로 줄인 띠라 긴 팝업이 들어가지 않는다.
   세로에서는 캔버스 전체를 쓰는 딤 오버레이로 바꾸고, 팝업만 가운데 띄운다 */
html.h5p #S_ATTENDANCE_div
{
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    /* 딤은 여기 깔지 않는다. 이 div 는 1080 상자(h5p_legacy, overflow:hidden) 안이라
       좌우가 넓은 기기에서 딤이 모자란다. 캔버스 전체를 덮는 #h5p_dim 이 대신 깐다.
       (2026-09-10 CEO 지적) 팝업은 딤(z50) 위에 오도록 z60 */
    background: transparent !important;
    z-index: 60 !important;
}

/* 캔버스 전체를 덮는 딤. 1080 상자 밖(div_body 직속)이라 어떤 비율에서도 빈 곳이 없다 */
/* ============ 공용 시계 아이콘 (2026-10-07 CEO 지시) ============
   바깥 고리(co_time_icon)는 가만히 있고, 가운데 막대(co_timebar_icon)가 제자리에서 돈다.
   두 그림 모두 50x50 이고 막대는 그림 한가운데에 서 있어, 그대로 겹쳐 돌리면 가운데를 축으로 돈다.
   크기는 쓰는 자리(.rt_icon / .QPR_clock / #SMOP_season_clock)가 정한다 */
html.h5p .h5p_clock
{
    position: relative;
    display: inline-block;
    background: url(../image/0_common/co_time_icon.png) center/contain no-repeat;
}
html.h5p .h5p_clock > i
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../image/0_common/co_timebar_icon.png) center/contain no-repeat;
    /* 잠시 진짜 초에 맞춰 1초에 6도씩 돌렸지만 움직임이 너무 작았다 -
       처음처럼 2초에 한 바퀴 빠르게 도는 것으로 되돌렸다 (2026-10-07 CEO 지시) */
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: h5p_clock_spin 2s linear infinite;
    animation: h5p_clock_spin 2s linear infinite;
}
@-webkit-keyframes h5p_clock_spin
{
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes h5p_clock_spin
{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============ 세로모드 공용 스크롤 막대 (2026-10-07 CEO 지시) ============
   전체 범위를 보여 주던 반투명 줄은 없앴고, 움직이는 막대만 남겼다 (색은 아래 thumb 규칙 참고).
   폭 22 자리를 두고 좌우 투명 테두리로 안쪽만 칠해 가늘게 만든다.
   화면별로 더 정한 규칙(#HEP_scroll 등)이 있으면 그쪽이 이긴다 */
/* 주의: 표준 속성 scrollbar-color / scrollbar-width 를 쓰면 크롬은 ::-webkit-scrollbar 규칙을 통째로 무시한다.
   그래서 일부러 안 쓴다 (한번 넣었다가 막대가 통째로 기본 모양으로 돌아갔다 - 2026-10-07) */
html.h5p ::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p ::-webkit-scrollbar-track,
html.h5p ::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p ::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
html.h5p ::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}
html.h5p #h5p_dim
{
    position: absolute;
    left: -2px;		/* 가장자리 틈 막기 - #h5p_bg 와 같은 이유 (2026-10-09) */
    top: 0;
    width: -webkit-calc(100% + 4px);
    width: calc(100% + 4px);
    height: 100%;
    background: rgba(0, 0, 0, 0.8);  /* 딤 80% 통일 (2026-09-12 CEO 지시, 실제 값은 h5_portrait.js H5P_DIM_ALPHA) */
    z-index: 50;
    pointer-events: none;
    display: none;
}
/* 딤이 켜질 때 팍 생기지 않고 서서히 깔린다 (2026-09-14 CEO 지시). 딤 화면끼리 넘어갈 때는 켜진 채라 다시 깜빡이지 않는다 */
html.h5p.h5p_dim_on #h5p_dim
{
    display: block;
    -webkit-animation: h5p_dim_fade_in 160ms ease-out both;
    animation: h5p_dim_fade_in 160ms ease-out both;
}
@-webkit-keyframes h5p_dim_fade_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes h5p_dim_fade_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* 설정/우편함에서 나갈 때는 딤도 서서히 걷힌다 (2026-09-14 CEO 지시). 페이드 인보다 뒤에 두어 이 규칙이 이긴다 */
html.h5p.h5p_dim_on.h5p_dim_out #h5p_dim
{
    -webkit-animation: h5p_dim_fade_out 180ms ease-in both;
    animation: h5p_dim_fade_out 180ms ease-in both;
}
@-webkit-keyframes h5p_dim_fade_out
{
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes h5p_dim_fade_out
{
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ============ 로비 (S_MAINMENU) ============ */

/* 배경: 캔버스 세로를 100% 채우고(종횡비 유지) 가로는 중앙 크롭 */
html.h5p #Img_MM_bg
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0px !important;
    transform: translateX(-50%) !important;
}
/* 우측 나무 장식 배경은 세로에선 숨긴다 */
html.h5p #Img_MM_bg2
{
    display: none !important;
}

/* ---- 상단 앵커 존 ---- */

/* 프로필 패널: 좌상단 (1.15배 확대 - 모바일 밀도) */
html.h5p #MM_top_userinfo
{
    left: 6px !important;
    top: 6px !important;
    transform: scale(1.15) !important;
    transform-origin: left top !important;
}

/* 주간랭킹 패널: 우상단 (우측 잘림 방지 + 1.1배) */
html.h5p #MM_ranking
{
    left: 579px !important;
    top: 9px !important;
    transform: scale(1.1) !important;
    transform-origin: left top !important;
}

/* 로고(543x196): 랭킹 아래 중앙 */
html.h5p #Img_MM_logo
{
    left: 132px !important;
    top: 450px !important;
}

/* X(나가기): 로고 우측 */
html.h5p #MM_menu7 { left: 972px !important; top: 630px !important; }

/* 구름 */
html.h5p #Img_MM_cloud1 { top: 705px !important; }
html.h5p #Img_MM_cloud2 { top: 780px !important; }

/* ---- 하단 앵커 존 (bottom 기준: 어떤 폰 비율에서도 바닥에 붙는다) ---- */

/* 메뉴 버튼(각 230x113): 하단 2행
   1행: 충전소 | 룰렛 | 업적      2행: [게임시작] | 우편함 | 기타 */
html.h5p #MM_menu2 { left:  15px !important; top: auto !important; bottom: 198px !important; }
html.h5p #MM_menu3 { left: 367.5px !important; top: auto !important; bottom: 198px !important; }
html.h5p #MM_menu4 { left: 720px !important; top: auto !important; bottom: 198px !important; }
html.h5p #MM_menu1 { left:  15px !important; top: auto !important; bottom: 21px  !important; }
html.h5p #MM_menu5 { left: 367.5px !important; top: auto !important; bottom: 21px  !important; }
html.h5p #MM_menu6 { left: 720px !important; top: auto !important; bottom: 21px  !important; }

/* 캐릭터: 잔디 위 = 메뉴 위에 bottom 앵커로 배치 (원본 크기 유지) */
html.h5p #Img_MM_mainch5 { left: 570px !important; top: auto !important; bottom: 945px !important; } /* 할머니+새 */
html.h5p #Img_MM_mainch1 { left: -30px !important; top: auto !important; bottom: 397.5px !important; } /* 금발 소녀 */
html.h5p #Img_MM_mainch2 { left: 660px !important; top: auto !important; bottom: 397.5px !important; } /* 노란목도리 */
html.h5p #Img_MM_mainch3 { left: 180px !important; top: auto !important; bottom: 382.5px !important; z-index: 20 !important; }
html.h5p #Img_MM_mainch4 { left: 600px !important; top: auto !important; bottom: 382.5px !important; z-index: 20 !important; }
html.h5p #Img_MM_mainch6 { left: 315px !important; top: auto !important; bottom: 375px !important; z-index: 30 !important; } /* 메인 여캐 */

/* 캐릭터 등장 이펙트도 동일 앵커 */
html.h5p #Img_MM_show_ani5 { left: 570px !important; top: auto !important; bottom: 945px !important; }
html.h5p #Img_MM_show_ani1 { left: -30px !important; top: auto !important; bottom: 397.5px !important; }
html.h5p #Img_MM_show_ani2 { left: 660px !important; top: auto !important; bottom: 397.5px !important; }
html.h5p #Img_MM_show_ani3 { left: 180px !important; top: auto !important; bottom: 382.5px !important; }
html.h5p #Img_MM_show_ani4 { left: 600px !important; top: auto !important; bottom: 382.5px !important; }
html.h5p #Img_MM_show_ani6 { left: 315px !important; top: auto !important; bottom: 375px !important; }

/* 저작권 표기: 최하단 중앙 */
html.h5p #Img_MM_copyright { left: 240px !important; top: auto !important; bottom: 3px !important; }

/* ============ 로고/스플래시 (S_LOGO) ============ */

/* 씬 자체는 투명 - 뒤에 깔린 메인 배경이 그대로 보인다 */
html.h5p #S_LOGO_div
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: transparent;
}

/* 인트로 배경 이미지는 세로에서 쓰지 않는다.
   원본은 1초간 부싯돌 로고(1920x1080 흰 바탕) -> intro.jpg 순으로 깐다.
   둘 다 가로용 흰 바탕 전면 이미지라, 메인 배경 위에 깔면 화면을 허옇게 덮어 버린다.
   원본 S_logo.js 는 그대로 두고 표시만 막는다 (부싯돌 로고를 다시 넣으려면
   세로용 이미지를 만들어 이 규칙을 걷어내면 된다) */
html.h5p #Img_LO_background
{
    display: none !important;
}

/* Loading... 텍스트: 타이틀 로고 아래 (게이지 바로 위) */
/* 2026-10-08 CEO 지시로 로딩 묶음을 로고 아래로 올린다 (480 위로).
   로고는 위에서 잰 자리(551)에 있으니 이 묶음도 위에서 재야 기기 높이가 달라도 로고와의 사이가 그대로다 -
   예전처럼 아래에서 재면 화면이 짧은 폰에서만 로고에 붙는다 */
html.h5p #Txt_LO_msg
{
    left: 0 !important;
    width: 100% !important;
    /* 2026-10-08 CEO 지시: 글자를 로딩바 쪽으로 내리고 조금 키운다 (30 -> 42px).
       칸 높이를 글자에 맞춰 줄여야(120 -> 63) 글자가 칸 가운데에서 바 바로 위에 선다 -
       글자 아랫변과 바 윗변(1491) 사이가 33 이다 */
    top: 1410px !important;
    bottom: auto !important;
    height: 63px !important;
    font-size: 42px !important;
    line-height: 63px !important;
    color: #3a2a18 !important;
    text-shadow: 0 1.5px 4.5px rgba(255, 255, 255, 0.9) !important;
}

/* 등급 아이콘(사행성 / 청소년이용불가): 원본은 가로 1280 기준 좌표라 세로에서 화면 밖으로 나간다.
   1080 중앙 컬럼 안쪽 우상단에 오른쪽 정렬로 붙인다 (2026-09-10 CEO 지시).
   --h5p_extra_x 는 캔버스가 1080 보다 넓을 때 한쪽에 남는 여백이라, 그만큼 더 안쪽으로 들어온다.
   법정 표기라 그림은 원본 크기(93x108 두 장) 그대로 쓴다 - 확대하지 않는다.
   z-index 100: 메인화면(40)/딤(50) 위에 있어야 어떤 화면에서도 가려지지 않는다 */
html.h5p #icon_19_div
{
    left: auto !important;
    right: calc(var(--h5p_extra_x, 0px) + 39px) !important;
    margin-left: 0 !important;
    top: 108px !important;
    /* 법정 표기라 눈에 잘 띄어야 해서 1.5배로 키운다 (2026-09-10 CEO 지시).
       오른쪽 위를 기준으로 키워 컬럼 안 우측 정렬이 그대로 유지된다 */
    -webkit-transform: scale(1.5) !important;
    transform: scale(1.5) !important;
    -webkit-transform-origin: 100% 0 !important;
    transform-origin: 100% 0 !important;
    z-index: 100 !important;
}

/* 타이틀 로고 자리 (S_logo_portrait.js 가 만든다) - 이미지를 받으면 그대로 들어간다 */
/* 새 로고가 1448x1086 (4:3) 이라 칸도 900x675 로 둔다.
   예전 400x400 로고와 그림 한가운데가 같은 높이(화면 886)에 오도록 top 을 450 -> 551 로 내렸다 (2026-10-02 CEO 지시) */
html.h5p #LOP_title
{
    position: absolute;
    left: 90px;
    top: 551px;
    width: 900px;
    height: 675px;
    text-align: center;
    /* 2026-10-06 CEO 가 준 새 로고는 글자만 있어 예전보다 납작하다(1398x493).
       칸은 그대로 두고 그림을 칸 가운데에 세워, 로고가 바뀌어도 자리가 흔들리지 않게 한다 */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* max-width 만으로는 원본(400px)보다 커지지 않는다. 칸 크기를 그대로 따르게 한다 */
html.h5p #LOP_title_img
{
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* 이미지 오기 전 자리표시 */
html.h5p #LOP_title.LOP_empty
{
    line-height: 900px;
    font-size: 51px;
    font-weight: 700;
    color: rgba(58, 42, 24, 0.75);
    border: 4.5px dashed rgba(58, 42, 24, 0.5);
    border-radius: 24px;
    box-sizing: border-box;
    text-shadow: 0 1.5px 4.5px rgba(255, 255, 255, 0.9);
}

/* 하단 로딩 게이지 (세이프에어리어 120 위) */
/* 등급 안내 문구 (법정 표기): 로고(450~1350)와 로딩바(1971~) 사이, 로딩바 위 */
html.h5p #LOP_rating
{
    position: absolute;
    left: 39px;
    top: 1470px;
    width: 1002px;
    /* 배경(하늘/풀밭)이 밝아 흰 글자는 잘 안 보인다. 검정으로 두고 흰 그림자로 띄운다 */
    color: #111111;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    text-align: center;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(255, 255, 255, 0.8);
    word-break: keep-all;
    pointer-events: none;
}

/* 로딩 스피너(흰 점 링, util_Function.js loadingSpinner) - h5_portrait.js 가 body 에서 캔버스(div_body) 안으로 옮긴다 (2026-09-12 CEO 지적).
   원본은 1280x720 기준 좌표(left 630, top 250)라 세로 화면 오른쪽 위 밖에서 돌았다.
   상자: 캔버스 전체(원본처럼 로딩 중 입력을 막는다), 팝업 위(z 2000).
   링: 1080 기둥 가운데. 글자 크기 36 -> 링 지름 약 6.2em = 223. 요소(1em) 가운데가 링 가운데 */
/* 2026-10-20 CEO 지적(배경이 작게 시작해 커진다): 이 상자는 원본이 body 밑에 폭 1280 으로 만든다.
   캔버스 안으로 옮기기 전까지 1280 이 화면(800)을 넘어 크롬이 스스로 화면을 축소했다 -
   부모가 어디든 같은 크기로 두어 넘침을 없악다 (자리·크기는 옮긴 뒤와 똑같다) */
html.h5p #ww_loading_css_spinner_box
{
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    z-index: 2000 !important;
}
/* 2026-10-20 CEO 지적(오른쪽 위에 하얀 동그라미가 보인다): 캔버스 안으로 옮기기 전에는
   원본 1280x720 좌표(left 630, top 250) 그대로라 화면 오른쪽 위에 뜬다 - 옮겨지기 전에는 감춘다.
   옮기고 나면 이 규칙은 더 이상 맞지 않아(부모가 #div_body) 저절로 풀린다 */
html.h5p body > #ww_loading_css_spinner_box
{
    visibility: hidden !important;
}
html.h5p #div_body > #ww_loading_css_spinner_box #ww_loading_css_spinner
{
    font-size: 36px;
    margin: 0 !important;
    left: -webkit-calc(var(--h5p_extra_x, 0px) + 540px - 18px) !important;
    left: calc(var(--h5p_extra_x, 0px) + 540px - 18px) !important;
    top: -webkit-calc(50% - 18px) !important;
    top: calc(50% - 18px) !important;
}
/* 로고(로딩) 화면에는 가운데 동그라미 로딩을 두지 않는다 (2026-10-16 CEO 지시).
   바로 아래에 'Loading...' 글자와 막대(#LOP_bar)가 있어 두 번 알려 주는 꼴이었다.
   로고 화면을 벗어나면(화면 사이 로딩) 다시 나온다 - 위 규칙은 그대로다 */
/* 2026-10-20: 부모가 어디든(옮기기 전에도) 같이 막는다 - 예전에는 #div_body 안에 있을 때만 막혔다 */
html.h5p.h5p_splash #ww_loading_css_spinner_box #ww_loading_css_spinner,
html.h5p.h5p_splash #ww_loading_css_spinner_box #ww_loading_css_spinner_background
{
    display: none !important;
}

html.h5p #LOP_bar
{
    position: absolute;
    left: 150px;
    /* 2026-10-08 CEO 지시: 로고 아래로 480 올린다 (옛 자리는 아래에서 330). 위에서 재는 까닭은 Txt_LO_msg 주석 참고 */
    top: 1491px;
    width: 780px;
    height: 39px;
    background: rgba(255, 255, 255, 0.6);
    border: 4.5px solid #3a2a18;
    border-radius: 19.5px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 채워지는 정도는 S_logo_portrait.js 가 '받은 용량 비율'로 transform 을 넣는다 (2026-09-17 CEO 지시: 곧게 차오르게).
   사이사이는 transition 이 부드럽게 잇는다. (예전: 1.6초 동안 88% 까지 무조건 채우는 애니메이션 -> 끝에서 한참 멈춰 보였다) */
html.h5p #LOP_fill
{
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, #ffd97a 0%, #f0a832 100%);
    background: linear-gradient(to bottom, #ffd97a 0%, #f0a832 100%);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
}

html.h5p #LOP_fill.LOP_done
{
    -webkit-transform: scaleX(1) !important;
    transform: scaleX(1) !important;
}

/* ============ 공용 팝업/토스트 ============ */

/* 예/아니오 팝업 (S_POPUPYN): 어두운 배경은 캔버스 전체, 보드(542x411)는 정중앙 */
html.h5p #Img_PYN_bg
{
    width: 100% !important;
    height: 100% !important;
}
html.h5p #PYN_board
{
    left: 133.5px !important;
    top: 50% !important;
    margin-top: -309px !important;
}

/* 중앙 공지 토스트 (util.notice_center): 원본 744폭 -> 700폭 축소 + 세로 중앙 */
html.h5p #message
{
    /* 메인화면(z40)·팝업보다 위에 떠야 한다 (2026-09-09 CEO 지적: 우편함 토스트가 가려짐) */
    z-index: 200 !important;
    /* 2026-09-26 CEO 지시: 화면을 가득 채워 답답해 조금 줄인다 (12~1068 -> 66~1014) */
    left: 66px !important;
    width: 948px !important;
    top: 50% !important;
    /* 줄 수가 달라져도 가운데를 지킨다 */
    margin-top: 0 !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    /* 2026-09-26 CEO 지시: 그림 토스트(popup3.png)를 버리고 금고 토스트(#SAFE_msg)와 같은 검정 박스로 통일한다 */
    background: rgba(0, 0, 0, 0.82) !important;
    border: 2px solid #8a9a72 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 124px !important;
    padding: 30px 20px !important;
    color: #ffe98a !important;
    font-size: 48px !important;
    line-height: 60px !important;
    font-weight: 700 !important;
    text-align: center !important;
    /* 줄바꿈을 넣어 보낸 안내는 그 자리에서 줄을 바꾼다 (2026-10-10 CEO 지시 - 도신 페널티 안내).
       빈칸은 예전처럼 모아 주므로 다른 안내 모양은 그대로다 */
    white-space: pre-line !important;
    text-shadow: none !important;
    /* 문구에 넣어 둔 줄바꿈(
)을 그대로 살리고, 자동으로 접힐 때도 낱말 가운데서 끊기지 않게 한다
       (2026-09-28 CEO 지시 - '바랍니 / 다.' 처럼 잘려 보였다) */
    white-space: pre-line !important;
    word-break: keep-all !important;
    /* 띄어쓰기 없는 긴 글(닉네임 등)은 그래도 접어서 넘치지 않게 */
    overflow-wrap: break-word !important;
}
/* 글이 비어 있으면 아예 감춘다 - 검정 박스로 바꾼 뒤 빈 상자가 모든 화면 위쪽에 띠처럼 남아 있었다 (2026-09-26 CEO 지적) */
html.h5p #message:empty
{
    display: none !important;
}
/* 넓은 토스트(#h5sit_pop)가 원본 글을 가져갈 때까지 한 줄 토스트를 감춘다 (2026-10-10 CEO 지적).
   원본 util.notice_center 가 한 박자 뒤에 그려서 넓은 토스트로 바뀌기 전에 한 번 보였다.
   켜고 끄기는 h5_situation_screen.js 의 h5sit_pop_hide_msg */
html.h5p.h5sit_pop_wait #message
{
    display: none !important;
}

/* 게임 화면에서는 한 줄 안내를 게임판 영역 세로 가운데에 (2026-09-14 CEO 지시).
   게임판 = 위 띠 아래(340) ~ 아래 띠 연두색 선(화면 높이 - 936), 가운데 = 50% - 298 (2026-09-17 CEO 지시 - 줄어든 게임판 가운데로).
   게임 중 뜨는 예/아니오·종료 팝업도 같은 가운데에 둔다 */
html.h5p.h5pg_on #message
{
    top: -webkit-calc(50% - 298px) !important;
    top: calc(50% - 298px) !important;
}
/* 선 고르기 화면의 안내(배속 맞춤 등)는 선 고르기 팝업(가운데 50%-606 ~ 50%+10) 아래에 띄운다 (2026-10-09 CEO 지시 - 팝업을 가렸다) */
html.h5p #message.h5_msg_low.h5_msg_low
{
    top: -webkit-calc(50% + 40px) !important;
    top: calc(50% + 40px) !important;
    -webkit-transform: none !important;
    transform: none !important;
}
/* 2026-10-01 CEO 지적: 판·문구만 올리고 버튼을 빼먹어 확인 버튼이 판 밖(아래)에 떨어져 있었다.
   버튼도 같이 올려 판 안으로 들어오게 한다 (margin-top 은 그대로라 판과의 간격은 원래대로) */
html.h5p.h5pg_on #PYN_board,
html.h5p.h5pg_on #Img_EPU_board,
html.h5p.h5pg_on #EPU_Txt_Img,
html.h5p.h5pg_on #EPU_Txt_messge,
html.h5p.h5pg_on #EPU_btn1,
html.h5p.h5pg_on #EPU_btn2
{
    top: -webkit-calc(50% - 298px) !important;
    top: calc(50% - 298px) !important;
}

/* ============ 충전소 (S_CHARGE) ============ */

/* 배경: 세로 cover(중앙 크롭), 보조배경 숨김, 구름은 하단 앵커 */
html.h5p #Img_CH_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_CH_background2 { display: none !important; }
html.h5p #Img_CH_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 타이틀: 상단 프로필 패널 아래 중앙 (프로필이 이 화면에도 표시되므로 겹침 회피) */
html.h5p #CH_title
{
    left: 50% !important;
    top: 345px !important;
    transform: translateX(-50%) !important;
}

/* 카드 2장(341x364, 설계중심 640/415): -280px로 가로 중앙, 카드 중심을 세로 중앙에 */
html.h5p #s_charge_card
{
    top: 50% !important;
    transform: translate(-420px, -622.5px);
}

/* 20만원 만땅 이벤트 배너(462x197): 타이틀 아래 중앙 */
html.h5p #full_pay_event
{
    left: 193.5px !important;
    top: 225px !important;
}

/* 이전 버튼(184x95): 하단 중앙 */
html.h5p #CH_back
{
    left: 402px !important;
    top: auto !important;
    bottom: 60px !important;
}

/* ============ 룰렛돌리기 선택 (S_GACHA) ============ */

html.h5p #Img_GA_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_GA_background2 { display: none !important; }
html.h5p #Img_GA_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 타이틀+룰렛을 한 덩어리로 보고 "쓸 수 있는 영역"의 정중앙에 놓는다.
   쓸 수 있는 영역 = 상단바 아래(178) ~ 하단 세이프존 위(H-80)  [720 기준]
   그 중심 = 178 + (H-80-178)/2 = H/2 + 49
   묶음 높이 = 타이틀 82(실측) + 간격 110 + 룰렛 555 = 747
   -> 묶음 top = H/2 + 49 - 747/2 = H/2 - 324,  룰렛중심 = 묶음top + 82 + 110 + 277.5 = H/2 + 145
      (캔버스 높이 H 와 무관하게 성립. 좌우 화살표도 같은 중심을 쓴다) */
html.h5p #GA_title
{
    left: 50% !important;
    top: -webkit-calc(50% - 486px) !important;
    top: calc(50% - 486px) !important;
    transform: translateX(-50%) !important;
}

/* 룰렛 카드: 한 화면에 1장(GACHA_NUM_ON_SCREEN=1)만 두고 크게 키운다.
   기준점을 설계중심 x=640 에 두면 확대해도 중앙 정렬이 유지되고,
   좌우 이동 스크롤 애니메이션(설계중심 640 기준)도 그대로 중앙에 떨어진다.
   translate 는 x:360-640=-280(세로 720폭 중앙),
   y:-638 = 확대된 카드중심(233*1.55 + 358*1.55/2)을 top:50% 선에 정확히 맞춘 값 */
/* 룰렛 화면일 때만 1080 상자의 자르기를 푼다. 카드줄은 위 #GAP_clip 이 화면 끝에서 자른다 */
html.h5p.h5p_gacha_wide #h5p_legacy
{
    overflow: visible;
}

/* 룰렛 결과 딤이 떠 있는 동안에도 1080 상자를 자르지 않는다 - 넓은 기기에서 딤이 화면 끝까지 가도록 (2026-10-02 CEO 지시) */
html.h5p.h5p_garp_wide #h5p_legacy
{
    overflow: visible;
}

/* 룰렛 카드줄 칸: 태블릿처럼 화면이 1080 보다 넓으면 좌우 여분(--h5p_extra_x)만큼 넓혀
   옆 룰렛이 1080 경계가 아니라 진짜 화면 끝까지 밀려 나가 사라지게 한다 (2026-09-18 CEO 지시).
   폰(화면폭 = 1080)에서는 여분이 0 이라 지금까지와 같다 */
html.h5p #GAP_clip
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    /* 자르지 않는다. 화면(캔버스) 끝에서 잘리므로 넘어가는 룰렛이 화면 밖으로 자연스럽게 빠진다.
       상자 크기를 건드리면 안쪽 배율 기준점이 틀어지므로 자리/크기는 그대로 둔다 */
    overflow: visible;
}

/* 룰렛 화면이 밀려 들어오고 나가는 동안에만 카드줄을 1080 에서 잘라 낸다 (2026-09-28 CEO 지적).
   평소에는 화면(캔버스) 끝이 잘라 줘서 옆 룰렛이 안 보이는데, 화면이 통째로 1080 만큼 옆으로 밀리는 동안에는
   캔버스 밖에 있던 옆 룰렛판이 화면 안으로 들어와 같이 보였다 */
html.h5p #S_GACHA_div.h5p_sub_in #GAP_clip,
html.h5p #S_GACHA_div.h5p_sub_out #GAP_clip
{
    overflow: hidden;
}

html.h5p #GAP_scale
{
    position: absolute;
    left: 0;
    /* 2026-09-21 CEO 지시로 큰 룰렛을 조금 위로: 67 (1080 기준 약 100) 올림. 예전 50% - 32.5px */
    top: -webkit-calc(50% - 99.5px);
    top: calc(50% - 99.5px);
    width: 100%;
    transform-origin: 960px 0;
    /* 2026-09-29 CEO 지시: 확대되지 않는 선까지 큰 룰렛을 키웬 다음, 너무 커서 98% 로 줄였다 (1.65 -> 2.03 -> 1.99 -> 1.91 -> 1.83).
       그림은 1200x1250 이라 원본 크기까지 키우면 그림 양옆 장식이 화면(1080) 밖으로 잘린다 -
       장식까지 다 들어오는 한계가 카드 폭 1053.6 이고, 지금은 949.8 (그림의 79.1% - 여전히 축소) 이다.
       기준점 세로가 0 이라 배율만 올리면 아래로 밀리므로 가운데가 제자리에 있게 세로 이동값도 같이 바꿈
       (가운데 = 세로중앙 - 99.5 + 이동값 + 배율 x 619.8125 = 세로중앙 - 98.7 로 고정) */
    /* 2026-09-29: 정보 판 자리 30 + CEO 지시 40 + 30 - 모두 100 내렸다
       (가운데 세로중앙 - 98.7 -> + 1.3) */
    transform: translate(-420px, -1033.46px) scale(1.83);
}
html.h5p #s_gacha_card
{
    top: 0 !important;
}

/* 큰 룰렛 밑 그림자 (2026-10-01 CEO 지시) - 판이 다리 위에 떠 있어 보였다.
   판 바로 밑이 아니라 다리 나무판 위에 둔다 (2026-10-01 CEO 사진 지정).
   CEO 사진(502x1080)의 표시 자리를 캔버스 값으로 되돌려 잡았다:
     세로 818 / 가로비 502:1080 => 캔버스 세로 1760, 화면 세로중앙(1161.75) 기준 + 598.
   참고로 룰렛 원 아랫변은 세로중앙 + 457 자리다 (판보다 141 아래에 깔리는 셈).
   타원 하나를 깔고 가장자리를 그라데이션으로 지운다 (흐림 효과보다 폰에서 가볍다).
   2026-10-02 CEO 지시: 아래에 '룰렛 돌리기' 버튼이 생겨 이제 버튼 그림자처럼 보인다 - 줄을 움직일 때 사라지지 않고 늘 보인다 */
html.h5p #GAP_shadow
{
    position: absolute;
    left: 230px;
    /* 2026-10-07 CEO 지시로 5 올림 (592 -> 587) */
    top: -webkit-calc(50% + 587px);
    top: calc(50% + 587px);
    width: 620px;
    height: 44px;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 72%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 72%);
    opacity: 1;
    pointer-events: none;
}

/* 카드 상자를 그림과 같은 세로비로 맞춘다 (2026-09-29).
   원본 카드는 346x358 (1.5배 = 519x537) 인데 그림은 1200x1250 이라 룰렛이 가로로 0.7% 늘어나 있었다.
   519 x 1250/1200 = 540.625 로 두면 그림 비율과 같아지고, 돌리는 화면과도 배율 하나로 정확히 맞는다 */
html.h5p #GA_card_1,
html.h5p #GA_card_2,
html.h5p #GA_card_3,
html.h5p #GA_card_4,
html.h5p #GA_card_5,
html.h5p #GA_card_6
{
    height: 540.625px !important;
}

/* 2026-09-29 CEO 지시: 룰렛판 가운데에 있던 글자(이름 / 이용 조건)를 타이틀 아래로 옮겼다.
   원본 글자 칸은 그대로 두고(값을 그대로 읽어 쓴다) 보이지만 않게 한다 - 룰렛판 안에는 글자가 남지 않는다 */
html.h5p div[id^="Txt_1_GA_card_"],
html.h5p div[id^="Txt_2_GA_card_"],
html.h5p div[id^="Txt_3_GA_card_"]
{
    display: none !important;
}

/* 옮겨 온 글자: 타이틀(331~481) 아래, 큰 룰렛 윗변(581) 위 사이에 두 줄 (S_gacha_portrait.js 가 채운다) */
/* 받은 판 그림(642x216) 한 장을 깔고 그 위에 글자만 올린다 (2026-09-29 CEO 새 그림).
   화면 폭 520 으로 넣으면 높이는 175 (배율 0.81). 2026-09-29 CEO 지시로 한 번 줄였다 (530 -> 450).
   그림 안 갈색 알약은 원본 y 10~100(가운데 55), 크림색 판은 y 109~199(가운데 154) 이다 */
/* 룰렛이 도는 동안에는 .GAP_info_off 로 같이 사라진다 (2026-09-29 CEO 지시) */
html.h5p #GAP_info
{
    position: absolute;
    /* 썸네일 줄과 같이 빨라진다 (2026-10-03 CEO 지시) */
    -webkit-transition: opacity 0.14s ease-out;
    transition: opacity 0.14s ease-out;
    left: 280px;		/* (1080 - 520) / 2 */
    top: 440px;
    width: 520px;
    height: 175px;
    background: url(../image/6_gacha/ro_info_panel.png) no-repeat 0 0;
    background-size: 520px 175px;
    z-index: 31;
    text-align: center;
    pointer-events: none;
}
/* 위 갈색 알약: 룰렛 이름 (가운데 55 x 0.701 = 38.5) */
html.h5p #GAP_info_1
{
    position: absolute;
    left: 0;
    /* 2026-09-29 CEO 지시: 소제목을 더 크게 (40 -> 48). 갈색 알약(화면 3~77) 안에 들어가게 칸도 같이 늘렸다 */
    top: 14px;
    width: 100%;
    height: 62px;
    line-height: 62px;
    font-size: 48px;
    font-weight: 800;
    color: #ffe9a8;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 2px 3px rgba(40, 18, 2, 0.8);
}
/* 아래 크림색 판: 이용 조건 (가운데 154 x 0.701 = 108) */
html.h5p #GAP_info_2
{
    position: absolute;
    left: 0;
    top: 95px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 44px;
    font-weight: 800;
    color: #4a2a0e;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
}
html.h5p #GAP_info.GAP_info_off
{
    opacity: 0;
    pointer-events: none;
}
/* ---- 확률 보기 단추와 확률 표 (2026-10-06 CEO 지시: 확률형 상품은 상품별 확률을 게임 화면 안에 표시) ---- */
/* 단추: 룰렛판 오른쪽 위 빈 자리 (2026-10-09 CEO 지시).
   예전에는 '루비 N개 필요' 알약과 같은 줄이라 그 줄의 딸린 글자처럼 보여 어정쩡했다.
   룰렛마다 확률이 다르므로 룰렛판 옆에 두어 '이 판의 확률' 로 읽히게 한다.
   2026-10-09 CEO 지시로 한 번 더 내렸다 (185 -> 265, 화면 816~972 / 705~773) */
html.h5p #GAP_prob_btn
{
    position: absolute;
    left: 536px;
    top: 265px;
    width: 150px;
    height: 62px;
    line-height: 62px;
    border-radius: 31px;
    background: #6b4a22;
    border: 3px solid #ffe9a8;
    color: #ffe9a8;
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    letter-spacing: -1px;
    box-shadow: 0 3px 6px rgba(40, 18, 2, 0.45);
    pointer-events: auto;
    cursor: pointer;
}
html.h5p #GAP_prob_btn.GAP_press
{
    background: #4a2f12;
}
html.h5p #GAP_info.GAP_info_off #GAP_prob_btn
{
    pointer-events: none;
}
/* 표: 화면 전체를 어둡게 덮고 가운데에 흰 판 */
/* 확률 표 팝업 (2026-10-06 CEO 지시로 넣고, 2026-10-07 CEO 지시로 다른 팝업과 같은 모양으로 바꿈).
   판 그림·머리띠·닫기 X·초록 버튼·등장/퇴장 연출을 공용 확인 팝업(h5_portrait_confirm.css)과 똑같이 맞춘다 */
html.h5p #GAP_prob_pop
{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}
html.h5p #GAP_prob_pop.GAP_prob_on
{
    display: block;
}
/* 어두운 딤: 가운데 1080 칸 밖(태블릿 좌우 여백)까지 덮는다 */
html.h5p #GAP_prob_dim
{
    position: absolute;
    left: -100%;
    top: 0;
    width: 300%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-animation: h5pc_dim_in 0.16s ease-out both;
    animation: h5pc_dim_in 0.16s ease-out both;
}
html.h5p #GAP_prob_pop.GAP_prob_closing #GAP_prob_dim
{
    -webkit-animation: h5p_dim_fade_out 0.23s ease-in both;
    animation: h5p_dim_fade_out 0.23s ease-in both;
}

/* 판: 공용 팝업과 같은 9조각 크림 그림 + 노란 머리띠(104). 칸 수에 따라 높이가 늘어난다 */
html.h5p #GAP_prob_card
{
    position: absolute;
    left: 70px;
    top: 50%;
    width: 940px;
    min-height: 560px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /* 2026-10-09 CEO 지적: 표 아래 여백이 위보다 많이 남았다 - 아래 여백을 30 줄이고
       그만큼 표를 내려(아래 GAP_prob_table) 판 크기는 그대로 두고 내용만 가운데로 옮긴다 */
    padding: 104px 60px 40px 60px;
    box-sizing: border-box;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    -webkit-animation: h5pc_pop_in 0.22s ease-out both;
    animation: h5pc_pop_in 0.22s ease-out both;
}
html.h5p #GAP_prob_pop.GAP_prob_closing #GAP_prob_card
{
    -webkit-animation: h5pc_pop_out 0.23s ease-in both;
    animation: h5pc_pop_out 0.23s ease-in both;
}

/* 제목: 노란 머리띠 가운데 (공용 팝업과 같은 자리/크기/색) */
html.h5p #GAP_prob_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 940px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;
    font-weight: 800;
    color: #946d06;
    white-space: nowrap;
    pointer-events: none;
}
/* 오른쪽 위 닫기 X (공용 팝업과 같은 그림 popup_xbt 57x56) */
html.h5p #GAP_prob_x
{
    position: absolute;
    left: 820px;
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 5;
}

/* 룰렛 고르는 탭 줄 (2026-10-15 CEO 지시: 팝업을 닫았다 열지 않고 다섯 룰렛 확률을 한자리에서 본다).
   차례와 이름은 썸네일 줄과 같다 (GAP_ORDER / GAP_NAMES). 칸은 h5_gacha_portrait.js 의 fill_prob_tabs 가 그린다.
   2026-10-15 CEO 지시로 모양은 랭킹 안내 팝업의 칸(#RT_help_tabs)과 같게 맞췄다 -
   고른 칸만 밝게 뜨고 아래 줄로 본문과 이어지는 꼴이다 */
html.h5p #GAP_prob_tabs
{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 34px 0 50px;
    height: 92px;
}

/* 칸 아래 장식 줄 - 얇은 줄 하나에 양끝 작은 동그라미 (랭킹 안내와 같다) */
html.h5p #GAP_prob_tabs::before
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -26px;
    height: 14px;
    background:
        radial-gradient(circle at 7px 50%, #e6ce9c 4.5px, rgba(0, 0, 0, 0) 5.5px) no-repeat,
        radial-gradient(circle at 7px 50%, #e6ce9c 4.5px, rgba(0, 0, 0, 0) 5.5px) no-repeat,
        linear-gradient(#e6ce9c, #e6ce9c) no-repeat;
    background-size: 14px 14px, 14px 14px, 100% 3px;
    background-position: left center, right center, center center;
    pointer-events: none;
}

/* 칸 아래 줄 - 고른 칸이 이 줄을 덮어 본문과 이어져 보인다 */
html.h5p #GAP_prob_tabs::after
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #e6ce9c;
    pointer-events: none;
}

html.h5p .GAP_prob_tab
{
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-right: 8px;
    height: 92px;
    line-height: 86px;
    box-sizing: border-box;
    padding: 0 0 3px;
    border: 3px solid #d9c49a;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #e8d8b4;
    text-align: center;
    font-size: 40px;	/* 다섯 칸이라 랭킹(42)보다 조금 작게 - '최상급' 이 들어간다 */
    font-weight: 800;
    color: #a98a5e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

html.h5p .GAP_prob_tab:last-child
{
    margin-right: 0;
}

/* 지금 보고 있는 룰렛 */
html.h5p .GAP_prob_tab.GAP_prob_tab_on
{
    z-index: 2;
    background: #fff8e8;
    border-color: #e6ce9c;
    color: #8a4b10;
}

/* 확률 줄: 머리줄 + 상품/확률 두 칸 */
html.h5p #GAP_prob_table
{
    margin-top: 0;	/* 2026-10-15 탭 줄 아래 여백(50)이 이미 있다 */
}
html.h5p .GAP_prob_row
{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 92px;
    line-height: 92px;
    font-size: 42px;
    font-weight: 700;
    color: #3b2a10;
    border-bottom: 2px solid #e6ce9c;
}
html.h5p .GAP_prob_row.GAP_prob_head
{
    background: #f6e7c4;
    border-radius: 14px;
    border-bottom: 0;
    color: #8a4b10;
    font-size: 38px;
    font-weight: 800;
}
html.h5p .GAP_prob_c1
{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-left: 30px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.h5p .GAP_prob_c2
{
    width: 240px;
    padding-right: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
html.h5p #GAP_prob_note
{
    margin-top: 24px;
    font-size: 32px;	/* 34 면 5px 넘쳐 두 줄로 쪼개진다 - 한 줄에 들어가는 크기 */
    font-weight: 700;
    line-height: 46px;
    color: #a06a2c;
    text-align: center;
    word-break: keep-all;
}

/* 확률 표 x 단추 누름 ('닫기' 단추는 뺐다, 2026-10-07 CEO 지시) */
html.h5p #GAP_prob_x:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

html.h5p #GAP_info_1:empty,
html.h5p #GAP_info_2:empty
{
    display: none;
}

/* 이전 버튼: 하단 -> 상단 왼쪽으로 (세이프에어리어 64px = 1080기준 96 아래) */
html.h5p #GA_back
{
    left: 36px !important;
    top: 99px !important;
    bottom: auto !important;
}

/* ---- 세로모드 전용 추가 UI (S_gacha_portrait.js 가 생성) ---- */

/* 상단 재화 표시: 메인화면 재화바와 같은 그림, 같은 자리 (left 39 / top 96, 2026-09-12 CEO 지시) */
html.h5p #GAP_money
{
    position: absolute;
    left: 0;
    top: 87px;
    width: 1080px;
    height: 82px;
    pointer-events: none;
}
html.h5p .GAP_money_item
{
    position: absolute;
    top: 0;
    height: 82px;
    line-height: 82px;
    pointer-events: auto;  /* 누르면 상점으로 (2026-09-21 CEO 지시) */
    cursor: pointer;
    box-sizing: border-box;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* 그림 원본 크기 그대로 (메인화면 .MMP_cur_item 과 같은 값, 2026-09-28 CEO 가이드) */
html.h5p .GAP_money_item:nth-child(1) { left: 157px; width: 479px; padding-right: 72px; background-image: url(../image/1_mainmenu/h5p/mm_goldbar.png?v=6); }
html.h5p .GAP_money_item:nth-child(2) { left: 663px; width: 276px; padding-right: 72px; background-image: url(../image/1_mainmenu/h5p/mm_rubybar.png?v=6); }
html.h5p .GAP_money_item:nth-child(3) { left: 663px; width: 276px; padding-right: 72px; background-image: url(../image/1_mainmenu/h5p/mm_ticketbg.png?v=5); }

/* 아이콘은 바 그림에 그려져 있다 */
/* 2026-10-01 CEO 지시: 재화바는 눌러도 줄이지 않는다 (어둡게만 - h5p_press).
   원본 자리에 그대로 떠 있어야 숫자가 흔들려 보이지 않는다 */
html.h5p .GAP_money_item:active,
html.h5p .GAP_money_item.h5p_press
{
    -webkit-transform: none;
    transform: none;
}
html.h5p .GAP_money_icon
{
    display: none;
}
/* 값 칸 (@28px 실측): 금화 000,000,000 / 루비 00,000 / 티켓 000 */
html.h5p #GAP_gold,
html.h5p #GAP_ruby,
html.h5p #GAP_ticket
{
    display: inline-block;
    text-align: right;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
html.h5p #GAP_gold   { min-width: 250.5px; }
html.h5p #GAP_ruby   { min-width: 110px; }   /* 루비 칸이 265 로 줄어 138 -> 110 (2026-09-21) */
html.h5p #GAP_ticket { min-width: 75px; }

/* 좌우 이동 버튼: 룰렛 높이 중앙, 화면 양 끝.
   터치 타겟 112px(=1080기준 168px) 확보 */
/* 좌우 이동 버튼: 룰렛(가로 536px, 92~628)에 닿지 않도록 바깥 여백 안에만 둔다.
   폭은 84px 로 좁히되 높이를 168px(=1080기준 252px) 로 잡아 누르기 쉽게 한다 */
html.h5p .GAP_arrow
{
    position: absolute;
    top: -webkit-calc(50% - 32.5px);
    top: calc(50% - 32.5px);
    margin-top: -126px;
    width: 126px;
    height: 252px;
    line-height: 252px;
    text-align: center;
    font-size: 78px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4.5px 9px rgba(0,0,0,0.7);
    z-index: 30;
}
html.h5p #GAP_prev { left: 6px; }
html.h5p #GAP_next { right: 6px; }

/* 첫 장/마지막 장에서는 흐리게 */
html.h5p .GAP_arrow.GAP_dim
{
    opacity: 0.25;
}

/* 눌림 효과 */
html.h5p .GAP_arrow.GAP_press
{
    -webkit-transform: scale(0.88);
    transform: scale(0.88);
}

/* ---- 룰렛 종류 썸네일 줄 (캐릭터 변경 화면과 같은 방식, 2026-09-18 CEO 지시) ----
   왼쪽 아래 '이전' 버튼(61,아래96,133x133) 보다 위에 둔다 (2026-09-18 CEO 지시).
   줄 전체는 터치를 받지 않게 두고(pointer-events:none) 칸만 받는다 - 빈 곳 터치가 이전 버튼으로 통과한다.
   룰렛이 도는 동안에는 .GAP_thumbs_off 로 아래로 내려가 숨는다 */
html.h5p #GAP_thumbs
{
    position: absolute;
    left: 39px;
    /* 배경 계단 쪽으로 130 올림 (2026-09-21 CEO 지시). 예전 253
       2026-09-29 CEO 지시로 글자와 썸네일 줄을 같이 40 내렸다 (383 -> 343) */
    bottom: 243px;
    bottom: -webkit-calc(243px - var(--h5p_sub_drop, 0px));
    bottom: calc(243px - var(--h5p_sub_drop, 0px));
    width: 1002px;
    z-index: 30;
    pointer-events: none;
    /* 2026-10-03 CEO 지시: 올라오는 속도를 0.32s -> 0.16s 로 두 배 빠르게 */
    -webkit-transition: -webkit-transform 0.16s ease-out, opacity 0.16s ease-out;
    transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}
html.h5p #GAP_thumbs.GAP_thumbs_off
{
    -webkit-transform: translateY(300px);
    transform: translateY(300px);
    opacity: 0;
    pointer-events: none;
}
/* 룰렛 돌리기 버튼 (2026-10-01 CEO 지시: '룰렛을 선택하세요' 글자를 대신해 큰 룰렛 아래에 둔다).
   결과 화면 확인 버튼과 같은 라운드 초록 버튼. 줄 전체가 터치를 안 받으므로 버튼만 받게 한다.
   썸네일 줄은 아래쪽(bottom) 기준이라 이 버튼이 커진 만큼 위로 자란다 - 썸네일 자리는 그대로다 */
html.h5p #GAP_spin
{
    position: relative;
    left: 50%;
    margin-left: -228px;
    /* 2026-10-01 CEO 지시: 너무 아래에 있어 룰렛 쪽으로 올린다 (28 -> 120).
       썸네일 줄은 아래쪽 기준이라 이 여백이 커진 만큼 버튼만 위로 올라간다 */
    margin-bottom: 120px;
    /* 2026-10-06 CEO 지시: CSS 로 그리던 초록 알약 대신 받은 그림을 그대로 쓴다 (원본 456x106) */
    width: 456px;
    height: 106px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: url(../image/1_mainmenu/h5p/roulette_bt.png) 0 0 / 456px 106px no-repeat;
    pointer-events: auto;
}
/* 왼쪽 위 하이라이트는 새 그림에 이미 그려져 있다 */
html.h5p #GAP_spin::before
{
    display: none;
}
html.h5p #GAP_spin_txt
{
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 106px;
    text-align: center;
    font-size: 54px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 3px 0 #2a7a22, 2px 0 0 #2a7a22, -2px 0 0 #2a7a22, 0 -2px 0 #2a7a22;
}
html.h5p #GAP_spin.GAP_press
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}
html.h5p #GAP_row
{
    position: relative;
    height: 250px;
}
html.h5p .GAP_thumb
{
    position: absolute;
    top: 0;
    width: 186px;
    pointer-events: auto;
    -webkit-transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
}
html.h5p .GAP_thumb:nth-child(1) { left: 0; }
html.h5p .GAP_thumb:nth-child(2) { left: 204px; }
html.h5p .GAP_thumb:nth-child(3) { left: 408px; }
html.h5p .GAP_thumb:nth-child(4) { left: 612px; }
html.h5p .GAP_thumb:nth-child(5) { left: 816px; }
html.h5p .GAP_thumb_img
{
    position: relative;
    width: 186px;
    height: 192px;
    border-radius: 21px;
    border: 4.5px solid rgba(255,255,255,0.25);
    /* 2026-09-29 CEO 지시: 그림이 네모 칸에 꿉 차 보여 안쪽 여백을 둔다.
       칸 크기는 그대로고 그림만 177 -> 157 로 줄어든다 (테두리 포함 양옆 14.5씩 빈다).
       남은 시간 덤(.GAP_thumb_wait)은 안쪽 상자 전체를 그대로 덮는다 */
    padding: 10px;
    background: rgba(0,0,0,0.35);
    overflow: hidden;
    box-sizing: border-box;
}
html.h5p .GAP_thumb_img img
{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
/* 아직 못 돌리는 시간제 룰렛: 칸을 어둡게 덮고 가운데에 남은 시간 */
html.h5p .GAP_thumb_wait
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 17px;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    letter-spacing: -1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 78px;
    text-align: center;
}
html.h5p .GAP_thumb.GAP_wait .GAP_thumb_wait
{
    display: block;
}
html.h5p .GAP_thumb.GAP_wait .GAP_thumb_img img
{
    -webkit-filter: grayscale(0.6);
    filter: grayscale(0.6);
}
html.h5p .GAP_thumb.GAP_wait .GAP_thumb_txt
{
    color: #b9c0cc;
}

/* 칸 아래 이름: 무료 / 일반 / 최상급 / 스페셜 / 광고 (이름은 S_gacha_portrait.js GAP_NAMES).
   2026-09-29 에 한 번 감췄다가(위 알약과 같은 말이 두 번 나온다고) 2026-09-30 CEO 지시로 다시 적는다 -
   아이콘만으로는 어느 룰렛인지 알기 어렵다 */
html.h5p .GAP_thumb_txt
{
    margin-top: 6px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.85);
    overflow: hidden;
    white-space: nowrap;
}
/* 고른 칸: 테두리를 밝히고 살짝 키운다 */
html.h5p .GAP_thumb.GAP_sel
{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
html.h5p .GAP_thumb.GAP_sel .GAP_thumb_img
{
    border-color: #ffd453;
    box-shadow: 0 0 18px rgba(255,212,83,0.9);
}
html.h5p .GAP_thumb.GAP_sel .GAP_thumb_txt
{
    color: #ffd453;
}
html.h5p .GAP_thumb.GAP_press
{
    -webkit-transform: scale(0.94);
    transform: scale(0.94);
}

/* ============ 룰렛 스핀 (S_GACHAROULETTE) ============ */

/* 앞 선택화면에서 보던 그 자리, 그 크기로 맞춘다.
   원본 스핀 룰렛: 중심 = 캔버스 세로 중앙(H/2), 지름 432
   선택화면 룰렛  : 중심 = H/2 + 145, 지름 536
   -> 배율 536/432 = 1.24, 중심을 145px 아래로.
   배율 기준점을 50%(=H/2)로 두면 화면 높이가 달라져도 항상 맞는다.
   (고정 px 로 두면 기기 높이마다 어긋난다)
   회전은 안쪽 #ro_turn_pannel 이 따로 처리하므로 서로 간섭하지 않는다 */
html.h5p #GARP_scale
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 540px 50%;
    transform-origin: 540px 50%;
    /* 2026-09-29 CEO 지시: 고를 때 보이던 그 자리·그 크기 그대로 돌아가게 한다 (예전에는 66 내려가고 조금 커졌다).
       선택화면 카드 = 519 x 540.625 에 배율 1.83 -> 949.77 x 989.34, 가운데 = 세로중앙 - 98.7.
       여기는 648 x 675 에서 출발하므로 배율 949.77/648 = 1.46569 이면 가로세로 모두 딱 같다 */
    -webkit-transform: translateY(1.3px) scale(1.46569);
    transform: translateY(1.3px) scale(1.46569);
}

/* 룰렛 3요소는 원본 좌표(세로 중앙 기준) 그대로 두고, 위치/배율 보정은 래퍼가 한다.
   2026-09-28 CEO 새 그림: 테두리/도는판/핀 세 장이 모두 같은 1200x1250 판에 그려져 왔다.
   그래서 세 장을 같은 자리·같은 크기로 겹쳐 놓는다. 화면에 보이는 크기(648x675)는 예전 그대로라
   배치는 변함없고 그림만 선명해진다 (그리기 함수가 넣는 인라인 크기를 이기려고 !important) */
html.h5p #ro_frame,
html.h5p #ro_turn_pannel,
html.h5p #ro_tick
{
    left: 216px !important;
    top: 50% !important;
    margin-top: -337.5px !important;
    width: 648px !important;
    height: 675px !important;
}
/* 새 도는판은 그림 판 한가운데보다 동그라미 중심이 살짝 아래라(1200x1250 에서 599, 634),
   돌리는 기준점을 그 중심에 맞춰야 흔들리지 않고 제자리에서 돌아간다 (그리기 함수가 50% 50% 를 넣어 !important) */
html.h5p #ro_turn_pannel
{
    -webkit-transform-origin: 49.92% 50.72% !important;
    transform-origin: 49.92% 50.72% !important;
}
/* 2026-10-01 CEO 새 룰렛판: 그림이 1200x1250 -> 1075x1075 로 잘려 왔다 (동그라미 지름 1033 은 그대로).
   동그라미 중심이 지금 자리(가로 538.4 / 세로중앙 +5.4)에 그대로 오도록 크기와 자리를 다시 잡는다.
   1075 x 0.54 = 580.5, 그림 속 원 중심 537 -> 580.5 의 49.95% 라 돌리는 기준점도 거기에 둔다 */
html.h5p #ro_turn_pannel.GARP_con_new
{
    left: 248.4px !important;
    margin-top: -284.58px !important;
    width: 580.5px !important;
    height: 580.5px !important;
    -webkit-transform-origin: 49.95% 49.95% !important;
    transform-origin: 49.95% 49.95% !important;
}
/* 룰렛 결과 이펙트 (2026-09-30 CEO 지시): 그림이 판과 같은 1200x1250 이라 판과 똑같은 자리·크기로 겹친다.
   결과 팝업(z-index 50)보다는 아래에 둔다 - 이펙트가 끝난 뒤에 팝업이 뜬다 */
html.h5p #GARP_fx
{
    position: absolute;
    left: 216px;
    top: 50%;
    margin-top: -337.5px;
    width: 648px;
    height: 675px;
    z-index: 20;
    pointer-events: none;
    display: none;
}
/* 이펙트는 룰렛판 위에 깔리되 핀보다는 아래여야 한다 (2026-10-01 CEO 지시).
   핀은 원래 뎁스를 안 주고 그리는 차례로만 위에 있어서, 뎁스를 준 이펙트에 덮였다 */
html.h5p #ro_tick
{
    z-index: 25;
}

/* 이벤트본처럼 예전 그림을 쓰는 때는 핀도 예전 자리·예전 크기(41x61 을 1.5배)로 되돌린다 */
html.h5p #ro_tick.GARP_tick_old
{
    left: 510px !important;
    margin-top: -334.5px !important;
    width: 61.5px !important;
    height: 91.5px !important;
}

/* 당첨 팝업(563x350): 룰렛과 같은 중심에 띄우고, 룰렛보다 위로 올린다 */
/* 2026-09-29 CEO 지시: 룰렛 결과는 판(팝업) 없이 전체화면 딜 위에 보여 준다.
   원본이 넣는 판 그림·자리를 모두 덮고 화면 전체를 차지하게 한다 */
html.h5p #GAR_popup
{
    z-index: 50 !important;
    /* 2026-10-02 CEO 지시: 1080 보다 넓은 기기에서도 딤이 화면 끝까지 깔리게 좌우 여분(--h5p_extra_x)만큼 넓힌다.
       1080 상자(h5p_legacy)의 자르기는 html.h5p_garp_wide 가 푼다 (S_gacharoulette_portrait.js) */
    left: -webkit-calc(0px - var(--h5p_extra_x, 0px)) !important;
    left: calc(0px - var(--h5p_extra_x, 0px)) !important;
    top: 0 !important;
    margin-top: 0 !important;
    width: -webkit-calc(1080px + var(--h5p_extra_x, 0px) * 2) !important;
    width: calc(1080px + var(--h5p_extra_x, 0px) * 2) !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.72) !important;
    -webkit-filter: none !important;
    filter: none !important;
    /* 2026-10-01 CEO 재지적: 화면을 집으면 딤이 작아졌다.
       원본이 이 전체화면 딤에 class="button" 을 달아 둬서 Main.js 가 눌림 표시(.h5_pressed)를 붙이고,
       Main.css 의 .h5_pressed 가 transform: scale(0.96) 으로 딤 전체를 줄이고 있었다.
       딤은 화면을 덮는 판이라 어떤 경우에도 크기를 바꾸지 않는다 (다른 팝업 딤은 button 이 아니라 멀쩡했다) */
    -webkit-transform: none !important;
    transform: none !important;
    /* 딤이 툭 켜지지 않고 서서히 깔린다 (2026-10-01 CEO 지적: 갑자기 덮여 어색했다).
       번쩍이는 이펙트가 잦아드는 것과 이어지고, 그 사이 멈춘 룰렛이 어디에 섰는지 그대로 보인다 */
    -webkit-animation: h5p_dim_fade_in 0.3s ease-out both;
    animation: h5p_dim_fade_in 0.3s ease-out both;
}
/* 당첨 문구: '당첨!' 만 (받은 재화 수치는 그림 아래 #GARP_res_amount 로 내렸다, 2026-10-01 CEO 지시) */
html.h5p #GAR_popup_title
{
    /* 2026-10-10 CEO 지적(글자가 왼쪽으로 치우쳐 보임): 딤은 1080 보다 넓은 기기에서
       좌우 여분(--h5p_extra_x)만큼 더 넓다. 그 안에서 left:0 으로 두면 글자 칸이 왼쪽 끝에 붙어
       그만큼 치우쳐 보였다 (재화 그림과 단추는 left:50% 라 멀쩡했다). 딤 가운데를 기준으로 바꾼다 */
    left: 50% !important;
    margin-left: -540px !important;
    text-align: center !important;
    top: 50% !important;
    margin-top: -200px !important;	/* 2026-10-07 CEO 지시: 덩어리를 50 내려 재화 그림을 룰렛판 한가운데에 둔다 */
    width: 1080px !important;
    height: 96px !important;
    line-height: 96px !important;
    font-size: 76px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9) !important;
    white-space: pre-line !important;
    /* 확인을 누를 때까지 재화 그림과 같은 박자로 커졌다 작아진다 (2026-10-01 CEO 지시) */
    z-index: 2;
    -webkit-animation: garp_res_breath 1.8s ease-in-out infinite;
    animation: garp_res_breath 1.8s ease-in-out infinite;
}
/* 받은 재화 그림: '당첨!' 과 금액 사이 (2026-10-01 CEO 지시로 당첨! / 그림 / 금액 세 줄).
   확인을 누를 때까지 천천히 숨을 쉰다 (2026-10-01 CEO 지적 - 한 번 터지고 나면 멈춘 그림이다) */
html.h5p #GARP_res_icon
{
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -90px;	/* 2026-10-07 CEO 지시: -140 -> -90 (재화 그림 한가운데가 룰렛판 한가운데에 온다) */
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 2;
    -webkit-animation: garp_res_breath 1.8s ease-in-out infinite;
    animation: garp_res_breath 1.8s ease-in-out infinite;
}
/* 가장 좋은 칸에 걸렸을 때만 재화 그림이 흰색으로 한 번 번쩍했다가 제 색으로 돌아온다 (2026-10-10 CEO 지시).
   숨쉬기는 transform, 번쩍임은 filter 라 둘을 같이 걸어도 서로 건드리지 않는다.
   brightness(0) 으로 까맣게 만든 뒤 invert(1) 로 뒤집으면 그림 모양 그대로 흰색이 된다 */
html.h5p #GARP_res_icon.GARP_res_icon_flash
{
    -webkit-animation: garp_res_breath 1.8s ease-in-out infinite, garp_res_hit_flash 0.45s ease-out 1;
    animation: garp_res_breath 1.8s ease-in-out infinite, garp_res_hit_flash 0.45s ease-out 1;
}
@-webkit-keyframes garp_res_hit_flash
{
    0%   { -webkit-filter: brightness(0) invert(1); }
    30%  { -webkit-filter: brightness(0) invert(1); }
    100% { -webkit-filter: brightness(1) invert(0); }
}
@keyframes garp_res_hit_flash
{
    0%   { filter: brightness(0) invert(1); }
    30%  { filter: brightness(0) invert(1); }
    100% { filter: brightness(1) invert(0); }
}
/* 받은 재화 수치: 그림 바로 아래 (2026-10-01 CEO 지시). 글자도 그림과 같은 박자로 숨을 쉰다 */
html.h5p #GARP_res_amount
{
    position: absolute;
    left: 50%;
    margin-left: -540px;	/* 딤이 1080 보다 넓어져도 화면 가운데에 서게 (2026-10-10) */
    top: 50%;
    margin-top: 126px;	/* 덩어리와 함께 50 내림 */
    width: 1080px;
    height: 96px;
    line-height: 96px;
    text-align: center;
    font-size: 68px;
    font-weight: 800;
    color: #ffe14a;	/* 맨 위 '룰렛 결과' 와 같은 노랑 (2026-10-01 CEO 지시) */
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 2;
    -webkit-animation: garp_res_breath 1.8s ease-in-out infinite;
    animation: garp_res_breath 1.8s ease-in-out infinite;
}
@-webkit-keyframes garp_res_breath
{
    0%, 100% { -webkit-transform: scale(1); }
    50%      { -webkit-transform: scale(1.06); }
}
@keyframes garp_res_breath
{
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* 재화 그림 뒤에서 천천히 도는 빛줄기 (게임 결과 화면 그림 그대로 700x611).
   돌면서 밝기가 아주 조금 오르내려 멈춰 있지 않게 보인다 */
html.h5p #GARP_res_rays
{
    position: absolute;
    left: 50%;
    margin-left: -410px;
    top: 50%;
    margin-top: -348px;		/* 재화 그림 한가운데(50% + 10) 에 빛줄기 한가운데를 맞춘다 */
    width: 820px;
    height: 716px;
    /* 2026-10-07 CEO 지시: 너무 흐려 잘 안 보인다 - 0.2 -> 0.42 (아래 숨쉬기도 같이 올림).
       2026-10-10 CEO 지시로 아직 연하다 하여 0.42 -> 0.8 로 한 번 더 올린다 */
    opacity: 0.8;
    pointer-events: none;
    -webkit-animation: garp_res_turn 22s linear infinite, garp_res_glow 3.4s ease-in-out infinite;
    animation: garp_res_turn 22s linear infinite, garp_res_glow 3.4s ease-in-out infinite;
}
@-webkit-keyframes garp_res_turn
{
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes garp_res_turn
{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* 숨쉬기가 opacity 를 계속 덮으므로 실제로 보이는 진하기는 이 두 값이다 (2026-10-10 CEO 지시로 0.34/0.55 -> 0.66/0.95) */
@-webkit-keyframes garp_res_glow
{
    0%, 100% { opacity: 0.66; }
    50%      { opacity: 0.95; }
}
@keyframes garp_res_glow
{
    0%, 100% { opacity: 0.66; }
    50%      { opacity: 0.95; }
}

/* 재화 둘레 반짝임: 자리는 S_gacharoulette_portrait.js GARP_SPARK_AT 가 넣는다 */
html.h5p #GARP_res_sparks
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 10px;	/* 재화 그림 한가운데 (2026-10-07 CEO 지시로 50 내림) */
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
}
html.h5p .GARP_res_spark
{
    position: absolute;
    opacity: 0;
    -webkit-animation: garp_res_twinkle 3.1s ease-in-out infinite;
    animation: garp_res_twinkle 3.1s ease-in-out infinite;
}
@-webkit-keyframes garp_res_twinkle
{
    0%, 72%, 100% { opacity: 0; -webkit-transform: scale(0.3) rotate(0deg); }
    12%           { opacity: 1; -webkit-transform: scale(1.1) rotate(60deg); }
    32%           { opacity: 0; -webkit-transform: scale(0.4) rotate(120deg); }
}
@keyframes garp_res_twinkle
{
    0%, 72%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    12%           { opacity: 1; transform: scale(1.1) rotate(60deg); }
    32%           { opacity: 0; transform: scale(0.4) rotate(120deg); }
}
/* 재화가 가운데에서 바깥으로 퍼지는 연출 (일일손실한도 화면 엽전과 같은 방식, 2026-10-01 CEO 지시).
   샘은 재화 그림 한가운데에 둔다 */
html.h5p #GARP_res_burst
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 10px;	/* 재화 그림 한가운데 (2026-10-07 CEO 지시로 50 내림) */
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 10;	/* 딤·당첨 글·재화 그림·버튼 앞으로 (2026-10-01 CEO 지적) */
}
html.h5p .GARP_res_one
{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    /* 2026-10-01 CEO 지시: 솟았다 떨어지는 분수가 어색해 사방으로 터지는 모양으로 되돌렸다.
       대신 처음보다 멀리(320~540), 크게(80~170), 많이(24/38) 나간다.
       2026-10-10: 영상대로 솟구치는 분수로 바꿨다가 CEO 지시로 다시 이 모양으로 되돌렸다 */
    -webkit-animation: garp_res_fly 700ms ease-out 1 both;
    animation: garp_res_fly 700ms ease-out 1 both;
}
@-webkit-keyframes garp_res_fly
{
    0%   { opacity: 0; -webkit-transform: translate(0, 0) rotate(0deg) scale(0.35); }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate(var(--garp_x), var(--garp_y)) rotate(var(--garp_spin)) scale(1); }
}
@keyframes garp_res_fly
{
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.35); }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--garp_x), var(--garp_y)) rotate(var(--garp_spin)) scale(1); }
}

/* 가장 좋은 칸에 걸렸을 때만 위에서 재화가 쏟아진다 (2026-10-01 CEO 지시).
   조각마다 시작 자리·시간·흔들림이 달라 줄 맞춰 떨어지지 않는다 */
html.h5p #GARP_res_rain
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    /* 2026-10-01 CEO 지시: 글·재화 그림·버튼 전부 뒤로 내린다 (딤 바로 위, 글/그림 z 2 보다 아래) */
    z-index: 1;
}
html.h5p .GARP_res_drop
{
    position: absolute;
    top: -220px;
    opacity: 0;
    /* 2026-10-01 CEO 지시: 대박일 때는 딤을 닫을 때까지 계속 내린다 (걷는 것은 rain_watch 가 한다) */
    -webkit-animation: garp_res_rain 1100ms linear infinite both;
    animation: garp_res_rain 1100ms linear infinite both;
}
@-webkit-keyframes garp_res_rain
{
    0%   { opacity: 0; -webkit-transform: translate(0, 0) rotate(0deg); }
    8%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate(var(--garp_sway), 2700px) rotate(var(--garp_spin)); }
}
@keyframes garp_res_rain
{
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    8%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--garp_sway), 2700px) rotate(var(--garp_spin)); }
}
/* 딥 위 맨 위 타이틀 '룰렛 결과' (S_gacharoulette_portrait.js 가 넣는다, 2026-09-29 CEO 지시) */
html.h5p #GARP_res_title
{
    position: absolute;
    left: 50%;
    margin-left: -540px;	/* 위와 같은 이유 (2026-10-10) */
    top: 50%;
    /* 2026-10-01 CEO 지시: 글자를 더 키우고, 멈춘 룰렛판이 딤 뒤로 보이게 판 윗변(-461) 위로 올린다 */
    margin-top: -700px;
    width: 1080px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-size: 78px;
    font-weight: 800;
    color: #ffe14a;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 2;	/* 재화 비(z 1) 앞 (2026-10-01 CEO 지시) */
}
/* 확인 버튼: 문구 아래 가운데 (버튼 그림 크기는 원본 그대로 255x124.5) */
html.h5p #GAR_popup_ok_btn
{
    left: 50% !important;
    top: 50% !important;
    margin-left: -127.5px !important;
    margin-top: 20px !important;
}
/* 2026-10-01 CEO 지시: 게임 결과 화면에서 쓰는 라운드 초록 버튼(.h5rp_btn_green)과 같은 모양으로.
   원본이 넣는 버튼 그림(bt_select.png)과 크기는 모두 덮는다 */
html.h5p #GAR_popup_ok_btn.GARP_res_ok
{
    /* 재화 비(z 1)보다 위 - 눌러야 하는 버튼이라 가리면 안 된다 (2026-10-01 CEO 지시) */
    z-index: 20;
    /* 2026-10-01 CEO 지시로 1.2배 (318x85 -> 382x102) */
    margin-left: -191px !important;
    /* 2026-10-01 CEO 지시: 룰렛판 아랫변(+430) 아래로 내려 판이 가려지지 않게 한다 */
    /* 2026-10-03 CEO 지시: 버튼 위에 상황 컷이 들어가도록 150 내렸다 (500 -> 650) */
    margin-top: 650px !important;
    width: 382px !important;
    height: 102px !important;
    box-sizing: border-box !important;
    border: 5px solid #2f8a28 !important;
    border-radius: 52px !important;
    background: -webkit-linear-gradient(top, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%) !important;
    background: linear-gradient(to bottom, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%) !important;
    overflow: hidden !important;
    /* 방 선택 '입장' 버튼과 같은 꿀렁 모션 (2026-10-01 CEO 지시, 값은 MMP_enter_pulse 와 같다) */
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: garp_res_pulse 1.2s ease-in-out infinite;
    animation: garp_res_pulse 1.2s ease-in-out infinite;
}
@-webkit-keyframes garp_res_pulse
{
    0%, 50%, 100% { -webkit-transform: scale(1, 1); }
    25%           { -webkit-transform: scale(1.07, 1); }
    75%           { -webkit-transform: scale(1, 1.09); }
}
@keyframes garp_res_pulse
{
    0%, 50%, 100% { transform: scale(1, 1); }
    25%           { transform: scale(1.07, 1); }
    75%           { transform: scale(1, 1.09); }
}
/* 버튼 왼쪽 위 하이라이트 - 게임 결과 버튼과 같다 */
html.h5p #GAR_popup_ok_btn.GARP_res_ok::before
{
    content: '';
    position: absolute;
    left: 29px;
    top: 12px;
    width: 36px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}
html.h5p #GAR_popup_ok_btn.GARP_res_ok:active,
html.h5p #GAR_popup_ok_btn.GARP_res_ok.h5_pressed
{
    /* 꿀렁 모션이 켜져 있으면 눌림 축소가 묻히므로 누르는 동안만 모션을 끈다 */
    -webkit-animation: none;
    animation: none;
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}
html.h5p #GAR_popup_ok_btn.GARP_res_ok #GAR_popup_ok_txt
{
    left: 0 !important;
    top: 0 !important;
    width: 382px !important;
    height: 102px !important;
    line-height: 92px !important;
    font-size: 60px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 0 #2a7a22, 2px 0 0 #2a7a22, -2px 0 0 #2a7a22, 0 -2px 0 #2a7a22, -1.414px -1.414px 0 #2a7a22, -1.414px 1.414px 0 #2a7a22, 1.414px -1.414px 0 #2a7a22, 1.414px 1.414px 0 #2a7a22 !important;
}
/* 깜빡이는 네모 테두리 그림은 새 버튼과 안 맞아 쓰지 않는다 */
html.h5p #GAR_popup_ok_btn.GARP_res_ok #GAR_popup_ok_focus
{
    display: none !important;
}
/* 버튼 위로 빛이 한 번씩 쓸고 지나간다 (2026-10-01 CEO 지적 - 멈춘 화면이라 심심하다).
   상단 재화바 반짝임과 같은 방식, 버튼이 overflow hidden 이라 둥근 모양 안에서만 보인다 */
html.h5p #GAR_popup_ok_btn.GARP_res_ok #GAR_popup_ok_txt::after
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(-15deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.55) 51%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 64%) no-repeat;
    background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.55) 51%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 64%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    pointer-events: none;
    -webkit-animation: garp_res_sweep 2.6s ease-in-out infinite;
    animation: garp_res_sweep 2.6s ease-in-out infinite;
}
@-webkit-keyframes garp_res_sweep
{
    0%, 55%, 100% { background-position: 110% 0; }
    85%           { background-position: -40% 0; }
}
@keyframes garp_res_sweep
{
    0%, 55%, 100% { background-position: 110% 0; }
    85%           { background-position: -40% 0; }
}

/* 손가락 두 개로 집어도 화면이 줌되지 않게 (2026-10-01 CEO 지적 - 집으면 딤이 작아지며 닫혔다).
   이 화면에는 밀어서 볼 것이 없어 터치 동작을 모두 막아도 된다 */
html.h5p #S_GACHAROULETTE_div
{
    -ms-touch-action: none;
    touch-action: none;
}

/* 옛 '금화 떨어지는' 모션 그림(coins_1~11.png)은 쓰지 않는다 (2026-10-01 CEO 지시).
   결과 화면이 재화가 가운데에서 바깥으로 퍼지는 연출로 바뀌어 겹쳤다.
   원본 타이머·상태값은 그대로 두고 그림만 감춘다 */
html.h5p #GAR_coin_ani
{
    display: none !important;
}

/* ============ 업적 (S_QUEST) ============ */
/* 카드 개수는 h5_portrait.js 에서 5장->3장으로 보정 (3장 = 722px, 원본 크기 그대로 720폭에 맞음) */

html.h5p #Img_QU_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_QU_background2 { display: none !important; }
html.h5p #Img_QU_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

html.h5p #QU_title
{
    left: 50% !important;
    top: 345px !important;
    transform: translateX(-50%) !important;
}

/* 캐릭터 변경 안내 박스: 세로에서는 공간이 없어 숨김 */
html.h5p #QU_help_bg { display: none !important; }

/* 리모컨 키가이드: 터치 전용 세로에서는 숨김 */
html.h5p #QU_softkey { display: none !important; }

/* 초기화 안내 문구: 타이틀 아래 전체폭 중앙 */
html.h5p #QU_info
{
    left: 0 !important;
    width: 100% !important;
    top: 480px !important;
}

/* 카드 3장(254x366, 카드중심 y=416): 가로 중앙 + 세로 중앙 */
/* 세로 리스트로 바뀌면서 가로 캐러셀용 변환은 쓰지 않는다 (아래 리스트 규칙이 담당) */

/* 하단 버튼 2개: 이전 | 한꺼번에 받기 */
/* 이전 버튼: 다른 서브화면과 동일하게 상단 왼쪽 (원형 화살표) */
html.h5p #QU_back
{
    left: 36px !important;
    top: 99px !important;
    bottom: auto !important;
}
/* 보상 모두 받기: 하단 가운데 */
html.h5p #QU_get_all
{
    left: 50% !important;
    margin-left: -168px !important;
    top: auto !important;
    bottom: 60px !important;
}

/* ============ 업적 상세 (S_QUESTDETAIL) ============ */

html.h5p #Img_QD_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_QD_background2 { display: none !important; }
html.h5p #Img_QD_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 타이틀 이미지 + 업적명 텍스트: 상단 프로필 아래 중앙 */
html.h5p #QD_title_bg
{
    left: 50% !important;
    top: 345px !important;
    transform: translateX(-50%) !important;
}
html.h5p #QD_title
{
    left: 0 !important;
    width: 100% !important;
    top: 480px !important;
}

/* 변경 안내 문구: 전체폭 중앙 */
html.h5p #QD_info
{
    left: 0 !important;
    width: 100% !important;
    top: 558px !important;
}

/* 카드 3장(254x327, 카드중심 y=435.5): 가로 중앙 + 세로 중앙 */
/* 세로 리스트로 바뀌면서 가로 캐러셀용 변환은 쓰지 않는다 */

html.h5p #QD_back
{
    left: 36px !important;
    top: 99px !important;
    bottom: auto !important;
}

/* ============ 기타/설정 (S_SETTING) ============ */
/* 카드 개수는 h5_portrait.js 에서 3장->2장으로 보정 (2장 = 682px, 원본 크기 그대로) */

html.h5p #Img_ST_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_ST_background2 { display: none !important; }
html.h5p #Img_ST_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 설정 화면은 세로 전용 화면(SETP_)으로 새로 그린다 (2026-09-11 CEO 지시).
   원본 타이틀 이미지 / 가로 카드 / 하단 약관 버튼 / 아이디·버전은 화면에서만 감춘다.
   원본 요소와 로직은 그대로 살아 있다 (사운드·공지 등은 원본 경로로 실행한다) */
html.h5p #ST_title,
html.h5p #Txt_ST_title,
html.h5p #s_setting_card,
html.h5p #s_setting_bottom_submenu,
html.h5p #ST_btn2,
html.h5p #ST_btn3,
html.h5p #ST_id,
html.h5p #ST_ver
{
    display: none !important;
}

/* 이전 버튼: 다른 서브화면과 동일하게 상단 왼쪽 (원형 화살표) */
html.h5p #QU_back
{
    left: 36px !important;
    top: 99px !important;
    bottom: auto !important;
}
/* 보상 모두 받기: 하단 가운데 */
html.h5p #QU_get_all
{
    left: 50% !important;
    margin-left: -168px !important;
    top: auto !important;
    bottom: 60px !important;
}

/* ============ 업적 상세 (S_QUESTDETAIL) ============ */

html.h5p #Img_QD_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_QD_background2 { display: none !important; }
html.h5p #Img_QD_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 타이틀 이미지 + 업적명 텍스트: 상단 프로필 아래 중앙 */
html.h5p #QD_title_bg
{
    left: 50% !important;
    top: 345px !important;
    transform: translateX(-50%) !important;
}
html.h5p #QD_title
{
    left: 0 !important;
    width: 100% !important;
    top: 480px !important;
}

/* 변경 안내 문구: 전체폭 중앙 */
html.h5p #QD_info
{
    left: 0 !important;
    width: 100% !important;
    top: 558px !important;
}

/* 카드 3장(254x327, 카드중심 y=435.5): 가로 중앙 + 세로 중앙 */
/* 세로 리스트로 바뀌면서 가로 캐러셀용 변환은 쓰지 않는다 */

html.h5p #QD_back
{
    left: 36px !important;
    top: 99px !important;
    bottom: auto !important;
}

/* ============ 기타/설정 (S_SETTING) ============ */
/* 카드 개수는 h5_portrait.js 에서 3장->2장으로 보정 (2장 = 682px, 원본 크기 그대로) */

html.h5p #Img_ST_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_ST_background2 { display: none !important; }
html.h5p #Img_ST_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

html.h5p #ST_title
{
    left: 50% !important;
    top: 345px !important;
    transform: translateX(-50%) !important;
}

/* 카드 2장(341x364, 카드중심 y=415): 가로 중앙 + 세로 중앙 */
html.h5p #s_setting_card
{
    top: 50% !important;
    transform: translate(-420px, -622.5px);
}

/* 하단: 좌측 약관/개인정보 작은버튼, 우측 이전 버튼 */
/* 약관/개인정보: 하단 가운데 나란히 */
html.h5p #ST_btn2 { left: 225px !important; top: auto !important; bottom: 75px !important; }
html.h5p #ST_btn3 { left: 525px !important; top: auto !important; bottom: 75px !important; }
/* 이전 버튼: 다른 서브화면과 동일하게 상단 왼쪽 (원형 화살표) */
html.h5p #ST_back { left: 36px !important; top: 99px !important; bottom: auto !important; }

/* ============ 게임시작 - 방 선택 (S_SELECTMAP) ============ */
/* 카드 4장(혼자하기/등급방/자유방/도신의탑, 341x364)을 2x2 격자로 재배치.
   4장 모두 표시되므로 스크롤이 필요 없다 -> 컨테이너 left 고정(드래그로 격자가 밀리는 것 방지) */

html.h5p #Img_SM_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_SM_background2 { display: none !important; }
html.h5p #Img_SM_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 원본 타이틀 이미지(경기장 선택)와 카드 4장, 설명 박스는 모드선택으로 대체됐다.
   기능 연결이 남아 있으니 지우지 않고 감추기만 한다 (혼자하기/자유방은 추후 재배치) */
html.h5p #SM_title
{
    display: none !important;
}

html.h5p #s_selectmap_card { left: 0 !important; display: none !important; }
html.h5p #SM_card_1 { left: 16.5px  !important; top: 480px !important; }
html.h5p #SM_card_2 { left: 552px !important; top: 480px !important; }
html.h5p #SM_card_3 { left: 16.5px  !important; top: 1041px !important; }
html.h5p #SM_card_4 { left: 552px !important; top: 1041px !important; }

/* 포커스된 방 설명 박스(636x80): 하단 이전 버튼 위 중앙 */
html.h5p #SM_info
{
    display: none !important;
}

html.h5p #SM_back
{
    left: 36px !important;
    top: 120px !important;
    bottom: auto !important;
}

/* ---- 모드선택 판 (S_modeselect_portrait.js 가 만든다) ---- */
/* 제목은 이전 버튼과 같은 줄에, 모드 카드 두 장은 그 아래 나란히 */
html.h5p #MSEL_title
{
    position: absolute;
    left: 240px;
    top: 120px;
    height: 168px;
    line-height: 168px;
    font-size: 69px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4.5px 9px rgba(0, 0, 0, 0.7);
}

html.h5p .MSEL_card
{
    position: absolute;
    top: 630px;
    width: 450px;
    height: 510px;
    line-height: 510px;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    color: #442509;
    background: rgba(255, 248, 232, 0.96);
    border: 9px solid #7a5a32;
    border-radius: 42px;
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    cursor: pointer;
}

html.h5p #MSEL_realtime { left: 45px; }
html.h5p #MSEL_ai       { left: 585px; }

/* ============ 등급방 - 경기장 선택 (S_SELECTSTAGE) ============ */
/* 2026-09 디자인 가이드 'A안 2줄 헤더': 방 7개를 한 화면에 세로 리스트로 보여준다.
   원본의 가로 스크롤 카드는 감추고, S_selectstage_portrait.js 가 1080 좌표계에 #SSP_root 를 새로 그린다.
   화면 높이에 따라 달라지는 값(행 높이/썸네일/배율)만 JS 가 CSS 변수로 넘긴다. */

html.h5p #Img_SS_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_SS_background2 { display: none !important; }
html.h5p #Img_SS_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 원본 타이틀 이미지와 가로 카드 묶음은 감춘다 */
html.h5p #SS_title { display: none !important; }
html.h5p #s_selectstage_card { display: none !important; }

/* 뒤로 버튼은 원본 것을 그대로 쓴다 (위치/모양은 '이전 버튼 공통' 규칙).
   짧은 폰에서 행 높이가 최소값에 걸리면 리스트 끝이 버튼까지 내려오므로 리스트(#SSP_root z 60)보다 위에 둔다 */
html.h5p #SS_back
{
    z-index: 70 !important;
}

/* ---- 세로 리스트 뿌리 ----
   1080 좌표계로 그린다 (2026-09-09 부터 상자도 1080 이라 되돌림 축소가 없다).
   (바깥 div_body 에 두면 게임 안내문구/팝업보다 위에 그려져 그것들을 가린다)
   리스트 밖의 빈 곳은 터치를 통과시켜 원본 뒤로 버튼이 계속 눌리게 한다 */
/* 2026-09-29 CEO 지적: 로비의 실시간 대전 방 목록(#MMRT_root z80)과 방 선택 화면(#SSP_root z60)은
   서브 배경(#h5p_subbg z49)보다 위에 있다. 그래서 거기서 '금고로 이동' 을 누르면
   금고가 방 목록 위에 겹쳐 떠 화면이 바뀐 것처럼 보이지 않았다.
   금고/우편함/설정/도움말이 떠 있는 동안에는 두 화면을 감춘다 (닫으면 보던 자리 그대로 돌아온다) */
html.h5p.h5p_subbg_on #MMRT_root,
html.h5p.h5p_subbg_on #SSP_root
{
    visibility: hidden;
}

html.h5p #SSP_root
{
    --ssp_row: 240px;
    --ssp_thumb: 176px;
    --ssp_gap: 16px;
    --ssp_s: 1;

    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 2340px;         /* 실제 캔버스 높이는 JS 가 다시 넣는다 */
    display: none;
    z-index: 60;
    pointer-events: none;
    color: #3a2a18;
}
html.h5p #SSP_root > *,
html.h5p #SSP_root .SSP_row { pointer-events: auto; }

/* ---- 헤더 윗줄 (96 ~ 216): 금화 + 충전 ---- */
html.h5p #SSP_gold
{
    position: absolute;
    right: 196px;
    top: 112px;
    height: 88px;
    line-height: 78px;
    padding: 0 32px 0 96px;
    background: rgba(255, 255, 255, 0.94);
    border: 5px solid #3a2a18;
    border-radius: 44px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-size: 38px;
    font-weight: 800;
    white-space: nowrap;
}
html.h5p #SSP_coin
{
    position: absolute;
    left: 14px;
    top: 11px;
    width: 56px;
    height: 56px;
    background: #f6c445;
    border: 5px solid #b07d12;
    border-radius: 50%;
    box-sizing: border-box;
}
html.h5p #SSP_charge
{
    position: absolute;
    right: 84px;
    top: 112px;
    width: 88px;
    height: 88px;
    line-height: 74px;
    text-align: center;
    font-size: 54px;
    font-weight: 800;
    color: #ffffff;
    background: #4caf50;
    border: 5px solid #2e7d32;
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    cursor: pointer;
}
html.h5p #SSP_charge:active { background: #3d8b40; }

/* ---- 헤더 아랫줄 (216 ~ 376): 간판 타이틀 ---- */
html.h5p #SSP_sign
{
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 232px;
    width: 600px;
    height: 128px;
    line-height: 116px;
    text-align: center;
    background: #f0dcb0;
    border: 6px solid #8a6a3c;
    border-radius: 18px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
/* 간판 양옆 나무 기둥 */
html.h5p #SSP_sign:before,
html.h5p #SSP_sign:after
{
    content: "";
    position: absolute;
    top: 26px;
    width: 44px;
    height: 68px;
    background: #8a6a3c;
    border-radius: 8px;
}
html.h5p #SSP_sign:before { left: -60px; }
html.h5p #SSP_sign:after  { right: -60px; }

html.h5p #SSP_sign_txt
{
    font-size: 68px;
    font-weight: 800;
    color: #5a3a1a;
}

/* ---- 리스트 ---- */
html.h5p #SSP_list
{
    position: absolute;
    left: 48px;
    top: 408px;
    width: 984px;
}

html.h5p .SSP_row
{
    position: relative;
    height: var(--ssp_row);
    margin-bottom: var(--ssp_gap);
    border-radius: 24px;
    border: 4px solid #cbbda2;
    background: #f2ece0;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}
html.h5p .SSP_row:last-child { margin-bottom: 0; }

/* 입장 가능 / 불가 / 추천 */
html.h5p .SSP_row.SSP_on
{
    background: #fdf6e3;
    border-color: #d8c297;
}
html.h5p .SSP_row.SSP_off
{
    background: #e9e6e0;
    border-color: #d0cbc2;
}
html.h5p .SSP_row.SSP_best
{
    background: #fdf1d2;
    border-color: #e8b93b;
    border-width: 6px;
}
html.h5p .SSP_row.SSP_on:active { background: #f7e8c4; }

/* 썸네일 (원본 카드 이미지의 문짝 부분) */
html.h5p .SSP_thumb
{
    position: absolute;
    left: 28px;
    top: -webkit-calc((var(--ssp_row) - var(--ssp_thumb)) / 2);
    top: calc((var(--ssp_row) - var(--ssp_thumb)) / 2);
    width: var(--ssp_thumb);
    height: var(--ssp_thumb);
    border: 4px solid #8a6a3c;
    border-radius: 16px;
    background-repeat: no-repeat;
    background-color: #d9b98a;
    box-sizing: border-box;
}
html.h5p .SSP_row.SSP_off .SSP_thumb
{
    -webkit-filter: grayscale(0.65) brightness(0.92);
    filter: grayscale(0.65) brightness(0.92);
    border-color: #a89880;
}

/* 판돈 / 입장 조건 */
html.h5p .SSP_info
{
    position: absolute;
    left: -webkit-calc(60px + var(--ssp_thumb));
    left: calc(60px + var(--ssp_thumb));
    right: 300px;
    top: 0;
    height: 100%;
}
html.h5p .SSP_name
{
    position: absolute;
    left: 0;
    top: -webkit-calc(var(--ssp_row) / 2 - 54px * var(--ssp_s));
    top: calc(var(--ssp_row) / 2 - 54px * var(--ssp_s));
    font-size: -webkit-calc(44px * var(--ssp_s));
    font-size: calc(44px * var(--ssp_s));
    font-weight: 800;
    white-space: nowrap;
}
html.h5p .SSP_range
{
    position: absolute;
    left: 0;
    top: -webkit-calc(var(--ssp_row) / 2 + 8px * var(--ssp_s));
    top: calc(var(--ssp_row) / 2 + 8px * var(--ssp_s));
    font-size: -webkit-calc(30px * var(--ssp_s));
    font-size: calc(30px * var(--ssp_s));
    font-weight: 400;
    color: #7a6a52;
    white-space: nowrap;
}
html.h5p .SSP_row.SSP_off .SSP_name  { color: #9a9086; }
html.h5p .SSP_row.SSP_off .SSP_range { color: #a89e93; }

/* 입장 버튼 + 화살표 */
html.h5p .SSP_enter
{
    position: absolute;
    right: 84px;
    top: -webkit-calc((var(--ssp_row) - 88px * var(--ssp_s)) / 2);
    top: calc((var(--ssp_row) - 88px * var(--ssp_s)) / 2);
    width: -webkit-calc(196px * var(--ssp_s));
    width: calc(196px * var(--ssp_s));
    height: -webkit-calc(88px * var(--ssp_s));
    height: calc(88px * var(--ssp_s));
    line-height: -webkit-calc(78px * var(--ssp_s));
    line-height: calc(78px * var(--ssp_s));
    text-align: center;
    font-size: -webkit-calc(38px * var(--ssp_s));
    font-size: calc(38px * var(--ssp_s));
    font-weight: 800;
    color: #ffffff;
    background: #4caf50;
    border: 4px solid #2e7d32;
    border-radius: 44px;
    box-sizing: border-box;
}
html.h5p .SSP_chev
{
    position: absolute;
    right: 32px;
    top: 0;
    height: 100%;
    line-height: var(--ssp_row);
    font-size: -webkit-calc(46px * var(--ssp_s));
    font-size: calc(46px * var(--ssp_s));
    font-weight: 800;
    color: #8a7a65;
}
html.h5p .SSP_row.SSP_off .SSP_enter,
html.h5p .SSP_row.SSP_off .SSP_chev { display: none; }

/* 추천 배지 - 배지가 있으면 입장 버튼을 아래로 내린다 */
html.h5p .SSP_badge
{
    display: none;
    position: absolute;
    right: 84px;
    top: -webkit-calc(20px * var(--ssp_s));
    top: calc(20px * var(--ssp_s));
    height: -webkit-calc(50px * var(--ssp_s));
    height: calc(50px * var(--ssp_s));
    line-height: -webkit-calc(42px * var(--ssp_s));
    line-height: calc(42px * var(--ssp_s));
    padding: 0 22px;
    text-align: center;
    font-size: -webkit-calc(28px * var(--ssp_s));
    font-size: calc(28px * var(--ssp_s));
    font-weight: 800;
    color: #4a3510;
    background: #f5c542;
    border: 3px solid #b07d12;
    border-radius: 25px;
    box-sizing: border-box;
}
html.h5p .SSP_row.SSP_best .SSP_badge { display: block; }
html.h5p .SSP_row.SSP_best .SSP_enter
{
    top: -webkit-calc(var(--ssp_row) - 110px * var(--ssp_s));
    top: calc(var(--ssp_row) - 110px * var(--ssp_s));
}

/* 잠긴 방: 자물쇠 + 왜 못 들어가는지 */
html.h5p .SSP_lock
{
    display: none;
    position: absolute;
    right: 96px;
    top: -webkit-calc(var(--ssp_row) / 2 - 48px * var(--ssp_s));
    top: calc(var(--ssp_row) / 2 - 48px * var(--ssp_s));
    width: -webkit-calc(60px * var(--ssp_s));
    width: calc(60px * var(--ssp_s));
    height: -webkit-calc(72px * var(--ssp_s));
    height: calc(72px * var(--ssp_s));
}
html.h5p .SSP_row.SSP_off .SSP_lock { display: block; }
/* 자물쇠 고리 */
html.h5p .SSP_lock:before
{
    content: "";
    position: absolute;
    left: 15%;
    top: 0;
    width: 70%;
    height: 46%;
    border: -webkit-calc(9px * var(--ssp_s)) solid #a89880;
    border: calc(9px * var(--ssp_s)) solid #a89880;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    box-sizing: border-box;
}
/* 자물쇠 몸통 */
html.h5p .SSP_lock:after
{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 62%;
    background: #a89880;
    border-radius: 10px;
}
html.h5p .SSP_state
{
    position: absolute;
    right: 32px;
    bottom: -webkit-calc(20px * var(--ssp_s));
    bottom: calc(20px * var(--ssp_s));
    font-size: -webkit-calc(28px * var(--ssp_s));
    font-size: calc(28px * var(--ssp_s));
    font-weight: 400;
    color: #8a7a65;
    white-space: nowrap;
}

/* ============ 인게임 (S_GAME) - 디자이너 세로 가이드(2026-09 김나현) 재설계 ============ */
/* 구조: [상단 고정: 상대 먹은패+HUD] [중앙 가변: 바닥패/덱] [하단 고정: 내 HUD+먹은패+손패 2줄]
   패 좌표는 h5_portrait_game.js 의 좌표 테이블/접근자 교체로 처리. 여기서는 배경 레이어와
   인라인 고정 좌표로 그려지는 HUD만 재배치한다. 게임 로직 무변경.
   좌표계: 720 기준 legacy 공간 (디자이너 1080 수치 / 1.5). bottom 값은 캔버스 바닥 앵커. */

/* 컨테이너: 캔버스 전체 + 기본 배경(세로 그라데이션 #395d38 -> #27412b)
   게임 코드가 인라인으로 1280x720을 지정하므로 !important 필수 */
html.h5p #S_GAME_div
{
    position: absolute;
    /* 1080 기준 좌표계를 캔버스 가운데에 놓는다.
       상자(h5p_legacy) 밖으로 나오면서 100% 가 캔버스 전체폭(태블릿은 1080보다 넓다)이 되어
       게임이 왼쪽으로 밀렸다. 폭을 1080 으로 고정하고 가운데 정렬한다 */
    left: 50% !important; margin-left: -540px !important;
    top: 0 !important;
    width: 1080px !important; height: 100% !important;
    background: linear-gradient(#395d38, #27412b);
    overflow: visible !important; /* 태블릿 좌우 확장 배경이 720 코어 밖으로 나가야 함 (div_body가 최종 클리핑) */
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}

/* 가로판 배경 그림(TV 전용)은 숨긴다 */
html.h5p #Img_GA_bg { display: none !important; }

/* ---- 배경 레이어 (h5_portrait_game.js 가 주입, 전부 터치 통과) ----
   태블릿: --g_bg_left/--g_bg_w 로 좌우 확장. 상/하단 띠(hand_area_bg2/hand_area_bg)는 기기 가로폭에 맞춰 가로로만 늘린다 (2026-09-12 CEO 지시) */
html.h5p .h5pg_layer
{
    position: absolute;
    left: var(--g_bg_left, 0px);
    width: var(--g_bg_w, 1080px);
    pointer-events: none;
}

/* 기본 배경(세로 그라데이션): 태블릿/와이드 폰의 좌우 확장영역까지 전폭을 덮는다 */
html.h5p #h5pg_base
{
    top: 0;
    bottom: 0;
    background: linear-gradient(#395d38, #27412b);
}

/* 보드 타일: 화면 전체에 먼저 깐다 (2026-09-09 CEO 지시). 그 위에 상/하단 띠를 얹는다 */
html.h5p #h5pg_board
{
    top: 0;
    bottom: 0;
    background: url(../image/2_game/h5p/board_tile.jpg) repeat;
    background-size: 1080px 294px;
    /* 바둑판식 반복의 기준을 1080 기둥 왼쪽(x 0)에 맞춘다 - 가운데는 폰과 같고 태블릿 좌우 여분은 같은 타일로 이어 채운다 (2026-09-12 CEO 지시) */
    background-position: calc(-1 * var(--g_bg_left, 0px)) 0;
}

/* 중앙 하단 명암 오버레이(board_bottom_gradient 1080x550 원본 크기):
   아래끝을 게임영역(1080x2340 기준 323~1404, 세로 1081) 끝에 맞춘다 (2026-09-12 CEO 지시).
   bottom 936 = hand_area_bg 윗변 940 - 4. 마지막 4줄은 hand_area_bg 의 흐린 윗변 4줄 아래로 겹친다 */
html.h5p #h5pg_grad
{
    display: none;   /* 위치를 다시 맞출 때까지 잠깐 감춘다 (2026-09-12 CEO 지시) */
    bottom: 936px;
    height: 550px;
    background: url(../image/2_game/h5p/board_bottom_gradient.png) repeat-x;
    background-size: 1080px 550px;
}

/* 상단 띠: 상대 먹은패 영역 + HUD 스트립이 한 장으로 합쳐진 이미지 (2026-09-09 디자이너 교체).
   1080x323 - 화면 맨 위부터 깐다. top_hud_bg 는 이 안에 포함되어 더 쓰지 않는다 */
html.h5p #h5pg_band_top
{
    top: 0;
    height: 343px;
    /* 기기 가로폭에 맞춰 가로로만 늘린다 (반복하면 태블릿에서 이음매가 보였다, 2026-09-12 CEO 지시) */
    /* 그림은 20 아래에 깔고 위 20 만 그림 윗줄과 같은 단색으로 채운다 (2026-09-17 CEO 지시: 상대 띠 20 내림).
       그림 속 좁은 띠는 반투명이라 밑에 보드 타일이 비쳐야 한다 - 단색을 전체에 깔면 진하게 보인다 (2026-09-17 CEO 지적) */
    background-color: transparent;
    background-image: url(../image/2_game/h5p/hand_area_bg2.png?v=2), linear-gradient(#27412b, #27412b);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 20px, 0 0;
    background-size: 100% 323px, 100% 22px;	/* 단색은 그림 윗변 밑으로 2 더 깔아 틈을 막는다 (그림 윗줄은 불투명) */
}

/* 하단 띠: HUD 스트립 + 내 손패 영역이 한 장으로 합쳐진 이미지 (2026-09-09 디자이너 교체).
   1080x823 원본 크기. 윗변 4줄이 흐려져 보드와 4 겹쳐 이어진다.
   1080x2340 에서 상단띠 323 + 보드 1081 아래(1404)에서 4 올린 1400 부터 그린다 (2026-09-12 CEO 지시).
   그림 아래 117(하단 세이프존)은 그림 맨 아랫줄과 같은 색(#27412b)으로 채운다 - 상자만 늘리고 그림은 늘이지 않는다 */
/* 그림 위쪽 좁은 띠(연두색 선 사이)는 20% 검정 반투명이라 밑에 보드 타일이 비쳐야 그림대로 보인다.
   예전에는 그림 아래 남는 117 을 채우려고 요소 전체에 어두운 초록(#27412b)을 깔아, 띠가 보드 대신 그 초록 위에서 더 어둡게 보였다.
   이제 초록은 그림 아래(823 부터 117)에만 깐다 (그림 맨 아랫줄 색과 같다, 2026-09-12 CEO 지적) */
html.h5p #h5pg_hand_bg
{
    bottom: 0;
    height: 928px;  /* 823 + 117 - 12 (2026-09-29 CEO 지시로 하단 묶음을 12 내림) */
    background-color: transparent;
    background-image: url(../image/2_game/h5p/hand_area_bg.png), linear-gradient(#27412b, #27412b);
    background-repeat: no-repeat, no-repeat;
    /* 초록 채움은 그림 아래끝보다 8 위(815)부터 그림 밑에 깔아 둔다 (2026-09-14 CEO 지적 - S25 Ultra 에서 아래쪽에 가는 줄이 보였다).
       캔버스를 축소해 그리면 그림 아랫변이 반투명하게 번져, 그림과 채움이 딱 맞닿는 줄(바닥에서 117)이 비쳐 보였다.
       그림 맨 아래 줄들은 채움과 같은 색(#27412b)의 불투명이라 겹쳐도 그림은 그대로다 */
    background-position: 0 0, 0 815px;
    background-size: 100% 823px, 100% 125px;   /* 그림은 기기 가로폭에 맞춰 가로로만 늘린다 (2026-09-12 CEO 지시) */
}

/* 점수 바 (상대/나) */
/* 새 score_bar.png 454x65 (2026-09-12 CEO 교체, 예전보다 폭 20 작음) - 20 더 오른쪽 left 421, 오른끝 875 는 그대로.
   앞에 오는 숫자 글자는 아래 #user_*_go/shake/puk 규칙 */
html.h5p .h5pg_sbar
{
    position: absolute;
    left: 426px;	/* 2026-09-29 CEO 지시로 5 오른쪽 (예전 421) */
    width: 454px;
    height: 65px;
    background: url(../image/2_game/h5p/score_bar.png) no-repeat 0 0;
    background-size: 454px 65px;
    pointer-events: none;
}
/* 점수바 안 고/흔들기/뻑 아이콘 (scorebonus1~3, 35x38 원본 크기 - 2026-09-12 CEO 교체). 점수바 기준 x 54 / 125 / 196, y 13.
   처음에는 흐린 그림(_dim), 그 횟수가 1 이상이면 선명한 그림 (h5_portrait_game.js h5pg_update_bonus 가 h5pg_on 을 붙인다) */
html.h5p .h5pg_bonus
{
    position: absolute;
    top: 13px;
    width: 35px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 35px 38px;
}
html.h5p .h5pg_bonus_go    { left: 54px;  background-image: url(../image/2_game/h5p/scorebonus1_dim.png); }
html.h5p .h5pg_bonus_shake { left: 125px; background-image: url(../image/2_game/h5p/scorebonus2_dim.png); }
html.h5p .h5pg_bonus_puk   { left: 196px; background-image: url(../image/2_game/h5p/scorebonus3_dim.png); }
html.h5p .h5pg_bonus_go.h5pg_on    { background-image: url(../image/2_game/h5p/scorebonus1.png); }
html.h5p .h5pg_bonus_shake.h5pg_on { background-image: url(../image/2_game/h5p/scorebonus2.png); }
html.h5p .h5pg_bonus_puk.h5pg_on   { background-image: url(../image/2_game/h5p/scorebonus3.png); }

/* ============ 게임판 새 이펙트 (h5_portrait_game_fx.js, 2026-09-24 CEO 지시) ============
   위/아래 띠의 단·광 표시등, 예감/비상 배너, 광박/피박 배너. 그림은 1080 기준 원본 크기 그대로 얹는다 */
html.h5p #h5pgfx_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    pointer-events: none;
    z-index: 30;		/* 카드 위, 팝업 아래 */
}

/* 예감/비상 배너가 들어가는 층 - 세로는 지금 보이던 차례 그대로 둔다 (가로만 배지 위로 올렸다) */
html.h5p #h5pgfx_top
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    pointer-events: none;
    z-index: 30;
}
/* ---- 오광/고도리/단 완성 큰 연출: 게임판 한가운데 + 뒤에 딴 (2026-09-26 CEO 지시) ---- */
html.h5p #h5pgfx_big_dim
{
    position: absolute;
    left: -50%;
    top: 0;
    width: 200%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
html.h5p #h5pgfx_big
{
    position: absolute;
    left: 0;
    top: 330px;
    width: 1080px;
    height: 1084px;
    display: none;
    pointer-events: none;
}
/* 연하게 사라진다 */
html.h5p #h5pgfx_big.h5pgfx_big_out,
html.h5p #h5pgfx_big_dim.h5pgfx_big_out
{
    opacity: 0;
    -webkit-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
}

/* 광박/피박 띄(원본 362x144)는 옆 열끗 칸을 침범해 70% 로 줄인다 (2026-09-26 CEO 지시) */
html.h5p #h5pgfx_you_kwangbak,
html.h5p #h5pgfx_you_pibak,
html.h5p #h5pgfx_me_kwangbak,
html.h5p #h5pgfx_me_pibak
{
    width: 253px;
    height: 101px;
}

html.h5p .h5pgfx_img
{
    position: absolute;
    display: none;
    pointer-events: none;
}

/* 옛 표시등(가로판 코드가 그리는 led_*)은 세로에서는 위 새 표시등이 대신한다 */
html.h5p #get_i_KW_info, html.h5p #get_i_SI_info,
html.h5p #get_i_DI_info1, html.h5p #get_i_DI_info2, html.h5p #get_i_DI_info3, html.h5p #get_i_PI_info,
html.h5p #get_you_KW_info, html.h5p #get_you_SI_info,
html.h5p #get_you_DI_info1, html.h5p #get_you_DI_info2, html.h5p #get_you_DI_info3, html.h5p #get_you_PI_info
{
    display: none !important;
}

/* ============ 도신 대전(도신의 탑) 파란 게임 화면 (2026-09-15 CEO 지시 - 실시간 대전 녹색 / 도신 대전 파란색) ============
   h5_portrait_game.js h5pg_sync_mode_ui 가 도신의 탑 대전일 때 html 에 h5pg_tower 를 붙인다.
   그림은 녹색 그림과 이름·크기가 같은 image/2_game/h5p/tower/ 판을 쓰고, 자리/크기 규칙은 위 녹색 규칙을 그대로 따른다.
   바탕색은 파란 띠 그림 맨 아랫줄 색 #26476c (녹색 #27412b 자리) */
html.h5p.h5pg_tower #S_GAME_div,
html.h5p.h5pg_tower #h5pg_base
{
    background: linear-gradient(#3a6394, #26476c);
}
html.h5p.h5pg_on.h5pg_tower
{
    background: linear-gradient(#3a6394, #26476c) !important;
}
html.h5p.h5pg_tower #h5pg_board     { background-image: url(../image/2_game/h5p/tower/board_tile.jpg); }
html.h5p.h5pg_tower #h5pg_grad      { background-image: url(../image/2_game/h5p/tower/board_bottom_gradient.png); }
html.h5p.h5pg_tower #h5pg_band_top  { background-image: url(../image/2_game/h5p/tower/hand_area_bg2.png?v=2), linear-gradient(#26476c, #26476c); }
html.h5p.h5pg_tower #h5pg_hand_bg   { background-image: url(../image/2_game/h5p/tower/hand_area_bg.png), linear-gradient(#26476c, #26476c); }
html.h5p.h5pg_tower .h5pg_sbar      { background-image: url(../image/2_game/h5p/tower/score_bar.png); }
html.h5p.h5pg_tower .h5pg_bonus_go    { background-image: url(../image/2_game/h5p/tower/scorebonus1_dim.png); }
html.h5p.h5pg_tower .h5pg_bonus_shake { background-image: url(../image/2_game/h5p/tower/scorebonus2_dim.png); }
html.h5p.h5pg_tower .h5pg_bonus_puk   { background-image: url(../image/2_game/h5p/tower/scorebonus3_dim.png); }
html.h5p.h5pg_tower .h5pg_bonus_go.h5pg_on    { background-image: url(../image/2_game/h5p/tower/scorebonus1.png); }
html.h5p.h5pg_tower .h5pg_bonus_shake.h5pg_on { background-image: url(../image/2_game/h5p/tower/scorebonus2.png); }
html.h5p.h5pg_tower .h5pg_bonus_puk.h5pg_on   { background-image: url(../image/2_game/h5p/tower/scorebonus3.png); }
html.h5p.h5pg_tower #h5pg_me_chip   { background-image: url(../image/2_game/h5p/tower/level.png); }
html.h5p.h5pg_tower .h5pg_you_ph    { background-image: url(../image/2_game/h5p/tower/backcard_empty.png); }
html.h5p.h5pg_tower .h5pg_slot_ph   { background-image: url(../image/2_game/h5p/tower/card_empty.png?v=2); }
/* 점수바는 게임영역 기준으로 둔다 (2026-09-12 CEO 지시).
   게임영역 경계 = 상/하단 띠 그림의 연두색 2px 선: 위 띠(hand_area_bg2) 318~319줄 -> 영역 윗변 320,
   아래 띠(hand_area_bg, top 1400) 4~5줄 -> 영역 아랫변 1404 (1080x2340 기준).
   위: 영역 윗변 320 + 14 = 334 / 아래: 아랫끝 = 영역 아랫변(bottom 936) - 14 -> bottom 950 */
html.h5p #h5pg_sbar_you { top: 354px; }	/* 334 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
html.h5p #h5pg_sbar_i { bottom: 938px; }	/* 2026-09-29 CEO 지시로 12 내림 */

/* ---- 상단 고정 영역: 상대 HUD ---- */

/* 상대 정보 컨테이너를 상단 밴드 전체(720폭) 기준으로 펼친다. 자식은 컨테이너 내부 좌표 */
html.h5p #area_user_info_you
{
    /* 2026-10-09 CEO 지적(연습게임 '나가기' 안 눌림): 이 칸(1080x380)이 나가기 버튼(#h5pg_option) 위를 덮어 터치를 가로챘다.
       10/8 태블릿 QA 로 나가기 버튼을 게임 오브젝트 아래 층으로 내린 뒤부터. 이 칸에는 누르는 것이 없으므로 터치를 아래로 통과시킨다 */
    pointer-events: none;
    left: 5px !important;	/* 2026-09-29 CEO 지시: 오른쪽 HUD 묶음을 5 오른쪽으로 */
    top: 110px !important;	/* 90 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) - 안의 이름/금액/프로필/레벨 등이 같이 내려간다 */
    width: 1080px !important;
    height: 379.5px !important;
}

/* 상대 닉네임/머니: 상단 스트립 위 (컨테이너 내부 y 116 = 캔버스 176) */
/* 상대 닉네임/보유 금액: 가로 위치는 원래대로(닉네임 왼쪽 39 / 금액 오른쪽 정렬 435~870),
   세로만 위 띠(hand_area_bg2)의 두번째 좁은 영역(연두색 선 사이, 캔버스 y 251~317, 높이 67) 가운데 (2026-09-12 CEO 지시) */
html.h5p #user_you_name
{
    left: 34px !important;	/* 컨테이너가 5 오른쪽으로 가서 이름은 제자리(39)에 남게 되돌린다 */
    top: 161px !important;        /* 251 - 컨테이너 top 90 */
    width: 480px !important;      /* 375 -> 480: 닉네임 15자 (2026-09-22 CEO 지시). 넘치면 h5pg_fit_text 가 글자를 줄인다 */
    white-space: nowrap;
    overflow: hidden;
    height: 67px !important;
    line-height: 67px !important;
    text-align: left !important;
    font-size: 39px !important;
    font-weight: 700;
    color: #f2f7ef !important;
}
html.h5p #user_you_money
{
    left: 525px !important;   /* 425 -> 525: 닉네임 칸을 넓힌 만큼 (2026-09-22). 오른끝 860 그대로, 선 마크에 가리지 않게 (2026-09-12 CEO 지시) */
    top: 161px !important;
    width: 335px !important;
    white-space: nowrap;
    overflow: hidden;
    height: 67px !important;
    line-height: 67px !important;
    text-align: right !important;
    font-size: 43.5px !important;
    font-weight: 700;
    color: #ffdf4d !important;
}

/* 상대 프로필/레벨: 우측 (프로필은 스트립에 살짝 걸침 - 가이드와 동일) */
html.h5p #user_you_face
{
    left: 907px !important;  /* 1080 기준 x 907 (2026-09-12 CEO 지시) */
    top: 181px !important;   /* 캔버스 271 = 게임영역 윗변(위 띠 연두색 선 아래) 320 - 49 (컨테이너 top 90 기준, 2026-09-12 CEO 지시) */
    /* 메인화면 프로필 그림(profile_icon1.png 240x240)을 128x128 로 줄여 쓴다 (2026-09-12 CEO 지시).
       흰 테두리는 그림에 이미 들어 있어 따로 두르지 않는다 */
    width: 128px !important;
    height: 128px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: 0 3px 7.5px rgba(0,0,0,0.35);
    border-radius: 50%;
}
/* 상대 레벨: 프로필 그림(캔버스 271~399)과 점수바(334~399) 아래로 15 띄워 캔버스 414 (컨테이너 top 90 기준 324).
   상대 남은패 등짝 줄(h5_portrait_game.js SLOT_YOU.y)과 같은 높이 (2026-09-12 CEO 지시) */
html.h5p #user_you_level
{
    left: 901.5px !important;
    top: 324px !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    /* 2026-10-10 CEO 지시: 선 결정 동안 이 칸에 '상대' 라고만 떠 있고 알약 바탕이 없었다.
       알약 그림은 원본이 사람 정보를 그릴 때(h5_portrait_game.js 의 lv_css) 인라인으로 붙는데,
       선 결정은 그보다 먼저 지나가는 화면이라 아직 안 붙은 상태였다.
       내 '나' 알약(#h5pg_me_chip)처럼 CSS 로 미리 깔아 둔다 - 같은 그림이라 게임 중에도 달라지지 않는다 */
    width: 140px !important;
    height: 35px !important;
    line-height: 35px !important;
    text-align: center !important;
    color: #ffffff !important;
    background: url(../image/2_game/h5p/level.png) no-repeat 0 0 !important;
    background-size: 140px 35px !important;
}
html.h5p.h5pg_tower #user_you_level
{
    background-image: url(../image/2_game/h5p/tower/level.png) !important;
}

/* 상대 고/흔/뻑: 점수바 위 (점수바 캔버스 y215 = 컨테이너 내부 155) */
/* 점수바(캔버스 334) 위 글자/아이콘 - 점수바와 같이 이동 (2026-09-12) */
html.h5p #user_you_go        { left: 445px !important; top: 259px !important; font-size: 36px !important; width: 32px !important; height: 39px !important; line-height: 39px !important; text-align: center !important; white-space: nowrap !important; }  /* 점수바 기준 x 24, y 13 (2026-09-12 CEO 지시) */
html.h5p #user_you_shake     { left: 516px !important; top: 259px !important; font-size: 36px !important; width: 32px !important; height: 39px !important; line-height: 39px !important; text-align: center !important; white-space: nowrap !important; }  /* 점수바 기준 x 95 */
html.h5p #user_you_shake_img { left: 536px !important; top: 252.5px !important; }
html.h5p #user_you_puk       { left: 587px !important; top: 259px !important; font-size: 36px !important; width: 32px !important; height: 39px !important; line-height: 39px !important; text-align: center !important; white-space: nowrap !important; }  /* 점수바 기준 x 166 */
html.h5p #user_you_puk_img   { left: 623px !important; top: 252.5px !important; }

/* 원본이 따로 그리는 고/흔들기/뻑 아이콘 그림은 숨긴다 - 아이콘은 점수바 안 .h5pg_bonus 요소가 scorebonus1~3 으로 그린다 (2026-09-12).
   숫자는 원본이 그대로 넣고, 예전에 숫자 뒤에 붙이던 '고' 글자는 고 아이콘이 생겨 뺐다 */
html.h5p #user_you_go_img,
html.h5p #user_i_go_img,
html.h5p #user_you_shake_img,
html.h5p #user_i_shake_img,
html.h5p #user_you_puk_img,
html.h5p #user_i_puk_img
{
    display: none !important;
}

/* 상대 점수: 점수바 우측 칸 */
/* 상대 점수: 오른쪽 정렬, 글자 오른끝을 점수바 오른끝(870)에서 30 안쪽(840, 어두운 알약 둥근 끝 안)에 둔다 (2026-09-12 CEO 지시).
   원본이 인라인으로 가운데 정렬을 주므로 !important 로 덮는다 */
html.h5p #score_you
{
    left: 661px !important;   /* 점수바와 같이 5 오른쪽 (2026-09-12) - 글자 오른끝 845 */
    top: 358px !important;  /* 점수바(354) + 4 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
    width: 184px !important;
    text-align: right !important;
    font-size: 40px !important;     /* 45 에서 조금 줄임 (2026-09-12 CEO 지시) */
    font-weight: 700;
    color: #c9ff59 !important;
}

/* 점당 금액: 스트립 아래 좌측 */
html.h5p #jumdang
{
    left: 39px !important;
    top: 350px !important;	/* 330 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
    width: 330px !important;
    text-align: left !important;
    font-size: 37.5px !important;
    font-weight: 700;
    color: #aaff4e !important;
    text-shadow: none !important;
}

/* 확대/축소 버튼: 우측 상단 여백 */
html.h5p #zoom_in_out
{
    left: 840px !important;
    top: 350px !important;	/* 330 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
}

/* 원본 나가기 예약 버튼(우측 프로필 아래)은 쓰지 않는다 - 좌측 나가기 버튼(#h5pg_option)이 같은 기능 (2026-09-12 CEO 지시) */
html.h5p #colorkey1
{
    display: none !important;
}

/* 턴 하이라이트 프레임 이미지(TV 화면 절반용 그림): 세로에선 스트레치 왜곡이 심해 숨긴다.
   턴 표시는 턴 게이지(내 손패 위)와 손패 포커스가 대신한다 */
html.h5p #area_you_turn_focus { display: none !important; }
html.h5p #area_i_turn_focus { display: none !important; }

/* ---- 하단 고정 영역: 내 HUD (모두 bottom 앵커 - 긴 폰에서도 바닥에 붙는다) ---- */

/* 내 정보 컨테이너: 내 HUD 블록(bottom 690~498) 전체 기준. 자식은 내부 좌표 */
html.h5p #area_user_info_i
{
    left: 5px !important;	/* 2026-09-29 CEO 지시: 오른쪽 HUD 묶음을 5 오른쪽으로 */
    top: auto !important;
    bottom: 852px !important;  /* 747 + 올림 117 - 12 (2026-09-29 CEO 지시로 12 내림) */
    height: 288px !important;
    width: 1080px !important;
}

/* 내 고/흔/뻑: 점수바 위 (점수바 = 캔버스 bottom 633+43, 컨테이너 내부 y 14) */
/* 점수바와 같이 116.5 내림 (2026-09-12) */
html.h5p #user_i_go        { left: 445px !important; top: 152px !important; font-size: 36px !important; width: 32px !important; height: 39px !important; line-height: 39px !important; text-align: center !important; white-space: nowrap !important; }  /* 점수바 기준 x 24, y 13 (2026-09-12 CEO 지시) */
html.h5p #user_i_shake     { left: 516px !important; top: 152px !important; font-size: 36px !important; width: 32px !important; height: 39px !important; line-height: 39px !important; text-align: center !important; white-space: nowrap !important; }  /* 점수바 기준 x 95 */
html.h5p #user_i_shake_img { left: 536px !important; top: 146.5px !important; }
html.h5p #user_i_puk       { left: 587px !important; top: 152px !important; font-size: 36px !important; width: 32px !important; height: 39px !important; line-height: 39px !important; text-align: center !important; white-space: nowrap !important; }  /* 점수바 기준 x 166 */

/* 점수바 고/흔/뻑 앞 숫자 글자 - 나/상대 공통 (2026-09-12 CEO 지시): 40px, #ffdd4a, 테두리 #163421 3 굵기.
   숫자가 글자 그림보다 살짝 올라가 보여 위 top 을 5 내렸다가 (상대 257 -> 262, 나 150 -> 155) 3 다시 올렸다 (상대 259, 나 152, 2026-09-14 CEO 지시).
   위 줄들의 36px 보다 뒤에 두어 이 값이 이긴다. 원본 JS 가 넣는 주황(#ff9000)도 여기서 덮는다 */
/* 게임 중 남은 시간 시계(#ga_count, 1080 에서 291x254): 원본은 x 1125 로 1080 기둥 오른쪽 밖에 그렸다 (2026-09-12 CEO 지적).
   게임 화면에서만 기둥 안 오른쪽 세이프존(끝 1041)에 둔다 - 클래스는 h5_portrait_game.js h5pg_place_count 가 턴에 맞춰 붙인다.
   내 턴: 아래 기준(내 점수바 위 '나' 표시 자리) / 상대 턴: 상대 레벨 박스 자리. 선 뽑기/결과 화면은 원본 자리 그대로 */
/* 2026-09-12 CEO 지시: 내 턴 시계는 미션 박스(x 0~406.5, 윗변 화면높이-1065) 위로 - 박스 가로 가운데(left 57.75), 윗변 15 위(bottom 1080) */
/* 2026-09-16 CEO 지시: 내 시계는 내 프로필(캔버스 1325~1453, 가로 가운데 971) 바로 위,
   상대 시계는 상대 프로필(캔버스 271~399) 바로 아래. 시계 그림 291x254 는 오른쪽 세이프존(끝 1041) 안에 두어 화면 밖으로 나가지 않게 한다 */
/* 2026-09-17: 상황 캐릭터가 내 프로필 위로 오면서 내 시계는 미션판 위(박스 가로 가운데 left 57.75, 윗변 15 위 bottom 1080)로 되돌림 */
/* 2026-09-22 CEO 지시: 상황 캐릭터가 게임판 왼쪽 가운데로 옮겨 가서 시계는 나/상대 모두 반대쪽(오른쪽 세이프존 끝 1041)으로 옮긴다 (x 750~1041) */
/* 2026-09-22 새 시계 그림(294x210, '초홍청단 싹쓸이 시계' 가이드): 내 시계는 가이드대로 x 30 / y 1080 (2340 기준 -> 아래에서 1050).
   상대 시계는 가이드에 없어 지금처럼 상대 프로필 아래 오른쪽 (오른끝 1041) */
/* 2026-09-26 CEO 지시: 내 시계도 오른쪽으로 - 내 프로필('나' 칩 캔버스 1275) 바로 위, 오른끝 1041 */
html.h5p #ga_count.h5pg_count_i
{
    left: 829px !important;	/* 2026-09-26 CEO 지시: 숫자가 시계 한가운데 오도록 시계도 같이 오른쪽으로 (숫자 중심 976 = 829 + 147, 2026-09-29 로 5 오른쪽) */
    top: auto !important;
    bottom: 1058px !important;
}
html.h5p #ga_count.h5pg_count_you
{
    left: 829px !important;	/* 2026-09-26 CEO 지시: 숫자가 시계 한가운데 오도록 시계도 같이 오른쪽으로 (숫자 중심 976 = 829 + 147, 2026-09-29 로 5 오른쪽) */
    /* 2026-09-28 CEO 지적: 상대 레벨 알약(#user_you_level 캔버스 414~449)과 겹쳤다.
       내 시계가 '나' 알약 바로 위에 붙듯이, 상대 시계는 레벨 알약 바로 아래(449 + 12)에 둔다 */
    top: 481px !important;	/* 2026-09-29 CEO 지시: 살짝 더 아래로 (461 -> 481) */
    bottom: auto !important;
}
/* 선 뽑기 화면: 선 고르기 팝업(가로 133.5~946.5, 윗변 50%-606) 바로 위 가운데 (2026-09-28 CEO 지시).
   예전에는 원본 자리(왼쪽 위)에 그려져 점수바와 겹쳤다 */
html.h5p #ga_count.h5pg_count_sun
{
    left: 393px !important;	/* 팝업 가로 가운데 540 - 시계 절반 147 */
    top: -webkit-calc(50% - 826px) !important;
    top: calc(50% - 826px) !important;
    bottom: auto !important;
}
/* 결과 화면에서는 시계를 감춘다 (2026-09-29 CEO 지적: 옛 타이머가 왼쪽 위에 튀어나와 보였다).
   원본은 이 화면에서도 5초를 세지만, 세로 결과 화면은 제 버튼을 쓰므로 시계판은 보이지 않게 한다.
   자리 클래스는 h5_portrait_game.js h5pg_place_count 가 결과 화면에서 떼므로, 클래스가 없는 상태를 잡는다 */
html.h5p.h5pg_res_on #ga_count,
html.h5p.h5pg_res_on #h5pg_count_num
{
    display: none !important;
}

/* 새 시계 숫자 (h5_portrait_game.js h5pg_clock_start): 시계판 가운데(그림 기준 147, 118)에 120x120 칸 */
html.h5p #h5pg_count_num
{
    display: none;
    position: absolute;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    /* 2026-09-26 CEO 지시: 좀 더 크고 굵게. 기울기는 h5_portrait_game.js 가 장마다 준다 */
    font-size: 116px;
    font-weight: 900;
    color: #2b1608;
    -webkit-text-stroke: 3px #2b1608;
    text-stroke: 3px #2b1608;
    pointer-events: none;
    /* 2026-09-29 CEO 지시: 기울기를 이어 주면 글자가 흔들리는 듯 보인다 - 시계 그림처럼 딱딱 끊어서 바뀌게 한다 */
    -webkit-transition: none;
    transition: none;
}
html.h5p #h5pg_count_num.h5pg_count_i
{
    left: 916px;	/* 2026-09-26 CEO 지시: 숫자 한가운데를 프로필 한가운데(976) 세로선에 맞춘다 */
    top: auto;
    bottom: 1090px;	/* 1070 + (210 - 118) - 60 */
}
html.h5p #h5pg_count_num.h5pg_count_you
{
    left: 916px;	/* 2026-09-26 CEO 지시: 숫자 한가운데를 프로필 한가운데(976) 세로선에 맞춘다 */
    top: 539px;		/* 481 + 118 - 60 (2026-09-29 시계판을 481 로 내리면서 숫자도 같이 내렸다). 예전 461 + 118 - 60 (2026-09-28 시계를 429 -> 461 로 내릴 때 같이 안 내려 숫자가 시계판 위로 벗어나 있었다) */
    bottom: auto;
}
/* 고/스톱·흔들기 팝업(#ga_popup_div, z-index 1000)이 시계를 반쯤 덮어 숫자가 가려졌다 (2026-09-28 CEO 지적).
   시계는 그 팝업에서 고를 시간을 세는 것이라 팝업 위에 보여야 한다. 게임판(h5pg_on)에서만 올린다 */
html.h5p.h5pg_on #ga_count,
html.h5p.h5pg_on #h5pg_count_num
{
    z-index: 1001;
}

html.h5p #user_you_go, html.h5p #user_you_shake, html.h5p #user_you_puk,
html.h5p #user_i_go, html.h5p #user_i_shake, html.h5p #user_i_puk
{
    font-size: 40px !important;
    color: #ffdd4a !important;
    text-shadow: 3px 0 0 #163421, -3px 0 0 #163421, 0 3px 0 #163421, 0 -3px 0 #163421,
                 2px 2px 0 #163421, -2px 2px 0 #163421, 2px -2px 0 #163421, -2px -2px 0 #163421 !important;
    /* 고/흔/뻑 글자 그림처럼 오른쪽으로 기울인다 (2026-09-12 CEO 지시) */
    -webkit-transform: skewX(-12deg);
    transform: skewX(-12deg);
}
html.h5p #user_i_puk_img   { left: 623px !important; top: 146.5px !important; }

/* 고/흔/뻑 아이콘 1.2배 (원본 28x24) */
html.h5p #user_you_go_img, html.h5p #user_you_shake_img, html.h5p #user_you_puk_img,
html.h5p #user_i_go_img, html.h5p #user_i_shake_img, html.h5p #user_i_puk_img
{
    width: 51px !important;
    height: 43.5px !important;
}

/* 내 프로필/레벨: 우측 */
html.h5p #user_i_face
{
    left: 907px !important;  /* 1080 기준 x 907 (2026-09-12 CEO 지시) */
    top: 137px !important;   /* 캔버스 1325 = 게임영역 아랫변 1404 - 79 (컨테이너 윗변 1188 기준, 2026-09-12 CEO 지시) */
    /* 메인화면 프로필 그림(profile_icon1.png 240x240)을 128x128 로 줄여 쓴다 (2026-09-12 CEO 지시).
       흰 테두리는 그림에 이미 들어 있어 따로 두르지 않는다 */
    width: 128px !important;
    height: 128px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: 0 3px 7.5px rgba(0,0,0,0.35);
    border-radius: 50%;
}
/* 내 레벨: 쓰지 않는다 - 그 자리(프로필 아래)에는 '나' 칩이 들어간다 (2026-09-12 CEO 지시) */
html.h5p #user_i_level
{
    display: none !important;
}

/* '나가기 예약' 표시 (원본 draw_colorkey 가 그 사람이 나가기 예약하면 보인다): 자리는 레벨 박스 줄 그대로 (2026-09-12 CEO 지시).
   알약 배경 없이 원래처럼 노란 글자만 (2026-09-14 CEO 지시). 원본의 내 턴 어두운 글자색도 덮어 늘 노랗게 둔다.
   상대: 레벨 박스(캔버스 414~449) 아래 15 -> 캔버스 464, 상대 정보 컨테이너(top 90) 기준 374.
   나: '나' 표시(캔버스 1275~1310) 위 15 -> 캔버스 1225~1260, 하단 컨테이너(1080x2340 에서 윗변 1188, 바닥 기준) 기준 37 */
html.h5p #user_you_exit,
html.h5p #user_i_exit
{
    left: 881.5px !important;	/* 글자 36 에 맞춰 140 -> 180 폭, 가운데(971.5)는 그대로 */
    width: 180px !important;
    height: 35px !important;
    line-height: 35px !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 700;
    color: #ffdf4d !important;
    text-align: center !important;
    white-space: nowrap;
    background: none !important;
}
/* 2026-09-29 CEO 지시: '나가기 예약' 글자는 띄우지 않는다.
   내 쪽은 버튼이 이미 '나가기 취소' 로 바뀌어 같은 말이 두 번 나왔다 (예약 자체는 그대로 걸린다) */
html.h5p #user_you_exit,
html.h5p #user_i_exit
{
    display: none !important;
}

/* 상대 '자동치기 중' 표시 (원본 draw_colorkey 가 상대가 자동치기면 보인다): 상대 점수바(x 421, 캔버스 334~399) 왼쪽 끝 바로 아래,
   레벨 박스·남은패 줄과 같은 줄(캔버스 414~449)에 왼쪽 맞춤 (2026-09-12 CEO 지시). 상대 정보 컨테이너(top 90) 기준 324 */
html.h5p #user_you_auto
{
    /* 2026-09-29 CEO 지시: 글자 오른끝이 상대 남은패 줄(왼끝 593)에 붙어 있었다 - 왼쪽으로 옮겨 띄운다.
       처음 56 은 너무 멀다 하셔서 반(28)으로 줄였다 */
    left: 393px !important;
    top: 324px !important;
    width: 210px !important;
    height: 35px !important;
    line-height: 35px !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 700;
    text-align: left !important;
    white-space: nowrap;
    /* 원본은 상대 턴이면 어두운 초록(#1f3d14)으로 바꿔 세로 판에서는 안 보였다 -> 늘 하늘색 (2026-09-16 CEO 지적) */
    color: #00d8ff !important;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

/* 내 닉네임/머니: 하단 스트립 위 (스트립 = 컨테이너 내부 y 112~161) */
/* 내 닉네임: 쓰지 않는다 (2026-09-12 CEO 지시) */
html.h5p #user_i_name
{
    display: none !important;
}
/* 내 보유 금액: 가로 위치는 원래대로(오른쪽 정렬 435~870), 세로만 아래 띠(hand_area_bg, top 1400)의
   첫번째 좁은 영역(연두색 선 사이, 캔버스 y 1406~1472, 높이 67) 가운데 (2026-09-12 CEO 지시).
   컨테이너 윗변(1080x2340 에서 1188) 기준 218 - 컨테이너가 바닥 기준이라 화면 높이가 달라도 같다 */
html.h5p #user_i_money
{
    left: 430px !important;   /* 10 왼쪽 - 오른끝 865, 선 마크에 가리지 않게 (2026-09-12 CEO 지시) */
    top: 218px !important;
    width: 435px !important;
    height: 67px !important;
    line-height: 67px !important;
    text-align: right !important;
    font-size: 43.5px !important;
    font-weight: 700;
    color: #ffdf4d !important;
}

/* 머니 증감 history (같은 상대와 이어 칠 때 이번 상대에게 따거나 잃은 돈): 점수바(캔버스 1325~1390)와 겹쳐서
   점수바 위 '나' 표시 줄(캔버스 1275~1310) 왼쪽 빈 곳으로 올린다. 오른끝은 점수바 오른끝(870)에 맞춤 (2026-09-17 CEO 지시).
   하단 컨테이너(1080x2340 에서 윗변 1188) 기준 1276 - 1188 = 88 */
html.h5p #user_i_history
{
    left: 450px !important;
    top: 88px !important;
    width: 420px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    text-align: right !important;
    white-space: nowrap;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

/* 내 점수: 상대 점수와 같이 오른쪽 정렬, 글자 오른끝을 점수바 오른끝(870)에서 30 안쪽(840)에 둔다 (2026-09-12 CEO 지시).
   원본이 인라인으로 가운데 정렬을 주므로 !important 로 덮는다 */
html.h5p #score_i
{
    left: 661px !important;   /* 점수바와 같이 5 오른쪽 (2026-09-12) - 글자 오른끝 845 */
    top: auto !important;
    bottom: 942.5px !important;  /* 점수바(bottom 938) + 4.5 - 2026-09-29 CEO 지시로 하단 묶음과 같이 12 내림 */
    width: 184px !important;
    text-align: right !important;
    font-size: 40px !important;     /* 45 에서 조금 줄임 (2026-09-12 CEO 지시) */
    font-weight: 700;
    color: #c9ff59 !important;
}

/* 미션 UI: 디자이너 보드(mission.png)로 교체, 내 HUD 블록 좌측 (가이드 실측 위치).
   2026-09-15 그림을 2.3배(936x403)로 다시 받았다 - 가운데 등장 연출(최대 2.3배)에서도 선명하게.
   2026-09-29 CEO 가 타이틀(MISSION)을 틀 밖 왼쪽 위로 빼낸 새 그림(936x454)으로 바꿨다.
   틀 자체와 아랫변은 그대로고 위로만 51(화면 22) 늘었다 - 화면 크기를 406.5x175.5 -> 406.5x197.5 로 바꾸고 아랫변(bottom 889.5)은 그대로 둔다 */
/* 미션 보드: 윗변을 게임판 영역 아래끝(화면 아래에서 936, 아래 띠 연두색 선)에 맞춘 뒤 100 올린다 (2026-09-12 CEO 정정).
   윗변 = 아래에서 1036 -> 보드 높이 175.5 를 빼 bottom 860.5 (1080x2340 에서 윗변 y 1304) */
/* 2026-09-12 CEO 지시: 왼쪽 화면 끝에 딱 붙이고(18 -> 0) 10 위로 (bottom 860.5 -> 870.5).
   2026-09-12 CEO 지시: 윗변을 오른쪽 '나' 표시(bottom 1030, 높이 35 -> 윗변 화면높이-1065)와 같은 줄로 19 더 올림 (870.5 -> 889.5) */
html.h5p #game_mission
{
    left: 0 !important;
    top: auto !important;
    /* 2026-09-29 CEO 지시: 내 보유금액 글상자 아랫변(바닥에서 867)에 맞춘 뒤 다시 2 올렸다 (889.5 -> 867 -> 869) */
    bottom: 857px !important;
    width: 406.5px !important;
    height: 197.5px !important;
    background-image: url(../image/2_game/h5p/mission.png) !important;
    background-size: 406.5px 197.5px !important;
    background-repeat: no-repeat !important;
}
/* 미션 표시 그림: 새 그림(image/2_game/h5p/fx, 1080 기준)을 원본 크기 그대로.
   자리는 h5_portrait_game.js h5pg_mis_fix_mark 가 넣는다 (2026-09-29 CEO 지시) */
/* 미션 성공/실패가 정해지면 판을 통째로 어둡게 덮고 그 위에 글자를 올린다 (2026-09-29 CEO 지시).
   ::after 는 자식(패·배지) 뒤에 그려져 패까지 같이 어두워진다. 글자만 z-index 로 그 위로.
   2026-09-29 CEO 지적: 네모로 덮었더니 'MISSION' 띠와 판 테두리는 밝게 남아 덮은 자리가 도드라졌다.
   판 그림을 그대로 물려받아(background: inherit) 새까맣게 만든 뒤 반투명으로 얹는다 -
   그러면 그림이 그려진 모양 그대로(띠·테두리 포함) 어두워지고, 그림 밖 빈 곳은 그대로 비어 있다 */
html.h5p #game_mission.h5pg_mis_over::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    -webkit-filter: brightness(0);
    filter: brightness(0);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}
html.h5p #game_mission .h5pg_mis_ox
{
    width: 88px !important;
    height: 142px !important;
    z-index: 2;
}
/* 미션 성공/실패 글자는 판 안에서 맨 위로 (2026-10-08 CEO 지시) - 화살표에 가려 읽기 어려웠다 */
html.h5p #game_mission .h5pg_mis_all
{
    width: 272px !important;
    height: 140px !important;
    z-index: 4;
}
/* 누가 가져갔는지 알려 주는 화살표 (2026-09-30 CEO 전달 새 그림).
   동그라미 한가운데에 꼭 맞는 한 벌이라 같은 자리에 겹쳐 놓고 동그라미 위로 올린다 */
/* 화살표는 딤(z 1) 아래에 깔린다 (2026-10-08 CEO 지시).
   성공/실패가 나기 전에는 딤이 없어 그대로 보인다 */
html.h5p #game_mission .h5pg_mis_arrow
{
    width: 50px !important;
    height: 67px !important;
    z-index: 0;
}
/* 미션 보드 등장: 왼쪽 화면 밖에서 지금 자리(left 0)까지 밀려 들어온다 (2026-09-12 CEO 지시).
   h5_portrait_game.js 가 원본 showup 때 이 클래스를 다시 붙인다. 자리(left/bottom)는 그대로 두고 transform 만 움직인다 */
html.h5p #game_mission.h5pg_mis_slide
{
    -webkit-animation: h5pg_mis_slide_in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
    animation: h5pg_mis_slide_in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@-webkit-keyframes h5pg_mis_slide_in
{
    from { -webkit-transform: translateX(-100%); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes h5pg_mis_slide_in
{
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
/* 미션 보드 첫 등장: 게임판 가운데(가운데 더미 자리)에서 작게 -> 크게 나타나 잠깐 보여 주고 사라진다 (2026-09-14 CEO 지시).
   h5_portrait_game.js 가 보드 자리에서 가운데 더미까지의 거리(--h5pg_mis_dx/dy)를 넣고, 끝나면 h5pg_mis_slide 로 이어 붙인다.
   길이 1.1s 는 h5_portrait_game.js H5PG_MIS_INTRO_MS 와 같아야 한다 (2.2s -> 1.1s 반으로, 2026-09-14 CEO 지시. 커지는/사라지는 0.32s 는 그대로, 크게 멈춰 있는 시간 1.4s -> 0.3s). 판 위 패(흔들기 팝업 z 1000)보다 위에 뜬다.
   가운데에서는 원래 크기의 2배(812x351)로 보인다 - 원래 크기는 너무 작았다 (2026-09-14 CEO 지시).
   커지는 시간(0.32s)·사라지는 시간(0.32s)은 그대로 두고, 크게 멈춰 있는 시간만 0.8s -> 1.4s 로 늘렸다 - 읽기 전에 사라졌다 (2026-09-14 CEO 지시) */
html.h5p #game_mission.h5pg_mis_intro
{
    z-index: 1500 !important;
    -webkit-animation: h5pg_mis_intro_pop 1.1s ease-out both;
    animation: h5pg_mis_intro_pop 1.1s ease-out both;
}
@-webkit-keyframes h5pg_mis_intro_pop
{
    0%     { -webkit-transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(0.4); opacity: 0; }
    29.1%  { -webkit-transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(2.3); opacity: 1; }
    43.6%  { -webkit-transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(2); opacity: 1; }
    70.9%  { -webkit-transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(2); opacity: 1; }
    100%   { -webkit-transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(0.6); opacity: 0; }
}
@keyframes h5pg_mis_intro_pop
{
    0%     { transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(0.4); opacity: 0; }
    29.1%  { transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(2.3); opacity: 1; }
    43.6%  { transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(2); opacity: 1; }
    70.9%  { transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(2); opacity: 1; }
    100%   { transform: translate(var(--h5pg_mis_dx, 0px), var(--h5pg_mis_dy, 0px)) scale(0.6); opacity: 0; }
}

/* 카드 위에 얹히는 숫자 이미지는 세로에서 감춘다 (2026-09-09 CEO 지시).
   리모컨/키보드 단축키 안내라 터치 화면에서는 필요 없고 패만 지저분해진다.
   손패 1~10 / 선뽑기 1~3 / 흔들기·폭탄 팝업의 카드 번호 */
html.h5p img[id^="ga_i_slot_shortkey_"],
html.h5p #SU_num1,
html.h5p #SU_num2,
html.h5p #SU_num3,
html.h5p #ga_popup_num1,
html.h5p #ga_popup_num2
{
    display: none !important;
}

/* 선(先) 마크: 그림 원본 크기(first.png 69x69) 그대로 고정 (2026-09-12 CEO 지시 - 46 으로 줄이지 않는다).
   원본이 그림을 다시 그릴 때 1080 보정(H5P_N1080.fit_natural)이 그림을 다 받은 뒤 원본 크기 x1.5(69 -> 103.5)로
   늘려 써서 크게 보였다. 그 뒤에 무엇이 크기를 써도 CSS 가 이기게 고정한다 */
html.h5p #game_ssun
{
    width: 69px !important;
    height: 69px !important;
}

/* "나" 표시 칩: 내 프로필 그림 위로 15 (2026-09-12 CEO 정정 - 아래가 아니라 위).
   프로필 = 컨테이너(#area_user_info_i, 바닥 864 / 높이 288) 안 top 137 -> 프로필 윗변은 바닥에서 864+288-137 = 1015,
   15 띄워 칩 아랫변을 bottom 1030 에 둔다 (바닥 기준이라 화면 높이가 달라도 같다) */
/* 2026-09-12 CEO 지적: 상대 레벨 박스보다 진해 보였다 - CSS 로 칠한 78% 상자 대신 레벨 박스와 같은 level.png(140x35 원본 크기, 50% 반투명)를 쓴다.
   가로 위치도 상대 레벨 박스와 같게(901.5), 아래끝은 그대로 내 프로필 위 15 (bottom 1030) */
html.h5p #h5pg_me_chip
{
    position: absolute;
    left: 906.5px;	/* 2026-09-29 CEO 지시로 5 오른쪽 */
    top: auto;
    bottom: 1018px;	/* 2026-09-29 CEO 지시로 12 내림 */
    width: 140px;
    height: 35px;
    background: url(../image/2_game/h5p/level.png) no-repeat 0 0;
    background-size: 140px 35px;
    color: #ffe98a;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    pointer-events: none;
}

/* 상대 남은패 빈 등짝: 10칸 고정 backcard_empty.png (위치는 h5_portrait_game.js 가 갱신) */
html.h5p .h5pg_you_ph
{
    position: absolute;
    width: 26px;      /* backcard_empty.png 원본 크기 */
    height: 38px;
    background: url(../image/2_game/h5p/backcard_empty.png) no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* 내 턴 손패 테두리 (2026-09-14 CEO 지시): 손패 두 줄(빈칸 그림 163x238 기준 가로 31~1031, 바닥에서 162~657)을
   16 여유를 두고 둥글게 감싼다. 턴 줄과 같은 노란 빛 + 같은 1초 깜빡임. 켜고 끄기는 h5_portrait_game.js h5pg_sync_turn_line */
/* 아래로 갈수록 투명 (2026-09-14 CEO 지시): 아래 테두리는 보이지 않고 양옆 테두리가 아래로 내려갈수록 흐려진다.
   빛 번짐도 같이 흐려지고 잘리지 않게 요소를 사방 30 넓히고(가로 -15~1077, 바닥에서 116~703), 테두리는 ::before 로 30 안쪽에 그린 뒤
   요소 전체에 세로 마스크(위 40% 까지 그대로 -> 90% 에서 완전히 투명)를 건다 */
/* 손패 시작 x 가 33 -> 42 로 9 옮겨져(양옆 여백 42 로 맞춤, 2026-09-14 CEO 지적) 테두리도 9 옮겼다: 요소 -6~1086, 테두리 24~1056 = 손패 42~1038 양옆 18 */
/* 손패 카드가 커지면서(폭 177) 테두리가 패에 거의 붙었다 (왼쪽 7 / 오른쪽 6, 2026-09-21 CEO 지적).
   손패 실제 범위는 1줄 31~984, 2줄 85~1050 이라 양옆이 가장 좁다. 요소를 좌우로 12씩 넓혀
   테두리를 12~1068 로 보내 여백을 18~19 로 되돌린다 (빛 번짐 18 은 요소 안쪽 여백 30 안에 그대로 들어간다) */
html.h5p .h5pg_hand_focus
{
    position: absolute;
    left: -18px;
    bottom: 60px;	/* 손패를 56 내린 만큼 같이 내린다 (2026-09-26 CEO 지적, 116 -> 60) */
    width: 1116px;
    height: 587px;
    display: none;
    pointer-events: none;
    -webkit-mask-image: -webkit-linear-gradient(top, #000 0%, #000 40%, rgba(0, 0, 0, 0) 90%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0) 90%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0) 90%);
}
html.h5p .h5pg_hand_focus::before
{
    content: "";
    position: absolute;
    left: 30px;
    top: 30px;
    right: 30px;
    bottom: 30px;
    border: 4px solid #ffd84a;
    border-radius: 28px;
    box-sizing: border-box;
    /* 빛 번짐을 줄였다 (2026-09-14 CEO 지적 - 번짐이 과해 요소 여백 30 을 넘어가 끝이 잘린 듯 끊겨 보였다).
       바깥 번짐 최대 6+2 / 14+4 = 18 로 여백 30 안에서 자연스럽게 사라진다 */
    box-shadow: 0 0 6px 2px rgba(255, 216, 74, 0.85), 0 0 14px 4px rgba(255, 196, 40, 0.4), inset 0 0 6px 1px rgba(255, 216, 74, 0.35);
}
html.h5p .h5pg_hand_focus.h5pg_turn_on
{
    display: block;
    -webkit-animation: h5pg_turn_blink 1s ease-in-out infinite;
    animation: h5pg_turn_blink 1s ease-in-out infinite;
}

/* 턴 표시 줄 (2026-09-12 CEO 지시): 지금 턴인 쪽 띠의 연두색 선 위에 노란 줄 + 빛 번짐, 깜빡임.
   위치는 아래 #h5pg_turn_you / #h5pg_turn_i (보유금액 줄과 점수바 사이의 연두색 선, 2026-09-14).
   줄 높이 4 로 연두색 2줄을 가운데에 덮는다. 켜고 끄기는 h5_portrait_game.js h5pg_sync_turn_line */
html.h5p .h5pg_turn_line
{
    position: absolute;
    left: var(--g_bg_left, 0px);
    width: var(--g_bg_w, 1080px);
    height: 4px;
    display: none;
    background: #ffd84a;
    /* 빛 번짐을 손패 노란 테두리와 같은 정도로 줄였다 (2026-09-14 CEO 지시 - 과하게 퍼져 보였다). 바깥 번짐 최대 18 */
    box-shadow: 0 0 6px 2px rgba(255, 216, 74, 0.85), 0 0 14px 4px rgba(255, 196, 40, 0.4);
    pointer-events: none;
}
/* 2026-09-14 CEO 지시: 줄을 보유금액 줄과 점수바 사이(프로필 동그라미를 가로지르는 자리)로 내린다.
   그림 속 연두색 2px 선 위에 정확히 겹친다 (2026-09-14 CEO 지적 - 미묘하게 어긋남).
   다시 옮김 (2026-09-14 CEO 지시): 나는 아래쪽 선으로 한 줄 내리고, 상대는 한 줄 올린다. 그림 속 연두색 선 실측:
   위 띠(hand_area_bg2, 323 높이, 위에 붙음) 249~250 / 318~319줄, 아래 띠(hand_area_bg, 823 높이, 윗변이 바닥에서 940) 4~5 / 73~74줄
   상대 = 위 띠 249~250줄 -> 줄 248~251 (top 248)
   나   = 아래 띠 73~74줄 -> 줄 72~75 = 바닥에서 864~868 (bottom 864) */
html.h5p #h5pg_turn_you { top: 268px; }	/* 248 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
html.h5p #h5pg_turn_i   { top: auto; bottom: 852px; }	/* 864 - 12 (2026-09-29 CEO 지시로 하단 띠를 12 내려 그 안 연두색 선도 같이 내려갔다) */
html.h5p .h5pg_turn_line.h5pg_turn_on
{
    display: block;
    -webkit-animation: h5pg_turn_blink 1s ease-in-out infinite;
    animation: h5pg_turn_blink 1s ease-in-out infinite;
}
@-webkit-keyframes h5pg_turn_blink
{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@keyframes h5pg_turn_blink
{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
/* 턴인 쪽 프로필 동그라미를 턴 줄과 같은 노란 테두리 + 빛으로 감싸고 같은 박자로 깜빡인다 (2026-09-14 CEO 지시).
   그림 자체는 흐려지지 않게 테두리(box-shadow)만 움직인다. 켜고 끄기는 h5_portrait_game.js h5pg_set_face_ring */
html.h5p #user_you_face.h5pg_turn_ring,
html.h5p #user_i_face.h5pg_turn_ring
{
    -webkit-animation: h5pg_face_ring 1s ease-in-out infinite;
    animation: h5pg_face_ring 1s ease-in-out infinite;
}
@-webkit-keyframes h5pg_face_ring
{
    0%, 100% { box-shadow: 0 0 0 5px #ffd84a, 0 0 18px 8px rgba(255, 216, 74, 0.85), 0 3px 7.5px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 216, 74, 0.3), 0 0 10px 3px rgba(255, 216, 74, 0.2), 0 3px 7.5px rgba(0, 0, 0, 0.35); }
}
@keyframes h5pg_face_ring
{
    0%, 100% { box-shadow: 0 0 0 5px #ffd84a, 0 0 18px 8px rgba(255, 216, 74, 0.85), 0 3px 7.5px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 216, 74, 0.3), 0 0 10px 3px rgba(255, 216, 74, 0.2), 0 3px 7.5px rgba(0, 0, 0, 0.35); }
}

/* 나가기(예약) 버튼: 예전 기어 자리, 디자이너 game_bt.png 228x74 원본 크기 (2026-09-12 CEO 지시).
   세로 중앙은 예전 기어(378 + 67.5/2)와 같게 top 375. 글자는 h5_portrait_game.js 가 예약 상태에 맞춰 넣는다 */
/* 2026-09-12 CEO 지시: 점당 금액 글자(아래끝 373)와 붙어 보여 20 내림 (375 -> 395) */
html.h5p #h5pg_option
{
    position: absolute;
    left: 37px;		/* 2026-09-29 CEO 지시: 2 왼쪽으로 */
    top: 415px;		/* 395 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
    width: 228px;
    height: 74px;
}
html.h5p #h5pg_colorkey1
{
    position: absolute;
    left: 0;
    top: 0;
    width: 228px;
    height: 74px;
    /* 두 번째 그림(빨간 나가기 취소)은 버튼 밖(228px 오른쪽)에 깔아 미리 받아만 둔다 - 처음 누를 때 깜빡임 방지 */
    background-image: url(../image/2_game/h5p/game_bt.png), url(../image/2_game/h5p/game_bt2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 228px 0;
    background-size: 228px 74px, 228px 74px;
    cursor: pointer;
}
/* 나가기 예약 중: 빨간 game_bt2.png(228x74 원본 크기) + '나가기 취소' (2026-09-12 CEO 지시) */
html.h5p #h5pg_colorkey1.h5pg_exit_on
{
    background-image: url(../image/2_game/h5p/game_bt2.png);
    background-position: 0 0;
    background-size: 228px 74px;
}
html.h5p #h5pg_colorkey1.h5pg_exit_on #h5pg_exit_txt
{
    text-shadow: -2px 0 0 #6e1714, 2px 0 0 #6e1714, 0 -2px 0 #6e1714, 0 2px 0 #6e1714;
}
html.h5p #h5pg_exit_txt
{
    display: block;
    width: 228px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a;
}

/* 손패 빈칸 표시: 카드가 없는 칸에 card_empty.png (위치는 h5_portrait_game.js 가 갱신) */
html.h5p .h5pg_slot_ph
{
    position: absolute;
    width: 179px;     /* card_empty.png 원본 크기 (손패 카드 177x260 보다 1px 씩 크다) */
    height: 262px;
    background: url(../image/2_game/h5p/card_empty.png?v=2) no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* 내 차례 손패 효과 끄기 (2026-09-12 CEO 지시): 원본 모바일 H5 효과(Main.css)
   .h5_glow  - 낼 수 있는 패의 노란 테두리 빛 + 6 솟음
   .h5_lifted - 첫 탭으로 고른 패의 노란 빛 + 22 솟음
   두 효과 모두 빛과 솟음을 없앤다 (패를 낼 때 120% 커지는 연출은 h5_portrait_game.js 가 막는다) */
html.h5p .h5_glow,
html.h5p .h5_lifted
{
    box-shadow: none !important;
    margin-top: 0 !important;
}

/* 버튼 눌림 표시 (2026-09-12 CEO 지시): 버튼(.button)을 누르는 동안 살짝 어둡게 한다 (Main.js 가 .h5_pressed 를 붙이고 뗀다) */
html.h5p .h5_pressed
{
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}
/* 손패는 누를 때 줄이지 않는다: 원본 효과(96% 축소)로 패가 줄면 뒤의 빈칸 그림(card_empty)이
   회색 테두리처럼 드러나 크기가 안 맞아 보였다 (2026-09-12 CEO 지적) - 어둡게만 한다 */
html.h5p #area_i_slot .h5_pressed
{
    -webkit-transform: none;
    transform: none;
}
/* 모든 버튼(세로 전용으로 새로 만든 버튼, PC 마우스 포함) 누름 표시: 누르는 동안 살짝 어둡게 (2026-09-12 CEO 지시).
   h5_portrait.js h5_portrait_press_watch 가 누른 곳의 버튼 요소(button 클래스 또는 손가락 커서)에 붙이고 뗀다.
   자기 필터가 따로 있는 요소(예: 못 들어가는 방의 흑백)는 그 필터가 이긴다 */
html.h5p .h5p_press
{
    /* 2026-09-12 CEO 지적: 거의 티가 안 나서 0.8 -> 0.7 로 더 어둡게 (버튼 상자 전체에 걸리게 JS 도 고침) */
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}

/* 재화바(금화/루비/티켓)는 눌렀을 때 바 전체가 아니라 충전(+) 단추만 어두워진다 (2026-10-06 CEO 지시).
   술자가 길어 바 전체가 어두워지면 눌렉한 느낌이 너무 크게 보였다 */
html.h5p .MMP_cur_item.h5p_press,
html.h5p .H5PTOP_item.h5p_press,
html.h5p .GAP_money_item.h5p_press
{
    -webkit-filter: none;
    filter: none;
}
html.h5p .MMP_cur_item.h5p_press .H5P_plus,
html.h5p .H5PTOP_item.h5p_press .H5P_plus,
html.h5p .GAP_money_item.h5p_press .H5P_plus
{
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}

/* ===== 흔들기 종 · 폭탄 아이콘 크기 (세로) =====
   종(46x49 -> 138x147, 2026-10-14) · 폭탄(96x56 -> 288x168, 2026-10-15)을 고해상도로 다시 받았다.
   원본은 그림 크기 그대로 그리므로 보이는 크기를 예전과 같게 묶어 둔다 - 세로는 720 값의 1.5배다.
   (2026-10-16 CEO 지시로 바로잡음: 가로 값 하나만 스코프 없이 걸려 있어 세로도 1/3 작게 나왔다) */
html.h5p img[src*="2_game/ui/bell.png"]
{
    width: 69px !important;
    height: 73.5px !important;
}

html.h5p img[src*="2_game/ui/bomb1.png"],
html.h5p img[src*="2_game/ui/bomb2.png"],
html.h5p img[src*="2_game/ui/bomb3.png"]
{
    width: 144px !important;
    height: 84px !important;
}

/* 손패 위 아이콘(화살표/종/폭탄) 가운데 맞춤: JS(h5pg_wrap_slot_top)가 왼쪽을 카드 가운데에 두면
   아이콘 폭 절반만큼 왼쪽으로 당긴다 (2026-09-12 CEO 지시) */
html.h5p #area_i_slot_top img.h5pg_top_center
{
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* '이걸 내!' 느낌으로 위아래로 움직인다 (2026-09-12 CEO 지시).
   내 턴 줄이 켜졌을 때만(h5pg_my_turn - 패를 나눠 주는 동안은 꺼짐), 종(h5pg_no_bob)은 움직이지 않는다 */
html.h5p #area_i_slot_top.h5pg_my_turn img.h5pg_top_center:not(.h5pg_no_bob)
{
    -webkit-animation: h5pg_icon_bob 0.9s ease-in-out infinite;
    animation: h5pg_icon_bob 0.9s ease-in-out infinite;
}
@-webkit-keyframes h5pg_icon_bob
{
    0%, 100% { -webkit-transform: translate(-50%, 0); }
    50%      { -webkit-transform: translate(-50%, -10px); }
}
@keyframes h5pg_icon_bob
{
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -10px); }
}

/* 회색 모서리 틀(gray_box): 손패 카드와 같은 크기(177x260)로 카드 자리에 딱 겹친다 (2026-09-12 CEO 지적 - 카드보다 커서 삐져나왔다).
   자리는 h5_portrait_game.js 가 카드 칸 좌표로 넣고, 크기는 여기서 고정한다 */
html.h5p #area_i_slot_top img.h5pg_top_fit
{
    /* 2026-10-09 CEO 지적: 새로 뽑은 그림(354x520)도 패와 어긋났다.
       그림 안에서 두 모서리가 이루는 네모는 x 6~347 / y 1~500 (342x500) 이라,
       그림을 그냥 카드 크기로 늘리면 테두리가 카드보다 좌 3 / 아래 9 쯤 안으로 들어간다.
       그래서 테두리 네모가 카드와 같아지도록 그림을 그만큼 크게 그리고 왼/위로 당겨 놓는다 */
    width: calc(var(--g_hand_w, 177px) * 354 / 342) !important;
    height: calc(var(--g_hand_h, 260px) * 520 / 500) !important;
    margin-left: calc(var(--g_hand_w, 177px) * -6 / 342);
    margin-top: calc(var(--g_hand_h, 260px) * -1 / 500);
}

/* 바닥패 위 미션 'M': 원본이 패 왼쪽 위(0,0)에 딱 붙여 그린다.
   2026-10-09 CEO 지시로 글자를 키우면서 모서리에서 조금 떼어 놓는다 (1080 기준 6 = 래퍼 안 720 기준 4).
   크기는 h5_portrait_game.js 의 H5P_CARD_SIZE['/2_game/h5p/mission_small.png'] 가 준다 */
html.h5p #h5p_legacy img[id^=ga_yard_mission_]
{
    margin-left: 4px;
    margin-top: 4px;
}

/* 손패 포커스 링: 축소된 손패 카드(109x159)에 맞춰 줄인다 (원본 138x196 = 122x180 카드용) */
html.h5p #ga_i_slot_focus
{
    width: calc(var(--g_hand_w, 159px) + 24.5px) !important;
    height: calc(var(--g_hand_h, 234px) + 24.5px) !important;
}

/* 네트워크 턴 대기 게이지(400x10, 노란 막대, util_WebSocket.js H5_TURN_GAUGE): 상대 수를 기다리는 동안 WATCHDOG 20초를 줄어드는 막대로 보여 줬다.
   손패 위에 간헐적으로 떠서 감춘다 (2026-09-14 CEO 지시). 그리기만 막고 WATCHDOG/5초 전 진동 등 동작은 그대로다 */
html.h5p #h5_turn_gauge
{
    display: none !important;
}

/* GO/STOP·흔들기·경고 등 게임 팝업(542x411): 정중앙.
   '흔드시겠습니까' 에서 예를 누르면 뜨는 '흔들었습니다' 팝업(#ga_shake_div)도 같은 크기라 같은 자리에 둔다
   (원본 좌표 그대로면 오른쪽 위로 튀어 보였다 - 2026-09-12 CEO 지적) */
/* 2026-09-12 CEO 지시: 선 결정 팝업처럼 게임판 영역(위 320 ~ 아래 '화면 높이 - 936') 세로 가운데에 둔다 ('50% - 308' 에 팝업 높이 절반 308 을 더 올림).
   게임 화면 안의 다른 그림('나' 칩 등 나중에 붙는 요소)이 팝업 위로 올라오지 않게 맨 위 층으로 올린다 */
html.h5p #ga_popup_div,
html.h5p #ga_shake_div
{
    left: 133.5px !important;
    top: -webkit-calc(50% - 298px) !important;	/* 게임판(340 ~ 화면높이-936) 세로 가운데 (2026-09-17) */
    top: calc(50% - 298px) !important;
    /* 2026-10-10 CEO 지시로 274 올렸다가 '자리가 어색하다' 하여 원래대로 되돌렸다 (-582 -> -308).
       왼쪽 캐릭터와 겹치는 문제는 다시 생각해 보기로 한다 */
    margin-top: -308px !important;
    z-index: 1000 !important;
}

/* 뒤집힌 패 더미(#ani_1 안의 뒷면 22장, 아래 장부터 순서대로 들어 있다) (2026-09-12 CEO 지시).
   맨 아래 1장은 원래 빨간 뒷면 그대로 게임판 영역 기준 x485/y436 (h5_portrait_game.js H5PG_DECK_*),
   그 위로 쌓이는 패도 원래 뒷면 그림 그대로 한 장마다 위/왼쪽으로 1.5 씩 올라가(원본 뒤집기 시작점 '덱 - 남은 장수' 와 같은 간격)
   여러 장이 쌓여 있는 느낌을 준다 (색은 바꾸지 않는다 - 2026-09-12 CEO 정정). 남은 장이 1장이면 맨 아래 패만 남는다 */
html.h5p #ani_1 > img:nth-child(2)  { transform: translate(-1.5px, -1.5px); }
html.h5p #ani_1 > img:nth-child(3)  { transform: translate(-3px, -3px); }
html.h5p #ani_1 > img:nth-child(4)  { transform: translate(-4.5px, -4.5px); }
html.h5p #ani_1 > img:nth-child(5)  { transform: translate(-6px, -6px); }
html.h5p #ani_1 > img:nth-child(6)  { transform: translate(-7.5px, -7.5px); }
html.h5p #ani_1 > img:nth-child(7)  { transform: translate(-9px, -9px); }
html.h5p #ani_1 > img:nth-child(8)  { transform: translate(-10.5px, -10.5px); }
html.h5p #ani_1 > img:nth-child(9)  { transform: translate(-12px, -12px); }
html.h5p #ani_1 > img:nth-child(10) { transform: translate(-13.5px, -13.5px); }
html.h5p #ani_1 > img:nth-child(11) { transform: translate(-15px, -15px); }
html.h5p #ani_1 > img:nth-child(12) { transform: translate(-16.5px, -16.5px); }
html.h5p #ani_1 > img:nth-child(13) { transform: translate(-18px, -18px); }
html.h5p #ani_1 > img:nth-child(14) { transform: translate(-19.5px, -19.5px); }
html.h5p #ani_1 > img:nth-child(15) { transform: translate(-21px, -21px); }
html.h5p #ani_1 > img:nth-child(16) { transform: translate(-22.5px, -22.5px); }
html.h5p #ani_1 > img:nth-child(17) { transform: translate(-24px, -24px); }
html.h5p #ani_1 > img:nth-child(18) { transform: translate(-25.5px, -25.5px); }
html.h5p #ani_1 > img:nth-child(19) { transform: translate(-27px, -27px); }
html.h5p #ani_1 > img:nth-child(20) { transform: translate(-28.5px, -28.5px); }
html.h5p #ani_1 > img:nth-child(21) { transform: translate(-30px, -30px); }
html.h5p #ani_1 > img:nth-child(22) { transform: translate(-31.5px, -31.5px); }

/* 같은 달 바닥패 겹치기: 한 장마다 오른쪽으로 20 씩(h5_portrait_game.js H5PG_YARD_STACK_X - 원본 27 에서 줄임) 비켜 놓는다.
   세로에서는 여기에 한 장마다 18 씩 아래로도 내려 대각선 아래로 겹쳐 보이게 한다 (2026-09-12 CEO 지시).
   칸 div id = ga_yard_칸번호_몇번째장 (S_game_yard.js draw_slot_yard). 원본이 top/left 를 직접 쓰므로 margin 으로 더한다 */
html.h5p #area_yard > div[id$="_2"] { margin-top: 18px; }
html.h5p #area_yard > div[id$="_3"] { margin-top: 36px; }
html.h5p #area_yard > div[id$="_4"] { margin-top: 54px; }
html.h5p #area_yard > div[id$="_5"] { margin-top: 72px; }
html.h5p #area_yard > div[id$="_6"] { margin-top: 90px; }

/* 패 뒤집기 3D 공간(#container): 중앙 덱 위치를 따라간다 (h5_portrait_game.js 가 변수 갱신) */
html.h5p #container
{
    left: var(--g_deck_x, 522px) !important;
    top: var(--g_deck_y, 772.5px) !important;
    width: var(--g_card_w, 124px) !important;   /* 뒤집기 3D 공간도 바닥패와 동일 크기 */
    height: var(--g_card_h, 184px) !important;
}

/* 단 이펙트(고도리/홍단/청단/초단/오광, dan_ani_div): 카드들이 1280폭 중앙(x≈637) 기준이라
   720폭에서 우측 잘림 -> 통째로 0.65배 축소 후 좌로 이동해 가운데 정렬 (JS 좌표 무변경) */
html.h5p #dan_ani_div
{
    transform: translate(-415.5px, 225px) scale(0.65);
    transform-origin: 955.5px 525px;
    /* 2026-10-06 CEO 지시: 딱 이펙트가 뜨면 판 위의 점수 박스('1점','5점')가 딸 앞에 남아 밝게 보였다.
       점수 박스는 make_get_i_tag 가 dan_ani_div 뒤에 붙여 그려서 위로 올라왔다 -
       딸(#dan_ani_bg)과 이펙트가 한 상자 안에 있으므로 이 상자를 통쨰 올리면
       판 전체가 딸 뒤로 가고 이펙트만 딸 앞에 남는다.
       상황 캠릭터(1400)·미션판 연출(1450~1500) 보다는 아래로 둔다 */
    z-index: 1200;
}

/* 단 이펙트 반투명 배경: 축소돼도 화면 전체를 덮도록 크게 (인라인 1280x720을 덮어씀) */
html.h5p #dan_ani_bg
{
    left: -1500px !important;
    top: -2250px !important;
    width: 6000px !important;
    height: 7500px !important;
}

/* 홍단: 원래 단 연출(딤 + 카드 3장 + 글자)은 화면에서만 숨기고 새 리본(#h5pg_hongdan_fx)을 그린다 (2026-09-15 CEO 지시).
   원본 연출은 그대로 돌아 효과음/진행 대기는 같다. 되돌리기: h5_portrait_game.js H5PG_HONGDAN_RIBBON = 0 */
html.h5p #dan_ani_div.h5pg_dan_hide
{
    visibility: hidden !important;
}
html.h5p #h5pg_hongdan_fx
{
    position: absolute;
    display: none;
    z-index: 1400;	/* 판 위 패/이펙트보다 위, 미션판 가운데 연출(1500) 아래 */
    pointer-events: none;
}

/* 고/스톱 이펙트 마지막 컷 붙잡기 (h5_portrait_game.js h5pg_go_stop_hold): 원본이 지운 뒤에도 0.45초 보였다가 흐려진다 */
html.h5p #h5pg_go_hold
{
    position: absolute;
    display: none;
    pointer-events: none;
}
html.h5p #h5pg_go_hold.h5pg_go_hold_play
{
    display: block;
    -webkit-animation: h5pg_go_hold_out 0.25s ease-in 0.45s both;
    animation: h5pg_go_hold_out 0.25s ease-in 0.45s both;
}
@-webkit-keyframes h5pg_go_hold_out { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(1.04); } }
@keyframes h5pg_go_hold_out { from { opacity: 1; } to { opacity: 0; transform: scale(1.04); } }

/* 상황 그림(늬에시 협업): 내가 뻑을 냈을 때 화면 가운데에 잠깐 뜬다 (2026-09-16 CEO 지시).
   뜨는 동안 같은 자리의 옛 뻑 연출(#zokpuk)은 감추고, 원본 연출/효과음/대기는 그대로 돈다 */
html.h5p #h5pg_sit_fx
{
    position: absolute;
    left: auto;
    right: 39px;		/* 내 프로필(캔버스 x 907~1035, y 1325~) 위쪽, 오른끝은 세이프존(1041)에 맞춤 (2026-09-17 CEO 지시) */
    bottom: 1070px;		/* '나' 표시 줄(캔버스 1275) 바로 위 */
    display: none;
    z-index: 1400;
    pointer-events: none;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
/* 말풍선 (결과 화면과 같은 그림). 원래 꼬리가 왼쪽 아래라 좌우를 뒤집어 내 프로필(오른쪽 아래)을 가리키게 한다 */
html.h5p #h5pg_sit_fx::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../image/2_game/h5p/result/result_bubble.png) no-repeat 0 0;
    background-size: 100% 100%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
/* 상대 편 반응(분홍 옷 캐릭터): 상대 프로필(캔버스 x 907~1035, y 271~399) 바로 아래 오른쪽 맞춤.
   말풍선을 위아래·좌우로 뒤집어 꼬리가 오른쪽 위(상대 프로필)를 향한다 (2026-09-17 CEO 지시) */
html.h5p #h5pg_sit_fx.h5pg_sit_you
{
    right: 39px;
    top: 472px;		/* 상대 레벨 표시(캔버스 434~469) 바로 아래 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
    bottom: auto;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
html.h5p #h5pg_sit_fx.h5pg_sit_you::before
{
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}
/* 2026-09-22 CEO 지시: 말풍선을 빼고 캐릭터만 게임판 왼쪽 세로 가운데에 크게 (나/상대 같은 자리).
   left/top/크기는 h5_portrait_game.js 가 인라인으로 준다 - 여기서는 앞 규칙의 right/bottom 을 풀고 말풍선을 감춘다 */
html.h5p #h5pg_sit_fx.h5pg_sit_free,
html.h5p #h5pg_sit_fx.h5pg_sit_free.h5pg_sit_you
{
    right: auto;
    bottom: auto;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
html.h5p #h5pg_sit_fx.h5pg_sit_free::before
{
    display: none;
}
/* 선 결정 화면에서는 캐릭터를 조금 더 크게 (2026-09-29 CEO 지시).
   인게임(미션판 위)과 같은 칸(345)을 쓰는데, 선 결정 때는 판이 어두워져 캐릭터가 작아 보였다.
   밑줄(발끝)을 그대로 두고 위로만 커지게 왼쪽 아래를 기준으로 키운다 */
html.h5p.h5pg_sun_on #h5pg_sit_fx.h5pg_sit_free
{
    /* 2026-09-29 CEO 지시: 이 화면은 좀더 커도 된다 - 지금의 110% (1.5 -> 1.65) */
    -webkit-transform: scale(1.65);
    transform: scale(1.65);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
/* 상황 캐릭터가 떠 있는 동안에만 미션판을 위로 올려 캐릭터가 판 뒤로 깔리게 한다 (2026-09-29 CEO 지시).
   캐릭터(z 1400)보다 한 칸 위까지만 올린다 - 띄운 뒤에는 다시 원래 순서로 돌아간다 */
html.h5p.h5pg_sit_on #game_mission
{
    z-index: 1450;
}
html.h5p #h5pg_sit_fx.h5pg_sit_free #h5pg_sit_box
{
    -webkit-align-items: center;
    align-items: center;
}
/* 캐릭터 칸: 말풍선 몸통 안쪽, 캐릭터는 아래쪽 가운데 정렬 */
html.h5p #h5pg_sit_box
{
    position: absolute;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
}
html.h5p #h5pg_sit_img
{
    position: static;
    display: block;
}
html.h5p #h5pg_sit_fx.h5pg_sit_play
{
    display: block;
    -webkit-animation: h5pg_sit_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both, h5pg_sit_out 0.3s ease-in 1.2s both;
    animation: h5pg_sit_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both, h5pg_sit_out 0.3s ease-in 1.2s both;
}
@-webkit-keyframes h5pg_sit_in { 0% { -webkit-transform: scale(0.72); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes h5pg_sit_in { 0% { transform: scale(0.72); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@-webkit-keyframes h5pg_sit_out { 0% { opacity: 1; } 100% { -webkit-transform: scale(0.94); opacity: 0; } }
@keyframes h5pg_sit_out { 0% { opacity: 1; } 100% { transform: scale(0.94); opacity: 0; } }

/* ============ 먹은 패 장수/점수 표시 (2026-09-22 CEO 지시: 22.5 -> 42px, 폰 14sp) ============ */
/* 원본(S_game_get_i.js / S_game_get_you.js)이 카드 오른쪽 아래 모서리에 45x30 칸을 인라인으로 그린다 (10점 이상은 글자를 더 줄임).
   글자에 맞춰 칸을 넓히고, 오른쪽 아래 모서리는 원래 자리(원본 칸 바깥 크기 49x34 의 오른쪽 아래)에 그대로 둔다 */
html.h5p #get_i_KW_count, html.h5p #get_i_SI_count, html.h5p #get_i_DI_count, html.h5p #get_i_PI_count,
html.h5p #get_you_KW_count, html.h5p #get_you_SI_count, html.h5p #get_you_DI_count, html.h5p #get_you_PI_count
{
    width: auto !important;
    min-width: 68px;    /* 한 자리 수도 넉넉하게 (2026-09-22 CEO 지시, 48 -> 68) */
    height: 54px !important;
    line-height: 50px !important;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 42px !important;
    white-space: nowrap;
    border-width: 3px !important;
    border-radius: 12px !important;
    margin-left: 49px;
    margin-top: 34px;
    -webkit-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
    /* 2026-09-29 CEO 지적: 피박/광박 띠(이펙트 칸 z 30)가 이 숫자 칸을 덮었다 - 숫자는 늘 위에 보이게 한다 */
    z-index: 31;
}

/* ============ 서브화면 공통 등장/퇴장 연출 (2026-09-28 CEO 지시) ============ */
/* 상점 / 미션 / 룰렛 / 랭킹 / 금고가 오른쪽에서 밀려 들어오고, 나갈 때는 반대로 밀려 나간다.
   여닫는 때를 맞추는 일은 javascript/h5_portrait_subscene.js 가 한다 (클래스만 붙였다 뗀다).
   위 재화바는 화면마다 같은 바라 제자리에 두고 판만 움직인다 (2026-09-28 CEO 지시) */

/* 판에 transform 이 걸리면 그 안의 %/absolute 자식이 '판'을 기준으로 다시 계산된다.
   레거시 서브화면 div 는 높이가 0 이라 룰렛(#GAP_clip height:100%)이 위로 솟았다 내려왔다 (2026-09-28 CEO 지적).
   움직이는 동안만 래퍼(#h5p_legacy)와 똑같은 상자(0,0 / 1080 x 래퍼높이)로 만들어 기준이 바뀌어도 값이 그대로이게 한다.
   평소에도 이 상자를 씌우면 다 쓰고 비워 둔 빈 화면 div 가 화면을 덮어 터치를 가로챈다 - 그래서 연출 중에만 씌운다.
   z-index 는 일부러 주지 않는다 - 지금 쌓임 순서를 그대로 둔다 */
html.h5p #S_MARKETSTORE_div.h5p_sub_in,
html.h5p #S_MARKETSTORE_div.h5p_sub_out,
html.h5p #S_QUEST_div.h5p_sub_in,
html.h5p #S_QUEST_div.h5p_sub_out,
html.h5p #S_GACHA_div.h5p_sub_in,
html.h5p #S_GACHA_div.h5p_sub_out,
html.h5p #S_DATLOSSLIMIT_div.h5p_sub_in,
html.h5p #S_DATLOSSLIMIT_div.h5p_sub_out,
html.h5p #S_SELECTCHAR_div.h5p_sub_in,
html.h5p #S_SELECTCHAR_div.h5p_sub_out
{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1080px;
    height: 100%;
}

/* 들어오기 / 나가기: 설정·우편함(.h5p_slide_in/.h5p_slide_out)과 같은 방향·길이·곡선으로 맞춘다
   (2026-09-28 CEO 지시 - 화면마다 방향이 달라 정신 사납다).
   움직이는 거리는 1080 칸 폭 + 넓은 기기의 좌우 여분, 재화바를 정확히 되돌리려고 %가 아니라 실제 값으로 쓴다 */
html.h5p #S_MARKETSTORE_div.h5p_sub_in,
html.h5p #S_QUEST_div.h5p_sub_in,
html.h5p #S_GACHA_div.h5p_sub_in,
html.h5p #RANK_root.h5p_sub_in,
html.h5p #SAFE_root.h5p_sub_in,
html.h5p #S_DATLOSSLIMIT_div.h5p_sub_in,
html.h5p #S_SELECTCHAR_div.h5p_sub_in
{
    -webkit-animation: h5p_sub_in 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation: h5p_sub_in 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 나가기: 원본이 넣는 display:none 을 연출이 끝날 때까지 붙잡는다 (미션 .H5PQ_leaving 과 같은 방식) */
html.h5p #S_MARKETSTORE_div.h5p_sub_out,
html.h5p #S_QUEST_div.h5p_sub_out,
html.h5p #S_GACHA_div.h5p_sub_out,
html.h5p #RANK_root.h5p_sub_out,
html.h5p #SAFE_root.h5p_sub_out,
html.h5p #S_DATLOSSLIMIT_div.h5p_sub_out,
html.h5p #S_SELECTCHAR_div.h5p_sub_out
{
    display: block !important;
    /* 2026-09-29 CEO 지시: 나갈 때는 밀지 않고 제자리에서 빠르게 사라진다 (300ms 밀기 -> 200ms 페이드).
       배경만 페이드하고 판은 밀리니 둘이 따로 놀아 밀리는 판만 눈에 띄었다.
       들어올 때는 지금처럼 오른쪽에서 밀려 들어온다 (들어올 때는 방향감이 있어야 한다) */
    -webkit-animation: h5p_sub_out_fade 200ms ease-out both;
    animation: h5p_sub_out_fade 200ms ease-out both;
}
/* 나가는 화면은 이미 지나간 화면이라 누름을 받지 않는다 */
html.h5p .h5p_sub_out,
html.h5p .h5p_sub_out *
{
    pointer-events: none !important;
}

/* 움직이는 동안만 레거시 화면 묶음을 새 로비(MMP_root z40)와 움직이는 배경 판(z59) 위로 올린다.
   나갈 때는 뒤로 밀려 나가지 않게, 들어올 때는 같이 들어오는 배경에 가려지지 않게 (2026-09-28) */
html.h5p.h5p_sub_leaving #h5p_legacy,
html.h5p.h5p_sub_entering #h5p_legacy
{
    z-index: 60;
}

/* ---- 화면 전환 배경 판 (2026-09-28 CEO 지시) ----
   예전에는 화면(UI)만 움직이고 뒤 배경은 0.2초 확인이 따로 툭 바꿔, 세 가지가 제각각 놀았다.
   이제 들어올 때는 새 배경을, 나갈 때는 옛 배경을 이 판에 그려 화면 연출과 같은 길이 동안 서서히 켜고 끈다.
   이 판은 반드시 새 로비(MMP_root z40)보다 위에 있어야 한다 - 밑에 두면 메인화면 캐릭터·버튼이
   바뀌는 배경 위에 그대로 떠서 두 화면이 뒤섞여 보였다 (2026-09-28 CEO 지적).
   움직이는 화면 묶음(#h5p_legacy)은 그때 z60 이므로 그 바로 아래 59 에 둔다 */
html.h5p #h5p_bg_prev,
html.h5p #h5p_bg_next
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 59;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
    pointer-events: none;
    display: none;
}
/* 화면별 딤(#h5p_bg::after)은 가짜 요소라 값을 못 베낀다 - 읽은 색을 변수로 받아 같은 두께로 깐다 */
html.h5p #h5p_bg_prev::after,
html.h5p #h5p_bg_next::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--h5p_bgp_dim, transparent);
}
/* 들어올 때는 제자리에서 서서히 나타나고, 나갈 때는 화면과 같이 왼쪽으로 밀려 나간다 (2026-09-28 CEO 지시).
   배경만 먼저 페이드로 빠지면 UI 는 아직 화면에 있는데 배경만 사라져 어색해 보였다.
   밀리는 동안 밑에는 이미 새 배경(#h5p_bg)이 깔려 있어 그대로 드러난다 (길이·곡선은 화면 연출과 동일) */
/* 2026-09-29 CEO 지적: 나갈 때 배경이 밀려 나가는 게 너무 눈에 띄어 제자리 페이드로 바꿨다
   (예전에는 화면과 같이 왼쪽으로 밀었다). 밑에 새 배경이 깔려 있어 두 배경이 겹쳐 바뀜다 */
html.h5p.h5p_bg_leaving #h5p_bg_prev
{
    display: block;
    -webkit-animation: h5p_sub_out_fade 200ms ease-out both;
    animation: h5p_sub_out_fade 200ms ease-out both;
}
html.h5p.h5p_bg_entering #h5p_bg_next
{
    display: block;
    -webkit-animation: h5p_dim_fade_in 160ms ease-out both;
    animation: h5p_dim_fade_in 160ms ease-out both;
}
/* 금고처럼 서브 배경(#h5p_subbg z49)을 깔던 화면도 같은 방식.
   들어올 때 규칙은 원본 h5p_subbg_on 규칙(이 파일 뒤쪽)과 특이도가 같으면 지므로 클래스를 하나 더 걸어 이기게 한다 */
html.h5p.h5p_subbg_on.h5p_subbg_in #h5p_subbg
{
    display: block !important;
    -webkit-animation: h5p_dim_fade_in 160ms ease-out both;
    animation: h5p_dim_fade_in 160ms ease-out both;
}
/* 나갈 때는 원본이 표시(h5p_subbg_on)를 바로 떼어 버려 평소 규칙으로는 한 번에 사라진다 */
html.h5p.h5p_subbg_out #h5p_subbg
{
    display: block !important;
    /* 위 #h5p_bg_prev 와 같은 움직임 (2026-09-29 CEO 지시) */
    -webkit-animation: h5p_sub_out_fade 200ms ease-out both;
    animation: h5p_sub_out_fade 200ms ease-out both;
}

/* 상단 재화바는 판을 따라가지 않는다 - 판이 간 만큼 반대로 되돌린다.
   두 연출의 길이와 곡선이 같아 매 순간 정확히 상쇄된다 (룰렛 화면 바는 #GAP_money) */
html.h5p .h5p_sub_in #H5PTOP_bar,
html.h5p .h5p_sub_in #GAP_money
{
    -webkit-animation: h5p_sub_hold_in 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation: h5p_sub_hold_in 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* 나갈 때는 판이 아예 움직이지 않으므로 되돌릴 것도 없다 (2026-09-29).
   보정을 남겨 두면 재화바만 오른쪽으로 훌 날아간다 */
html.h5p .h5p_sub_out #H5PTOP_bar,
html.h5p .h5p_sub_out #GAP_money
{
    -webkit-animation: none;
    animation: none;
}

@-webkit-keyframes h5p_sub_in
{
    from { -webkit-transform: translateX(-webkit-calc(-1080px - var(--h5p_extra_x, 0px))); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes h5p_sub_in
{
    from { transform: translateX(calc(-1080px - var(--h5p_extra_x, 0px))); }
    to   { transform: translateX(0); }
}
/* 나가기: 페이드하면서 왼쪽으로 조금 밀린다 (2026-09-29 CEO 지시).
   예전처럼 화면폭(1080) 만큼 밀면 페이드와 겹쳐 다시 눈에 띄므로 1/4(270)만 움직인다.
   거리를 바꾸려면 아래 -270px 두 곳만 고치면 된다 */
@-webkit-keyframes h5p_sub_out_fade
{
    from { opacity: 1; -webkit-transform: translateX(0); }
    to   { opacity: 0; -webkit-transform: translateX(-270px); }
}
@keyframes h5p_sub_out_fade
{
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-270px); }
}

@-webkit-keyframes h5p_sub_out
{
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-webkit-calc(-1080px - var(--h5p_extra_x, 0px))); }
}
@keyframes h5p_sub_out
{
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1080px - var(--h5p_extra_x, 0px))); }
}
@-webkit-keyframes h5p_sub_hold_in
{
    from { -webkit-transform: translateX(-webkit-calc(1080px + var(--h5p_extra_x, 0px))); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes h5p_sub_hold_in
{
    from { transform: translateX(calc(1080px + var(--h5p_extra_x, 0px))); }
    to   { transform: translateX(0); }
}
@-webkit-keyframes h5p_sub_hold_out
{
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-webkit-calc(1080px + var(--h5p_extra_x, 0px))); }
}
@keyframes h5p_sub_hold_out
{
    from { transform: translateX(0); }
    to   { transform: translateX(calc(1080px + var(--h5p_extra_x, 0px))); }
}

/* ============ 선(先) 뽑기 (S_SELECTSUN) ============ */

/* 컨테이너 = 검정 딤 (게임 코드가 인라인 1280x720 지정 -> !important) */
html.h5p #S_SELECTSUN_div
{
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* 선 고르기 팝업(542x411 -> 화면 813x616.5): 딤 없이 게임판 영역 가운데 (2026-09-12 CEO 지시).
   게임판 영역 = 위 320 ~ 아래 '화면 높이 - 936'(아래 띠 연두색 선) -> 세로 가운데는 '50% - 308'.
   팝업 높이 절반(308)만큼 더 올려 팝업 가운데를 그 자리에 맞춘다 (화면 높이가 달라도 같이 따라간다) */
html.h5p #SU_popup
{
    left: 133.5px !important;
    top: -webkit-calc(50% - 298px) !important;	/* 게임판(340 ~ 화면높이-936) 세로 가운데 (2026-09-17) */
    top: calc(50% - 298px) !important;
    margin-top: -308px !important;
}

/* 강제 종료 패널티 안내 문구는 세로에서는 쓰지 않는다 (2026-09-28 CEO 지시) */
html.h5p #SU_caution
{
    display: none !important;
}

/* 선 결정 동안에는 게임판 위에 딤을 깔아 팝업에 눈이 가게 한다 (2026-09-28 CEO 지시).
   딤은 게임판(#S_GAME_div) 안에 둔다 - 게임판이 transform 때문에 따로 쌓임 상자를 만들어,
   밖에 깔면 안쪽 프로필을 그 위로 올릴 수가 없다. 표식은 h5_portrait_game.js h5pg_sun_mark 가 붙였다 뗀다.
   선 결정 팝업 자체는 #S_SELECTSUN_div(z-index 60)라 이 딤보다 위에 있다 */
html.h5p #h5pg_sun_dim
{
    position: absolute;
    left: -50%;
    top: 0;
    width: 200%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 40;		/* 카드/이펙트(z 30) 위 */
}
html.h5p.h5pg_sun_on #h5pg_sun_dim
{
    display: block;
}
/* 두 사람 프로필(내 '나' 알약 / 상대 프로필·레벨 알약)만 딤 위로 올린다 - 누구와 치는지는 계속 보이게.
   남은 시간 시계도 같이 올린다 (선 고르는 동안 세는 시계라 가려지면 안 된다) */
html.h5p.h5pg_sun_on #user_you_face,
html.h5p.h5pg_sun_on #user_you_level,
html.h5p.h5pg_sun_on #user_i_face,
html.h5p.h5pg_sun_on #h5pg_me_chip,
html.h5p.h5pg_sun_on #ga_count,
html.h5p.h5pg_sun_on #h5pg_count_num,
html.h5p.h5pg_sun_on #game_ssun	/* 2026-10-19 CEO 지적: 도장을 넘겨받은 마크가 딤 아래에서 흐릿했다 */
{
    z-index: 41 !important;
}
/* 선 결정 동안에는 상대 레벨 알약에 레벨 대신 '상대' 라고 쓴다 (2026-09-28 CEO 지시).
   내 쪽 '나' 알약과 짝이 맞게 하려는 것이고, 원본 글자는 USER_INFO.display 가 계속 다시 쓰므로
   글자 크기를 0 으로 재워 두고 가짜 요소로 덮는다 (선 결정이 끝나면 저절로 레벨로 돌아온다) */
html.h5p.h5pg_sun_on #user_you_level
{
    font-size: 0 !important;
}
/* 2026-10-10 CEO 지적(선 결정에서 알약 박스가 안 보인다 - 딤 아래에 깔린 것 아니냐): 뎁스 문제가 아니었다.
   두 알약은 이미 딤(z 40) 위 41 에 있다. level.png 가 알파 128 짜리 반투명 어두운 상자라,
   딤으로 어두워진 판 위에 얹히면 바탕과 밝기가 거의 같아져 상자로 읽히지 않았던 것이다.
   2026-10-10 CEO 재지시: 어두운 알약 대신 흰 알약을 반투명으로 얹고 글자는 반대로 어둡게 한다.
   그래서 level.png 그림은 쓰지 않고 흰 바탕만 깐다 (알약 모양은 level.png 와 같은 반지름 17.5) */
html.h5p.h5pg_sun_on #user_you_level,
html.h5p.h5pg_sun_on #h5pg_me_chip
{
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.82) !important;
    border-radius: 17.5px !important;
    color: #2a2112 !important;
    text-shadow: none !important;
}
html.h5p.h5pg_sun_on #user_you_level::after
{
    content: "상대";
    font-size: 36px;
    letter-spacing: -1px;
}

/* ---- 선 결정 연출: 고른 패가 선인 사람 프로필로 날아가 꽂힌다 (2026-09-29 CEO 지시) ----
   자리를 화면 좌표(fixed)로 재서 그리므로 판이 어떻게 확대·이동되어 있어도 맞는다.
   그래서 이 규칙들만 html.h5p 로 묶지 않는다 (요소를 body 바로 밑에 둔다).
   시간 값은 h5_portrait_game.js 의 H5PG_SUN_FX 와 같아야 한다 */
#h5pg_sun_layer
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    pointer-events: none;
}
.h5pg_sun_fly
{
    position: fixed;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 380ms cubic-bezier(0.42, 0, 0.3, 1), opacity 380ms ease-out;
    transition: transform 380ms cubic-bezier(0.42, 0, 0.3, 1), opacity 380ms ease-out;
}

/* ============ 게임 결과 (S_GAMERESULT) ============ */

/* 컨테이너 + 딤 배경: 캔버스 전체 */
html.h5p #S_GAMERESULT_div
{
    position: absolute;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
}
html.h5p #Img_GR_background
{
    width: 100% !important;
    height: 100% !important;
}

/* 결과 팝업(1080 에서 813x617): 게임판 영역 세로 가운데 (2026-09-14 CEO 지시 - 너무 위쪽에 치우쳐 있었다).
   게임판 = 320 ~ 캔버스높이-705, 가운데 = 캔버스 가운데 - 192.5 -> 팝업 윗변 = 50% - 192.5 - 308.5 = 50% - 501.
   JS가 left를 206/369로 바꿔도 고정된다 */
html.h5p #gr_div
{
    left: 133.5px !important;
    top: -webkit-calc(50% - 606.5px) !important;	/* 게임판(340 ~ 화면높이-936) 가운데 (2026-09-17 CEO 지시) */
    top: calc(50% - 606.5px) !important;
}

/* 점수 상세(549x617): 가로판에선 오른쪽 나란히 -> 세로에선 결과 팝업 아래 중앙 (상세보기를 눌렀을 때만 보인다).
   결과 팝업은 게임판 가운데 자리에 그대로 두고 그 아래(팝업 아랫변 50% + 116 + 간격 20)에 띄운다 (2026-09-14 CEO 지시 - 팝업이 위로 당겨지지 않게) */
html.h5p #gr_detail
{
    left: 265.5px !important;
    top: -webkit-calc(50% + 30.5px) !important;	/* 결과 판 아랫변(50% + 10.5) + 20 (2026-09-17) */
    top: calc(50% + 30.5px) !important;
}

/* 보너스 상세(492x115): 점수 상세 바로 아래 (원래 간격 그대로 점수 상세 윗변 + 622.5) */
html.h5p #gr_detail_p3
{
    left: 294px !important;
    top: -webkit-calc(50% + 653px) !important;	/* 점수 상세 윗변 + 622.5 (2026-09-17) */
    top: calc(50% + 653px) !important;
}

/* 점수 상세/보너스 상세는 처음엔 감추고, 결과 팝업의 '상세보기' 버튼으로 켜고 끈다 (2026-09-14 CEO 지시).
   원본이 정한 표시/숨김(무승부면 상세 없음, 보너스 없으면 감춤, 도신의 탑 연출 지연)은 display 로 그대로 두고 여기서는 visibility 만 쓴다.
   켜기 클래스는 h5_portrait_game.js h5pg_result_detail_toggle 이 결과 화면 div 에 붙인다 */
html.h5p #gr_detail,
html.h5p #gr_detail_p3
{
    visibility: hidden !important;
}
html.h5p #S_GAMERESULT_div.h5pgr_detail_on #gr_detail,
html.h5p #S_GAMERESULT_div.h5pgr_detail_on #gr_detail_p3
{
    visibility: visible !important;
}
/* 상세보기 버튼: 결과 팝업(813x617) 안 오른쪽 위 - 가운데 위 제목 그림(팝업 안 x 297~518)과 겹치지 않는 빈 모서리 */
html.h5p #H5PGR_detail_btn
{
    position: absolute;
    right: 24px;
    top: 24px;
    width: 190px;
    height: 72px;
    line-height: 64px;
    box-sizing: border-box;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #4a2d0c;
    background: #fff3d6;
    border: 4px solid #7a5a32;
    border-radius: 36px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 5;
}
/* 결과 팝업(도신 대전) 안 작은 글자들을 36 으로: 한도 안내 27 / 수수료 18 / 점수식 30 / 티켓 24 (2026-09-22 글자 크기 점검, CEO 지시).
   원본이 인라인으로 위치/크기를 주므로 !important. 좌표는 결과 팝업(813x617) 안 기준 */
html.h5p #gr_law_txt
{
    left: 36px !important;
    top: 132px !important;
    width: 741px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 36px !important;
    text-align: center !important;
    white-space: nowrap !important;
}
/* 수수료 줄이 보일 때(승리)만 금액을 조금 올리고 그 아래 금액 판(보이는 부분 208~303) 안에 수수료를 둔다.
   패배는 수수료가 없어 금액이 원래대로 판 가운데. :has 를 모르는 옛 브라우저는 수수료가 판 아래로 조금 걸친다 */
html.h5p #gr_div:has(> #tax[style*="block"]) #gr_money
{
    top: 193px !important;
    height: 70px !important;
    line-height: 70px !important;
}
html.h5p #tax
{
    top: 262px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 36px !important;
}
html.h5p #gr_money_detail
{
    font-size: 36px !important;
    letter-spacing: -1px;
    white-space: nowrap !important;
}
html.h5p #gr_ticket
{
    left: 405px !important;
    top: 410px !important;
    width: 285px !important;
    height: 46px !important;
    line-height: 46px !important;
    font-size: 36px !important;
    text-align: center !important;
    white-space: nowrap !important;
}
html.h5p #H5PGR_detail_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* ============ 새 결과 화면 (승/패, S_gameresult_portrait.js) ============
   디자이너 가이드 '맞고 세로모드 결과화면 ui' (1080x2340) 실측 자리. 2026-09-16 CEO 지시.
   원본 판(#gr_div)/점수 상세는 visibility 로만 감추고(버튼 동작/표시 상태는 원본 그대로), 새 요소를 위에 그린다.
   무승부/도신 대전 결과는 h5rp_on 이 붙지 않아 기존 화면 그대로 */
html.h5p #S_GAMERESULT_div.h5rp_on #gr_div,
html.h5p #S_GAMERESULT_div.h5rp_on #gr_detail,
html.h5p #S_GAMERESULT_div.h5rp_on #gr_detail_p3
{
    visibility: hidden !important;
}
/* 게임판이 비쳐 보이는 딤 (원본 0.8 -> 가이드처럼 조금 옅게) */
html.h5p #S_GAMERESULT_div.h5rp_on #Img_GR_background
{
    opacity: 0.62 !important;
}

html.h5p #H5RP_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    font-family: inherit;
}
html.h5p #H5RP_root .h5rp_fx,
html.h5p #H5RP_root img
{
    position: absolute;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- 승: 빛 번짐(700x611, 글자 가운데 540/640) + 승 글자(253x279) + 반짝임 + 별 ---- */
html.h5p #H5RP_rays
{
    left: 190px;
    top: 335px;
    width: 700px;
    height: 611px;
    /* 디자이너 메모: 점점 크게 등장하며 돌다가 멈춘다.
       2026-10-15 CEO 지시: 한 번 돌고 멈춰 있지 않고 계속 살아 있게 - 등장 뒤에 천천히 숨쉬듯 이어 간다 */
    -webkit-animation: h5rp_rays_in 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both,
                       h5rp_rays_pulse 2.4s ease-in-out 1.45s infinite;
    animation: h5rp_rays_in 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both,
               h5rp_rays_pulse 2.4s ease-in-out 1.45s infinite;
}
html.h5p .h5rp_win #H5RP_title,
html.h5p #H5RP_light
{
    left: 414px;
    top: 500px;
    width: 253px;
    height: 279px;
}
html.h5p .h5rp_win #H5RP_title
{
    -webkit-animation: h5rp_win_drop 0.38s cubic-bezier(0.25, 1.35, 0.45, 1) both;
    animation: h5rp_win_drop 0.38s cubic-bezier(0.25, 1.35, 0.45, 1) both;
}
html.h5p .h5rp_star
{
    left: 516px;
    top: 617px;
    width: 47px;
    height: 45px;
    opacity: 0;
    /* 2026-10-15 CEO 지시: 한 번 뿌리고 끝내지 않고 계속 뿌린다 */
    -webkit-animation: h5rp_star_fly 1.0s ease-out infinite both;
    animation: h5rp_star_fly 1.0s ease-out infinite both;
}

/* ---- 패: 푸른 번짐(610x560) + 어두운 줄(80x138) + 패 글자(266x262) + 비(383x659) ---- */
html.h5p #H5RP_glow
{
    left: 235px;
    top: 360px;
    width: 610px;
    height: 560px;
    -webkit-animation: h5rp_fade_in 1.2s ease-out both;
    animation: h5rp_fade_in 1.2s ease-out both;
}
html.h5p #H5RP_lines
{
    left: 384px;
    top: 425px;
    width: 80px;
    height: 138px;
    -webkit-animation: h5rp_lines_down 1.2s ease-out both;
    animation: h5rp_lines_down 1.2s ease-out both;
}
html.h5p .h5rp_lose #H5RP_title
{
    left: 409px;
    top: 495px;
    width: 266px;
    height: 262px;
    -webkit-animation: h5rp_lose_drop 0.6s ease-out both;
    animation: h5rp_lose_drop 0.6s ease-out both;
}
html.h5p #H5RP_rain
{
    left: 349px;
    top: 330px;
    width: 383px;
    height: 659px;
    -webkit-animation: h5rp_fade_in 0.2s ease-out 0.28s both;
    animation: h5rp_fade_in 0.2s ease-out 0.28s both;
}

/* ---- 무승부: 속도선(1080x483) + 무 글자(453x269, 글자는 그림 안 100~352 칸) ---- */
html.h5p #H5RP_draw_bg
{
    left: 0px;
    top: 399px;
    width: 1080px;
    height: 483px;
    -webkit-animation: h5rp_fade_in 0.1s ease-out both;
    animation: h5rp_fade_in 0.1s ease-out both;
}
html.h5p .h5rp_draw #H5RP_title
{
    left: 314px;
    top: 506px;
    width: 453px;
    height: 269px;
}

/* ---- 캐릭터 (옛 말풍선 359x274 자리) ---- */
/* 2026-09-22 CEO 지시: 말풍선 그림을 빼고 캐릭터만 보인다 - 캐릭터가 옛 말풍선 칸 전체를 쓴다 */
html.h5p #H5RP_bubble
{
    /* 2026-10-06 CEO 지시: 오른쪽 위 구석 -> 타이틀 글자 바로 아래 가운데로, 그리고 좀 더 크게.
       판이 1080 이라 가운데(540)에 맞추려면 왼쪽이 540 - 430/2 = 325.
       타이틀 아랫변이 757~779 이라 790 부터 두고, 아래 글줄·버튼은 330 내려 자리를 만들었다 */
    left: 325px;
    top: 790px;
    width: 430px;
    height: 330px;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: h5rp_bubble_pop 0.35s ease-out 0.65s both;
    animation: h5rp_bubble_pop 0.35s ease-out 0.65s both;
}
html.h5p #H5RP_face
{
    left: 0;
    top: 0;
    width: 430px;
    height: 330px;
    -o-object-fit: contain;
    object-fit: contain;
    object-position: 50% 100%;
    /* 말풍선이 제일 커지는 순간(0.65 + 0.35x0.7)에 터지며 등장 */
    -webkit-transform-origin: 50% 60%;
    transform-origin: 50% 60%;
    -webkit-animation: h5rp_face_burst 0.32s ease-out 0.9s both;
    animation: h5rp_face_burst 0.32s ease-out 0.9s both;
}

/* ---- 금액 줄: 금화(73x68) + 금액 글자, 가로 가운데 ---- */
html.h5p #H5RP_money_row
{
    position: absolute;
    left: 0;
    top: 1136px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    width: 1080px;
    height: 84px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
/* 연습 대전: 금화가 오가지 않아 금화 아이콘을 뺀다 (2026-09-26 CEO 지시) */
html.h5p #H5RP_money_row.h5rp_practice #H5RP_gold { display: none !important; }
html.h5p #H5RP_root #H5RP_gold
{
    position: static;
    width: 73px;
    height: 68px;
    margin-right: 26px;
}
/* 금액 글자: 위아래 그라데이션(가이드처럼 연노랑 -> 주황, 패는 흰색 -> 회색) + 아래 그림자 */
html.h5p #H5RP_money
{
    font-size: 72px;
    font-weight: 900;
    line-height: 84px;
    white-space: nowrap;
    color: #ffd23a;
    background: -webkit-linear-gradient(top, #fff6c2 0%, #ffd23a 48%, #f39a00 100%);
    background: linear-gradient(to bottom, #fff6c2 0%, #ffd23a 48%, #f39a00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(0 4px 2px rgba(60, 30, 0, 0.75));
    filter: drop-shadow(0 4px 2px rgba(60, 30, 0, 0.75));
}
html.h5p .h5rp_lose #H5RP_money
{
    color: #cfcfcf;
    background: -webkit-linear-gradient(top, #ffffff 0%, #d2d2d2 50%, #8f8f8f 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #d2d2d2 50%, #8f8f8f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.8));
}
html.h5p #H5RP_money.h5rp_practice
{
    background: none;
    -webkit-text-fill-color: #7cfc00;
    color: #7cfc00;
}

/* 점수식 / 수수료 / 안내 줄 */
html.h5p #H5RP_formula,
html.h5p #H5RP_tax,
html.h5p #H5RP_law
{
    position: absolute;
    left: 40px;
    width: 1000px;
    text-align: center;
    white-space: nowrap;
}
html.h5p #H5RP_formula
{
    top: 1227px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    height: 60px;
    line-height: 60px;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.85);
}
html.h5p #H5RP_tax
{
    top: 1292px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    height: 44px;
    line-height: 44px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #c9a64e;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}
html.h5p #H5RP_law
{
    top: 1338px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    height: 44px;
    line-height: 44px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 600;
    color: #d6d6d6;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

/* ---- 승점 줄(782x70) ---- */
html.h5p #H5RP_rank
{
    position: absolute;
    left: 149px;
    top: 1376px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    width: 782px;
    height: 70px;
    background: url(../image/2_game/h5p/result/result_scorebg.png) no-repeat 0 0;
    background-size: 782px 70px;
    font-size: 44px;
    font-weight: 800;
    line-height: 70px;
    color: #3d2a06;
}
html.h5p #H5RP_rank_label
{
    position: absolute;
    left: 74px;
    top: 0;
}
html.h5p #H5RP_rank_value
{
    position: absolute;
    right: 26px;
    top: 0;
    white-space: nowrap;
}
html.h5p #H5RP_rank .h5rp_up { color: #1e7fe0; }
html.h5p #H5RP_rank .h5rp_down { color: #e53b2b; }

/* ---- 버튼: 나가기(회색) / 한 판 더(초록) 318x85, 자세히(324x69) ---- */
html.h5p #H5RP_root .h5rp_btn,
html.h5p #H5RP_more
{
    pointer-events: auto;
    cursor: pointer;
}
html.h5p .h5rp_btn
{
    position: absolute;
    top: 1474px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    width: 318px;
    height: 85px;
    line-height: 77px;
    box-sizing: border-box;
    border-radius: 43px;
    text-align: center;
    font-size: 50px;
    font-weight: 900;
    color: #ffffff;
    overflow: hidden;
}
html.h5p .h5rp_btn::before
{
    content: '';
    position: absolute;
    left: 24px;
    top: 10px;
    width: 30px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}
html.h5p .h5rp_btn:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}
html.h5p .h5rp_btn_gray
{
    left: 202px;	/* 2026-09-29 CEO 지시: 두 버튼 사이를 25 -> 40 으로 더 벌린다 (묶음 가운데 540 은 그대로) */
    background: -webkit-linear-gradient(top, #f4f4f4 0%, #d4d4d4 55%, #b9b9b9 100%);
    background: linear-gradient(to bottom, #f4f4f4 0%, #d4d4d4 55%, #b9b9b9 100%);
    border: 4px solid #8e8e8e;
    text-shadow: 0 3px 0 #35383a, 2px 0 0 #35383a, -2px 0 0 #35383a, 0 -2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
html.h5p .h5rp_btn_green
{
    left: 560px;
    background: -webkit-linear-gradient(top, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%);
    background: linear-gradient(to bottom, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%);
    border: 4px solid #2f8a28;
    text-shadow: 0 3px 0 #2a7a22, 2px 0 0 #2a7a22, -2px 0 0 #2a7a22, 0 -2px 0 #2a7a22, -1.414px -1.414px 0 #2a7a22, -1.414px 1.414px 0 #2a7a22, 1.414px -1.414px 0 #2a7a22, 1.414px 1.414px 0 #2a7a22;
}
html.h5p .h5rp_btn_center
{
    left: 381px;
}
html.h5p #H5RP_more
{
    position: absolute;
    left: 557px;	/* 2026-09-29 CEO 지시: 버튼 사이를 벌린 뒤 오른쪽 버튼(560~878) 가운데에 맞춘다 */
    top: 1584px	/* 2026-10-06 CEO 지시: 이모티콘 자리만큼 330 내림 */;
    width: 324px;
    height: 69px;
    background: url(../image/2_game/h5p/result/result_more.png) no-repeat 0 0;
    background-size: 324px 69px;
}
/* 버튼이 나가기 하나뿐이면 자세히도 나가기와 같은 가로 가운데(540)에 둔다 (2026-09-17 CEO 지시) */
html.h5p #H5RP_more.h5rp_more_center
{
    left: 378px;
}
html.h5p #H5RP_more span
{
    position: absolute;
    left: 80px;
    width: 220px;
    top: 0;
    height: 69px;
    line-height: 69px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #f2f2f2;
}
html.h5p #H5RP_more:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

/* 등장 순서: 금액 -> 점수식 -> 안내 -> 승점 -> 버튼 -> 자세히 */
html.h5p .h5rp_fade
{
    -webkit-animation: h5rp_rise 0.3s ease-out both;
    animation: h5rp_rise 0.3s ease-out both;
}
html.h5p .h5rp_d1 { -webkit-animation-delay: 0.80s; animation-delay: 0.80s; }
html.h5p .h5rp_d2 { -webkit-animation-delay: 0.92s; animation-delay: 0.92s; }
html.h5p .h5rp_d3 { -webkit-animation-delay: 1.02s; animation-delay: 1.02s; }
html.h5p .h5rp_d4 { -webkit-animation-delay: 1.12s; animation-delay: 1.12s; }
html.h5p .h5rp_d5 { -webkit-animation-delay: 1.20s; animation-delay: 1.20s; }
html.h5p .h5rp_d6 { -webkit-animation-delay: 1.28s; animation-delay: 1.28s; }

/* ---- 점수 상세 창(788x862): 내정보 팝업과 같은 머리띠 조각 조합, 화면 아래 129 에 붙인다 ---- */
html.h5p #H5RP_detail
{
    position: absolute;
    left: 146px;
    bottom: 129px;
    width: 788px;
    height: 862px;
    z-index: 30;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    /* 나타나고 사라지는 연출을 내정보 팝업과 같게 한다 (2026-09-21 CEO 지시).
       키프레임은 css/h5_portrait_myinfo.css 의 myi_pop_in / myi_pop_out 을 그대로 쓴다 */
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
/* 닫을 때: 살짝 커졌다가 작아지며 사라진다 (S_GAMERESULT_PORTRAIT.show_detail 이 붙인다, 길이 H5RP_DETAIL_CLOSE_MS) */
html.h5p #H5RP_detail.H5RP_detail_closing
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
html.h5p #H5RP_detail_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
}
html.h5p #H5RP_detail_close
{
    position: absolute;
    right: 0;
    top: 0;
    width: 110px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 26px 22px;
    background-size: 57px 56px;
    cursor: pointer;
}
html.h5p #H5RP_detail_close:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 항목 줄: 칩(159x52) + 값. 왼쪽 칩 left 33 / 오른쪽 칩 left 417, 줄 간격 59 */
html.h5p .h5rp_row
{
    position: absolute;
    width: 360px;
    height: 52px;
}
html.h5p .h5rp_side0 { left: 33px; }
html.h5p .h5rp_side1 { left: 417px; }
html.h5p .h5rp_p1.h5rp_r0 { top: 117px; }
html.h5p .h5rp_p1.h5rp_r1 { top: 176px; }
html.h5p .h5rp_p1.h5rp_r2 { top: 235px; }
html.h5p .h5rp_p1.h5rp_r3 { top: 295px; }
html.h5p .h5rp_p1.h5rp_r4 { top: 353px; }
html.h5p .h5rp_p2.h5rp_r0 { top: 520px; }
html.h5p .h5rp_p2.h5rp_r1 { top: 580px; }
html.h5p .h5rp_p2.h5rp_r2 { top: 640px; }
html.h5p .h5rp_p2.h5rp_r3 { top: 698px; }
html.h5p .h5rp_chip
{
    position: absolute;
    left: 0;
    top: 0;
    width: 159px;
    height: 52px;
    line-height: 50px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -2px;
    color: #ffffff;
    background: url(../image/2_game/h5p/result/result_popup_gray.png) no-repeat 0 0;
    background-size: 159px 52px;
    text-shadow: 0 2px 0 #5f5f5f, 2px 0 0 #5f5f5f, -2px 0 0 #5f5f5f, 0 -2px 0 #5f5f5f;
}
html.h5p .h5rp_chip.h5rp_chip_on
{
    background-image: url(../image/2_game/h5p/result/result_popup_red.png);
    text-shadow: 0 2px 0 #a3261b, 2px 0 0 #a3261b, -2px 0 0 #a3261b, 0 -2px 0 #a3261b;
}
html.h5p .h5rp_val
{
    position: absolute;
    left: 176px;
    top: 0;
    width: 160px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #7a4a12;
}

/* 기본점수 소계(720x48) / 점선 / 합계식 */
html.h5p #H5RP_detail_sub
{
    position: absolute;
    left: 34px;
    top: 432px;
    width: 720px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #1c4fa3;
    background: url(../image/2_game/h5p/result/result_popup_blue_long.png) no-repeat 0 0;
    background-size: 720px 48px;
}
html.h5p #H5RP_detail_line
{
    position: absolute;
    left: 6px;
    right: 6px;
    top: 500px;
    height: 0;
    border-top: 3px dashed #e9b949;
}
html.h5p #H5RP_detail_sum
{
    position: absolute;
    left: 35px;
    top: 780px;
    width: 720px;
    height: 48px;
    font-size: 36px;
    font-weight: 800;
    line-height: 48px;
}
html.h5p #H5RP_detail_sum span
{
    position: absolute;
    top: 0;
    height: 48px;
    text-align: center;
    white-space: nowrap;
}
html.h5p #H5RP_sum_score
{
    left: 0;
    width: 188px;
    color: #1c4fa3;
    background: url(../image/2_game/h5p/result/result_popup_blue_short.png) no-repeat 0 0;
    background-size: 188px 48px;
}
html.h5p #H5RP_sum_x,
html.h5p #H5RP_sum_eq
{
    width: 32px;
    color: #7a4a12;
}
html.h5p #H5RP_sum_x { left: 186px; }
html.h5p #H5RP_sum_eq { left: 409px; }
html.h5p #H5RP_sum_bae
{
    left: 220px;
    width: 188px;
    color: #8a5a00;
    background: url(../image/2_game/h5p/result/result_popup_yellow_short.png) no-repeat 0 0;
    background-size: 188px 48px;
}
html.h5p #H5RP_sum_total
{
    left: 452px;
    width: 270px;
    color: #8a5a00;
    background: url(../image/2_game/h5p/result/result_popup_yellow_long.png) no-repeat 0 0;
    background-size: 270px 48px;
}

@-webkit-keyframes h5rp_fade_in { from { opacity: 0; } to { opacity: 1; } }
@keyframes h5rp_fade_in { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes h5rp_rise { from { opacity: 0; -webkit-transform: translateY(24px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes h5rp_rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes h5rp_win_drop { from { opacity: 0; -webkit-transform: scale(2.3); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_win_drop { from { opacity: 0; transform: scale(2.3); } to { opacity: 1; transform: scale(1); } }
@-webkit-keyframes h5rp_lose_drop { 0% { opacity: 0; -webkit-transform: translateY(-90px); } 45% { opacity: 1; -webkit-transform: translateY(0); } 70% { -webkit-transform: translateY(-22px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes h5rp_lose_drop { 0% { opacity: 0; transform: translateY(-90px); } 45% { opacity: 1; transform: translateY(0); } 70% { transform: translateY(-22px); } 100% { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes h5rp_lines_down { from { opacity: 0; -webkit-transform: translateY(-80px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes h5rp_lines_down { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes h5rp_rays_in { from { opacity: 0; -webkit-transform: scale(0.3) rotate(-120deg); } to { opacity: 1; -webkit-transform: scale(1) rotate(0deg); } }
@keyframes h5rp_rays_in { from { opacity: 0; transform: scale(0.3) rotate(-120deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
@-webkit-keyframes h5rp_star_fly
{
    0%   { opacity: 0; -webkit-transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; -webkit-transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(300deg); }
    100% { opacity: 0; -webkit-transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * 1.15)) scale(0.5) rotate(380deg); }
}
@keyframes h5rp_star_fly
{
    0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(300deg); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * 1.15)) scale(0.5) rotate(380deg); }
}
@-webkit-keyframes h5rp_bubble_pop { 0% { opacity: 0; -webkit-transform: scale(0); } 70% { opacity: 1; -webkit-transform: scale(1.12); } 100% { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_bubble_pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@-webkit-keyframes h5rp_face_burst { 0% { opacity: 0; -webkit-transform: scale(0); } 60% { opacity: 1; -webkit-transform: scale(1.18); } 100% { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_face_burst { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@-webkit-keyframes h5rp_rays_pulse { 0%, 100% { -webkit-transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.06); opacity: 0.82; } }
@keyframes h5rp_rays_pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.82; } }
@-webkit-keyframes h5rp_twinkle { 0%, 100% { opacity: 0; -webkit-transform: scale(0.4); } 45% { opacity: 1; -webkit-transform: scale(1.1) rotate(20deg); } }
@keyframes h5rp_twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
@-webkit-keyframes h5rp_pop { from { opacity: 0; -webkit-transform: scale(0.3); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }

/* ============ 매칭 대기 (S_WAIT) ============ */

/* 컨테이너: 캔버스 전체 (검정 배경 height:100%와 팝업 top:50% 계산 기준) */
html.h5p #S_WAIT_div
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

/* 검정 배경: 캔버스 전체 */
html.h5p #Img_WA_background
{
    width: 100% !important;
    height: 100% !important;
}

/* 2026-09-11 CEO: 대기는 실제 게임 테이블(S_GAME_div) 위에 안내 오버레이로. 테이블 위에 떠야 하므로 z-index */
html.h5p #S_WAIT_div
{
    z-index: 20;
    pointer-events: none; /* 테이블은 터치 통과, 버튼만 받는다 */
}
html.h5p #wa_back, html.h5p #wa_ok { pointer-events: auto; }

/* 나가기(방 나가기): 원래 좌상단 뒤로 버튼을 문구 아래 오른쪽 버튼으로 옮긴다 (2026-09-12 CEO 지시 - 좌상단 버튼 삭제).
   글자는 h5_portrait_game.js 가 '나가기' 로 바꾼다. 연습 시작(#wa_ok)과 같은 크기, 한 단계 차분한 색 */
html.h5p #wa_back
{
    /* 2026-10-10 CEO 지시로 '연습 게임' 과 자리를 맞바꿨다 (560 -> 160) */
    left: 160px !important;
    top: calc(27% + 428px) !important;   /* 상자가 글 + 점모션 + 캐릭터 칸으로 높아졌다 (2026-09-26) */
    width: 360px !important;
    height: 112px !important;
    line-height: 106px !important;
    font-size: 48px !important;
    font-weight: 800;
    color: #442509 !important;
    text-align: center !important;
    border-radius: 24px !important;
    border: 3px solid #8a7550 !important;
    background: linear-gradient(#f1ead8, #cdbf9f) !important;
    box-sizing: border-box !important;
}

/* 가운데 안내 문구: 테이블 중앙(바닥패 자리) */
html.h5p #wa_msg
{
    left: 60px !important;
    width: 960px !important;
    top: 27% !important;
    padding: 34px 0 !important;
    font-size: 40px !important;
    line-height: 60px !important;
    border-radius: 26px !important;
}

/* 연습 시작(원래 OK): 문구 아래 왼쪽. 나가기와 둘이 가운데 정렬 (160~520 / 560~920) */
html.h5p #wa_ok
{
    /* 2026-10-10 CEO 지시로 '나가기' 와 자리를 맞바꿨다 (160 -> 560) */
    left: 560px !important;
    top: calc(27% + 428px) !important;   /* 상자가 글 + 점모션 + 캐릭터 칸으로 높아졌다 (2026-09-26) */
    width: 360px !important;
    height: 112px !important;
    line-height: 106px !important;          /* 테두리 3px 안쪽 높이 - 나가기 버튼과 같은 크기 */
    box-sizing: border-box !important;      /* 원본 테두리(3px)까지 360x112 안에 넣는다 */
    font-size: 48px !important;
    border-radius: 24px !important;
}

/* ---- 매칭 대기: 로딩 모션 / 상대 빈 프로필 그림 (2026-09-12 CEO 지시, h5_portrait_game.js h5pg_wrap_wait) ---- */
/* 안내 문구 아래: 점 세 개가 차례로 통통 뛰는 모션, 그 아래 칸에 캐릭터 컷 (2026-09-26 CEO 지시) */
html.h5p #wa_msg .h5pg_wait_dots
{
    height: 56px;
    margin-top: 12px;
    text-align: center;
    line-height: 0;
    font-size: 0;
}
html.h5p #wa_msg .h5pg_wait_dots i
{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 18px 11px 0 11px;
    border-radius: 50%;
    background: #f6d7a7;
    -webkit-animation: h5pg_dot_hop 1.2s ease-in-out infinite;
    animation: h5pg_dot_hop 1.2s ease-in-out infinite;
}
html.h5p #wa_msg .h5pg_wait_dots i:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
html.h5p #wa_msg .h5pg_wait_dots i:nth-child(3) { -webkit-animation-delay: 0.3s;  animation-delay: 0.3s; }
@-webkit-keyframes h5pg_dot_hop
{
    0%, 60%, 100% { -webkit-transform: translateY(0); opacity: 0.55; }
    30%           { -webkit-transform: translateY(-14px); opacity: 1; }
}
@keyframes h5pg_dot_hop
{
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30%           { transform: translateY(-14px); opacity: 1; }
}
/* 캐릭터 컷이 들어갈 빈 칸 (컷은 화면 좌표로 따로 놓인다 - #h5sit_scr[data-scene="S_WAIT"]) */
html.h5p #wa_msg .h5pg_wait_gap
{
    height: 220px;
}

/* 상대 프로필 자리(1080x2340 기준 x 907 / y 271).
   2026-10-10 CEO 지시: 기본 캐릭터 그림을 두면 '그 사람이 들어온 것' 처럼 보였다가 진짜 상대가 오면 그림이 바뀐다.
   아직 정해지지 않았다는 뜻이 되게 점 세 개가 뛰는 모션(아래 안내 줄과 같은 모양)으로 바꾼다 */
html.h5p #h5pg_wait_face
{
    position: absolute;
    left: 907px;
    top: 291px;		/* 271 + 20 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
    width: 128px;
    height: 128px;
    border-radius: 50%;
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.35);
    /* 2026-10-10 CEO 지시: 다른 프로필 그림과 같은 모양이 되게 흰 테두리 + 녹색 단색 동그라미로.
       색은 프로필 그림(profile_icon0)에서 그대로 가져왔다 (속 138,220,102 / 테두리 흰색) */
    /* 2026-10-10 CEO 지적: 그대로 쓰니 너무 밝았다 - 채도와 밝기를 한 단계 낮춘다 (138,220,102 -> 106,172,80) */
    background: #6aac50;
    border: 8px solid #ffffff;
    box-sizing: border-box;
    text-align: center;
    font-size: 0;
    z-index: 30;
    pointer-events: none;
}
html.h5p #h5pg_wait_face i
{
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 47px 7px 0;	/* 테두리 8 만큼 안쪽이 줄었다 */
    border-radius: 50%;
    background: #15491a;	/* 녹색 바탕 위라 짙은 색으로 (2026-10-10) */
    opacity: 0.75;
    -webkit-animation: h5pg_dot_hop 1.1s ease-in-out infinite;
    animation: h5pg_dot_hop 1.1s ease-in-out infinite;
}
html.h5p #h5pg_wait_face i:nth-child(2) { -webkit-animation-delay: 0.18s; animation-delay: 0.18s; }
html.h5p #h5pg_wait_face i:nth-child(3) { -webkit-animation-delay: 0.36s; animation-delay: 0.36s; }

/* 매칭 대기 중 빈 프로필 아래 '상대' 알약 (2026-10-10 CEO 지시).
   게임이 시작되면 같은 자리에 상대 레벨 알약(#user_you_level, 캔버스 left 901.5 / top 434)이 서므로
   그 자리·그 그림 그대로 둔다. 켜고 끄기는 h5_portrait_game.js h5pg_sync_wait_chip */
html.h5p #h5pg_wait_chip
{
    display: none;
    position: absolute;
    left: 901.5px;
    top: 434px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: url(../image/2_game/h5p/level.png) no-repeat 0 0;
    background-size: 140px 35px;
    color: #ffffff;
    font-size: 36px;
    letter-spacing: -1px;
    z-index: 30;
    pointer-events: none;
}
html.h5p.h5pg_tower #h5pg_wait_chip
{
    background-image: url(../image/2_game/h5p/tower/level.png);
}

/* 로봇 연습대전 중 "상대를 찾는 중" 표시: 세로 화면에서는 보이지 않게 한다 (2026-09-12 CEO 지시).
   원본(util_Practice.js)은 인라인 display:block 으로 띄우므로 !important 로 감춘다 - 매칭 대기 동작은 그대로 */
html.h5p #h5_practice_ind
{
    display: none !important;
    top: 40px !important;
    font-size: 30px !important;
    line-height: 40px !important;
    padding: 8px 28px !important;
    border-radius: 28px !important;
}
html.h5p #h5_practice_dot
{
    width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    margin-right: 12px !important;
}

/* ============ 마켓스토어 (S_MARKETSTORE, 충전소>유료충전) ============ */
/* 상품 10개(각 253x212)가 가로 5열x2행 고정 배열 -> 세로에선 2열x5행 + 0.7배 축소.
   각 카드에 transform을 걸면 내부 이미지/텍스트가 함께 축소된다. 좌열=금화, 우열=루비 */

html.h5p #Img_MS_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_MS_background2 { display: none !important; }
html.h5p #Img_MS_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

html.h5p #MS_title
{
    left: 50% !important;
    top: 345px !important;
    transform: translateX(-50%) !important;
}

/* 금화/루비 탭 + 2x2 배치. 원본 상품 번호 그대로: 금화 = MS_menu1~4, 루비 = MS_menu5~8
   2026-09-22 CEO 전달 새 디자인('맞고 세로모드 - 상점' 가이드 실측, 1080 기준):
   카드 = ch_bt_bg(415x586) 을 398x562 로, 좌 115 / 우 555, 윗줄 665 / 아랫줄 1293.
   카드 안: 상품 그림 284x210 (57, 62) / 수량 글자 가운데 y 322 / 가격 버튼 316x92 (41, 415)
   가격 버튼 y 는 2026-10-01 CEO 지적으로 425 -> 415. 카드 그림의 점선 아래 칸(391~531)
   한가운데가 461 이라 92 짜리 버튼은 415 에서 시작해야 위아래 여백이 24 로 같아진다 */
html.h5p #MS_menu1, html.h5p #MS_menu2, html.h5p #MS_menu3,
html.h5p #MS_menu4, html.h5p #MS_menu5,
html.h5p #MS_menu6, html.h5p #MS_menu7, html.h5p #MS_menu8
{
    z-index: 1;	/* 2026-09-30 CEO 지적: 띠(marketstore_dim)가 카드 위를 덮어 어두워졌다 */
    /* 2026-09-26 CEO 지시: 카드를 110% 로 키운다 (안쪽 그림·글자도 같이 커지도록 통째로) */
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    width: 398px !important;
    height: 562px !important;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt_bg.png) no-repeat 0 0 !important;
    background-size: 100% 100% !important;
}
html.h5p #MS_menu1, html.h5p #MS_menu5 { left: 107px !important; top: 755px !important; top: -webkit-calc(775px - var(--h5p_title_up, 20px)) !important; top: calc(775px - var(--h5p_title_up, 20px)) !important; }
html.h5p #MS_menu2, html.h5p #MS_menu6 { left: 575px !important; top: 755px !important; top: -webkit-calc(775px - var(--h5p_title_up, 20px)) !important; top: calc(775px - var(--h5p_title_up, 20px)) !important; }
html.h5p #MS_menu3, html.h5p #MS_menu7 { left: 107px !important; top: 1413px !important; top: -webkit-calc(1433px - var(--h5p_title_up, 20px)) !important; top: calc(1433px - var(--h5p_title_up, 20px)) !important; }
html.h5p #MS_menu4, html.h5p #MS_menu8 { left: 575px !important; top: 1413px !important; top: -webkit-calc(1433px - var(--h5p_title_up, 20px)) !important; top: calc(1433px - var(--h5p_title_up, 20px)) !important; }
html.h5p #MS_menu1:active, html.h5p #MS_menu2:active, html.h5p #MS_menu3:active, html.h5p #MS_menu4:active,
html.h5p #MS_menu5:active, html.h5p #MS_menu6:active, html.h5p #MS_menu7:active, html.h5p #MS_menu8:active
{
    -webkit-transform: scale(1.067);
    transform: scale(1.067);
}
/* 원본 상품 그림은 감추고 새 그림(::before)과 가격 버튼(::after)을 깐다. 글자는 버튼 위로 */
html.h5p #Img_MS_m1, html.h5p #Img_MS_m2, html.h5p #Img_MS_m3, html.h5p #Img_MS_m4,
html.h5p #Img_MS_m5, html.h5p #Img_MS_m6, html.h5p #Img_MS_m7, html.h5p #Img_MS_m8
{
    display: none !important;
}
html.h5p #MS_menu1::before, html.h5p #MS_menu2::before, html.h5p #MS_menu3::before, html.h5p #MS_menu4::before,
html.h5p #MS_menu5::before, html.h5p #MS_menu6::before, html.h5p #MS_menu7::before, html.h5p #MS_menu8::before
{
    content: '';
    position: absolute;
    left: 57px;
    top: 62px;
    width: 284px;
    height: 210px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
html.h5p #MS_menu1::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt_icon1.png); }
html.h5p #MS_menu2::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt_icon2.png); }
html.h5p #MS_menu3::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt_icon3.png); }
html.h5p #MS_menu4::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt_icon4.png); }
html.h5p #MS_menu5::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt2_icon1.png); }
html.h5p #MS_menu6::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt2_icon2.png); }
html.h5p #MS_menu7::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt2_icon3.png); }
html.h5p #MS_menu8::before { background-image: url(../image/1_mainmenu/h5p/shop/ch_bt2_icon4.png); }
html.h5p #MS_menu1::after, html.h5p #MS_menu2::after, html.h5p #MS_menu3::after, html.h5p #MS_menu4::after,
html.h5p #MS_menu5::after, html.h5p #MS_menu6::after, html.h5p #MS_menu7::after, html.h5p #MS_menu8::after
{
    content: '';
    position: absolute;
    left: 41px;
    top: 415px;
    width: 316px;
    height: 92px;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt.png) no-repeat 0 0;	/* 금화 카드: 주황 버튼(루비 그림 포함) - 루비로 산다 */
    background-size: 100% 100%;
    pointer-events: none;
}
html.h5p #MS_menu5::after, html.h5p #MS_menu6::after, html.h5p #MS_menu7::after, html.h5p #MS_menu8::after
{
    background-image: url(../image/1_mainmenu/h5p/shop/ch_bt2.png);	/* 루비 카드: 빨간 버튼 - 원화 결제 */
}
/* 수량 글자 (1천만냥 / 10개) */
html.h5p #Txt1_MS_m1, html.h5p #Txt1_MS_m2, html.h5p #Txt1_MS_m3, html.h5p #Txt1_MS_m4,
html.h5p #Txt1_MS_m5, html.h5p #Txt1_MS_m6, html.h5p #Txt1_MS_m7, html.h5p #Txt1_MS_m8
{
    left: 0 !important;
    top: 290px !important;
    width: 398px !important;
    height: 64px !important;
    line-height: 64px !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    color: #3a1f10 !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 1;
}
html.h5p #Txt1_1_MS_m1, html.h5p #Txt1_1_MS_m2, html.h5p #Txt1_1_MS_m3, html.h5p #Txt1_1_MS_m4,
html.h5p #Txt1_1_MS_m5, html.h5p #Txt1_1_MS_m6, html.h5p #Txt1_1_MS_m7, html.h5p #Txt1_1_MS_m8
{
    left: 0 !important;
    top: 352px !important;
    width: 398px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 33px !important;
    text-align: center !important;
    z-index: 1;
}
/* 가격 글자: 금화 카드는 버튼 왼쪽 루비 그림을 비켜 오른쪽 칸 가운데, 루비 카드는 버튼 가운데 */
html.h5p #Txt2_MS_m1, html.h5p #Txt2_MS_m2, html.h5p #Txt2_MS_m3, html.h5p #Txt2_MS_m4,
html.h5p #Txt2_MS_m5, html.h5p #Txt2_MS_m6, html.h5p #Txt2_MS_m7, html.h5p #Txt2_MS_m8
{
    left: 136px !important;
    top: 415px !important;
    width: 176px !important;
    height: 92px !important;
    line-height: 88px !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: -3px 0 0 #a8520a, 3px 0 0 #a8520a, 0 -3px 0 #a8520a, 0 3px 0 #a8520a,
                 -2px -2px 0 #a8520a, 2px -2px 0 #a8520a, -2px 2px 0 #a8520a, 2px 2px 0 #a8520a !important;
    z-index: 1;
}
html.h5p #Txt2_MS_m5, html.h5p #Txt2_MS_m6, html.h5p #Txt2_MS_m7, html.h5p #Txt2_MS_m8
{
    left: 41px !important;
    width: 316px !important;
    font-size: 51px !important;
    text-shadow: -3px 0 0 #9c1414, 3px 0 0 #9c1414, 0 -3px 0 #9c1414, 0 3px 0 #9c1414,
                 -2px -2px 0 #9c1414, 2px -2px 0 #9c1414, -2px 2px 0 #9c1414, 2px 2px 0 #9c1414 !important;
}

/* 탭에 따라 한 그룹만 보여준다 */
html.h5p #S_MARKETSTORE_div.MSP_gold #MS_menu5,
html.h5p #S_MARKETSTORE_div.MSP_gold #MS_menu6,
html.h5p #S_MARKETSTORE_div.MSP_gold #MS_menu7,
html.h5p #S_MARKETSTORE_div.MSP_gold #MS_menu8,
html.h5p #S_MARKETSTORE_div.MSP_ruby #MS_menu1,
html.h5p #S_MARKETSTORE_div.MSP_ruby #MS_menu2,
html.h5p #S_MARKETSTORE_div.MSP_ruby #MS_menu3,
html.h5p #S_MARKETSTORE_div.MSP_ruby #MS_menu4,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu1,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu2,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu3,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu4,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu5,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu6,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu7,
html.h5p #S_MARKETSTORE_div.MSP_pkg #MS_menu8,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu1,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu2,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu3,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu4,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu5,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu6,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu7,
html.h5p #S_MARKETSTORE_div.MSP_ad #MS_menu8
{
    display: none !important;
}

/* 패키지 카드: 패키지 탭에서만 보인다 */
html.h5p #MSP_pkg_pane { display: none; }
html.h5p #S_MARKETSTORE_div.MSP_pkg #MSP_pkg_pane { display: block; }
html.h5p #MSP_ad_pane { display: none; }
html.h5p #S_MARKETSTORE_div.MSP_ad #MSP_ad_pane { display: block; }

/* 남은 상품 슬롯(9,10)은 이번 개편 대상이 아니라 세로에서는 감춘다 (삭제 아님) */
html.h5p #MS_menu9,
html.h5p #MS_menu10,
html.h5p #MS_menu10_noti
{
    display: none !important;
}

/* ---- 금화 / 루비 / 패키지 탭 (2026-09-22 새 디자인: ch_categorybt_*.png 283x104, 선택 = *_select 그림에 아이콘 포함) ---- */
/* 가이드 실측: 탭 그림 윗변 483 (보이는 윗변 498), x 105 / 400 / 695. 뒤 띠(marketstore_dim 992x447)는 위 선 488, 금색 선 608 */
html.h5p #MSP_band
{
    position: absolute;
    /* 2026-09-30 CEO 지적: 그림이 1022 로 커진 만큼 왼쪽도 다시 잡아야 가운데에 온다 */
    left: 29px;
    top: 490px;
    top: -webkit-calc(510px - var(--h5p_title_up, 20px));
    top: calc(510px - var(--h5p_title_up, 20px));
    width: 1022px;
    height: 479px;
    background: url(../image/1_mainmenu/h5p/shop/marketstore_dim.png?v=2) no-repeat 0 0;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;	/* 2026-09-30 CEO 지시: 띠는 카테고리 버튼과 상품 카드 둘 다의 뒤로 깔린다 */
}
html.h5p #MSP_tabs
{
    position: absolute;
    /* 2026-09-30 CEO 지시: 카테고리가 넷으로 늘었다. 띠와 같은 자리·같은 폭 - 243 x 4 + 사이 16~17 = 1022 */
    left: 29px;
    /* 띄 안 두 선(띄 위 6.5 / 108.5) 사이 가운데에 보이는 알약(그림 안 y 15~103)을 맞춘다 - 5 올림 (2026-09-26 CEO 지시) */
    /* 띠 그림 윗변(510)에서 14 내려야 띠 안 투명 줄(그림 y 11~106) 한가운데에 버튼(89)이 앉는다 */
    top: 504px;
    top: -webkit-calc(524px - var(--h5p_title_up, 20px));
    top: calc(524px - var(--h5p_title_up, 20px));
    width: 1022px;
    height: 89px;
    z-index: 30;
}
html.h5p .MSP_tab
{
    position: absolute;
    top: 0;
    width: 243px;
    height: 89px;
    background: no-repeat 0 0;
    background-size: 100% 100%;
    cursor: pointer;
}
html.h5p #MSP_tab_gold { left: 0;     background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_gold.png?v=3); }
html.h5p #MSP_tab_ruby { left: 260px; background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_ruby.png?v=3); }
html.h5p #MSP_tab_pkg  { left: 520px; background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_package.png?v=3); }
html.h5p #MSP_tab_ad   { left: 779px; background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_ad.png?v=3); }
html.h5p #MSP_tab_gold.MSP_on { background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_gold_select.png?v=2); }
html.h5p #MSP_tab_ruby.MSP_on { background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_ruby_select.png?v=2); }
html.h5p #MSP_tab_pkg.MSP_on  { background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_package_select.png?v=2); }
html.h5p #MSP_tab_ad.MSP_on   { background-image: url(../image/1_mainmenu/h5p/shop/ch_categorybt_ad_select.png?v=3); }
html.h5p .MSP_tab:active
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}
/* 탭 글자: 몸통(y 15~104) 가운데. 선택되면 흰 글자 + 진한 빨강 테두리, 왼쪽 아이콘을 비켜 오른쪽으로 */
html.h5p .MSP_tab_txt
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 89px;
    line-height: 89px;
    text-align: center;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -3px 0 0 #4a4f5e, 3px 0 0 #4a4f5e, 0 -3px 0 #4a4f5e, 0 3px 0 #4a4f5e,
                 -2px -2px 0 #4a4f5e, 2px -2px 0 #4a4f5e, -2px 2px 0 #4a4f5e, 2px 2px 0 #4a4f5e;
    pointer-events: none;
}
/* 고른 칸은 그 칸 색에 맞는 진한 테두리 */
html.h5p #MSP_tab_gold.MSP_on .MSP_tab_txt
{ text-shadow: -3px 0 0 #9a6208, 3px 0 0 #9a6208, 0 -3px 0 #9a6208, 0 3px 0 #9a6208,
               -2px -2px 0 #9a6208, 2px -2px 0 #9a6208, -2px 2px 0 #9a6208, 2px 2px 0 #9a6208; }
html.h5p #MSP_tab_ruby.MSP_on .MSP_tab_txt
{ text-shadow: -3px 0 0 #8c1a1a, 3px 0 0 #8c1a1a, 0 -3px 0 #8c1a1a, 0 3px 0 #8c1a1a,
               -2px -2px 0 #8c1a1a, 2px -2px 0 #8c1a1a, -2px 2px 0 #8c1a1a, 2px 2px 0 #8c1a1a; }
html.h5p #MSP_tab_pkg.MSP_on .MSP_tab_txt
{ text-shadow: -3px 0 0 #5c1a8c, 3px 0 0 #5c1a8c, 0 -3px 0 #5c1a8c, 0 3px 0 #5c1a8c,
               -2px -2px 0 #5c1a8c, 2px -2px 0 #5c1a8c, -2px 2px 0 #5c1a8c, 2px 2px 0 #5c1a8c; }
html.h5p #MSP_tab_ad.MSP_on .MSP_tab_txt
{ text-shadow: -3px 0 0 #14568c, 3px 0 0 #14568c, 0 -3px 0 #14568c, 0 3px 0 #14568c,
               -2px -2px 0 #14568c, 2px -2px 0 #14568c, -2px 2px 0 #14568c, 2px 2px 0 #14568c; }

/* 리모컨용 포커스 링은 가로 좌표로 그려지므로 세로(터치)에선 숨긴다 */
html.h5p #MS_menu_focus { display: none !important; }

/* 안내 문구: 하단 전체폭 */
html.h5p #MS_comment_kor
{
    left: 0 !important;
    width: 100% !important;
    top: auto !important;
    bottom: 217.5px !important;
    bottom: -webkit-calc(217.5px - var(--h5p_sub_drop, 0px)) !important;
    bottom: calc(217.5px - var(--h5p_sub_drop, 0px)) !important;
    text-align: center !important;
}

html.h5p #MS_back
{
    left: 36px !important;
    top: 99px !important;
    bottom: auto !important;
}

/* 월결제 한도 초과 팝업: 컨테이너/딤 전체 + 보드(563x350) 정중앙 */
html.h5p #MS_popup_div { width: 100% !important; height: 100% !important; }
html.h5p #MS_popup_bg  { width: 100% !important; height: 100% !important; }
html.h5p #MS_popup_div_div
{
    left: 117px !important;
    top: 50% !important;
    margin-top: -262.5px !important;
}

/* ============ 도움말 (S_HELP, 기타>도움말) ============ */

/* 검정 배경 */
html.h5p #HE_popup_bg
{
    width: 100% !important;
    height: 100% !important;
}

/* 도움말 보드(1192x584): 0.6배(715폭)로 통짜 축소 + 세로 중앙 (닫기 버튼 포함 자식들 함께 축소) */
html.h5p #HE_popup
{
    left: 3px !important;
    top: 50% !important;
    margin-top: -262.5px !important;
    transform: scale(0.6);
    transform-origin: left top;
}

/* 페이지 좌우 화살표: 화면 가장자리 + 세로 중앙 */
html.h5p #Img_HE_left
{
    left: 6px !important;
    top: 50% !important;
    margin-top: -60px !important;
}
html.h5p #Img_HE_right
{
    left: auto !important;
    right: 6px !important;
    top: 50% !important;
    margin-top: -60px !important;
}

/* ============ 도움말 세로 화면 (S_help_portrait.js, 2026-09-18 CEO 지시) ============ */
/* 가로 그림(he_content1~6.jpg)으로 된 판은 통째로 감추고, 서브 배경 위에 세로 도움말을 얹는다.
   타이틀 글자는 다른 서브화면과 같은 자리(.H5PT_title), 아래 '이전' 버튼은 원본 #HE_back 을 그대로 쓴다 */
html.h5p #HE_popup
{
    display: none !important;
}

/* 도움말이 떠 있는 동안은 뒤의 설정 화면을 감춘다 - 서브 배경(#h5p_subbg)만 남는다 */
html.h5p.h5p_help_on #S_SETTING_div
{
    visibility: hidden !important;
}

html.h5p #HEP_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
    pointer-events: none;   /* 빈 곳 터치는 뒤로 넘기고 판과 버튼만 받는다 */
}

/* 타이틀은 금고/룰렛과 같은 높이로 올려 내용 자리를 더 벌어준다 (2026-09-18 CEO 지시) */
/* 도움말에는 상단 재화바가 없어 같은 241 이어도 더 내려가 보인다 (2026-09-21 CEO 지적).
   재화바가 없는 약관 전문 타이틀(#AGD_title_txt top 136)과 같은 높이로 올린다 */
html.h5p #HEP_title
{
    top: 166px;	/* 2026-10-13 CEO 지시: 이전 버튼이 왼쪽 위로 올라와 타이틀과 붙어 보여 30 내렸다 (136 -> 166) */
}

/* 내용 판: 작은 팝업이 아니라 화면을 꽉 채운다 (2026-09-18 CEO 지시 - 스크롤 없이 한 쪽이 다 들어가게) */
/* 타이틀을 136 으로 올린 만큼 판도 90 올려 타이틀과의 여백을 24 로 줄인다 (2026-09-21 CEO 지시). */
/* 2026-09-21: 쪽 넘기기를 없애고 묶음 버튼 줄(#HEP_tabs, 300~384)을 타이틀 바로 아래로 올렸다 (CEO 지시).
   판은 버튼 줄 아래 408 부터, 아랫변은 예전처럼 화면 아래 250 - 내용 높이는 아래에 두었을 때와 거의 같다 */
html.h5p #HEP_panel
{
    position: absolute;
    left: 15px;
    top: 438px;	/* 2026-10-13 CEO 지시: 타이틀을 30 내린 만큼 내용도 30 내린다 (408 -> 438) */
    width: 1050px;
    height: -webkit-calc(100% - 614px + var(--h5p_sub_drop, 0px));
    height: calc(100% - 614px + var(--h5p_sub_drop, 0px));   /* 2026-10-13 CEO 지시: 이전 버튼이 아래에서 빠졌으니 판을 아래로 늘린다 - 아랫변 2146 -> 2220 (세이프 하단선) */
    box-sizing: border-box;
    pointer-events: auto;
}

/* 본문 스크롤 상자: 판 안쪽 여백 왼쪽 24 */
/* 2026-09-21 CEO 지시: 스크롤 막대를 미션 화면과 같은 자리(1052~1074, 화면 오른쪽 끝에서 6)로 보내고
   글과 막대 사이를 30 띄운다. 상자를 판 오른쪽 끝(1059)까지 늘리고 안쪽 오른쪽 여백 30 으로 글을 앞당긴다 */
html.h5p #HEP_scroll
{
    position: absolute;
    left: 24px;
    top: 24px;
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
    padding-right: 30px;
    box-sizing: border-box;
    height: -webkit-calc(100% - 48px);
    height: calc(100% - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #f6ead4;
}
/* 스크롤 막대: 메인화면 실시간 대전 방 목록(#MMP_rooms)과 같은 모양 - 가는 반투명 트랙 위에 흰 둥근 막대 (2026-09-21 CEO 지시).
   폭 22 자리를 두고 좌우 투명 테두리 7 로 안쪽 8 만 칠해 가늘게 만든다 */
html.h5p #HEP_scroll::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p #HEP_scroll::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p #HEP_scroll::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
/* 트랙(회색 줄) 진하기 22% -> 11% 로 반 (2026-09-21 CEO 지시 - 도움말에서 거슬려 보였다. 같은 모양을 쓰는 메인 방 목록/미션/도움말 함께) */
html.h5p #HEP_scroll::-webkit-scrollbar-track
{
    /* 막대 길이 = 보이는 줄 범위: 위는 첫 줄 윗선, 아래는 목록 아래끝 (2026-09-22 CEO 지시 - 우편함과 같은 기준) */
    margin: 0px 0 0 0;
    border: 0;
    background: transparent;		/* 2026-10-07 CEO 지시: 전체 범위를 표시하던 반투명 줄은 없앤다 */
}
html.h5p #HEP_scroll::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}

/* ---- 묶음 버튼 줄: 타이틀(136~286) 바로 아래, 본문 판(408) 위 (2026-09-21 CEO 지시로 아래에서 위로 올림) ---- */
html.h5p #HEP_tabs
{
    position: absolute;
    left: 15px;
    top: 330px;	/* 2026-10-13 CEO 지시: 타이틀과 같이 30 내림 (300 -> 330) */
    width: 1050px;
    height: 84px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    pointer-events: auto;
}
html.h5p .HEP_tab
{
    /* 2026-10-06 '레벨' 묶음이 늘어 7개 - 폭 166 -> 146 (7 x 146 = 1022, 사이 4.6). 글자 크기 36 은 유지하고 자간만 더 좁혔다 */
    -webkit-flex: 0 0 146px;
    flex: 0 0 146px;
    width: 146px;
    height: 84px;
    line-height: 78px;
    box-sizing: border-box;
    text-align: center;
    font-size: 36px;
    letter-spacing: -2px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #f0dfbe;
    background: rgba(38, 26, 16, 0.72);
    border: 3px solid #8b6a3c;
    border-radius: 18px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}
/* 지금 보고 있는 묶음 (상자를 밀면 따라서 옮겨진다) */
html.h5p .HEP_tab.HEP_tab_on
{
    color: #3b3003;
    background: #ffc93c;
    border-color: #ffe9a8;
}
/* 누름 표시 */
html.h5p .HEP_tab.HEP_press
{
    -webkit-transform: scale(0.94);
    transform: scale(0.94);
}

/* ---- 본문 조각 ---- */
/* 큰 묶음 제목: 왼쪽에 빨간 막대 (원본 도움말 그림과 같은 모양) */
html.h5p .HEP_head
{
    position: relative;
    margin: 30px 0 18px 0;
    padding-left: 26px;
    font-size: 44px;
    font-weight: 800;
    color: #ffe6a8;
}
html.h5p #HEP_scroll > .HEP_sec:first-child > .HEP_head:first-child
{
    margin-top: 0;
}
html.h5p .HEP_head::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 44px;
    background: #ff7a5c;
}

/* 설명 문단 */
html.h5p .HEP_p
{
    margin: 0 0 12px 0;
    font-size: 36px;
    line-height: 52px;
    color: #f6ead4;
}
html.h5p .HEP_p b,
html.h5p .HEP_body b
{
    color: #ffd24d;
}

/* 이름표 + 설명 한 덩어리 */
html.h5p .HEP_item
{
    margin: 0 0 18px 0;
}
html.h5p .HEP_tag
{
    display: inline-block;
    min-width: 150px;
    height: 56px;
    line-height: 52px;
    padding: 0 20px;
    margin: 0 14px 8px 0;
    background: #f2e2c4;
    border: 3px solid #7a5a32;
    border-radius: 28px;
    box-sizing: border-box;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #7a5a32;
    vertical-align: middle;
}
html.h5p .HEP_body
{
    font-size: 36px;
    line-height: 52px;
    color: #f6ead4;
}

/* 족보 한 줄 */
html.h5p .HEP_jokbo
{
    margin: 0 0 8px 0;
    font-size: 0;
    white-space: nowrap;
}
/* 이름표와 점수를 왼쪽에 모으고 화투를 그 옆에 둔다 (줄 높이를 반으로 줄인다) */
html.h5p .HEP_jokbo_head
{
    display: inline-block;
    width: 330px;
    vertical-align: middle;
    white-space: normal;
}
html.h5p .HEP_jokbo .HEP_cards
{
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
html.h5p .HEP_score
{
    display: inline-block;
    height: 56px;
    line-height: 50px;
    padding: 0 22px;
    background: #8a1a12;
    border-radius: 28px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #ffffff;
    vertical-align: middle;
}
/* 설명 꼬리말은 이름표/점수 아랫줄에 따로 둔다 (한 줄에 두면 어색하게 접힌다) */
html.h5p .HEP_note
{
    display: block;
    margin: 2px 0 0 4px;
    font-size: 36px;
    line-height: 42px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #d8c6a4;
}

/* 화투 줄 (244x360 그림) */
html.h5p .HEP_cards
{
    margin: 0 0 8px 0;
    font-size: 0;
}
html.h5p .HEP_card
{
    width: 76px;
    height: 112px;
    margin: 0 8px 8px 0;
    vertical-align: top;
}
html.h5p .HEP_cards_s .HEP_card
{
    width: 58px;
    height: 86px;
    margin: 0 6px 6px 0;
}

/* 연속고 표: 세 칸씩 */
html.h5p .HEP_gos
{
    font-size: 0;
    margin-bottom: 10px;
}
html.h5p .HEP_go
{
    display: inline-block;
    width: 316px;
    height: 70px;
    line-height: 64px;
    margin: 0 8px 8px 0;
    background: #f7ecd8;
    border: 3px solid #cbb089;
    border-radius: 14px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -1px;	/* 글자 36 으로 커져 칸(316) 안에 들어가게 */
}
html.h5p .HEP_go:nth-child(3n)
{
    margin-right: 0;
}
html.h5p .HEP_go_n
{
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #8a1a12;
}
html.h5p .HEP_go_p
{
    margin-left: 8px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #4a2710;
}
html.h5p .HEP_go_x
{
    margin-left: 8px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #1f6f8b;
}

/* ---- 도움말 표 (도신 대전 보상, 2026-10-06 CEO 지시) ---- */
html.h5p .HEP_tbl
{
    margin: 4px 0 14px;
    border: 3px solid #cbb089;
    border-radius: 14px;
    overflow: hidden;
    background: #fffaf0;
}
html.h5p .HEP_tr
{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-top: 2px solid #e6d9bf;
}
html.h5p .HEP_tr:first-child
{
    border-top: 0;
}
html.h5p .HEP_tr.HEP_th
{
    background: #f0e4cb;
}
html.h5p .HEP_td
{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 10px 6px;
    font-size: 36px;	/* 글자 크기 36 이상 (CEO 지시) */
    line-height: 44px;
    font-weight: 700;
    color: #4a2710;
    text-align: center;
    word-break: keep-all;
}
html.h5p .HEP_th .HEP_td
{
    font-weight: 800;
    color: #8a1a12;
}
/* 층별 보상 표: 층 / 금화 / 루비 / 티켓 / 덤 (덤 칸은 세 줄이라 넓게) */
html.h5p .HEP_tbl_tower .HEP_td:nth-child(1) { -webkit-flex: 0 0 110px; flex: 0 0 110px; }
html.h5p .HEP_tbl_tower .HEP_td:nth-child(2) { -webkit-flex: 0 0 230px; flex: 0 0 230px; }
html.h5p .HEP_tbl_tower .HEP_td:nth-child(3) { -webkit-flex: 0 0 120px; flex: 0 0 120px; }
html.h5p .HEP_tbl_tower .HEP_td:nth-child(4) { -webkit-flex: 0 0 120px; flex: 0 0 120px; }
html.h5p .HEP_tbl_tower .HEP_td:nth-child(5) { font-size: 34px; line-height: 42px; color: #1f6f8b; }
/* 감쇠 표: 도전 / 보상 / 예시 */
html.h5p .HEP_tbl_decay .HEP_td:nth-child(1) { -webkit-flex: 0 0 300px; flex: 0 0 300px; }
html.h5p .HEP_tbl_decay .HEP_td:nth-child(2) { -webkit-flex: 0 0 240px; flex: 0 0 240px; color: #8a1a12; }
/* 트로피 표: 단계 / 횟수 / 받는 것 */
/* 트로피 단계 그림 줄 (2026-10-10 CEO 지시: 표 아래에 1 -> 5 단계 차례로).
   그림 원본은 138x181 - 다섯 장이 한 줄에 들어오게 96x126 으로 줄인다 */
html.h5p .HEP_trophies
{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    margin: 18px 0 6px;
}
html.h5p .HEP_trophy
{
    margin: 0 6px;
    text-align: center;
}
/* 단계가 올라가는 차례 표시 (2026-10-10 CEO 지시). 트로피 그림 세로 가운데쯤에 오게 아래 여백으로 띄운다 */
html.h5p .HEP_trophy_gap
{
    margin: 0 2px 66px;
    font-size: 44px;
    font-weight: 800;
    color: #f6ead4;
}
/* 원본(138x181)을 같은 칸에 넣는다 - 둘레 여백도 그대로라 단계가 올라갈수록 트로피가 커 보인다 */
html.h5p .HEP_trophy img
{
    display: block;
    width: 110px;
    height: 144px;
}
html.h5p .HEP_trophy span
{
    display: block;
    margin-top: 6px;
    font-size: 32px;
    font-weight: 700;
    /* 2026-10-10 CEO 지적: 짙은 갈색이라 어두운 도움말 바탕에서 읽기 어려웠다 - 본문 글자와 같은 색으로 */
    color: #f6ead4;
}
html.h5p .HEP_tbl_trophy .HEP_td:nth-child(1) { -webkit-flex: 0 0 170px; flex: 0 0 170px; }
html.h5p .HEP_tbl_trophy .HEP_td:nth-child(2) { -webkit-flex: 0 0 240px; flex: 0 0 240px; }
html.h5p .HEP_tbl_trophy .HEP_td:nth-child(3) { text-align: left; }

/* 캐릭터 보너스 칸 */
html.h5p .HEP_chars
{
    /* 2026-10-16 CEO 지시: 같은 줄에 선 칸끼리 세로 길이를 맞춘다 (칸을 늘여 주는 flex) */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 0;
}
html.h5p .HEP_char
{
    display: inline-block;
    width: 316px;
    margin: 0 8px 8px 0;
    padding: 8px 6px;
    background: #f7ecd8;
    border: 3px solid #cbb089;
    border-radius: 14px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
}
html.h5p .HEP_char:nth-child(3n)
{
    margin-right: 0;
}
/* 2026-10-15 CEO 지시: 동그란 프로필 그림으로 바꿔 정사각 칸에 담는다 */
html.h5p .HEP_char_img
{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
html.h5p .HEP_char_name
{
    margin-top: 6px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #8a1a12;
}
html.h5p .HEP_char_txt
{
    margin-top: 2px;
    font-size: 36px;
    line-height: 42px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #4a2710;
}
/* 가운데 줄(보너스 이름)은 두 줄로 넘어가 보기 나빴다 - 한 줄에 들어가게 줄인다 (2026-10-16 CEO 지시) */
html.h5p .HEP_char_t2
{
    font-size: 32px;
    white-space: nowrap;
}
/* 끝 줄(보너스 값)은 캐릭터 변경 화면과 같은 붉은색 (2026-10-16 CEO 지시) */
html.h5p .HEP_char_t3
{
    color: #d03a33;
}

/* 등급(칭호) 줄 */
html.h5p .HEP_ranks
{
    font-size: 0;
    margin-bottom: 10px;
}
html.h5p .HEP_rank
{
    display: inline-block;
    height: 62px;
    line-height: 56px;
    padding: 0 18px;
    margin: 0 8px 8px 0;
    background: #f2e2c4;
    border: 3px solid #7a5a32;
    border-radius: 31px;
    box-sizing: border-box;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #7a5a32;
}
html.h5p .HEP_rank.HEP_rank_top
{
    background: #8a1a12;
    border-color: #8a1a12;
    color: #ffffff;
}

/* ============ 공지사항 (S_GONGJI, 기타>공지사항) ============ */

html.h5p #S_GONGJI_div
{
    position: absolute;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
}
html.h5p #Img_GG_bg
{
    width: 100% !important;
    height: 100% !important;
}

/* 공지 이미지: 가로/세로 중앙 (표시 중인 것만 보인다. 비표시는 display:none) */
html.h5p img[id^="Img_GG_"]:not(#Img_GG_btn_focus)
{
    left: 50% !important;
    top: 45% !important;
    transform: translate(-50%, -50%) !important;
}

/* 2026-10-09 공지 그림을 세로 카드(960x1280)로 새로 만들었다 - 원본이 넣는 가로 크기(804x459)를 세로 비율로 바꾼다.
   화면이 짧은 기기에서는 아래 확인 버튼과 겹치지 않게 높이를 줄인다(가로는 비율대로) */
html.h5p img[id^="Img_GG_"]:not(#Img_GG_btn_focus)
{
    width: auto !important;
    /* 2026-10-19 CEO 지적(쪽 번호가 그림에 겹친다): 그림 아래끝과 확인 버튼 사이가 50 뿐이라
       쪽 번호(54)가 들어갈 자리가 없었다 - 그림을 조금 줄여 그 사이를 90 으로 넓힌다 */
    height: 1120px !important;
    height: min(1120px, calc(100% - 760px)) !important;
}
/* 설정에서 연 공지: 딤을 설정 화면(z55) 위로 올린다 (출석 보상과 같은 방식) */
html.h5p.h5p_gjset #h5p_dim
{
    z-index: 57;
}

/* 확인 버튼(170x83): 하단 중앙 */
html.h5p #GG_btn1,
html.h5p #Img_GG_btn_focus
{
    left: 412.5px !important;
    top: auto !important;
    bottom: 225px !important;
}
/* 확인 버튼은 카드 바로 아래(카드 아래 끝 + 50) - 화면이 짧으면 원래 자리(아래에서 225)보다 내려가지 않는다 */
html.h5p #GG_btn1,
html.h5p #Img_GG_btn_focus
{
    /* 2026-10-15 CEO 지시로 버튼을 조금 키운 만큼(11) 아래 여백을 지킨다 (308 -> 319) */
    top: min(calc(45% + 650px), calc(100% - 319px)) !important;
    bottom: auto !important;
}

/* 공지와 확인 버튼 사이의 쪽 번호 '1 / 2' (2026-10-15 CEO 지시).
   글은 h5_gongji.js 의 S_GONGJI_H5.update_page 가 넣는다.
   2026-10-19 CEO 지적: 그림 아래끝(45% + 560)보다 위에 있어 그림에 겹쳤다 -
   그림 아래끝에서 12 아래, 버튼 윗변(45% + 650)에서 24 위에 둔다 */
html.h5p #GGP_page
{
    position: absolute;
    left: 0;
    width: 100%;
    top: min(calc(45% + 572px), calc(100% - 395px));
    height: 54px;
    line-height: 54px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #ffe9a8;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
    z-index: 6;
    pointer-events: none;
}
/* 2026-10-09 CEO 지시: 확인 버튼을 게임 결과 '계속 연습'(.h5rp_btn_green, 318x85)과 같은 초록 라운드 버튼으로.
   원본이 넣는 버튼 그림(bt_select.png)·글자 크기·포커스 그림은 덮는다 */
html.h5p #GG_btn1
{
    /* 2026-10-15 CEO 지시: 조금 더 크게 (318x85 -> 360x96) */
    left: 360px !important;
    width: 360px !important;
    height: 96px !important;
    line-height: 88px !important;
    box-sizing: border-box !important;
    border-radius: 48px !important;
    border: 4px solid #2f8a28 !important;
    background: -webkit-linear-gradient(top, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%) !important;
    background: linear-gradient(to bottom, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%) !important;
    font-size: 54px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 0 #2a7a22, 2px 0 0 #2a7a22, -2px 0 0 #2a7a22, 0 -2px 0 #2a7a22, -1.414px -1.414px 0 #2a7a22, -1.414px 1.414px 0 #2a7a22, 1.414px -1.414px 0 #2a7a22, 1.414px 1.414px 0 #2a7a22;
    overflow: hidden !important;
    cursor: pointer;
}
/* 버튼 왼쪽 위 하이라이트 - 게임 결과 버튼과 같다 */
html.h5p #GG_btn1::before
{
    content: '';
    position: absolute;
    left: 24px;
    top: 10px;
    width: 30px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}
html.h5p #GG_btn1:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}
html.h5p #Img_GG_btn_focus
{
    display: none !important;
}

/* 받은 보상 공지의 '받았음' 도장 (자리·크기는 h5_gongji.js 가 공지 그림에 맞춰 넣는다) */
html.h5p #GGP_stamp
{
    position: absolute;
    z-index: 5;
    pointer-events: none;
}
/* 방금 받았을 때: 크게 떨어지며 쾅 찍힌다 */
html.h5p #GGP_stamp.ggp_stamp_pop
{
    -webkit-animation: ggp_stamp_pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
    animation: ggp_stamp_pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
@-webkit-keyframes ggp_stamp_pop
{
    0%   { opacity: 0; -webkit-transform: scale(2.4); }
    60%  { opacity: 1; -webkit-transform: scale(0.92); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes ggp_stamp_pop
{
    0%   { opacity: 0; transform: scale(2.4); }
    60%  { opacity: 1; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}


/* ============ 일일손실한도 (S_DATLOSSLIMIT, 기타>일일손실한도) ============ */
/* 2026-09-26 CEO 전달 시안으로 전면 교체. 카드 410x426 을 2줄 x 3칸으로 놓고,
   위에 안내문 띄(904x131)와 현재 설정 띄(600x107)를 둔다.
   그림 갈아끼우기와 엽전 연출은 javascript/S_losslimit_portrait.js 가 한다 */

/* 이 화면의 상자는 크기가 없어(안이 전부 절대위치) 아래기준(bottom)으로 놓는 이전 버튼이 화면 밖으로 나가 있었다.
   캔버스 한 판 크기로 맞춰 이전 버튼·버전 글자가 제자리에 오게 한다 (2026-09-26) */
html.h5p #S_DATLOSSLIMIT_div
{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1080px !important;
    height: 2340px !important;
}

html.h5p #Img_DLT_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_DLT_background2 { display: none !important; }
html.h5p #Img_DLT_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* ---- 안내문 띄 (ⓘ 표시는 그림에 들어 있다) ---- */
html.h5p #Txt_DLT_title
{
    left: 88px !important;
    top: 396px !important;	/* 2026-10-13 CEO 지시: 타이틀과 같이 30 내림 (366 -> 396) */
    width: 904px !important;
    height: 131px !important;
    padding: 0 100px !important;
    box-sizing: border-box !important;
    background: url("../image/20_losslimit/h5p/st_warningbg.png") no-repeat 0 0 !important;
    background-size: 904px 131px !important;
    color: #ffffff !important;
    font-size: 36px !important;
    line-height: 44px !important;
    text-align: center !important;
    word-break: keep-all !important;
    display: -webkit-box !important;
    display: flex !important;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    justify-content: center !important;
    align-items: center !important;
}

/* ---- 현재 설정 띄 (빨간 알약은 그림에 들어 있다) ---- */
html.h5p #h5p_dlt_now
{
    position: absolute;
    left: 240px;
    top: 608px;	/* 2026-10-13 CEO 지시: 타이틀과 같이 30 내림 (578 -> 608) */
    width: 600px;
    height: 107px;
    background: url("../image/20_losslimit/h5p/st_nowbg.png") no-repeat 0 0;
    background-size: 600px 107px;
}
html.h5p #h5p_dlt_now_txt
{
    position: absolute;
    left: 15px;
    top: 12px;
    width: 271px;
    height: 83px;
    line-height: 83px;
    text-align: center;
    color: #ffffff;
    font-size: 40px;
}
html.h5p #h5p_dlt_now_val
{
    position: absolute;
    left: 290px;
    top: 12px;
    width: 295px;
    height: 83px;
    line-height: 83px;
    text-align: center;
    color: #ffffff;
    font-size: 52px;
}

/* ---- 카드 여섯 장 ---- */
/* 카드 상자: 화면 좌표를 그대로 쓰고(끌어도 움직이지 않는다) 카드마다 자리를 지정한다 */
html.h5p #S_DATLOSSLIMIT_card
{
    left: 0 !important;
    top: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
}
html.h5p #S_DATLOSSLIMIT_card > div[id^="DLT_card_"]
{
    width: 410px !important;
    height: 426px !important;
    background: url("../image/20_losslimit/h5p/st_mlimitbt.png") no-repeat 0 0 !important;
    background-size: 410px 426px !important;
    -webkit-transform: none !important;
    transform: none !important;
}
html.h5p #S_DATLOSSLIMIT_card > div[id^="DLT_card_"].h5p_dlt_on
{
    background-image: url("../image/20_losslimit/h5p/st_mlimitbt_selected.png") !important;
}
html.h5p #DLT_card_1 { left: 117px !important; top: 746px !important; }
html.h5p #DLT_card_2 { left: 578px !important; top: 746px !important; }
html.h5p #DLT_card_3 { left: 117px !important; top: 1226px !important; }
html.h5p #DLT_card_4 { left: 578px !important; top: 1226px !important; }
html.h5p #DLT_card_5 { left: 117px !important; top: 1713px !important; }
html.h5p #DLT_card_6 { left: 578px !important; top: 1713px !important; }

/* 카드 안 캐릭터 그림 */
html.h5p .h5p_dlt_icon
{
    position: absolute;
    left: 0;
    top: 0;
    width: 410px;
    height: 313px;
}

/* 금액 글자는 카드 아래 띄에 */
html.h5p #S_DATLOSSLIMIT_card > div > div[id^="Txt_1_DLT_card_"]
{
    left: 0 !important;
    top: 313px !important;
    width: 410px !important;
    height: 113px !important;
    line-height: 106px !important;
    font-size: 46px !important;
    color: #3c1310 !important;
    text-align: center !important;
}

/* 선택 표시(체크)는 카드 오른쪽 위로 조금 나온다 */
html.h5p #S_DATLOSSLIMIT_card > div > img[id^="Img_DLT_card_select_focus_"]
{
    left: 315px !important;
    top: -10px !important;
    width: 105px !important;
    height: 105px !important;
}

/* 리모컨용 테두리 포커스는 손가락 조작에서는 쓰지 않는다 */
html.h5p #S_DATLOSSLIMIT_card > div > div[id^="Img_DLT_card_focus_"]
{
    display: none !important;
}

/* ---- 고를 때 카드 뒤로 퍼지는 엽전 ---- */
html.h5p #h5p_dlt_coins
{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
html.h5p .h5p_dlt_coin_one
{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    /* 2026-09-26 CEO 지시: 너무 느려서 900 -> 500ms */
    -webkit-animation: h5p_dlt_coin_fly 500ms ease-out 1 both;
    animation: h5p_dlt_coin_fly 500ms ease-out 1 both;
}
@-webkit-keyframes h5p_dlt_coin_fly
{
    0%   { opacity: 0; -webkit-transform: translate(0, 0) rotate(0deg) scale(0.3); }
    20%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate(var(--h5p_dlt_x), var(--h5p_dlt_y)) rotate(var(--h5p_dlt_spin)) scale(1); }
}
@keyframes h5p_dlt_coin_fly
{
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--h5p_dlt_x), var(--h5p_dlt_y)) rotate(var(--h5p_dlt_spin)) scale(1); }
}

html.h5p #DLT_back
{
    left: 402px !important;
    top: auto !important;
    bottom: 52.5px !important;
}

/* 오늘 손실금액 줄은 새 시안에 자리가 없어 넣지 않는다 (2026-09-26 CEO 시안) */
html.h5p #DLT_limit { display: none !important; }
html.h5p #DLT_ver
{
    left: 0 !important;
    width: 100% !important;
    top: auto !important;
    bottom: 6px !important;
    text-align: center !important;
}

/* ============ 캐릭터 선택 (S_SELECTCHAR, 기타>캐릭터선택) ============ */
/* 카드 개수는 h5_portrait.js 에서 3장->2장으로 보정 (2장 = 682px, 원본 크기 그대로) */

html.h5p #Img_SC_background
{
    width: auto !important;
    height: 100% !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
}
html.h5p #Img_SC_background2 { display: none !important; }
html.h5p #Img_SC_cloud2
{
    left: 50% !important;
    top: auto !important;
    bottom: 225px !important;
    transform: translateX(-50%) !important;
}

/* 원본 타이틀 이미지는 감추고 글자로 새로 그린다 */
html.h5p #SC_title_bg { display: none !important; }

/* 루비 필요 안내 문구: 하단(세이프에어리어 위) 전체폭 중앙 */
html.h5p #SC_title
{
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    bottom: 270px !important;
    bottom: -webkit-calc(270px - var(--h5p_sub_drop, 0px)) !important;
    bottom: calc(270px - var(--h5p_sub_drop, 0px)) !important;
    text-align: center !important;
    font-size: 36px !important;	/* 원본 30 -> 36 (2026-09-22 CEO 지시) */
    line-height: 1.4 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.75) !important;
}

/* 캐릭터 변경 안내 박스: 세로에서는 공간이 없어 숨김 */
html.h5p #SC_help_bg { display: none !important; }
/* 원본 아래 안내 글("변경 시 루비 2개…"): 새 화면은 기간 칸과 확인 팝업에서 알려 준다 (2026-09-28 CEO 새 디자인) */
html.h5p #SC_title { display: none !important; }

/* 캐릭터 변경 (S_selectchar_portrait.js, 2026-09-17 CEO 지시):
   위 = 고른 캐릭터 큰 그림(오른쪽) + 설명판(왼쪽), 아래 = 전체 캐릭터 썸네일 줄(한 화면 5칸, 가로 스크롤).
   원본 카드 줄은 숨기고 focus 만 함께 쓴다. 기준 높이 2340 의 세로 중앙(1170) 기준으로 배치 */
html.h5p #SCP_scale,
html.h5p #s_SELECTCHAR_card { display: none !important; }

html.h5p #SCP_wrap
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    pointer-events: none;   /* 화면 전체를 덮으므로 빈 곳 터치는 아래 이전 버튼(#SC_back)으로 넘긴다 */
}
html.h5p #SCP_board,
html.h5p #SCP_strip { pointer-events: auto; }

/* 큰 그림: 오른쪽 */
html.h5p #SCP_art
{
    position: absolute;
    /* 2026-09-29 CEO 지시: 왼쪽 설명판보다 캐릭터가 작아 틀을 넓혔다 (640 -> 704 -> 770).
       그림은 틀 안에 contain 으로 들어가 폭이 모자라 폭을 넓혀야 키가 커진다.
       오른쪽 끝(1080)은 그대로 두고 왼쪽으로 넓힌다.
       높이 1330 -> 1195 는 줄인 것이 아니라, 키 큰 캐릭터(공주병소녀 등)의 머리가
       위 타이틀(331~481)을 치지 않게 막는 값이다. 발끝은 1726 -> 1676 으로 50 올렸다 */
    /* 2026-09-29 CEO 지시: 오른쪽이 아니라 화면 정가운데로 (틀 770 -> 왼 155).
       아랫변은 가로 설명 박스(윗변 1438) 뒤로 들어가 가려진다 */
    left: 155px;
    top: 481px;
    top: -webkit-calc(var(--h5p_safe_t, 96px) + 385px);
    top: calc(var(--h5p_safe_t, 96px) + 385px);
    width: 770px;
    height: 1080px;
    z-index: 1;
    pointer-events: none;
}
html.h5p .SCP_art_in
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: scp_art_in 0.28s ease-out both;
    animation: scp_art_in 0.28s ease-out both;
}
/* 그림마다 크기/비율이 달라 틀 안에 맞추고 발끝을 아래에 붙인다 */
html.h5p .SCP_full
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;		/* 틀(#SCP_art) 크기를 그대로 따른다 (2026-09-29) */
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
    -webkit-filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}
/* 스파인 캐릭터 캔버스 (h5_portrait_spine.js, 2026-09-23 CEO 지시): PNG 큰 그림과 같은 자리에 발끝을 아래에 붙인다. 크기는 JS 가 넣는다 */
/* 옆으로 미는 양(--scp_spine_dx, 신선조)과 아래로 미는 양(--scp_spine_dy)은 h5_portrait_spine.js 가 넣는다.
   dy 는 그림이 틀(1080)보다 클 때 넘치는 만큼이라 머리가 위 타이틀을 가리지 않는다 (2026-09-29 CEO) */
/* #SCP_poster = 스파인을 받는 동안 먼저 보여 주는 정지 그림 (2026-09-30). 캔버스와 같은 규칙으로 같은 자리에 놓인다 */
html.h5p #SCP_spine,
html.h5p #SCP_poster
{
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-webkit-calc(-50% + var(--scp_spine_dx, 0px)), var(--scp_spine_dy, 0px));
    transform: translate(calc(-50% + var(--scp_spine_dx, 0px)), var(--scp_spine_dy, 0px));
    pointer-events: none;
}
/* 기본 캐릭터: 춤추는 상반신 시트(6x3 칸)를 틀 아래에 붙여 보인다 (2026-09-21) */
html.h5p .SCP_dance
{
    position: absolute;
    left: 0;
    bottom: 140px;		/* 2026-09-29 CEO 지시: 기본 캐릭터를 좀더 위로 */
    width: 770px;		/* 틀과 같은 폭 (2026-09-29) */
    height: 770px;
    background-repeat: no-repeat;
    background-size: 600% 300%;
    /* 프레임 아래/양옆에서 몸통이 잘려 보여 가장자리를 흐리게 지운다 (두 그라데이션이 겹치는 곳만 남긴다) */
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%), -webkit-linear-gradient(top, #000 78%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, #000 78%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, #000 78%, rgba(0,0,0,0) 100%);
    mask-composite: intersect;
    -webkit-filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}
/* 전신 그림이 아직 없는 캐릭터: 얼굴을 둥근 틀에 크게 */
html.h5p .SCP_round
{
    position: absolute;
    left: 121px;		/* 틀 770 기준 가운데 (2026-09-29) */
    top: 250px;
    width: 528px;
    height: 528px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 12px solid #d9a441;
    background: #f3e6c8;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    text-align: center;
}
html.h5p .SCP_round img
{
    width: 100%;
    height: 100%;
}
html.h5p .SCP_round .SCP_emoji
{
    font-size: 308px;
    line-height: 458px;
}
@-webkit-keyframes scp_art_in
{
    from { opacity: 0; -webkit-transform: translateX(40px); }
    to   { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes scp_art_in
{
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============ 설명판·썸네일 줄 (2026-09-28 CEO 새 디자인) ============
   받은 시안이 1080x2340 이라 시안에서 잰 좌표를 그대로 쓴다.
   자산은 image/12_selectchar/h5p/ 에 둔다 (예전 가로용 같은 이름 파일과 크기가 달라 따로 둔다).
   타이틀/정보판은 세이프 상단(--h5p_safe_t) 기준, 썸네일 줄은 밑바닥 기준으로 잡아 기기마다 흔들리지 않게 한다 */

/* 공통 '이전' 버튼(#SC_back)이 뿌옇게 보였다 (2026-10-09 CEO 지적).
   버튼이 든 #SC_btn_area 가 #SCP_wrap 보다 DOM 앞에 있어, 그 안의 풍경 띠(#SCP_chbg, 1699~2340)가
   버튼(2167~2300) 위에 깔렸다. 버튼만 위로 올린다 (자리는 그대로) */
html.h5p #S_SELECTCHAR_div #SC_back { z-index: 10; }

/* 밑에 깔리는 풍경 띠 (1080x641, 화면 밑바닥에 붙인다) */
html.h5p #SCP_chbg
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1080px;
    height: 641px;
    background: url(../image/12_selectchar/h5p/st_ch_bg.png) no-repeat 50% 100%;
    background-size: 100% 100%;
    pointer-events: none;
}

/* 설명판: 2026-09-29 CEO 지시로 왼쪽 세로 판에서 '썸네일 줄 바로 위 가로 흰 박스'로 바꿨다.
   왼쪽 판이 캐릭터를 가려 답답하다는 지적. 받은 판 그림(644x1043)은 세로용이라 쓰지 않고
   흰 상자를 직접 그린다 (그림이 새로 오면 background 만 바꾸면 된다).
   자리: 왼 40 / 폭 1000 / 위 1398 ~ 아래 1728 (썸네일 카드 윗변 1798 위 70 - 고른 칸의 체크 표시가 1742 라 겹치지 않게) */
/* 2026-10-02 CEO 지시: 판 그림(ac_chinfobox.png 1035x524)이 와서 직접 그리던 흰 상자를 걷었다.
   그림 안에 베이지 보너스 띠와 빨간 B 뱃지, 오른쪽 매듭 술까지 들어 있다.
   자리는 시안대로 왼 26 / 위 1586 (아래 2110 - 공통 '이전' 버튼 2167 위) */
html.h5p #SCP_board
{
    position: absolute;
    left: 26px;
    /* 2026-10-09 CEO 지시: 썸네일 줄과 함께 30 내린다 (1586 -> 1616, 아래 2140 / 공통 '이전' 2167 위) */
    top: 1616px;
    width: 1035px;
    height: 524px;
    box-sizing: border-box;
    background: url(../image/12_selectchar/h5p/ac_chinfobox.png) no-repeat 0 0;
    background-size: 1035px 524px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 2;
}

/* 둥근 얼굴 */
html.h5p #SCP_face
{
    position: absolute;
    left: 42px;
    top: 51px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 4px solid #e2c98d;
    box-sizing: border-box;
}
html.h5p #SCP_face img
{
    width: 100%;
    height: 100%;
}

/* 이름 */
html.h5p #SCP_name
{
    position: absolute;
    left: 194px;
    top: 46px;
    width: 500px;
    height: 80px;
    line-height: 80px;
    color: #3a2a1a;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 한 줄 소개 */
html.h5p #SCP_intro
{
    position: absolute;
    left: 200px;
    /* 2026-10-09 CEO 지시: 이름과 소개 사이가 너무 벌어져 14 올린다 (130 -> 116).
       이름 글자 아래끝 117 / 소개 글자 위끝 120 이라 눈에 보이는 틈이 약 19 가 된다 */
    top: 116px;
    width: 500px;
    height: 50px;
    line-height: 50px;
    color: #6b6055;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 긴 설명은 가로 박스에 넣을 자리가 없다 (문구도 아직 없다) */
html.h5p #SCP_desc
{
    display: none;
}

/* 안내 묶음 두 칸 (보너스 / 기간) */
html.h5p .SCP_info
{
    position: absolute;
    border-radius: 24px;
}
/* 베이지 띠와 B 뱃지는 판 그림에 그려져 있다 - 글자만 얹는다 (2026-10-02 CEO 지시) */
html.h5p #SCP_bonus
{
    left: 47px;
    top: 204px;
    width: 924px;
    height: 142px;
    background: none;
}
/* 기간은 상자 없이 오른쪽 위에 빨간 글자 한 줄 */
html.h5p #SCP_term
{
    left: auto;
    right: 71px;
    top: 58px;
    width: 420px;
    height: 56px;
    background: none;
}
html.h5p .SCP_info_icon
{
    position: absolute;
    left: 14px;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: 64px 64px;
}
/* 보너스 B 뱃지는 판 그림에 들어 있고, 기간 칸은 아이콘 없이 글자만 쓴다 (2026-10-02 CEO 지시) */
html.h5p #SCP_bonus .SCP_info_icon,
html.h5p #SCP_term .SCP_info_icon,
html.h5p #SCP_term .SCP_info_lbl
{
    display: none;
}
html.h5p .SCP_info_lbl,
html.h5p .SCP_info_1,
html.h5p .SCP_info_2
{
    position: absolute;
    left: 88px;
    right: 14px;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.h5p .SCP_info_lbl
{
    height: 36px;
    line-height: 36px;
    color: #8b8178;
    font-size: 32px;
    font-weight: 600;
}
html.h5p .SCP_info_1
{
    height: 40px;
    line-height: 40px;
    color: #2f2418;
    font-size: 34px;
    font-weight: 600;
}
html.h5p .SCP_info_2
{
    height: 40px;
    line-height: 40px;
    color: #2f2418;
    font-size: 34px;
    font-weight: 800;
}
/* 보너스: 윗줄은 '캐릭터 보너스', 아랫줄은 종류와 값이 한 줄로 이어 붙는다 */
html.h5p #SCP_bonus .SCP_info_lbl { left: 112px; top: 21px; font-size: 36px; }
html.h5p .SCP_info_line
{
    position: absolute;
    left: 112px;
    top: 66px;
    right: 20px;
    height: 56px;
    line-height: 56px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.h5p .SCP_info_line .SCP_info_1,
html.h5p .SCP_info_line .SCP_info_2
{
    position: static;
    display: inline;
    height: auto;
    line-height: inherit;
    font-size: 44px;
}
html.h5p .SCP_info_line .SCP_info_1 { color: #4a4038; font-weight: 600; margin-right: 14px; }
html.h5p .SCP_info_line .SCP_info_2 { color: #2f2418; font-weight: 800; }
/* 기간: 오른쪽 위 빨간 글자 한 줄 */
html.h5p #SCP_term .SCP_info_2
{
    left: 0;
    right: 0;
    top: 0;
    height: 56px;
    line-height: 56px;
    font-size: 42px;
    font-weight: 700;
    text-align: right;
    color: #d03a33;
}
html.h5p #SCP_term.SCP_term_note .SCP_info_2
{
    font-size: 42px;
    font-weight: 700;
    color: #d03a33;
}
html.h5p .SCP_info_2 b { color: #d03a33; }

/* 변경 버튼: 오른쪽 아래 (그림 547x140 비율 그대로 360x92) */
html.h5p #SCP_btn
{
    position: absolute;
    left: 277px;
    top: 371px;
    width: 475px;
    height: 119px;
    line-height: 112px;
    text-align: center;
    box-sizing: border-box;
    background: url(../image/12_selectchar/h5p/st_chchange_bt.png) no-repeat 0 0;
    background-size: 475px 119px;
    color: #ffffff;
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 3px 5px rgba(90, 20, 10, 0.55);
    cursor: pointer;
}
/* 사용 중: 회색 버튼 (그림에 체크가 그려져 있어 글자를 오른쪽으로 밀어 준다) */
html.h5p #SCP_btn.SCP_btn_off
{
    background-image: url(../image/12_selectchar/h5p/st_chchange_bt2.png?v=2);
    color: #eef2ea;
    text-shadow: 0 3px 5px rgba(40, 60, 40, 0.5);
    padding-left: 52px;
    cursor: default;
}
html.h5p #SCP_btn.SCP_press
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

/* ============ 썸네일 줄 ============
   시안: 카드 233x333 을 4칸, 칸 간격 234, 줄 왼쪽 72, 카드 위 1674 (밑 2007).
   캔버스 높이 2340 기준 밑에서 333 떨어진 자리라 밑바닥 기준으로 잡는다 */
html.h5p #SCP_strip
{
    position: absolute;
    left: 0;
    /* 2026-09-29 CEO 지시로 100 더 내렸다 (카드 1698~2031 -> 1798~2131).
       아래 공통 '이전' 버튼은 2167~2300 이라 겹치지 않는다 */
    /* 2026-09-29 CEO 지시: 정보 박스와 자리를 맞바꿔 위로 올렸다 (카드 1798~2131 -> 1398~1731) */
    /* 2026-10-02 CEO 지시: 설명판이 330 -> 524 로 커지며 윗변이 1586 으로 올라와,
       카드 줄도 그만큼(232) 위로 올린다 (카드 1404~1737 -> 1172~1505) */
    /* 2026-10-08 CEO 지적(갤럭시 Z Flip6): 아래 기준이면 2340 보다 긴 화면에서 줄만 내려가 위 기준 설명판(1586~)을 덮었다.
       설명판·큰 그림과 같이 위 기준으로 고정한다 (2340 화면에서 예전과 같은 1172) */
    /* 2026-10-09 CEO 지시: 썸네일 줄과 정보판을 나란히 30 더 내린다 (1172 -> 1202) */
    /* 2026-10-09 CEO 지시(2차): 썸네일과 자리 띠만 20 더 내린다 (1202 -> 1222).
       자리 띠(#SCP_bar)는 이 줄 안에 있어 같이 내려간다. 정보판(1616)은 그대로 - 띠 아래끝 1588 과 28 떨어진다 */
    top: 1222px;
    width: 1080px;
    height: 333px;
    z-index: 3;
}
/* 2026-09-29 CEO 지적: 고른 칸이 커질 때 위·옆이 잘렸다.
   이 칸은 가로로 굴리는 상자라 넘치는 부분을 무조건 잘라 낸다(overflow-y 를 visible 로 못 둔다).
   그래서 상자 자체를 커진 카드가 들어갈 만큼 키운다 - 위로 87, 양옆으로 14 (줄 안쪽 여백으로).
   카드가 놓이는 자리(왼쪽 72, 보이는 폭 936 = 4칸)는 그대로다 */
/* 2026-10-09 CEO 지시: 다음 캐릭터가 옆에 이어 보이게 상자를 화면 폭(1080)으로 넓히고,
   칸이 놓이는 자리(왼쪽 72)는 줄 안쪽 여백으로 지킨다. 양 끝 72 는 아래 mask 로 서서히 지운다 */
html.h5p #SCP_view
{
    position: absolute;
    left: 0;
    top: -87px;
    width: 1080px;
    /* 2026-10-01 CEO 지적: 고른 칸의 노란 빛이 칸 아래에서 잘렸다.
       상자를 30 더 내려 빛이 번질 자리를 둔다 (칸이 놓이는 자리는 그대로) */
    height: 450px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 2026-10-01 CEO 지적: 화살표로 넘기면 앞 쪽 칸이 양 끝에 조금 남아 보였다.
       칸은 234 간격인데 그림은 4~229 자리라 칸 사이에 9 쯤 틈이 있다.
       그 틈에서 끊기게 양 끝을 흐려 지운다 - 옆 칸은 안 보이고 노란 빛은 자연스럽게 사라진다 */
    /* 2026-10-09 CEO 지시: 양 끝을 투명 그라데이션으로 지워, 옆에 이어지는 캐릭터가 자연스럽게 사라지게 한다.
       칸이 놓이는 자리(72~1008)는 그대로 보이고 그 바깥 72 씩만 흐려진다 */
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 72px, rgba(0,0,0,1) 1008px, rgba(0,0,0,0) 1080px);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 72px, rgba(0,0,0,1) 1008px, rgba(0,0,0,0) 1080px);
}
html.h5p #SCP_view::-webkit-scrollbar { display: none; }
html.h5p #SCP_row
{
    position: relative;
    /* 위로 87 만큼은 커진 칸이 올라올 자리다 - 칸 자체는 여전히 333 높이로 밑에 놓인다 */
    height: 333px;
    /* 옆 여백은 S_selectchar_portrait.js SCP_ROW_PAD 와 같은 값.
       아래 30 은 노란 빛이 번질 자리다 - 칸은 여전히 같은 높이에 놓인다.
       2026-10-09: 상자를 화면 폭으로 넓히면서 14 -> 72 (칸 왼끝은 그대로 72) */
    padding: 87px 72px 30px;
    white-space: nowrap;
    font-size: 0;
}
html.h5p .SCP_thumb
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;		/* 줄 상자가 커졌으므로 카드는 밑에 붙인다 (2026-09-29) */
    width: 234px;
    height: 333px;
    cursor: pointer;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0.93);
    transform: scale(0.93);
    -webkit-transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
}
/* 고른 칸은 조금 크게 (밑선은 그대로).
   2026-09-29 CEO 지시: 원본 칸 크기의 110% 까지만 (예전 1.13) */
/* 고른 칸 둘레의 노란 빛 (2026-09-29 CEO 지적: 네모 그림자는 칸 그림 모양과 안 맞는다).
   칸 그림이 기울어진 모양이라 그림 윤곽을 그대로 따라가는 drop-shadow 로 그린다 */
html.h5p .SCP_thumb.SCP_sel .SCP_card
{
    -webkit-filter: drop-shadow(0 0 3px #ffd453) drop-shadow(0 0 3px #ffd453) drop-shadow(0 0 3px #ffd453) drop-shadow(0 0 16px rgba(255, 208, 66, 0.8));
    filter: drop-shadow(0 0 3px #ffd453) drop-shadow(0 0 3px #ffd453) drop-shadow(0 0 3px #ffd453) drop-shadow(0 0 16px rgba(255, 208, 66, 0.8));
}
html.h5p .SCP_thumb.SCP_sel
{
    z-index: 2;
    /* 2026-09-29 CEO 지적: 고른 칸이 여전히 너무 커서 훨씬 줄였다 (1.13 -> 1.10 -> 1.02) */
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}
/* 마지막 칸: 브라우저가 굴림 폭을 잴 때 줄의 오른쪽 여백을 빼먹어서, 칸에 직접 여백을 붙인다 */
html.h5p #SCP_row > .SCP_thumb:last-child
{
    margin-right: 72px;
}
html.h5p .SCP_thumb.SCP_press
{
    -webkit-transform: scale(0.88);
    transform: scale(0.88);
}
html.h5p .SCP_thumb.SCP_sel.SCP_press
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}
html.h5p .SCP_card
{
    position: absolute;
    left: 0;
    top: 0;
    width: 234px;
    height: 333px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 233px 333px;
}
/* 이름: 카드 아래쪽에 흰 글씨 + 검은 테두리 */
/* 2026-09-29 CEO 지시: 썸네일 칸의 캐릭터 이름 글자는 지운다 (누르면 정보 박스에 나온다) */
html.h5p .SCP_tname
{
    display: none !important;
}
/* 사용 중 표시: 카드 오른쪽 위 모서리에 빨간 동그라미 체크 */
html.h5p .SCP_use
{
    display: none;
    position: absolute;
    /* 2026-09-29 CEO 지적: 칸에서 너무 위로 떨어져 있어 칸 오른쪽 위 모서리에 걸치게 내렸다 (-48 -> -20) */
    left: 172px;
    top: -20px;
    width: 67px;
    height: 67px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 5px solid #ffffff;
    background: #e8352b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 3;
}
/* 체크 표: 기울인 두 줄로 그린다 */
html.h5p .SCP_use::after
{
    content: "";
    position: absolute;
    left: 17px;
    top: 10px;
    width: 14px;
    height: 27px;
    border-right: 7px solid #ffffff;
    border-bottom: 7px solid #ffffff;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
html.h5p .SCP_thumb.SCP_mine .SCP_use { display: block; }
html.h5p .SCP_thumb.SCP_locked .SCP_card { opacity: 0.55; }

/* 줄 좌우 화살표: 2026-10-09 CEO 지시로 없앴다 (드래그로만 넘긴다).
   S_selectchar_portrait.js 가 더 이상 만들지 않지만, 옛 화면이 남아 있어도 안 보이게 해 둔다 */
html.h5p .SCP_arrow { display: none !important; }
html.h5p .SCP_arrow
{
    position: absolute;
    top: 106px;	/* 칸 120 기준으로 가운데는 그대로 (166) */
    width: 120px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 48px 75px;	/* 2026-09-29 CEO 지시: 화살표를 1.5배로 키운다 (32x50 -> 48x75) */
    cursor: pointer;
}
html.h5p #SCP_prev
{
    left: -18px;
    background-image: url(../image/12_selectchar/h5p/po_crossleft.png);
}
html.h5p #SCP_next
{
    right: -18px;
    background-image: url(../image/12_selectchar/h5p/po_crossright.png);
}
html.h5p .SCP_arrow.SCP_dim { opacity: 0.25; }
html.h5p .SCP_arrow.SCP_press { opacity: 0.55; }

/* 몇 번째 칸을 보고 있는지 알려 주는 짧은 띠 (시안 y 2028) */
html.h5p #SCP_bar
{
    position: absolute;
    left: 400px;
    top: 354px;
    width: 280px;
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.35);
}
html.h5p #SCP_bar_in
{
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 12px;
    border-radius: 6px;
    background: #ffffff;
    -webkit-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

html.h5p #SC_back
{
    left: 36px !important;
    top: 120px !important;
    bottom: auto !important;
}

/* ============ 캐릭터 변경 확인 팝업 (2026-09-28 CEO 새 시안) ============
   공용 예/아니오 팝업을 그대로 쓰고, <html> 에 h5p_pyn_char 가 붙은 동안에만 새 시안 자리로 다시 잡는다.
   판 그림(크림색 9조각 + 금테)은 지금 쓰던 것이 시안과 같아 그대로 두고, 안쪽 칸만 옮긴다.
   시안 자리: 판 x60~1020, y655~1685 (2026-09-29 CEO 지시로 세로 정가운데) (1080x2340 기준) */
html.h5p.h5p_pyn_char #PYN_board
{
    left: 60px !important;
    top: 655px !important;
    top: -webkit-calc(50% - 515px) !important;
    top: calc(50% - 515px) !important;
    margin: 0 !important;
    width: 960px !important;
    height: 1030px !important;
}
/* 글자 뒤에 깔리던 띠는 새 시안에 없다 */
html.h5p.h5p_pyn_char #Img_PYN_txtbox
{
    display: none !important;
}
/* 이 팝업 전용 칸(캐릭터 그림·이름·보너스·구분선)은 한 번 만들면 판에 그대로 남는다.
   같은 판(#PYN_board)을 상점 환전·룰렛 팝업도 돌려 쓰는데, 거기서는 자리 규칙이 없어
   판 왼쪽 위 구석에 글자와 그림이 삐져나왔다 (2026-10-01 CEO 지적).
   캐릭터 변경 팝업일 때만 보이게 한다 */
html.h5p #PYNC_bg,
html.h5p #PYNC_art,
html.h5p #PYNC_line,
html.h5p #PYNC_name,
html.h5p #PYNC_b1,
html.h5p #PYNC_b2
{
    display: none;
}
html.h5p.h5p_pyn_char #PYNC_bg,
html.h5p.h5p_pyn_char #PYNC_art,
html.h5p.h5p_pyn_char #PYNC_line,
html.h5p.h5p_pyn_char #PYNC_name,
html.h5p.h5p_pyn_char #PYNC_b1,
html.h5p.h5p_pyn_char #PYNC_b2
{
    display: block;
}
/* 산 그림(949x487)은 판 '위쪽' 에 깔린다 - 아랫변 570 이 위아래를 가르는 선이다 (2026-10-02 CEO 지적).
   그림 윗부분은 투명해서 판의 둥근 모서리를 가리지 않는다 */
html.h5p.h5p_pyn_char #PYNC_bg
{
    position: absolute;
    left: 16px;
    top: 83px;
    width: 928px;
    height: 487px;
    border-radius: 0;
    background: url(../image/12_selectchar/h5p/st_chchange_popup_bg.png) no-repeat 50% 100%;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
/* 캐릭터 그림 자리 - 한 장짜리 큰 컷을 왼쪽에 크게 세우고, 산 그림 아랫변(570)에서 자른다.
   #PYN_Img_2 는 <img> 가 아니라 배경그림을 쓰는 <div> 라(S_popupyn.js) object-fit 이 듣지 않는다.
   그래서 background-size 로 폭을 맞추고 위를 기준으로 붙여, 머리부터 보이고 아래가 잘리게 한다 */
html.h5p.h5p_pyn_char #PYNC_art
{
    position: absolute;
    left: 16px;
    top: 36px;
    width: 464px;
    height: 534px;
    overflow: hidden;
    z-index: 1;
    /* 2026-10-10 CEO 지시: 오른끝이 칼로 자른 듯 끊겨 보인다 - 오른쪽 90 을 서서히 투명하게 지운다.
       오른쪽은 이름·보너스 글자 자리라 그림이 자연스럽게 사라지는 편이 낫다 (왼쪽은 판 테두리라 그대로) */
    -webkit-mask-image: -webkit-linear-gradient(left, #000 0, #000 374px, transparent 464px);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 374px, transparent 464px);
    mask-image: linear-gradient(to right, #000 0, #000 374px, transparent 464px);
}
/* 그림은 칸보다 크게 깔아 좌우·아래가 잘리게 둔다 - 그만큼 캐릭터가 커 보인다 (2026-10-02 CEO 지시) */
html.h5p.h5p_pyn_char #PYN_Img_2
{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 464px !important;
    height: 534px !important;
    background-repeat: no-repeat !important;
    /* 가로 자리는 S_selectchar_portrait.js 가 캐릭터마다 다시 잡는다 - 얼굴이 칸 한가운데(= 팝업 왼쪽 영역
       가운데)에 오게 민다 (2026-10-10 CEO 지시). 그래서 여기에는 !important 를 붙이지 않는다 */
    background-position: 0 0;
    /* 2026-10-09 CEO 지시로 캐릭터를 더 크게 (650 -> 730). S_selectchar_portrait.js 의 SCP_POP_ART_W 와 같은 값 */
    background-size: 730px auto;
}
/* 오른쪽: 이름과 보너스 두 줄 (시안 x500 왼쪽맞춤).
   2026-10-10 CEO 지시로 살짝만 더 오른쪽으로 (492 -> 520, 오른쪽 끝 924 는 그대로라 폭만 28 줄었다) */
html.h5p.h5p_pyn_char #PYNC_name,
html.h5p.h5p_pyn_char #PYNC_b1,
html.h5p.h5p_pyn_char #PYNC_b2
{
    position: absolute;
    left: 520px;
    width: 404px;
    color: #2f2418;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}
/* 2026-10-09 CEO 지시: 캐릭터 그림 옆 글자 세 줄을 40 위로 올린다 (290/415/473 -> 250/375/433) */
html.h5p.h5p_pyn_char #PYNC_name
{
    top: 250px;
    height: 80px;
    line-height: 80px;
    font-size: 62px;
    font-weight: 800;
}
html.h5p.h5p_pyn_char #PYNC_b1
{
    top: 375px;
    height: 54px;
    line-height: 54px;
    font-size: 38px;
    font-weight: 600;
    color: #6b6055;
}
html.h5p.h5p_pyn_char #PYNC_b2
{
    top: 433px;
    height: 62px;
    line-height: 62px;
    font-size: 46px;
    font-weight: 800;
    /* 2026-10-09 CEO 지시: 보너스 값('고 1회당 +2점')을 붉은 톤으로 - 이 화면 다른 강조와 같은 색 */
    color: #d03a33;
}
/* 위/아래를 가르는 옅은 줄 (시안 y985) */
html.h5p.h5p_pyn_char #PYNC_line
{
    position: absolute;
    left: 16px;
    top: 570px;
    width: 928px;
    height: 2px;
    background: rgba(120, 95, 60, 0.28);
    z-index: 2;
}
/* 안내 두 줄 (시안 y1025~1145) */
html.h5p.h5p_pyn_char #PYN_Txt_1
{
    left: 40px !important;
    top: 596px !important;
    width: 880px !important;
    height: 170px !important;
    line-height: 82px !important;
    text-align: center !important;
    color: #2f2418 !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    letter-spacing: -1px;
    z-index: 2;
}
html.h5p.h5p_pyn_char #PYN_Txt_1 b { color: #d03a33; }
/* 필요 루비 + 루비 막대 (시안 y1195~1268).
   2026-10-09 CEO 지적: 글자 왼쪽 여백(약 235)과 막대 오른쪽 여백(290)이 달랐다.
   자리를 숫자로 박으면 글꼴 폭에 따라 어긋나므로, S_selectchar_portrait.js 가 둘을 #SCPP_need 로 묶고
   여기서 판 가운데로 민다 (상점 환전 팝업과 같은 방법) */
html.h5p.h5p_pyn_char #SCPP_need
{
    position: absolute;
    left: 40px;
    top: 780px;
    width: 880px;
    height: 73px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 2;
}
html.h5p.h5p_pyn_char #PYN_Txt_2
{
    position: relative !important;	/* 자리는 묶음이 잡고, 아래 top 으로 살짝만 내린다 */
    left: auto !important;
    top: 5px !important;
    width: auto !important;
    height: 73px !important;
    line-height: 73px !important;
    margin-right: 36px;
    white-space: nowrap;
    text-align: left !important;
    color: #7a5b52 !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
html.h5p.h5p_pyn_char #SCPP_bar
{
    position: relative;
    width: 230px;
    height: 73px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
html.h5p.h5p_pyn_char #PYN_Img_1
{
    left: 0 !important;
    top: 0 !important;
    width: 230px !important;
    height: 73px !important;
    z-index: 2;
}
html.h5p.h5p_pyn_char #PYN_Txt_3
{
    left: 76px !important;
    /* 글자 상자는 막대 한가운데지만 숫자는 밑이 남는 글꼴 특성 때문에 위로 쏠려 보인다.
       숫자 잉크는 글자 상자 위에서 17~50 이라 한가운데(36.5)에 맞추려면 3 내린다 */
    top: 3px !important;
    width: 148px !important;
    height: 73px !important;
    line-height: 73px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    z-index: 3;
}
/* 버튼: 시안은 왼쪽이 취소(회색), 오른쪽이 변경(초록). 원본은 1=예 2=아니오 라 자리를 바꿔 준다.
   글자는 원본이 다시 쓸 수 있어 가짜 요소로 덮는다 */
/* 버튼은 상점·룰렛 팝업과 같은 팝업용 버튼 그림을 쓴다 (2026-10-02 CEO 지시) */
html.h5p.h5p_pyn_char #PYN_btn1,
html.h5p.h5p_pyn_char #PYN_btn2
{
    position: absolute !important;
    top: 878px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    z-index: 3;
}
/* 원본이 넣은 글자("예"/"아니오")는 크기를 0 으로 재워 지우고, 새 글자는 버튼 전체에 격자로 올린다 */
html.h5p.h5p_pyn_char #PYN_btn1::after,
html.h5p.h5p_pyn_char #PYN_btn2::after
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #ffffff;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -1px;
}
/* 2026-10-09 CEO 지적: 양 여백이 달랐다 (왼 111 / 오른 151).
   판 960 안에 버튼 337 둘과 사이 24 를 두면 양쪽이 131 로 같아진다 */
html.h5p.h5p_pyn_char #PYN_btn2
{
    left: 131px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
}
html.h5p.h5p_pyn_char #PYN_btn2::after
{
    content: "취소";
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
html.h5p.h5p_pyn_char #PYN_btn1
{
    left: 492px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
}
html.h5p.h5p_pyn_char #PYN_btn1::after
{
    content: "변경";
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a;
}
/* 리모컨 시절 노란 테두리 그림은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5p.h5p_pyn_char #PYN_btn_focus
{
    display: none !important;
}

/* ============ 일일 손실 한도 변경 확인 팝업 (2026-10-09 CEO 지시) ============
   공용 예/아니오 팝업을 그대로 쓰고, <html> 에 h5p_pyn_loss 가 붙은 동안에만 버튼을 다시 잡는다
   (S_losslimit_portrait.js 가 표를 단다). 판은 원본 그대로 813x617 - 양 끝 여백 54.5, 버튼 사이 30.
   아래 여백은 옛 버튼(124.5)과 같은 34.5 가 되게 top 478.5 */
html.h5p.h5p_pyn_loss #PYN_btn1,
html.h5p.h5p_pyn_loss #PYN_btn2
{
    top: 478.5px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: -1px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* btn1 = 예(진행) -> 오른쪽 초록 / btn2 = 아니오 -> 왼쪽 회색 */
html.h5p.h5p_pyn_loss #PYN_btn1
{
    left: 421.5px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a !important;
}
html.h5p.h5p_pyn_loss #PYN_btn2
{
    left: 54.5px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a !important;
}
/* 리모컨 시절 노란 테두리 그림은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5p.h5p_pyn_loss #PYN_btn_focus
{
    display: none !important;
}

/* ============ 상점 금화 구매(환전) 확인 팝업 (2026-10-01 CEO 지시) ============
   공용 예/아니오 팝업을 그대로 쓰고, <html> 에 h5p_pyn_shop 이 붙은 동안에만 새 자리로 다시 잡는다.
   CEO 지시 네 가지: 판이 작다 -> 813x617 에서 920x660 으로 / 글자 뒤 띠 그림을 뺀다 /
   루비 막대를 캐릭터 변경 팝업과 같은 그림으로 / 밑 버튼을 새 버튼으로.
   판 그림(크림색 조각 + 금테)은 지금 것을 그대로 쓰고 안쪽 칸만 옮긴다 (1080x2340 기준) */
/* 열고 닫을 때 연출은 내정보 팝업과 똑같이 한다 (2026-10-01 CEO 지시).
   같은 느낌을 보장하려고 그 팝업의 키프레임(myi_pop_in / myi_pop_out, css/h5_portrait_myinfo.css)을 그대로 쓴다.
   딤도 팝업과 같이 빨리 깔린다 - 다른 화면은 0.35초지만 이 팝업은 '팍' 떠야 한다 */
html.h5p.h5p_pyn_shop #PYN_board
{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
}
html.h5p.h5p_pyn_shop.h5p_pyn_out #PYN_board
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
html.h5p.h5p_pyn_shop.h5p_dim_on #h5p_dim
{
    -webkit-animation-duration: 0.22s;
    animation-duration: 0.22s;
}
html.h5p.h5p_pyn_shop #PYN_board
{
    left: 80px !important;
    top: -webkit-calc(50% - 412px) !important;
    top: calc(50% - 412px) !important;
    margin: 0 !important;
    width: 920px !important;
    height: 824px !important;
}
/* 무엇을 사는지 보여 주는 상품 그림과 금액 (2026-10-01 CEO 지시).
   S_marketstore_portrait.js 가 만들고, 상점 팝업일 때만 보인다 (다른 화면 팝업에도 남아 있으므로 평소에는 감춘다).
   그림은 금화 카드가 쓰는 것과 같은 ch_bt_icon(284x210), 말도 카드와 같은 '1천만냥' 이다 */
/* 상품 그림과 금액을 함께 감싸는 단색 박스 (2026-10-01 CEO 지시, 색은 CEO 가 고른 #f1d36b).
   가장 긴 금액("5억 6천만냥" 약 280)이 들어가도록 440 으로 잡았다 */
html.h5p.h5p_pyn_shop #MSPP_box
{
    display: block !important;
    position: absolute;
    left: 240px;
    top: 184px;
    width: 440px;
    height: 306px;
    box-sizing: border-box;
    border-radius: 44px;
    background: rgba(241, 211, 107, 0.35);	/* CEO 가 고른 #f1d36b 를 35% 로 (2026-10-01) */
    pointer-events: none;
    z-index: 1;
}
/* 자리와 높이, 배경 자리는 S_marketstore_portrait.js 가 그림마다 다시 잡는다 (보이는 그림에 꼭 맞게 잘라 가운데로).
   여기 값은 표에 없는 번호가 들어왔을 때 쓰는 기본값이다 */
html.h5p.h5p_pyn_shop #MSPP_icon
{
    display: block !important;
    position: absolute;
    left: 318px;
    top: 196px;
    width: 284px;
    height: 210px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 284px 210px;
    pointer-events: none;
    z-index: 2;
}
html.h5p.h5p_pyn_shop #MSPP_gold
{
    display: block !important;
    position: absolute;
    left: 40px;
    top: 410px;
    width: 840px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #3a1f10;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -1px;
    white-space: nowrap;
    z-index: 2;
}
/* 글자 뒤에 깔리던 띠 그림은 쓰지 않는다 */
html.h5p.h5p_pyn_shop #Img_PYN_txtbox
{
    display: none !important;
}
/* "환전하시겠습니까?" 한 줄 - 판 맨 위에 둔다 (2026-10-01 CEO 지시). 그 밑이 상품 그림과 금액이다 */
html.h5p.h5p_pyn_shop #PYN_Txt_1
{
    left: 40px !important;
    top: 90px !important;
    width: 840px !important;
    height: 76px !important;
    line-height: 76px !important;
    text-align: center !important;
    color: #2f2418 !important;
    font-size: 62px !important;
    font-weight: 700 !important;
    letter-spacing: -1px;
    text-shadow: none !important;
    z-index: 2;
}
/* 필요 루비 + 루비 막대 (막대 그림 220x73 그대로 - 왼쪽 루비 보석이 칸 밖으로 나온 한 벌).
   둘을 한 줄로 묶어 가로 가운데에 놓는다 (2026-10-01 CEO 지시).
   자리를 숫자로 박으면 기기마다 '필요 루비' 폭이 달라 가운데가 어긋나므로 묶음에 맡긴다.
   묶는 일은 S_marketstore_portrait.js 의 pop_center_need 가 한다 */
html.h5p.h5p_pyn_shop #MSPP_need
{
    position: absolute;
    left: 40px;
    top: 530px;
    width: 840px;
    height: 73px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 2;
}
html.h5p.h5p_pyn_shop #PYN_Txt_2
{
    position: relative !important;	/* 자리는 묶음이 잡고, 아래 top 으로 살짝만 내린다 */
    left: auto !important;
    top: 5px !important;
    width: auto !important;
    height: 73px !important;
    line-height: 73px !important;
    margin-right: 36px;
    white-space: nowrap;
    text-align: left !important;
    color: #7a5b52 !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
html.h5p.h5p_pyn_shop #MSPP_bar
{
    position: relative;
    width: 230px;
    height: 73px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
html.h5p.h5p_pyn_shop #PYN_Img_1
{
    left: 0 !important;
    top: 0 !important;
    width: 230px !important;
    height: 73px !important;
    z-index: 2;
}
html.h5p.h5p_pyn_shop #PYN_Txt_3
{
    left: 76px !important;
    /* 글자 상자는 막대 한가운데지만 숫자는 밑이 남는 글꼴 특성 때문에 위로 쏠려 보인다.
       숫자 잉크는 글자 상자 위에서 17~50 이라 한가운데(36.5)에 맞추려면 3 내린다 */
    top: 3px !important;
    width: 148px !important;
    height: 73px !important;
    line-height: 73px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    z-index: 3;
}
/* 버튼: 다른 팝업과 같은 디자이너 그림(popup_green_bt / popup_gray_bt 337x104)을 원본 크기로 쓴다.
   왼쪽이 예(초록), 오른쪽이 아니오(회색) - 원본 순서(1=예 2=아니오) 그대로다 (2026-10-01 CEO 지시).
   원본이 넣은 글자("예"/"아니오")는 크기를 0 으로 재워 지우고 새 글자를 버튼 전체에 올린다 */
html.h5p.h5p_pyn_shop #PYN_btn1,
html.h5p.h5p_pyn_shop #PYN_btn2
{
    position: absolute !important;
    top: 660px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    z-index: 3;
}
html.h5p.h5p_pyn_shop #PYN_btn1::after,
html.h5p.h5p_pyn_shop #PYN_btn2::after
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #ffffff;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1px;
}
html.h5p.h5p_pyn_shop #PYN_btn2
{
    left: 111px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
}
html.h5p.h5p_pyn_shop #PYN_btn2::after
{
    content: "아니오";
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
/* 2026-10-09 CEO 지시: 진행(예) 버튼은 모든 팝업에서 오른쪽. 자리만 맞바꿨고 누르는 동작은 그대로다 */
html.h5p.h5p_pyn_shop #PYN_btn1
{
    left: 472px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
}
html.h5p.h5p_pyn_shop #PYN_btn1::after
{
    content: "예";
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a;
}
/* 리모컨 시절 노란 테두리 그림은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5p.h5p_pyn_shop #PYN_btn_focus
{
    display: none !important;
}

/* ============ 룰렛 돌리기 확인 팝업 (2026-10-01 CEO 지시) ============
   상점 팝업과 같은 큰 판·같은 버튼·같은 등장/퇴장을 쓰고, 상품 그림은 넣지 않는다.
   비용이 루비인 룰렛(4,5번)과 금화인 룰렛(2,3번)은 줄 그림이 달라 h5p_pyn_gacha_gold 로 갈라 준다.
   표를 다는 일은 S_gacha_portrait.js 가 한다 */
html.h5p.h5p_pyn_gacha #PYN_board
{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
    left: 80px !important;
    top: -webkit-calc(50% - 490px) !important;
    top: calc(50% - 490px) !important;
    margin: 0 !important;
    width: 920px !important;
    height: 980px !important;
}
html.h5p.h5p_pyn_gacha.h5p_pyn_out #PYN_board
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
html.h5p.h5p_pyn_gacha.h5p_dim_on #h5p_dim
{
    -webkit-animation-duration: 0.22s;
    animation-duration: 0.22s;
}
/* 글자 뒤에 깔리던 띠 그림은 쓰지 않는다 */
html.h5p.h5p_pyn_gacha #Img_PYN_txtbox
{
    display: none !important;
}
/* "룰렛 돌리기를 / 진행하시겠습니까?" 두 줄 */
html.h5p.h5p_pyn_gacha #PYN_Txt_1
{
    left: 40px !important;
    top: 86px !important;
    width: 840px !important;
    height: 168px !important;
    line-height: 84px !important;
    text-align: center !important;
    color: #2f2418 !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    letter-spacing: -1px;
    text-shadow: none !important;
    z-index: 2;
}
/* 어느 룰렛을 돌리는지 보여 주는 썸네일과 이름 (2026-10-01 CEO 지시).
   S_gacha_portrait.js 가 만들고, 룰렛 팝업일 때만 보인다 (다른 화면 팝업에도 같은 판을 쓰므로 평소에는 감춘다).
   썸네일은 선택화면 아래줄이 쓰는 것과 같은 그림(ro_roulette_smlcon 344x358)을 240x250 으로 줄여 쓴다 */
html.h5p.h5p_pyn_gacha #GAPY_box
{
    display: block !important;
    position: absolute;
    left: 240px;
    top: 286px;
    width: 440px;
    height: 356px;
    box-sizing: border-box;
    border-radius: 44px;
    background: rgba(241, 211, 107, 0.35);
    pointer-events: none;
    z-index: 1;
}
html.h5p.h5p_pyn_gacha #GAPY_icon
{
    display: block !important;
    position: absolute;
    left: 340px;
    top: 308px;
    width: 240px;
    height: 250px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 240px 250px;
    pointer-events: none;
    z-index: 2;
}
html.h5p.h5p_pyn_gacha #GAPY_name
{
    display: block !important;
    position: absolute;
    left: 40px;
    top: 562px;
    width: 840px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #3a1f10;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -1px;
    white-space: nowrap;
    z-index: 2;
}
/* 비용 줄: 글자와 막대를 한 줄로 묶어 가로 가운데에 (상점 팝업과 같은 방식) */
html.h5p.h5p_pyn_gacha #GAPY_need
{
    position: absolute;
    left: 40px;
    top: 682px;
    width: 840px;
    height: 96px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 2;
}
html.h5p.h5p_pyn_gacha #PYN_Txt_2
{
    position: relative !important;	/* 자리는 묶음이 잡고, top 으로 살짝만 내린다 */
    left: auto !important;
    top: 5px !important;
    width: auto !important;
    height: 73px !important;
    line-height: 73px !important;
    margin-right: 36px;
    white-space: nowrap;
    text-align: left !important;
    color: #7a5b52 !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
html.h5p.h5p_pyn_gacha #GAPY_bar
{
    position: relative;
    width: 230px;
    height: 73px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
html.h5p.h5p_pyn_gacha #PYN_Img_1
{
    left: 0 !important;
    top: 0 !important;
    width: 230px !important;
    height: 73px !important;
    z-index: 2;
}
html.h5p.h5p_pyn_gacha #PYN_Txt_3
{
    left: 76px !important;
    /* 숫자는 밑이 남는 글꼴 특성 때문에 위로 쏠려 보여 3 내린다 (상점 팝업과 같다) */
    top: 3px !important;
    width: 148px !important;
    height: 73px !important;
    line-height: 73px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    z-index: 3;
}
/* 금화로 돌리는 룰렛: 루비 막대와 같은 모양의 금화 막대(co_popup_goldbar 306x75).
   왼쪽 동전 그림이 x 73 까지라 글자는 그 오른쪽 칸 가운데에 놓는다 */
html.h5p.h5p_pyn_gacha_gold #GAPY_bar
{
    width: 306px;
    height: 75px;
}
html.h5p.h5p_pyn_gacha_gold #PYN_Img_1
{
    width: 306px !important;
    height: 75px !important;
}
html.h5p.h5p_pyn_gacha_gold #PYN_Txt_3
{
    left: 80px !important;
    /* '만냥' 은 밑으로 내려가는 획이 있어 숫자만 있을 때보다 덜 내린다 */
    top: 1px !important;
    width: 218px !important;
    height: 75px !important;
    line-height: 75px !important;
    color: #ffffff !important;
}
/* 버튼: 상점 팝업과 같은 디자이너 그림. 글자는 취소 / 진행 이다 (2026-10-10 CEO 지시) */
html.h5p.h5p_pyn_gacha #PYN_btn1,
html.h5p.h5p_pyn_gacha #PYN_btn2
{
    position: absolute !important;
    top: 816px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    z-index: 3;
}
html.h5p.h5p_pyn_gacha #PYN_btn1::after,
html.h5p.h5p_pyn_gacha #PYN_btn2::after
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #ffffff;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1px;
}
/* 2026-10-09 CEO 지시: 진행(예) 버튼은 모든 팝업에서 오른쪽. 자리만 맞바꿨고 누르는 동작은 그대로다 */
html.h5p.h5p_pyn_gacha #PYN_btn1
{
    left: 472px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
}
html.h5p.h5p_pyn_gacha #PYN_btn1::after
{
    content: "진행";
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a;
}
html.h5p.h5p_pyn_gacha #PYN_btn2
{
    left: 111px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
}
html.h5p.h5p_pyn_gacha #PYN_btn2::after
{
    content: "취소";
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
/* 리모컨 시절 노란 테두리 그림은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5p.h5p_pyn_gacha #PYN_btn_focus
{
    display: none !important;
}
/* 무료 룰렛(1번)은 비용 줄만 감춘다 ('필요 루비 0' 이 뜨면 이상하다, 2026-10-01 CEO 지시).
   판 크기와 버튼 자리는 다른 룰렛과 똑같이 둔다 - 룰렛마다 팝업이 커졌다 작아졌다 하면 안 된다 (CEO 지시).
   대신 줄이 빠져 아래가 비므로 썸네일 칸을 70 내려 제목과 버튼 사이 한가운데에 놓는다 (CEO 지시) */
html.h5p.h5p_pyn_gacha_free #GAPY_need
{
    display: none !important;
}
html.h5p.h5p_pyn_gacha_free #GAPY_box
{
    top: 356px;
}
html.h5p.h5p_pyn_gacha_free #GAPY_icon
{
    top: 378px;
}
html.h5p.h5p_pyn_gacha_free #GAPY_name
{
    top: 632px;
}

/* ============ 우편함 (S_MAILBOX): 팝업 5칸 페이지 -> 세로 리스트 ============ */
/* 줄 요소는 S_mailbox_portrait.js 가 window.g.REWARD 전체로 만들어 넣는다.
   2026-09-14 CEO 가이드(맞고 우편함) 그림 적용: 줄 mailbox_list(964x183), 보상 아이콘 mailbox_reward_*(113x108),
   받기 mailbox_rewardbt(174x94) - image/1_mainmenu/h5p/mailbox, 원래 크기 그대로. 좌표는 1080 기준 가이드 실측.
   뒤는 지금처럼 메인화면 위 딤, 위 재화바는 두지 않는다 (CEO 지시). 원본 팝업/좌우 화살표/닫기 버튼은 감춘다 */

/* 컨테이너: 캔버스 전체를 차지해야 딤 배경(height:100%)과 하단 배치가 맞는다.
   z-index는 로비 캐릭터(z 20/30)보다 위로 (우편함은 로비 위 오버레이) */
html.h5p #S_MAILBOX_div
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 100;
}

/* 원본 딤 그림은 쓰지 않는다. 이 div 는 1080 상자(h5p_legacy, overflow:hidden) 안이라
   좌우가 넓은 기기에서는 딤이 1080 폭까지만 깔려 양옆이 밝게 남는다 (2026-09-10 CEO 지적).
   캔버스 전체를 덮는 #h5p_dim 이 대신 깔린다 - 우편함은 그 위(z100)에 있다 */
html.h5p #Img_MBOX_bg
{
    display: none !important;
}

/* 가로용 팝업판과 페이지 좌우 화살표, 원본 '닫기' 버튼은 세로에서 쓰지 않는다
   (닫기는 왼쪽 아래 '이전' 버튼 #MBP_back 이 대신한다. 요소는 지우지 않고 감추기만 한다) */
html.h5p #MBOX_popup,
html.h5p #MBOX_left,
html.h5p #MBOX_right,
html.h5p #MBOX_btn2
{
    display: none !important;
}

/* 제목: 다른 화면 타이틀과 같은 크림색 글자 + 진한 갈색 테두리, 가이드 글자 가운데 y 316 */
html.h5p #MBP_title
{
    position: absolute;
    left: 0;
    top: 166px;	/* 설정 타이틀(#SETP_title)과 같은 높이 (241 -> 136, 2026-09-22). 2026-10-13 CEO 지시로 이전 버튼과 떼려고 30 내림 (136 -> 166) */
    width: 1080px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 96px;
    font-weight: 800;
    letter-spacing: 4px;
    color: transparent;
    pointer-events: none;   /* 글자 상자(166~316)가 목록 윗머리(311)에 조금 걸친다 - 터치는 목록이 받게 한다 */
}
html.h5p #MBP_title::before,
html.h5p #MBP_title::after
{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px;
    line-height: 150px;
}
html.h5p #MBP_title::before
{
    color: #4a2710;
    -webkit-text-stroke: 18px #4a2710;
}
html.h5p #MBP_title::after
{
    color: #ffffff;
}

/* 이전 버튼: 다른 화면 이전 버튼(back_bt 133x133)과 같은 자리·그림 */
html.h5p #MBP_back
{
    position: absolute;
    left: 27px;
    top: 74px;
    bottom: auto;
    width: 104px;
    height: 108px;
    background: url(../image/11_quest/h5p/back_bt.png?v=4) no-repeat 0 0;
    background-size: 104px 108px;
    cursor: pointer;
    z-index: 10;
}
html.h5p #MBP_back:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 목록: 첫 줄 윗변 430, 줄 왼쪽 58. 가이드처럼 이전/모두받기 위(y 2022)까지 쓰고 그 아래로는 잘린다.
   상자를 줄보다 넉넉히 잡아(왼쪽 36, 위 14 여유) 줄 모서리 그림자가 잘리지 않게 한다 */
html.h5p #MBP_list
{
    position: absolute;
    left: 28px;	/* 미션 목록과 같게: 줄 58~1022(가운데), 스크롤 막대 1030~1052 (2026-09-22 CEO 지시) */
    top: 341px;	/* 타이틀과 함께 105 올림 (416 -> 311), 아래끝은 그대로라 목록이 105 길어진다 (2026-09-22) */
    width: 1024px;	/* 미션 목록과 같게 막대를 22 안쪽으로 (오른 여백 30 -> 8, 2026-09-22) */
    height: -webkit-calc(100% - 573px + var(--h5p_sub_drop, 0px));
    height: calc(100% - 573px + var(--h5p_sub_drop, 0px));   /* 2026-10-13 CEO 지시: 이전 버튼이 아래에서 빠진 만큼 목록을 늘린다 - 아랫변 2078 -> 2164 (모두 받기 버튼 2194 바로 위) */
    padding: 14px 8px 0 30px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
/* 스크롤 막대: 미션 목록(#s_QUEST_card)과 같은 모양 - 가는 반투명 트랙 위에 흰 둥근 막대 (2026-09-22 CEO 지시) */
html.h5p #MBP_list::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p #MBP_list::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p #MBP_list::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
html.h5p #MBP_list::-webkit-scrollbar-track
{
    /* 막대 길이 = 보이는 우편 줄 범위: 위는 첫 줄 윗선(목록 위 여백 14), 아래는 목록 아래끝(잘려 보이는 줄 아랫선) (2026-09-22 CEO 지시) */
    margin: 14px 0 0 0;
    border: 0;
    background: transparent;		/* 2026-10-07 CEO 지시: 전체 범위를 표시하던 반투명 줄은 없앤다 */
}
html.h5p #MBP_list::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}

/* 받을 우편이 없을 때 */
html.h5p #MBP_empty
{
    margin-top: 90px;
    text-align: center;
    font-size: 45px;
    color: #ffffff;
    text-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.7);
}

/* 한 줄: mailbox_list(964x183, 왼쪽 163 은 옅은 갈색 아이콘 칸), 줄 간격 8 */
html.h5p .MBP_row
{
    position: relative;
    width: 964px;
    height: 183px;
    margin: 0 0 8px 0;
    background: url(../image/1_mainmenu/h5p/mailbox/mailbox_list.png) no-repeat 0 0;
    background-size: 964px 183px;
}

/* 보상 아이콘: 갈색 아이콘 칸(그림 실측 x 8~167, y 5~171, 가운데 88/88) 정가운데. 아래 수량 글자는 줄 제목과 겹쳐 뺐다 (2026-09-14 CEO 지시).
   2026-09-17: 왼쪽으로 치우쳐 보여(칸을 0~163 으로 잘못 잡았었다) 실측 가운데로 6.5 오른쪽 이동 (CEO 지적) */
html.h5p .MBP_icon
{
    position: absolute;
    left: 31.5px;
    top: 34.5px;
    width: 113px;
    height: 108px;
}

/* 아이콘 반짝임 (S_mailbox_portrait.js shine_html): 상단 재화바(.MMP_cur_item::after)와 같은 빛줄기/곡선/10초 주기.
   아이콘 그림을 마스크로 써서 빛이 아이콘 모양 안에만 보인다. 줄마다 늦춤(animation-delay)은 JS 가 준다 (2026-09-22 CEO 지시). 주기/속도는 아래 MBP_icon_shine */
html.h5p .MBP_shine
{
    position: absolute;
    left: 31.5px;
    top: 34.5px;
    width: 113px;
    height: 108px;
    background: -webkit-linear-gradient(-15deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
    -webkit-animation: MBP_icon_shine 12s infinite;
    animation: MBP_icon_shine 12s infinite;
}
/* 12초 중 앞 0.7초(5.83%)에만 지나간다 - 재화바(0.55초)보다 조금 느리게 (2026-09-22 CEO 지시 - 너무 빨랐다) */
@-webkit-keyframes MBP_icon_shine
{
    0%     { background-position: 110% 0; opacity: 0.4; -webkit-animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
    2.9%   { opacity: 1; }
    5.83%  { background-position: -10% 0; opacity: 0.9; }
    100%   { background-position: -10% 0; opacity: 0.9; }
}
@keyframes MBP_icon_shine
{
    0%     { background-position: 110% 0; opacity: 0.4; animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
    2.9%   { opacity: 1; }
    5.83%  { background-position: -10% 0; opacity: 0.9; }
    100%   { background-position: -10% 0; opacity: 0.9; }
}

/* 보상 이름 (예: 100만 냥) - 가이드 글자 가운데 61 */
html.h5p .MBP_what
{
    position: absolute;
    left: 184px;
    top: 30px;
    width: 560px;
    height: 62px;
    line-height: 62px;
    font-size: 46px;
    font-weight: 800;
    color: #8a2c0e;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 보낸 사유 - 가이드 글자 가운데 120 */
html.h5p .MBP_why
{
    position: absolute;
    left: 188px;
    top: 96px;
    width: 556px;
    height: 48px;
    line-height: 48px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #4a2d0c;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 남은 기간: 받기 버튼 위 가운데 */
html.h5p .MBP_due
{
    position: absolute;
    left: 736px;	/* 글자 36 에 맞춰 194 -> 220 폭 (2026-09-22) */
    top: 16px;
    width: 220px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 800;
    color: #b25a2e;
    white-space: nowrap;
}

/* 받기 버튼: mailbox_rewardbt(174x94) 위에 흰 글자 */
html.h5p .MBP_get
{
    position: absolute;
    left: 759px;
    top: 64px;
    width: 174px;
    height: 94px;
    line-height: 88px;
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    /* 2026-10-09 CEO 지시: 아래 '모두 받기'(#MBOX_btn1_txt) 와 같은 글자 효과로 맞춘다.
       두 버튼 그림이 같은 초록(#6aaf59)이라 테두리 색도 그대로 #3a2a10 을 쓴다 */
    text-shadow: -2px 0 0 #3a2a10, 2px 0 0 #3a2a10, 0 -2px 0 #3a2a10, 0 2px 0 #3a2a10, -2px -2px 0 #3a2a10, 2px 2px 0 #3a2a10, -2px 2px 0 #3a2a10, 2px -2px 0 #3a2a10;
    background: url(../image/1_mainmenu/h5p/mailbox/mailbox_rewardbt.png) no-repeat 0 0;
    background-size: 174px 94px;
    cursor: pointer;
}
html.h5p .MBP_get:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

/* 하단 '모두받기': 원본 버튼을 미션 화면 모두받기(quest_allclaim_bt 328x95)와 같은 그림·자리(오른쪽 아래)로 */
html.h5p #MBOX_btn1
{
    left: 688px !important;
    top: auto !important;
    margin-top: 0 !important;
    bottom: 107px !important;
    bottom: -webkit-calc(107px - var(--h5p_sub_drop, 0px)) !important;
    bottom: calc(107px - var(--h5p_sub_drop, 0px)) !important;
    width: 328px !important;
    height: 95px !important;
    background: url(../image/11_quest/h5p/quest_allclaim_bt.png) no-repeat 0 0 !important;
    background-size: 328px 95px !important;
    -webkit-transform: none;
    transform: none;
}
html.h5p #MBOX_btn1_bg,
html.h5p #MBOX_btn1_focus
{
    display: none !important;
}
html.h5p #MBOX_btn1_txt
{
    left: 0 !important;
    top: 0 !important;
    width: 328px !important;
    height: 88px !important;
    line-height: 88px !important;
    text-align: center !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: -2px 0 0 #3a2a10, 2px 0 0 #3a2a10, 0 -2px 0 #3a2a10, 0 2px 0 #3a2a10, -2px -2px 0 #3a2a10, 2px 2px 0 #3a2a10, -2px 2px 0 #3a2a10, 2px -2px 0 #3a2a10 !important;
}
html.h5p #MBOX_btn1:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

/* ============ 도신의 탑 (S_STORYMODE) ============ */
/* 탑은 원래 세로 스크롤 구조라 세로에 적합. 뷰포트 높이(720->1280)는
   S_storymode.js 의 get_view_h() 데이터 분기가 처리(가로모드 값 동일). */

/* 컨테이너: 캔버스 전체 (비면 :empty 가드로 자동 숨김).
   배경은 2장으로 나뉜 새 그림을 컨테이너에 겹쳐 깐다 (2026-09-12 CEO 교체, 둘 다 2240x2808):
   - 뒤(smo_tower_bg_back.jpg 산수): 빈틈 없이 화면을 채우고 아래 가운데 기준
   - 앞(smo_tower_bg_front.png 탑, 투명): 예전 한 장짜리 배경처럼 탑이 화면 폭을 거의 채우고 계단이 화면 아래에 오게 (CEO 선택).
     그림 속 탑 부분 폭 984(x 624~1608)를 예전 탑 폭 966 에 맞춰 0.9817 배 -> 2199px.
     탑 아래끝(y 2656) 밑 투명 여백 152 x 0.9817 = 149 만큼 그림을 화면 아래로 내려 탑 아래끝을 화면 아래에 맞춘다 */
/* 2026-09-14 CEO 지시: 탑 배경은 새 4장 그림으로 바뀌어 캔버스 전체 배경 판(#h5p_bg, h5p_bg_tower)이 깐다.
   이 화면 상자는 투명 (탑이 올라오는 연출도 그쪽에서 한다) */
html.h5p #S_STORYMODE_div
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: transparent;
}

/* 기존 배경(가로용 1280x720) / 구름 / 탑(꼭대기·층·문)과 탑 확대틀은 쓰지 않는다 (2026-09-11 CEO 지시).
   원본 로직(도전 층 계산, 입장 판정)은 그대로 두고 화면에서만 감춘다. 입장은 '입장하기' 버튼으로만 한다 */
html.h5p #Img_SMO_background,
html.h5p #Img_SMO_cloud1,
html.h5p #SMOP_scale,
html.h5p #s_storymode_tower
{
    display: none !important;
}

/* 화면 제목: 다른 서브화면과 같은 글자 타이틀(.H5PT_title, 1080 폭 가운데 정렬).
   2026-09-14 CEO 가이드(5맞고-도신의-탑): 글자 세로 가운데 y 320 -> 150 상자 top 245 */
/* 재화바가 있는 화면은 275 로 통일 (245 는 상점에서 배경 그림과 부딪혔다, 2026-09-21 CEO 지시) */
html.h5p #SMOP_title
{
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
    z-index: 60;
}

/* 타이틀 아래 안내 두 줄 (2026-09-14 CEO 가이드: 줄 가운데 y 415 / 448) */
html.h5p #SMOP_sub
{
    position: absolute;
    left: 0;
    /* 2026-09-22: 남은 시간 알약을 다른 화면과 같은 높이(410)로 올리면서 이 안내 줄은 알약 아래(알약 아래끝 + 10)로 옮겼다 */
    top: 480px;
    top: -webkit-calc(var(--h5p_timer_top, 430px) + 70px - var(--h5p_title_up, 20px));
    top: calc(var(--h5p_timer_top, 430px) + 70px - var(--h5p_title_up, 20px));
    width: 1080px;
    height: 68px;
    line-height: 68px;    /* 두 줄(34 x 2) -> 한 줄 (2026-09-14 CEO 지시). 같은 칸(398~466) 세로 가운데 */
    white-space: nowrap;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    /* 2026-10-10 CEO 지시: 짙은 갈색 글자에 흰 번짐을 둘러 두니 배경(탑 그림) 위에서 읽기 어려웠다.
       번짐을 빼고 글자를 아이보리로 바꾼다 */
    color: #fff6e3;
    /* 2026-10-10 CEO 지시: 어두운 톤으로 얇게 번지는 빛을 둘러 탑 그림 위에서도 글자가 뜨게 한다 */
    text-shadow: 0 0 5px rgba(28, 15, 6, 0.95), 0 0 10px rgba(28, 15, 6, 0.65), 0 2px 3px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 60;
}

/* '현재 층 N층 / 10층' 상자 (2026-09-14 CEO 지시).
   처음엔 타이틀 오른쪽(776, 262)에 두었으나 CEO 지시로 왼쪽으로 옮김: 안내 두 줄(y 398~466) 아래, 왼쪽 여백 40 (오른쪽에 있을 때와 같은 여백).
   2026-09-14 CEO 지시(도신의 탑 UI 전체적으로 조금씩 내리기): 위 안내 줄 바로 아래(490)에서 왼쪽 가운데 빈 곳(980)으로 내림 */
html.h5p #SMOP_floor
{
    position: absolute;
    left: 40px;
    /* 2026-10-01 CEO 지시: 대사창(말풍선) 가까이로 내린다.
       대사창 윗변은 바닥에서 1053(bottom 768 + 높이 285) - 그 위 40 에 상자 아랫변을 둔다 */
    top: auto;
    bottom: 1093px;
    bottom: -webkit-calc(1093px - var(--h5p_sub_drop, 0px));
    bottom: calc(1093px - var(--h5p_sub_drop, 0px));
    width: 264px;
    height: 116px;
    box-sizing: border-box;
    padding-top: 12px;
    text-align: center;
    background: rgba(38, 26, 16, 0.72);
    border: 3px solid #c9a45c;
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 60;
}
html.h5p .SMOP_floor_label
{
    height: 44px;
    line-height: 44px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #e8d7b0;
}
html.h5p .SMOP_floor_value
{
    height: 54px;
    line-height: 54px;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}
html.h5p #SMOP_floor_cur
{
    color: #ffdf4d;
}
/* 임시 테스트(S_storymode_portrait.js SMOP_TEST_FLOOR_TAP): 층 상자를 누르면 다음 층 캐릭터 미리보기 - 이때만 터치를 받는다 */
html.h5p #SMOP_floor.SMOP_floor_test
{
    pointer-events: auto;
    cursor: pointer;
}

/* 입장하기 버튼 (2026-09-14 CEO 가이드): 메인화면 도신 대전과 같은 mm_tower_bt(765x187 원본 크기), 가이드 자리 (158, 1790).
   아래 묶음(대사창/금화바/버튼)은 화면 높이가 달라도 아래에 붙도록 bottom 기준 (2340 - 1790 - 187 = 363).
   이 버튼으로만 게임에 들어간다 */
/* 2026-09-15 CEO 지시: 버튼을 90% 로. 등장 모션(smop_ui_in)이 transform 을 쓰므로 scale 대신 크기/자리 수치를 모두 0.9 배로 줄이고,
   버튼 가운데(x 540.5, 화면 아래에서 376.5)는 그대로 둔다. 예전 값: left 158 / bottom 283 / 765x187, 글자 88, 알약 416x47 (177, 110) */
html.h5p #SMOP_enter
{
    position: absolute;
    left: 196.25px;   /* 540.5 - 688.5 / 2 */
    top: auto;
    bottom: 292.35px; /* 예전 아래끝 283 + (187 - 168.3) / 2 - 가운데 높이 유지 */
    bottom: -webkit-calc(292.35px - var(--h5p_sub_drop, 0px));
    bottom: calc(292.35px - var(--h5p_sub_drop, 0px));
    width: 688.5px;
    height: 168.3px;
    background: url(../image/1_mainmenu/h5p/mm_tower_bt.png) no-repeat 0 0;
    background-size: 688.5px 168.3px;
    cursor: pointer;
    z-index: 60;
}
/* '입장하기' 글자: 버튼 윗변에서 4.5 (예전 5 x 0.9) */
html.h5p #SMOP_enter .SMOP_enter_txt
{
    position: absolute;
    left: 0;
    top: 4.5px;
    width: 688.5px;
    height: 99px;
    line-height: 99px;
    text-align: center;
    font-size: 79px;
    font-weight: 800;
    color: #4a2710;
    pointer-events: none;
}
/* 버튼 알약: mm_tower_bt_dim 을 0.9 배(374.4x42.3), 버튼 안 (159.3, 99).
   2026-09-15 CEO 지시: 점당 대신 입장권 아이콘 + '입장권 1장 사용'(0장이면 '입장권 부족', 월정액이면 '무료 입장') - S_storymode_portrait.js fill_ticket */
html.h5p #SMOP_enter_jum
{
    position: absolute;
    left: 159.3px;
    top: 99px;
    width: 374.4px;
    height: 42.3px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    background: url(../image/17_storymode/h5p/mm_tower_bt_dim.png) no-repeat 0 0;
    background-size: 374.4px 42.3px;
    pointer-events: none;
}
/* 입장권 아이콘(mailbox_reward_ticket 113x108)을 알약 높이에 맞춰 작게 */
html.h5p #SMOP_enter_ticket_icon
{
    width: 36px;
    height: 34px;
    margin-right: 8px;
    -webkit-flex: none;
    flex: none;
}
html.h5p #SMOP_enter_ticket_txt
{
    line-height: 42.3px;
}
/* 입장권이 없으면 알약 글자를 붉게 - 누르기 전에 입장할 수 없는 걸 알게 한다 */
html.h5p #SMOP_enter_jum.SMOP_enter_noticket #SMOP_enter_ticket_txt
{
    color: #ffb0a0;
}

/* 점당 알약: 대사창(#SMO_dialogue, 높이 285) 안 금화바(y 301~387) 바로 아래 12 띄워 가운데 (2026-09-15 CEO 지시 - 입장하기 버튼에서 옮김).
   금화바 아래끝(화면 아래 666)과 입장하기 버튼 윗끝(화면 아래 약 461) 사이에 들어간다 */
html.h5p #SMOP_jum_info
{
    position: absolute;
    left: 3px;
    /* 2026-09-26 CEO 지시: 소지금 바와 같은 상자를 하나 더 놓고 그 안에 글자를 넣는다.
       금화 아이콘이 없는 바(tower_gold2)를 쓴다 (2026-09-26 CEO 지시)
       2026-10-02 CEO 지시: 소지금 바와 자리를 맞바꿔 점당 바가 위로 왔다 (399 -> 301) */
    top: 301px;
    width: 688px;
    height: 86px;
    line-height: 86px;
    text-align: center;
    background: url(../image/17_storymode/h5p/tower_gold2.png) no-repeat 0 0;
    background-size: 688px 86px;
    pointer-events: none;
}
html.h5p #SMOP_jum_info_txt
{
    display: inline-block;
    height: 86px;
    line-height: 86px;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}

/* 도신의 탑 이전 버튼 (S_storymode_portrait.js 가 만든다).
   원본에는 이 화면에 이전 버튼이 없어(리모컨 BACK 키만) 세로용으로 새로 붙인다.
   규격은 다른 화면 이전 버튼과 동일 - 터치 112px, 보이는 원 92px */
html.h5p #SMOP_back
{
    position: absolute;
    left: 36px;
    top: 120px;
    width: 168px;
    height: 168px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 60;
}
html.h5p #SMOP_back:before
{
    content: "←";
    display: block;
    width: 138px;
    height: 138px;
    margin: 15px auto 0;
    line-height: 126px;
    text-align: center;
    font-size: 72px;
    font-weight: 700;
    color: #3a2a18;
    background: rgba(255, 255, 255, 0.92);
    border: 7.5px solid #3a2a18;
    border-radius: 50%;
    box-shadow: 0 7.5px 18px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* 도탑 미션 안내판: 세로에서는 숨긴다 (2026-09-08 CEO 지시. 지우지 않고 감추기만) */
html.h5p #SMO_ranking
{
    display: none !important;
}

/* 층수/클리어 라벨은 원래 탑 왼쪽 바깥(local -115, -100)에 붙어 있다.
   탑을 화면 가득 키우면 화면 밖으로 밀려 잘리고, 안쪽으로 넣으면 문짝과 겹친다.
   탑을 배경처럼 쓰는 화면이라 감춘다 (지우지 않음 - 되살리려면 이 규칙만 지우면 된다) */
html.h5p div[id^="SMO_layer_title_"],
html.h5p div[id^="SMO_layer_clearnum_"]
{
    display: none !important;
}

/* 층별 캐릭터 아이콘: 원본이 크기를 안 주고 그려(utilDrawImage_no_wh_pos) 그림 크기가 곧 화면 크기다.
   2026-10-06 그림이 140 -> 240 으로 커지면서 자리가 밀려, 예전과 같은 140 으로 못 박는다.
   그림만 커지고 그리는 크기는 그대로라 더 또렷해진다 */
html.h5p img[id^="SMO_layer_char_icon_"]
{
    width: 140px;
    height: 140px;
}


/* 캐릭터 대사창 (2026-09-14 CEO 가이드): 원본 대사창 그림(smo_dialogue)은 감추고 이름표 대사창 tower_namebg(695x240 원본 크기)를
   가이드 자리 (35, 1252) 에 둔다. 아래 묶음이라 bottom 기준 2340 - 1252 - 240 = 848.
   원본이 넣는 이름/대사/소지금 글자는 자리만 옮기고, 점당 글자는 입장하기 버튼 알약으로 옮겨 보여 준다(S_storymode_portrait.js fill_ui).
   안내 그림이라 터치는 통과시킨다 */
/* 대사 칸을 늘린 새 그림(695x285, 2026-09-14 CEO 수정)으로 바꿨다. 아래 금화바 자리는 그대로 두려고 bottom 848 은 두고 위로 45 늘렸다 */
html.h5p #SMO_dialogue
{
    left: 35px !important;
    top: auto !important;
    bottom: 768px !important;    /* 848 -> 768, 입장하기와 같이 80 내림 (2026-09-14 CEO 지시). 금화바(그림 안)도 함께 내려가 입장하기와의 간격은 그대로 */
    bottom: -webkit-calc(768px - var(--h5p_sub_drop, 0px)) !important;
    bottom: calc(768px - var(--h5p_sub_drop, 0px)) !important;
    width: 695px !important;
    height: 285px !important;
    background: url(../image/17_storymode/h5p/tower_namebg.png) no-repeat 0 0;
    background-size: 695px 285px;
    -webkit-transform: none;
    transform: none;
    z-index: 55;
    pointer-events: none;
}
html.h5p #SMO_dialogue_bg,
html.h5p #SMO_dialogue_jumdang
{
    display: none !important;
}
/* 이름: 빨간 이름표(그림 안 x 60~385, y 0~80)의 꽃 오른쪽. 가이드 글자 가운데 (255, 1297) -> 그림 안 (220, 45) */
html.h5p #SMO_dialogue_name
{
    left: 110px !important;
    top: 13px !important;
    width: 220px !important;
    height: 64px !important;
    line-height: 64px !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap;
}
/* 대사: 크림색 칸(그림 안 y 45~240) 가운데. 세로 자리는 줄 수에 맞춰 JS 가 글자 묶음 가운데를 그림 안 141 에 맞춘다 (SMOP_TALK_CENTER_Y) */
html.h5p #SMO_dialogue_talk
{
    left: 30px !important;
    top: 91px !important;
    width: 635px !important;
    height: auto !important;
    line-height: 50px !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #3b2410 !important;
    text-align: center !important;
    word-break: keep-all;
}
/* 소지금: 대사창 아래 금화바 tower_gold(688x86 원본 크기), 가이드 자리 (38, 1508) -> 대사창 그림 안 (3, 256).
   대사창 그림이 45 높아져(240 -> 285) 그림 안 y 는 301 (화면 자리는 그대로). 금화 아이콘은 그림에 들어 있다 */
html.h5p #SMO_dialogue_money
{
    left: 3px !important;
    top: 399px !important;	/* 2026-10-02 CEO 지시: 점당 바와 자리를 맞바꿔 아래로 내렸다 (301 -> 399) */
    width: 688px !important;
    height: 86px !important;
    line-height: 86px !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    background: url(../image/17_storymode/h5p/tower_gold.png) no-repeat 0 0;
    background-size: 688px 86px;
}

/* 아래쪽 그라데이션 딤은 그림(gradient_dim.png) 대신 CSS 그라데이션 #h5p_bgdim (위 '화면별 배경')이 캔버스 전체 폭에 깐다 (2026-09-14 CEO 지시) */

/* 화면 등장 연출 (2026-09-14 CEO 첨부 '도신의탑 ui등장.gif'): 배경 -> 탑이 올라오며(0.6s) 타이틀 ->
   캐릭터와 딤 -> 대사창·금화바·입장하기 순서로 나타난다. 대기 중에는 보이지 않게 both.
   2026-09-18 CEO 지적(빈 화면 기다리는 시간이 길다)으로 순서는 그대로 두고 전체를 1.4초 -> 0.9초로 당겼다 */
html.h5p #SMOP_title,
html.h5p #SMOP_sub,
html.h5p #SMOP_floor
{
    -webkit-animation: smop_fade_in 0.3s ease-out 0.1s both;
    animation: smop_fade_in 0.3s ease-out 0.1s both;
}
html.h5p #SMO_dialogue,
html.h5p #SMOP_enter
{
    -webkit-animation: smop_ui_in 0.35s ease-out 0.55s both;
    animation: smop_ui_in 0.35s ease-out 0.55s both;
}
@-webkit-keyframes smop_fade_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes smop_fade_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes smop_ui_in
{
    from { opacity: 0; -webkit-transform: translateY(30px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes smop_ui_in
{
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes smop_char_in
{
    from { opacity: 0; -webkit-transform: translateX(-50%) translateX(60px); }
    to   { opacity: 1; -webkit-transform: translateX(-50%); }
}
@keyframes smop_char_in
{
    from { opacity: 0; transform: translateX(-50%) translateX(60px); }
    to   { opacity: 1; transform: translateX(-50%); }
}
/* 도신 대전 캐릭터 숨쉬기 (2026-09-15 CEO 지시): 발끝(transform-origin 50% 100%)을 고정한 채 살짝 줄었다 돌아오기를 반복.
   가운데 정렬 translateX(-50%) 를 함께 넣어야 자리가 틀어지지 않는다.
   98.5%(머리 약 30 오르내림)는 과하다 하여 99.3%(약 15) -> 한 번 더 99.6%(약 9)로 줄임 (2026-09-15 CEO 지시) */
@-webkit-keyframes smop_char_breath
{
    0%, 100% { -webkit-transform: translateX(-50%) scale(1); }
    50%      { -webkit-transform: translateX(-50%) scale(0.996); }
}
@keyframes smop_char_breath
{
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(0.996); }
}

/* 큰 캐릭터 (리뉴얼 전신 그림, 2026-09-11 CEO 교체).
   전신이 다 보이면 안 되고 허벅지까지만 보이게 크게 (CEO 샘플 시안 기준, 확대는 CEO 지시):
   - 높이 3000 으로 모두 맞춘다. 머리 크기가 시안과 비슷해진다.
     2026-09-12 CEO 가 2배 크기 그림으로 교체 (2048x3072 -> 2000x3000, 1882x3344 -> 1688x3000) - 화면 크기는 그대로, 늘려 쓰지 않아 선명하다
   - 그림의 위 60%(머리~허벅지 중간)만 화면에 들어오도록 그림 위끝을 '화면 아래 - 1800' 에 둔다
     (기기 화면 높이가 달라도 허벅지에서 잘린다). 화면이 낮은 기기에서도 얼굴이 위로 잘리지 않게 540 보다 위로는 안 올린다
   - 가로는 몸 중심을 x 760 에 둬서 시안처럼 오른쪽으로 치우치고 오른팔 쪽은 화면 밖으로 잘린다
   그림일 뿐 버튼이 아니므로 터치는 통과시키고, 대사창(z 50)과 입장하기(z 60) 뒤에 둔다 */
/* 2026-09-14 CEO 가이드(5맞고-도신의-탑)로 다시 맞춤: 머리 위끝을 y 560(화면 아래 - 1780)에, 무릎 아래 부츠까지 보이는 높이 1850 으로 줄이고
   몸 가운데를 x 720 에 둔다 (위 설명의 높이 3000/허벅지 잘림/x 760 은 예전 시안 기준).
   화면이 낮은 기기에서 얼굴이 위로 잘리지 않게 480 보다 위로는 안 올린다. 등장 때 오른쪽에서 60 밀려 들어오며 나타난다(0.6s 뒤) */
html.h5p #SMO_big_char
{
    left: 720px !important;
    right: auto !important;
    /* 머리 위끝 560 -> 620 으로 60 내림 (2026-09-14 CEO 지시 - 위 안내/남은 시간 알약(아래끝 540)에 붙어 보였다. 여백 20 -> 80).
       화면이 낮은 기기의 가장 높은 자리도 480 -> 540 으로 같이 내림 */
    top: -webkit-calc(100% - 1720px) !important;
    top: calc(100% - 1720px) !important;
    top: max(540px, calc(100% - 1720px)) !important;
    width: auto !important;
    /* 1850 -> 2150 (2026-09-14 CEO 지시 - 캐릭터를 더 크게): 원본 3072 높이의 약 60% -> 70%. 머리 위끝(y 560)과 몸 가운데(x 720)는 그대로 두고 아래로 커진다 */
    height: 2150px !important;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 숨쉬기 모션 기준점 = 발끝: 캐릭터 그림 10장 모두 발끝이 그림 맨 아래(99~100%)라 아래 가운데를 고정한다 (2026-09-15 CEO 지시) */
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    pointer-events: none;
    z-index: 40;
    /* 등장(0.3s 뒤 0.4s)이 끝난 0.7s 부터 숨쉬기를 끝없이 반복한다 (2026-09-18 CEO 지적으로 전체 등장 연출을 빠르게) */
    -webkit-animation: smop_char_in 0.4s ease-out 0.3s both, smop_char_breath 2.8s ease-in-out 0.7s infinite;
    animation: smop_char_in 0.4s ease-out 0.3s both, smop_char_breath 2.8s ease-in-out 0.7s infinite;
}

/* 격파 도장: 예전 화면 크기/자리 그대로 (640x532, 캐릭터 몸통 위) */
html.h5p #SMO_big_char_done
{
    left: 429px !important;
    top: 1249px !important;
    width: 640px !important;
    height: 532px !important;
    -webkit-transform: none;
    transform: none;
    pointer-events: none;
    z-index: 45;
}

/* ============ 도신의 탑 클리어 보상 (S_STORYMODE_REWARD) ============ */

/* 컨테이너(검정 딤, 인라인 1280x720): 세로 캔버스 전체 */
html.h5p #S_STORYMODE_REWARD_div
{
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 100;
}

/* 보상 팝업(563x350): 가로 중앙 + 세로 중앙 */
html.h5p #SR_popup
{
    left: 117px !important;
    top: 697.5px !important;
}

/* 보상 내용 텍스트(팝업+180 위치): 팝업 이동에 맞춤 */
html.h5p #SR_popup_title2
{
    left: 117px !important;
    top: 967.5px !important;
}

/* 상자 열림 이펙트(640x480): 팝업 위 중앙 (가로와 동일한 상대 위치) */
html.h5p #SR_coin_ani
{
    left: 60px !important;
    top: 442.5px !important;
    /* 2026-09-30 CEO 지적: '확인' 이 가끔 안 눌렸다. 팝업(#SR_popup)에 그림자(filter)가 걸려 버튼의 z-index 가 팝업 안에 갇히고,
       뒤에 그려지는 이 상자 그림(960x720)이 버튼 위쪽 대부분을 덮어 터치를 가로챘다 (맨 아래 띠만 눌렸다). 그림은 터치를 받지 않게 한다 */
    pointer-events: none;
}
/* 보상 글자 띠도 터치를 받지 않는다 (버튼과 겹쳐도 버튼이 눌리게) */
html.h5p #SR_popup_prob,
html.h5p #SR_popup_allclear,
html.h5p #SR_popup_title2
{
    pointer-events: none;
}

/* 올클리어 보너스판 2개(각 351x245): 가로선 좌/우 -> 세로로 팝업 위/아래 */
html.h5p #SR_allclear_1
{
    left: 276px !important;
    top: 195px !important;
}
html.h5p #SR_allclear_2
{
    left: 276px !important;
    top: 1440px !important;	/* 확률 띠 글자가 36 으로 커져(최대 4줄, ~1400) 1335 -> 1440 (2026-09-22) */
}
/* 올클리어 보너스판 안 설명 줄(원본 20 -> 화면 30) */
html.h5p #SR_allclear_1_subtitle,
html.h5p #SR_allclear_2_subtitle1
{
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    white-space: nowrap;
}

/* ============ 도신의 탑 인게임 대사 오버레이 (dialogue_div) ============ */
/* 선뽑기/게임시작/결과에서 캐릭터+말풍선 등장 (util.show_dialogue) */

/* 2026-10-02 CEO 지시: 선 결정·패 나누기·결과 직전 세 자리 모두 큰 캐릭터 그림을 빼고
   상대 프로필 옆에 말풍선만 둔다. 캐릭터 그림이 상대 정보 칸과 화면 가운데를 덮었다 */
html.h5p #big_char,
html.h5p #dialogue_bg
{
    display: none !important;
}
/* 대사 상자는 util.show_dialogue 가 켤 때만 보인다 (!important 를 쓰지 않아야 인라인 display:block 이 이긴다).
   2026-10-02 CEO 지적: 말풍선에 흰 바탕을 입히자 빈 상자가 화면 맨 위에 줄로 보였다 */
html.h5p #dialogue_div
{
    display: none;
}

/* 말풍선: 상대 프로필(x 907~1035) 왼쪽. 오른쪽 끝은 878 로 두어 프로필을 가리지 않는다.
   세로는 h5_portrait_game.js h5pg_place_dialogue 가 프로필 세로 가운데에 맞춰 인라인으로 준다
   (아래 top 은 프로필을 못 찾았을 때의 기본 자리). 원본이 넣는 자리·크기·줄높이는 모두 덮는다 */
html.h5p #dialogue_text
{
    position: absolute !important;	/* 원본이 켤 때만 absolute 로 바꾼다 - 그 전에 글 흐름에 끼어들지 않게 */
    /* 2026-10-09 CEO 지적(줄바꿈이 이상하다): 폭 678 에서는 도신 대사 21 개가 적어 둔 줄보다
       한 줄씩 더 넘어가 어색한 자리에서 끊겼다. 오른쪽 끝(878)은 그대로 두고 왼쪽을 40 까지 넓힌다 */
    left: 40px !important;
    top: 307px !important;
    bottom: auto !important;
    width: 838px !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 18px 24px !important;
    background: #ffffff !important;
    border: 4px solid #d8c391 !important;
    border-radius: 26px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    /* 2026-10-01 CEO 점검: 36px 는 폰에서 12sp 라 본문으로 작다 -> 44px (약 15sp) */
    font-size: 44px !important;
    line-height: 52px !important;
    font-weight: 700 !important;
    color: #2a2112 !important;
    text-align: center !important;
    /* 선 결정 판(60) 보다 아래, 화면 전체 딤(#h5p_dim 50) 보다도 아래.
       55 였을 때 '서비스 안내' 팝업에서 말풍선만 딤 위로 밝게 떴다 (2026-10-01 CEO 지적) */
    z-index: 45;
    /* 원본 등장 연출(utilScale_xy_right_bottom)이 오른쪽 아래를 기준으로 키운다 -
       꼬리 자리에서 톡 튀어나오게 기준점을 꼬리로 옮긴다 */
    -webkit-transform-origin: 100% 50% !important;
    transform-origin: 100% 50% !important;
}
/* 2026-10-09 CEO 지적: 도신 대전 결과 화면에서 말풍선이 결과 딤(#S_GAMERESULT_div z 60)에 가려
   무슨 말을 하는지 보이지 않았다 - 결과 화면일 때만 그 위로 올린다.
   다른 화면에서는 45 그대로라 '서비스 안내' 팝업에서 혼자 밝게 뜨던 일은 생기지 않는다.
   예/아니오 팝업(70)보다는 아래다 */
html.h5p.h5pg_res_on #dialogue_text
{
    z-index: 65;
}

/* 꼬리: 오른쪽으로 뻗어 프로필을 가리킨다 (2026-10-01 CEO 지시).
   바깥 테두리색을 먼저 그리고 그 위에 안쪽 흰색을 덮는다.
   2026-10-10 CEO 지시로 꼬리를 말풍선 세로 한가운데에 둔다 - h5_portrait_game.js 가 말풍선 가운데를
   상대 프로필 가운데에 맞추므로, 대사가 몇 줄이든 꼬리가 프로필 한가운데를 가리킨다 */
html.h5p #dialogue_text::before
{
    content: '';
    position: absolute;
    right: -26px;
    top: 50%;
    margin-top: -18px;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 26px solid #d8c391;
}
html.h5p #dialogue_text::after
{
    content: '';
    position: absolute;
    right: -19px;
    top: 50%;
    margin-top: -13px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 20px solid #ffffff;
}
/* 패 바꾸기 팝업 보유 금화 줄 (선 결정 '몇 월' 은 2026-10-16 에 아래로 따로 뺐다) */
html.h5p #PYN_Txt_4
{
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
}

/* 선 결정 '몇 월' 말풍선 (2026-10-16 CEO 지시: 그림을 고해상도로 바꾸고 속 '月' 을 뺐다).
   글자는 S_selectsun.js 가 'n월' 을 다 적는다. 세로는 가로 값(폭 74.667 / 높이 87, 글자 26)의 1.5배 */
html.h5p #SU_choice_i,
html.h5p #SU_choice_you
{
    width: 112px !important;
    height: 130.5px !important;
}

html.h5p #SU_choice_i_txt,
html.h5p #SU_choice_you_txt
{
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif !important;
    font-weight: 800 !important;
    font-size: 39px !important;
    /* 2026-10-16 CEO 지시: 그림자 빼고 글자색은 붉은 톤으로 */
    color: #c3140c !important;
    text-shadow: none !important;
    width: 105px !important;
    height: 45px !important;
    line-height: 45px !important;
}

html.h5p #SU_choice_i_txt
{
    margin: -4px 0 0 -4px !important;
}

html.h5p #SU_choice_you_txt
{
    margin: 1.5px 0 0 -4px !important;
}

/* ============ 1080 기준 전환 호환 레이어 ============ */
/* 기존 화면들은 720 기준으로 그려져 있다. 1.5배 래퍼에 담아 1080 캔버스에 맞춘다.
   새로 만드는 화면(예: 메인화면 #MMP_root)은 이 래퍼 밖에서 1080 기준으로 직접 만든다. */
html.h5p #h5p_legacy
{
    position: absolute;
    left: 0;
    top: 0;
    /* 2026-09-09 CEO 지시: 720 을 1.5배로 늘려 쓰던 것을 그만두고 1080 그대로 쓴다.
       (원본 크기로 그리던 이미지가 1.5배 확대돼 흐릿했다)
       원본 JS 가 넘기는 720 좌표는 h5_portrait_native1080.js 가 그리는 순간에 올려 준다 */
    width: 1080px;
    /* 세로 영역 밖으로 나가는 내용은 잘라낸다.
       폰에서는 캔버스가 화면 폭과 같아 저절로 가려졌지만, 창이 넓은 PC/태블릿에서는
       캔버스가 창 전체로 넓어져 룰렛 옆 카드 같은 것이 세로 영역 밖에 그대로 보였다 */
    overflow: hidden;
}
/* 게임 화면(대기 테이블 포함, html.h5pg_on)일 때만 상자 밖을 보이게 한다 (2026-09-12 CEO 지적).
   게임 배경 레이어(바탕/보드 타일/상하 띠)는 태블릿 좌우 여분까지 넓게 깔려 있는데 이 상자가 1080 폭에서 잘라 버려
   넓은 기기에서 좌우가 단색으로만 보였다. 화면 끝은 div_body 가 자르고, 메인화면 등 다른 화면은 그대로 잘라낸다 */
html.h5p.h5pg_on #h5p_legacy
{
    overflow: visible;
}
/* 도신의 탑 화면도 상자 밖을 보이게 한다 (2026-09-14 CEO 지적 - 태블릿에서 캐릭터(가운데 x 720, 폭 1433)의 오른쪽이
   1080 경계에서 잘려 보였다). 화면 끝은 div_body 가 자르고, 이 화면의 다른 요소는 1080 안에 있다 */
html.h5p.h5p_bg_tower #h5p_legacy
{
    overflow: visible;
}

/* 태블릿/폴더블/PC 창: 좌우 남는 폭을 단색 여백 대신 게임 아트로 채운다 (가이드: 좌우 배경 확장)
   body 는 캔버스(1080) 크기라 화면 전체를 못 덮는다. 뷰포트 전체인 html 에 걸어야 한다.
   배경은 화면 전체에 "한 장만" 깔고 비율 유지(cover) 한다 - 두 겹이면 잘린 비율이 달라 이질감이 생긴다 */
/* 2026-09-14: 화면별 배경은 캔버스 전체 판(#h5p_bg, 아래 '화면별 배경')이 깐다. 여기는 그 판이 생기기 전 잠깐 보이는 메인 배경 */
html.h5p
{
    background-image: url(../image/1_mainmenu/h5p/bg/main_bg.jpg?v=2) !important;
    background-position: 50% 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
html.h5p body
{
    background: transparent !important;
    /* 원본 Main.js 가 body 폭을 캔버스 기준 1080px 로 넣는다. 화면 폭이 그보다 좁은 기기(태블릿 800)에서는 크롬이 페이지를
       1080 폭으로 잡았다가 뒤늦게 축소해, 앱 첫 실행 때 화면이 확대되어 오른쪽이 잘려 보였다 (2026-09-14 CEO 지적, IM-H031 실측).
       게임 화면은 div_body 가 창 크기에 맞춰 축소해 그리므로 body 는 창 폭을 넘지 않게 둔다 */
    width: 100% !important;
}

/* 인게임 동안에는 화면 전체 바탕을 보드 그라데이션으로 (가이드 base_background).
   상자가 1080 에서 잘라내므로, 캔버스가 더 넓은 기기의 좌우 여백에 로비 배경이 비치는 것을 막는다 */
html.h5p.h5pg_on
{
    background-image: none !important;
    background: linear-gradient(#395d38, #27412b) !important;
}

/* ============ 화면별 배경 (2026-09-14 CEO 지시, 디자이너 배경 2412x3024) ============
   캔버스 전체 판(#h5p_bg, div_body 첫 자식 - h5_portrait.js h5_portrait_bg_update)에 한 장 깐다.
   화면 비율이 달라도 비율을 지키며 꽉 채우고(cover) 아래를 맞춘다 (난간·바닥·계단이 잘리지 않게).
   어느 화면인지는 html 의 h5p_bg_* 표시로 고른다. 게임 중(h5pg_on)은 보드 배경을 쓰므로 감춘다 */
/* 2026-10-09 CEO 지적: 캔버스가 화면보다 0.05 넓을 때 가장자리에 1px 틈이 나 뒤가 비쳐 보였다.
   Main.js 가 자리를 반올림하도록 고쳤고, 여기서도 좌우로 2 씩 넉넉히 깔아 어떤 반올림에도 틈이 없게 한다 */
html.h5p #h5p_bg,
html.h5p #h5p_bg > div
{
    position: absolute;
    left: -2px;
    top: 0;
    width: -webkit-calc(100% + 4px);
    width: calc(100% + 4px);
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
    pointer-events: none;
}
html.h5p #h5p_bg
{
    z-index: 0;
    background-color: #79c4e8;
    background-image: url(../image/1_mainmenu/h5p/bg/main_bg.jpg?v=2);
}
html.h5p.h5p_bg_mission  #h5p_bg { background-image: url(../image/1_mainmenu/h5p/bg/mission_bg.jpg); }
html.h5p.h5p_bg_roulette #h5p_bg { background-image: url(../image/1_mainmenu/h5p/bg/roulette_bg.jpg); }
html.h5p.h5p_bg_shop     #h5p_bg { background-image: url(../image/1_mainmenu/h5p/bg/shop_bg.jpg); }
html.h5p.h5p_bg_ranking  #h5p_bg { background-image: url(../image/1_mainmenu/h5p/bg/ranking_bg.jpg); }
/* h5p_bg_plain: 전용 배경 그림이 없는 서브화면(캐릭터 변경 / 일일 손실 한도). 메인 배경 그림을 그대로 쓰되
   메인화면 표시(h5p_bg_main)가 아니라서 서브화면 기본 딤 30%(아래 #h5p_bg::after)가 깔리고 아래 그라데이션은 없다 (2026-09-21 CEO 지시) */
html.h5p.h5pg_on #h5p_bg { display: none; }

/* 인트로(로고)/메인화면 벚꽃잎 (h5_portrait_petals.js): 배경 판 바로 위, 화면 요소 아래 (2026-09-17 CEO 지시) */
html.h5p #h5p_petals
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: none;
}
html.h5p.h5pg_on #h5p_petals { display: none !important; }

/* 도신의 탑: 같은 크기(2412x3024)로 그린 4장을 같은 자리·같은 크기로 겹친다 - 뒤(산수, 판 자체) / 탑 / 왼쪽 벼랑 / 오른쪽 벚나무.
   화면에 들어올 때 탑만 100 아래에서 제자리로 올라온다 (2026-09-12 CEO 지시 유지. 탑 화면에서만 보여 들어올 때마다 다시 돈다) */
html.h5p #h5p_bg > div { display: none; }
/* 2026-10-09 CEO 가 뒤 판을 다시 그려 주셨다 (탑 아래 좌우 나무 울타리를 지웠다).
   파일 이름이 같아 ?v= 를 올려야 폰에 남은 옛 그림이 바뀐다 */
html.h5p.h5p_bg_tower #h5p_bg { background-image: url(../image/17_storymode/h5p/smo_tower_bg_back.jpg?v=2); }
html.h5p.h5p_bg_tower #h5p_bg > div { display: block; }
/* 탑 화면 4장 크기 (2026-10-19 CEO 지적: 탑 끝이 잘려 보인다).
   2026-09-14 에 원본의 84%(2026x2540) 로 키웠는데, 그림이 아래 맞춤이라 폰 캔버스(1080x2320 쯤)보다
   200 쯤 커서 탑 꼭대기(지붕 한 칸 + 찰주)가 화면 위로 잘려 나갔다.
   높이를 화면에 딱 맞춰(auto 100%) 세로로는 한 점도 안 잘리게 한다 - 가로는 비율대로 따라간다.
   4장이 같은 크기·같은 자리(가운데, 아래 맞춤)로 겹치는 것은 그대로다 */
html.h5p.h5p_bg_tower #h5p_bg,
html.h5p.h5p_bg_tower #h5p_bg > div
{
    background-size: auto 100%;
}
html.h5p #h5p_bg_front { background-image: url(../image/17_storymode/h5p/smo_tower_bg_front.png?v=2); }
html.h5p #h5p_bg_left  { background-image: url(../image/17_storymode/h5p/smo_tower_bg_left.png); }
html.h5p #h5p_bg_right { background-image: url(../image/17_storymode/h5p/smo_tower_bg_right.png); }
/* 오른쪽 벚나무는 그림 오른쪽 끝(원본 x 2011~2412)에만 있어 가운데 맞춤이면 폰 화면(1080) 오른쪽 밖에 놓여 보이지 않았다 (2026-09-14 CEO 지적 -
   밀려 들어오는 모션이 안 보임). 화면 오른쪽 끝에 맞춘다. 왼쪽 벼랑은 가운데 맞춤으로도 보이므로 그대로 둔다 */
html.h5p #h5p_bg > #h5p_bg_right
{
    background-position: 100% 100%;
}
/* 탑 그림은 다른 3장과 같이 가운데 (2026-09-14 CEO 지시 - 150 왼쪽으로 옮겨 봤다가 가운데가 훨씬 낫다고 되돌림) */
html.h5p.h5p_bg_tower #h5p_bg_front
{
    -webkit-animation: h5p_bg_front_up 0.6s ease-out;
    animation: h5p_bg_front_up 0.6s ease-out;
}
/* 왼쪽 벼랑 / 오른쪽 벚나무는 화면에 들어올 때 각각 가운데 쪽으로 120 살짝 밀려 들어온다 (2026-09-14 CEO 지시). 탑 화면에서만 보여 들어올 때마다 다시 돈다 */
html.h5p.h5p_bg_tower #h5p_bg_left
{
    -webkit-animation: h5p_bg_left_in 0.7s ease-out;
    animation: h5p_bg_left_in 0.7s ease-out;
}
html.h5p.h5p_bg_tower #h5p_bg_right
{
    -webkit-animation: h5p_bg_right_in 0.7s ease-out;
    animation: h5p_bg_right_in 0.7s ease-out;
}
@-webkit-keyframes h5p_bg_left_in
{
    from { -webkit-transform: translateX(-120px); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes h5p_bg_left_in
{
    from { transform: translateX(-120px); }
    to   { transform: translateX(0); }
}
@-webkit-keyframes h5p_bg_right_in
{
    from { -webkit-transform: translateX(120px); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes h5p_bg_right_in
{
    from { transform: translateX(120px); }
    to   { transform: translateX(0); }
}
@-webkit-keyframes h5p_bg_front_up
{
    from { -webkit-transform: translateY(100px); }
    to   { -webkit-transform: translateY(0); }
}
@keyframes h5p_bg_front_up
{
    from { transform: translateY(100px); }
    to   { transform: translateY(0); }
}

/* 아래쪽 그라데이션 딤 (2026-09-14 CEO 지시): 예전 도신의 탑 그림 gradient_dim.png(1080x986)을 CSS 그라데이션으로 똑같이 만들었다.
   그림에서 줄마다 잰 값: 위 13% 까지 투명 -> 아래로 갈수록 갈색빛에서 검정으로 진해져 맨 아래 불투명도 0.66.
   캔버스 전체 폭(태블릿 좌우까지)에 깐다. 메인화면은 새 메인 UI(z40) 아래(캐릭터 칸과는 겹치지 않는다),
   도신의 탑은 캐릭터(z40) 위·대사창(z55)/버튼(z60) 아래 */
html.h5p #h5p_bgdim
{
    position: absolute;
    left: -2px;		/* 가장자리 틈 막기 - #h5p_bg 와 같은 이유 (2026-10-09) */
    bottom: 0;
    width: -webkit-calc(100% + 4px);
    width: calc(100% + 4px);
    /* 986 -> 650 (2026-09-14 CEO 지시 - 화면 반 이상부터 어두워지는 느낌). 아래끝 기준으로 세로만 줄이고 진해지는 흐름(단계 %)은 그대로 */
    height: 650px;
    background: -webkit-linear-gradient(top,
        rgba(98, 56, 50, 0) 0%, rgba(98, 56, 50, 0) 13%, rgba(93, 55, 49, 0.055) 20%, rgba(71, 50, 46, 0.153) 30%,
        rgba(54, 45, 43, 0.267) 40%, rgba(41, 40, 40, 0.365) 51%, rgba(25, 25, 25, 0.447) 61%, rgba(8, 8, 8, 0.533) 71%,
        rgba(1, 1, 1, 0.592) 81%, rgba(0, 0, 0, 0.639) 91%, rgba(0, 0, 0, 0.659) 96%, rgba(0, 0, 0, 0.659) 100%);
    background: linear-gradient(to bottom,
        rgba(98, 56, 50, 0) 0%, rgba(98, 56, 50, 0) 13%, rgba(93, 55, 49, 0.055) 20%, rgba(71, 50, 46, 0.153) 30%,
        rgba(54, 45, 43, 0.267) 40%, rgba(41, 40, 40, 0.365) 51%, rgba(25, 25, 25, 0.447) 61%, rgba(8, 8, 8, 0.533) 71%,
        rgba(1, 1, 1, 0.592) 81%, rgba(0, 0, 0, 0.639) 91%, rgba(0, 0, 0, 0.659) 96%, rgba(0, 0, 0, 0.659) 100%);
    pointer-events: none;
    display: none;
    z-index: 39;
}
/* 인트로(로고) 화면에서는 아래 어두워지는 그라데이션을 깔지 않는다 (2026-10-08 CEO 지시).
   로고 화면도 메인 배경(h5p_bg_main)을 쓰기 때문에 같이 깔리고 있었다 */
html.h5p.h5p_splash #h5p_bgdim
{
    display: none !important;
}
html.h5p.h5p_bg_main #h5p_bgdim
{
    display: block;
    /* 2026-10-06 CEO 지시: 메인화면만 어두워지기 시작하는 자리를 100 내린다 (650 -> 550).
       도신의 탑은 예전 높이 그대로다 */
    height: 550px;
}
/* 도신의 탑: 캐릭터 위로 올리고, 예전처럼 캐릭터와 함께 늦게 서서히 나타난다 (등장 연출 smop_fade_in) */
html.h5p.h5p_bg_tower #h5p_bgdim
{
    display: block;
    z-index: 46;
    -webkit-animation: smop_fade_in 0.4s ease-out 0.3s both;
    animation: smop_fade_in 0.4s ease-out 0.3s both;
}
html.h5p.h5pg_on #h5p_bgdim
{
    display: none;
}

/* 서브화면 배경 딤 검정 30% (2026-09-14 CEO 지시 - 배경 그림들이 밝은 톤이라 메인화면을 뺀 모든 화면에 깐다. 20% 에서 30% 로 올림).
   배경 판(도신의 탑 4장 포함) 맨 위와 서브 배경(내정보/우편함/설정) 위에 얹고, 메인화면 배경에는 깔지 않는다 */
html.h5p #h5p_bg::after,
html.h5p #h5p_subbg::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
html.h5p.h5p_bg_main #h5p_bg::after
{
    display: none;
}
/* 우편함/설정은 딤을 조금 더 진하게 (30% -> 45%, 2026-09-14 CEO 지시 - h5_portrait.js H5P_SUBBG_DEEP_LIST) */
html.h5p.h5p_subbg_deep #h5p_subbg::after
{
    background: rgba(0, 0, 0, 0.45);
}
/* 도움말은 판 없이 배경 위에 글자만 올리므로 더 진하게 (2026-09-18 CEO 지시) */
html.h5p.h5p_help_on #h5p_subbg::after
{
    background: rgba(0, 0, 0, 0.66);
}
/* 랭킹 배경은 딤을 더 진하게 (30% -> 50%, 2026-09-14 CEO 지시 - 초록 판을 뺀 뒤 목록 글자가 잘 읽히게) */
html.h5p.h5p_bg_ranking #h5p_bg::after
{
    background: rgba(0, 0, 0, 0.5);
}

/* 서브 배경: 내정보/우편함/설정 뒤 (h5_portrait.js H5P_SUBBG_LIST). 메인화면(z40) 위, 검정 딤(z50) 아래.
   켜질 때 서서히 깔리고, 우편함/설정에서 나갈 때(h5p_dim_out)는 서서히 걷힌다 - 예전 딤과 같은 연출 */
html.h5p #h5p_subbg
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #79c4e8 url(../image/1_mainmenu/h5p/bg/sub_bg.jpg) no-repeat 50% 100%;	/* 2026-09-15 새 벚꽃 배경 (원본 5.3MB -> 품질 88 로 884KB) */
    background-size: cover;
    z-index: 49;
    pointer-events: none;
    display: none;
}
html.h5p.h5p_subbg_on #h5p_subbg
{
    display: block;
    -webkit-animation: h5p_dim_fade_in 160ms ease-out both;
    animation: h5p_dim_fade_in 160ms ease-out both;
}
html.h5p.h5p_subbg_on.h5p_dim_out #h5p_subbg
{
    -webkit-animation: h5p_dim_fade_out 180ms ease-in both;
    animation: h5p_dim_fade_out 180ms ease-in both;
}
/* 내정보 팝업을 닫을 때(h5p_dim_fast)는 서브 배경도 팝업 퇴장과 같이 빠르게 걷는다 (2026-09-22 CEO 지시) */
html.h5p.h5p_dim_on.h5p_dim_out.h5p_dim_fast #h5p_dim,
html.h5p.h5p_subbg_on.h5p_dim_out.h5p_dim_fast #h5p_subbg
{
    -webkit-animation-duration: 0.23s;
    animation-duration: 0.23s;
}

/* 원본 화면들이 깔던 가로용 메인 배경 사진(main_BG2_new, 화면 크기 전체)은 감춘다 - 위의 화면별 배경 판이 대신 보인다 */
html.h5p #Img_QU_background,
html.h5p #Img_QD_background,
html.h5p #Img_MS_background,
html.h5p #Img_GA_background,
html.h5p #Img_CH_background,
html.h5p #Img_CR_background,
html.h5p #Img_SM_background,
html.h5p #Img_SS_background,
html.h5p #Img_SC_background,
html.h5p #Img_DLT_background,
html.h5p #Img_ST_background
{
    display: none !important;
}

/* 랭킹: 메인화면 위에 뜨는 화면이라 랭킹 배경이 보이도록 뒤의 메인화면 UI 를 감춘다 (클릭도 통과하지 않는다) */
html.h5p.h5p_bg_ranking #MMP_root
{
    visibility: hidden;
}

/* 기존 로비 화면 전체를 숨긴다.
   세로모드에서는 새 메인화면(#MMP_root)이 로비를 완전히 대체한다.
   예전에는 새 메인화면이 불투명 배경으로 덮고 있었지만, 배경을 화면 전체 한 장으로
   통일하면서 투명해졌기 때문에 기존 로비 버튼/캐릭터가 비쳐 보인다.
   display:none 으로 숨기면 재화 그리기가 값을 채우지 않으므로 visibility 로 감춘다
   (레이아웃은 유지되고 클릭도 통과하지 않는다).
   단, 상단 패널(#MM_top)은 재화 값 계산에 계속 쓰이므로 여기 포함하지 않는다 */
html.h5p #S_MAINMENU_div
{
    visibility: hidden !important;
}

/* ============ 새 메인화면이 대체하는 기존 로비 UI ============ */
/* 상단 패널은 새 프로필 카드가 대신한다. 단, 값 계산은 계속 돌아야 하므로
   요소를 지우지 않고 숨기기만 한다 (새 UI가 이 값을 읽어간다). */
html.h5p #MM_top
{
    pointer-events: none;
}
html.h5p #MM_top_userinfo
{
    display: none !important;
}

/* 랭킹 패널: 평소 숨김, 우측 레일의 랭킹 아이콘을 누르면 새 UI 위로 올라온다 */
html.h5p #MM_ranking
{
    display: none !important;
}
html.h5p #MM_ranking.MMP_rank_open
{
    display: block !important;
    pointer-events: auto;
    z-index: 60;
}

/* ============ 이전 버튼 공통: 초록 원형 '이전' 그림 + 왼쪽 아래 (2026-09-11 CEO 지시) ============ */
/* 모든 서브화면의 이전 버튼 구조가 같다: #XX_back 안에 배경이미지/글자/포커스이미지.
   안쪽 이미지·글자를 숨기고 컨테이너 자체에 back_bt.png(133x133, 원본 크기)를 그린다.
   클릭은 컨테이너(.button)가 그대로 받으므로 기존 동작에 영향 없다.
   화면마다 위에 따로 적어 둔 이전 버튼 위치보다 이 규칙이 뒤에 있어 이 위치가 이긴다.
   세로 위치: 2026-10-13 CEO 지시(카카오 검수 의견)로 왼쪽 아래(bottom 96)에서 왼쪽 위로 옮겼다.
   갤럭시에서 하단 시스템 바와 겹치던 것을 없애고, '화면별 타이틀과 같은 줄'에 맞춘다.
   타이틀은 top 255 / 높이 150 이라 가운데가 330 - 버튼(133)을 거기에 맞추면 top 264 (330 - 66.5).
   타이틀을 136 에 두는 화면(설정 / 도움말 / 우편함)은 아래에서 따로 145 로 맞춘다.
   가로 위치: 2026-10-13 CEO 지시로 재화바 줄의 네 틈을 모두 28 로 맞췄다 (38 -> 27).
   그림은 상자(104) 안에서 1~102 가 보이므로 화면 왼쪽에서 28 떨어져 보인다 */
html.h5p #CH_back,
html.h5p #CR_back,
html.h5p #DLT_back,
html.h5p #GA_back,
html.h5p #HE_back,
html.h5p #MS_back,
html.h5p #QD_back,
html.h5p #QU_back,
html.h5p #SC_back,
html.h5p #SM_back,
html.h5p #SMO_back,
html.h5p #SS_back,
html.h5p #ST_back,
html.h5p #SMOP_back
{
    left: 27px !important;
    top: 74px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 104px !important;
    height: 108px !important;
    background: url(../image/11_quest/h5p/back_bt.png?v=4) no-repeat 0 0 !important;
    background-size: 104px 108px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* 공통 블록 밖에서 따로 그린 이전 버튼도 같은 자리로 (2026-10-13 CEO 지시로 재화바 줄 왼쪽 끝에 둔다).
   금고(#SAFE_col) / 실시간 로비(#MMRT_root) / 랭킹(#RANK_root) 모두 화면 전체가 자리 기준이라 같은 값이 통한다.
   랭킹은 버튼이 아래 띠 안에 있어 S_rank_portrait.js 에서 화면 뿌리로 옮겨 두었다 */
html.h5p #SAFE_back_bt,
html.h5p #MMRT_back_bt,
html.h5p #RANK_back_bt
{
    left: 27px !important;
    top: 74px !important;
    right: auto !important;
    bottom: auto !important;
    width: 104px !important;
    height: 108px !important;
    background: url(../image/11_quest/h5p/back_bt.png?v=4) no-repeat 0 0 !important;
    background-size: 104px 108px !important;
}

/* 터치 판정은 그림보다 넓게 잡는다 (2026-10-13).
   새 그림이 104x108 = 35x36dp 라 안드로이드 권장(48dp = 144px)에 못 미친다 -
   보이지 않는 칸을 덧대 가운데를 맞춘 144x144 로 넓힌다 (그림은 그대로) */
html.h5p #CH_back::before,
html.h5p #CR_back::before,
html.h5p #DLT_back::before,
html.h5p #GA_back::before,
html.h5p #HE_back::before,
html.h5p #MS_back::before,
html.h5p #QD_back::before,
html.h5p #QU_back::before,
html.h5p #SC_back::before,
html.h5p #SM_back::before,
html.h5p #SMO_back::before,
html.h5p #SS_back::before,
html.h5p #ST_back::before,
html.h5p #SMOP_back::before,
html.h5p #MBP_back::before,
html.h5p #SAFE_back_bt::before,
html.h5p #MMRT_back_bt::before,
html.h5p #RANK_back_bt::before
{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -20px !important;
    top: -18px !important;
    width: 144px !important;
    height: 144px !important;
    background: none !important;
}

/* 예전 원형 화살표 그림은 쓰지 않는다 */
html.h5p #CH_back:before,
html.h5p #CR_back:before,
html.h5p #DLT_back:before,
html.h5p #GA_back:before,
html.h5p #HE_back:before,
html.h5p #MS_back:before,
html.h5p #QD_back:before,
html.h5p #QU_back:before,
html.h5p #SC_back:before,
html.h5p #SM_back:before,
html.h5p #SMO_back:before,
html.h5p #SS_back:before,
html.h5p #ST_back:before,
html.h5p #SMOP_back:before
{
    display: none !important;
}

/* 원래의 네모 배경이미지 / 글자 / 포커스테두리는 감춘다 */
html.h5p #CH_back_bg, html.h5p #CH_back_txt, html.h5p #CH_back_focus, html.h5p #CH_back_icon,
html.h5p #CR_back_bg, html.h5p #CR_back_txt, html.h5p #CR_back_focus,
html.h5p #DLT_back_bg, html.h5p #DLT_back_txt, html.h5p #DLT_back_focus,
html.h5p #GA_back_bg, html.h5p #GA_back_txt, html.h5p #GA_back_focus,
html.h5p #HE_back_txt, html.h5p #HE_back_focus,
html.h5p #MS_back_bg, html.h5p #MS_back_txt, html.h5p #MS_back_focus,
html.h5p #QD_back_bg, html.h5p #QD_back_txt, html.h5p #QD_back_focus,
html.h5p #QU_back_bg, html.h5p #QU_back_txt, html.h5p #QU_back_focus,
html.h5p #SC_back_bg, html.h5p #SC_back_txt, html.h5p #SC_back_focus,
html.h5p #SM_back_bg, html.h5p #SM_back_txt, html.h5p #SM_back_focus, html.h5p #SM_back_icon,
html.h5p #SMO_back_bg, html.h5p #SMO_back_txt, html.h5p #SMO_back_focus,
html.h5p #SS_back_bg, html.h5p #SS_back_txt, html.h5p #SS_back_focus, html.h5p #SS_back_icon,
html.h5p #ST_back_bg, html.h5p #ST_back_txt, html.h5p #ST_back_focus
{
    display: none !important;
}

/* ============ 포커스 표시 제거 (모바일 전용) ============ */
/* TV 리모컨용 포커스 테두리/발광은 터치 화면에서 "왜 여기가 선택돼 있지?" 로 읽힌다.
   원본은 focus 클래스를 붙인 요소로 표시하므로 그것만 감춘다 (선택 로직은 그대로) */
html.h5p .focus
{
    display: none !important;
}

/* ============ 개발용 안내선 (devtest=1 일 때만) ============ */
/* 세로모드 화면 영역(1080 중앙 컬럼)을 1px 테두리로 표시한다.
   캔버스 밖(html)에 얹어서 캔버스 배율에 눌리지 않고 항상 1px 로 보인다.
   h5_portrait_devguide.js 가 위치를 잡고, 실제 서비스에서는 아예 생성되지 않는다 */
#H5PDEV_frame
{
    position: fixed;
    border: 1px solid #ff2d55;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 99999;
}

/* 테두리 위에 붙는 실제 크기 표시 */
#H5PDEV_size
{
    position: fixed;
    color: #ff2d55;
    font: 11px/16px monospace;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
}

/* 끊김 계측기: 오른쪽 아래 고정 (개발용) */
#H5PDEV_jank
{
    position: fixed;
    right: 4px;
    bottom: 2px;
    font: 11px/16px monospace;
    white-space: nowrap;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
    pointer-events: none;
    z-index: 99999;
}

/* ============ 공통 상단 재화바 (h5_portrait_topbar.js 가 생성) ============ */
/* 모든 서브화면이 메인화면 재화바와 같은 그림, 같은 자리 (left 39 / top 96 = 세이프존 상단선, 2026-09-12 CEO 지시).
   칸은 절대 좌표로 고정한다 - 레거시 CSS 가 흐름 배치를 건드려도 안 흔들리게 */
html.h5p #H5PTOP_bar
{
    position: absolute;
    left: 0;
    top: 87px;
    width: 1080px;
    height: 82px;
    z-index: 40;
    pointer-events: none;  /* 바 바탕은 터치를 받지 않는다 - 겹치는 버튼을 가리지 않게 (칸 3개만 받는다) */
}
html.h5p .H5PTOP_item
{
    position: absolute;
    top: 0;
    height: 82px;
    pointer-events: auto;  /* 누르면 상점으로 (2026-09-21 CEO 지시) */
    cursor: pointer;
    line-height: 82px;
    padding: 0;
    box-sizing: border-box;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* 그림 원본 크기 그대로 (메인화면 .MMP_cur_item 과 같은 값, 2026-09-28 CEO 가이드) */
html.h5p #H5PTOP_item_gold   { left: 157px; width: 479px; padding-right: 72px; background-image: url(../image/1_mainmenu/h5p/mm_goldbar.png?v=6); }
html.h5p #H5PTOP_item_ruby   { left: 663px; width: 276px; padding-right: 72px; background-image: url(../image/1_mainmenu/h5p/mm_rubybar.png?v=6); }
html.h5p #H5PTOP_item_ticket { left: 663px; width: 276px; padding-right: 72px; background-image: url(../image/1_mainmenu/h5p/mm_ticketbg.png?v=5); }

/* 누름 표시 */
/* 2026-10-01 CEO 지시: 재화바는 눌러도 줄이지 않는다 (어둡게만 - h5p_press).
   원본 자리에 그대로 떠 있어야 숫자가 흔들려 보이지 않는다 */
html.h5p .H5PTOP_item:active,
html.h5p .H5PTOP_item.h5p_press
{
    -webkit-transform: none;
    transform: none;
}

/* 아이콘은 바 그림에 그려져 있다 */
html.h5p .H5PTOP_icon { display: none; }

/* 자릿수 확보: 금화 000,000,000 / 루비 00,000 / 티켓 000 */
html.h5p #H5PTOP_gold,
html.h5p #H5PTOP_ruby,
html.h5p #H5PTOP_ticket
{
    display: inline-block;
    text-align: right;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
html.h5p #H5PTOP_gold   { min-width: 250.5px; }
html.h5p #H5PTOP_ruby   { min-width: 110px; }   /* 루비 칸이 265 로 줄어 138 -> 110 (2026-09-21) */
html.h5p #H5PTOP_ticket { min-width: 75px; }

/* ============ 미션(업적) 목록/상세: 세로 가이드 디자인 (2026-09-11 CEO 가이드) ============ */
/* 좌표는 가이드(1080x2340) 실측. 그림은 image/11_quest/h5p 원본 크기 그대로 쓴다.
   원본 가로 카드 요소는 그대로 두고 배치/모양만 바꾸며, 진행바/보상/목록 표시는 S_quest_portrait.js 가 붙인다 */

/* ---- 상단 재화바: 공통 상단 재화바 규칙(메인화면과 같은 그림/자리)을 그대로 쓴다 ---- */

/* ---- 이전 버튼: 모든 서브화면 공통 규칙(이전 버튼 공통 블록)을 그대로 쓴다 ---- */

/* ---- 제목: 나무 판자 BG(quest_titlebg 620x173, 원본 크기) 위에 텍스트 타이틀 (2026-09-12 CEO 가이드) ----
   가이드 판자 x207 y226 / 글자 세로 중앙 307 -> 메인화면처럼 상단 묶음을 55 올려 판자 y171 / 글자 중앙 252.
   재화바(아래끝 161)와 판자 사이 여백 10 -> 30 으로 3배 (판자 아래 묶음 전체를 20 내림, 2026-09-12 CEO 지시): 판자 y191 / 글자 중앙 272.
   재화바와 판자 사이 여백 30 -> 60 (판자 아래 묶음 전체를 30 더 내림, 2026-09-12 CEO 지시): 판자 y221 / 글자 중앙 302.
   판자 요소는 S_quest_portrait.js 가 타이틀 글자 바로 앞에 넣는다 (글자가 판자 위에 그려진다) */
/* 나무 판자 BG 는 미션 화면에만 있어 다른 서브화면과 겉돌았다 - 일단 감춘다 (2026-09-21 CEO 지시).
   되돌리려면 아래 display 한 줄만 지우면 된다 */
html.h5p .QDP_titlebg
{
    display: none;
    position: absolute;
    left: 213px;    /* 207 에서 6 오른쪽 (2026-09-12 CEO 지시) */
    top: 221px;
    width: 620px;
    height: 173px;
    background: url(../image/11_quest/h5p/quest_titlebg.png) no-repeat 0 0;
    background-size: 620px 173px;
    pointer-events: none;
}
/* 판자를 뺀 자리에 글자만 남기고, 재화바가 있는 다른 서브화면(금고/룰렛/우편함)과 같은 높이로 맞춘다 */
html.h5p #QU_title_txt,
html.h5p #QD_title_bg_txt
{
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
}

/* 상점: 재화바가 있으므로 같은 275 로 (기본값 331 에서 올림, 2026-09-21 CEO 지시) */
html.h5p #MS_title_txt
{
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
}

/* 일일 손실 한도: 재화바가 없으므로 설정·도움말·약관과 같은 136 (2026-09-21 CEO 지시) */
html.h5p #DLT_title_txt
{
    top: 166px;	/* 2026-10-13 CEO 지시로 이전 버튼과 떼려고 30 내림 (136 -> 166) */
}
/* 캐릭터 변경은 바꿀 때 루비를 써서 재화바를 달았다 - 재화바 있는 화면 기준 275 (2026-09-21 CEO 지시) */
html.h5p #SCP_title
{
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
}

/* ---- 상세: 미션 이름(서브 텍스트). 목록 화면의 '초기화까지 남은 시간' 줄과 같은 자리 (2026-09-12 CEO 지시).
   2026-10-10 CEO 가 보낸 갈색 띠(quest_sub_bg 536x115)를 글자 뒤에 깐다.
   칸은 1080 폭 그대로 두고 띠만 가운데에 놓아(가로 536), 글자는 띠 위에 흰색으로 얹는다 ---- */
html.h5p #S_QUESTDETAIL_div #QD_title
{
    left: 0 !important;
    margin-left: 0 !important;
    /* 목록 화면 남은 시간 알약과 같은 자리(410, 높이 60)로 올림 (444 -> 410, 2026-09-22 CEO 지시).
       2026-10-10: 띠를 깔면서 칸이 60 -> 84 로 커져, 글줄 가운데(440)가 그대로이게 12 올린다 */
    top: 398px !important;
    top: -webkit-calc(var(--h5p_timer_top, 430px) - var(--h5p_title_up, 20px) - 12px) !important;
    top: calc(var(--h5p_timer_top, 430px) - var(--h5p_title_up, 20px) - 12px) !important;
    width: 1080px !important;
    height: 84px !important;
    line-height: 84px !important;
    padding: 0 60px !important;
    /* 2026-10-10 CEO 가 보낸 갈색 띠를 글자 뒤에 깐다 (원본 536x115, 칸 가운데).
       같은 자리의 목록 화면 남은 시간 알약(폭 447 / 높이 60)보다 띠가 훨씬 커 보여 0.73 배로 줄였다
       (2026-10-10 CEO 지적). 띠 안쪽 평평한 갈색은 원본에서 414 라 줄여도 302 가 남고,
       가장 긴 미션 이름 '붉은 빛을 쫓는자' 가 40 글자크기로 275 라 넉넉히 들어간다 */
    background: url(../image/11_quest/h5p/quest_sub_bg.png?v=1) no-repeat center center !important;
    background-size: 392px 84px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    font-size: 40px !important;     /* 34 -> 40 (2026-09-12) -> 50 (2026-09-22) -> 40 (2026-10-10, 띠를 줄이면서 같이) */
    font-weight: 800 !important;
    /* 띠가 짙은 갈색이라 글자를 흰색으로 바꾸고 테두리를 두른다 (2026-10-10, 글자가 작아져 테두리도 3 -> 2) */
    color: #ffffff !important;
    text-shadow: -2px 0 0 #4a2c10, 2px 0 0 #4a2c10, 0 -2px 0 #4a2c10, 0 2px 0 #4a2c10,
                 -1px -1px 0 #4a2c10, 1px -1px 0 #4a2c10, -1px 1px 0 #4a2c10, 1px 1px 0 #4a2c10;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 리스트 상자: 줄 그림 폭 964, 가운데 ----
   목록: 안내문(370~410) 아래 437 부터 (가이드 472 - 55 + 20). 아래끝은 가이드 화면 아래 319 를 하단 버튼처럼 19 내린 300 */
/* 줄을 누르면 원본이 1.05 배로 키워(좌우 24, 위아래 5 넘침) 상자에 잘려 보였다 (2026-09-14 CEO 지적).
   줄 자리(왼쪽 58, 첫 줄 위 467, 아래끝)는 그대로 두고, 보이는 상자만 좌우 30 / 위 24 넓혀 안쪽 여백으로 채운다.
   위 여백은 줄 오른쪽 위로 올라온 N 표시와 그 커졌다 작아지는 모션도 담는다 */
html.h5p #s_QUEST_card,
html.h5p #s_QUESTDETAIL_card
{
    left: 28px !important;
    /* 스크롤되어 잘리는 위아래 여백을 30 으로 맞춤 (2026-09-14 CEO 지시).
       윗변: '초기화까지 N 남음' 줄 아래끝 446 + 30 = 476.
       아랫변: 이전 버튼 윗끝(화면 아래 229) + 50 = 화면 아래 279 -> 높이 = 100% - 476 - 279
       (아래 여백만 30 -> 50 으로 조금 더 키움, 2026-09-14 CEO 지시) */
    top: 500px !important;
    top: -webkit-calc(var(--h5p_timer_top, 430px) + 90px - var(--h5p_title_up, 20px)) !important;
    top: calc(var(--h5p_timer_top, 430px) + 90px - var(--h5p_title_up, 20px)) !important;          /* 알약 아래끝 500 + 30 (2026-09-21 CEO 지시로 54 내림), 타이틀과 함께 20 올림 (2026-09-22) */
    width: 1024px !important;       /* 줄 964 + 왼 여백 30 + 오른 여백 8 + 스크롤바 자리 22. 막대가 화면 끝(17)에 붙어 잘 안 보여 22 안쪽으로 (2026-09-22 CEO 지시) */
    /* 2026-10-07 CEO 지시: 잘리는 아래 선을 60 더 내린다 (아래끝 253 -> 193).
       모두받기 버튼 윗끝(아래에서 146)과 47 벌어진다 */
    height: -webkit-calc(100% - 749px + var(--h5p_sub_drop, 0px)) !important;
    height: calc(100% - 749px + var(--h5p_sub_drop, 0px)) !important;   /* 서브화면 아래 여백 줄인 만큼 길게 (2026-09-21) */
    padding: 24px 8px 0 30px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: none !important;
    transform: none !important;
}
/* 상세도 목록과 같은 자리부터 - 판자 아래 줄에는 미션 이름 글자 하나만 있다 (2026-09-12) */

/* 스크롤 막대: 메인화면 실시간 대전 방 목록(#MMP_rooms)과 같은 모양 - 가는 반투명 트랙 위에 흰 둥근 막대 (2026-09-21 CEO 지시).
   폭 22 자리를 두고 좌우 투명 테두리 7 로 안쪽 8 만 칠해 가늘게 만든다 */
html.h5p #s_QUEST_card::-webkit-scrollbar,
html.h5p #s_QUESTDETAIL_card::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p #s_QUEST_card::-webkit-scrollbar-corner,
html.h5p #s_QUESTDETAIL_card::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p #s_QUEST_card::-webkit-scrollbar-button,
html.h5p #s_QUESTDETAIL_card::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
/* 트랙(회색 줄) 진하기 22% -> 11% 로 반 (2026-09-21 CEO 지시 - 도움말에서 거슬려 보였다. 같은 모양을 쓰는 메인 방 목록/미션/도움말 함께) */
html.h5p #s_QUEST_card::-webkit-scrollbar-track,
html.h5p #s_QUESTDETAIL_card::-webkit-scrollbar-track
{
    /* 막대 길이 = 보이는 줄 범위: 위는 첫 줄 윗선, 아래는 목록 아래끝 (2026-09-22 CEO 지시 - 우편함과 같은 기준) */
    margin: 24px 0 0 0;
    border: 0;
    background: transparent;		/* 2026-10-07 CEO 지시: 전체 범위를 표시하던 반투명 줄은 없앤다 */
}
html.h5p #s_QUEST_card::-webkit-scrollbar-thumb,
html.h5p #s_QUESTDETAIL_card::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}


/* ---- 줄 한 칸: quest_bg(964x183, 구분선과 검은 진행바 틀 포함), 줄 간격 8 ---- */
html.h5p div[id^="QU_card_"]:not([id^="QU_card_focus"]):not([id^="QU_card_img_time"]):not([id^="QU_card_new_icon"]),
html.h5p div[id^="QD_card_"]:not([id^="QD_card_btn"]):not([id^="QD_card_focus"]):not([id^="QD_card_img_time"]):not([id^="QD_card_new_icon"])
{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 964px !important;
    height: 183px !important;
    margin: 0 0 8px 0 !important;
    background: url(../image/11_quest/h5p/quest_bg.png) no-repeat 0 0 !important;
    background-size: 964px 183px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
    text-shadow: none !important;
}

/* 줄 왼쪽 뱃지(113x124): 줄 그림의 보이는 카드(y 1~175, 가운데 88) 세로 가운데 -> top 26 (2026-09-12 CEO 지시).
   원본 요소가 절대위치가 아니라 left/top 이 먹지 않고 줄 왼쪽 위에 붙어 있었다 */
html.h5p img[id^="Img_QU_card_icon_"],
html.h5p img[id^="Img_QD_card_icon_"],
html.h5p div[id^="Img_QU_card_icon_"],
html.h5p div[id^="Img_QD_card_icon_"]
{
    display: block !important;
    position: absolute !important;
    left: 28px !important;
    top: 26px !important;
    width: 113px !important;
    height: 124px !important;
    background: url(../image/11_quest/h5p/quest_badge1.png) no-repeat 0 0 !important;
    background-size: 113px 124px !important;
}

/* 줄 제목: 목록은 미션 묶음 이름, 상세는 미션 내용 */
html.h5p div[id^="Txt_1_QU_card_"],
html.h5p div[id^="Txt_2_QD_card_"]
{
    display: block !important;
    left: 164px !important;
    top: 31px !important;
    width: 440px !important;
    height: 60px !important;
    line-height: 60px !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    color: #3b3003 !important;  /* 미션 항목 글자색 (2026-09-12 CEO 지시) */
    text-align: left !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 가이드에 없는 원본 요소: 목록 3칸 숫자, 상세 단계 숫자/보상 글자/보상 아이콘, NEW, 옛 판때기, 포커스 */
html.h5p div[id^="Txt_2_QU_card_"],
html.h5p div[id^="Txt_3_QU_card_"],
html.h5p div[id^="Txt_4_QU_card_"],
html.h5p div[id^="Txt_1_QD_card_"],
html.h5p div[id^="Txt_3_QD_card_"],
html.h5p div[id^="Txt_4_QD_card_"],
html.h5p [id^="QD_gold_icon_"],
html.h5p [id^="QD_ruby_icon_"],
html.h5p [id^="QU_card_new_icon_"],
html.h5p [id^="QD_card_new_icon_"],
html.h5p [id^="Img_QU_card_title_"],
html.h5p [id^="Img_QD_card_title_"],
html.h5p [id^="Img_QD_card_char_"],
html.h5p [id^="QU_card_img_time_"],
html.h5p [id^="QD_card_img_time_"],
html.h5p [id^="QD_card_btn_focus_"]
{
    display: none !important;
}

/* ---- 받을 보상이 있는 목록 줄: 오른쪽 위 N 표시 (2026-09-14 CEO 지시) ----
   작던 N 을 CEO 가 준 새 그림(quest_new_n 66x66, 원래 크기)으로 바꾸고 '상세보기' 쪽 오른쪽 위 모서리로 옮겼다.
   목록 상자가 가로로 잘라내므로(overflow-x hidden) 줄 밖이 아니라 줄 안 모서리(964 - 66 = 898)에 둔다.
   상세보기 화살표(y 74~)보다 위에서 끝나 겹치지 않는다 */
/* 살짝 더 위로(줄 위로 12 올라오게) 올리고, 커졌다 작아지는 모션을 계속 준다 (2026-09-14 CEO 지시).
   올라온 부분과 커진 크기는 목록 상자 위/좌우 여백(24 / 30) 안에 들어온다 */
/* 다시 왼쪽 위 모서리로 옮김 (2026-09-14 CEO 지시): 오른쪽에 있을 때와 대칭으로 줄 안 왼쪽 끝 0, 높이는 그대로 -12 */
/* 2026-09-21 CEO 지시: N 그림(quest_new_n) 대신 빨간 동그라미 + 흰 테두리 + 그림자 (이벤트 버튼 알림 점과 같은 모양).
   예전 N 그림(66)과 같은 자리/크기 */
html.h5p .QPR_new
{
    position: absolute !important;
    /* 2026-09-22 CEO 지시: 줄 모서리 대신 왼쪽 미션 뱃지(113x124, 줄 안 28,26)의 오른쪽 위에 붙인다 (앱 아이콘 알림처럼).
       점 44 의 가운데를 뱃지 오른쪽 위(128, 36)에 */
    left: 110px !important;	/* 점 36 의 가운데를 (128, 36) 에 */
    right: auto !important;
    top: 18px !important;
    width: 36px !important;	/* 54 -> 44 -> 36 (2026-09-22 CEO 지시 - 너무 크다, 폰 약 12dp) */
    height: 36px !important;
    box-sizing: border-box;
    border: 3px solid #ffffff;	/* 흰 테두리 6 -> 3 (2026-09-22 CEO 지시 - 너무 두껍다) */
    border-radius: 50%;
    background: -webkit-radial-gradient(35% 30%, circle, #ff6b5e 0%, #e8261c 55%, #c3140c 100%);
    background: radial-gradient(circle at 35% 30%, #ff6b5e 0%, #e8261c 55%, #c3140c 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
    z-index: 5;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: h5pq_new_pulse 1.2s ease-in-out infinite;
    animation: h5pq_new_pulse 1.2s ease-in-out infinite;
}
@-webkit-keyframes h5pq_new_pulse
{
    0%, 100% { -webkit-transform: scale(1); }
    50%      { -webkit-transform: scale(1.06); }	/* 1.15 -> 1.06 (2026-09-22 CEO 지시 - 커질 때 과하다) */
}
@keyframes h5pq_new_pulse
{
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* ---- 진행바: 그림 속 검은 틀(x163~532, y112~137 - quest_bg 수정본 2026-09-11) 위에 노란 채움 + (현재/목표) ---- */
html.h5p .QPR_bar
{
    position: absolute;
    left: 163px;
    top: 112px;
    width: 370px;
    height: 26px;
    pointer-events: none;
}
html.h5p .QPR_fill
{
    position: absolute;
    left: 0;
    top: 0;
    height: 26px;
    background: #ffe94d;
    border: 3px solid #3a2a10;
    border-radius: 13px;
    box-sizing: border-box;
}
html.h5p .QPR_txt
{
    position: absolute;
    left: 0;
    top: -9px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #ffffff;
    text-shadow: -2px 0 0 #3a2a10, 2px 0 0 #3a2a10, 0 -2px 0 #3a2a10, 0 2px 0 #3a2a10, -2px -2px 0 #3a2a10, 2px 2px 0 #3a2a10, -2px 2px 0 #3a2a10, 2px -2px 0 #3a2a10;
    white-space: nowrap;
}

/* ---- 목록 줄 오른쪽 '상세보기 >' (줄 전체가 버튼이라 글자/화살표는 표시만) ----
   글자가 길어져(목록 -> 상세보기, 2026-09-12) 오른쪽 끝을 예전 '목록' 끝(x 877)에 고정해 화살표(x 893)와 간격을 지킨다 */
html.h5p .QPR_more
{
    position: absolute;
    left: auto;
    right: 87px;
    top: 60px;
    height: 56px;
    line-height: 56px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #3b3003;
    white-space: nowrap;
    pointer-events: none;
}
html.h5p .QPR_more_arrow
{
    position: absolute;
    left: 893px;
    top: 74px;
    width: 25px;
    height: 28px;
    pointer-events: none;
}

/* ---- 상세 줄 보상: 아이콘(41x39) + 수량. 두 줄이면 루비 위 / 금화 아래 ---- */
/* 보상 글자를 키우고(32 -> 40, 2026-09-12 CEO 지시) 오른쪽 끝(x 800)을 보상받기 버튼(x 819) 앞에 고정해
   왼쪽 빈 공간(진행바 끝 533 이후)으로 늘어나게 한다 */
/* 보상이 짧으면 오른쪽으로 쏠려 보여, 진행바 끝(533)과 보상받기 버튼(819) 사이 칸(545~807) 가운데 정렬로 바꿨다 (2026-09-14 CEO 지시) */
html.h5p .QPR_reward
{
    position: absolute;
    left: 545px;
    right: auto;
    width: 262px;
    text-align: center;
    height: 48px;
    line-height: 48px;
    font-size: 40px;
    font-weight: 800;
    color: #3b3003;  /* 미션 항목 글자색 (2026-09-12 CEO 지시) */
    white-space: nowrap;
    pointer-events: none;
}
html.h5p .QPR_reward img
{
    position: relative;
    top: 4px;       /* 줄 높이 48 안에서 아이콘(39) 세로 가운데 */
    width: 41px;
    height: 39px;
    margin-right: 8px;
    vertical-align: top;
}
html.h5p .QPR_reward_top    { top: 38px; }  /* 줄 높이가 44 -> 48 로 커져 가운데가 예전과 같도록 */
html.h5p .QPR_reward_bottom { top: 93px; }
/* 보상이 한 가지뿐인 줄: 줄 세로 가운데 (2026-09-14 CEO 지시 - 아래로 치우쳐 보였다).
   두 줄 묶음(38~141, 가운데 89.5)과 보상받기 버튼(30~152, 가운데 91) 사이인 90 에 맞춘다 = 90 - 24.
   두 가지(루비 위 / 금화 아래)는 38 / 93 두 줄 그대로 */
html.h5p .QPR_reward_single { top: 66px; }

/* ---- 상세 줄 보상받기 버튼(121x122): 받을 수 있으면 초록, 아니면 회색. 원본 글자 대신 두 줄 글자 ---- */
html.h5p #S_QUESTDETAIL_div div[id^="QD_card_btn_"]:not([id^="QD_card_btn_focus"])
{
    position: absolute !important;
    left: 819px !important;
    top: 30px !important;
    width: 121px !important;
    height: 122px !important;
    line-height: normal !important;
    padding: 0 !important;
    background: url(../image/11_quest/h5p/quest_noclaim_bt.png?v=2) no-repeat 0 0 !important;
    background-size: 121px 122px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
    color: transparent !important;
}
/* 받을 수 있는 보상받기 버튼은 메인화면 입장 버튼처럼 제자리에서 가로로 -> 세로로 늘었다 줄었다 한다 (2026-09-14 CEO 지시).
   값은 h5_portrait_mainmenu.css MMP_enter_pulse 와 같다. 가장 커져도(가로 130 / 세로 133) 줄 안에 들어온다 */
html.h5p #S_QUESTDETAIL_div div[id^="QD_card_btn_"][data-state="1"]
{
    background-image: url(../image/11_quest/h5p/quest_claim_bt.png) !important;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: h5pq_claim_pulse 1.2s ease-in-out infinite;
    animation: h5pq_claim_pulse 1.2s ease-in-out infinite;
}
@-webkit-keyframes h5pq_claim_pulse
{
    0%, 50%, 100% { -webkit-transform: scale(1, 1); }
    25%           { -webkit-transform: scale(1.07, 1); }
    75%           { -webkit-transform: scale(1, 1.09); }
}
@keyframes h5pq_claim_pulse
{
    0%, 50%, 100% { transform: scale(1, 1); }
    25%           { transform: scale(1.07, 1); }
    75%           { transform: scale(1, 1.09); }
}
html.h5p #S_QUESTDETAIL_div div[id^="QD_card_btn_"]:not([id^="QD_card_btn_focus"])::after
{
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 0;
    width: 97px;
    height: 116px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    line-height: 42px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -2px 0 0 #3a2a10, 2px 0 0 #3a2a10, 0 -2px 0 #3a2a10, 0 2px 0 #3a2a10, -2px -2px 0 #3a2a10, 2px 2px 0 #3a2a10, -2px 2px 0 #3a2a10, 2px -2px 0 #3a2a10;
}

/* ---- 모두받기(328x95): 목록은 원본 버튼, 상세는 세로 전용 버튼. 받을 게 없으면 회색 ---- */
html.h5p #S_QUEST_div #QU_get_all,
html.h5p #QDP_allclaim
{
    position: absolute !important;
    left: 688px !important;
    margin-left: 0 !important;
    top: auto !important;
    bottom: 107px !important;  /* 가이드 126 을 메인화면 하단 버튼처럼 19 내림 (2026-09-12) */
    bottom: -webkit-calc(107px - var(--h5p_sub_drop, 0px)) !important;
    bottom: calc(107px - var(--h5p_sub_drop, 0px)) !important;
    width: 328px !important;
    height: 95px !important;
    background: url(../image/11_quest/h5p/quest_allclaim_gray_bt.png?v=2) no-repeat 0 0 !important;
    background-size: 328px 95px !important;
    cursor: pointer;
}
html.h5p #S_QUEST_div #QU_get_all[data-state="1"],
html.h5p #QDP_allclaim[data-state="1"]
{
    background-image: url(../image/11_quest/h5p/quest_allclaim_bt.png) !important;
}
html.h5p #S_QUEST_div #QU_get_all_bg,
html.h5p #S_QUEST_div #QU_get_all_txt,
html.h5p #S_QUEST_div #QU_get_all_focus
{
    display: none !important;
}
html.h5p #S_QUEST_div #QU_get_all::after,
html.h5p #QDP_allclaim::after
{
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -2px 0 0 #3a2a10, 2px 0 0 #3a2a10, 0 -2px 0 #3a2a10, 0 2px 0 #3a2a10, -2px -2px 0 #3a2a10, 2px 2px 0 #3a2a10, -2px 2px 0 #3a2a10, 2px -2px 0 #3a2a10;
}
html.h5p #QDP_allclaim:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

/* ---- 안내문('초기화까지 N 남음'): 도신대전 시즌 상자(#SMOP_season)와 같은 알약으로 바꾸고,
       타이틀 글자와 너무 붙어 있어 아래로 내렸다 (394 -> 440, 2026-09-21 CEO 지시) ---- */
html.h5p #S_QUEST_div #QU_info,
html.h5p #S_QUESTDETAIL_div #QD_info
{
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    top: 410px !important;
    top: -webkit-calc(var(--h5p_timer_top, 430px) - var(--h5p_title_up, 20px)) !important;
    top: calc(var(--h5p_timer_top, 430px) - var(--h5p_title_up, 20px)) !important;	/* 공통 남은 시간 알약 높이 (2026-09-22) */
    bottom: auto !important;
    height: 60px !important;
    line-height: 54px !important;
    box-sizing: border-box !important;
    padding: 0 44px 0 32px !important;	/* 좌우 여유 16/24 -> 32/44 (2026-09-22 CEO 지시 - 남은 시간 알약 공통) */
    /* 시계와 글자를 flex 로 세로 가운데 맞춘다 - 글자 기준선에 기대면 화면마다 시계 높이가 달라졌다 (2026-10-02 CEO 지적) */
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    background: rgba(38, 26, 16, 0.72) !important;
    border: 3px solid #c9a45c !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
    white-space: nowrap;
}
html.h5p #S_QUEST_div #QU_info::before,
html.h5p #S_QUESTDETAIL_div #QD_info::before
{
    content: attr(data-mark);
}
/* 상세 화면은 안내문을 쓰지 않는다 - 그 자리에 미션 이름 글자(#QD_title)가 온다 (2026-09-12 CEO 지시) */
html.h5p #S_QUESTDETAIL_div #QD_info
{
    display: none !important;
}

/* 목록 안내문 자리: 시계 아이콘(co_time_icon 50x50, 2026-10-02 CEO 교체) + '초기화까지 N일 M분 남음' (S_quest_portrait.js 가 채운다) */
html.h5p .QPR_clock
{
    width: 38px;     /* 42 -> 38 (2026-10-02 CEO 지시 - 살짝 줄임). 도신대전 #SMOP_season_clock 과 같다 */
    height: 38px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 16px;	/* 10 -> 16 (2026-09-22 CEO 지시 - 시계와 글자 사이 여유) */
    vertical-align: middle;
}
html.h5p .QPR_reset_txt
{
    vertical-align: middle;
}

/* 태블릿: 리스트 상자를 좌우 여분(--h5p_extra_x)만큼 화면 끝까지 넓히고 같은 만큼 안쪽 여백을 더해, 줄 자리는 그대로 두고
   가로 잘라내기 경계만 1080 상자 끝 -> 화면 끝으로 옮긴다 (2026-09-15 CEO 지적 - 줄이 1080 경계에서 잘려 사라졌다). 폰은 여분 0 이라 같다 */
/* 2026-09-21: 넓히는 건 줄이 날아다니는 동안(H5PQ_moving)만 한다. 늘 넓혀 두면 상자 오른쪽 끝에 붙는 스크롤바가
   1080 밖 여백(태블릿 162)까지 밀려나 목록에서 멀어졌다. 안쪽 여백이 같이 늘어 줄 자리/줄 폭은 두 상태가 똑같다 */
html.h5p.H5PQ_moving #s_QUEST_card,
html.h5p.H5PQ_moving #s_QUESTDETAIL_card
{
    left: -webkit-calc(28px - var(--h5p_extra_x, 0px)) !important;
    left: calc(28px - var(--h5p_extra_x, 0px)) !important;
    width: -webkit-calc(1024px + 2 * var(--h5p_extra_x, 0px)) !important;
    width: calc(1024px + 2 * var(--h5p_extra_x, 0px)) !important;
    padding-left: -webkit-calc(30px + var(--h5p_extra_x, 0px)) !important;
    padding-left: calc(30px + var(--h5p_extra_x, 0px)) !important;
    padding-right: -webkit-calc(8px + var(--h5p_extra_x, 0px)) !important;
    padding-right: calc(8px + var(--h5p_extra_x, 0px)) !important;
}

/* 넓혀 둔 동안(줄이 날아다니는 0.5초 남짓)에는 스크롤바가 옆으로 밀리므로 잠깐 보이지 않게 한다.
   2026-10-07 CEO 지적: 막대 테두리를 box-shadow 로 그리게 바꾼 뒤에도 이 규칙은 배경만 지워서,
   미션 화면에서만 빈 테두리가 0.5초쯤 남아 보였다 (랭킹은 이런 규칙이 없어 멀쩡했다). 테두리도 같이 지운다 */
html.h5p.H5PQ_moving #s_QUEST_card::-webkit-scrollbar-track,
html.h5p.H5PQ_moving #s_QUEST_card::-webkit-scrollbar-thumb,
html.h5p.H5PQ_moving #s_QUESTDETAIL_card::-webkit-scrollbar-track,
html.h5p.H5PQ_moving #s_QUESTDETAIL_card::-webkit-scrollbar-thumb
{
    background: transparent;
    background-image: none;
    box-shadow: none;
}

/* 미션 줄이 움직이는 동안만 1080 세로 상자의 잘라내기를 푼다 (S_quest_portrait.js mark_moving, 2026-09-15 CEO 지적) */
html.h5p.H5PQ_moving #h5p_legacy
{
    overflow: visible;
}

/* ---- 미션 목록/상세 줄 슬라이드 연출 (S_quest_portrait.js 가 클래스를 붙인다, 2026-09-11 CEO 지시) ----
   진입: 목록 줄은 왼쪽에서, 상세 줄은 오른쪽에서 하나씩 들어온다 (줄마다 시차는 JS 가 animation-delay 로 준다)
   선택: 목록 줄이 왼쪽으로 빠져나간다. 시간 값은 JS 의 H5PQ_MOTION 과 같아야 한다.
   리스트 상자가 가로 넘침을 잘라내므로(overflow-x hidden) 상자 가장자리에서 나타나고 사라진다 */
/* 부드럽게 (2026-09-15 CEO 지적 '딱딱하다, 부자연스럽다'): 화면 끝에서 끝까지(110%) 날아오던 것을 줄 폭의 36% 만 미끄러지며
   투명 -> 선명으로 스며들고(들어오기), 반대로 흐려지며 빠진다(나가기). 짧은 거리라 속도가 튀지 않는다.
   36% 는 1080 상자 밖으로 조금 나가므로 움직이는 동안 상자 잘라내기를 푸는 처리(H5PQ_moving)와 넓힌 리스트 상자는 그대로 둔다 */
@-webkit-keyframes H5PQ_in_left
{
    from { -webkit-transform: translateX(-36%); opacity: 0; }
    to   { -webkit-transform: translateX(0);    opacity: 1; }
}
@keyframes H5PQ_in_left
{
    from { transform: translateX(-36%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@-webkit-keyframes H5PQ_in_right
{
    from { -webkit-transform: translateX(36%); opacity: 0; }
    to   { -webkit-transform: translateX(0);   opacity: 1; }
}
@keyframes H5PQ_in_right
{
    from { transform: translateX(36%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
@-webkit-keyframes H5PQ_out_left
{
    from { -webkit-transform: translateX(0);    opacity: 1; }
    to   { -webkit-transform: translateX(-36%); opacity: 0; }
}
@keyframes H5PQ_out_left
{
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(-36%); opacity: 0; }
}
/* 상세에서 뒤로 갈 때: 상세 줄은 반대쪽(오른쪽)으로 빠진다 (2026-09-29 CEO 지시) */
@-webkit-keyframes H5PQ_out_right
{
    from { -webkit-transform: translateX(0);   opacity: 1; }
    to   { -webkit-transform: translateX(36%); opacity: 0; }
}
@keyframes H5PQ_out_right
{
    from { transform: translateX(0);   opacity: 1; }
    to   { transform: translateX(36%); opacity: 0; }
}

/* 들어오기: 시작 전(시차 대기 중)에도 화면 밖에 있도록 both.
   360ms -> 220ms, 처음에 빠르게 들어와 끝에서 탁 서는 곡선으로 (더 빠르게 슉슉슉 - 2026-09-15 CEO 지시) */
/* 들어오기 380ms, 끝으로 갈수록 부드럽게 감속하는 곡선 (2026-09-15 CEO 지적 - 220ms/급정거 곡선이 딱딱했다). 시간은 JS H5PQ_MOTION.in_ms 와 같아야 한다 */
html.h5p .H5PQ_in_left
{
    -webkit-animation: H5PQ_in_left 260ms cubic-bezier(0.25, 0.8, 0.35, 1) both;
    animation: H5PQ_in_left 260ms cubic-bezier(0.25, 0.8, 0.35, 1) both;
}
html.h5p .H5PQ_in_right
{
    -webkit-animation: H5PQ_in_right 260ms cubic-bezier(0.25, 0.8, 0.35, 1) both;
    animation: H5PQ_in_right 260ms cubic-bezier(0.25, 0.8, 0.35, 1) both;
}
/* 나가기: 끝난 자리(화면 밖)에 머문다 - 곧바로 상세 화면으로 바뀐다 */
/* 나가기 280ms, 천천히 시작해 천천히 끝나는 곡선 (예전: 가만히 있다가 마지막에 휙 사라지는 곡선). 시간은 JS H5PQ_MOTION.out_ms 와 같아야 한다 */
html.h5p .H5PQ_out_left
{
    -webkit-animation: H5PQ_out_left 190ms cubic-bezier(0.45, 0, 0.55, 1) both;
    animation: H5PQ_out_left 190ms cubic-bezier(0.45, 0, 0.55, 1) both;
    pointer-events: none;
}
html.h5p .H5PQ_out_right
{
    -webkit-animation: H5PQ_out_right 190ms cubic-bezier(0.45, 0, 0.55, 1) both;
    animation: H5PQ_out_right 190ms cubic-bezier(0.45, 0, 0.55, 1) both;
    pointer-events: none;
}
/* 목록 -> 상세 전환: 줄이 반쯤 나갔을 때 상세가 들어오기 시작하고, 남은 동안 목록 화면은 줄 목록만 보인다 (2026-09-15 CEO 지시).
   S_quest_portrait.js keep_leaving 이 원본 전환 직전에 붙였다 뗀다. 원본이 넣는 display none 을 이 동안만 block 으로 붙잡는다 -
   한 번이라도 감췄다 보이면 줄 애니메이션이 처음부터 다시 돈다. 제목/버튼/안내는 숨기고, 전체 누르기를 막아 상세 화면 입력을 가리지 않는다 */
html.h5p #S_QUEST_div.H5PQ_leaving
{
    display: block !important;
}
html.h5p #S_QUEST_div.H5PQ_leaving,
html.h5p #S_QUEST_div.H5PQ_leaving *
{
    pointer-events: none !important;
}
/* 2026-09-29 CEO 지시: 위쪽 타이틀(과 재화바)은 그대로 둔다 - 나가는 화면에서 감췄다가 들어오는 화면에서 다시 그려져
   글자가 한 번 깜빡여 자리가 움직이는 것처럼 보였다. 두 화면 다 같은 자리 같은 글자라 겹쳐 있어도 가만히 있는 것으로 보인다 */
html.h5p #S_QUEST_div.H5PQ_leaving > *:not(#s_QUEST_card):not(#QU_title_txt):not(#H5PTOP_bar):not(.QDP_titlebg)
{
    visibility: hidden !important;
}
/* 기기 '동작 줄이기'(윈도우 애니메이션 효과 끔 등) 설정과 상관없이 연출을 보여준다.
   그 설정에서 끄도록 했더니 PC 브라우저에서 연출이 아예 안 보였다 (2026-09-11 CEO 확인) */

/* 2026-09-21 CEO 지시로 리스트 스크롤바를 다시 보이게 했다 (내용이 더 있다는 걸 알리려고).
   막대 자리(22)는 줄 오른쪽 바깥에 따로 잡아 두므로 줄 위를 덮지 않는다 - 위 #s_QUEST_card 규칙 참조 */

/* 로딩(로고) 화면도 메인화면과 같은 배경 위에 올린다 (2026-09-08 CEO 지시).
   예전에는 인트로가 흰 화면이라 좌우로 로비 아트가 비쳐 보여 흰색으로 덮었는데,
   인트로 아트를 빼면서 배경을 메인과 통일했으므로 덮을 이유가 없어졌다.
   (h5_portrait.js 가 로고 화면 동안 h5p_splash 클래스를 붙인다 - 클래스 자체는 유지) */

/* ============ 화면 타이틀 글자 (h5_portrait_title.js, 2026-09-11 CEO 지시) ============ */
/* 서브화면 타이틀 그림(slogo)은 감추고 같은 자리에 설정 화면과 같은 글자 타이틀을 둔다.
   그림 자리(top 345, 높이 123)의 세로 중앙 406 에 높이 150 글자 상자를 맞춘다 */
html.h5p #MS_title,
html.h5p #CH_title,
html.h5p #CR_title_bg,
html.h5p #GA_title,
html.h5p #QU_title,
html.h5p #QD_title_bg,
html.h5p #DLT_title,
html.h5p #AGD_title
{
    display: none !important;
}

html.h5p .H5PT_title
{
    position: absolute;
    left: 0;
    top: 331px;
    width: 1080px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
    font-size: 96px;
    font-weight: 800;
    letter-spacing: 4px;
    white-space: nowrap;
    color: transparent;
    pointer-events: none;
}
html.h5p .H5PT_title::before,
html.h5p .H5PT_title::after
{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px;
    line-height: 150px;
}
/* 글자색: 흰색 글자 + 진한 갈색 테두리 (2026-10-07 CEO 지시로 크림색 #fff6e3 -> 흰색) */
html.h5p .H5PT_title::before
{
    color: #4a2710;
    -webkit-text-stroke: 18px #4a2710;
}
html.h5p .H5PT_title::after
{
    color: #ffffff;
}

/* ---- 타이틀 글자 앞 아이콘 (2026-10-07 CEO 지시, 2026-10-10 CEO 지시로 자리·크기 다시 잡음) ----
   메인화면 아래 버튼에 쓰는 아이콘(134x104)을 그대로 줄여 쓴다.

   2026-10-10 CEO 지적: 아이콘이 글자보다 작고 살짝 내려가 있다. 가운데도 조금 어긋난 화면이 있다.
   흐름(inline-block)에 두고 vertical-align 으로 맞추던 것을 그만두고, 아이콘을 띄워(absolute)
   아래 실측값으로 직접 놓는다. 글자는 ::before/::after 가 상자 가운데에 그리므로 미는 양도 같이 적는다.

   잰 값 (글자 96px, 자간 4, 테두리 18 -> 바깥으로 9):
     줄 높이 150 안에서 글자 밑선은 104. 테두리까지 친 글자 높이는 상점·미션·랭킹 108 / 룰렛 109 / 금고 106.
     아이콘 PNG 134x104 안에서 그림이 실제로 보이는 칸 - 상점 101x94(좌17 상5) / 미션 94x90(좌20 상7)
     / 룰렛 90x94(좌23 상4) / 금고 98x92(좌18 상6) / 랭킹 107x93(좌14 상6).
   맞춘 규칙:
     ① 아이콘의 "보이는 그림" 높이 = 테두리까지 친 글자 높이, 윗변·아랫변도 글자와 같은 줄에.
     ② 아이콘 보이는 오른끝과 글자 테두리 왼끝 사이를 28 로 (다섯 화면 모두 같게).
     ③ 그 둘을 묶은 "보이는 덩어리" 의 가운데를 540 에 둔다 (물음표는 이 계산에서 뺀다).
   글자나 아이콘 그림을 바꾸면 이 값들을 다시 재야 한다 */
html.h5p .H5PT_icon
{
    position: absolute;
    display: block;
    margin: 0;
    background: center/contain no-repeat;
}
html.h5p .H5PT_ic_shop     .H5PT_icon { width: 154px;   height: 119.5px; left: 355.8px; top: 14.3px; }
html.h5p .H5PT_ic_quest    .H5PT_icon { width: 160.8px; height: 124.8px; left: 354.4px; top: 11.6px; }
html.h5p .H5PT_ic_roulette .H5PT_icon { width: 155.4px; height: 120.6px; left: 352.5px; top: 15.4px; }
html.h5p .H5PT_ic_safe     .H5PT_icon { width: 154.4px; height: 119.8px; left: 352.6px; top: 15.1px; }
html.h5p .H5PT_ic_ranking  .H5PT_icon { width: 155.6px; height: 120.8px; left: 355.9px; top: 13px; }
/* 글자를 오른쪽으로 미는 양 - 아이콘이 차지한 자리만큼이라 화면마다 다르다 */
html.h5p .H5PT_title.H5PT_ic_shop::before,
html.h5p .H5PT_title.H5PT_ic_shop::after
{
    -webkit-transform: translateX(77.7px);
    transform: translateX(77.7px);
}
html.h5p .H5PT_title.H5PT_ic_quest::before,
html.h5p .H5PT_title.H5PT_ic_quest::after
{
    -webkit-transform: translateX(72.6px);
    transform: translateX(72.6px);
}
html.h5p .H5PT_title.H5PT_ic_roulette::before,
html.h5p .H5PT_title.H5PT_ic_roulette::after
{
    -webkit-transform: translateX(69.9px);
    transform: translateX(69.9px);
}
html.h5p .H5PT_title.H5PT_ic_safe::before,
html.h5p .H5PT_title.H5PT_ic_safe::after
{
    -webkit-transform: translateX(72.6px);
    transform: translateX(72.6px);
}
html.h5p .H5PT_title.H5PT_ic_ranking::before,
html.h5p .H5PT_title.H5PT_ic_ranking::after
{
    -webkit-transform: translateX(80.8px);
    transform: translateX(80.8px);
}
html.h5p .H5PT_ic_shop     .H5PT_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_charge.png?v=2); }
html.h5p .H5PT_ic_quest    .H5PT_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_quest.png?v=2); }
html.h5p .H5PT_ic_roulette .H5PT_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_roulette.png?v=3); }
html.h5p .H5PT_ic_ranking  .H5PT_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_ranking.png?v=2); }
html.h5p .H5PT_ic_safe     .H5PT_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_lock.png?v=2); }

/* 룰렛: 금고 타이틀과 같은 높이로 올린다 (2026-09-18 CEO 지시). 룰렛 본체는 아래 GAP_scale 이 따로 올린다 */
/* 재화바가 있는 화면은 275 로 통일 (2026-09-21 CEO 지시 - 245 는 상점 배경 그림과 부딪혔다) */
html.h5p #GA_title_txt
{
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
}

/* 약관 전문: 그림 자리(top 165, 높이 91.5)의 세로 중앙 211 */
html.h5p #AGD_title_txt
{
    top: 136px;
}

/* 미션 상세: 미션 이름은 타이틀 그림 아래 띠 위에 얹혀 있었다. 그림을 감춘 대신 띠를 CSS 로 그린다 */
html.h5p #QD_title
{
    left: 50% !important;
    margin-left: -300px !important;
    top: 478px !important;
    width: 600px !important;
    height: 72px !important;
    line-height: 62px !important;
    padding: 0 24px !important;
    background: #f6e3b4 !important;
    border: 5px solid #7a5a32 !important;
    border-radius: 36px !important;
    box-sizing: border-box !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ 설정 화면 틀: 우편함처럼 메인 배경 위 딤 + 왼쪽에서 밀려 들어오기 (2026-09-14 CEO 지시) ============ */
/* 설정 배경/구름 그림은 감추고 캔버스 전체 딤(#h5p_dim z50, h5_portrait.js H5P_DIM_LIST)이 깔린다.
   z 55: 딤·메인(z40) 위, 설정에서 여는 도움말/공지/출석(z60)·약관(z200)·안내 토스트(z200) 아래 */
html.h5p #S_SETTING_div
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 55;
}
html.h5p #S_SETTING_div:empty
{
    display: none !important;
}
html.h5p #Img_ST_background,
html.h5p #Img_ST_cloud1,
html.h5p #Img_ST_cloud2
{
    display: none !important;
}
/* 설정/우편함이 들어올 때 화면 전체(글자·버튼)가 왼쪽 밖에서 제자리로 (h5_portrait.js h5_portrait_slide_in 이 클래스를 붙인다).
   딤은 따로 페이드 인(#h5p_dim). 시간은 h5_portrait.js H5P_SLIDE_MS 와 같게 */
html.h5p .h5p_slide_in
{
    -webkit-animation: h5p_slide_in 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation: h5p_slide_in 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* 태블릿처럼 캔버스가 1080 보다 넓으면 1080 상자 밖 좌우 여분(--h5p_extra_x)까지 더 밀어 화면 끝 밖에서 들어오고 나간다.
   움직이는 동안만 1080 상자의 잘라내기를 푼다 (html.h5p_sliding, h5_portrait.js h5_portrait_sliding_mark) - 2026-09-14 CEO 지시:
   화면 가운데(1080 경계)에서 UI 가 잘려 사라지지 않게 */
html.h5p.h5p_sliding #h5p_legacy
{
    overflow: visible;
}
@-webkit-keyframes h5p_slide_in
{
    from { -webkit-transform: translateX(-webkit-calc(-100% - var(--h5p_extra_x, 0px))); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes h5p_slide_in
{
    from { transform: translateX(calc(-100% - var(--h5p_extra_x, 0px))); }
    to   { transform: translateX(0); }
}
/* 이전 버튼으로 나갈 때는 반대로 왼쪽 밖으로 빨려 나간다 (2026-09-14 CEO 지시, h5_portrait.js h5_portrait_slide_out_to_main, 시간 H5P_SLIDE_OUT_MS) */
html.h5p .h5p_slide_out
{
    -webkit-animation: h5p_slide_out 180ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
    animation: h5p_slide_out 180ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
    pointer-events: none;
}
@-webkit-keyframes h5p_slide_out
{
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-webkit-calc(-100% - var(--h5p_extra_x, 0px))); }
}
@keyframes h5p_slide_out
{
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--h5p_extra_x, 0px))); }
}

/* ============ 설정 (세로 전용 SETP_, 2026-09-11 CEO 지시) ============ */
/* 2026-09-14 CEO 가이드(맞고 - 설정 화면) 그림 적용. 그림은 모두 원래 크기 그대로, 좌표는 1080 기준 가이드 실측.
   줄 st_bt_default(964x151) / 버튼 칸 st_bt_default_small(468x183) / 문의 카드 st_bt_default_small2(964x183)
   아이콘 st_icon*(110x88) / 스위치 setting_onbg·offbg(202x70) / 복사 quest_claim_bt(121x122) - image/1_mainmenu/h5p/setting */
html.h5p #SETP_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    /* z-index 를 주지 않는다 - 이 위에 뜨는 도움말/공지/약관 화면(뒤 형제, z 없음)에 가려져야 한다 */
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
    pointer-events: none;   /* 빈 곳 터치는 뒤로 넘기고 버튼만 받는다 */
}

/* 타이틀 두 개 '설정' / '고객지원': 가이드 글자 가운데 y 305 / 1050.
   흰 테두리 층(::before) 위에 갈색 글자 층(::after)을 겹친다 */
html.h5p #SETP_title,
html.h5p #SETP_title2
{
    position: absolute;
    left: 0;
    width: 1080px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 96px;
    font-weight: 800;
    letter-spacing: 4px;
    color: transparent;
}
/* 설정에는 상단 재화바가 없어 타이틀을 도움말/약관과 같은 높이(136)로 올리고,
   아래 줄/칸도 전부 같은 94 만큼 함께 올린다 (2026-09-21 CEO 지시) */
/* '고객지원' 묶음(타이틀 + 2x2 칸 + 바닥 줄)만 100 내려 위 설정 줄과 여백을 벌린다 (2026-09-21 CEO 지시, 60 -> 100) */
html.h5p #SETP_title  { top: 166px; }	/* 2026-10-13 CEO 지시: 이전 버튼과 붙어 보여 30 내림 (136 -> 166). 아래 줄/칸은 그대로 */
html.h5p #SETP_title2 { top: 1096px; }  /* 게임 속도 줄을 되살려 한 줄(164) 내림 (2026-09-29 CEO 지시, 902 -> 1066) */
/* 가로 게임모드를 끈 동안은 게임모드 줄도 없으므로 한 줄(164) 더 올린다 (2026-09-18 CEO 지시, H5L.LANDSCAPE_ENABLED) */
html.h5p #SETP_root.SETP_no_mode #SETP_title2 { top: 932px; }	/* 게임 속도 줄 몫 164 내림 (2026-09-29) */
html.h5p #SETP_root.SETP_no_mode #SETP_grid { top: 1087px; }
html.h5p #SETP_root.SETP_no_mode #SETP_foot { top: 1502px; }
html.h5p #SETP_title::before,
html.h5p #SETP_title::after,
html.h5p #SETP_title2::before,
html.h5p #SETP_title2::after
{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px;
    line-height: 150px;
}
/* 다른 화면 타이틀(.H5PT_title)과 같은 색: 크림색 글자 + 진한 갈색 테두리 (2026-09-12) */
html.h5p #SETP_title::before,
html.h5p #SETP_title2::before
{
    color: #4a2710;
    -webkit-text-stroke: 18px #4a2710;
}
html.h5p #SETP_title::after,
html.h5p #SETP_title2::after
{
    color: #ffffff;
}

/* ---- 위: 설정 줄 3개 - 가이드 윗변 393 / 557 / 721 (줄 151 + 간격 13). 줄 안 크림색 칸 세로 가운데 75 ---- */
/* 타이틀과 같이 94 올렸다 (393 -> 299, 2026-09-21 CEO 지시) */
html.h5p #SETP_list
{
    position: absolute;
    left: 58px;
    top: 329px;	/* 2026-10-13 CEO 지시: 타이틀과 같이 30 내림 (299 -> 329) */
    width: 964px;
}
html.h5p .SETP_row
{
    position: relative;
    width: 964px;
    height: 151px;
    margin-bottom: 13px;
    background: url(../image/1_mainmenu/h5p/setting/st_bt_default.png) no-repeat 0 0;
    background-size: 964px 151px;
    pointer-events: auto;
    cursor: pointer;
}
html.h5p .SETP_row_icon
{
    position: absolute;
    left: 30px;
    top: 31px;
    width: 110px;
    height: 88px;
}
html.h5p .SETP_row_label
{
    position: absolute;
    left: 179px;
    top: 0;
    height: 150px;
    line-height: 150px;
    font-size: 46px;
    font-weight: 800;
    color: #4a2d0c;
}

/* 켜고 끄는 스위치: 그림(202x70) 위에 흰 손잡이(82x52). 꺼짐: 손잡이 왼쪽 + 오른쪽 OFF, 켜짐: 손잡이 오른쪽 + 왼쪽 ON */
html.h5p .SETP_switch
{
    position: absolute;
    left: 721px;
    top: 40px;
    width: 202px;
    height: 70px;
    background: url(../image/1_mainmenu/h5p/setting/setting_offbg.png) no-repeat 0 0;
    background-size: 202px 70px;
}
html.h5p .SETP_switch.SETP_on
{
    background-image: url(../image/1_mainmenu/h5p/setting/setting_onbg.png);
}
html.h5p .SETP_knob
{
    position: absolute;
    left: 12px;
    top: 9px;
    width: 82px;
    height: 52px;
    border-radius: 26px;
    background: #ffffff;
    -webkit-transition: left 0.15s;
    transition: left 0.15s;
}
html.h5p .SETP_on .SETP_knob
{
    left: 108px;
}
html.h5p .SETP_switch_txt
{
    position: absolute;
    left: 94px;
    top: 0;
    width: 108px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
}
html.h5p .SETP_on .SETP_switch_txt
{
    left: 0;
    width: 108px;
}

/* 설명 한 줄이 붙는 이름(게임판 방향) - 이름을 위로 올리고 아래에 작은 설명을 깐다 (2026-10-08 CEO 지시) */
html.h5p .SETP_row_label.SETP_has_sub
{
    top: 24px;
    height: 56px;
    line-height: 56px;
    font-size: 44px;
}
html.h5p .SETP_row_sub
{
    position: absolute;
    left: 0;
    top: 62px;
    width: 540px;
    height: 46px;
    line-height: 46px;
    font-size: 34px;
    font-weight: 600;
    color: #8a6a44;
    white-space: nowrap;
}

/* 게임 속도·게임모드 값: 켜짐 스위치 그림에 글자 (게임 속도는 누를 때마다 1배속 <-> 2배속) */
html.h5p .SETP_value
{
    position: absolute;
    left: 721px;
    top: 40px;
    width: 202px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    background: url(../image/1_mainmenu/h5p/setting/setting_onbg.png) no-repeat 0 0;
    background-size: 202px 70px;
}

/* ---- 아래: 2x2 버튼 - 칸 468x183, 가이드 윗변 1150 / 1360, 왼쪽 58 / 554 ---- */
html.h5p #SETP_grid
{
    position: absolute;
    left: 58px;
    top: 1251px;	/* 타이틀과 같이 94 올린 뒤(1051 -> 957), 고객지원 묶음만 100 내렸다 (2026-09-21 CEO 지시). 게임 속도 줄 몫 164 내림 (2026-09-29) */
    width: 964px;
    height: 393px;
}
html.h5p .SETP_cell
{
    position: absolute;
    width: 468px;
    height: 183px;
    background: url(../image/1_mainmenu/h5p/setting/st_bt_default_small.png) no-repeat 0 0;
    background-size: 468px 183px;
    pointer-events: auto;
    cursor: pointer;
}
html.h5p #SETP_cell_attend { left: 0;     top: 0; }
html.h5p #SETP_cell_notice { left: 496px; top: 0; }
html.h5p #SETP_cell_help   { left: 0;     top: 210px; }
html.h5p #SETP_cell_terms  { left: 496px; top: 210px; }

/* 칸 안: 아이콘 왼쪽, 이름은 아이콘 오른쪽 남은 폭 가운데 (크림색 칸 세로 가운데 86) */
html.h5p .SETP_cell_icon
{
    position: absolute;
    left: 38px;
    top: 42px;
    width: 110px;
    height: 88px;
}
html.h5p .SETP_cell_label
{
    position: absolute;
    left: 138px;
    top: 0;
    width: 320px;
    height: 172px;
    line-height: 172px;
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #4a2d0c;
}

/* 약관 칸: 버튼 하나에 두 줄 이름. 누르면 탭이 달린 약관 화면이 열린다 (2026-09-11 CEO 지시) */
html.h5p #SETP_terms_label
{
    top: 28px;
    height: 116px;
    line-height: 58px;
    font-size: 38px;
}

/* 누를 때 반응 */
html.h5p .SETP_row:active,
html.h5p .SETP_cell:active
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

/* 문의용 사용자 ID / 버전 + 복사 버튼 (2026-09-11 CEO 지시 - 둘이 한 곳에 같이 있어야 문의가 편하다).
   카드 윗변 1576, 두 줄 가운데 61 / 121, 이름표('사용자 ID:')는 옅은 갈색 */
html.h5p #SETP_foot
{
    position: absolute;
    left: 58px;
    top: 1666px;	/* 타이틀과 같이 94 올린 뒤(1466 -> 1372), 고객지원 묶음만 100 내렸다 (2026-09-21 CEO 지시). 게임 속도 줄 몫 164 내림 (2026-09-29) */
    width: 964px;
    height: 183px;
    background: url(../image/1_mainmenu/h5p/setting/st_bt_default_small2.png) no-repeat 0 0;
    background-size: 964px 183px;
}
html.h5p #SETP_userid,
html.h5p #SETP_version
{
    position: absolute;
    left: 47px;
    width: 740px;
    height: 56px;
    line-height: 56px;
    font-size: 40px;
    font-weight: 800;
    color: #4a2d0c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.h5p #SETP_userid  { top: 33px; font-size: 31px; }	/* 원스토어 playerId(36자)가 한 줄에 들어가게 버전 줄과 같은 크기로 (2026-10-09 CEO 지시) */
html.h5p #SETP_version { top: 93px; font-size: 31px; }	/* 빌드 번호 '(MM.DD HH:MM)' 가 붙어 길어져 한 줄에 맞게 줄임 (2026-09-30) */
html.h5p .SETP_info_label
{
    color: #a0713c;
}
html.h5p #SETP_copy_btn
{
    position: absolute;
    left: 813px;
    top: 29px;
    width: 121px;
    height: 122px;
    line-height: 118px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    /* 2026-10-09 CEO 지시: 우편함 '받기' 처럼 8방향 테두리를 준다.
       색은 내 정보의 복사 버튼과 같은 #8a4a05 (둘 다 금색 버튼이라 톤을 맞춘다) */
    text-shadow: -2px 0 0 #8a4a05, 2px 0 0 #8a4a05, 0 -2px 0 #8a4a05, 0 2px 0 #8a4a05, -2px -2px 0 #8a4a05, 2px 2px 0 #8a4a05, -2px 2px 0 #8a4a05, 2px -2px 0 #8a4a05;
    background: url(../image/1_mainmenu/h5p/setting/quest_claim_bt.png) no-repeat 0 0;
    background-size: 121px 122px;
    pointer-events: auto;
    cursor: pointer;
}
html.h5p #SETP_copy_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* ============ 금고 (S_SAFE - 세로 로비 오버레이, 1080 기준) ============ */
/* 포커 금고 화면 참고: 입금=파랑 / 출금=주황, 프리셋 금액 버튼 + 최대/지움 */

html.h5p #SAFE_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 80; /* 새 로비(MMP_root z40)보다 위 */
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}

/* 2026-09-14 CEO 지시: 팝업이 아니라 다른 서브화면(내정보/우편함/설정)처럼 - 뒤는 서브 배경(h5_portrait.js H5P_SUBBG_LIST),
   검정 딤과 판 배경은 뺀다. 딤 판은 뒤 메인화면이 눌리지 않게 막는 투명 판으로만 남긴다 */
html.h5p #SAFE_dim
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: transparent;
}

/* 내용은 가운데 1080 칸 (넓은 기기에서도 다른 서브화면과 같은 자리) */
html.h5p #SAFE_col
{
    position: absolute;
    left: 50%;
    top: 0;
    width: 1080px;
    height: 100%;
    margin-left: -540px;
}

html.h5p #SAFE_panel
{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 920px;
    background: none;
    border: 0;
    padding: 44px 44px 40px 44px;
    box-sizing: border-box;
}

/* 타이틀: 다른 서브화면과 같은 글자 타이틀(.H5PT_title - 크림색 글자 + 진한 갈색 테두리) 을 위 가운데에 */
html.h5p #SAFE_title
{
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
}

/* 이전 버튼: 다른 서브화면과 같은 초록 원형 이전 그림(back_bt 133x133) 을 왼쪽 아래에 */
html.h5p #SAFE_back_bt
{
    position: absolute;
    left: 27px;
    top: 74px;
    bottom: auto;
    width: 104px;
    height: 108px;
    background: url(../image/11_quest/h5p/back_bt.png?v=4) no-repeat 0 0;
    background-size: 104px 108px;
    cursor: pointer;
    z-index: 10;
}
html.h5p #SAFE_back_bt:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
/* 판 안의 회색 '이전' 버튼은 쓰지 않는다 (왼쪽 아래 이전 버튼이 대신한다) */
html.h5p #SAFE_back
{
    display: none !important;
}

/* 금고 한도: 타이틀(.H5PT_title top 275, 높이 150) 아래 가운데. 밝은 배경에서도 보이게 노란 글자 + 진한 갈색 테두리 (2026-09-17 CEO 지시).
   타이틀 글자와 너무 붙어 있어 45 더 내렸다 (391 -> 436, 2026-09-21 CEO 지시) */
html.h5p #SAFE_limit_txt
{
    position: absolute;
    left: 0;
    top: 416px;
    top: -webkit-calc(436px - var(--h5p_title_up, 20px));
    top: calc(436px - var(--h5p_title_up, 20px));
    width: 1080px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #ffe14d;
    text-shadow: -3px 0 0 #4a2710, 3px 0 0 #4a2710, 0 -3px 0 #4a2710, 0 3px 0 #4a2710,
                 -2px -2px 0 #4a2710, 2px -2px 0 #4a2710, -2px 2px 0 #4a2710, 2px 2px 0 #4a2710,
                 0 4px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
/* 한도 줄을 판 밖으로 뺀 만큼 판 첫 줄(입출금 내역 버튼) 아래 여백을 준다 */
html.h5p #SAFE_hist_btn
{
    margin-bottom: 26px !important;
}

html.h5p .SAFE_row
{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 14px;
    padding: 18px 26px;
    margin-bottom: 14px;
}

html.h5p .SAFE_row_label
{
    width: 260px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #e8f0dc;
}

html.h5p .SAFE_row_value
{
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
}

html.h5p .SAFE_yellow { color: #ffdf4d !important; }
html.h5p .SAFE_cyan   { color: #6fe3ff !important; }

html.h5p #SAFE_tabs
{
    display: -webkit-flex;
    display: flex;
    margin: 22px 0 14px 0;
}

html.h5p .SAFE_tab
{
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    color: #9aa88c;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #55684a;
    padding: 22px 0;
    cursor: pointer;
}
html.h5p #SAFE_tab_in  { border-radius: 14px 0 0 14px; }
html.h5p #SAFE_tab_out { border-radius: 0 14px 14px 0; }

html.h5p .SAFE_tab_on_in
{
    color: #ffffff;
    background: #2b7fd4;
    border-color: #5db1ff;
}
html.h5p .SAFE_tab_on_out
{
    color: #ffffff;
    background: #d4622b;
    border-color: #ff9a5d;
}

html.h5p .SAFE_amount_row
{
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #55684a;
}

html.h5p #SAFE_presets
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 8px -6px 18px -6px;
}

html.h5p .SAFE_preset
{
    width: 194px;
    margin: 6px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #ffffff;
    background: #3d6ea5;
    border: 2px solid #6d9ed5;
    border-radius: 12px;
    padding: 20px 0;
    cursor: pointer;
    box-sizing: border-box;
}

/* 최대금액 / 모두지움: 숫자 키패드 5x2 아래 한 줄에 반씩 (404 x 2 + 여백 12 x 2 = 832, 2026-09-17 CEO 지시) */
html.h5p .SAFE_preset_gold
{
    width: 404px;
    background: #a5813d;
    border-color: #d5b16d;
}
html.h5p .SAFE_preset_purple
{
    width: 404px;
    background: #6e3da5;
    border-color: #9e6dd5;
}
/* 숫자 키: 한 줄 5개 (152 x 5 + 여백 12 x 5 = 820) */
html.h5p .SAFE_key
{
    width: 152px;
    padding: 16px 0;
    font-size: 40px;
    background: #2f4f3a;
    border-color: #5f8a6d;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}
html.h5p .SAFE_preset:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

html.h5p #SAFE_actions
{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

html.h5p .SAFE_btn
{
    width: 300px;
    margin: 0 14px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    border-radius: 16px;
    padding: 24px 0;
    cursor: pointer;
}

html.h5p .SAFE_btn_in
{
    background: linear-gradient(#4a9df0, #2b7fd4);
    border: 2px solid #7cc0ff;
}
html.h5p .SAFE_btn_out
{
    background: linear-gradient(#f0864a, #d4622b);
    border: 2px solid #ffb27c;
}
html.h5p .SAFE_btn_back
{
    background: linear-gradient(#5a6d80, #3d4d5e);
    border: 2px solid #8ba0b5;
}

/* 금고 안내 토스트: 패널 위 중앙 (레거시 #message 는 래퍼 스태킹 탓에 오버레이 아래 깔림) */
/* 판 흐름에 끼면 아래 입금/출금 버튼을 밀어내므로, 금고 칸 가운데에 겹쳐 뜨는 토스트로 둔다 (2026-09-17 CEO 지적) */
html.h5p #SAFE_msg
{
    display: none;
    position: absolute;
    /* 2026-09-26 CEO 지시: 금고 판(39~1041)과 폭이 같아 떠도 눈에 안 띄었다 - 양쪽으로 27 씩 더 내보낸다 */
    left: 12px;
    top: 50%;
    width: 1056px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
    z-index: 60;
    pointer-events: none;
    text-align: center;
    font-size: 48px;	/* 2026-09-26 CEO 지시: 너무 작아서 36 -> 48 */
    line-height: 60px;
    font-weight: 700;
    color: #ffe98a;
    background: rgba(0, 0, 0, 0.82);
    border: 2px solid #8a9a72;
    border-radius: 18px;
    padding: 30px 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    -webkit-animation: safe_toast_in 0.18s ease-out both;
    animation: safe_toast_in 0.18s ease-out both;
}
@-webkit-keyframes safe_toast_in { from { opacity: 0; } to { opacity: 1; } }
@keyframes safe_toast_in { from { opacity: 0; } to { opacity: 1; } }

/* 금고 입출금 내역 (최근 20건) */
/* 타이틀이 판 밖(위 가운데)으로 나가 판 첫 줄 오른쪽에 둔다 (예전에는 판 안 타이틀 옆에 떠 있었다) */
html.h5p #SAFE_hist_btn
{
    display: table;
    margin: 0 0 10px auto;
    font-size: 26px;
    font-weight: 700;
    color: #cfe3b0;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #55684a;
    border-radius: 12px;
    padding: 10px 20px;
    cursor: pointer;
}

/* 입출금 내역 팝업: 내정보 팝업(h5_portrait_myinfo.css #MYI_panel)과 같은 노란 머리띠 9조각 판 + 오른쪽 위 X (2026-09-17 CEO 지시).
   금고 칸(1080) 전체를 덮는 딤 위에, 판(1000 x 1300)을 세로 가운데에 둔다 */
html.h5p #SAFE_hist
{
    display: none;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 70;
}
html.h5p #SAFE_hist_dim
{
    position: absolute;
    left: -100%; top: 0;
    width: 300%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
}
/* 열 때 딤이 서서히 깔리고, 닫을 때(S_SAFE.close_history 가 SAFE_hist_closing 을 붙임) 판은 작아지며 딤은 걷힌다 - 내정보 팝업과 같은 연출 */
html.h5p #SAFE_hist_dim
{
    -webkit-animation: myi_dim_in 0.16s ease-out both;
    animation: myi_dim_in 0.16s ease-out both;
}
html.h5p #SAFE_hist.SAFE_hist_closing #SAFE_hist_dim
{
    -webkit-animation: h5p_dim_fade_out 0.23s ease-in both;
    animation: h5p_dim_fade_out 0.23s ease-in both;
}
html.h5p #SAFE_hist.SAFE_hist_closing #SAFE_hist_panel
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
html.h5p #SAFE_hist_panel
{
    position: absolute;
    left: 40px;
    top: -webkit-calc(50% - 650px);
    top: calc(50% - 650px);
    width: 1000px;
    height: 1300px;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
}
/* 머리띠 오른쪽 X (내정보 팝업 #MYI_close 와 같은 그림/자리) */
html.h5p #SAFE_hist_close
{
    position: absolute;
    left: 880px;
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 5;
}
/* 타이틀: 노란 머리띠 가운데, X 버튼 색 글자 (#MYI_title 과 같게) */
html.h5p #SAFE_hist_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 1000px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
    pointer-events: none;
    z-index: 4;
}
/* 목록: 머리띠 아래 크림색 판 안쪽 */
html.h5p #SAFE_hist_list
{
    position: absolute;
    left: 50px;
    top: 130px;
    width: 900px;
    height: 1110px;
    overflow-y: auto;
    box-sizing: border-box;
    background: rgba(148, 109, 6, 0.08);
    border-radius: 16px;
    padding: 10px 24px;
}

html.h5p .SAFE_hist_row
{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 2px solid rgba(148, 109, 6, 0.18);
    padding: 20px 4px;
    font-size: 36px;
}

html.h5p .SAFE_hist_date { width: 290px; color: #8a6536; }
html.h5p .SAFE_hist_kind { width: 190px; font-weight: 800; }
html.h5p .SAFE_hist_in   { color: #1f6fc4; }
html.h5p .SAFE_hist_out  { color: #d0602a; }
html.h5p .SAFE_hist_del  { color: #c43a3a; }
html.h5p .SAFE_hist_val  { -webkit-flex: 1; flex: 1; text-align: right; color: #3b2a10; font-weight: 800; }

html.h5p .SAFE_hist_empty
{
    text-align: center;
    color: #8a6536;
    font-size: 38px;
    padding: 80px 0;
}

/* ---- 금고 판 확대 (2026-09-17 CEO 지시: 세이프존을 고려해도 작게 보였다) ----
   판 폭 920 -> 세이프존 폭 1002 (좌우 39), 글자/버튼 약 1.25배. 높이 약 1300 으로 한도 문구(아래끝 451) ~ 이전 버튼(윗변 2111) 사이에 들어간다.
   안쪽 폭 = 1002 - 44 x 2 = 914, 버튼 줄은 여백 -6 을 더해 926 을 나눠 쓴다 */
html.h5p #SAFE_panel { width: 1002px; }
html.h5p .SAFE_row { padding: 24px 32px; margin-bottom: 16px; border-radius: 16px; }
html.h5p .SAFE_row_label { width: 300px; font-size: 42px; }
html.h5p .SAFE_row_value { font-size: 48px; }
html.h5p #SAFE_tabs { margin: 26px 0 16px 0; }
html.h5p .SAFE_tab { font-size: 46px; padding: 28px 0; }
html.h5p .SAFE_preset { width: 219px; font-size: 37px; padding: 26px 0; border-radius: 14px; }		/* 4개: 219 x 4 + 12 x 4 = 924 */
html.h5p .SAFE_key { width: 173px; font-size: 50px; padding: 20px 0; }								/* 5개: 173 x 5 + 12 x 5 = 925 */
html.h5p .SAFE_preset_gold,
html.h5p .SAFE_preset_purple { width: 451px; }														/* 2개: 451 x 2 + 12 x 2 = 926 */
html.h5p .SAFE_btn { width: 400px; font-size: 50px; padding: 30px 0; border-radius: 20px; }
html.h5p #SAFE_hist_btn { font-size: 36px; padding: 10px 26px; }

/* ============ 금고 새 디자인 (2026-09-23 CEO 가이드 '맞고 금고 수정 ui파일') ============
   그림은 image/1_mainmenu/h5p/safe/ 원본 크기 그대로. 좌표는 가이드(1080x2340)에서 그림을 맞춰 잰 값이며,
   다른 서브화면처럼 타이틀과 함께 20(--h5p_title_up) 올렸다. 판 안 좌표는 판(#SAFE_box) 기준.
   위의 예전 판(#SAFE_panel/.SAFE_row/.SAFE_tab/.SAFE_preset) 규칙은 더 이상 쓰지 않는다 */
html.h5p #SAFE_help
{
    position: absolute;
    /* 2026-10-10 CEO 지시: 아이콘+글자를 가운데에 맞춘 뒤, 물음표를 글자 테두리 오른끝에서 22 떨어진 자리에.
       '금고' 테두리 오른끝 706.6 (아래 되돌이값 - 실제로는 H5P_TITLE.pin_help 가 글자를 재서 다시 넣는다) */
    left: 728.6px;
    /* 글자 테두리 윗변(타이틀 상자 기준 22)에 버튼 윗변을 맞춘다 (2026-10-10 CEO 지시) */
    top: 277px;
    top: -webkit-calc(297px - var(--h5p_title_up, 20px));
    top: calc(297px - var(--h5p_title_up, 20px));
    width: 65px;
    height: 67px;
    background: url(../image/1_mainmenu/h5p/safe/guess_bt.png) no-repeat 0 0;
    background-size: 65px 67px;
    cursor: pointer;
    z-index: 5;
}

/* 한도 띠(621x68) 와 오른쪽 버튼 두 개(금고확장 / 입출금내역, 각 276x74) - 판 위 한 줄 */
html.h5p #SAFE_limit_box
{
    position: absolute;
    left: 45px;
    /* 2026-10-07 CEO 지시로 한도 줄 ~ 판을 통째로 24 내린다 (470 -> 494) */
    top: 474px;
    top: -webkit-calc(494px - var(--h5p_title_up, 20px));
    top: calc(494px - var(--h5p_title_up, 20px));
    width: 621px;
    height: 68px;
    background: url(../image/1_mainmenu/h5p/safe/sa_limit_bg.png) no-repeat 0 0;
    background-size: 621px 68px;
    z-index: 5;
}
html.h5p #SAFE_limit_txt
{
    position: absolute !important;
    left: 32px !important;
    top: 0 !important;
    width: 420px !important;
    height: 68px !important;
    line-height: 68px !important;
    font-size: 44px !important;
    font-weight: 800;
    color: #ffffff !important;
    text-shadow: none !important;
    text-align: left;
    white-space: nowrap;
    letter-spacing: -1px;
}
html.h5p #SAFE_expand,
html.h5p #SAFE_hist_btn
{
    position: absolute !important;
    display: block !important;
    top: 471px;
    top: -webkit-calc(491px - var(--h5p_title_up, 20px));
    top: calc(491px - var(--h5p_title_up, 20px));	/* 한도 줄과 같이 24 내림 */
    bottom: auto !important;
    width: 276px;
    height: 74px;
    margin: 0 !important;
    padding: 0 0 0 48px !important;
    box-sizing: border-box;
    line-height: 74px;
    text-align: center;
    font-size: 40px !important;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
    background-repeat: no-repeat;
    background-position: 0 0;
    border: 0 !important;
    border-radius: 0 !important;
    letter-spacing: -2px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 5;
}
html.h5p #SAFE_expand
{
    /* 새 그림은 197x74 로 좁아졌다 (2026-09-23). 입출금 내역 버튼과 너무 붙어 보여 왼쪽으로 41 더 보냈다 */
    left: 520px;
    width: 197px;
    padding-left: 46px !important;
    letter-spacing: -1px;
    background-image: url(../image/1_mainmenu/h5p/safe/sa_limit_bt.png?v=2);
    background-size: 197px 74px;
}
html.h5p #SAFE_hist_btn
{
    left: 766px;
    /* '입출금 내역' 은 다섯 글자라 아이콘을 피해 조금 더 밀고 글자를 줄인다 */
    padding-left: 58px !important;
    font-size: 38px !important;
    background: url(../image/1_mainmenu/h5p/safe/sa_payment_bt.png?v=2) no-repeat 0 0 !important;
    background-size: 276px 74px !important;
}

/* 금고 판(1004x1529) - 금고 그림과 잔액 칸, 입력 칸이 그림 안에 그려져 있다 */
html.h5p #SAFE_box
{
    position: absolute;
    left: 38px;
    /* 한도 줄과 조금 더 떨어지게 16 내렸다 (2026-09-23 CEO 지시) */
    top: 589px;
    top: -webkit-calc(609px - var(--h5p_title_up, 20px));
    top: calc(609px - var(--h5p_title_up, 20px));	/* 한도 줄과 같이 24 내림 */
    width: 1004px;
    height: 1529px;
    background: url(../image/1_mainmenu/h5p/safe/sa_box.png) no-repeat 0 0;
    background-size: 1004px 1529px;
}

/* 항목 이름: 흰 글자에 진한 남색 테두리 (가이드) */
html.h5p .SAFE2_label
{
    position: absolute;
    height: 60px;
    line-height: 60px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
    white-space: nowrap;
    text-shadow: -3px 0 0 #2b3050, 3px 0 0 #2b3050, 0 -3px 0 #2b3050, 0 3px 0 #2b3050,
                 -2px -2px 0 #2b3050, 2px -2px 0 #2b3050, -2px 2px 0 #2b3050, 2px 2px 0 #2b3050;
}
/* 금고 잔액: 어두운 칸 안, 금고 그림 오른쪽 (노란 글자) */
html.h5p #SAFE_stored_label
{
    left: 317px;		/* 2026-09-23 CEO 지시로 10px 오른쪽 */
    top: 126px;			/* 이름+금액 두 줄을 어두운 칸(판 기준 61~352) 세로 가운데에 (2026-09-23 CEO 지시) */
    width: 400px;
    font-size: 56px;
    color: #f2e45e;
}
html.h5p #SAFE_stored_val
{
    position: absolute;
    /* 이름과 같은 선에서 시작하게 왼쪽 정렬 (2026-09-23 CEO 지시) */
    left: 317px;
    top: 203px;
    width: 621px;
    height: 84px;
    line-height: 84px;
    text-align: left;
    font-size: 62px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: -1px;
}
/* 숫자가 굴러가는 동안만 금빛으로 (2026-09-26 CEO 지시) */
html.h5p #SAFE_stored_val.SAFE_rolling
{
    color: #ffe14d;
    text-shadow: 0 0 18px rgba(255, 213, 61, 0.75);
}
/* 상품 그림 반짝임: 우편함과 같은 빛줄기를 그림 모양 안에서만 보이게 하고,
   네 칸을 한 칸씩 차례로 지나간다 (늦춤은 JS 가 준다, 2026-09-26 CEO 지시) */
html.h5p .MSP_shine
{
    position: absolute;
    left: 57px;
    top: 62px;
    width: 284px;
    height: 210px;
    background: -webkit-linear-gradient(-15deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
    -webkit-animation: MSP_icon_shine 8s infinite;
    animation: MSP_icon_shine 8s infinite;
}
/* 패키지 그림(ch_bt_special)과 광고 금화 그림에도 같은 빛줄기 (2026-10-13 CEO 지시).
   자리·크기는 각 그림 칸(#MSP_pkg_icon / #MSP_ad_icon)과 똑같이 두고, 그 그림을 마스크로 쓴다 */
/* 2026-10-13 CEO 지시: 위쪽 '대부호 패키지' 배너에는 빛을 넣지 않는다 - 금화바 부분만.
   원본 그림(355x369)에서 배너는 y 0~130, 금화바는 y 141 부터다. 칸(342x356)으로 줄이면 배너는 위 136 -
   그만큼 칸을 내리고 마스크도 같은 양만큼 끌어올려 그림이 어긋나지 않게 한다 */
html.h5p #MSP_pkg_shine
{
    left: 52px;
    top: 254px;
    width: 342px;
    height: 220px;
    -webkit-mask-image: url(../image/1_mainmenu/h5p/shop/ch_bt_special.png);
    mask-image: url(../image/1_mainmenu/h5p/shop/ch_bt_special.png);
    -webkit-mask-size: 342px 356px;
    mask-size: 342px 356px;
    -webkit-mask-position: 0 -136px;
    mask-position: 0 -136px;
}
/* 광고 금화는 칸(157x154) 안에 contain 으로 들어가 있어 마스크도 같은 방식으로 맞춘다 */
html.h5p #MSP_ad_shine
{
    left: 144px;
    top: 261px;
    width: 157px;
    height: 154px;
    -webkit-mask-image: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_gold.png);
    mask-image: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_gold.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center center;
    mask-position: center center;
}

/* 8초 중 앞 0.7초(8.75%)에만 지나간다 - 네 칸이 0.9초 간격으로 차례로 흐르고 나면 다음 바퀴까지 쉬다 */
@-webkit-keyframes MSP_icon_shine
{
    0%    { background-position: 110% 0; opacity: 0.4; -webkit-animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
    4.4%  { opacity: 1; }
    8.75% { background-position: -10% 0; opacity: 0.9; }
    100%  { background-position: -10% 0; opacity: 0.9; }
}
@keyframes MSP_icon_shine
{
    0%    { background-position: 110% 0; opacity: 0.4; animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
    4.4%  { opacity: 1; }
    8.75% { background-position: -10% 0; opacity: 0.9; }
    100%  { background-position: -10% 0; opacity: 0.9; }
}

/* 입금할 금액 / 출금할 금액 */
html.h5p #SAFE_amount_label
{
    left: 51px;		/* 입력 칸/키패드 왼쪽 선에 맞춘다 (2026-09-23 CEO 지시) */
    /* 오른쪽 전체 삭제 버튼(556~632)의 아래 선에 맞춘다 (2026-09-23 CEO 지시) */
    top: 572px;
    width: 460px;
    font-size: 48px;
}

/* 입금하기 / 출금하기 탭(450x130): 고른 쪽은 색 그림(왼쪽 아이콘 포함), 안 고른 쪽은 파란 그림 */
html.h5p .SAFE2_tab
{
    position: absolute;
    top: 392px;
    width: 450px;
    height: 130px;
    line-height: 122px;
    box-sizing: border-box;
    padding-left: 110px;
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    background-repeat: no-repeat;
    background-size: 450px 130px;
    cursor: pointer;
    color: #b9c9f7;
    text-shadow: -3px 0 0 #34408a, 3px 0 0 #34408a, 0 -3px 0 #34408a, 0 3px 0 #34408a;
}
html.h5p #SAFE_tab_in  { left: 48px;  background-image: url(../image/1_mainmenu/h5p/safe/sa_category_deposit.png); }
html.h5p #SAFE_tab_out { left: 506px; background-image: url(../image/1_mainmenu/h5p/safe/sa_category_withdrawbt.png); }
html.h5p .SAFE2_in #SAFE_tab_in
{
    background-image: url(../image/1_mainmenu/h5p/safe/sa_category_deposit_selected.png);
    color: #ffffff;
    text-shadow: -3px 0 0 #1c7a33, 3px 0 0 #1c7a33, 0 -3px 0 #1c7a33, 0 3px 0 #1c7a33;
}
html.h5p .SAFE2_out #SAFE_tab_out
{
    background-image: url(../image/1_mainmenu/h5p/safe/sa_category_withdrawbt_selected.png);
    color: #ffffff;
    text-shadow: -3px 0 0 #a3201b, 3px 0 0 #a3201b, 0 -3px 0 #a3201b, 0 3px 0 #a3201b;
}

/* 입력 칸(902x105, 판 그림에 그려져 있다): 가운데 노란 숫자 */
html.h5p .SAFE2_money
{
    position: absolute;
    left: 51px;
    top: 644px;
    width: 902px;
    height: 105px;
    line-height: 105px;
    text-align: center;
    font-size: 62px;
    font-weight: 800;
    color: #ffee6c;
    white-space: nowrap;
    letter-spacing: -1px;
}

/* 버튼 공통 */
html.h5p .SAFE2_btn
{
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0 0;
    text-align: center;
    font-weight: 800;
    color: #2a2c50;
    cursor: pointer;
}
html.h5p .SAFE2_btn:active,
html.h5p .SAFE2_tab:active,
html.h5p #SAFE_help:active,
html.h5p #SAFE_expand:active,
html.h5p #SAFE_hist_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 빠른 금액 3개(221x130) 와 최대금액(221x130) 한 줄 */
html.h5p .SAFE2_preset,
html.h5p #SAFE_pmax
{
    top: 773px;
    width: 221px;
    height: 130px;
    line-height: 124px;
    background-size: 221px 130px;
}
html.h5p .SAFE2_preset
{
    font-size: 54px;
    background-image: url(../image/1_mainmenu/h5p/safe/sa_kpad_num2.png);
}
html.h5p #SAFE_pmax
{
    left: 735px;
    font-size: 46px;
    letter-spacing: -2px;
    background-image: url(../image/1_mainmenu/h5p/safe/sa_kpad_maxmoney.png);
    /* 옆의 100만/1000만/1억 과 같은 색·효과 (2026-09-23 CEO 지시 - 혼자 흰 글자였다) */
    color: #2a2c50;
    text-shadow: none;
}
html.h5p #SAFE_p0 { left: 48px; }
html.h5p #SAFE_p1 { left: 277px; }
html.h5p #SAFE_p2 { left: 506px; }

/* 전체 삭제(271x76): 입금할 금액 글자 오른쪽 */
html.h5p #SAFE_pclear
{
    left: 685px;
    top: 556px;
    width: 271px;
    height: 76px;
    box-sizing: border-box;
    padding-left: 56px;		/* 왼쪽 X 아이콘을 피해 글자를 오른쪽으로 (2026-09-23 CEO 지시) */
    line-height: 72px;
    font-size: 40px;
    letter-spacing: -1px;
    background-image: url(../image/1_mainmenu/h5p/safe/sa_kpad_del.png);
    background-size: 271px 76px;
}

/* 숫자 키(221x130): 3칸 x 4줄 */
html.h5p .SAFE2_key
{
    width: 221px;
    height: 130px;
    line-height: 124px;
    font-size: 66px;
    background-image: url(../image/1_mainmenu/h5p/safe/sa_kpad_num.png);
    background-size: 221px 130px;
}
html.h5p #SAFE_key0, html.h5p #SAFE_key3, html.h5p #SAFE_key6, html.h5p #SAFE_key9  { left: 48px; }
html.h5p #SAFE_key1, html.h5p #SAFE_key4, html.h5p #SAFE_key7, html.h5p #SAFE_key10 { left: 277px; }
html.h5p #SAFE_key2, html.h5p #SAFE_key5, html.h5p #SAFE_key8, html.h5p #SAFE_key11 { left: 506px; }
html.h5p #SAFE_key0, html.h5p #SAFE_key1, html.h5p #SAFE_key2   { top: 919px; }
html.h5p #SAFE_key3, html.h5p #SAFE_key4, html.h5p #SAFE_key5   { top: 1054px; }
html.h5p #SAFE_key6, html.h5p #SAFE_key7, html.h5p #SAFE_key8   { top: 1189px; }
html.h5p #SAFE_key9, html.h5p #SAFE_key10, html.h5p #SAFE_key11 { top: 1324px; }

/* 실행 버튼(221x535): 키패드 오른쪽 한 칸을 네 줄 높이로 - 그림 안 아이콘 아래에 글자 */
html.h5p #SAFE_exec
{
    left: 735px;
    top: 919px;
    width: 221px;
    height: 535px;
    box-sizing: border-box;
    /* 아이콘과 너무 붙어 보여 24 내리고, 위 탭 글자와 같은 테두리 효과를 준다 (2026-09-23 CEO 지시) */
    padding-top: 250px;
    line-height: 60px;
    font-size: 54px;
    color: #ffffff;
    background-image: url(../image/1_mainmenu/h5p/safe/sa_kpad_deposit.png);
    background-size: 221px 535px;
    text-shadow: -3px 0 0 #1c7a33, 3px 0 0 #1c7a33, 0 -3px 0 #1c7a33, 0 3px 0 #1c7a33,
                 -2px -2px 0 #1c7a33, 2px -2px 0 #1c7a33, -2px 2px 0 #1c7a33, 2px 2px 0 #1c7a33;
}
html.h5p .SAFE2_out #SAFE_exec
{
    background-image: url(../image/1_mainmenu/h5p/safe/sa_kpad_withdraw.png);
    text-shadow: -3px 0 0 #a3201b, 3px 0 0 #a3201b, 0 -3px 0 #a3201b, 0 3px 0 #a3201b,
                 -2px -2px 0 #a3201b, 2px -2px 0 #a3201b, -2px 2px 0 #a3201b, 2px 2px 0 #a3201b;
}

/* ============ 충전소 패키지 탭: 대부호 패키지 카드 (포커 프리미엄 패키지 참고) ============ */
/* 패키지 카드 (2026-09-22 새 디자인): ch_bt_special_bg(854x586, 보라 띠/구분선 포함) 을 835x571 로 좌 117 / 위 665.
   안쪽 좌표는 가이드 실측 (카드 기준) */
html.h5p #MSP_pkg_pane
{
    position: absolute;
    /* 금화·루비 카드와 같이 110% 로 키우고 윗줄과 같은 높이에 맞춤 (2026-09-26 CEO 지시).
       가운데를 기준으로 커지므로 보이는 자리(왼 81 / 위 727)가 되도록 값을 미리 더해 둔다 */
    /* 2026-10-10 CEO 지시(2차): 금화·루비 카드(#MS_menu*)가 1.1 배라 그것과 같은 비율로 키우고,
       위 시작자리도 같게 맞춘다 (금화 카드는 top 755 에 1.1 배 -> 보이는 윈변 727).
       가로는 화면 가운데(540) 에 둔다 - 카드 폭이 금화 격자보다 조금 넓어 왼쪽만 맞추면 기울어 보인다 */
    left: 122px;
    top: 758px;
    top: -webkit-calc(778px - var(--h5p_title_up, 20px));
    top: calc(778px - var(--h5p_title_up, 20px));
    width: 835px;
    /* 2026-10-09 새 그림(860x645, 책 모양)에 맞춰 571 -> 626 (835 폭일 때의 비율) */
    height: 626px;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 20;
}
html.h5p #MSP_pkg_card
{
    position: absolute;
    left: 0;
    top: 0;
    width: 835px;
    height: 626px;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt_special_bg.png) no-repeat 0 0;
    background-size: 100% 100%;
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}
html.h5p #MSP_pkg_badge
{
    position: absolute;
    /* 2026-10-09 새 그림 기준: 진보라 리본 x 3~223 / y 48~112 */
    left: 3px;
    top: 48px;
    width: 220px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-size: 44px;
    font-weight: 900;
    color: #ffe14a;
    /* 2026-10-10 CEO 지시로 테두리를 2 더 두껍게 (3 -> 5). 5 부터는 네 방향만으로 모서리가 패여
       대각선 네 방향(4)을 같이 둘러 글자 모양대로 이어지게 한다 */
    text-shadow: -5px 0 0 #3b0f6e, 5px 0 0 #3b0f6e, 0 -5px 0 #3b0f6e, 0 5px 0 #3b0f6e,
                 -4px -4px 0 #3b0f6e, 4px -4px 0 #3b0f6e, -4px 4px 0 #3b0f6e, 4px 4px 0 #3b0f6e;
    white-space: nowrap;
}
html.h5p #MSP_pkg_head
{
    position: absolute;
    /* 2026-10-09 새 시안: 띠가 아니라 왼쪽 아래(그림 밑)에 두 줄로 놓는다.
       2026-10-10 CEO 지적: 둘째 줄이 종이 아래 테두리에 걸쳤다 (종이 안쪽 크림이 584.5 에서 끝나는데
       글칸이 613 까지 내려와 있었다). 줄 사이를 56 -> 46 으로 좁히고 칸을 19 올려 574 에서 끝나게 한다 */
    left: 42px;
    top: 482px;
    width: 361px;
    height: 92px;
    line-height: 46px;
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    color: #3b2150;
    white-space: nowrap;
}
html.h5p #MSP_pkg_icon
{
    position: absolute;
    /* 2026-10-09 새 그림에는 '대부호 패키지' 배너까지 들어 있다 (355x369) - 글자 칸은 감춘다.
       2026-10-10 CEO 지적(2차): 배너 윗부분이 종이 크림(114.6 에서 시작) 위로 올라와 연보라 띠에 걸쳤다.
       크림 안으로 내리고(94 -> 118) 살짝 줄여(375x390 -> 342x356) 아래 글줄(482)과도 겹치지 않게 한다 */
    left: 52px;
    top: 118px;
    width: 342px;
    height: 356px;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt_special.png) no-repeat 0 0;
    background-size: 100% 100%;
}
html.h5p #MSP_pkg_title
{
    /* 2026-10-09: 새 그림(ch_bt_special)에 제목 배너가 그려져 있어 글자는 쓰지 않는다 */
    display: none;
    position: absolute;
    left: 20px;
    top: 326px;
    width: 430px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 51px;
    font-weight: 900;
    color: #3a1f10;
    white-space: nowrap;
}
/* 혜택 3줄: 배경의 구분선(y 206 / 308) 사이 */
html.h5p .MSP_pkg_line
{
    position: absolute;
    /* 2026-10-09 새 그림: 가운데 접힌 선이 x 417, 구분선이 y 233 / 345 다.
       2026-10-10 CEO 지적: 글줄이 접힌 선을 넘어 왼쪽 면까지 들어왔다.
       가이드 실측대로 오른쪽 면 안(x 459 ~ 791, 가격 알약과 같은 폭)에만 둔다 */
    /* 2026-10-10 CEO 지시: 글이 왼쪽에 붙어 있어 가운데로 모은다. 칸도 가격 알약(442~780)과 같은
       오른쪽 반쪽 가운데(611.4) 기준으로 옮겨 세 줄과 단추가 한 줄로 선다. 윗줄-아랫줄 사이도 44 -> 40 */
    left: 445px;
    width: 332px;
    text-align: center;
    font-size: 39px;
    font-weight: 800;
    line-height: 40px;
    color: #2e1a0c;
    white-space: nowrap;
}
/* 가이드 실측: 줄 윗선 135 / 255 / 378 (2026-10-10).
   줄 사이를 좁혀 한 묶음이 8 짧아졌으므로 칸(종이에 그려진 구분선 사이) 가운데에 그대로 서게 4 씩 내린다 */
/* 2026-10-10 CEO 지시: 줄 사이가 넓어 첫 줄은 16 내리고 셋째 줄은 16 올린다 (가운데 줄은 그대로).
   종이에 그려진 구분선 사이(110~238 / 241~351 / 354~515) 는 그대로 지킨다 */
html.h5p #MSP_pkg_line1 { top: 155px; }
html.h5p #MSP_pkg_line2 { top: 259px; }
html.h5p #MSP_pkg_line3 { top: 366px; }
html.h5p .MSP_pkg_sub
{
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    line-height: 38px;	/* 2026-10-10 CEO 지시로 좁힘 (42 -> 38) */
    color: #8a3ce0;
}
/* 구매 버튼: ch_bt3 (주황) 313x88 */
html.h5p #MSP_pkg_buy
{
    position: absolute;
    /* 2026-10-09 새 시안: 주황 버튼이 보라 알약(320x95)이 되고 자리도 오른쪽 아래로.
       광고 단추와 같은 그림 크기 (ch_bt3 320x95 원본).
       2026-10-10 CEO 지적(2차): 가운데가 안 맞는다 - 종이 안쪽을 다시 재니 왼 28.2 / 접힌 선 417 / 오른 805.9 라
       오른쪽 반쪽 가운데는 621.5 가 아니라 611.4 였다 (앞서는 그림자까지 종이로 세었다).
       또 아래 테두리(크림 끝 584.5)에 걸쳐 있어 19 올린다 */
    left: 442px;
    top: 472px;
    width: 338px;
    height: 100px;
    line-height: 96px;
    text-align: center;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt3.png) no-repeat 0 0;
    background-size: 100% 100%;
    font-size: 50px;	/* 단추가 커졌다 (2026-10-10) */
    font-weight: 800;
    color: #ffffff;
    /* 버튼이 보라로 바뀌어 글자 테두리도 짙은 보라로 */
    text-shadow: -3px 0 0 #4a1278, 3px 0 0 #4a1278, 0 -3px 0 #4a1278, 0 3px 0 #4a1278,
                 -2px -2px 0 #4a1278, 2px -2px 0 #4a1278, -2px 2px 0 #4a1278, 2px 2px 0 #4a1278;
    white-space: nowrap;
    cursor: pointer;
}
/* 사용 중일 때의 두 줄 버튼: 윗줄 '30일 연장' + 아랫줄 값 (2026-09-26 CEO 지시) */
/* 사용 중일 때 두 줄짜리 버튼 - 2026-10-13 CEO 지시로 '30일 연장' 줄을 빼면서 지금은 쓰지 않는다 (되살릴 때를 위해 남겨 둔다) */
html.h5p #MSP_pkg_buy.MSP_pkg_ext
{
    line-height: 0;
    padding-top: 6px;
    box-sizing: border-box;
}
html.h5p .MSP_pkg_buy_l1
{
    display: block;
    font-size: 32px;
    line-height: 36px;
}
html.h5p .MSP_pkg_buy_l2
{
    display: block;
    font-size: 44px;
    line-height: 46px;
}
html.h5p #MSP_pkg_buy:active
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}
/* 상태줄·안내문: 판 안 오른쪽은 빡빡해서 판 아래 가운데로 내렸다 (2026-09-26 CEO 지시) */
html.h5p #MSP_pkg_info
{
    position: absolute;
    /* 2026-10-09: 새 시안처럼 남은 기간은 위 띠(리본 오른쪽)에 넣는다.
       2026-10-10: 연보라 띠는 그림에서 재니 x 227~556 / y 50~110 이다.
       CEO 지적(글자가 리본에 바짝 붙어 읽기 어렵다): '55% 할인' 리본은 끝이 뾰족해 높이에 따라 254 까지 나온다.
       글자가 넉넉히 들어가게 칸을 390 으로 넓힌다.
       2026-10-10 CEO 재지시: 리본과 글자 사이 여백(73)이 넓어 반으로 줄인다 - 칸을 36 왼쪽으로 (278 -> 242) */
    left: 242px;
    top: 50px;
    width: 390px;
    height: 60px;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}
/* 판 밖 배경 그림 위로 나왔으므로 흰 글자 + 진한 테두리로 읽히게 한다 (2026-09-26) */
/* 사용 중일 때의 '사용 중 / (N일 NN시간 남음)'.
   2026-10-13 CEO 지시로 위 띠에서 왼쪽 아래(그림 밑)로 옮겼다 - '구매 시 30일간 혜택 적용!'(#MSP_pkg_head) 자리를
   그대로 쓰고, 그 글은 숨긴다. 위 띠에는 홍보 한 줄이 늘 남는다 */
html.h5p #MSP_pkg_state
{
    display: none;
    position: absolute;
    left: 42px;
    top: 482px;
    width: 361px;
    height: 92px;
    line-height: 46px;
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    /* 2026-10-13 CEO 지시: 띠에 있을 때는 보라로 바꿨다가, 그림 밑으로 옮긴 뒤 눈에 띄게 다시 붉은톤으로 */
    color: #c8322a;
    white-space: nowrap;
}
/* 위 띠에 들어가는 홍보 한 줄 (2026-10-10 CEO 지시).
   2026-10-13 CEO 지시로 산 뒤에도 늘 보인다 - 남은 기간은 왼쪽 아래(#MSP_pkg_state)로 옮겼다 */
html.h5p #MSP_pkg_promo
{
    font-size: 36px;	/* 2026-10-10 CEO 지적: 리본과 띠 사이에 여백이 남게 38 -> 36 */
    font-weight: 800;
    line-height: 60px;
    color: #4a1278;
    white-space: nowrap;
}
html.h5p #MSP_pkg_note
{
    position: absolute;
    left: 0;
    /* 2026-10-10 CEO 지시: 가격 단추(494~588)와 카드 아래 테두리에 겹쳐 보여 카드 밖으로 내린다 (카드 626) */
    top: 648px;
    width: 835px;
    text-align: center;
    font-size: 36px;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 44px;
    color: #ffffff;
    text-shadow: -3px 0 0 #3a2410, 3px 0 0 #3a2410, 0 -3px 0 #3a2410, 0 3px 0 #3a2410,
                 -2px -2px 0 #3a2410, 2px -2px 0 #3a2410, -2px 2px 0 #3a2410, 2px 2px 0 #3a2410;
}

/* ============ 출석 보상 팝업: 가로 7칸 -> 4x2 (8칸) ============ */
/* 원본은 7칸 격자가 그려진 배경 그림 한 장을 쓴다. 4x2 로 바꾸려면 그 그림 대신
   격자를 직접 그려야 하므로 배경 그림을 감추고 CSS 판을 깐다.
   칸 안의 숫자/아이콘/값 요소는 원본 것을 그대로 재배치한다 (원본 JS 무변경) */
html.h5p #Img_AD_back
{
    display: none !important;
}

/* 팝업판: 내정보 팝업과 같은 9조각 그림(popup_bg_*, 노란 머리띠 104 / 모서리 50 / 아래 조각 49) 조합으로 그린다 (2026-09-15 CEO 지시).
   하단에 누적 보상 제목 줄(74)과 '누적 N일차' 줄(44)이 생겨 930 -> 1030 으로 늘리고 세로 가운데 유지 */
/* 2026-09-21: 칸 보상 값을 2줄 자리로 늘리며 칸 높이 225 -> 255 (2줄 x 30) 라 1030 -> 1090 */
/* 2026-09-21 CEO 지시: 머리띠-격자 여백 25 -> 50, 격자-안내 글자 여백 13 -> 26 으로 두 배 (1090 -> 1128),
   칸 폭 186 -> 204 와 함께 판 폭 900 -> 960 (가운데 유지, left 60) */
/* 2026-09-21 CEO 지시 '조금만 더': 여백 50 -> 60 / 26 -> 36, 칸 204 -> 214, 판 960 -> 1000 (left 40), 높이 1128 -> 1148 */
html.h5p #AD_bg
{
    left: 20px !important;	/* 판 폭 1000 -> 1040 (칸을 넓히려고, 2026-09-21 CEO 지시) */
    top: -webkit-calc(50% - 724px) !important;
    top: calc(50% - 724px) !important;
    width: 1040px !important;
    height: 1448px !important;	/* 2026-10-09 CEO 전달 새 그림: 칸 290 -> 326, 안내 문구가 격자 아래로 (1422 -> 1448) */	/* 1360 -> 1402 (다음 보상 판 +42) -> 1422 (하단 버튼 84 -> 104) */	/* 1290 -> 1340 -> 1360: 칸 높이 +25, +10 x 2 줄 */	/* 1274 -> 1290: 글자 키움으로 누적 영역 +16 */	/* 1214 -> 1274: 위 여백 +20, 구분선 위아래 여백 +20 씩 (2026-09-21) */	/* 1224 -> 1192 (안내 문구 격자 위로, 다음 보상 테두리 제거) -> 1238 (격자와 누적 사이 구분선 + 여백 +46) (2026-09-21) */	/* 1162 -> 1224: 다음 보상 줄이 두 줄이 되어 62 커졌다 (2026-09-21) */	/* 누적 보상 상자(위아래 여백 34)가 생겨 1148 -> 1162, 상자 아래 여백 약 50 */
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px !important;
    /* 이음매 틈 방지: 늘리는 조각을 옆 조각 밑으로 2 씩 더 깐다 (h5_portrait_myinfo.css #MYI_panel 과 같다) */
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    box-sizing: border-box !important;
}

/* 제목: 노란 머리띠(y 4~94) 가운데, 글자색은 X 버튼 색 (내정보 팝업 #MYI_title 과 같다) */
html.h5p #AD_title
{
    left: 0 !important;
    top: 4px !important;
    width: 1040px !important;	/* 판 폭과 같게 (2026-09-21) */
    height: 90px !important;
    line-height: 90px !important;
    text-align: center !important;
    font-size: 58px !important;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800 !important;
    color: #946d06 !important;
}

/* 머리띠 오른쪽 X 는 두지 않는다 - 보상은 '보상받기'로만 받게 하고, 받을 게 없으면 '확인'으로 닫는다 (2026-09-16 CEO 지시) */

/* ---- 4x2 격자: 칸 186x225, 가로 간격 18, 세로 간격 24 ----
   4칸 + 간격 = 798 을 팝업(900) 가운데(왼쪽 51 ~ 849)에 둔다. 예전 198/27/36 은 909 까지 나가 4일·8일 칸이 팝업 밖으로 삐져나갔다 (2026-09-16 CEO 지적) */
/* 1~4 윗줄 */
html.h5p #Txt_AD_num_1, html.h5p #Img_AD_icon_1, html.h5p #Txt_AD_value_1, html.h5p #Img_AD_press_1 { --adp-col: 0; --adp-row: 0; }
html.h5p #Txt_AD_num_2, html.h5p #Img_AD_icon_2, html.h5p #Txt_AD_value_2, html.h5p #Img_AD_press_2 { --adp-col: 1; --adp-row: 0; }
html.h5p #Txt_AD_num_3, html.h5p #Img_AD_icon_3, html.h5p #Txt_AD_value_3, html.h5p #Img_AD_press_3 { --adp-col: 2; --adp-row: 0; }
html.h5p #Txt_AD_num_4, html.h5p #Img_AD_icon_4, html.h5p #Txt_AD_value_4, html.h5p #Img_AD_press_4 { --adp-col: 3; --adp-row: 0; }
/* 5~7 아랫줄 (8번째는 ADP_slot8) */
html.h5p #Txt_AD_num_5, html.h5p #Img_AD_icon_5, html.h5p #Txt_AD_value_5, html.h5p #Img_AD_press_5 { --adp-col: 0; --adp-row: 1; }
html.h5p #Txt_AD_num_6, html.h5p #Img_AD_icon_6, html.h5p #Txt_AD_value_6, html.h5p #Img_AD_press_6 { --adp-col: 1; --adp-row: 1; }
html.h5p #Txt_AD_num_7, html.h5p #Img_AD_icon_7, html.h5p #Txt_AD_value_7, html.h5p #Img_AD_press_7 { --adp-col: 2; --adp-row: 1; }
html.h5p #Txt_AD_num_8, html.h5p #Img_AD_icon_8, html.h5p #Txt_AD_value_8, html.h5p #Img_AD_press_8 { --adp-col: 3; --adp-row: 1; } /* 20260915_ywlee 8일 주기 8번째 칸 */

/* 칸 배경 (숫자 요소를 칸 판으로 쓴다) */
html.h5p div[id^="Txt_AD_num_"]
{
    /* 2026-10-09 CEO 전달 새 그림. 칸 230x326, 가로/세로 틈 16 (판 왼쪽 35, 머리띠 아래 136) */
    left: -webkit-calc(35px + 246px * var(--adp-col)) !important;
    left: calc(35px + 246px * var(--adp-col)) !important;
    top: -webkit-calc(136px + 342px * var(--adp-row)) !important;
    top: calc(136px + 342px * var(--adp-row)) !important;
    width: 230px !important;
    height: 326px !important;
    background: url(../image/13_attendance/h5p/at_bg.png?v=2) no-repeat 0 0 !important;
    background-size: 230px 326px !important;
    border: 0 !important;
    border-radius: 24px !important;	/* 그림 모서리와 같게 - 오늘 칸 테두리빛이 네모나지 않게 */
    box-sizing: border-box !important;
    padding: 0 !important;
    z-index: 1 !important;
    /* 'N일' 원본 글자는 감추고 아래 ::before 가 그림 속 라벨 자리에 'N일차' 를 쓴다 */
    color: transparent !important;
    font-size: 0 !important;
}
/* 칸 왼쪽 위 모서리 숫자 상자: 칸 테두리 색 판 + 흰 숫자. 바깥 모서리는 칸 모서리(21)와 같이 둥글게 */
html.h5p div[id^="Txt_AD_num_"]::before
{
    content: attr(data-day) '일차';
    position: absolute;
    left: 10px;
    top: 10px;
    width: 152px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    background: none;
    border-radius: 0;
}

/* 보상 아이콘: 칸 가운데. 칸 판이 DOM 상 뒤라 위로 올려야 보인다 */
/* 2026-09-21 CEO 지시: 새 240x240 그림(가장자리 투명 여백 포함)이 90 에서 작아 보여 116 으로 키웠다.
   그림 속 보이는 부분이 날짜 글자(~60)와 값 글자(~165) 사이에 들어가게 칸 위에서 53 (가운데 111) */
html.h5p img[id^="Img_AD_icon_"]
{
    /* 그림 속 라벨(~68)과 보상 띠(217) 사이 가운데. 그림 파일은 240 안에 여백이 있어 124 로 놓으면 시안과 같다 */
    left: -webkit-calc(35px + 246px * var(--adp-col) + 53px) !important;
    left: calc(35px + 246px * var(--adp-col) + 53px) !important;
    top: -webkit-calc(136px + 342px * var(--adp-row) + 77px) !important;
    top: calc(136px + 342px * var(--adp-row) + 77px) !important;
    width: 124px !important;
    height: 124px !important;
    z-index: 2 !important;
}

/* 보상 값: 칸 아래쪽 */
/* 2026-09-21 CEO 지시: 위의 날짜(1일, 2일 ...)와 한눈에 구분되게 연한 아이보리 단색 둥근 상자를 깔고(효과 없음) 글자는 주황 톤으로.
   상자는 기본 2줄 자리(칸 위에서 172 ~ 242, 칸 안쪽 아래끝 249). 한 줄 값(1~7일차)은 상자 세로 가운데에,
   '+' 가 든 값(8일차 100만+루비10)은 '+' 뒤에서 줄을 바꾼다 (S_attendance_portrait.js format_values) */
html.h5p div[id^="Txt_AD_value_"]
{
    left: -webkit-calc(35px + 246px * var(--adp-col) + 12px) !important;
    left: calc(35px + 246px * var(--adp-col) + 12px) !important;
    top: -webkit-calc(136px + 342px * var(--adp-row) + 217px) !important;
    top: calc(136px + 342px * var(--adp-row) + 217px) !important;
    width: 206px !important;
    height: 96px !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    line-height: 44px !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #b33800 !important;
    background: none !important;	/* 띠는 칸 그림에 들어 있다 */
    border-radius: 0 !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}

/* 받은 칸 표시: '보상완료' 도장 그림 대신 칸 안쪽 전체를 검정 50% 로 덮고 가운데에 초록 원 + 흰 체크 (2026-09-21 CEO 지시).
   원본이 이 요소를 보이고/숨기는 것(받은 칸 판정, 오늘 칸 0.7초 뒤 찍기)은 그대로 두고 모양만 바꾼다.
   img 안 그림(도장)은 내용 칸을 0x0 으로 만들어 안 보이게 하고, 안쪽 여백(padding)에 딤과 체크를 배경으로 그린다.
   칸 안쪽 = 칸 테두리 6 안 174x243, 체크(76)는 아이콘 가운데(칸 위 111)에 맞춘다 */
html.h5p img[id^="Img_AD_press_"]
{
    /* 2026-10-09 CEO 전달 그림(at_check 230x326) 한 장이 회색 덮개와 체크를 함께 그린다.
       원본 img 안 도장 그림은 내용 칸을 0x0 으로 만들어 감추고 안쪽 여백에 배경으로 깐다 */
    left: -webkit-calc(35px + 246px * var(--adp-col)) !important;
    left: calc(35px + 246px * var(--adp-col)) !important;
    top: -webkit-calc(136px + 342px * var(--adp-row)) !important;
    top: calc(136px + 342px * var(--adp-row)) !important;
    width: 0 !important;
    height: 0 !important;
    padding: 163px 115px !important;	/* 칸 전체 230x326 */
    box-sizing: content-box !important;
    border-radius: 24px !important;
    background-color: transparent !important;
    background-image: url(../image/13_attendance/h5p/at_check.png) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 230px 326px !important;
    z-index: 5 !important;
    -webkit-animation: adp_check_in 0.35s ease-out both;
    animation: adp_check_in 0.35s ease-out both;
}
/* 나타날 때(오늘 칸은 0.7초 뒤 찍힐 때) 살짝 톡 튀어나온다 */
@-webkit-keyframes adp_check_in
{
    0%   { opacity: 0; -webkit-transform: scale(0.7); }
    70%  { opacity: 1; -webkit-transform: scale(1.06); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes adp_check_in
{
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---- 8번째 칸 (S_attendance_portrait.js 가 생성) ---- */
html.h5p #ADP_slot8
{
    position: absolute;
    left: calc(51px + (186px + 18px) * 3);
    top: calc(129px + (225px + 24px) * 1);
    width: 186px;
    height: 225px;
    background: #ffffff;
    border: 6px solid #b9905a;
    border-radius: 21px;
    box-sizing: border-box;
    padding-top: 9px;
    text-align: center;
}
html.h5p #ADP_slot8 .ADP_num
{
    height: 51px;
    line-height: 51px;
    font-size: 36px;
    font-weight: 700;
    color: #5a3a18;
}
html.h5p #ADP_slot8 .ADP_icon
{
    display: block;
    width: 90px;
    height: 90px;
    margin: 6px auto 0;
}
html.h5p #ADP_slot8 .ADP_value
{
    height: 48px;
    line-height: 48px;
    font-size: 33px;
    color: #5a3a18;
}

/* ---- 하단 누적일수 영역 ---- */
html.h5p #ADP_total
{
    position: absolute;
    left: 28px;
    top: 962px;
    width: 985px;
    height: 312px;
    /* 2026-10-19 CEO 가 준 새 판 그림 (985x312). 전에는 색만 깔아 썼다 */
    background: url(../image/13_attendance/h5p/at_total_bg.png) no-repeat 0 0;
    background-size: 985px 312px;
    box-sizing: border-box;
}
/* 8칸(연속 출석)과 누적 보상 사이 구분선: 격자 아래끝 758 + 60 = 818 (누적 영역 위 62) */
html.h5p #ADP_total::before
{
    content: '';
    position: absolute;
    left: 3px;
    top: -62px;
    width: 979px;
    height: 33px;
    background: url(../image/13_attendance/h5p/at_divider.png) no-repeat 0 0;
    background-size: 979px 33px;
}
/* '누적 보상' 제목 줄: 왼쪽 제목, 오른쪽 보상보기 버튼 (2026-09-15 CEO 지시) */
html.h5p #ADP_total_head
{
    position: absolute;
    left: 43px;
    top: 24px;
    width: 910px;	/* 박스 985 - 왼쪽 43 - 오른쪽 32 */
    height: 60px;
    line-height: 60px;
    font-size: 56px;
    font-weight: 800;
    color: #83610a;
}
/* 보상보기: 내정보 팝업의 초록 버튼(profile_bt 174x74, .MYI_green_btn)과 같은 그림/글자 */
/* 누적 보상 목록을 여는 버튼: 글자 '보상보기' 초록 버튼 대신 단순한 동그라미 ? (2026-09-21 CEO 지시).
   제목 줄(높이 74) 오른쪽 끝, 세로 가운데 */
/* 2026-09-21 CEO 전달 그림(co_onebt 133x133, 초록빛 회색 둥근 버튼)을 바탕으로 쓰고 ? / X 는 흰색으로 얹는다 */
html.h5p #ADP_view_btn
{
    position: absolute;
    right: 0;
    top: 1px;	/* 제목 줄 60 가운데 */
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 44px;	/* 2026-10-09 새 시안에 맞춰 버튼 72 -> 58 */
    font-weight: 800;
    color: #ffffff;
    /* 2026-10-10 CEO 지시(2차): 동그라미 단추가 아니라 ? 글자에만 빛을 두른다.
       색은 단추 바탕(123,139,119) 보다 조금 어두운 톤으로, 좁게 4 / 7 두 겹 */
    text-shadow: 0 0 4px rgba(58, 69, 55, 0.95), 0 0 7px rgba(58, 69, 55, 0.6);
    background: url(../image/1_mainmenu/h5p/co_onebt.png?v=2) no-repeat 0 0;
    background-size: 58px 58px;
    border: 0;
    border-radius: 50%;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}
/* 누적 보상 목록이 열려 있는 동안 ? 대신 X (2026-09-21 CEO 결정).
   글자 X/기호 문자는 기기 글꼴에 따라 다르게 보여, 두 막대를 엇갈려 그린다 */
html.h5p #ADP_view_btn.ADP_view_on
{
    color: transparent;
    text-shadow: none;	/* 글자는 투명이어도 그림자가 남아 ? 가 X 밑으로 비쳤다 (2026-09-21 CEO 지적) */
    font-size: 0;
}
html.h5p #ADP_view_btn.ADP_view_on::before
{
    /* 2026-10-10 CEO 지적: 막대 두 개에 따로 그림자를 주니 막대마다 테두리가 따로 생겼다.
       X 한 장을 깔고 filter 를 걸어 붙은 X 모양 바깥으로만 빛이 번지게 한다 */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../image/1_mainmenu/h5p/co_onebt_x.png?v=1) no-repeat center center;
    background-size: 32px 32px;	/* 2026-10-19 CEO 지적: 동그라미(58) 안에 꽉 차 보인다 (40 -> 32) */
    -webkit-filter: drop-shadow(0 0 4px rgba(58, 69, 55, 0.95)) drop-shadow(0 0 7px rgba(58, 69, 55, 0.6));
    filter: drop-shadow(0 0 4px rgba(58, 69, 55, 0.95)) drop-shadow(0 0 7px rgba(58, 69, 55, 0.6));
}
html.h5p #ADP_view_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
/* '누적 N일차': 제목 아래 줄 */
/* 누적 보상 묶음 상자: 단색, 효과 없음 (2026-09-21 CEO 지시 - 위 8칸과 다른 내용임을 보이게) */
html.h5p #ADP_total_box
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border-radius: 0;
    box-sizing: border-box;
}
/* '누적 N일차': 따로 한 줄 쓰던 것을 제목 줄(위 10 ~ 84) 오른쪽, ? 버튼(64) 왼쪽에 오른쪽 정렬로 (2026-09-21 CEO 지시) */
html.h5p #ADP_total_day
{
    position: absolute;
    top: 26px;
    right: 113px;	/* 박스 오른쪽 32 + ? 버튼 58 + 사이 23 */
    height: 60px;
    line-height: 60px;
    font-size: 44px;
    font-weight: 700;
    color: #ae885b;
    white-space: nowrap;
}
/* 제목 줄과 다음 보상 줄 사이 (예전 '누적 N일차' 줄 아래 여백 8 을 대신한다) */
html.h5p #ADP_total_head
{
    margin-bottom: 0;
}
/* ---- 누적 보상 띠: 지금 단계부터 세 칸 (2026-10-19 CEO 지시) ----
   예전 '다음 ≫ | 누적 10일 / 5일 남음' 한 줄로는 무엇을 받았는지 안 읽혔다.
   방금 받은 칸은 8칸의 '오늘' 칸처럼 주황으로, 아직 못 받은 칸은 회색으로 둔다.
   자리는 예전 한 줄(#ADP_total_row)과 같다 - 919 를 297 x 3 + 사이 14 x 2 로 나눈다 */
html.h5p #ADP_ms_strip
{
    position: absolute;
    left: 32px;
    top: 102px;
    width: 919px;
    height: 175px;
    font-size: 0;		/* 칸 사이 빈 글자 틈 없애기 */
}
html.h5p .ADP_msc
{
    display: inline-block;
    width: 259px;		/* 259 x 3 + 겹화살표 47 x 3 = 918 (띠 919 안) */
    height: 175px;
    margin-right: 0;
    /* 2026-10-19 CEO 가 준 새 칸 그림 (257x174). 테두리가 그림 안에 들어 있어 따로 두르지 않는다 -
       예전 테두리(3) 만큼 안여백을 더해 글자 자리는 그대로다 */
    padding: 24px 11px 0 11px;	/* 글 두 줄(46 + 80)을 칸 가운데에 */
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    background: url(../image/13_attendance/h5p/at_ms_box.png) no-repeat 0 0;
    background-size: 259px 175px;
    border: 0;
}
/* 칸 사이 겹화살표 - 글꼴에 기대지 않게 테두리로 그린다 (2026-10-19 CEO 지시) */
html.h5p .ADP_msc_arw
{
    position: relative;
    display: inline-block;
    width: 47px;
    height: 175px;
    vertical-align: top;
}
html.h5p .ADP_msc_arw::before,
html.h5p .ADP_msc_arw::after
{
    content: '';
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -9px;
    border-top: 5px solid #c3a87c;
    border-right: 5px solid #c3a87c;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
html.h5p .ADP_msc_arw::before { left: 4px; }
html.h5p .ADP_msc_arw::after  { left: 20px; }
/* 뒤에 더 없을 때 왼쪽에 두는 '이전' 화살표 - 같은 그림을 좌우로 뒤집는다 */
html.h5p .ADP_msc_arw_prev
{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
html.h5p .ADP_msc_day
{
    height: 50px;
    line-height: 50px;
    font-size: 38px;	/* 2026-10-19 CEO 지시로 조금 키움 (34 -> 38) */
    font-weight: 800;
    color: #7a5a2c;
    white-space: nowrap;
}
html.h5p .ADP_msc_rw
{
    height: 84px;
}
html.h5p .ADP_msc_rw .ADP_rw
{
    display: block;
    margin: 0;
    height: 42px;
    line-height: 42px;
    font-size: 36px;	/* 2026-10-19 CEO 지시로 조금 키움 (32 -> 36) */
    font-weight: 700;
    color: #b33800;
    white-space: nowrap;
}
html.h5p .ADP_msc_rw .ADP_rw_icon
{
    width: 40px;
    height: 40px;
    margin: 2px 6px 0 0;
}
/* 방금 받은 칸: 8칸의 '오늘' 칸과 같은 주황 판 */
html.h5p .ADP_msc_now
{
    background-image: url(../image/13_attendance/h5p/at_ms_box_now.png);
}
/* 새 그림은 속이 밝은 노랑이라 흰 글자가 안 보인다 - 글자색은 흰 칸과 같게 두고
   금색 테두리와 빛무리로만 도드라지게 한다 (2026-10-19 새 그림) */
html.h5p .ADP_msc_now .ADP_msc_day
{
    color: #a9651a;
}
/* 예전에 받아 지나간 칸: 회색 (2026-10-19 CEO 지시) */
html.h5p .ADP_msc_done
{
    background-image: url(../image/13_attendance/h5p/at_ms_box_done.png);
}
html.h5p .ADP_msc_done .ADP_msc_day,
html.h5p .ADP_msc_done .ADP_rw
{
    color: #9b958b;
}
html.h5p .ADP_msc_done .ADP_rw_icon
{
    -webkit-filter: grayscale(1) opacity(0.55);
    filter: grayscale(1) opacity(0.55);
}


html.h5p #ADP_total_row
{
    position: absolute;
    left: 32px;
    top: 102px;
    width: 919px;
    height: 175px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 36px;
    color: #5a3a18;
}
html.h5p #ADP_total_sub { margin-left: 18px; color: #8a6a3a; }
/* 2026-10-09 CEO 전달 시안: '다음' 일 때만 흰 칸 왼쪽에 주황 버튼 그림을 놓고,
   오른쪽 칸(세로 줄 뒤)에 값과 보상을 둔다. 그 밖의 문구('누적 출석 보상' / '모두 받았습니다')는
   버튼 없이 흰 칸 전체를 한 줄로 쓴다 (S_attendance_portrait.js set_line_mode) */
html.h5p #ADP_total_row.ADP_row_next #ADP_total_line,
html.h5p #ADP_total_row.ADP_row_next #ADP_total_reward
{
    padding-left: 274px;
}
html.h5p #ADP_total_row.ADP_row_next #ADP_total_title
{
    position: absolute;
    left: 28px;
    top: 46px;
    width: 140px;
    height: 94px;
    padding-right: 78px;	/* 그림 오른쪽의 겹화살표 자리 */
    line-height: 94px;
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    background: url(../image/13_attendance/h5p/at_nextbg.png) no-repeat 0 0;
    background-size: 218px 94px;
}
html.h5p #ADP_total_value { font-weight: 700; }	/* 2026-10-09: 오른쪽 띄우기(float)를 그만두고 흰 칸 가운데로 */

/* 하단 확인/보상받기 버튼: 주황 단색 버튼 대신 다른 팝업과 같은 디자이너 초록 버튼 그림(popup_green_bt 337x104) 을 원본 크기로
   (2026-09-21 CEO 지시). 글자는 흰 글자 + 버튼 색 테두리 (#H5PC_btn_yes 와 같다) */
html.h5p #ADP_total_btn
{
    position: absolute;
    left: 50%;
    top: 344px;	/* 누적 상자(312) 아래 32 - 2026-10-10 CEO 지시로 18 내렸다.
                   위 14 / 아래 52(팬 끼리 1448 - 버튼 끝 1392 - 힐 테두리 4) 로 아래가 넓었다 */
    margin: 0 0 0 -168px;
    width: 337px;
    height: 104px;
    line-height: 100px;
    text-align: center;
    font-size: 48px;	/* 42 -> 48 */
    font-weight: 800;
    color: #ffffff;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a;
    background: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) no-repeat 0 0;
    background-size: 337px 104px;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    /* 2026-10-10 CEO 지적(앞서 넣은 h5_start_pulse 는 그냥 커졌다 작아지는 것이라 다른 움직임이었다):
       방 선택 '입장' 단추(MMP_enter_pulse)·미션 '보상받기' 단추(h5pq_claim_pulse)와 똑같이
       가로로 늘었다 줄고 이어서 세로로 늘었다 줄는 꿀렁임이다. 같은 파일의 h5pq_claim_pulse 를 그대로 쓴다 */
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: h5pq_claim_pulse 1.2s ease-in-out infinite;
    animation: h5pq_claim_pulse 1.2s ease-in-out infinite;
}

/* 설정에서 연 출석 팝업: 머리띠 오른쪽 X 로 닫는다 (내정보 팝업 #MYI_close 와 같은 그림, 판 폭 900 에 맞춰 left 780).
   로그인 때 뜨는 팝업(보상 받기)에는 X 가 없다 - 2026-09-16 CEO 지시 그대로 (2026-09-21 CEO 지시) */
html.h5p #ADP_close
{
    display: none;
    position: absolute;
    left: 920px;	/* 판 폭 1040 - 120 */
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 30;
    /* 2026-10-10 CEO 지시: 팝업 닫기 단추에는 빛을 넣지 않는다 (누적 보상 ? / X 에만) */
}
html.h5p.h5p_attset #ADP_close
{
    display: block;
}
/* 설정에서 연 팝업은 하단 '확인' 버튼을 감춘다. 받을 누적 보상이 있으면 '보상받기' 는 남긴다(받을 길이 없어지므로) */
html.h5p.h5p_attset #AD_bg.ADP_noclaim #ADP_total_btn
{
    display: none !important;
}
/* 버튼(여백 14 + 높이 104 = 118)이 빠진 만큼 팝업을 줄이고 세로 가운데 유지 */
html.h5p.h5p_attset #AD_bg.ADP_noclaim
{
    top: -webkit-calc(50% - 656px) !important;
    top: calc(50% - 656px) !important;
    height: 1312px !important;	/* 1448 - 136 (버튼 위 여백 32 + 높이 104) - 2026-10-10 여백이 14 -> 32 로 늘어 118 -> 136 */
}

/* 확인 버튼: 판 아래 가운데 */
/* 확인 버튼: 하단 보상받기 버튼이 닫기 역할을 겸하므로 화면에서 감춘다 (요소는 유지) */
html.h5p #AD_btn1
{
    display: none !important;
}

/* 설정에서 연 출석 팝업 (S_attendance_portrait.js ADP_SET, 2026-09-21 CEO 지시):
   설정 화면은 뒤에 그대로 두고 딜(#h5p_dim)을 깔고, 팝업은 내정보 팝업과 같은 모션으로 뜨고 사라진다 (h5_portrait_myinfo.css 키프레임) */
html.h5p.h5p_attset #AD_bg
{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
}
html.h5p.h5p_attset.h5p_attset_closing #AD_bg
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
/* 딜은 설정 화면(#S_SETTING_div z55) 위, 출석 팝업(z60) 아래로 올린다. 그대로(z50) 두면 배경만 어두워지고 설정 글자는 밝게 남는다 */
html.h5p.h5p_attset #h5p_dim
{
    z-index: 57;
}
/* 딜만 걷힌다 - h5p_dim_out 은 설정 배경(#h5p_subbg)까지 걷어서 쓰지 않는다 */
html.h5p.h5p_dim_on.h5p_attset_closing #h5p_dim
{
    -webkit-animation: h5p_dim_fade_out 300ms ease-in both;
    animation: h5p_dim_fade_out 300ms ease-in both;
}

/* 월정액 안내 문구는 4x2 격자에서 자리가 없어 감춘다 */
html.h5p #AD_monthly_title,
html.h5p #AD_monthly_goldruby
{
    display: none !important;
}

/* ============ 개발용 테스트 패널 (devtest=1 일 때만) ============ */
/* 캔버스 밖(html)에 얹어 배율 영향을 받지 않는다.
   h5_portrait_devpanel.js 가 생성하며, 실제 서비스에서는 요소 자체가 안 만들어진다 */
#H5PDEV_panel
{
    position: fixed;
    right: 8px;
    top: 8px;
    width: 148px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid #ff2d55;
    border-radius: 8px;
    z-index: 100000;
    font-family: sans-serif;
}
#H5PDEV_panel_head
{
    margin-bottom: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #ff2d55;
    letter-spacing: 1px;
}
#H5PDEV_panel .H5PDEV_btn
{
    margin-bottom: 5px;
    padding: 7px 4px;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    background: #33404d;
    border: 1px solid #6a7a8a;
    border-radius: 5px;
    cursor: pointer;
}
#H5PDEV_panel .H5PDEV_btn:active
{
    background: #4a5b6b;
}
#H5PDEV_msg
{
    min-height: 14px;
    text-align: center;
    font-size: 10px;
    color: #9ee6a0;
}

/* 점수바의 흔들기(종)/뻑(똥) 아이콘은 세로에서 감춘다 (2026-09-09 CEO 지시).
   score_bar.png 위에 겹쳐 보여서 지저분하다. 표시만 없애고 점수 계산은 그대로다 */
html.h5p #user_i_shake_img,
html.h5p #user_you_shake_img,
html.h5p #user_i_puk_img,
html.h5p #user_you_puk_img
{
    display: none !important;
}

/* 패 뒤집기 3D 카드: 바닥패와 같은 크기로 따라간다 (h5_portrait_game.js 가 변수 갱신) */
html.h5p .front, html.h5p .back, html.h5p .face
{
    width: var(--g_card_w, 124px) !important;
    height: var(--g_card_h, 184px) !important;
    background-size: 100% 100% !important;
}

/* ============ 이용약관 동의 (S_AGREE): 가로 2단 -> 세로 목록 ============ */
/* 원본 요소(가로 1280 기준 좌우 약관 박스/체크/버튼)는 감추고,
   S_agree_portrait.js 가 만든 세로 목록만 보여준다. 판정과 이동은 원본 것을 그대로 쓴다 */
html.h5p #S_AGREE_div > *:not(#AGP_root)
{
    display: none !important;
}

/* 법적 고지 화면이라 배경 없이 흰 바탕으로 또렷하게 */
html.h5p #AGP_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    font-family: 'NanumSquareRound', sans-serif;
}

html.h5p #AGP_title
{
    position: absolute;
    left: 0;
    top: 180px;
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 57px;
    font-weight: 700;
    color: #222222;
}

html.h5p #AGP_line
{
    position: absolute;
    left: 0;
    top: 312px;
    width: 100%;
    height: 7.5px;
    background: #e60012;
}

/* ---- 동의 줄 ---- */
/* 줄 높이 112px = 1080기준 168px (최소 터치영역) */
html.h5p .AGP_row
{
    position: absolute;
    left: 60px;
    width: 960px;
    height: 168px;
    cursor: pointer;
}

html.h5p #AGP_row_all { top: 384px; }
html.h5p #AGP_row1    { top: 588px; }
html.h5p #AGP_row2    { top: 756px; }

/* 하위 두 줄은 한 단 들여 쓴다 (전체동의 아래 항목이라는 뜻) */
html.h5p #AGP_row1 .AGP_box,
html.h5p #AGP_row2 .AGP_box
{
    left: 60px;
}
html.h5p #AGP_row1 .AGP_label,
html.h5p #AGP_row2 .AGP_label
{
    left: 174px;
    font-size: 45px;
}

html.h5p .AGP_box
{
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -39px;
    width: 78px;
    height: 78px;
    line-height: 72px;
    text-align: center;
    font-size: 51px;
    font-weight: 700;
    color: transparent;
    background: #ffffff;
    border: 4.5px solid #c8c8c8;
    border-radius: 12px;
    box-sizing: border-box;
}

/* 체크된 칸 */
html.h5p .AGP_box.AGP_on
{
    color: #ffffff;
    background: #e60012;
    border-color: #e60012;
}

html.h5p .AGP_label
{
    position: absolute;
    left: 114px;
    top: 0;
    height: 168px;
    line-height: 168px;
    font-size: 51px;
    font-weight: 700;
    color: #222222;
    white-space: nowrap;
}

html.h5p .AGP_all .AGP_label
{
    font-size: 54px;
}

/* 오른쪽 '보기' - 누르면 전문이 전체화면으로 열린다 */
html.h5p .AGP_view
{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -84px;
    width: 168px;
    height: 168px;
    line-height: 168px;
    text-align: center;
    font-size: 42px;
    color: #666666;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- 하단 동의 버튼 ---- */
html.h5p #AGP_submit
{
    position: absolute;
    left: 60px;
    bottom: 210px;
    width: 960px;
    height: 174px;
    line-height: 174px;
    text-align: center;
    font-size: 57px;
    font-weight: 700;
    color: #ffffff;
    background: #e60012;
    border-radius: 18px;
    cursor: pointer;
}

/* 둘 다 체크하기 전에는 흐리게 (눌러도 원본이 안내 문구를 띄운다) */
html.h5p #AGP_submit.AGP_dim
{
    background: #c9c9c9;
}

/* ---- 약관 전문 화면 (S_AGREE_DETAIL): 세로 전체화면 ---- */
html.h5p #S_AGREE_DETAIL_div
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 200;
}

/* 가로용 배경 그림과 좌우 화살표는 쓰지 않는다 */
html.h5p #AGD_bg,
html.h5p #AGD_left_arrow,
html.h5p #AGD_right_arrow
{
    display: none !important;
}

/* 제목 이미지: 상단 중앙 */
html.h5p #AGD_title
{
    left: 50% !important;
    top: 165px !important;
    transform: translateX(-50%) !important;
}

/* 전문 본문: 세이프에어리어 안에서 세로로 길게 (원본이 인라인 좌표를 넣으므로 덮어쓴다) */
html.h5p #AGD_contents
{
    left: 60px !important;
    top: 345px !important;
    width: 960px !important;
    /* 아래끝을 닫기 버튼 위 24 까지 내림 (화면높이 - 300 -> - 177, 2026-09-22 CEO 지시 - 아래 여백을 늘린 뒤 남는 자리를 쓴다) */
    height: -webkit-calc(100% - 522px) !important;
    height: calc(100% - 522px) !important;
    padding: 30px !important;
    background: #ffffff !important;
    border: 4.5px solid #d8d8d8 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
}

/* 약관 전문은 워드에서 뽑은 HTML 이라 본문 태그에 12px 가 직접 박혀 있다.
   컨테이너에만 크기를 주면 안 먹으므로 본문 태그까지 지정한다.
   30px(=1080기준 45px)이면 일반적인 폰에서 약 15pt - 모바일 본문 권장 크기다 */
html.h5p #AGD_contents,
html.h5p #AGD_contents p,
html.h5p #AGD_contents span,
html.h5p #AGD_contents div,
html.h5p #AGD_contents li,
html.h5p #AGD_contents td,
html.h5p #AGD_contents th,
html.h5p #AGD_contents font
{
    font-size: 45px !important;
    line-height: 66px !important;
}

/* 확인 버튼: 하단 중앙 */
/* 2026-10-09 CEO 지시: 팝업에 쓰는 회색 네모 버튼(337x104)으로 바꾼다.
   원본이 깔던 그림(co_okbt.png)과 포커스 테두리는 감추고 배경으로 새 그림을 깐다.
   판 가운데(540)에 두려면 왼쪽이 540 - 337/2 = 371.5 -> 372 */
html.h5p #AGD_btn1
{
    left: 372px !important;
    top: auto !important;
    bottom: 180px !important;
    /* 다른 서브화면 하단 버튼(미션 모두받기 등)과 같은 높이로 내림: 107 - 하단 내림(56) = 51 (2026-09-22 CEO 지시) */
    bottom: -webkit-calc(107px - var(--h5p_sub_drop, 0px)) !important;
    bottom: calc(107px - var(--h5p_sub_drop, 0px)) !important;
    width: 337px !important;
    height: 104px !important;
    background: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) no-repeat 0 0 !important;
    background-size: 337px 104px !important;
}
html.h5p #AGD_btn1_bg,
html.h5p #AGD_btn1_focus
{
    display: none !important;
}
html.h5p #AGD_btn1_txt
{
    left: 0 !important;
    top: 0 !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 100px !important;
    text-align: center !important;
    font-size: 50px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -1px;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a,
                 -2px -2px 0 #35383a, 2px 2px 0 #35383a, -2px 2px 0 #35383a, 2px -2px 0 #35383a;
}

/* ---- 약관 탭 (설정에서 열 때만 - S_agree_portrait.js open_tabs, 2026-09-11 CEO 지시) ---- */
/* 제목(136~286) 아래에 탭 줄을 두고, 본문은 탭 아래로 내린다. 본문 아래끝(화면 높이 - 300)은 원래와 같다 */
html.h5p #AGP_tabs
{
    position: absolute;
    left: 60px;
    top: 306px;
    width: 960px;
    height: 110px;
}
/* 2026-10-09 CEO 지시: 랭킹 화면 칸처럼 고른 것은 초록, 안 고른 것은 회색.
   랭킹은 칸마다 그림(ranking_*bt.png)을 쓰는데 이 탭은 글자 길이가 달라 그림 대신 같은 색만 가져왔다
   (회색 #656978~#9aa3b4 / 초록 #63ad65~#7cc952, 글자는 흰색 + 어두운 테두리) */
html.h5p .AGP_tab
{
    position: absolute;
    top: 0;
    width: 474px;
    height: 110px;
    line-height: 110px;
    border: 0;
    border-radius: 24px;
    box-sizing: border-box;
    background: -webkit-linear-gradient(top, #656978, #9aa3b4);
    background: linear-gradient(#656978, #9aa3b4);
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -3px 0 0 #3c404d, 3px 0 0 #3c404d, 0 -3px 0 #3c404d, 0 3px 0 #3c404d,
                 -2px -2px 0 #3c404d, 2px -2px 0 #3c404d, -2px 2px 0 #3c404d, 2px 2px 0 #3c404d;
    cursor: pointer;
}
html.h5p #AGP_tab1 { left: 0; }
html.h5p #AGP_tab2 { right: 0; }
html.h5p .AGP_tab.AGP_tab_on
{
    background: -webkit-linear-gradient(top, #63ad65, #7cc952);
    background: linear-gradient(#63ad65, #7cc952);
    color: #ffffff;
    text-shadow: -3px 0 0 #2f6b24, 3px 0 0 #2f6b24, 0 -3px 0 #2f6b24, 0 3px 0 #2f6b24,
                 -2px -2px 0 #2f6b24, 2px -2px 0 #2f6b24, -2px 2px 0 #2f6b24, 2px 2px 0 #2f6b24;
}
/* 2026-10-09 CEO 지시: 설정에서 열면 탭에 '이용약관 / 개인정보 취급방침' 이 이미 적혀 있어
   위 글자 타이틀이 같은 말을 되풀이한다 - 탭으로 열 때만 감추고 그만큼 탭과 본문을 위로 올린다.
   앱을 처음 켤 때 뜨는 전문 화면(탭 없음)은 타이틀이 있어야 하므로 그대로 둔다 */
html.h5p #S_AGREE_DETAIL_div.AGP_tabmode #AGD_title_txt
{
    display: none !important;
}
html.h5p #S_AGREE_DETAIL_div.AGP_tabmode #AGP_tabs
{
    top: 160px;		/* 타이틀 자리(136~286)로 올린다 - 탭 160~270 */
}
html.h5p #S_AGREE_DETAIL_div.AGP_tabmode #AGD_contents
{
    top: 300px !important;
    height: -webkit-calc(100% - 477px) !important;	/* 아래끝은 그대로 화면높이 - 177 (닫기 버튼 위 24) */
    height: calc(100% - 477px) !important;
}

/* ---- 태블릿: 약관 화면의 흰 바탕을 화면 끝까지 채운다 (2026-09-18 CEO 지시) ----
   1080 상자(h5p_legacy) 안에 있어 넓은 기기에서 좌우가 게임 배경 그림으로 남았다.
   글자/상자 자리는 1080 그대로 두고, 바탕만 ::before 로 좌우 여분(--h5p_extra_x)까지 넓힌다 */
html.h5p #AGP_root,
html.h5p #S_AGREE_DETAIL_div
{
    background: transparent;
}
html.h5p #AGP_root::before,
html.h5p #S_AGREE_DETAIL_div::before
{
    content: "";
    position: absolute;
    left: -webkit-calc(-1 * var(--h5p_extra_x, 0px));
    left: calc(-1 * var(--h5p_extra_x, 0px));
    top: 0;
    width: -webkit-calc(100% + 2 * var(--h5p_extra_x, 0px));
    width: calc(100% + 2 * var(--h5p_extra_x, 0px));
    height: 100%;
    background: #ffffff;
}
/* 약관 화면이 떠 있는 동안만 1080 자르기를 푸다 (S_agree_portrait.js set_wide) */
html.h5p.h5p_agree_wide #h5p_legacy
{
    overflow: visible;
}

/* ============ 레벨업 연출 팝업 (LEVELUP_pop, 20260908) ============ */
html.h5p #LEVELUP_pop
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 200;
    display: -webkit-box; display: -webkit-flex; display: flex;
    -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
    -webkit-box-align: center; -webkit-align-items: center; align-items: center;
    pointer-events: none;
    /* 딤 35% -> 80% (다른 팝업 공통 딤과 같게): 밝은 게임판 위에서 글자가 묻혔다 (2026-09-15 CEO 지시) */
    background: rgba(0,0,0,0.8);
    -webkit-animation: LEVELUP_bgin 0.3s ease;
    animation: LEVELUP_bgin 0.3s ease;
}
html.h5p #LEVELUP_pop.LEVELUP_out
{
    opacity: 0;
    transition: opacity 0.4s ease;
}
html.h5p #LEVELUP_inner
{
    text-align: center;
    padding: 60px 80px;
    border-radius: 32px;
    background: radial-gradient(circle at 50% 35%, rgba(255,220,120,0.28), rgba(0,0,0,0.0) 70%);
    -webkit-animation: LEVELUP_pop 0.5s cubic-bezier(0.2,1.4,0.4,1);
    animation: LEVELUP_pop 0.5s cubic-bezier(0.2,1.4,0.4,1);
}
/* 글자가 잘 보이게 (2026-09-15 CEO 지시): 번지는 그림자만으로는 흐려서, 네 방향 진한 테두리를 먼저 두르고 빛은 그 바깥에 약하게 */
html.h5p #LEVELUP_title
{
    font-size: 64px;
    font-weight: 800;
    color: #ffe14a;
    letter-spacing: 3px;
    text-shadow: -3px 0 0 #5a3200, 3px 0 0 #5a3200, 0 -3px 0 #5a3200, 0 3px 0 #5a3200,
                 -2px -2px 0 #5a3200, 2px -2px 0 #5a3200, -2px 2px 0 #5a3200, 2px 2px 0 #5a3200,
                 0 0 22px rgba(255,180,40,0.7);
    font-family: 'NanumSquareRound', sans-serif;
}
html.h5p #LEVELUP_lv
{
    margin-top: 10px;
    font-size: 92px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -4px 0 0 #123a66, 4px 0 0 #123a66, 0 -4px 0 #123a66, 0 4px 0 #123a66,
                 -3px -3px 0 #123a66, 3px -3px 0 #123a66, -3px 3px 0 #123a66, 3px 3px 0 #123a66,
                 0 0 24px rgba(120,200,255,0.7);
}
html.h5p #LEVELUP_reward
{
    margin-top: 26px;
}
html.h5p .LEVELUP_rw
{
    font-size: 40px;
    font-weight: 800;
    color: #c8f7ae;
    margin: 8px 0;
    text-shadow: -2px 0 0 #1c3a12, 2px 0 0 #1c3a12, 0 -2px 0 #1c3a12, 0 2px 0 #1c3a12,
                 -2px -2px 0 #1c3a12, 2px -2px 0 #1c3a12, -2px 2px 0 #1c3a12, 2px 2px 0 #1c3a12;
}
@-webkit-keyframes LEVELUP_pop { 0%{ -webkit-transform:scale(0.4); opacity:0;} 100%{ -webkit-transform:scale(1); opacity:1;} }
@keyframes LEVELUP_pop { 0%{ transform:scale(0.4); opacity:0;} 100%{ transform:scale(1); opacity:1;} }
@-webkit-keyframes LEVELUP_bgin { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes LEVELUP_bgin { 0%{opacity:0;} 100%{opacity:1;} }

/* 레벨업 팝업 - 우편함 안내 문구 */
html.h5p #LEVELUP_mail
{
    margin-top: 16px;
    font-size: 36px;    /* 24 -> 28 (2026-09-15 CEO 지시 - 잘 보이게) -> 36 (2026-09-22 글자 크기 점검) */
    font-weight: 700;
    color: #ffe3a3;
    text-shadow: -2px 0 0 #4a2a00, 2px 0 0 #4a2a00, 0 -2px 0 #4a2a00, 0 2px 0 #4a2a00;
}

/* ============================================================= */
/* 랭킹(리그) 화면 (세로 로비 전용 오버레이) - S_rank.js         */
/* ============================================================= */
/* 가운데 1080 칸에 고정한다. 100% 로 두면 가로가 넓은 화면(PC 단독 브라우저, 태블릿)에서
   캔버스 전체 폭으로 퍼져 목록이 양옆으로 늘어난다 (2026-09-11 CEO 지적). 메인화면/내정보와 같은 방식 */
html.h5p #RANK_root
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    top: 0;
    width: 1080px;
    height: 100%;
    display: none;
    z-index: 80; /* 새 로비(MMP_root z40)보다 위 */
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}

/* 딤은 가운데 칸 밖(넓은 화면의 좌우)까지 덮는다 - 넘치는 부분은 div_body 가 잘라낸다 */
html.h5p #RANK_dim
{
    position: absolute;
    left: -4000px;
    top: 0;
    width: -webkit-calc(100% + 8000px);
    width: calc(100% + 8000px);
    height: 100%;
    /* 랭킹 배경(ranking_bg, 캔버스 전체 판)이 보이도록 검정 딤은 깔지 않는다 (2026-09-14 CEO 지시) */
    background: transparent;
}

html.h5p #RANK_panel
{
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    /* 초록 판(반투명 초록 딤)은 깔지 않고 랭킹 배경 그림(ranking_bg)이 그대로 보이게 한다 (2026-09-14 CEO 지시) */
    background: transparent;
    /* 위는 글자 타이틀(top 260, 높이 150) 아래 20, 아래는 이전 버튼(bottom 96, 높이 133) 위 30 까지만 쓴다 (2026-09-14 CEO 지시) */
    padding: 425px 40px 259px 40px;
    padding-top: -webkit-calc(var(--h5p_timer_top, 430px) - 8px - var(--h5p_title_up, 20px));
    padding-top: calc(var(--h5p_timer_top, 430px) - 8px - var(--h5p_title_up, 20px));	/* 첫 줄 = 남은 시간 알약(위 여백 8), 공통 알약 높이에 맞춤 (2026-09-22) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 타이틀: 다른 서브화면과 같은 글자 타이틀(.H5PT_title) 을 위 가운데에. 글자 폭만큼의 상자로 줄여 ? 버튼을 글자 오른쪽에 붙인다 */
html.h5p #RANK_head
{
    position: absolute;
    left: 0;
    top: 255px;
    top: -webkit-calc(275px - var(--h5p_title_up, 20px));
    top: calc(275px - var(--h5p_title_up, 20px));
    width: 1080px;
    height: 150px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}
html.h5p #RANK_title
{
    position: relative;
    display: inline-block;
    left: auto;
    top: 0;
    width: auto;
    vertical-align: top;
}
/* ? 버튼은 글자 흐름에서 빼 타이틀 글자가 가운데에 그대로 서게 한다 */
/* 2026-09-22 CEO 지시: 출석 보상 ? 버튼(#ADP_view_btn)과 똑같이 - co_onebt 72x72 바탕 + 흰 ? 54px */
html.h5p #RANK_title #RANK_sys_btn
{
    position: absolute;
    left: 100%;
    top: 18px;	/* 타이틀 글자 윗선(테두리 포함)에 맞춰 위쪽 기준 (2026-09-22 CEO 지시 36 -> 18 로 더 올림) */
    width: 72px;
    height: 72px;
    line-height: 72px;
    margin: 0 0 0 16px;
    font-size: 54px;
    font-weight: 800;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
    background: url(../image/1_mainmenu/h5p/co_onebt.png?v=2) no-repeat 0 0;
    background-size: 72px 72px;
    border-radius: 50%;
    pointer-events: auto;
}
html.h5p #RANK_title #RANK_sys_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 이전 버튼: 다른 서브화면과 같은 초록 원형 이전 그림(back_bt 133x133) 을 왼쪽 아래에 */
html.h5p #RANK_back_bt
{
    position: absolute;
    left: 27px;
    top: 74px;
    bottom: auto;
    width: 104px;
    height: 108px;
    background: url(../image/11_quest/h5p/back_bt.png?v=4) no-repeat 0 0;
    background-size: 104px 108px;
    cursor: pointer;
    z-index: 3;
}
html.h5p #RANK_back_bt:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 리셋 남은 시간: 미션 화면 남은 시간 알약(#QU_info)과 같은 모양 (2026-09-22 CEO 지시) - 가로 가운데 */
html.h5p #RANK_reset
{
    -webkit-align-self: center;
    align-self: center;
    height: 60px;
    line-height: 54px;
    box-sizing: border-box;
    padding: 0 44px 0 32px;	/* 좌우 여유 16/24 -> 32/44 (2026-09-22 CEO 지시 - 남은 시간 알약 공통) */
    margin: 8px 0 20px 0;
    /* 미션 알약과 같이 flex 로 세로 가운데 (2026-10-02 CEO 지적) */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    background: rgba(38, 26, 16, 0.72);
    border: 3px solid #c9a45c;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
html.h5p #RANK_reset:empty
{
    visibility: hidden;
}
html.h5p .RANK_clock
{
    width: 38px;     /* 42 -> 38 (2026-10-02 CEO 지시 - 살짝 줄임) */
    height: 38px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 16px;	/* 10 -> 16 (2026-09-22 CEO 지시 - 시계와 글자 사이 여유) */
    vertical-align: middle;
}
html.h5p .RANK_reset_txt
{
    vertical-align: middle;
}

/* 내 카드 (배지 + 순위/전적 + 승점) */
html.h5p #RANK_mecard
{
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid #6f8a5a;
    border-radius: 20px;
    padding: 20px 26px;
    margin-bottom: 16px;
}

html.h5p .RANK_badge
{
    flex: none;
    min-width: 150px;
    text-align: center;
    border-radius: 16px;
    padding: 12px 10px;
    margin-right: 24px;
}
html.h5p .RANK_badge_g
{
    display: block;
    font-size: 65px;
    font-weight: 800;
    line-height: 1.0;
}
html.h5p .RANK_badge_t
{
    display: block;
    font-size: 38px;
    font-weight: 700;
    margin-top: 4px;
}

html.h5p .RANK_me_mid { flex: 1; }
html.h5p .RANK_me_rank
{
    font-size: 55px;
    font-weight: 800;
    color: #ffffff;
}
html.h5p .RANK_me_total
{
    font-size: 38px;
    font-weight: 400;
    color: #b9d19a;
}
html.h5p .RANK_me_rec
{
    font-size: 38px;
    color: #d7e6c4;
    margin-top: 2px;
    white-space: nowrap;	/* 순위 아래 자기 줄 - 끊기지 않게 (2026-09-22) */
}
html.h5p .RANK_me_pt
{
    flex: none;
    text-align: right;
    font-size: 38px;
    color: #cfe0b6;
}
html.h5p .RANK_me_ptnum
{
    display: block;
    font-size: 65px;
    font-weight: 800;
    color: #ffe27a;
}

/* 승급/강등선 */
html.h5p #RANK_cutline
{
    text-align: center;
    font-size: 38px;
    margin-bottom: 10px;
}
html.h5p .RANK_cut_up { color: #7cf0a0; margin: 0 14px; font-weight: 700; }
html.h5p .RANK_cut_dn { color: #ff8a97; margin: 0 14px; font-weight: 700; }
html.h5p .RANK_cut_none { color: #9fb488; }
/* 등급 총원 / 승급·강등선 줄은 숨긴다 (2026-09-22 CEO 지시 - 목록 색 표시와 내 카드 '승급 중'으로 충분, 1위 안내 띠와 겹쳐 빽빽했다) */
html.h5p #RANK_cutline { display: none; }

/* ---- 등급별 1위 안내 띠 (2026-09-22 CEO 지시): 목록 위 한 줄, 3.5초마다 위로 넘어간다 (S_RANK.roll_tops) ---- */
html.h5p #RANK_tops
{
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    height: 72px;
    margin: 0 0 12px 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid rgba(201, 164, 92, 0.7);
    border-radius: 36px;
}
html.h5p #RANK_tops_item
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 72px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 36px;
    font-weight: 800;
    color: #fff6e3;
}
html.h5p .RANK_tops_badge
{
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 12px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 900;
    margin-right: 14px;
}
html.h5p .RANK_tops_grade { color: #ffd98a; margin-right: 18px; }
html.h5p .RANK_tops_name
{
    /* 닉네임 최대 12자를 모두 보인다 - 380 에서 … 로 잘리던 것을 뺐다 (2026-09-22 CEO 지시) */
    margin-right: 18px;
}
html.h5p .RANK_tops_pt { color: #7cf0a0; }
html.h5p #RANK_tops_item.RANK_tops_in
{
    -webkit-animation: rank_tops_in 0.3s ease-out both;
    animation: rank_tops_in 0.3s ease-out both;
}
html.h5p #RANK_tops_item.RANK_tops_out
{
    -webkit-animation: rank_tops_out 0.26s ease-in both;
    animation: rank_tops_out 0.26s ease-in both;
}
@-webkit-keyframes rank_tops_in { from { opacity: 0; -webkit-transform: translateY(60%); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes rank_tops_in { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes rank_tops_out { from { opacity: 1; -webkit-transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-60%); } }
@keyframes rank_tops_out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-60%); } }

/* ---- 내 카드 강조 (2026-09-22 CEO 지시): 10초마다 빛이 한 번 지나가고, 승급권이면 테두리가 은은하게 숨 쉰다 ---- */
html.h5p #RANK_mecard
{
    position: relative;
    overflow: hidden;
}
html.h5p #RANK_mecard::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(-15deg, rgba(255,214,120,0) 40%, rgba(255,214,120,0.45) 50%, rgba(255,214,120,0) 60%) no-repeat;
    background: linear-gradient(105deg, rgba(255,214,120,0) 40%, rgba(255,214,120,0.45) 50%, rgba(255,214,120,0) 60%) no-repeat;	/* 크림 판 위라 금빛 (2026-09-22) */
    background-size: 250% 100%;
    background-position: 130% 0;
    pointer-events: none;
    -webkit-animation: rank_me_shine 10s ease-in-out infinite;
    animation: rank_me_shine 10s ease-in-out infinite;
}
@-webkit-keyframes rank_me_shine { 0% { background-position: 130% 0; } 9% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
@keyframes rank_me_shine { 0% { background-position: 130% 0; } 9% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
html.h5p #RANK_mecard.RANK_mecard_up
{
    -webkit-animation: rank_me_glow 2.4s ease-in-out infinite;
    animation: rank_me_glow 2.4s ease-in-out infinite;
}
@-webkit-keyframes rank_me_glow { 0%, 100% { border-color: #d9b56a; box-shadow: 0 0 0 rgba(124, 240, 160, 0); } 50% { border-color: #7cf0a0; box-shadow: 0 0 18px rgba(124, 240, 160, 0.55); } }
@keyframes rank_me_glow { 0%, 100% { border-color: #d9b56a; box-shadow: 0 0 0 rgba(124, 240, 160, 0); } 50% { border-color: #7cf0a0; box-shadow: 0 0 18px rgba(124, 240, 160, 0.55); } }
/* '내 순위' 옆 승급 중 / 강등 위험 알약 */
html.h5p .RANK_me_zone
{
    display: inline-block;
    margin-left: 12px;
    padding: 0 16px;
    height: 48px;
    line-height: 48px;
    border-radius: 24px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    vertical-align: middle;
}
html.h5p .RANK_me_zone_up { background: #2f8a4c; color: #ffffff; }
html.h5p .RANK_me_zone_dn { background: #b8323f; color: #ffffff; }

/* 내 카드를 밝은 크림색 판으로 - 아래 순위 목록(어두운 판)과 확실히 나뉘게 (2026-09-22 CEO 지시). 글자는 진한 갈색 계열 */
html.h5p #RANK_mecard
{
    background: -webkit-linear-gradient(top, #ffffff, #fdf8ee);
    background: linear-gradient(#ffffff, #fdf8ee);	/* 크림 -> 거의 흰색 (2026-09-22 CEO 지시 - 더 밝게) */
    border: 3px solid #d9b56a;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    margin-top: 30px;	/* 2026-09-26 CEO 지시: 남은 시간 알약과 조금 더 띄운다 */
    margin-bottom: 70px;	/* 16 -> 40 -> 70: 아래 등급 탭과 여유 (2026-09-22 CEO 지시). 목록은 남은 높이를 채우므로 그만큼 짧아진다 */
}
html.h5p #RANK_mecard .RANK_me_label  { color: #8a6d3f; }
html.h5p #RANK_mecard .RANK_me_rank   { color: #3a2410; }
html.h5p #RANK_mecard .RANK_me_rec,
html.h5p #RANK_mecard .RANK_me_total  { color: #6e5236; }
html.h5p #RANK_mecard .RANK_me_pt,
html.h5p #RANK_mecard .RANK_me_ptlabel { color: #6e5236; }
html.h5p #RANK_mecard .RANK_me_ptnum  { color: #c46a00; }
/* 밝은 판 위에서 은색(C) 배지가 묻히지 않게 얇은 테두리 */
html.h5p #RANK_mecard .RANK_badge { box-shadow: 0 0 0 2px rgba(58, 36, 16, 0.18) inset; }

/* 보상 안내 */
html.h5p #RANK_reward
{
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #ffd98a;
    background: rgba(0,0,0,0.22);
    border-radius: 12px;
    padding: 10px 8px;
    margin-bottom: 16px;
}

/* 리스트 헤더/행 */
html.h5p #RANK_listhead
{
    display: flex;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #9fb488;
    /* 목록 줄과 칸 자리를 똑같이: 왼쪽 = 줄 여백 14 + 색 띠 8, 오른쪽 = 줄 여백 28 + 스크롤 막대 22 (2026-09-22 CEO 지시 - 제목과 줄이 8~22 어긋났다) */
    padding: 0 50px 8px 22px;
    border-bottom: 2px solid #556645;
}
/* 칸 폭 (2026-09-22 CEO 지시): 예상보상 칸(270)을 빼고 닉네임(15자)·전적 칸을 넓혔다. 줄 안쪽 폭 928 =
   순위 118(선물상자 46 + 틈 8 + 숫자 64) + 닉네임(나머지 약 430) + 전적 220 + 승점 160 */
html.h5p .RANK_h_rank,   html.h5p .RANK_c_rank   { flex: none; width: 118px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; }
html.h5p .RANK_rank_no   { display: inline-block; min-width: 64px; text-align: center; }
html.h5p .RANK_h_name,   html.h5p .RANK_c_name   { flex: 1; min-width: 0; text-align: left; overflow: hidden; white-space: nowrap; padding-left: 12px; letter-spacing: -1px; }	/* … 표시 없음: 닉네임 최대 12자가 다 들어간다 (2026-09-22 CEO 지시) */
html.h5p .RANK_h_rec,    html.h5p .RANK_c_rec    { flex: none; width: 220px; text-align: center; white-space: nowrap; }
html.h5p .RANK_h_reward, html.h5p .RANK_c_reward { display: none; }
html.h5p .RANK_h_pt,     html.h5p .RANK_c_pt     { flex: none; width: 160px; text-align: center; white-space: nowrap; }	/* 2026-09-26 CEO 지시: 오른쪽 -> 가운데 */

/* ---- 두 줄 방식 (S_rank.js RANK_TWO_LINE = 1 일 때 #RANK_panel.RANK_two_line, 2026-09-22 CEO 지시) ----
   전적 칸을 빼 닉네임 칸이 약 650 (한글 15자 x 40 = 600 이 들어간다), 전적은 닉네임 아래 둘째 줄 36.
   헤더의 '이번주전적' 도 감춘다. RANK_TWO_LINE = 0 이면 이 규칙들은 쓰이지 않는다 */
html.h5p #RANK_panel.RANK_two_line .RANK_h_rec { display: none; }
/* 두 줄이면 칸 이름이 줄 안에 다 들어 있어 목록 위 제목 줄(# / 닉네임 / 승점)은 뺀다 (2026-09-22 CEO 지시) */
html.h5p #RANK_panel.RANK_two_line #RANK_listhead { display: none; }
html.h5p #RANK_panel.RANK_two_line #RANK_list { border-top: 2px solid #556645; }
/* 승점: 한 줄 '승점 447' (이름을 앞에, 줄 세로 가운데) - 칸 160 -> 230 (2026-09-22 CEO 지시) */
html.h5p #RANK_panel.RANK_two_line .RANK_c_pt
{
    width: 230px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-justify-content: center;
    justify-content: center;
    padding-left: 0;
    box-sizing: border-box;
}	/* '승점 447' 을 붙여 칸 가운데에 (2026-09-26 CEO 지시 - 오른쪽 끝 맞춤 -> 가운데) */
html.h5p .RANK_pt_label
{
    font-size: 36px;
    font-weight: 700;
    color: #b9d19a;
    margin-right: 12px;
}
/* 승점 아이콘: 금색 동그라미 안에 흰 'P'(포인트) - 그림이 오기 전까지 CSS 로 그린다 (2026-09-22 CEO 지시).
   목록/1위 띠/내 카드 '승점' 글자 앞에 같이 쓴다 */
html.h5p .RANK_pt_icon
{
    display: inline-block;
    position: relative;
    width: 42px;
    height: 42px;
    margin-right: 10px;
    vertical-align: -5px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 3px solid #b57a00;
    background: -webkit-linear-gradient(top, #ffe98a, #f5b400 60%, #e09000);
    background: linear-gradient(to bottom, #ffe98a, #f5b400 60%, #e09000);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
html.h5p .RANK_pt_icon::before
{
    content: "P";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 36px;
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    font-style: normal;
    color: #ffffff;
    text-shadow: 0 1px 0 #9a5a00, 1px 0 0 #9a5a00, -1px 0 0 #9a5a00, 0 -1px 0 #9a5a00;
}
html.h5p .RANK_c_pt .RANK_pt_icon { -webkit-align-self: center; align-self: center; }
html.h5p #RANK_mecard .RANK_pt_icon { width: 36px; height: 36px; margin-right: 8px; vertical-align: -4px; border-width: 2px; }
html.h5p #RANK_mecard .RANK_pt_icon::before { line-height: 32px; font-size: 24px; }
html.h5p .RANK_pt_num
{
    display: inline-block;
}
html.h5p #RANK_panel.RANK_two_line .RANK_row { padding-top: 18px; padding-bottom: 18px; }
html.h5p #RANK_panel.RANK_two_line .RANK_c_name { letter-spacing: 0; }
html.h5p .RANK_nm
{
    display: block;
    overflow: hidden;
    white-space: nowrap;	/* … 표시 없음: 닉네임 최대 12자가 다 들어간다 (2026-09-22 CEO 지시) */
    line-height: 50px;
}
html.h5p .RANK_nm_rec
{
    display: block;
    font-size: 36px;
    line-height: 44px;
    color: #b9d19a;
    white-space: nowrap;
}
html.h5p .RANK_me_row .RANK_nm_rec { color: #e8dca8; }

/* 예상 보상 선물상자 (받을 보상이 있는 순위 앞, 누르면 말풍선) - 그림이 오기 전까지 CSS 로 그린 상자:
   빨간 몸통 + 뚜껑, 금색 세로 띠, 위에 금색 리본 */
html.h5p .RANK_gift
{
    position: relative;
    -webkit-flex: none;
    flex: none;
    width: 46px;
    height: 46px;
    margin-right: 8px;
    cursor: pointer;
    -webkit-animation: rank_gift_wiggle 4s ease-in-out infinite;
    animation: rank_gift_wiggle 4s ease-in-out infinite;
}
html.h5p .RANK_gift::before
{
    content: "";
    position: absolute;
    left: 4px;
    top: 20px;
    width: 38px;
    height: 26px;
    border-radius: 4px;
    background:
        -webkit-linear-gradient(left, transparent 16px, #ffd34d 16px, #ffd34d 22px, transparent 22px),
        -webkit-linear-gradient(top, #f0513f, #b8261a);
    background:
        linear-gradient(to right, transparent 16px, #ffd34d 16px, #ffd34d 22px, transparent 22px),
        linear-gradient(to bottom, #f0513f, #b8261a);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
html.h5p .RANK_gift::after
{
    content: "";
    position: absolute;
    left: 1px;
    top: 12px;
    width: 44px;
    height: 11px;
    border-radius: 3px;
    background:
        -webkit-linear-gradient(left, transparent 19px, #ffd34d 19px, #ffd34d 25px, transparent 25px),
        -webkit-linear-gradient(top, #ff6b58, #d0321f);
    background:
        linear-gradient(to right, transparent 19px, #ffd34d 19px, #ffd34d 25px, transparent 25px),
        linear-gradient(to bottom, #ff6b58, #d0321f);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
html.h5p .RANK_gift_bow
{
    position: absolute;
    left: 13px;
    top: 2px;
    width: 10px;
    height: 10px;
    border: 4px solid #ffd34d;
    border-radius: 50% 50% 0 50%;
    box-sizing: content-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}
html.h5p .RANK_gift:active { -webkit-transform: scale(0.9); transform: scale(0.9); }
/* 4초에 한 번 살짝 흔들려 누를 수 있다는 걸 알린다 */
@-webkit-keyframes rank_gift_wiggle { 0%, 88%, 100% { -webkit-transform: rotate(0); } 91% { -webkit-transform: rotate(-12deg); } 94% { -webkit-transform: rotate(10deg); } 97% { -webkit-transform: rotate(-6deg); } }
@keyframes rank_gift_wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } 97% { transform: rotate(-6deg); } }

/* 보상 말풍선: 선물상자 오른쪽, 줄 세로 가운데. 왼쪽 꼬리가 상자를 가리킨다 */
html.h5p .RANK_row { position: relative; }
html.h5p #RANK_bubble
{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 12px 26px;
    background: #fff8e6;
    border: 3px solid #d9b56a;
    border-radius: 20px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    font-size: 38px;
    font-weight: 800;
    color: #4a2a10;
    white-space: nowrap;
    z-index: 5;
    -webkit-animation: rank_bubble_in 0.18s ease-out both;
    animation: rank_bubble_in 0.18s ease-out both;
}
html.h5p #RANK_bubble::before
{
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    margin-top: -12px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 16px solid #d9b56a;
}
html.h5p .RANK_bubble_head
{
    color: #b5401c;
    margin-right: 14px;
}
@-webkit-keyframes rank_bubble_in { from { opacity: 0; -webkit-transform: translateY(-50%) scale(0.85); } to { opacity: 1; -webkit-transform: translateY(-50%) scale(1); } }
@keyframes rank_bubble_in { from { opacity: 0; transform: translateY(-50%) scale(0.85); } to { opacity: 1; transform: translateY(-50%) scale(1); } }

html.h5p #RANK_list
{
    flex: 1 1 auto;
    min-height: 0; /* flex 컬럼에서 내부 스크롤 되도록 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 6px;
    /* 스크롤 막대를 판 오른쪽 여백(40) 안쪽으로 30 더 밀어 화면 끝 가까이 (미션 목록처럼, 2026-09-22 CEO 지시).
       늘어난 폭만큼 안쪽 여백을 줘 줄 폭/자리는 그대로 */
    margin-right: -30px;
    padding-right: 30px;
}
/* 스크롤 막대: 도움말(#HEP_scroll)/메인 방 목록/미션과 같은 모양 - 가는 반투명 트랙 위에 흰 둥근 막대 (2026-09-22 CEO 지시) */
html.h5p #RANK_list::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p #RANK_list::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p #RANK_list::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
html.h5p #RANK_list::-webkit-scrollbar-track
{
    /* 막대 길이 = 보이는 줄 범위: 위는 첫 줄 윗선, 아래는 목록 아래끝 (2026-09-22 CEO 지시 - 우편함과 같은 기준) */
    margin: 0px 0 0 0;
    border: 0;
    background: transparent;		/* 2026-10-07 CEO 지시: 전체 범위를 표시하던 반투명 줄은 없앤다 */
}
html.h5p #RANK_list::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}

html.h5p .RANK_row
{
    display: flex;
    align-items: center;
    /* 글자가 커 보여 줄였다 48 -> 40, 행 위아래 34 -> 28 (2026-09-14 CEO 지시).
       오른쪽은 스크롤바에 승점 끝자리가 가리지 않게 14 -> 28 */
    font-size: 40px;
    color: #eaf3dd;
    padding: 28px 28px 28px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-left: 8px solid transparent;
}
html.h5p .RANK_row .RANK_c_rank { font-weight: 800; color: #ffffff; font-size: 42px; }
html.h5p .RANK_row .RANK_c_pt   { font-weight: 800; color: #ffe27a; font-size: 42px; }
html.h5p .RANK_row .RANK_c_rec  { font-size: 36px; color: #b9d19a; }
html.h5p .RANK_row .RANK_c_reward { font-size: 36px; color: #ffd98a; font-weight: 700; }
html.h5p .RANK_ruby { color: #ff9ec4; font-size: 36px; }

html.h5p .RANK_zone_up { border-left-color: #4caf72; background: rgba(76,175,114,0.10); }
html.h5p .RANK_zone_dn { border-left-color: #c0556a; background: rgba(192,85,106,0.10); }
html.h5p .RANK_me_row  { background: rgba(255,226,122,0.16); border-left-color: #ffd24a; }
html.h5p .RANK_me_row .RANK_c_name { color: #fff2c2; font-weight: 800; }

html.h5p .RANK_msg
{
    text-align: center;
    font-size: 40px;
    color: #b9d19a;
    padding: 60px 0;
    white-space: pre-line; /* 안내문 줄바꿈(\n) 반영 */
    line-height: 1.5;
}
/* 안내문만 있을 때(랭킹 없음/불러오는 중/정산 중)는 목록 영역 전체의 세로 가운데에 (2026-09-22 CEO 지시) */
html.h5p #RANK_list > .RANK_msg:only-child
{
    height: 100%;
    padding: 0 0 6% 0;	/* 눈으로 보기에 가운데보다 살짝 위 */
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* 닫기 버튼 */
html.h5p .RANK_btn
{
    text-align: center;
    font-size: 45px;
    font-weight: 700;
    border-radius: 16px;
    padding: 20px 0;
    margin-top: 20px;
    cursor: pointer;
}
html.h5p .RANK_btn_back
{
    background: linear-gradient(#6b7a58, #55634594);
    color: #ffffff;
    border: 2px solid #8a9a72;
}

/* 랭킹 등급 탭 (A~E 둘러보기) */
html.h5p #RANK_tabs
{
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
html.h5p .RANK_tab
{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #cfe0b6;
    background: rgba(0,0,0,0.25);
    border: 2px solid #556645;
    border-radius: 14px;
    padding: 14px 0 12px 0; /* 세로 2배 - 알파벳+칭호 2줄 */
    cursor: pointer;
}
html.h5p .RANK_tab_g { font-size: 50px; font-weight: 800; line-height: 1.0; }
html.h5p .RANK_tab_t { font-size: 37px; font-weight: 700; margin-top: 4px; }	/* 탭이 0.99배로 그려져 36 에 못 미쳐 37 (2026-09-22) */
/* 고르지 않은 탭: 글자/테두리는 등급색(인라인), 테두리는 살짝 흐리게 */
html.h5p .RANK_tab:not(.RANK_tab_on) { border-width: 2px; opacity: 0.92; }
html.h5p .RANK_tab_on
{
    /* 활성 탭 배경/글자색은 등급색으로 인라인 지정됨 */
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset;
}

/* 내 순위 라벨 */
html.h5p .RANK_me_label
{
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #9fb488;
    margin-bottom: 2px;
}
/* 보는 등급 총원 */
html.h5p .RANK_cut_total
{
    color: #cfe0b6;
    margin: 0 14px;
    font-weight: 700;
}

/* 전체화면 랭킹: 헤더/하단 버튼은 고정, 리스트만 스크롤 */
html.h5p #RANK_reset,
html.h5p #RANK_mecard,
html.h5p #RANK_tabs,
html.h5p #RANK_cutline,
html.h5p #RANK_reward,
html.h5p #RANK_listhead,
html.h5p #RANK_back
{
    flex: 0 0 auto;
}

/* 승점 옆 도움말(?) 버튼 */
html.h5p .RANK_me_ptlabel
{
    display: block;	/* 내 카드: '승점' 위, 숫자 아래 (2026-09-22) */
}
/* 승점 옆 ? 버튼: 타이틀 옆 ? 버튼(#RANK_sys_btn)과 같은 그림/글자 - 내 카드 줄에 맞춰 60 (2026-09-22 CEO 지시) */
html.h5p #RANK_help_btn
{
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-left: 8px;
    text-align: center;
    font-size: 45px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
    background: url(../image/1_mainmenu/h5p/co_onebt.png?v=2) no-repeat 0 0;
    background-size: 60px 60px;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
}
html.h5p #RANK_help_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 승점 계산법: 랭킹 설명 팝업 스크롤 안 아래쪽에 소제목과 함께 (2026-09-22 CEO 지시 - 따로 뜨던 팝업을 합쳤다) */
html.h5p .RANK_sys_sec
{
    margin: 10px 0 24px 0;
    padding-top: 30px;
    border-top: 3px dashed #e2cfa4;
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    color: #946d06;
}
/* (옛) 승점 계산법 따로 팝업 규칙 - 지금은 쓰지 않는다 */
html.h5p #RANK_help
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    display: none;
    z-index: 10;
}
html.h5p #RANK_help_scroll
{
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* 밝은 판 위라 글자는 진한 갈색 계열로 (랭킹 설명과 같다) */
html.h5p .RANK_help_row
{
    font-size: 38px;
    font-weight: 800;
    color: #4a2a10;
    margin: 0 0 26px 0;
    line-height: 1.4;
}
html.h5p .RANK_help_row b { color: #4a2a10; }
html.h5p .RANK_help_sub
{
    display: block;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #6e5236;
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.5;
}
html.h5p .RANK_help_sub b { color: #b5401c; }
html.h5p #RANK_help_mult_title
{
    font-size: 38px;
    color: #946d06;
    margin: 10px 0 12px 0;
    font-weight: 800;
}
html.h5p .RANK_help_tbl
{
    width: 100%;
    border-collapse: collapse;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
}
html.h5p .RANK_help_tbl td
{
    border: 2px solid #e2cfa4;
    padding: 12px 18px;
    color: #4a2a10;
    font-weight: 600;
}
html.h5p .RANK_help_tbl td:last-child
{
    text-align: center;
    color: #b5401c;
    font-weight: 800;
    width: 200px;
}

/* 랭킹 타이틀 옆 시스템 설명(?) 버튼 */
html.h5p #RANK_sys_btn
{
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: #6b7a58;
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    margin-left: 14px;
    vertical-align: middle;
    cursor: pointer;
}

/* 랭킹 시스템 설명 오버레이 */
html.h5p #RANK_sys
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    display: none;
    z-index: 50;	/* 10 -> 50: 위 재화바(#H5PTOP_bar z 40)도 딤 아래로 (2026-09-22 CEO 지시) */
}
html.h5p #RANK_sys_dim,
html.h5p #RANK_help_dim
{
    position: absolute;
    left: -4000px;
    top: 0;
    width: -webkit-calc(100% + 8000px);
    width: calc(100% + 8000px);
    height: 100%;
    background: rgba(0,0,0,0.8);  /* 딤 80% 통일 (2026-09-12) */
}
/* 랭킹 설명 팝업: 다른 팝업(내 정보 #MYI_panel)과 같은 9조각 판(노란 머리띠 104) + 머리띠 오른쪽 X (2026-09-22 CEO 지시) */
html.h5p #RANK_sys_box,
html.h5p #RANK_help_box
{
    position: absolute;
    left: 50%; top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 1000px;
    max-height: 84%;
    padding: 124px 50px 60px 50px;	/* 위 = 머리띠 104 + 20, 아래 = 아래 조각 49 + 11 */
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}
/* 열고 닫는 연출: 내 정보 팝업(myi_pop_in / myi_pop_out)과 같은 '삐용' + 딤 서서히 (2026-09-22 CEO 지시).
   판은 translate(-50%, -50%) 로 가운데를 잡고 있어 같은 움직임에 가운데 이동을 함께 넣은 전용 키프레임을 쓴다 */
html.h5p #RANK_sys_box,
html.h5p #RANK_help_box
{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rank_pop_in 0.33s ease-out both;
    animation: rank_pop_in 0.33s ease-out both;
}
html.h5p #RANK_sys_dim,
html.h5p #RANK_help_dim
{
    -webkit-animation: rank_dim_in 0.25s ease-out both;
    animation: rank_dim_in 0.25s ease-out both;
}
html.h5p #RANK_sys.RANK_pop_closing #RANK_sys_box,
html.h5p #RANK_help.RANK_pop_closing #RANK_help_box
{
    -webkit-animation: rank_pop_out 0.23s ease-in both;
    animation: rank_pop_out 0.23s ease-in both;
}
html.h5p #RANK_sys.RANK_pop_closing #RANK_sys_dim,
html.h5p #RANK_help.RANK_pop_closing #RANK_help_dim
{
    -webkit-animation: rank_dim_out 0.23s ease-in both;
    animation: rank_dim_out 0.23s ease-in both;
}
@-webkit-keyframes rank_pop_in
{
    0%   { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.4); }
    55%  { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1.06); }
    78%  { -webkit-transform: translate(-50%, -50%) scale(0.98); }
    100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); }
}
@keyframes rank_pop_in
{
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    78%  { transform: translate(-50%, -50%) scale(0.98); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@-webkit-keyframes rank_pop_out
{
    0%   { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); }
    25%  { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1.04); }
    100% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.4); }
}
@keyframes rank_pop_out
{
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}
@-webkit-keyframes rank_dim_in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rank_dim_in { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes rank_dim_out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rank_dim_out { from { opacity: 1; } to { opacity: 0; } }
/* 머리띠 오른쪽 X (#MYI_close 와 같다: popup_xbt 57x56, 누르는 곳은 머리띠 높이 전체) */
html.h5p #RANK_sys_close,
html.h5p #RANK_help_close
{
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 5;
}
html.h5p #RANK_sys_close:active,
html.h5p #RANK_help_close:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
/* 제목: 노란 머리띠(y 4~94) 가운데, 글자색은 X 버튼 색 (#MYI_title 과 같다) */
html.h5p #RANK_sys_title,
html.h5p #RANK_help_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}
html.h5p #RANK_sys_scroll
{
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    /* 스크롤 막대를 팝업 오른쪽 끝 쪽으로: 판 오른쪽 여백(50) 안으로 40 넓히고 글자와 막대 사이 18 (글자 오른끝은 그대로, 2026-09-22 CEO 지시) */
    margin-right: -40px;
    padding-right: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* 밝은 판 위라 글자는 진한 갈색 계열로 */
html.h5p .RANK_sys_row
{
    font-size: 38px;
    color: #4a2a10;
    font-weight: 800;
    margin: 0 0 26px 0;
    line-height: 1.4;
}
html.h5p .RANK_sys_sub
{
    display: block;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    color: #6e5236;
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.5;
}
html.h5p .RANK_sys_sub b { color: #b5401c; }


/* ============ 서브화면 아래쪽에 잘려 보이던 구름 그림은 쓰지 않는다 (2026-09-12 CEO 지시) ============ */
html.h5p #Img_CH_cloud2,
html.h5p #Img_GA_cloud2,
html.h5p #Img_QU_cloud2,
html.h5p #Img_QD_cloud2,
html.h5p #Img_ST_cloud2,
html.h5p #Img_SM_cloud2,
html.h5p #Img_SS_cloud2,
html.h5p #Img_MS_cloud2,
html.h5p #Img_DLT_cloud2,
html.h5p #Img_SC_cloud2
{
    display: none !important;
}

/* ============ 팝업 딤: 전부 캔버스 전체 딤으로 돌린다 (2026-09-10 CEO 지시) ============ */
/* 원본은 팝업마다 검정 div 를 깔지만, 그 div 는 1080 상자(h5p_legacy, overflow:hidden) 안이라
   좌우가 넓은 기기에서 양옆이 밝게 남는다. 검정 div 는 감추고(진하기는 그대로 읽어 쓴다)
   상자 밖의 #h5p_dim 이 캔버스 전체를 덮는다. 팝업은 딤(z50) 위로 올린다 */
html.h5p #Img_EPU_bg,
html.h5p #Img_WA_background,
html.h5p #Img_GG_bg,
html.h5p #Img_GR_background,
html.h5p #Img_PYN_bg,
html.h5p #HE_popup_bg,
html.h5p #MS_popup_bg
{
    display: none !important;
}

/* 컨테이너 자체가 검정 딤이던 화면 */
html.h5p #S_SELECTSUN_div,
html.h5p #S_STORYMODE_REWARD_div
{
    background: transparent !important;
}

/* 이 컨테이너들은 position 이 static 이라 뎁스도 안 먹고 안쪽 팝업의 top:50% 기준도 없다.
   캔버스 전체를 덮는 절대위치 상자로 맞춘다 */
html.h5p #S_POPUPYN_div,
html.h5p #S_HELP_div,
html.h5p #S_SELECTSUN_div,
html.h5p #S_STORYMODE_REWARD_div,
html.h5p #MS_popup_div
{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 팝업이 딤 위에 오도록 뎁스를 올린다 (예/아니오 팝업은 결과창 위에도 떠야 해서 한 단 더 위) */
html.h5p #S_WAIT_div,
html.h5p #S_GONGJI_div,
html.h5p #S_GAMERESULT_div,
html.h5p #S_HELP_div,
html.h5p #MS_popup_div,
html.h5p #S_SELECTSUN_div
{
    z-index: 60 !important;
}
html.h5p #S_POPUPYN_div
{
    z-index: 70 !important;
}

/* ============ 기본 팝업 판: 조각 그림 조합 (2026-09-15 CEO 지시) ============
   원본 판자 그림(popup1/popup2 542x411, po_bg 563x350)을 내정보 팝업과 같은 조각(image/1_mainmenu/h5p/profile/popup_bg_*) 조합으로 바꾼다.
   크기/자리는 지금 보이는 그대로(원본 판 크기의 1.5배) 두고 배경만 덮어쓴다 (원본이 인라인으로 깔아 !important).
   - 제목이 있던 팝업(충전소 구매한도 초과, 도신 클리어 보너스): 노란 머리띠(위 조각 104) + 제목 글자를 띠 가운데로
   - 제목이 없던 팝업(예/아니오, 종료 확인, 패 선택/고스톱/흔들기, 흔들었습니다, 선 결정, 게임 결과 판, 룰렛 당첨): 머리띠 없는 단색 위 조각(popup2_bg_*, 49)
   이음매 틈 방지로 늘리는 조각은 옆 조각 밑으로 2 씩 더 깐다 (#MYI_panel 과 같다) */

/* 단색(머리띠 없음): 새 조각 popup3_* (2026-09-16 CEO 지시로 교체).
   모서리 50x104 / 위·아래 조각 50x104 / 옆 50x1 / 가운데 1x1 + 네 귀퉁이 잎사귀 장식 */
html.h5p #PYN_board,
html.h5p #Img_EPU_board,
html.h5p #ga_popup_div,
html.h5p #ga_shake_div,
html.h5p #SU_popup,
html.h5p #gr_div
{
    background:
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left_deco.png) no-repeat left 17px top 20px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right_deco.png) no-repeat right 17px top 20px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left_deco.png) no-repeat left 14px bottom 14px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right_deco.png) no-repeat right 14px bottom 14px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_center.png) no-repeat 48px 102px !important;
    background-size:
        67px 57px, 67px 57px, 533px 204px, 451px 138px,
        50px 104px, 50px 104px, 50px 104px, 50px 104px,
        calc(100% - 96px) 104px, calc(100% - 96px) 104px,
        50px calc(100% - 204px), 50px calc(100% - 204px),
        calc(100% - 96px) calc(100% - 204px) !important;
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}
/* 판을 그림 태그로 그리는 팝업: 예/아니오는 판 그림을 감추고 부모 상자에 조각을 깐다. 종료 확인은 판 그림 자리 그대로 그림만 밀어내 조각 배경이 보이게 한다 */
html.h5p #Img_PYN_board
{
    display: none !important;
}
html.h5p #Img_EPU_board
{
    -o-object-position: -99999px 0;
    object-position: -99999px 0;
}

/* 머리띠(제목 있음): 내정보 팝업 #MYI_panel 과 같은 조각 조합 */
html.h5p #MS_popup_div_div,
html.h5p #SR_popup
{
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px !important;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px) !important;
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}
/* 제목 글자: 노란 띠(y 4~94) 가운데, 내정보 팝업 제목(#MYI_title)과 같은 글자색/굵기 */
html.h5p #MS_popup_title,
html.h5p #SR_popup_title
{
    left: 0 !important;
    top: 4px !important;
    width: 100% !important;
    height: 90px !important;
    line-height: 90px !important;
    font-size: 58px !important;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800 !important;
    color: #946d06 !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
}


/* ============ 도신의 탑 시즌제 (2026-09-14 CEO 승인) ============ */
/* 시즌 남은 시간 상자: 안내 두 줄(#SMOP_sub, top 398 / h 68) 아래 가운데. 글자 폭만큼의 알약 (2026-09-14 CEO 지시 -
   이번 주/누적 올클리어는 내정보 팝업으로 옮기고 남은 시간만 미션 화면처럼 시계 아이콘 + 'N일 N시간 N분 남음') */
html.h5p #SMOP_season
{
    position: absolute;
    left: 50%;
    top: 410px;
    top: -webkit-calc(var(--h5p_timer_top, 430px) - var(--h5p_title_up, 20px));
    top: calc(var(--h5p_timer_top, 430px) - var(--h5p_title_up, 20px));	/* 공통 남은 시간 알약 높이 (2026-09-22) */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 60px;
    line-height: 54px;
    box-sizing: border-box;
    padding: 0 44px 0 32px;	/* 좌우 여유 16/24 -> 32/44 (2026-09-22 CEO 지시 - 남은 시간 알약 공통) */
    white-space: nowrap;
    /* 미션 알약과 같이 flex 로 세로 가운데 (2026-10-02 CEO 지적) */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: rgba(38, 26, 16, 0.72);
    border: 3px solid #c9a45c;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 60;
}
html.h5p #SMOP_season_clock
{
    width: 38px;     /* 42 -> 38 (2026-10-02 CEO 지시 - 살짝 줄임) */
    height: 38px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 16px;	/* 10 -> 16 (2026-09-22 CEO 지시 - 시계와 글자 사이 여유) */
    vertical-align: middle;
}
html.h5p #SMOP_season_left
{
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #ffffff;
    /* 2026-10-10 CEO 지시: 아래 안내 줄과 같은 어두운 톤의 얇은 번짐 */
    text-shadow: 0 0 5px rgba(28, 15, 6, 0.95), 0 0 10px rgba(28, 15, 6, 0.65), 0 2px 3px rgba(0, 0, 0, 0.5);
    vertical-align: middle;
}
/* 지난주 도신의 탑 결과: 공용 팝업(H5P_CONFIRM) 설명 칸 안에 넣는다 (2026-10-01 CEO 지시).
   판·딤·확인 버튼은 공용 팝업 것을 그대로 쓰고, 여기서는 줄 모양만 잡는다 */
html.h5p .SMOP_last_date
{
    display: block;
    margin-bottom: 22px;
    font-size: 38px;
    line-height: 50px;
    font-weight: 700;
    color: #8a7355;
}
html.h5p .SMOP_last_row
{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /* 2026-10-15 CEO 지적: 팝업 가운데를 경계로 반씩 나누니 글 묶음이 오른쪽으로 치우쳐 보였다 -
       소제목 폭과 내용 폭을 정해 두고 그 묶음을 팝업 가운데에 놓는다 */
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 42px;
    line-height: 64px;
}
html.h5p .SMOP_last_label
{
    -webkit-flex: 0 0 230px;
    flex: 0 0 230px;
    width: 230px;
    box-sizing: border-box;
    padding-right: 24px;
    text-align: right;
    color: #8a7355;
}
html.h5p .SMOP_last_value
{
    -webkit-flex: 0 0 330px;
    flex: 0 0 330px;
    width: 330px;
    box-sizing: border-box;
    padding-left: 24px;
    text-align: left;
    font-weight: 800;
    color: #3b2a10;
}
/* 받은 보상: 금화 / 루비 / 입장 티켓을 아이콘과 함께 한 줄씩 (2026-10-15 CEO 지시) */
html.h5p .SMOP_last_item
{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap;
}
html.h5p .SMOP_last_item i
{
    display: inline-block;
    -webkit-flex: 0 0 46px;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin-right: 12px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}
/* 클리어 보상 확률 줄: 보상 글자(#SR_popup_title2, top 967.5) 아래 */
html.h5p #SR_popup_prob
{
    left: 40px !important;
    top: 1185px !important;   /* 종이 팝업 아래끝(~1183) 바로 아래, 보너스2 판(1335) 위 */
    width: 1000px !important;
    height: auto !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    line-height: 46px !important;
    white-space: normal !important;
    box-sizing: border-box;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 14px;
}
/* ============ 게임 HUD 트로피 (2026-09-14 CEO 지시) ============ */
/* 상대: 레벨 알약(#user_you_level left 901.5 / top 324 / 140x35) 오른쪽 끝. 나: '나' 알약(#h5pg_me_chip bottom 1030) 오른쪽 끝
   -> 내 정보 컨테이너(#area_user_info_i, 바닥 864 / 높이 288) 안 top = 288 - (1030 - 864) - 35 = 87 */
html.h5p #user_you_medal, html.h5p #user_i_medal
{
    position: absolute !important;
    left: 1043px !important;
    width: 36px !important;
    height: 33px !important;
    transform: none !important;
    pointer-events: none;
    /* 2026-10-10 CEO 지시: 여백을 잘라 낸 그림(trophy_fit*)을 쓰므로 단계마다 비가 다르다 - 칸 안에서 비를 지킨다 */
    object-fit: contain !important;
    /* 2026-10-10 CEO 지시: 고/스톱 팝업(1000)과 그 뒤 어두운 판(999) 보다 아래에 깔린다.
       턴 시계(1001)보다도 아래라 지금까지처럼 시계가 트로피 위로 겹친다 */
    z-index: 998 !important;
}
html.h5p #user_you_medal { top: 325px !important; }
html.h5p #user_i_medal   { top: 88px !important; }
html.h5p #user_you_medalnum, html.h5p #user_i_medalnum
{
    position: absolute !important;
    z-index: 998 !important;	/* 트로피와 같은 층 (2026-10-10) */
    left: 1052px !important;
    width: 28px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 17px !important;
    font-weight: 800;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: 2px 0 0 #163421, -2px 0 0 #163421, 0 2px 0 #163421, 0 -2px 0 #163421 !important;
    pointer-events: none;
}
html.h5p #user_you_medalnum { top: 342px !important; }
html.h5p #user_i_medalnum   { top: 105px !important; }

/* 2026-10-10 CEO 지시: 상대 트로피는 레벨 알약 아래로 내린다 (내 쪽과 좌우 대칭).
   알약은 컨테이너 top 324 / 높이 35 라 아래끝이 359 - 그 바로 밑에 세우고,
   크기는 내 트로피(138x181)와 같게 맞춘다. 가로는 알약 가운데(971.5)에 맞춰 left 902.5 (알약 901.5~1041.5 의 가운데) */
html.h5p #user_you_medal
{
    left: 902.5px !important;
    top: 363px !important;
    width: 138px !important;
    height: 181px !important;
}
html.h5p #user_you_medalnum
{
    left: 902.5px !important;
    top: 548px !important;
    width: 138px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 30px !important;
}

/* 2026-10-09 CEO 지시: 내 트로피만 턴 시계와 같은 자리에 크게 둔다 (시계가 트로피 위로 겹친다).
   h5_portrait_game.js h5pg_move_my_trophy 가 시계와 같은 부모로 옮기고 시계 앞에 넣는다.
   시계판 가운데가 976 이라 트로피(138 폭) 왼쪽은 907. 세로는 시계 가운데(아래에서 1194)에 맞춘다.
   상대 트로피는 지금처럼 오른쪽 끝에 작게 그대로 둔다 */
html.h5p #user_i_medal
{
    left: 907px !important;
    top: auto !important;
    /* 2026-10-10 CEO 지시: 트로피를 더 아래로. 아래 누적 횟수를 감추면서 그 자리(32)만큼 내렸다가,
       한 번 더 내려 달라 하여 '나' 알약(bottom 1018, 높이 35 -> 윗변 1053) 바로 위에 앉힌다 */
    bottom: 1053px !important;
    width: 138px !important;
    height: 181px !important;
}
/* 누적 횟수는 트로피 발 아래에 (2026-10-09) */
html.h5p #user_i_medalnum
{
    left: 907px !important;
    top: auto !important;
    bottom: 1072px !important;
    width: 138px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 30px !important;
}

/* 2026-10-10 CEO 지시: 선 결정 화면부터 상대 트로피는 상대 캐릭터 위, 내 트로피는 내 캐릭터 아래에 둔다.
   상대: 캐릭터 그림(#user_you_face) 윗변이 정보 칸 안 181 이라 트로피(181) 아래끝을 그 6 위(175)에 -> top -6.
         가로는 캐릭터 가운데(971.5)에 맞춘 지금 값 902.5 그대로.
   나:   캐릭터 그림 아래끝이 화면 아래에서 875 라 그 6 아래부터 -> bottom 875 - 6 - 181 = 688.
   미션 창이 뜨면 h5_portrait_game.js h5pg_trophy_pop 이 둘 다 '뿅' 하고 감춘다 */
/* 2026-10-10 CEO 지시(추가): 여백을 잘라 낸 그림으로 바꾸면서 다섯 단계를 같은 칸(134x140)에 담는다.
   예전에는 원본(138x181)을 그대로 넣어 여백이 거의 없는 5 단계만 유난히 커 보였다.
   폭 134 = 가장 넓은 2 단계 비(0.947) 로도 높이가 먼저 닿는 값 - 다섯 단계가 같은 높이로 보인다.
   기준선은 위 동료 주석 그대로: 상대는 아래끝 175 (top 35), 나는 윗변이 화면 바닥에서 869 (bottom 729).
   가로 가운데도 그대로: 상대 971.5 (left 904.5) / 나 976 (left 909) */
html.h5p #user_you_medal
{
    left: 904.5px !important;
    /* 2026-10-10 CEO 지적: 턴 FOCUS 줄에 걸쳐 보기 싫다.
       캐릭터 그림과 줄 사이가 19 뿐이라 캐릭터에 붙이면 트로피(140)가 반드시 줄을 넘는다 -
       기준을 줄로 바꾼다. 상대 줄은 캔버스 268~272 라 그 위로 4 띄워 칸 아래끝을 264 에 (칸 top 110 + 14) */
    top: 14px !important;
    width: 134px !important;
    height: 140px !important;
}
html.h5p #user_i_medal
{
    left: 909px !important;
    /* 내 줄은 화면 바닥에서 852~856 - 그 아래로 4 띄운다 (칸 아래끝 = 바닥에서 708) */
    bottom: 708px !important;
    width: 134px !important;
    height: 140px !important;
}
/* 2026-10-10 CEO 지시: 팝업 딤이 깔린 동안에는 트로피를 그 아래로 내린다.
   딤이 깔리는 팝업은 60(결과)~100(종료 확인) 이라 50 이면 모두 아래로 간다 (게임판은 뎁스가 없어 그대로 위).
   표는 h5_portrait_game.js 의 h5pg_sync_trophy_depth 가 달고 뗀다. 선 결정 화면은 제외 */
html.h5p.h5pg_trophy_under #user_you_medal,
html.h5p.h5pg_trophy_under #user_i_medal,
html.h5p.h5pg_trophy_under #user_you_medalnum,
html.h5p.h5pg_trophy_under #user_i_medalnum
{
    z-index: 50 !important;
}

/* '뿅': 살짝 커졌다가 작아지며 사라진다 (복제 그림. 길이는 H5PG_TROPHY_POP_MS 와 같게) */
html.h5p .h5pg_trophy_pop
{
    position: absolute;
    z-index: 998;
    object-fit: contain;	/* 원본과 같은 비로 (여백 잘린 그림, 2026-10-10) */
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: h5pg_trophy_pop 0.52s ease-in forwards;
}
@keyframes h5pg_trophy_pop
{
    0%   { transform: scale(1);    opacity: 1; }
    35%  { transform: scale(1.3);  opacity: 1; }
    100% { transform: scale(0);    opacity: 0; }
}


/* 클리어 보상 팝업 - 올클리어 보너스/트로피 도달 보상 글자: 확률 줄(#SR_popup_prob top 1180) 아래 (2026-09-14 보상 개편) */
html.h5p #SR_popup_allclear
{
    left: 40px !important;
    top: 560px !important;    /* 보너스1 판(화면상 ~545 까지) 과 보상 팝업(697) 사이 빈 자리 */
    width: 1000px !important;
    height: auto !important;
    font-size: 36px !important;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    line-height: 46px !important;
    white-space: normal !important;
    box-sizing: border-box;
    padding: 8px 16px;
    background: rgba(60, 30, 0, 0.75);
    border-radius: 14px;
}
/* 보상 글자 두 줄은 세로에서 확률 띠(#SR_popup_prob)에 합쳐 보여 주므로 원래 자리 글자는 감춘다 */
html.h5p #SR_popup_title2
{
    display: none !important;
}
html.h5p #SR_popup_prob b { font-size: 40px; color: #ffffff; }	/* 보상 두 줄은 확률 줄(36)보다 크게 (2026-09-22 글자 크기 점검: 30 -> 40) */

/* ============ 출석 보상 새 체계 (2026-09-15 CEO 승인) - 하단 경고/누적 보상 목록/받기 버튼 ============ */
/* 연속 출석 안내는 8칸(연속 출석)에 대한 말이라 격자 바로 위로 (2026-09-21 CEO 지시 - 누적 보상과 붙어 있을 문구가 아니다).
   머리띠 아래끝(~102)과 격자 위끝(184) 사이 가운데 */
html.h5p #ADP_warn
{
    position: absolute;
    left: 35px;
    top: 825px;	/* 격자 아래끝 804 + 여백 21 (글자 가운데 855) */
    width: 970px;
    height: 60px;
    line-height: 60px;
    font-size: 44px;
    font-weight: 700;
    color: #ae885b;	/* 2026-10-10 CEO 지시: 제목 줄 '현재 누적 N일'(#ADP_total_day) 과 같은 색 (빨강 #b33800 에서 바꿈) */
    text-align: center;
}
/* 다음 보상 줄: 윗줄 '다음 보상 5일 ... 3일 남음' / 아랫줄 금화·루비 아이콘 + 값 (2026-09-21 CEO 지시).
   한 줄 78 -> 두 줄 136 (위아래 여백 8 + 56 + 64, 테두리 없음) */
html.h5p #ADP_total_row
{
    line-height: 60px !important;
    font-size: 40px !important;
}
html.h5p #ADP_total_line
{
    position: static;
    height: 60px;
    line-height: 60px;
    margin: 17px 0 0 0;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}
/* 보상 줄: 가운데 정렬 + 크게 (2026-09-21 CEO 지시 - 글자 30 -> 36, 아이콘 56 -> 64) */
/* 보상 줄: 흰 판 아래쪽을 넓혀(70 -> 106) 보상이 한 줄 끼워진 느낌 없이 가운데에 여유 있게 (2026-09-21 CEO 지시) */
html.h5p #ADP_total_reward
{
    position: static;
    height: 78px;
    line-height: 78px;
    margin: 1px 0 0 0;
    font-size: 44px;
    font-weight: 700;
    color: #82603a;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}
html.h5p .ADP_rw
{
    display: inline-block;
    margin: 0 28px;
    vertical-align: top;
}
html.h5p .ADP_rw_icon
{
    width: 78px;
    height: 78px;
    margin: 0 12px 0 0;
    vertical-align: top;
}
html.h5p #ADP_total_sub { font-size: 44px; }
html.h5p #ADP_total_value { font-size: 44px; color: #eb841b; font-weight: 800; }	/* 'N일차 / M일 남음' 은 8칸 보상 글자와 같은 주황 (2026-09-21 CEO 지시) */
html.h5p #ADP_total_btn.ADP_btn_claim
{
    /* 보상받기도 같은 초록 버튼 그림 (예전 단색 #2f9e44 는 뺐다), 받을 수 있다는 표시로 커졌다 작아지기만 */
    -webkit-animation: adp_claim_blink 1s ease-in-out infinite alternate;
    animation: adp_claim_blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes adp_claim_blink { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.06); } }
@keyframes adp_claim_blink { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }
/* 누적 보상 목록: 판 안 격자 자리를 덮는 목록 (다음 보상 줄을 누르면 열리고, 다시 누르면 닫힘) */
/* 누적 보상 목록: 팝업 위쪽(머리띠 포함)을 통째로 덮는 한 장 (2026-09-21 CEO 지시 - 머리띠 X 와 아래 X 가 둘이라 헷갈렸다).
   덮는 동안은 머리띠 X 도 가려지고, 닫기는 아래 누적 보상 줄의 X(? 자리) 하나만 남는다.
   팝업 흰 테두리(4) 안쪽을 덮고, 위 모서리는 팝업 모서리(48)에 맞춘다. 아래끝 862 = 누적 영역(880) 위 */
html.h5p #ADP_ms_list
{
    position: absolute;
    left: 4px;
    top: 4px;
    width: 1032px;	/* 판 1040 - 흰 테두리 4 x 2 */
    height: 920px;	/* 4 ~ 924. 아래 꼬리(34) 끝 958 이 누적 영역(962) 바로 위 */
    overflow: visible;	/* 말풍선 꼬리가 상자 밖으로 나와야 한다 (11단계는 스크롤 없이 다 들어간다) */
    background: #ffffff;
    border: 4px solid #b58a4e;	/* 말풍선 선 (2026-09-21 CEO 지시). #d9b77e -> 더 어둡게 #b58a4e (CEO 지시) */
    border-radius: 44px 44px 24px 24px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    padding: 0 0 16px 0;
    z-index: 40;	/* 머리띠 X(#ADP_close, 30) 보다 위 */
}
/* 제목은 팝업 머리띠와 같은 노란 띠 + 같은 글자 (#AD_title) - 팝업 제목이 '누적 출석 보상' 으로 바뀐 것처럼 보인다 */
html.h5p .ADP_ms_title
{
    height: 90px;
    line-height: 90px;
    margin-bottom: 30px;	/* 제목과 목록 사이 여백 (2026-09-21 CEO 지시 - 너무 붙어 있었다) */
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
    text-align: center;
    background: #fdd461;
    border-radius: 40px 40px 0 0;	/* 테두리 4 안쪽 */
}
/* 말풍선 꼬리: 아래 누적 보상 줄의 닫기(X) 버튼을 가리킨다 (2026-09-21 CEO 지시).
   X 가운데 = 판 x 939 -> 목록 안쪽 기준 931. 바깥 삼각형(선 색) 위에 흰 삼각형을 얹어 선만 남긴다.
   흰 삼각형이 목록 아래 테두리 한 토막을 덮어 말풍선이 꼬리로 이어진다 */
html.h5p #ADP_ms_list::before,
html.h5p #ADP_ms_list::after
{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}
html.h5p #ADP_ms_list::before
{
    left: 903px;	/* 927 - 24 (버튼 가운데 판 x 935 -> 목록 안쪽 927) */
    bottom: -34px;	/* 테두리 4 + 꼬리 30 */
    border-width: 30px 24px 0 24px;
    border-top-color: #b58a4e;	/* 목록 선과 같은 색 */
}
html.h5p #ADP_ms_list::after
{
    left: 907px;	/* 927 - 20 */
    bottom: -26px;
    border-width: 26px 20px 0 20px;
    border-top-color: #ffffff;
}
/* 줄: 글자 30 -> 34, 줄 높이 58 -> 62 (11줄 x 63 = 693, 제목 120 과 합쳐 858 안) */
html.h5p .ADP_ms_row
{
    height: 68px;
    line-height: 68px;
    margin: 0 40px;
    text-align: center;	/* 2026-10-19 CEO 지시: 줄 내용을 가운데로 모은다 */
    font-size: 40px;	/* 34 -> 40 -> 42 -> 40 (2026-09-21 CEO 지시 - 목록 글자 전체를 아주 조금 줄임) */
    color: #5a3a18;
    border-bottom: 1px solid #e6d6b8;
    white-space: nowrap;
}
/* 칸 폭 합 952 (목록 1032 - 좌우 40): '3000일' 이 금화 아이콘에 붙지 않게 일수 칸 160, '2998일 남음' 이 들어가는 240 */
/* 마지막 줄(3000일) 아래 구분선은 목록 테두리와 겹쳐 보여 뺀다 (2026-09-21 CEO 지시) */
html.h5p .ADP_ms_row:last-child
{
    border-bottom: 0;
}
/* 2026-10-19 CEO 지시(2차): 칸마다 남는 자리가 뒤에 붙어 줄 전체가 왼쪽으로 쏠려 보였다 -
   칸을 글 길이에 맞게 줄이고 줄 가운데에 모아 놓는다.
   실측(쉼표 넣은 뒤) 일수 143 / 금화 320 / 루비 203. 칸 사이는 44 씩:
   176 + 44 + 324 + 44 + 208 = 796 -> 줄 폭 952 안에서 좌우 78 씩 남아 가운데에 선다 */
html.h5p .ADP_ms_day
{
    display: inline-block;
    width: 176px;		/* 일수 143 + 화살표(16 + 앞 여백 14) */
    text-align: right;	/* 숫자 끝이 줄마다 같은 자리에 선다 */
    font-weight: 700;
}
/* 일수 뒤 화살표 (2026-10-19 CEO 지시). 글꼴에 기대지 않게 테두리로 그린다 */
html.h5p .ADP_ms_day::after
{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 14px;
    vertical-align: 2px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 16px solid #c3a87c;
}
html.h5p .ADP_ms_reward
{
    display: inline-block;
    width: 576px;		/* 324 + 44 + 208 */
    margin-left: 44px;
    text-align: left;
}
/* 목록 안 아이콘은 줄 높이(62)에 맞춘다 */
html.h5p .ADP_ms_reward .ADP_rw
{
    display: inline-block;
    width: 208px;		/* 루비 칸 (실측 203) */
    margin: 0;
    vertical-align: top;
}
html.h5p .ADP_ms_reward .ADP_rw_icon
{
    width: 54px;
    height: 54px;
    margin: 7px 6px 0 0;	/* 줄 높이 68 가운데 */
    vertical-align: top;
}
/* 금화 칸 폭을 고정해 줄마다 루비 아이콘이 같은 세로줄에 선다 (가장 긴 '1억 5000만냥' 301 이 들어간다) */
html.h5p .ADP_ms_reward .ADP_rw_gold
{
    width: 324px;		/* 가장 긴 '1억 5,000만냥' 320 */
    margin-right: 44px;
}
/* 2026-10-10 CEO 지시: 이미 받은 줄은 끝난 줄로 한눈에 보이게 흐리게 한다
   (2026-10-19 CEO 지시로 오른쪽 '받음' 글자는 뺐다 - 흐린 것으로 충분하다) */
html.h5p .ADP_ms_done .ADP_ms_day,
html.h5p .ADP_ms_done .ADP_ms_reward
{
    opacity: 0.42;
}

/* 8일차 칸 값(금화+루비)은 글자가 길어 조금 작게 (2026-09-15) */
html.h5p #Txt_AD_value_8 { font-size: 38px !important; white-space: nowrap; }
/* 받은 칸 보상 글자: 주황 대신 칸 날짜 숫자(#7a5a32)보다 조금 연한 갈색 (2026-09-21 CEO 지시, S_attendance_portrait.js mark_claimed).
   처음에 쓴 회색(#9a9a9a)은 팝업의 갈색 톤에서 튀어 보였다 */
html.h5p div[id^="Txt_AD_value_"].ADP_value_got
{
    color: #9a7b54 !important;
}	/* 30 -> 38 (두 줄 38 x 2 = 76, 판 82 안) */	/* 2026-09-21 2줄(100만냥 / +루비 10개)로 바꿔 24 -> 28 -> 30 (두 줄 33 x 2 = 66, 판 70 안) */

/* ---- 밝은 판 위 스크롤 막대: 우편함/미션과 같은 모양(가는 트랙 + 둥근 막대), 흰색은 안 보여 갈색 계열 (2026-09-22 CEO 지시) ----
   랭킹 설명 팝업 / 금고 입출금 내역 / 약관 본문. 막대 길이는 보이는 내용 범위(위 여백 ~ 아래끝) */
html.h5p #RANK_sys_scroll::-webkit-scrollbar,
html.h5p #SAFE_hist_list::-webkit-scrollbar,
html.h5p #AGD_contents::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p #RANK_sys_scroll::-webkit-scrollbar-corner,
html.h5p #SAFE_hist_list::-webkit-scrollbar-corner,
html.h5p #AGD_contents::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p #RANK_sys_scroll::-webkit-scrollbar-button,
html.h5p #SAFE_hist_list::-webkit-scrollbar-button,
html.h5p #AGD_contents::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
html.h5p #RANK_sys_scroll::-webkit-scrollbar-track,
html.h5p #SAFE_hist_list::-webkit-scrollbar-track,
html.h5p #AGD_contents::-webkit-scrollbar-track
{
    border: 0;
    background:
        -webkit-radial-gradient(11px 7px, 4px 7px, rgba(122, 90, 50, 0.14) 96%, transparent 100%) no-repeat,
        -webkit-radial-gradient(11px 0px, 4px 7px, rgba(122, 90, 50, 0.14) 96%, transparent 100%) no-repeat,
        -webkit-linear-gradient(left, transparent 7px, rgba(122, 90, 50, 0.14) 7px, rgba(122, 90, 50, 0.14) 15px, transparent 15px) no-repeat;
    background:
        radial-gradient(4px 7px at 11px 7px, rgba(122, 90, 50, 0.14) 96%, transparent 100%) no-repeat,
        radial-gradient(4px 7px at 11px 0px, rgba(122, 90, 50, 0.14) 96%, transparent 100%) no-repeat,
        linear-gradient(to right, transparent 7px, rgba(122, 90, 50, 0.14) 7px, rgba(122, 90, 50, 0.14) 15px, transparent 15px) no-repeat;
    background-size: 22px 7px, 22px 7px, 22px calc(100% - 14px);
    background-position: 0 0, 0 100%, 0 7px;
}
html.h5p #RANK_sys_scroll::-webkit-scrollbar-track { margin: 0px 0 0 0; }
html.h5p #SAFE_hist_list::-webkit-scrollbar-track { margin: 10px 0 0 0; }
html.h5p #AGD_contents::-webkit-scrollbar-track { margin: 30px 0 0 0; }
/* 2026-10-09 CEO 지시: 약관 본문만 전체 길이를 알려 주던 회색 줄을 없앤다 (움직이는 막대만 남긴다).
   랭킹 설명 팝업·금고 내역은 그대로 둔다 */
html.h5p #AGD_contents::-webkit-scrollbar-track { background: none; }
html.h5p #RANK_sys_scroll::-webkit-scrollbar-thumb,
html.h5p #SAFE_hist_list::-webkit-scrollbar-thumb,
html.h5p #AGD_contents::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}
/* 2026-10-09 CEO 지시: 랭킹 안내 팝업 막대만 오른쪽으로 붙인다 (3 -> 다시 2 더, 모두 5).
   좌우 투명 테두리를 6/0 으로 어긋나게 줬더니 막대 양 끝 둥금이 한쪽만 찌그러져 보였다 (CEO 지적) -
   둥금(11px/8px)은 테두리 안쪽에서 테두리 두께만큼 깎이기 때문이다.
   그래서 테두리는 3/3 그대로 두고(= 랭킹 목록 막대와 똑같은 반원 끝), 칸 자체를 오른쪽으로 민다.
   막대 자리는 칸 오른쪽 끝에 붙으므로 칸이 5 넓어지면 막대도 5 오른쪽으로 간다 */
html.h5p .rank_v3 #RT_modal_body
{
    margin-right: -5px;
}

/* 선 결정: 후공 쪽 패/표시/프로필은 어둡게, 선공 프로필은 빛나게 (2026-09-26 CEO 지시) */
html.h5p .h5p_sun_dim
{
    -webkit-filter: brightness(0.42) saturate(0.55);
    filter: brightness(0.42) saturate(0.55);
    -webkit-transition: -webkit-filter 220ms ease-out;
    transition: filter 220ms ease-out;
}
/* 2026-09-29 CEO 지적: 예전보다 약해 보인다 - 더 세고 빠르게 뛰게 한다 */
html.h5p .h5p_sun_glow
{
    border-radius: 50%;
    -webkit-animation: h5p_sun_glow_pulse 0.45s ease-in-out infinite alternate;
    animation: h5p_sun_glow_pulse 0.45s ease-in-out infinite alternate;
}
@-webkit-keyframes h5p_sun_glow_pulse
{
    from { box-shadow: 0 0 14px 4px rgba(255, 216, 74, 0.7); }
    to   { box-shadow: 0 0 36px 15px rgba(255, 216, 74, 1), 0 0 70px 28px rgba(255, 196, 40, 0.6); }
}
@keyframes h5p_sun_glow_pulse
{
    from { box-shadow: 0 0 14px 4px rgba(255, 216, 74, 0.7); }
    to   { box-shadow: 0 0 36px 15px rgba(255, 216, 74, 1), 0 0 70px 28px rgba(255, 196, 40, 0.6); }
}

/* ---- 선 결정 도장 (h5_portrait_sun.js, 2026-09-26 CEO 지시) ----
   누가 선인지 알리던 한 줄 토스트 대신 선을 잡은 쪽 프로필 위에 쾅 찍는다 */
html.h5p #h5p_sun_stamp
{
    position: absolute;
    /* 인게임 선(先) 마크(first.png)를 그대로 쓴다 (2026-09-26 CEO 지시).
       2026-09-29 CEO 지시로 인게임 마크와 같은 69 로 (JS H5P_SUN_SIZE 와 반드시 같아야 자리가 맞는다) */
    width: 69px;
    height: 69px;
    z-index: 205;
    pointer-events: none;
    display: none;
    -webkit-filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
    /* 한가운데를 고정해 크기를 바꿀다 - 커졌다 작아져도 자리가 흔들리지 않는다 */
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
html.h5p #h5p_sun_stamp.h5p_sun_on
{
    display: block;
    -webkit-animation: h5p_sun_slam 0.34s cubic-bezier(0.25, 1.6, 0.4, 1) both, h5p_sun_shrink 0.35s ease-in 0.34s forwards;
    animation: h5p_sun_slam 0.34s cubic-bezier(0.25, 1.6, 0.4, 1) both, h5p_sun_shrink 0.35s ease-in 0.34s forwards;
}
/* 2026-09-29 CEO 지시: 인게임 선(先) 마크의 1.5배로 켅 박힌다 - 작으면 눈에 잘 안 들어온다 */
@-webkit-keyframes h5p_sun_slam
{
    0%   { opacity: 0; -webkit-transform: scale(1.8); }
    45%  { opacity: 1; -webkit-transform: scale(1.45); }
    100% { opacity: 1; -webkit-transform: scale(1.5); }
}
@keyframes h5p_sun_slam
{
    0%   { opacity: 0; transform: scale(1.8); }
    45%  { opacity: 1; transform: scale(1.45); }
    100% { opacity: 1; transform: scale(1.5); }
}
/* 판으로 들어가면서 인게임 마크 크기(1배)로 줄어들며 넘겨준다 */
@-webkit-keyframes h5p_sun_shrink
{
    0%   { opacity: 1; -webkit-transform: scale(1.5); }
    75%  { opacity: 1; -webkit-transform: scale(1.12); }
    100% { opacity: 0; -webkit-transform: scale(1); }
}
@keyframes h5p_sun_shrink
{
    0%   { opacity: 1; transform: scale(1.5); }
    75%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1); }
}

/* 가운데 안내 토스트: 글에 넣은 줄바꿈을 그대로 살린다 (2026-10-09 CEO 지시).
   원본이 글자로만 넣어(.text) <br> 이 안 먹으므로 개행 문자를 쓴다. 자동 줄바꿈은 그대로다 */
html.h5p #message
{
    white-space: pre-line;
}

/* ---- 큰 팝업형 상황 토스트 (2026-10-09 CEO 지시) ----
   한 줄 토스트 위에 작은 컷을 얹던 것을 그만두고, 컷과 글을 한 판에 담아 크게 보여 준다 */
html.h5p #h5sit_pop
{
    position: absolute;
    left: 50%;
    margin-left: -380px;
    top: 50%;
    margin-top: -300px;
    width: 760px;
    /* 2026-10-10 CEO 지시: 글 아래 여백을 넥넥히 (30 -> 48) */
    padding: 34px 34px 48px;
    box-sizing: border-box;
    border-radius: 40px;
    background: rgba(16, 18, 24, 0.92);
    border: 4px solid rgba(255, 216, 120, 0.6);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    text-align: center;
    z-index: 250;			/* 한 줄 토스트(200) 위로 */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0.88);
    transform: scale(0.88);
    -webkit-transition: opacity 180ms ease-out, -webkit-transform 220ms cubic-bezier(0.2, 1.3, 0.4, 1);
    transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.2, 1.3, 0.4, 1);
}
html.h5p #h5sit_pop.h5sit_pop_on
{
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}
html.h5p #h5sit_pop_img
{
    display: block;
    /* 2026-10-10 CEO 지시: 캐릭터가 너무 커 부담스럽다 - 440 -> 380 으로 줄인다 */
    width: 380px;
    height: 380px;
    margin: 0 auto;
}
html.h5p #h5sit_pop_msg
{
    margin-top: 34px;	/* 2026-10-10 CEO 지시: 캐릭터와 글이 붙어 보여 띄운다 (6 -> 34) */
    font-size: 50px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    /* 원본 한 줄 토스트(#message)처럼 글에 넣은 줄바꿈을 살린다 (2026-10-10 CEO 지시).
       없으면 '업적 보상을 모두 받습니다.' 뒤 재화가 같은 줄로 이어졌다 */
    white-space: pre-line;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
/* ---- 게임판 밖 화면의 상황 캐릭터 컷 (h5_situation_screen.js, 2026-09-23 CEO 지시) ----
   오른쪽 아래 구석에 300 크기로 1.5초. 이전 버튼(아래 96, 높이 133) 위로 비켜 둔다 */
html.h5p #h5sit_scr
{
    position: absolute;
    /* 2026-09-26 CEO 지적(태블릿에서 치우쳐 보임): 화면 끝이 아니라 1080 칸 기준으로 붙인다
       (태블릿은 캔버스가 1080 보다 넓고 화면은 가운데 1080 칸에 그려진다) */
    right: 50%;
    margin-right: -516px;
    bottom: 260px;
    width: 300px;
    height: 300px;
    /* 금고/랭킹/우편함 같은 새 화면들이 z 80~100 이라 40 이면 그 뒤에 가려 안 보였다 (2026-09-23 CEO 지적).
       안내 토스트(#message 200)와 레벨업 연출(200) 아래로만 둔다 */
    z-index: 150;
    pointer-events: none;
    display: none;
}
/* 상점: 오른쪽 아래 대신 타이틀('상점') 왼쪽으로 (2026-09-26 CEO 지시) */
/* 상대 기다리는 중: 안내 글·버튼 아래 가운데로 (2026-09-26 CEO 지시).
   내 점수줄(1277)과 거의 닿아 이 화면에서만 300 -> 240 으로 줄인다 */
/* 선 결정 팝업(아랫변 50% + 0.5, 그 아래 안내줄이 50% + 94) 바로 아래 (2026-09-26 CEO 지시) */
html.h5p #h5sit_scr[data-scene="S_SELECTSUN"]
{
    /* 2026-09-26 CEO 지시: 패를 가리지 않게 팝업 아래 왼쪽 빈 자리로 (가운데는 내 소지금 줄이 있다) */
    /* 2026-10-10 CEO 지시: 팝업(133.5~946.5 / 564~1180.5) 아래 가운데로 옮기고 280 -> 360 으로 키운다.
       예전에는 왼쪽 구석에 작게 붙어 눈에 잘 안 들어왔다 */
    left: 50%;
    margin-left: -180px;
    right: auto;
    margin-right: 0;
    top: -webkit-calc(50% + 24px);
    top: calc(50% + 24px);
    bottom: auto;
    width: 360px;
    height: 360px;
}

html.h5p #h5sit_scr[data-scene="S_WAIT"]
{
    /* 2026-09-26 CEO 지시: 화투 뒷면 3장을 없애고 그 자리(안내 글 아래 가운데)에 컷을 넣는다.
       상자 안 빈 칸이 742~962 이라 그에 맞춰 220 (2026-09-26 CEO 지시로 170 -> 220) */
    left: 50%;
    margin-left: -110px;
    right: auto;
    margin-right: 0;
    top: 794px;
    bottom: auto;
    width: 220px;
    height: 220px;
}

/* 금고: 가운데 뜼는 안내 글 바로 위로 (2026-09-26 CEO 지시) */
html.h5p #h5sit_scr[data-scene="S_SAFE"]
{
    /* 2026-09-26 CEO 지적: 오른쪽이 아니라 1080 칸 가로 가운데로 */
    left: 50%;
    margin-left: -150px;
    right: auto;
    margin-right: 0;
    top: 1066px;	/* 안내 글(1386~1510) 바로 위 */
    bottom: auto;
}

/* 룰렛 돌리는 중: 판 아래 가운데 (2026-10-03 CEO 지시 - 판과 겹치지 않게).
   룰렛 그림의 아랫변은 세로중앙 +496 (원 아랫변 +457 에 꽃장식 39) 이라
   +530 부터 두면 34 띄우고, 아래로 380 써도 세이프영역(+1050) 안에 들어간다.
   돌리는 동안은 아래 단추줄(#GAP_thumbs)이 내려가 있어 가리는 것이 없다 */
html.h5p #h5sit_scr[data-cut="roulette_spin"]
{
    left: 50%;
    margin-left: -190px;
    right: auto;
    margin-right: 0;
    top: -webkit-calc(50% + 530px);
    top: calc(50% + 530px);
    margin-top: 0;
    bottom: auto;
    width: 380px;
    height: 380px;
}
/* 룰렛 결과(꽝/대박): 확인 버튼 바로 위 가운데 (2026-10-03 CEO 지시).
   확인 버튼은 세로중앙 +650 ~ +752 이고 룰렛판 아랫변이 +337 이라 그 사이에 둔다 */
/* 2026-10-07 CEO 지시로 캐릭터를 키운다 (300 -> 360).
   아랫변이 확인 버튼 윗변(세로중앙 +650)에 닿도록 위를 340 -> 290 으로 올렸다 */
html.h5p #h5sit_scr[data-cut="roulette_miss"],
html.h5p #h5sit_scr[data-cut="roulette_jackpot"]
{
    left: 50%;
    margin-left: -180px;
    right: auto;
    margin-right: 0;
    /* 2026-10-07 CEO 지시: 확인 버튼을 캐릭터가 살짝 덮었다 - 버튼이 꿀렁일 때(세로 1.09배)
       윗변이 4.6 올라와 컷 아랫변(세로중앙 +650)과 닿았다. 컷을 12 올려 띄운다 */
    top: -webkit-calc(50% + 278px);
    top: calc(50% + 278px);
    margin-top: 0;
    bottom: auto;
    width: 360px;
    height: 360px;
}

/* 출석 보상을 받을 때(reward_get): 오른쪽 아래는 출석 팝업이 덮고 있어 컷이 가렸다 (2026-10-10 CEO 지시).
   팝업(높이 1448, 세로 가운데 정렬 -> 윗변이 세로중앙 -724)의 위쪽 빈 자리, 화면 가운데로 옮긴다.
   컷 300 + 여백 20 을 더해 윗변에서 320 위에 아랫변이 오도록 둔다 */
html.h5p #h5sit_scr[data-cut="reward_get"]
{
    /* 2026-10-10 CEO 지시로 300 -> 400 으로 키웠다 */
    left: 50%;
    margin-left: -200px;
    right: auto;
    margin-right: 0;
    bottom: auto;
    /* 2026-10-19 CEO 지시: 캐릭터 아랫변을 출석 팝업 윗변에 여백 없이 붙인다.
       로그인 때 뜨는 출석 팝업(#AD_bg)은 아래 규칙으로 윗변이 50% - 634 이고,
       컷은 400 짜리라 윗변을 50% - 634 - 400 에 둔다 (캔버스 높이는 늘 2340 이상이라 세이프영역을 넘지 않는다).
       그림은 360x360 을 꽉 채워 그려져 있어 칸 아랫변이 곧 캐릭터 발끝이다 */
    top: -webkit-calc(50% - 1034px);
    top: calc(50% - 1034px);
    width: 400px;
    height: 400px;
}
/* 로그인 때 뜨는 출석 팝업만 90 내린다 (설정에서 여는 팝업은 컧이 없어 그대로 둔다).
   윈변 446 -> 536 이 되어 컧 아래끝(516) 아래로 내려간다 (2026-10-10 CEO 지시) */
html.h5p:not(.h5p_attset) #AD_bg
{
    top: -webkit-calc(50% - 634px) !important;
    top: calc(50% - 634px) !important;
}
html.h5p #h5sit_scr[data-scene="S_MARKETSTORE"],
html.h5p #h5sit_scr[data-scene="S_RANK"]
{
    top: 180px;
    top: -webkit-calc(200px - var(--h5p_title_up, 20px));
    top: calc(200px - var(--h5p_title_up, 20px));
    bottom: auto;
}
/* 같은 높이에서 좌우만 다르게: 36탄 thum_022 만 왼쪽, 나머지 둘은 오른쪽 (2026-09-26 CEO 지시) */
html.h5p #h5sit_scr[data-scene="S_MARKETSTORE"][data-side="left"]  { left: 50%; margin-left: -516px; right: auto; margin-right: 0; }
html.h5p #h5sit_scr[data-scene="S_RANK"]                            { left: auto; right: 50%; margin-right: -516px; }
html.h5p #h5sit_scr[data-scene="S_MARKETSTORE"][data-side="right"] { left: auto; right: 50%; margin-right: -516px; }
/* 구매 완료 컷: 가운데 토스트 바로 위 (2026-10-01 CEO 지시 - 오른쪽 위가 아니라 토스트 위에서 뜼게).
   위아래 자리는 토스트를 재서 JS 가 직접 넣는다. 화면별 규칙을 이기도록 뒤에 둔다 */
html.h5p #h5sit_scr[data-scene][data-spot="toast"]
{
    left: 50%;
    margin-left: -150px;
    right: auto;
    margin-right: 0;
}
html.h5p #h5sit_scr img
{
    display: block;
    width: 100%;
    height: 100%;
}
html.h5p #h5sit_scr.h5sit_scr_on
{
    display: block;
    -webkit-animation: h5sit_scr_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both, h5sit_scr_out 0.3s ease-in 1.2s both;
    animation: h5sit_scr_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both, h5sit_scr_out 0.3s ease-in 1.2s both;
}
/* 화면이 나갈 때: 화면과 같이 짧게 사라진다 (2026-10-08 CEO 지적 - 캐릭터만 늦게까지 남아 있었다).
   머무는 컷(h5sit_scr_stay)에도 걸리도록 뒤에 적고 !important 로 덮는다 */
html.h5p #h5sit_scr.h5sit_scr_on.h5sit_scr_bye,
html.h5p #h5sit_scr.h5sit_scr_on.h5sit_scr_stay.h5sit_scr_bye
{
    -webkit-animation: h5sit_scr_out 0.14s ease-in both !important;
    animation: h5sit_scr_out 0.14s ease-in both !important;
}
/* 머무는 컷(상점): 나타나기만 하고 사라지지 않는다 (2026-09-26 CEO 지시) */
html.h5p #h5sit_scr.h5sit_scr_on.h5sit_scr_stay
{
    -webkit-animation: h5sit_scr_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both;
    animation: h5sit_scr_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both;
}
@-webkit-keyframes h5sit_scr_in
{
    from { opacity: 0; -webkit-transform: translateY(26px) scale(0.86); }
    to   { opacity: 1; -webkit-transform: none; }
}
@keyframes h5sit_scr_in
{
    from { opacity: 0; transform: translateY(26px) scale(0.86); }
    to   { opacity: 1; transform: none; }
}
@-webkit-keyframes h5sit_scr_out
{
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes h5sit_scr_out
{
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* 딤이 깔리는 연출(레벨업 LEVELUP_pop z 200, 구매 완료) 위로 올리는 컷 (2026-09-23 CEO 지시) */
html.h5p #h5sit_scr.h5sit_scr_top
{
    z-index: 210;
}

/* 고/스톱 팝업 세 번째 줄 '(내가 보유한 금액까지만 획득 가능!)' 숨김 (2026-09-29 CEO 지시: 컨셉 변경으로 이 안내는 쓰지 않는다).
   원본(S_game_popup.js)은 정산 파일이라 건드리지 않고 이 줄만 가린다. 가로 판은 h5_landscape.css 에 같은 규칙 */
html.h5p #ga_popup_txt3
{
    display: none !important;
}

/* 다만 '스톱 시 받을 돈 > 상대가 가진 돈' 일 때만 올인 안내를 띄운다 (2026-10-08 CEO 지시).
   글자는 h5_portrait_allin_warn.js 가 넣는다. 자리는 팝업판(542x411) 아래 - 버튼(305~388) 과 겹치지 않는다.
   좌표는 원본과 같은 720 기준이고 #h5p_legacy 가 1.5배로 키운다 */
html.h5p #ga_popup_txt3.h5pg_allin
{
    display: block !important;
    left: 11px !important;
    top: 396px;			/* 실제 자리는 h5_portrait_allin_warn.js 가 팝업판 아랫변을 재어 넣는다 */
    /* 2026-10-10 CEO 지적: '(상대가 소지한 금액만큼만 획득 가능!)' 끝의 '능!)' 만 다음 줄로 넘어갔다.
       520 에서는 안쪽 폭이 496 인데 그 줄이 32 글자크기로 약 526 이라 모자랐다 - 오른쪽으로 100 넓힌다
       (왼끝 11 은 그대로라 꼬리가 가리키는 스톱 버튼 자리는 바뀌지 않는다. 팝업판은 860 쯤이라 넘치지 않는다) */
    width: 620px !important;
    height: auto !important;
    padding: 15px 12px 17px !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
    font-size: 34px !important;		/* 2026-10-09 CEO 지시로 키움 (30 -> 34). 30 아래로는 내리지 않는다 */
    font-weight: 700 !important;
    color: #7a2a22 !important;
    text-align: center !important;
    background: rgba(255, 252, 245, 0.96) !important;
    border: 2px solid #e23b2e !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}
html.h5p #ga_popup_txt3.h5pg_allin b
{
    display: block;
    font-size: 42px;		/* 2026-10-09 CEO 지시로 키움 (36 -> 42) */
    color: #e01b0c;
}
html.h5p #ga_popup_txt3.h5pg_allin small
{
    display: block;
    font-size: 32px;		/* 2026-10-09 CEO 지시로 키움 (30 -> 32) */
    font-weight: 700;
    color: #b3291d;
}
/* 말풍선 꼬리 - 바로 위 스톱 버튼을 가리킨다 (2026-10-09 CEO 지시).
   가로 자리(--h5pg_allin_tail)는 h5_portrait_allin_warn.js 가 버튼을 재어 넣는다.
   삼각형 두 장을 겹쳐 빨간 테두리 안에 흰 속을 만든다 */
/* 꼬리 기본 자리 = 스톱 단추 한가운데 (단추 left 108 + 폭 337 의 절반 = 276.5, 말풍선 왼끝 11 을 빼 265.5).
   말풍선과 단추가 같은 칸(#ga_popup_div) 안이라 이 값은 재지 않아도 맞는다 (2026-10-10 CEO 지적) */
html.h5p #ga_popup_txt3.h5pg_allin:before,
html.h5p #ga_popup_txt3.h5pg_allin:after
{
    content: '';
    position: absolute;
    left: 265.5px;
    left: var(--h5pg_allin_tail, 265.5px);
    width: 0;
    height: 0;
    border-style: solid;
}
html.h5p #ga_popup_txt3.h5pg_allin:before
{
    top: -20px;
    margin-left: -20px;
    border-width: 0 20px 20px;
    border-color: transparent transparent #e23b2e;
}
html.h5p #ga_popup_txt3.h5pg_allin:after
{
    top: -16px;
    margin-left: -17px;
    border-width: 0 17px 17px;
    border-color: transparent transparent rgba(255, 252, 245, 0.96);
}

/* 고/스톱 팝업 뒤를 어둡게 덮는 판 (2026-10-09 CEO 지시).
   팝업(z 1000)과 같은 부모 안 형제라 999 면 팝업만 또렷하게 뜬다.
   부모에 변형(transform)이 걸려 있어도 화면을 다 덮도록 넉넉히 펼친다 */
html.h5p #h5pg_gs_dim
{
    position: fixed;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 300%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    -webkit-transition: opacity 0.18s;
    transition: opacity 0.18s;
}
/* 바닥패를 들여다보는 동안에는 어두운 판도 걷는다 */
html.h5p #h5pg_gs_dim.h5pg_gs_peek
{
    opacity: 0;
}

/* 광고 탭: 광고를 보고 금화를 받는 판 (2026-09-30 CEO 지시). 자리와 크기는 패키지 판과 같다 */
html.h5p #MSP_ad_pane
{
    position: absolute;
    /* 2026-10-10 CEO 지시(2차): 금화·루비 카드(#MS_menu*)가 1.1 배라 그것과 같은 비율로 키우고,
       위 시작자리도 같게 맞춘다 (금화 카드는 top 755 에 1.1 배 -> 보이는 윈변 727).
       가로는 화면 가운데(540) 에 둔다 - 카드 폭이 금화 격자보다 조금 넓어 왼쪽만 맞추면 기울어 보인다 */
    left: 122px;
    top: 758px;
    top: -webkit-calc(778px - var(--h5p_title_up, 20px));
    top: calc(778px - var(--h5p_title_up, 20px));
    width: 835px;
    /* 2026-10-09 새 그림(860x645, 책 모양)에 맞춰 571 -> 626 */
    height: 626px;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 20;
}
html.h5p #MSP_ad_card
{
    position: absolute;
    left: 0;
    top: 0;
    width: 835px;
    height: 626px;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt_ad_bg.png) no-repeat 0 0;
    background-size: 100% 100%;
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}
/* 2026-10-09 새 시안: '광고 보고 보상 받기!' 는 그림 배너(ch_bt_ad)가 되어 글자는 쓰지 않는다 */
html.h5p #MSP_ad_head
{
    position: absolute;
    /* 2026-10-10 CEO 지시(2차): '대부호 패키지' 배너와 같은 폭으로 줄인다.
       패키지 그림(342 폭) 안에서 배너가 차지하는 폭이 338 이라 여기도 338 (높이는 363:191 비율대로 178).
       왼쪽 반쪽 가운데는 다시 잰 값 222.6 (예전 212.5 는 그림자까지 종이로 세었던 값) */
    left: 54px;
    top: 60px;		/* 2026-10-10 CEO 지시로 조금 내렸다 (35 -> 60) */
    width: 338px;
    height: 178px;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt_ad.png?v=3) no-repeat 0 0;	/* 2026-10-10 CEO 가 새 그림을 보냈다 (폰에 옛 그림이 남지 않게 번호를 올린다) */
    background-size: 100% 100%;
    font-size: 0;
    color: transparent;
}
/* 2026-10-10 CEO 가 보낸 컷: 시안의 오른쪽 면 그림 자리다 (상황 컷 p40_c09 - 연승 스트릭 - 과 같은 그림이라 상점용으로 한 장 따로 둔다).
   접힌 선(417)과 카드 안쪽 끝(806) 사이 가운데에 정사각으로 놓고, 아래로는 광고 보기 단추(478) 위에서 멈춘다 */
html.h5p #MSP_ad_char
{
    position: absolute;
    /* 가이드 실측은 x 458~778 / y 127~438 이지만, 2026-10-10 CEO 지시로
       오른쪽 반쪽(접힌 선 417 ~ 종이 끝 826) 가운데 621.5 에 맞추고,
       단추가 너무 내려가 있어 두 개를 함께 올렸다 */
    left: 451px;
    top: 100px;
    width: 320px;
    height: 311px;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt_ad_char.png?v=2) no-repeat center center;
    background-size: contain;
}
/* 금화 그림: 왼쪽 면 가운데 */
html.h5p #MSP_ad_icon
{
    position: absolute;
    /* 가이드 실측: 금화 x 133~290 / y 261~415 - 왼쪽 반쪽 가운데(212.5) 에 선다 */
    left: 144px;
    top: 261px;
    width: 157px;
    height: 154px;
    margin-left: 0;
    background: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_gold.png) no-repeat center center;
    background-size: contain;
}
/* 받는 금액: 금화 바로 아래 */
html.h5p #MSP_ad_line
{
    position: absolute;
    /* 배너와 같은 칸(27 ~ 398)을 써 왼쪽 반쪽 가운데에 선다 */
    left: 37px;
    top: 425px;
    width: 371px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    color: #4a2f16;
    white-space: nowrap;
}
/* 오늘 몇 번 봤는지 / 다시 볼 수 있는 시간.
   2026-10-15 CEO 지시: '09:34 뒤에 다시 볼 수 있습니다 (1/10)' 가 왼쪽 반쪽(371 폭)을 넘어 광고 보기 단추와 겹쳤다 -
   카드(높이 626) 바로 아래로 내리고 카드 폭 전체 가운데에 둔다. 아래는 바탕 그림이라 흰 글자에 진한 테두리를 두른다 */
html.h5p #MSP_ad_state
{
    position: absolute;
    left: 0;
    top: 650px;
    width: 835px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 3px 0 0 #4a2f16, -3px 0 0 #4a2f16, 0 3px 0 #4a2f16, 0 -3px 0 #4a2f16,
        2px 2px 0 #4a2f16, -2px 2px 0 #4a2f16, 2px -2px 0 #4a2f16, -2px -2px 0 #4a2f16;
    white-space: nowrap;
}
/* 광고 보기 단추: 파란 알약 그림(ch_bt4 320x95), 오른쪽 면 아래 */
html.h5p #MSP_ad_btn
{
    position: absolute;
    /* 가이드 실측은 x 462~788 / y 494~588 이지만, 그대로 쓰면 그림(ch_bt4 320x95)이 원본보다 작게 들어간다
       (판이 0.947 배라 326 x 0.947 = 309). 2026-10-10 CEO 지시로 원본 크기가 되도록 338x100 으로 키우고
       가이드 가운데(625, 541)는 그대로 둔다 */
    left: 442px;
    top: 472px;
    width: 338px;
    height: 100px;
    margin-left: 0;
    line-height: 96px;
    text-align: center;
    font-size: 50px;
    font-weight: 900;
    color: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: url(../image/1_mainmenu/h5p/shop/ch_bt4.png) no-repeat 0 0;
    background-size: 100% 100%;
    text-shadow: -3px 0 0 #0d4f7d, 3px 0 0 #0d4f7d, 0 -3px 0 #0d4f7d, 0 3px 0 #0d4f7d,
                 -2px -2px 0 #0d4f7d, 2px -2px 0 #0d4f7d, -2px 2px 0 #0d4f7d, 2px 2px 0 #0d4f7d;
    cursor: pointer;
    white-space: nowrap;
}
html.h5p #MSP_ad_btn:active
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

/* 광고 보상을 지금 받을 수 없을 때(10분 대기 중 / 오늘 10회 끝): 버튼을 흐리게 (2026-09-30) */
html.h5p #MSP_ad_card.MSP_ad_off #MSP_ad_btn
{
    -webkit-filter: grayscale(0.85);
    filter: grayscale(0.85);
    opacity: 0.75;
}

/* 패키지·광고 판은 아무 데나 눌러도 되므로 눌림 느낌도 판 전체에 준다 (2026-09-30 CEO 지시) */
html.h5p #MSP_pkg_card, html.h5p #MSP_ad_card { cursor: pointer; }
html.h5p #MSP_pkg_card:active, html.h5p #MSP_ad_card:active
{
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}
/* 안쪽 버튼은 보이기만 하고 누르기는 판이 받는다 - 두 번 세지 않게 */
html.h5p #MSP_pkg_buy, html.h5p #MSP_ad_btn { pointer-events: none; }
html.h5p #MSP_ad_btn:active { -webkit-transform: none; transform: none; }

/* ---- 출석 보상 팝업: 이미 받은 칸과 오늘 받는 칸을 구분한다 (2026-10-02 CEO 지시) ---- */
/* 1) 이미 받은 칸(딤 + 초록 체크)은 팝업이 뜰 때 커졌다 작아지지 않는다 - 움직임이 어색했다 */
html.h5p img[id^="Img_AD_press_"]
{
    -webkit-animation: none !important;
    animation: none !important;
}

/* 2) 오늘 받는 칸은 딤을 덮지 않고, 칸 색을 반전시키고 테두리가 번쩍이게 한다 */
html.h5p img[id^="Img_AD_press_"].ADP_today
{
    background-color: transparent !important;
    background-image: none !important;
}
/* 칸 판: 흰 바탕 -> 주황 바탕 (색 반전) + 번쩍이는 테두리 */
html.h5p div[id^="Txt_AD_num_"].ADP_today
{
    background: url(../image/13_attendance/h5p/at_bg2.png) no-repeat 0 0 !important;
    background-size: 230px 326px !important;
    border: 0 !important;
}
/* 모서리 날짜 상자도 같이 반전 (흐린 베이지 -> 진한 갈색 판에 흰 숫자) */
html.h5p div[id^="Txt_AD_num_"].ADP_today::before
{
    color: #ffffff;
    background: none;
}
/* 보상 글자 상자: 아이보리 바탕 + 주황 글자 -> 흰 바탕 + 진한 주황 글자 (받은 칸 회색 규칙보다 뒤에 둔다) */
html.h5p div[id^="Txt_AD_value_"].ADP_today,
html.h5p div[id^="Txt_AD_value_"].ADP_value_got.ADP_today
{
    color: #b33800 !important;
    background: none !important;
    font-weight: 800 !important;
}
/* 오늘 받는 칸 아이콘 반짝임 (2026-10-20 CEO 지시: 상점 재화 아이콘과 같은 빛줄기).
   아이콘 그림을 마스크로 써서 빛이 그림 모양 안에서만 지나간다.
   자리·크기는 아이콘(img[id^="Img_AD_icon_"])과 똑같이 두고, 어느 칸인지는
   S_attendance_portrait.js 의 build_shine 이 --adp-col / --adp-row 로 넣는다 */
html.h5p #ADP_shine
{
    position: absolute;
    left: -webkit-calc(35px + 246px * var(--adp-col, 0) + 53px);
    left: calc(35px + 246px * var(--adp-col, 0) + 53px);
    top: -webkit-calc(136px + 342px * var(--adp-row, 0) + 77px);
    top: calc(136px + 342px * var(--adp-row, 0) + 77px);
    width: 124px;
    height: 124px;
    z-index: 3;
    pointer-events: none;
    background: -webkit-linear-gradient(-15deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-animation: adp_icon_shine 4s infinite;
    animation: adp_icon_shine 4s infinite;
}

/* 4초 중 앞 0.7초(17.5%)에만 지나가고 나머지는 쉰다 (상점 MSP_icon_shine 과 같은 걸음) */
@-webkit-keyframes adp_icon_shine
{
    0%     { background-position: 110% 0; opacity: 0.4; -webkit-animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
    8.8%   { opacity: 1; }
    17.5%  { background-position: -10% 0; opacity: 0.9; }
    100%   { background-position: -10% 0; opacity: 0.9; }
}
@keyframes adp_icon_shine
{
    0%     { background-position: 110% 0; opacity: 0.4; animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
    8.8%   { opacity: 1; }
    17.5%  { background-position: -10% 0; opacity: 0.9; }
    100%   { background-position: -10% 0; opacity: 0.9; }
}

@-webkit-keyframes adp_today_glow
{
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 70, 0.0), 0 0 14px 2px rgba(255, 170, 40, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 213, 110, 0.55), 0 0 30px 8px rgba(255, 170, 40, 0.95); }
}
@keyframes adp_today_glow
{
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 70, 0.0), 0 0 14px 2px rgba(255, 170, 40, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 213, 110, 0.55), 0 0 30px 8px rgba(255, 170, 40, 0.95); }
}

/* ---- 도신 대전 입장하기: 누른 뒤 게임이 뜰 때까지 화면 가운데 토스트 (2026-10-02 CEO 지시) ----
   버튼 안에 넣었더니 글자 앞을 가려서, 실시간 대전 매칭 대기와 같은 점 세 개 모션으로 가운데에 띄운다 */
html.h5p #SMOP_enter.SMOP_enter_busy
{
    pointer-events: none;	/* 연달아 눌리지 않게만 막는다 (모양은 그대로) */
}
html.h5p #SMOP_toast
{
    display: none;
    position: absolute;
    left: 190px;
    top: 50%;
    /* 2026-10-09 CEO 지시: 캐릭터가 알약 위에 걸터앉지 않고 알약 안에 들어온다 -> 그만큼 판이 커졌다 */
    margin-top: -300px;
    width: 700px;
    min-height: 180px;
    box-sizing: border-box;
    padding: 44px 20px 24px;	/* 컷 맨 위 말풍선 글자가 윗변에 닿지 않게 (2026-10-09) */
    background: rgba(0, 0, 0, 0.82);
    border: 2px solid #8a9a72;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    text-align: center;
    color: #ffe98a;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    z-index: 200;
    pointer-events: none;
}
/* 입장 중 늬에시 컷 (2026-10-09 CEO 지시): 어두운 알약 바로 위에 올라선 모양.
   그림은 360 칸짜리 시트인데 조금 키워 400 으로 깔고, 알약 윗변을 20 물고 내려오게 한다.
   한 장씩 넘기는 일과 시트 격자(background-image/size)는 S_storymode_portrait.js 가 넣는다 */
html.h5p #SMOP_toast_char
{
    /* 2026-10-09 CEO 지시로 알약 바깥(위)에서 알약 안으로 들어왔다 - 글줄 바로 위에 가운데로 놓는다 */
    position: relative;
    display: block;
    margin: 0 auto 8px;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 0 0;
    /* 2026-10-09: 격자 시트에서 상황 컷(360 정사각 한 장)으로 바꿔 칸에 꽉 채운다 */
    background-size: 100% 100%;
    pointer-events: none;
}
/* 통통 뛰는 점 세 개 (매칭 대기 .h5pg_wait_dots 와 같은 움직임) */
html.h5p #SMOP_toast_dots
{
    display: block;
    height: 46px;
    margin-top: 10px;
    line-height: 0;
    font-size: 0;
}
html.h5p #SMOP_toast_dots i
{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 18px 11px 0 11px;
    border-radius: 50%;
    background: #f6d7a7;
    -webkit-animation: h5pg_dot_hop 1.2s ease-in-out infinite;
    animation: h5pg_dot_hop 1.2s ease-in-out infinite;
}
html.h5p #SMOP_toast_dots i:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
html.h5p #SMOP_toast_dots i:nth-child(3) { -webkit-animation-delay: 0.3s;  animation-delay: 0.3s; }

/* ============ 패 바꾸기 확인 팝업 (2026-10-02 CEO 지시) ============
   공용 예/아니오 팝업을 그대로 쓰고, <html> 에 h5p_pyn_card 가 붙은 동안에만 새 자리로 다시 잡는다.
   CEO 지시 네 가지: 다른 일반 팝업과 같은 형식으로 / 버튼도 그 버튼으로 /
   '패를 바꾸고 싶으신가요?' 뒤 띠 그림 삭제 / 필요 금화에 팝업용 재화바(금화 막대) 추가.
   표를 다는 일은 h5_portrait_game.js 가 한다 (1080x2340 기준) */
html.h5p.h5p_pyn_card #PYN_board
{
    left: 80px !important;
    /* 게임 중 팝업은 게임판 세로 가운데(50% - 298)에 맞춘다 - 판 높이 700 의 절반을 더 올린다 */
    top: -webkit-calc(50% - 648px) !important;
    top: calc(50% - 648px) !important;
    margin: 0 !important;
    width: 920px !important;
    height: 700px !important;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
}
/* 글자 뒤에 깔리던 띠 그림은 쓰지 않는다 (CEO 지시) */
html.h5p.h5p_pyn_card #Img_PYN_txtbox
{
    display: none !important;
}
/* 버튼 위에 얹히던 숫자 그림(1 / 2)은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5p.h5p_pyn_card #PYN_Img_2,
html.h5p.h5p_pyn_card #PYN_Img_3,
html.h5p.h5p_pyn_card #PYN_btn_focus
{
    display: none !important;
}
/* "패를 바꾸고 싶으신가요?" 한 줄 */
html.h5p.h5p_pyn_card #PYN_Txt_1
{
    left: 40px !important;
    top: 92px !important;
    width: 840px !important;
    height: 86px !important;
    line-height: 86px !important;
    text-align: center !important;
    color: #2f2418 !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    letter-spacing: -1px;
    text-shadow: none !important;
    z-index: 2;
}
/* 비용 줄: '필요 금화' 글자와 금화 막대를 한 줄로 묶어 가로 가운데에 (상점·룰렛 팝업과 같은 방식) */
html.h5p.h5p_pyn_card #PYNG_need
{
    position: absolute;
    left: 40px;
    top: 250px;
    width: 840px;
    height: 96px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 2;
}
html.h5p.h5p_pyn_card #PYN_Txt_2
{
    position: relative !important;	/* 자리는 묶음이 잡고, top 으로 살짝만 내린다 */
    left: auto !important;
    top: 5px !important;
    width: auto !important;
    height: 75px !important;
    line-height: 75px !important;
    margin-right: 36px;
    white-space: nowrap;
    text-align: left !important;
    color: #7a5b52 !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
html.h5p.h5p_pyn_card #PYNG_bar
{
    position: relative;
    width: 306px;
    height: 75px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
html.h5p.h5p_pyn_card #PYN_Img_1
{
    left: 0 !important;
    top: 0 !important;
    width: 306px !important;
    height: 75px !important;
    z-index: 2;
}
/* 금액: 막대 왼쪽 동전 그림이 x 73 까지라 그 오른쪽 칸 가운데에 (룰렛 금화 팝업과 같다) */
html.h5p.h5p_pyn_card #PYN_Txt_3
{
    left: 80px !important;
    top: 1px !important;
    width: 218px !important;
    height: 75px !important;
    line-height: 75px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    z-index: 3;
}
/* 내 보유 금화 한 줄 */
html.h5p.h5p_pyn_card #PYN_Txt_4
{
    left: 40px !important;
    top: 382px !important;
    width: 840px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-align: center !important;
    color: #7a5b52 !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    z-index: 2;
}
/* 버튼: 다른 팝업과 같은 디자이너 그림. 왼쪽이 예(초록), 오른쪽이 아니오(회색) */
html.h5p.h5p_pyn_card #PYN_btn1,
html.h5p.h5p_pyn_card #PYN_btn2
{
    position: absolute !important;
    top: 500px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    z-index: 3;
}
html.h5p.h5p_pyn_card #PYN_btn1::after,
html.h5p.h5p_pyn_card #PYN_btn2::after
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #ffffff;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1px;
}
/* 2026-10-09 CEO 지시: 진행(예) 버튼은 모든 팝업에서 오른쪽. 자리만 맞바꿨고 누르는 동작은 그대로다 */
html.h5p.h5p_pyn_card #PYN_btn1
{
    left: 472px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
}
html.h5p.h5p_pyn_card #PYN_btn1::after
{
    content: "예";
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a;
}
html.h5p.h5p_pyn_card #PYN_btn2
{
    left: 111px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
}
html.h5p.h5p_pyn_card #PYN_btn2::after
{
    content: "아니오";
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}

/* ---- 원스토어 네비게이션바 견본 (h5_onestore_navguide.js, 2026-10-06 CEO 지시) ----
   원스토어 앱이 게임 위에 얹는 바와 같은 자리에 그림을 깔아 화면을 짤 때 이 자리를 피하게 한다.
   1080 기준 x 687 / y 51, 크기 333x120. 누르면 x 966 으로 접힌다 (y·크기는 그대로, x 만 슬라이드).
   왼쪽 여백은 JS 가 넣는다 - 태블릿은 캔버스가 1080 보다 넓어 가운데 1080 칸을 기준으로 잡아야 한다 */
html.h5p #h5p_navguide
{
    position: absolute;
    left: 50%;
    margin-left: 426px;		/* 966 - 540 (접힌 자리). 2026-10-06 CEO 지시로 앱을 켤 때는 늘 접혀 있다 */
    top: 51px;
    width: 333px;
    height: 120px;
    /* 진짜 바는 앱이 게임 위에 얹는 것이라 견본도 모든 화면 위에 둔다 (캔버스 안 최대가 3000) */
    z-index: 9000;
    cursor: pointer;
    -webkit-transition: margin-left 0.25s ease;
    transition: margin-left 0.25s ease;
    display: none;
}
html.h5p #h5p_navguide img
{
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- 티켓바 숨김 / 도신 대전만 루비 자리에 (2026-10-06 CEO 지시) ----
   원스토어 네비게이션바가 오른쪽 위(1080 기준 x 687~)를 쓴다. 공통 티켓바는 x 825~1063 이라
   접힌 바(x 966~)에 늘 물려 숫자가 잘렸다. 그래서 어느 화면에서나 티켓바는 숨긴다.
   대신 도신 대전(도신의 탑)은 입장티켓 개수가 제일 중요하니 그 화면에서만
   루비바를 빼고 그 자리(x 526)에 티켓바를 놓는다. 크기는 티켓 그림 원본 그대로(238) */
html.h5p #H5PTOP_item_ticket
{
    display: none;
}
html.h5p .GAP_money_item:nth-child(3)
{
    display: none;
}
html.h5p #S_STORYMODE_div #H5PTOP_item_ruby
{
    display: none;
}
html.h5p #S_STORYMODE_div #H5PTOP_item_ticket
{
    display: block;
    /* 루비바가 옮겨 간 자리와 같게 (2026-10-13: 597 -> 649 -> 670 -> 663).
       옛 597 로 남아 있어 넓어진 금화바와 겹친 적이 있다 (CEO 지적) - 루비바를 옮기면 여기도 같이 옮긴다 */
    left: 663px;
}

/* 2026-10-08 CEO 지적(갤럭시 Z Flip6): 브라우저의 웹페이지 강제 어둡게 하기가 화면을 회색으로 바래게 했다.
   밝은 화면 전용임을 알려 끈다. 삼성 인터넷은 다크 모드 규칙이 있는 페이지는 스스로 어둡게 하지 않아 같은 값을 그 안에도 둔다 */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark)
{
    :root { color-scheme: only light; }
}

/* 삼성 인터넷만(h5_color_scheme.js 가 html 에 h5_sb 를 붙임): 강제 어둡게 하기를 끄려면 '밝은·어두운 모두 지원' 을 밝혀야 해서 light dark 로 둔다.
   그러면 폰이 다크 모드일 때 브라우저 기본 글자·입력칸 색이 어두운 쪽으로 바뀌므로, 지금처럼 밝은 쪽 색으로 되돌려 둔다 (배경은 위 html.h5p 가 이미 고정) */
html.h5_sb { color-scheme: light dark; color: #000000; }
html.h5_sb input,
html.h5_sb textarea,
html.h5_sb select,
html.h5_sb button { color-scheme: light; }
@media (prefers-color-scheme: dark)
{
    html.h5_sb { color-scheme: light dark; color: #000000; }
}

/* ============ 고/스톱 팝업 새 모양 (2026-10-08 CEO 가이드 16_고스톱 팝업) ============
   글자와 자리는 javascript/h5_portrait_gs_popup.js 가 넣고, 크기/색은 여기서 고정한다.
   원본(S_game_popup.js)이 인라인으로 자리를 잡으므로 전부 !important 로 덮는다.
   좌표는 가이드(1080x2340)에서 잰 값이고, 팝업판 왼쪽 위를 0,0 으로 본다 */
html.h5p #ga_popup_div.h5pg_gs
{
    left: 74.5px !important;
    top: -webkit-calc(50% - 314px) !important;
    top: calc(50% - 314px) !important;
    /* 2026-10-10 CEO 지시로 274 올렸다가 '자리가 어색하다' 하여 원래대로 되돌렸다 (-636 -> -362).
       왼쪽 미션판 위 캐릭터(345 높이, 윗변이 화면 바닥에서 1385.5)가 이 판 아래쪽을 가리는 문제는
       다시 생각해 보기로 한다 */
    margin-top: -362px !important;
    width: 931px !important;
    height: 724px !important;
    -webkit-transition: opacity 0.18s;
    transition: opacity 0.18s;
}

/* 바닥패를 보는 동안: 팝업만 흐려지고 밑에 깔린 바닥패가 비친다 */
html.h5p #ga_popup_div.h5pg_gs_peek
{
    opacity: 0.1 !important;
}
/* 들여다보는 사이 바닥패를 잘못 누르지 않도록 막아 주는 받침 (2026-10-09 CEO 지시로 '눌러서 돌아가기' 는 없앴다) */
html.h5p #h5pg_gs_catch
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background: transparent;
}
/* 옛 '1고' 글씨 그림과 리모컨용 선택 테두리는 새 모양에서 쓰지 않는다 */
html.h5p #ga_popup_div.h5pg_gs #ga_popup_goimg,
html.h5p #ga_popup_div.h5pg_gs #ga_popup_gs_btn_focus
{
    display: none !important;
}

/* 제목: [고] 하시겠습니까? - 판 너비 가운데 */
html.h5p #ga_popup_div.h5pg_gs #ga_popup_txt
{
    left: 0 !important;
    top: 104px !important;
    width: 931px !important;
    height: 112px !important;
    line-height: 112px !important;
    text-align: center !important;
    color: #3b2317 !important;
    font-size: 72px !important;
    font-weight: 800 !important;
}
/* '고' 글자 (2026-10-08 CEO 지시: 노란 그라데이션 + 갈색 테두리).
   밑에 깔린 글자가 갈색 테두리를 그리고, 그 위에 같은 글자를 노란 그라데이션으로 덮는다 */
html.h5p #ga_popup_div.h5pg_gs .h5pg_gs_go
{
    position: relative;
    display: inline-block;
    margin-right: 18px;
    font-size: 118px;
    line-height: 112px;
    font-weight: 900;
    color: #774c27;
    -webkit-text-stroke: 12px #774c27;
}
html.h5p #ga_popup_div.h5pg_gs .h5pg_gs_go::after
{
    content: attr(data-txt);
    position: absolute;
    left: 0;
    top: 0;
    line-height: 112px;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    color: transparent;
    background-image: -webkit-linear-gradient(top, #fff3c4 0%, #ffd94f 48%, #f4ab14 100%);
    background-image: linear-gradient(to bottom, #fff3c4 0%, #ffd94f 48%, #f4ab14 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html.h5p #ga_popup_div.h5pg_gs .h5pg_gs_ask
{
    font-size: 62px;
    font-weight: 800;
}

/* 금화 상자 그림 (금화 + 금액 막대가 한 장) */
html.h5p #ga_popup_div.h5pg_gs #ga_popup_goldimg
{
    left: 87px !important;
    top: 256px !important;
    width: 755px !important;
    height: 229px !important;
}

/* '스톱 시,' - 금화 오른쪽 */
html.h5p #ga_popup_div.h5pg_gs #h5pg_gs_when
{
    position: absolute;
    left: 225px;
    top: 300px;
    width: 520px;
    height: 72px;
    line-height: 72px;
    text-align: left;
    color: #3b2317;
    font-size: 60px;
    font-weight: 700;
}

/* 받을 돈 - 막대 한가운데 */
html.h5p #ga_popup_div.h5pg_gs #ga_popup_txt2
{
    left: 87px !important;
    top: 382px !important;
    width: 755px !important;
    height: 102px !important;
    line-height: 102px !important;
    text-align: center !important;
    font-size: 0 !important;
    color: #fed34c !important;
}
html.h5p #ga_popup_div.h5pg_gs #ga_popup_txt2 b
{
    font-size: 64px;
    font-weight: 800;
    color: #fed34c;
}
html.h5p #ga_popup_div.h5pg_gs #ga_popup_txt2 small
{
    margin-left: 14px;
    font-size: 46px;
    font-weight: 700;
    color: #fff6e2;
}

/* 버튼 두 개: 스톱(회색) / N고(초록). 다른 팝업과 같은 디자이너 그림(popup_gray_bt / popup_green_bt 337x104)을
   원본 크기로 쓴다 (2026-10-08 CEO 지시). 누르는 동작은 원본 그대로이고 모양만 바꾼다.
   원본이 키보드 선택에 따라 칠하는 bt_normal/bt_select 그림은 !important 로 덮어 둔다 */
html.h5p #ga_popup_div.h5pg_gs #ga_popup_gs_btn1,
html.h5p #ga_popup_div.h5pg_gs #ga_popup_gs_btn2
{
    top: 566px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: -1px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html.h5p #ga_popup_div.h5pg_gs #ga_popup_gs_btn1
{
    left: 108px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a !important;
}
html.h5p #ga_popup_div.h5pg_gs #ga_popup_gs_btn2
{
    left: 486px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a !important;
}

/* ---- 흔들기 / 쌍피 확인 팝업 (h5_portrait_gs_popup.js 가 h5pg_yn 을 단다, 2026-10-09 CEO 지시) ----
   옛 갈색 버튼(170x83)을 고/스톱 팝업과 같은 디자이너 그림(337x104)으로 바꾸고,
   진행(예)을 오른쪽에 둔다. 판은 원본 그대로 813 폭 - 양 끝 여백 54.5, 버튼 사이 30.
   아래 여백은 옛 버튼과 같은 34.5 가 되게 top 478.5 (판 높이 617) */
html.h5p #ga_popup_div.h5pg_yn #ga_popup_gs_btn1,
html.h5p #ga_popup_div.h5pg_yn #ga_popup_gs_btn2
{
    top: 478.5px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: -1px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* btn1 = 예(진행) -> 오른쪽 초록 / btn2 = 아니오 -> 왼쪽 회색 */
html.h5p #ga_popup_div.h5pg_yn #ga_popup_gs_btn1
{
    left: 421.5px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a !important;
}
html.h5p #ga_popup_div.h5pg_yn #ga_popup_gs_btn2
{
    left: 54.5px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a !important;
}
/* 리모컨 시절 노란 테두리 그림은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5p #ga_popup_div.h5pg_yn #ga_popup_gs_btn_focus
{
    display: none !important;
}

/* 바닥패보기 버튼 - 판 오른쪽 위에 걸친다 (그림 원본 222x150 그대로) */
html.h5p #ga_popup_div.h5pg_gs #h5pg_gs_peek_btn
{
    position: absolute;
    left: 681px;
    top: -84px;
    width: 222px;
    height: 150px;
    cursor: pointer;
}

/* ============ 이전 버튼의 '이전' 글자 (2026-10-08 CEO 지시) ============
   새 버튼 그림에는 글자가 박혀 있지 않다. 그림에 박아 두면 기기 배율에 따라 흐려 보여서,
   글자는 CSS 로 얹어 어느 해상도에서나 또렷하게 그린다. 자리는 옛 그림에 박혀 있던 그대로다.
   누르는 것을 가로채지 않게 pointer-events 는 끈다 */
html.h5p #CH_back::after,
html.h5p #CR_back::after,
html.h5p #DLT_back::after,
html.h5p #GA_back::after,
html.h5p #HE_back::after,
html.h5p #MS_back::after,
html.h5p #QD_back::after,
html.h5p #QU_back::after,
html.h5p #SC_back::after,
html.h5p #SM_back::after,
html.h5p #SMO_back::after,
html.h5p #SS_back::after,
/* 2026-10-13: 새 이전 그림(104x108)은 화살표만 있고 글자가 없다 - 덧붙이던 '이전' 글자는 걷었다 */
html.h5p #ST_back::after,
html.h5p #SMOP_back::after,
html.h5p #MBP_back::after,
html.h5p #SAFE_back_bt::after,
html.h5p #RANK_back_bt::after,
html.h5p #MMRT_back_bt::after
{
    content: none !important;
}

/* ============ 한 줄 안내가 사라질 때 (2026-10-15 CEO 지시) ============
   원본은 정해진 시간에 display:none 으로 툭 끊었다 - 끊기기 직전에 이 표를 붙여 흐려지며 작아지게 한다.
   표를 붙이고 떼는 일은 javascript/h5_toast.js (금고 전용 안내는 S_safe.js) 가 하고, 길이는 H5_TOAST_OUT_MS 와 같아야 한다.
   세로·가로 공통이라 html.h5p 로 묶지 않는다 */
#message.h5_toast_out
{
    -webkit-animation: h5_toast_out 260ms ease-in both;
    animation: h5_toast_out 260ms ease-in both;
}

/* 금고 안내는 세로 가운데 맞춤(translateY -50%)이 걸려 있어 그 값을 함께 적어야 자리가 튀지 않는다 */
html.h5p #SAFE_msg.h5_toast_out
{
    -webkit-animation: h5_toast_out_mid 260ms ease-in both;
    animation: h5_toast_out_mid 260ms ease-in both;
}

@-webkit-keyframes h5_toast_out_mid
{
    from { opacity: 1; -webkit-transform: translateY(-50%) scale(1); }
    to   { opacity: 0; -webkit-transform: translateY(-50%) scale(0.86); }
}

@keyframes h5_toast_out_mid
{
    from { opacity: 1; transform: translateY(-50%) scale(1); }
    to   { opacity: 0; transform: translateY(-50%) scale(0.86); }
}

@-webkit-keyframes h5_toast_out
{
    from { opacity: 1; -webkit-transform: scale(1); }
    to   { opacity: 0; -webkit-transform: scale(0.86); }
}

@keyframes h5_toast_out
{
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.86); }
}

/* ============ 팝업 바깥(어두운 곳)을 눌러 닫기 안내 (2026-10-15 CEO 지시) ============
   글과 자리는 javascript/h5_dim_close.js 가 넣는다 (판 아랫변에서 H5_DIM_HINT_GAP 아래, 가로 가운데) */
html.h5p .h5dc_hint
{
    position: absolute;
    display: none;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

/* 뒤 그림과 겹쳐도 읽히도록 글 뒤에 어두운 알약을 깐다 */
html.h5p .h5dc_hint span
{
    display: inline-block;
    padding: 4px 28px;
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.45);
    font-size: 36px;
    line-height: 50px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
}


/* ============ 선 결정 패 그림 또렷함 (2026-10-19 CEO 지적: 테두리가 볼록해 보인다) ============
   카드 그림은 2배(244x360)로 받아 화면에는 설계 크기(122x180)로 줄여 그린다.
   Main.css 가 body 에 걸어 둔 image-rendering: -webkit-optimize-contrast 는 줄일 때 윤곽을 세우는데,
   그래서 카드 빨간 테두리에 밝은 테가 생겨 볼록해 보였다 (뒷면 그림은 1:1 이라 멀쩡하다).
   이 패만 보통 보간(부드럽게)으로 줄인다 - 그림·크기는 그대로다 */
html.h5p #SU_card1,
html.h5p #SU_card2,
html.h5p #SU_card3
{
    image-rendering: auto;
}

/* ===== 부팅 가림막 (2026-10-19 CEO 지적: 태블릿에서 작게 떴다가 커진다) =====
   화면 맞춤(Main.screen_adjust)이 한 번 돌기 전에는 1080 기준 원본 크기로 그려져,
   큰 화면에서는 그림이 한구석에 작게 떴다가 갑자기 커져 보였다. 맞춤이 돌 때까지 가려 둔다.
   표는 h5_portrait.js 가 달고 뗀다 (끝내 안 돌면 4초 뒤 저절로 걷힌다) */
html.h5p.h5p_boot #div_body
{
    visibility: hidden !important;
    /* 2026-10-20 CEO 지적: 가림막은 눈에만 안 보이게 할 뿐, 안의 1080 칸(h5p_legacy 등)은
       그대로 화면(800)을 넘어 크롬이 스스로 축소했다(작게 보임) - 넘침이 사라지면 1배로
       돌아와 배경이 커졌다. 화면 맞춤이 돌 때까지 안에 가둔다.
       overflow: hidden 은 말기가 안 된다 - 안의 칸들이 absolute 라 클립을 빠져나가서
       담는 상자 구슬까지 같이 주는 contain: paint 를 쓴다 (로컬 재현으로 확인).
       크기·자리는 그대로라 화면 맞춤이 재는 값은 변하지 않는다 */
    contain: paint;
}
/* 2026-10-20 3차 되돌림: 가림막 동안 하늘색 바탕을 깔았더니 배경이 조각나 보였다 (CEO 지적).
   body 는 화면이 아니라 1080 기준 칸이라, 거기에 색을 칠하면 엉뚱한 크기의 색 덩어리가 생긴다.
   바탕은 손대지 않는다 */
/* 2026-10-21 CEO 지적(첫 시작에 배경이 반쯤 그려지다 다 그려진다): 가림막 동안에는 html 의 배경 그림을 빼고
   앱 시작 화면(manifest.json background_color)과 같은 색만 깐다. body 가 아니라 화면 전체인 html 에만 칠한다.
   배경 그림은 h5_portrait.js 가 다 받은 뒤 가림막과 함께 걷혀 한 번에 보인다 */
html.h5p.h5p_boot
{
    background-image: none !important;
    background-color: #b8dff5 !important;
}

/* ==== css/h5_landscape.css ==== */
/* 파일명: h5_landscape.css
   하는일: 설정 > 게임모드 '가로' 로 치는 게임 판(가로 빌드, html.h5l)에 세로모드 연출을 옮겨 쓴다 (2026-09-17 CEO 지시).
   위쪽 [자동 복사] 구역은 css/h5_portrait.css 의 새 결과 화면(H5RP)/상황 캐릭터(h5pg_sit)/홍단 리본/고·스톱 붙잡기 규칙을
   html.h5p -> html.h5l 로만 바꿔 옮긴 것이다 (세로 규칙이 바뀌면 같이 다시 복사해야 한다).
   아래 [가로 배치] 구역이 1280x720 판에 맞춰 크기/자리를 덮어쓴다. */

/* ================= [자동 복사] 세로 규칙 (2026-09-17 기준, 결과 화면 H5RP 는 2026-09-28 재복사) ================= */
html.h5l #dan_ani_div.h5pg_dan_hide {
    visibility: hidden !important;
}

html.h5l #h5pg_hongdan_fx {
    position: absolute;
    display: none;
    z-index: 1400;	/* 판 위 패/이펙트보다 위, 미션판 가운데 연출(1500) 아래 */
    pointer-events: none;
}

html.h5l #h5pg_go_hold {
    position: absolute;
    display: none;
    pointer-events: none;
}

html.h5l #h5pg_go_hold.h5pg_go_hold_play {
    display: block;
    -webkit-animation: h5pg_go_hold_out 0.25s ease-in 0.45s both;
    animation: h5pg_go_hold_out 0.25s ease-in 0.45s both;
}

@-webkit-keyframes h5pg_go_hold_out { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(1.04); } }

@keyframes h5pg_go_hold_out { from { opacity: 1; } to { opacity: 0; transform: scale(1.04); } }

html.h5l #h5pg_sit_fx {
    position: absolute;
    left: auto;
    right: 39px;		/* 내 프로필(캔버스 x 907~1035, y 1325~) 위쪽, 오른끝은 세이프존(1041)에 맞춤 (2026-09-17 CEO 지시) */
    bottom: 1070px;		/* '나' 표시 줄(캔버스 1275) 바로 위 */
    display: none;
    z-index: 1400;
    pointer-events: none;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

html.h5l #h5pg_sit_fx::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../image/2_game/h5p/result/result_bubble.png) no-repeat 0 0;
    background-size: 100% 100%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

html.h5l #h5pg_sit_fx.h5pg_sit_you {
    right: 39px;
    top: 472px;		/* 상대 레벨 표시(캔버스 434~469) 바로 아래 (2026-09-17 CEO 지시: 상대 띠 20 내림) */
    bottom: auto;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

html.h5l #h5pg_sit_fx.h5pg_sit_you::before {
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

html.h5l #h5pg_sit_box {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
}

html.h5l #h5pg_sit_img {
    position: static;
    display: block;
}

html.h5l #h5pg_sit_fx.h5pg_sit_play {
    display: block;
    -webkit-animation: h5pg_sit_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both, h5pg_sit_out 0.3s ease-in 1.2s both;
    animation: h5pg_sit_in 0.26s cubic-bezier(0.2, 1.1, 0.4, 1) both, h5pg_sit_out 0.3s ease-in 1.2s both;
}

@-webkit-keyframes h5pg_sit_in { 0% { -webkit-transform: scale(0.72); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } }

@keyframes h5pg_sit_in { 0% { transform: scale(0.72); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@-webkit-keyframes h5pg_sit_out { 0% { opacity: 1; } 100% { -webkit-transform: scale(0.94); opacity: 0; } }

@keyframes h5pg_sit_out { 0% { opacity: 1; } 100% { transform: scale(0.94); opacity: 0; } }

/* ---- 새 결과 화면(H5RP) 규칙: 2026-09-28 세로 최신본으로 다시 복사 (무승부 화면/자세히 팝업/말풍선 제거 등 반영, CEO 지시) ---- */

/* ============ 새 결과 화면 (승/패, S_gameresult_portrait.js) ============
   디자이너 가이드 '맞고 세로모드 결과화면 ui' (1080x2340) 실측 자리. 2026-09-16 CEO 지시.
   원본 판(#gr_div)/점수 상세는 visibility 로만 감추고(버튼 동작/표시 상태는 원본 그대로), 새 요소를 위에 그린다.
   무승부/도신 대전 결과는 h5rp_on 이 붙지 않아 기존 화면 그대로 */
html.h5l #S_GAMERESULT_div.h5rp_on #gr_div,
html.h5l #S_GAMERESULT_div.h5rp_on #gr_detail,
html.h5l #S_GAMERESULT_div.h5rp_on #gr_detail_p3
{
    visibility: hidden !important;
}
/* 게임판이 비쳐 보이는 딤 (원본 0.8 -> 가이드처럼 조금 옅게) */
html.h5l #S_GAMERESULT_div.h5rp_on #Img_GR_background
{
    opacity: 0.62 !important;
}

html.h5l #H5RP_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    font-family: inherit;
}
html.h5l #H5RP_root .h5rp_fx,
html.h5l #H5RP_root img
{
    position: absolute;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- 승: 빛 번짐(700x611, 글자 가운데 540/640) + 승 글자(253x279) + 반짝임 + 별 ---- */
html.h5l #H5RP_rays
{
    left: 190px;
    top: 295px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 700px;
    height: 611px;
    /* 디자이너 메모: 점점 크게 등장하며 돌다가 멈춘다.
       2026-10-15 CEO 지시: 한 번 돌고 멈춰 있지 않고 계속 살아 있게 - 등장 뒤에 천천히 숨쉬듯 이어 간다 */
    -webkit-animation: h5rp_rays_in 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both,
                       h5rp_rays_pulse 2.4s ease-in-out 1.45s infinite;
    animation: h5rp_rays_in 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both,
               h5rp_rays_pulse 2.4s ease-in-out 1.45s infinite;
}
html.h5l .h5rp_win #H5RP_title,
html.h5l #H5RP_light
{
    left: 414px;
    top: 460px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 253px;
    height: 279px;
}
html.h5l .h5rp_win #H5RP_title
{
    -webkit-animation: h5rp_win_drop 0.38s cubic-bezier(0.25, 1.35, 0.45, 1) both;
    animation: h5rp_win_drop 0.38s cubic-bezier(0.25, 1.35, 0.45, 1) both;
}
html.h5l .h5rp_star
{
    left: 516px;
    top: 577px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 47px;
    height: 45px;
    opacity: 0;
    /* 2026-10-15 CEO 지시: 한 번 뿌리고 끝내지 않고 계속 뿌린다 */
    -webkit-animation: h5rp_star_fly 1.0s ease-out infinite both;
    animation: h5rp_star_fly 1.0s ease-out infinite both;
}

/* ---- 패: 푸른 번짐(610x560) + 어두운 줄(80x138) + 패 글자(266x262) + 비(383x659) ---- */
html.h5l #H5RP_glow
{
    left: 235px;
    top: 320px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 610px;
    height: 560px;
    -webkit-animation: h5rp_fade_in 1.2s ease-out both;
    animation: h5rp_fade_in 1.2s ease-out both;
}
html.h5l #H5RP_lines
{
    left: 384px;
    top: 385px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 80px;
    height: 138px;
    -webkit-animation: h5rp_lines_down 1.2s ease-out both;
    animation: h5rp_lines_down 1.2s ease-out both;
}
html.h5l .h5rp_lose #H5RP_title
{
    left: 409px;
    top: 455px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 266px;
    height: 262px;
    -webkit-animation: h5rp_lose_drop 0.6s ease-out both;
    animation: h5rp_lose_drop 0.6s ease-out both;
}
html.h5l #H5RP_rain
{
    left: 349px;
    top: 290px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 383px;
    height: 659px;
    -webkit-animation: h5rp_fade_in 0.2s ease-out 0.28s both;
    animation: h5rp_fade_in 0.2s ease-out 0.28s both;
}

/* ---- 무승부: 속도선(1080x483) + 무 글자(453x269, 글자는 그림 안 100~352 칸) ---- */
html.h5l #H5RP_draw_bg
{
    left: 0px;
    top: 359px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 1080px;
    height: 483px;
    -webkit-animation: h5rp_fade_in 0.1s ease-out both;
    animation: h5rp_fade_in 0.1s ease-out both;
}
html.h5l .h5rp_draw #H5RP_title
{
    left: 314px;
    top: 466px;	/* 2026-10-15 CEO 지시로 40 위 */
    width: 453px;
    height: 269px;
}

/* ---- 캐릭터 (옛 말풍선 359x274 자리) ---- */
/* 2026-09-22 CEO 지시: 말풍선 그림을 빼고 캐릭터만 보인다 - 캐릭터가 옛 말풍선 칸 전체를 쓴다 */
html.h5l #H5RP_bubble
{
    /* 2026-10-16 CEO 지적: 글자 묶음보다 왼쪽으로 치우쳐 보였다 - 가운데(540)에 맞춰 35.5 오른쪽,
       아래로도 16 내린다 (예전 left 302.5 / top 756, 크기는 2026-10-15 값 그대로) */
    left: 338px;
    top: 772px;
    width: 404px;
    height: 308px;
    -webkit-transform-origin: 12% 100%;
    transform-origin: 12% 100%;
    -webkit-animation: h5rp_bubble_pop 0.35s ease-out 0.65s both;
    animation: h5rp_bubble_pop 0.35s ease-out 0.65s both;
}
html.h5l #H5RP_face
{
    left: 0;
    top: 0;
    width: 404px;
    height: 308px;
    -o-object-fit: contain;
    object-fit: contain;
    object-position: 50% 100%;
    /* 말풍선이 제일 커지는 순간(0.65 + 0.35x0.7)에 터지며 등장 */
    -webkit-transform-origin: 50% 60%;
    transform-origin: 50% 60%;
    -webkit-animation: h5rp_face_burst 0.32s ease-out 0.9s both;
    animation: h5rp_face_burst 0.32s ease-out 0.9s both;
}

/* ---- 금액 줄: 금화(73x68) + 금액 글자, 가로 가운데 ---- */
html.h5l #H5RP_money_row
{
    position: absolute;
    left: 0;
    top: 1136px;
    width: 1080px;
    height: 84px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
/* 연습 대전: 금화가 오가지 않아 금화 아이콘을 뺀다 (2026-09-26 CEO 지시) */
html.h5l #H5RP_money_row.h5rp_practice #H5RP_gold { display: none !important; }
html.h5l #H5RP_root #H5RP_gold
{
    position: static;
    width: 73px;
    height: 68px;
    margin-right: 26px;
}
/* 금액 글자: 위아래 그라데이션(가이드처럼 연노랑 -> 주황, 패는 흰색 -> 회색) + 아래 그림자 */
html.h5l #H5RP_money
{
    font-size: 72px;
    font-weight: 900;
    line-height: 84px;
    white-space: nowrap;
    color: #ffd23a;
    background: -webkit-linear-gradient(top, #fff6c2 0%, #ffd23a 48%, #f39a00 100%);
    background: linear-gradient(to bottom, #fff6c2 0%, #ffd23a 48%, #f39a00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(0 4px 2px rgba(60, 30, 0, 0.75));
    filter: drop-shadow(0 4px 2px rgba(60, 30, 0, 0.75));
}
html.h5l .h5rp_lose #H5RP_money
{
    color: #cfcfcf;
    background: -webkit-linear-gradient(top, #ffffff 0%, #d2d2d2 50%, #8f8f8f 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #d2d2d2 50%, #8f8f8f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.8));
}
html.h5l #H5RP_money.h5rp_practice
{
    background: none;
    -webkit-text-fill-color: #7cfc00;
    color: #7cfc00;
}

/* 점수식 / 수수료 / 안내 줄 */
html.h5l #H5RP_formula,
html.h5l #H5RP_tax,
html.h5l #H5RP_law
{
    position: absolute;
    left: 40px;
    width: 1000px;
    text-align: center;
    white-space: nowrap;
}
html.h5l #H5RP_formula
{
    top: 1227px;
    height: 60px;
    line-height: 60px;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.85);
}
html.h5l #H5RP_tax
{
    top: 1292px;
    height: 44px;
    line-height: 44px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
    color: #c9a64e;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}
html.h5l #H5RP_law
{
    top: 1338px;
    height: 44px;
    line-height: 44px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 600;
    color: #d6d6d6;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

/* ---- 승점 줄(782x70) ---- */
html.h5l #H5RP_rank
{
    position: absolute;
    left: 149px;
    top: 1376px;
    width: 782px;
    height: 70px;
    background: url(../image/2_game/h5p/result/result_scorebg.png) no-repeat 0 0;
    background-size: 782px 70px;
    font-size: 44px;
    font-weight: 800;
    line-height: 70px;
    color: #3d2a06;
}
html.h5l #H5RP_rank_label
{
    position: absolute;
    left: 74px;
    top: 0;
}
html.h5l #H5RP_rank_value
{
    position: absolute;
    right: 26px;
    top: 0;
    white-space: nowrap;
}
html.h5l #H5RP_rank .h5rp_up { color: #1e7fe0; }
html.h5l #H5RP_rank .h5rp_down { color: #e53b2b; }

/* ---- 버튼: 나가기(회색) / 한 판 더(초록) 318x85, 자세히(324x69) ---- */
html.h5l #H5RP_root .h5rp_btn,
html.h5l #H5RP_more
{
    pointer-events: auto;
    cursor: pointer;
}
html.h5l .h5rp_btn
{
    position: absolute;
    top: 1474px;
    width: 318px;
    height: 85px;
    line-height: 77px;
    box-sizing: border-box;
    border-radius: 43px;
    text-align: center;
    font-size: 50px;
    font-weight: 900;
    color: #ffffff;
    overflow: hidden;
}
html.h5l .h5rp_btn::before
{
    content: '';
    position: absolute;
    left: 24px;
    top: 10px;
    width: 30px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}
html.h5l .h5rp_btn:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}
html.h5l .h5rp_btn_gray
{
    left: 202px;	/* 2026-10-12 CEO 지시: 두 버튼 사이를 세로와 같은 40 으로 (묶음 가운데 540 은 그대로) */
    background: -webkit-linear-gradient(top, #f4f4f4 0%, #d4d4d4 55%, #b9b9b9 100%);
    background: linear-gradient(to bottom, #f4f4f4 0%, #d4d4d4 55%, #b9b9b9 100%);
    border: 4px solid #8e8e8e;
    text-shadow: 0 3px 0 #35383a, 2px 0 0 #35383a, -2px 0 0 #35383a, 0 -2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
html.h5l .h5rp_btn_green
{
    left: 560px;
    background: -webkit-linear-gradient(top, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%);
    background: linear-gradient(to bottom, #a9ec8e 0%, #5cc64a 55%, #3fa632 100%);
    border: 4px solid #2f8a28;
    text-shadow: 0 3px 0 #2a7a22, 2px 0 0 #2a7a22, -2px 0 0 #2a7a22, 0 -2px 0 #2a7a22, -1.414px -1.414px 0 #2a7a22, -1.414px 1.414px 0 #2a7a22, 1.414px -1.414px 0 #2a7a22, 1.414px 1.414px 0 #2a7a22;
}
html.h5l .h5rp_btn_center
{
    left: 381px;
}

/* 돈이 없어 회색으로 막힌 '한 판 더' (2026-10-20 CEO 지적: 나가기와 테두리 색이 다르다).
   회색 처리는 filter: grayscale 로만 해서 글자 테두리는 초록(#2a7a22) 그대로였고,
   회색이 되어도 나가기(#35383a)보다 밝게 보였다 - 나가기와 같은 색으로 맞춘다.
   회색 표시(filter·opacity)는 S_gameresult_portrait.js 가 그대로 건다 */
html.h5l .h5rp_btn.h5rp_btn_disabled
{
    text-shadow: 0 3px 0 #35383a, 2px 0 0 #35383a, -2px 0 0 #35383a, 0 -2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
html.h5l #H5RP_more
{
    position: absolute;
    /* 2026-10-15 CEO 지시: 점수 줄 옆에 두었던 것을 세로모드처럼 오른쪽 버튼 아래로 되돌린다.
       오른쪽 버튼(560~878) 가로 가운데 = 719 -> 왼끝 557 */
    left: 557px;
    top: 1584px;
    width: 324px;
    height: 69px;
    background: url(../image/2_game/h5p/result/result_more.png) no-repeat 0 0;
    background-size: 324px 69px;
}
/* 버튼이 나가기 하나뿐이면 자세히도 나가기와 같은 가로 가운데(540)에 둔다 */
html.h5l #H5RP_more.h5rp_more_center
{
    left: 378px;
}
html.h5l #H5RP_more span
{
    position: absolute;
    left: 80px;
    width: 220px;
    top: 0;
    height: 69px;
    line-height: 69px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #f2f2f2;
}
html.h5l #H5RP_more:active
{
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

/* 등장 순서: 금액 -> 점수식 -> 안내 -> 승점 -> 버튼 -> 자세히 */
html.h5l .h5rp_fade
{
    -webkit-animation: h5rp_rise 0.3s ease-out both;
    animation: h5rp_rise 0.3s ease-out both;
}
html.h5l .h5rp_d1 { -webkit-animation-delay: 0.80s; animation-delay: 0.80s; }
html.h5l .h5rp_d2 { -webkit-animation-delay: 0.92s; animation-delay: 0.92s; }
html.h5l .h5rp_d3 { -webkit-animation-delay: 1.02s; animation-delay: 1.02s; }
html.h5l .h5rp_d4 { -webkit-animation-delay: 1.12s; animation-delay: 1.12s; }
html.h5l .h5rp_d5 { -webkit-animation-delay: 1.20s; animation-delay: 1.20s; }
html.h5l .h5rp_d6 { -webkit-animation-delay: 1.28s; animation-delay: 1.28s; }

/* ---- 점수 상세 창(788x862): 내정보 팝업과 같은 머리띠 조각 조합, 화면 아래 129 에 붙인다 ---- */
html.h5l #H5RP_detail
{
    position: absolute;
    left: 146px;
    bottom: 129px;
    width: 788px;
    height: 862px;
    z-index: 30;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    /* 나타나고 사라지는 연출을 내정보 팝업과 같게 한다 (2026-09-21 CEO 지시).
       키프레임은 css/h5_portrait_myinfo.css 의 myi_pop_in / myi_pop_out 을 그대로 쓴다 */
    -webkit-animation: myi_pop_in 0.33s ease-out both;
    animation: myi_pop_in 0.33s ease-out both;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
/* 닫을 때: 살짝 커졌다가 작아지며 사라진다 (S_GAMERESULT_PORTRAIT.show_detail 이 붙인다, 길이 H5RP_DETAIL_CLOSE_MS) */
html.h5l #H5RP_detail.H5RP_detail_closing
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
html.h5l #H5RP_detail_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
}
html.h5l #H5RP_detail_close
{
    position: absolute;
    right: 0;
    top: 0;
    width: 110px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 26px 22px;
    background-size: 57px 56px;
    cursor: pointer;
}
html.h5l #H5RP_detail_close:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 항목 줄: 칩(159x52) + 값. 왼쪽 칩 left 33 / 오른쪽 칩 left 417, 줄 간격 59 */
html.h5l .h5rp_row
{
    position: absolute;
    width: 360px;
    height: 52px;
}
html.h5l .h5rp_side0 { left: 33px; }
html.h5l .h5rp_side1 { left: 417px; }
html.h5l .h5rp_p1.h5rp_r0 { top: 117px; }
html.h5l .h5rp_p1.h5rp_r1 { top: 176px; }
html.h5l .h5rp_p1.h5rp_r2 { top: 235px; }
html.h5l .h5rp_p1.h5rp_r3 { top: 295px; }
html.h5l .h5rp_p1.h5rp_r4 { top: 353px; }
html.h5l .h5rp_p2.h5rp_r0 { top: 520px; }
html.h5l .h5rp_p2.h5rp_r1 { top: 580px; }
html.h5l .h5rp_p2.h5rp_r2 { top: 640px; }
html.h5l .h5rp_p2.h5rp_r3 { top: 698px; }
html.h5l .h5rp_chip
{
    position: absolute;
    left: 0;
    top: 0;
    width: 159px;
    height: 52px;
    line-height: 50px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -2px;
    color: #ffffff;
    background: url(../image/2_game/h5p/result/result_popup_gray.png) no-repeat 0 0;
    background-size: 159px 52px;
    text-shadow: 0 2px 0 #5f5f5f, 2px 0 0 #5f5f5f, -2px 0 0 #5f5f5f, 0 -2px 0 #5f5f5f;
}
html.h5l .h5rp_chip.h5rp_chip_on
{
    background-image: url(../image/2_game/h5p/result/result_popup_red.png);
    text-shadow: 0 2px 0 #a3261b, 2px 0 0 #a3261b, -2px 0 0 #a3261b, 0 -2px 0 #a3261b;
}
html.h5l .h5rp_val
{
    position: absolute;
    left: 176px;
    top: 0;
    width: 160px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #7a4a12;
}

/* 기본점수 소계(720x48) / 점선 / 합계식 */
html.h5l #H5RP_detail_sub
{
    position: absolute;
    left: 34px;
    top: 432px;
    width: 720px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #1c4fa3;
    background: url(../image/2_game/h5p/result/result_popup_blue_long.png) no-repeat 0 0;
    background-size: 720px 48px;
}
html.h5l #H5RP_detail_line
{
    position: absolute;
    left: 6px;
    right: 6px;
    top: 500px;
    height: 0;
    border-top: 3px dashed #e9b949;
}
html.h5l #H5RP_detail_sum
{
    position: absolute;
    left: 35px;
    top: 780px;
    width: 720px;
    height: 48px;
    font-size: 36px;
    font-weight: 800;
    line-height: 48px;
}
html.h5l #H5RP_detail_sum span
{
    position: absolute;
    top: 0;
    height: 48px;
    text-align: center;
    white-space: nowrap;
}
html.h5l #H5RP_sum_score
{
    left: 0;
    width: 188px;
    color: #1c4fa3;
    background: url(../image/2_game/h5p/result/result_popup_blue_short.png) no-repeat 0 0;
    background-size: 188px 48px;
}
html.h5l #H5RP_sum_x,
html.h5l #H5RP_sum_eq
{
    width: 32px;
    color: #7a4a12;
}
html.h5l #H5RP_sum_x { left: 186px; }
html.h5l #H5RP_sum_eq { left: 409px; }
html.h5l #H5RP_sum_bae
{
    left: 220px;
    width: 188px;
    color: #8a5a00;
    background: url(../image/2_game/h5p/result/result_popup_yellow_short.png) no-repeat 0 0;
    background-size: 188px 48px;
}
html.h5l #H5RP_sum_total
{
    left: 452px;
    width: 270px;
    color: #8a5a00;
    background: url(../image/2_game/h5p/result/result_popup_yellow_long.png) no-repeat 0 0;
    background-size: 270px 48px;
}

@-webkit-keyframes h5rp_fade_in { from { opacity: 0; } to { opacity: 1; } }
@keyframes h5rp_fade_in { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes h5rp_rise { from { opacity: 0; -webkit-transform: translateY(24px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes h5rp_rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes h5rp_win_drop { from { opacity: 0; -webkit-transform: scale(2.3); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_win_drop { from { opacity: 0; transform: scale(2.3); } to { opacity: 1; transform: scale(1); } }
@-webkit-keyframes h5rp_lose_drop { 0% { opacity: 0; -webkit-transform: translateY(-90px); } 45% { opacity: 1; -webkit-transform: translateY(0); } 70% { -webkit-transform: translateY(-22px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes h5rp_lose_drop { 0% { opacity: 0; transform: translateY(-90px); } 45% { opacity: 1; transform: translateY(0); } 70% { transform: translateY(-22px); } 100% { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes h5rp_lines_down { from { opacity: 0; -webkit-transform: translateY(-80px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes h5rp_lines_down { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes h5rp_rays_in { from { opacity: 0; -webkit-transform: scale(0.3) rotate(-120deg); } to { opacity: 1; -webkit-transform: scale(1) rotate(0deg); } }
@keyframes h5rp_rays_in { from { opacity: 0; transform: scale(0.3) rotate(-120deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
@-webkit-keyframes h5rp_star_fly
{
    0%   { opacity: 0; -webkit-transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; -webkit-transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(300deg); }
    100% { opacity: 0; -webkit-transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * 1.15)) scale(0.5) rotate(380deg); }
}
@keyframes h5rp_star_fly
{
    0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(300deg); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * 1.15)) scale(0.5) rotate(380deg); }
}
@-webkit-keyframes h5rp_bubble_pop { 0% { opacity: 0; -webkit-transform: scale(0); } 70% { opacity: 1; -webkit-transform: scale(1.12); } 100% { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_bubble_pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@-webkit-keyframes h5rp_face_burst { 0% { opacity: 0; -webkit-transform: scale(0); } 60% { opacity: 1; -webkit-transform: scale(1.18); } 100% { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_face_burst { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@-webkit-keyframes h5rp_rays_pulse { 0%, 100% { -webkit-transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.06); opacity: 0.82; } }
@keyframes h5rp_rays_pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.82; } }
@-webkit-keyframes h5rp_twinkle { 0%, 100% { opacity: 0; -webkit-transform: scale(0.4); } 45% { opacity: 1; -webkit-transform: scale(1.1) rotate(20deg); } }
@keyframes h5rp_twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
@-webkit-keyframes h5rp_pop { from { opacity: 0; -webkit-transform: scale(0.3); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes h5rp_pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }

/* ================= [가로 배치] 1280x720 판 ================= */

/* 새 결과 화면: 세로 설계(1080 폭, 내용 y 330~1653)를 줄여 판 가운데에 둔다.
   2026-10-12 CEO 지시로 캐릭터를 타이틀 아래로 내리면서(세로 10-06 개편과 같게) 세로 배치가 330 길어졌다 -
   0.62 로는 아래쪽(버튼·자세히)이 잘려 0.52 로 줄인다: 1080x1323 -> 562x688 (가로 판 720 안에 든다).
   위 [자동 복사] 구역의 자리값은 세로와 똑같이 두므로, 세로를 고치면 가로도 같이 맞는다 */
html.h5l #H5RP_root
{
    left: 640px;
    /* 2026-10-12 CEO 지적(2차): 아직 아래가 잘린다. S_gameresult_portrait.js 의 layout() 이 인라인으로 top:0 을
       넣어 여기 적은 값이 통째로 무시되고 있었다 - !important 로 덮는다.
       2026-10-12 CEO 지시로 자세히가 줄쌓기에서 빠져(점수 줄 옆으로) 제일 아랫변이 1598(버튼 줄 1474+85+39) 이 되었다 -
       그만큼 글자를 키운다: 1598 x 0.56 - 183 = 712 로 판(720) 안에 든다 */
    top: -183px !important;	/* 내용 윗변(330) 이 화면 2 에 오도록: 2 - 330 x 0.56 */
    width: 1080px;
    height: 1700px;
    -webkit-transform: translateX(-50%) scale(0.56);
    transform: translateX(-50%) scale(0.56);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

/* 점수 상세 창은 결과 판(S_GAMERESULT_div)에 바로 붙으므로 따로 줄여 가운데에.
   등장 연출이 transform(scale)을 쓰므로 transform 대신 zoom 으로 줄인다 (zoom 은 left/top 에도 곱해진다:
   화면 왼쪽 (1280 - 788x0.62)/2 = 396 -> 396/0.62 = 638, 화면 위 93 -> 150) */
html.h5l #H5RP_detail
{
    /* 2026-10-12 CEO 지시: 가운데가 아니라 오른쪽에 띄운다.
       2026-10-19 CEO 지적(글자가 너무 작다): 0.48 -> 0.62 로 키운다 (788x862 -> 489x534).
       오른쪽 끝에서 20 띄우면 화면 왼쪽 771 에서 시작하고, 세로는 판 가운데(93)에 둔다.
       zoom 은 left/top 에도 곱해지므로 적는 값은 화면값 / 0.62 다 */
    left: 1244px;		/* 화면 왼쪽 771 -> 771/0.62 */
    top: 150px;			/* 화면 위 (720 - 862x0.62)/2 = 93 -> 93/0.62 */
    bottom: auto;
    zoom: 0.62;
}

/* 뒤 게임판 어둡게: 가로 판에는 세로의 캔버스 딤이 없다. 결과 판 앞에 판 전체(1280x720) 반투명 검정을 한 겹 깐다 (결과 화면 층 z 20 바로 아래) */
html.h5l #S_GAMERESULT_div.h5rp_on::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    background: rgba(0, 0, 0, 0.55);
    z-index: 19;
    pointer-events: none;
}

/* 새 결과 화면이 켜지면 원본 결과 판 글자/버튼은 숨긴다 (세로와 같은 규칙) */
html.h5l #S_GAMERESULT_div.h5rp_on #gr_div,
html.h5l #S_GAMERESULT_div.h5rp_on #gr_detail,
html.h5l #S_GAMERESULT_div.h5rp_on #gr_detail_p3
{
    visibility: hidden !important;
}

/* 상황 캐릭터 말풍선: 오른쪽 상대 정보(위)와 '나가기' 버튼(아래) 사이 빈 자리. 0.52배로 줄인 층 안에서
   내 차례 그림은 층 아래끝(내 정보 윗변), 상대 차례 그림은 층 위끝(상대 정보 아랫변)에 붙인다 */
html.h5l #h5l_sit_layer
{
    /* 2026-09-28 CEO 지시: 세로와 같이 말풍선 없이 캐릭터를 크게 띄운다.
       층을 판 전체(1280x720)로 두고 자리는 h5_landscape_polish.js 의 H5LP_SIT_FREE 가 정한다 */
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    width: 1280px;
    height: 720px;
    -webkit-transform: none;
    transform: none;
    /* 2026-10-16 CEO 지적: 왼쪽 캐릭터가 내가 먹은 패 이펙트를 가렸다 -
       이펙트 칸(#h5pgfx_root, 30) 바로 아래로 내린다 (바닥패·먹은 패보다는 여전히 위) */
    z-index: 29;
    pointer-events: none;
}
/* 말풍선 없는 큰 캐릭터 (세로의 h5pg_sit_free 와 같은 규칙) */
html.h5l #h5pg_sit_fx.h5pg_sit_free,
html.h5l #h5pg_sit_fx.h5pg_sit_free.h5pg_sit_you
{
    right: auto;
    bottom: auto;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
html.h5l #h5pg_sit_fx.h5pg_sit_free::before
{
    display: none;
}
html.h5l #h5pg_sit_fx.h5pg_sit_free #h5pg_sit_box
{
    -webkit-align-items: center;
    align-items: center;
}

/* ============ 9. 팝업 등장/퇴장 연출 (2026-09-28 CEO 지시: 가로 판에도 적용) ============
   세로와 같은 길이(등장 0.33초 / 퇴장 0.23초). 키프레임은 css/h5_portrait_myinfo.css 의 것을 그대로 쓴다 */
html.h5l #H5RP_detail
{
    -webkit-animation: myi_pop_in 0.33s ease-out both;
    animation: myi_pop_in 0.33s ease-out both;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
html.h5l #H5RP_detail.H5RP_detail_closing
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
/* 뒤를 덮는 딤도 세로와 같은 길이로 천천히 들어온다 (0.25초) */
html.h5l #S_GAMERESULT_div.h5rp_on::before
{
    -webkit-animation: h5p_dim_fade_in 0.25s ease-out both;
    animation: h5p_dim_fade_in 0.25s ease-out both;
}

/* ============ 8. 상대/내 닉네임 12자 (2026-09-28 CEO 지시: 가로 판에도 적용) ============
   이름 칸 오른쪽을 프로필 사진(x 1212)이 덮어 176 으로 넓혀도 뒤가 가려졌다.
   보이는 폭(115)까지만 쓰고, 글자를 줄여도 넘치면 끝을 ... 로 줄인다 (2026-09-29 CEO 지시)
   (줄이는 값은 h5_landscape_polish.js 가 잰 뒤 넣는다) */
html.h5l #user_you_name,
html.h5l #user_i_name
{
    width: 115px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 내 차례 손패 효과 끄기 (2026-09-29 CEO 지시: 세로와 같게).
   원본 모바일 효과(Main.css)가 먹을 수 있는 패(.h5_glow)에 노란 빛 + 6 솟음, 첫 탭으로 고른 패(.h5_lifted)에 22 솟음을 줘
   가로 판에서는 그 패만 커져 보였다. 화살표 표시는 그대로 둔다 */
html.h5l .h5_glow,
html.h5l .h5_lifted
{
    box-shadow: none !important;
    margin-top: 0 !important;
}
/* 손패를 누를 때 96% 로 줄이지 않고 어둡게만 (세로와 같게) */
html.h5l #area_i_slot .h5_pressed
{
    -webkit-transform: none;
    transform: none;
}

/* ============ 3·4. 새 이펙트 2차 (2026-09-28 CEO 지시: 가로 판에도 적용) ============
   표시등/배너 그림은 1080 기준이라 가로 판(1280x720)에서는 0.55 로 줄인다.
   자리는 h5_landscape_polish.js 의 H5PGFX_LAND 가 판 좌표로 정한다 */
html.h5l #h5pgfx_root
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    pointer-events: none;
    z-index: 30;
}

/* 예감/비상 배너만 올려 두는 층 (2026-10-20 CEO 지시: 한 번 뜨고 사라지는 이펙트라
   먹은 패 점수 배지(z 31)보다 위에 보여야 한다). 자리·크기는 이펙트 층과 같다 */
html.h5l #h5pgfx_top
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    pointer-events: none;
    z-index: 32;
}
html.h5l .h5pgfx_img
{
    position: absolute;
    display: none;
    pointer-events: none;
    -webkit-transform: scale(0.55);
    transform: scale(0.55);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
/* 오광·고도리·단 완성 큰 연출: 판 한가운데.
   2026-10-16 CEO 지적으로 0.41 -> 판 높이에 꽉 차는 0.664 로 키웠다.
   원본 그림은 1080x1084 라 720 짜리 판에는 100% 로 들어가지 않는다 - 들어가는 가장 큰 크기다 */
html.h5l #h5pgfx_big
{
    position: absolute;
    display: none;
    left: 281.5px;
    top: 0;
    width: 717px;
    height: 720px;
    pointer-events: none;
    /* 2026-10-19 CEO 지적: 오광 연출이 오른쪽 정보 칸·미션·나가기 버튼에 가렸다.
       이 둘은 H5LP.move_big_out 이 판 밖 칸(#div_body)으로 옮겨 두므로, 거기 있는
       UI(11~13 / 미션 등장 1500)보다 위 번호를 준다. 판 밖 덮개(2000)·선 결정 층(3000)보다는 아래 */
    z-index: 1901;	/* 딤(1900) 바로 위 */
}
html.h5l #h5pgfx_big_dim
{
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    /* 2026-10-12 CEO 지적: 단 완성 연출 때 먹은 패 점수 상자(31)·손패(33)가 딤 위로 떠 있었다 - 딤을 그 위로.
       이 번호가 살려면 딤이 이펙트 칸(#h5pgfx_root, z 30) 밖에 있어야 한다 -
       h5_landscape_polish.js 의 H5LP.move_big_out 이 판 밖 칸(#div_body)으로 옮겨 준다 */
    z-index: 1900;
}

/* 단 완성 옛 연출(딤 + 패 여러 장 + 글자)은 가로에서 쓰지 않는다 (2026-10-19 CEO 지적:
   오광 연출 안에 이미 광 패가 그려져 있는데 뒤에 큰 패 그림이 또 떴다).
   다섯 가지 모두 새 큰 연출(#h5pgfx_big)이 대신한다. 감추는 일은 h5_portrait_game.js 의
   h5pg_dan_hide 가 세로·가로 모두에서 하고, 이 규칙은 그 표가 늦게 붙는 길까지 막는 덧문이다 */
html.h5l #dan_ani_div
{
    visibility: hidden !important;
}
/* 가로 판 원본 표시등(led_*)은 새 표시등이 대신하므로 감춘다 (세로와 같은 목록) */
html.h5l #get_i_KW_info, html.h5l #get_i_SI_info,
html.h5l #get_i_DI_info1, html.h5l #get_i_DI_info2, html.h5l #get_i_DI_info3, html.h5l #get_i_PI_info,
html.h5l #get_you_KW_info, html.h5l #get_you_SI_info,
html.h5l #get_you_DI_info1, html.h5l #get_you_DI_info2, html.h5l #get_you_DI_info3, html.h5l #get_you_PI_info
{
    display: none !important;
}

/* ============ 6. 선 결정 연출 (2026-09-28 CEO 지시: 가로 판에도 적용) ============
   후공 쪽은 어둡게, 선공 프로필은 빛나게, 선을 잡은 쪽 프로필에 '선' 도장.
   자리는 h5_portrait_sun.js 가 프로필 위치를 재서 잡는다. 가로 프로필이 작아 도장만 56px 로 줄인다 */
html.h5l .h5p_sun_dim
{
    -webkit-filter: brightness(0.42) saturate(0.55);
    filter: brightness(0.42) saturate(0.55);
    -webkit-transition: -webkit-filter 220ms ease-out;
    transition: filter 220ms ease-out;
}
html.h5l .h5p_sun_glow
{
    border-radius: 50%;
    -webkit-animation: h5p_sun_glow_pulse 0.9s ease-in-out infinite alternate;
    animation: h5p_sun_glow_pulse 0.9s ease-in-out infinite alternate;
}
html.h5l #h5p_sun_stamp
{
    position: absolute;
    width: 40.25px;	/* 인게임 선(先) 배지와 같은 크기 (2026-10-15 세로 비로 축소) */
    height: 40.25px;
    z-index: 205;
    pointer-events: none;
    display: none;
    -webkit-filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.5));
    /* 한가운데 고정 - 커졌다 작아져도 자리가 흔들리지 않는다 */
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
html.h5l #h5p_sun_stamp.h5p_sun_on
{
    display: block;
    -webkit-animation: h5p_sun_slam 0.34s cubic-bezier(0.25, 1.6, 0.4, 1) both, h5p_sun_shrink 0.35s ease-in 0.34s forwards;
    animation: h5p_sun_slam 0.34s cubic-bezier(0.25, 1.6, 0.4, 1) both, h5p_sun_shrink 0.35s ease-in 0.34s forwards;
}

/* 새 알람시계 숫자 (2026-09-28 CEO 지시: 가로 판에도 적용). 시계 그림 자리는 원본이 정한다 */
html.h5l #h5pg_count_num
{
    display: none;
    position: absolute;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 58px;
    font-weight: 900;
    color: #2b1608;
    -webkit-text-stroke: 2px #2b1608;
    pointer-events: none;
    z-index: 210;
}

/* 네트워크 턴 대기 게이지(노란 막대): 세로처럼 가로 판에서도 감춘다 (2026-09-28 CEO 지적).
   그리기만 막고 WATCHDOG/진동 등 동작은 그대로다 */
html.h5l #h5_turn_gauge
{
    display: none !important;
}

/* 판 양옆 여백 채우기 (2026-09-28 CEO 지시). 자리/크기는 h5_landscape_polish.js 가 판을 재서 정한다 */
/* 판 양옆 여백 칸. 판(#div_body)보다 뒤에 그린다 (z-index -1, 2026-09-29 CEO 지적).
   예전에는 판 위에 그려져, 화면 크기가 바뀌는 동안(첫 터치의 전체화면/가로 잠금 등) 칸이 아직 옛 자리에 있으면
   판 가장자리를 검게 덮었다가 다음 번 재는 때 사라져 화면이 번쩍거렸다.
   뒤에 그리면 자리가 늦게 따라와도 판을 가리지 않는다 (판 밖은 어차피 검정 바탕이다) */
.h5lp_side
{
    position: fixed;
    display: none;
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: -1;
    -webkit-transform-origin: 0 0;	/* 눕혀 그린 판에서는 칸도 같이 눕힌다 (h5_landscape_polish.js place_side) */
    transform-origin: 0 0;
}

/* 고/스톱 팝업 세 번째 줄 '(내가 보유한 금액까지만 획득 가능!)' 숨김 (2026-09-29 CEO 지시: 컨셉 변경으로 이 안내는 쓰지 않는다).
   원본(S_game_popup.js)은 정산 파일이라 건드리지 않고 이 줄만 가린다 */
html.h5l #ga_popup_txt3
{
    display: none !important;
}


/* ============ 선 결정 (S_SELECTSUN): 검정 바탕 대신 판 위에 딤 (2026-09-29 CEO 지시: 세로처럼 판이 다 그려진 위에 팝업) ============
   원본(S_selectsun.js)이 인라인으로 background:black 을 넣는다 -> 반투명으로 덮어 판(#S_GAME_div)이 비치게 한다 */
html.h5l #S_SELECTSUN_div
{
    background: rgba(0, 0, 0, 0.45) !important;
}

/* 선 고르는 패를 둘러싸던 노란 포커스 줄은 리모컨용이라 뺀다 (2026-10-14 CEO 지시: 모바일 터치라 필요 없다) */
html.h5l #SU_card_focus
{
    display: none !important;
}

/* ============ 매칭 대기 (S_WAIT): 세로처럼 문구 상자 + 연습 게임 / 나가기 (2026-09-29 CEO 지시) ============
   판(1280x720) 위에 안내만 띄운다. 글자·동작은 h5_landscape_polish.js H5LP.install_wait */
html.h5l #S_WAIT_div
{
    z-index: 20;
    pointer-events: none;	/* 판은 터치 통과, 버튼만 받는다 */
}
html.h5l #wa_back, html.h5l #wa_ok { pointer-events: auto; }

html.h5l #wa_msg
{
    left: 340px !important;
    width: 600px !important;
    top: 176px !important;
    padding: 26px 0 18px 0 !important;
    font-size: 30px !important;
    line-height: 42px !important;
    border-radius: 18px !important;
}
html.h5l #wa_msg .h5pg_wait_dots
{
    height: 40px;
    margin-top: 8px;
    text-align: center;
    line-height: 0;
    font-size: 0;
}
html.h5l #wa_msg .h5pg_wait_dots i
{
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 12px 8px 0 8px;
    border-radius: 50%;
    background: #f6d7a7;
    -webkit-animation: h5lp_dot_hop 1.2s ease-in-out infinite;
    animation: h5lp_dot_hop 1.2s ease-in-out infinite;
}
html.h5l #wa_msg .h5pg_wait_dots i:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
html.h5l #wa_msg .h5pg_wait_dots i:nth-child(3) { -webkit-animation-delay: 0.3s;  animation-delay: 0.3s; }
html.h5l #wa_msg .h5pg_wait_gap { height: 0; }
@-webkit-keyframes h5lp_dot_hop
{
    0%, 60%, 100% { -webkit-transform: translateY(0); opacity: 0.55; }
    30%           { -webkit-transform: translateY(-10px); opacity: 1; }
}
@keyframes h5lp_dot_hop
{
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30%           { transform: translateY(-10px); opacity: 1; }
}

/* 연습 게임(원래 OK): 상자 아래 왼쪽 / 나가기(원래 좌상단 ‹): 상자 아래 오른쪽. 둘이 가운데 정렬 (375~625 / 655~905) */
html.h5l #wa_ok
{
    left: 375px !important;
    top: 352px !important;
    width: 250px !important;
    height: 74px !important;
    line-height: 68px !important;
    box-sizing: border-box !important;
    font-size: 32px !important;
    border-radius: 16px !important;
}
html.h5l #wa_back
{
    left: 655px !important;
    top: 352px !important;
    width: 250px !important;
    height: 74px !important;
    line-height: 68px !important;
    font-size: 32px !important;
    font-weight: 800;
    color: #442509 !important;
    text-align: center !important;
    border-radius: 16px !important;
    border: 3px solid #8a7550 !important;
    background: linear-gradient(#f1ead8, #cdbf9f) !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}

/* ============ 인게임 트로피 (2026-10-12 CEO 지시: 세로에서 고친 것을 가로에도) ============
   그림·띄우는 조건은 세로 함수(h5_portrait_game.js h5pg_draw_hud_trophy)를 그대로 쓰고,
   자리/크기만 여기서 가로 판(1280x720) 기준으로 잡는다 (h5_landscape_polish.js H5LP.install_trophy).
   자리 고르기: 오른쪽 정보 칸(x 1027~) 왼쪽의 빈 띠 x 948~1018 을 쓴다.
     - 먹은 패 줄(상대 y 4~79 / 나 y 454~529, 피가 x 1041 까지 늘어난다) 과 점수 칸(x 924~990,
       상대 y 128~164 / 나 y 369~405) 을 모두 피한 자리다.
     - 상대는 제 점수 아래(172), 나는 내 점수 위(287) - 판 가운데 줄(360)을 기준으로 각자 제 쪽에 선다.
   원본(S_game.js draw_medal)이 인라인으로 자리·크기를 넣으므로 전부 !important 로 덮는다 */
html.h5l #user_you_medal,
html.h5l #user_i_medal
{
    position: absolute !important;
    left: -79px !important;		/* 정보 칸(left 1027) 안 좌표 - 화면에서는 948 */
    width: 70px !important;
    height: 73px !important;
    transform: none !important;
    object-fit: contain !important;	/* 여백 잘라 낸 그림(trophy_fit*) - 다섯 단계가 같은 높이로 보인다 */
    pointer-events: none;
    z-index: 998 !important;		/* 고/스톱 팝업(1000)·그 딤(999)·시계(1001) 보다 아래 */
}
html.h5l #user_you_medal { top: 166px !important; }		/* 칸 top 6 + 166 = 172 */
html.h5l #user_i_medal   { top: -78px !important; }		/* 칸 top 365 - 78 = 287 */

/* 누적 올클리어 횟수는 세로와 같이 보이지 않는다 (2026-10-10 CEO 지시) */
html.h5l #user_you_medalnum,
html.h5l #user_i_medalnum
{
    display: none !important;
}

/* 팝업 딤이 깔린 동안에는 트로피를 그 아래로 (표는 h5pg_sync_trophy_depth 가 달고 뗀다) */
html.h5l.h5pg_trophy_under #user_you_medal,
html.h5l.h5pg_trophy_under #user_i_medal
{
    z-index: 50 !important;
}

/* 미션 창과 함께 '뿅' 사라지는 복제 그림 (세로와 같은 움직임 h5pg_trophy_pop 을 쓴다) */
html.h5l .h5pg_trophy_pop
{
    position: absolute;
    z-index: 998;
    object-fit: contain;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    animation: h5pg_trophy_pop 0.52s ease-in forwards;	/* 움직임 자체는 h5_portrait.css 에 적어 둔 것을 함께 쓴다 */
}

/* ============ 고/스톱 팝업 새 모양 (2026-10-12 CEO 지시: 세로에서 고친 것을 가로에도) ============
   글자와 칸은 javascript/h5_portrait_gs_popup.js 가 세로와 똑같이 넣는다 (h5pg_gs_build_ok 가 가로 판도 받는다).
   안쪽 좌표는 세로(판 931x724)와 같은 값을 그대로 쓰고, 판 하나만 0.72 로 줄여 가로 판(1280x720) 한가운데에 놓는다.
   -> 세로에서 자리를 고치면 여기도 같이 맞는다 (숫자를 두 벌 관리하지 않는다).
   크기를 0.72 로 정한 까닭: 판 위로 튀어나오는 '바닥패보기'(판 안 좌표 -84)와 판 아래로 흘러내리는
   올인 안내(아래끝 876)가 둘 다 720 안에 들어와야 한다 -> 84*S <= 위 <= 720 - 876*S 이므로 S <= 0.75.
   판 크기 931x724 * 0.72 = 670.3 x 521.3 -> 왼쪽 (1280-670.3)/2 = 304.8, 위 75 (바닥패보기 14.5 / 안내 아래끝 706) */
html.h5l #ga_popup_div.h5pg_gs
{
    position: absolute !important;
    left: 305px !important;
    top: 75px !important;
    margin-top: 0 !important;
    width: 931px !important;
    height: 724px !important;
    -webkit-transform: scale(0.72);
    transform: scale(0.72);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    /* 세로와 같은 층: 팝업 1000 > 딤 999 > 트로피 998. 판 오른쪽 트로피(948~1018)가
       팝업 오른끝(975)과 조금 겹치므로 층을 매겨 두지 않으면 트로피가 팝업 위로 올라온다 */
    z-index: 1000 !important;
    -webkit-transition: opacity 0.18s;
    transition: opacity 0.18s;
}

/* 바닥패를 보는 동안: 팝업만 흐려지고 밑에 깔린 바닥패가 비친다 */
html.h5l #ga_popup_div.h5pg_gs_peek
{
    opacity: 0.1 !important;
}
/* 들여다보는 사이 바닥패를 잘못 누르지 않도록 막아 주는 받침 */
html.h5l #h5pg_gs_catch
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background: transparent;
}
/* 팝업 뒤를 어둡게 덮는 판 (팝업과 같은 부모 안 형제라 999 면 팝업만 또렷하다) */
html.h5l #h5pg_gs_dim
{
    position: fixed;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 300%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    -webkit-transition: opacity 0.18s;
    transition: opacity 0.18s;
}
html.h5l #h5pg_gs_dim.h5pg_gs_peek
{
    opacity: 0;
}

/* 옛 '1고' 글씨 그림과 리모컨용 선택 테두리는 새 모양에서 쓰지 않는다 */
html.h5l #ga_popup_div.h5pg_gs #ga_popup_goimg,
html.h5l #ga_popup_div.h5pg_gs #ga_popup_gs_btn_focus
{
    display: none !important;
}

/* 제목: [고] 하시겠습니까? - 판 너비 가운데 */
html.h5l #ga_popup_div.h5pg_gs #ga_popup_txt
{
    left: 0 !important;
    top: 104px !important;
    width: 931px !important;
    height: 112px !important;
    line-height: 112px !important;
    text-align: center !important;
    color: #3b2317 !important;
    font-size: 72px !important;
    font-weight: 800 !important;
}
html.h5l #ga_popup_div.h5pg_gs .h5pg_gs_go
{
    position: relative;
    display: inline-block;
    margin-right: 18px;
    font-size: 118px;
    line-height: 112px;
    font-weight: 900;
    color: #774c27;
    -webkit-text-stroke: 12px #774c27;
}
html.h5l #ga_popup_div.h5pg_gs .h5pg_gs_go::after
{
    content: attr(data-txt);
    position: absolute;
    left: 0;
    top: 0;
    line-height: 112px;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    color: transparent;
    background-image: -webkit-linear-gradient(top, #fff3c4 0%, #ffd94f 48%, #f4ab14 100%);
    background-image: linear-gradient(to bottom, #fff3c4 0%, #ffd94f 48%, #f4ab14 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html.h5l #ga_popup_div.h5pg_gs .h5pg_gs_ask
{
    font-size: 62px;
    font-weight: 800;
}

/* 금화 상자 그림 (금화 + 금액 막대가 한 장) */
html.h5l #ga_popup_div.h5pg_gs #ga_popup_goldimg
{
    left: 87px !important;
    top: 256px !important;
    width: 755px !important;
    height: 229px !important;
}

/* '스톱 시,' - 금화 오른쪽 */
html.h5l #ga_popup_div.h5pg_gs #h5pg_gs_when
{
    position: absolute;
    left: 225px;
    top: 300px;
    width: 520px;
    height: 72px;
    line-height: 72px;
    text-align: left;
    color: #3b2317;
    font-size: 60px;
    font-weight: 700;
}

/* 받을 돈 - 막대 한가운데 */
html.h5l #ga_popup_div.h5pg_gs #ga_popup_txt2
{
    left: 87px !important;
    top: 382px !important;
    width: 755px !important;
    height: 102px !important;
    line-height: 102px !important;
    text-align: center !important;
    font-size: 0 !important;
    color: #fed34c !important;
}
html.h5l #ga_popup_div.h5pg_gs #ga_popup_txt2 b
{
    font-size: 64px;
    font-weight: 800;
    color: #fed34c;
}
html.h5l #ga_popup_div.h5pg_gs #ga_popup_txt2 small
{
    margin-left: 14px;
    font-size: 46px;
    font-weight: 700;
    color: #fff6e2;
}

/* 버튼 두 개: 스톱(회색) / N고(초록) - 세로와 같은 디자이너 그림(337x104) */
html.h5l #ga_popup_div.h5pg_gs #ga_popup_gs_btn1,
html.h5l #ga_popup_div.h5pg_gs #ga_popup_gs_btn2
{
    top: 566px !important;
    width: 337px !important;
    height: 104px !important;
    line-height: 104px !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: -1px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 337px 104px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html.h5l #ga_popup_div.h5pg_gs #ga_popup_gs_btn1
{
    left: 108px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a !important;
}
html.h5l #ga_popup_div.h5pg_gs #ga_popup_gs_btn2
{
    left: 486px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a !important;
}

/* 바닥패보기 버튼 - 판 오른쪽 위에 걸친다 (그림 원본 222x150 그대로) */
html.h5l #ga_popup_div.h5pg_gs #h5pg_gs_peek_btn
{
    position: absolute;
    left: 681px;
    top: -84px;
    width: 222px;
    height: 150px;
    cursor: pointer;
}

/* ---- 흔들기 / 쌍피 확인 팝업 (h5_portrait_gs_popup.js 가 h5pg_yn 을 단다, 2026-10-12 CEO 지시) ----
   이 팝업은 판을 키우지 않고 원본 크기(542x411) 그대로 쓴다 - 세로 값(판 813x617)의 2/3 로 적는다.
   옛 갈색 버튼을 고/스톱 팝업과 같은 디자이너 그림으로 바꾸고 진행(예)을 오른쪽에 둔다 */
html.h5l #ga_popup_div.h5pg_yn #ga_popup_gs_btn1,
html.h5l #ga_popup_div.h5pg_yn #ga_popup_gs_btn2
{
    top: 319px !important;
    width: 225px !important;
    height: 69px !important;
    line-height: 69px !important;
    font-size: 31px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: -1px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 225px 69px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* btn1 = 예(진행) -> 오른쪽 초록 / btn2 = 아니오 -> 왼쪽 회색 */
html.h5l #ga_popup_div.h5pg_yn #ga_popup_gs_btn1
{
    left: 281px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a !important;
}
html.h5l #ga_popup_div.h5pg_yn #ga_popup_gs_btn2
{
    left: 36px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a !important;
}
/* 리모컨 시절 노란 테두리 그림은 새 버튼과 맞지 않아 쓰지 않는다 */
html.h5l #ga_popup_div.h5pg_yn #ga_popup_gs_btn_focus
{
    display: none !important;
}

/* ============ 올인 안내 말풍선 (2026-10-12 CEO 지시: 세로에서 고친 것을 가로에도) ============
   '스톱 시 받을 돈 > 상대가 가진 돈' 일 때만 뜬다. 글자는 h5_portrait_allin_warn.js 가 넣고
   자리는 스톱 단추 아랫변을 읽어 정한다. 고/스톱 팝업 안이라 판과 함께 0.8 로 줄어든다 - 값은 세로와 같다 */
html.h5l #ga_popup_txt3.h5pg_allin
{
    display: block !important;
    left: 11px !important;
    top: 396px;			/* 실제 자리는 h5_portrait_allin_warn.js 가 단추를 재어 넣는다 */
    width: 620px !important;
    height: auto !important;
    padding: 15px 12px 17px !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #7a2a22 !important;
    text-align: center !important;
    background: rgba(255, 252, 245, 0.96) !important;
    border: 2px solid #e23b2e !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}
html.h5l #ga_popup_txt3.h5pg_allin b
{
    display: block;
    font-size: 42px;
    color: #e01b0c;
}
html.h5l #ga_popup_txt3.h5pg_allin small
{
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #b3291d;
}
/* 말풍선 꼬리 - 바로 위 스톱 단추를 가리킨다 (단추 left 108 + 폭 337 의 절반 - 말풍선 왼끝 11 = 265.5) */
html.h5l #ga_popup_txt3.h5pg_allin:before,
html.h5l #ga_popup_txt3.h5pg_allin:after
{
    content: '';
    position: absolute;
    left: 265.5px;
    left: var(--h5pg_allin_tail, 265.5px);
    width: 0;
    height: 0;
    border-style: solid;
}
html.h5l #ga_popup_txt3.h5pg_allin:before
{
    top: -20px;
    margin-left: -20px;
    border-width: 0 20px 20px;
    border-color: transparent transparent #e23b2e;
}
html.h5l #ga_popup_txt3.h5pg_allin:after
{
    top: -16px;
    margin-left: -17px;
    border-width: 0 17px 17px;
    border-color: transparent transparent rgba(255, 252, 245, 0.96);
}

/* 고/스톱 팝업의 판 그림: 원본은 542x411 짜리 한 장(99_popup/popup1.png)이라 931x724 로 키우면 모자란다.
   세로와 같은 조각 그림(popup3_*)으로 덮어 어느 크기에서도 늘어나게 한다 (원본이 인라인으로 깔아 !important).
   흔들기/쌍피 팝업은 원본 크기 그대로라 원본 판 그림을 그대로 둔다 */
html.h5l #ga_popup_div.h5pg_gs
{
    background:
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left_deco.png) no-repeat left 17px top 20px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right_deco.png) no-repeat right 17px top 20px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left_deco.png) no-repeat left 14px bottom 14px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right_deco.png) no-repeat right 14px bottom 14px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_center.png) no-repeat 48px 102px !important;
    background-size:
        67px 57px, 67px 57px, 533px 204px, 451px 138px,
        50px 104px, 50px 104px, 50px 104px, 50px 104px,
        calc(100% - 96px) 104px, calc(100% - 96px) 104px,
        50px calc(100% - 204px), 50px calc(100% - 204px),
        calc(100% - 96px) calc(100% - 204px) !important;
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

/* ============ 선 결정 팝업 판 그림 (2026-10-12 CEO 지시: 가로도 세로와 같은 새 판으로) ============
   원본(S_selectsun.js)은 옛 판 그림 한 장(99_popup/popup1.png)을 인라인으로 깔아 쓴다.
   세로와 같은 조각 그림(popup3_*)으로 덮는다. 판은 원본 크기(542x411)를 그대로 두므로
   조각 크기는 세로 값(판 813x617 기준)의 2/3 로 적는다 - 모양은 세로와 같고 크기만 작다 */
html.h5l #SU_popup
{
    background:
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left_deco.png) no-repeat left 11px top 13px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right_deco.png) no-repeat right 11px top 13px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left_deco.png) no-repeat left 9px bottom 9px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right_deco.png) no-repeat right 9px bottom 9px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top.png) no-repeat 32px 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom.png) no-repeat 32px 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_left.png) no-repeat 0 68px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_right.png) no-repeat 100% 68px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_center.png) no-repeat 32px 68px !important;
    background-size:
        45px 38px, 45px 38px, 355px 136px, 301px 92px,
        33px 69px, 33px 69px, 33px 69px, 33px 69px,
        calc(100% - 64px) 69px, calc(100% - 64px) 69px,
        33px calc(100% - 136px), 33px calc(100% - 136px),
        calc(100% - 64px) calc(100% - 136px) !important;
    -webkit-filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.35));
}

/* 패 위에 얹히는 1·2·3 번호 그림은 리모컨 시절 안내라 세로처럼 가로에서도 감춘다 */
html.h5l #SU_num1,
html.h5l #SU_num2,
html.h5l #SU_num3
{
    display: none !important;
}

/* 강제 종료 패널티 안내 문구는 세로와 같이 쓰지 않는다 (2026-09-28 CEO 지시) */
html.h5l #SU_caution
{
    display: none !important;
}

/* '선 결정을 위한 패를 고르세요' - 세로처럼 글자를 키우고 판 폭 가운데에 (원본 30 은 작다) */
html.h5l #SU_popup_txt
{
    left: 21px !important;
    top: 36px !important;
    width: 500px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #3b2317 !important;
}

/* ============ 한 줄 토스트 (2026-10-12 CEO 지시: 가로도 세로와 같은 모양으로) ============
   원본(util_Function.js notice_center)은 옛 판 그림(99_popup/popup3.png) 위에 갈색 24px 글자를 얹는다.
   세로와 같이 검정 둥근 상자 + 노란 글자로 바꾼다. 자리는 원본 그대로(268,319 / 744x82 = 판 한가운데)이고,
   글자 크기는 세로 48(캔버스 1080 기준, 폭의 4.4%)과 눈에 같아 보이는 32 로 둔다 (가로 판 높이 720 의 4.4%).
   원본이 인라인으로 모양을 넣으므로 !important 로 덮는다 */
html.h5l #message
{
    z-index: 200 !important;
    /* 2026-10-15 CEO 지시: 오른쪽 정보 칸을 뺀 '판 영역' 가운데(500)에 맞춘다.
       선 결정 팝업·매칭 대기 안내와 같은 가운데다 (원래는 판 한가운데 640 = left 268) */
    left: calc(128px + (var(--h5l_ox_r, 0px) - var(--h5l_ox_l, 0px)) / 2) !important;
    width: 744px !important;
    /* 2026-10-15 CEO 지시: 판 전체(720)가 아니라 바닥판 세로 한가운데에 둔다 -
       상단 띠 아랫선 88 과 손패 띠 윗선 438.667 사이 가운데가 263.333 이었다.
       2026-10-19 CEO 지시: 왼쪽 캐릭터 컷(윗변 226.667)과 겹쳐 그 위로 올린다 -
       두 줄(124)까지도 캐릭터 윗변에 닿지 않고 상단 띠(88)에도 걸리지 않는 자리가 164 다.
       글이 길어져도 가운데가 유지되도록 높이의 절반만큼 올린다 */
    top: 164px !important;
    margin-top: 0 !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.82) !important;
    border: 2px solid #8a9a72 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 84px !important;
    padding: 20px 18px !important;
    color: #ffe98a !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    text-align: center !important;
    /* 문구에 넣어 둔 줄바꿈을 살리고, 낱말 가운데서 끊기지 않게 한다 (세로와 같게) */
    white-space: pre-line !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-shadow: none !important;
}
/* 결과 화면에서만은 화면 전체 가운데에 둔다 (2026-10-16 CEO 지시).
   판을 떠난 뒤라 오른쪽 정보 칸이 없는데도 판 영역 가운데(500)에 서 있어 왼쪽으로 쏠려 보였다.
   표(h5l_res)는 h5_landscape_polish.js 의 H5LP.sync_popup 이 달고 뗀다 */
html.h5l.h5l_res #message
{
    left: calc(268px + (var(--h5l_ox_r, 0px) - var(--h5l_ox_l, 0px)) / 2) !important;
}

/* 글이 비어 있으면 아예 감춘다 - 빈 검정 상자가 판 위에 띠처럼 남지 않게 (세로와 같게) */
html.h5l #message:empty
{
    display: none !important;
}

/* 2026-10-20 CEO 지시: 패 바꾸기 팝업 뒤의 토스트는 팝업(542 폭)에 완전히 가려 읽을 수가 없다 -
   양옆으로 검은 띠만 비쳐 보였다. 팝업이 떠 있는 동안에는 아예 띄우지 않는다.
   이 때 나오는 안내('패를 다시 나눕니다' 등)도 어차피 팝업 뒤라 보이지 않던 것들이다 */
html.h5l.h5p_pyn_card #message
{
    display: none !important;
}

/* ============ 게임 팝업 판 그림 (2026-10-12 CEO 지시: 먹을 패 고르는 팝업도 세로처럼) ============
   원본은 옛 판 그림 한 장(99_popup/popup1.png)을 인라인으로 깔아 쓴다 - 먹을 패 고르기(패 2장),
   흔들기/쌍피 확인, '흔들었습니다' 가 모두 같은 판(542x411)이다.
   선 결정 팝업과 같은 규칙으로 세로의 조각 그림(popup3_*)을 깐다 (조각 크기는 세로 값의 2/3).
   고/스톱 팝업은 판을 931x724 로 쓰므로 :not(.h5pg_gs) 로 비켜 둔다.
   2026-10-12 CEO 지적(대기 화면에 판 조각이 띠처럼 보인다): 원본은 이 칸들을 크기 없이 미리 만들어 두는데
   그 빈 칸이 판 폭만큼 넓어져 조각 그림이 가로 띠로 그려졌다 - 팝업이 '진짜로 떠 있을 때'(h5lp_pop_on,
   h5_landscape_polish.js H5LP.sync_popup 이 달고 뗀다) 만 칠한다 */
html.h5l #ga_popup_div.h5lp_pop_on:not(.h5pg_gs),
html.h5l #ga_shake_div.h5lp_pop_on
{
    background:
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left_deco.png) no-repeat left 11px top 13px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right_deco.png) no-repeat right 11px top 13px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left_deco.png) no-repeat left 9px bottom 9px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right_deco.png) no-repeat right 9px bottom 9px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top.png) no-repeat 32px 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom.png) no-repeat 32px 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_left.png) no-repeat 0 68px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_right.png) no-repeat 100% 68px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_center.png) no-repeat 32px 68px !important;
    background-size:
        45px 38px, 45px 38px, 355px 136px, 301px 92px,
        33px 69px, 33px 69px, 33px 69px, 33px 69px,
        calc(100% - 64px) 69px, calc(100% - 64px) 69px,
        33px calc(100% - 136px), 33px calc(100% - 136px),
        calc(100% - 64px) calc(100% - 136px) !important;
    -webkit-filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.35));
}

/* 패 위에 얹히는 1·2 번호 그림은 리모컨 시절 안내라 세로처럼 감춘다 */
html.h5l #ga_popup_num1,
html.h5l #ga_popup_num2
{
    display: none !important;
}

/* 팝업 물음 글자: 원본 30 은 작다 - 세로처럼 키운다 (고/스톱 팝업은 제 규칙을 쓴다) */
html.h5l #ga_popup_txt
{
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #3b2317 !important;
}

/* ============ 먹은 패 개수/점수 상자 (2026-10-12 CEO 지적: 세로보다 많이 작다) ============
   원본은 30x20 칸에 12~15px 글자다. 세로는 같은 상자를 68x54 / 42px 로 키워 쓴다
   (세로 캔버스 1080 기준 = 폭의 3.9%). 가로 판에서 눈에 같게 보이려면 판 높이 720 의 3.9% -> 28px,
   상자는 45x36. 원본은 상자 왼위를 '마지막 패 오른아래 - 상자크기' 에 두므로, 크기를 키우면 패 밖으로 나간다 -
   세로처럼 오른아래 모서리를 기준으로 삼아(translate -100%) 상자가 커져도 패 모서리에 붙어 있게 한다 */
html.h5l #get_i_KW_count, html.h5l #get_i_SI_count, html.h5l #get_i_DI_count, html.h5l #get_i_PI_count,
html.h5l #get_you_KW_count, html.h5l #get_you_SI_count, html.h5l #get_you_DI_count, html.h5l #get_you_PI_count
{
    width: auto !important;
    min-width: 45px;
    height: 36px !important;
    /* 2026-10-20 CEO 지적(숫자가 칸 가운데보다 위로 떠 보인다): 테두리 안 글자 칸은 32 인데
       이 글꼴(NanumSquareRound 700, 28px)의 숫자는 기준선 위로만 자라 위여백 4.5 / 아래여백 7.5 로
       1.5 만큼 위로 치우쳤다. 줄 높이를 3 늘려 기준선을 그만큼 내리면 위아래가 6 으로 같아진다
       (글자 칸보다 줄이 3 길어지지만 그려지는 것은 글자뿐이라 넘쳐 보이지 않는다) */
    line-height: 35px !important;
    padding: 0 5px;
    box-sizing: border-box;
    font-size: 28px !important;
    white-space: nowrap;
    border-width: 2px !important;
    border-radius: 8px !important;
    /* 2026-10-12 CEO 지적: 패 오른아래에 딱 붙어 있다 - 세로처럼 모서리에서 살짝 나오게 한다.
       세로와 같은 규칙으로, 원본 칸의 '테두리까지 넣은 바깥 크기'(30x20 + 2px 테두리 = 34x24)만큼 되돌린다 */
    margin-left: 34px;
    margin-top: 24px;
    -webkit-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
    z-index: 31;	/* 피박/광박 띠에 덮이지 않게 (세로와 같게) */
}

/* 손패는 먹은 패 점수 상자(31) 위에 둔다 (2026-10-12 CEO 지적: 상자가 손패를 덮는다).
   먹은 패 줄 아랫변(529)과 손패 윗변(533)이 4px 밖에 안 떨어져, 모서리에서 조금 나온 상자가 패를 물었다.
   날아가는 패(#ani_img)는 손패보다 위로 - 안 그러면 패를 낼 때 옆 패 뒤로 지나간다 */
html.h5l [id^="ga_i_slot"]
{
    z-index: 33;
}
html.h5l #ani_img
{
    z-index: 50;
}

/* 바닥패 위 미션 'M' 은 패 모서리에 딱 붙지 않게 안쪽으로 조금 민다 (세로와 같게) */
html.h5l img[id^=ga_yard_mission_]
{
    margin-left: 3px;
    margin-top: 3px;
}

/* ============ 가로 판 준비 안내 토스트 (2026-10-12 CEO 지시) ============
   '입장' 을 누르고 가로 판이 준비될 때까지 세로 앱(로비) 위에 띄운다.
   세로 캔버스(#div_body, 1080 기준) 안에 들어가므로 세로 한 줄 토스트와 같은 크기·색으로 적는다.
   이 규칙만 html.h5p/h5l 로 묶지 않는다 - 띄우는 쪽이 세로 앱이고 칸 이름이 이 파일 전용이다 */
#h5l_enter_toast
{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 820px;
    box-sizing: border-box;
    padding: 62px 24px 50px;	/* 2026-10-12 CEO 지시: 세로 영역을 조금 더 (40/30 -> 62/50) */
    background: rgba(0, 0, 0, 0.82);
    border: 2px solid #8a9a72;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    text-align: center;
    pointer-events: none;
    z-index: 2147483000;	/* 로비의 모든 판 위에 (가로 판 iframe 보다는 아래) */
}
#h5l_enter_toast .h5l_enter_txt
{
    color: #ffe98a;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    word-break: keep-all;
}
#h5l_enter_toast .h5l_enter_dots
{
    height: 40px;
    margin-top: 30px;	/* 2026-10-12 CEO 지시: 글과 점이 너무 붙어 있다 - 여백을 두 배로 (14 -> 30) */
    line-height: 0;
    font-size: 0;
}
#h5l_enter_toast .h5l_enter_dots i
{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 11px;
    border-radius: 50%;
    background: #f6d7a7;
    -webkit-animation: h5l_enter_dot 1.2s ease-in-out infinite;
    animation: h5l_enter_dot 1.2s ease-in-out infinite;
}
#h5l_enter_toast .h5l_enter_dots i:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
#h5l_enter_toast .h5l_enter_dots i:nth-child(3) { -webkit-animation-delay: 0.3s;  animation-delay: 0.3s; }
@-webkit-keyframes h5l_enter_dot
{
    0%, 60%, 100% { -webkit-transform: translateY(0); opacity: 0.55; }
    30%           { -webkit-transform: translateY(-14px); opacity: 1; }
}
@keyframes h5l_enter_dot
{
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30%           { transform: translateY(-14px); opacity: 1; }
}

/* ============ 미션 보드 새 판 (2026-10-12 CEO 지시: 가로도 세로와 같은 새 판으로) ============
   원본은 옛 보드 그림(ui/mission.png 257x141)을 쓴다. 세로가 쓰는 새 판(h5p/mission.png)으로 바꾸고
   원본 자리(1023,178)에 폭 260 으로 넣는다 - 새 판 비(406.5:197.5)를 지켜 높이는 126.
   안쪽 패·배지·표시 자리는 h5_landscape_polish.js H5LP.install_mission 이 세로 값의 0.64 로 넣는다 */
html.h5l #game_mission
{
    width: 280.667px !important;	/* 2026-10-15 CEO 지시: 시안 421 x 204 */
    height: 136.333px !important;
    background-image: url(../image/2_game/h5p/mission.png) !important;
    background-size: 280.667px 136.333px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
}
/* 미션 성공/실패가 정해지면 판을 통째로 어둡게 덮고 그 위에 글자를 올린다 (세로와 같게) */
html.h5l #game_mission.h5pg_mis_over::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    -webkit-filter: brightness(0);
    filter: brightness(0);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}
/* 먹음 표시(O/X) / 성공·실패 글자 / 가져간 사람 화살표 - 세로 크기의 0.64 (자리는 JS 가 넣는다) */
html.h5l #game_mission .h5pg_mis_ox
{
    width: 60.5px !important;
    height: 98px !important;
    z-index: 2;
}
html.h5l #game_mission .h5pg_mis_all
{
    width: 187.5px !important;
    height: 97px !important;
    z-index: 4;
}
html.h5l #game_mission .h5pg_mis_arrow
{
    width: 34.5px !important;
    height: 46.5px !important;
    z-index: 0;
}

/* ============ 게임 팝업 뎁스·선택 테두리 (2026-10-12 CEO 지적) ============
   팝업이 떠 있는 동안에는 판에 깔린 패와 점수 칸이 팝업 위로 올라오면 안 된다 (원본에는 뎁스가 없다).
   세로와 같이 팝업을 맨 위(1000)에 둔다 */
html.h5l #ga_popup_div.h5lp_pop_on,
html.h5l #ga_shake_div.h5lp_pop_on
{
    z-index: 1000 !important;
}
/* 먹을 패 고르기 팝업의 노란 선택 테두리(리모컨 시절 FOCUS)는 폰에서는 쓰지 않는다 (CEO 지시).
   원본 drawFocus 가 그림을 계속 다시 그리므로 아예 감춘다 - 누르는 동작은 그대로다 */
html.h5l #ga_popup_focus
{
    display: none !important;
}

/* ============ 길게 눌렀을 때 뜨는 복사/모두 선택 메뉴 막기 (2026-10-12 CEO 지적) ============
   세로(html.h5p)에는 이미 있는 규칙인데 가로 판에는 없어, 판을 꾹 누르면 안드로이드가 그림을 골라
   '복사 / 모두 선택 / 웹 검색 / 공유' 줄을 띄웠다. 바닥패 길게 보기 같은 조작도 끊긴다.
   누를 때 덮이는 기본 하이라이트도 같이 끈다 */
html.h5l,
html.h5l *
{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* 그림을 끌어다 놓는 것(드래그)도 막는다 - 패를 끌면 그림이 따라 나왔다 */
html.h5l img
{
    -webkit-user-drag: none;
    user-drag: none;
}
/* 글자를 골라야 하는 곳은 예외 */
html.h5l input,
html.h5l textarea
{
    -webkit-user-select: text;
    user-select: text;
}


/* ============ 흔들기 팝업 종·글자 (2026-10-19 CEO 지적) ============
   원본 종 그림(99_popup/popup_bell.png 46x51)은 테두리가 갈색으로 번져 흐리다 -
   인게임에서 쓰는 고해상도 종(2_game/ui/bell.png 138x147)으로 그림만 바꾼다.
   2026-10-15/16 에 넣은 ::before 새 종은 팝업이 '떠 있다' 고 재는 표(h5lp_pop_on)에 기대는데
   그 표가 안 붙는 길이 있어 옛 종이 그대로 보였다 - 이 규칙은 표와 상관없이 걸린다.
   줄일 때 '또렷하게'(Main.css image-rendering)가 테를 세우므로 보통 보간으로 돌린다 */
html.h5l #ga_popup_bell,
html.h5l #ga_shake_bell
{
    content: url(../image/2_game/ui/bell.png);
    width: 52px !important;
    height: 55px !important;
    image-rendering: auto;
}

/* 흔들고 난 뒤 글자가 작아졌다 (CEO 지적): 원본이 '흔드시겠습니까?' 는 30px,
   '흔들었습니다.' 는 28px 로 따로 써 두었다 - 가로에서는 둘을 같은 크기로 맞춘다 */
html.h5l #ga_shake_txt
{
    font-size: 30px !important;
}

/* ============ 흔들기 팝업: 종 + 글 (2026-10-15 CEO 지시) ============
   원본(S_game_shake.js)은 흐린 종 그림(99_popup/popup_bell.png 46x51)을 왼쪽에 따로 두고
   글 칸을 215 로 좁게 잡아 '흔드시겠습니까?' 가 두 줄로 쪼개졌다.
   종은 인게임에서 쓰는 고해상도 그림(2_game/ui/bell.png 138x147)으로 바꾸고,
   종과 글을 한 줄로 묶어 팝업 가로(542) 한가운데에 놓는다 (글은 줄바꿈 없이) */
html.h5l #ga_shake_bell
{
    display: none !important;
}

/* 팝업이 '진짜로 떠 있을 때'(h5lp_pop_on) 만 손댄다 - 원본은 이 칸들을 미리 만들어 두는데
   display 를 못박으면 팝업이 없는 동안에도 종이 판 위에 덩그러니 떠 있었다 (2026-10-15 CEO 지적) */
html.h5l #ga_shake_div.h5lp_pop_on #ga_shake_txt
{
    left: 0 !important;
    width: 542px !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    white-space: nowrap !important;
}

html.h5l #ga_shake_div.h5lp_pop_on #ga_shake_txt::before
{
    content: "";
    display: block;
    -webkit-flex: 0 0 46px;
    flex: 0 0 46px;
    width: 46px;
    height: 49px;
    margin-right: 10px;
    background: url(../image/2_game/ui/bell.png) no-repeat 50% 50%;
    background-size: 46px 49px;
}


/* ============ 흔들기 확인 팝업(패 3장 + 예/아니오) 의 종 + 글 (2026-10-16 CEO 지적) ============
   위 '흔들기 팝업' 과 같은 손질이 이 팝업(S_GAME.POPUP.TYPE.SELECT_SH)에는 빠져 있었다 -
   옛 종 그림(99_popup/popup_bell.png 46x51, 테두리가 어둡다)이 그대로 쓰이고
   글 칸이 215 로 좁아 '흔드시겠습니까?' 가 두 줄로 쪼개졌다.
   #ga_popup_bell 바로 뒤의 글 칸은 이 팝업에만 있어 그것으로 짚는다 */
html.h5l #ga_popup_div.h5lp_pop_on #ga_popup_bell
{
    display: none !important;
}

html.h5l #ga_popup_div.h5lp_pop_on #ga_popup_bell + #ga_popup_txt
{
    left: 0 !important;
    width: 542px !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    white-space: nowrap !important;
}

html.h5l #ga_popup_div.h5lp_pop_on #ga_popup_bell + #ga_popup_txt::before
{
    content: "";
    display: block;
    -webkit-flex: 0 0 46px;
    flex: 0 0 46px;
    width: 46px;
    height: 49px;
    margin-right: 10px;
    background: url(../image/2_game/ui/bell.png) no-repeat 50% 50%;
    background-size: 46px 49px;
}


/* ============ 약관 동의 화면은 가로에 뜨지 않는다 (2026-10-16 CEO 지시) ============
   가로 판은 세로 로비에서 들어오는 길뿐이라 동의는 이미 세로에서 받는다.
   혹시 원본이 칸을 만들어도 보이지 않게 해 한 번도 스쳐 지나가지 않게 한다
   (화면을 그리지 않고 세로로 돌려보내는 것은 h5_landscape_game.js 의 H5L.install_no_agree) */
html.h5l #S_AGREE_div,
html.h5l #S_AGREE_DETAIL_div
{
    display: none !important;
}


/* ============ 도신 대전 대사 말풍선 (2026-10-19 CEO 지시: 세로와 같은 모양으로) ============
   원본(util.show_dialogue)은 오른쪽에 큰 캐릭터 그림과 옛 말풍선 그림을 깐다.
   세로는 2026-10-02 부터 그 둘을 빼고 상대 프로필 옆에 흰 말풍선만 두는데, 가로에는 그 손질이 없었다.
   세로(h5_portrait.css #dialogue_text)의 값을 가로 비율(2/3)로 그대로 옮긴다.
   세로 자리잡기는 h5_landscape_polish.js H5LP.place_dialogue 가 한다 (상대 얼굴 한가운데) */
html.h5l #big_char,
html.h5l #dialogue_bg
{
    display: none !important;
}

/* 대사 상자는 원본이 켤 때만 보인다 (!important 를 쓰면 인라인 display:block 을 이겨 아예 안 보인다) */
html.h5l #dialogue_div
{
    display: none;
}

html.h5l #dialogue_text
{
    position: absolute !important;
    top: 20px !important;	/* 자리는 JS 가 다시 잡는다 - 못 잡았을 때의 기본값 */
    bottom: auto !important;
    width: 558.667px !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 2.667px solid #d8c391 !important;
    border-radius: 17.333px !important;
    box-shadow: 0 4px 11px rgba(0, 0, 0, 0.45);
    font-size: 26.667px !important;		/* 2026-10-19 CEO 지적: 선 결정 팝업 제목(34)과 비슷해 보인다 - 한 단계 낮춘다 */
    line-height: 32px !important;
    font-weight: 700 !important;
    color: #2a2112 !important;
    text-align: center !important;
    z-index: 45;
    /* 원본 등장 연출(utilScale_xy_right_bottom)이 오른쪽 아래를 기준으로 키운다 - 꼬리에서 톡 튀어나오게 */
    -webkit-transform-origin: 100% 50% !important;
    transform-origin: 100% 50% !important;
}

/* 꼬리: 오른쪽으로 뻗어 상대 프로필을 가리킨다 (세로와 같은 방법 - 바깥 테두리색 위에 안쪽 흰색) */
html.h5l #dialogue_text::before
{
    content: '';
    position: absolute;
    right: -17.333px;
    top: 50%;
    margin-top: -12px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 17.333px solid #d8c391;
}
html.h5l #dialogue_text::after
{
    content: '';
    position: absolute;
    right: -12.667px;
    top: 50%;
    margin-top: -8.667px;
    width: 0;
    height: 0;
    border-top: 8.667px solid transparent;
    border-bottom: 8.667px solid transparent;
    border-left: 13.333px solid #ffffff;
}


/* ============ 패 바꾸기 확인 팝업 (2026-10-19 CEO 지적: 가로는 옛 판 그림 그대로였다) ============
   세로가 쓰는 손질(h5p_pyn_card)을 가로에서도 건다 (h5_landscape_polish.js H5LP.install_card_popup).
   판은 원본 크기(542x411)를 그대로 두고, 세로 판(920x700) 기준 값에 0.589 를 곱해 옮겼다 */
html.h5l #PYN_board
{
    background:
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left_deco.png) no-repeat left 11px top 13px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right_deco.png) no-repeat right 11px top 13px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left_deco.png) no-repeat left 9px bottom 9px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right_deco.png) no-repeat right 9px bottom 9px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_top.png) no-repeat 32px 0,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_bottom.png) no-repeat 32px 100%,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_left.png) no-repeat 0 68px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_right.png) no-repeat 100% 68px,
        url(../image/1_mainmenu/h5p/profile/popup3_bg_center.png) no-repeat 32px 68px !important;
    background-size:
        45px 38px, 45px 38px, 355px 136px, 301px 92px,
        33px 69px, 33px 69px, 33px 69px, 33px 69px,
        calc(100% - 64px) 69px, calc(100% - 64px) 69px,
        33px calc(100% - 136px), 33px calc(100% - 136px),
        calc(100% - 64px) calc(100% - 136px) !important;
    opacity: 1 !important;		/* 원본은 게임 중에 0.9 로 흐리게 깐다 - 새 판은 또렷하게 */
    -webkit-filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.35));
}
/* 패 바꾸기 팝업만 위로 올린다 (2026-10-19 CEO 지시: 판 아래로 내려와 내 손패를 덮었다).
   2026-10-19 CEO 지시(2차): 흔들기 팝업과 같은 자리(top 61)에 세웠다 (판 크기도 542x411 로 같다).
   2026-10-20 CEO 지시(3차): 먹은 패 두 줄의 한가운데에 맞춘다. 기기 실측으로
     상대 먹은 패 줄 윗변 5 / 내 먹은 패 줄 아랫변 519.667 -> 가운데 262.333
     (태블릿처럼 위아래로 벌어지는 비율에서도 두 줄이 같은 양(--h5l_up / --h5l_dn)만큼
      반대로 움직여 가운데는 그대로다)
   판 높이 411 이므로 top = 262.333 - 411/2 = 56.833. 예전 61 보다 4.167 위다.
   아래끝 56.833+411 = 467.8 로 내 손패 윗변(535)은 그대로 트인다 */
html.h5l.h5p_pyn_card #PYN_board,
/* 2026-10-20 CEO 지적: 흔들기·먹을 패 고르기 팝업도 같은 자리(원본 top 61 · 542x411)라 같이 맞춘다.
   고/스톱 팝업(.h5pg_gs)은 판이 931x724 로 두 줄 사이(514.667)보다 커서 가운데에 둘 수 없다 - 그대로 둔다 */
html.h5l #ga_shake_div,
html.h5l #ga_popup_div:not(.h5pg_gs)
{
    /* 2026-10-20 CEO 지적(4차): 위줄을 표시등 띠만큼 덜 밀면서 두 줄이 더 이상 같은 양만큼
       벌어지지 않게 됐다 - 가운데가 (내려간 양 - 올라간 양)의 절반만큼 아래로 간다.
       폰(둘 다 0)은 56.833 그대로, 태블릿(up 6 / dn 24)은 65.8 이 된다 */
    top: -webkit-calc(56.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    top: calc(56.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
}

/* 판을 그림 태그로 깔던 것은 감춘다 (세로와 같게) */
html.h5l #Img_PYN_board
{
    display: none !important;
}
/* 글자 뒤 띠 그림과 버튼 위 숫자 그림은 쓰지 않는다 (세로와 같은 CEO 지시) */
html.h5l.h5p_pyn_card #Img_PYN_txtbox,
html.h5l.h5p_pyn_card #PYN_Img_2,
html.h5l.h5p_pyn_card #PYN_Img_3,
html.h5l.h5p_pyn_card #PYN_btn_focus
{
    display: none !important;
}
/* "패를 바꾸고 싶으신가요?" 한 줄 */
html.h5l.h5p_pyn_card #PYN_Txt_1
{
    left: 23.5px !important;
    top: 54px !important;
    width: 494px !important;
    height: 50.5px !important;
    line-height: 50.5px !important;
    text-align: center !important;
    color: #2f2418 !important;
    font-size: 33px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    text-shadow: none !important;
    z-index: 2;
}
/* 비용 줄: '필요 금화' 글자와 금화 막대를 한 줄로 묶어 가로 가운데에 */
html.h5l.h5p_pyn_card #PYNG_need
{
    position: absolute;
    left: 23.5px;
    top: 147px;
    width: 494px;
    height: 56.5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 2;
}
html.h5l.h5p_pyn_card #PYN_Txt_2
{
    position: relative !important;
    left: auto !important;
    top: 3px !important;
    width: auto !important;
    height: 44px !important;
    line-height: 44px !important;
    margin-right: 21px;
    white-space: nowrap;
    text-align: left !important;
    color: #7a5b52 !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
html.h5l.h5p_pyn_card #PYNG_bar
{
    position: relative;
    width: 180px;
    height: 44px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
html.h5l.h5p_pyn_card #PYN_Img_1
{
    left: 0 !important;
    top: 0 !important;
    width: 180px !important;
    height: 44px !important;
    /* 2026-10-19 CEO 지적(금화 막대가 깨져 보인다): 이 칸은 <img> 가 아니라 배경그림을 쓰는 <div> 다
       (S_popupyn.js). 원본은 그림 크기를 정하지 않아 306x75 가 제 크기로 깔리고, 칸(180x44)이
       그 그림을 잘라 버려 동전은 잘리고 막대는 오른쪽 끝이 뭉툭하게 끊겼다.
       세로는 칸이 306x75 라 잘릴 일이 없었다 - 가로에서는 그림을 칸 크기로 줄여 깐다.
       줄일 때 '또렷하게'(Main.css image-rendering)가 윤곽을 세우므로 보통 보간으로 돌린다 */
    background-size: 180px 44px !important;
    image-rendering: auto;
    z-index: 2;
}
html.h5l.h5p_pyn_card #PYN_Txt_3
{
    left: 47px !important;
    top: 1px !important;
    width: 128px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    z-index: 3;
}
/* 내 보유 금화 한 줄 */
html.h5l.h5p_pyn_card #PYN_Txt_4
{
    left: 23.5px !important;
    top: 224px !important;
    width: 494px !important;
    height: 35px !important;
    line-height: 35px !important;
    text-align: center !important;
    color: #7a5b52 !important;
    font-size: 22.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    z-index: 2;
}
/* 버튼: 다른 팝업과 같은 디자이너 그림. 진행(예)은 오른쪽 (2026-10-09 CEO 지시) */
html.h5l.h5p_pyn_card #PYN_btn1,
html.h5l.h5p_pyn_card #PYN_btn2
{
    position: absolute !important;
    top: 293.5px !important;
    width: 198.5px !important;
    height: 61px !important;
    line-height: 61px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 198.5px 61px !important;
    z-index: 3;
}
html.h5l.h5p_pyn_card #PYN_btn1::after,
html.h5l.h5p_pyn_card #PYN_btn2::after
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 59px;
    color: #ffffff;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
html.h5l.h5p_pyn_card #PYN_btn1
{
    left: 278px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) !important;
}
html.h5l.h5p_pyn_card #PYN_btn1::after
{
    content: "예";
    text-shadow: -1.5px 0 0 #1f4a1a, 1.5px 0 0 #1f4a1a, 0 -1.5px 0 #1f4a1a, 0 1.5px 0 #1f4a1a, -1.061px -1.061px 0 #1f4a1a, -1.061px 1.061px 0 #1f4a1a, 1.061px -1.061px 0 #1f4a1a, 1.061px 1.061px 0 #1f4a1a;
}
html.h5l.h5p_pyn_card #PYN_btn2
{
    left: 65px !important;
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2) !important;
}
html.h5l.h5p_pyn_card #PYN_btn2::after
{
    content: "아니오";
    text-shadow: -1.5px 0 0 #35383a, 1.5px 0 0 #35383a, 0 -1.5px 0 #35383a, 0 1.5px 0 #35383a, -1.061px -1.061px 0 #35383a, -1.061px 1.061px 0 #35383a, 1.061px -1.061px 0 #35383a, 1.061px 1.061px 0 #35383a;
}


/* ============ 선 결정 패 그림 또렷함 (2026-10-19 CEO 지적: 테두리가 볼록해 보인다) ============
   카드 그림은 2배(244x360)로 받아 화면에는 설계 크기(122x180)로 줄여 그린다.
   Main.css 가 body 에 걸어 둔 image-rendering: -webkit-optimize-contrast 는 줄일 때 윤곽을 세우는데,
   그래서 카드 빨간 테두리에 밝은 테가 생겨 볼록해 보였다 (뒷면 그림은 1:1 이라 멀쩡하다).
   이 패만 보통 보간(부드럽게)으로 줄인다 - 그림·크기는 그대로다 */
html.h5l #SU_card1,
html.h5l #SU_card2,
html.h5l #SU_card3
{
    image-rendering: auto;
}

/* ===== 결과 화면에서는 시계를 감춘다 (2026-10-19 CEO 지적) =====
   상대가 나가서 결과 화면이 뜨면 원본이 거기서도 5초를 세는데, 그림 바꾸기는 게임판·선 결정에서만
   돌아 옛 알람시계 그림이 그대로 나왔다. 세로에는 같은 규칙(html.h5p.h5pg_res_on)이 이미 있다.
   표는 h5_portrait_game.js 의 h5pg_place_count 가 달고 뗀다 */
html.h5l.h5pg_res_on #ga_count,
html.h5l.h5pg_res_on #h5pg_count_num
{
    display: none !important;
}

/* ===== 선 결정 때 시계 자리 (2026-10-19 CEO 지적: 팝업에 가려진다) =====
   가로에는 선 결정 자리(h5pg_count_sun) 규칙이 없어 원본 자리인 왼쪽 위에 떠 팝업에 가렸다.
   팝업(윗변 155 + 높이 411 = 아래끝 566) 바로 아래, 팝업 가로 가운데에 둔다.
   그 자리는 손패 칸이지만 선 결정 동안에는 비어 있다 */
html.h5l #ga_count.h5pg_count_sun
{
    /* 2026-10-19 CEO 지적(숫자가 시계 밖에 떴다): 숫자는 시계의 offsetLeft 를 재서 올라오므로
       transform 으로 가운데를 맞추면 숫자만 그만큼 오른쪽으로 밀렸다 - left 로 직접 맞춘다
       (가로 시계 폭 147 의 반 = 73.5). 자리도 팝업 아랫변(55 + 411 = 466) 바로 밑으로 올린다 */
    left: calc(var(--h5l_pop_cx, 500px) - 73.5px) !important;
    right: auto !important;
    /* 2026-10-20 CEO 지적(시계가 팝업에 딱 붙어 있다): 팝업 아랫변에서 16 띄운다.
       팝업 윗변이 56.833 + (dn - up)/2 이고 높이가 411 이므로 아랫변 + 16 = 483.833 + (dn - up)/2.
       전에는 472 로 박아 두어 틈이 4~6 이었고, 위줄을 덜 미는 비율에서는 팝업에 물렸다.
       선 결정 동안 손패 칸은 비어 있어 시계(높이 105)가 내려와도 가리는 것이 없다 */
    top: -webkit-calc(483.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    top: calc(483.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
}

/* ==== css/h5_landscape_wide.css ==== */
/* 파일명: h5_landscape_wide.css
   하는일: 가로 게임 판을 2026-10-14 CEO 시안(2340 x 1080)대로 다시 입힌다.
   판 자체는 1280 x 720 그대로 두고(패 자리·크기 불변), 화면이 16:9 보다 넓을 때 남는 좌우까지
   새 바탕과 오른쪽 칸이 뻗도록 CSS 변수를 쓴다 (값은 h5_landscape_wide.js 의 H5LW.place 가 재서 넣는다):
     --h5l_ox_l / --h5l_ox_r  판 좌우로 남는 자리 - 바탕 띠·어두움처럼 화면 끝까지 덮는 것만 쓴다
     --h5l_oy_t / --h5l_oy_b  판 위아래로 남는 자리 (16:10 / 4:3 태블릿)
     --h5l_edge_l / --h5l_edge_r  손패 틀·오른쪽 칸이 화면 끝에 붙는 정도 (좌우 여분 + 양끝 당김)
     --h5l_jd_l  점당 글자용 (같은 뜻, 기준 값만 다르다)
   시안 좌표를 판 좌표로 옮길 때는 1.5 로 나눈다 (2340/1.5 = 1560, 1080/1.5 = 720).
   자리 재기는 javascript/h5_landscape_wide.js 가 한다. */

/* ===== 글꼴 =====
   가로 빌드는 여태 Main.css 의 NanumGothicBold 를 썼다. 세로모드(h5_portrait.css)와 같은
   NanumSquareRound 로 맞춘다 (2026-10-14 CEO 지적). @font-face 는 h5_portrait.css 에 있고 그 파일은 늘 읽힌다 */
html.h5l body,
html.h5l input,
html.h5l textarea,
html.h5l button,
html.h5l select
{
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif !important;
    font-weight: 700;
}

html.h5lw #div_body,
html.h5lw #S_GAME_div,
html.h5lw #area_ui
{
    overflow: visible !important;	/* 판 밖(좌우 여분)에 놓은 띠·오른쪽 칸이 잘리지 않게 */
}

/* 띠가 판 밖으로 나가도 문서가 넓어져 화면이 옆으로 밀리지 않게 한다
   (뿌리에 overflow:hidden 을 걸면 일부 기기에서 화면 잡기가 어긋나 가로폭만 막는다) */
html.h5lw body
{
    overflow-x: hidden;
}

/* 옛 판 그림(1280x720 jpg)에는 옛 프로필 틀·점수 칸까지 그려져 있어 통째로 감춘다 */
html.h5lw #Img_GA_bg
{
    display: none !important;
}

/* 판 양옆 채우기(옛 방식)는 새 바탕이 대신한다 (그 칸은 판 뒤 z-index -1 이라 새 바탕에 완전히 가린다) */
html.h5lw .h5lp_side
{
    display: none !important;
}

/* 선 결정·결과 화면의 딤은 판(1280x720) 위에만 깔린다. 판 밖 좌우 여분도 같은 세기로 덮어
   화면 전체가 고르게 어두워지게 한다 (세기는 h5_landscape_wide.js 가 H5LP.side_alpha 를 보고 정한다) */
.h5lw_dim
{
    position: absolute;
    display: none;
    top: 0;
    height: 720px;
    z-index: 2000;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
}

html.h5lw .h5lw_dim
{
    display: block;
}

#h5lw_dim_l
{
    left: calc(0px - var(--h5l_ox_l, 0px));
    width: calc(var(--h5l_ox_l, 0px) + 1px);	/* 반올림 틈 막기 (2026-10-16 CEO 지적) */
}

#h5lw_dim_r
{
    right: calc(0px - var(--h5l_ox_r, 0px));
    width: calc(var(--h5l_ox_r, 0px) + 1px);
}

/* ===== 바탕 띠 ===== */
/* 네 겹을 아래에서부터 쌓는다: 바탕색 -> 판 결 -> 상단 띠 -> 손패 띠 */
.h5lw_band
{
    position: absolute;
    display: none;
    left: calc(0px - var(--h5l_ox_l, 0px));
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px));
    z-index: 0;
    pointer-events: none;
}

html.h5lw .h5lw_band
{
    display: block;
}

/* 바탕 - 2026-10-14 CEO 지정 단색 #304f36 (전에는 세로모드와 같은 그라데이션이었다) */
#h5lw_base
{
    top: 0;
    height: 720px;
    background-color: #304f36;
}

/* 판 결 - 세로모드가 쓰는 판 무늬 그림 그대로 (1080 x 294 를 판 좌표로 1.5 로 나눈 크기) */
#h5lw_felt
{
    top: 0;
    height: 443.333px;		/* 손패 띠 밝은 선 바로 위까지 (2026-10-14 CEO 지시로 띠를 시안 16 내렸다) */
    background: url(../image/2_game/h5p/board_tile.jpg) repeat;
    background-size: 720px 196px;
}

/* 상대 먹은 패 띠 - 아랫변 밝은 선까지 그림 하나로 (2026-10-19 CEO 가 새 그림을 줬다 - 몸통은 불투명, 아래로 갈수록 사라진다) */
#h5lw_top
{
    top: -2.667px;			/* 2026-10-14 CEO 지시: 시안 4(판 2.667) 위로 */
    height: 90.667px;		/* 시안 136 */
    background-image: url(../image/2_game/h5p/land/hand_area_top.png?v=6);
    background-repeat: repeat-x;
    background-size: 64.667px 90.667px;	/* 그림 97 x 136 */
}

/* 내 먹은 패 + 손패 띠 */
#h5lw_hand
{
    top: 438.667px;			/* 시안 657 + 16 - 10 (2026-10-15 CEO 지시: 손패 자리만 빼고 10 위로) */
    height: 281.333px;		/* 판 아래 끝(720)까지 */
    /* 2026-10-15 CEO 가 새로 준 그림은 반투명(알파 0.47)이라 바탕색을 깔면 두 번 겹쳐 더 어두워진다 - 바탕색은 두지 않는다.
       단색을 덧칠하지 말라는 CEO 지시에 따라, 그림 하나를 판 아래 끝까지 늘려 띠를 채운다 (236 -> 286) */
    background-image: url(../image/2_game/h5p/land/hand_area_bg.png?v=3);
    background-repeat: repeat-x;
    background-position: 0 -4.667px;	/* 그림 맨 위 7px 은 반투명 그림자라 잘라낸다 */
    background-size: 64.667px 286px;	/* 그림 97 x 354 를 띠 높이(281.333 + 잘라낸 4.667)에 맞춘다 */
}

/* ===== 손패 칸 ===== */
/* 옛 판 그림에 그려져 있던 손패 테두리와 빈 칸을 새 색으로 다시 그린다 */
/* 2026-10-15 CEO 지시: 세로모드(#h5pg_hand_focus)와 같은 모양으로 다시 만든다.
   줄은 ::before 가 20 안쪽에 그리고(빛 번짐이 잘리지 않게), 요소 전체에 아래로 갈수록 투명해지는 가리개를 건다.
   줄 자리: 왼끝 132 / 윗변 530.667 (2026-10-15 CEO 지시로 10 아래) - 요소는 사방 20 더 넓다 */
#h5lw_frame
{
    position: absolute;
    display: none;
    left: calc(112px - var(--h5l_fr_l, 0px));
    right: calc(112px - var(--h5l_fr_r, 0px));
    top: 504px;			/* 줄 윗변 524 = 손패 윗선 535 에서 11 위 (좌우 여백과 같게, 2026-10-15 CEO 지시) */
    height: 216px;			/* 아래 끝(720)까지 */
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: -webkit-linear-gradient(top, #000 0%, #000 40%, rgba(0, 0, 0, 0) 90%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0) 90%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0) 90%);
}

/* 노란 줄 - 세로 값(테두리 4 / 둥글기 28 / 빛 번짐)을 판 좌표로 1.5 나눈 크기 */
#h5lw_frame::before
{
    content: "";
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: -20px;		/* 아랫줄은 가리개가 지운다 (세로와 같다) */
    border: 2.667px solid #ffd84a;
    border-radius: 18.667px;
    box-sizing: border-box;
    box-shadow: 0 0 4px 1.333px rgba(255, 216, 74, 0.85), 0 0 9.333px 2.667px rgba(255, 196, 40, 0.4), inset 0 0 4px 0.667px rgba(255, 216, 74, 0.35);
    opacity: 0;			/* 내 차례일 때만 켠다 */
}

.h5lw_slot
{
    position: absolute;
    display: none;
    top: 535px;				/* SLOT_I.y - 2026-10-15 CEO 지시로 2 아래 */
    width: 122px;			/* CARD.W */
    height: 180px;			/* CARD.H */
    background-color: #17291b;
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    box-sizing: border-box;
    z-index: 0;
    pointer-events: none;
}

/* 2026-10-16 CEO 지시: 손패를 두르는 차례 테두리는 쓰지 않는다 (모든 비율에서).
   태블릿은 판 좌우 여백이 없어 그 테두리가 화면 밖으로 19 쯤 나가, 양끝에 걸쇠 같은 토막만 남았다.
   내 차례 신호는 손패 띠의 가로 줄과 내 정보 상자 노란 테 둘로 충분하다 -
   되살리려면 아래 #h5lw_frame 을 이 규칙에 다시 넣으면 된다 (그림·자리는 그대로 두었다) */
html.h5lw .h5lw_slot
{
    display: block;
}

/* ===== 차례 표시 ===== */
/* 옛 차례 표시 그림(판 아래쪽을 통째로 덮는 노란 테)은 새 시안에 없다 - 띠의 가로 줄과 정보 상자 테로 대신한다 */
html.h5lw #area_i_turn_focus,
html.h5lw #area_you_turn_focus
{
    display: none !important;
}

/* 내 차례: 세로와 같은 1초 깜빡임 */
html.h5lw #h5lw_frame.h5lw_turn::before
{
    opacity: 1;
    -webkit-animation: h5lw_turn_blink 1s ease-in-out infinite;
    animation: h5lw_turn_blink 1s ease-in-out infinite;
}

@-webkit-keyframes h5lw_turn_blink
{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@keyframes h5lw_turn_blink
{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* 가로 줄 - 상대는 상단 띠, 나는 손패 띠 (2026-10-15 CEO 지시로 내 쪽에도 넣었다).
   2026-10-15 CEO 지적: 띠 끝에 번짐만 넣었더니 자리가 어긋났고 깜빡이지도 않았다.
   띠 그림 안에 이미 밝은 선이 그려져 있으므로 그 선과 같은 자리에 노란 줄을 겹쳐 깜빡인다.
     상단 띠  hand_area_top.png 136줄 중 130~131 -> 띠 높이 90.667 로 환산해 띠 안 86.667 (판 84)
     손패 띠  hand_area_bg.png  354줄 중 7~8     -> 286 로 환산하고 -4.667 만큼 올려 그리므로 띠 안 1 (판 439.7) */
html.h5lw #h5lw_top.h5lw_turn::after,
html.h5lw #h5lw_hand.h5lw_turn::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* 2026-10-15 CEO 지적: 가로 줄만 혼자 다른 노랑이었다 - 손패 줄·정보 상자(#ffd84a)와 같은 색으로 */
    background: #ffd84a;
    box-shadow: 0 0 4px 1.333px rgba(255, 216, 74, 0.85), 0 0 9.333px 2.667px rgba(255, 196, 40, 0.4);
    pointer-events: none;
    -webkit-animation: h5lw_turn_blink 1s ease-in-out infinite;
    animation: h5lw_turn_blink 1s ease-in-out infinite;
}

html.h5lw #h5lw_top.h5lw_turn::after
{
    top: 86.667px;
    height: 1.333px;
}

html.h5lw #h5lw_hand.h5lw_turn::after
{
    top: 5.667px;	/* 2026-10-16: 띠를 그림자 높이(4.667)만큼 올려 그만큼 내린다 (판 439.7 그대로) */
    height: 1.6px;
}

/* 2026-10-15 CEO 지시: 차례 표시가 가로 줄만 있으면 누구 차례인지 눈에 덜 들어온다 -
   그 사람 정보 상자도 손패 줄과 같은 노란 줄로 감싼다 (두 사람 모두).
   상자 자식 위에 덮이도록 ::after 로 그리고, 줄 색·빛 번짐·깜빡임은 #h5lw_frame::before 와 같다 */
html.h5lw #area_user_info_you.h5lw_turn::after,
html.h5lw #area_user_info_i.h5lw_turn::after
{
    content: "";
    position: absolute;
    /* 2026-10-15 CEO 지적: 줄이 상자 그림 바깥으로 떠 있었다 - 상자 선 바로 위에 겹쳐 그린다.
       둥글기는 그림(421 x 222)의 모서리 반지름 12 를 판 크기로 옮긴 8 */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2.667px solid #ffd84a;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 0 4px 1.333px rgba(255, 216, 74, 0.85), 0 0 9.333px 2.667px rgba(255, 196, 40, 0.4), inset 0 0 4px 0.667px rgba(255, 216, 74, 0.35);
    pointer-events: none;
    -webkit-animation: h5lw_turn_blink 1s ease-in-out infinite;
    animation: h5lw_turn_blink 1s ease-in-out infinite;
}

/* ===== 오른쪽 칸: 프로필 상자 =====
   시안(2340 기준) 상자 1748,16 / 551,16 크기 421 x 222 -> 판 좌표로 1.5 로 나눈 값.
   오른쪽 끝에서 171(시안) = 114(판) 떨어뜨리고, 화면이 더 넓으면 그만큼(--h5l_edge_r) 더 바깥으로 나간다 */
html.h5lw #area_user_info_you,
html.h5lw #area_user_info_i
{
    left: auto !important;
    right: calc(113.333px - var(--h5l_edge_r, 0px)) !important;
    width: 280.667px !important;
    height: 148px !important;
    background: url(../image/2_game/h5p/land/game_profile.png) no-repeat 0 0 !important;
    background-size: 280.667px 148px !important;
}

/* ===== 정보 상자를 먹은 패 줄에 맞춰 늘린다 (2026-10-16 CEO 지시 - 도신의 탑만 빼고) =====
   상대 상자는 아랫변을 그대로 두고 윗변을 먹은 패 줄 윗변(5)까지,
   내 상자는 윗변을 그대로 두고 아랫변을 먹은 패 줄 아랫변(519.667)까지 늘린다.
   상자 그림도 그만큼 길어진 새 그림(421 x 237, 몸통 가운데 가로선을 없앴다)이라 상자 크기 그대로 깔면 된다 -
   아래 띠 두께는 그대로고 몸통만 길어진다.
   2026-10-16 CEO 지시: 상자 안 글자·얼굴은 두 사람 모두 '상자 윗변 기준' 같은 자리에 둔다
   (상대 쪽을 예전 자리에 붙들어 두었더니 내 상자보다 내용이 아래로 처져 보였다) */
html.h5lw.h5lw_fitbox #area_user_info_you
{
    top: calc(5px - var(--h5l_up, 0px)) !important;
    height: 156.667px !important;
    background-position: 0 0 !important;
    background-size: 280.667px 156.667px !important;
    background-origin: border-box !important;
}

html.h5lw.h5lw_fitbox #area_user_info_i
{
    height: 157.333px !important;
    background-position: 0 0 !important;
    background-size: 280.667px 157.333px !important;
    background-origin: border-box !important;
}

/* 새 그림은 아래 띠가 9 쯤 내려갔다 - 띠 안에 적는 전적 줄도 같이 내린다 (띠 윗선에서 3.3 아래) */
html.h5lw.h5lw_fitbox #user_you_history
{
    top: 128.333px !important;
}

html.h5lw.h5lw_fitbox #user_i_history
{
    top: 128.667px !important;
}

/* 상대를 기다리는 동안의 빈 상자도 상대 상자와 같은 크기·자리로 */
html.h5lw.h5lw_fitbox #h5lw_wait_box
{
    /* 2026-10-16 CEO 지적: 대기 중 상자만 선 결정 때보다 아래에 있었다 -
       아래 '위아래 밀기' 규칙이 이 상자의 top 을 !important 로 잡고 있어서였다 (같이 적어 이긴다) */
    top: calc(5px - var(--h5l_up, 0px)) !important;
    height: 156.667px !important;
    background-size: 280.667px 156.667px !important;
}

html.h5lw #area_user_info_you
{
    top: 13.667px !important;	/* 시안 16 + 12 - 5 (2026-10-15 CEO 지시로 5 위) */
}

html.h5lw #area_user_info_i
{
    top: 362.333px !important;	/* 시안 551 - 10 + 5 (2026-10-15 CEO 지시로 5 아래) */
}

/* 레벨 알약 - 2026-10-14 CEO 지시: 만렙(Lv.100)이 들어갈 만큼만 짧게 (시안 118 -> 88).
   프로필 그림 속 알약은 지워 두었으므로 여기서 반투명 검정으로 그린다 - 초록·파랑 판 모두 같은 색이 나온다.
   원본이 깔던 등급 그림(0_common/grade)은 덮어 없앤다 */
html.h5lw #user_you_level,
html.h5lw #user_i_level
{
    left: 7.333px !important;		/* 시안 알약 왼끝 11 */
    top: 13px !important;			/* 시안 알약 윗변 12 - 2026-10-15 CEO 지시로 5 아래 */
    width: 83px !important;			/* 'Lv.100' 글자폭 69.3 + 좌우 여백 - 2026-10-15 CEO 지시로 5 줄임 */
    height: 28.667px !important;
    line-height: 28.667px !important;
    padding-left: 0 !important;		/* 2026-10-15 CEO 지시: 알약 안에서 가운데 정렬 */
    box-sizing: border-box !important;
    border-radius: 14.333px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    font-size: 22.667px !important;
    text-align: center !important;	/* 2026-10-15 CEO 지시 */
    color: #e9f3ea !important;
}

/* 이름 */
html.h5lw #user_you_name,
html.h5lw #user_i_name
{
    left: 14.667px !important;
    top: 45.333px !important;		/* 2026-10-15 CEO 지시로 5 아래 */
    width: 150px !important;
    height: 30.667px !important;
    line-height: 30.667px !important;
    font-size: 25.333px !important;
    text-align: left !important;
    color: #ffffff !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* 보유 금액 */
html.h5lw #user_you_money,
html.h5lw #user_i_money
{
    left: 14.667px !important;	/* 2026-10-14 CEO 지시: 레벨·이름과 같은 왼쪽 선 */
    /* 2026-10-20 CEO 지시: 상자 윗변~레벨 알약 여백(13)과 금액~상자 몽통 아랫변 여백을 같게 한다.
       상자 그림(421x237) 의 아래 띄 윗선은 상자 좌표 124.3 이고, 28px 글자는 칸(33.333) 안에서
       잊크 아래가 29.17 에 끝난다 - 78.667 에서는 여백이 17.1 로 위(13)보다 넓었다. 4 내린다 */
    top: 82.667px !important;	/* 2026-10-15 CEO 지시로 5 아래 + 2026-10-20 CEO 지시로 4 더 */
    width: 233.333px !important;
    height: 33.333px !important;
    line-height: 33.333px !important;
    font-size: 28px !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: #ffe97a !important;
}

/* 이 상대와의 증감(+/-) - 시안처럼 내 상자 아래 밝은 띠 가운데에 적는다.
   상대 쪽은 원본이 늘 감추므로(적군 history 비공개) 자리만 맞춰 둔다 */
html.h5lw #user_you_history,
html.h5lw #user_i_history
{
    position: absolute !important;
    left: 0 !important;
    top: 119.333px !important;		/* 시안 상자 기준 179 */
    width: 280.667px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 22.667px !important;
    text-align: center !important;
    /* 2026-10-19 CEO 지시: 그림자를 없앤다. 색은 핑크로 갔다가 상자 아래 밝은 띠에서
       더 또렷한 짙은 남색으로 다시 정했다 (CEO 지정값) */
    color: #0b2e4e !important;
    text-shadow: none !important;
}

/* ===== 상대가 남긴 패 (작은 뒷면 10칸) ===== */
/* 시안은 상대 상자 아래 밝은 띠 안에 넣는다. 원본은 판 좌표로 직접 그려 두므로 자리만 덮어쓴다 */
html.h5lw #area_you_slot img
{
    top: 133px !important;			/* 상대 상자와 같이 5 위 (2026-10-15 CEO 지시) */
    z-index: 13 !important;			/* 2026-10-14 프로필 상자에 가려 안 보였다 */
    width: 16.5px !important;
    height: 24.667px !important;
}

html.h5lw #ga_you_slot_1  { left: auto !important; right: calc(330.5px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_2  { left: auto !important; right: calc(312px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_3  { left: auto !important; right: calc(293.5px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_4  { left: auto !important; right: calc(275px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_5  { left: auto !important; right: calc(256.5px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_6  { left: auto !important; right: calc(238px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_7  { left: auto !important; right: calc(219.5px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_8  { left: auto !important; right: calc(201px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_9  { left: auto !important; right: calc(182.5px - var(--h5l_edge_r, 0px)) !important; }
html.h5lw #ga_you_slot_10 { left: auto !important; right: calc(164px - var(--h5l_edge_r, 0px)) !important; }

/* 캐릭터 얼굴 - 시안 112 x 112 동그라미, 상자 위로 조금 넘친다 */
html.h5lw #user_you_face,
html.h5lw #user_i_face
{
    /* 2026-10-14 CEO 지시로 시안을 다시 재어 맞췄다 - 시안 2046,26 지름 112 (상자 1749,16 기준) */
    left: 198px !important;
    top: 6.667px !important;
    width: 74.667px !important;
    height: 74.667px !important;
    border-radius: 50% !important;
    /* 2026-10-14 CEO 지시: 흰 테두리는 그림에 이미 들어 있다 - 세로모드와 같게 따로 두르지 않고 그림자만 (h5_portrait.css #user_i_face) */
    border: 0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box !important;
    background: none !important;
    object-fit: cover !important;
}

/* 고 / 흔 / 뻑 는 점수 옆 글자로 옮겼다 - 상자 안 아이콘은 감춘다 */
html.h5lw #user_you_go_img,
html.h5lw #user_you_shake_img,
html.h5lw #user_you_puk_img,
html.h5lw #user_i_go_img,
html.h5lw #user_i_shake_img,
html.h5lw #user_i_puk_img
{
    display: none !important;
}

/* ===== 오른쪽 칸: 나가기 버튼 ===== */
html.h5lw #colorkey1
{
    left: auto !important;
    right: calc(122px - var(--h5l_edge_r, 0px)) !important;
    /* 2026-10-20 CEO 지시: 나가기와 미션은 시안 그대로 붙여 두고(둘 사이 간격은 건드리지 않는다)
       두 개를 한 세트로 보아 위 틈과 아래 틈만 같게 한다.
       세트 높이는 나가기 윗변 ~ 미션 아랫변 = 182 이고,
       상대 상자 아랫변(170.333 - up) ~ 내 상자 윗변(362.333 + dn) 사이에 세우면
       윗변 = 175.333 + (dn - up) / 2 일 때 위아래가 같아진다
       (폰 5 / 태블릿 20 / 16:10 36 / 4:3 65 씩) */
    top: -webkit-calc(175.333px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    top: calc(175.333px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    /* 2026-10-15 CEO 지시: 그림(228 x 74)을 줄이지 않고 세로와 같은 크기로 */
    width: 152px !important;
    height: 49.333px !important;
}

html.h5lw #colorkey1_bg
{
    width: 152px !important;
    height: 49.333px !important;
}

html.h5lw #colorkey1_txt
{
    left: 0 !important;
    top: 0 !important;
    width: 152px !important;
    /* 2026-10-15 CEO 지시: 글자도 세로와 같게 (세로 70 / 36 을 1.5 로 나눈 값) */
    height: 46.667px !important;
    line-height: 46.667px !important;
    font-size: 24px !important;
}

/* ===== 오른쪽 칸: 미션 보드 ===== */
html.h5lw #game_mission
{
    left: auto !important;
    right: calc(113.333px - var(--h5l_edge_r, 0px)) !important;	/* 정보 상자와 같은 선 */
    /* 나가기와 한 세트로 같이 움직인다 - 둘 사이 간격(시안 45.667)은 그대로 (2026-10-20 CEO 지시) */
    top: -webkit-calc(221px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    top: calc(221px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    /* 2026-10-15 CEO 지시: 시안 421 x 204 (판 280.667 x 136.333) - 정보 상자와 같은 폭 */
    width: 280.667px !important;
    height: 136.333px !important;
    background-size: 280.667px 136.333px !important;
}

/* ===== 점수 알약 ===== */
html.h5lw #score_you,
html.h5lw #score_i
{
    left: auto !important;
    right: calc(404px - var(--h5l_edge_r, 0px)) !important;	/* 프로필 상자와 띄운 뒤 2026-10-14 CEO 지시로 1 더 오른쪽 */
    width: 162px !important;
    height: 39.333px !important;
    line-height: 39.333px !important;
    font-size: 30px !important;
    text-align: right !important;		/* 2026-10-14 CEO 지시: 오른쪽 정렬 */
    padding-right: 13.333px !important;
    box-sizing: border-box !important;
    color: #cdf05a !important;
    background: url(../image/2_game/h5p/land/score_bar.png) no-repeat 0 0 !important;
    background-size: 162px 39.333px !important;
}

html.h5lw #score_you
{
    top: 90.333px !important;	/* 시안 143 - 5 (2026-10-15 CEO 지시) */
}

html.h5lw #score_i
{
    top: 394.333px !important;	/* 시안 595 + 4 - 10 + 5 (2026-10-15 CEO 지시로 5 아래) */
}

/* 옛 판 그림에 있던 '점' 글자가 사라지므로 숫자 뒤에 붙여 준다 */
html.h5lw #score_you::after,
html.h5lw #score_i::after
{
    content: '점';
}

/* ===== 고 / 흔 / 뻑 줄 =====
   2026-10-14 CEO 지시: 글자 대신 세로모드와 같은 그림(scorebonus1~3)을 쓴다.
   점수 알약이 세로 점수바보다 좁아(243 : 454) 알약 안이 아니라 알약 옆 줄에 세 쌍을 늘어놓는다 */
.h5lw_gsp
{
    position: absolute;
    display: none;
    right: calc(404px - var(--h5l_edge_r, 0px));	/* 점수 알약과 같은 선 */
    width: 162px;
    height: 25.333px;
    z-index: 12;
    pointer-events: none;
    /* 흐린 그림이 판 바탕에 묻히지 않게 세로 점수바처럼 짙은 바탕을 깐다 */
    background: rgba(23, 44, 33, 0.42);	/* 2026-10-15 CEO 지시: 세로처럼 더 연하게 */
    border-radius: 12.667px;
}

html.h5lw.h5lw_blue .h5lw_gsp
{
    background: rgba(26, 37, 70, 0.42);	/* 2026-10-15 CEO 지시: 세로처럼 더 연하게 */
}

html.h5lw .h5lw_gsp
{
    display: block;
}

#h5lw_gsp_you
{
    top: 135px;			/* 시안 213 - 3 - 5 (2026-10-15 CEO 지시) */
}

#h5lw_gsp_me
{
    top: 363.667px;		/* 시안 549 + 4 - 10 + 5 (2026-10-15 CEO 지시로 5 아래) */
}

/* 그림: 평소에는 흐린 그림, 그 횟수가 1 이상이면 선명한 그림 (세로와 같은 규칙) */
.h5lw_bicon
{
    position: absolute;
    top: 0;
    width: 23.333px;
    height: 25.333px;
    background-repeat: no-repeat;
    background-size: 23.333px 25.333px;
}

.h5lw_bicon_go    { left: 24px;  background-image: url(../image/2_game/h5p/scorebonus1_dim.png); }
.h5lw_bicon_shake { left: 78px;  background-image: url(../image/2_game/h5p/scorebonus2_dim.png); }
.h5lw_bicon_puk   { left: 132px; background-image: url(../image/2_game/h5p/scorebonus3_dim.png); }
.h5lw_bicon_go.h5lw_on    { background-image: url(../image/2_game/h5p/scorebonus1.png); }
.h5lw_bicon_shake.h5lw_on { background-image: url(../image/2_game/h5p/scorebonus2.png); }
.h5lw_bicon_puk.h5lw_on   { background-image: url(../image/2_game/h5p/scorebonus3.png); }

html.h5lw.h5lw_blue .h5lw_bicon_go    { background-image: url(../image/2_game/h5p/tower/scorebonus1_dim.png); }
html.h5lw.h5lw_blue .h5lw_bicon_shake { background-image: url(../image/2_game/h5p/tower/scorebonus2_dim.png); }
html.h5lw.h5lw_blue .h5lw_bicon_puk   { background-image: url(../image/2_game/h5p/tower/scorebonus3_dim.png); }
html.h5lw.h5lw_blue .h5lw_bicon_go.h5lw_on    { background-image: url(../image/2_game/h5p/tower/scorebonus1.png); }
html.h5lw.h5lw_blue .h5lw_bicon_shake.h5lw_on { background-image: url(../image/2_game/h5p/tower/scorebonus2.png); }
html.h5lw.h5lw_blue .h5lw_bicon_puk.h5lw_on   { background-image: url(../image/2_game/h5p/tower/scorebonus3.png); }

/* 숫자: 그림 왼쪽 (0 이면 감춘다 - 세로와 같다) */
.h5lw_bnum
{
    position: absolute;
    display: none;
    top: 3px;		/* 2026-10-15 CEO 지시: 숫자만 3 아래 (글자 그림보다 올라가 보였다) */
    width: 22px;
    height: 25.333px;
    line-height: 25.333px;
    text-align: right;
    /* 2026-10-15 CEO 지시: 세로(#user_i_go 등)와 같은 글자 - 40 / #ffdd4a / 테두리 #163421 을 1.5 로 나눈 값 */
    font-size: 26.667px;
    font-weight: 700;
    color: #ffdd4a;
    text-shadow: 2px 0 0 #163421, -2px 0 0 #163421, 0 2px 0 #163421, 0 -2px 0 #163421,
                 1.333px 1.333px 0 #163421, -1.333px 1.333px 0 #163421, 1.333px -1.333px 0 #163421, -1.333px -1.333px 0 #163421;
    -webkit-transform: skewX(-12deg);
    transform: skewX(-12deg);
}

.h5lw_bnum_go    { left: 0; }
.h5lw_bnum_shake { left: 54px; }
.h5lw_bnum_puk   { left: 108px; }

/* ===== 턴 시계 =====
   원본 가로 자리(x 750 / y 350 · 5)가 고/흔/뻑 줄과 겹쳐 보였다 (2026-10-16 CEO 지적).
   줄(폭 162) 한가운데에 세우고, 내 것은 줄 위 · 상대 것은 줄 아래(판 가운데 쪽)에 둔다.
   그림은 147x105 로 줄여 쓴다 (H5LP_CLOCK_SCALE) */
html.h5lw #ga_count.h5pg_count_i,
html.h5lw #ga_count.h5pg_count_you
{
    left: auto !important;
    right: calc(411.5px - var(--h5l_edge_r, 0px)) !important;	/* 줄 오른끝(404)에서 폭 차이(162-147)의 반만큼 더 */
}

html.h5lw #ga_count.h5pg_count_you
{
    top: calc(166.333px - var(--h5l_up, 0px)) !important;	/* 상대 줄 아랫변(160.333) + 6 */
}

html.h5lw #ga_count.h5pg_count_i
{
    top: calc(252.667px + var(--h5l_dn, 0px)) !important;	/* 내 줄 윗변(363.667) - 6 - 시계 높이(105) */
}

/* 고/흔/뻑 숫자도 상자 밖 글자 줄로 옮겼으므로 상자 안에서는 감춘다 */
html.h5lw #user_you_go,
html.h5lw #user_you_shake,
html.h5lw #user_you_puk,
html.h5lw #user_i_go,
html.h5lw #user_i_shake,
html.h5lw #user_i_puk
{
    display: none !important;
}

/* ===== 나가기 버튼 (시안: 연두 둥근 버튼) ===== */
html.h5lw #colorkey1_bg,
html.h5lw #colorkey1_focus
{
    display: none !important;
}

/* 세로모드와 같은 버튼 그림을 쓴다: 평소 초록(game_bt) / 나가기 예약 중 빨강(game_bt2).
   빨간 그림은 버튼 밖에 미리 깔아 두어 처음 누를 때 깜빡이지 않게 한다 (세로와 같은 방법) */
html.h5lw #colorkey1
{
    background-image: url(../image/2_game/h5p/game_bt.png), url(../image/2_game/h5p/game_bt2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 152px 0;
    background-size: 152px 49.333px, 152px 49.333px;
}

html.h5lw #colorkey1.h5lw_exit_on
{
    background-image: url(../image/2_game/h5p/game_bt2.png);
    background-position: 0 0;
    background-size: 152px 49.333px;
}

/* 도신 대전(파란 판)은 나가기 버튼도 파란 그림으로 (2026-10-19 CEO 지시).
   그림 크기는 초록 버튼과 같은 228x74 라 자리·크기 규칙은 위 것을 그대로 쓴다.
   나가기 예약 중 빨간 그림은 두 판이 같다 - 그때는 이 규칙이 걸리지 않게 :not 으로 뺀다 */
html.h5lw.h5lw_blue #colorkey1:not(.h5lw_exit_on)
{
    background-image: url(../image/2_game/h5p/land/game_bt_blue.png), url(../image/2_game/h5p/game_bt2.png);
}

/* 글자 테두리도 버튼 색에 맞춰 짙은 남색으로 (초록 버튼은 짙은 초록) */
html.h5lw.h5lw_blue #colorkey1:not(.h5lw_exit_on) #colorkey1_txt
{
    text-shadow: -1.333px 0 0 #1a2744, 1.333px 0 0 #1a2744, 0 -1.333px 0 #1a2744, 0 1.333px 0 #1a2744,
        -0.943px -0.943px 0 #1a2744, 0.943px -0.943px 0 #1a2744, -0.943px 0.943px 0 #1a2744, 0.943px 0.943px 0 #1a2744 !important;
}

html.h5lw #colorkey1.h5lw_exit_on #colorkey1_txt
{
    text-shadow: -1.333px 0 0 #6e1714, 1.333px 0 0 #6e1714, 0 -1.333px 0 #6e1714, 0 1.333px 0 #6e1714,
        -0.943px -0.943px 0 #6e1714, 0.943px -0.943px 0 #6e1714, -0.943px 0.943px 0 #6e1714, 0.943px 0.943px 0 #6e1714 !important;
}

/* 2026-10-15 CEO 지시: 세로(#h5pg_exit_txt)와 같은 글자 - 굵기 800, 짙은 초록 테두리.
   2026-10-16 CEO 지적: 네 방향(상하좌우)만 깔았더니 비스듬한 획에서 테두리가 끊겼다 - 대각선 네 방향을 더해 여덟 방향으로 두른다 */
html.h5lw #colorkey1_txt
{
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: -1.333px 0 0 #1f4a1a, 1.333px 0 0 #1f4a1a, 0 -1.333px 0 #1f4a1a, 0 1.333px 0 #1f4a1a,
        -0.943px -0.943px 0 #1f4a1a, 0.943px -0.943px 0 #1f4a1a, -0.943px 0.943px 0 #1f4a1a, 0.943px 0.943px 0 #1f4a1a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* ===== 미션 보드 - 원본은 자리를 안 잡는 칸(static)이라 먼저 자리를 잡아 준다 ===== */
html.h5lw #game_mission
{
    position: absolute !important;
}

/* ===== 점당 글자 ===== */
/* 시안은 판 왼쪽 위에 글자만 크게 둔다 (옛 판 그림의 동전 알약은 사라졌다) */
html.h5lw #jumdang
{
    left: calc(141.333px - var(--h5l_jd_l, 0px)) !important;
    top: 87px !important;			/* 2026-10-15 CEO 지시로 13 위 (상단 띠 아랫선 88 바로 아래) */
    width: 320px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 28px !important;		/* 2026-10-14 CEO 지시로 조금 줄였다 (38.667 -> 28) */
    text-align: left !important;
    font-weight: 700 !important;
    color: #aaff4e !important;		/* 세로모드와 같은 색 */
    text-shadow: none !important;
}



/* 글자 크기는 위에서 세로와 같은 24 로 맞췄다 (세로도 228 폭에 36 - 같은 비율이라 '나가기 예약' 도 들어간다) */

/* 로비 사용자 정보판이 게임 판 위에 남아 있으면 점당 글자와 겹친다 (시안에는 없다) */
html.h5lw #MM_top_userinfo
{
    display: none !important;
}

/* 선(先) 배지 - 2026-10-14 CEO 지시로 세로모드 그림(h5p/first.png)을 쓴다 (JS H5LW.sync_ssun).
   시안 자리: 상자 왼끝에서 178, 크기 49.333 (시안 2016,4 / 74) */
/* 2026-10-15 CEO 지시: 세로와 같은 비로 줄인다 - 세로는 배지 69 : 얼굴 128 (0.539),
   가로 얼굴은 74.667 이므로 배지는 40.25.
   2026-10-16 CEO 지적: 얼굴 기준 자리가 세로와 달랐다. 세로는 배지 왼끝이 얼굴 왼끝에서 10 왼쪽,
   윗변이 얼굴 윗변에서 7 아래다 (876+21 / -9+16 - 예전에는 +21 / +16 을 빼고 셈해 18.1 왼쪽으로 너무 나가 있었다).
   가로 비(0.5833)로 옮기면 왼쪽 5.833 / 아래 4.083 이다.
   얼굴 왼끝은 판 좌표로 1084 + edge_r 이므로 배지 왼끝 1078.167 -> 오른끝에서 161.583 */
html.h5lw #game_ssun
{
    /* 2026-10-19 CEO 지적(도장이 사라진 뒤 패를 나눠 줄 때까지 '선' 이 안 보인다):
       선 결정 동안에는 프로필 상자를 딤 위(40)로 올리는데, 마크는 뎁스가 없어 그 상자 뒤에 깔렸다.
       상자보다 한 칸 위에 둔다 (평소에도 상자 위에 겹쳐 붙는 자리라 그대로 맞다) */
    z-index: 41;
    left: auto !important;
    right: calc(161.583px - var(--h5l_edge_r, 0px)) !important;
    width: 40.25px !important;
    height: 40.25px !important;
}

/* ===== '나가기 예약' 글자 =====
   2026-10-19 CEO 지시: 가로에서도 띄우지 않는다 - 나가기 버튼이 이미 '나가기 취소' 로 바뀌어
   같은 말이 두 번 나왔다 (예약 자체는 그대로 걸린다). 세로는 2026-09-29 에 같은 지시로 이미 뺐다 */
html.h5lw #user_you_exit,
html.h5lw #user_i_exit
{
    display: none !important;
}

/* ===== 도신 대전(파란 판) ===== */
/* 판 그림이 도신 것일 때 h5_landscape_wide.js 가 html 에 h5lw_blue 를 붙인다.
   초록 시안 그림의 색상만 파랑으로 돌린 그림을 쓴다 (정식 파랑 그림이 오면 이 파일만 바꾸면 된다) */
html.h5lw.h5lw_blue #h5lw_base
{
    background: -webkit-linear-gradient(top, #3a6394, #26476c);
    background: linear-gradient(#3a6394, #26476c);
}

html.h5lw.h5lw_blue #h5lw_felt
{
    background-image: url(../image/2_game/h5p/tower/board_tile.jpg);
}

html.h5lw.h5lw_blue #h5lw_hand
{
    /* 2026-10-19 CEO 가 새로 준 그림. 위는 반투명이라 판 결이 비치고 아래로 갈수록 불투명해진다 -
       바탕색을 깔면 비치는 윗쪽이 막히므로 깔지 않는다 */
    background-image: url(../image/2_game/h5p/land/hand_area_bg_blue.png?v=3);
}

html.h5lw.h5lw_blue .h5lw_slot
{
    background-color: #1a2240;
}

html.h5lw.h5lw_blue #area_user_info_you,
html.h5lw.h5lw_blue #area_user_info_i
{
    background-image: url(../image/2_game/h5p/land/game_profile_blue.png?v=2) !important;
}

html.h5lw.h5lw_blue #score_you,
html.h5lw.h5lw_blue #score_i
{
    background-image: url(../image/2_game/h5p/land/score_bar_blue.png) !important;
}

html.h5lw.h5lw_blue #h5lw_top
{
    background-image: url(../image/2_game/h5p/land/hand_area_top_blue.png?v=5);
}

/* ===== 손패 테두리 =====
   2026-10-14 CEO 지시: 처음부터 둘러싸고 있던 노란 줄은 없앤다 - '내 차례' 일 때만 보여 준다.
   모양·깜빡임은 위 #h5lw_frame::before 가 세로모드와 같게 그린다 (2026-10-15 CEO 지적) */

/* ===== 미션 보드 =====
   2026-10-14 CEO 지시: 미션이 정해지기 전에는 빈 틀이 보이면 안 된다 (세로모드와 같은 때에 나타난다).
   h5_landscape_wide.js 의 H5LW.sync_mission 이 미션이 뽑히면 h5lw_mis_on 을 붙인다 */
html.h5lw #game_mission
{
    display: none !important;
}

html.h5lw.h5lw_play #game_mission.h5lw_mis_on
{
    display: block !important;
}

/* 미션 보드 등장 (2026-10-15 CEO 지시: 세로모드와 같은 연출을 가로에도).
   ① 바닥판 한가운데(가운데 더미 자리)에서 작게 -> 크게 떠 보여 주고 사라진다
   ② 이어서 화면 오른쪽 밖에서 제자리까지 밀려 들어온다 (세로는 왼쪽에 있어 왼쪽에서 들어온다)
   거리(--h5lw_mis_dx/dy)와 차례는 h5_landscape_wide.js 의 H5LW.mis_intro 가 넣는다 */
html.h5lw #game_mission.h5lw_mis_slide
{
    -webkit-animation: h5lw_mis_slide_in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
    animation: h5lw_mis_slide_in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@-webkit-keyframes h5lw_mis_slide_in
{
    from { -webkit-transform: translateX(calc(100% + 113.333px + var(--h5l_edge_r, 0px))); }
    to   { -webkit-transform: translateX(0); }
}

@keyframes h5lw_mis_slide_in
{
    from { transform: translateX(calc(100% + 113.333px + var(--h5l_edge_r, 0px))); }
    to   { transform: translateX(0); }
}

/* 첫 등장: 판 한가운데에서 2배 크기로. 길이 1.1s 는 H5LW_MIS_INTRO_MS 와 같아야 한다 */
html.h5lw #game_mission.h5lw_mis_intro
{
    z-index: 1500 !important;
    -webkit-animation: h5lw_mis_intro_pop 1.1s ease-out both;
    animation: h5lw_mis_intro_pop 1.1s ease-out both;
}

@-webkit-keyframes h5lw_mis_intro_pop
{
    0%     { -webkit-transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(0.4); opacity: 0; }
    29.1%  { -webkit-transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(2.3); opacity: 1; }
    43.6%  { -webkit-transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(2); opacity: 1; }
    70.9%  { -webkit-transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(2); opacity: 1; }
    100%   { -webkit-transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(0.6); opacity: 0; }
}

@keyframes h5lw_mis_intro_pop
{
    0%     { transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(0.4); opacity: 0; }
    29.1%  { transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(2.3); opacity: 1; }
    43.6%  { transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(2); opacity: 1; }
    70.9%  { transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(2); opacity: 1; }
    100%   { transform: translate(var(--h5lw_mis_dx, 0px), var(--h5lw_mis_dy, 0px)) scale(0.6); opacity: 0; }
}

/* ===== 매칭 대기 화면 (S_WAIT) ===== */
/* 안내 상자를 조금 올리고, 글 아래에 캐릭터 컷이 들어갈 칸을 연다 (세로모드와 같은 구성) */
html.h5l #wa_msg
{
    top: 127px !important;	/* 2026-10-15 CEO 지시로 7 아래 */
}

html.h5l #wa_msg .h5pg_wait_gap
{
    height: 140px;
}

html.h5l #wa_ok,
html.h5l #wa_back
{
    top: 427px !important;	/* 2026-10-15 CEO 지시로 7 아래 */
}

/* 안내 글 아래 캐릭터 컷 */
#h5lw_wait_cut
{
    position: absolute;
    display: none;
    left: 570px;			/* 상자(340~940) 가운데 */
    top: 243px;			/* 안내 상자와 같이 7 아래 (2026-10-15 CEO 지시) */
    width: 140px;
    height: 140px;
    z-index: 25;
    pointer-events: none;
}

html.h5lw.h5lw_wait #h5lw_wait_cut
{
    display: block;
}

/* 누군가 들어오면(입장 안내가 뜨면) 기다리던 캐릭터 컷은 바로 거둔다 (2026-10-16 CEO 지시).
   표는 h5_landscape_wide.js 의 H5LW.sync_wait 이 단다 */
html.h5lw.h5lw_entered #h5lw_wait_cut
{
    display: none !important;
}

#h5lw_wait_cut img
{
    display: block;
    width: 100%;
    height: 100%;
}

/* 아직 상대가 없을 때 상대 프로필 자리에 두는 빈 상자 (세로 #h5pg_wait_face / #h5pg_wait_chip 과 같은 뜻) */
#h5lw_wait_box
{
    position: absolute;
    display: none;
    right: calc(113.333px - var(--h5l_edge_r, 0px));
    top: 13.667px;		/* 상대 상자와 같은 자리 (2026-10-15 CEO 지시로 5 위) */
    width: 280.667px;
    height: 148px;
    background: url(../image/2_game/h5p/land/game_profile.png) no-repeat 0 0;
    background-size: 280.667px 148px;
    z-index: 11;
    pointer-events: none;
}

html.h5lw.h5lw_blue #h5lw_wait_box
{
    background-image: url(../image/2_game/h5p/land/game_profile_blue.png?v=2);
}

/* 상대가 정해질 때까지 둔다 - 선 결정 화면에서 갑자기 사라지면 자리가 비어 보인다 (세로와 같은 규칙) */
html.h5lw.h5lw_noyou #h5lw_wait_box
{
    display: block;
}

/* 빈 얼굴: 점 세 개가 뛴다 (세로와 같은 모양) */
#h5lw_wait_face
{
    position: absolute;
    left: 198px;
    top: 6.667px;
    width: 74.667px;
    height: 74.667px;
    border-radius: 50%;
    background: #6aac50;
    border: 4px solid #ffffff;
    box-sizing: border-box;
    text-align: center;
    font-size: 0;
}

html.h5lw.h5lw_blue #h5lw_wait_face
{
    background: #4a7fae;
}

#h5lw_wait_face i
{
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 28px 4px 0;
    border-radius: 50%;
    background: #15491a;
    opacity: 0.75;
    -webkit-animation: h5lw_dot_hop 1.1s ease-in-out infinite;
    animation: h5lw_dot_hop 1.1s ease-in-out infinite;
}

#h5lw_wait_face i:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
#h5lw_wait_face i:nth-child(3) { -webkit-animation-delay: 0.3s;  animation-delay: 0.3s; }

@-webkit-keyframes h5lw_dot_hop
{
    0%, 60%, 100% { -webkit-transform: translateY(0); opacity: 0.55; }
    30%           { -webkit-transform: translateY(-8px); opacity: 1; }
}

@keyframes h5lw_dot_hop
{
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30%           { transform: translateY(-8px); opacity: 1; }
}

/* '상대' 글자 - 게임 중 레벨 자리와 같은 줄 */
/* 2026-10-14 CEO 지시: 레벨 알약 자리의 '상대' 대신 둘째 줄(이름 자리)에 '상대 매칭 중' 이라고 적는다 */
#h5lw_wait_chip
{
    position: absolute;
    left: 14.667px;
    top: 40.333px;
    width: 200px;
    height: 30.667px;
    line-height: 30.667px;
    font-size: 25.333px;
    white-space: nowrap;
    color: #ffffff;
}

/* ===== 매칭 대기 안내 상자 · 버튼 =====
   2026-10-14 CEO 지시: 오른쪽 칸을 뺀 나머지 폭의 가운데에 둔다.
   2026-10-14 CEO 가 다시 표시한 두 줄(판 147.5 ~ 854) 사이 가운데 = 500.
   원래는 판 한가운데(640)였다 */
html.h5lw #wa_msg
{
    left: calc(var(--h5l_pop_cx, 500px) - 300px) !important;
}

/* 2026-10-14 CEO 지시: 세로와 같게 '연습 게임' 을 오른쪽에 둔다 (나가기가 왼쪽) */
html.h5lw #wa_ok
{
    left: calc(var(--h5l_pop_cx, 500px) + 15px) !important;
}

html.h5lw #wa_back
{
    left: calc(var(--h5l_pop_cx, 500px) - 265px) !important;
}

html.h5lw #h5lw_wait_cut
{
    left: calc(var(--h5l_pop_cx, 500px) - 70px);
}

/* ===== 선 결정 캐릭터 컷 =====
   2026-10-15 CEO 지시(2차): 팝업 안이 아니라 팝업 아래에 띄운다 (패를 가리면 안 된다).
   팝업은 판 좌표로 왼끝 229 / 윗변 55 / 542 x 411 이라 아래끝이 466 - 그 바로 아래, 팝업 가로 가운데(500)에
   컷 240 x 240 을 둔다 (왼쪽 위 모서리 380, 472). 화면이 더 넓으면 팝업과 같이 따라 움직인다 */
#h5lw_sun_cut
{
    position: absolute;
    display: none;
    /* 2026-10-19 CEO 지시: 컷을 조금 줄여 팝업 아래끝(466)과 판 아래끝(720) 사이에 위아래 여백을 둔다 */
    left: calc(var(--h5l_pop_cx, 500px) - 100px);
    top: 480px;
    width: 200px;
    height: 200px;
    z-index: 3001;		/* 날아가는 패(#h5pg_sun_layer 3000) 위 */
    pointer-events: none;
}

#h5lw_sun_cut img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html.h5lw #h5lw_sun_cut.h5lw_on
{
    display: block;
}

/* 도신 대전만 판 왼쪽 빈 자리로 옮긴다 (2026-10-19 CEO 지적: 팝업 아래 가운데에 두니 'n월' 말풍선을 가렸다).
   도신은 말풍선 때문에 팝업이 170 까지 내려와 아래가 좁다 - 인게임 상황 캐릭터 컷과 같은 자리에 세운다.
   실시간 대전은 팝업이 예전 자리(55)라 아래가 넉넉하므로 그대로 팝업 아래 가운데에 둔다 */
html.h5lw.h5lw_blue #h5lw_sun_cut
{
    left: 4px;
    /* 2026-10-19 CEO 지시: 손패 칸 쪽으로 더 내린다 (아랫변 438.667 -> 535, 선 결정 때는 손패가 비어 있다) */
    top: 323px;
    width: 212px;
    height: 212px;
}


/* ===== 흔들기 종 아이콘 =====
   2026-10-14 CEO 지시로 그림을 46x49 -> 138x147 고해상도로 다시 받았다 (늘려 써서 흐렸다).
   원본 코드는 그림 크기 그대로 그리므로 보이는 크기는 예전과 같게 묶어 둔다.
   2026-10-16 CEO 지시로 가로에만 건다 - 스코프 없이 걸었더니 세로에서도 가로 크기(46)가 되어
   세로 종이 예전(69)보다 작아졌다. 세로 값은 css/h5_portrait.css 에 따로 있다 */
html.h5l img[src*="2_game/ui/bell.png"]
{
    width: 46px !important;
    height: 49px !important;
}

/* ===== 폭탄 아이콘 =====
   2026-10-15 CEO 지시로 96x56 -> 288x168 고해상도로 다시 받았다 (흐려 보였다).
   종과 같이 보이는 크기를 예전과 같게 묶어 둔다 - 가로 전용이고 세로 값은 css/h5_portrait.css 에 있다 */
html.h5l img[src*="2_game/ui/bomb1.png"],
html.h5l img[src*="2_game/ui/bomb2.png"],
html.h5l img[src*="2_game/ui/bomb3.png"]
{
    width: 96px !important;
    height: 56px !important;
}

/* ===== 등급 아이콘(19세 이용가 / 사행성) =====
   원본(util_Function.js icon_19)이 판 시작 때 4초간 띄운다. 세로는 S_logo_portrait.js 가 첫 표시를 건너뛰는데
   가로에는 그 처리가 없어 판 위에 떠 있었다 (2026-10-14 CEO 지시로 가린다).
   법정 표시는 앱 본체(세로)가 맡는다 - 세로에서는 그대로 보인다 */
html.h5l #icon_19_div
{
    display: none !important;
}

/* ===== 상대 남은 패 빈 자리 =====
   2026-10-14 CEO 지적: 패가 얹히는 빈 칸이 가로에 없었다. 세로(h5pg_you_ph)와 같은 그림·같은 자리로 깐다 */
.h5lw_you_ph
{
    position: absolute;
    display: none;
    top: 133px;		/* 상대 상자와 같이 5 위 (2026-10-15 CEO 지시) */
    width: 16.5px;
    height: 24.667px;
    background: url(../image/2_game/h5p/backcard_empty.png) no-repeat 0 0;
    background-size: 100% 100%;
    z-index: 12;		/* 프로필 상자 위, 실제 남은 패(13) 아래 */
    pointer-events: none;
}

html.h5lw.h5lw_play .h5lw_you_ph,
html.h5lw.h5lw_sun .h5lw_you_ph
{
    display: block;
}

html.h5lw.h5lw_blue .h5lw_you_ph
{
    background-image: url(../image/2_game/h5p/tower/backcard_empty.png);
}

html.h5lw #h5lw_you_ph_1  { right: calc(330.5px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_2  { right: calc(312px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_3  { right: calc(293.5px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_4  { right: calc(275px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_5  { right: calc(256.5px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_6  { right: calc(238px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_7  { right: calc(219.5px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_8  { right: calc(201px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_9  { right: calc(182.5px - var(--h5l_edge_r, 0px)); }
html.h5lw #h5lw_you_ph_10 { right: calc(164px - var(--h5l_edge_r, 0px)); }


/* ===== 팝업 자리 =====
   2026-10-15 CEO 지시: 먹을 패 선택 팝업을 6 올리고(61 -> 55), 선 결정 팝업도 같은 높이로.
   둘 다 542 x 411 짜리 같은 판이다. 고/스톱 팝업(.h5pg_gs)은 따로 자리를 잡으므로 뺀다 */
/* 2026-10-20 CEO 지적(4차): 이 규칙이 h5_landscape.css 의 '두 줄 가운데' 값을 덮고 있었다 -
   먹을 패 고르기만 55 에 서고 패 바꾸기·흔들기는 56.833 이었다. 셋을 같은 식으로 맞춘다.
   위줄을 표시등 띠만큼 덜 밀면서 두 줄이 같은 양만큼 벌어지지 않게 됐으므로,
   가운데는 (내려간 양 - 올라간 양)의 절반만큼 아래로 간다 (폰은 둘 다 0 이라 56.833 그대로) */
html.h5lw #ga_popup_div:not(.h5pg_gs)
{
    top: -webkit-calc(56.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    top: calc(56.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
}

/* 선 결정 팝업 - 2026-10-16 CEO 지시(2차): 딤이 깔려도 선 결정 팝업만은 예전 자리 그대로 둔다.
   매칭 대기 안내·먹을 패 고르기와 같은 '점당~점수 알약 사이' 가운데다 (고/스톱·패 바꾸기만 화면 전체 가운데) */
html.h5lw #SU_popup
{
    left: calc(var(--h5l_pop_cx, 500px) - 271px) !important;
    /* 2026-10-20: 먹을 패 고르기와 같은 높이를 쓰기로 한 팝업이라 같은 식으로 따라간다.
       도신 대전은 H5LP.place_sun_popup 이 말풍선 아래로 다시 잡는다 (인라인이라 이 값을 이긴다) */
    top: -webkit-calc(56.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
    top: calc(56.833px + (var(--h5l_dn, 0px) - var(--h5l_up, 0px)) / 2) !important;
}

/* 2026-10-20 CEO 지적(태블릿 도신 대전에서 왼쪽 캐릭터 컷과 팝업이 겹친다):
   도신 대전은 선 결정 캐릭터 컷이 판 왼쪽(4 ~ 216)에 선다. 판 밖 여분이 없는 태블릿 비율은
   팝업 가운데(--h5l_pop_cx)가 481.3 이라 팝업 왼변이 210.3 까지 와서 5.7 겹쳤다
   (여분이 넉넉한 폰은 226.7 이라 10.7 띄어져 있다).
   컷 오른끝에서 폰과 같은 틈을 두고, 그보다 왼쪽으로는 가지 않게 막는다 */
html.h5lw.h5lw_blue #SU_popup
{
    left: -webkit-calc(var(--h5l_pop_cx, 500px) - 271px) !important;
    left: max(calc(var(--h5l_pop_cx, 500px) - 271px), 226.7px) !important;
}

/* 선 결정 - 뒤집은 패 위에 뜨는 '몇 월' 말풍선 (2026-10-16 CEO 지시).
   말풍선 그림을 고해상도(72x87 -> 224x261)로 다시 받고 그림 속 '月' 을 뺐다 -
   글자는 S_selectsun.js 가 'n월' 을 다 적고, 여기서는 보이는 크기와 글자 칸만 잡는다.
   보이는 크기는 예전과 같은 높이(87)에 새 그림 비율대로 폭 74.667.
   글자 칸은 말풍선 동그라미 한가운데에 오게 margin 으로만 민다 (자리는 원본이 칸마다 인라인으로 넣는다):
     내 쪽  꼬리가 위  -> 동그라미 가운데가 그림 위에서 49.3
     상대 쪽 꼬리가 아래 -> 37.0  (원본 글자 칸은 그림 위에서 37 / 21 에 선다) */
html.h5l #SU_choice_i,
html.h5l #SU_choice_you
{
    width: 74.667px !important;
    height: 87px !important;
}

html.h5l #SU_choice_i_txt,
html.h5l #SU_choice_you_txt
{
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif !important;
    font-weight: 800 !important;
    font-size: 26px !important;		/* '12월' 도 동그라미 안에 든다 (동그라미 지름 70.6) */
    /* 2026-10-16 CEO 지시: 그림자 빼고 글자색은 붉은 톤으로 */
    color: #c3140c !important;
    text-shadow: none !important;
    width: 70px !important;
    height: 30px !important;
    line-height: 30px !important;
}

html.h5l #SU_choice_i_txt
{
    margin: -2.7px 0 0 -2.7px !important;
}

html.h5l #SU_choice_you_txt
{
    margin: 1px 0 0 -2.7px !important;
}

/* ===== 선 결정 딤 =====
   2026-10-15 CEO 지적: 두 사람의 프로필 그림·레벨·닉네임이 딤 뒤로 가려져 잘 보이지 않는다.
   원본 딤(#S_SELECTSUN_div)은 게임판 상자 밖에 깔리는데, 게임판 상자(#S_GAME_div)에는 자리 보정용
   transform 이 걸려 있어 그 안이 따로 쌓임 맥락이 된다 - 상자 안의 프로필은 z-index 를 아무리 올려도
   밖의 딤 위로 올라갈 수가 없다. 세로모드(#h5pg_sun_dim)와 같이 딤을 상자 안에 깔고 원본 딤은 지운다.
   딤 칸은 H5LW.fix_sun_dim 이 상자 안에 만들어 둔다 (판 밖 좌우는 .h5lw_dim 이 같은 세기로 덮는다) */
html.h5lw #S_SELECTSUN_div
{
    background: transparent !important;
    z-index: 50 !important;		/* 팝업은 새 딤(게임판 상자 안 30)보다 위에 떠야 한다 */
}

html.h5lw #h5lw_sun_dim
{
    position: absolute;
    display: none;
    /* 2026-10-15 CEO 지적: 정보 상자는 판 오른쪽 밖까지 나가 있어 판 밖 딤(.h5lw_dim)에 가렸다.
       이 딤 하나로 판 밖까지 덮고, 그동안 판 밖 딤은 끈다 (H5LW.sync_dim) - 그래야 상자가 딤 위로 온다 */
    left: -50%;
    top: calc(0px - var(--h5l_oy_t, 0px));
    width: 200%;
    height: calc(100% + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px));
    background: rgba(0, 0, 0, 0.45);	/* 세기는 h5_landscape_polish.js H5LP_SUN_DIM 과 같아야 한다 */
    z-index: 30;		/* 패·이펙트 위, 프로필 상자(40) 아래 */
    pointer-events: none;
}

html.h5lw.h5lw_sun #h5lw_sun_dim
{
    display: block;
}

/* 두 사람 프로필 상자(얼굴·레벨·닉네임)와 상대 자리표시는 딤 위로 올린다 */
html.h5lw.h5lw_sun #area_user_info_you,
html.h5lw.h5lw_sun #area_user_info_i,
html.h5lw.h5lw_sun #h5lw_wait_box
{
    z-index: 40 !important;
}

/* ===== 손패 위 아이콘 (2026-10-15 CEO 지시: 세로모드 기준으로 카드에 맞춘다) =====
   세로(h5pg_wrap_slot_top)와 같은 방법: 화살표·종·폭탄은 카드 가로 가운데,
   회색 모서리 틀은 그림 속 테두리 네모(x 6~347 / y 1~500)가 카드와 같아지도록 크기·자리를 잡는다.
   자리는 h5_landscape_wide.js 의 H5LW.fit_slot_top 이 넣는다 */
html.h5lw #area_i_slot_top img.h5lw_top_center
{
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

html.h5lw #area_i_slot_top img.h5lw_top_fit
{
    width: calc(122px * 354 / 342) !important;
    height: calc(180px * 520 / 500) !important;
    margin-left: calc(122px * -6 / 342);
    margin-top: calc(180px * -1 / 500);
}

/* 내 차례에는 손패 위 화살표가 위아래로 움직인다 (세로와 같은 연출, 종·폭탄은 가만히) */
html.h5lw #area_i_slot_top.h5lw_my_turn img[src*="arrow"]
{
    -webkit-animation: h5lw_icon_bob 0.9s ease-in-out infinite;
    animation: h5lw_icon_bob 0.9s ease-in-out infinite;
}

/* 2026-10-15 CEO 지적(세로와 견주기): 세로는 래퍼가 1.5배로 커지는 안쪽에서 10 을 움직여
   판 기준으로는 6.667 이다 - 가로에서 10 을 쓰면 패에 견주어 1.5배 더 크게 흔들린다 */
@-webkit-keyframes h5lw_icon_bob
{
    0%, 100% { -webkit-transform: translate(-50%, 0); }
    50%      { -webkit-transform: translate(-50%, -6.667px); }
}

@keyframes h5lw_icon_bob
{
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -6.667px); }
}

/* ===== 트로피 '뿅' (2026-10-15 CEO 지시: 세로와 같이 미션 보드가 뜰 때 사라진다) =====
   복제 그림을 띄워 움직이는 일은 세로용 h5pg_trophy_pop 이 그대로 해 준다 -
   그 그림에 걸리는 연출(@keyframes h5pg_trophy_pop, css/h5_portrait.css)만 가로에서도 걸어 준다 */
html.h5lw .h5pg_trophy_pop
{
    position: absolute;
    /* 2026-10-19 CEO 지적(가로에서 사라지는 모션이 안 보인다): 미션 보드가 등장할 때
       판 한가운데에서 2배로 커지며 z-index 1500 으로 올라와 트로피 자리를 덮었다 -
       '뿅' 은 그 위에서 보여야 한다 (998 -> 1600) */
    z-index: 1600;
    object-fit: contain;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: h5pg_trophy_pop 0.52s ease-in forwards;
    animation: h5pg_trophy_pop 0.52s ease-in forwards;
}

/* ===== 선 결정: 선공 프로필 반짝임 (2026-10-15 CEO 지적: 가로에서 빠져 있었다) =====
   공용 연출(h5_portrait_sun.js 가 붙이는 .h5p_sun_glow)은 box-shadow 를 깜빡이는데,
   가로 얼굴 그림은 위 규칙에서 box-shadow 를 !important 로 못박아 두어 그 위를 덮지 못했다
   (연출은 !important 선언을 이기지 못한다). 가로에서는 같은 빛을 filter 로 그려 깜빡인다.
   세기는 세로 값(번짐 14 -> 36, 1080 기준)을 판 좌표로 1.5 나눈 값이다 */
html.h5lw #user_you_face.h5p_sun_glow,
html.h5lw #user_i_face.h5p_sun_glow
{
    -webkit-animation: h5lw_sun_glow_pulse 0.9s ease-in-out infinite alternate;
    animation: h5lw_sun_glow_pulse 0.9s ease-in-out infinite alternate;
}

@-webkit-keyframes h5lw_sun_glow_pulse
{
    from { -webkit-filter: drop-shadow(0 0 9.333px rgba(255, 216, 74, 0.7)); }
    to   { -webkit-filter: drop-shadow(0 0 24px rgba(255, 216, 74, 1)) drop-shadow(0 0 46.667px rgba(255, 196, 40, 0.6)); }
}

@keyframes h5lw_sun_glow_pulse
{
    from { filter: drop-shadow(0 0 9.333px rgba(255, 216, 74, 0.7)); }
    to   { filter: drop-shadow(0 0 24px rgba(255, 216, 74, 1)) drop-shadow(0 0 46.667px rgba(255, 196, 40, 0.6)); }
}

/* ===== 나눠 주는 패는 UI 위로 (2026-10-15 CEO 지적) =====
   패를 나눠 줄 때 날아가는 패(#area_ani 안의 그림)와 정보 상자는 둘 다 뎁스가 없어
   그리는 차례에 따라 패가 상자 뒤로 깔릴 수 있었다. 패 칸에 뎁스를 줘 늘 위에 오게 한다.
   선 결정 딤(30)보다는 아래라 선 결정 화면에는 영향이 없다 */
html.h5lw #area_ani
{
    position: relative;
    z-index: 20;
}


/* ===== 팝업 뒤층 (2026-10-16 CEO 지적: 팝업과 다른 UI 위아래가 섞인다) =====
   게임 팝업(#ga_popup_div 등)은 게임 상자(#S_GAME_div) 안에 있고, 새로 깐 판 밖 UI
   (고/흔/뻑 줄 12, 상대 자리표시 11)는 그 상자 밖 형제다. 상자에 자리 보정용 transform 이
   걸려 있어 안쪽 층(z-index 1000)을 아무리 올려도 밖 형제 위로 못 올라간다.
   팝업이 떠 있는 동안(H5LP.sync_popup 이 단 html.h5lp_pop)만 밖 UI 를 판 아래로 내린다 */
html.h5lw.h5lp_pop .h5lw_gsp,
html.h5lw.h5lp_pop #h5lw_wait_box
{
    z-index: 0;
}

/* '패를 바꾸고 싶으신가요?' 팝업은 게임 상자 밖 형제라 새 UI 에 가려 있었다 - 맨 위로 */
html.h5lw #S_POPUPYN_div
{
    /* 원본은 위치값이 없는 칸이라 z-index 가 먹히지 않는다 - 크기 0 으로 제자리에 세운다
       (안에 든 어두움·판은 모두 absolute 라 자리는 그대로다) */
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 1000;
}

/* 캐릭터 말풍선(#dialogue_div) 도 게임 상자 밖 형제라 새 UI 뒤로 가려졌다 (2026-10-16 CEO 지적).
   선 결정 때 올라가는 상대 자리표시(40) 보다 위로 둔다 */
html.h5lw #dialogue_div
{
    /* 원본은 위치값이 없는 칸이라 z-index 가 먹히지 않는다 - 크기 0 으로 제자리에 세운다.
       안에 든 그림·글은 모두 absolute 라 자리는 그대로다 */
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 41;
}


/* ===== 판 위아래 빈 자리 채우기 (2026-10-16 CEO 지적: 태블릿 비율이 이상하다) =====
   20:9 폰은 판(1280 x 720)을 넣으면 좌우가 남아 새 바탕이 그만큼 옆으로 뻗었다.
   16:10 태블릿·아이패드는 반대로 위아래가 남아(판 좌표 80 ~ 240) 거기에 본문 바탕인 검정이 드러났다.
   남는 양(--h5l_oy_t / --h5l_oy_b)은 h5_landscape_wide.js 의 H5LW.place 가 재서 넣는다.
   바탕색과 판 결은 무늘가 이어지는 그림이라 그대로 더 내뻗어도 눈에 띄지 않는다 */
html.h5lw #h5lw_base
{
    top: calc(0px - var(--h5l_oy_t, 0px));
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px));
}

/* 판 위쪽 빈 자리는 바탕색(#h5lw_base)이 그대로 채운다 - 상대 먹은 패 띄와 비슷한 짙은 녹이라 이어져 보인다.
   판 결(#h5lw_felt)을 위로 더 내뻗으면 띄 위만 밝은 초록으로 떠서 마디가 드러난다 */

/* 2026-10-20 CEO 지시: 위줄을 내려 생긴 '위쪽 빈 띠' 에만 단색을 깐다.
   높이는 '남는 자리(oy_t) - 밀어낸 값(up)' 이라, 밀 자리가 없는 폰에서는 0 이 되어 아무것도 안 깔린다.
   #h5lw_base 윗변이 곧 화면 윗변이므로 그 위에서부터 띠 윗변까지가 이 칸이다 */
html.h5lw #h5lw_base::before
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: -webkit-calc(var(--h5l_oy_t, 0px) - var(--h5l_up, 0px));
    height: calc(var(--h5l_oy_t, 0px) - var(--h5l_up, 0px));
    background: #28462d;	/* 실시간 대전 (녹색 판) */
    pointer-events: none;
}

html.h5lw.h5lw_blue #h5lw_base::before
{
    background: #1d3b5f;	/* 도신 대전 (파란 판) */
}

/* 손패 띄는 아래로만 더 간다 - 그림 높이도 같은 만큼 늘려 결이 끊기지 않게 한다 */
html.h5lw #h5lw_hand
{
    /* 2026-10-16 CEO 지적: 그림 맨 위 7줄(반투명 그림자)을 잘라 내서 그림자가 없었다.
       잘라 내지 않고 그림을 원래 비(354 / 1.5 = 236)로 두고, 띠 자체를 그림자 높이(4.667)만큼 올려
       밝은 선은 예전과 같은 438.667 에 오게 한다. 그림 아래 빈 자리는 ::before 가 같은 색으로 이어 붙인다
       (그림을 통째로 늘이면 윗쪽 그림자·밝은 선까지 같이 늘어난다) */
    top: calc(434px + var(--h5l_dn, 0px));
    height: calc(286px + var(--h5l_oy_b, 0px) - var(--h5l_dn, 0px));
    background-position: 0 0 !important;
    background-size: 64.667px 236px !important;
}

/* 그림 몸통과 같은 색을 띠 끝까지 이어 붙인다 (그림 맨 아랫줄 색·진하기 그대로) */
html.h5lw #h5lw_hand::before
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 236px;
    bottom: 0;
    background: rgb(40, 70, 45);	/* 새 그림(2026-10-19) 맨 아랫줄 색 - 아래쪽은 불투명이다 */
    pointer-events: none;
}

html.h5lw.h5lw_blue #h5lw_hand::before
{
    background: rgb(45, 73, 110);	/* 도신 새 그림 맨 아랫줄 색 (실시간 대전과 같은 규칙) */
}

/* 판 밖 딕도 위아래로 같이 늘린다 (선 결정·결과 화면에서 빈 자리만 밝게 남지 않게) */
.h5lw_dim
{
    top: calc(0px - var(--h5l_oy_t, 0px));
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px));
}

#h5lw_dim_t,
#h5lw_dim_b
{
    left: calc(0px - var(--h5l_ox_l, 0px));
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px));
    height: auto;
}

#h5lw_dim_t
{
    /* 2026-10-16 CEO 지적: 화면 맨 위에 1px 만큼 구멍이 나 보였다.
       여분을 반올림해 재기 때문에 생기는 틈이다 - 위아래로 1px 씩 더 덮는다 */
    top: calc(-1px - var(--h5l_oy_t, 0px));
    height: calc(var(--h5l_oy_t, 0px) + 2px);
}

#h5lw_dim_b
{
    top: 719px;
    height: calc(var(--h5l_oy_b, 0px) + 2px);
}


/* ===== 위아래 남는 자리 쓰기 (2026-10-16 CEO 지시) =====
   태블릿처럼 위아래가 남는 화면은 빈 띄만 두꺼워지고 가운데 바닥이 눌려 보였다.
   윗줄(점당·상대 칸·상대 남은 패)은 위로, 아랫줄(내 칸·손패)은 아래로 같은 값만큼 밀어
   그만큼 가운데를 넓힌다. 미션판·나가기·바닥패는 제자리다 (CEO 표시).
   밀 값(--h5l_up / --h5l_dn)은 h5_landscape_wide.js 의 H5LW.place 가 넣는다 - 폰은 0 이라 그대로다 */
html.h5lw #h5lw_felt
{
    /* 2026-10-16 CEO 지적: 손패 띠 그림(hand_area_bg)은 몸통이 알파 0.5 짜리 반투명인데,
       판 결이 띠 바로 위에서 끝나 띠 뒤에 단색만 깔려 투명한 느낌이 안 났다.
       결을 판 아래끝까지 깔아 띠 뒤로 무늘가 비치게 한다 */
    top: calc(0px - var(--h5l_up, 0px));
    height: calc(720px + var(--h5l_up, 0px) + var(--h5l_oy_b, 0px));
}

/* 2026-10-20: 새 초록 띠 그림은 선이 2줄 올라가 있어 띠를 1.333 내려 보정했었는데,
   CEO 지시로 그림을 옛 것으로 되돌리면서 보정도 같이 걷었다 (두 그림 모두 선이 130줄) */
html.h5lw #h5lw_top
{
    top: calc(-2.667px - var(--h5l_up, 0px));
}

html.h5lw #jumdang
{
    top: calc(87px - var(--h5l_up, 0px)) !important;
}

html.h5lw #area_user_info_you,
html.h5lw #h5lw_wait_box
{
    top: calc(13.667px - var(--h5l_up, 0px)) !important;
}

html.h5lw #score_you
{
    top: calc(90.333px - var(--h5l_up, 0px)) !important;
}

html.h5lw #h5lw_gsp_you
{
    top: calc(135px - var(--h5l_up, 0px));
}

html.h5lw #area_you_slot img,
html.h5lw .h5lw_you_ph
{
    top: calc(133px - var(--h5l_up, 0px)) !important;
}

html.h5lw #area_user_info_i
{
    top: calc(362.333px + var(--h5l_dn, 0px)) !important;
}

html.h5lw #score_i
{
    top: calc(394.333px + var(--h5l_dn, 0px)) !important;
}

html.h5lw #h5lw_gsp_me
{
    top: calc(363.667px + var(--h5l_dn, 0px));
}

html.h5lw #h5lw_frame
{
    top: calc(504px + var(--h5l_dn, 0px));
}

html.h5lw .h5lw_slot
{
    top: calc(535px + var(--h5l_dn, 0px));
}


/* ===== 고/스톱 팝업 뒤 어두움 (2026-10-16 CEO 지적: 태블릿에서 두 단으로 갈려 보인다) =====
   원본 딤은 '판의 3배' 짜리라 판 밖까지 덮기는 하는데, 기기마다 어디까지 덮는지가 달라
   판 밖 딤(.h5lw_dim)과 두 겹이 되기도 하고 틈이 보이기도 했다.
   여기서 '화면 전체' 를 판 좌표로 또박또박 짚어 한 겹으로 덮는다 (판 밖 딤은 H5LP.side_alpha 가 끈다).  */
html.h5lw #h5pg_gs_dim
{
    left: calc(0px - var(--h5l_ox_l, 0px) - 4px) !important;
    top: calc(0px - var(--h5l_oy_t, 0px) - 4px) !important;
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px) + 8px) !important;
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px) + 8px) !important;
}

/* ===== 단 완성 큰 연출 뒤 어두움 (2026-10-16 CEO 지적: 화면 양쪽에 세로 줄이 보인다) =====
   원본 딤은 판(1280x720)만 덮어 판 밖 좌우가 밝게 남았다 - 그 경계가 세로 줄처럼 보였다.
   고/스톱 딤과 같은 식으로 화면 전체를 한 겹으로 덮는다 (판 밖 딤은 H5LP.side_alpha 가 끈다) */
html.h5lw #h5pgfx_big_dim
{
    left: calc(0px - var(--h5l_ox_l, 0px) - 4px) !important;
    top: calc(0px - var(--h5l_oy_t, 0px) - 4px) !important;
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px) + 8px) !important;
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px) + 8px) !important;
}

/* ===== 결과 화면 뒤 어두움 (2026-10-16 CEO 지적: 딤이 조각조각 나고 겹친 선이 보인다) =====
   원본 바탕(#Img_GR_background 1280x720, 0.62)과 새 딤(::before 1280x720, 0.55)이 판만 덮어
   판 밖 좌우는 .h5lw_dim 이 어림잡은 0.83 으로 따로 덮었다 - 두 값이 달라 경계가 줄로 보였다.
   두 겹 모두 화면 전체로 늘리고 판 밖 덮개는 끈다 (H5LP.side_alpha) */
html.h5lw #S_GAMERESULT_div.h5rp_on #Img_GR_background,
html.h5lw #S_GAMERESULT_div.h5rp_on::before
{
    left: calc(0px - var(--h5l_ox_l, 0px) - 4px) !important;
    top: calc(0px - var(--h5l_oy_t, 0px) - 4px) !important;
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px) + 8px) !important;
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px) + 8px) !important;
}

/* ===== 팝업 가운데 (2026-10-16 CEO 지시) =====
   딤이 없는 팝업(매칭 대기 안내 · 먹을 패 고르기 · 흔들기 · 쌍피)은 판 한가운데가 아니라,
   왼쪽 점당 글자 자리(141.333)와 오른쪽 점수 알약 왼변 사이의 한가운데에 선다 (CEO 가 표시한 두 줄 사이).
   그 가운데 값(--h5l_pop_cx)은 h5_landscape_wide.js 의 H5LW.place 가 재서 넣는다 - 폰 497.7 / 태블릿 481.3.
   화면이 어두워지는 팝업(선 결정 · 고/스톱 · 패 바꾸기)은 화면 전체 가운데에 둔다 - 딤이 화면을 통째로 덮으므로
   그 가운데가 눈에 더 맞다 (2026-10-16 CEO 지시) */
html.h5lw #ga_popup_div:not(.h5pg_gs)
{
    left: calc(var(--h5l_pop_cx, 500px) - 271px) !important;
}

html.h5lw #ga_popup_div.h5pg_gs
{
    left: calc(305px + (var(--h5l_ox_r, 0px) - var(--h5l_ox_l, 0px)) / 2) !important;
}

/* 패 바꾸기 팝업만은 화면 한가운데가 아니라 다른 팝업과 같은 가운데(--h5l_pop_cx)에 선다
   (2026-10-19 CEO 지시: 오른쪽 정보 칸 쪽으로 너무 나와 있었다). 판 폭 542 의 절반이 271 */
html.h5lw #PYN_board
{
    left: calc(var(--h5l_pop_cx, 500px) - 271px) !important;
}


/* ===== 이펙트는 패 위로 (2026-10-16 CEO 지적: '1고' 글자가 가운데 엎은 패에 가렸다) =====
   원래는 그리는 차례(마크업 순서)로 이펙트가 패 위에 있었는데,
   2026-10-15 에 나눠 주는 패 칸(#area_ani)에 z-index 20 을 주면서 그 아래로 내려갔다.
   고/스톱·짝/탁·쪽/퍽·단 완성 같은 이펙트를 다시 그 위로 올린다 */
html.h5lw #go_stop_ani,
html.h5lw #h5pg_go_hold,
html.h5lw #zakpuktak,
html.h5lw #zokpuk,
html.h5lw #dan_ani_div
{
    z-index: 25 !important;
}


/* ===== 도신 대사 말풍선 가로 자리 (2026-10-19 CEO 지시) =====
   상대 프로필 상자는 오른쪽 끝에서 113.333 떨어져 폭 280.667 이므로 상자 왼변은 판 왼쪽에서 886.
   세로와 같은 간격(29 -> 19.333)을 띄워 말풍선 오른끝을 866.667 에 두고, 폭 558.667 을 왼쪽으로 잰다.
   화면이 더 넓으면 상자가 그만큼 바깥으로 나가므로 말풍선도 같이 따라간다.
   (#dialogue_div 는 크기 0 짜리 칸이라 right 로는 잴 수 없다 - left 로 적는다) */
html.h5lw #dialogue_text
{
    left: calc(308px + var(--h5l_edge_r, 0px)) !important;
}

/* ===== 패 바꾸기 팝업 뒤 어두움 (2026-10-19 CEO 지적: 양쪽에 겹친 선이 보인다) =====
   원본 딤(#Img_PYN_bg)은 판(1280x720)만 덮고 판 밖 좌우는 .h5lw_dim 이 따로 덮었다 -
   두 겹이 만나는 자리가 줄로 보였다. 고/스톱·결과 딤과 같은 식으로 화면 전체를 한 겹으로 덮는다
   (판 밖 덮개는 H5LP.side_alpha 가 끈다) */
html.h5lw #Img_PYN_bg
{
    left: calc(0px - var(--h5l_ox_l, 0px) - 4px) !important;
    top: calc(0px - var(--h5l_oy_t, 0px) - 4px) !important;
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px) + 8px) !important;
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px) + 8px) !important;
}

/* ---- 점수 상세 창: 판 밖 오른쪽 여분까지 쓴다 (2026-10-19 CEO 지시) ---- */
/* 창이 판 오른쪽 끝(1280)에서 20 띄운 자리에 서 있어, 넓은 폰에서는 그 바깥에 남는
   가로 여분이 비어 있는데도 가운데 금액·버튼을 덮었다. 여분이 모자란 비율(태블릿)에서는
   세로로 피할 수도 없어(창 높이가 판의 3/4 이라 금액 줄을 벗어나지 못한다) 모자란 만큼만 줄인다.
   자리·크기는 h5_landscape_wide.js 의 H5LW.place 가 재서 넣는다 (폰은 0.62 그대로) */
html.h5lw #H5RP_detail
{
    left: var(--h5l_rp_left, 1244px);
    top: var(--h5l_rp_top, 150px);
    zoom: var(--h5l_rp_zoom, 0.62);
}

/* ===== '연결이 끊겼습니다' 가림막 (2026-10-19 CEO 지적) =====
   h5_rejoin.css 는 세로 캔버스(1080) 기준이라 가로 판(1280x720)에서는 글자가 1.5배로 커 보였다.
   또 가림막이 판(#div_body)만 덮어 판 밖 좌우가 밝게 남았다 - 다른 딤과 같이 화면 전체를 덮는다 */
html.h5lw #h5rj_overlay
{
    left: calc(0px - var(--h5l_ox_l, 0px)) !important;
    top: calc(0px - var(--h5l_oy_t, 0px)) !important;
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px)) !important;
    height: calc(720px + var(--h5l_oy_t, 0px) + var(--h5l_oy_b, 0px)) !important;
}

/* 글자·칸은 세로 값(1080 기준)을 가로 비율(2/3)로 줄인다 */
html.h5lw #h5rj_panel
{
    width: 546.667px !important;
    padding: 37.333px 33.333px 33.333px 33.333px !important;
    border-radius: 18.667px !important;
    border-width: 2.667px !important;
}

html.h5lw #h5rj_title
{
    font-size: 36px !important;
    margin-bottom: 18.667px !important;
}

html.h5lw #h5rj_desc
{
    font-size: 26.667px !important;
    line-height: 40px !important;
}

html.h5lw #h5rj_leave
{
    margin-top: 29.333px !important;
    width: 240px !important;
    height: 66.667px !important;
    line-height: 66.667px !important;
    border-radius: 33.333px !important;
    font-size: 26.667px !important;
}

/* ===== 인게임 트로피 자리 (2026-10-19 CEO 지시: 점수 알약 한가운데로) =====
   가로 기본 자리(h5_landscape.css)는 정보 상자 왼쪽 띠라 턴 시계와 어긋나게 겹쳤다.
   점수 알약(오른끝 404 · 폭 162)과 턴 시계(오른끝 411.5 · 폭 147)는 가운데가 같은 선이다 -
   트로피도 그 선에 세우면 시계가 덮어도 가운데로 가지런히 덮인다.
   상자 오른변(화면 오른끝에서 113.333)에서 재므로 화면이 넓어져도 알약과 같이 따라간다:
   113.333 + 280.667(상자 폭) - (1280 - 485 + 35) = 336.667 */
html.h5lw #user_you_medal,
html.h5lw #user_i_medal
{
    left: auto !important;
    right: 336.667px !important;
}

/* ==== css/h5_portrait_mainmenu.css ==== */
/* 파일명: h5_portrait_mainmenu.css
   하는일: 세로모드 메인화면(로비). 디자이너 가이드(맞고 메인화면.jpg, 1080x2340) 좌표 그대로.
   에셋: image/1_mainmenu/h5p/*.png (전부 1080 기준으로 제작됨 - 확대/축소 없이 원본 크기로 쓴다)
   구조: 위쪽 묶음은 top 앵커, 아래쪽 묶음은 bottom 앵커.
         캔버스가 2340보다 길어지면 그 사이(캐릭터 영역)만 늘어난다.
   스코프: html.h5p 일 때만 적용

   가이드 실측 좌표 (1080x2340 기준)
     금화바      39,151   479x65      루비바 534,151 305x65    티켓바 856,150 185x65
     프로필      36,231  1008x187     아바타 64,253 140        우편 749,266 115   설정 895,266 115
     행운룰렛   856,435   194x210     랭킹  856,643 194x210
     실시간대전  34,909  1012x870     방 행 78,1204 / 1380 / 1556  904x166 (간격 176)
     도신대전   158,1786  765x187
     하단버튼   110/397/684,1983 282x218   아이콘 186/473/758,2014 134x104 */

/* ============ 루트 ============ */
/* 폭이 넓은 기기(태블릿/폴더블/PC 창)에서도 UI 는 1080 중앙 컬럼에 고정하고 좌우는 배경만 보인다 */
html.h5p #MMP_root
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    top: 0;
    width: 1080px;
    height: 100%;
    overflow: hidden;
    background: transparent;
    font-family: 'NanumSquareRound', sans-serif;
    z-index: 40;
}

/* 패드처럼 화면이 1080 칸보다 넓은 기기: 캐릭터의 옷자락·망토가 가운데 칸 왼쪽 끝에서 칼로 자른 듯 잘려 보였다 (2026-09-30 CEO 지적).
   좌우는 가운데 칸이 아니라 진짜 화면 끝(좌우 여분 --h5p_extra_x)에서 잘리게 하고, 위아래는 지금처럼 칸에서 자른다.
   폰은 여분이 0 이라 지금까지와 똑같다. clip-path 를 모르는 브라우저는 위의 overflow: hidden 그대로 간다 */
@supports ((clip-path: inset(0 -1px 0 -1px)) or (-webkit-clip-path: inset(0 -1px 0 -1px)))
{
    html.h5p #MMP_root
    {
        overflow: visible;
        -webkit-clip-path: inset(0 -webkit-calc(-1 * var(--h5p_extra_x, 0px)) 0 -webkit-calc(-1 * var(--h5p_extra_x, 0px)));
        -webkit-clip-path: inset(0 calc(-1 * var(--h5p_extra_x, 0px)) 0 calc(-1 * var(--h5p_extra_x, 0px)));
        clip-path: inset(0 calc(-1 * var(--h5p_extra_x, 0px)) 0 calc(-1 * var(--h5p_extra_x, 0px)));
    }
}

/* 빈 상태면 숨긴다 (빈 div 가 화면 전체 클릭을 가로채는 사고 방지) */
html.h5p #MMP_root:empty
{
    display: none !important;
}

/* 세이프에어리어는 좌표에 이미 반영되어 있어 자리만 차지하지 않게 둔다 */
html.h5p .MMP_safe_top,
html.h5p .MMP_safe_bottom,
html.h5p #MMP_top,
html.h5p #MMP_mid,
html.h5p #MMP_bottom
{
    display: block;
    position: static;
}

/* ============ 상단: 재화 3칸 ============ */
/* 새 재화바 그림(2026-09-28 CEO 전달)은 아이콘이 알약 위아래로 6~9px 삐져나와 높이가 82 다.
   알약이 예전과 같은 자리에 오도록 상자를 9 올린다 (가이드 y87 = 세이프존 96 - 9) */
html.h5p #MMP_currency
{
    position: absolute;
    left: 0;
    top: 87px;      /* 세이프존 상단선(96)에 알약 윗선을 맞춘다 */
    top: -webkit-calc(var(--h5p_safe_t, 96px) - 9px);
    top: calc(var(--h5p_safe_t, 96px) - 9px);
    width: 1080px;
    height: 82px;
}

html.h5p .MMP_cur_item
{
    position: absolute;
    top: 0;
    height: 82px;
    /* 안쪽 여백이 상자를 키우면 배경 그림이 그만큼 늘어난다 - 여백을 폭 안에 넣는다 */
    box-sizing: border-box;
    line-height: 82px;
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    text-align: right;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;   /* 누르면 상점으로 (2026-09-21 CEO 지시) */
}
/* 2026-10-01 CEO 지시: 재화바는 눌러도 줄이지 않는다 (어둡게만 - h5p_press).
   원본 자리에 그대로 떠 있어야 숫자가 흔들려 보이지 않는다 */
html.h5p .MMP_cur_item.MMP_press,
html.h5p .MMP_cur_item.h5p_press
{
    -webkit-transform: none;
    transform: none;
}

/* 금화 / 루비 / 티켓 - 아이콘은 각 바 그림에 그려져 있어 왼쪽 여백만 비워 둔다.
   자리와 크기는 2026-09-28 CEO 가이드 그대로 (y87 / x20 · 526 · 822, 그림 원본 크기 1:1) */
html.h5p .MMP_cur_item:nth-child(1)
{
	/* 접힌 원스토어 네비게이션바가 x 966 부터라 그 앞까지가 쓸 수 있는 폭이다.
	   2026-10-13 CEO 지시로 네 틈(화면왼쪽~이전 / 이전~금화 / 금화~루비 / 루비~네비바)을 모두 28 로 맞췄다.
	   이전 버튼 그림은 상자(104) 안에서 1~102 가 보이므로 보이는 가장자리로 계산한다:
	   28 + 이전102 + 28 + 금화479 + 28 + 루비276 + 28 = 969 (네비바 966 바로 앞) */
    left: 157px;
    width: 479px;
    padding-right: 72px;   /* + 버튼 자리 (2026-09-21) */
    background-image: url(../image/1_mainmenu/h5p/mm_goldbar.png?v=6);
}
html.h5p .MMP_cur_item:nth-child(2)
{
    left: 663px;
    width: 276px;
    padding-right: 72px;   /* + 버튼 자리 (2026-09-21) */
    background-image: url(../image/1_mainmenu/h5p/mm_rubybar.png?v=6);
}
html.h5p .MMP_cur_item:nth-child(3)
{
    left: 663px;
    width: 276px;
    padding-right: 72px;   /* + 버튼 자리 (2026-09-21) */
    background-image: url(../image/1_mainmenu/h5p/mm_ticketbg.png?v=5);
}

/* 아이콘 자리는 그림에 포함 - 칸만 비워 둔다.
   바 그림마다 아이콘이 끝나는 x 가 달라 각각 맞춘다 (금화 62 / 루비 60 / 티켓 53).
   티켓은 칸이 좁아 이렇게 해야 세 자리가 들어간다 (2026-09-10 CEO 지시) */
html.h5p .MMP_cur_icon
{
    display: block;
    float: left;
    height: 82px;
}
html.h5p .MMP_cur_item:nth-child(1) .MMP_cur_icon { width: 81px; }
html.h5p .MMP_cur_item:nth-child(2) .MMP_cur_icon { width: 78px; }
html.h5p .MMP_cur_item:nth-child(3) .MMP_cur_icon { width: 72px; }

/* ---- 재화바 아이콘(금화/루비/티켓) 반짝임 (2026-09-14 CEO 지시) ----
   방 목록 '입장' 버튼과 같은 빛줄기(MMP_enter_shine 과 같은 그라데이션/가속 곡선)를 쉬지 않고가 아니라 10초에 한 번 지나가게 한다.
   빛은 아이콘 모양 안에만 보이도록 바 그림에서 아이콘 부분만 떼어 낸 마스크(*_iconmask.png, 원본 크기)로 가린다.
   메인화면 재화바와 서브화면 공통 재화바(#H5PTOP_bar, h5_portrait.css)에 같이 쓴다. 금화 -> 루비 -> 티켓 순서로 0.15초씩 늦게 */
html.h5p .MMP_cur_item::after,
html.h5p .H5PTOP_item::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 81px;
    height: 82px;
    background: -webkit-linear-gradient(-15deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
    -webkit-animation: MMP_cur_shine 10s infinite;
    animation: MMP_cur_shine 10s infinite;
}
html.h5p .MMP_cur_item:nth-child(1)::after,
html.h5p #H5PTOP_item_gold::after
{
    -webkit-mask-image: url(../image/1_mainmenu/h5p/mm_goldbar_iconmask.png?v=3);
    mask-image: url(../image/1_mainmenu/h5p/mm_goldbar_iconmask.png?v=3);
}
html.h5p .MMP_cur_item:nth-child(2)::after,
html.h5p #H5PTOP_item_ruby::after
{
    width: 78px;	/* 새 루비 그림의 아이콘 폭 (2026-10-06) */
    -webkit-mask-image: url(../image/1_mainmenu/h5p/mm_rubybar_iconmask.png?v=4);
    mask-image: url(../image/1_mainmenu/h5p/mm_rubybar_iconmask.png?v=4);
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
html.h5p .MMP_cur_item:nth-child(3)::after,
html.h5p #H5PTOP_item_ticket::after
{
    width: 72px;	/* 새 티켓 그림의 아이콘 폭 (2026-10-06) */
    -webkit-mask-image: url(../image/1_mainmenu/h5p/mm_ticketbg_iconmask.png?v=3);
    mask-image: url(../image/1_mainmenu/h5p/mm_ticketbg_iconmask.png?v=3);
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
/* 10초 중 앞 0.55초(5.5%)에만 입장 버튼과 같은 곡선으로 지나가고 나머지는 밖에서 쉰다 */
@-webkit-keyframes MMP_cur_shine
{
    0%    { background-position: 110% 0; opacity: 0.4; -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
    2.8%  { opacity: 1; }
    5.5%  { background-position: -10% 0; opacity: 0.9; }
    100%  { background-position: -10% 0; opacity: 0.9; }
}
@keyframes MMP_cur_shine
{
    0%    { background-position: 110% 0; opacity: 0.4; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
    2.8%  { opacity: 1; }
    5.5%  { background-position: -10% 0; opacity: 0.9; }
    100%  { background-position: -10% 0; opacity: 0.9; }
}

html.h5p #MMP_gold,
html.h5p #MMP_ruby,
html.h5p #MMP_ticket
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ 상단: 프로필 카드 ============ */
html.h5p #MMP_profile
{
    position: absolute;
    left: 36px;
    /* 재화바(높이 65) 아래 40 띄움: 예전 틈 15 는 너무 붙어 보였다 (2026-09-21 CEO 지시로 25 내림) */
    top: 201px;
    top: -webkit-calc(var(--h5p_safe_t, 96px) + 105px);
    top: calc(var(--h5p_safe_t, 96px) + 105px);
    width: 1008px;
    height: 187px;
    /* 레벨 알약이 그려진 원본 대신 알약만 지운 사본(1008x187 원본 크기). 알약은 #MMP_level 이 이름 줄과 함께 옮겨 그린다 (2026-09-22) */
    background: url(../image/1_mainmenu/h5p/mm_profile_bg_nolv.png) no-repeat;
    background-size: 100% 100%;
}

/* 그림은 JS 가 캐릭터 번호에 맞춰 <img> 로 넣는다 (여기서 배경까지 깔면 두 장이 겹친다) */
/* 140 -> 164 로 키움, 가운데(98, 92)는 그대로 (2026-10-06 CEO 지시).
   원본 그림이 240 으로 다시 와서(2026-10-06) 줄여 그린다 - 흐려지지 않는다 */
html.h5p #MMP_avatar
{
    position: absolute;
    left: 16px;
    top: 10px;
    width: 164px;
    height: 164px;
}
html.h5p #MMP_avatar img
{
    display: block;
    width: 164px;    /* profile_icon 원본은 240 */
    height: 164px;
}

/* 이름/전적/레벨 묶음 */
html.h5p #MMP_userbox
{
    position: absolute;
    left: 193px;	/* 얼굴이 150 으로 커져 붙어 보여 181 -> 193 (얼굴과 간격 20, 2026-09-22 CEO 지시) */
    top: 0;
    width: 508px;	/* 오른끝(701)은 그대로 - 우편/설정 버튼과 안 겹치게 */
    height: 187px;
}

/* 레벨 배지는 카드 그림에 초록 알약이 그려져 있다 (x181~331, y15~54). 그 위에 글자만 얹는다 */
html.h5p #MMP_nameline
{
    position: absolute;
    left: 0;
    top: 0;
    width: 520px;
    height: 60px;
    z-index: 2;		/* 레벨 알약이 경험치 바 위에 얹히게 (2026-09-28 CEO 지시) */
}
html.h5p #MMP_level
{
    position: absolute;
    left: 0;
    top: 15px;
    width: 151px;
    height: 40px;
    line-height: 41px;
    background: url(../image/1_mainmenu/h5p/profile/profile_levelbox.png) no-repeat 0 0;	/* 배경 그림에 있던 알약과 같은 그림(151x40 원본 크기) */
    background-size: 151px 40px;
    text-align: center;
    color: #ffffff;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 800;
}
html.h5p #MMP_name
{
    position: absolute;
    left: 0;
    top: 64px;		/* 62 -> 64: 2 내림 (2026-09-28 CEO 지시) */
    width: 508px;	/* 이름 묶음 폭(508)과 같게 - 우편 버튼과 안 겹치게. 길면 JS(fit_name)가 글자를 36 까지 줄인다 (2026-09-22) */
    height: 60px;
    line-height: 60px;
    color: #2f5d3a;
    font-size: 48px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.h5p #MMP_record
{
    position: absolute;
    left: 2px;
    top: 126px;
    width: 520px;
    height: 44px;
    line-height: 44px;
    color: #6f8a76;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 700;
}

/* 경험치 바: 왼쪽 끝을 레벨 알약(0~151) 밑으로 밀어 넣어 한 덩어리로 보이게 한다 (2026-09-28 CEO 지시 -
   따로 떨어져 있으면 무슨 게이지인지 알기 어렵다). 세로 가운데(35)는 알약과 같고 높이만 4 얇다.
   흰 바탕은 테두리 없이, 초록 막대가 꽉 찼을 때와 같은 크기로만 깐다.
   길이는 455 -> 395 로 줄였다 (2026-09-28 CEO 지시 - 너무 길다) */
html.h5p #MMP_expbar
{
    position: absolute;
    left: 120px;
    /* 알약(40)보다 4 얇게 해서 알약이 바 위에 얹힌 느낌을 준다 - 위아래 2씩 줄인다 (2026-09-28 CEO 지시) */
    top: 17px;
    width: 275px;
    height: 36px;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    /* 초록 막대는 126 에서 시작한다. 알약은 둥근 끝이라 위아래로 갈수록 131 까지만 덮는데,
       막대를 그보다 앞에서 시작해야 위아래 모서리에 흰 초승달이 안 보인다 (2026-09-28 CEO 지적).
       위아래 4 는 초록 막대만 8 얇게(36 -> 28) 해서 흰 테두리처럼 보이게 하는 몫
       (2026-09-28 CEO 지시로 4 -> 8 로 한 번 더 줄임. 흰 막대 36 은 그대로) */
    padding: 4px 0 4px 6px;
}
html.h5p #MMP_expfill
{
    display: block;
    width: 0; /* 경험치 0 이면 초록 막대를 그리지 않는다 (2026-09-14 CEO 지시 - 최소 막대 표시는 없앰) */
    height: 100%;
    /* 조금 찼을 때도 알약 밖으로 눈에 띄게 나오도록 최소 길이를 준다 (앞 25 는 알약에 가린다).
       경험치가 0 일 때는 JS 가 min-width 를 0 으로 되돌린다 */
    min-width: 60px;
    /* 왼쪽은 각지게 - 알약 밑에서 그대로 이어져 나온다. 오른쪽만 둥글게 (막대 높이 28 의 절반) */
    border-radius: 0 14px 14px 0;
    background: #38c34a;
}
/* 경험치 수치는 메인에서 감춘다 (2026-09-28 CEO 지시 - 내 정보 박스가 빽빽하고, 자세한 값은 내정보 팝업에 있다).
   되돌리려면 아래 display 한 줄만 지우면 된다 */
html.h5p #MMP_exptxt
{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    line-height: 41px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    letter-spacing: -1px;
    font-weight: 800;
    color: #3b2a10;
    text-shadow: -2px 0 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, 0 2px 0 #ffffff;
    white-space: nowrap;
    pointer-events: none;
}

/* 우편 / 설정 */
html.h5p .MMP_card_btn
{
    position: absolute;
    top: 35px;
    width: 115px;
    height: 115px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    font-size: 0; /* 안에 남아 있는 글자 칸을 숨긴다 */
}
html.h5p #MMP_btn_mail
{
    left: 713px;
    background-image: url(../image/1_mainmenu/h5p/mm_mail_bt.png?v=4);
}
html.h5p #MMP_btn_etc
{
    left: 859px;
    background-image: url(../image/1_mainmenu/h5p/mm_setting_bt.png?v=4);
}

/* ============ 오른쪽 레일: 행운룰렛 / 랭킹 ============ */
/* 2026-09-21 CEO 지시로 숨김 - 룰렛은 하단 버튼, 랭킹은 하단 메뉴 안으로 옮겼다 */
html.h5p #MMP_rail
{
    position: static;
    display: none;
}
html.h5p .MMP_rail_btn
{
    position: absolute;
    left: 856px;
    width: 194px;
    height: 210px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
html.h5p #MMP_btn_roulette
{
    top: 380px;   /* 위쪽 묶음과 같이 55 위로 */
    top: -webkit-calc(var(--h5p_safe_t, 96px) + 284px);
    top: calc(var(--h5p_safe_t, 96px) + 284px);
    background-image: url(../image/1_mainmenu/h5p/mm_roulette_bt.png);
}
html.h5p #MMP_btn_ranking
{
    top: 588px;
    top: -webkit-calc(var(--h5p_safe_t, 96px) + 492px);
    top: calc(var(--h5p_safe_t, 96px) + 492px);
    background-image: url(../image/1_mainmenu/h5p/mm_ranking_bt.png);
}
html.h5p .MMP_rail_icon
{
    display: none;   /* 아이콘은 버튼 그림에 그려져 있다 */
}

/* 라벨: 버튼 그림 아래쪽 알약(원본 y146~201) 위에 얹는다 */
html.h5p .MMP_rail_txt
{
    position: absolute;
    left: 0;
    top: 146px;
    width: 194px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    text-shadow: 0 2px 3px rgba(0,0,0,0.45);
    pointer-events: none;
}

/* ============ 금고 버튼 (2026-09-22 CEO 지시 - 타이틀 로고 자리에 임시 배치) ============ */
/* 하단 버튼과 같은 판(242x238)을 옛 로고의 보이는 그림 자리(x 663~1044, y 세이프+352~567)에 오른쪽 맞춤으로 둔다 */
html.h5p #MMP_side_safe
{
    /* 2026-10-06 CEO 지시로 59 오른쪽 (802 -> 861).
       누름 영역(242)은 안쪽 여백이 커서 상자 오른변을 1044 에 두어도 보이는 아이콘은 985 에서 끝났다.
       보이는 아이콘 오른변을 1044(프로필 배너 오른변)에 맞춘다 */
    left: 861px;
    bottom: auto;
    /* 2026-10-06 CEO 지시로 30 위로 (352 -> 322) */
    top: 418px;
    top: -webkit-calc(var(--h5p_safe_t, 96px) + 322px);
    top: calc(var(--h5p_safe_t, 96px) + 322px);
    z-index: 2;
    background: none;   /* 버튼 판 그림은 빼고 아이콘 + 글자만 (2026-09-22 CEO 지시). 누름 영역은 판 크기 242x238 그대로 */
    /* 2026-09-26 CEO 지시: 너무 작아 110% 로 키운다. 오른끝(사용자정보 박스 오른끝)은 그대로 둔다 */
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
html.h5p #MMP_side_safe .MMP_quick_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_lock.png?v=2); }
/* 판이 없어 하늘 배경 위에 바로 놓이므로 글자에 흰 테두리를 둘러 읽히게 한다 */
html.h5p #MMP_side_safe .MMP_quick_txt
{
    text-shadow: -3px 0 0 #ffffff, 3px 0 0 #ffffff, 0 -3px 0 #ffffff, 0 3px 0 #ffffff,
                 -2px -2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff, 2px 2px 0 #ffffff;
}

/* ============ 캐릭터 ============ */
/* 프로필 아래부터 로비 위까지의 빈 칸에 세워 둔다. 캔버스가 길어지면 이 칸만 늘어난다 */
html.h5p #MMP_stage
{
    position: absolute;
    left: 0;
    top: 388px;     /* 사용자정보 박스 아래끝 (박스를 25 내림, 2026-09-21) */
    top: -webkit-calc(var(--h5p_safe_t, 96px) + 292px);
    top: calc(var(--h5p_safe_t, 96px) + 292px);
    right: 0;
    /* 아래끝 = 실시간 대전 알약 윗변 (버튼 bottom 539 + 알약 윗끝 232). 방 목록을 다음 화면으로 뺀 뒤 캐릭터 자리가 넓어졌다 (2026-09-21) */
    bottom: 1450px;
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) + 771px);
    bottom: calc(var(--h5p_safe_b, 120px) + 771px);
    overflow: visible;
    pointer-events: none;
    z-index: -1;
}
html.h5p #MMP_char
{
    position: absolute;
    left: 50%;
    /* 원본 그림 918x1303 을 줄이지 않고 그대로 쓴다 (2026-09-10 CEO 지시로 크게).
       그림에서 허리띠는 y490~545 다. 로비 그림 위쪽 58px 은 투명이라 붉은 판의 실제 윗변은 986 이다.
       그 윗변이 허리띠 한가운데(516)에 걸리도록 캐릭터 윗변을 469 에 둔다 (2026-09-11 CEO 지시).
       스테이지 아래끝 890 에서 882 만큼 더 내려 붙이면 윗변이 469 에 온다.
       2026-09-21 방 목록이 빠져 전신이 보이게: 발 밑을 실시간 대전 버튼 위쪽(스테이지 아래끝 + 104) 뒤에 둔다 */
    bottom: -104px;
    width: 918px;
    height: 1303px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* Spine 을 쓸 수 있는 기기는 처음부터 PNG 캐릭터(옛 그림)를 감춘다 - Spine 자산을 받는 동안 옛 캐릭터가 먼저 보이던 문제 (2026-09-17 CEO 지적).
   Spine 이 실패하면 h5_portrait_spine.js 가 이 클래스를 빼서 PNG 가 다시 보인다 */
html.h5p.h5p_spine_on #MMP_char
{
    visibility: hidden;
}

/* Spine 캐릭터 캔버스 (h5_portrait_spine.js): PNG 캐릭터와 같은 자리에 발 밑을 맞춰 얹는다. 크기는 JS 가 넣는다 */
/* #MMP_poster = 스파인을 받는 동안 먼저 보여 주는 정지 그림 (2026-09-30). 캔버스와 같은 규칙으로 같은 자리에 놓인다 */
html.h5p #MMP_spine,
html.h5p #MMP_poster
{
    position: absolute;
    left: 50%;
    /* 전신이 보이게 발 밑을 실시간 대전 버튼 위쪽 뒤에 (2026-09-21).
       실제 값은 h5_portrait_spine.js 의 place() 가 캐릭터 키에 맞게 다시 넣는다 - 여기는 처음 한 순간용 기본값이다 */
    bottom: -104px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* 기본 캐릭터(0번) 춤 애니메이션 (h5_portrait_char0.js, 2026-09-21 CEO 지시). 시트는 6x3 칸.
   그림이 상반신이라 아랫변(잘린 몸통)을 방 목록 판 윗테두리(1177) 뒤로 넣는다: 스테이지 끝 890 에서 290 더 내려 1180.
   머리 끝은 프로필 줄(363) 바로 아래 380 */
html.h5p #MMP_char0
{
    position: absolute;
    left: 50%;
    /* 원본 프레임 360 을 1000 (약 2.8 배)으로 키웠더니 너무 크다는 CEO 지적 (2026-09-21) -> 720 (2 배).
       2026-10-07 CEO 물음('더 올릴 수 있나 / 지금이 딱 안 잘리는 자리인가') - 재어 보니 지금이 그 자리다.
       시트는 칸 아래끝(359)까지 그림이 차 있어 남는 여백이 0 이고, 아랫변 흐림이 상자 끝(720)에서 완전히 사라진다.
       -80 이면 상자 아랫변(스테이지 끝 1473 + 80 = 1553)이 실시간 대전 알약 윗변(1552)과 겹쳐
       흐림이 끝나는 자리가 곧 알약 윗변이다. 80 올려(bottom 0) 보니 몸통이 공중에서 흐려져 잘려 보였다 */
    bottom: -80px;
    width: 720px;
    height: 720px;
    margin-left: -360px;
    background-repeat: no-repeat;
    /* 컷마다 격자가 달라 h5_portrait_char0.js 가 깔 때 다시 넣는다 - 여기 값은 댄스 시트(6x3) 기준 기본값이다 */
    background-size: 600% 300%;
    /* 세로(아래쪽) 흐림 - 다른 캐릭터(스파인)와 똑같은 자리에서 흐려지게 맞췄다 (2026-10-09 CEO 지적).
       스파인은 캐릭터 자리 아래끝(실시간 대전 알약 윗변)을 기준으로 위 40 부터 옅어져 아래 140 에서 사라진다
       (h5_portrait_spine.js 의 lobby_fade_up 40 / lobby_fade_down 140).
       이 상자는 720 높이에 아래끝이 그 기준선보다 80 아래다 -> 위 40 = 600/720 = 83.3%, 아래 140 = 780/720 = 108.3%.
       예전 값(80% ~ 100%)은 눈에 보이는 흐림이 64 라 다른 캐릭터(40)보다 넓어 보였다.
       108.3% 는 상자 밖이지만 그 자리는 실시간 대전 알약에 가려 보이지 않는다. (좌우 흐림은 쓰지 않는다 - CEO 지시) */
    /* 2026-10-09 CEO 재지적('캐릭터마다 다르게 적용된 느낌'): % 로 주니 컷마다 흐림 폭이 달랐다.
       칸 높이가 춤 794 / 나머지 720 이라 25% 가 198px 과 180px 로 벌어졌다.
       상자 아래끝에서 잰 px 로 바꿔 어느 컷이든 똑같이 흐려지게 한다.
       상자 아래끝은 기준선(실시간 대전 알약 윗변)보다 80 아래다 -> 기준선 위 40 = 상자 아래끝 위 120,
       기준선 아래 140 = 상자 아래끝 아래 60 (옛 720 칸에서는 이 값이 83.3% / 108.3% 였다) */
    -webkit-mask-image: -webkit-linear-gradient(top, #000 calc(100% - 120px), rgba(0,0,0,0) calc(100% + 60px));
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), rgba(0,0,0,0) calc(100% + 60px));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), rgba(0,0,0,0) calc(100% + 60px));
    /* 2026-10-08 CEO 지시로 세로(아랫변) 흐림도 뺀다 - 좌우 흐림은 2026-10-07 에 이미 뺐다.
       이제 늬에시 그림은 흐림 없이 그대로 나온다 */
    pointer-events: none;
}
html.h5p.h5p_char0_on #MMP_char,
html.h5p.h5p_char0_on #MMP_spine,
html.h5p.h5p_char0_on #MMP_poster
{
    visibility: hidden;
}

/* ============ 실시간 대전 (배너 + 방 목록) ============ */
html.h5p #MMP_lobby
{
    position: absolute;
    left: 34px;
    bottom: 542px;    /* 하단 묶음과 같이 19 아래로 */
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) + 422px);
    bottom: calc(var(--h5p_safe_b, 120px) + 422px);
    width: 1012px;
    height: 870px;
    background: url(../image/1_mainmenu/h5p/mm_online_bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;   /* 캐릭터가 배너 글자를 가리지 않게 */
}

/* 배너 글자 (붉은 띠는 배경 그림에 포함) */
/* 가이드 실측: 타이틀 화면 995~1075, 부제 1100~1140 (로비 윗변 909 기준 86 / 191) */
html.h5p #MMP_lobby_head
{
    position: absolute;
    left: 0;
    /* 2026-09-15 새 배경으로 교체하며 부제를 빼고 제목만 붉은 띠 가운데에 둔다 (CEO 지시).
       붉은 띠는 그림 y107~247(아래로 갈수록 어두운 빨강, 248 부터 금색 테두리) -> 세로 가운데 177.
       (처음에 밝은 빨강만 재서 띠를 y107~208, 가운데 157.5 로 잘못 보고 120 에 두었다가 위로 치우쳤다 - CEO 지적)
       제목 글자는 80 상자보다 위로 9, 아래로 5 더 나와 글자 가운데가 상자 가운데보다 2 위다 -> 상자 윗변 177 - 40 + 2 = 139 -> 140 */
    /* 2026-10-09 CEO 지적: 새 띠 그림으로 바꾼 뒤 글자가 띠 가운데보다 위에 있다.
       보이는 붉은 띠는 판 기준 98 ~ 262(방 목록이 덮는 자리) 라 가운데가 180, 글자 가운데는 상자보다 2 위라 146 이 맞다 */
    top: 146px;
    width: 1012px;
    height: 80px;
    text-align: center;
    pointer-events: none;
}
/* 굵은 테두리 + 위가 밝은 노랑 그라데이션 (2026-09-10 CEO 지시).
   테두리와 그라데이션을 한 요소에 같이 걸 수 없어 앞뒤 가상요소로 두 겹 쌓는다.
   ::before 가 테두리, ::after 가 글자색이고 요소 자신의 글자는 자리만 잡는다 */
/* 도신의 탑 트로피: 2026-10-10 CEO 지시로 프로필 사진 모서리에서 '도신 대전' 버튼 안으로 옮기고 크게 키웠다.
   버튼은 969x245 이고 왼쪽에 탑 그림이 있다 - 그 오른쪽, 글자 왼쪽의 빈자리에 세로 가운데로 둔다.
   원본 138x181 을 1.15 배 한 159x208 (버튼 높이 245 안에 위아래 18 여유) */
html.h5p #MMP_trophy
{
    position: absolute;
    /* 2026-10-10 CEO 지시(3차): 그림 둘레 여백과 상관없이 칸을 꽉 채운다.
       S_mainmenu_portrait.js 가 여백을 잘라 낸 그림(trophy_fit*)을 넣고, 여기서 칸만 잡는다.
       단계마다 그림 비가 달라(1단계 97:103 ~ 5단계 136:179) object-fit: contain 으로 높이를 맞춘다.
       2026-10-10 CEO 지시(4차): 칸을 꽉 채웠더니 너무 컸다 - 그어 주신 상자 크기(그림 높이 124)에 맞춘다.
       밑단은 부제 아래끝(196) 그대로 두고 높이만 186 -> 124 로 줄인다.
       폭 118 = 가장 넓은 2단계 비(0.947) 로도 높이가 먼저 닿도록 잡은 값 (칸 안 72~196).
       2026-10-10 CEO 지시(5차): 글자 쪽으로 지금 여백의 반만큼 당긴다 - 가운데 306 -> 342 (left 247 -> 283) */
    left: 283px;
    top: auto;
    bottom: 49px;
    width: 118px;
    height: 124px;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}
/* 2026-10-10 CEO 지시(5차): 4·5 단계는 그림이 길쭉해 같은 높이로 넣어도 작아 보인다 - 둘만 조금 키운다.
   밑단(196)과 가운데는 그대로 두고 높이만 124 -> 134 (칸 폭 118 은 4단계 비 0.860 에서도 높이가 먼저 닿는다) */
html.h5p #MMP_trophy[data-tier="4"]
{
    height: 134px;
}
/* 5 단계는 위쪽에 장식이 많아 더 작아 보인다 - 4 단계보다 한 번 더 키운다 (CEO 지시 6차).
   폭은 118 그대로 (5단계 비 0.760 이라 144 높이에 110 폭이면 충분하다) */
html.h5p #MMP_trophy[data-tier="5"]
{
    height: 144px;
}

html.h5p #MMP_lobby_title
{
    position: relative;
    height: 80px;
    line-height: 80px;
    font-size: 88px;    /* 100 -> 88: 조금 줄이고 도신 대전(#MMP_ai_title)과 같은 크기로 (2026-09-15 CEO 지시). 원래 가이드 글자높이 78 */
    font-weight: 800;
    letter-spacing: 2px;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* 글자 상자(80px)보다 글자가 위로 9px, 아래로 5px 더 나온다.
   background-clip:text 는 상자 밖을 칠하지 않아 노란색이 위아래로 잘렸다 (2026-09-10 CEO 지적).
   상자를 위아래로 20px 씩 넓히고 안쪽 여백으로 글자 위치는 그대로 둔다 */
html.h5p #MMP_lobby_title::before,
html.h5p #MMP_lobby_title::after
{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: -20px;
    width: 100%;
    height: 120px;
    padding-top: 20px;
    box-sizing: border-box;
    line-height: 80px;
    letter-spacing: 2px;
}
html.h5p #MMP_lobby_title::before
{
    color: #7d1109;
    -webkit-text-fill-color: #7d1109;
    /* 글자를 같은 두께로만 감싼다. 아래로 떨어지는 그림자를 넣으면
       획마다 두께가 달라 보인다 (2026-09-10 CEO 지적) */
    -webkit-text-stroke: 16px #7d1109;
}
html.h5p #MMP_lobby_title::after
{
    /* 상자를 넓힌 만큼 색 위치도 옮겨 글자 안에서만 그라데이션이 지나가게 한다.
       아래를 많이 어둡게 하면 획마다 밝기가 달라 입체(두께)처럼 보인다 (2026-09-10 CEO 지적).
       위쪽만 살짝 밝히고 아래는 원래 노란색에 가깝게 두어 평평하게 보이게 한다 */
    background-image: -webkit-linear-gradient(top, #fffef6 9%, #fff7d8 45%, #ffeaa9 87%);
    background-image: linear-gradient(180deg, #fffef6 9%, #fff7d8 45%, #ffeaa9 87%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* 붉은 띠 누름 영역 (보이지 않는 판): 누르면 들어갈 수 있는 가장 낮은 방으로 입장 (2026-09-15 CEO 지시).
   그림의 띠 크림색 윗테두리 y100 ~ 금색 판 테두리 위 y248, 가로는 판 전체. 방 목록(top 295)과 겹치지 않는다 */
html.h5p #MMP_lobby_band
{
    position: absolute;
    left: 0;
    top: 100px;
    width: 1012px;
    height: 148px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 방 목록: 배경 그림 안쪽 (가이드 첫 행 1204 - 로비 909 = 295) */
html.h5p #MMP_rooms
{
    position: absolute;
    left: 44px;
    top: 295px;
    width: 926px;      /* 방 그림 904 + 스크롤바 자리 22 */
    height: 518px;     /* 3행 = 166 + 176*2 */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 스크롤바는 배경 그림에 없으므로 여기서 그린다 (2026-09-10 CEO 지시).
   폭 22 를 빼면 안쪽 폭이 정확히 904 라 방 그림은 원본 크기 그대로 깔린다 */
/* 2026-09-12 CEO 지시: 끝이 네모가 아니라 둥근 가는 줄 모양으로 (첨부 이미지처럼 - 가는 반투명 트랙 위에 흰 둥근 막대).
   자리(폭 22)는 그대로 두고, 좌우 투명 테두리로 안쪽 8 만 칠해 가늘게 만든 뒤 끝을 완전히 둥글게 한다 */
/* 2026-09-12 CEO 지적: 폰에서 트랙 바깥에 회색 띠가 한 겹 더 보였다 - 폰 브라우저가 트랙의 투명 테두리 잘라내기(background-clip)를
   무시하고 폭 22 전체를 반투명으로 칠했다. 트랙은 가운데 8 만 색이 있는 줄무늬 배경으로 그리고, 스크롤바 자체/모서리는 투명으로 못박는다 */
html.h5p #MMP_rooms::-webkit-scrollbar
{
    width: 22px;
    background: transparent;
}
html.h5p #MMP_rooms::-webkit-scrollbar-corner
{
    background: transparent;
}
html.h5p #MMP_rooms::-webkit-scrollbar-button
{
    display: none;
    width: 0;
    height: 0;
}
/* 2026-09-14 CEO 지시: 회색 트랙 끝도 흰 막대처럼 둥글게. 트랙은 가는 줄(가운데 8)을 세 겹 배경으로 그린다 -
   위 반타원 / 가운데 줄 / 아래 반타원. 겹치지 않게 나눠 반투명이 진해지는 이음새가 없다.
   끝 모양은 흰 막대와 똑같이 가로 4 x 세로 7 반타원 (2026-09-14 CEO 지시 - 흰 막대 끝은 너무 뾰족, 회색 끝은 너무 약해 둘 사이로 맞춤) */
/* 트랙(회색 줄) 진하기 22% -> 11% 로 반 (2026-09-21 CEO 지시 - 도움말에서 거슬려 보였다. 같은 모양을 쓰는 메인 방 목록/미션/도움말 함께) */
html.h5p #MMP_rooms::-webkit-scrollbar-track
{
    /* 막대 길이 = 보이는 줄 범위: 위는 첫 줄 윗선, 아래는 목록 아래끝 (2026-09-22 CEO 지시 - 우편함과 같은 기준) */
    margin: 0px 0 0 0;
    border: 0;
    background: transparent;		/* 2026-10-07 CEO 지시: 전체 범위를 표시하던 반투명 줄은 없앤다 */
}
/* 흰 막대 끝: 좌우 투명 테두리 7 을 뺀 안쪽 막대(가로 8)의 끝이 가로 4 x 세로 7 반타원이 되게 바깥 둥글기를 가로 11 / 세로 7 로 준다.
   예전 999px 는 폭 22 전체 기준으로 둥글어져 세로로 길쭉하게 뾰족했다 (2026-09-14 CEO 지시 - 회색 트랙 끝과 같은 모양) */
html.h5p #MMP_rooms::-webkit-scrollbar-thumb
{
    /* 2026-10-07 CEO 지시: 보이는 폭을 2배(8 -> 16)로 넓히고 바깥에 1px 테두리.
       왼쪽 #ffe289 에서 오른쪽 #ecac29 으로 가로 그라데이션, 테두리는 #6a3f0d (2026-10-07 CEO 지시로 #9d733c 에서 한 번 더 어둡게).
       둥금은 11px / 8px 로 가로세로를 따로 준다: 좌우만 투명 테두리(3)가 있어
       한 값으로 주면 안쪽 둥금이 가로 8 / 세로 11 의 타원이 돼 끝이 뾰족해졌다 (2026-10-07 CEO 지적).
       투명 테두리를 7 -> 3 으로 줄여 줄 자리(22)는 그대로 두고 막대만 넓혔다 */
    /* 화면이 들어오는 연출 중에 그라데이션이 늦게 그려져 속이 비어 보이지 않게,
       그라데이션 가운데 색을 바탕색으로 깔아 둔다 (2026-10-07 CEO 지적) */
    background-color: #f6c759;
    background-image: -webkit-linear-gradient(left, #ffe289 0%, #ecac29 100%);
    background-image: linear-gradient(to right, #ffe289 0%, #ecac29 100%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 11px / 8px;
    box-shadow: inset 0 0 0 1px #6a3f0d;
}

/* 방 한 칸 - 카드그림/코인이 그려진 그림을 깐다 (입장 버튼은 2026-09-12 부터 따로 떼어낸 st_bt_enter.png 를 얹는다) */
html.h5p .MMP_room
{
    position: relative;
    width: 904px;
    height: 166px;
    margin-bottom: 10px;   /* 간격 176 - 높이 166 */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
html.h5p .MMP_room:nth-child(1) { background-image: url(../image/1_mainmenu/h5p/st_bt1.png); }
html.h5p .MMP_room:nth-child(2) { background-image: url(../image/1_mainmenu/h5p/st_bt2.png); }
html.h5p .MMP_room:nth-child(3) { background-image: url(../image/1_mainmenu/h5p/st_bt3.png); }
html.h5p .MMP_room:nth-child(4) { background-image: url(../image/1_mainmenu/h5p/st_bt4.png); }
html.h5p .MMP_room:nth-child(5) { background-image: url(../image/1_mainmenu/h5p/st_bt5.png); }
html.h5p .MMP_room:nth-child(6) { background-image: url(../image/1_mainmenu/h5p/st_bt1.png); }
html.h5p .MMP_room:nth-child(7) { background-image: url(../image/1_mainmenu/h5p/st_bt2.png); }

/* 썸네일은 방 그림에 포함되어 있다 */
html.h5p .MMP_room_thumb
{
    display: none;
}

html.h5p .MMP_room_info
{
    position: absolute;
    left: 277px;
    top: 0;
    width: 400px;
    height: 166px;
}
html.h5p .MMP_room_name
{
    position: absolute;
    left: 0;
    top: 22px;   /* 이름+조건 묶음을 칸 세로 가운데로 (2026-09-11 CEO 지적, 원래 14) */
    height: 78px;
    line-height: 78px;
    color: #4a2c10;
    font-size: 68px;   /* 2026-09-10 CEO 지시로 키움 */
    font-weight: 800;
    white-space: nowrap;
}
/* 보유금 범위 - 앞의 작은 동전은 방 그림에 포함되어 있어 그 오른쪽부터 쓴다 */
html.h5p .MMP_room_sub
{
    position: absolute;
    left: 45px;
    top: 105px;   /* 글자 중심 125 = 작은 동전 중심 124.5 (2026-09-11 CEO 지적, 원래 96) */
    height: 40px;
    line-height: 40px;
    color: #6b4a22;
    font-size: 33px;	/* 방 판이 1.1배로 그려져 화면에서 36.3 (2026-09-22 글자 크기 점검: 35.2 -> 36 이상, CEO 지시) */
    font-weight: 700;
    white-space: nowrap;
}

/* 입장 버튼: 디자이너가 방 그림에서 떼어낸 st_bt_enter.png(211x101 원본 크기, 2026-09-12 CEO 지시).
   그림 속 붉은 알약(x3~207, y10~94)을 예전 방 그림의 알약 자리(x669~873, y43~127)에 그대로 겹치게 left 666 / top 33.
   '입장' 글자는 알약 가운데(세로 10~95). 누르는 곳은 여전히 방 한 줄 전체다 */
html.h5p .MMP_room_enter
{
    position: absolute;
    left: 666px;
    top: 33px;
    width: 211px;
    height: 101px;
    padding-top: 10px;
    box-sizing: border-box;
    line-height: 85px;
    background: url(../image/1_mainmenu/h5p/st_bt_enter.png) no-repeat 0 0;
    background-size: 211px 101px;
    text-align: center;
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    text-shadow: 0 2px 0 #a01f1a;
    pointer-events: none;
}
/* 들어갈 수 있는 방의 입장 버튼만 '나를 눌러' 느낌으로 제자리에서 가로로 늘었다가 -> 세로로 늘었다가 한다 (잠긴 방은 가만히).
   자리는 움직이지 않고 버튼 가운데를 기준으로 크기만 바뀐다 (2026-09-12 CEO 지시 - 위치가 움직이던 모션을 바꿈).
   가장 커질 때 가로 226 / 세로 110 이라도 방 한 칸(904x166) 안에 들어온다 */
html.h5p .MMP_room.MMP_room_on .MMP_room_enter
{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: MMP_enter_pulse 1.2s ease-in-out infinite;
    animation: MMP_enter_pulse 1.2s ease-in-out infinite;
}
@-webkit-keyframes MMP_enter_pulse
{
    0%, 50%, 100% { -webkit-transform: scale(1, 1); }
    25%           { -webkit-transform: scale(1.07, 1); }
    75%           { -webkit-transform: scale(1, 1.09); }
}
@keyframes MMP_enter_pulse
{
    0%, 50%, 100% { transform: scale(1, 1); }
    25%           { transform: scale(1.07, 1); }
    75%           { transform: scale(1, 1.09); }
}
/* 들어갈 수 있는 방 입장 버튼에 빛이 지나가는 효과 (2026-09-14 CEO 전달 영상 '빠른입장' 버튼 컷 분석).
   영상 실측: 흰색 반투명(가장 밝을 때 약 50%) 띠가 버튼 위를 왼쪽 -> 오른쪽으로 0.37초(11프레임) 동안 지나가고 2.0초마다 반복,
   띠는 왼쪽이 부드럽게 밝아지고(약 60) 가운데가 판판하다가(약 60) 오른쪽 끝이 날카롭게(약 8) 끊기며 살짝 기울었다(약 15도).
   가운데를 빨리, 양 끝을 천천히 지나고 양 끝에서는 조금 옅다. 버튼 크기·위치는 변하지 않는다 (늘었다 줄었다 모션은 따로 그대로).
   빛은 버튼 그림 모양(st_bt_enter.png)으로 잘라 알약 밖으로 나가지 않는다 */
html.h5p .MMP_room.MMP_room_on .MMP_room_enter::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 211px;
    height: 101px;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.5) 51.4%,
        rgba(255, 255, 255, 0.55) 62.8%,
        rgba(255, 255, 255, 0) 64.3%,
        rgba(255, 255, 255, 0) 100%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-mask-image: url(../image/1_mainmenu/h5p/st_bt_enter.png);
    -webkit-mask-size: 211px 101px;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(../image/1_mainmenu/h5p/st_bt_enter.png);
    mask-size: 211px 101px;
    mask-repeat: no-repeat;
    pointer-events: none;
    -webkit-animation: MMP_enter_shine 2s infinite;
    animation: MMP_enter_shine 2s infinite;
}
/* 0 ~ 27.5% (0.55초): 버튼 왼쪽 밖(110%) -> 오른쪽 밖(-10%)으로 지나간다. 나머지 1.45초는 밖에서 쉰다.
   처음엔 느리게 나타나 옅게 밝아지다가 뒤로 갈수록 빨라지며 사라진다 (2026-09-14 CEO 지시 - 처음부터 끝까지 같은 속도로 보였다).
   그래서 시간을 0.37 -> 0.55초로 늘리고 속도는 점점 빨라지는 곡선, 밝기는 절반 지점까지 0.4 -> 1 */
@-webkit-keyframes MMP_enter_shine
{
    0%    { background-position: 110% 0; opacity: 0.4; -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
    14%   { opacity: 1; }
    27.5% { background-position: -10% 0; opacity: 0.9; }
    100%  { background-position: -10% 0; opacity: 0.9; }
}
@keyframes MMP_enter_shine
{
    0%    { background-position: 110% 0; opacity: 0.4; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
    14%   { opacity: 1; }
    27.5% { background-position: -10% 0; opacity: 0.9; }
    100%  { background-position: -10% 0; opacity: 0.9; }
}
/* 입장 글자 뒤 '>' (2026-09-12 CEO 지시) */
html.h5p .MMP_room_chev
{
    display: inline;
    margin-left: 12px;
}

/* 못 들어가는 방(MMP_room_off): 줄 전체를 어둡게 하던 것은 뺐다 - 입장 자리의 자물쇠만으로 표시 (2026-09-21 CEO 결정) */

/* 상태 문구는 쓰지 않는다 (입장 조건은 동전 옆에 적는다) */
html.h5p .MMP_room_state
{
    display: none;
}

/* 못 들어가는 방: 입장 버튼의 '입장 >' 글자를 없애고 그 자리(붉은 알약 가운데)에 자물쇠 (2026-09-12 CEO 지시).
   자물쇠 그림 st_bt_enter_lock.png(65x76)를 원본 크기 그대로 알약 가운데에 둔다 (이모지에서 교체) */
html.h5p .MMP_room_lock
{
    display: none;
    position: absolute;
    left: 669px;      /* 알약 x669~873 */
    top: 43px;        /* 알약 y43~127 */
    width: 205px;
    height: 85px;
    background: url(../image/1_mainmenu/h5p/st_bt_enter_lock.png) no-repeat 50% 50%;
    background-size: 65px 76px;
    pointer-events: none;
}
html.h5p .MMP_room.MMP_room_off .MMP_room_lock
{
    display: block;
}
html.h5p .MMP_room.MMP_room_off .MMP_room_enter
{
    font-size: 0;
    text-shadow: none;
}

/* ============ 도신 대전 / 실시간 대전 버튼 (2026-10-07 CEO 전달 새 그림, 원본 크기 969x294) ============ */
/* 그림 안 알약 면은 y13~244. 왼쪽 그림(~x330)과 오른쪽 화살표(x855~) 사이 빈 칸(330~840)에 글자를 둔다.
   세로: 하단 버튼 윗끝 위 20 에 도신 대전 알약 아래끝, 그 위 20 에 실시간 대전 알약 아래끝 */
html.h5p #MMP_ai,
html.h5p #MMP_rt
{
    position: absolute;
    left: 56px;         /* (1080 - 969) / 2 */
    width: 969px;
    height: 245px;
    cursor: pointer;
    z-index: 2;
}
/* 2026-10-07 CEO 새 그림: 969x294 로 커졌다. 알약 면 크기/자리는 그대로고 위쪽 장식(탑/왕관)만 49 높아진 것이라
   누르는 칸과 글자 자리를 건드리지 않으려고, 그림은 아래를 맞춘 ::before 로 깔아 위로만 넘치게 한다 */
html.h5p #MMP_ai::before,
html.h5p #MMP_rt::before
{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 969px;
    height: 294px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
html.h5p #MMP_ai
{
    bottom: 341px;
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) + 245px);
    bottom: calc(var(--h5p_safe_b, 120px) + 245px);	/* 2026-10-06 CEO 지시: 하단 버튼과의 틈을 위 두 알약 사이와 같은 20 으로 (그림 보이는 테두리 기준) */
}
html.h5p #MMP_ai::before
{
    background-image: url(../image/1_mainmenu/h5p/mm_tower_bt2.png?v=2);   /* 도신 대전 화면 입장하기는 예전 mm_tower_bt 그대로 */
}
html.h5p #MMP_rt
{
    bottom: 592px;
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) + 496px);
    bottom: calc(var(--h5p_safe_b, 120px) + 496px);	/* 도신 대전과 같이 33 내려 두 알약 사이 틈 20 을 그대로 둔다 */
}
html.h5p #MMP_rt::before
{
    background-image: url(../image/1_mainmenu/h5p/mm_pvp_bt.png?v=2);
}
/* ---- 누르고 싶어지게 (2026-09-28 CEO 지시): 살짝 커졌다 작아지는 숨쉬기 + 방 목록 '입장' 버튼과 같은 빛줄기 ----
   빛은 버튼 그림 모양으로 잘라 알약 밖으로 나가지 않는다. 두 버튼이 같이 번쩍이지 않게 도신 대전은 1초 늦게 */
html.h5p #MMP_ai,
html.h5p #MMP_rt
{
    -webkit-animation: MMP_band_beat 2.4s ease-in-out infinite;
    animation: MMP_band_beat 2.4s ease-in-out infinite;
}
html.h5p #MMP_ai
{
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
@-webkit-keyframes MMP_band_beat
{
    0%   { -webkit-transform: scale(1); }
    12%  { -webkit-transform: scale(1.025); }
    26%  { -webkit-transform: scale(0.995); }
    40%  { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}
@keyframes MMP_band_beat
{
    0%   { transform: scale(1); }
    12%  { transform: scale(1.025); }
    26%  { transform: scale(0.995); }
    40%  { transform: scale(1); }
    100% { transform: scale(1); }
}
html.h5p #MMP_ai::after,
html.h5p #MMP_rt::after
{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 969px;
    height: 294px;
    background: -webkit-linear-gradient(-15deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 51.4%, rgba(255,255,255,0.55) 62.8%, rgba(255,255,255,0) 64.3%, rgba(255,255,255,0) 100%) no-repeat;
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-mask-size: 969px 294px;
    -webkit-mask-repeat: no-repeat;
    mask-size: 969px 294px;
    mask-repeat: no-repeat;
    pointer-events: none;
    -webkit-animation: MMP_enter_shine 2.4s infinite;
    animation: MMP_enter_shine 2.4s infinite;
}
html.h5p #MMP_rt::after
{
    -webkit-mask-image: url(../image/1_mainmenu/h5p/mm_pvp_bt.png?v=2);
    mask-image: url(../image/1_mainmenu/h5p/mm_pvp_bt.png?v=2);
}
html.h5p #MMP_ai::after
{
    -webkit-mask-image: url(../image/1_mainmenu/h5p/mm_tower_bt2.png?v=2);
    mask-image: url(../image/1_mainmenu/h5p/mm_tower_bt2.png?v=2);
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

html.h5p #MMP_ai_title,
html.h5p #MMP_rt_title
{
    position: absolute;
    left: 330px;
    width: 510px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    font-size: 80px;
    font-weight: 800;
    white-space: nowrap;
}
/* 도신 대전: 밝은 금색 판 - 진한 갈색 글자 + 부제 */
html.h5p #MMP_ai_title
{
    /* 두 줄(제목 84 + 부제 44)을 알약 면(13~244, 가운데 128) 세로 가운데로: 50 -> 60 (2026-09-26 CEO 지시) */
    top: 60px;
    color: #4a3208;
}
html.h5p #MMP_ai_sub
{
    position: absolute;
    left: 330px;
    top: 152px;	/* 제목과 같이 10 내림 (2026-09-26 CEO 지시) */
    width: 510px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #6b4a15;
    font-size: 36px;    /* 30 -> 36: 글자 크기 기준 최소 (2026-09-21) */
    font-weight: 700;
}
html.h5p .MMP_ai_icon { display: none; }
/* 실시간 대전: 붉은 판 - 흰 글자에 짙은 빨강 테두리, 부제 없음 (CEO 지시) */
html.h5p #MMP_rt_title
{
    top: 86px;          /* 알약 면 가운데 128 */
    color: #ffffff;
    text-shadow: -3px 0 0 #6e0d0d, 3px 0 0 #6e0d0d, 0 -3px 0 #6e0d0d, 0 3px 0 #6e0d0d,
                 -2px -2px 0 #6e0d0d, 2px -2px 0 #6e0d0d, -2px 2px 0 #6e0d0d, 2px 2px 0 #6e0d0d,
                 0 5px 6px rgba(0, 0, 0, 0.35);
}
html.h5p #MMP_rt_sub { display: none; }

/* ============ 실시간 대전 방 버튼 (2026-09-21 CEO 지시) ============ */
/* 실시간 대전 버튼을 누르면 메인화면 위에 dim 을 깔고 방 버튼 4개만 실시간 대전 버튼 위에 띄운다 (판/배너 없음, 스크롤 없음).
   방 줄 904x166 x 4 + 간격 20 x 3 = 724. 닫기는 이전 버튼으로만 (바깥 누름 닫기는 뺐다, 2026-09-21) */
html.h5p #MMRT_root
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    top: 0;
    width: 1080px;
    height: 100%;
    display: none;
    /* 2026-10-07 CEO 지시로 랭킹 화면(#RANK_root z80) 위에도 띄운다 - 80 -> 90 */
    z-index: 90;
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}
/* 딤은 가운데 칸 밖(넓은 화면의 좌우)까지 덮는다 */
html.h5p #MMRT_dim
{
    position: absolute;
    left: -4000px;
    top: 0;
    width: -webkit-calc(100% + 8000px);
    width: calc(100% + 8000px);
    height: 100%;
    background: rgba(0, 0, 0, 0.8);   /* 0.6 -> 0.8 (2026-09-21 CEO 지시 - 더 어둡게) */
}
/* 판: 예전 방 목록 배경(mm_online_bg)의 위쪽 붉은 띠만 잘라 낸 그림(mm_online_head.png 1012x300, 띠 아래끝 y249) 위에
   '방 선택' 제목을 얹고, 그 아래에 방 버튼 4개를 둔다 (2026-09-21 CEO 지시).
   방 버튼은 원본(904x166)보다 조금 크게 1.1 배 = 994x183. 방 목록 위끝은 띠 아래 262, 보이는 높이 724 x 1.1 = 796 -> 판 높이 1058 */
html.h5p #MMRT_root #MMP_lobby
{
    left: 34px;          /* (1080 - 1012) / 2 */
    top: auto;
    /* 캐릭터 + 띠 + 방 버튼 묶음(높이 1308)을 재화바 아래(96) ~ 이전 버튼 위(2140) 사이 세로 가운데에 둔다 (2026-09-21 CEO 지시 - 위로 치우쳐 보였다).
       판 윗변 714, 아래끝 1772 -> 아래 기준 568 = 96 + 472 */
    bottom: 568px;
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) + 472px);
    bottom: calc(var(--h5p_safe_b, 120px) + 472px);
    width: 1012px;
    height: 1058px;
    /* 2026-10-09 CEO 전달 새 그림(961x266). 붉은 띠 폭(538)은 예전과 같아 띠 가운데를 판 가운데(506)에 맞춘다 */
    background: url(../image/1_mainmenu/h5p/mm_online_head.png?v=2) no-repeat 27px 0;
    background-size: 961px 266px;
}
html.h5p #MMRT_root #MMP_lobby_band
{
    display: none;
}
html.h5p #MMRT_root #MMP_rooms
{
    left: 54px;          /* (1012 - 904) / 2 */
    top: 262px;
    width: 904px;
    height: 724px;
    overflow: visible;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}
html.h5p #MMRT_root .MMP_room { margin-bottom: 20px; }
/* '할 수 있다' 모션: 원본 크기 360. 잘린 몸통 끝만 방 선택 띠(판 위 y100~) 뒤로 10 넣는다 - 판보다 먼저 그려 뒤에 깔린다.
   (예전엔 50 을 넣어 아래가 너무 잘려 보였다 - 2026-09-21 CEO 지적) 모션 아래끝 = 판 윗변 + 110 */
html.h5p #MMRT_cheer
{
    position: absolute;
    left: 360px;         /* (1080 - 360) / 2 */
    /* 2026-10-16 CEO 지시: 캐릭터 그림 밑변을 '방 선택' 판 그림 윗변에 딱 맞춘다.
       판 그림(mm_online_head.png 961x266)은 윗줄 98 까지가 빈 자리라, 붉은 띠 윗변은 판 윗변 + 98 이다.
       예전엔 그보다 44 위에 떠 있어 사이가 벌어졌다 (2026-10-09 에 56 올렸던 것까지 되돌린다) */
    bottom: 1528px;
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) + 1432px);
    bottom: calc(var(--h5p_safe_b, 120px) + 1432px);   /* 판 아래끝 472 + 판 높이 1058 - 판 그림 빈 윗줄 98 */
    width: 360px;
    height: 360px;
    background-repeat: no-repeat;
    background-size: 400% 400%;
    pointer-events: none;
}
/* 이전 버튼: 다른 서브화면 공통 이전 버튼과 같은 그림/자리 (왼쪽 61, 아래 40) */
html.h5p #MMRT_back_bt
{
    position: absolute;
    left: 27px;
    top: 74px;
    bottom: auto;
    width: 104px;
    height: 108px;
    background: url(../image/11_quest/h5p/back_bt.png?v=4) no-repeat 0 0;
    background-size: 104px 108px;
    cursor: pointer;
    z-index: 3;
}
html.h5p #MMRT_back_bt:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
html.h5p #MMRT_root .MMP_room:last-child { margin-bottom: 0; }

/* ============ 하단 4버튼: 상점 / 미션 / 룰렛 / 랭킹 (2026-09-22 CEO 지시 - 메뉴 버튼을 랭킹으로) ============ */
/* 버튼 판 그림 교체 (2026-09-21 CEO 전달 새 그림 242x238, 원본 크기 그대로): 간격 16, 양옆 32 */
html.h5p #MMP_quick
{
    position: static;
}
html.h5p .MMP_quick_btn
{
    position: absolute;
    bottom: 110px;
    /* 2026-10-06 CEO 지시로 묶음 전체 10 내림 - 세이프존 하단선보다 10 아래에 선다 */
    bottom: -webkit-calc(var(--h5p_safe_b, 120px) - 10px);
    bottom: calc(var(--h5p_safe_b, 120px) - 10px);
    width: 242px;
    height: 238px;
    background: url(../image/1_mainmenu/h5p/mm_bt_bg.png?v=3) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
html.h5p #MMP_btn_charge  { left: 32px; }
html.h5p #MMP_btn_quest   { left: 290px; }
html.h5p #MMP_q_roulette  { left: 548px; }
html.h5p #MMP_q_ranking   { left: 806px; }

html.h5p .MMP_quick_icon
{
    position: absolute;
    left: 54px;        /* (242 - 134) / 2 - 아이콘 원본 크기 134x104 */
    top: 32px;         /* 판 안쪽 면(y14~218) 위쪽 */
    width: 134px;
    height: 104px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html.h5p #MMP_btn_charge  .MMP_quick_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_charge.png?v=2); }

/* 2026-10-10 CEO 지시: 상점 아이콘은 낱장 모션만으론 심심해서,
   돌아가는 동안 아래를 딧고 세로로 늘어났다가 탄력 있게 제자리로 돌아온다.
   아이콘 칸만 늘이므로 버튼 판이나 옆 버튼은 그대로다 (달아나는 것처럼 보이지 않게 가로도 살짝 줄였다 늘린다) */
/* 2026-10-10 CEO 지시: 금고 칸이 돌기 시작할 때 둘레에서 반짝이 두 개가
   커졌다 작아지며 사라진다. 게임 결과 화면에서 쓰는 별 그림을 그대로 쓴다 */
html.h5p .MMP_icon_spark
{
    position: absolute;
    width: 48px;
    height: 46px;
    background: url(../image/2_game/h5p/result/result_win_star.png) no-repeat center center;
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
}
/* 금고는 화면 오른쪽 끝에 붙어 있어, 둘째 반짝이가 화면 밖으로 나가지 않게 안쪽에 둔다 */
html.h5p .MMP_icon_spark0 { left: 30px;  top: 16px; }
html.h5p .MMP_icon_spark1 { left: 146px; top: 98px; }
/* 셋째는 2026-10-10 CEO 지시로 금고 왼쪽 아래에 더 넣은 것이다 */
html.h5p .MMP_icon_spark2 { left: 22px;  top: 86px; }
html.h5p .MMP_icon_spark.MMP_spark_on
{
    /* 칸이 두 바퀴 돌므로 반짝이도 두 번 터진다 (2026-10-10) */
    -webkit-animation: mmp_icon_spark 760ms ease-out 2;
    animation: mmp_icon_spark 760ms ease-out 2;
}
html.h5p .MMP_icon_spark1.MMP_spark_on
{
    -webkit-animation-delay: 220ms;
    animation-delay: 220ms;
}
html.h5p .MMP_icon_spark2.MMP_spark_on
{
    -webkit-animation-delay: 460ms;
    animation-delay: 460ms;
}

/* 2026-10-21 CEO 지시: 룰렛은 다 돌고 멈출 때 칸 왼쪽에서 반짝이 둘이 터진다.
   룰렛 그림이 판 x76~166 / y35~130 에 놓이므로 그 왼쪽 위와 왼쪽 아래 모서리에 건다 */
/* 2026-10-21 CEO 지시: 금고 것(48x46)을 그대로 쓰니 커서 과했다. 가운데는 그대로 두고 크기만 줄인다.
   둘이 똑같으면 심심해서 크기를 다르게 두었다. 작은 쪽이 위다 (CEO 지시).
   2026-10-21 CEO 지시로 둘 다 룰렛 쪽으로 더 당겼다 (한 번 더 떼어 봤더니 멀어서 이 자리로 되돌림) */
html.h5p .MMP_icon_rspark0 { width: 28px; height: 27px; left: 70px; top: 42px; }
html.h5p .MMP_icon_rspark1 { width: 38px; height: 37px; left: 51px; top: 82px; }
html.h5p .MMP_icon_spark.MMP_rspark_on
{
    /* 멈추는 순간 한 번만 (금고는 도는 내내 두 번 터진다) */
    -webkit-animation: mmp_icon_spark 620ms ease-out 1;
    animation: mmp_icon_spark 620ms ease-out 1;
}
html.h5p .MMP_icon_rspark1.MMP_rspark_on
{
    -webkit-animation-delay: 160ms;
    animation-delay: 160ms;
}
@-webkit-keyframes mmp_icon_spark
{
    0%   { opacity: 0; -webkit-transform: scale(0.2); }
    30%  { opacity: 1; -webkit-transform: scale(1.15); }
    60%  { opacity: 0.9; -webkit-transform: scale(0.8); }
    100% { opacity: 0; -webkit-transform: scale(0.2); }
}
@keyframes mmp_icon_spark
{
    0%   { opacity: 0; transform: scale(0.2); }
    30%  { opacity: 1; transform: scale(1.15); }
    60%  { opacity: 0.9; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(0.2); }
}
html.h5p .MMP_icon_bounce
{
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    /* 칸이 두 바퀴 돌므로 이 움직임도 두 번 (2026-10-10) */
    -webkit-animation: mmp_icon_bounce 840ms ease-out 2;
    animation: mmp_icon_bounce 840ms ease-out 2;
}
@-webkit-keyframes mmp_icon_bounce
{
    0%   { -webkit-transform: scaleY(1) scaleX(1); }
    22%  { -webkit-transform: scaleY(1.16) scaleX(0.96); }
    46%  { -webkit-transform: scaleY(0.92) scaleX(1.04); }
    66%  { -webkit-transform: scaleY(1.06) scaleX(0.98); }
    84%  { -webkit-transform: scaleY(0.97) scaleX(1.01); }
    100% { -webkit-transform: scaleY(1) scaleX(1); }
}
@keyframes mmp_icon_bounce
{
    0%   { transform: scaleY(1) scaleX(1); }
    22%  { transform: scaleY(1.16) scaleX(0.96); }
    46%  { transform: scaleY(0.92) scaleX(1.04); }
    66%  { transform: scaleY(1.06) scaleX(0.98); }
    84%  { transform: scaleY(0.97) scaleX(1.01); }
    100% { transform: scaleY(1) scaleX(1); }
}
html.h5p #MMP_btn_quest   .MMP_quick_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_quest.png?v=2); }
html.h5p #MMP_q_roulette  .MMP_quick_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_roulette.png?v=3); }
html.h5p #MMP_q_ranking   .MMP_quick_icon { background-image: url(../image/1_mainmenu/h5p/mm_subbt_ranking.png?v=2); }

/* 미션 버튼 알림 점 (2026-09-22 CEO 지시): 미션 화면 .QPR_new 와 같은 모양/움직임.
   아이콘이 아니라 버튼 판의 오른쪽 위 모서리에 걸친다 (2026-09-28 CEO 지시).
   판(242x238)의 둥근 모서리 꼭지점이 (211, 28) 이라 그곳에 점 가운데를 둔다 */
html.h5p #MMP_quest_dot,
html.h5p #MMP_mail_dot
{
    display: none;
    position: absolute;
    left: 193px;	/* 점 36 의 가운데를 (211, 28) 에 */
    top: 10px;
    width: 36px;	/* 54 -> 44 -> 36, 미션 화면 점과 같이 (2026-09-22 CEO 지시) */
    height: 36px;
    box-sizing: border-box;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: -webkit-radial-gradient(35% 30%, circle, #ff6b5e 0%, #e8261c 55%, #c3140c 100%);
    background: radial-gradient(circle at 35% 30%, #ff6b5e 0%, #e8261c 55%, #c3140c 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 2;
    -webkit-animation: h5pq_new_pulse 1.2s ease-in-out infinite;
    animation: h5pq_new_pulse 1.2s ease-in-out infinite;
}

/* 우편 알림 점: 우편 버튼(115x115) 오른쪽 위, 점 가운데를 (102, 14) 에 (2026-09-22 CEO 지시) */
html.h5p #MMP_mail_dot
{
    left: 84px;
    top: -4px;
}

html.h5p .MMP_quick_txt
{
    position: absolute;
    left: 0;
    top: 146px;        /* 아이콘 아래 (글자 가운데 171) */
    width: 242px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #4a3208;
    font-size: 44px;
    font-weight: 800;
}

/* ============ 누를 때 반응 ============ */
html.h5p .MMP_room:active,
html.h5p .MMP_quick_btn:active,
html.h5p .MMP_card_btn:active,
html.h5p .MMP_rail_btn:active,
html.h5p #MMP_rt:active,
html.h5p #MMP_ai:active
{
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

/* ============ 준비 중 안내 ============ */
html.h5p .MMP_ready
{
    opacity: 0.55;
}

/* 메인화면 티켓바도 숨긴다 (2026-10-06 CEO 지시 - 원스토어 네비게이션바가 그 자리를 쓴다).
   세 칸 중 셋째라 nth-child 번호는 그대로 두고 보이기만 끈다 */
html.h5p .MMP_cur_item:nth-child(3)
{
    display: none;
}

/* ==== css/h5_portrait_rank.css ==== */
/* 첨부 시안의 배치: 상금 / 시상대 / 내 순위, 왼쪽 등급 사다리, 좌하단 공통 이전 버튼. */
html.h5p #RANK_root.rank_v3 { color: #f9f2dc; background: transparent; font-family: NanumSquareRound, 'Malgun Gothic', sans-serif; }
html.h5p .rank_v3 * { box-sizing: border-box; }
html.h5p .rank_v3 button { font: inherit; font-weight: 800; color: inherit; border: 3px solid #a99978; border-radius: 24px; padding: 16px 20px; background: linear-gradient(#334c5a,#152a32); cursor: pointer; touch-action: manipulation; }
html.h5p .rank_v3 button:active { filter: brightness(.86); }
/* 키보드로 골랐을 때 금색 테두리를 두르던 규칙을 지웠다 -
   폰에서도 때에 따라 나타나 닫기 X 뒤에 둥근 테두리선이 보였다
   (내 정보 팝업에는 없는 것, 2026-10-07 CEO 지적). 누를 때 비치는 폰 기본 회색 상자도 같이 끈다 */
html.h5p .rank_v3 button { -webkit-tap-highlight-color: transparent; }
html.h5p .rank_v3 button:focus, html.h5p .rank_v3 button:focus-visible { outline: none; }
html.h5p .rank_v3 .rt_shell { position: absolute; top: 215px; bottom: 235px; left: 35px; right: 35px; display: flex; flex-direction: column; gap: 18px; }
html.h5p .rank_v3 .rt_header { display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; min-height: 130px; }
html.h5p .rank_v3 h1 { margin: 0; font-size: 94px; color: #fff1bf; text-shadow: -4px -4px #352012,4px -4px #352012,-4px 4px #352012,4px 4px #352012,0 9px 2px #171a1c; }
html.h5p .rank_v3 .rt_header button { position: absolute; right: 8px; width: 76px; height: 76px; border-radius: 50%; font-size: 54px; line-height: 1; padding: 0; background: #657572; }
html.h5p .rank_v3 .rt_tabs { display: flex; gap: 10px; flex-shrink: 0; }
html.h5p .rank_v3 .rt_tabs button { flex: 1; min-width: 0; font-size: 44px; min-height: 102px; padding: 12px 4px; border-radius: 22px; box-shadow: inset 0 3px 5px #cddde655,0 4px 4px #0b151c; }
html.h5p .rank_v3 .rt_tabs .rt_selected { color: #402500; border-color: #fff0b0; background: linear-gradient(#fff6b9,#ffd955 55%,#dfab35); box-shadow: inset 0 3px #fffce9,0 0 16px #ffd45366; }
html.h5p .rank_v3 #RT_scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
html.h5p .rank_v3 #RT_content { padding: 0 4px 24px; }	/* 2026-10-09 CEO 지시로 위 여백 8 -> 0 (명예의 전당 스크롤 없애기) */
html.h5p .rank_v3 .rt_timer { display: flex; width: fit-content; max-width: 100%; gap: 10px; align-items: center; justify-content: center; margin: 0 auto 24px; padding: 10px 24px; font-size: 40px; background: #071719b8; border: 2px solid #a79777; border-radius: 50px; white-space: nowrap; }
html.h5p .rank_v3 .rt_icon { display: inline-block; width: 54px; height: 54px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
html.h5p .rank_v3 .rt_jackpot { min-height: 225px; margin: 0 0 36px; text-align: center; padding: 18px; border: 6px double #d0a356; border-radius: 30px; background: radial-gradient(ellipse at 50% 20%,#983e38,#4d202b 80%); box-shadow: inset 0 0 30px #da8b3155,0 6px 8px #111b22; }
html.h5p .rank_v3 .rt_jackpot > span { font-size: 44px; color: #ffdc8f; }
html.h5p .rank_v3 .rt_jackpot strong { display: block; font-size: 76px; color: #ffec93; text-shadow: 0 4px #4c210e; line-height: 1.15; margin: 5px 0; }
html.h5p .rank_v3 .rt_jackpot small { font-size: 34px; color: #ffedd0; }
html.h5p .rank_v3 .rt_podium { display: flex; align-items: flex-end; justify-content: center; gap: 24px; padding: 65px 15px 0; min-height: 520px; }
html.h5p .rank_v3 .rt_winner { position: relative; flex: 1; width: 0; text-align: center; }
html.h5p .rank_v3 .rt_winner_1 { flex: 1.22; }
html.h5p .rank_v3 .rt_winner_panel { position: relative; display: flex; flex-direction: column; align-items: center; padding: 50px 14px 24px; min-height: 342px; border: 7px double #b6c4c8; border-radius: 80px 80px 8px 8px; background: linear-gradient(100deg,#16242e,#304855 50%,#111e26); box-shadow: 0 12px 12px #0b1725, inset 0 0 22px #7bacc155; }
html.h5p .rank_v3 .rt_winner_1 .rt_winner_panel { min-height: 444px; border-color: #ffe797; background: linear-gradient(100deg,#651e28,#a24438 50%,#571b29); box-shadow: 0 0 24px #edb94a88, inset 0 0 25px #f3b34b44; }
html.h5p .rank_v3 .rt_winner_3 .rt_winner_panel { border-color: #b48b59; background: linear-gradient(100deg,#30291f,#66533b,#24221b); }
html.h5p .rank_v3 .rt_crown { position: absolute; z-index: 2; top: -64px; left: 50%; transform: translateX(-50%); width: 132px; height: 114px; background: linear-gradient(#fff9c7,#e4ac29 68%,#93601b); border-bottom: 12px ridge #d39528; clip-path: polygon(0 18%,25% 40%,50% 0,75% 40%,100% 18%,87% 100%,13% 100%); filter: drop-shadow(0 5px 3px #171308); color: #5f3603; }
html.h5p .rank_v3 .rt_crown b { position: absolute; bottom: 5px; left: 0; right: 0; font-size: 64px; text-shadow: 0 2px #fff1bd; }
html.h5p .rank_v3 .rt_winner_2 .rt_crown { background: linear-gradient(#eefbff,#9baebf); color: #304355; border-color: #a5b9cc; }
html.h5p .rank_v3 .rt_winner_3 .rt_crown { background: linear-gradient(#ffe2a3,#b97839); color: #58311b; border-color: #b77b42; }
html.h5p .rank_v3 .rt_face { width: 145px; height: 145px; border-radius: 50%; object-fit: cover; border: 5px solid #e2c092; background: #c89960; }
html.h5p .rank_v3 .rt_winner_1 .rt_face { width: 194px; height: 194px; border: 7px double #ffdd8e; }
html.h5p .rank_v3 .rt_vacant { display: flex; align-items: center; justify-content: center; color: #fff0d0; font-size: 82px; }
html.h5p .rank_v3 .rt_winner strong { font-size: 45px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 12px 0 5px; }
html.h5p .rank_v3 .rt_winner_score { font-size: 53px; color: #fff1b5; }
html.h5p .rank_v3 .rt_winner_score small { font-size: 34px; }
html.h5p .rank_v3 .rt_all_button { display: block; width: 100%; min-height: 84px; margin: 22px 0 28px; font-size: 43px; background: linear-gradient(#48605d,#233e38); border-color: #c2a66a; }
html.h5p .rank_v3 .rt_all_button span { float: right; }
html.h5p .rank_v3 .rt_my_summary { position: relative; padding: 48px 20px 22px; color: #402612; border: 6px double #d1ad66; border-radius: 24px; background: linear-gradient(#fffbea,#f5e4c2); }
html.h5p .rank_v3 .rt_ribbon { position: absolute; left: 30%; right: 30%; top: -22px; background: linear-gradient(#52717a,#243e47); color: #fff4d3; border: 3px solid #bbaa76; border-radius: 10px 10px 25px 25px; padding: 6px; font-size: 42px; text-align: center; }
html.h5p .rank_v3 .rt_summary_grid { display: flex; gap: 18px; align-items: center; }
html.h5p .rank_v3 .rt_summary_grid > div { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 10px; }
html.h5p .rank_v3 .rt_summary_grid strong { font-size: 69px; color: #b92c2d; }
html.h5p .rank_v3 .rt_summary_grid b { font-size: 49px; }
html.h5p .rank_v3 .rt_summary_grid small { font-size: 37px; line-height: 1.35; }
html.h5p .rank_v3 .rt_summary_grid aside { display: flex; flex-direction: column; gap: 9px; align-items: center; padding: 18px 8px; background: #fffdf3; border-radius: 18px; min-width: 230px; max-width: 285px; }
html.h5p .rank_v3 .rt_money { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 39px; }
html.h5p .rank_v3 .rt_badge { flex-shrink: 0; display: inline-flex; width: 170px; height: 170px; align-items: center; justify-content: center; border: 9px double #e9bd73; border-radius: 25px; background: linear-gradient(135deg,#fff1bc,#e6a65f 55%,#89502c); color: #623412; box-shadow: inset 0 0 12px #fff8c9,0 7px 6px #1b151d99; }
html.h5p .rank_v3 .rt_badge > span { display: flex; flex-direction: column; text-align: center; }
html.h5p .rank_v3 .rt_badge b { font-size: 90px; line-height: 1; }
html.h5p .rank_v3 .rt_badge small { font-size: 43px; line-height: 1.2; }
html.h5p .rank_v3 .rt_grade_A { background: linear-gradient(125deg,#78273d,#c54458 50%,#3e1526); color: #fff2ca; }
html.h5p .rank_v3 .rt_grade_B { background: linear-gradient(125deg,#8d6525,#d6b263 50%,#52350d); color: #fff2ca; }
html.h5p .rank_v3 .rt_grade_C { background: linear-gradient(125deg,#496071,#8aa5b4 50%,#243647); color: #fff8e4; border-color: #b8d1d7; }
html.h5p .rank_v3 .rt_grade_E { background: linear-gradient(125deg,#234a70,#4c91b0 50%,#16354a); color: #f3f6e7; border-color: #97b7bf; }
html.h5p .rank_v3 .rt_footer { position: absolute; bottom: 0; left: 0; right: 0; height: 216px; background: linear-gradient(transparent,#132c2a99); }
html.h5p .rank_v3 #RANK_back_bt { position: absolute; left: 27px; top: 74px; bottom: auto; width: 104px; height: 108px; background: url(../image/11_quest/h5p/back_bt.png?v=4) center/contain no-repeat; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
html.h5p .rank_v3 .rt_primary { color: #fff7dc; background: linear-gradient(#da5550,#ae222d 50%,#751b29); border: 6px double #e9bb69; border-radius: 30px; text-shadow: 0 3px #542418; box-shadow: inset 0 4px 5px #ffe3ab66,0 5px 8px #0b191c; }
html.h5p .rank_v3 #RT_play { position: absolute; left: 235px; right: 45px; bottom: calc(96px - var(--h5p_sub_drop, 0px)); min-height: 140px; font-size: 66px; }
html.h5p .rank_v3 #RT_notice { flex-shrink: 0; text-align: right; color: #fff1d2; text-shadow: 0 2px 3px #071621; font-size: 32px; min-height: 36px; }
html.h5p .rank_v3 #RT_notice button { padding: 0 12px; font-size: 36px; }
html.h5p .rank_v3 .rt_league { display: flex; align-items: stretch; gap: 55px; margin: 70px 5px 38px 30px; }
html.h5p .rank_v3 .rt_ladder { flex-shrink: 0; width: 265px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 75px; padding: 30px 0; }
html.h5p .rank_v3 .rt_ladder_step { position: relative; }
html.h5p .rank_v3 .rt_ladder_step .rt_badge { width: 190px; height: 190px; transform: rotate(45deg); border-radius: 16px; }
html.h5p .rank_v3 .rt_ladder_step .rt_badge > span { transform: rotate(-45deg); }
html.h5p .rank_v3 .rt_ladder_step .rt_badge b { font-size: 96px; }
html.h5p .rank_v3 .rt_ladder_step em { position: absolute; white-space: nowrap; bottom: -25px; left: 50%; transform: translateX(-50%); background: #347045; color: #fffde0; border: 3px solid #f7df91; border-radius: 25px; padding: 4px 18px; font-size: 33px; font-style: normal; }
html.h5p .rank_v3 .rt_current .rt_badge { outline: 12px solid #ffe898; box-shadow: 0 0 40px 15px #ffc629; }
html.h5p .rank_v3 .rt_league_card { flex: 1; min-width: 0; color: #432810; background: linear-gradient(#fffae7,#f9e5c4); border: 7px double #cbaa69; border-radius: 28px; padding: 38px 25px 28px; display: flex; flex-direction: column; justify-content: space-around; align-items: stretch; text-align: center; }
html.h5p .rank_v3 .rt_league_heading { display: flex; align-items: center; justify-content: center; gap: 18px; }
html.h5p .rank_v3 .rt_league_heading .rt_face { width: 155px; height: 155px; }
html.h5p .rank_v3 .rt_league_heading > b { font-size: 116px; }
html.h5p .rank_v3 .rt_league_heading small { font-size: 60px; }
html.h5p .rank_v3 .rt_league_card p { font-size: 45px; line-height: 1.45; margin: 24px 0; }
html.h5p .rank_v3 .rt_status { font-size: 47px; border-radius: 40px; padding: 18px 8px; color: #fffbe1; background: linear-gradient(#72b64a,#337234); box-shadow: 0 5px 0 #d0d2a6; }
html.h5p .rank_v3 .rt_status.rt_STAY, html.h5p .rank_v3 .rt_status.rt_NONE { background: linear-gradient(#739c9d,#426773); }
html.h5p .rank_v3 .rt_status.rt_DOWN { background: linear-gradient(#cf6760,#973234); }
html.h5p .rank_v3 .rt_score { border-top: 2px solid #d0b485; margin-top: 35px; padding-top: 35px; font-size: 48px; }
html.h5p .rank_v3 .rt_score b { font-size: 68px; color: #b52927; margin-left: 20px; }
html.h5p .rank_v3 .rt_progress { height: 32px; border: 3px solid #8d9171; border-radius: 30px; background: #e3d8bd; margin: 30px 0 0; overflow: hidden; }
html.h5p .rank_v3 .rt_progress span { display: block; height: 100%; background: linear-gradient(#c7ef60,#58a641); border-radius: inherit; }
html.h5p .rank_v3 .rt_target small { font-size: 35px; }
html.h5p .rank_v3 .rt_expected { background: #fffdf4; border-radius: 22px; padding: 26px 12px; font-size: 45px; }
html.h5p .rank_v3 .rt_expected > div { display: flex; justify-content: center; gap: 15px; margin-top: 28px; flex-wrap: wrap; }
html.h5p .rank_v3 .rt_expected .rt_money { font-size: 48px; }
html.h5p .rank_v3 .rt_disclaimer { font-size: 32px; padding-top: 18px; }
html.h5p .rank_v3 .rt_note { font-size: 36px; line-height: 1.5; text-align: center; color: #ffedcc; text-shadow: 0 2px 2px #152c32; margin: 18px 0; }
html.h5p .rank_v3 .rt_list_heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; gap: 10px; font-size: 44px; border: 4px solid #ebc777; border-radius: 22px; background: #503f24; }
html.h5p .rank_v3 .rt_list_heading span { font-size: 36px; }
html.h5p .rank_v3 .rt_table { border: 3px solid #ddcc9f; border-radius: 20px; overflow: hidden; background: #fff9e9; color: #362b20; }
html.h5p .rank_v3 .rt_columns { display: flex; justify-content: space-between; background: #142e38; color: #fff5e3; padding: 16px 24px; font-size: 38px; }
html.h5p .rank_v3 .rt_row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; min-height: 114px; border-bottom: 2px solid #cfbf9b66; font-size: 45px; }
html.h5p .rank_v3 .rt_place { flex-shrink: 0; width: 70px; text-align: center; font-size: 48px; font-weight: 800; }
html.h5p .rank_v3 .rt_place_1, html.h5p .rank_v3 .rt_place_2, html.h5p .rank_v3 .rt_place_3 { background: linear-gradient(#fff4b9,#d3a345); border: 6px double #a67b38; border-radius: 40% 40% 45% 45%; color: #704613; }
html.h5p .rank_v3 .rt_place_2 { background: linear-gradient(#f1fbff,#9dafbb); border-color: #6d8193; color: #314e62; }
html.h5p .rank_v3 .rt_place_3 { background: linear-gradient(#ffddb3,#c18c57); border-color: #8e6139; color: #674022; }
html.h5p .rank_v3 .rt_row .rt_face { width: 82px; height: 82px; border-width: 3px; }
html.h5p .rank_v3 .rt_name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
html.h5p .rank_v3 .rt_name small { font-size: 34px; }
html.h5p .rank_v3 .rt_row_points { min-width: 110px; text-align: right; }
html.h5p .rank_v3 .rt_row_reward { width: 230px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
html.h5p .rank_v3 .rt_row_reward .rt_money { font-size: 32px; }
html.h5p .rank_v3 .rt_row_reward .rt_icon { width: 40px; height: 40px; }
html.h5p .rank_v3 .rt_movement { width: 90px; text-align: center; }
html.h5p .rank_v3 .rt_UP { color: #368e3d; }
html.h5p .rank_v3 .rt_DOWN { color: #bd3034; }
html.h5p .rank_v3 .rt_self { background: linear-gradient(#fff59e,#ffdc59); color: #512c0c; box-shadow: inset 0 0 0 3px #ffe98f; }
html.h5p .rank_v3 .rt_dark { background: #24353dda; color: #fff6e7; border-color: #7b9ba9; }
html.h5p .rank_v3 .rt_dark .rt_row { border-bottom-color: #e6f2ee22; }
html.h5p .rank_v3 .rt_boundary { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 36px; font-weight: 800; padding: 16px 10px; background: #f3f1dc; }
html.h5p .rank_v3 .rt_boundary:before,html.h5p .rank_v3 .rt_boundary:after { content: ''; height: 10px; border-radius: 8px; background: currentColor; flex: 1; }
html.h5p .rank_v3 .rt_pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 42px; margin: 28px 0; }
html.h5p .rank_v3 .rt_pager button { font-size: 40px; }
html.h5p .rank_v3 #RT_pinned { flex-shrink: 0; }
html.h5p .rank_v3 .rt_my_jump { width: 100%; padding: 0; border: 4px solid #ecbd4f; border-radius: 20px; overflow: hidden; }
html.h5p .rank_v3 #RT_pinned p { font-size: 39px; text-align: center; margin: 14px 0 0; }
html.h5p .rank_v3 .rt_hall_podium { min-height: 610px; padding-top: 84px; padding-bottom: 22px; }
html.h5p .rank_v3 .rt_hall_podium .rt_winner_1 .rt_winner_panel { min-height: 560px; background: linear-gradient(#593716,#201c17); }
html.h5p .rank_v3 .rt_hall_podium .rt_winner_panel > small { font-size: 35px; line-height: 1.5; margin-top: 16px; }
html.h5p .rank_v3 .rt_hall_table { margin-top: 10px; }
html.h5p .rank_v3 .rt_hall_table .rt_row { min-height: 104px; }
/* 2026-10-08 CEO 지시: 등급 칸을 낮추고(260 -> 200) 칸 사이도 좁힌다(32 -> 20) */
/* 2026-10-09 CEO 지시: 카드가 팝업 폭에 너무 꽉 차 보인다 - 좌우를 6 -> 30 으로 (폭 960 -> 912) */
html.h5p .rank_v3 .rt_grade_cards { display: flex; flex-direction: column; gap: 20px; padding: 16px 30px; }
html.h5p .rank_v3 .rt_grade_card { position: relative; display: flex; align-items: center; gap: 30px; min-height: 200px; border: 7px double #bc974e; border-radius: 25px; padding: 22px 30px; }
html.h5p .rank_v3 .rt_grade_card .rt_badge { width: 155px; height: 155px; }
/* 이름과 설명 줄간격을 좁힌다 (2026-10-08 CEO 지시) */
html.h5p .rank_v3 .rt_grade_card h3 { margin: 0 0 6px; font-size: 74px; line-height: 1.1; }
html.h5p .rank_v3 .rt_grade_card p { margin: 0; font-size: 42px; line-height: 1.2; }
html.h5p .rank_v3 .rt_grade_card em { position: absolute; top: 10px; right: 20px; font-size: 34px; font-style: normal; border-radius: 20px; background: #215a36; color: white; padding: 6px 20px; }
html.h5p .rank_v3 .rt_my_grade { outline: 6px solid #ffe385; box-shadow: 0 0 24px #f8d744; }
/* 2026-10-08 CEO 지시: 박스를 빼고 글자만 둔다 */
html.h5p .rank_v3 .rt_parchment { padding: 10px 20px 0; border: 0; border-radius: 0; background: none; color: #452f1b; font-size: 45px; text-align: center; line-height: 1.4; }
html.h5p .rank_v3 .rt_reward_sheet { margin-top: 28px; background: #fffaea; color: #453019; border: 6px double #cca666; border-radius: 25px; padding: 26px; font-size: 42px; }
html.h5p .rank_v3 .rt_reward_sheet h3 { font-size: 53px; text-align: center; margin: 10px 0 26px; }
html.h5p .rank_v3 table { border-collapse: collapse; width: 100%; text-align: center; font-size: 43px; }
html.h5p .rank_v3 td, html.h5p .rank_v3 th { border: 2px solid #d6c3a0; padding: 23px 5px; }
html.h5p .rank_v3 th { background: #efe2c6; }
html.h5p .rank_v3 td:last-child { color: #be292e; }
html.h5p .rank_v3 .rt_reward_sheet p { font-size: 38px; line-height: 1.6; }
/* 보상 표에서 내 등급 줄 강조 + '내 등급' 꼬리표, 2위~상위 20% 표는 끝 칸을 빨갛게 하지 않는다 (2026-10-01 CEO 지시) */
html.h5p .rank_v3 .rt_reward_sheet tr.rt_my_row td { background: linear-gradient(#fff59e,#ffdc59); color: #512c0c; font-weight: 800; border-color: #e0a92e; box-shadow: inset 0 4px 0 #f2b632, inset 0 -4px 0 #f2b632; }
html.h5p .rank_v3 .rt_reward_sheet tr.rt_my_row td:last-child { color: #be292e; }
html.h5p .rank_v3 .rt_reward_sheet .rt_reward_range td:last-child { color: inherit; }
html.h5p .rank_v3 .rt_reward_sheet .rt_reward_range tr.rt_my_row td:last-child { color: #512c0c; }
html.h5p .rank_v3 .rt_my_tag { display: block; margin-top: 4px; font-size: 30px; font-style: normal; font-weight: 800; color: #b3331c; }
html.h5p .rank_v3 .rt_draft { text-align: center; padding: 14px; background: #f5dfb6; border-radius: 15px; color: #803d16; }
/* 줄간격 1.6 -> 1.3 (2026-10-07 CEO 지시: 세 줄 안내가 너무 벌어져 보였다) */
html.h5p .rank_v3 .rt_empty { padding: 70px 25px; font-size: 48px; line-height: 1.3; text-align: center; background: #143139c9; border-radius: 24px; }
html.h5p .rank_v3 .rt_empty h2 { font-size: 55px; }
/* 도움말 팭업: 다른 팭업과 같은 모양으로 맞춘다 (2026-10-07 CEO 지시).
   9조각 크림 판 + 노란 머리띄(104) + 닫기 X 그림 + 들고나는 연출까지 공용 확인 팭업과 동일 */
html.h5p .rank_v3 .rt_modal
{
    position: absolute;
    inset: 0;
    z-index: 100;
    /* 2026-10-07 CEO 지시: 양옆에 여유가 있어 70 -> 40 으로 줄여 판이 1000 까지 펴지게 한다
       (판 자체는 늘림칸이라 이 여백이 판의 최대 폭을 정한다. 내 정보 팝업과 같은 1000 이 된다) */
    /* 2026-10-07 CEO 지시: 위아래도 양옆과 같은 40 으로 맞춰 판을 화면 끝까지 편다.
       다만 위쪽 96 은 카메라 구멍 자리(--h5p_safe_t)라 거기에 40 을 더해 피한다.
       아래 40 은 서브화면 이전 버튼 아래끝과 같은 선이다 */
    padding: 136px 40px 40px;
    padding: -webkit-calc(var(--h5p_safe_t, 96px) + 40px) 40px 40px;
    padding: calc(var(--h5p_safe_t, 96px) + 40px) 40px 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* 딤 색은 아래 ::before 가 깐다 - 1080 칸보다 넓게 펴야 해서 따로 뗐다 (2026-10-09) */
    background: none;
    touch-action: pan-y;
    -webkit-animation: h5pc_dim_in 0.16s ease-out both;
    animation: h5pc_dim_in 0.16s ease-out both;
}
/* 2026-10-09 CEO 지적: 태블릿(캔버스가 1080 보다 넓다)에서 딤이 1080 칸 안에서 끊겨 양옆에 배경이 그대로 보였다.
   판 자리(가운데 1080 칸 기준)는 그대로 두고 딤만 좌우로 넓게 깐다 */
html.h5p .rank_v3 .rt_modal::before
{
    content: '';
    position: absolute;
    left: -4000px;
    right: -4000px;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 0;
}
/* 판은 딤 위에 (::before 가 absolute 라 자리를 잡아 두면 판이 뒤로 숨을 수 있다) */
html.h5p .rank_v3 .rt_modal > .rt_dialog
{
    position: relative;
    z-index: 1;
}
html.h5p .rank_v3 .rt_modal.rt_modal_closing
{
    -webkit-animation: h5p_dim_fade_out 0.23s ease-in both;
    animation: h5p_dim_fade_out 0.23s ease-in both;
}
/* 2026-10-07 CEO 지시: 양옆에 아직 여유가 있어 판을 더 넓힌다 (940 -> 1000).
   내 정보 팝업(#MYI_panel)과 같은 1000 으로 맞췄다 - 화면 1080 안에서 양옆 40 씩 남는다.
   제목 띠와 닫기 X 자리도 같이 옮긴다 (X 는 #MYI_close 와 같은 left 880) */
html.h5p .rank_v3 .rt_dialog
{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 1000px;
    /* 2026-10-08 CEO 지시: 안내 구분(등급/규칙/일간/주간)을 옮길 때마다 판 크기가 달라지지 않게 높이를 고정한다.
       가장 긴 안내가 들어가는 크기(= 딤 안쪽을 가득 채운 높이)로 두고, 본문만 안에서 구른다 */
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 104px 60px 70px;
    box-sizing: border-box;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    border: 0;
    border-radius: 0;
    color: #3b2a10;
    font-size: 46px;
    line-height: 1.55;
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    -webkit-animation: rt_pop_in 0.22s ease-out both;
    animation: rt_pop_in 0.22s ease-out both;
}
html.h5p .rank_v3 .rt_modal.rt_modal_closing .rt_dialog
{
    -webkit-animation: rt_pop_out 0.23s ease-in both;
    animation: rt_pop_out 0.23s ease-in both;
}
@-webkit-keyframes rt_pop_in
{
    0%   { opacity: 0; -webkit-transform: scale(0.4); }
    55%  { opacity: 1; -webkit-transform: scale(1.06); }
    78%  { -webkit-transform: scale(0.98); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes rt_pop_in
{
    0%   { opacity: 0; transform: scale(0.4); }
    55%  { opacity: 1; transform: scale(1.06); }
    78%  { transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}
@-webkit-keyframes rt_pop_out
{
    0%   { opacity: 1; -webkit-transform: scale(1); }
    25%  { opacity: 1; -webkit-transform: scale(1.04); }
    100% { opacity: 0; -webkit-transform: scale(0.4); }
}
@keyframes rt_pop_out
{
    0%   { opacity: 1; transform: scale(1); }
    25%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(0.4); }
}
/* 제목: 노란 머리띄 가운데 (공용 팭업과 같은 자리/크기/색) */
html.h5p .rank_v3 .rt_dialog h2
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 1000px;
    height: 90px;
    line-height: 90px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 58px;
    font-weight: 800;
    color: #946d06;
    white-space: nowrap;
    pointer-events: none;
}
/* 오른쪽 위 닫기 X (공용 팭업과 같은 그림 popup_xbt 57x56) */
html.h5p .rank_v3 #RT_modal_close
{
    position: absolute;
    left: 880px;
    right: auto;
    top: 0;
    width: 120px;
    height: 104px;
    padding: 0;
    border: 0;
    font-size: 0;
    color: transparent;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    /* 내 정보 팝업의 X(#MYI_close)와 똑같이 - 둥근 테두리/그림자/누름 표시를 모두 지웠다 (2026-10-07 CEO 지시) */
    border-radius: 0;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    z-index: 5;
}
html.h5p .rank_v3 #RT_modal_close:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
html.h5p .rank_v3 .rt_help_steps { margin: 0; padding-left: 74px; }
html.h5p .rank_v3 .rt_help_steps li { padding: 0 0 30px 10px; }
html.h5p .rank_v3 .rt_help_steps li::marker { color: #b67d22; font-weight: bold; }
html.h5p .rank_v3 .rt_help_steps p { font-size: 43px; line-height: 1.5; margin: 8px 0 0; }
html.h5p .rank_v3 .rt_dialog .rt_primary { display: block; width: 100%; font-size: 54px; margin-top: 28px; padding: 28px 8px; }
@media (max-width:360px) {
    html.h5p .rank_v3 .rt_row { font-size: 50px; }
    html.h5p .rank_v3 .rt_note, html.h5p .rank_v3 .rt_disclaimer { font-size: 42px; }
}
/* 기준 시안의 첫 화면에서 전체랭킹 및 하단 안내까지 보이도록 본문 높이를 맞춘다. */
html.h5p .rank_v3 .rt_jackpot { min-height: 200px; padding: 14px; margin-bottom: 24px; }
html.h5p .rank_v3 .rt_podium { min-height: 475px; }
html.h5p .rank_v3 .rt_winner_1 .rt_winner_panel { min-height: 405px; padding-top: 45px; }
html.h5p .rank_v3 .rt_winner_panel { min-height: 325px; }
html.h5p .rank_v3 .rt_winner_1 .rt_face { width: 170px; height: 170px; }
html.h5p .rank_v3 .rt_all_button { margin: 15px 0 26px; }
html.h5p .rank_v3 .rt_league { margin: 35px 5px 25px 24px; gap: 45px; }
html.h5p .rank_v3 .rt_ladder { width: 260px; padding: 27px 0; gap: 52px; }
html.h5p .rank_v3 .rt_ladder_step .rt_badge { width: 165px; height: 165px; }
html.h5p .rank_v3 .rt_ladder_step .rt_badge b { font-size: 83px; }
html.h5p .rank_v3 .rt_league_card { padding: 28px 22px 20px; }
html.h5p .rank_v3 .rt_league_heading .rt_face { width: 130px; height: 130px; }
html.h5p .rank_v3 .rt_league_heading > b { font-size: 100px; }
html.h5p .rank_v3 .rt_league_heading small { font-size: 52px; }
html.h5p .rank_v3 .rt_league_card p { margin: 15px 0; }
html.h5p .rank_v3 .rt_score { margin-top: 20px; padding-top: 22px; }
html.h5p .rank_v3 .rt_status { font-size: 43px; padding: 14px 6px; }
html.h5p .rank_v3 .rt_expected { padding: 22px 10px; }
html.h5p .rank_v3 .rt_expected > div { margin-top: 18px; }
html.h5p .rank_v3 .rt_hall_podium { min-height: 555px; }
html.h5p .rank_v3 .rt_hall_podium .rt_winner_1 .rt_winner_panel { min-height: 480px; }
html.h5p .rank_v3 .rt_hall_table .rt_row { min-height: 94px; padding-top: 8px; padding-bottom: 8px; }

html.h5p .rank_v3 .rt_grade_D { background: linear-gradient(125deg,#9c672d,#dcac69 50%,#71501d); color: #fff8e5; }
html.h5p .rank_v3 .rt_grade_card.rt_my_grade { background: linear-gradient(110deg,#ffc94e,#fff6a2,#f0c43c); color: #4d3011; }
html.h5p .rank_v3 .rt_jackpot { position: relative; }
html.h5p .rank_v3 .rt_jackpot:before, html.h5p .rank_v3 .rt_jackpot:after { content: ''; position: absolute; width: 105px; height: 105px; top: 55px; background: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_gold.png) center/contain no-repeat; filter: drop-shadow(0 7px 4px #29180e); }
html.h5p .rank_v3 .rt_jackpot:before { left: 5px; transform: rotate(-15deg); }
html.h5p .rank_v3 .rt_jackpot:after { right: 5px; transform: rotate(15deg); }

/* 메뉴와 도움말 구분은 고정하고 각 본문만 스크롤한다. */
html.h5p .rank_v3 #RT_tabs { padding-bottom: 18px; }
html.h5p .rank_v3 #RT_help_tabs { margin-bottom: 25px; }
html.h5p .rank_v3 #RT_help_tabs button { min-height: 96px; }	/* 글자 크기는 아래 새 시안 블록에서 정한다 */
/* 규칙 요약 아래 이어지는 '자세한 규칙' 제목 (2026-10-07) */
html.h5p .rank_v3 .rt_rules_more { font-size: 52px; text-align: center; margin: 20px 0 16px; padding-top: 28px; border-top: 4px dashed #cfb07a; }
/* 자세한 규칙: 긴 문장 대신 '제목 - 내용' 두 칸으로 읽는다 (2026-10-08 CEO 지시) */
html.h5p .rank_v3 .rt_rule_group { margin: 0 0 26px; }
/* 표 바로 뒤에 붙는 묶음(일간 보상 탭의 '상금은 이렇게 모입니다')은 표와 붙어 보여 띄운다 (2026-10-15 CEO 지시) */
html.h5p .rank_v3 table + .rt_rule_group { margin-top: 34px; }
html.h5p .rank_v3 .rt_rule_group h4
{
	margin: 0 0 10px;
	padding: 8px 22px;
	border-radius: 12px;
	background: #e8d4a8;
	color: #4a3113;
	font-size: 42px;
	font-weight: 800;
}
html.h5p .rank_v3 .rt_rule_group dl
{
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	margin: 0;
}
html.h5p .rank_v3 .rt_rule_group dt
{
	-webkit-flex: 0 0 290px; flex: 0 0 290px;
	box-sizing: border-box;
	padding: 9px 16px 9px 10px;
	color: #7a5a2c;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
}
html.h5p .rank_v3 .rt_rule_group dd
{
	-webkit-flex: 1 1 calc(100% - 290px); flex: 1 1 calc(100% - 290px);
	box-sizing: border-box;
	margin: 0;
	padding: 9px 6px 9px 0;
	color: #3f2b16;
	font-size: 41px;
	line-height: 1.25;
}
/* 줄 사이를 옅은 선으로 가른다 - 첫 줄 위에는 긋지 않는다 */
html.h5p .rank_v3 .rt_rule_group dt { border-top: 2px solid #e3d2b2; }
html.h5p .rank_v3 .rt_rule_group dd { border-top: 2px solid #e3d2b2; }
html.h5p .rank_v3 .rt_rule_group dt:first-of-type,
html.h5p .rank_v3 .rt_rule_group dt:first-of-type + dd { border-top: 0; }
/* 덧붙이는 설명은 한 줄 내려 작게 */
html.h5p .rank_v3 .rt_rule_group dd em
{
	display: block;
	margin-top: 2px;
	color: #806546;
	font-size: 35px;
	font-style: normal;
	line-height: 1.2;
}
html.h5p .rank_v3 .rt_dialog h2 { flex-shrink: 0; }
html.h5p .rank_v3 #RT_modal_body { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
html.h5p .rank_v3 #RT_modal_body .rt_grade_card p { font-size: 34px; }
html.h5p .rank_v3 .rt_dialog .rt_tabs button { color: #fff7e4; }
html.h5p .rank_v3 .rt_dialog .rt_tabs .rt_selected { color: #402500; }

/* 배경은 랭킹 전용 그림(bg/ranking_bg.jpg)을 쓴다 (2026-10-02 CEO 지시).
   한동안 메인메뉴 그림(main_bg.jpg)으로 덮어 두었는데, 두 그림 모두 2412x3024 라 넓은 화면에서도 똑같이 이어진다.
   실제 지정은 h5_portrait.css 의 html.h5p.h5p_bg_ranking #h5p_bg 에 있다 - 여기서는 덮지 않는다 */

html.h5p .rank_v3 .rt_reward_sheet + .rt_reward_sheet { margin-top: 32px; }
/* 일간 보상은 감싸는 박스 없이 내용만 보여 준다 (2026-10-08 CEO 지시) */
html.h5p .rank_v3 .rt_reward_sheet.rt_reward_plain
{
	margin-top: 0;
	/* 2026-10-09 CEO 지시: 표가 팝업 폭에 꽉 차 보인다 - 좌우 30 씩 들인다.
	   오른쪽에는 스크롤 자리 22 가 이미 있어 8 만 더한다 (좌우 30 으로 같아진다) */
	padding: 0 8px 0 30px;
	border: 0;
	border-radius: 0;
	background: none;
}

html.h5p .rank_v3 .rt_daily_champions { margin: 18px 0 34px; padding: 25px 20px; border: 3px solid #d3b46f; border-radius: 25px; background: #193c3dea; }
html.h5p .rank_v3 .rt_daily_champions h2, html.h5p .rank_v3 .rt_weekly_champions h2 { text-align: center; font-size: 52px; margin: 15px 0; }
html.h5p .rank_v3 .rt_daily_winners { display: flex; gap: 18px; }
html.h5p .rank_v3 .rt_daily_winners article { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 38px; }
html.h5p .rank_v3 .rt_daily_winners strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.h5p .rank_v3 .rt_daily_winners .rt_face { width: 100px; height: 100px; }
html.h5p .rank_v3 .rt_daily_medal { color: #ffe08b; }
html.h5p .rank_v3 .rt_daily_winners small { color: #ffe08b; font-size: 34px; }
html.h5p .rank_v3 .rt_hall_grades button { font-size: 46px; padding: 12px 2px; }
html.h5p .rank_v3 .rt_hall_grades small { display: block; font-size: 33px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_podium { margin-top: 90px; }
html.h5p .rank_v3 .rt_hall_empty { text-align: center; font-size: 40px; padding: 35px 15px; border-radius: 20px; background: #183434d9; }
html.h5p .rank_v3 .rt_weekly_champions > h2 { background: #193c3dea; border-radius: 18px; padding: 16px 8px; }
html.h5p .rank_v3 .rt_weekly_champions > .rt_note { background: #193c3dd9; border-radius: 14px; padding: 10px; }

/* ===== 2026-09-30 CEO 가안 반영: 일간/주간은 홈에서 바로 전체 순위, 줄마다 등급 배지와 프로필 ===== */

/* 순위 한 줄 - 순위 / 배지 / 프로필 / 닉네임+점수 / 예상 상금 (주간은 비고까지) */
html.h5p .rank_v3 .rt_row { gap: 12px; padding: 10px 14px; min-height: 126px; }
html.h5p .rank_v3 .rt_row .rt_badge { width: 96px; height: 96px; border-width: 4px; border-radius: 18px; box-shadow: inset 0 0 8px #fff8c9, 0 3px 4px #1b151d77; }
html.h5p .rank_v3 .rt_row .rt_badge b { font-size: 46px; }
html.h5p .rank_v3 .rt_row .rt_badge small { display: none; }
html.h5p .rank_v3 .rt_row .rt_face { width: 96px; height: 96px; border-width: 4px; }
html.h5p .rank_v3 .rt_row .rt_name { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.15; }
html.h5p .rank_v3 .rt_row .rt_name b { font-size: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.h5p .rank_v3 .rt_row .rt_name i { font-style: normal; font-size: 42px; font-weight: 800; color: #b02a2c; }
html.h5p .rank_v3 .rt_dark .rt_row .rt_name i { color: #ff9e8c; }
html.h5p .rank_v3 .rt_self .rt_name i { color: #8e2416; }
html.h5p .rank_v3 .rt_row_reward { width: 250px; align-items: flex-end; justify-content: center; }
html.h5p .rank_v3 .rt_row_reward .rt_money { font-size: 36px; }
html.h5p .rank_v3 .rt_row_reward .rt_icon { width: 46px; height: 46px; }
html.h5p .rank_v3 .rt_row_reward small { font-size: 36px; opacity: .7; }
html.h5p .rank_v3 .rt_movement { width: 62px; font-size: 44px; }

/* 표 머리글 - 가안의 세 칸 */
html.h5p .rank_v3 .rt_columns { padding: 14px 18px; font-size: 36px; }
html.h5p .rank_v3 .rt_col_rank { width: 86px; text-align: center; flex-shrink: 0; }
html.h5p .rank_v3 .rt_col_name { flex: 1; text-align: left; padding-left: 216px; }
html.h5p .rank_v3 .rt_col_tail { text-align: right; flex-shrink: 0; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_tail { width: 324px; }
html.h5p .rank_v3[data-mode="daily"] .rt_col_tail { width: 250px; }

/* 1~3위는 왕관 모양 자리표 */
html.h5p .rank_v3 .rt_place { width: 86px; font-size: 46px; }
html.h5p .rank_v3 .rt_place_1, html.h5p .rank_v3 .rt_place_2, html.h5p .rank_v3 .rt_place_3
{ height: 96px; line-height: 84px; border-radius: 22px 22px 34px 34px; }

/* 아래에 붙어 있는 내 순위 */
html.h5p .rank_v3 #RT_pinned { flex-shrink: 0; padding-top: 6px; }
html.h5p .rank_v3 .rt_my_jump { display: flex; align-items: stretch; background: linear-gradient(#fff59e,#ffdc59); }
html.h5p .rank_v3 .rt_my_jump .rt_row { flex: 1; min-width: 0; border-bottom: 0; }

/* 일간 리그 상금판 - 시계 / 캐릭터 + 문구 / 금액 */
html.h5p .rank_v3 .rt_jackpot { min-height: 0; padding: 16px 20px 22px; margin-bottom: 26px; }
html.h5p .rank_v3 .rt_jackpot .rt_timer { margin: 0 auto 10px; }
html.h5p .rank_v3 .rt_jackpot_head { display: flex; align-items: center; justify-content: center; gap: 16px; }
html.h5p .rank_v3 .rt_jackpot_char { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 5px 4px #2d130c); }
html.h5p .rank_v3 .rt_jackpot_head span { font-size: 56px; color: #ffe08b; text-shadow: 0 4px #56220f; }
html.h5p .rank_v3 .rt_jackpot strong { font-size: 68px; margin: 12px 24px 8px; padding: 10px 8px; border: 4px solid #d9a95b; border-radius: 22px; background: #3b1f18cc; }
html.h5p .rank_v3 .rt_jackpot:before, html.h5p .rank_v3 .rt_jackpot:after { top: 120px; width: 92px; height: 92px; }

/* 주간 리그 내 등급 카드 */
html.h5p .rank_v3 .rt_league_card { position: relative; display: block; padding: 22px 24px 24px; margin-bottom: 24px; }
html.h5p .rank_v3 .rt_league_body { display: flex; align-items: center; gap: 24px; text-align: left; }
html.h5p .rank_v3 .rt_league_body > .rt_badge { width: 250px; height: 250px; flex-shrink: 0; }
html.h5p .rank_v3 .rt_league_body > .rt_badge b { font-size: 120px; }
html.h5p .rank_v3 .rt_league_body > .rt_badge small { font-size: 50px; }
html.h5p .rank_v3 .rt_league_info { flex: 1; min-width: 0; }
html.h5p .rank_v3 .rt_league_heading { justify-content: flex-start; gap: 14px; }
html.h5p .rank_v3 .rt_league_heading .rt_face { width: 92px; height: 92px; }
html.h5p .rank_v3 .rt_league_heading > b { font-size: 60px; }
html.h5p .rank_v3 .rt_league_card .rt_status { display: block; margin: 12px 0; padding: 12px 18px; font-size: 40px; text-align: left; border-radius: 18px; background: #fffdf3; color: #40270f; box-shadow: none; border: 2px solid #e0cda3; }
html.h5p .rank_v3 .rt_league_card .rt_status b { color: #2f8a3f; }
html.h5p .rank_v3 .rt_league_card .rt_status.rt_DOWN b { color: #bd3034; }
html.h5p .rank_v3 .rt_league_card .rt_status.rt_NONE b, html.h5p .rank_v3 .rt_league_card .rt_status.rt_STAY b { color: #2f6f8a; }
html.h5p .rank_v3 .rt_league_card .rt_score { border-top: 0; margin: 0; padding: 0 4px; font-size: 42px; text-align: left; }
html.h5p .rank_v3 .rt_league_card .rt_score b { font-size: 50px; margin-left: 12px; }
html.h5p .rank_v3 .rt_league_card .rt_cut { margin-top: 6px; }
html.h5p .rank_v3 .rt_league_card .rt_progress { margin: 14px 0 16px; height: 26px; }
html.h5p .rank_v3 .rt_league_card .rt_expected { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 40px; }
html.h5p .rank_v3 .rt_league_card .rt_expected > div { margin-top: 0; justify-content: flex-end; }
html.h5p .rank_v3 .rt_league_card .rt_expected .rt_money { font-size: 42px; }
html.h5p .rank_v3 .rt_league_card .rt_disclaimer { position: absolute; right: 26px; top: 26px; padding: 0; font-size: 32px; color: #7a6039; }

/* 등급 고르는 버튼 줄 (주간 리그 / 명예의 전당 공용) */
html.h5p .rank_v3 .rt_hall_grades { gap: 8px; margin: 6px 0 18px; }
html.h5p .rank_v3 .rt_hall_grades button { flex: 1; min-height: 0; padding: 10px 2px; border-radius: 20px; }
html.h5p .rank_v3 .rt_hall_grades .rt_badge { width: 100%; max-width: 132px; height: 116px; border-width: 4px; border-radius: 16px; box-shadow: none; }
html.h5p .rank_v3 .rt_hall_grades .rt_badge b { font-size: 48px; }
html.h5p .rank_v3 .rt_hall_grades .rt_badge small { font-size: 30px; }
html.h5p .rank_v3 .rt_hall_grades .rt_selected .rt_badge { box-shadow: 0 0 0 5px #fff1b8, 0 0 20px #ffd453; }

/* 명예의 전당: 일간이 위, 주간이 아래. 일간은 빈 자리도 세 칸을 지킨다 */
html.h5p .rank_v3 .rt_weekly_champions { margin-bottom: 20px; padding: 20px 18px 8px; border: 3px solid #d3b46f; border-radius: 25px; background: #193c3dea; }
html.h5p .rank_v3 .rt_weekly_champions > h2 { background: none; padding: 0; margin: 8px 0 4px; }
html.h5p .rank_v3 .rt_weekly_champions > .rt_note { background: none; padding: 0; margin: 0 0 6px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_podium { margin-top: 0; min-height: 470px; }
html.h5p .rank_v3 .rt_daily_champions { margin: 0 0 30px; }
html.h5p .rank_v3 .rt_daily_winners { gap: 14px; align-items: stretch; }
html.h5p .rank_v3 .rt_daily_winners article { justify-content: flex-start; padding: 18px 8px; border: 3px solid #6f8f83; border-radius: 20px; background: #10292bd9; }
html.h5p .rank_v3 .rt_daily_winners .rt_daily_1 { border-color: #ffd873; }
html.h5p .rank_v3 .rt_daily_winners .rt_face { width: 116px; height: 116px; }
html.h5p .rank_v3 .rt_daily_winners .rt_vacant { display: flex; align-items: center; justify-content: center; font-size: 62px; }
html.h5p .rank_v3 .rt_daily_winners small { display: flex; align-items: center; gap: 6px; min-height: 46px; }
html.h5p .rank_v3 .rt_daily_winners small .rt_icon { width: 40px; height: 40px; }

/* 닉네임이 열두 글자여도 들어가게 양옆 칸을 줄인다 (2026-09-30) */
html.h5p .rank_v3 .rt_row { gap: 10px; padding: 10px 12px; }
html.h5p .rank_v3 .rt_row .rt_badge, html.h5p .rank_v3 .rt_row .rt_face { width: 88px; height: 88px; }
html.h5p .rank_v3 .rt_row .rt_name b { font-size: 42px; }
html.h5p .rank_v3 .rt_row .rt_name i { font-size: 40px; }
html.h5p .rank_v3 .rt_place { width: 78px; }
html.h5p .rank_v3 .rt_place_1, html.h5p .rank_v3 .rt_place_2, html.h5p .rank_v3 .rt_place_3 { height: 88px; line-height: 76px; }
html.h5p .rank_v3[data-mode="daily"] .rt_row_reward { width: 236px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_row_reward { width: 200px; }
html.h5p .rank_v3 .rt_movement { width: 54px; }
html.h5p .rank_v3[data-mode="daily"] .rt_col_name { padding-left: 196px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_name { padding-left: 98px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_tail { width: 264px; }
html.h5p .rank_v3[data-mode="daily"] .rt_col_tail { width: 236px; }

/* 기록 없는 등급은 시상대와 같은 높이의 빈 자리에 안내만 가운데 놓는다 (2026-09-30 CEO 지시) */
html.h5p .rank_v3 .rt_hall_blank { display: flex; align-items: center; justify-content: center; min-height: 470px; padding: 20px 24px; }
html.h5p .rank_v3 .rt_hall_blank p { margin: 0; text-align: center; font-size: 44px; line-height: 1.5; color: #ffedcc; text-shadow: 0 2px 3px #071621; }

/* ======================================================================
   2026-10-02 CEO 새 시안(맞고 세로모드 랭킹) 적용 - 그림 에셋 기준 배치
   좌표는 1080x2340 캔버스 기준이며 첨부 시안에서 실측한 값이다.
   그림은 image/1_mainmenu/h5p/rank/ 에 있다.
   ====================================================================== */

/* 틀: 제목 / 메뉴 / 본문 / 내 순위 */
html.h5p .rank_v3 .rt_shell { top: 196px; bottom: 181px; left: 0; right: 0; gap: 0; }
html.h5p .rank_v3 .rt_header { min-height: 150px; }
/* 타이틀 글자 효과는 도신 대전·미션 등 다른 서브화면(.H5PT_title)과 같게 맞춘다 (2026-10-02 CEO 지시).
   예전에는 text-shadow 를 네 방향으로 깔아 모서리가 각지고 아래 그림자까지 있어 혼자 달라 보였다 */
html.h5p .rank_v3 .rt_header h1
{
	position: relative;
	margin: 0;
	height: 150px;
	line-height: 150px;
	font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
	font-size: 96px;
	font-weight: 800;
	letter-spacing: 4px;
	white-space: nowrap;
	color: transparent;
	text-shadow: none;
}
html.h5p .rank_v3 .rt_header h1::before,
html.h5p .rank_v3 .rt_header h1::after
{
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 150px;
	line-height: 150px;
	text-align: center;
}
html.h5p .rank_v3 .rt_header h1::before
{
	color: #4a2710;
	-webkit-text-stroke: 18px #4a2710;
}
html.h5p .rank_v3 .rt_header h1::after
{
	color: #ffffff;
}
html.h5p .rank_v3 h1 { font-size: 92px; }
/* 물음표는 금고 화면과 같은 그림 버튼으로, 타이틀 글자 오른쪽 위에 붙인다 (2026-10-03 / 2026-10-10 CEO 지시) */
/* 타이틀 앞 아이콘은 2026-10-10 CEO 지시로 흐름에서 빼 띄웠다 (css/h5_portrait.css 의 .H5PT_icon).
   그래서 이 h1 의 폭은 글자만큼(182.7)이 되어 다른 서브화면과 똑같이 상자 가운데(449)에 선다.
   미는 양 80.8 과 아이콘 자리는 그쪽에서 잰 값과 같은 규칙이다 (아이콘 보이는 끝 ~ 글자 테두리 28) */
html.h5p .rank_v3 .rt_header h1.H5PT_has_icon::before,
html.h5p .rank_v3 .rt_header h1.H5PT_has_icon::after
{
	-webkit-transform: translateX(80.8px);
	transform: translateX(80.8px);
}
/* 아이콘은 h1 안에 띄워 두므로 자리는 h1 왼끝(449) 기준이다 - 1080 기준 355.9 에서 449 를 뺀 값 */
html.h5p .rank_v3 .rt_header h1.H5PT_ic_ranking .H5PT_icon { left: -92.7px; }
/* 아래 값은 JS(H5P_TITLE.pin_help)가 글자를 재서 다시 넣기 전의 되돌이값이다 (2026-10-07 CEO 지시로 ? 를 글자에 매단다) */
html.h5p .rank_v3 .rt_header h1.H5PT_has_icon ~ button { left: 729.8px; }
html.h5p .rank_v3 .rt_header button
{
	left: 651px;
	right: auto;
	/* 글자 테두리 윗변(머리 상자 기준 20)에 버튼 윗변을 맞춘다 (2026-10-10 CEO 지시) */
	top: 20px;
	margin-top: 0;
	width: 65px;
	height: 67px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 0;
	color: transparent;
	background: url(../image/1_mainmenu/h5p/safe/guess_bt.png) no-repeat 0 0;
	background-size: 65px 67px;
}
html.h5p .rank_v3 #RT_scroll { margin-top: 39px; }
html.h5p .rank_v3 #RT_content { padding: 0 0 20px; }
/* 카테고리 버튼 그림은 모서리가 둥글어 왼끝(24)에 맞추면 글자만 튀어나온 듯이 보였다 -
   둥글려진 모서리 안쪽으로 24 밀어 넣는다 (2026-10-07 CEO 지시) */
/* '조회 00:00' 은 오른쪽 끝에 붙인다 (2026-10-13 CEO 지시).
   왼쪽에 두었더니 이전 버튼을 좌측 상단으로 올리면서 그 아래에 겹쳤다.
   오른끝은 아래 칸 줄(#RT_tabs 바깥 여백 24)보다 24 안쪽인 48 에 맞춘다 */
html.h5p .rank_v3 #RT_notice { position: absolute; top: 132px; right: 48px; left: auto; width: auto; text-align: right; font-size: 32px; line-height: 36px; min-height: 0; opacity: .85; }

/* 메뉴 세 개 - 그림 버튼 */
html.h5p .rank_v3 #RT_tabs { margin: 26px 24px 0; padding: 0; gap: 23px; }
/* 탭 글자는 상점(충전소) 카테고리 버튼과 같은 꼴로 - 흰 글자에 두꺼운 테두리 (2026-10-05 CEO 지시).
   h5_portrait.css 의 .MSP_tab_txt 와 같은 값이다 (46px / 800 / 상하좌우 3px + 대각 2px) */
/* 글자가 칸 아래쪽으로 치우쳐 보였다 (2026-10-07 CEO 지적).
   그림 89 가운데 아래 4줄(85~88)은 바닥 그림자라 실제 버튼 몸통은 0~84, 그 가운데는 42 다.
   상자 가운데(44.5)에 맞추면 2.5 내려앉는다 - 아래 안여백 6 을 줘 글자를 3 올린다 */
/* 2026-10-09 CEO 지시: 랭킹 전용 띠 그림(ranking_dim.png, 2026-10-09 CEO 전달)을 칸 줄 아래에 깐다.
   상점과 같은 크기·같은 자리 관계로 둔다 - 띠 1022 폭에 칸 줄이 위에서 14 내려와 앉는다.
   띠 안에 금색 줄과 아래로 서서히 옅어지는 어두운 판이 함께 들어 있어, 아래 내용은 그 위에 얹힌다.
   칸(button)은 이 ::before 보다 뒤에 그려지고, 아래 목록은 다음 형제라 더 위에 그려진다 */
html.h5p .rank_v3 #RT_tabs
{
	position: relative;
	/* 2026-10-09 CEO 지시: 명예의 전당이 23 만큼 넘쳐 스크롤이 생겼다 - 아래 여백 20 을 돌려주고
	   띠를 그만큼 위로 올려(top -29) 금색 줄이 내용에 가리지 않게 한다 */
}
html.h5p .rank_v3 #RT_tabs:before
{
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -511px;	/* 띠 1022 를 화면 가운데에 (29~1051) - 칸 줄은 기기마다 폭이 달라 가운데 기준으로 잡는다 */
	/* 2026-10-09 CEO 지시: 금색 줄을 칸 줄과 아래 배너 사이 한가운데로.
	   실측(설계 1080) - 칸 줄 아랫변 460.7 / 배너 윗변 499.7 이라 한가운데가 480.
	   금색 줄은 그림 y 127.5 이고 칸 줄 윗변이 371.8 이라 top -20 이면 479.3 에 온다 */
	top: -20px;
	width: 1022px;
	height: 479px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_dim.png) 0 0/1022px 479px no-repeat;
	pointer-events: none;
}
html.h5p .rank_v3 #RT_tabs button
{
	flex: 1; height: 89px; min-height: 0; padding: 0 0 6px; border: 0; border-radius: 0; box-shadow: none;
	background: center/100% 100% no-repeat; font-size: 46px; font-weight: 800; color: #ffffff;
	text-shadow: -3px 0 0 #4a4f5e, 3px 0 0 #4a4f5e, 0 -3px 0 #4a4f5e, 0 3px 0 #4a4f5e,
	             -2px -2px 0 #4a4f5e, 2px -2px 0 #4a4f5e, -2px 2px 0 #4a4f5e, 2px 2px 0 #4a4f5e;
}
html.h5p .rank_v3 #RT_tabs [data-rt="daily"] { background-image: url(../image/1_mainmenu/h5p/rank/ranking_dailybt.png); }
html.h5p .rank_v3 #RT_tabs [data-rt="weekly"] { background-image: url(../image/1_mainmenu/h5p/rank/ranking_weelkybt.png); }
html.h5p .rank_v3 #RT_tabs [data-rt="hall"] { background-image: url(../image/1_mainmenu/h5p/rank/ranking_honorbt.png); }
html.h5p .rank_v3 #RT_tabs [data-rt="daily"].rt_selected { background-image: url(../image/1_mainmenu/h5p/rank/ranking_dailybt_selected.png?v=2); }
html.h5p .rank_v3 #RT_tabs [data-rt="weekly"].rt_selected { background-image: url(../image/1_mainmenu/h5p/rank/ranking_weelkybt_selected.png?v=2); }
html.h5p .rank_v3 #RT_tabs [data-rt="hall"].rt_selected { background-image: url(../image/1_mainmenu/h5p/rank/ranking_honorbt_selected.png?v=2); }
/* 고른 칸은 그 칸 색(초록 #68b850)에 맞춘 진한 초록 테두리 - 상점이 칸 색을 따라가는 것과 같다 */
html.h5p .rank_v3 #RT_tabs .rt_selected
{
	color: #ffffff;
	text-shadow: -3px 0 0 #2f6b24, 3px 0 0 #2f6b24, 0 -3px 0 #2f6b24, 0 3px 0 #2f6b24,
	             -2px -2px 0 #2f6b24, 2px -2px 0 #2f6b24, -2px 2px 0 #2f6b24, 2px 2px 0 #2f6b24;
}

/* 등급 배지는 그림으로 바꾼다. 글자는 그림 안에 들어 있다 */
html.h5p .rank_v3 .rt_badge
{
	position: relative; display: block; border: 0; border-radius: 0; box-shadow: none;
	background: center/contain no-repeat; color: inherit;
}
html.h5p .rank_v3 .rt_badge > span { display: block; transform: none; }
html.h5p .rank_v3 .rt_badge b { display: none; }
html.h5p .rank_v3 .rt_badge small { display: none; }
html.h5p .rank_v3 .rt_row .rt_badge, html.h5p .rank_v3 .rt_hall_grades .rt_badge,
html.h5p .rank_v3 .rt_league_body > .rt_badge, html.h5p .rank_v3 .rt_grade_card .rt_badge,
html.h5p .rank_v3 .rt_ladder_step .rt_badge
{
	border: 0; border-radius: 0; box-shadow: none; background-color: transparent; transform: none;
}
html.h5p .rank_v3 .rt_grade_A { background-image: url(../image/1_mainmenu/h5p/rank/ranking_iconA.png); }
html.h5p .rank_v3 .rt_grade_B { background-image: url(../image/1_mainmenu/h5p/rank/ranking_iconB.png); }
html.h5p .rank_v3 .rt_grade_C { background-image: url(../image/1_mainmenu/h5p/rank/ranking_iconC.png); }
html.h5p .rank_v3 .rt_grade_D { background-image: url(../image/1_mainmenu/h5p/rank/ranking_iconD.png); }
html.h5p .rank_v3 .rt_grade_E { background-image: url(../image/1_mainmenu/h5p/rank/ranking_iconE.png); }

/* 일간 리그 상금판 */
html.h5p .rank_v3 .rt_jackpot
{
	position: relative; width: 1055px; height: 378px; min-height: 0; margin: 0 0 24px 13px; padding: 0;
	border: 0; border-radius: 0; box-shadow: none;
	/* 2026-10-09 CEO 가 그림을 다시 주셨다 - 이름이 같아 ?v= 를 올려야 폰에 남은 옛 그림이 바뀐다 */
	background: url(../image/1_mainmenu/h5p/rank/ranking_dailygold_bg.png?v=2) 0 0/100% 100% no-repeat;
}
html.h5p .rank_v3 .rt_jackpot:before, html.h5p .rank_v3 .rt_jackpot:after { display: none; }
html.h5p .rank_v3 .rt_jackpot_char { display: none; }
html.h5p .rank_v3 .rt_jackpot_head { position: absolute; left: 0; right: 0; top: 88px; height: 62px; }
/* 테두리는 대각선 네 방향만 깔려 가장자리가 비었다 - 카테고리 버튼과 같은
   상하좌우 4px + 대각선 3px 여덟 방향으로 바꾼다 (2026-10-07 CEO 지시).
   원래 있던 흰 번짐(0 0 10px)과 아래 그림자(0 7px)는 그대로 둔다 */
html.h5p .rank_v3 .rt_jackpot_head span
{
	font-size: 54px; font-weight: 800; color: #f07a00;
	text-shadow: -4px 0 0 #fffaf0, 4px 0 0 #fffaf0, 0 -4px 0 #fffaf0, 0 4px 0 #fffaf0,
	             -3px -3px 0 #fffaf0, 3px -3px 0 #fffaf0, -3px 3px 0 #fffaf0, 3px 3px 0 #fffaf0,
	             0 0 10px #fff, 0 7px 0 #93430a;
}
/* 금액: 그림의 갈색 상자 한가운데에 (2026-10-02 CEO 지시).
   2026-10-07 CEO 지적으로 다시 재었다 - 그림의 홈은 y 270~350(가운데 310)인데
   글자가 실제로 그려지는 가운데는 글상자 가운데보다 1.5 위라 306.5 에 있었다 - 4 내린다 */
html.h5p .rank_v3 .rt_jackpot strong
{
	position: absolute; left: 145px; right: 130px; top: 272px; height: 80px; margin: 0; padding: 0;
	border: 0; border-radius: 0; background: none; font-size: 62px; line-height: 80px;
	color: #ffd94a; text-shadow: 0 4px 0 #3c2410;
}
html.h5p .rank_v3 .rt_jackpot small { display: none; }
html.h5p .rank_v3 .rt_jackpot_wide { margin-bottom: 76px; }
html.h5p .rank_v3 .rt_jackpot_wide small { display: block; position: absolute; left: 0; right: 0; top: 388px; font-size: 34px; color: #fff3d6; text-shadow: 0 0 8px #0e2129, 0 3px 4px #0e2129; }

/* 남은 시간 띠 - 상금판과 등급판 그림의 어두운 홈에 들어간다 */
/* 띠를 어두운 홈과 같은 높이로 잡고 안의 시계·글자를 세로 가운데에 둔다 (2026-10-03 CEO 지시).
   예전에는 62 짜리 띠를 위에서 4 에 붙여 글자가 홈 위쪽으로 치우쳤다 */
html.h5p .rank_v3 .rt_jackpot .rt_timer, html.h5p .rank_v3 .rt_league_card .rt_timer
{
	position: absolute; top: 2px; width: auto; max-width: none; height: 75px;
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
	font-size: 40px; font-weight: 800; color: #ffffff; gap: 0; white-space: nowrap;	/* 2026-10-07 CEO 지시: 살짝 누런 #fff4d8 -> 흰색 */
}
/* 판 머리글 '내 정보' - 판 왼쪽 위 어깨에 (2026-10-07 CEO 지시).
   어두운 홈은 판 전체가 아니라 가운데(x 244~809, 위로 갈수록 넓어지는 사다리꼴)에만 있고
   그 왼쪽 13~223 은 흰 어깨다 - 띠를 늘리지 않고 그 어깨에 어두운 글자로 적는다.
   어깨는 흰색 60% 라 뒤 배경이 비쳐 보여 글자 뒤에 옅은 흰 번짐을 둔다 */
html.h5p .rank_v3 .rt_league_card .rt_card_label
{
	/* 2026-10-07 CEO 지시로 8 내린다 - 글자 잉크 가운데는 남은 시간과 똑같이 540 이었지만
	   38px 글자가 40px 글자 옆에서 위로 떠 보였다 */
	/* 2026-10-08 CEO 지시: 38 -> 40 (남은 시간과 같은 크기), 왼끝은 아래 등급 이름표 상자(42)에 맞춘다 */
	/* 2026-10-09 CEO 지시: 글자를 키우고(40 -> 46) 살짝 오른쪽으로(42 -> 62) */
	/* 2026-10-09 CEO 지시: 글자 아래끝을 어두운 띠의 아랫변(79)에 맞춰 10 내린다 (12 -> 22).
	   글자 상자는 22~95 지만 46px 글자의 실제 잉크는 33~84 라 아래끝이 띠 아랫변에 닿는다 */
	position: absolute; left: 74px; top: 22px; height: 73px;	/* 2026-10-09 CEO 지시로 오른쪽으로 12 (62 -> 74) */
	font-size: 46px; font-weight: 800; line-height: 73px; color: #4a4435;
	letter-spacing: -1px;
	text-shadow: 0 0 8px #ffffff, 0 0 8px #ffffff;
}
/* 주간 등급판은 홈이 4~76 이다 */
html.h5p .rank_v3 .rt_league_card .rt_timer { top: 4px; height: 73px; }
/* 일간 상금판: 2026-10-02 새 그림에는 시계가 없다 - 시계 아이콘과 남은 시간을 묶어 홈 가운데에.
   2026-10-08 CEO 지적으로 다시 쟀다: 그림의 홈은 판 한가운데(526.5)를 중심으로 놓여 있는데
   예전 값(228~790)은 가운데가 509 라 17 왼쪽으로 치우쳤다. 판 전체를 자리로 주고 가운데 정렬에 맡긴다 */
html.h5p .rank_v3 .rt_jackpot .rt_timer { left: 0; right: 0; gap: 14px; }
html.h5p .rank_v3 .rt_jackpot .rt_timer .rt_icon { display: inline-block; width: 48px; height: 48px; }
/* 주간 등급판: 2026-10-02 새 그림에도 시계가 없다 - 일간판처럼 홈 가운데에 시계와 남은 시간을 묶는다 */
html.h5p .rank_v3 .rt_league_card .rt_timer { left: 0; right: 0; gap: 14px; }
html.h5p .rank_v3 .rt_league_card .rt_timer .rt_icon { display: inline-block; width: 48px; height: 48px; }

/* 표 머리줄 */
html.h5p .rank_v3 .rt_columns
{
	/* 머리줄 바는 줄(16~1042)보다 22 더 길어 오른쪽만 떠 보였다 - 줄 바깥의 스크롤 막대 자리다.
	   줄과 같은 선에서 끝나게 오른쪽 여백을 16 -> 38 로 준다 (2026-10-07 CEO 지적) */
	height: 50px; margin: 0 38px 0 16px; padding: 0; align-items: center; font-size: 34px; color: #fff;
	background: url(../image/1_mainmenu/h5p/rank/ranking_category.png) 0 0/100% 100% no-repeat;
}
/* 머리줄 글자를 아래 내용과 같은 세로줄에 맞춘다 (2026-10-05 CEO 지시).
   칸 상자는 그대로 두고 안쪽 여백으로만 글자를 옮겨 옆 칸이 밀리지 않게 한다.
   순위는 1~3위 메달이 아니라 4위부터의 숫자에 맞춘다 (CEO 지시) */
html.h5p .rank_v3 .rt_col_rank { width: 200px; text-align: center; padding-right: 42px; }
html.h5p .rank_v3[data-mode="daily"] .rt_col_name { padding-left: 153px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_name { padding-left: 41px; }
html.h5p .rank_v3[data-mode="daily"] .rt_col_tail { width: 368px; text-align: center; padding-left: 10px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_tail { width: 280px; text-align: center; padding-left: 52px; }
html.h5p .rank_v3 .rt_col_note { width: 100px; text-align: center; padding-right: 28px; }

/* 일간만: 머리줄 칸을 아래 줄의 같은 칸과 똑같은 자리·폭으로 잡고 글자는 그 안에서 가운데 (2026-10-07 CEO 지시).
   줄 왼쪽에서 잰 값 - 순위 16~136 / 닉네임 334~710 / 예상 상금 710~1010.
   주간은 CEO 가 따로 확인한 뒤 맞추기로 해 그대로 둔다 */
html.h5p .rank_v3[data-mode="daily"] .rt_columns
{
	padding: 0 0 0 16px;
	/* 칸 폭을 정해 두면 space-between 이 남는 자리(38)를 칸 사이에 19씩 끼워 넣어 어긋난다 - 왼쪽부터 붙인다 */
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
html.h5p .rank_v3[data-mode="daily"] .rt_col_rank,
html.h5p .rank_v3[data-mode="daily"] .rt_col_name,
html.h5p .rank_v3[data-mode="daily"] .rt_col_tail
{
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	text-align: center;
	padding: 0;
	margin: 0;
}
html.h5p .rank_v3[data-mode="daily"] .rt_col_rank { width: 120px; }
/* '닉네임 / 승점' 은 등급 아이콘·프로필까지 묶은 영역(134~710) 가운데에 둔다 (2026-10-07 CEO 지시) */
html.h5p .rank_v3[data-mode="daily"] .rt_col_name { width: 576px; margin-left: -2px; }
/* 머리글은 잔 자기 칸 가운데에 둔다 - 한때 줄의 숫자에 맞춰 27 옮겨 보았지만
   칸 안에서 치우쳐 보인다고 해 되돌렸다 (2026-10-07 CEO 지시) */
html.h5p .rank_v3[data-mode="daily"] .rt_col_tail { width: 300px; }

/* ---- 주간 리그 (2026-10-07 CEO 지시) ----
   1) 프로필이 순위 칸(16~136)을 10 파고들어 있었다 - 순위 칸 뒤 여백을 -10 에서 +10 으로 바꿔 프로필을 146 부터 둔다.
   2) 등급(비고) 칸이 좁아 70 -> 100 으로 넓힌다.
   3) 예상 상금 칸을 왼쪽으로 밀고(230 -> 240, 시작 710 -> 670) 그만큼 닉네임 칸이 줄어든다.
   결과: 순위 16~136 / 프로필 146~242 / 닉네임 242~670 / 예상 상금 670~910 / 등급 910~1010 */
html.h5p .rank_v3[data-mode="weekly"] .rt_row .rt_place { margin-right: 10px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_movement { width: 100px; }
/* 상금 칸 폭(240)은 아래 'html.h5p .rank_v3[data-mode="weekly"] .rt_row_reward' 에서 정한다 (그 규칙이 뒤에 있어 이긴다) */

/* 머리줄도 같은 자리로 (일간과 같은 방식) */
html.h5p .rank_v3[data-mode="weekly"] .rt_columns
{
	padding: 0 0 0 16px;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
html.h5p .rank_v3[data-mode="weekly"] .rt_col_rank,
html.h5p .rank_v3[data-mode="weekly"] .rt_col_name,
html.h5p .rank_v3[data-mode="weekly"] .rt_col_tail,
html.h5p .rank_v3[data-mode="weekly"] .rt_col_note
{
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	text-align: center;
	padding: 0;
	margin: 0;
}
html.h5p .rank_v3[data-mode="weekly"] .rt_col_rank { width: 120px; }
/* 주간도 같게 - 프로필까지 묶은 영역(146~670) 가운데 (등급 아이콘은 주간 줄에 없다) */
html.h5p .rank_v3[data-mode="weekly"] .rt_col_name { width: 524px; margin-left: 10px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_tail { width: 240px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_col_note { width: 100px; }

/* 표 자체는 테두리를 없애고 줄마다 그림을 깐다 */
html.h5p .rank_v3 .rt_table { border: 0; border-radius: 0; overflow: visible; background: none; }
html.h5p .rank_v3 .rt_dark { background: none; border: 0; }
/* 줄 상자 그림이 모두 1042x138 로 바뀌었다 - 1위도 아래줄과 같은 높이다 (2026-10-02 CEO 가이드).
   1080 안에서 좌우 19px 를 비우면 1042 가 되고, 줄 사이는 6px 이라 줄 간격은 144 가 된다 */
html.h5p .rank_v3 .rt_row
{
	position: relative; height: 138px; min-height: 0; margin: 6px 19px 0; padding: 0 16px;
	border: 0; gap: 0; align-items: center;
	background: url(../image/1_mainmenu/h5p/rank/ranking_other_bg.png) 0 0/100% 100% no-repeat;
}
/* 순위표 안에서는 내 줄도 순위에 맞는 상자를 쓴다 - 노란 상자는 아래 '내 순위' 줄 전용 (2026-10-02 CEO 지시) */
html.h5p .rank_v3 .rt_self { background-image: url(../image/1_mainmenu/h5p/rank/ranking_other_bg.png); box-shadow: none; color: #2f2a10; }
html.h5p .rank_v3 .rt_rank1 { background-image: url(../image/1_mainmenu/h5p/rank/ranking_1st_bg.png); }
html.h5p .rank_v3 .rt_rank2 { background-image: url(../image/1_mainmenu/h5p/rank/ranking_2nd_bg.png); }
html.h5p .rank_v3 .rt_rank3 { background-image: url(../image/1_mainmenu/h5p/rank/ranking_3rd_bg.png); }

/* 줄 안쪽 - 자리 / 등급 / 얼굴 / 닉네임+점수 / 예상 상금 (주간은 비고) */
/* 4위부터의 숫자를 1~3위 메달과 같은 세로줄에 맞춘다 (2026-10-02 CEO 지시).
   메달은 상자 그림 안 가로 55px 자리에 그려져 있는데, 숫자 칸은 줄 안쪽 여백 16 때문에 71 에 있었다.
   왼쪽으로 16 당기고 오른쪽에 그만큼 돌려줘, 뒤따르는 등급·프로필 자리는 그대로 둔다 */
/* 순위 숫자: 100위까지 나오므로 세 자리가 들어갈 폭(120)으로 두고, 살짝 오른쪽으로 옮겼다
   (2026-10-03 CEO 지시 - 1~3위 메달은 상자 그림이 그리고, 그 그림은 나중에 다시 받는다).
   오른쪽 여백을 -10 줘서 뒤따르는 등급·프로필 자리는 그대로 둔다 */
html.h5p .rank_v3 .rt_row .rt_place
{
	width: 120px; height: 80px; line-height: 80px; font-size: 46px; color: #3a3a46;
	/* 1~3위 왕관 그림의 가로 가운데는 줄 그림(1042) 기준 x=74, 줄에 깔면 73 이다.
	   숫자 칸(16~136) 가운데는 76 이라 3 오른쪽이었다 - 숫자만 3 왼쪽으로 당겨 왕관과 세로줄을 맞춘다.
	   칸을 통째로 옮기면 줄 왼쪽 여백(16)이 13 이 돼 오른쪽(16)과 어긋나므로,
	   칸은 그대로 두고 오른쪽 안여백 6 으로 글자만 옮긴다 (2026-10-07 CEO 지적) */
	margin-left: 0; margin-right: -10px;
	padding-right: 6px;
	background: none; border: 0; border-radius: 0;
}
html.h5p .rank_v3 .rt_rank1 .rt_place { color: transparent; }
html.h5p .rank_v3 .rt_rank2 .rt_place, html.h5p .rank_v3 .rt_rank3 .rt_place { color: transparent; }
/* 등급 아이콘과 프로필이 거의 붙어 있었다 - 특히 도신(A)은 날개가 프로필을 덮었다 (2026-10-02 CEO 지시).
   2026-10-07 CEO 지시로 아이콘만 프로필 쪽(오른쪽)으로 8 옮긴다 - 오른쪽 여백을 같이 줄여 프로필 자리는 그대로다 */
/* 2026-10-08 CEO 지시: 등급 아이콘을 프로필 동그라미(96)만큼 키운다.
   한때 등급마다 그림 크기를 달리 줘 '잉크 높이' 를 96 으로 맞췄는데, 도신(A)은 날개까지가 잉크라
   그렇게 맞추면 본체 방패가 초보보다 작아져 오히려 A 가 제일 작아 보였다 (CEO 지적).
   다섯 장 모두 같은 282x244 그림이므로 같은 배율(칸에 꽉 = 146x126)로 둔다 - 윗등급이 더 크게 보이는 게 맞다 */
html.h5p .rank_v3 .rt_row .rt_badge { width: 146px; height: 126px; margin-left: 6px; margin-right: 4px; }
html.h5p .rank_v3 .rt_row .rt_badge, html.h5p .rank_v3 .rt_my_jump .rt_badge { background-size: 146px 126px; }
html.h5p .rank_v3 .rt_row .rt_face { width: 96px; height: 96px; border: 3px solid #24262b; background: #4aa84a; }
html.h5p .rank_v3 .rt_row .rt_name { padding-left: 16px; }
/* 닉네임(44) 과 아래 승점(42) 이 2px 달라 들쭉날쭉해 보였다 - 중간값 43 으로 맞췄다 (2026-10-07 CEO 지시, 일간/주간 공통).
   2026-10-07 CEO 지시로 닉네임만 43 -> 39 로 줄인다 (긴 닉네임이 ... 로 잘리는 것을 줄이려고) */
html.h5p .rank_v3 .rt_row .rt_name b { font-size: 39px; color: #2f2a10; }
html.h5p .rank_v3 .rt_row .rt_name i { font-size: 43px; color: #8b1414; }
/* 점수 앞에 별 아이콘(P)을 붙인다 (2026-10-02 CEO 가이드) */
html.h5p .rank_v3 .rt_row .rt_name i:before
{
	/* 2026-10-07 CEO 지시로 살짝 키움 (44x43 -> 48x47) */
	content: ''; display: inline-block; width: 48px; height: 47px; margin-right: 8px; vertical-align: -8px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_point_icon.png) 0 0/48px 47px no-repeat;
}
/* 값이 없을 때의 '—' 는 어디서나 예상 상금 칸과 같은 얇은 표시로 (2026-10-07 CEO 지시).
   칸마다 글자색이 달라(순위 #3a3a46 / 상금 #3a3410 / 비고 #9aa0a4) 같은 표시가 다른 색으로 보였다 -
   색까지 예상 상금 칸에 맞춰 모든 화면을 하나로 통일한다 (2026-10-07 CEO 지시) */
html.h5p .rank_v3 .rt_place small,
html.h5p .rank_v3 .rt_movement small,
html.h5p .rank_v3 .rt_row_reward small,
html.h5p .rank_v3 .rt_expected small
{
	font-size: 36px;
	font-weight: 800;
	color: #3a3410;
	opacity: .75;
}
html.h5p .rank_v3 .rt_dark .rt_row .rt_name i { color: #8b1414; }
html.h5p .rank_v3[data-mode="daily"] .rt_row_reward { width: 300px; }
/* 2026-10-07 CEO 지시로 주간 상금 칸을 넓혀 왼쪽으로 민다 (230 -> 240) */
html.h5p .rank_v3[data-mode="weekly"] .rt_row_reward { width: 240px; }
/* 예상 상금은 머리줄 글자와 같은 세로줄에 오도록 칸 가운데에 둔다 (2026-10-03 CEO 지시) */
html.h5p .rank_v3 .rt_row_reward { color: #3a3410; justify-content: center; align-items: center; }
html.h5p .rank_v3 .rt_row_reward .rt_money { font-size: 40px; white-space: normal; text-align: center; justify-content: center; }
html.h5p .rank_v3 .rt_row_reward .rt_icon { width: 46px; height: 46px; }
html.h5p .rank_v3 .rt_row_reward small { font-size: 36px; opacity: .75; }
html.h5p .rank_v3 .rt_movement { width: 70px; font-size: 48px; }
html.h5p .rank_v3 .rt_movement.rt_UP { color: #2f9c3a; }
html.h5p .rank_v3 .rt_movement.rt_DOWN { color: #d4463f; }
html.h5p .rank_v3 .rt_movement.rt_STAY { color: #9aa0a4; }

/* 목록 줄과 스크롤 막대를 한 덩어리로 보고 가로 가운데에 맞춘다 (2026-10-07 CEO 지시).
   예전에는 줄만 좌우 19 로 두어, 오른쪽에 막대 자리(22) 가 더 붙는 바람에 줄이 11px 왼쪽으로 치우쳤다.
   지금: 줄 16~1042, 막대 1048~1064 -> 묶음이 16~1064 라 화면 가운데(540) 에 맞고 줄과 막대 사이는 6 이다 */
html.h5p .rank_v3 .rt_rows { margin-right: 13px; }
/* 머리줄(짙은 띠) 과 1위 줄이 붙어 보였다 (2026-10-07 CEO 지적).
   줄 사이 간격(6) 과 수치는 같았지만 짙은 띠의 아래선이 각져 더 좁아 보여, 줄 사이 간격만큼 한 번 더 띄운다 (6 -> 12) */
html.h5p .rank_v3 .rt_table > .rt_columns { margin-bottom: 6px; }
html.h5p .rank_v3 .rt_rows > .rt_row,
html.h5p .rank_v3 .rt_rows > .rt_boundary { margin-left: 16px; margin-right: 3px; }

/* 승급 안정권 구분선: 흰 둥근 상자 그림(ranking_advanceguide.png)을 빼고 초록 선 + 가운데 글자만 남긴다 (2026-10-07 CEO 지시).
   선은 글자색(currentColor)을 따라가므로 강등권(빨강)도 같은 모양으로 색만 바뀐다.
   배경 그림 위에 글자만 놓이면 묻히므로 흰 테두리를 얇게 둘러 읽히게 한다 */
html.h5p .rank_v3 .rt_boundary
{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	height: 46px;
	margin: 6px 19px;
	padding: 0 6px;
	font-size: 34px;
	font-weight: 800;
	line-height: 46px;
	/* 글자색: 2026-10-07 CEO 지시로 #4dd15f -> #53f369 (선 색은 #4dd15f 그대로라 아래에서 따로 준다) */
	color: #53f369;
	white-space: nowrap;
	background: none;
	border-radius: 0;
	/* 2026-10-07 CEO 지시: 글자가 배경에 묻히지 않게 닉네임 글자색(#2f2a10)으로 테두리를 두른다.
	   흰 테두리는 한 번 뺐다가, 더 잘 보이게 어두운 테두리로 다시 넣는 것이다 */
	text-shadow: -2px 0 0 #2f2a10, 2px 0 0 #2f2a10, 0 -2px 0 #2f2a10, 0 2px 0 #2f2a10;
}
/* 선: 흐림 효과는 쓴 적이 없다 (2026-10-07 CEO 확인).
   두께는 CEO 지시로 4 -> 6 으로 다시 키우고 끝 둥금도 3 으로 맞춘다 */
html.h5p .rank_v3 .rt_boundary:before,
html.h5p .rank_v3 .rt_boundary:after
{
	display: block;
	content: '';
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	height: 6px;
	margin: 0 14px;
	border-radius: 3px;
	/* 선 색은 글자색과 따로 둔다 - 글자만 더 밝게 바꿨기 때문이다 (2026-10-07 CEO 지시) */
	background: #4dd15f;
}
/* 강등권: 선 #ef4e4c / 글자 #ff8a8c - 아직 잘 안 보인다고 해 더 밝게 (2026-10-07 CEO 지시) */
html.h5p .rank_v3 .rt_boundary.rt_DOWN { background: none; border-radius: 0; color: #ff8a8c; }
html.h5p .rank_v3 .rt_boundary.rt_DOWN:before,
html.h5p .rank_v3 .rt_boundary.rt_DOWN:after { background: #ef4e4c; }

/* 늘 아래에 붙어 있는 내 순위 */
html.h5p .rank_v3 #RT_pinned { height: auto; min-height: 0; padding: 0; }
html.h5p .rank_v3 .rt_my_jump { height: 197px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; text-align: left; }
/* 내 순위 줄은 눌러도 아무 일도 없어야 한다 (2026-10-07 CEO 지시).
   button -> div 로 바꿔(S_rank_portrait.js) 눌림 연출과 동작을 없앴고,
   어떤 눌림 효과도 걸리지 않게 터치 자체를 받지 않는다 */
html.h5p .rank_v3 .rt_my_jump,
html.h5p .rank_v3 .rt_my_jump *
{
	pointer-events: none;
	-webkit-filter: none;
	filter: none;
}
/* 내 순위 줄의 칸을 위 목록 줄과 같은 세로줄에 맞춘다 (2026-10-07 CEO 지시).
   이 줄은 상자가 화면 끝까지(0~1080)라 안쪽 여백으로 맞춘다.
   화면 1080 기준 목록 줄의 칸: 순위 32~152 / 등급 150~256 / 프로필 254~350 / 닉네임 350~726 / 상금 726~1026.
   내 순위 줄은 등급(152)·프로필(104)이 목록보다 커서 양끝까지 같게 둘 수는 없다 -
   목록 칸의 가운데(등급 203, 프로필 302)에 맞춰 가운데를 같은 세로줄에 세운다 */
html.h5p .rank_v3 .rt_my_jump .rt_row
{
	height: 197px; margin: 0; padding: 0 54px 0 32px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_my_bg.png) 0 0/100% 100% no-repeat;
}
html.h5p .rank_v3 .rt_my_jump .rt_place
{
	width: 120px; font-size: 52px; color: #3a3a46;
	/* 32~152 - 목록과 같다. 목록 줄은 순위 칸 뒤 여백이 -10 이라 뒤따르는 등급·프로필·닉네임이 10 앞으로 당겨진다.
	   여기만 0 이어서 그 세 칸이 10 오른쪽으로 밀려 세로줄이 어긋나 있었다 (2026-10-08 CEO 지적) */
	margin-left: 0; margin-right: -10px;
}
/* 등급 아이콘은 그림마다 테두리 여백이 달라(도신만 꽉 찬다) 칸을 키워야 프로필만 해진다 (2026-10-02 CEO 지시) */
/* 2026-10-07 CEO 지시: 등급 아이콘이 프로필을 덮고 있었다 - 아이콘을 줄이고 프로필은 목록과 같은 96 으로 맞춘다.
   그림마다 안 여백이 달라(도신 14 / 제왕 26 / 나머지 39, 282 기준) 가장 넓은 도신을 기준으로 잡았다.
   112 면 도신의 보이는 폭이 101 이라 147~259 칸 안에서 152.5~253.5 에 그려져 프로필(254)과 닿지 않는다 */
/* 2026-10-08 CEO 지시: 내 순위 줄도 목록과 같은 크기로 (그림 배율도 목록과 같다) */
html.h5p .rank_v3 .rt_my_jump .rt_badge { width: 146px; height: 126px; margin-left: 6px; margin-right: 4px; }
html.h5p .rank_v3 .rt_my_jump .rt_face { width: 96px; height: 96px; margin-left: 0; }
html.h5p .rank_v3 .rt_my_jump .rt_name { margin-left: 0; }	/* 350 부터 - 목록과 같다 */
/* 내 순위 줄은 글자가 커서 승점(P) 아이콘도 목록보다 조금 더 크게 (2026-10-07 CEO 지시) */
html.h5p .rank_v3 .rt_my_jump .rt_name i:before
{
	width: 54px; height: 52px; vertical-align: -9px;
	background-size: 54px 52px;
}
/* 주간 내 순위 줄에는 등급 아이콘이 없어 위 값(등급 뒤 기준)이 그대로면 프로필이 앞으로 밀린다.
   주간 목록은 프로필 162~258(가운데 210) / 닉네임 258~686 이라 거기에 맞춘다 */
html.h5p .rank_v3[data-mode="weekly"] .rt_my_jump .rt_face { margin-left: 0; }	/* 162~258 - 목록과 같다 (순위 칸 뒤 여백 10 이 이미 붙는다) */
html.h5p .rank_v3[data-mode="weekly"] .rt_my_jump .rt_name { margin-left: 0; }	/* 258 부터 */
html.h5p .rank_v3 .rt_my_jump .rt_name b { font-size: 48px; }
html.h5p .rank_v3 .rt_my_jump .rt_name i { font-size: 46px; }
html.h5p .rank_v3 .rt_my_jump .rt_row_reward .rt_money { font-size: 44px; }

/* 아래 버튼 줄 */
html.h5p .rank_v3 .rt_footer { height: 240px; background: none; }
html.h5p .rank_v3 #RT_play
{
	/* 2026-10-13 CEO 지시: 가로 가운데로. 이전 버튼이 아래 띠에 있던 때라 오른쪽에 붙여 두었는데,
	   버튼을 위(재화바 줄)로 올려 아래 띠에 이것 하나만 남았다. 폭 481 을 1080 가운데에 둔다 */
	left: 300px; right: 299px; bottom: calc(98px - var(--h5p_sub_drop, 0px));
	height: 129px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
	background: url(../image/1_mainmenu/h5p/rank/ranking_game_bt.png) 0 0/100% 100% no-repeat;
	font-size: 60px; color: #fff; text-shadow: 0 4px 0 #9c2420;
}

/* 주간 리그 내 등급판 */
/* 주간 등급판이 새 그림(1054x404)으로 바뀌었다 (2026-10-02 CEO 가이드).
   큰 등급 아이콘 + 아래 등급 이름 알약 / 오른쪽에 얼굴 + 승점 + 상태 한 줄 / 아래 예상 보상 알약 */
html.h5p .rank_v3 .rt_league_card
{
	position: relative; width: 1054px; height: 404px; margin: 0 0 18px 13px; padding: 0;
	border: 0; border-radius: 0; color: #2f2a10;
	/* 2026-10-09 CEO 가 그림자(등급 아이콘 밑 회색 타원)를 아이콘 새 자리에 맞춰 옮겨 주셨다 (가운데 162.5 -> 172.5, 20 위로).
	   파일 이름이 같아 ?v= 를 올려야 폰에 남은 옛 그림이 바뀐다 */
	background: url(../image/1_mainmenu/h5p/rank/ranking_weekly_bg.png?v=3) 0 0/100% 100% no-repeat;
}
/* '현재 순위 기준' 은 상태 글자 뒤에 붙었다 - 위쪽 자리는 쓰지 않는다 */
html.h5p .rank_v3 .rt_league_card .rt_disclaimer { display: none; }
html.h5p .rank_v3 .rt_league_body { display: block; }
html.h5p .rank_v3 .rt_league_body > .rt_badge
{
	/* 2026-10-09 CEO 지시: 판 가운데 줄(등급 아이콘·얼굴·승점·등급유지)을 2 내린다 (70 -> 72) */
	position: absolute; left: 16px; top: 72px; width: 280px; height: 252px; margin: 0; flex: none;
	/* 2026-10-08 CEO 지시: 아이콘을 줄이고 프로필을 키워 둘을 엇비슷하게 둔다.
	   그림 280x243 -> 232x200 (보이는 그림 204x212 -> 169x175), 그림 한가운데는 그대로 두려고 위에서 22 */
	/* 2026-10-09 CEO 지시: 아이콘을 아래 이름표 한가운데에 맞춘다.
	   이름표는 칸 안에서 35~277 (가운데 156) 이고 그림은 232 폭이므로 왼끝을 156-116=40 에 둔다.
	   칸(.rt_badge) 자체를 옮기면 안에 든 이름표가 같이 따라가므로 그림만 옮긴다 */
	background-position: 40px 22px; background-size: 232px 200px;
}
/* 이름표 바탕 그림(253x61)은 가로로 줄이면 양 끝 라운드가 찌그러진다 (2026-10-07 CEO 지적).
   양 끝 50px(반짝이가 46 까지 있다)은 원래 크기로 두고 가운데만 늘리는 3조각(border-image)으로 깐다.
   세로도 원래 높이 61 그대로 두고 글자 상자 가운데에 놓는다 */
html.h5p .rank_v3 .rt_league_body > .rt_badge small
{
	/* 2026-10-09 CEO 지시: 이름표만 오른쪽으로 9 (26 -> 35).
	   세로는 그대로 둬야 하는데 품는 아이콘 칸이 2 내려갔으므로 그만큼 올려 제자리를 지킨다 (235 -> 233) */
	display: block; position: absolute; left: 35px; top: 233px; width: 242px; height: 66px;
	/* 2026-10-09 CEO 지시: '예상 상금' 과 같은 굵기로 */
	font-size: 42px; font-weight: 700; line-height: 66px; text-align: center; color: #3b3b55;
	background: none;
	z-index: 1;
}
html.h5p .rank_v3 .rt_league_body > .rt_badge small:before
{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 61px;
	margin-top: -30.5px;
	z-index: -1;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0 50px;
	-webkit-border-image: url(../image/1_mainmenu/h5p/rank/ranking_icon_namebg.png) 0 50 fill / 0 50px stretch;
	border-image: url(../image/1_mainmenu/h5p/rank/ranking_icon_namebg.png) 0 50 fill / 0 50px stretch;
}
/* 얼굴과 승점 - 승점 앞에는 줄 목록과 같은 별 아이콘을 붙인다 */
/* 2026-10-09 CEO 지시: 얼굴·승점·상태 묶음을 등급 아이콘 그림 가운데에 맞춰 내린다.
   아이콘 칸은 16~296 / 70~322 인데 그 안에 232x200 그림이 가운데 22 에 깔리고,
   초보 그림은 282x244 중 y 30~214 만 잉크라 보이는 그림은 117~268 (가운데 192) 이다.
   묶음은 106~261 (가운데 183) 이라 9 위에 있었다 - 세 칸을 나란히 9 내린다 */
/* 2026-10-09 CEO 지시로 가운데 줄 전체를 한 번 더 2 내린다 (127 -> 129) */
html.h5p .rank_v3 .rt_league_card .rt_league_heading { position: absolute; left: 332px; top: 129px; height: 130px; gap: 0; }
/* 2026-10-08 CEO 지시: 등급 아이콘과 엇비슷하게 125 -> 155. 커진 만큼 왼쪽으로 15 당겨 가운데 자리를 지킨다 */
html.h5p .rank_v3 .rt_league_card .rt_league_heading .rt_face { width: 155px; height: 155px; margin-left: -15px; border-width: 4px; border-color: #24262b; background: #4aa84a; }
html.h5p .rank_v3 .rt_league_card .rt_league_heading > b
{
	/* 2026-10-08 CEO 지시: 승점·P 아이콘·숫자의 글자 잉크 한가운데를 한 줄에 맞춘다 (b 는 숫자 몫으로 1 내린다) */
	position: absolute; left: 155px; top: -1px; width: 560px; height: 72px;
	/* '승점' 46px / 숫자 62px 로 크기가 달라 밑선만 맞추면 눈에 어긋나 보인다 - 가로로 세워 가운데 정렬 (2026-10-03 CEO 지적) */
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	font-size: 62px; line-height: 1; color: #8b1414; white-space: nowrap;
}
/* 2026-10-03 CEO 지시: '승점' 글자를 앞에 두고 그 뒤에 별 아이콘, 끝의 '점' 은 뺐다 */
html.h5p .rank_v3 .rt_league_card .rt_league_heading > b > i
{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
	top: -3px;				/* 숫자 잉크 가운데에 맞춘다 (2026-10-08 CEO 지시) */
	font-style: normal;
	font-size: 46px;
	line-height: 1;
	font-weight: 700;
	color: #2f2418;
}
html.h5p .rank_v3 .rt_league_card .rt_league_heading > b > i:after
{
	/* 2026-10-08 CEO 지시: 아이콘을 조금 키우고(52x50 -> 58x56) 글자 잉크 가운데에 맞춘다 */
	content: ''; display: block; width: 58px; height: 56px; margin: 0 12px 0 14px; flex: none;
	position: relative; top: -2px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_point_icon.png) 0 0/58px 56px no-repeat;
}
html.h5p .rank_v3 .rt_league_card .rt_status
{
	position: absolute; left: 487px; top: 207px; width: 540px; height: 56px;	/* 얼굴·승점과 함께 9 내리고, 가운데 줄 전체를 다시 2 내린다 (2026-10-09 CEO 지시) */
	margin: 0; padding: 0; font-size: 46px; line-height: 56px; text-align: left;
	border: 0; border-radius: 0; background: none; color: #2f2a10; box-shadow: none;
}
html.h5p .rank_v3 .rt_league_card .rt_status b { color: #2f9c3a; }
html.h5p .rank_v3 .rt_league_card .rt_status.rt_STAY b { color: #3a6ea5; }
html.h5p .rank_v3 .rt_league_card .rt_status.rt_DOWN b { color: #c4392f; }
html.h5p .rank_v3 .rt_league_card .rt_status small { font-size: 34px; color: #6b6f73; margin-left: 8px; }
/* 승점 막대와 '몇 점 더 따면 승급' 줄은 새 판에서 빠졌다 (2026-10-02 CEO 가이드) */
html.h5p .rank_v3 .rt_league_card .rt_score,
html.h5p .rank_v3 .rt_league_card .rt_cut,
html.h5p .rank_v3 .rt_league_card .rt_progress { display: none; }
/* 2026-10-09 CEO 가 새 판 그림에 예상 상금 알약을 그려 넣었다 (그림 안 알약: x 319~1002 / y 308~367).
   CSS 로 흰 알약을 또 그리면 그림과 어긋나 테두리가 겹쳐 보이므로 바탕을 빼고 글자 자리만 맞춘다 */
html.h5p .rank_v3 .rt_league_card .rt_expected
{
	position: absolute; left: 319px; top: 308px; width: 684px; height: 60px;
	padding: 0 30px; font-size: 44px; line-height: 60px; border-radius: 0; background: none;
}
/* 2026-10-09 CEO 지시: 이름표('초보') 와 같은 크기로 (44 -> 42). 오른쪽 값(.rt_money)은 그대로 46 */
html.h5p .rank_v3 .rt_league_card .rt_expected > b { color: #8b1414; font-size: 42px; }
/* 오른쪽 값이 칸 끝에 바짝 붙어 보였다 - 남은 칸 가운데에 둔다 (2026-10-08 CEO 지시) */
html.h5p .rank_v3 .rt_league_card .rt_expected > div
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
html.h5p .rank_v3 .rt_league_card .rt_expected .rt_money { font-size: 46px; }

/* 등급 고르는 줄 (주간 리그 / 명예의 전당 공용) */
html.h5p .rank_v3 .rt_hall_grades
{
	/* 아랫여백 54 -> 34 (2026-10-06 CEO 지시: 순위 목록을 등급 버튼 바로 아래로 붙인다).
	   고른 칸 그림(혜바닥)이 버튼 줄보다 22 더 내려오므로, 34 를 두면
	   그림 아랫변과 머리줄 사이가 12 남는다 - 그 아래로 더 올리면 그림을 물고 들어간다 */
	gap: 0; margin: 16px 0 34px; padding: 0 57px 0 48px; justify-content: space-between;
}
html.h5p .rank_v3 .rt_hall_grades button
{
	position: relative; flex: 0 0 195px; height: 200px; min-height: 0; padding: 0;
	border: 0; border-radius: 0; box-shadow: none; background: none;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
}
html.h5p .rank_v3 .rt_hall_grades .rt_badge { width: 152px; height: 132px; max-width: none; margin: 4px 0 0; flex: none; }
html.h5p .rank_v3 .rt_hall_grades .rt_badge small
{
	display: block; position: absolute; left: -22px; right: -22px; top: 140px;
	font-size: 38px; line-height: 54px; color: #fff;
	text-shadow: 0 3px 4px #16242c, 0 0 8px #0b161c;
}
/* 고른 칸 표시 그림(228x240)이 칸(195x200)보다 커서 배경으로 깔면 좌우 16.5 / 아래 40 이 잘려
   테두리 빛이 각지게 끊겨 보였다 (2026-10-03 CEO 지적). 칸 밖으로 넘칠 수 있는 ::before 로 그린다 */
/* 공용 탭 규칙(.rt_tabs .rt_selected)의 네모 그림자가 새 테두리 그림 뒤로 비쳐 보였다 - 끈다 (2026-10-03 CEO 지적) */
html.h5p .rank_v3 .rt_hall_grades .rt_selected { background: none; box-shadow: none; border: 0; }
html.h5p .rank_v3 .rt_hall_grades .rt_selected:before
{
	content: '';
	position: absolute;
	left: 50%;
	/* 그림(240)이 칸(200)보다 커서 아래로 삐져나가 머리줄에 닿았다 - 30 올린다 (2026-10-03 CEO 지시) */
	/* 2026-10-05 CEO 지시로 12 내린다 (-30 -> -18) - 이름표가 그림 아랫변에 붙어 있었다.
	   2026-10-07 CEO 지시로 4 더 내린다 (-18 -> -14) - 위쪽이 더 비어 보였다.
	   그림 안 여백까지 넣어 재면 아이콘 보이는 윗변이 칸 기준 +13, 이름표 아랫변이 +198 이라
	   -14 에서 위 27 / 아래 28 로 균형이 맞는다 */
	top: -14px;
	bottom: auto;
	margin-left: -114px;
	width: 228px;
	height: 240px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_weekly_focus.png) 0 0/228px 240px no-repeat;
}
/* 주간 리그에서 등급을 바꿀 때 고른 칸 표시가 그 자리에 '짜하고' 나타나지 않고
   옆으로 미끄러져 가게 한다 (2026-10-07 CEO 지시).
   버튼마다 그리던 ::before 를 줄(nav) 하나로 옮겨 left 만 움직인다.
   칸은 왼여백 48 + 195 씩 다섯이라 자리가 고정이다 (칸 가운데 145.5 / 340.5 / 535.5 / 730.5 / 925.5,
   그림 폭 228 이라 가운데 -114 가 왼끝이다).
   명예의 전당(.rt_weekly_champions)은 줄이 다르게 생겨 그대로 둔다 */
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades { position: relative; }
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades .rt_selected:before { content: none; }
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades:before
{
	content: '';
	position: absolute;
	top: -14px;
	left: 31.5px;
	width: 228px;
	height: 240px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_weekly_focus.png) 0 0/228px 240px no-repeat;
	-webkit-transition: left 0.22s ease-out;
	transition: left 0.22s ease-out;
}
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades[data-grade="A"]:before { left: 31.5px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades[data-grade="B"]:before { left: 226.5px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades[data-grade="C"]:before { left: 421.5px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades[data-grade="D"]:before { left: 616.5px; }
html.h5p .rank_v3[data-mode="weekly"] .rt_hall_grades[data-grade="E"]:before { left: 811.5px; }
/* 아이콘과 글자가 그 그림 아래로 깔리지 않게 한 겹 올린다 */
html.h5p .rank_v3 .rt_hall_grades .rt_badge { position: relative; z-index: 1; }
html.h5p .rank_v3 .rt_hall_grades .rt_selected .rt_badge { box-shadow: none; }
/* 2026-10-07 CEO 가 이 자리 전용으로 172x61 그림을 따로 줬다 - 자르지 않고 그대로 깐다 (이음매 없음) */
html.h5p .rank_v3 .rt_hall_grades .rt_selected .rt_badge small
{
	color: #3b3b55; text-shadow: none;
	background: none;
	z-index: 1;
}
html.h5p .rank_v3 .rt_hall_grades .rt_selected .rt_badge small:before
{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 172px;
	height: 61px;
	margin-left: -86px;
	margin-top: -30.5px;
	z-index: -1;
	background: url(../image/1_mainmenu/h5p/rank/ranking_icon_namebg_short.png) 0 0/172px 61px no-repeat;
}

/* 명예의 전당 - 어제 일간이 위, 지난 주간이 아래 */
html.h5p .rank_v3 .rt_daily_champions
{
	position: relative; width: 1012px; height: 705px; margin: 0 0 23px 34px; padding: 0;	/* 위 여백 2 -> 0 (2026-10-09) */
	border: 0; border-radius: 0;
	background: url(../image/1_mainmenu/h5p/rank/ranking_honor_bg1.png) 0 0/100% 100% no-repeat;
}
html.h5p .rank_v3 .rt_weekly_champions
{
	position: relative; width: 1012px; height: 917px; margin: 0 0 10px 34px; padding: 0;
	border: 0; border-radius: 0;
	background: url(../image/1_mainmenu/h5p/rank/ranking_honor_bg2.png) 0 0/100% 100% no-repeat;
}
/* 두 제목만 h2 기본 굵기(700)였다 - 주간 리그 '남은 시간'과 같은 800 으로 (2026-10-07 CEO 지적) */
html.h5p .rank_v3 .rt_daily_champions > h2
{
	position: absolute; left: 0; right: 0; top: 12px; height: 58px; margin: 0; font-size: 50px; font-weight: 800; line-height: 58px;
	color: #ffd24a; text-shadow: 0 4px 0 #3a2a10;
}
html.h5p .rank_v3 .rt_daily_champions > .rt_note { position: absolute; left: 0; right: 0; top: 92px; margin: 0; font-size: 34px; color: #d6dbdf; text-shadow: none; }
html.h5p .rank_v3 .rt_weekly_champions > h2
{
	/* 2026-10-06 CEO 지적: 제목이 띄 아래쪽으로 쏏려 있었다 (22 -> 8).
	   판 그림의 파란 띄는 y 0~74 라 가운데가 37 이고,
	   글자 상자(높이 58)를 8 에 두면 가운데가 37 로 띄와 맞는다 */
	position: absolute; left: 0; right: 0; top: 8px; height: 58px; margin: 0; padding: 0; background: none;
	font-size: 50px; font-weight: 800; line-height: 58px; color: #fff;	/* 위와 같은 이유 (2026-10-07 CEO 지적) */
	/* 2026-10-07 CEO 지적: 대각선 네 방향만 깔아 위아래·좌우 가장자리가 비어 테두리가 끊겨 보였다.
	   위 카테고리 버튼(#RT_tabs)과 같은 꼴로 - 상하좌우 3px + 대각선 2px 여덟 방향 */
	text-shadow: -3px 0 0 #4a8fc8, 3px 0 0 #4a8fc8, 0 -3px 0 #4a8fc8, 0 3px 0 #4a8fc8,
	             -2px -2px 0 #4a8fc8, 2px -2px 0 #4a8fc8, -2px 2px 0 #4a8fc8, 2px 2px 0 #4a8fc8;
}
html.h5p .rank_v3 .rt_weekly_champions > .rt_note { position: absolute; left: 0; right: 0; top: 90px; margin: 0; padding: 0; background: none; font-size: 34px; color: #4b5156; text-shadow: none; }

/* 시상대 세 칸 - 카드 그림이 판에서 분리돼 칸마다 따로 깐다 (2026-10-02 CEO 전달) */
html.h5p .rank_v3 .rt_daily_winners { display: block; gap: 0; }
html.h5p .rank_v3 .rt_daily_winners article, html.h5p .rank_v3 .rt_weekly_champions .rt_winner
{
	position: absolute; display: block; width: 301px; height: 524px; padding: 0; gap: 0; flex: none;
	border: 0; border-radius: 0; background: 0 0/100% 100% no-repeat;
}
html.h5p .rank_v3 .rt_daily_winners .rt_daily_1, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_1 { background-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top1.png?v=2); }
html.h5p .rank_v3 .rt_daily_winners .rt_daily_2, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_2 { background-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top2.png?v=2); }
html.h5p .rank_v3 .rt_daily_winners .rt_daily_3, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_3 { background-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top3.png?v=2); }
/* 시상대가 차례로 빛난다 - 일간 1~3위 다음 주간 1~3위 (2026-10-03 CEO 지시).
   빛은 위에서 아래로 흐르고, 빛이 지나간 뒤 그 칸의 얼굴이 한 번 커졌다 작아진다.
   차례 번호(rt_shine_1~6)는 S_rank_portrait.js 의 shine_order 가 매긴다 - 기록 없는 칸은 건너뛴다.
   한 바퀴 32초: 한 칸이 2초씩 여섯 칸을 돌고(12초) 20초 쉬었다가 다시 돈다 (2026-10-07 CEO 지시).
   예전에는 13초라 쉬는 틈이 1초뿐이라 쉴 새 없이 반짝였다.
   카드 그림과 같은 그림을 가림막(mask)으로 써서 빛이 카드 모양 안에서만 흐른다 */
html.h5p .rank_v3 .rt_daily_winners article:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_winner:after
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background: -webkit-linear-gradient(290deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0) 58%);
	background: linear-gradient(160deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0) 58%);
	background-size: 300% 300%;
	background-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-animation: rt_win_shine 32s linear infinite;
	animation: rt_win_shine 32s linear infinite;
}
/* 빛을 카드 모양으로 오려 내는 가림막은 등수마다 다르다 (카드 그림이 다르므로) */
html.h5p .rank_v3 .rt_daily_winners .rt_daily_1:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_1:after
{
	-webkit-mask-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top1.png?v=2);
	mask-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top1.png?v=2);
}
html.h5p .rank_v3 .rt_daily_winners .rt_daily_2:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_2:after
{
	-webkit-mask-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top2.png?v=2);
	mask-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top2.png?v=2);
}
html.h5p .rank_v3 .rt_daily_winners .rt_daily_3:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_3:after
{
	-webkit-mask-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top3.png?v=2);
	mask-image: url(../image/1_mainmenu/h5p/rank/ranking_honor_top3.png?v=2);
}
/* 빛이 지나간 바로 뒤에 그 칸의 얼굴이 한 번 커졌다 작아진다 */
html.h5p .rank_v3 .rt_daily_winners .rt_face,
html.h5p .rank_v3 .rt_weekly_champions .rt_face
{
	-webkit-animation: rt_win_pop 32s ease-out infinite;
	animation: rt_win_pop 32s ease-out infinite;
}
/* 차례 - 한 칸이 2초씩 (빛 1.4초 + 얼굴 0.65초).
   기본 규칙이 article:after 라 지정도가 높아 .rt_shine_N:after 만으로는 달리는 말을 이기지 못한다 -
   부모 칸까지 써서 지정도를 같이 올린다 */
/* 2026-10-07 CEO 지시: 화면에 들어오자마자 반짝이면 버튼을 빨리 누를 때 버벅이며 보인다 -
   모든 차례를 5초씩 미뤄 화면이 자리를 잡은 뒤에 시작한다 (0/2/4/6/8/10 -> 5/7/9/11/13/15) */
html.h5p .rank_v3 .rt_daily_winners .rt_shine_1:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_shine_1:after,
html.h5p .rank_v3 .rt_shine_1 .rt_face { -webkit-animation-delay: 5s; animation-delay: 5s; }
html.h5p .rank_v3 .rt_daily_winners .rt_shine_2:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_shine_2:after,
html.h5p .rank_v3 .rt_shine_2 .rt_face { -webkit-animation-delay: 7s; animation-delay: 7s; }
html.h5p .rank_v3 .rt_daily_winners .rt_shine_3:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_shine_3:after,
html.h5p .rank_v3 .rt_shine_3 .rt_face { -webkit-animation-delay: 9s; animation-delay: 9s; }
html.h5p .rank_v3 .rt_daily_winners .rt_shine_4:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_shine_4:after,
html.h5p .rank_v3 .rt_shine_4 .rt_face { -webkit-animation-delay: 11s; animation-delay: 11s; }
html.h5p .rank_v3 .rt_daily_winners .rt_shine_5:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_shine_5:after,
html.h5p .rank_v3 .rt_shine_5 .rt_face { -webkit-animation-delay: 13s; animation-delay: 13s; }
html.h5p .rank_v3 .rt_daily_winners .rt_shine_6:after,
html.h5p .rank_v3 .rt_weekly_champions .rt_shine_6:after,
html.h5p .rank_v3 .rt_shine_6 .rt_face { -webkit-animation-delay: 15s; animation-delay: 15s; }
/* 빛은 카드 위에서 아래로 1.4초 동안 흐르고 나머지 시간은 쉰다 (2026-10-03 CEO 지시로 방향을 뒤집고 느리게) */
@-webkit-keyframes rt_win_shine
{
	0%          { background-position: 100% 100%; opacity: 0; }
	0.2%        { background-position: 100% 100%; opacity: 1; }
	4.5%        { background-position: 0% 0%; opacity: 1; }
	4.9%, 100%  { background-position: 0% 0%; opacity: 0; }
}
@keyframes rt_win_shine
{
	0%          { background-position: 100% 100%; opacity: 0; }
	0.2%        { background-position: 100% 100%; opacity: 1; }
	4.5%        { background-position: 0% 0%; opacity: 1; }
	4.9%, 100%  { background-position: 0% 0%; opacity: 0; }
}
/* 얼굴은 빛이 끝나는 11% 부터 0.65초 동안 한 번 부풀었다 돌아온다 */
@-webkit-keyframes rt_win_pop
{
	0%, 4.5%    { -webkit-transform: scale(1); }
	5.3%        { -webkit-transform: scale(1.18); }
	5.9%        { -webkit-transform: scale(0.99); }
	6.5%, 100%  { -webkit-transform: scale(1); }
}
@keyframes rt_win_pop
{
	0%, 4.5%    { transform: scale(1); }
	5.3%        { transform: scale(1.18); }
	5.9%        { transform: scale(0.99); }
	6.5%, 100%  { transform: scale(1); }
}

/* 2026-10-09 CEO 지시: 세 칸 사이를 벌린다 (사이 8 -> 29 -> 19). 그 뒤 카드 여섯 장을 모두 25 위로 (CEO 지시).
   29 는 과하다 하셔서 전(8)과 후(29)의 중간으로 다시 잡았다.
   판 1012 안에 칸 301 셋이라 남는 109 를 양옆 36·35 / 사이 19 로 나눈다. 1위는 가운데라 자리가 그대로다 */
html.h5p .rank_v3 .rt_daily_winners .rt_daily_1 { left: 356px; top: 114px; }
html.h5p .rank_v3 .rt_daily_winners .rt_daily_2 { left: 36px; top: 134px; }
html.h5p .rank_v3 .rt_daily_winners .rt_daily_3 { left: 676px; top: 147px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_podium { display: block; position: static; min-height: 0; margin: 0; padding: 0; gap: 0; }
/* 지난 주간 TOP 3 도 같은 간격으로 (위 일간과 꼴을 맞춘다) */
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_1 { left: 356px; top: 109px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_2 { left: 36px; top: 129px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_3 { left: 676px; top: 142px; }
/* 기록이 없는 자리는 카드째로 비운다 */
html.h5p .rank_v3 .rt_daily_winners .rt_no_record,
html.h5p .rank_v3 .rt_weekly_champions .rt_no_record { display: none; }
html.h5p .rank_v3 .rt_weekly_champions .rt_crown { display: none; }
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_panel
{
	display: block; position: static; min-height: 0; padding: 0; gap: 0;
	border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* 시상대 한 칸 안쪽 - 얼굴 / 닉네임 / 점수 (좌표는 301x524 카드 그림 기준).
   2026-10-02 새 시안: 받은 보상 알약을 뺐다. 새 그림은 색 띠가 29px 더 내려와 옅은 판이 y 308 부터다 */
/* 얼굴은 카드 그림의 둥근 창에 딱 들어가야 한다 (2026-10-05 CEO 지적).
   2026-10-07 다시 받은 그림(왕관에 1·2·3 숫자) 기준으로 세 장 모두 다시 쟀다 - 창이 커지고 위로 올라갔다:
     1위 가운데 (150.0, 184.0) 지름 128   (예전 149.0, 197.7 / 105)
     2위 가운데 (149.0, 197.5) 지름 117   (예전 146.5, 198.0 / 116)
     3위 가운데 (149.0, 197.5) 지름 117   (예전 148.5, 198.0 / 116)
   2026-10-07 CEO 지적('2·3위가 원과 어긋난다')으로 다시 쟀다 - 공 안쪽 테두리 윗선이 y=139,
   가로 가운데가 x=149 다. 한때 가운데를 189/190 으로 올렸던 것은 잘못이라 되돌렸다 */
html.h5p .rank_v3 .rt_daily_winners .rt_face, html.h5p .rank_v3 .rt_weekly_champions .rt_face
{
	/* 2026-10-07 CEO 지적('테두리가 공과 살짝 안 맞는다') - 그림에서 공 안쪽 원을 다시 쟀다.
	   2·3위 카드는 안쪽 원이 지름 117.5, 가운데 (148.5, 196.5) 라 네모칸은 (89.5, 137.5) 에 118 이다
	   (예전 값 90.5 / 139 / 117 은 1 안팎씩 어긋나 있었다).
	   테두리는 4 -> 3 으로 얇게 (CEO 지시). box-sizing 이 border-box 라 바깥 지름은 그대로다 */
	/* 2026-10-09 CEO 가 카드 그림을 다시 주셔서 공 자리를 모두 다시 쟀다 (가장 넓은 가로줄로 지름·가운데를 잡는다).
	   2·3위: 가운데 (148.5, 214) 지름 116 -> 네모칸 (90.5, 156) 에 116 (예전 89.5 / 137.5 / 118 - 공이 18 내려갔다) */
	/* 2026-10-09 CEO 가 다시 '미묘하게 안 맞는다' 하셔서 공 테두리에 원을 맞춰(최소자승) 다시 쟀다.
	   2위: 가운데 (148.6, 220.7) 지름 117 - 예전 값(148.5, 214)은 공보다 7 위에 있었다 */
	position: absolute; left: 90px; top: 162px; width: 117px; height: 117px;
	margin: 0; border: 3px solid #24262b; background: #4aa84a;
}
html.h5p .rank_v3 .rt_daily_winners .rt_daily_1 .rt_face, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_1 .rt_face
{
	left: 86px; top: 140px; width: 129px; height: 129px; border: 3px solid #24262b;	/* 1위는 공이 커서 따로 - 가운데 (150.5, 204.5) 지름 129 (2026-10-09 원 맞춰 다시 잼) */
}
html.h5p .rank_v3 .rt_daily_winners .rt_daily_3 .rt_face, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_3 .rt_face
{
	top: 161px;	/* 3위는 공이 1 위에 있다 - 가운데 (148.6, 219.7) */
}
html.h5p .rank_v3 .rt_daily_winners strong, html.h5p .rank_v3 .rt_weekly_champions .rt_winner strong
{
	/* 2026-10-09 새 카드 그림은 옅은 판이 306 -> 336 으로 30 내려갔다 - 글자도 그만큼 내렸다가,
	   너무 내려갔다는 CEO 지적으로 15 되올렸다 (339 -> 369 -> 354) */
	position: absolute; left: 14px; right: 14px; top: 360px; margin: 0; height: 48px;	/* 2026-10-09 CEO '아주 살짝만 더' - 6 내림 */
	font-size: 42px; line-height: 48px; color: #2f2a10; text-align: center;
}
/* 시상대 점수줄: '점' 글자를 빼고 앞에 승점(P) 별 아이콘을 붙인다 (2026-10-05 CEO 지시).
   아이콘과 숫자가 한 줄에서 가운데로 맞도록 가로줄(flex)로 세운다 */
html.h5p .rank_v3 .rt_daily_winners span, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_score
{
	position: absolute; left: 14px; right: 14px; top: 413px; height: 62px;	/* 닉네임과 같이 움직인다 (392 -> 422 -> 407 -> 413, 2026-10-09) */
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	font-size: 50px; line-height: 1; color: #8b1414; text-align: center;	/* 2026-10-05 CEO 지시로 키움 (40 -> 50) */
	/* 2026-10-06 CEO 지적: 일간은 span, 주간은 b 로 만들어져 굵기가 700 / 900 으로 달랐다.
	   두 줄을 주간 쪽(900)에 맞춘다 - 시상대 숫자라 굵은 쪽이 맞다 */
	font-weight: 900;
	/* 2026-10-09 에는 '숫자'를 칸 가운데에 맞추려고 오른쪽에 62 를 비워 뒀는데,
	   그러면 아이콘+숫자 묶음이 통째로 왼쪽으로 31 쏠린다 (2026-10-10 CEO 지적).
	   묶음을 칸 가운데에 맞춘다 - 비워 두지 않는다 */
	padding-right: 0;
	box-sizing: border-box;
}
html.h5p .rank_v3 .rt_daily_winners span:before,
html.h5p .rank_v3 .rt_weekly_champions .rt_winner_score:before
{
	content: ''; display: block; width: 58px; height: 57px; margin-right: 4px;
	-webkit-flex: none;
	flex: none;
	/* 2026-10-07 바뀐 아이콘 기준 다시 쟀다: 'P' 글자가 그림(64x62) 안에서 y 19~44,
	   가운데가 31.5 로 그림 가운데(30.5)보다 1 만 아래다. 예전 그림은 3 아래였다.
	   숫자가 글꼴 상자 가운데보다 위에 맺히는 몫만 남으므로 5 -> 3 으로 줄인다 (2026-10-07 CEO 지적) */
	position: relative;
	top: -3px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_point_icon.png) 0 0/58px 57px no-repeat;
}
/* 보상 알약 자리는 쓰지 않는다 - 혹시 남아 있어도 보이지 않게 (2026-10-02 CEO 지시) */
html.h5p .rank_v3 .rt_daily_winners small, html.h5p .rank_v3 .rt_weekly_champions .rt_winner_prize
{
	display: none;
}
html.h5p .rank_v3 .rt_daily_winners .rt_daily_medal { display: none; }
/* 세 칸이 모두 비었을 때의 안내 */
html.h5p .rank_v3 .rt_hall_blank
{
	position: absolute; left: 60px; right: 60px; top: 300px; min-height: 0; height: auto; padding: 0;
	margin: 0; text-align: center; font-size: 42px; line-height: 1.5;
}
html.h5p .rank_v3 .rt_daily_champions .rt_hall_blank { color: #e6ecef; text-shadow: 0 2px 4px #10181c; }
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_blank { color: #4b5156; text-shadow: none; }
html.h5p .rank_v3 .rt_note { color: #fff3d6; text-shadow: 0 0 8px #0e2129, 0 3px 4px #0e2129; }
html.h5p .rank_v3 .rt_daily_champions > .rt_note, html.h5p .rank_v3 .rt_weekly_champions > .rt_note { text-shadow: none; }

/* 명예의 전당 등급 줄은 판 그림 아래쪽 어두운 띠 안에 들어간다 */
/* 다섯 칸을 판(1012px) 안에 고르게 편다.
   2026-10-03 CEO 지적: 등급 아이콘이 고른 칸 그림(혓바닥) 가운데가 아니었다.
   그림을 재 보면 혓바닥은 다섯 장 모두 220px 인데, 양끝 그림(289px)은 혓바닥이 가운데가 아니다 -
   왼쪽 그림은 혓바닥이 x 0~219(가운데 109.5), 오른쪽 그림은 x 69~288(가운데 178.5) 이고
   나머지 69px 는 판 모서리로 이어지는 곡선이다. 그래서 그림 가운데에 아이콘을 두면 35px 씩 어긋났다.
   혓바닥 가운데는 판 기준으로 첫 칸 109.5, 끝 칸 901.5 로 고정이고 그 사이를 4등분하면 198px 이다.
   좌우 11px 를 빼고 5등분하면 칸 하나가 정확히 198px, 칸 가운데가 110 ~ 902 로 혓바닥과 맞는다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades
{
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 11px; align-items: flex-end;
}
/* 등급 줄은 TOP3 카드보다 아래 깊이에 둔다 - 고른 칸 그림이 카드를 덮지 않게 (2026-10-03 CEO 지시) */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades { z-index: 0; }
html.h5p .rank_v3 .rt_weekly_champions .rt_winner { z-index: 2; }
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0; height: 270px; justify-content: flex-end;
}
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades .rt_badge { margin: 0 0 85px; }
/* 고른 칸의 흰 혓바닥은 그림 원본 크기 그대로 깐다 (2026-10-02 CEO 지시).
   칸 하나는 195px 인데 그림은 220~289px 라, 칸의 배경으로 깔면 양옆이 잘렸다.
   그래서 칸 밖으로 넘칠 수 있는 ::before 로 그린다 - 혓바닥(220px)의 가운데를 칸 가운데에 맞춘다.
   양끝 그림(289px)은 안쪽으로 69px 더 길어서 판 아래선과 이어지는 곡선이 들어 있다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades .rt_selected { background: none; }
/* 2026-10-03 CEO 지시: 그림을 16 올려 판 아랫변(카드 y 694)에 딱 맞춘다.
   그림 윗 63px 은 판과 같은 색이라 판 안에 묻히고, 그 아래 곡선이 판 아랫변에서 시작한다 */
/* 2026-10-07 CEO 지시: 등급을 바꿀 때 고른 칸 표시가 옆으로 미끄러지게 한다.
   혓바닥(220)은 다섯 자리가 같은 그림이라 줄(nav) 하나로 그려 left 만 움직인다.
   칸 가운데는 110 / 308 / 506 / 704 / 902 이라 그림 왼끝은 110 을 뺀 0 / 198 / 396 / 594 / 792 로 고정이다.
   양끝 칸은 판 모서리로 이어지는 곡선이 붙은 다른 그림이라,
   미끄러짐이 끝난 뒤(0.22s)에 짧게 겹쳐 나타나고 그 칸을 떠날 때는 미루지 않고 바로 사라진다.
   두 그림의 혓바닥 자리가 같아 겹쳐도 곡선만 생겼다 사라져 보인다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades::before
{
	content: '';
	position: absolute;
	left: 0;
	bottom: 16px;
	width: 220px;
	height: 270px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_honor_bg2_middlebt.png) 0 0/220px 270px no-repeat;
	-webkit-transition: left 0.22s ease-out;
	transition: left 0.22s ease-out;
}
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades[data-grade="A"]::before { left: 0; }
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades[data-grade="B"]::before { left: 198px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades[data-grade="C"]::before { left: 396px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades[data-grade="D"]::before { left: 594px; }
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades[data-grade="E"]::before { left: 792px; }
/* 칸마다 그리던 혓바닥은 이제 줄이 그린다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades .rt_selected::before { content: none; }
/* 양끝 그림: 늘 깔아 두고 투명도로만 보였다 안 보였다 한다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button:first-child::before,
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button:last-child::before
{
	content: '';
	position: absolute;
	top: auto;
	bottom: 16px;
	width: 289px;
	height: 270px;
	margin: 0;
	opacity: 0;
	/* 2026-10-07 CEO 지시: 바뀌는 느낌이 굼떠 보여 사라지는 시간을 0.1 -> 0.05 로 줄인다 */
	-webkit-transition: opacity 0.05s ease-out;
	transition: opacity 0.05s ease-out;
}
/* 첫 칸은 어두운 띠 왼쪽 끝(판 x 0)에 붙인다 - 칸 왼변이 11 이라 그만큼 밖으로.
   그림 안 혓바닥(x 0~219) 가운데 109.5 가 칸 가운데 110 과 맞는다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button:first-child::before
{
	left: -11px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_honor_bg2_leftbt.png) 0 0/289px 270px no-repeat;
}
/* 끝 칸은 띠 오른쪽 끝(판 x 1012)에 붙인다 - 그림 안 혓바닥(x 69~288) 가운데 901.5 = 칸 가운데 902 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button:last-child::before
{
	left: auto;
	right: -11px;
	background: url(../image/1_mainmenu/h5p/rank/ranking_honor_bg2_rightbt.png) 0 0/289px 270px no-repeat;
}
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button:first-child.rt_selected::before,
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades button:last-child.rt_selected::before
{
	opacity: 1;
	/* 2026-10-07 CEO 지시: 미끄러짐이 끝나기 조금 전(0.18s)부터 0.08s 만에 바꿔 쌱 하고 바뀌게 한다 */
	-webkit-transition: opacity 0.08s ease-out 0.18s;
	transition: opacity 0.08s ease-out 0.18s;
}
/* 그림이 ::before 라 아이콘과 글자가 그 아래로 깔리지 않게 한 겹 올린다 */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades .rt_badge { position: relative; z-index: 1; }
/* 2026-10-07 CEO 지시: 등급 이름표(흰 상자 + 글자)를 7 올린다.
   아이콘 그림이 실제로 보이는 아랫변은 칸 기준 123.3 이고 상자 윗변이 136.5 라 13.2 가 떠 있었다 -
   7 을 올리면 6.2 가 남아 아이콘과 닿지 않는다 (주간 리그 줄은 오늘 맞춘 균형 그대로 둔다) */
html.h5p .rank_v3 .rt_weekly_champions .rt_hall_grades .rt_badge small { top: 133px; }

/* 명예의 전당은 스크롤이 생기지 않게 한다 (2026-10-02 CEO 지시).
   두 판의 높이는 그림 크기(705 + 917)로 고정이라, 먼저 아래 여백 30px 를 걷어 2340 기기에 맞춘다.
   그보다 짧은 기기에서는 S_rank_portrait.js 의 fit_hall 이 모자란 만큼 판을 줄인다 */
html.h5p .rank_v3.rt_hallview #RT_scroll { overflow-y: hidden; }
html.h5p .rank_v3.rt_hallview #RT_content
{
	padding-bottom: 0;
	-webkit-transform-origin: top center;
	transform-origin: top center;
}
html.h5p .rank_v3.rt_hallview .rt_weekly_champions { margin-bottom: 0; }

/* 참가자가 없을 때·불러오지 못했을 때의 안내: 어두운 상자를 없애고 글자만 둔다 (2026-10-02 CEO 지시) */
html.h5p .rank_v3 .rt_empty
{
	color: #ffffff;	/* 참가자 없음 안내 글자는 흰색 (2026-10-07 CEO 지시) */
	background: none;
	border-radius: 0;
	padding: 60px 25px;
	text-shadow: 0 0 10px #0e2129, 0 3px 5px #0e2129;
}

/* 참가자가 없을 때: 순위가 나오는 자리(표 머리줄 아래 ~ 내 순위 줄 위) 한가운데에 둔다 (2026-10-02 CEO 지시) */
html.h5p .rank_v3 #RT_content
{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
}
html.h5p .rank_v3 #RT_content > *
{
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
}
html.h5p .rank_v3 #RT_content > .rt_table_empty,
html.h5p .rank_v3 #RT_content > .rt_empty
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
html.h5p .rank_v3 .rt_table_empty .rt_columns
{
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
}
html.h5p .rank_v3 .rt_table_empty .rt_empty
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/* ============ 순위 목록은 머리줄 아래부터 내 순위 줄 위까지만 구른다 (2026-10-02 CEO 지시) ============
   상금판(등급판)과 '순위 / 닉네임 / 점수 / 예상 상금' 머리줄은 제자리에 두고, 줄 목록만 안에서 구른다.
   쪽 넘김(1 / 3 · 다음 순위)은 없애고 1~100위를 한 목록으로 본다 */
html.h5p .rank_v3.rt_listview #RT_scroll
{
	overflow: hidden;
	/* 2026-10-08 CEO 지시로 되돌림 - 목록을 60 올려 봤으나 더 어색했다 (아래끝은 예전 그대로 둔다) */
}
html.h5p .rank_v3.rt_listview #RT_content
{
	height: 100%;
	min-height: 0;
	padding-bottom: 0;
}
html.h5p .rank_v3.rt_listview #RT_content > .rt_table
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
}
html.h5p .rank_v3.rt_listview #RT_content > .rt_table > .rt_columns
{
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
}
html.h5p .rank_v3 .rt_rows
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
	/* auto 였을 때는 줄이 적어 스크롤이 없는 등급(참가자 1~2명)에서 막대 자리(22)가 사라져
	   줄이 16~1064 로 늘어났다 - 소제목바(16~1042)보다 22 튀어나와 오른쪽 선이 어긋나 보였다 (2026-10-08 CEO 지적).
	   scroll 로 두면 막대가 없어도 자리를 늘 비워 두어 어느 등급에서나 줄이 16~1042 로 끝난다.
	   막대 트랙은 투명(h5_portrait.css)이고 굴릴 내용이 없으면 손잡이도 안 그려져, 보이는 것은 달라지지 않는다 */
	overflow-y: scroll;
	overflow-x: hidden;
	overscroll-behavior: contain;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}
/* 참가자가 없을 때는 안내가 가운데로 가야 하니 굴리지 않는다 */
html.h5p .rank_v3 .rt_table_empty .rt_rows
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	overflow: visible;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}



/* ============ 랭킹 안내 팝업 (2026-10-07 CEO 지시) ============
   1) 글 칸이 좁고 오른쪽에 빈 자리가 많았다 - 양옆 안여백을 60 -> 16 으로 줄여
      줄임막대를 팝업 오른쪽 테두리에 붙이고, 글은 왼쪽 안여백 24 로 넣어 넣는다.
      (테두리 그림의 보이는 향은 4~6 뿐이라 16 이면 글이 테두리에 물리지 않는다)
   2) 안의 구분 버튼이 너무 화려해 위 카테고리 버튼과 같은 주간 리그 그림(회색/초록)으로 바꿈 */
html.h5p .rank_v3 .rt_dialog { padding: 104px 16px 70px; }
/* 2026-10-08 CEO 지적: 왼쪽에만 24 를 줘서 안쪽 칸이 24 오른쪽으로 치우쳐 있었다 - 양쪽 다 0 으로 */
html.h5p .rank_v3 #RT_modal_body { padding-left: 0; }
/* 구분 버튼은 내 정보 팝업의 칸(탭) 꼴로 바꾼다 (2026-10-07 CEO 지시).
   그림 버튼은 네 개가 나란히 서니 너무 시끄러웠다 - 고른 칸만 밝게 뜨고
   아래 줄로 본문과 이어지는 내 정보 칸이 읽기 편하다.
   값은 css/h5_portrait_myinfo.css 의 .MYI_tab 을 네 칸(폭 227)에 맞춰 줄인 것이다 */
html.h5p .rank_v3 #RT_help_tabs
{
	position: relative;
	/* 2026-10-08 CEO 지시: 제목 띠와 구분 버튼 사이 여백을 2배로 (26 -> 52).
	   아래쪽은 장식 줄(::before)이 들어갈 자리만큼 넓혔다 (25 -> 50) */
	margin: 52px 14px 50px;
	gap: 8px;
	height: 92px;
}
/* 칸 아래 장식 줄 - 칸과 조금 띄워 얇은 줄 하나, 양끝에 작은 동그라미 (2026-10-08 CEO 지시).
   색은 칸 아래 줄과 같은 톤(#e6ce9c) 이다 */
html.h5p .rank_v3 #RT_help_tabs::before
{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -26px;
	height: 14px;
	background:
		radial-gradient(circle at 7px 50%, #e6ce9c 4.5px, rgba(0, 0, 0, 0) 5.5px) no-repeat,
		radial-gradient(circle at 7px 50%, #e6ce9c 4.5px, rgba(0, 0, 0, 0) 5.5px) no-repeat,
		linear-gradient(#e6ce9c, #e6ce9c) no-repeat;
	background-size: 14px 14px, 14px 14px, 100% 3px;
	background-position: left center, right center, center center;
	pointer-events: none;
}
/* 칸 아래 줄 - 고른 칸이 이 줄을 덮어 본문과 이어져 보인다 (내 정보 #MYI_pagebg 와 같은 꼴) */
html.h5p .rank_v3 #RT_help_tabs::after
{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #e6ce9c;
	pointer-events: none;
}
html.h5p .rank_v3 #RT_help_tabs button
{
	position: relative;
	flex: 1;
	height: 92px;
	min-height: 0;
	padding: 0 0 3px;
	border: 3px solid #d9c49a;
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	box-shadow: none;
	background: #e8d8b4;
	font-size: 42px;	/* 2026-10-09 CEO 지시로 키웠다 (36 -> 42). 네 칸에 '랭킹 규칙' 같은 넉 자가 들어간다 */
	font-weight: 800;
	color: #a98a5e;
	text-shadow: none;
}
html.h5p .rank_v3 #RT_help_tabs .rt_selected
{
	z-index: 2;
	background: #fff8e8;
	border-color: #e6ce9c;
	color: #8a4b10;
	text-shadow: none;
}

/* ============ 오늘의 총 상금 판 반짝이 (2026-10-07 CEO 지시) ============
   그림 안 금화 더미(가로 330~880 / 세로 140~270) 둘레에 네모별을 흩어 두고
   하나씩 어긋난 때에 켜졌다 꺼지게 한다. 글자와 상자 위를 덮지 않도록
   세로 160~250 안에만 둔다. 터치는 그냥 지나가야 하니 pointer-events 는 끈다 */
html.h5p .rank_v3 .rt_sparks
{
	position: absolute;
	left: 0;
	top: 0;
	width: 1055px;
	height: 378px;
	pointer-events: none;
	overflow: hidden;
}
html.h5p .rank_v3 .rt_spark
{
	position: absolute;
	display: block;
	background: #fffdf0;
	opacity: 0;
	-webkit-clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
	clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
	-webkit-filter: drop-shadow(0 0 7px #fff3b0);
	filter: drop-shadow(0 0 7px #fff3b0);
	-webkit-animation: rt_spark_tw 1.9s ease-in-out infinite;
	animation: rt_spark_tw 1.9s ease-in-out infinite;
}
@-webkit-keyframes rt_spark_tw
{
	0%, 100%	{ opacity: 0; -webkit-transform: scale(0.25) rotate(0deg); }
	18%			{ opacity: 1; -webkit-transform: scale(1) rotate(20deg); }
	40%			{ opacity: 0.35; -webkit-transform: scale(0.6) rotate(35deg); }
	58%			{ opacity: 0; -webkit-transform: scale(0.25) rotate(45deg); }
}
@keyframes rt_spark_tw
{
	0%, 100%	{ opacity: 0; transform: scale(0.25) rotate(0deg); }
	18%			{ opacity: 1; transform: scale(1) rotate(20deg); }
	40%			{ opacity: 0.35; transform: scale(0.6) rotate(35deg); }
	58%			{ opacity: 0; transform: scale(0.25) rotate(45deg); }
}
/* 자리와 때는 한 알씩 - 같은 줄에 몰리지 않게 흩어 둔다 */
html.h5p .rank_v3 .rt_spark1	{ left: 344px; top: 198px; width: 30px; height: 30px; -webkit-animation-delay: 0s;		animation-delay: 0s; }
html.h5p .rank_v3 .rt_spark2	{ left: 402px; top: 164px; width: 24px; height: 24px; -webkit-animation-delay: 0.55s;	animation-delay: 0.55s; }
html.h5p .rank_v3 .rt_spark3	{ left: 468px; top: 186px; width: 40px; height: 40px; -webkit-animation-delay: 1.15s;	animation-delay: 1.15s; }
html.h5p .rank_v3 .rt_spark4	{ left: 548px; top: 162px; width: 28px; height: 28px; -webkit-animation-delay: 0.3s;		animation-delay: 0.3s; }
html.h5p .rank_v3 .rt_spark5	{ left: 620px; top: 196px; width: 34px; height: 34px; -webkit-animation-delay: 1.5s;		animation-delay: 1.5s; }
html.h5p .rank_v3 .rt_spark6	{ left: 690px; top: 164px; width: 26px; height: 26px; -webkit-animation-delay: 0.85s;	animation-delay: 0.85s; }
html.h5p .rank_v3 .rt_spark7	{ left: 760px; top: 190px; width: 38px; height: 38px; -webkit-animation-delay: 0.1s;		animation-delay: 0.1s; }
html.h5p .rank_v3 .rt_spark8	{ left: 836px; top: 214px; width: 28px; height: 28px; -webkit-animation-delay: 1.35s;	animation-delay: 1.35s; }
html.h5p .rank_v3 .rt_spark9	{ left: 586px; top: 232px; width: 22px; height: 22px; -webkit-animation-delay: 0.7s;		animation-delay: 0.7s; }
html.h5p .rank_v3 .rt_spark10	{ left: 866px; top: 174px; width: 24px; height: 24px; -webkit-animation-delay: 1.75s;	animation-delay: 1.75s; }

/* 등급 줄 버튼은 누를 때 버튼 전체가 아니라 등급 그림만 어둡게 한다 (2026-10-09 CEO 지적).
   버튼 전체에 밝기 효과를 걸면 칸 밖으로 넘치는 고른 칸 그림(::before)까지 한 덩어리로 다시 그려져
   등급 줄 위 흰 판 위에 회색 네모가 떠 보였다 */
html.h5p .rank_v3 .rt_hall_grades button.h5p_press,
html.h5p .rank_v3 .rt_hall_grades button.h5_pressed,
html.h5p .rank_v3 .rt_hall_grades button:active
{
	-webkit-filter: none;
	filter: none;
}
html.h5p .rank_v3 .rt_hall_grades button.h5p_press .rt_badge,
html.h5p .rank_v3 .rt_hall_grades button.h5_pressed .rt_badge,
html.h5p .rank_v3 .rt_hall_grades button:active .rt_badge
{
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
}

/* ==== css/h5_portrait_myinfo.css ==== */
/* 파일명: h5_portrait_myinfo.css
   하는일: 세로모드 '내정보' 화면 배치. 기준 캔버스 1080 x 2340 (메인화면과 같은 좌표계).
           세이프에어리어 상 96 / 하 120, 최소 터치영역 168 을 지킨다.
   스코프: html.h5p 일 때만 적용 (S_myinfo_portrait.js 가 요소를 만든다) */

/* ============ 루트 ============ */
/* 폭이 넓은 기기에서는 캔버스가 1080보다 넓어진다. 내용은 1080 중앙 컬럼에 고정한다 */
html.h5p #MYI_root
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    top: 0;
    width: 1080px;
    height: 100%;
    display: none;
    z-index: 120;
    font-family: 'NanumSquareRound', sans-serif;
}

/* 어두운 딤: 중앙 컬럼 밖(태블릿 좌우 여백)까지 덮는다 */
html.h5p #MYI_dim
{
    position: absolute;
    left: -100%;
    top: 0;
    width: 300%;
    height: 100%;
    /* 서브 배경 대신 메인화면이 그대로 보이는 위에 검정 딤을 깐다 (2026-09-14 CEO 지시 - 서브 배경보다 낫다).
       진하기는 팝업 공통 딤 80% (2026-09-12 통일). 열 때 서서히 깔리고 닫을 때 서서히 걷힌다 */
    background: rgba(0, 0, 0, 0.8);
    -webkit-animation: myi_dim_in 0.16s ease-out both;
    animation: myi_dim_in 0.16s ease-out both;
}
html.h5p #MYI_root.MYI_closing #MYI_dim
{
    -webkit-animation: h5p_dim_fade_out 0.23s ease-in both;
    animation: h5p_dim_fade_out 0.23s ease-in both;
}

/* 열릴 때 연출 (2026-09-14 CEO 지시): 팝업판이 작게 나타나 살짝 크게 튀었다가 제자리 크기로 '삐용' 커진다. 딤은 함께 서서히.
   #MYI_root 가 display none -> block 으로 바뀔 때마다 애니메이션이 처음부터 다시 돈다 (열 때마다 재생) */
html.h5p #MYI_panel
{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
}
@-webkit-keyframes myi_pop_in
{
    0%   { opacity: 0; -webkit-transform: scale(0.4); }
    55%  { opacity: 1; -webkit-transform: scale(1.06); }
    78%  { -webkit-transform: scale(0.98); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes myi_pop_in
{
    0%   { opacity: 0; transform: scale(0.4); }
    55%  { opacity: 1; transform: scale(1.06); }
    78%  { transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}
/* 닫힐 때 연출 (2026-09-14 CEO 지시): 열릴 때와 반대로 살짝 커졌다가 작아지며 사라진다 (S_MYINFO.close 가 MYI_closing 을 붙인다, 길이 MYI_CLOSE_MS) */
html.h5p #MYI_root.MYI_closing #MYI_panel
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
@-webkit-keyframes myi_pop_out
{
    0%   { opacity: 1; -webkit-transform: scale(1); }
    25%  { opacity: 1; -webkit-transform: scale(1.04); }
    100% { opacity: 0; -webkit-transform: scale(0.4); }
}
@keyframes myi_pop_out
{
    0%   { opacity: 1; transform: scale(1); }
    25%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(0.4); }
}
@-webkit-keyframes myi_dim_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes myi_dim_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============ 팝업판 (2026-09-14 CEO 가이드 '맞고 프로필 팝업', 1080x2340 실측) ============ */
/* 9조각 그림(popup_bg_*): 모서리 50 / 위 조각 높이 104(노란 머리띠) / 아래 조각 높이 49. 가운데·변 조각은 늘려 채운다.
   가이드 자리: 가로 40~1040, 위 283 ~ 아래 여백 240 (화면 높이가 달라도 아래 여백 유지). 안쪽 좌표는 모두 이 판 기준.
   아래 여백은 부제(2026-09-18) 두 줄이 들어가며 294 -> 240 으로 줄였다.
   2026-09-28 CEO 지시로 '보유 정보'/'이용한도' 부제와 티켓·손실한도 줄이 늘면서 위 283 -> 240, 아래 여백 240 -> 160 (판 높이 1817 -> 1940) */
html.h5p #MYI_panel
{
    position: absolute;
    left: 40px;
    /* 2026-10-10 CEO 지적: 화면 세로 가운데가 아니었다 (위 240 / 아래 416 으로 치우쳐 있었다).
       화면 높이가 기기마다 달라 숫자로 잡을 수 없으므로 판 높이의 절반만큼 끌어올려 가운데에 맞춘다 */
    top: 50%;
    margin-top: -842px;		/* 판 높이(1684) 의 절반 - 높이를 바꾸면 이 값도 같이 바꾼다 */
    width: 1000px;
    /* 2026-09-29 CEO 지시로 내용을 두 칸으로 나눠 판이 짧아졌다 (예전 화면높이-400).
       2026-10-06 칸 줄을 132 내리면서 그만큼 판도 늘렸다 (1600 -> 1780).
       2026-10-09 아이디 줄을 빼면서 96 줄였다 (1780 -> 1684) */
    height: 1684px;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    /* 이음매 검은 줄 방지 (2026-09-14 CEO 지적 - 폰은 한 줄, 태블릿은 상하좌우 모두 보였다):
       화면 배율 때문에 조각 경계가 소수 픽셀에 걸리면 두 조각 사이가 반쯤 비어 뒤 딤이 비쳤다.
       늘리는 조각(변/가운데)을 옆 조각 밑으로 2 씩 더 깔아 틈이 생겨도 같은 색이 보이게 한다 (위에 그리는 모서리/변 조각은 그대로) */
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

/* 머리띠 오른쪽 X (popup_xbt 57x56, 가이드 940,305 -> 판 안 900,22). 누르는 곳은 머리띠 높이 전체 */
html.h5p #MYI_close
{
    position: absolute;
    left: 880px;
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 5;
}

/* '내 정보' 타이틀: 노란 머리띠 가운데 (2026-09-14 CEO 지시 - 머리띠 아래로 내렸다가 공간이 모자라 다시 올림). 누르기는 통과.
   노란 부분(y 4~94)의 세로 가운데 = X 버튼 가운데(50), 글자색은 X 버튼 색(#946d06) */
html.h5p #MYI_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 1000px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}

/* ---- 윗단 (모두 판 가운데 x 500 기준) ----
   2026-10-06 CEO 지시로 그림을 200 으로 키우고 줄 사이 여백을 넣었다 (예전엔 14~20 이라 다닥다닥 붙어 있었다).
   노란 띠 아래끝 94 -44- 프로필 그림(지름 200, 138~338) -13- 변경하기 버튼(351~425)
   -53- 레벨 + 경험치 바(478~546) -28- 닉네임 띠(574~644) -28- 아이디 띠(672~740) -120- 칸 줄(860).
   레벨/닉네임/아이디 세 줄은 라벨(오른끝 225) + 띠(245~903) 로 왼쪽선을 같이 맞춘다 (2026-10-06 CEO 지시) */
/* '변경하기'(캐릭터 변경): 복사 버튼과 같은 초록 버튼(.MYI_green_btn 174x74)을 프로필 그림 아래 가운데(500 - 87) */
html.h5p #MYI_char_btn { left: 413px; top: 351px; }

/* 레벨 알약 (profile_levelbox 151x40) 을 경험치 바 위에 얹는다 - 메인화면과 같은 모양 (2026-10-06 CEO 지시).
   2026-10-06 CEO 지시로 닉네임/아이디 띄와 같은 왼쪽선(245)에 맞추고 오른끝도 903 으로 맞춘다 */
html.h5p #MYI_level
{
    position: absolute;
    left: 232px;
    top: 478px;
    z-index: 2;
    width: 220px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    font-size: 40px;	/* 2026-10-06 CEO 지시로 닉네임 값(40)과 같게 */
    font-weight: 800;
    color: #ffffff;
    /* 2026-10-06 CEO 지시: 알약 그림(profile_levelbox)은 #43854d 단색 한 색뿐이라
       그림 대신 둥근 박스로 그린다. 크기를 어떻게 바꿔도 둥근 끝이 눌리지 않는다.
       메인화면 알약(#MMP_level)은 원본 크기 그대로라 그림을 계속 쓴다 */
    background: #43854d;
    /* 2026-10-06 CEO 지시: 둥근 형태로 보이게 당연히 큰 값을 준다 (높이의 절반에서 멈춰 완전한 알약이 된다) */
    border-radius: 500px;
    white-space: nowrap;
}

/* 경험치 바: 메인화면 프로필 카드와 똑같이 레벨 알약이 바 위에 얹힌 모양 (2026-10-06 CEO 지시).
   알약(245~465) 과 바(412~903) 이 53 겹친다. 수치는 알약에 가리지 않는 칸 가운데에 쓴다.
   줄 높이는 2026-10-06 CEO 지시로 아래 띠들과 같은 68 로 키웠다 (알약 그림도 비율 그대로 257x68) */
html.h5p #MYI_expbar
{
    position: absolute;
    left: 399px;
    /* 알약(40)보다 4 얇게 해서 알약이 바 위에 얹힌 느낌을 준다 - 메인화면과 같다 */
    top: 481px;
    width: 491px;
    height: 62px;
    border-radius: 31px;
    background: #ffffff;
    /* 흰 바탕이 판 바탕과 구분이 안 가 테두리 선은 예전대로 둔다 (2026-10-06 CEO 지시) */
    box-shadow: inset 0 0 0 2px #e3cfa3;
    box-sizing: border-box;
    /* 초록 막대가 알약 밑에서 그대로 이어져 나오게 앞에서 시작하고, 위아래 4 는 흰 테두리 몫이다 */
    padding: 7px 0 7px 10px;
    overflow: hidden;
}
html.h5p #MYI_expfill
{
    display: block;
    width: 0;         /* 경험치 0 이면 초록 막대를 그리지 않는다 (2026-09-14 CEO 지시 - 최소 막대가 두껍고 모양이 어색했다) */
    height: 100%;
    min-width: 102px;  /* 조금 찼을 때도 알약 밖으로 나오게 (앞 25 는 알약에 가린다, 메인화면과 같다) */
    /* 왼쪽은 각지게 - 알약 밑에서 그대로 이어져 나온다. 오른쪽만 둥글게 */
    border-radius: 0 24px 24px 0;
    background: #38c34a;
}
html.h5p #MYI_exptxt
{
    position: absolute;
    /* 알약에 가리는 왼쪽 31 을 빼고 보이는 칸 가운데에 쓴다 */
    left: 53px;
    right: 0;
    top: 0;
    width: auto;
    height: 62px;
    line-height: 62px;
    text-align: center;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    font-weight: 800;
    color: #3b2a10;
    text-shadow: -2px 0 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, 0 2px 0 #ffffff;
    white-space: nowrap;
}

/* 프로필 그림: 머리띠 아래 판 가운데 (지름 200) */
html.h5p #MYI_avatar
{
    position: absolute;
    left: 400px;
    top: 138px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 흰 테두리가 크림색 판 위에서 구분이 안 가, 그림 바깥으로 빛을 두른다 (2026-10-06 CEO 지시).
       빛깔은 '닉네임/아이디' 글자색(#8a6536) 과 같은 톤 */
    box-shadow: 0 0 9px 2px rgba(138, 101, 54, 0.42), 0 0 18px 4px rgba(138, 101, 54, 0.15);
    cursor: pointer;
}
/* 프로필 그림(profile_icon 240x240)에는 흰 테두리가 이미 그려져 있어 CSS 테두리를 따로 두르지 않는다
   (2026-09-14 CEO 지적 - 흰 테두리 6 을 한 번 더 둘러 메인화면보다 두 배 가까이 굵어 보였다). 메인화면과 같은 그림 그대로 */
html.h5p #MYI_avatar img
{
    display: block;
    width: 100%;
    height: 100%;
}

/* 닉네임 / 아이디 글자: 띠 밖 왼쪽 (2026-09-14 CEO 지시 - 띠 안에는 이름+연필, 아이디+복사만 둔다) */
html.h5p .MYI_hlabel
{
    position: absolute;
    /* 글자 오른끝을 띄(232)와 20 띄운 212 에 둔다.
       2026-10-06 CEO 지시로 위 세 줄 묶음을 13 왼쪽으로 옮겨 판 양쪽 여백을 맞추었다 (왼 111 / 오른 110) */
    left: 72px;
    width: 140px;
    text-align: right;
    height: 70px;
    line-height: 70px;
    font-size: 38px;
    font-weight: 800;
    color: #8a6536;
    white-space: nowrap;
}
html.h5p #MYI_lv_lbl
{
    /* 두 글자라 자간으로 세 글자 폭을 채운다.
       왼쪽끝까지 닉네임/아이디와 맞추려면 자간이 글자 한 칸(34.6px)과 같아야 한다.
       NanumSquareRound 한글은 한 칸이 0.91em 이라 38px 글자에서 34.6px 다 (예전 38 은 조금 넓어 왼쪽으로 샐다).
       칸 오른끝(260)은 뒤따르는 자간을 감안해 225 + 34.6 으로 잡는다 (2026-10-06 CEO 지적, 브라우저에서 쟰다) */
    top: 477px;
    left: 72px;
    width: 175px;
    text-align: right;
    letter-spacing: 34.6px;
}	/* 레벨 줄(478~518) 세로 가운데 */
html.h5p #MYI_name_lbl { top: 574px; }
/* 2026-10-09 CEO 지시: 아이디 줄은 보여 주지 않는다 (요소는 남겨 둔다 - 복사 기능이 이 값을 읽는다) */
html.h5p #MYI_id_lbl,
html.h5p #MYI_idbar { display: none !important; }

/* 닉네임 띠 (profile_namebt 658x70, 연필 그림 포함). 띠 자리(245~903)와 그림 크기가 같다.
   예전에는 그림이 806 이라 두 조각(왼쪽 끝 40 + 오른쪽 나머지)으로 붙였고 이음매가 보였는데,
   2026-09-18 CEO 가 폭에 맞춘 그림을 다시 줘서 한 장으로 깐다. 띠를 누르면 이름 변경 */
html.h5p #MYI_namebar
{
    position: absolute;
    left: 232px;
    top: 574px;
    width: 658px;
    height: 70px;
    line-height: 70px;
    padding: 0 190px 0 35px;	/* 오른쪽 '변경' 버튼(718~892) 자리를 비운다 (2026-10-09) */
    box-sizing: border-box;
    background: url(../image/1_mainmenu/h5p/profile/profile_namebt.png?v=2) no-repeat 0 0;
    background-size: 658px 70px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
html.h5p #MYI_name
{
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
}

/* 아이디 띠: 옅은 노란 알약 + 오른쪽 복사 버튼 자리 비움. 닉네임 띠와 같이 245~903 으로 줄였다. 띠를 눌러도 복사 */
html.h5p #MYI_idbar
{
    position: absolute;
    left: 232px;
    top: 672px;
    width: 658px;
    height: 68px;
    line-height: 68px;
    /* 글자 왼쪽은 닉네임 띄와 같은 35 (2026-10-06 CEO 지시).
       둥금은 예전처럼 완전한 알약 - 한때 28 로 줄였다가 끝이 뭉툭해져 되돌렸다 (CEO 지적) */
    padding: 0 190px 0 35px;
    /* 위 닉네임 띄와 같은 색 (2026-10-06 CEO 지시).
       검정(#2d2a2a)은 크림/갈색 판에서 혼자 튂어 짙은 갈색으로 바꿨다.
       닉네임 띄 그림(profile_namebt.png)의 바탕도 같은 색으로 다시 칠했다 - 둘은 항상 같아야 한다 */
    /* 연노랑 띄로 되돌렸다 (2026-10-06 CEO 지시 - 원래 색이 낫다) */
    background: #fde9a8;
    border-radius: 500px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
html.h5p #MYI_userid
{
    font-size: 38px;
    font-weight: 800;
    color: #8b3514;	/* 연노랑 띄에 맞춘 갈색 글자 */
}

/* 초록 버튼 (profile_bt 174x74): 복사 / 한도설정 */
html.h5p .MYI_green_btn
{
    position: absolute;
    width: 174px;
    height: 74px;
    line-height: 70px;
    text-align: center;
    /* 2026-10-09 CEO 지시: '변경'/'복사'/'설정' 세 버튼 글자를 조금씩 키운다 (36 -> 40) */
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -2px 0 0 #2f5a22, 2px 0 0 #2f5a22, 0 -2px 0 #2f5a22, 0 2px 0 #2f5a22, -1.414px -1.414px 0 #2f5a22, -1.414px 1.414px 0 #2f5a22, 1.414px -1.414px 0 #2f5a22, 1.414px 1.414px 0 #2f5a22;
    background: url(../image/1_mainmenu/h5p/profile/profile_bt.png) no-repeat 0 0;
    background-size: 174px 74px;
    white-space: nowrap;
    cursor: pointer;
}
/* 닉네임 변경: 노란 버튼 그림 (174x74). 2026-10-09 CEO 지시로 아이디 줄에서 닉네임 띠(574~644) 오른쪽으로 올렸다 */
html.h5p #MYI_name_btn
{
    left: 718px;
    top: 574px;	/* 띄(574~644) 가운데는 572 이지만 그림이 위로 치우쳐 보여 2 내렸다 (2026-10-09 CEO 지시) */
    background-image: url(../image/1_mainmenu/h5p/profile/profile_yellow_bt.png);
    background-size: 174px 74px;
    /* 2026-10-09: 설정 화면 복사 버튼과 같이 대각선까지 8방향으로 - 4방향만 주면 모서리가 빈다 */
    text-shadow: -2px 0 0 #8a4a05, 2px 0 0 #8a4a05, 0 -2px 0 #8a4a05, 0 2px 0 #8a4a05, -2px -2px 0 #8a4a05, 2px 2px 0 #8a4a05, -2px 2px 0 #8a4a05, 2px -2px 0 #8a4a05;
}
/* 한도설정: '현재 손실한도' 줄(1174~1250) 오른쪽 끝에 붙인다 (2026-09-28 CEO 지시로 줄 안으로 들어왔다) */
html.h5p #MYI_limit_btn { left: 766px; top: 1393px; }  /* 오른쪽 끝을 값 오른쪽 끝(940)에 맞춘다 */
html.h5p .MYI_green_btn:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* 구분선: 가이드 y 676 / 1122.
   판 끝까지 닿지 않게 좌우로 50 씩 여백을 둔다 (2026-09-18 CEO 지시) */
/* ---- 칸 두 개: 내 정보 / 게임 기록 (2026-09-29 CEO 지시) ---- */
html.h5p #MYI_tabs
{
    position: absolute;
    left: 50px;
    /* 2026-10-06 CEO 지시로 아이디 띄와의 틈을 두 번에 걸쳐 30 -> 120 으로 */
    /* 2026-10-09 CEO 지시: 아이디 줄(68 + 틈 28)이 없어진 만큼 96 올린다 */
    top: 764px;
    width: 900px;
    height: 112px;
}
html.h5p .MYI_tab
{
    position: absolute;
    top: 0;
    width: 442px;
    height: 112px;
    line-height: 108px;
    box-sizing: border-box;
    border-radius: 28px 28px 0 0;
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    color: #a98a5e;
    background: #e8d8b4;
    border: 3px solid #d9c49a;
    border-bottom: 0;
    cursor: pointer;
}
html.h5p #MYI_tab_info { left: 0; }
html.h5p #MYI_tab_rec  { left: 458px; }
/* 칸 이름 앞 아이콘 (2026-10-06 CEO 전달). 그림을 마스크로 써
   고른 칸과 아닌 칸의 글자색을 그대로 따라가게 한다 */
html.h5p .MYI_tab::before
{
    content: "";
    display: inline-block;
    width: 44px;
    height: 42px;
    margin-right: 14px;
    vertical-align: -7px;
    background-color: #a98a5e;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 44px 42px;
    mask-size: 44px 42px;
}
html.h5p #MYI_tab_info::before
{
    -webkit-mask-image: url(../image/1_mainmenu/h5p/profile/profile_tab_info.png);
    mask-image: url(../image/1_mainmenu/h5p/profile/profile_tab_info.png);
}
html.h5p #MYI_tab_rec::before
{
    -webkit-mask-image: url(../image/1_mainmenu/h5p/profile/profile_tab_rec.png);
    mask-image: url(../image/1_mainmenu/h5p/profile/profile_tab_rec.png);
}
html.h5p .MYI_tab.MYI_tab_on::before { background-color: #8a4b10; }
html.h5p .MYI_tab.MYI_tab_on
{
    color: #8a4b10;
    background: #fff8e8;
    border-color: #e6ce9c;
    z-index: 2;
}
/* 칸 아래 줄 하나만 긋는다 - 상자로 두르면 답답해 보인다 (2026-09-29 CEO 지적) */
html.h5p #MYI_pagebg
{
    position: absolute;
    left: 50px;
    top: 873px;	/* 2026-10-09: 칸 줄과 같이 96 올림 */
    width: 900px;
    height: 3px;
    background: #e6ce9c;
    pointer-events: none;
}
/* 칸 하나 - 안의 줄들은 예전처럼 판 기준 좌표를 그대로 쓴다.
   칸 줄을 160 내렸으니 안의 줄들도 통째로 160 내린다 (2026-10-06) */
html.h5p .MYI_page
{
    position: absolute;
    left: 0;
    top: 64px;	/* 2026-10-09: 아이디 줄이 빠진 만큼 안의 줄들을 통째로 96 올린다 (160 -> 64) */
    width: 100%;
    height: 100%;
    /* 칸은 판 전체를 덮어 위치 기준만 잡고 누르기는 받지 않는다.
       (안 막으면 위 프로필·복사·칸 버튼이 다 먹통된다 - 2026-09-29 CEO 지적) */
    pointer-events: none;
}
html.h5p .MYI_page #MYI_limit_btn
{
    pointer-events: auto;
}
html.h5p .MYI_page.MYI_page_off
{
    display: none;
}
/* 손실한도 안내 글 (2026-09-29 CEO 시안) */
html.h5p #MYI_limit_note
{
    position: absolute;
    /* 2026-10-06 CEO 지시: 한 줄로 울겨 넣으니 글자가 너무 작아졌다.
       두 줄로 나누고 36 으로 키운다 (줄바꿈은 MYI_TEXT.limit_note_lines 가 정한다) */
    left: 60px;
    top: 1486px;
    width: 880px;
    text-align: left;
    word-break: keep-all;
    font-size: 36px;
    font-weight: 700;
    line-height: 50px;
    color: #a06a2c;
    pointer-events: none;
}
/* 글 앞 느낌표 아이콘 (2026-10-06 CEO 지시) - 그림 없이 둥근 판 + 흰 느낌표로 그린다.
   글자가 가운데 정렬이라 첫 줄 앞에 붙어 같이 가운데로 모인다 */
/* 글자 두 줄을 한 덧어리로 묶어, 느낌표가 그 덧어리 왼쪽에 서게 한다 (2026-10-06 CEO 지시).
   아이콘+글자 묶음 전체가 칸 가운데에 온다 */
html.h5p #MYI_limit_note > span
{
    display: inline;
}
html.h5p #MYI_limit_note::before
{
    content: "!";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    vertical-align: middle;	/* 두 줄 전체의 가운데에 맞춘다 (2026-10-06 CEO 지적) */
    border-radius: 50%;
    background: #a06a2c;
    color: #fffcee;
    font-size: 30px;
    font-weight: 800;
    line-height: 40px;
    text-align: center;
}

/* 2026-10-06 CEO 지시: 점선 그림(profile_divider) 대신 '재화 정보' 칸 테두리와 같은 색(#e6ce9c) 얇은 실선 */
html.h5p .MYI_divider
{
    position: absolute;
    left: 50px;
    width: 900px;
    height: 2px;
    background: #e6ce9c;
}
/* 칸 안 구분선: 첫 묶음 마지막 줄 아래(1166) + 26 */
html.h5p .MYI_page .MYI_divider { top: 1204px; }	/* 2026-10-06 CEO 지시: 선 위여백도 아래와 같은 38 로 (26 -> 38) */

/* ---- 묶음 부제 (2026-09-18 CEO 지시): 점선 아래에 무슨 기록인지 크게 적는다.
   왼정렬로 줄(왼쪽 60)과 같은 선에 맞추고, 점선과 24 / 첫 줄과 12 를 띄운다 ---- */
html.h5p .MYI_subtitle
{
    position: absolute;
    left: 60px;
    width: 880px;
    height: 46px;
    line-height: 46px;
    text-align: left;
    font-size: 44px;
    font-weight: 800;
    color: #8a4b10;
    white-space: nowrap;
    pointer-events: none;
}
html.h5p #MYI_sub_hold,
html.h5p #MYI_sub_war   { top: 850px; }
/* 2026-10-06 CEO 지시: 윗여백을 '보유 정보'와 같은 38 로 (16 -> 38, 묶음 전체 22 내림) */
html.h5p #MYI_sub_limit,
html.h5p #MYI_sub_tower { top: 1244px; }

/* ---- 줄: 왼쪽 아이콘 띠(profile_*bar 411x76) 위 라벨 + 오른쪽 값 ----
   좌우 여백을 60 으로 똑같이 두어 라벨과 값이 조금 가운데로 모이게 한다 (2026-09-14 CEO 지시 - 예전 왼쪽 23 / 오른쪽 40) */
html.h5p .MYI_row
{
    position: absolute;
    left: 60px;
    width: 880px;
    height: 76px;
}
/* 첫 묶음 세 줄 (보유 정보 / 실시간 대전): 부제(850~896) 아래 10 부터, 줄 간격 92 */
html.h5p #MYI_row_gold,
html.h5p #MYI_row_record    { top: 906px; }
html.h5p #MYI_row_ruby,
html.h5p #MYI_row_max_score { top: 998px; }
html.h5p #MYI_row_ticket,
html.h5p #MYI_row_max_money { top: 1090px; }
/* 둘째 묶음 두 줄 (이용한도 / 도신 대전): 부제(1210~1256) 아래 10 부터 */
html.h5p #MYI_row_loss,
html.h5p #MYI_row_week_clear  { top: 1300px; }
html.h5p #MYI_row_limit,
html.h5p #MYI_row_total_clear { top: 1392px; }

html.h5p .MYI_bar
{
    position: absolute;
    left: 0;
    top: 0;
    /* 2026-10-06 CEO 지시: 줄마다 아이콘이 박혀 있던 띠(411) 대신
       줄 전체 폭(880)의 새 띠 한 종류를 깔고 아이콘은 따로 얹는다 */
    width: 880px;
    height: 76px;
    background: url(../image/1_mainmenu/h5p/profile/profile_rowbar.png) no-repeat 0 0;
    background-size: 100% 100%;
}
/* 줄 앞 아이콘 - 우편함 아이콘을 쓴다 (2026-10-06 CEO 지시).
   게임 기록 쪽(별/대전)은 우편함용이 없어 예전 띠 그림에서 떼어 둔 것을 쓴다.
   그림마다 가로세로 비가 달라 contain 으로 비율을 지킨다 */
html.h5p .MYI_icon
{
    position: absolute;
    left: 18px;
    top: 10px;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}
html.h5p .MYI_icon_gold   { background-image: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_gold.png); }
html.h5p .MYI_icon_ruby   { background-image: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_ruby.png); }
html.h5p .MYI_icon_ticket { background-image: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_ticket.png); }
html.h5p .MYI_icon_star   { background-image: url(../image/1_mainmenu/h5p/profile/profile_icon_star.png); }
/* 도신 대전 두 줄: 지금 내 트로피 그림 (2026-10-10 CEO 지시).
   여기 적은 것은 탑 정보를 아직 못 받았을 때 보일 1단계이고, 등급에 맞는 그림은
   S_myinfo_portrait.js 의 set_tower_trophy 가 누적 올클리어 횟수를 보고 덮어 넣는다.
   그림이 세로로 긴 편이라(138x181) 칸(56x56) 안에서 contain 으로 줄어든다 */
html.h5p .MYI_icon_trophy { background-image: url(../image/17_storymode/h5p/trophy_fit1.png); }
html.h5p .MYI_icon_vs     { background-image: url(../image/1_mainmenu/h5p/profile/profile_icon_vs.png); }

html.h5p .MYI_label
{
    position: absolute;
    left: 88px;	/* 아이콘(18~74) 뒤 (2026-10-06) */
    top: 0;
    line-height: 76px;
    font-size: 38px;
    font-weight: 800;
    color: #3b2a10;
    white-space: nowrap;
}

html.h5p .MYI_value
{
    position: absolute;
    right: 32px;	/* 띄가 줄 전체로 넓어져 띄 안쪽에 둔다 (2026-10-06) */
    top: 0;
    max-width: 500px;
    line-height: 76px;
    text-align: right;
    font-size: 44px;
    font-weight: 800;
    color: #8b3514;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 총 전적: 'N승 N무 N패' 한 줄 (2026-09-14 CEO 지시 - 'N전' 줄은 뺐다). 다른 줄 값과 같은 모양 */

/* 현재 손실한도 값: 같은 줄 오른쪽 끝에 한도설정 버튼(174)이 있어 그만큼 왼쪽에서 끝낸다 (2026-09-28 CEO 지시) */
html.h5p #MYI_row_limit .MYI_value
{
    right: 216px;	/* 버튼 폭 174 + 사이 42 */
    max-width: 300px;
}

/* ============ 이름 변경 입력창 ============ */
/* TV용 한글 입력기(KR_INPUT)가 없는 H5 빌드라 단말 기본 키보드를 쓴다 */
html.h5p #MYI_nameinput
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 20;
}
/* 딤 80%: 1080 칸 밖(태블릿 좌우)까지 덮는다. 뒤 내정보 딤이 서브 배경으로 바뀌어 칸 밖이 밝게 남았다 (2026-09-14).
   넘치는 부분은 div_body 가 잘라낸다 (랭킹 딤과 같은 방식) */
html.h5p #MYI_nameinput::before
{
    content: "";
    position: absolute;
    left: -4000px;
    top: 0;
    width: -webkit-calc(100% + 8000px);
    width: calc(100% + 8000px);
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

/* 판: 안내 팝업(h5_portrait_confirm.css)과 같은 노란 머리띠 크림색 9조각 판 (2026-09-18 CEO 지시).
   세로 가운데가 아니라 위쪽(520)에 두어 휴대폰 키패드가 올라와도 가려지지 않게 한다 */
html.h5p #MYI_ni_panel
{
    position: absolute;
    left: 70px;
    top: 520px;
    width: 940px;
    padding: 104px 60px 64px 60px;
    box-sizing: border-box;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: myi_pop_in 0.22s ease-out both;
    animation: myi_pop_in 0.22s ease-out both;
}
html.h5p #MYI_nameinput.MYI_ni_closing #MYI_ni_panel
{
    -webkit-animation: myi_pop_out 0.23s ease-in both;
    animation: myi_pop_out 0.23s ease-in both;
}
html.h5p #MYI_nameinput.MYI_ni_closing::before
{
    -webkit-animation: h5p_dim_fade_out 0.23s ease-in both;
    animation: h5p_dim_fade_out 0.23s ease-in both;
}

/* 오른쪽 위 닫기 X (안내 팝업과 같은 그림/자리) */
html.h5p #MYI_ni_close
{
    position: absolute;
    left: 820px;
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 5;
}

/* 제목: 노란 머리띠 가운데 (안내 팝업과 같은 자리/색) */
html.h5p #MYI_ni_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 940px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
    white-space: nowrap;
    pointer-events: none;
}

/* 글자 편집 div (2026-09-14 - <input> 이면 크롬 자동완성 막대가 키패드 위에 떴다). 한 줄로만, 넘치는 글자는 칸 안에서 잘라 보인다 */
html.h5p #MYI_ni_input
{
    display: block;
    width: 100%;
    height: 108px;
    line-height: 100px;
    margin: 24px 0 20px 0;
    padding: 0 20px;
    font-size: 44px;
    font-family: inherit;
    color: #2a2a2a;
    text-align: center;   /* 최대 8자라 가운데가 보기 좋다 (2026-09-18 CEO 지시) */
    background: #ffffff;
    border: 4px solid #7a5a32;
    border-radius: 14px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    cursor: text;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-user-modify: read-write-plaintext-only;
}

html.h5p #MYI_ni_cost
{
    font-size: 36px;
    font-weight: 700;
    color: #882000;
    text-align: center;
}

html.h5p #MYI_ni_caution
{
    margin-top: 16px;
    font-size: 36px;	/* 2026-09-22 글자 크기 점검: 36 이상 (CEO 지시) */
    line-height: 48px;
    color: #6a5a48;
    text-align: center;
}

html.h5p #MYI_ni_btns
{
    margin-top: 48px;
    text-align: center;
    font-size: 0;
}

/* 버튼: 안내 팝업과 같은 그림 버튼 (337x104 원본 크기) - 확인은 초록, 취소는 회색 */
html.h5p #MYI_ni_cancel,
html.h5p #MYI_ni_ok
{
    display: inline-block;
    width: 337px;
    height: 104px;
    margin: 0 12px;
    line-height: 100px;
    text-align: center;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 337px 104px;
    box-sizing: border-box;
    cursor: pointer;
}

html.h5p #MYI_ni_cancel
{
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2);
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a;
}

html.h5p #MYI_ni_ok
{
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png);
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a;
}

/* ==== css/h5_portrait_confirm.css ==== */
/* 파일명: h5_portrait_confirm.css
   하는일: 세로모드 공용 확인 팝업(h5_portrait_confirm.js) 배치. 기준 캔버스 1080 x 2340.
   스코프: html.h5p 일 때만 적용. 판 그림은 내정보 팝업과 같은 9조각 크림색 그림을 쓴다 */

html.h5p #H5PC_root
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    top: 0;
    width: 1080px;
    height: 100%;
    display: none;
    z-index: 200;   /* 내정보(120)/금고(80) 보다 위 - 어느 화면 위에도 뜬다 */
    font-family: 'NanumSquareRound', 'Malgun Gothic', sans-serif;
}

/* 어두운 딤: 중앙 칸 밖(태블릿 좌우 여백)까지 덮고, 뒤 화면이 눌리지 않게 막는다.
   내정보 팝업과 같이 열 때 서서히 깔리고 닫을 때 서서히 걷힌다 (2026-09-18 CEO 지시) */
html.h5p #H5PC_dim
{
    position: absolute;
    left: -100%;
    top: 0;
    width: 300%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-animation: h5pc_dim_in 0.16s ease-out both;
    animation: h5pc_dim_in 0.16s ease-out both;
}
html.h5p #H5PC_root.H5PC_closing #H5PC_dim
{
    -webkit-animation: h5p_dim_fade_out 0.23s ease-in both;
    animation: h5p_dim_fade_out 0.23s ease-in both;
}
@-webkit-keyframes h5pc_dim_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes h5pc_dim_in
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 판: 화면 세로 가운데. 내용(설명 줄 수)에 따라 높이가 늘어난다 */
html.h5p #H5PC_panel
{
    position: absolute;
    left: 70px;
    top: 50%;
    width: 940px;
    min-height: 560px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 104px 60px 70px 60px;   /* 위는 노란 머리띠(104) 아래부터, 아래는 버튼 밑 여백 */
    box-sizing: border-box;
    background:
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_left.png) no-repeat 0 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top_right.png) no-repeat 100% 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_left.png) no-repeat 0 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom_right.png) no-repeat 100% 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_top.png) no-repeat 48px 0,
        url(../image/1_mainmenu/h5p/profile/popup_bg_bottom.png) no-repeat 48px 100%,
        url(../image/1_mainmenu/h5p/profile/popup_bg_left.png) no-repeat 0 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_right.png) no-repeat 100% 102px,
        url(../image/1_mainmenu/h5p/profile/popup_bg_center.png) no-repeat 48px 102px;
    background-size:
        50px 104px, 50px 104px, 50px 49px, 50px 49px,
        calc(100% - 96px) 104px, calc(100% - 96px) 49px,
        50px calc(100% - 149px), 50px calc(100% - 149px),
        calc(100% - 96px) calc(100% - 149px);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    /* 열고 닫는 연출은 내정보 팝업과 같다 (2026-09-18 CEO 지시): 작게 나타나 살짝 튀었다가 제자리로 */
    -webkit-animation: h5pc_pop_in 0.22s ease-out both;
    animation: h5pc_pop_in 0.22s ease-out both;
}
html.h5p #H5PC_root.H5PC_closing #H5PC_panel
{
    -webkit-animation: h5pc_pop_out 0.23s ease-in both;
    animation: h5pc_pop_out 0.23s ease-in both;
}
@-webkit-keyframes h5pc_pop_in
{
    0%   { opacity: 0; -webkit-transform: translateY(-50%) scale(0.4); }
    55%  { opacity: 1; -webkit-transform: translateY(-50%) scale(1.06); }
    78%  { -webkit-transform: translateY(-50%) scale(0.98); }
    100% { opacity: 1; -webkit-transform: translateY(-50%) scale(1); }
}
@keyframes h5pc_pop_in
{
    0%   { opacity: 0; transform: translateY(-50%) scale(0.4); }
    55%  { opacity: 1; transform: translateY(-50%) scale(1.06); }
    78%  { transform: translateY(-50%) scale(0.98); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@-webkit-keyframes h5pc_pop_out
{
    0%   { opacity: 1; -webkit-transform: translateY(-50%) scale(1); }
    25%  { opacity: 1; -webkit-transform: translateY(-50%) scale(1.04); }
    100% { opacity: 0; -webkit-transform: translateY(-50%) scale(0.4); }
}
@keyframes h5pc_pop_out
{
    0%   { opacity: 1; transform: translateY(-50%) scale(1); }
    25%  { opacity: 1; transform: translateY(-50%) scale(1.04); }
    100% { opacity: 0; transform: translateY(-50%) scale(0.4); }
}

/* 오른쪽 위 닫기 X (내정보 팝업과 같은 그림 popup_xbt 57x56). 누르는 곳은 머리띠 높이 전체 */
html.h5p #H5PC_close
{
    position: absolute;
    left: 820px;
    top: 0;
    width: 120px;
    height: 104px;
    background: url(../image/1_mainmenu/h5p/profile/popup_xbt.png) no-repeat 20px 22px;
    background-size: 57px 56px;
    cursor: pointer;
    z-index: 5;
}

/* 제목: 노란 머리띠 가운데 (내정보 팝업과 같은 자리/색) */
html.h5p #H5PC_title
{
    position: absolute;
    left: 0;
    top: 4px;
    width: 940px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 58px;	/* 노란 띠 팝업 타이틀 58 로 통일 (2026-09-22 CEO 지시) */
    font-weight: 800;
    color: #946d06;
    white-space: nowrap;
    pointer-events: none;
}

/* 설명: 가운데 정렬, 여러 줄 (2026-09-18 CEO 지시로 40 -> 44 로 조금 키움) */
html.h5p #H5PC_desc
{
    padding: 76px 0 88px 0;   /* 머리띠와 글, 글과 버튼 사이를 넉넉히 (2026-09-18 CEO 지시 - 위로 붙어 보였다) */
    text-align: center;
    font-size: 44px;
    line-height: 66px;
    font-weight: 700;
    color: #3b2a10;
}
html.h5p #H5PC_desc b
{
    font-weight: 800;
    color: #c2570d;   /* 금액 강조 */
}
/* 금고 패키지 안내의 '남은 기간' 칸: 위아래 여백을 두고 둥근 단색 칸으로 구분한다 (2026-09-23 CEO 지시) */
html.h5p .SAFE_pkgline
{
    display: block;
    margin: 34px 0 30px 0;
    text-align: center;
}
html.h5p .SAFE_pkgbox
{
    display: inline-block;
    padding: 6px 44px;
    border-radius: 40px;
    /* 어두운 칸은 글자가 잘 안 보인다는 CEO 지적 (2026-09-23) - 연한 노란 칸에 진한 갈색 글자로 */
    background: #ffeaa8;
    color: #5a3c16;
    font-size: 42px;
    line-height: 68px;
    white-space: nowrap;
}
html.h5p .SAFE_pkgbox b
{
    color: #c2570d;   /* 남은 날짜 강조 */
}

/* 버튼 두 개 (글자 사이 빈칸이 생기지 않게 font-size 0) */
html.h5p #H5PC_btns
{
    text-align: center;
    font-size: 0;
}
/* 버튼 그림은 디자이너가 준 팝업 전용 그림(337x104 원본 크기) 을 그대로 쓴다 (2026-09-18 CEO 지시).
   실행 쪽은 초록(popup_green_bt), 다른 쪽은 회색(popup_gray_bt). 글자는 흰 글자 + 버튼 색 테두리 */
html.h5p .H5PC_btn
{
    position: relative;
    display: inline-block;
    width: 337px;
    height: 104px;
    margin: 0 12px;
    box-sizing: border-box;
    line-height: 100px;
    text-align: center;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 337px 104px;
    cursor: pointer;
}
html.h5p .H5PC_btn_yes
{
    background-image: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png);
    text-shadow: -2px 0 0 #1f4a1a, 2px 0 0 #1f4a1a, 0 -2px 0 #1f4a1a, 0 2px 0 #1f4a1a, -1.414px -1.414px 0 #1f4a1a, -1.414px 1.414px 0 #1f4a1a, 1.414px -1.414px 0 #1f4a1a, 1.414px 1.414px 0 #1f4a1a;
}
html.h5p .H5PC_btn_no
{
    background-image: url(../image/1_mainmenu/h5p/profile/popup_gray_bt.png?v=2);
    text-shadow: -2px 0 0 #35383a, 2px 0 0 #35383a, 0 -2px 0 #35383a, 0 2px 0 #35383a, -1.414px -1.414px 0 #35383a, -1.414px 1.414px 0 #35383a, 1.414px -1.414px 0 #35383a, 1.414px 1.414px 0 #35383a;
}
html.h5p .H5PC_press
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* ==== css/h5_portrait_towerclear.css ==== */
/* 파일명: h5_portrait_towerclear.css
   하는일: 도신의 탑 층 클리어 보상 화면(세로) - 2026-10-06 CEO 시안.
   원본 팝업은 감추고 이 판을 대신 그린다. 글자는 그림 대신 전부 텍스트다 (CEO 지시).
   자리는 시안(1080x2340)을 재서 넣었다: 이름 배지 508 / 흰 판 960~1573 / 노란 띠 1512 / 확인 1630.
   2026-10-16 CEO 지시로 가로 판에서도 같은 화면을 쓴다 - #SMORP_* 규칙에서 html.h5p 범위를 떼고,
   맨 아래에서 가로만 #SMORP_root 를 통째로 줄여 판(1280 x 720) 가운데에 놓는다 */

/* 새 판이 켜져 있는 동안 원본 팝업 조각을 모두 감춘다 */
html.h5p_smor_on #SR_popup,
html.h5p_smor_on #SR_coin_ani,
html.h5p_smor_on #SR_popup_title2,
html.h5p_smor_on #SR_popup_prob,
html.h5p_smor_on #SR_popup_allclear,
html.h5p_smor_on #SR_allclear_1,
html.h5p_smor_on #SR_allclear_2,
html.h5l_smor_on #SR_popup,
html.h5l_smor_on #SR_coin_ani,
html.h5l_smor_on #SR_popup_title2,
html.h5l_smor_on #SR_popup_prob,
html.h5l_smor_on #SR_popup_allclear,
html.h5l_smor_on #SR_allclear_1,
html.h5l_smor_on #SR_allclear_2
{
    display: none !important;
}

/* 원본은 뒤를 새까리게 덮는다 - 시안처럼 뒤 화면이 비치게 반투명으로 (2026-10-06).
   2026-10-10 CEO 지적: 1080 보다 넓은 기기에서 딤이 1080 안쪽에만 깔렸다.
   룰렛 결과 딤과 같은 방법으로 좌우 여분(--h5p_extra_x)만큼 넓히고, 1080 상자의 자르기를 푼다 */
html.h5p.h5p_smor_on #S_STORYMODE_REWARD_div
{
    left: -webkit-calc(0px - var(--h5p_extra_x, 0px)) !important;
    left: calc(0px - var(--h5p_extra_x, 0px)) !important;
    width: -webkit-calc(1080px + var(--h5p_extra_x, 0px) * 2) !important;
    width: calc(1080px + var(--h5p_extra_x, 0px) * 2) !important;
    background: rgba(0, 0, 0, 0.55) !important;
}
html.h5p.h5p_smor_on #h5p_legacy
{
    overflow: visible;
}

#SMORP_root
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    top: 0;
    width: 1080px;
    height: 100%;
    z-index: 10;
    color: #3b2a12;
    font-weight: 800;
    text-align: center;
    /* 2026-10-10: 아래 판 마지막 그림이 1080 밖으로 넓어지므로 자르지 않는다 */
    overflow: visible;
}

/* ---- 1) 층 / 상대 이름 도장 ---- */
#SMORP_floor
{
    position: absolute;
    left: 0;
    right: 0;
    top: 424px;
    height: 62px;
    font-size: 52px;
    line-height: 62px;
    color: #ffffff;
    text-shadow: -3px 0 0 #4a2a0e, 3px 0 0 #4a2a0e, 0 -3px 0 #4a2a0e, 0 3px 0 #4a2a0e,
                 -2px -2px 0 #4a2a0e, 2px -2px 0 #4a2a0e, -2px 2px 0 #4a2a0e, 2px 2px 0 #4a2a0e;
    opacity: 0;
}
#SMORP_name
{
    position: absolute;
    left: 50%;
    margin-left: -161.5px;
    top: 508px;
    width: 323px;
    height: 82px;
    background: url(../image/17_storymode/h5p/clear/tower_clear_namebg.png) 0 0/323px 82px no-repeat;
    opacity: 0;
}
#SMORP_name span
{
    display: block;
    /* 2026-10-09 CEO 지적: 배지 그림이 좌우 대칭인 알약으로 바뀌었는데
       예전 꽃 장식 자리(왼쪽 46)가 남아 글자가 오른쪽으로 밀려 있었다 - 가운데로 둔다 */
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
    height: 82px;
    line-height: 80px;
    font-size: 44px;
    color: #ffffff;
    text-shadow: 0 3px 0 #8d1c16;
    white-space: nowrap;
    overflow: hidden;
}

/* ---- 2) 클리어! 글자 + 뒤에서 도는 빛줄기 ---- */
#SMORP_rays
{
    position: absolute;
    left: 50%;
    margin-left: -350px;
    top: 400px;
    width: 700px;
    height: 611px;
    background: url(../image/2_game/h5p/result/result_win_bg.png) 0 0/700px 611px no-repeat;
    opacity: 0;
    pointer-events: none;
}
#SMORP_title
{
    position: absolute;
    left: 0;
    right: 0;
    top: 620px;
    height: 150px;
    font-size: 132px;
    line-height: 150px;
    font-weight: 900;
    letter-spacing: -2px;
    color: #ffd24a;
    /* 2026-10-10 CEO 지시: 갈색 테두리는 그대로 두고, 그 아래로 한 번 더 깔려 있던
       그림자(0 10px 0 #5a2a04)만 뺀다 - 테두리와 겹쳐 글자가 뭉개져 보였다 */
    text-shadow: -6px 0 0 #7a3a06, 6px 0 0 #7a3a06, 0 -6px 0 #7a3a06, 0 6px 0 #7a3a06,
                 -4px -4px 0 #7a3a06, 4px -4px 0 #7a3a06, -4px 4px 0 #7a3a06, 4px 4px 0 #7a3a06;
    opacity: 0;
}
#SMORP_stars
{
    position: absolute;
    left: 50%;
    top: 695px;
    width: 0;
    height: 0;
    pointer-events: none;
}
.smorp_star
{
    position: absolute;
    left: -23.5px;
    top: -22.5px;
    width: 47px;
    height: 45px;
    opacity: 0;
    /* 2026-10-20 CEO 지시: 인게임 결과화면 승리 이펙트처럼 계속 뿌린다 */
    -webkit-animation: smorp_star_fly 1.0s ease-out infinite both;
    animation: smorp_star_fly 1.0s ease-out infinite both;
}

/* ---- 4) 아래 흰 판 ---- */
#SMORP_panel
{
    position: absolute;
    left: 0;
    top: 960px;
    width: 1080px;
    height: 613px;
    opacity: 0;
}
#SMORP_panel_bg
{
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 613px;
    background: 0 0/1080px 613px no-repeat;
}
/* 마지막 장(bg3)만 화면 끝까지 (2026-10-10 CEO 지시 - 단색이라 가로로 늘려도 된다).
   붙이고 떼는 것은 S_storymode_reward_portrait.js 의 set_bg_later */
#SMORP_panel_bg.smorp_bg_wide
{
    left: -webkit-calc(0px - var(--h5p_extra_x, 0px));
    left: calc(0px - var(--h5p_extra_x, 0px));
    width: -webkit-calc(1080px + var(--h5p_extra_x, 0px) * 2);
    width: calc(1080px + var(--h5p_extra_x, 0px) * 2);
    background-size: 100% 613px;
}
/* 판 안쪽 무늬 (반투명) */
#SMORP_panel::after
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 613px;
    background: url(../image/17_storymode/h5p/clear/tower_clear_pattern.png) 0 0/1080px 639px no-repeat;
    pointer-events: none;
}

/* 첫 줄: 확정 보상 (칸 수가 1~3 으로 달라져도 가운데로 모인다) */
#SMORP_row1
{
    position: absolute;
    left: 0;
    right: 0;
    top: 36px;		/* 2026-10-09 CEO 지시: 보너스 줄을 올리려고 첫 줄도 10 당겼다 */
    height: 250px;
    z-index: 2;		/* 보너스 상자가 보상 글자를 덮지 않게 (CEO 지적) */
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
/* 2026-10-10 CEO 지시: 확정 보상도 보너스 상자(tower_clear_bonusbox 207x207)에 담는다 -
   레벨업 보상이 눈에 잘 안 들어온다고 하여, 아래 보너스 칸과 같은 모양으로 맞춘다 */
.smorp_item
{
    width: 207px;
    height: 207px;
    background: url(../image/17_storymode/h5p/clear/tower_clear_bonusbox.png) 0 0/207px 207px no-repeat;
    opacity: 0;
    -webkit-animation: smorp_drop 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) both;
    animation: smorp_drop 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) both;
}
/* 상자 안: 보너스 상자와 같은 자리·같은 크기 */
.smorp_item i
{
    display: block;
    margin: 24px auto 0;
    width: 100px;
    height: 96px;
    background: 50% 50%/contain no-repeat;
}
/* 금화 더미는 가로로 넓은 그림이라 조금 넓게 (높이는 같다) */
.smorp_item.smorp_gold i
{
    width: 134px;
    height: 96px;
}
.smorp_item b
{
    display: block;
    font-size: 46px;
    line-height: 52px;
    color: #4a3312;
}
/* 상자 사이 + (2026-10-10 CEO 지시) */
.smorp_plus2
{
    display: block;
    width: 72px;
    height: 207px;
    line-height: 207px;
    font-size: 64px;
    color: #6b543a;
    -webkit-flex: none;
    flex: none;
    opacity: 0;
    -webkit-animation: smorp_drop 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) both;
    animation: smorp_drop 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) both;
}

/* 둘째 줄: 보너스 */
/* 2026-10-09 CEO 지적: 보너스 상자 아래끝(300+62+207 = 569)이 확률 띠(556)를 덮었다.
   줄을 12 올리고 상자도 12 올려 아래끝 545 로 - 띠까지 11 여유 */
#SMORP_row2
{
    position: absolute;
    left: 0;
    right: 0;
    top: 288px;
    height: 230px;
    z-index: 1;
}
/* 2026-10-10 CEO 지시: 보너스 상자 바로 위에 딱 붙게 내린다 (상자 윗변 50, 글줄 칸 52 -> 윗변 2) */
#SMORP_bonus_tag
{
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 52px;
    font-size: 46px;
    line-height: 52px;
    color: #d6281e;
    opacity: 0;
    -webkit-animation: smorp_drop 0.4s ease-out both;
    animation: smorp_drop 0.4s ease-out both;
}
/* 보너스 상자 앞에 있던 + 는 2026-10-10 CEO 지시로 뺐다 (윗줄 상자 사이로 옮겼다) */
#SMORP_bonus_box
{
    position: absolute;
    left: 50%;
    margin-left: -103.5px;
    top: 50px;
    width: 207px;
    height: 207px;
    /* 2026-10-10 CEO 지시: 윗줄 확정 보상 상자와 구분되게 보너스 상자만 주황 톤으로.
       같은 모양에 색만 바꾼 그림이다 (크림 251,242,201 -> 주황 252,205,140) */
    background: url(../image/17_storymode/h5p/clear/tower_clear_bonusbox_or.png) 0 0/207px 207px no-repeat;
    opacity: 0;
    -webkit-animation: smorp_drop 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) both;
    animation: smorp_drop 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) both;
}
#SMORP_bonus_box i
{
    display: block;
    margin: 24px auto 0;
    width: 100px;
    height: 96px;
    background: 50% 50%/contain no-repeat;
}
#SMORP_bonus_box b
{
    display: block;
    font-size: 46px;
    line-height: 52px;
    color: #4a3312;
}
/* 꽝이면 글자만 가운데 크게 */
#SMORP_bonus_box.smorp_none b
{
    padding-top: 66px;
    font-size: 72px;
    line-height: 76px;
}

/* 노란 띠 안 확률 글자 */
#SMORP_prob
{
    position: absolute;
    left: 0;
    right: 0;
    top: 556px;      /* 그림의 노란 띠(552~612) 안 */
    height: 56px;
    font-size: 32px;
    line-height: 56px;
    font-weight: 700;
    color: #6b4a16;
    white-space: nowrap;
}

/* ---- 확인 버튼 (quest_allclaim_bt) ---- */
#SMORP_ok
{
    position: absolute;
    left: 50%;
    margin-left: -164px;
    top: 1630px;
    width: 328px;
    height: 95px;
    background: url(../image/11_quest/h5p/quest_allclaim_bt.png) 0 0/328px 95px no-repeat;
    font-size: 48px;
    line-height: 92px;
    color: #ffffff;
    text-shadow: 0 3px 0 #2f6b24;
    cursor: pointer;
    opacity: 0;
}

/* ============ 연출 (smorp_go 가 붙으면 차례로 돈다) ============ */
#SMORP_root.smorp_go #SMORP_floor
{
    -webkit-animation: smorp_fade 0.35s ease-out 0.1s both;
    animation: smorp_fade 0.35s ease-out 0.1s both;
}
/* 1) 이름이 도장처럼 찍힌다 (확대 -> 축소 -> 원래) */
#SMORP_root.smorp_go #SMORP_name
{
    -webkit-animation: smorp_stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.25s both;
    animation: smorp_stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.25s both;
}
/* 2) 빛줄기가 커지며 돌고, 클리어! 가 도장처럼 찍힌다 */
/* 2026-10-20 CEO 지시: 들어오고 멈추지 말고 계속 움직인다 (인게임 결과화면 #H5RP_rays 와 같은 박자).
   들어오기가 끝나는 때(0.65 + 1.4 = 2.05초)부터 숨쉬기가 이어받는다 - 돌아간 각도는 그대로 두고 크기만 */
#SMORP_root.smorp_go #SMORP_rays
{
    -webkit-animation: smorp_rays 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.65s both,
                       smorp_rays_pulse 2.4s ease-in-out 2.05s infinite;
    animation: smorp_rays 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.65s both,
               smorp_rays_pulse 2.4s ease-in-out 2.05s infinite;
}
/* 도장이 찍힌 뒤에는 룰렛 결과 '당첨!' 과 같은 박자로 커졌다 작아진다 (2026-10-10 CEO 지시).
   두 움직임 다 크기를 다루므로, 도장(0.75 + 0.62 = 1.37초)이 끝나는 때부터 숨쉬기가 이어받게 늦춰 둔다 */
#SMORP_root.smorp_go #SMORP_title
{
    -webkit-animation: smorp_stamp_big 0.62s cubic-bezier(0.2, 1.4, 0.4, 1) 0.75s both,
                       garp_res_breath 1.8s ease-in-out 1.37s infinite;
    animation: smorp_stamp_big 0.62s cubic-bezier(0.2, 1.4, 0.4, 1) 0.75s both,
               garp_res_breath 1.8s ease-in-out 1.37s infinite;
}
/* 4) 판이 올라온다 */
#SMORP_root.smorp_go #SMORP_panel
{
    -webkit-animation: smorp_panel_in 0.4s ease-out 1.25s both;
    animation: smorp_panel_in 0.4s ease-out 1.25s both;
}
#SMORP_root.smorp_go #SMORP_bonus_tag { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }
#SMORP_root.smorp_go #SMORP_bonus_box{ -webkit-animation-delay: 2.65s; animation-delay: 2.65s; }
/* 확인 단추도 '클리어!' 와 같은 숨쉬기 (2026-10-10 CEO 지시). 나타나기는 투명도, 숨쉬기는 크기라 서로 안 겹친다 */
#SMORP_root.smorp_go #SMORP_ok
{
    -webkit-animation: smorp_fade 0.35s ease-out 2.9s both,
                       garp_res_breath 1.8s ease-in-out 3.25s infinite;
    animation: smorp_fade 0.35s ease-out 2.9s both,
               garp_res_breath 1.8s ease-in-out 3.25s infinite;
}

@-webkit-keyframes smorp_fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes smorp_fade { from { opacity: 0; } to { opacity: 1; } }

/* 도장: 크게 들어왔다 작아졌다 제자리 */
@-webkit-keyframes smorp_stamp
{
    0%   { opacity: 0; -webkit-transform: scale(1.8); }
    45%  { opacity: 1; -webkit-transform: scale(0.88); }
    70%  { -webkit-transform: scale(1.06); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes smorp_stamp
{
    0%   { opacity: 0; transform: scale(1.8); }
    45%  { opacity: 1; transform: scale(0.88); }
    70%  { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
@-webkit-keyframes smorp_stamp_big
{
    0%   { opacity: 0; -webkit-transform: scale(2.2); }
    42%  { opacity: 1; -webkit-transform: scale(0.84); }
    68%  { -webkit-transform: scale(1.08); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes smorp_stamp_big
{
    0%   { opacity: 0; transform: scale(2.2); }
    42%  { opacity: 1; transform: scale(0.84); }
    68%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
/* 빛줄기: 커지며 돌다 멈춘다 */
@-webkit-keyframes smorp_rays
{
    0%   { opacity: 0; -webkit-transform: scale(0.3) rotate(0deg); }
    30%  { opacity: 1; }
    100% { opacity: 1; -webkit-transform: scale(1) rotate(140deg); }
}
@keyframes smorp_rays
{
    0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
    30%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(140deg); }
}
/* 빛줄기 숨쉬기 (인게임 결과화면 h5rp_rays_pulse 와 같은 값. 돌아간 각도 140deg 를 지킨다) */
@-webkit-keyframes smorp_rays_pulse
{
    0%, 100% { -webkit-transform: scale(1) rotate(140deg); opacity: 1; }
    50%      { -webkit-transform: scale(1.06) rotate(140deg); opacity: 0.82; }
}
@keyframes smorp_rays_pulse
{
    0%, 100% { transform: scale(1) rotate(140deg); opacity: 1; }
    50%      { transform: scale(1.06) rotate(140deg); opacity: 0.82; }
}
/* 별: 가운데에서 사방으로 퍼지며 사라진다 (되풀이되므로 인게임처럼 끝에서 작아지며 꺼진다) */
@-webkit-keyframes smorp_star_fly
{
    0%   { opacity: 0; -webkit-transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; -webkit-transform: translate(var(--sdx, 0px), var(--sdy, 0px)) scale(1.1) rotate(300deg); }
    100% { opacity: 0; -webkit-transform: translate(calc(var(--sdx, 0px) * 1.15), calc(var(--sdy, 0px) * 1.15)) scale(0.5) rotate(380deg); }
}
@keyframes smorp_star_fly
{
    0%   { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
    20%  { opacity: 1; }
    70%  { opacity: 1; transform: translate(var(--sdx, 0px), var(--sdy, 0px)) scale(1.1) rotate(300deg); }
    100% { opacity: 0; transform: translate(calc(var(--sdx, 0px) * 1.15), calc(var(--sdy, 0px) * 1.15)) scale(0.5) rotate(380deg); }
}
/* 판: 아래에서 살짝 올라오며 나타난다 */
@-webkit-keyframes smorp_panel_in
{
    from { opacity: 0; -webkit-transform: translateY(40px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes smorp_panel_in
{
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 보상 칸: 위에서 부드럽게 내려오며 나타난다 */
@-webkit-keyframes smorp_drop
{
    from { opacity: 0; -webkit-transform: translateY(-46px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes smorp_drop
{
    from { opacity: 0; transform: translateY(-46px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============ 가로 판 (2026-10-16 CEO 지시: 가로에서 옛 팝업이 떠서 세로 기준으로 맞춘다) ============
   위에 적은 자리는 세로 캔버스(1080 폭) 기준이다. 가로는 그 판을 그대로 두고
   통째로 줄여 판(1280 x 720) 한가운데에 놓는다 - 숫자를 두 벌 관리하지 않는다.
   그림이 들어있는 칸은 위 400 ~ 아래 1725 (높이 1325) - 720 안에 넣으려면 0.53 배.
   위아래 여백이 같아지는 당김 값 383.25 를 같이 준다 */
html.h5l #SMORP_root
{
    top: 0;
    height: 2340px;
    -webkit-transform: scale(0.53) translateY(-383.25px);
    transform: scale(0.53) translateY(-383.25px);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

/* 뒤를 덮는 어두움 - 원본은 온통 검게 칠한다. 세로처럼 반투명으로 두고,
   판 밖 좌우 여분(--h5l_ox_l / --h5l_ox_r)까지 같은 세기로 덮는다 */
html.h5l.h5l_smor_on #S_STORYMODE_REWARD_div
{
    left: -webkit-calc(0px - var(--h5l_ox_l, 0px)) !important;
    left: calc(0px - var(--h5l_ox_l, 0px)) !important;
    width: -webkit-calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px)) !important;
    width: calc(1280px + var(--h5l_ox_l, 0px) + var(--h5l_ox_r, 0px)) !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 1000;
}

/* ===== 보상 화면 뒤 로비 UI (2026-10-19 CEO 지시) =====
   클리어 보상 화면이 떠 있는 동안 뒤 로비의 글자·버튼이 비쳐 보여 내용에 집중이 안 되고,
   보상을 받고 닫으면 그 사이 멈춰 있던 모션이 뒤늦게 이어져 보였다.
   도신 대전 배경·탑·캐릭터는 그대로 두고 글자·버튼만 감춘다 - 그래서 딤은 원래 세기(0.55) 그대로다 */
html.h5p_smor_on #SMOP_title,
html.h5l_smor_on #SMOP_title,
html.h5p_smor_on #SMOP_sub,
html.h5l_smor_on #SMOP_sub,
html.h5p_smor_on #SMOP_floor,
html.h5l_smor_on #SMOP_floor,
html.h5p_smor_on #SMOP_season,
html.h5l_smor_on #SMOP_season,
html.h5p_smor_on #SMOP_enter,
html.h5l_smor_on #SMOP_enter,
html.h5p_smor_on #SMOP_jum_info,
html.h5l_smor_on #SMOP_jum_info,
html.h5p_smor_on #SMOP_back,
html.h5l_smor_on #SMOP_back,
html.h5p_smor_on #SMOP_toast,
html.h5l_smor_on #SMOP_toast,
html.h5p_smor_on #SMO_dialogue,
html.h5l_smor_on #SMO_dialogue,
html.h5p_smor_on #SMO_ranking,
html.h5l_smor_on #SMO_ranking,
html.h5p_smor_on #SMO_lobby_notice,
html.h5l_smor_on #SMO_lobby_notice
{
    visibility: hidden !important;
}


/* ==== css/h5_portrait_levelup.css ==== */
/* ============================================================= */
/* 레벨업 연출 화면 (세로 전용, javascript/h5_portrait_levelup.js) */
/* 2026-10-06 CEO 가이드 그림 '레벨업-화면'(1080x2340) 실측 좌표.                */
/* 칸(#LVUP_box)은 1080 x 1563 이고, 가이드의 y 255 지점이 칸의 0 이다.          */
/* ============================================================= */

/* 캔버스 전체를 덮는 딤. 좌우가 넓은 기기에서도 빈 곳이 없게 100% 로 깐다 */
html.h5p #LVUP_pop
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: rgba(0, 0, 0, 0.8);
    -webkit-animation: LVUP_dim_in 220ms ease-out both;
    animation: LVUP_dim_in 220ms ease-out both;
    overflow: hidden;
}
@-webkit-keyframes LVUP_dim_in { from { opacity: 0; } to { opacity: 1; } }
@keyframes LVUP_dim_in { from { opacity: 0; } to { opacity: 1; } }

/* 1080 칸 - 가로는 늘 가운데, 세로 자리는 js(lvup_place_box)가 적는다 */
html.h5p #LVUP_box
{
    position: absolute;
    left: 50%;
    margin-left: -540px;
    width: 1080px;
    height: 1563px;
    font-family: 'NanumSquareRound', sans-serif;
}

/* ---- 캐릭터 컷 (상황별 컷 level_up, 512 정사각형 그림을 390 으로) ---- */
html.h5p #LVUP_cut
{
    position: absolute;
    left: 345px;
    top: 0;
    width: 390px;
    height: 390px;
    -webkit-animation: LVUP_pop_in 320ms ease-out 480ms both;
    animation: LVUP_pop_in 320ms ease-out 480ms both;
}

/* ---- '레벨 업!' ---- */
html.h5p #LVUP_title
{
    position: absolute;
    left: 0;
    top: 434px;
    width: 1080px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    font-size: 92px;
    font-weight: 800;
    color: #ffd84a;
    text-shadow: -4px 0 0 #6b3b00, 4px 0 0 #6b3b00, 0 -4px 0 #6b3b00, 0 4px 0 #6b3b00,
                 -3px -3px 0 #6b3b00, 3px -3px 0 #6b3b00, -3px 3px 0 #6b3b00, 3px 3px 0 #6b3b00,
                 0 0 26px rgba(255, 190, 60, 0.75);
    -webkit-animation: LVUP_pop_in 320ms ease-out 480ms both;
    animation: LVUP_pop_in 320ms ease-out 480ms both;
}

/* ---- 레벨 숫자 자리 (높이 0 인 기준점. 모든 식구가 이 점을 가운데로 삼는다) ---- */
html.h5p #LVUP_lvwrap
{
    position: absolute;
    left: 0;
    top: 763px;
    width: 1080px;
    height: 0;
}
html.h5p #LVUP_old,
html.h5p #LVUP_new
{
    position: absolute;
    left: 50%;
    top: 0;
    width: 700px;
    line-height: 1;
    text-align: center;
    font-size: 290px;
    font-weight: 800;
    color: #ffdf6e;
    text-shadow: -5px 0 0 #7a4300, 5px 0 0 #7a4300, 0 -5px 0 #7a4300, 0 5px 0 #7a4300,
                 -4px -4px 0 #7a4300, 4px -4px 0 #7a4300, -4px 4px 0 #7a4300, 4px 4px 0 #7a4300,
                 0 0 34px rgba(255, 200, 70, 0.7);
}
/* 이전 레벨: 가운데에서 점점 작아지다가 새 레벨에 자리를 내준다 */
html.h5p #LVUP_old
{
    z-index: 2;
    -webkit-animation: LVUP_old_shrink 900ms ease-out both;
    animation: LVUP_old_shrink 900ms ease-out both;
}
/* 새 레벨: 130% 로 크게 올라섰다가 제 크기로 내려앉는다 */
html.h5p #LVUP_new
{
    z-index: 3;
    -webkit-animation: LVUP_new_in 650ms cubic-bezier(0.2, 1.4, 0.4, 1) 500ms both;
    animation: LVUP_new_in 650ms cubic-bezier(0.2, 1.4, 0.4, 1) 500ms both;
}
/* 레벨 뒤 반짝임 (levelup_effect1~3 / 4~9) - 그림은 js 가 차례로 갈아 끼운다 */
html.h5p #LVUP_fx_old,
html.h5p #LVUP_fx_new
{
    position: absolute;
    left: 50%;
    top: 0;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
html.h5p #LVUP_fx_old
{
    width: 875px;
    height: 858px;
    margin-left: -437px;
    margin-top: -429px;
}
html.h5p #LVUP_fx_new
{
    width: 1128px;
    height: 1229px;
    margin-left: -564px;
    margin-top: -614px;
}

/* ---- 퍼지는 둥근 원 라인 (레벨 = 연노랑 / 보상 = 하양) ---- */
html.h5p #LVUP_ring_y,
html.h5p #LVUP_ring_w
{
    position: absolute;
    left: 50%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;		/* 차례를 기다리는 동안은 안 보여야 한다 (연출은 forwards 로만 남긴다) */
}
html.h5p #LVUP_ring_y
{
    top: 0;
    border: 8px solid rgba(255, 234, 160, 0.95);
    z-index: 1;
    -webkit-animation: LVUP_ring 700ms ease-out 520ms forwards;
    animation: LVUP_ring 700ms ease-out 520ms forwards;
}
html.h5p #LVUP_ring_w
{
    top: 1134px;
    border: 8px solid rgba(255, 255, 255, 0.9);
    z-index: 1;
    -webkit-animation: LVUP_ring 800ms ease-out 1500ms forwards;
    animation: LVUP_ring 800ms ease-out 1500ms forwards;
}

/* ---- 보상: 금화 그림 + 금액 + 우편함 안내 (차례로 살짝 내려오며 나타난다) ---- */
html.h5p #LVUP_gold
{
    position: absolute;
    left: 376px;
    top: 1005px;
    width: 329px;
    height: 258px;
    z-index: 2;
    -webkit-animation: LVUP_fall_in 320ms ease-out 1500ms both;
    animation: LVUP_fall_in 320ms ease-out 1500ms both;
}
html.h5p #LVUP_money
{
    position: absolute;
    left: 0;
    top: 1261px;
    width: 1080px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 72px;
    font-weight: 800;
    color: #ffd84a;
    z-index: 2;
    text-shadow: -3px 0 0 #6b3b00, 3px 0 0 #6b3b00, 0 -3px 0 #6b3b00, 0 3px 0 #6b3b00,
                 -2px -2px 0 #6b3b00, 2px -2px 0 #6b3b00, -2px 2px 0 #6b3b00, 2px 2px 0 #6b3b00;
    -webkit-animation: LVUP_fall_in 320ms ease-out 1800ms both;
    animation: LVUP_fall_in 320ms ease-out 1800ms both;
}
/* 10 레벨마다 같이 주는 루비 - 금액 뒤에 붙인다.
   2026-10-09 CEO 지시: 금액과 글자 크기를 같게(48 -> 72) 하고 '루비' 글자 대신 루비 그림을 앞에 둔다 */
html.h5p .LVUP_ruby
{
    margin-left: 34px;
    font-size: 72px;
    color: #ff9ec4;
    text-shadow: -3px 0 0 #6b1030, 3px 0 0 #6b1030, 0 -3px 0 #6b1030, 0 3px 0 #6b1030;
}
/* 루비 그림 - 우편함 보상과 같은 그림(113x108)을 72x69 로 */
html.h5p .LVUP_ruby > i
{
    display: inline-block;
    width: 72px;
    height: 69px;
    margin-right: 12px;
    vertical-align: -12px;
    background: url(../image/1_mainmenu/h5p/mailbox/mailbox_reward_ruby.png) 0 0/72px 69px no-repeat;
}
html.h5p #LVUP_mail
{
    position: absolute;
    left: 0;
    top: 1359px;
    width: 1080px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    z-index: 2;
    text-shadow: -2px 0 0 #3a2200, 2px 0 0 #3a2200, 0 -2px 0 #3a2200, 0 2px 0 #3a2200;
    -webkit-animation: LVUP_fall_in 320ms ease-out 2100ms both;
    animation: LVUP_fall_in 320ms ease-out 2100ms both;
}

/* ---- 확인 버튼 (팝업 공용 초록 버튼 337x104 원본 크기) ---- */
html.h5p #LVUP_ok
{
    position: absolute;
    left: 372px;
    top: 1459px;
    width: 337px;
    height: 104px;
    line-height: 100px;
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: -2px 0 0 #2f5a22, 2px 0 0 #2f5a22, 0 -2px 0 #2f5a22, 0 2px 0 #2f5a22;
    background: url(../image/1_mainmenu/h5p/profile/popup_green_bt.png) no-repeat 0 0;
    background-size: 337px 104px;
    z-index: 5;
    cursor: pointer;
    -webkit-animation: LVUP_fade_in 300ms ease-out 2650ms both;
    animation: LVUP_fade_in 300ms ease-out 2650ms both;
}
html.h5p #LVUP_ok:active
{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* ---- 컨페티 조각 (js 가 만들고 자리/각도를 적는다) ---- */
html.h5p .LVUP_cf
{
    position: absolute;
    left: 50%;
    z-index: 6;
    pointer-events: none;
}

/* ---- 움직임 ---- */
@-webkit-keyframes LVUP_pop_in
{
    from { opacity: 0; -webkit-transform: scale(0.8); }
    to   { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes LVUP_pop_in
{
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@-webkit-keyframes LVUP_fall_in
{
    from { opacity: 0; -webkit-transform: translateY(-26px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes LVUP_fall_in
{
    from { opacity: 0; transform: translateY(-26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes LVUP_fade_in { from { opacity: 0; } to { opacity: 1; } }
@keyframes LVUP_fade_in { from { opacity: 0; } to { opacity: 1; } }

@-webkit-keyframes LVUP_old_shrink
{
    0%   { -webkit-transform: translate(-50%, -50%) scale(1); opacity: 1; }
    66%  { -webkit-transform: translate(-50%, -50%) scale(0.55); opacity: 1; }
    100% { -webkit-transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
}
@keyframes LVUP_old_shrink
{
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    66%  { transform: translate(-50%, -50%) scale(0.55); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
}
@-webkit-keyframes LVUP_new_in
{
    0%   { -webkit-transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    28%  { -webkit-transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    62%  { -webkit-transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { -webkit-transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes LVUP_new_in
{
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    28%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    62%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@-webkit-keyframes LVUP_ring
{
    0%   { -webkit-transform: translate(-50%, -50%) scale(0.2); opacity: 0.95; }
    100% { -webkit-transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}
@keyframes LVUP_ring
{
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.95; }
    100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

/* ==== css/h5_rejoin.css ==== */
/* 파일명: h5_rejoin.css
   하는일: 대전 중 연결이 끊겼을 때 판 위에 띄우는 '다시 연결하는 중' 가림막 (h5_rejoin.js)
   좌표는 세로 캔버스 1080 기준 */

#h5rj_overlay
{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
}

#h5rj_panel
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 820px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 56px 50px 50px 50px;
    box-sizing: border-box;
    border-radius: 28px;
    background: #2b2118;
    border: 4px solid #f2c14e;
    text-align: center;
    color: #ffffff;
}

#h5rj_title
{
    font-size: 54px;
    font-weight: bold;
    color: #f2c14e;
    margin-bottom: 28px;
}

#h5rj_desc
{
    font-size: 40px;
    line-height: 60px;
}

#h5rj_leave
{
    display: none;
    margin: 44px auto 0 auto;
    width: 360px;
    height: 100px;
    line-height: 100px;
    border-radius: 50px;
    background: #6b5a48;
    font-size: 40px;
    color: #ffffff;
}