/* Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}


html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size:14px;
	font-weight:normal;
	color:#000;
}

a {
	color: inherit;
	text-decoration: none;
}

html,body{
	width:100%;
	height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


body,div,table,th,td,h1,h2,h3,h4,h5,form,fieldset,figure,address,p,button,legend,pre,code,blockquote,input,textarea,button,select,ul,li,ol,dd,dl,dt
{margin:0;padding:0; font-family:'Noto Sans KR',Gulim,'굴림','돋움','맑은 고딕',Dotum,'굴림',tahoma,Gulim,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif; box-sizing: border-box;}
h1,h2,h3,h4,h5,h6{line-height: inherit;}
img,fieldset,iframe,input,button{border:0 none;}
img{max-width:inherit;}
input,select,textarea,button{vertical-align:middle;}
dl,ul,ol,menu,li{list-style:none}
button {border:0 none;background-color:transparent;cursor:pointer}
body{background:#fff}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
sup {vertical-align: super; font-size: smaller; top:0;}
sub{vertical-align: sub; font-size: smaller; bottom:0;}
blockquote{font-style:normal}
legend{*width:0; position:absolute; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden;}
caption {padding:0; height:0; font-size:0; line-height:0; overflow:hidden;}
hr{display:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
iframe{vertical-align:top}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link);text-decoration:none;}
textarea{resize:none;}
/* Reset */


/* Common */
.blind,legend{display:block;overflow:hidden;position:absolute;top:-1000em;left:0}
.clear{clear:both}
.f_l{float:left}
.f_r{float:right}
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.show{display:block}
.hide{display:none}
.tbl, .tbl table {border-collapse:collapse; border-spacing:0} /* 테이블 초기화 */
.clear_area:after {content:""; display:block;}
.clear_area:after{clear:both; display:block; content:"";}

.dis_flex{
	display: flex;
	align-items: center;
}

.dis_flex_col{
	display: flex;
	flex-direction: column;
}
/* Common */


/* =========================================================
   HAPPYJOB 리스킨 — 디자인 토큰 / 다크모드 / 반응형 공통 기준
   메인 컬러(--main-pcm-color-10)·서브 컬러(--main-pcs-color-10)는
   root_color.html에서 관리자설정값으로 이미 선언됨(head_common.html에서 먼저 로드).
   나머지 중립 토큰(텍스트/배경/라인 등)은 여기서 라이트/다크 값을 직접 관리.
   ========================================================= */
