@charset "UTF-8";

/* Original file: modules/member/skins/sketchbook_member/css/style.css */

/* common */

.bd_bar {
	display: none; position: absolute; top: 0; right: 16px; font-size: 20px;
}
.bd_bar i {
	cursor: pointer;
}
.cnb_n_list {
	margin-bottom: 20px;
}
	.cnb_n_list .bd_cnb.open .bg_f_f9 {
		padding-right: 11px;
	}
.rd {
	padding: 0;
}
.rd_hd .board .btm_area .side {
	font-size: 0;
}
.rd_hd .board .btm_area a {
    font-size: 11px;
}
.rd_ft_nav {
	padding-bottom: 0;
}
.bd_btn.blue:hover {
	color: #fff;
}
.btn_img .fa {
	vertical-align: unset;
}
@media screen and (max-width: 640px) {
	.bd .rd_nav, .rd_ft_nav .btn_img {
		margin: 16px 2px 0;
	}
}


/* _header */

.tgt_modal {
	display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
	background-color: #00000030; font-size: 16px; z-index: 11; align-items: center; justify-content: center;
}
.tgt_menu {
	display: inline-block; width: 320px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
.tgt_menu h3 {
	display: flex !important; align-items: center; margin: 0; padding: 20px 24px 0; font-size: 16px; line-height: 22px;
}
.tgt_menu h3 .bg_color {
	margin-right: 8px; width: 12px; height: 22px; border-radius: 2px;
}
.tgt_menu .fa-times,
.tgt_menu .fa-angle-down,
.tgt_menu .fa-angle-up {
	position: absolute; top: calc(50% + 10px); right: 24px; transform: translateY(-50%);
	margin: 0; width: 24px; height: 24px; line-height: 1.6;
	background-color: #fff; border: 1px solid #e5e5e5; border-radius: 2px;
	font-size: 14px; color: #aaa; text-align: center;
	cursor: pointer; box-sizing: border-box;
}
.tgt_menu .fa-angle-down,
.tgt_menu .fa-angle-up {
	top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 14px);
}
.tgt_menu .tgt_menu_wrap {
	padding: 24px;
}
	.tgt_menu .tgt_menu_wrap .cnb_n_list {
		margin-bottom: 0;
	}
		.tgt_menu .tgt_menu_wrap .cnb_n_list .bd_cnb {
			margin: 0; padding: 0; box-shadow: none;
		}
		.tgt_menu .tgt_menu_wrap .cnb_n_list .bd_cnb .home,
		.tgt_menu .tgt_menu_wrap .cnb_n_list .bd_cnb .dummy_ie,
		.tgt_menu .tgt_menu_wrap .cnb_n_list .bd_cnb .cnbMore {
			display: none;
		}
		.tgt_menu .tgt_menu_wrap .cnb_n_list .bd_cnb .bg_f_f9 {
			height: auto; background: none; border: none; box-shadow: none;
		}
	.tgt_menu .tgt_menu_wrap .cnb_n_list ul,
	.tgt_menu .tgt_menu_slct {
		display: flex; flex-flow: wrap; gap: 8px;
		margin: 0; text-align: center; line-height: 1.5em;
	}
		.tgt_menu .tgt_menu_wrap .cnb_n_list li,
		.tgt_menu .tgt_menu_slct > a {
			display: flex; justify-content: center; align-items: center; width: calc(50% - 4px);
		}
		.tgt_menu .tgt_menu_wrap .cnb_n_list li > a {
			margin: 0; width: 100%; padding: 4px 12px; font-size: 11px;
		}
		.tgt_menu .tgt_menu_slct > a.on {
			background: #f0f0f0;
		}
		.tgt_menu .tgt_menu_slct .bd_wrt_main {
			display: flex; align-items: center; width: 100%;
		}
			.tgt_menu .tgt_menu_slct .bd_wrt_main select {
				flex: 1;
			}
			.tgt_menu .tgt_menu_slct .bd_wrt_main .itx {
				margin-bottom: 0; width: 100%;
			}
			.tgt_menu .tgt_menu_slct .bd_wrt_main .bd_btn {
				margin-left: 4px;
			}
		.tgt_menu .tgt_menu_slct .bd_wrt_main.friend {
			position: relative;
		}
		.tgt_menu .tgt_menu_slct .bd_wrt_main.group {
			display: none; margin-top: 4px;
		}


/* member_info */

.rd_hd {
	margin:0 0 20px;
}
.rd_hd .board .top_area .fr {
	height: 24px; line-height: 24px;
}
.rd_hd .board .top_area .img {
	display: inline-block; width: 24px; margin: 0; padding: 0; border: none; border-radius: 50%; vertical-align: middle;
}
.rd_hd .board .top_area .np_18px {
	display: inline-block; vertical-align: middle; padding-left: 4px;
}
.rd_body .et_vars.bd_tb {
	display: table;
}
.rd_body .rhymix_content {
	margin-bottom: 20px;
}
.rd_body .et_info {
	margin-top: 36px;
}

	.net_info {
		margin-bottom: 32px;
	}
	.net_info .net_body,
	.net_info .net_body .flw,
	.net_info .net_body .flwr {
		padding: 4px 0;
	}
	.net_info .net_body .flw,
	.net_info .net_body .flwr {
		line-height: 2;
	}
	.net_info .net_body .flw span,
	.net_info .net_body .flwr span {
		vertical-align: middle;
	}
	.net_info .net_body .flw span.net_cnt,
	.net_info .net_body .flwr span.net_cnt {
		vertical-align: initial;
	}
	.net_info .net_body .net_tab {
		display: inline-flex; align-items: center; height: 24px; background-color: #f3f3f3; border-radius: 18px; vertical-align: middle;
	}
	.net_info .net_body .net_tab .net_img {
		width: 24px; margin-right: 4px; padding: 0; border: none; border-radius: 50%; vertical-align: middle;
	}
	.net_info .net_body .net_tab span {
		pointer-events: none;
	}

	.cnt_info {
		display: flex; flex-wrap: wrap; gap: 32px; overflow: hidden;
	}
	.cnt_info.col {
		flex-direction: column;
	}
	.cnt_info .cnt_docs,
	.cnt_info .cnt_coms {
		flex: 1;
	}
	.cnt_info .bd_m_lst {
		padding: 0;
	}
	.cnt_info .bd_m_lst.zine .cnt_title {
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
		height: 1em; line-height: 1em; overflow: hidden; font-size: 14px;
	}
	.cnt_info li {
		width: 100% !important; box-sizing: border-box;
	}
	.cnt_info .hx {
		border-width: 0;
	}


/* form */

.confirm {
	display: flex; justify-content: center; align-items: center; flex-direction: column;
	margin: 0 auto; max-width: 320px; border: none;
}
.confirm h1 {
	word-break: keep-all;
}
.confirm .itx {
	width: 100%; height: 32px; margin-bottom: 8px;
}
.confirm span.help-inline {
	margin: -8px 0 8px 40px; text-align: left;
}
.confirm .bd_btn {
	margin: 0; height: 32px;
}


/* login */
.confirm#fo_member_login {
	padding: 24px; background-color: #fcfcfc; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 3px #eee; box-sizing: border-box;
	align-items: baseline;
}
.confirm#fo_member_login h1 {
	margin: 8px 0 24px; width: 100%; text-align: center;
}
.confirm#fo_member_login label {
	display: flex;
}
.confirm#fo_member_login label input[type="checkbox"] {
	margin-right: 4px;
}
.confirm#fo_member_login #warning {
	display: none;
}
.confirm#fo_member_login #warning p {
	margin: 0; padding: 0 0 0 20px; text-align: justify;
}
.confirm#fo_member_login .bd_btn {
	margin: 8px 0 0; width: 100%;
}
.confirm#fo_member_login .login_footer {
	display: flex; margin-top: 12px; width: 100%; justify-content: space-between; align-items: center;
}


