body {font-family: "Nanum Gothic", sans-serif;font-size:13px}
.gal {padding-left:2px;padding-right:2px}
.gal img{width: 100%; max-width:250px}
.tag {text-align:center}
.tag a{padding:6px;margin-bottom:3px;margin-left:3px}
.tag_select {background-color:#47282A;color:#FFE600;font-size:12px;font-weight:bold}

.msg_center {display:none;position:fixed;bottom:0px;width:100%;padding:20px;z-index:999;overflow:hidden; background-color:#513D3E;text-align:center;color:#FEF419;border: 1px solid #BEB0A8;}

#mask { position:absolute; z-index:100; background-color:#000; display:none; left:0; top:0; }
#fixed-menu {
  width: 100%;
  z-index:99;
  position: fixed;
  top: 0px;
  left: 0px;
}
a {color:#555555}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: none}
a:active {text-decoration: none}
.btn-group button{padding:6px;max-width:80px;font-size:12px}
.panel-heading {padding:3px}
.panel-body {padding:5px}
.panel-default {max-width:680px}
.sub_select {font-weight:bold;background-color:#0489B1;color:#ffffff}
.sub_select a{color:#ffffff}
.menu_shadow {
max-width: auto;
box-shadow: 2px 2px 4px grey;
}

.rowclear {clear: both;}

.login {
font-size:1.3em;
font-weight:bold;
padding-bottom:20px;
}

.container_menu {padding-left:6px;padding-right:6px}
.btn-default-tag {
  height:auto;
  margin: 0 auto;
  padding: 10px;
  border-radius: 20px;
  background-color: #2e6b6a;
  color: #ffffff;
  font-size: 1.0em;
  text-align: center;
  font-weight:bold;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-default-s-tag {
border: 0px solid #ffffff;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5);
color:#ffffff;
font-weight:none;
padding:5px;
margin: 0px 3px 5px 3px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-purple-s-tag {
    border: 0px solid #ffffff;
    border-radius: 10px;
    background-color: rgba(102, 16, 242, 0.7); /* ����� ��� */
    color: #ffffff; /* ��� ���� */
    font-weight: normal;
    padding: 5px;
    margin: 0px 3px 5px 3px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}


.btn-white-s-tag {
    border: 0px solid #000000;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9); /* ��� ��� */
    color: #000000; /* ������ ���� */
    font-weight: normal;
    padding: 5px;
    margin: 0px 3px 5px 3px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}


.btn-gray-s-tag {
    border: 0px solid #ffffff;
    border-radius: 10px;
    background-color: rgba(108, 117, 125, 0.7); /* ȸ�� ��� */
    color: #ffffff; /* ��� ���� */
    font-weight: normal;
    padding: 5px;
    margin: 0px 3px 5px 3px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-yellow-s-tag {
    border: 0px solid #ffffff;
    border-radius: 10px;
    background-color: rgba(255, 193, 7, 0.7); /* ����� ��� */
    color: #333333; /* ��ο� ���� */
    font-weight: normal;
    padding: 5px;
    margin: 0px 3px 5px 3px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-green-s-tag {
    border: 0px solid #ffffff;
    border-radius: 10px;
    background-color: rgba(40, 167, 69, 0.7); /* ��� ��� */
    color: #ffffff; /* ��� ���� */
    font-weight: normal;
    padding: 5px;
    margin: 0px 3px 5px 3px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-blue-s-tag {
    border: 0px solid #ffffff;
    border-radius: 10px;
    background-color: rgba(0, 123, 255, 0.7); /* �Ķ��� ��� */
    color: #ffffff; /* ��� ���� */
    font-weight: normal;
    padding: 5px;
    margin: 0px 3px 5px 3px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-default-s {
border-radius: 10px;

color:#ffffff;
font-weight:none;
padding:5px;
margin: 0px 3px 5px 3px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.top_a_img {width:24px;background-image: url('/img/starbucks-24.png'); background-repeat: no-repeat; background-position: 50% 50%}
.modal,modal-dialog{border-radius: 0px; }
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 250px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content {height: 100%;overflow-y: auto;}
.modal.left .modal-body,
.modal.right .modal-body {padding: 15px 15px 80px;}
/*Left*/
.modal.left.fade .modal-dialog{
left: -250px;
-webkit-transition: opacity 0.1s linear, left 0.1s ease-out;
-moz-transition: opacity 0.1s linear, left 0.1s ease-out;
-o-transition: opacity 0.1s linear, left 0.1s ease-out;
transition: opacity 0.1s linear, left 0.1s ease-out;
}
.modal.left.fade.in .modal-dialog{left: 0;}
/*Right*/
.modal.right.fade .modal-dialog {
right: -250px;
-webkit-transition: opacity 0.1s linear, right 0.1s ease-out;
-moz-transition: opacity 0.1s linear, right 0.1s ease-out;
-o-transition: opacity 0.1s linear, right 0.1s ease-out;
transition: opacity 0.1s linear, right 0.1s ease-out;
}
.modal.right.fade.in .modal-dialog {right: 0;}
.modal-content {
border-radius: 0;
border: none;
}
.modal-header {
border-bottom-color: #EEEEEE;
background-color: #FAFAFA;
}
.in-btn {background-color:#ffffff;border: 1px solid #555555;border-radius: 5px;padding:3px;cursor:pointer}
.in_help_box{background-color:#ffffff;border: 1px solid #cccccc;border-radius: 5px;padding:10px}
.in_help_box .fontsize {font-size:14px}
.in_help_box .title {font-weight:bold}
.in_help_box .fontsizesmall{font-size:12px}
.cpointer{cursor:pointer}
.bottom_info {max-width:500px;}
.bottom_info .info_box {border-top: 1px solid #dddddd;border-bottom: 0px solid #dddddd;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;border-radius: 0px;padding:10px;margin-bottom:0px}
.bottom_info .info_title {font-weight:bold;padding-right:3px;font-size:13px}
.bottom_info .info_doc {color:#666666;font-size:13px}
.bottom_info .info_box_bottom {border-bottom: 1px solid #dddddd;}
/* ── 짤방 카드 리스트 ── */
.jjal-item {
padding:6px;
margin-bottom:2px;
}

.jjal-card {
display:block;
position:relative;
border-radius:12px;
overflow:hidden;
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.1);
transition:transform .18s ease, box-shadow .18s ease;
cursor:pointer;
}

.jjal-card:hover {
transform:translateY(-4px);
box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.jjal-card-img {
position:relative;
width:100%;
padding-top:75%;
overflow:hidden;
}

.jjal-card-img .jjalbang_list_image {
position:absolute;
top:0; left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .3s ease;
}

.jjal-card:hover .jjal-card-img .jjalbang_list_image {
transform:scale(1.06);
}

.jjal-badge {
position:absolute;
top:7px;
right:7px;
padding:3px 7px;
border-radius:6px;
font-size:0.7em;
font-weight:700;
letter-spacing:.04em;
z-index:2;
}

.jjal-badge-gif {
background:rgba(255,70,0,.82);
color:#fff;
}

.jjal-badge-mp4 {
background:rgba(0,100,220,.82);
color:#fff;
}

.jjal-card-tags {
position:absolute;
bottom:0;
left:0;
right:0;
padding:22px 6px 7px;
background:linear-gradient(transparent, rgba(0,0,0,.58));
display:flex;
flex-wrap:wrap;
gap:4px;
z-index:2;
}

.jjal-card-title {
padding:9px 11px 0;
margin-bottom:9px;
font-size:1.0em;
font-weight:600;
color:#555;
line-height:1.5;
word-break:keep-all;
background:#fff;
display:block;
box-sizing:border-box;
height:calc(3em + 9px);
overflow:hidden;
}

.jjal-tag {
display:inline-block;
background:rgba(255,255,255,.15);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
border:1px solid rgba(255,255,255,.28);
color:#fff;
border-radius:20px;
font-size:0.72em;
font-weight:600;
padding:3px 8px;
text-decoration:none;
transition:background .15s ease;
text-shadow:0 1px 2px rgba(0,0,0,.5);
cursor:pointer;
}

.jjal-tag:hover {
background:rgba(255,255,255,.32);
color:#fff;
text-decoration:none;
}

.jjal-tag-del {
background:rgba(220,50,50,.7);
border-color:rgba(220,50,50,.4);
}

.jjal-tag-del:hover {
background:rgba(220,50,50,.9);
}

@media (max-width:480px) {
.jjal-item { padding:4px; }
.jjal-card-title { font-size:0.9em; height:calc(3em + 9px); }
.jjal-badge { font-size:0.62em; padding:2px 5px; top:5px; right:5px; }
.jjal-tag { font-size:0.65em; padding:2px 6px; }
.jjal-card-tags { padding:16px 5px 5px; gap:3px; }
}
/* ─────────────────────────── */

.img-cover{
       position: absolute;
       height: 100%;
       width: 100%;
       background-color: rgba(0, 0, 0, 0.7);
       z-index:1;
}

.tagdisplay
{
	border: 1px solid #aaaaaa;
	border-radius: 10px;
	font-size:14px;
	font-weight:bold;
	padding-right:3px;
	padding:7px;
	line-height:42px;
}
.sub_select {font-weight:bold;background-color:#0489B1;color:#ffffff}
.sub_select a {font-weight:bold;background-color:#0489B1;color:#ffffff}
.sub_item_select {font-weight:bold;background-color:#eeeeee;color:#006600}
.sub_item_select span {font-weight:bold;background-color:#eeeeee;color:#006600}
.container_menu {padding-left:6px;padding-right:6px}
.table {margin-bottom:5px;}
.table-bordered {}
.table-padding {padding:17px}
.table-padding .btn-padding{padding-top:10px;padding-bottom:10px;height:auto; text-align:center;vertical-align:middle}
.jjalbang_title {
margin-top:10px;
margin-bottom:10px;
text-align:left;
font-weight:bold;
font-size:16px;
padding:5px;
border: 0px solid #aaaaaa;
border-radius: 5px;
cursor:pointer;
}
.comment img {max-width:100%}
.board_comment_view img {max-width:100%}

.service_top_style {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border-radius: 10px;
  background: linear-gradient(135deg, #aa00ff, #6600cc);
  box-shadow: 0 4px 16px rgba(153,0,255,.25);
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  padding: 12px 16px;
}

.make_sub_title {
  padding: 0 0 12px;
  font-size: 13px;
  color: #888;
  text-align: left;
  line-height: 1.6;
}

.service_top_logo {width:50px;height:50px;padding:0px;border: 1px solid #aaaaaa;object-fit: cover;object-position: top; border-radius: 50%;box-shadow: 2px 2px 4px grey;}

.instagram_support_btn {max-width:340px;border: 1px solid #dddddd;border-radius: 10px; padding:5px;margin-top:10px;margin-bottom:10px;height:auto;background-color:#ffffff}
.sns_link {margin-top:30px}
.sns_link span {padding:2px}
.sns_link img {width:42px;border: 1px solid #cccccc;border-radius: 8px;padding:3px}

.sns_link2 { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.sns_link2 span { padding: 0; }
.sns_link2 img { width: 40px; border-radius: 10px; padding: 4px; transition: transform .15s; }
.sns_link2 img:hover { transform: scale(1.1); }

.top_info_box {max-width:640px;border: 1px solid #dddddd;border-radius: 10px; padding:10px;margin-bottom:10px;height:auto;}

.doc_text { text-align: left; margin-top: 0; }
.doc_text_title { font-size: 14px; font-weight: 700; color: #333; }
.doc_text_info  { font-size: 13px; margin-top: 6px; color: #666; line-height: 1.65; }

.doc_text_info .link_a
{
font-size:13px;
color:#006699;
}

.doc_text_info lu li
{
font-size:13px;
line-height:180%;
}

.doc_text_info lu li a
{
font-size:13px;
line-height:180%;
}

.doc_text_info br
{
line-height:180%;
}

.make-textarea {
  border: none;
  outline: none;
  border-top: none !important;
  padding-top: 0;
  box-sizing: content-box;
}

.box_shadow {
  height: auto;
  margin: 0 auto;
  padding: 20px;
  border-radius: 14px;
  background: #fff;
  color: #333;
  font-size: 1em;
  text-align: left;
  box-shadow: 0 2px 12px rgba(153,0,255,.08);
  border: 1px solid #f0eaff;
}

.box_list_shadow {
  height:auto;
  margin: 0 auto;
  padding: 5px;
  border-radius: 20px;
  background-color: #ffffff;
  color: #222222;
  font-size: 1.0em;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.backlist {
width:40px;
font-size:1.2em;
font-weight:bold;
border-radius: 20px;
text-align:center;
color:#ffffff;
background-color:#484848;
padding:10px;
left:5px;
cursor: pointer;
position: absolute;
}


.jjal_list_title_box {
  width:100%;
}

.jjal_list_title {
  margin-top:20px;
  margin-bottom:20px;
  margin-left:10px;

  font-size:1.1em;
  height:auto;
  font-weight:bold;
  border-radius: 10px;
  text-align:left;
  color:#555555;
  padding:10px;
}


.jjal_title_box {
  position: relative;
	max-width:980px;
  border-radius: 10px;
  background-color:#484848;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

.jjal_title {
  margin-top:20px;
  margin-bottom:20px;
	margin-left:35px;
  font-size:1.2em;
  height:auto;
  font-weight:bold;
  border-radius: 20px;
  text-align:left;
  color:#ffffff;
  padding:10px;
}

.jjal_title_shadow {
  margin-top:10px;
  margin-bottom:10px;
  height:auto;
  padding: 10px;
  border-radius: 20px;
  background-color: #484848;
  color: #ffffff;
  font-size: 1.1em;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}


.jjal_doc {
margin-top:20px;
margin-bottom:20px;
font-size:1.1em;
color:#555555;
}

.upload_layer {
position: fixed;
width:300px;
top: 20%;
left: 50%;
display:none;
z-index:101;
padding:20px;
transform: translate(-50%, -50%);
background-color: #ffffff;
color: #222222;
font-size: 1.1em;
text-align: center;
 border-radius: 20px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}

.btn_simple {
  display: inline-block;
  max-width: 100%;
  padding: 7px;
  border-radius: 30px;
  border: none;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  background-color: #4CAF50;
  cursor: pointer;
  color: #ffffff;
  margin-bottom: 2px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

.onlist:hover {
  transform: scale(1.0);
    background-color: #eeeeee;
}

.btn_simple:hover {
  transform: scale(1.05);
}

.btn_sm {
  display: inline-block;
  max-width: 100%;
  padding: 5px;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;

  cursor: pointer;
  color: #ffffff;
  margin-bottom: 10px;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
}

.btn_1 {
  display: inline-block;
  max-width: 100%;
  padding: 10px;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  background-color: #4CAF50;
  cursor: pointer;
  color: #ffffff;
  margin-bottom: 10px;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
}

.btn_1:hover {
  transform: scale(1.05);
}

.btn_2 {
  background-color: #00a896;
}

.btn_2:hover {
  transform: scale(1.05);
}

.btn_3 {
  background-color: #f7f7f7;
  color:#555555;
}

.btn_3:hover {
  transform: scale(1.05);
}

.btn_red {
  background-color: #eb3b00;
  color:#ffffff;
}

.btn_red:hover {
  transform: scale(1.05);
}

.coupa-container {

  text-align: center;
  background-color:#ffffff;
  padding:8px;
}
.coupa-text {
	font-size:1.0em;
	background-color:#0074e9;
	color:#ffffff;
	padding:7px;
	font-weight:bold;
	border-radius: 8px;
	border: 1px solid #0074e9;
}


.sub_menu_box {max-width:800px;margin-top:20px;margin-bottom:20px;padding-left:5px;padding-right:5px;text-align:center}
.sub_menu_item {padding:5px;margin-bottom:5px;text-align:left}
.sub_menu_active {border-radius: 10px;box-shadow: 0 10px 20px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.10);background-color:#9900ff;color:#ffffff;font-weight:bold;}

.sub_menu_box_title {
	padding-top:4px;
	display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}
.quiz_title_box {
  position: relative;
  border-radius: 20px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}

.quiz_title {
  margin-top:20px;
  margin-bottom:20px;
  font-size:1.2em;
  height:auto;
  font-weight:bold;
  border-radius: 20px;
  text-align:center;
  color:#ffffff;
  background-color:#484848;
  padding:10px;
}

.quiz_title_shadow {
  margin-top:10px;
  margin-bottom:10px;
  height:auto;
  padding: 10px;
  border-radius: 20px;
  background-color: #484848;
  color: #ffffff;
  font-size: 1.1em;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}


.quiz_doc {
margin-top:20px;
margin-bottom:20px;
font-size:1.1em;
color:#555555;
}

.sub_btn_box {
	position: relative;
    width: 25%;
    height: auto;
	margin: 0 auto;
	box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
    border: 0px solid #aaaaaa;
	background-color:#ffffff;
	padding: 0px;
    border-radius: 7px;
    display: table-cell;
    vertical-align: middle;
}

.sub_btn_box:hover{
  transform: scale(1.02);
  background-color:#ffffcc;
  color:#000000;
}

.sub_btn_box_best {
  background-color:#FCF3CF;
}

.jjalbang_list_image {
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.main_list_image
{
	width:100%;
	height:90px;
	border: 3px solid #ffffff;
	border-radius: 7px;
  margin: 0 auto;
	object-fit: cover;
	overflow: hidden ;
}

.box_wlg {
	width:100%;
	padding:0px;
	display:inline-block;
}

.box_lg {
height:195px;
}

.box_md {
height:150px;
}

.insta_title_box {
  position: relative;
  max-width:300px;
  border: 0px solid #cccccc;
  border-radius: 0px;
  background-color:#ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  padding:5px;
  margin-top:10px;
  margin-bottom:20px;
}

.insta_title {
  font-size:1.2em;
  height:auto;
  font-weight:bold;
  border-radius: 20px;
  text-align:center;
  color:#555555;
  padding:10px;
}

.jjal_title_doc {
  font-size:1.1em;
  height:auto;
  text-align:center;
  color:#555555;
  padding:10px;
}

.box_shadow_list {
  height:auto;
  margin: 0 auto;
  padding: 5px;
  border-radius: 20px;
  background-color: #ffffff;
  color: #222222;
  font-size: 1.0em;
  text-align: center;
  box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);
}

.item_instalist {
	position: relative;
	max-width:100%;
	height: auto;
	overflow: hidden;
	padding:5px;
	border: 0px solid #eeeeee;
	margin-bottom:20px;
	border-radius: 10px;
}

.item_code_profile_sm {
	width: 80px;
	float: left;
}

.item_code_profile {
	width: 110px;
	float: left;
}
.item_code_pic_url {
	width:100px;
	border: 0px solid #eeeeee;
	border-radius: 10px;
	padding:6px;
	
}

.item_code_username{
margin-top:3px;
font-weight:bold;
font-size:1.0em;
color:blue;
font-family:"Helvetica Neue", Sans-Serif;
}

.item_profile {
	width: 130px;
	float: left;
}
.item_pic_url {width:120px;border: 0px solid #dddddd;border-radius: 50px; padding:6px}
.item_pic_url_box {width:120px;border: 0px solid #dddddd;border-radius: 2px; padding:6px}
.item_bio {
float: none;
width: auto;
overflow: hidden;
text-align:left;
padding:4px;
padding-top:10px;
}

.item_bio_text {
float: none;
width: auto;
overflow: hidden;
text-align:left;
padding:7px;
padding-top:0px;
}

.item_full_text_name
{
font-weight:bold;
font-size:16px;
color:#555555;
}

.item_full_name
{
font-weight:bold;
font-size:1.3em
}

.item_biography{
padding-top:5px;
}

.item_info_biography{
padding-top:5px;
}

.item_username{
margin-top:3px;
font-weight:bold;
font-size:1.0em;
color:blue;
font-family:"Helvetica Neue", Sans-Serif;
}

.instalist_text{
position: relative;
max-width:100%;
height: auto;
overflow: hidden;
padding:10px;
border: 0px solid #eeeeee;
margin-bottom:10px;
border-radius: 10px;
}

.instalist {
position: relative;
max-width:100%;
height: auto;
overflow: hidden;
padding:5px;
border: 0px solid #eeeeee;
margin-bottom:20px;
border-radius: 10px;
}

.profile{
width: 85px;
float: left;
}
.rank{ 
position: absolute; 
right:10px;
top:20%;
bottom:25%;
}

.rank_best {
    padding: 5px;
    border-radius: 50px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .10);
    color: #ffffff; /* White text */
    background-color: #ff8c00; /* Orange background */
}




.pic_url {width:85px;border: 0px solid #dddddd;border-radius: 50px; padding:6px}
.pic_url_box {width:85px;border: 0px solid #dddddd;border-radius: 2px; padding:6px}
.bio{float: none;width: auto;overflow: hidden;text-align:left;padding:4px;}
.full_name{font-weight:bold;font-size:1.0em}
.biography{padding-top:5px;}
.username{
margin-top:3px;
font-weight:bold;
font-size:1.0em;
color:blue;
font-family:"Helvetica Neue", Sans-Serif;
}
.user_text{ margin-top:3px;color:#009900}
.instagram_reg_info{max-width:640px;border: 1px solid #dddddd;border-radius: 10px; padding:10px;margin-bottom:10px;height:auto;}
.info_doc {width:100%;padding:5px}
.info_btn {display:inline-block;zoom:1;}
.btn-info-padding {height:50px;display: table-cell;border:0px;vertical-align: middle;font-weight:bold}
.sub_menu_box {max-width:800px;margin-top:20px;margin-bottom:20px;padding-left:5px;padding-right:5px;text-align:center}
.sub_menu_item {padding:5px;margin-bottom:5px;text-align:left}
.sub_menu_active {border-radius: 10px;box-shadow: 0 10px 20px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.10);background-color:#9900ff;color:#ffffff;font-weight:bold;}

.sub_menu_btn {
max-width:100%;
height:auto;
float:left;
padding:5px;
display:table;
display:table-cell;
text-align:center;
font-size:1.0em
}

.sub_menu_btn:hover .best-label,
.sub_menu_btn:hover .new-label {
  transform: scale(1.05);
}


.sub_menu_btn_box {
width:120px;
height:80px;
box-shadow: 0 5px 5px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
font-size:1.1em;
border: 1px solid #aaaaaa;
padding:5px;
border-radius: 6px;
display:table-cell;
vertical-align:middle;
}

.sub_menu_btn_box_best {
width:120px;
height:80px;
box-shadow: 0 5px 5px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
font-size:1.1em;
border: 1px solid #aaaaaa;
background-color:#FADA9D;
  color:#000000;
padding:5px;
border-radius: 6px;
display:table-cell;
vertical-align:middle;
}

.sub_menu_btn_box_best:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.10);
  background-color:#FBF1D3;
  color:#000000;
  font-weight:bold;
}

.sub_menu_btn_box:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.10);
  background-color:#eeeeee;
  color:#000000;
  font-weight:bold;
}


.jiraksil_link_lg{
font-size:2.3em;
font-weight:bold;
padding-top:10px;
padding-bottom:5px
}

.jiraksil_link{
font-size:2.0em;
font-weight:bold;
padding-top:10px;
padding-bottom:5px
}

.jiraksil_link_header{
font-size:1.2em;
font-weight:bold;
flex-shrink:0;
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

.title_logo_lg {
	width: 80px;
	height: 80px;
	padding:5px;
	border-radius: 70%;
	overflow: hidden;
	object-fit: cover;
	border: 1px solid #aaaaaa;
	box-shadow: 0 5px 10px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.10);
}

.title_logo {
	width: 60px;
	height: 60px;
	border-radius: 70%;
	overflow: hidden;
	padding:2px;
	object-fit: cover;
	border: 1px solid #aaaaaa;
	box-shadow: 0 5px 10px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.10);
}

.title_logo_header {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	padding:2px;
	object-fit: cover;
	border: 1px solid #aaaaaa;
	box-shadow: 0 3px 6px rgba(0,0,0,.15);
}

/* ── 검색바 ── */
.srch-wrap {
  padding: 10px 0 2px;
}
.srch-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 50px;
  border: 1.5px solid #e8e0f8;
  box-shadow: 0 2px 16px rgba(102,0,204,.10), 0 1px 4px rgba(0,0,0,.05);
  padding: 0 6px 0 18px;
  height: 50px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.srch-box:focus-within {
  border-color: #aa00ff;
  box-shadow: 0 2px 22px rgba(153,0,255,.18), 0 1px 6px rgba(0,0,0,.05);
}
.srch-ico {
  color: #ccc;
  font-size: 15px;
  flex-shrink: 0;
  transition: color .2s;
}
.srch-box:focus-within .srch-ico { color: #aa00ff; }
.srch-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #333;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  -webkit-appearance: none;
}
.srch-input::placeholder { color: #bbb; font-weight: 400; }
.srch-input::-webkit-search-cancel-button { display: none; }
.srch-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: #f0e8ff;
  border-radius: 50%;
  color: #9900ff;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.srch-clear:hover { background: #e0d0ff; }
.srch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  height: 38px;
  background: linear-gradient(135deg, #aa00ff, #6600cc);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.srch-btn:hover { background: linear-gradient(135deg, #9900ee, #5500bb); transform: scale(1.03); }
.srch-btn:active { transform: scale(0.98); }
.srch-btn-txt { display: inline; }
@media (max-width: 480px) {
  .srch-box { height: 46px; padding: 0 5px 0 14px; }
  .srch-btn { padding: 0 14px; height: 34px; }
  .srch-btn-txt { display: none; }
  .srch-btn i { font-size: 14px; }
}

.answer_shadow {
  height:auto;
  margin: 0 auto;
  padding: 15px;
  border-radius: 20px;
  background-color: #ffffff;
  color: #222222;
  font-size: 1.1em;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}

.table {margin-bottom:5px;}
.table-bordered {}
.table-padding {padding:17px}
.table-padding .btn-padding{padding-top:10px;padding-bottom:10px;height:auto; text-align:center;vertical-align:middle}

.table-custom {
    border-collapse: collapse;
    width: 100%;
    margin: 0px auto;
  }

.table-custom table, th, td {
    border: 1px solid #eeeeee;
  }

.table-custom td {
	width:25%;
}

.member_top_display {
margin-top:0px;
margin-bottom:20px;
background-color:#f7f7f7;
border-bottom: 1px solid #eeeeee;
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 10px;
}

.member_top_links {
text-align:right;
font-size:1.0em;
}

.member_top_display .member_top_links span {
font-size:inherit;
}

@media (max-width: 480px) {
.member_top_display {
padding:4px 8px;
}
.title_logo_header {
width:28px;
height:28px;
}
.jiraksil_link_header {
font-size:1em;
gap:4px;
}
.logo-text {
display:none;
}
.member_top_links {
font-size:1.0em;
}
}

.member_top_display span {
color:#555555;
font-size:1.0em;
}


.list_top_title {
text-align:left;
font-size:1.1em;
}

/* ─── 인기 태그 pill ─── */
.pop-tag { display:inline-flex; align-items:center; padding:4px 11px; border-radius:20px; font-size:0.8em; font-weight:600; color:#666; background:#f5f5f5; border:1px solid #e8e8e8; text-decoration:none; cursor:pointer; transition:background .18s,color .18s,border-color .18s; white-space:nowrap; }
.pop-tag:hover { background:#ede9ff; color:#6d28d9; border-color:#c4b5fd; text-decoration:none; }

/* ─── 태그 드롭다운 패널 ─── */
.tag-drop-panel {
display:none;
background:#fff;
border-top:1px solid #eee;
padding:14px 16px 12px;
box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.tag-drop-panel.open { display:block; }
.tag-drop-inner {
display:flex;
flex-wrap:wrap;
gap:7px;
max-width:980px;
margin:0 auto;
}
.tag-drop-title {
display:flex;
align-items:center;
justify-content:space-between;
font-size:0.78em;
color:#999;
font-weight:700;
letter-spacing:.04em;
margin-bottom:10px;
max-width:980px;
margin-left:auto;
margin-right:auto;
}
.tag-drop-close {
cursor:pointer;
color:#aaa;
font-size:1.2em;
line-height:1;
padding:2px 4px;
}
.tag-drop-close:hover { color:#555; }
/* nav 태그 버튼 */
.top-nav-tagbtn { cursor:pointer; user-select:none; }
.top-nav-tagbtn.open { background:linear-gradient(135deg,#aa00ff 0%,#6600cc 100%); color:#fff; }
.top-nav-tagbtn.open i { color:rgba(255,255,255,.9); }
/* 인기태그 선택 상태 */
.top-nav-tagbtn.tag-active { background:#47282A; color:#FFE600; box-shadow:0 4px 14px rgba(71,40,42,.35); }
.top-nav-tagbtn.tag-active i { color:#FFE600; }
.top-nav-tagbtn.tag-active:hover { background:#5a3032; color:#FFE600; }
.nav-tag-chip { font-style:normal; font-size:0.78em; font-weight:bold; display:inline-block; margin-left:3px; color:#FFE600; vertical-align:middle; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


.item_list {
padding-top:15px;
}

.item_top_list {
margin-top:15px;
}

/* ── 상단 네비게이션 ── */
.top-nav {
display:flex;
gap:6px;
overflow-x:auto;
padding:4px 2px 10px;
margin:14px 0 20px;
scrollbar-width:none;
-ms-overflow-style:none;
}
.top-nav::-webkit-scrollbar { display:none; }

.top-nav-item {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
padding:10px 18px;
border-radius:14px;
font-size:0.92em;
font-weight:600;
color:#555;
text-decoration:none;
white-space:nowrap;
background:#f5f5f5;
transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
flex-shrink:0;
}
.top-nav-item i {
font-size:1.35em;
color:#aaa;
transition:color .18s ease;
}
.top-nav-item:hover {
background:#efe8ff;
color:#7700cc;
text-decoration:none;
transform:translateY(-2px);
}
.top-nav-item:hover i {
color:#9900ff;
}
.top-nav-item.active {
background:linear-gradient(135deg, #aa00ff 0%, #6600cc 100%);
color:#fff;
box-shadow:0 4px 16px rgba(153,0,255,.28);
}
.top-nav-item.active i {
color:rgba(255,255,255,.9);
}
.top-nav-external {
color:#888;
}
.top-nav-external i {
font-size:1em;
color:#bbb;
}
.top-nav-external:hover {
background:#f0f8ff;
color:#0066cc;
}
.top-nav-external:hover i {
color:#0066cc;
}

@media (max-width:600px) {
.top-nav {
gap:5px;
margin:10px 0 14px;
}
.top-nav-item {
padding:8px 13px;
border-radius:12px;
font-size:0.85em;
gap:4px;
}
.top-nav-item i {
font-size:1.2em;
}
}
/* ─────────────────────────── */

/* ── textjjal 카드 그리드 ── */
.tjal-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:20px;
margin-bottom:30px;
}

.tjal-card {
display:block;
border-radius:14px;
overflow:hidden;
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.08);
text-decoration:none;
color:inherit;
transition:transform .2s ease, box-shadow .2s ease;
}

.tjal-card:hover {
transform:translateY(-5px);
box-shadow:0 10px 28px rgba(0,0,0,.15);
text-decoration:none;
color:inherit;
}

.tjal-card-img {
width:100%;
aspect-ratio:16/9;
overflow:hidden;
background:#f0f0f0;
}

.tjal-card-img img {
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .3s ease;
}

.tjal-card:hover .tjal-card-img img {
transform:scale(1.06);
}

.tjal-card-title {
padding:10px 12px 12px;
font-size:0.88em;
font-weight:bold;
color:#333;
line-height:1.45;
word-break:keep-all;
}

.tjal-tag {
display:inline-block;
background:#f0f0f0;
color:#666;
font-size:0.8em;
font-weight:normal;
padding:1px 6px;
border-radius:4px;
margin-left:2px;
}

@media (max-width:900px) {
.tjal-grid {
grid-template-columns:repeat(3,1fr);
gap:14px;
}
}

@media (max-width:600px) {
.tjal-grid {
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.tjal-card-title {
font-size:0.8em;
padding:8px 10px 10px;
}
}
/* ─────────────────────────── */

.startbox{
margin-top:10px;
padding-bottom:10px;
}

.presult{
height:auto;
margin-top:30px;
margin-bottom:30px;
font-size:1.2em;
text-align:center;
}

.list_title
{
margin-top:20px;
padding:10px;
font-size:1.2em;
}


.best-label-title {
	max-width:50px;
	justify-content: center;
	align-items: center;
	background-color: #ff6600;
	color: #ffffff;
	border-radius: 30%;
	padding: 2px;
    box-shadow: 0 2px 3px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
	font-size: 0.7em;
	margin-right: 2px;
}

.cat-sort-btn {
	max-width:80px;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	border: 1px solid #bbbbbb;
	color: #000000;
	border-radius:30px;
	font-weight:bold;
	padding: 5px;
    box-shadow: 0 2px 3px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
	font-size: 0.9em;
	margin-right: 2px;
}

.cat-sort-btn-select {
	background-color: #00a896;
	border: 1px solid #bbbbbb;
	color: #ffffff;
    box-shadow: 0 2px 3px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
	font-size: 1em;
}

.cat-label-title {
	max-width:120px;
	justify-content: center;
	align-items: center;
	background-color: #cccccc;
	border: 0px solid #cccccc;
	color: #000000;
	border-radius:30px;
	font-weight:bold;
	padding: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.10);
	font-size: 1em;
	margin-right: 2px;
}

.cat-label {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #cccccc;
	border: 1px solid #bbbbbb;
	color: #000000;
	border-radius: 20%;
	padding: 3px;
    box-shadow: 0 3px 4px rgba(0,0,0,.15), 0 3px 4px rgba(0,0,0,.40);
	font-size: 0.8em;
	margin-top:2px;
	margin-right: 4px;
}

.best-label {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ff6600;
	color: #ffffff;
	border-radius: 30%;
	padding: 2px;
    box-shadow: 0 2px 3px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
	font-size: 0.7em;
	margin-top:2px;
	margin-right: 4px;
}

.new-label {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #00bfff;
	color: #ffffff;
	border-radius: 30%;
	padding: 2px;
    box-shadow: 0 2px 3px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.10);
	font-size: 0.7em;
	margin-top:2px;
	margin-right: 4px;
}


.make_textinput {
    border: none;
    outline: none;
    border-top: none !important;
    padding-top: 0;
    box-sizing: content-box;
    width: 95%;
    height: 60px;
    padding: 10px;
    height: auto;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #f7f7f7;
    color: #222222;
    text-align: left;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

.jjalnews_view {
	font-size:1.2em;
	text-align:left;
}

.jjalnews_view img {
max-width:100%
}

#socialAuth .naver {
    background-color: #1ec800;
}

#socialAuth a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
    color: #fff;
    background-color: var(--alpha-10);
    border-radius: 8px;
}

#socialAuth a img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.jjalscrapshow {
	width:100%;
	left:50%;
	top:10px;
	transform: translate(-50%, -50%);
	color:red;
	font-size:13px;
	padding:5px;
}

.scrap-link {
  position:relative;
  display:inline-block;
  padding-right:6px;
}
.scrapcount {
  position:absolute;
  top:-6px; right:-4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#9900ff; color:#fff;
  font-size:10px !important;  font-weight:bold; line-height:1;
  min-width:14px; height:14px;
  border-radius:7px; padding:8px 3px;
  box-shadow:0 1px 5px rgba(153,0,255,.45);
  pointer-events:none;
  border:1.5px solid #f7f7f7;
}

/* ─── 실시간 이슈 섹션 ─── */
.rt-section {
  margin:8px 0 0;
  background:linear-gradient(135deg,#f8f4ff 0%,#f0f7ff 100%);
  border:1px solid #e8e0ff;
  border-radius:14px;
  padding:14px 12px 12px;
  overflow:hidden;
}
.rt-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.rt-title-left {
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  font-size:0.95em;
  color:#333;
}
.rt-live-dot {
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff3b3b;
  box-shadow:0 0 0 0 rgba(255,59,59,.5);
  animation:rt-pulse 1.4s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes rt-pulse {
  0%   { box-shadow:0 0 0 0 rgba(255,59,59,.55); }
  70%  { box-shadow:0 0 0 8px rgba(255,59,59,0); }
  100% { box-shadow:0 0 0 0 rgba(255,59,59,0); }
}
.rt-refresh {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  border:1px solid #ddd;
  color:#888;
  font-size:0.8em;
  cursor:pointer;
  transition:background .18s,color .18s,transform .18s;
}
.rt-refresh:hover { background:#aa00ff; color:#fff; border-color:#aa00ff; transform:rotate(180deg); }
.rt-more-link {
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:0.78em;
  color:#7c3aed;
  font-weight:600;
  padding:4px 10px;
  border:1px solid #e9d5ff;
  border-radius:20px;
  background:#f3e8ff;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s,color .18s;
}
.rt-more-link:hover { background:#7c3aed; color:#fff; border-color:#7c3aed; text-decoration:none; }
.rt-list { min-height:60px; }

/* ─── 짤방 없음 플레이스홀더 (리스트 카드용 소형) ─── */
.jjal-no-img-sm {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a1a2e 0%,#2d1b3d 100%);
  position:absolute; top:0; left:0; width:100%; height:100%;
  border-radius:8px; padding:12px; text-align:center;
}
.jjal-no-img-sm-icon { font-size:26px; margin-bottom:5px; line-height:1; }
.jjal-no-img-sm-title { font-size:12px; font-weight:bold; color:#ff6b6b; margin-bottom:3px; }
.jjal-no-img-sm-sub { font-size:10px; color:#666; }

/* ─── 짤방 없음 플레이스홀더 ─── */
.jjal-no-img {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a1a2e 0%,#2d1b3d 100%);
  border-radius:12px; min-height:220px; padding:32px 24px;
  text-align:center; user-select:none; gap:0;
}
.jjal-no-img-icon {
  font-size:56px; line-height:1; margin-bottom:16px;
  filter:drop-shadow(0 0 10px rgba(255,107,107,.4));
}
.jjal-no-img-title {
  font-size:17px; font-weight:bold; color:#ff6b6b;
  margin-bottom:8px; font-family:'Nanum Gothic',sans-serif;
  text-shadow:0 0 12px rgba(255,107,107,.4); line-height:1.4;
}
.jjal-no-img-sub {
  font-size:12px; color:#666; font-family:'Nanum Gothic',sans-serif;
  line-height:1.6; white-space:pre-line;
}

/* ─── 회원정보 수정 ─── */
.mm-outer {
  max-width:520px; margin:24px auto; padding:0 12px;
}
.mm-card {
  background:#fff; border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.10);
  padding:28px 28px 24px;
}
.mm-header {
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:bold; color:#333;
  margin-bottom:24px; padding-bottom:16px;
  border-bottom:2px solid #f0e6ff;
}
.mm-header-icon { color:#9900ff; font-size:20px; }
.mm-field { margin-bottom:18px; }
.mm-label {
  font-size:12px; font-weight:bold; color:#888;
  margin-bottom:6px; letter-spacing:.04em;
}
.mm-readonly-box {
  display:flex; align-items:center; justify-content:space-between;
  background:#f7f3ff; border:1px solid #e8deff;
  border-radius:10px; padding:12px 14px;
  font-size:14px; color:#555; font-weight:500;
}
.mm-readonly-badge {
  font-size:10px; background:#e0d0ff; color:#7700cc;
  border-radius:20px; padding:2px 8px; font-weight:bold;
  white-space:nowrap; margin-left:8px;
}
.mm-input-row {
  display:flex; gap:8px; align-items:center;
}
.mm-input {
  flex:1; border:1.5px solid #e0d0ff; border-radius:10px;
  padding:11px 14px; font-size:14px; color:#333;
  background:#fff; outline:none; transition:border-color .18s;
  font-family:'Nanum Gothic',sans-serif;
  min-width:0;
}
.mm-input:focus { border-color:#9900ff; box-shadow:0 0 0 3px rgba(153,0,255,.10); }
.mm-hint {
  font-size:11px; color:#aaa; margin-top:6px;
}
.mm-hint-lock {
  color:#e67e22; font-weight:bold;
}
.mm-btn {
  border:none; border-radius:10px; padding:11px 20px;
  font-size:14px; font-weight:bold; cursor:pointer;
  transition:background .18s, transform .1s;
  white-space:nowrap; font-family:'Nanum Gothic',sans-serif;
}
.mm-btn:active { transform:scale(.97); }
.mm-btn-primary {
  background:linear-gradient(135deg,#aa00ff,#6600cc);
  color:#fff; box-shadow:0 4px 12px rgba(153,0,255,.25);
}
.mm-btn-primary:hover { background:linear-gradient(135deg,#bb22ff,#7711dd); }
.mm-btn-secondary {
  background:#f3f0ff; color:#7700cc; border:1.5px solid #ddd0ff;
}
.mm-btn-secondary:hover { background:#ebe5ff; }
.mm-divider {
  border:none; border-top:1px solid #f0e6ff; margin:22px 0;
}
.mm-section-title {
  font-size:14px; font-weight:bold; color:#666;
  margin-bottom:16px;
}

/* 다크모드 */
html.dark .mm-card { background:#1e2738; box-shadow:0 4px 24px rgba(0,0,0,.4); }
html.dark .mm-header { color:#d8dce8; border-bottom-color:#2e3a52; }
html.dark .mm-label { color:#64748b; }
html.dark .mm-readonly-box { background:#252d3d; border-color:#2e3a52; color:#94a3b8; }
html.dark .mm-readonly-badge { background:#2e1b5a; color:#aa66ff; }
html.dark .mm-input { background:#252d3d; border-color:#2e3a52; color:#d8dce8; }
html.dark .mm-input:focus { border-color:#9900ff; box-shadow:0 0 0 3px rgba(153,0,255,.15); }
html.dark .mm-input::placeholder { color:#4a5568; }
html.dark .mm-hint { color:#4a5568; }
html.dark .mm-hint-lock { color:#f39c12; }
html.dark .mm-btn-secondary { background:#252d3d; color:#aa66ff; border-color:#2e3a52; }
html.dark .mm-btn-secondary:hover { background:#2c3750; }
html.dark .mm-divider { border-top-color:#2e3a52; }
html.dark .mm-section-title { color:#94a3b8; }

/* ─── 메인 리스트 섹션 헤더 ─── */
.list-section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 10px 10px;
  flex-wrap:wrap;
  gap:8px;
}
.list-tag-pill {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:1.05em;
  font-weight:700;
  color:#333;
}
.list-tag-pill i { color:#aa00ff; }
.list-sort-group {
  display:flex;
  gap:6px;
}
.sort-pill {
  display:inline-flex;
  align-items:center;
  padding:5px 14px;
  border-radius:20px;
  font-size:0.82em;
  font-weight:600;
  color:#666;
  background:#f0f0f0;
  border:1px solid #e0e0e0;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s,color .18s;
  white-space:nowrap;
}
.sort-pill:hover { background:#ede9ff; color:#6d28d9; text-decoration:none; }
.sort-pill.sort-pill-active {
  background:linear-gradient(135deg,#aa00ff,#7700cc);
  color:#fff;
  border-color:transparent;
  box-shadow:0 3px 10px rgba(170,0,255,.25);
}

/* ─── 더보기 버튼 ─── */
.loadmore-wrap {
  display:flex;
  justify-content:center;
  padding:20px 0 10px;
}
.loadmore-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 32px;
  border-radius:30px;
  background:#fff;
  border:2px solid #ddd;
  color:#555;
  font-size:0.9em;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  user-select:none;
}
.loadmore-btn:hover {
  background:linear-gradient(135deg,#aa00ff,#7700cc);
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 16px rgba(170,0,255,.28);
}


/* ═══════════════════════════════════════
   짤방 보기 페이지
═══════════════════════════════════════ */

/* 바깥 래퍼 */
.view-outer {
  width:100%;
  padding:0 8px 20px;
}

/* 메인 카드 - 박스 제거 */
.view-card {
  background:transparent;
}

/* 카드 헤더 - 뒤로가기 + 제목 통합 */
.view-card-header {
  background:linear-gradient(135deg,#f5f0ff 0%,#ede8ff 100%);
  border-left:4px solid #aa00ff;
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:10px;
}
.view-header-row {
  display:flex;
  align-items:center;
  gap:10px;
}
.view-back-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(170,0,255,.12);
  border:1px solid rgba(170,0,255,.2);
  color:#8800cc;
  font-size:0.9em;
  cursor:pointer;
  transition:background .18s,color .18s;
  text-decoration:none;
}
.view-back-btn:hover {
  background:#aa00ff;
  color:#fff;
  border-color:#aa00ff;
  text-decoration:none;
}
.view-keyword {
  font-size:1.1em;
  font-weight:700;
  color:#1a1a1a;
  line-height:1.4;
  word-break:keep-all;
}
.view-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}
.view-tags-below {
  padding:12px 4px 4px;
}
/* 보기 페이지 태그: btn-default-tag의 margin:0 auto가 flex에서 오작동하는 것 방지 */
.view-tags-below .btn-default-tag,
.view-tags .btn-default-tag {
  margin:0;
  padding:5px 14px;
  font-size:0.92em;
  font-weight:600;
}
/* 보기 페이지 태그 */
.view-tags a,
.view-tags span.jjal-tag {
  display:inline-flex !important;
  align-items:center;
  padding:4px 12px !important;
  border-radius:20px !important;
  font-size:0.8em !important;
  font-weight:600 !important;
  color:#666 !important;
  background:#f0f0f0 !important;
  border:1px solid #e4e4e4 !important;
  text-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
  text-decoration:none;
}
.view-tags a:hover,
.view-tags span.jjal-tag:hover {
  background:#ede9ff !important;
  color:#6d28d9 !important;
  border-color:#c4b5fd !important;
  text-decoration:none;
}

/* 이미지 - 카드 내 엣지투엣지 */
.view-img-wrap {
  background:#f0f0f0;
  cursor:pointer;
  position:relative;
  padding:12px;
  border-radius:10px;
}
.view-img-wrap img.jjalbang_view_image {
  width:100%;
  height:auto;
  display:block;
}
.view-img-wrap video {
  display:block;
  max-width:100%;
  max-height:70vh;
  width:auto;
  height:auto;
  margin:0 auto;
}
.view-img-copy-hint {
  position:absolute;
  bottom:12px;
  right:12px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:0.72em;
  padding:5px 10px;
  border-radius:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
}
.view-img-wrap:hover .view-img-copy-hint { opacity:1; }

/* 액션 버튼 */
.view-actions {
  display:flex;
  gap:8px;
  padding:14px 4px 6px;
  flex-wrap:wrap;
  justify-content:center;
}
.view-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 18px;
  border-radius:10px;
  font-size:0.88em;
  font-weight:700;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:all .2s;
  white-space:nowrap;
}
.view-btn:hover { text-decoration:none; filter:brightness(1.08); transform:translateY(-1px); }
.view-btn i { font-size:1.05em; }
.view-btn-edit {
  background:#f3e8ff;
  color:#7c3aed;
  border:1.5px solid #e9d5ff;
}
.view-btn-edit:hover { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.view-btn-save {
  background:#ecfdf5;
  color:#059669;
  border:1.5px solid #a7f3d0;
}
.view-btn-save:hover { background:#059669; color:#fff; border-color:#059669; }
.view-btn-scrap {
  background:#fff1f2;
  color:#e11d48;
  border:1.5px solid #fecdd3;
}
.view-btn-scrap:hover { background:#e11d48; color:#fff; border-color:#e11d48; }

/* 구분선 */
.view-divider {
  height:1px;
  background:#f0f0f0;
  margin:12px 4px;
}

/* 공유 섹션 */
.view-share {
  padding:10px 4px 16px;
}
.view-share-label {
  font-size:0.72em;
  font-weight:700;
  color:#bbb;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
  text-align:center;
}
.view-share-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.share-btn {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px 10px 8px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  font-size:0.72em;
  font-weight:600;
  color:#555;
  background:#f8f8f8;
  border:1.5px solid #eee;
  min-width:52px;
  transition:all .18s;
}
.share-btn:hover {
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.share-btn i { font-size:1.4em; line-height:1; }
.share-facebook i { color:#1877F2; }
.share-facebook:hover { background:#1877F2; color:#fff; border-color:#1877F2; }
.share-facebook:hover i { color:#fff; }
.share-twitter i { color:#111; }
.share-twitter:hover { background:#111; color:#fff; border-color:#111; }
.share-twitter:hover i { color:#fff; }
.share-naver { color:#555; }
.share-naver-n { font-size:1.3em; font-weight:900; color:#03C75A; line-height:1; }
.share-naver:hover { background:#03C75A; color:#fff; border-color:#03C75A; }
.share-naver:hover .share-naver-n { color:#fff; }
.share-kakao { color:#3A1D1D; }
.share-kakao:hover { background:#FEE500; border-color:#FEE500; }
.share-link i { color:#888; }
.share-link:hover { background:#333; color:#fff; border-color:#333; }
.share-link:hover i { color:#fff; }
.share-download i { color:#007aff; }
.share-download:hover { background:#007aff; color:#fff; border-color:#007aff; }
.share-download:hover i { color:#fff; }

/* 감정 분석 */
.view-emotion {
  margin:0 16px 12px;
  background:#f9f9f9;
  border-radius:12px;
  padding:14px 12px 10px;
}
.view-emotion-label {
  font-size:0.78em;
  font-weight:700;
  color:#aaa;
  margin-bottom:8px;
}
.view-emotion-chart { max-width:420px; width:100%; height:180px; }

/* 댓글 섹션 - 전체 폭 */
.view-comments-wrap {
  max-width:720px;
  margin:0 auto;
  padding:0 8px 40px;
}
/* 보기 페이지 - 구버전 .view-page 호환 */
.view-page { max-width:720px; margin:0 auto; padding:0 8px 20px; }
.view-comments-wrap .list_top_title {
  font-size:0.9em;
  font-weight:700;
  color:#888;
  padding:16px 4px 10px;
  border-top:1px solid #f0f0f0;
  margin-top:16px;
}
.view-comments-wrap .cat-label-title { display:none; }
.view-comments-wrap #write-box { border-radius:12px; overflow:hidden; border:1.5px solid #e8e8e8; }
.view-comments-wrap textarea.make_textinput {
  width:100% !important;
  border:none !important;
  border-radius:12px;
  padding:12px;
  font-size:0.9em;
  resize:vertical;
}
.view-comments-wrap #btn_submit {
  width:100%;
  padding:12px;
  border-radius:10px;
  font-size:0.92em;
  font-weight:700;
  background:linear-gradient(135deg,#aa00ff,#7700cc);
  border:none;
  color:#fff;
  cursor:pointer;
  margin-top:8px;
  transition:filter .2s;
}
.view-comments-wrap #btn_submit:hover { filter:brightness(1.1); }
.view-comments-wrap .box_shadow_list {
  border-radius:12px !important;
  border:1px solid #f0f0f0 !important;
  overflow:hidden;
}

/* 관련 짤방 섹션 */
.view-related { padding-top:20px; }
.view-related .list-section-header {
  border-top:1px solid #f0f0f0;
  padding-top:16px;
}

@media (max-width:480px) {
  .view-outer { padding:0 4px 20px; }
  .view-keyword { font-size:1.05em; }
  .view-btn { padding:9px 14px; font-size:0.84em; }
  .view-actions { padding:12px 4px 4px; gap:6px; }
  .view-share { padding:8px 4px 14px; }
  .view-divider { margin:10px 4px; }
  .view-card-header { padding:10px 12px; }
  .share-btn { padding:9px 8px 7px; min-width:46px; font-size:0.68em; }
  .share-btn i { font-size:1.25em; }
  .view-emotion { margin:0 4px 10px; }
}

/* 인기태그 모달 - 태그 버튼 폰트 크기 */
#tagModal .btn-sm {
  font-size:15px;
  padding:5px 10px;
  width:auto !important;
  min-width:62px;
}


/* ══════════════════════════════════════════════════════
   다크 모드  (html.dark)
   배경: #1e2530 계열 다크 블루그레이
══════════════════════════════════════════════════════ */

/* 전환 트랜지션 */
body,
.box_shadow_list, .answer_shadow,
.member_top_display,
.srch-box, .srch-input,
.top-nav-item,
.jjal-card, .jjal-card-title,
.bcard, .bv-header, .bv-header-top, .bv-header-meta, .bv-body,
.bc-card, .bc-form-wrap,
.font-card, .tc-input-wrap, .tc-textarea,
.uni-copy-card, .uni-copy-box, .unicode_item,
.bb-search-form, .bb-search-input,
.bb-btn.bb-list, .bb-btn.bb-edit, .bb-btn.bb-del,
.instafontbox_div, .tjal-card,
.rt-section, .rt-refresh, .rt-more-link,
.sort-pill,
.view-card-header, .view-back-btn, .view-img-wrap,
.view-btn-edit, .view-btn-save, .view-btn-scrap,
.view-divider, .share-btn, .view-emotion,
.tag-drop-panel, .box_shadow,
.box_shadow_make, .make_input, .make_textinput,
.mk-card, .mk-card-hd, .mk-reset-btn, .mk-global-reset-btn,
.mk-badge, .mk-speed-sect, .mk-spd-pill, .mk-photo-btn,
.make-card, .make-opt-input, .make-opt-select,
.make-item, .opt-panel, .upload_layer, .opt-trig, .opt-bgsize-btn,
.kao-copy-card, .top_copy_box, .kao-tab, .kao-sub-pill, .textrow_box, .emoji,
input, textarea, select {
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}

html.dark { color-scheme: dark; }

html.dark body {
  background-color: #1e2530;
  color: #d8dce8;
}

/* ── 최상단 바 ───────────────────────────────────── */
html.dark .member_top_display {
  background-color: #161d2b !important;
  border-bottom-color: #2a3448 !important;
}
html.dark .member_top_display a,
html.dark .member_top_display span { color: #94a3b8; }
html.dark .scrapcount { background:#9900ff; border-color:#161d2b; box-shadow:0 1px 5px rgba(153,0,255,.6); }
html.dark .member_top_display a:hover { color: #c4b5fd; }
html.dark .member_top_display [data-toggle="modal"] {
  border-color: #374561 !important;
  color: #94a3b8;
}

/* ── 검색바 ──────────────────────────────────────── */
html.dark .srch-box {
  background: #252d3d;
  border-color: #374561;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
html.dark .srch-box:focus-within {
  border-color: #9900ff;
  box-shadow: 0 2px 18px rgba(153,0,255,.2);
}
html.dark .srch-input { color: #d8dce8; }
html.dark .srch-input::placeholder { color: #4b5a72; }
html.dark .srch-ico { color: #4b5a72; }
html.dark .srch-clear { color: #64748b; }

/* ── 네비게이션 ──────────────────────────────────── */
html.dark .top-nav-item {
  background: #252d3d;
  color: #94a3b8;
}
html.dark .top-nav-item i { color: #64748b; }
html.dark .top-nav-item:hover {
  background: #2c3750;
  color: #d8dce8;
}
html.dark .top-nav-item:hover i { color: #aa66ff; }
html.dark .top-nav-item.active {
  background: linear-gradient(135deg,#aa00ff,#6600cc);
  color: #fff;
}
html.dark .top-nav-item.active i { color: rgba(255,255,255,.9); }
html.dark .top-nav-tagbtn.tag-active { background:#5a3032; color:#FFE600; box-shadow:0 4px 14px rgba(71,40,42,.5); }
html.dark .top-nav-tagbtn.tag-active i { color:#FFE600; }
html.dark .top-nav-external { color: #64748b; }
html.dark .top-nav-external:hover { background: #252d3d; color: #7bbfff; }

/* ── 인기 태그 pill ──────────────────────────────── */
html.dark .pop-tag {
  background: #252d3d;
  border-color: #374561;
  color: #94a3b8;
}
html.dark .pop-tag:hover {
  background: #2c3750;
  color: #c4b5fd;
  border-color: #6d28d9;
}

/* ── 메인 카드 ───────────────────────────────────── */
html.dark .box_shadow_list {
  background-color: #252d3d;
  color: #d8dce8;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
html.dark .answer_shadow {
  background-color: #252d3d;
  color: #d8dce8;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
html.dark .instalist_text { background-color: transparent; }
html.dark .onlist:hover { background-color: #2c3750 !important; }
html.dark .item_full_text_name { color: #d8dce8; }
html.dark .item_info_biography span { color: #64748b !important; }

/* ── 게시판 리스트 ───────────────────────────────── */
html.dark .blist             { background:#252d3d; border-color:#2e3a52; box-shadow:none; }
html.dark .blist-item        { border-bottom-color:#2e3a52; }
html.dark .blist-item:hover  { background:#2e3848; }
html.dark .blist-title       { color:#e2e8f0; }
html.dark .blist-item:hover .blist-title { color:#c084fc; }
html.dark .blist-foot        { color:#4b5a72; }
html.dark .blist-foot .blist-nick { color:#64748b; }
html.dark .blist-foot .sep   { color:#3a4556; }
html.dark .blist-item.blist-reading { background:rgba(153,0,255,.08); }
html.dark .blist-item.blist-reading .blist-title { color:#c084fc; }
html.dark .blist-item.blist-reading::after { background:rgba(153,0,255,.2); color:#c084fc; }
html.dark .bc-form-wrap textarea::placeholder { color:#4b5a72; }

/* ── 게시글 뷰 ───────────────────────────────────── */
html.dark .bv-header {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
html.dark .bv-header-top { border-bottom-color: #2e3a52; }
html.dark .bv-title { color: #e2e8f0; }
html.dark .bv-header-meta { background: #1e2530; }
html.dark .bv-meta-item { color: #64748b; }
html.dark .bv-meta-item strong { color: #94a3b8; }
html.dark .bv-meta-sep { color: #2e3a52; }
html.dark .bv-body {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  color: #d8dce8;
}
html.dark .bv-body div, html.dark .bv-body p { color: #d8dce8; }

/* ── 댓글 ────────────────────────────────────────── */
html.dark .bc-card {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .bc-card:hover { border-color: #4a3f70; }
html.dark .bc-card.bc-reply {
  background: #1e2a3f;
  border-left-color: #5b3f9f;
}
html.dark .bc-author { color: #d8dce8; }
html.dark .bc-author-date { color: #4b5a72; }
html.dark .bc-card-body { color: #c4ccd8; }
html.dark .bc-section-title { color: #d8dce8; border-bottom-color: #2e3a52; }
html.dark .bc-empty {
  background: #252d3d;
  border-color: #2e3a52;
  color: #4b5a72;
}
html.dark .bc-btn-reply { background: #2c2050; color: #bb99ff; border-color: #4a3f70; }
html.dark .bc-btn-reply:hover { background: #352660; }
html.dark .bc-btn-edit { background: #1a2b40; color: #7bbfff; border-color: #2a4060; }
html.dark .bc-btn-edit:hover { background: #1e3350; }
html.dark .bc-btn-del { background: #3a1f1f; color: #ff8080; border-color: #5a2f2f; }
html.dark .bc-btn-del:hover { background: #442222; }
html.dark .bc-form-wrap {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .bc-form-label { color: #aa66ff; }
html.dark .bc-form-wrap textarea {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .bc-form-wrap textarea:focus { border-color: #9900ff; }

/* Redactor 에디터 다크모드 */
html.dark .redactor-styles-on {
  background: #1e2530 !important;
  border-color: #374561 !important;
}
html.dark .redactor-in,
html.dark .redactor-in p,
html.dark .redactor-in div,
html.dark .redactor-in span {
  background: #1e2530 !important;
  color: #d8dce8 !important;
}
html.dark .redactor-dropdown {
  background-color: #252d3d !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.5) !important;
}
html.dark .redactor-dropdown a,
html.dark .redactor-dropdown span {
  color: #d8dce8 !important;
}
html.dark .redactor-dropdown a:hover {
  background: #2c2050 !important;
  color: #fff !important;
}
html.dark #write-box {
  border-color: #374561 !important;
}

/* ── 게시판 버튼/검색 ────────────────────────────── */
html.dark .bb-btn.bb-list {
  background: #252d3d;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .bb-btn.bb-list:hover { background: #2c3750; color: #d8c8ff; }
html.dark .bb-btn.bb-edit { background: #1a2b40; color: #7bbfff; border-color: #2a4060; }
html.dark .bb-btn.bb-del { background: #3a1f1f; color: #ff8080; border-color: #5a2f2f; }
html.dark .bb-search-form {
  background: #252d3d;
  border-color: #374561;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
html.dark .bb-search-form:focus-within { border-color: #9900ff; }
html.dark .bb-search-icon { color: #64748b; }
html.dark .bb-search-input {
  background: transparent;
  color: #d8dce8;
}
html.dark .bb-search-input::placeholder { color: #4b5a72; }

/* ── 폰트 변환기 카드 ────────────────────────────── */
html.dark .font-card {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .font-card:hover {
  border-color: #9900ff;
  box-shadow: 0 4px 16px rgba(153,0,255,.2);
}
html.dark .font-card.copied { background: #1a2f28; border-color: #27ae60; }
html.dark .fc-label { color: #aa66ff; opacity: 1; }
html.dark .fc-output { color: #d8dce8; }
html.dark .tc-input-wrap {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
html.dark .tc-textarea {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .tc-textarea:focus { border-color: #9900ff; }
html.dark .tc-textarea::placeholder { color: #4b5a72; }
html.dark .tc-char-count { color: #4b5a72; }
html.dark .tc-clear-btn {
  background: #252d3d;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .tc-clear-btn:hover { background: #2c3750; }
html.dark .tc-cat-title {
  background: linear-gradient(135deg,#1e2a3f,#252d3d);
  color: #bb99ff;
  border-left-color: #9900ff;
}

/* ── 유니코드/이모지 ──────────────────────────────── */
html.dark .uni-copy-card {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
html.dark .uni-copy-box {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .uni-copy-box:focus { border-color: #9900ff; }
html.dark .uni-copy-label { color: #64748b; }
html.dark .uni-reset-btn {
  background: #252d3d;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .uni-reset-btn:hover { background: #2c3750; }
html.dark .unicode_item {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .unicode_item:hover, html.dark .unicode_item:active {
  background: #2c3750;
  border-color: #9900ff;
}
html.dark .uni-cat-pill {
  background: #252d3d;
  border-color: #374561;
  color: #94a3b8;
}
html.dark .uni-cat-pill.sub_select,
html.dark .uni-cat-pill.active {
  background: #9900ff;
  border-color: #9900ff;
  color: #fff;
}
html.dark .top_category {
  color: #bb99ff;
  border-bottom-color: #2e3a52;
}
html.dark .sub_category {
  background: #1e2a3f;
  color: #aa66ff;
  border-left-color: #9900ff;
}

/* ── 텍스트짤 카드 ───────────────────────────────── */
html.dark .tjal-card {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
html.dark .tjal-card:hover {
  border-color: #9900ff;
  box-shadow: 0 6px 20px rgba(153,0,255,.2);
}
html.dark .tjal-card-title { color: #d8dce8; background: #252d3d; }
html.dark .tjal-tag {
  background: #2c3750;
  color: #aa66ff;
}

/* ── 카오모지 ────────────────────────────────────── */
html.dark .kao-hero { /* gradient keeps its own style */ }
html.dark .uni-hero { /* gradient keeps its own style */ }
html.dark .tc-hero  { /* gradient keeps its own style */ }
html.dark .tj-hero  { /* gradient keeps its own style */ }

/* ── 일반 폼 요소 ─────────────────────────────────── */
html.dark input:not([type="submit"]):not([type="button"]):not([type="range"]),
html.dark textarea,
html.dark select {
  background: #1e2530 !important;
  border-color: #374561 !important;
  color: #d8dce8 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #4b5a72 !important; }
html.dark .form-control {
  background: #1e2530 !important;
  border-color: #374561 !important;
  color: #d8dce8 !important;
}

/* ── Bootstrap 패널/모달 ─────────────────────────── */
html.dark .panel,
html.dark .panel-default,
html.dark .panel-default-st {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .panel-heading { background: #1e2a3f; border-color: #2e3a52; color: #d8dce8; }
html.dark .panel-body { color: #d8dce8; }
html.dark .modal-content {
  background: #252d3d;
  border-color: #2e3a52;
  color: #d8dce8;
}
html.dark .modal-header {
  background: #1e2a3f;
  border-bottom-color: #2e3a52;
  color: #e2e8f0;
}
html.dark .modal-footer { border-top-color: #2e3a52; }
html.dark .list-group-item {
  background: #252d3d;
  border-color: #2e3a52;
  color: #d8dce8;
}

/* ── 인스타폰트 박스 ─────────────────────────────── */
html.dark .instafontbox_div {
  background: #252d3d;
  border-color: #2e3a52;
  color: #d8dce8;
}

/* ── board_view 본문 ─────────────────────────────── */
html.dark .board_view,
html.dark .board_view div,
html.dark .board_view p { color: #d8dce8; }

/* ── 스크롤바 ────────────────────────────────────── */
html.dark ::-webkit-scrollbar { background: #1e2530; width: 6px; }
html.dark ::-webkit-scrollbar-thumb { background: #374561; border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a5a7a; }

/* ── 다크모드 토글 버튼 ──────────────────────────── */
.dm-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer;
  border: 1.5px solid #e0d8f5;
  background: #fff; color: #9900ff;
  font-size: 13px;
  transition: all .2s;
  margin-left: 8px; flex-shrink: 0;
  vertical-align: middle;
}
.dm-toggle:hover { background: #f5f0ff; border-color: #9900ff; }
html.dark .dm-toggle {
  background: #252d3d !important;
  border-color: #4a3f70 !important;
  color: #bb99ff !important;
}
html.dark .dm-toggle:hover { background: #2c3750 !important; }

/* ── 짤방 카드 타이틀 (메인/움짤/짤생성 공통) ────────── */
html.dark .jjal-card {
  background: #252d3d;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
html.dark .jjal-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
html.dark .jjal-card-title {
  background: #252d3d;
  color: #c4ccd8;
}

/* ── 짤방 없음 플레이스홀더 다크모드 ── */
html.dark .jjal-no-img { background:linear-gradient(135deg,#0f0f1e 0%,#1e0f2e 100%); }
html.dark .jjal-no-img-sub { color:#555; }
html.dark .jjal-no-img-sm { background:linear-gradient(135deg,#0f0f1e 0%,#1e0f2e 100%); }
html.dark .jjal-no-img-sm-sub { color:#555; }

/* ── 실시간 이슈 ──────────────────────────────────── */
html.dark .rt-section {
  background: linear-gradient(135deg, #1e2a3f 0%, #1a2638 100%);
  border-color: #2e3a52;
}
html.dark .rt-title-left { color: #d8dce8; }
html.dark .rt-refresh {
  background: #252d3d;
  border-color: #374561;
  color: #94a3b8;
}
html.dark .rt-refresh:hover {
  background: #aa00ff;
  color: #fff;
  border-color: #aa00ff;
}
html.dark .rt-more-link {
  color: #aa66ff;
  border-color: #4a3f70;
  background: #2c2050;
}
html.dark .rt-more-link:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* ── 리스트 섹션 헤더 / 정렬 pill ─────────────────── */
html.dark .list-tag-pill { color: #d8dce8; }
html.dark .list-tag-pill i { color: #aa66ff; }
html.dark .sort-pill {
  background: #252d3d;
  border-color: #374561;
  color: #94a3b8;
}
html.dark .sort-pill:hover {
  background: #2c2050;
  color: #c4b5fd;
  border-color: #6d28d9;
}
html.dark .sort-pill.sort-pill-active {
  background: linear-gradient(135deg, #aa00ff, #7700cc);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(170,0,255,.3);
}

/* ── jjalview 뷰 페이지 ──────────────────────────── */
html.dark .view-card-header {
  background: linear-gradient(135deg, #1e2a3f 0%, #252d3d 100%);
  border-left-color: #aa00ff;
}
html.dark .view-keyword { color: #e2e8f0; }
html.dark .view-back-btn {
  background: rgba(170,0,255,.18);
  border-color: rgba(170,0,255,.3);
  color: #bb99ff;
}
html.dark .view-back-btn:hover {
  background: #aa00ff;
  color: #fff;
  border-color: #aa00ff;
}
html.dark .view-img-wrap { background: #1a2030; }

/* 이미지 아래 태그 */
html.dark .view-tags a,
html.dark .view-tags span.jjal-tag {
  background: #252d3d !important;
  border-color: #374561 !important;
  color: #94a3b8 !important;
}
html.dark .view-tags a:hover,
html.dark .view-tags span.jjal-tag:hover {
  background: #2c2050 !important;
  color: #c4b5fd !important;
  border-color: #6d28d9 !important;
}

/* 액션 버튼 */
html.dark .view-btn-edit {
  background: #2c2050;
  color: #c4b5fd;
  border-color: #4a3f70;
}
html.dark .view-btn-save {
  background: #132d22;
  color: #6ee7b7;
  border-color: #1d4d35;
}
html.dark .view-btn-scrap {
  background: #2d1520;
  color: #fda4af;
  border-color: #4d2030;
}

/* 구분선 */
html.dark .view-divider { background: #2e3a52; }

/* 공유 섹션 */
html.dark .view-share-label { color: #4b5a72; }
html.dark .share-btn {
  background: #252d3d;
  border-color: #2e3a52;
  color: #94a3b8;
}
html.dark .share-btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
html.dark .share-facebook i { color: #7bb3ff; }
html.dark .share-twitter i  { color: #94a3b8; }
html.dark .share-naver-n    { color: #4cd97c; }
html.dark .share-link i     { color: #64748b; }
html.dark .share-download i { color: #60a5fa; }

/* 감정 분석 */
html.dark .view-emotion {
  background: #1e2a3f;
  border: 1px solid #2e3a52;
}
html.dark .view-emotion-label { color: #64748b; }

/* 댓글 + 관련 짤방 구분선 */
html.dark .view-comments-wrap .list_top_title {
  color: #4b5a72;
  border-top-color: #2e3a52;
}
html.dark .view-comments-wrap #write-box { border-color: #374561; }
html.dark .view-comments-wrap .box_shadow_list { border-color: #2e3a52 !important; }
html.dark .view-related .list-section-header { border-top-color: #2e3a52; }

/* ── 인기 태그 드롭다운 패널 ──────────────────────── */
html.dark .tag-drop-panel {
  background: #1e2a3f;
  border-top-color: #2e3a52;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
html.dark .tag-drop-title { color: #64748b; }
html.dark .tag-drop-close { color: #4b5a72; }
html.dark .tag-drop-close:hover { color: #94a3b8; }

/* ── 움짤 생성기 공통 UI (menu_jjalmake_sub.php) ──── */
html.dark .box_shadow_make {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
html.dark .make_input {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .make_input:focus { border-color: #9900ff; }
html.dark .make_textinput {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .make_textinput:focus { border-color: #9900ff; }
html.dark .make_sub_title { color: #64748b; }
html.dark .text_border { color: #94a3b8; }
html.dark .btn-default {
  background: #2c2050 !important;
  border-color: #4a3f70 !important;
  color: #bb99ff !important;
}
html.dark .btn-default:hover { background: #352660 !important; }

/* 미리보기 영역 */
html.dark #make_output_img {
  background: #1a2030;
  border-color: #374561;
}

/* mk-card 시스템 */
html.dark .mk-card {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .mk-card-hd {
  background: linear-gradient(90deg, #1e2a3f 0%, #252d3d 100%);
  color: #aa66ff;
  border-bottom-color: #2e3a52;
}
html.dark .mk-reset-btn {
  border-color: #4a3f70;
  color: #7755aa;
}
html.dark .mk-reset-btn:hover {
  background: #2c2050;
  border-color: #9900ff;
  color: #bb99ff;
  opacity: 1;
}
html.dark .mk-global-reset-btn {
  background: #1e2530;
  border-color: #374561;
  color: #64748b;
}
html.dark .mk-global-reset-btn:hover {
  border-color: #9900ff;
  background: #252d3d;
  color: #bb99ff;
}
html.dark .mk-lbl { color: #4b5a72; }
html.dark .mk-range { background: #2e3a52; }
html.dark .mk-badge {
  color: #bb99ff;
  background: #2c2050;
}
html.dark .mk-badge.mk-badge-img {
  color: #7bbfff;
  background: #1a2b40;
}
html.dark .mk-badge.mk-badge-pos {
  color: #94a3b8;
  background: #252d3d;
}
html.dark .mk-pos-ico { color: #64748b; }
html.dark .mk-speed-sect {
  background: #1e2a3f;
  border-color: #2e3a52;
}
html.dark .mk-spd-pill {
  background: #252d3d;
  border-color: #374561;
  color: #94a3b8;
}
html.dark .mk-spd-pill:hover:not(.active) {
  border-color: #9900ff;
  color: #bb99ff;
  background: #2c2050;
}
html.dark .mk-photo-btn {
  background: #2c2050;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .mk-photo-btn:hover { background: #352660; }
html.dark .mk-photo-preview { color: #4b5a72; }

/* 이미지 업로드 팝업 */
html.dark #jjalmake_upload_div {
  background: #252d3d !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.55) !important;
}
html.dark #jjalmake_upload_div span[style*="color:#333"] { color: #d8dce8 !important; }
html.dark #jjalmake_upload_div div[style*="color:#aaa"] { color: #64748b !important; }

/* ── 움짤 생성기 하단 설명 영역 ──────────────────── */
html.dark .box_shadow {
  background: #252d3d;
  border-color: #2e3a52;
  color: #d8dce8;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
html.dark .doc_text_title { color: #d8dce8; }
html.dark .doc_text_info  { color: #94a3b8; }
html.dark .doc_text_info strong { color: #c4ccd8; }
html.dark .make_sub_title { color: #64748b; }

/* ── jjalbangMake 짤 편집 화면 ───────────────────── */
html.dark .make-canvas-scroll {
  background: #1a2030;
}
html.dark #jjalbang_or_image {
  background: #fff;
}
html.dark .make-card {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
html.dark .make-card-title { color: #aa66ff; }
html.dark #text_jjalbang {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark #text_jjalbang:focus { border-color: #9900ff; }
html.dark .make-btn-sub {
  background: #2c2050;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .make-btn-sub:hover { background: #352660; }
html.dark .make-opt-input,
html.dark .make-opt-select {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .make-opt-input:focus,
html.dark .make-opt-select:focus { border-color: #9900ff; }
html.dark .make-opt-label { color: #4b5a72; }
html.dark .make-check-label { color: #94a3b8; }
html.dark .mcol-label { color: #4b5a72; }
html.dark .mcol-picker { border-color: #374561; }
html.dark .mcol-reset { color: #4b5a72; }
html.dark .mcol-reset:hover { color: #ff8080; background: #2d1520; }
html.dark .make-range-val { color: #aa66ff; }
html.dark .make-item {
  background: #1e2a3f;
  border-color: #2e3a52;
  color: #94a3b8;
}
html.dark .make-item-btn-add { background: #2c2050; color: #bb99ff; }
html.dark .make-item-btn-del { background: #2d1520; color: #ff8080; }
html.dark .make-gif-note { color: #64748b; }
html.dark .make-help { color: #4b5a72; }
html.dark .opt-trig {
  background: #2c2050;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .opt-trig:hover { background: #352660; }
html.dark .opt-bgsize-btn {
  background: #2c2050;
  border-color: #4a3f70;
  color: #bb99ff;
}
html.dark .opt-bgsize-btn:hover { background: #352660; }

/* 플로팅 옵션 패널 */
html.dark .opt-panel {
  background: #252d3d;
  border-color: #4a3f70;
  box-shadow: 0 8px 36px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
}
html.dark .opt-panel-hdr { border-bottom-color: #2e3a52; }
html.dark .opt-panel-ttl { color: #aa66ff; }
html.dark .opt-panel-close { color: #4b5a72; }
html.dark .opt-panel-close:hover { color: #94a3b8; }
html.dark .op-col-lbl,
html.dark .op-clr-lbl { color: #4b5a72; }
html.dark .op-divider { border-top-color: #2e3a52; }

/* 업로드 모달 */
html.dark .upload_layer {
  background: #252d3d !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.55) !important;
}
html.dark .make-upload-title { color: #d8dce8; }
html.dark .make-upload-hint  { color: #64748b; }

/* jQuery UI 오버라이드 */
html.dark .ui-widget-content {
  background: #252d3d;
  border-color: #374561;
  color: #d8dce8;
}

/* 선택 핸들 */
html.dark .jjal-resize-handle {
  background: #252d3d;
  border-color: #9900ff;
}
html.dark .jjal-rotate-handle {
  background: #252d3d;
  border-color: #9900ff;
  color: #aa66ff;
}
html.dark .text_control_list { border-color: #374561; }

/* ── 카오모지 / 이모지 페이지 ────────────────────── */
html.dark .kao-copy-card {
  background: #252d3d;
  border-color: #2e3a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
html.dark .kao-copy-label { color: #4b5a72; }
html.dark .top_copy_box {
  background: #1e2530;
  border-color: #374561;
  color: #d8dce8;
}
html.dark .top_copy_box:focus { border-color: #9900ff; }
html.dark .top_copy_box::placeholder { color: #4b5a72; }
html.dark #msg_div { color: #bb99ff; }

/* 메인 탭 */
html.dark .kao-tab {
  background: #252d3d;
  border-color: #374561;
  color: #64748b;
}
html.dark .kao-tab:hover:not(.active) {
  border-color: #9900ff;
  color: #bb99ff;
}

/* 서브 카테고리 pill */
html.dark .kao-sub-pill {
  background: #252d3d;
  border-color: #374561;
  color: #94a3b8;
}
html.dark .kao-sub-pill:hover:not(.sub_item_select):not(.active) {
  border-color: #9900ff;
  color: #bb99ff;
  background: #2c2050;
}

/* 섹션 타이틀 */
html.dark .emoticon_title {
  color: #aa66ff;
  border-bottom-color: #2e3a52;
}

/* 카오모지 버튼 */
html.dark .textrow_box {
  background: #252d3d;
  border-color: #2e3a52;
  color: #c4ccd8;
}
html.dark .textrow_box:hover,
html.dark .textrow_box:active {
  background: #9900ff;
  border-color: #9900ff;
  color: #fff;
}

/* 이모지 버튼 */
html.dark .emoji {
  background: #252d3d;
  border-color: #2e3a52;
}
html.dark .emoji:hover,
html.dark .emoji:active {
  background: #2c2050;
  border-color: #9900ff;
}

/* ===== Right Drawer (MainMenuModal) ===== */
#MainMenuModal .modal-dialog { width: 280px; }
#MainMenuModal .modal-header {
  background: linear-gradient(135deg,#aa00ff,#6600cc);
  border-bottom: none; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
#MainMenuModal .modal-header .close {
  color: #fff; opacity: .85; margin: 0; float: none;
  margin-left: auto; text-shadow: none;
}
#MainMenuModal .modal-header .close:hover { opacity: 1; }
#MainMenuModal .mm-header-title {
  font-size: 15px; font-weight: 800; color: #fff; flex: 1;
  display: flex; align-items: center; gap: 8px;
}
#MainMenuModal .mm-header-title img { width: 24px; height: 24px; border-radius: 4px; }
#MainMenuModal .modal-content { background: #fff; }

.mm-login-card {
  background: #f8f5ff; border: 1.5px solid #ede6ff; border-radius: 12px;
  padding: 14px; margin-bottom: 14px;
  transition: background .25s, border-color .25s;
}
.mm-login-input {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid #e0d5f5; border-radius: 8px;
  font-size: 14px; background: #fff; color: #333;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box; margin-bottom: 8px;
  transition: border-color .2s, background .25s;
}
.mm-login-input:focus { border-color: #9900ff; outline: none; }
.mm-login-btn {
  width: 100%; padding: 9px; border-radius: 8px; border: none;
  background: linear-gradient(135deg,#aa00ff,#6600cc); color: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer;
  font-family: 'Nanum Gothic',sans-serif; margin-bottom: 8px;
  transition: opacity .15s;
}
.mm-login-btn:hover { opacity: .88; }
.mm-login-links { display: flex; gap: 8px; }
.mm-login-link {
  flex: 1; text-align: center; padding: 7px; border-radius: 8px;
  border: 1.5px solid #e0d5f5; font-size: 13px; font-weight: 700;
  color: #666; text-decoration: none; background: #fff;
  transition: background .15s, color .15s;
}
.mm-login-link:hover { background: #f0e8ff; color: #9900ff; text-decoration: none; }

.mm-user-card {
  background: #f8f5ff; border: 1.5px solid #ede6ff; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .25s, border-color .25s;
}
.mm-user-name { font-size: 14px; font-weight: 800; color: #333; }
.mm-user-btns { display: flex; gap: 6px; }
.mm-user-btn {
  padding: 5px 10px; border-radius: 8px; border: 1.5px solid #e0d5f5;
  font-size: 12px; font-weight: 700; color: #666; background: #fff;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.mm-user-btn:hover { background: #f0e8ff; color: #9900ff; text-decoration: none; }

.mm-nav { display: flex; flex-direction: column; gap: 3px; }
.mm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 700; color: #333;
  text-decoration: none; border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.mm-item i { font-size: 15px; color: #9900ff; width: 20px; text-align: center; flex-shrink: 0; }
.mm-item:hover { background: #f5eeff; border-color: #ede6ff; color: #6600cc; text-decoration: none; }
.mm-item:hover i { color: #6600cc; }
.mm-item.mm-external { color: #999; }
.mm-item.mm-external i { color: #ccc; }
.mm-item.mm-external:hover { color: #555; }

/* dark: modal */
html.dark #MainMenuModal .modal-content { background: #1e2530; }
html.dark .mm-login-card { background: #252d3d; border-color: #2e3a52; }
html.dark .mm-login-input { background: #1e2530; border-color: #374561; color: #d8dce8; }
html.dark .mm-login-input::placeholder { color: #4b5a72; }
html.dark .mm-login-input:focus { border-color: #9900ff; }
html.dark .mm-login-link { background: #252d3d; border-color: #374561; color: #94a3b8; }
html.dark .mm-login-link:hover { background: #2e3a52; color: #bb99ff; text-decoration: none; }
html.dark .mm-user-card { background: #252d3d; border-color: #2e3a52; }
html.dark .mm-user-name { color: #d8dce8; }
html.dark .mm-user-btn { background: #1e2530; border-color: #374561; color: #94a3b8; }
html.dark .mm-user-btn:hover { background: #2e3a52; color: #bb99ff; text-decoration: none; }
html.dark .mm-item { color: #d8dce8; }
html.dark .mm-item i { color: #aa66ff; }
html.dark .mm-item:hover { background: #252d3d; border-color: #2e3a52; color: #e2e8f0; }
html.dark .mm-item:hover i { color: #cc88ff; }
html.dark .mm-item.mm-external { color: #4b5a72; }
html.dark .mm-item.mm-external i { color: #374561; }
html.dark .mm-item.mm-external:hover { color: #94a3b8; }

/* ===== Global Toast ===== */
#_toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: #1a0933;
  color: #fff;
  padding: 11px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 99999;
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
  white-space: nowrap;
  max-width: calc(100vw - 40px);
}
#_toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#_toast .toast-icon { font-size: 14px; flex-shrink: 0; }
#_toast.toast-ok   { background: linear-gradient(135deg,#6600cc,#aa00ff); }
#_toast.toast-ok   .toast-icon { color: #d4b8ff; }
#_toast.toast-err  { background: #9e1a0d; }
#_toast.toast-err  .toast-icon { color: #ffaaaa; }
#_toast.toast-info { background: #1a3060; }
#_toast.toast-info .toast-icon { color: #aac8ff; }
/* 기존 msg_center 숨김 — toast로 대체 */
.msg_center { display: none !important; }

/* ===== 반응형 광고 ===== */
/* 최상단 띠 배너 (slot 8515583914)
   모바일  <768px  : 320×100 (모바일 큰 배너)
   태블릿  768~    : 728×90  (리더보드)
   PC      1200~   : 970×90  (대형 리더보드)      */
.ad-strip { text-align:center; margin:5px auto 10px; overflow:hidden; }
.ad-strip ins.adsbygoogle { display:inline-block; width:320px; height:100px; }
@media (min-width:768px)  { .ad-strip ins.adsbygoogle { width:728px; height:90px; } }
@media (min-width:1200px) { .ad-strip ins.adsbygoogle { width:970px; height:90px; } }

/* 본문 중간 사각 광고 (slot 5462621268)
   모바일  <768px  : 300×250 (미디엄 사각형)
   태블릿+ 768~    : 336×280 (대형 사각형)        */
.ad-mid { text-align:center; margin:20px auto; overflow:hidden; }
.ad-mid ins.adsbygoogle { display:inline-block; width:300px; height:250px; }
@media (min-width:768px) { .ad-mid ins.adsbygoogle { width:336px; height:280px; } }

/* 하단 autorelaxed 광고 (slot 6931850524)
   모바일  : 전체 폭
   태블릿+ : 최대 728px → 980px  */
.ad-bottom { margin:0 auto; overflow:hidden; }
@media (min-width:768px)  { .ad-bottom { max-width:728px; } }
@media (min-width:1200px) { .ad-bottom { max-width:980px; } }

/* ===== kao-hero 히어로 헤더 (전역 공통) ===== */
.kao-hero {
  background: linear-gradient(135deg,#aa00ff,#6600cc);
  border-radius: 14px; padding: 18px 20px;
  margin-bottom: 20px; color: #fff;
}
.kao-hero-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.kao-hero-desc  { font-size: 12px; opacity: .85; line-height: 1.5; }
@media(max-width:480px) {
  .kao-hero { padding: 14px 16px; }
  .kao-hero-title { font-size: 15px; }
}