:root{
	/* 메인 컬러 = 관리자설정값(root_color.html) */
	--primary: var(--main-pcm-color-10, #336BFF);
	--primary-weak: #EAF0FF;
	/* 보조 컬러 — 현재 관리자값(--main-pcs-color-10)이 메인과 동일해서 시안 값으로 직접 지정.
	   관리자모드에서 서브색상을 별도 지정하면 var(--main-pcs-color-10)으로 교체 가능. */
	--secondary: #00C274;
	--secondary-weak: #E4F8EF;
	--text:#242C3A; --text2:#5F6570; --text3:#8B919B; --red:#E5484D;
	--line:#E5E5E5; --line-soft:#EFF0F2; --bg:#FFFFFF; --bg2:#F7F8FA; --card:#FFFFFF;
	--header-bg:#FFFFFF; --chip:#F2F4F7; --blue-soft:#F7FAFE;
	--shadow:0 8px 28px rgba(24,39,75,.12); --shadow-sm:0 2px 10px rgba(24,39,75,.07);
	/* 기본 링크 색 — 위 리셋의 a{color} 가 이 값을 쓴다. 라이트는 기존 값 그대로. */
	--link:#383838;
	/* 콘텐츠 실폭 1280px + 좌우 패딩 24px×2 = 1328px (box-sizing:border-box 라 패딩이 포함됨) */
	--wrap:1328px;
	--wrap-inner:1280px;
	--bp-tablet:1024px; --bp-mobile:768px; --bp-small:480px;
}
[data-theme="dark"]{
	--primary-weak:#232A3B; --secondary-weak:#173026;
	--text:#F2F3F5; --text2:#A8ABB2; --text3:#7E828B; --red:#FF6B6E;
	--line:#3A3B40; --line-soft:#2E2F34; --bg:#1C1C1E; --bg2:#202124; --card:#25262A;
	--header-bg:#202124; --chip:#2C2D32; --blue-soft:#1E2536;
	--shadow:0 8px 28px rgba(0,0,0,.5); --shadow-sm:0 2px 10px rgba(0,0,0,.4);
}

/* ----- 다크모드 적용 범위 -----
   리셋의 a{color} 처럼 사이트 전역 규칙이 쓰는 값은 body.hj-page 안에서만 다크로 바꾼다.
   아직 리스킨 안 된 페이지는 style.css 에 색이 하드코딩돼 있어(약 1,100곳) 절반만 다크가
   되면 오히려 깨져 보이기 때문이다. 페이지를 리스킨해 body 에 hj-page 가 붙으면 자동으로 켜진다.
   ★전 페이지 작업이 끝나면 이 블록의 'body.hj-page' 만 지워서 [data-theme="dark"] 로 되돌리면 된다.★ */
[data-theme="dark"] body.hj-page{
	--link:var(--text2);
}

/* 리스킨 적용 페이지 전용 배경/글자색 전환 */
body.hj-page{
	background:var(--bg);
	color:var(--text);
	/* 시안 기준 폰트 크기(16px). 사이트 기본은 html{font-size:14px}이라 리스킨 페이지에서만 맞춘다. */
	font-size:16px;
	transition:background .2s,color .2s;
}

/* 기존 .wrap의 min-width:1340px는 반응형을 막으므로 리스킨 페이지에서만 해제 */
body.hj-page .wrap{
	min-width:0;
}

/* 기존 .width_limit 는 max-width:1280px(패딩 포함) 이라 실제 콘텐츠가 1232px이 된다.
   리스킨 페이지에서만 --wrap(1328px)으로 올려 패딩 제외 1280px을 확보한다.
   (미작업 페이지는 기존 1280px 그대로 유지) */
body.hj-page .width_limit{
	max-width:var(--wrap);
}



.point_color{
	color:var(--main-pcm-color-10) !important;
}

.point_color_bg{
	background-color:var(--main-pcm-color-10) !important;
}

/* 검색결과 없음 안내 색
   2026-08-28 사용자 지시 : 기본 디자인은 폰트만 연한 회색으로.
   ★#000 → --text3(라이트 #8B919B / 다크 #7E828B)★ — 안내문구용 '연한 회색' 역할 토큰이라
   테마 전환도 자동으로 따라간다. 그래서 다크 전용 오버라이드(--text)는 필요 없어져 걷어냈다.
   ※ .empty_info_2 · .empty_info_table 도 이 값을 공유한다. */
:root{--empty-info:var(--text3, #8B919B)}

.empty_info{
	font-weight: 400 !important;
	font-size: 16px !important;
	color: var(--empty-info) !important;
	padding:50px 0 !important;
	text-align: center;
	display: block !important;
	grid-column: 1 / -1;
}

.empty_info_2{
	font-weight: 500;
	font-size: 16px;
	color: var(--empty-info);
	text-align: center;
	display: block;
}

.empty_info_table{
	font-weight: 400 !important;
	font-size: 16px !important;
	color: var(--empty-info) !important;
	padding:50px 0 !important;
	text-align: center;
    border-bottom: 1px solid #EEE;
}



.font_dotum{font-family:'돋움',Dotum,'맑은 고딕','굴림',Gulim,tahoma,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif;}
.font_tahoma{font-family:Tahoma,'돋움',Dotum,'맑은 고딕','굴림',Gulim,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif;}
.font_gulim{font-family:'굴림',Gulim,'돋움',Dotum,'맑은 고딕',tahoma,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif;}
.font_malgun{font-family:'맑은 고딕','돋움',Dotum,'굴림',Gulim,tahoma,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif !important;}
.font_nanum{font-family:'나눔고딕','나눔 고딕',Nanum Gothic,NanumGothic,nanum gothic,nanumgothic,'맑은 고딕','고딕','돋움',Dotum,'굴림',Gulim,tahoma,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif !important;}

.noto100 {font-family: 'Noto Sans KR' !important; font-weight:100 !important;}
.noto100 a{font-family: 'Noto Sans KR' !important; font-weight:100 !important;}
.noto100 a:hover{font-family: 'Noto Sans KR' !important; font-weight:100 !important;}

.noto200 {font-family: 'Noto Sans KR' !important; font-weight:200 !important;}
.noto200 a{font-family: 'Noto Sans KR' !important; font-weight:200 !important;}
.noto200 a:hover{font-family: 'Noto Sans KR' !important; font-weight:200 !important;}

.noto300 {font-family: 'Noto Sans KR' !important; font-weight:300 !important;}
.noto300 a{font-family: 'Noto Sans KR' !important; font-weight:300 !important;}
.noto300 a:hover{font-family: 'Noto Sans KR' !important; font-weight:300 !important;}

.noto400 {font-family: 'Noto Sans KR' !important; font-weight:400 !important;}
.noto400 a{font-family: 'Noto Sans KR' !important; font-weight:400 !important;}
.noto400 a:hover{font-family: 'Noto Sans KR' !important; font-weight:400 !important;}

.noto500{font-family: 'Noto Sans KR' !important; font-weight:500 !important;}
.noto500 a{font-family: 'Noto Sans KR' !important; font-weight:500 !important;}
.noto500 a:hover{font-family: 'Noto Sans KR' !important; font-weight:500 !important;}

.noto600 {font-family: 'Noto Sans KR' !important; font-weight:600 !important;}
.noto600 a{font-family: 'Noto Sans KR' !important; font-weight:600 !important;}
.noto600 a:hover{font-family: 'Noto Sans KR' !important; font-weight:600 !important;}

.noto700 {font-family: 'Noto Sans KR' !important; font-weight:700 !important;}
.noto700 a{font-family: 'Noto Sans KR' !important; font-weight:700 !important;}
.noto700 a:hover{font-family: 'Noto Sans KR' !important; font-weight:700 !important;}

.noto800 {font-family: 'Noto Sans KR' !important; font-weight:800 !important;}
.noto800 a{font-family: 'Noto Sans KR' !important; font-weight:800 !important;}
.noto800 a:hover{font-family: 'Noto Sans KR' !important; font-weight:800 !important;}

.noto900 {font-family: 'Noto Sans KR' !important; font-weight:900 !important;}
.noto900 a{font-family: 'Noto Sans KR' !important; font-weight:900 !important;}
.noto900 a:hover{font-family: 'Noto Sans KR' !important; font-weight:900 !important;}
/* Font-style */



/* Wys2 reset */
#ct{font-size:14px}
#ct *{font-size: inherit;}
#ct{word-break: break-all; word-break: break-word; word-wrap: break-word; }
#ct table{border-collapse: separate}
#ct table[align="center"]{margin:auto;}
#ct ul{padding-left:40px; margin:15px 0; display:block}
#ct ul li{display:list-item; list-style:disc}
#ct ol{padding-left:40px; margin:15px 0; display:block}
#ct ol li{list-style:decimal;  display:list-item}
#ct hr{display:block; overflow: visible;text-align: inherit;margin: 20px 0;border: 0;border-top: 1px solid #e5e5e5}
#ct em{font-style:italic; color: inherit;}
#ct img{max-width:100%; height:auto !important}
#ct blockquote{line-height:1.5; position: relative; margin:0;}
#ct blockquote:before {position: relative; top: 11px; content: "\201C"; color:#bcbcbc; font-family:Georgia;  font-size:40px; display:block; text-align:center;}
#ct blockquote:after {position: relative; top:11px; content: "\201D"; color:#bcbcbc; font-family:Georgia; font-size:40px; display:block; text-align:center;}
#ct blockquote > p, #ct blockquote > div{text-align:center; font-style:normal}
#ct sup {vertical-align: super; font-size: smaller; top:0;}
#ct sub{vertical-align: sub; font-size: smaller; bottom:0;}


.ct{font-size:14px;}
.ct *{font-size: inherit;}
.ct{word-break: break-all; word-break: break-word; word-wrap: break-word; text-align:justify; line-height:normal}
.ct table{border-collapse: separate}
.ct table[align="center"]{margin:auto;}
.ct ul{padding-left:20px; display:block}
.ct ul li{display:list-item; list-style:disc}
.ct ol{padding-left:20px; display:block}
.ct ol li{list-style:decimal;  display:list-item}
.ct hr{display:block}

.ct img{max-width:100%; height:auto !important}
.ct p, .ct div{font-size:inherit}
.ct blockquote{line-height:normal; position: relative;}
.ct blockquote:before {position: relative; top: 11px; content: "\201C"; color:#bcbcbc; font-family:Georgia;  font-size:40px; display:block; text-align:center;}
.ct blockquote:after {position: relative; top:11px; content: "\201D"; color:#bcbcbc; font-family:Georgia; font-size:40px; display:block; text-align:center;}
.ct blockquote > p, .ct blockquote > div{text-align:center;}
.ct sup {vertical-align: super; font-size: smaller; top:0;}
.ct sub{vertical-align: sub; font-size: smaller; bottom:0;}



.ellipsis_line{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.ellipsis_line1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ellipsis_line_1 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; /* number of lines to show */ -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.ellipsis_line_2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; /* number of lines to show */ -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.ellipsis_line_3 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; /* number of lines to show */ -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.ellipsis_line_4 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; /* number of lines to show */ -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.ellipsis_line_5 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; /* number of lines to show */ -webkit-line-clamp: 5; -webkit-box-orient: vertical;}



/* h_check h-radio 박스 위치 조정 */
.h_form .h-check.check_margin_font16 input[type="checkbox"] + span::before {
	margin-top:3px;
}
.h_form .h-check.check_margin_font20 input[type="checkbox"] + span::before {
	margin-top:7px;
}
.h_form .h-check.check_margin_font14 input[type="checkbox"] + span::before {
	margin-top:3px;
}
.h_form .h-radio.radio_margin_font16 input[type="radio"] + span::before {
	margin-top:4px;
}
.h_form .h-radio.radio_margin_font20 input[type="radio"] + span::before {
	margin-top:7px;
}
.h_form .h-radio.radio_margin_font14 input[type="radio"] + span::before {
	margin-top:3px;
}


/* 스크롤 css */
.scroll_content_bar::-webkit-scrollbar{width:5px;}
.scroll_content_bar::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.2); border-radius:0px; transition:all 0.5s;}
.scroll_content_bar::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.2); border-radius:0px; transition:all 0.5s;}
.scroll_content_bar::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); border-radius:0;}




