@charset "UTF-8";
 /*
	Author: jinwook
	Date:
	Project:
*/
/* 큰 모니터: */
@media only screen and (min-width : 1824px) {
       /* Styles */
}


/* 태블릿 및 작은 데스크탑: */
@media only screen and (min-width : 768px) and (max-width : 1224px) {       
       /* header */
       .head_area .pc_sublist{display:none;}
       .head_area .mobile_sublist{position:relative; display:flex; flex-direction: column; align-items: center;}
       /* header */
       /* body */
       .container{padding-left:0;}
       .aside_wrap{display:none !important;}
       .com_area{width:100%;}
       .com_area .list{width:calc(50% - 15px);}
       /* body */
}


/* iPad (가로/세로): */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
       .searchbar_area .searchbar_box{width:260px;}
}


/* iPad (가로): */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
       /* header */
       .mobile_area{display:flex;}
       .head_area .logo{ transform: translateX(10%);}
       /* header */

        /* body */
       .container{padding-left:0;}
       .aside_wrap{display:none !important;}
       .com_area{width:100%;}
       /* body */

       /* 작성 */
       .post_area{width:100%}
       /* 작성 */

       /* 내정보 */
       .choice_area{padding-left:0;}
       .com_area .list.view{width:100%;}
       /* 내정보 */
}


/* iPad (세로): */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
       /* header */
       .mobile_area{display:flex;}
       .head_area .logo{ transform: translateX(10%);}
       .head_area .add_btn > span{display:none;}
       /* header */

       /* body */
       .container{padding-left:0;}
       .aside_wrap{display:none !important;}
       .com_area{width:100%;}
       .com_area .list{width:calc(100% / 2 - 20px);}
       /* body */

       /* 작성 */
       .post_area{width:100%}
       /* 작성 */

       /* 상세보기 */
       .com_area .list.view{width:100%;}
       /* 상세보기 */

       /* 내정보 */
       .choice_area{padding-left:0;}
       .com_area .list.view{width:100%;}
       /* 내정보 */
}



/* 모바일 디바이스 (스마트폰): */
@media only screen and (max-width : 767px) {
       /* header */
       .header{border-bottom:1px solid var(--bodycolor);}
       .mobile_area{display:flex;}
       .head_area .logo{ transform: translateX(0);}
       .head_area .logo .mobile_logo{display:block;}
       .head_area .logo .pc_logo{display:none;}
       .head_area .my_area .name{display:none;}
       .logo_slogans{display:none !important;}
       /* mobile header */
       .mobile_side_list{width:70%;}
       .head_area .pc_sublist{display:none;}
       .head_area .mobile_sublist{position:relative; display:flex; flex-direction: column; align-items: center;}
       /* mobile header */
       /* header */

       /* 알림 */
       .head_area .alram_area .alram_list{ display:none; position:absolute; top:29px; width:calc(100vw - 20px); max-width:300px; right:10px;}
       /* 알림 */

        /* body */
       .container{padding-left:0;}
       .aside_wrap{display:none !important;}
       .contents_wrap {width:100%; padding:70px 10px 10px; box-sizing:border-box;}
       .contents_wrap.center{padding:20px 10px 80px; box-sizing:border-box;}
       .com_area{width:100%;}
       .com_area .list{width:100%; margin:0 0 15px 0; box-sizing:border-box;}
       .com_area .list .contents_area{ display:block; height:auto; max-height:11em; overflow:hidden;}
       /* 구글 애드센스 광고 모바일 대응 */
       .com_area .grid-item.adsense-ad{width:100% !important; margin:0 0 15px 0 !important; box-sizing:border-box;}
       .com_area .grid-item.adsense-ad .adsense-placeholder{font-size:11px;}
       .choice_area{ width:100%; padding:0; margin-bottom:10px; overflow-x:auto; transition: .2s ease-in; -webkit-overflow-scrolling: touch; }
       .choice_area .choice_box{display:flex; gap:10px; padding:0 10px;}
       .choice_area .choice_box button{width:120px; min-width:120px; padding:12px; font-size:14px; touch-action: manipulation;}
       .searchbar_area .searchbar_box{width:90%;top:60px;background:var(--bodycolor); left:50%; position:absolute; transform: translateX(-50%);}
       /* body */

       /* 글쓰기 */
       .post_area{width:100%; padding:25px 15px; box-sizing:border-box;}
       .file_area .filename{flex-direction: column;}
       .text_area .title{flex-direction: column; gap:10px;}
       .dropdown.post_dropdown{width:100%; padding:12px; font-size:16px; touch-action: manipulation; box-sizing:border-box;}
       .text_area .title textarea{width:100%; padding:12px; font-size:16px; box-sizing:border-box;}
       .text_area .word textarea{width:100%; padding:12px; font-size:16px; min-height:200px; box-sizing:border-box;}
       .btn_area{flex-direction: column-reverse; gap:10px;}
       .btn_area a, .btn_area button{width:100%; padding:14px; font-size:16px; touch-action: manipulation;}
       /* 글쓰기 */

       /* 글보기, 댓글 */
       .com_area .list.view{width:100%; padding:25px 15px; box-sizing:border-box;}
       .comments_area .otheruser_comment.other{margin-left:1rem;}
       .comments_area .user_comment.other{margin-left:1rem;}
       .tag_area .icon{min-width:44px; min-height:44px; touch-action: manipulation;}
       .tag_area button.icon{min-width:44px; min-height:44px; touch-action: manipulation;}
       /* 글보기, 댓글 */

       /* 내정보 */
       .contents_wrap.center_my{padding:70px 10px 10px; box-sizing:border-box;}
       /* 내정보 */

       /* 모달 */
       .login_modal_content, .mypage_modal_content{width:95%; max-width:460px; padding:24px 20px; margin:20px; box-sizing:border-box;}
       .login_modal_form label input{font-size:16px; padding:12px; min-height:44px; box-sizing:border-box;}
       .login_modal_submit{min-height:44px; padding:12px; font-size:16px; touch-action: manipulation;}
       /* 모달 */
       
       /* 푸터 모바일 대응 */
       .footer{padding:20px 15px; margin-top:30px;}
       .footer_links{flex-direction: column; gap:10px;}
       .footer_links .separator{display:none;}
       .footer_copyright{font-size:0.8em;}
}


/* 작은 모바일 디바이스: */
@media only screen and (max-width : 360px) {
       .head_area .logo{ transform: translateX(0);}
       .choice_area .choice_box button{width:100px; min-width:100px; font-size:13px;}
       .login_modal_content, .mypage_modal_content{padding:20px 16px;}
}


/* iPhone4와 같은 높은 해상도: */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
       /* Styles */
}