/*
Theme Name: JW Template
Author: JW
Version: 1.0
Description: JW Template
*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
:root {
}
	  
* { margin:0px; padding:0px; box-sizing:border-box; }
html{ width:100%; min-height: 100vh; font-size:var(--html-font); background:#f4f4f4; }
body { position:relative; width:100%; min-height:100vh; overflow-x:hidden; background:#fff; font-family: 'Noto Sans KR', sans-serif; font-size:14px; color:var(--font-color); }

ol, ul { list-style: none; }
a { color:inherit; }
a, a:hover, a:active, a:focus { text-decoration: none; }
em, address { font-style: normal;}
img { border:0; vertical-align: top;}
textarea{ width:100%; height:100%; outline: none; border:0px; background:transparent; resize: none; }
i, h1, h2, h3, h4, h5, h6{ font: inherit; }
button { border:0; outline:0; background:none; cursor:pointer; font:inherit; -webkit-user-select: none; user-select: none;  }
i {display:flex; justify-content:center; align-items:center; }
table { width:100%; border-collapse: collapse; border-spacing: 0; }

input::placeholder { color:#9F9F9F; transition: color 0.3s ease; }
textarea::placeholder { color:#9F9F9F;  transition: color 0.3s ease; }
input{ outline: none; border: 0px; background:transparent; touch-action:none; }
:focus::placeholder { color:transparent; }

input[type="file"] { position:absolute; overflow:hidden; clip:rect(0,0,0,0); }

/*################################################*/