/* UIKIT 초기화 */
*:focus {outline:none;}

b,strong {font-weight:500;}


a:active{color:var(--link);text-decoration:none; outline:none;}

a,
.uk-link {
	color:var(--link);
}

a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link,
.uk-link-toggle:focus .uk-link {
	color: var(--link);
	text-decoration: none;
}
abbr[title] {
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6{line-height:inherit;}

img {
	max-width:initial;
	height:initial;
	box-sizing:inherit;
}

sup {vertical-align:super; font-size:smaller; top:0;}
sub{vertical-align:sub; font-size:smaller; bottom:0;}

p,
ul,
ol,
dl,
pre,
address,
fieldset,
figure {
	margin:0;
}

* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + fieldset,
* + figure {
	margin-top:0px;
}

ul,
ol {
	padding-left:0px;
}

.uk-table th {
	color:#000;
	background-color:rgba(250, 250, 250, 1);
}

.uk-icon {
	/*line-height:inherit;*/
}

.uk-input,
.uk-select,
.uk-textarea,
.uk-radio,
.uk-checkbox {
	border-radius:0.3em;
}

.uk-input,
.uk-select,
.uk-textarea {
	border-radius:0.2em;
}

.uk-button {
	border-radius:0.2em;
	-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.20);
	box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.20);
}


