@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../font/noto-sans-jp.woff2') format('woff2');
}

:root {
    --main-color: #2e3f57;
    --black: #2e3f57;
    --grey-color: #aaa;
    
    --marquee-height: 0px;
    --header-height: 72px;
    --m-cate-height: 60px;
    --layout-padding: 0 20px;
    
    --font-size-mini: 13px;
    --font-size-small: 14px;
    --font-size-medium: 16px;
    --font-size-big: 18px;
    --font-title-size: 20px;
    
    --footer-font-size: 13px;
    
    --font-size-h1: 30px;
    --font-size-h2: 25px;
    --font-size-h3: 20px;
    --font-size-h4: 17px;
    --font-size-h5: 15px;
    
    --line-height-h1: 35px;
    --line-height-h2: 30px;
    --line-height-h3: 25px;
    --line-height-h4: 25px;
    --line-height-h5: 20px;
    
    --line-height-small: 15px;
    --line-height-normal: 23px;
    --line-height-big: 30px;
    --font-weight-light: 200;
    --font-weight-medium: 400;
    --font-weight-bold: 500;
    
    --border-radius: 5px;
    --line-color: #2e3f57;            
    --board-line-color: #ebebeb;
    --board-list-padding: 5px 0 5px 0;
    --button-height: 40px;
}

@media only screen and (max-width: 1024px) {
    :root {            
        --marquee-height: 0px;
        --layout-padding: 0 10px;
    }
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, button, p, a, blockquote, th, td, select {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: #2e3f57;
}

h1, h2, h3, h4, h5 {
    font-weight: var(--font-weight-bold) !important;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }

.bold { font-weight: var(--font-weight-bold); }

/* 추가적인 스타일 */
/*
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--layout-padding);
}
*/

form {
    margin-bottom: 20px;
}

label {
    display: inline-block;
    margin-right: 10px;
}

input { padding: 5px; border: 1px solid var(--line-color); -webkit-appearance: none;  -webkit-border-radius: 0; /* 애플 관련 속성 */ }
select { padding: 5px; border: 1px solid var(--line-color);  -webkit-appearance: none; -webkit-border-radius: 0; /* 애플 관련 속성 */ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z" fill="black"/></svg>') no-repeat right 10px center; background-size: 12px; padding-right: 30px; /* 화살표와 텍스트 간 간격 */}
textarea { border: 1px solid var(--board-line-color);  -webkit-appearance: none; -webkit-border-radius: 0; /* 애플 관련 속성 */} 

/*
input[type="date"], input[type="text"] {
    padding: 5px;
    border: 1px solid var(--line-color);
}
*/

button {
    background-color: var(--main-color);
    color: white;
    border: 1px solid var(--line-color);
    cursor: pointer;
	padding:5px 10px;
    /*  padding: 10px 10px; height: var(--button-height); 	*/
}
button:hover { background-color: #fff; color: black; border: 1px solid #000; cursor: pointer; }


table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid var(--board-line-color);
    padding: var(--board-list-padding);
    text-align:center;
}



th {
    background-color: black;
    color: white;
	text-align:center;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    text-decoration: none;
}

.pagination a.active {
    background-color: var(--main-color);
    color: white;
}

/* 헤더 스타일 */
.header {
  width: 100%;
  height: 64px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom:1px solid #b1b9cb;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 8px;
}

.logo-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}


.reservations_container { width:1000px; /* margin-left:100px; */ padding-top:20px; margin:0 auto;}