.logo-wrap { width:100%; height:230px; max-width:1180px; margin:auto; display:flex; justify-content:center; align-items:center; }
header nav { position:relative; height:60px; background:#b90009;  z-index:100;}
header nav > ul { width:100%; height:100%; max-width:1180px; margin:auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
header nav > ul > li { position:relative; height:60px; display:flex; justify-content:center; align-items:center; }
header nav > ul > li > a { height:100%; color:#fff; display:flex; justify-content:center; align-items:center; }
header nav > ul > li > a:hover { color:#fff000; }
header nav > ul > li ul { display:none; position:absolute; top:100%; width:100%; box-shadow: 0px 5px 5px rgba(0,0,0,0.3); }
header nav > ul > li ul li { height:40px; }
header nav > ul > li ul li > a { height:100%; display:flex; justify-content:center; align-items:center; background:#b90009; color:#fff; border-bottom: 1px solid #ccc; }
header nav > ul > li ul li > a:hover { color:#fff000; }
header nav > ul > li:hover ul { display:grid; }

#main {  width:100%; max-width:1180px; margin:auto; min-height:calc(100vh - 300px); display:flex; gap:10px; padding-top:10px; padding-bottom:100px; }
.content-area { flex:1; overflow:hidden; }
.side-area { width:300px; display:flex; flex-direction:column; gap:5px; padding-top:50px; }
.side-area img { max-width:100%; }
.side-area .banner { height:40px; border: 1px solid #ccc;}
.side-area .notice { height:180px; border: 1px solid #ccc;}
.side-area .newpost { height:180px; border: 1px solid #ccc;}
.side-area .rangking { height:180px; border: 1px solid #ccc;}
.side-area .notice-box h2 { font-size:16px; font-weight:bold; display:flex; align-items:center; justify-content:space-between; padding:0 10px; height:40px; border-radius:5px; background:#f4f4f4; }
.side-area .notice-box h2 span { color:#999; }
.side-area .notice-box ul { margin-top:10px; }
.side-area .notice-box ul li { height:35px; display:flex; align-items:center; gap:10px; }
.side-area .notice-box ul li .num { width:25px; height:25px; display:flex; justify-content:center; align-items:center; background:#E0E0E0; border-radius:3px; font-weight:bold; color:#999999; }
.side-area .notice-box ul li:nth-child(1) .num { background:#DB3232; color:#fff; }
.side-area .notice-box ul li:nth-child(2) .num { background:#999999; color:#fff; }
.side-area .notice-box ul li:nth-child(3) .num { background:#999999; color:#fff; }
.side-area .notice-box ul .no-post { height:100px; display:flex; justify-content:center; align-items:center; color:#999; }


footer { background:#DB3232;  }
.footer_logo { font-size:25px; color:#f4280b; font-style: italic; }
footer > div:nth-child(1) { width:100%; max-width:1180px; margin:auto; padding:50px 0; display:flex; align-items:center; }
footer > div:nth-child(1) > div:nth-child(1) { width:200px; }
footer > div:nth-child(1) > div { color:#fff; }
footer > div:nth-child(1) > div:nth-child(2) { flex:1; display:flex; justify-content:center; align-items:center; gap:20px; }
footer > div:nth-child(1) > div:nth-child(2) button { color:#fff; }
footer > div:nth-child(1) > div:nth-child(2) button:last-child { margin-left:40px; background: linear-gradient(#b90009, #400000); color:#fff; width:170px; height:47px; border:1px solid transparent;
  border-image: linear-gradient(#400000, #b90009);  border-image-slice:1; }
footer > div:nth-child(1) > div:nth-child(2) i { width:1px; height:15px; background:#fff; }
footer > div:nth-child(2) { height:38px; background:#9b1c1c; color:#fff; display:flex; justify-content:center; align-items:center; }

#loginform { max-width:300px; margin:1rem auto; }
#loginform label { display:block; margin:0.5rem 0 0.2rem; font-size:14px; }
#loginform input[type="text"],
#loginform input[type="password"] { width:100%; padding:0.5rem; border:1px solid #ccc; font-size:14px; }
#loginform input[type="submit"] { margin-top:1rem; width:100%; background:#333; color:#fff; border:none; padding:0.7rem; cursor:pointer; }
#loginform .login-remember { margin-top:0.5rem; font-size:13px; }
#loginform .login-remember input { margin-right:4px; }
#loginform .login-submit input { font-weight:bold; }
#loginform .forgetmenot { margin-bottom:0.5rem; display:block; }

.content-area img { width:auto; max-width:100%; }

form.custom-register-form { max-width:400px; margin:0 auto; padding:20px; border:1px solid #ddd; border-radius:10px; background:#fafafa; }
form.custom-register-form input[type="text"] { width:100%; padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:6px; }
form.custom-register-form input[type="email"] { width:100%; padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:6px; }
form.custom-register-form input[type="password"] { width:100%; padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:6px; }
form.custom-register-form input[type="submit"] { width:100%; padding:12px; background:#0073aa; color:#fff; border:none; border-radius:6px; font-weight:bold; cursor:pointer; transition:background 0.3s; }
form.custom-register-form input[type="submit"]:hover { background:#005177; }

form.custom-register-form input{display:block;width:100%;margin:6px 0;padding:8px;border:1px solid #ccc;}


.jw-board-view .comments-area{margin-top:24px; padding:16px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;}
.jw-board-view .comments-title{margin:0 0 14px; font-size:16px; font-weight:700; color:#0f172a;}
.jw-board-view .comment-list{list-style:none; margin:0; padding:0;}
.jw-board-view .comment-list>li{margin:0 0 14px; padding:14px 14px 14px 60px; position:relative; border:1px solid #eef0f3; border-radius:10px; background:#f8fafc;}
.jw-board-view .comment-body{margin:0;}
.jw-board-view .comment-author{margin:0 0 6px; font-weight:600; color:#111827;}
.jw-board-view .comment-author .says{display:none;}
.jw-board-view .comment-author .avatar{position:absolute; left:14px; top:14px; width:36px; height:36px; border-radius:50%; background:#fff;}
.jw-board-view .comment-meta,.jw-board-view .comment-metadata{margin:0 0 8px; font-size:12px; color:#6b7280;}
.jw-board-view .comment-content{margin:0 0 10px; color:#111827; line-height:1.7;}
.jw-board-view .reply{margin:8px 0 0;}
.jw-board-view .reply a{display:inline-block; padding:5px 10px; font-size:12px; border:1px solid #e5e7eb; border-radius:6px; text-decoration:none; color:#334155; background:#fff;}
.jw-board-view .reply a:hover{border-color:#d1d5db; background:#f1f5f9;}
.jw-board-view .comment-list .children{list-style:none; margin:12px 0 0 34px; padding:0;}
.jw-board-view .comment-navigation{display:flex; justify-content:space-between; margin:10px 0; font-size:12px; color:#6b7280;}
.jw-board-view .comment-respond{margin-top:18px; padding:14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;}
.jw-board-view #reply-title,.jw-board-view .comment-reply-title{margin:0 0 10px; font-size:16px; font-weight:700; color:#0f172a;}
.jw-board-view .logged-in-as{margin:0 0 10px; font-size:12px; color:#6b7280;}
.jw-board-view .comment-form{display:block; margin:0;}
.jw-board-view .comment-form p{margin:0 0 10px;}
.jw-board-view .comment-form label{display:block; margin:0 0 4px; font-size:12px; color:#6b7280;}
.jw-board-view .comment-form input[type="text"]{width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff; outline:none;}
.jw-board-view .comment-form input[type="email"]{width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff; outline:none;}
.jw-board-view .comment-form input[type="url"]{width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff; outline:none;}
.jw-board-view .comment-form textarea{width:100%; box-sizing:border-box; padding:12px 14px; min-height:130px; border:1px solid #d1d5db; border-radius:10px; background:#fff; outline:none; resize:vertical;}
.jw-board-view .comment-form input:focus,.jw-board-view .comment-form textarea:focus{border-color:#9ca3af; box-shadow:0 0 0 3px rgba(59,130,246,0.1);}
.jw-board-view .comment-form .form-submit{margin:10px 0 0;}
.jw-board-view .comment-form .submit{cursor:pointer; display:inline-block; padding:10px 16px; font-size:14px; font-weight:700; border:1px solid #111827; border-radius:10px; background:#111827; color:#fff;}
.jw-board-view .comment-form .submit:hover{background:#0b1220; border-color:#0b1220;}
.jw-board-view .comment-awaiting-moderation{display:inline-block; margin-top:6px; font-size:12px; color:#b45309; background:#fff7ed; padding:2px 6px; border-radius:4px;}
.jw-board-view .required{color:#ef4444;}
.jw-board-view .no-comments{margin:8px 0; color:#6b7280;}

.jw-board-view .comment-actions{margin:6px 0 0;}
.jw-board-view .comment-delete{display:inline-block; padding:4px 8px; font-size:12px; border:1px solid #ef4444; border-radius:6px; color:#ef4444; text-decoration:none; background:#fff;}
.jw-board-view .comment-delete:hover{background:#fee2e2; border-color:#dc2626; color:#dc2626;}

@media (max-width:480px){ .jw-board-view .comment-list>li{padding-left:52px;} .jw-board-view .comment-author .avatar{width:32px; height:32px;} .jw-board-view .comment-form .submit{width:100%; text-align:center;} }

/* ======================= 컴포넌트 ======================= */
/* ========= table ========= */
/* base */
.jw-tableA { width:100%; border:1px solid #F3F3F3; border-radius:12px; border-collapse:separate; border-spacing:0; background:#fff; table-layout:fixed; }
/* head */
.jw-tableA thead th { height:50px; color:#000; font-weight:bold; text-align:center; border-bottom: 1px solid #eee; }
.jw-tableA th { background:#f4f6f8; border-bottom: 1px solid #ccc; text-align:center; padding: 10px 5px; }

/* body */
.jw-tableA tbody td { border-bottom:1px solid #eef2f6; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.jw-tableA tbody tr:hover { background:#f9fbff; }
.jw-tableA tbody tr:last-child td { border-bottom:0; }
/* corners */
.jw-tableA thead tr:first-child th:first-child { border-top-left-radius:12px; }
.jw-tableA thead tr:first-child th:last-child { border-top-right-radius:12px; }
.jw-tableA tbody tr:last-child td:first-child { border-bottom-left-radius:12px; }
.jw-tableA tbody tr:last-child td:last-child { border-bottom-right-radius:12px; }
/* utilities */
.jw-tableA .is-center { text-align:center; }
.jw-tableA .is-right { text-align:right; }
.jw-tableA .is-muted { color:#6b7280; }
.jw-tableA .is-strong { font-weight:700; }
.jw-tableA .row-selected td { background:#eef6ff; }
/* empty */
.jw-tableA .is-empty td { padding:48px 16px; text-align:center; color:#9ca3af; }
/* sticky header */
.jw-tableA thead.is-sticky th { position:sticky; top:0; z-index:1; }
/* compact 모드 */
.jw-tableA.is-compact thead th { padding:10px 12px; font-size:13px; }
.jw-tableA.is-compact tbody td { padding:10px 12px; font-size:13px; }
.jw-tableA .col-60 { width:60px; }
.jw-tableA .col-80 { width:80px; }
.jw-tableA .col-100 { width:100px; }
.jw-tableA .col-120 { width:120px; }
.jw-tableA .col-150 { width:150px; }
.jw-tableA .col-160 { width:160px; }
.jw-tableA .col-200 { width:220px; }
.jw-tableA .col-220 { width:220px; }

/* ========= page ========= */

.jw-pagebox { margin-top:20px; display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .info { flex:1; font-size:10px; font-weight:300; color:#666666; }
.jw-pagebox > .info.right { display:flex; justify-content:flex-end; }
.jw-pagebox > .contents { flex:1; display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .contents.off { display:none; }
.jw-pagebox > .contents > div { position:relative; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > div.btn {  width:28px; height:28px; }
.jw-pagebox > .contents > div.btn > button { width:100%; height:100%; }
.jw-pagebox > .contents > div.btn.off { display:none; }
.jw-pagebox > .contents > .page { display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .contents > .page > .p { width:28px; height:28px; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > .page > .p.show { color:#4d7cff; font-size:16px; font-weight:bold; }
.jw-pagebox > .contents > div > span:last-child { position:absolute; }
.jw-pagebox > .contents button { position:relative; background:transparent; border-radius:50%; } 
.jw-pagebox > .contents button:hover { background:#eee; } 
.jw-pagebox .prev { position:relative; height:0; height:0; display:flex; justify-content:center; align-items:center; }
.jw-pagebox .prev:after { content:""; position:absolute; width:6px; height:6px; transform:rotate(135deg); border:1px solid transparent; border-color: transparent #000 #000 transparent;  }
.jw-pagebox .prev2 { position:relative; height:0; height:0; }
.jw-pagebox .prev2:after { content:""; position:absolute; left:15px; width:6px; height:6px;  transform:rotate(135deg); border:1px solid transparent; border-color: transparent #000 #000 transparent; }
.jw-pagebox .next { position:relative; height:0; height:0; display:flex; justify-content:center; align-items:center; }
.jw-pagebox .next:after { content:""; position:absolute; width:6px; height:6px; transform:rotate(-45deg); border:1px solid transparent; border-color: transparent #000 #000 transparent;  }
.jw-pagebox .next2 { position:relative; height:0; height:0; }
.jw-pagebox .next2:after { content:""; position:absolute; left:5px; width:6px; height:6px;  transform:rotate(-45deg); border:1px solid transparent; border-color: transparent #000 #000 transparent; }

/* ========= checkbox ========= */
.jw-checkbox { display:flex; --border-color:#4E4E4E; cursor:pointer; }
.jw-checkbox input{ display:none; }
.jw-checkbox .icon{ display:inline-block; vertical-align:middle; cursor:pointer; }
.jw-checkbox .icon{ position:relative; width:20px; height:20px; border:1px solid var(--border-color); border-radius:3px; transition:background 0.1s ease;}
.jw-checkbox .icon::after{ content:''; position:absolute; top:-3px; left:7px; width:6px; height:16px; border-right:2px solid var(--border-color); border-bottom:2px solid var(--border-color); transform:rotate(45deg) scale(0); opacity:0; }
.jw-checkbox input:checked ~ .icon{ border-color:transparent; border:1px solid var(--border-color); }
.jw-checkbox input:checked ~ .icon::after{ opacity:1; transform:rotate(45deg) scale(1);}
.jw-checkbox .text{ margin-left:10px; color:#4E4E4E; }


/* ========= radio ========= */
.jw-radio { display:flex; align-items:center; cursor:pointer; }
.jw-radio input { display:none; }
.jw-radio .icon { display:inline-block; }
.jw-radio .icon { position:relative; width:16px; height:16px; border:1px solid #CBCCD4; border-radius:50%; transition:all 0.1s ease;}
.jw-radio .icon::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:8px; height:8px; border-radius:50%; background:#3F51B5; transition:all 0.3s ease; opacity:0; }
.jw-radio input:checked ~ .icon{ border-color:transparent; border:1px solid #3F51B5; }
.jw-radio input:checked ~ .icon::after{ opacity:1; }

.jw-radio.typeA .text { min-width:78px; height:46px; padding:0 24px; border-radius:12px; font-size:16px; color:#6B6B6B; font-weight:bold; display:flex; justify-content:center; align-items:center; border: 1px solid #D4D4D4; }
.jw-radio.typeA input:checked ~ .text { color:#fff; background:#121212; border: 1px solid #121212; }

.jw-radio.typeB .text { padding:0 24px; height:46px; font-size:16px; font-weight:500; display:flex; justify-content:center; align-items:center; }
.jw-radio.typeB input:checked ~ .text { color:#0065F8; background:#D4E7FF; }

/* ========= ic-close ========= */
.ic-close { position:relative; width:var(--w, 24px); height:var(--w, 24px); cursor:pointer; display:flex; justify-content:center; align-items:center; transition-duration: 0.5s; }
.ic-close::after { content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(45deg); }
.ic-close::before { content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(-45deg); }


/* ========= dialog ========= */
dialog { position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background:#fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); overflow:hidden; outline: none; border:none; }
dialog:has(.create-reservation-m2) { border-radius:32px; }
.dialog-container { position:relative; height:100%; padding:40px; }
.dialog-container .dialog-close { position:absolute; top:10px; right:10px; }
.dialog-controls { display:flex; justify-content:center; align-items:center; gap:10px; }
.dialog-controls.jw-flex-r { justify-content:flex-end; }


.grid-wrap { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; align-items:start; }
.grid-item { min-height:40px; display:flex; }
.grid-item .label-name { width:150px; color:#121212; display:flex; justify-content:center; align-items:center; }
.grid-item input { border-radius:8px; border: 1px solid #D4D4D4; padding:0 10px; background:#fff; }
.grid-item input.full {flex:1; }
.grid-item input.w200 { width:200px; }
.grid-wrap .col-span-2 { grid-column:span 2 / span 2; }
.grid-wrap .col-span-3 { grid-column:span 3 / span 3; }
.grid-wrap .wp-editor-wrap { width:100%; }

/* ========= button ========= */
.jw-button { height:40px; border-radius:5px; --jw-btn-bg:#ff9900; --jw-btn-border:#ff9900; --jw-btn-color:#FFFFFF; --jw-btn-bg-hover:#ea8c00; --jw-btn-border-hover:#ea8c00; display:flex; justify-content:center; align-items:center; gap:10px; background:var(--jw-btn-bg); border:1px solid var(--jw-btn-border); color:var(--jw-btn-color); cursor:pointer; transition:background 0.2s, border-color 0.2s, color 0.2s; padding:0 24px; user-select: none; }
.jw-button.typeA { --jw-btn-bg:#F9FAFB; --jw-btn-border:#D1D5DB; --jw-btn-color:#111827; --jw-btn-bg-hover:#E5E7EB; --jw-btn-border-hover:#9CA3AF; }
.jw-button:hover { background:var(--jw-btn-bg-hover); border-color:var(--jw-btn-border-hover); }
.jw-button:disabled { cursor:not-allowed; pointer-events:none; background:#EAEAEA; color:#B0B0B0; }
.jw-button.typeJoin { --jw-btn-bg:#F9FAFB; --jw-btn-border:#D1D5DB; --jw-btn-color:#111827; --jw-btn-bg-hover:#E5E7EB; --jw-btn-border-hover:#9CA3AF; font-size:12px; }

/* Flex & Align */
.jw-center { display:flex; justify-content:center; align-items:center; }
.jw-scenter { place-self:center; }
.jw-flex { display:flex; }
.jw-cols { display:flex; align-items:center; }
.jw-rows { display:flex; flex-direction:column; }
.jw-between { justify-content:space-between; }
.jw-around { justify-content:space-around; }
.jw-flex-c { justify-content:center; }
.jw-flex-r { justify-content:flex-end; }
.jw-flex-s { justify-content:flex-start; }
.jw-self-center { place-self:center; }
/* Grid */
.jw-grid-span2 { grid-column:span 2; }

/* Width */
.jw-w10 { width:10px; } .jw-w20 { width:20px; } .jw-w50 { width:50px; } .jw-w80 { width:80px; }
.jw-w100 { width:100px; } .jw-w120 { width:120px; } .jw-w150 { width:150px; } .jw-w200 { width:200px; }
.jw-w250 { width:250px; } .jw-w300 { width:300px; } .jw-w335 { width:335px; } .jw-w348 { width:348px; } .jw-w400 { width:400px; }
.jw-w450 { width:450px; } .jw-w500 { width:500px; } .jw-w800 { width:800px; } .jw-w1280 { width:1280px; }
.jw-wf { flex:1; min-width:0; } /* overflow 방지 */
.jw-w { width:100%; }

/* Max-Width */
.jw-mw100 { max-width:100px; } .jw-mw120 { max-width:120px; } .jw-mw150 { max-width:150px; }
.jw-mw200 { max-width:200px; } .jw-mw300 { max-width:300px; } .jw-mw1280 { max-width:1280px; }

/* Padding */
.jw-pad10 { padding:10px; } .jw-pad20 { padding:20px; }
.jw-pdl10 { padding-left:10px; } .jw-pdl20 { padding-left:20px; }

/* Gap (컨테이너에 jw-flex/jw-grid 필요) */
.jw-gap5 { gap:5px; } .jw-gap8 { gap:8px; } .jw-gap10 { gap:10px; } .jw-gap15 { gap:15px; } .jw-gap16 { gap:16px; } .jw-gap20 { gap:20px; } .jw-gap24 { gap:24px; }
.jw-gap30 { gap:30px; } .jw-gap40 { gap:40px; } .jw-gap50 { gap:50px; } .jw-gap150 { gap:150px; }

/* Margin */
.jw-mgt4 { margin-top:4px; } .jw-mgt8 { margin-top:8px; } .jw-mgt10 { margin-top:10px; } .jw-mgt12 { margin-top:12px; } .jw-mgt15 { margin-top:15px; } .jw-mgt16 { margin-top:16px; } .jw-mgt20 { margin-top:20px; } .jw-mgt24 { margin-top:24px; }
.jw-mgt30 { margin-top:30px; } .jw-mgt32 { margin-top:32px; } .jw-mgt40 { margin-top:40px; } .jw-mgt44 { margin-top:44px; } .jw-mgt50 { margin-top:50px; } .jw-mgt68 { margin-top:68px; } .jw-mgt100 { margin-top:100px; }
.jw-mgb10 { margin-bottom:10px; } .jw-mgb50 { margin-bottom:50px; }
.jw-mgr10 { margin-right:10px; } .jw-mgl10 { margin-left:10px; } .jw-mgl20 { margin-left:20px; }
.jw-mg10 { margin:0 10px; }

/* Height */
.jw-h10 { height:10px; } .jw-h20 { height:20px; } .jw-h25 { height:25px; } .jw-h30 { height:30px; }
.jw-h40 { height:40px; } .jw-h50 { height:50px; } .jw-h60 { height:60px; } .jw-h80 { height:80px; }
.jw-h100 { height:100px; } .jw-h120 { height:120px; } .jw-h150 { height:150px; }
.jw-h100p { height:100%; }

/* Max-Height */
.jw-mh100 { max-height:100px; } 

/* Font Size (px 고정) */
.jw-font12 { font-size:12px; } .jw-font13 { font-size:13px; } .jw-font14 { font-size:14px; }
.jw-font20 { font-size:20px; } .jw-font22 { font-size:22px; } .jw-font24 { font-size:24px; }

/* Heading */
.jw-h1 { font-size:18px; font-weight:bold; } .jw-h2 { font-size:16px; font-weight:bold; }

/* REM Scale (html 18px 기준) */
.rem12{ font-size:0.67rem; } .rem14{ font-size:0.78rem; } .rem16{ font-size:0.89rem; } .rem18{ font-size:1rem; }
.rem20{ font-size:1.11rem; } .rem22{ font-size:1.22rem; } .rem24{ font-size:1.33rem; } .rem26{ font-size:1.44rem; }
.rem28{ font-size:1.56rem; } .rem30{ font-size:1.67rem; } .rem32{ font-size:1.78rem; } .rem34{ font-size:1.89rem; }
.rem36{ font-size:2rem; } .rem38{ font-size:2.11rem; } .rem46{ font-size:2.56rem; } .rem48{ font-size:2.67rem; }
.rem50{ font-size:2.78rem; } .rem60{ font-size:3.33rem; } .rem72{ font-size:4rem; }

/* 보너스 유틸 */
.jw-ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jw-break { word-break:break-word; overflow-wrap:anywhere; }
.jw-hide { display:none !important; }
.jw-inline { display:inline-block; }
.jw-ovh { overflow:hidden; }
.jw-pta { pointer-events:auto; } .jw-ptn { pointer-events:none; }

.inputFile { position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; }
.inputFile input[type=file] { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.inputFile .jw-button { pointer-events: none; }
.inputFile:hover .jw-button { background:var(--jw-btn-bg-hover); border-color:var(--jw-btn-border-hover); }
.inputFile-wrap { display:flex; align-items:center; gap:10px; }

.jw-comments-area { margin-top: 24px; }
.jw-comment-box { border: 1px solid #e5e7eb; background: #fafafa; }
.jw-comment-box-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid #e5e7eb; font-size: 13px; color: #6b7280; }
.jw-comment-total { color: #f97316; font-weight: 600; }
.jw-comment-order { border: none; background: transparent; font-size: 12px; color: #4b5563; cursor: pointer; }
.jw-comment-form { padding: 10px 12px 12px; margin: 0; }
.jw-comment-form .comment-form-comment { margin: 0; background:#fff; }
.jw-comment-form .comment-form-comment textarea { width: 100%; min-height: 80px; border: 1px solid #e5e7eb; border-radius: 4px; padding: 8px 10px; font-size: 14px; resize: vertical; box-sizing: border-box; }
.jw-comment-form .form-submit { margin-top: 8px; text-align: right; }
.jw-comment-form .form-submit .jw-button { padding: 6px 14px; font-size: 13px; }


.outlogin { width:100%; }
.outlogin .login-links { display:flex; justify-content:center; align-items:center; gap:10px; }
.outlogin .login-links a { flex:1; display:flex; justify-content:center; align-items:center; }


.login-userbox { padding: 12px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.login-userbox p { margin: 6px 0; display: flex; align-items: center; gap: 8px; }
.login-userbox strong { color: #333; font-weight: 600; }
.login-userbox img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ccc; }
.login-userbox a { color: #0073aa; text-decoration: none; margin-left: 4px; }
.login-userbox a:hover { text-decoration: underline; color: #005177; }
.login-userbox .point-info { margin:10px 0; }

.notice-box h2 { font-size:16px; font-weight:bold; padding:0 10px; display:flex; align-items:center; height:40px; border-radius:5px; background:#f4f4f4; }
.notice-box h2 a { width:100%; eight:100%; display:flex; align-items:center; justify-content:space-between; }
.notice-box h2 span { color:#999; }
.notice-box ul { margin-top:10px; }
.notice-box ul li { height:35px; }
.notice-box ul li a { max-width: 220px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; min-width: 0; }
.notice-box ul li .num { width:25px; height:25px; display:flex; justify-content:center; align-items:center; background:#E0E0E0; border-radius:3px; font-weight:bold; color:#999999; }
.notice-box ul li:nth-child(1) .num { background:#DB3232; color:#fff; }
.notice-box ul li:nth-child(2) .num { background:#999999; color:#fff; }
.notice-box ul li:nth-child(3) .num { background:#999999; color:#fff; }
.notice-box ul .no-post { height:100px; display:flex; justify-content:center; align-items:center; color:#999; }

.jw-comment-login-required { padding:0 10px; }


.jw-recent-posts { margin: 0 0 20px; padding: 0; }
.jw-recent-posts-list { list-style: none; margin: 0; padding: 0; }
.jw-recent-posts-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; height:45px; border-bottom: 1px solid #eee; }
.jw-recent-posts-item:last-child { border-bottom: none; }
.jw-recent-posts-title { flex: 1; display: inline-block; text-decoration: none; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-recent-posts-title:hover { text-decoration: underline; color: #1677ff; }
.jw-recent-posts-date { flex-shrink: 0; margin-left: 10px; font-size: 12px; color: #999; }

.jw-recent-posts--thumb { margin:20px 0; }
.jw-recent-posts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.jw-recent-posts-thumb-item { }
.jw-recent-posts-thumb-link { display: flex; flex-direction: column; height: 100%; border: 1px solid #eee; border-radius: 6px; overflow: hidden; text-decoration: none; background: #fff; }
.jw-recent-posts-thumb-image { width: 100%; aspect-ratio: 4 / 3; background: #f5f5f5; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.jw-recent-posts-thumb-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jw-recent-posts-thumb-placeholder { font-size: 12px; color: #999; }
.jw-recent-posts-thumb-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.jw-recent-posts-thumb-title { font-size: 13px; color: #333; line-height: 1.4; max-height: 2.8em; overflow: hidden; }
.jw-recent-posts-thumb-date { font-size: 11px; color: #999; }
.jw-recent-posts-thumb-link:hover { border-color: #1677ff; }
.jw-recent-posts-thumb-link:hover .jw-recent-posts-thumb-title { color: #1677ff; }




@media screen  and  (max-width : 850px) {
	#sidebarMenu { display:flex; }
	header nav > ul { display:flex; gap:10px; }
	header nav > ul > li:nth-child(1) { width:40px; }
	header nav > ul > li:nth-child(6) { display:none; }
	header nav > ul > li:nth-child(7) { display:none; }
	header nav > ul > li:nth-child(8) { display:none; }
	header nav > ul > li:nth-child(9) { display:none; }
	main { padding:0 10px; }
	main .side-area { display:none; }
	.main-visual { margin-top:10px; }
	.logo-wrap { height:100px; }
	.logo-wrap img { height:80px; }
	.content-area > .content h2 { font-size:18px; font-weight:bold; }
	.mobile { display:flex; }
	.pc { display:none; }
	footer .footer_logo { display:flex; justify-content:center; align-items:center; }
	footer > div:nth-child(1) > div:nth-child(2) {  margin-top:20px; gap:5px; }
	footer > div:nth-child(1) > div:nth-child(2) button { font-size:12px; }
	footer > div:nth-child(1) { flex-direction:column; }
	footer > div:nth-child(2) { font-size:12px; padding:10px; height:auto; }
	.mobile-btn { display:none; }
}