/* find_account */
.find_info {
	display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-evenly;
}
.find_info section {
	flex: 1;
}
.find_info section.col {
	flex-direction: column;
}
.find_info h1 {
	margin-bottom: 0;
}
.find_info hr {
	margin: 40px 0; width: 1px; border: 0;
}
.find_info hr.col {
	margin: 0px 40px; width: calc(100% - 80px); height: 1px;
}


/* modify_profile */
.bd_wrt input[type="text"],
.bd_wrt input[type="tel"] {
	display: inline-block; margin: 0; height: 28px; padding: 3px 6px;
	background: #FAFAFA; border-radius: 3px; border: 1px solid; border-color: #BBB #DDD #DDD #BBB; outline: none;
	box-sizing: border-box; transition: border .4s,background .4s; cursor: default;
}
.bd_wrt input[type="text"]:hover,
.bd_wrt input[type="text"]:focus,
.bd_wrt input[type="tel"]:hover,
.bd_wrt input[type="tel"]:focus {
	background-color: #FFF; border-color: #AAA;
}
.bd_wrt #profile_imagetag {
	position: relative; display: inline-block; margin-right: 4px; width: 90px; vertical-align: bottom;
}
.bd_wrt #profile_imagetag img {
	display: block; margin-bottom: 4px;
}
.bd_wrt #profile_imagetag button {
	position: absolute; display: flex; justify-content: center; align-items: center; bottom: 4px; left: 0;
	width: 24px; height: 24px; padding: 0; background-color: transparent; border: 2px solid #ccc; border-radius: 50%; color: #ccc; font-size: 14px;
}
.bd_wrt input[type="file"] {
	display: inline-block; margin-bottom: 4px; vertical-align: bottom;
}
.bd_wrt textarea {
	height: 240px !important;
	outline: none;
}
.bd_wrt label {
	margin-right: 8px;
}
.bd_wrt input[type=radio],
.bd_wrt input[type=checkbox] {
	margin: 0;
}

/* signup_form */
.bd_wrt .agreement {
	margin-bottom: 24px;
}
.bd_wrt .agreement .title {
	font-weight: bold;
}
.bd_wrt .agreement .text {
	background-color: #fcfcfc; padding: 24px; max-height: 240px; overflow-y: auto; transition: background-color .4s;
}
.bd_wrt .agreement .text:hover,
.bd_wrt .agreement .text:focus {
	background-color: #ffc;
}
.bd_wrt .agreement .confirm_check {
	margin: 4px 0 0 4px;
}
	.bd_wrt .agreement .confirm_check label {
		display: flex;
	}
	.bd_wrt .agreement .confirm_check input[type=checkbox] {
		margin-right: 4px;
	}
.bd_wrt .g-recaptcha {
	display: table; margin: 0 auto;
}


/* document/comment/scrapped/saved/voted_list */
.my_cnts,
.my_cnts * {
	box-sizing: border-box;
}
.my_cnts .cnt_status {
	padding-left: 12px; font-size: 11px; font-weight: bold;
}
.my_cnts .bd_zine {
	margin-top: -20px; padding: 0;
}
	.my_cnts .bd_zine li {
		width: auto;
	}
	.my_cnts .bd_zine.zine li:first-child {
		border-top: none;
	}
	.my_cnts .bd_m_lst.zine h3 {
		font-size: 14px;
	}
.my_cnts .btm_mn {
	margin: 24px auto 0; max-width: 480px; padding: 0; border-top: none;
}
	.my_cnts .bd_faq_srch {
		display: block; margin-bottom: 0;
	}

.my_cnts.scrapped .scr_comm {
	display: flex; justify-content: space-between; align-items: center; padding: 0 12px;
}
	.my_cnts.scrapped .scr_comm .fldr_slct {
		display: flex; flex: 1;
	}
.my_cnts.scrapped .bd_zine {
	margin-top: 12px;
}
.my_cnts.scrapped .bd_zine li,
.my_cnts.saved .bd_zine li,
.my_cnts.active_logins .bd_zine li {
	display: flex; justify-content: space-between;
}
.my_cnts.scrapped .bd_zine li.no_doc,
.my_cnts.saved .bd_zine li.no_doc,
.my_cnts.active_logins .bd_zine li.no_doc {
	display: block;
}
.my_cnts.scrapped .bd_zine.zine li:first-child {
	border-top: 1px solid #DDD;
}
.my_cnts.scrapped .bd_m_lst .rt_area,
.my_cnts.saved .bd_m_lst .rt_area,
.my_cnts.active_logins .bd_m_lst .rt_area {
	flex: 1;
}
.my_cnts.scrapped .bd_zine > li > a,
.my_cnts.saved .bd_zine > li > a {
	right: 84px;
}
.my_cnts.scrapped .del_move,
.my_cnts.saved .del_move,
.my_cnts.active_logins .del_move {
	margin-left: 16px; width: 72px;
}
	.my_cnts.scrapped .del_move button,
	.my_cnts.scrapped .del_move select,
	.my_cnts.saved .del_move button,
	.my_cnts.active_logins .del_move button	{
		width: 100%;
	}

.my_cnts.voted {
	margin-top: -21px;
}
.my_cnts.voted.both {
	margin-top: -8px;
}
.my_cnts.voted .vtd_comm {
    display: flex; justify-content: space-between; align-items: center; padding: 0 12px;
}
.my_cnts.voted .vtd_comm .fldr_slct {
	display: flex;
	flex: 1;
}
	.my_cnts.voted.centered .vtd_comm .fldr_slct {
		justify-content: center;
	}
.my_cnts.voted .bd_zine {
	margin-top: 4px;
}
	.my_cnts.voted .bd_zine.zine li:first-child {
		border-top: 1px solid #DDD;;
	}
@media screen and (max-width: 533px) {
	.my_cnts .vtd_comm {
		padding: 0 2px 4px;
	}
	.my_cnts.voted .cnb3 > li {
		width: auto;
	}
	.my_cnts.voted .cnb3 > li > a {
		padding: 5px 16px;
	}
}
@media screen and (max-width: 360px) {
	.my_cnts.voted .cnb3 > li {
		width: auto;
	}
}

/* message/friend */
.my_comm,
.my_comm * {
	box-sizing: border-box;
}

.my_comm .comm_cmd {
	display: flex; justify-content: space-between; align-items: center; padding: 0 12px 4px;
}
	.my_comm .comm_cmd .fldr_slct {
		display: flex; flex: 1;
	}
	.my_comm .comm_cmd .fldr_slct.alter {
		display: none;
	}
	.my_comm .comm_cmd .fldr_cnfg {
		display: flex;
	}
		.my_comm .comm_cmd .fldr_cnfg .new_msg {
			position: relative; margin-right: 8px; font-size: 16px; color: #ccc;
		}
		.my_comm .comm_cmd .fldr_cnfg .new_msg span {
			position: absolute; top: 0; right: -4px; display: flex; justify-content: center; align-items: center;
			font-size: 12px; color: #999;
		}
		.my_comm .comm_cmd .fldr_cnfg a.new_msg {
			color: #333;
		}
		.my_comm .comm_cmd .fldr_cnfg a.new_msg span {
			color: #f99;
		}
		.my_comm .comm_cmd .chng_inf {
			padding: 4px 16px; background-color: #f3f3f3; border-radius: 18px;
		}
		.my_comm .comm_cmd .set_msg_rcv .btn_img {
			margin: 8px 0; width: auto;
		}
		.my_comm .comm_cmd .set_msg_grp .btn_img {
			flex: auto; width: auto;
		}
		.my_comm .comm_cmd .set_msg_grp .bd_wrt_main.group {
			display: flex;
		}