.uk-subnav {
	margin-left:0px;
}

.uk-subnav > * {
	padding-left:10px;
}

.uk-subnav > * > :first-child {
	font-size:15px;
	border-radius:25px;
}

.uk-subnav > *:first-child {
	padding-left:0px;
}

.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
	height:1.2em;
}

.uk-subnav-pill > * > :first-child {
	padding:8px 17px;
	background:#efefef;
}

.uk-subnav-pill > * > a:hover,
.uk-subnav-pill > * > a:focus {
	background-color:var( --main-pcs-color-10 );
	color:#fff;
}

.uk-subnav-pill> .uk-active > a {
	background-color:var( --main-pcm-color-10 );
	color: #fff;
}

.uk-subnav-pill > * > a:active {
	background-color:var( --main-pcm-color-10 );
	color:#fff;
}

.uk-thumbnav > * {
	padding-bottom:15px;
}

.uk-thumbnav > li > a > img {
	border-radius:8px;
}

.uk-thumbnav > * > :hover,
.uk-thumbnav > * > :focus {
	border:none;
}
.uk-thumbnav > * > :hover::after,
.uk-thumbnav > * > :focus::after {
	background-color:transparent;
	border:3px solid rgba(0, 0, 0,0.8);
	border-radius:5px;
}

.uk-thumbnav > .uk-active > *::after {
	background-color:transparent;
	border:3px solid rgba(0, 0, 0,0.8);
	border-radius:5px;
}

