@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll;height:100%;min-width:320px}
body {margin:0;padding:0;font-size:0.75em;background:#f8f8f8;height:100%;font-family:'Malgun Gothic', dotum, sans-serif}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em;-webkit-appearance:none}
textarea, select {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
textarea {border-radius:0;-webkit-appearance:none;font-family:'Malgun Gothic', dotum, sans-serif}
select {margin:0;background:none;font-family:'Malgun Gothic', dotum, sans-serif}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
ul,li,dl,dt,dd {padding:0;margin:0}
ul {list-style:none}

*,:after,:before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* 중간 레이아웃 */
#wrapper {}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#container {position:relative;min-height:300px}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {font-size:1.2em;font-weight:bold;height:50px;padding:10px 15px;line-height:30px;background:#fff;color:#333;
-webkit-box-shadow:0 0 10px rgba(181, 181, 181, 0.4);
-moz-box-shadow:0 0 10px rgba(181, 181, 181, 0.4);
box-shadow:0 0 10px rgba(181, 181, 181, 0.4);
}
#container_title a {display:inline-block;margin-right:5px}
.fixed {position:fixed;top:0;right:0;z-index:999}
#container_title.fixed {width:100%}

/* 하단 레이아웃 */
#ft {background:#222;padding:0px 20px 20px}
#ft h1 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#ft p {margin:0;padding:10px 0;line-height:1.8em}

#ft_copy {padding:10px;line-height:2em;text-align:center;color:#777}
#ft_copy #ft_company {text-align:center}
#ft_copy #ft_company a {display:inline-block;padding:0 10px;line-height:1em;border-left:1px solid #333;color:#fff}
#ft_copy #ft_company a:first-child {border:0}
.ft_cnt {font-weight:normal;color:#e3e3e3;line-height:2em;text-align:center}
.ft_cnt h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#ft_copy b {color:inherit}
#ft_copy a {color:inherit;text-decoration:none}

#top_btn {position:fixed;bottom:10px;right:15px;width:50px;height:50px;line-height:36px;border:2px solid #d2d2d2;border-radius:50%;background:#fff;color:#d2d2d2;text-align:center;font-size:15px;z-index:99;}
#top_btn i {font-size:1.4em}
#top_btn:hover {background:#3b8afb;border-color:#3b8afb;color:#fff}
#device_change {display:block;line-height:40px;border-radius:5px;background:#302e2e;color:#777;font-size:1em;text-decoration:none;text-align:center}

/* ==========================================================================
   [LOGICAL FIX] Mobile Navigation Panel
   ========================================================================== */

/* Mobile Header */
header#header #mobile-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header#header .mobile-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 15px;
}
header#header .mobile-logo img {
    height: 30px;
}
header#header .mobile-menu-open-btn {
    font-size: 1.5rem;
    color: #333;
    background: none;
    border: none;
    padding: 5px;
}

/* Navigation Panel (메뉴 패널) */
header#header > #mobile-nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background-color: #fff;
    z-index: 1002; /* 💡 [수정] 오버레이보다 높은 z-index */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
header#header > #mobile-nav-panel.is-active {
    transform: translateX(0);
}

/* Panel Header */
header#header > #mobile-nav-panel .mobile-nav-header {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
header#header > #mobile-nav-panel .btn-mobile-login,
header#header > #mobile-nav-panel .btn-mobile-join {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-right: 10px;
}
header#header > #mobile-nav-panel .btn-mobile-join {
    background-color: #0056b3;
    color: #fff;
    border-color: #0056b3;
}
header#header > #mobile-nav-panel .mobile-user-info {
    font-size: 1rem;
    font-weight: 700;
}
header#header > #mobile-nav-panel .mobile-menu-close-btn {
    margin-left: auto;
    font-size: 2rem;
    background: none;
    border: none;
    color: #888;
}

/* GNB (Global Navigation) */
header#header > #mobile-nav-panel .mobile-gnb {
    flex-grow: 1;

}
header#header > #mobile-nav-panel .mobile-gnb ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
header#header > #mobile-nav-panel .mobile-gnb li {
    border-bottom: 1px solid #f5f5f5;
}
header#header > #mobile-nav-panel .mobile-gnb li a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    font-size: 1.1rem;
    color: #333;
    text-decoration: none;
}
header#header > #mobile-nav-panel .sub-menu-indicator {
    margin-left: auto;
    font-size: 0.9rem;
    color: #aaa;
    padding: 5px;
}
header#header > #mobile-nav-panel .sub-menu {
    display: none;
    background-color: #f9f9f9;
}
header#header > #mobile-nav-panel .sub-menu li a {
    padding-left: 40px;
    font-size: 1rem;
    color: #555;
}

/* Overlay (뒷배경) */
header#header > #mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1001; /* 💡 [수정] 메뉴 패널보다 낮은 z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
header#header > #mobile-nav-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* 화면낭독기 사용자용 */
.sound_only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}
/* 본문 바로가기 */
.to_content a {z-index:100000;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
/* 이미지 등비율 리사이징 */
.img_fix {width:100%;height:auto}