.my_comm.friend.centered .comm_cmd {
	display: block;
}
	.my_comm.friend.centered .comm_cmd .fldr_slct {
		justify-content: center;
	}
	.my_comm.friend.centered .comm_cmd .fldr_cnfg {
		justify-content: flex-end; margin-top: 12px;
	}

.frnd_cnts {
	margin-top: 20px;
}
	.frnd_cnts .no_frnd,
	.frnd_cnts .has_frnd {
		width: 100%;
	}
	.frnd_cnts .has_frnd .net_info {
		margin-bottom: 0;
	}
.frnd_cnts .bd_zine.random {
	display: block; padding: 12px 0 !important; width: 100%; white-space: nowrap; overflow-x: auto; text-align: center;
}
	.frnd_cnts .bd_zine.random::-webkit-scrollbar {
		height: 8px;
	}
	.frnd_cnts .bd_zine.random::-webkit-scrollbar-thumb {
		background: #ccc; border-radius: 12px;
	}
	.frnd_cnts .bd_zine.random::-webkit-scrollbar-track {
		background: #cccccc50;
	}
.frnd_cnts .bd_zine.random li {
	display: inline-block; margin-left: 16px; width: 120px !important; border: 1px solid #ddd; border-radius: 4px;
	box-sizing: border-box; box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}
.frnd_cnts .bd_zine.random li:first-child {
	margin-left: 0; border-top: 1px solid #ddd;
}
.frnd_cnts .bd_m_lst.random .is_tmb {
	padding: 0;
}
.frnd_cnts .bd_m_lst.random .is_tmb .tmb_wrp {
	display: flex; justify-content: center; margin: 0; float: none;
}
	.bd_m_lst.random .tmb_wrp img {
		border-radius: 50%;
	}
	.bd_m_lst.random img.tmb.no_prf {
		opacity: .2;
	}
