html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    
    /* overflow: scroll; */
    overflow:hidden;
}

#all_container
{
    /* width를 auto로 주지 않으면 오른쪽에 스크롤이 생긴다 */
    width:auto; 
    height:100%;
    /*background-color: rgb(237, 237, 244);*/
    background-color: black;
    color:white;
    padding:0.5em;
    display:block;
    margin:0;
    overflow:scroll;
    overflow-x: auto;
}

        /* pc용 navbar */
.pc_navbar {
    margin-top: 0.8em;
    background-color: #000; /* 검은색 배경 */
    display: flex;
    justify-content: space-between; /* 좌측 로고, 우측 메뉴 */
    align-items: center;
    height: 5em;
    padding: 0 2em; /* 좌우 여백 */
}

/* 로고 */
.navbar-logo {
    height: 8em;       /* 로고 높이 조절 */
    width: auto;       /* 비율 유지 */
    display: inline-block;
    vertical-align: middle;
}

/* 메뉴 리스트 */
.pc_navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* 메뉴들을 오른쪽 정렬 */
    gap: 2em; /* 메뉴 간격 */
}

/* 메뉴 아이템 */
.pc_navbar ul li {
    text-align: center;
}

/* 버튼 스타일 */
.pc_navbar ul li a {
    display: inline-block; /* 버튼처럼 동작 */
    background-color: black;
    color: #fff;
    text-decoration: none;
    padding: 15px 30px; /* 좌우 여백 추가 */
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
    min-width: 150px; /* 최소 너비 설정 */
    text-align: center;
}


/* 호버 효과 */
.pc_navbar ul li a:hover {
    background-color: #ffcc00; /* 버튼 배경 노란색 */
    color: #000; /* 글자색 검정 */
}

/* pc용 navbar 끝 */

        
.mobile_headline_line {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    /* background: rgba(11, 5, 99, 1); */
    background: black;
    width: auto;
    height: 3em;
    color: white;
    text-align: center;
    margin: auto 0;
}


.moblie_headline_body{
    top:1em;
}

.input_form_list_work_site {
    width:auto;
    background-color: rgb(11, 0, 0);
    color:white;
    font-size: 1.2em;
    font-weight: 900;
    margin-bottom: 0.5em;
    padding:0.5em;
    
}

/* 메인 화면에 있는 그림 자르기 */
.crop {
    width:100%;
    overflow: hidden;    /* 박스 밖으로 나간 부분은 숨김 */
}

.crop img {
    width: 100%;         /* div 너비에 맞게 */
}



.letter_blue {
    color:blue;
}

.common_box {
    width:auto;
    background-color: black;
    color:white;
    margin-top: 0.5em;
    padding:0.5em;
    
}

.login_input_table{
    margin:0 auto;
    text-align:center;
    padding:1em;
    border:1px solid grey;
}

/* 현재 screen의 가로,세로에서 모두 가운데 정렬
    top left 값을 주지만 transform을 이용해 마이너스 값으로 상쇄시킨다*/
.center_screen_div {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0)
}

/* width 100% 로 꽉차게 버튼 생성 */
.width_100_button_blue {
    background-color: blue;
    color:white;
    width:100%;
    text-align:center;
    padding:0.3em;
    font-size: 1em;
}

#navbar{
    position:fixed;
    width:100%;
    height:2.5em;
    background: rgb(74, 107, 253);
    color:white;
}

.dropdown{
    display:none;
    width:auto;
    height:auto;
    padding:1em;
    background: rgb(74, 107, 253);
    z-index:1;
    position:fixed;
}

.ul1{
    list-style:none;
}

.li1{
    margin-top:-0.5em;
    float:right;
    margin-right:2em;
}

.li_dropdown{
    margin-top:-0.5em;
    float:right;
    margin-right:2em;
}

.li_dropdown:hover .dropdown{
    display:block
}

.a_navbar { 
    text-decoration:none;
    /*color: #D5DDE5;*/
    color:white;
}
.a_navbar:hover { 
    text-decoration:none;  
    /*color:aliceblue;*/
    color:#9494d6;
}

.button_blue{
    display:block;
    width:100%;
    height:3em;
    background-color:rgba(11, 5, 99, 1);;
    color:white;
    border:none;
    font-weight: bold; /* 글자 굵게 */
    font-size: 1em;  /* 글자 크기 키우기 (원하는 크기로 조정 가능) */
}

.button_black{
    display:block;
    width:100%;
    height:3em;
    background-color:rgb(71, 69, 92);;
    color:white;
    border:none;
    font-weight: bold; /* 글자 굵게 */
    font-size: 1em;  /* 글자 크기 키우기 (원하는 크기로 조정 가능) */
}

/* 어떤 테이블에서 써도 괜찮다 */
.table_journal {
  border-collapse: collapse;
  width: 100%;
}

.table_journal th {
  font-size: 0.7em;
  white-space: nowrap;

}

.table_journal th, .table_journal td {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
  white-space: nowrap;
}
.table_journal td.buy {
  background-color: #ffe4e1; /* 연한 핑크 */
}
.table_journal td.sell {
  background-color: #e0f7ff; /* 연한 하늘색 */
}

/* 긴 테이블같이 가로로 내용이 길어질 경우 이 div안에 넣어주면 자연스럽게 내용이 확장된다  */
/* 이걸 쓰려면 div로 써야 하며, 이 div안에 table이나 원하는 내용이 있으면 된다*/
.table-wrapper {
  overflow-x: auto; /* 가로 스크롤 허용 */
  background-color: inherit; /* 부모 배경색 따라가기 */
  padding: 10px;
}

/* 매매일지 '매매이유' 칸 왼쪽 정렬용 */
.left-align {
    text-align: left !important;
}

/* a 링크 색상 고정 */
.link a {
    color: white;          /* 기본 색상 */
    text-decoration: none; /* 밑줄 제거 (선택사항) */
}

.link a:visited,
.link a:hover,
.link a:active {
    color: white; /* 클릭하거나 방문해도 색상 유지 */
}


/* pc */
@media only screen and (min-width:800px)
{
    #mobile_only
    {
        display:none;
    }
    
    #pc_only{
        display:block;
    }
    /*
    #pc_only
    {
        display:block;
    }
    */
}

/* 모바일에서만 보임 */
@media only screen and (max-width:799px)
{
    #container{
        width:100%
    }
    #head_title{
        width:100%;
    }
    #content{
        width:100%;
    }
    #right_block1{
        display:none;
    }
    #right_block2{
        display:none;
    }
    #login_page{
        font-size:0.5em;
    }
    #mobile_only{
        display:block;
    }
    
    #pc_only{
        display:none;
    }
}