.uk-accordion > :nth-child(n+2) {
	margin-top:0px;
}

.uk-accordion-title:hover,
.uk-accordion-title:focus {
	color:inherit;
}

.uk-accordion-content {
	margin-top:0px;
}

.uk-drop {
	width:inherit;
	max-width:inherit;
}

[class*='uk-drop-bottom'] {
	margin-top:0px;
}

.uk-dropdown {
	display:none;
	width:230px;
	min-width:130px !important;
	padding:0px;
	background:#f2f3f5;
	color:#000000;
	border-radius:3px;
	border:1px solid #dadada;
	padding:5px 0;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.1);
}

.uk-dropdown-nav {
	font-size:14px;
}

.uk-dropdown-nav > li > a {
	color:#000000;
	display:inline-block;
	height:36px;
	padding:10px 20px 0 20px;
	text-align:left;
	width:100%;
	font-size:14px;
	line-height:1.1;
}

.uk-dropdown-nav > li > a:hover,
.uk-dropdown-nav > li > a:focus,
.uk-dropdown-nav > li.uk-active > a {
	color:#ffffff;
	background:var( --main-pcm-color-10 );
}

[class*='uk-dropdown-left'] {
	margin-top:-2px;
}

[class*='uk-dropdown-right'] {
	margin-left:210px;
}

.uk-slideshow-items {
	border-radius:5px;
}

.uk-notification-message-primary {
	color:var( --main-pcm-color-10 );
}

.uk-tooltip {
	z-index:9999999999;
	max-width:300px;
}

[class*='uk-tooltip-top'] {
	margin-top:-8px;
}
[class*='uk-tooltip-bottom'] {
	margin-top:8px;
}
[class*='uk-tooltip-left'] {
	margin-left:-8px;
}
[class*='uk-tooltip-right'] {
	margin-left:8px;
	margin-top:0px;
}

.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus) {
	opacity:0 !important;
}

blockquote{
	font-style:normal
}

::selection,
.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-button-primary,
.uk-section-primary,
.uk-tile-primary,
.uk-card-primary,
.uk-card-primary.uk-card-hover:hover,
.uk-badge,
.uk-label,
.uk-subnav-pill > .uk-active > a,
.uk-progress::-webkit-progress-value,
.uk-progress::-moz-progress-bar,
.uk-progress::-ms-fill,
.uk-background-primary {
	background:var( --main-pcm-color-10 );
}