.bd_m_lst.zine.random .cnt_title {
	display: block; margin: 6px auto 8px; text-overflow: ellipsis;
}
.bd_zine.zine.random .info {
	height: 2em; overflow: hidden;
}
.bd_zine.zine.random .info > span {
	display: block; margin: 0; padding: 0;
}
.bd_m_lst.random .info b {
	display: block; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.friend_list {
	margin-top: 16px;
}
.friend_list .frnd_status {
	display: flex;
}
.friend_list .frnd_status input {
	margin-left: 8px;
}
.friend_list .bd_zine {
	display: flex; flex-wrap: wrap; gap: 24px; padding: 0;
}
.friend_list .bd_m_lst.zine > li {
	width: calc(50% - 12px); padding: 20px; background-color: #fcfcfc; border: 1px solid #ccc; border-radius: 8px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box; transition: box-shadow .4s;
}
.friend_list .bd_m_lst.zine > li:hover,
.friend_list .bd_m_lst.zine > li:focus {
	box-shadow: 0 1px 4px rgb(0 0 0 / 24%);
}
.friend_list .bd_zine.zine .tmb_wrp img {
	border-radius: 50%;
}
.friend_list .bd_zine.zine .tmb_wrp img.no_prf {
	background: transparent; border-color: transparent; opacity: .2;
}
.friend_list .bd_lst input[type="checkbox"] {
	position: absolute; top: 8px; right: 8px;
}
.friend_list .bd_zine .frnd_cmd {
	flex: 1; display: flex; justify-content: center; align-items: center; white-space: nowrap;
}
.friend_list .bd_zine .frnd_cmd span {
	margin: 0 4px;
}

@media screen and (max-width: 640px) {
	.message_list .bd_lst input,
	.friend_list .bd_lst input {
		display: inline-block;
	}
	.friend_list .bd_btn,
	.friend_list .btn_img,
	.friend_list .itx,
	.friend_list select {
		height: 28px;
	}
}
@media screen and (max-width: 533px) {
	.my_comm .comm_cmd {
		padding: 0 2px 4px;
	}
	.my_comm.friend .cnb3 > li,
	.my_comm.notify .cnb3 > li {
		width: auto;
	}
	.my_comm.friend .cnb3 > li > a,
	.my_comm.notify .cnb3 > li > a {
		padding: 5px 16px;
	}
	.friend_list .frnd_status {
		padding: 0 12px;
	}
	.friend_list .bd_zine {
		padding: 0 12px !important;
	}
	.friend_list .bd_m_lst.zine > li {
		width: 100%
	}
}
@media screen and (max-width: 360px) {
	.my_comm.friend .cnb3 > li,
	.my_comm.notify .cnb3 > li {
		width: auto;
	}
}


/* ncenter : notify_list */

@media screen and (max-width: 640px) {
	.notify_list .bd_lst input {
		display: inline-block;
	}
}


/* ncenter : config */

.ncenter_config,
.ncenter_config * {
	box-sizing: border-box;
}
	.ncenter_config .config_list {
		display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px;
	}
	.ncenter_config fieldset {
		flex: auto; margin: 0; padding: 0; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; transition: background-color .4s;
	}
	.ncenter_config fieldset:hover {
		background-color: #f9f9f9;
	}
	.ncenter_config legend {
		margin: 0 0 0 8px; padding: 0 8px 0 6px; font-size: 12px;
	}
	.ncenter_config .labels {
		display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 12px 36px 4px 12px; font-size: 14px;
	}
	.ncenter_config label {
		display: flex; margin-left: 12px;
	}
	.ncenter_config label input[type="checkbox"] {
		margin: 0 4px 0 0;
	}
	.ncenter_config .desc {
		margin: 0; padding: 0 24px 16px; font-size: 12px;
	}
	.ncenter_config .regist {
		margin-top: 24px; text-align: center;
	}
		.my_comm .ncenter_config .labels {
			gap: 8px; padding: 12px 12px 12px 16px; font-size: 12px;
		}
		.my_comm .ncenter_config label {
			margin-left: 0;
		}
		.my_comm .ncenter_config .desc {
			display: none;
		}


/* ncenter : unsubscribe_list */

.unsubscribe_list {
    margin-top: 16px;
}
.unsubscribe_list .bd_zine {
    display: flex; flex-wrap: wrap; gap: 24px; padding: 0;
}
.unsubscribe_list .bd_zine h3 {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unsubscribe_list .bd_m_lst.zine > li {
    flex: auto; padding: 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box; transition: box-shadow .4s, background-color .4s;
}
.unsubscribe_list .bd_m_lst.zine > li:hover {
    background-color: #f9f9f9; box-shadow: 0 1px 4px rgb(0 0 0 / 16%);
}
.unsubscribe_list a:hover {
	text-decoration: none;
}
.unsubscribe_list form {
	position: absolute; top: 0; right: 0;
}
.unsubscribe_list form .fa-times {
	position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; line-height: 1.6;
	font-size: 16px; color: #aaa; text-align: center; cursor: pointer; box-sizing: border-box;
}


/* point_history */
.my_comm.pointhistory {
	margin-top: -8px;
}
.history_list .bd_tb_lst {
	margin-top: 0;
}
	.history_list .blue td {
		background-color: #eeeeff50;
	}
	.history_list .blue td.m_no {
		color: #66c;
	}
	.history_list .red td {
		background-color: #ffeeee50
	}
	.history_list .red td.m_no {
		color: #c66;
	}

.my_comm.pointhistory.centered .comm_cmd {
	display: block;
}
	.my_comm.pointhistory.centered .comm_cmd .fldr_slct {
		justify-content: center;
	}
	.my_comm.pointhistory.centered .comm_cmd .fldr_cnfg {
		justify-content: flex-end; margin-top: 12px;
	}

@media screen and (max-width: 533px) {
	.my_comm.pointhistory .cnb3 > li {
		width: auto;
	}
	.my_comm.pointhistory .cnb3 > li > a {
		padding: 5px 16px;
	}
}
@media screen and (max-width: 360px) {
	.my_comm.pointhistory .cnb3 > li {
		width: auto;
	}
}
/* ----------------------------------------------------
   라이믹스 모던 회원가입 (jg-) 레이아웃 맞춤형 최종 디자인
---------------------------------------------------- */
:root {
    --jg-primary: #4f46e5;       /* 포커스 및 포인트 인디고 블루 */
    --jg-primary-hover: #4338ca;
    --jg-gray-900: #111827;
    --jg-gray-700: #374151;
    --jg-gray-500: #6b7280;
    --jg-gray-300: #d1d5db;
    --jg-gray-100: #f3f4f6;
    --jg-gray-50: #f9fafb;
    --jg-danger: #ef4444;
    --jg-radius-lg: 12px;        /* 부드러운 라운딩 요소를 위한 값 */
    --jg-radius-md: 8px;
}

/* 전체 레이아웃 컨테이너 (부모 테마 너비에 100% 맞춤형으로 수정) */
.jg-signup-wrap {
    width: 100%;                 /* 고정 고정폭 대신 100%로 유연하게 변경 */
    max-width: 100%;             /* 테마 본문 영역 크기를 그대로 흡수 */
    margin: 30px 0 60px 0;       /* 좌우 마진을 없애고 상하 여백만 정돈 */
    padding: 0;                  /* 불필요한 이중 패딩 완전히 제거 */
    background: transparent;     /* 웹사이트 배경과 완벽 동화 */
    box-shadow: none;            /* 이질감을 주는 외부 거대한 그림자 제거 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: left;            /* 모든 요소의 기준선을 왼쪽 정렬 */
    box-sizing: border-box;
}

/* 상단 제목 영역 */
.jg-form-header {
    text-align: left;
    margin-bottom: 35px;
}
.jg-form-title {
    font-size: 28px;
    font-weight: 800;            /* 토스 스타일의 두껍고 트렌디한 서체감 */
    color: var(--jg-gray-900);
    letter-spacing: -0.7px;
    margin: 0 0 10px 0;
}
.jg-form-subtitle {
    font-size: 15px;
    color: var(--jg-gray-500);
    margin: 0;
}

/* 알림 및 코어 에러 메시지 박스 */
.jg-alert-message {
    width: 100%;
    margin: 20px 0;
    padding: 14px 16px;
    background-color: #fef2f2;
    border-left: 4px solid var(--jg-danger);
    border-radius: var(--jg-radius-md);
    color: #991b1b;
    font-size: 14px;
    text-align: left;
    box-sizing: border-box;
}

/* 이용약관 디자인 디테일 (너비 100% 최적화) */
.jg-agreement-section {
    width: 100%;
    background: #ffffff;         /* 약관 카드 섹션 바탕은 깔끔한 화이트 */
    border: 1px solid #e5e7eb;   /* 은은한 외곽 테두리 */
    border-radius: var(--jg-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    text-align: left;
    box-sizing: border-box;
}
.jg-agreement-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--jg-gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.jg-agreement-badge {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
}
.jg-agreement-badge.jg-required { background: #fee2e2; color: #ef4444; }
.jg-agreement-badge.jg-optional { background: var(--jg-gray-100); color: var(--jg-gray-700); }

/* 약관 본문 텍스트 박스 */
.jg-agreement-body-box {
    width: 100%;
    background: var(--jg-gray-50); /* 연한 그레이 배경 */
    border: 1px solid #e5e7eb;
    border-radius: var(--jg-radius-md);
    padding: 16px;
    height: 150px;               /* 우측 스크롤이 답답하지 않게 높이 보정 */
    overflow-y: auto;
    font-size: 14px;
    color: var(--jg-gray-700);
    line-height: 1.65;
    box-sizing: border-box;
}

/* 약관 체크박스 영역 */
.jg-agreement-checkbox-wrapper {
    margin-top: 14px;
    display: flex;
    justify-content: flex-start;
}

/* 필수 항목 기입 안내선 및 별표 */
.jg-required-star {
    color: var(--jg-danger) !important;
    margin-right: 2px;
    font-weight: bold;
}
.jg-section-notice {
    font-size: 13px;
    font-weight: 500;
    color: var(--jg-gray-500);
    text-align: left;            
    margin-bottom: 20px;
}

/* 일반 가입 입력 폼 영역 */
.jg-form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    text-align: left;
    box-sizing: border-box;
}
.jg-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--jg-gray-900);
    margin-bottom: 8px;
}

/* 인풋 입력 필드 (너비 깨짐 방지 처리) */
.jg-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;      /* 패딩이 너비를 삐져나가지 않게 강제 고정 */
    padding: 13px 16px;          
    font-size: 15px;
    border: 1px solid var(--jg-gray-300);
    border-radius: var(--jg-radius-md);
    color: var(--jg-gray-900);
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
}
/* 입력창 포커스 시 테두리 하이라이트 */
.jg-input:focus {
    outline: none;
    border-color: var(--jg-primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}
.jg-helper-text {
    font-size: 12px;
    color: var(--jg-gray-500);
    margin: 6px 0 0 2px;
}

/* 체크박스 및 라디오 버튼 */
.jg-checkbox-label, .jg-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--jg-gray-700);
}
.jg-checkbox, input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--jg-primary); 
    cursor: pointer;
}
.jg-radio-flex {
    display: flex;
    gap: 24px;
    padding: 6px 0;
}

/* 서명 에디터 박스 */
.jg-editor-inner-box {
    width: 100%;
    border: 1px solid var(--jg-gray-300);
    border-radius: var(--jg-radius-md);
    overflow: hidden;
    box-sizing: border-box;
}

/* 하단 버튼 영역 */
.jg-form-actions {
    width: 100%;
    display: flex;
    gap: 12px;
    margin-top: 35px;
    box-sizing: border-box;
}
.jg-btn {
    flex: 1;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--jg-radius-md);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border: none;
    text-align: center;
}
.jg-btn-primary {
    background-color: var(--jg-primary);
    color: #ffffff;
}
.jg-btn-primary:hover {
    background-color: var(--jg-primary-hover);
}
.jg-btn-secondary {
    background-color: var(--jg-gray-100);
    color: var(--jg-gray-700);
}
.jg-btn-secondary:hover {
    background-color: var(--jg-gray-300);
}

/* 라이믹스 확장변수 예외 처리 */
.jg-dynamic-input-target {
    width: 100%;
}
.jg-dynamic-input-target br {
    display: none;
}

/* Original file: modules/isx/tpl/css/jquery.autocomplete.css */

/**
 * @fileOverview CSS for jquery-autocomplete, the jQuery Autocompleter
 * @author <a href="mailto:dylan@dyve.net">Dylan Verheul</a>
 * @license MIT | GPL | Apache 2.0, see LICENSE.txt
 * @see https://github.com/dyve/jquery-autocomplete
 */
.acResults {
	padding: 0px;
	border: 1px solid #ddd;
	color: #666666;
	background-color: White;
	overflow: hidden;
	z-index:2000;
}

.acResults ul {
	margin: 0px;
	padding: 0px;
	list-style-position: outside;
	list-style: none;	
}