@supports (-webkit-background-clip: text) {
	.uk-text-background {
		background-color:var( --main-pcm-color-10 );
	}
}

a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading,
.uk-link-toggle:focus .uk-link-heading,
.uk-button-link,
.uk-button-link:hover,
.uk-button-link:focus,
.uk-alert-primary
{
	color:var( --main-pcm-color-10 );
}

.uk-text-primary,
.uk-text-background {
	color:var( --main-pcm-color-10 );
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus,
.uk-radio:focus,
.uk-checkbox:focus,
.uk-tab > .uk-active > a
{
	border-color:var( --main-pcm-color-10 );
}

.uk-offcanvas-overlay::before {
	background: rgba(0, 0, 0, 0.3);
}


.uk-dropbar-top{
	box-shadow: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.uk-drop.uk-open { animation: none !important; opacity: 1 !important; }
/* UIKIT 초기화 */




/* 모달 팝업 관련 CSS */
/* PC의 경우 모달 세로 사이즈가 해상도 보다 클 경우 스크롤바를 만들기 위한 소스*/
.blocker {
overflow: auto !important;
}

/* ★모달 반응형 (2026-08-10)★
   {{모달팝업}} 매크로가 모달 div 에 인라인으로 고정 크기(예: width:600px; height:640px)를 찍는다.
   화면 폭이 그보다 좁으면 blocker 안에서 ::before(높이 100% 인라인블록) 다음 줄로 밀려나
   모달이 화면 아래로 사라진다(신고하기 모달이 390~575px 에서 안 보였음).
   인라인 크기라 !important 로만 덮을 수 있고, 리스킨 페이지에서만 적용한다. */
body.hj-page .blocker > .modal{
	max-width:calc(100vw - 32px) !important;
	max-height:calc(100vh - 32px) !important;
	overflow-y:auto;
}

/* ★이미지 뷰어 모달은 화면을 꽉 채운다★ (2026-08-21 사용자 지시)
   위 규칙의 32px 여백은 '고정 크기 모달이 화면 밖으로 나가는 것'을 막으려는 것이라
   width/height 가 이미 100% 인 이미지 뷰어에는 필요 없다. 오히려 그 32px 띠에서
   blocker(검정 0.5)와 모달(검정 0.8)의 농도 차가 드러나 **테두리처럼 보였다**.
   → 이 모달만 상한을 풀어 화면 전체를 덮게 한다(스크롤바 안 생기는 것 확인).
   ※ 마커 클래스는 html/guin_detail_image_slide_uikit_modal.html 의 최상단 div 에 있다. */
body.hj-page .blocker > .modal.hj-imgview-modal{
	max-width:none !important;
	max-height:none !important;
}

/* class="blocker" */
.happy_modal_bg_color_1 {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.05) !important;
}

.happy_modal_bg_color_2 {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.1) !important;
}

.happy_modal_bg_color_3 {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.5) !important;
}

.happy_modal_bg_color_4 {
background-color:rgb(255,255,255);
background-color:rgba(255,255,255,0.5) !important;
}

.happy_modal_bg_color_5 {
background-color:rgb(255,255,255);
background-color:rgba(255,255,255,0.02) !important;
}
/* class="blocker" */



/* class="blocker" */
.happy_modal_left_class {
text-align:left !important;
}

.happy_modal_center_class {
text-align:center !important;
}

.happy_modal_right_class {
text-align:right !important;
}
/* class="blocker" */



/* class="modal" */
.happy_modal_top_class {
vertical-align: top !important;
}

.happy_modal_middle_class {
vertical-align: middle !important;
}

.happy_modal_bottom_class {
vertical-align: bottom !important;
}
/* class="modal" */
/* 모달 팝업 관련 CSS */