.acResults ul li {
	margin: 0px;
	padding: 5px 8px;
	cursor: pointer;
	display: block;
	font: menu;
	font-size: 12px;
	overflow: hidden;
}

.acLoading {
	background : url("../../../../modules/isx/tpl/css/indicator.gif") right center no-repeat;
}

.acSelect {
	background-color: #F5F5F5;
	color: #666666;
}

.acResults div {
	position:relative;
	text-align:right;
	border-top:1px solid #ddd;
	background:#f7f7f7;
	padding:5px;
	color:#666;
}

.acResults span:hover {
	cursor:pointer;
	text-decoration:underline;
}

.acResult span {
	cursor:pointer;
}

/* Original file: widgets/junggonala_login/skins/junggo/css/white.css */

/* 1. 공통 초기화 및 외곽 틀 */
.login_white, .trend_login_card { 
    box-sizing: border-box; 
    font-family: sans-serif; 
}

.login_white { 
    width: 100%; 
    max-width: 236px; 
    font-size: 12px; 
}

.login_white fieldset {
    position: relative; 
    border: none !important; 
    background: transparent !important; 
    box-shadow: none !important; 
    padding: 12px 15px !important; 
    margin: 0 !important;
    overflow: hidden;
}


/* 2. 로그인 전 화면 (입력 폼) */
.login_white fieldset .idpwWrap { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

.login_white fieldset .idpw { 
    width: 140px; 
}

.login_white fieldset .idpw input {
    border: 1px solid #e2e8f0; 
    color: #1e293b; 
    width: 100%; 
    background: #f8fafc;
    padding: 6px 8px; 
    margin-bottom: 3px; 
    font-size: 11px; 
    border-radius: 5px; 
    box-sizing: border-box;
}

.login_white fieldset .idpw input:focus { 
    border-color: #2990e4; 
    background: #fff; 
    outline: none; 
}

.login_white fieldset .idpw input:last-child { 
    margin-bottom: 0; 
}

.login_white fieldset .login { 
    margin: 0; 
    float: right; 
    border: 0; 
width: 56px;
    height: 54px
    cursor: pointer; 
}


/* 3. 로그인 전 화면 (보안 및 로그인 유지) */
.login_white fieldset p.securitySignIn { 
    margin: 6px 0 0 2px; 
    display: flex; 
    align-items: center; 
    min-height: 14px; 
    padding-left: 16px; 
}

.login_white fieldset p.noneSSL { 
    background: url("../../../../widgets/junggonala_login/skins/junggo/images/none_ssl.png") no-repeat left center; 
    background-size: 11px; 
}

.login_white fieldset p.SSL { 
    background: url("../../../../widgets/junggonala_login/skins/junggo/images/ssl.png") no-repeat left center; 
    background-size: 11px; 
}

.login_white fieldset p.securitySignIn button.text { 
    background: none; 
    border: none; 
    padding: 0; 
    margin: 0; 
    font-size: 11px; 
    cursor: pointer; 
}

.login_white fieldset p.noneSSL button.text { 
    color: #f97316; 
}

.login_white fieldset p.SSL button.text { 
    color: #10b981; 
}

.login_white fieldset p.keep { 
    margin: 0; 
    display: flex; 
    align-items: center; 
}

.login_white fieldset p.keep input { 
    width: 12px; 
    height: 12px; 
    margin-right: 4px; 
    border: 0; 
}

.login_white fieldset p.keep label { 
    font-size: 11px; 
    color: #64748b; 
    cursor: pointer; 
}


/* 4. 로그인 전 화면 (하단 링크) */
.login_white fieldset ul.help {
    margin: 10px 0 0 0; 
    padding: 8px 0 0 0; 
    border-top: 1px solid #f1f5f9;
    list-style: none; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    white-space: nowrap;
}

.login_white fieldset ul.help li { 
    padding: 0 3px; 
    background: url("../../../../widgets/junggonala_login/skins/junggo/images/white/vrType1.gif") no-repeat left center; 
    line-height: 12px; 
}

.login_white fieldset ul.help li:first-child { 
    background: none; 
    padding-left: 0; 
}

.login_white fieldset ul.help li a { 
    color: #64748b; 
    text-decoration: none; 
    font-size: 11px; 
}

.login_white fieldset ul.help li a:hover { 
    color: #000; 
    text-decoration: underline; 
}


/* 5. 로그인 후 화면 (프로필 헤더) */
.card_header { 
    display: flex; 
    align-items: center; 
    position: relative; 
    padding: 6px; 
}

.user_avatar { 
    width: 30px; 
    height: 30px; 
    background: #f1f4f6; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 10px; 
}

.user_avatar i { 
    font-size: 15px; 
    color: #bcc4cc; 
}

.user_meta { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.nickname_row { 
    display: flex; 
    align-items: center; 
    line-height: 1.2; 
}

.user_meta .user_name { 
    font-size: 13px; 
    font-weight: 700; 
    color: #1e2022; 
    text-decoration: none; 
    max-width: 90px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.user_meta .user_nim { 
    font-size: 11px; 
    color: #616e7c; 
    margin-left: 2px; 
}

.btn_admin_tag { 
    background: #e6f4fe; 
    color: #2990e4; 
    font-size: 9px; 
    font-weight: bold; 
    padding: 1px 5px; 
    border-radius: 3px; 
    margin-top: 2px; 
    text-decoration: none; 
}


/* 6. 로그인 후 화면 (새 로그아웃 버튼) */
.btn_logout_text {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 11px;
    color: #64748b; 
    background: #ffffff;
    border: 1px solid #e2e8f0; 
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.btn_logout_text:hover {
    color: #ef4444;
    border-color: #fecaca;
    background: #fff5f5;
}


/* 7. 로그인 후 화면 (2x2 메뉴 단추) */
.card_body { 
    margin-top: 2px; 
    margin-bottom: 2px; 
    padding: 10px; 
}

.trend_menu_grid { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 6px 8px; 
}

.trend_menu_grid li a { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: flex-start; 
    background: #f8fafc; 
    padding: 4px 6px !important; 
    border-radius: 6px; 
    text-decoration: none; 
}

.trend_menu_grid li a:hover { 
    background: #f1f4f6; 
}

.icon_wrapper { 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 5px; 
    flex-shrink: 0; 
}

.icon_wrapper i { 
    font-size: 9px; 
}


/* 8. 메뉴별 파스텔 색상 정의 및 폰트 */
.c_blue { background: #e6f4fe; color: #2990e4; }
.c_green { background: #e6f9f0; color: #10b981; }
.c_orange { background: #fff4eb; color: #f97316; }
.c_pink { background: #fff0f6; color: #f43f5e; }

.menu_text { 
    font-size: 11px !important; 
    color: #475467; 
    font-weight: 500; 
    letter-spacing: -0.5px; 
}

.trend_menu_grid li a:hover .menu_text { 
    color: #101828; 
}

/* Original file: widgets/content/skins/junggo/css/widget.css */

.floatLeft{ float:left;}
.floatRight{ float:right;}
.clearLeft{ clear:left;}
.clearRight{ clear:right;}

.widgetContainer .open{ display:block !important;}
.widgetContainer a{ text-decoration:none;}
.widgetContainer a:hover,
.widgetContainer a:active,
.widgetContainer a:focus{ text-decoration:underline;}
.widgetContainer img{ border:0;}
.widgetContainer em{ position:relative; line-height:1; display:inline-block; margin:-5px 0; *padding:0 1px; font-style:normal;}
.widgetContainer form{ margin:0; padding:0;}
.widgetContainer fieldset{ border:0; margin:0; padding:0;}

.widgetTabA{ position:relative; margin:0 0 10px 0; padding:0; border-bottom:2px solid;}
.widgetTabA:after{ content:""; display:block; clear:both;}
.widgetTabA li{ float:left; margin-right:1px; list-style:none; background-repeat:no-repeat; background-position:0 0;}
.widgetTabA li.active{ background-position:0 -30px;}
.widgetTabA li a{ position:relative; left:2px; float:left; height:20px; padding:8px 15px 0 15px; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position:right 0;}
.widgetTabA li.active a{ background-position:right -30px; font-weight:bold; letter-spacing:-1px;}

ul.widgetA { margin:0; padding:0; list-style:none; }
ul.widgetA li { margin:0; padding:0; list-style:none; }
.widgetTableA { width:100%; font-size:12px; position:relative; border:0;}
.widgetTableA td{ border:0; line-height:1.5; white-space:nowrap; vertical-align:top; padding:1px 5px 1px 5px;}
.widgetTableA td.title{ width:100%; white-space:normal;}
.widgetTableA td .board{ padding-right:5px;}
.widgetTableA td .notice{ padding-right:5px;}
.widgetTableA td .category{ padding-right:5px; font-weight:normal;}
.widgetTableA td .replyNum a{ font:10px Tahoma;}
.widgetTableA td .trackbackNum a{ font:10px Tahoma;}
.widgetTableA td.summary{ white-space:normal;}
.widgetTableA td.time{ font-size:11px; font-family:Tahoma;}


.widgetTabC{ margin:0; padding:0; font-size:12px; border-top:1px solid;}
.widgetTabC li{ list-style:none; border-bottom:1px solid; margin-bottom:1px;}
.widgetTabC li a{ display:block; padding:7px 0 6px 10px; text-decoration:none;}

dl.widgetDivider{ margin:0;}
dl.widgetDivider dt{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}
dl.widgetDivider dd{ display:none; margin:0;}

.widgetNavigator{ margin:0; padding:0; text-align:right; clear:both;}
.widgetNavigator li{ list-style:none; display:inline;}
.widgetNavigator li button{ width:16px; height:16px; padding:0; background-color:transparent; background-image:url("../../../../widgets/content/skins/junggo/img/white/buttonWidgetNavigation.gif"); border:1px solid #999; cursor:pointer;}
.widgetNavigator li button.prev{ background-position:left center; *background-position:-1px center;}
.widgetNavigator li button.next{ background-position:right center; *background-position:13px center;}
.widgetNavigator li button span{ position:absolute; display:block; width:0; height:0; overflow:hidden; visibility:hidden;}



/* widgetThumb */
.widgetThumb{ position:relative; margin:0; text-align:center; font-size:12px; line-height:1.5;}
.widgetThumb .thumb{ display:block; margin-bottom:5px; position:relative; text-decoration:none;}
.widgetThumb .thumb img{ display:block; width:100%;}
.widgetThumb .thumb .imgNone{ display:block; position:relative; width:100%; padding-top:30px; padding-bottom:50px; background:#eee; text-align:center; cursor:pointer; color:#000;}
.widgetThumb .thumb .category{ display:block; position:absolute; width:100%; bottom:0; left:0; padding:2px 0 0 0 !important; cursor:pointer; text-align:center; font-weight:normal; background:#000; color:#fff; opacity:0.6;  filter:alpha(opacity=60); -ms-filter:alpha('opacity=60'); }
.widgetThumb .title{ display:block;}
.widgetThumb .author{ display:block;}
.widgetThumb .date{ font-size:11px; font-family:Tahoma;}
.widgetThumb .hour{ font-size:11px; font-family:Tahoma;}

.widgetZineA{ position:relative; margin:0; padding:0; font-size:12px; line-height:1.5; }
.widgetZineA:after{ content:""; display:block; clear:both;}
.widgetZineA li { list-style:none; clear:both; margin-bottom:10px; padding-bottom:10px; overflow:hidden; }
.widgetZineA li p{ margin:0; padding:0;}
.widgetZineA li p.thumbArea{ position:relative; float:left; width:100px; margin-right:-100px; overflow:hidden;}
.widgetZineA li p.titleArea{ margin-left:120px; margin-bottom:4px;}
.widgetZineA li p.titleArea .board{ padding-right:5px;}
.widgetZineA li p.text{ margin-left:120px; margin-bottom:4px;}
.widgetZineA li p.authorArea{ margin-left:120px;}
.widgetZineA li .thumb{ display:block; position:relative; width:100px; height:75px; text-decoration:none; overflow:hidden;}
.widgetZineA li .thumb img{ position:relative; width:100%;}
.widgetZineA li .thumb .imgNone{ display:block; position:relative; width:100%; height:80%; padding-top:20%; background:#eee; text-align:center; cursor:pointer; color:#000;}
.widgetZineA li .thumb .category{ display:block; position:absolute; width:100%; bottom:0; left:0; padding:2px 0 0 0 !important; cursor:pointer; text-align:center; font-weight:normal; background:#000; color:#fff; opacity:0.6;  filter:alpha(opacity=60); -ms-filter:alpha('opacity=60'); }
.widgetZineA li .category{ padding-right:5px; font-weight:normal;}
.widgetZineA li .title{ font-weight:bold;}
.widgetZineA li .replyNum a{ font:10px Tahoma; margin:0 -1px;}
.widgetZineA li .trackbackNum a{ font:10px Tahoma; margin:0 -1px;}
.widgetZineA li .author{ margin-right:10px;}
.widgetZineA li .date{ font:11px Tahoma;}
.widgetZineA li .hour{ font:11px Tahoma;}

.widgetTabC{ border-color:#e5e5e5;}
.widgetTabC li{ border-color:#e5e5e5; background:#f8f8f8;}
.widgetTabC li a{ color:#333;}
.widgetTabC li a:hover,
.widgetTabC li a:active,
.widgetTabC li a:focus{ background:#eee;}
.widgetTabA{ border-color:#666;}
.widgetTabA li,
.widgetTabA li a{ background-image:url("../../../../widgets/content/skins/junggo/img/white/buttonWidgetTab.gif");}
.widgetTabA li a{ color:#333;}

.widgetA a.board { color:#333; padding-right:5px; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetA .notice{ color:#ff1a1a; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetA .category{ color:#333; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetA .replyNum a{ color:#ff1a1a;}
.widgetA .trackbackNum a{ color:#66c;}
.widgetA .author { color:#333;}
.widgetA .date{ color:#333;}
.widgetA .hour{ color:#888;}

.widgetTableA td.title a{ color:#333;}
.widgetTableA td .board{ color:#333; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetTableA td .notice{ color:#ff1a1a; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetTableA td .category{ color:#333; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetTableA td .replyNum a{ color:#ff1a1a;}
.widgetTableA td .trackbackNum a{ color:#66c;}
.widgetTableA td .author { color:#333;}
.widgetTableA td .date{ color:#333;}
.widgetTableA td .hour{ color:#888;}



.widgetThumb{ color:#333;}
.widgetThumb a{ color:#333;}
.widgetThumb .hour{ color:#888;}

.widgetZineA li .board{ color:#333; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetZineA li .title{ color:#666;}
.widgetZineA li .replyNum a{ color:#ff1a1a;}
.widgetZineA li .trackbackNum a{ color:#66c;}
.widgetZineA li .author{ color:#333;}
.widgetZineA li .category{ color:#333; background:url("../../../../widgets/content/skins/junggo/img/white/lineTextDiv.gif") no-repeat right center;}
.widgetZineA li .date{ color:#333;}
.widgetZineA li .hour{ color:#888;}
.widgetZineA li .text{ color:#888;}

.widgetContainer.black .widgetTabC{ border-color:#7f7f7f;}
.widgetContainer.black .widgetTabC li{ border-color:#7f7f7f; background:#222;}
.widgetContainer.black .widgetTabC li a{ color:#999;}
.widgetContainer.black .widgetTabC li a:hover,
.widgetContainer.black .widgetTabC li a:active,
.widgetContainer.black .widgetTabC li a:focus{ background:#333;}
.widgetContainer.black .widgetTabA{ border-color:#999;}
.widgetContainer.black .widgetTabA li,
.widgetContainer.black .widgetTabA li a{ background-image:url("../../../../widgets/content/skins/junggo/img/black/buttonWidgetTab.gif");}
.widgetContainer.black .widgetTabA li a{ color:#999;}

.widgetContainer.black .widgetTableA td.title a{ color:#999;}
.widgetContainer.black .widgetTableA td .board{ color:#999; background:url("../../../../widgets/content/skins/junggo/img/black/lineTextDiv.gif") no-repeat right center;}
.widgetContainer.black .widgetTableA td .notice{ color:#ff1a1a; background:url("../../../../widgets/content/skins/junggo/img/black/lineTextDiv.gif") no-repeat right center;}
.widgetContainer.black .widgetTableA td .category{ color:#999; background:url("../../../../widgets/content/skins/junggo/img/black/lineTextDiv.gif") no-repeat right center;}
.widgetContainer.black .widgetTableA td .replyNum{ color:#ff1a1a;}
.widgetContainer.black .widgetTableA td .trackbackNum{ color:#66c;}
.widgetContainer.black .widgetTableA td .author { color:#999;}
.widgetContainer.black .widgetTableA td .date{ color:#999;}
.widgetContainer.black .widgetTableA td .hour{ color:#888;}



.widgetContainer.black .widgetThumb{ color:#999;}
.widgetContainer.black .widgetThumb a{ color:#999;}
.widgetContainer.black .widgetThumb .hour{ color:#888;}

.widgetContainer.black .widgetZineA li .board{ color:#999; background:url("../../../../widgets/content/skins/junggo/img/black/lineTextDiv.gif") no-repeat right center;}
.widgetContainer.black .widgetZineA li .title{ color:#999;}
.widgetContainer.black .widgetZineA li .replyNum a{ color:#ff1a1a;}
.widgetContainer.black .widgetZineA li .trackbackNum a{ color:#66c;}
.widgetContainer.black .widgetZineA li .author{ color:#999;}
.widgetContainer.black .widgetZineA li .category{ color:#999; background:url("../../../../widgets/content/skins/junggo/img/black/lineTextDiv.gif") no-repeat right center;}
.widgetContainer.black .widgetZineA li .date{ color:#999;}
.widgetContainer.black .widgetZineA li .hour{ color:#888;}
.widgetContainer.black .widgetZineA li .text{ color:#888;}
/* ==========================================================
   [교정본] 테이블형 셋업 (구조 무너짐 방지 및 우측 날짜 정렬 완결)
   ========================================================== */

/* 1. 테이블 기본 명세를 허물어 인라인 플렉스 행을 품을 수 있도록 뼈대 변환 */
.main-tbl-container { 
    width: 100% !important; 
    border-collapse: collapse; 
    border-spacing: 0; 
    border: none !important; 
}
.main-tbl-container,
.main-tbl-container tbody { 
    display: block !important; 
    width: 100% !important; 
}

/* 2. 한 줄(tr) 전체를 플렉스로 정의하여 제목-닉네임-날짜를 양끝 정렬 기조로 강제 배치 */
.main-tbl-container tr { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    width: 100% !important; 
    padding: 0 !important; 
    border: 0 !important; 
    box-sizing: border-box; 
    border-bottom:0 !important; /* 가독성을 위한 은은한 가로 경계 실선 */
}
.main-tbl-container tr:last-child { border-bottom: none !important; }

/* 3. td 고유의 칸막이 속성을 해제하고 유연한 플렉스 정렬 상자로 전환 */
.main-tbl-container td { 
    display: inline-flex !important; 
    align-items: center !important; 
    padding: 0; 
    border: none !important; 
    box-sizing: border-box; 
}

/* 4. [방 1] 제목 구역 셀 - 남은 여백폭을 전부 흡수하여 가장 넓게 쓰도록 유연폭 설정 */
.main-tbl-title-cell { 
    flex: 1 !important; 
    min-width: 0 !important; 
}

/* HTML에서 넘어온 핵심 구조선: 배지 및 제목 좌측 밀착 + 모바일 날짜와 양끝 분할 */
.main-tbl-content-flex { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    width: 100% !important; 
    padding:2px 0 !important; 
    gap: 8px; 
    box-sizing: border-box; 
}

/* 배지와 제목 텍스트를 위아래 2줄 수직 스택 구조로 다듬는 안착선 */
.main-tbl-left-side { 
   
    flex: 1 !important; 
    min-width: 0 !important; 
}
.main-lst-badge-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; flex-shrink: 0; }
.main-lst-title-group {display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; min-width: 0 !important; }
.main-lst-title-group a{ font-size: 13px; color: #535353 !important;}

/* 5. [방 2] 작성자 닉네임 셀 - 기존 100px 고정폭을 지키며 우측 정렬 */
.main-tbl-user-cell { 
    display: inline-flex !important; 
    justify-content: flex-end !important; 
    width: 100px !important; 
    max-width: 100px !important; 
    flex-shrink: 0 !important; 
    text-align: right; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    margin-left: 16px !important; 
}

/* 6. [방 3] PC 전용 날짜 셀 - 전체 줄에서 완벽하게 가장 오른쪽 벽면 끝으로 밀착 */
.main-tbl-time-cell { 
    display: inline-flex !important; 
    justify-content: flex-end !important; 
    width: 75px !important; 
    max-width: 75px !important; 
    flex-shrink: 0 !important; 
    text-align: right; 
    margin-left: 12px !important; 
}

/* 7. 모바일 전용 반응형 구역 (날짜 양끝 분할 완결) */
.main-tbl-right-side.m-only { display: none !important; } /* 기본 PC 화면에서는 모바일 날짜 숨김 */

@media (max-width: 768px) {
    /* 모바일에서는 줄 내부 요소를 세로로 흐르게 보정 */
    .main-tbl-container tr { 
        position: relative !important; 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 6px !important; 
        padding: 12px 8px !important;
    }
    .main-tbl-title-cell { width: 100% !important; }
    
    /* 모바일용 날짜방을 우측 하단 구석 벽면에 자석처럼 밀착 고정 */
    .main-tbl-right-side.m-only { 
        position: absolute !important; 
        right: 8px !important; 
        bottom: 12px !important; 
        display: inline-block !important; 
    }
    
    /* PC 온리 셀렉터들은 숨겨서 중복 노출 파괴 */
    .pc-only, .main-tbl-user-cell, .main-tbl-time-cell { display: none !important; }
}

.main-lst-icon img[src*="file"], 
.main-lst-icon img[src*="update"] { 
    display: none !important; 
}
/* 페이징 제어 */
.main-lst-nav { text-align: center; margin-top: 10px; clear: both; width: 100%; }
.main-lst-nav button { background: #fff; border: 1px solid #e2e8f0; padding: 3px 10px; font-size: 11.5px; color: #4a5568; cursor: pointer; border-radius: 4px; margin: 0 2px; }

/* ==========================================================
   ★ [핵심 정정] 디바이스 스위치 조건문 (PC 화면 제어)
   ========================================================== */
.m-only { display: none !important; } /* PC에서는 제목옆 날짜를 절대 숨김 */
.pc-only { display: block !important; }
td.pc-only { display: table-cell !important; }

/* ==========================================================
   ★ 모바일 반응형 2줄 구조 및 날짜 위치 교정 (768px 이하)
   ========================================================== */
@media screen and (max-width: 768px) {
    /* 모바일에서는 중복 방지를 위해 반대로 스위칭 */
    .m-only { display: inline-block !important; } /* 모바일에서만 제목옆 날짜 활성화 */
    .pc-only { display: none !important; }       /* 모바일에서 우측끝 날짜 차단 */
    
    .main-lst-meta-user, .main-tbl-user-cell, .main-lst-tag { display: none !important; }
    
    /* 상하 2줄 레이아웃 전환 */
    .main-lst-content, .main-tbl-content-flex { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 2px; }
    .main-tbl-container td { display: block; width: 100% !important; }
    
    /* 1단 배지 정렬 */
    .main-lst-badge-group { display: flex; width: 100%; margin-bottom: 1px; gap: 4px; }
    
    /* 2단 제목 정렬 및 모바일 전용 날짜 앵커 배치 */
    .main-lst-title-group { display: inline-flex; width: 100%; max-width: 100%; align-items: center; }
    .main-lst-title, .main-tbl-link { font-size: 13.5px; max-width: calc(100% - 75px) !important; }
    
    /* 제목 뒤로 들어간 모바일 날짜 디자인 미세 조정 */
    .main-lst-title-group .main-lst-date { font-size: 10.5px; color: #b2b2b2; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
    .main-lst-loc { display: inline-block !important; font-size: 10px; margin-left: 4px; max-width: 55px; padding: 0 3px; }
}


/* 기본 컨테이너 하우징 */
.prd-widget-list { display: block; list-style: none; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box; width: 100% !important; max-width: 100%; }
.prd-widget-list::after { content: ""; display: block; clear: both; }
.prd-widget-list li { float: left; margin: 0 10px 24px 10px; box-sizing: border-box; vertical-align: top; }
.prd-widget-list li.clear-left { clear: left; }

/* 상품 카드 프레임 */
.prd-card-item { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; height: 100%; }

/* 섬네일 하우징 및 절대위치 설정 */
.prd-thumb-wrap { display: block; position: relative; overflow: hidden; background-color: #f8f9fa; width: 100% !important; }
.prd-thumb-inner { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* [화질개선] 고해상도 모바일 디스플레이에서 압축된 이미지가 번지는 현상을 억제합니다 */
.prd-img { 
    display: block; 
    object-fit: cover; 
    width: 100%; 
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

/* 이미지 내부 우측 하단 정렬 하우징 공간 */
.prd-thumb-meta-right {
    position: absolute; bottom: 8px; right: 8px;
    box-sizing: border-box;
    display: flex; justify-content: flex-end; align-items: center; gap: 4px;
    pointer-events: none;
    z-index: 0;
    max-width: calc(100% - 16px);}

/* 지역명 불투명 다크 뱃지 */
.badge-img-loc { 
    display: inline-block; padding: 2px 6px; border-radius: 4px; 
    font-size: 10px; font-weight: 500; 
    background: rgba(33, 37, 41, 0.85); color: #ffffff !important; 
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65%; 
    letter-spacing: -0.3px; flex-shrink: 0;
}

/* 거래 방식 배송 디자인 미니 캡슐 배지 세트 */
.badge-img-type { display: inline-block; padding: 2px 5px; border-radius: 4px; font-size: 10px; font-weight: bold; letter-spacing: -0.2px; flex-shrink: 0; }
.badge-img-type.type-direct { background: rgba(241, 243, 245, 0.95); color: #495057; }
.badge-img-type.type-safe { background: rgba(227, 250, 252, 0.95); color: #0b7285; }
.badge-img-type.type-delivery { background: rgba(227, 250, 252, 0.95); color: #0b7285; }
.badge-img-type.type-free { background: rgba(255, 23, 23, 0.95); color: #ffffff; }
.badge-img-type.type-all { background: rgba(243, 240, 255, 0.95); color: #5f3dc4; }

/* 판매완료 심플 오버레이 */
.prd-sold-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; color: #ffffff; z-index: 2; }
.prd-sold-mask span { font-size: 13px; font-weight: bold; background: rgba(0, 0, 0, 0.7); padding: 5px 12px; border-radius: 4px; }
.prd-thumb-wrap.is-sold .prd-img { opacity: 0.6; }

/* NO IMAGE 백업 박스 */
.prd-thumb-inner.no-img { display: flex; align-items: center; justify-content: center; background-color: #f1f3f5; }
.prd-no-text { font-size: 11px; color: #adb5bd; font-weight: bold; }

/* 하단 정보 텍스트 영역 여백 가이드 */
.prd-body-content { padding: 12px 10px; display: flex; flex-direction: column; box-sizing: border-box; }

/* 상단 가격 및 시간 라인 */
.prd-info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.prd-price { font-size: 15px; color: #111111; font-weight: 700; letter-spacing: -0.2px; }
.prd-status { font-size: 12px; font-weight: bold; }
.prd-status.status-ing { color: #f76707; }
.prd-status.status-end { color: #868e96; }
.prd-date { font-size: 11px; color: #999999; }

/* 하단 상품 제목 (2줄 고정) */
.prd-title-box { display: block; height: 36px; overflow: hidden; }
.prd-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; color: #4e524a; line-height: 1.4; text-decoration: none; font-weight: 400; letter-spacing: -0.4px; }
.prd-title:hover { text-decoration: underline; color: #ff6f0f; }
.prd-reply-count a { font-size: 11px; font-weight: bold; color: #ff6f0f; text-decoration: none; margin-left: 2px; }

/* 소속 라벨 시스템 배지 */
.prd-badge-board { position: absolute;bottom: 10px; left: 6px; background: rgba(0, 0, 0, 0.6); color: #ffffff; font-size: 9px; padding: 1px 4px; border-radius: 3px; z-index: 2; }
.prd-nav-wrap { text-align: center; margin-top: 16px; clear: both; }
.prd-nav-wrap button { background: #ffffff; border: 1px solid #e2e8f0; padding: 5px 14px; font-size: 12px; color: #4a5568; cursor: pointer; border-radius: 4px; margin: 0 2px; }

/* ==========================================================
   ★ 모바일 환경 고성능 반응형 그리드 분기 (가로 2열 배열)
   ========================================================= */
@media screen and (max-width: 768px) {
    .prd-widget-list { width: 100% !important; padding: 0 6px !important; }
    .prd-widget-list li { width: calc(50% - 10px) !important; margin: 0 5px 14px 5px !important; clear: none !important; }
    .prd-widget-list li:nth-child(2n+1) { clear: left !important; }
    
    .prd-card-item { border-radius: 8px; }
    .prd-thumb-wrap { height: auto !important; aspect-ratio: 1 / 1; }
    .prd-img { height: 100% !important; }
    .prd-body-content { padding: 10px 6px; }
    
    .prd-info-row { margin-bottom: 4px; }
    .prd-title-box { height: 34px; }
    .prd-title { font-size: 12px; line-height: 1.4; }
    .prd-price { font-size: 14px; }
    .prd-date { font-size: 10px; }
    .prd-status { font-size: 11px; }
    .prd-thumb-meta-right { bottom: 6px; right: 6px; max-width: calc(100% - 12px); gap: 3px; }
    .badge-img-loc { font-size: 9px; padding: 1px 4px; border-radius: 3px; }
    .badge-img-type { font-size: 9px; padding: 1px 4px; border-radius: 3px; }
}