/* 쪽지 스타일 */
/* 아래 .message_* 의 하드코딩 색은 --mb-* 토큰으로 치환했다(라이트 값은 그대로).
   다크는 body 에 hj-popup-page 등 마커가 붙은 쪽지 팝업에서만 켜진다 — 마커가 없는
   다른 쪽지 화면은 토큰이 라이트 값으로 남으므로 화면이 바뀌지 않는다. */
.message_title_box{
	display:table;
	width:100%;
	height:65px;
	border-bottom:1px solid var(--mb-line);
}
.message_title_box .message_title_text{
	display:table-cell;
	vertical-align:middle;
	padding:15px;
	font-weight:500;
}
.message_title_box .message_title_text .uk-icon{
	vertical-align:middle;
	margin-top:-3px;
}
.message_title_box .message_title_close{
	display:table-cell;
	vertical-align:middle;
	text-align:right;
	padding:15px;
	width:60px;
}
.message_title_box .message_title_close a{
	color:var(--mb-text3) !important;
}
.message_contents .message_tab.on{
	background:var(--mb-card) !important;
}
.message_contents .message_tab.on a {
	color:var(--mb-text) !important;
}
.message_contents .message_tab{
	background:var(--mb-soft2);
}
.message_contents .message_tab a {
	display:block;
	color:var(--mb-text7);
	text-align:center;
	padding:12px 0;
	font-size:14px;
}
.message_rows{
	margin-top:10px;
	border:1px solid var(--mb-line);
	box-sizing:border-box;
	background:var(--mb-card);
	height:451px;
}

.message_rows_style {
	box-sizing:border-box;
}

.message_rows_style table tr td{
	font-family:Noto Sans KR;
}

.message_receive_rows{
	border-bottom:1px solid var(--mb-line);
	box-sizing:border-box;
}
.message_receive_rows .del_btn{
	color:var(--mb-muted) !important;
}
.message_contents .message_view_table th{
	text-align:left;
	width:60px;
	vertical-align:top;
	font-weight:500;
	font-size:14px;
}
.message_contents .message_view_table td{
	padding:0 0 3px 10px;
	color:var(--mb-muted2);
	word-break:break-all;
	vertical-align:top;
	font-size:14px;
}
.message_th_title tr{
	display:table-row;
	vertical-align:inherit;
}
.message_th_title th{
	font-size:14px;
	color:var(--mb-title);
	font-weight:400;
	letter-spacing:-1px;
	padding:16px 0;
}
.message_group_bubble{
	max-width:100%;
	display:inline-block;
	padding:8px 10px;
	border-radius:5px;
	position:relative;
}
.message_group_bubble.right_me{
	text-align:left;
	background:var(--msg-me-bg);
	border:1px solid var(--msg-me-line);
}
.message_group_bubble.right_me:before{
	content:"";
	display:block;
	position:absolute;
	border-top:0px solid transparent;
	border-left:10px solid var(--msg-me-line);
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	top:10px;
	right:-20px;
}
.message_group_bubble.right_me:after{
	content:"";
	display:block;
	position:absolute;
	border-top:0px solid transparent;
	border-left:10px solid var(--msg-me-bg);
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	top:11px;
	right:-18px;
}
.message_group_bubble.left_other{
	text-align:left;
	background:var(--msg-other-bg);
	border:1px solid var(--msg-other-line);
}
.message_group_bubble.left_other:before{
	content:"";
	display:block;
	position:absolute;
	border-top:0px solid transparent;
	border-left:10px solid transparent;
	border-right:10px solid var(--msg-other-line);
	border-bottom:10px solid transparent;
	top:10px;
	left:-20px;
}
.message_group_bubble.left_other:after{
	content:"";
	display:block;
	position:absolute;
	border-top:0px solid transparent;
	border-left:10px solid transparent;
	border-right:10px solid var(--msg-other-bg);
	border-bottom:10px solid transparent;
	top:11px;
	left:-18px;
}
.message_contents .message_paging .top_gap{
	margin-top:0 !important;
}
/* 쪽지 스타일 끝 */