@charset "UTF-8";

/*?로그인*/
.login{display:flex; flex-direction:row; gap:160px; justify-content:center; margin:120px auto; }
.login .logInp{display:flex; flex-direction:column; gap: 8px; width:480px;}
.login .logInp .tit{display:inline-block; margin-bottom:80px;text-align:center; font-size:3.2rem; font-weight:600;}
.login .logInp .labelTit{font-size:1.5rem; font-weight:500;}
.login .logInp .form{padding:4px 16px;background:#f5f5f5; border:0; height:56px; width:100%;}
.login .logInp .form:focus{background:#fff;}
.login .logInp .etc{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:4px; font-size: 1.5rem;}
.login .logInp .etc .find{display:inline-flex; gap:24px;}
.login .logInp .etc .find > li{position:relative; font-size: 1.5rem;}
.login .logInp .etc .find > li::after{position:absolute; content:''; right:-14px; top:50%; transform:translateY(-50%); width:4px; height:4px; background:#dbdbdb; border-radius:100%;}
.login .logInp .etc .find > li:last-child::after{display:none;}
.login .logInp .logBtn{margin-top:24px;}
.login .logInp .nonmember{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:40px; border-radius:30px; background:#f5f5f5; height:100%;}
.login .logInp .nonmember .txt{margin-top:40px; font-size:1.5rem; text-align:center;}

.findPop{max-width:400px;}
.findPop .labelTit{font-size:1.3rem; font-weight:500;}
.findPop .findBody{padding:24px;}
.findPop .findBody .infoTxt{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; border-radius:8px; background:#f5f5f5; width:100%; text-align:center; font-size:1.5rem;}
.findPop .findBody .infoTxt .stxt{font-size: 1.3rem;}
.findPop .findBody .findInp{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.findPop input{padding:0 16px; font-size:1.7rem; width:100%; min-height:48px; }
.findPop .findBody .txt{margin-top:16px; font-size:1.5rem;}
.findPop2{max-width:400px;}
.findPop2 .findBody .findInp{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.findPop2 input{padding:0 16px; font-size:1.7rem; width:100%; min-height:48px; }

.chgPw input{padding:0 16px; font-size:1.7rem; width:100%; min-height:48px; }


.full *{width:100%;}
.findPop{display:none; z-index:51; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.1); border-radius:16px;}
.findPop .popTop{padding:24px; border-bottom:1px solid #dbdbdb;}
.findPop .popTop .tit{font-size:var(--fz-titleM); font-weight:600;}
.findPop .findBody{padding:24px;}
.findPop .findBody .infoTxt{line-height:1.4em; font-size:var(--fz-bodyM);}
.findPop .findBody .findInp{display:flex; flex-direction:column; gap:4px; margin-top:16px;}
.findPop .findBody .findBtn{margin-top:16px;}
.findPop .x{position:absolute; right:16px; top:20px; }
.findPop2{display:none; z-index:51; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.1); border-radius:16px;}
.findPop2 .popTop{padding:24px; border-bottom:1px solid #dbdbdb;}
.findPop2 .popTop .tit{font-size:var(--fz-titleM); font-weight:600;}
.findPop2 .findBody{padding:24px;}
.findPop2 .findBody .infoTxt{line-height:1.4em; font-size:var(--fz-bodyM);}
.findPop2 .findBody .findInp{display:flex; flex-direction:column; gap:4px; margin-top:16px;}
.findPop2 .findBody .findBtn{margin-top:16px;}
.findPop2 .x{position:absolute; right:16px; top:20px; }
.chgPw{display:none; z-index:51; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); padding:24px 32px; background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.1); border-radius:16px; width:516px;}
.chgPw .x{position:absolute; right:16px; top:20px;}
.chgPw .popTop{position:relative; padding-right:110px;}
.chgPw .popTop p{line-height:1.3em;}
.chgPw .popTop .tit{font-size:var(--fz-headlineM); font-weight:600; }
.chgPw .popTop .tit .em{color:var(--color-main);}
.chgPw .popTop .txt{margin-top:24px; color:#444; }
.chgPw .popTop .txt .em{color:var(--color-main);}
.chgPw .popTop img{position:absolute; right:0; top:50%; transform:translateY(-50%);}
.chgPw .findInp{display:flex; flex-direction:column; gap:16px; margin-top:40px;}
.chgPw .findInp li{display:flex; flex-direction:column; gap:4px; font-size:14px; color:#777;}
.chgPw .btnW {
  flex-wrap: nowrap;
}
.chgPw .btnW .btn {
  width: auto;
  min-width: 0;
  flex: 1;            /* 두 버튼 동일한 너비 */
}
.chgPw .btnW .laterBtn{width:120px;}
.chgPw .btnW .chgBtn{width:calc(100% - 128px);}
.chgPw .stxt{margin-top:4px; color:var(--color-red); font-size:var(--fz-bodyM);}
@media all and (max-width:768px){
    .login{width:370px;}
    .chgPw{width:370px;}
    .chgPw .popTop{padding-right:70px;}
    .chgPw .popTop .tit{font-size:var(--fz-titleL);}
    .chgPw .popTop img{width:60px;}
    .chgPw .findInp{margin-top:24px;}
}
@media all and (max-width:425px){
    .login{margin:40px auto; width:100%;}
    .login .logInp .etc input[type="checkbox"]{margin-right:8px;}
    .login .logInp .etc .find{gap:16px;}
    .login .logInp .etc .find > li::after{right:-10px;}
    .login .snsLog a{padding-top:64px;}
    .login .snsLog a::before{width:56px; height:56px;}
    .chgPw{padding:24px; width:calc(100% - 32px);}
    .chgPw .popTop{padding-right:50px;}
    .chgPw .popTop .tit{font-size:var(--fz-titleM);}
    .chgPw .popTop .txt{margin-top:16px;}
    .chgPw .popTop img{top:16px; transform:none; width:40px;}
    .chgPw .btnW .laterBtn{width:100px; }
    .chgPw .btnW .chgBtn{width:calc(100% - 108px);}
    .chgPw .btnW .btn{height:40px; font-size:var(--fz-bodyM);}
}


.lineTxt{display:flex; flex-direction:column; gap:4px; color:#676767;}
.lineTxt > li{position:relative; padding-left:16px;}
.lineTxt > li::before{position:absolute; content:''; left:0; top:10px; width:6px; height:1px; background:#676767;}

@media all and (max-width:1280px){
    .login{flex-direction:column; align-items:center; gap:80px;}
    .login .logInp.non .tit{margin-bottom:8px;}
}
@media all and (max-width:768px){
    .login{margin:48px auto; }
    .login .logInp,
    #loginForm{width:calc(100% - 40px);}
    #loginForm .logInp{width:100%;}
    .login .logInp .tit{margin-bottom:48px; font-size:2.8rem;}
    .login .logInp .form{height:48px; font-size: 1.5rem;}
    .login .logInp .labelTit{font-size: 1.3rem;}
    .login .logInp .etc{flex-direction:column; gap:16px 24px; align-items:flex-start;}
    .login .logInp .etc .find{margin: auto;}

    .findPop .findBody{padding:16px;}
}
@media all and (max-width:425px){
    .findPop{width:calc(100% - 48px);}
}

/*? 예약 */
/**달력*/
.refreshBtn{min-width:auto;}
.calendar{margin: 24px auto;}
.calendar .cal{background: #fff; overflow:hidden;  }
.calendar .calenT{display:flex; align-items:center; justify-content:center; gap: 64px; padding: 14px 12px; border:1px solid #ccc; box-shadow:00 3px 7px rgba(0,0,0,0.1);}
.calendar .calenBtn{width: 44px; height: 44px; color:#111; border-radius:8px;}
.calendar .calenBtn:hover{background:#f5f5f5;}
.calendar .calenBtn svg{width: 32px; height: 32px; vertical-align: middle; }
.calendar .calTitle{text-align:center; font-weight: 600; font-size:1.9rem;}
.calendar .weekdays{display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background:#f9f9f9;}
.calendar .weekdays .item{display:inline-flex; align-items:center; justify-content:center; text-align:center; padding:10px; font-weight: 600; }
.calendar .weekdays .sun{ color: var(--color-red); }
.calendar .weekdays .sat{ color: var(--color-blue); }
.calendar .grid{display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;}
.calendar .grid .day{display:grid; grid-template-rows: auto 1fr; gap: 8px; padding:8px; border:1px solid #ccc; border-radius: 4px; background:#fff; min-height:90px;}
.calendar .grid .day:hover{border:1px solid #111;}
.calendar .grid .num{display:flex; align-items:center; justify-content:flex-end; gap: 8px; font-weight: 600; }
.calendar .grid .num time{ font-variant-numeric: tabular-nums; }
.calendar .grid .sun .num{ color: var(--color-red); }
.calendar .grid .sat .num{ color: var(--color-blue); }
.calendar .grid .areaCont{display:flex; flex-direction:column; justify-content:center; gap: 8px; padding: 8px; background: #f5f5f5; border-radius: 4px;  text-align:center; color: #111; font-size: 1.3rem;}
.calendar .grid .areaCont p{display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; text-align:center; justify-content:center;}
.calendar .grid .areaCont .muted{ color: #999; text-decoration:line-through;}
.calendar .grid .disabled{opacity: .5; }
.calendar .grid .disabled:hover{cursor:no-drop;}
.calendar .grid .selected{background:var(--color-main); border:1px solid var(--color-main);}
.calendar .grid .selected .num{color:#fff;}
.calendar .grid .selected .areaCont{background:#fff; }
@media all and (max-width:768px){
    .btn.sm.refreshBtn{font-size:1.5rem;}
    .calendar{margin:16px auto;}
    .calendar .calenT{gap:16px; justify-content:space-between;}
    .calendar .calTitle{font-size:1.7rem;}
    .calendar .grid .day{justify-content:center;}
    .calendar .grid .areaCont{display:none;}
    .calendar .grid .day{min-height:auto; grid-template-rows:auto;}
}
@media all and (max-width:425px){
    .btn.sm.refreshBtn span{display:none;}
    .calendar .calenT{padding:4px 12px;}
    .calendar .calenBtn svg{width:24px; height:24px;}
    .calendar .weekdays .item{font-size: 1.3rem; font-weight: 400;}
    .calendar .grid .num{font-size: 1.5rem;}
}
/**step01*/
.inpBox{display:flex; align-items:center; gap:80px; padding:40px; border-radius:16px; border:1px solid #ccc;}
.inpBox .inp{display:inline-flex; align-items:center; gap:8px; }
.inpBox .inp.mob{display:none;}
.inpBox .inp .tit{font-size:1.5rem; font-weight:500;}
.inpBox .inp label[type="text"]{display:inline-flex; align-items:center; padding:0 16px; color:#676767;}
.inpBox .inp input:read-only{background:#f5f5f5;}
.inpBox .inp .in{padding:8px 16px; width:250px; height:56px; color:#111; font-weight:500;}
.radioPills {display:flex; flex-wrap:wrap; gap:8px;}
.radioPills .pill{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 32px; height:56px; min-width:80px; border:1px solid #ccc; border-radius:100px; background:#fff; color:#676767; cursor:pointer; user-select:none;}
.radioPills .pill > input[type="radio"]{position:absolute; inset:0; opacity:0; margin:0; cursor:inherit;}
.radioPills .pill > i{display:none;}
.radioPills .pill > input[type="radio"]:checked + i{display:inline-block;}
.radioPills .pill:has(> input[type="radio"]:checked){border:2px solid var(--color-main); color:var(--color-main); font-weight:500;}
.radioPills .pill:has(> input[type="radio"]:focus-visible){outline:3px dashed #00CBC1; outline-offset:2px; border-radius:100px;}
.radioPills .pill:hover{border-color:#111;}
@media all and (max-width:1480px){
    .radioPills .pill{padding:8px 16px; height:auto;}
}
@media all and (max-width:1280px){
    .inpBox{gap:24px 80px; flex-wrap:wrap;}
    .inpBox .inp.dateIn{width:100%;}
    .inpBox .inp .tit{min-width:64px;}
}
@media all and (max-width:1024px){
    .inpBox{padding:24px;}
    .inpBox{flex-direction:column; align-items:flex-start; gap:16px 80px;}
}
@media all and (max-width:768px){
    .inpBox{gap:24px;}
    .inpBox .inp{flex-direction:column; align-items:flex-start; gap:4px; width:100%;}
    .inpBox .inp.mob{display:inline-flex;}
    .inpBox .inp label:not(.pill),
    .inpBox .inp label:not(.pill) .in{width:100%;}
    .inpBox .inp .tit{font-weight:600;}
    .inpBox .inp .txt{display:inline-flex; align-items:center; justify-content:flex-start; padding:8px 16px; width:100%; height:56px; background:#f5f5f5; border-radius:8px; border:1px solid #d7d8da; font-size:1.5rem; font-weight: 500;}
    .radioPills .pill{font-size:1.5rem;}
}
@media all and (max-width:425px){
    .inpBox{padding:0; border:0; border-radius:0; margin-top:40px;}
    .inpBox .inp .txt,
    .inpBox .inp .in{padding:8px 12px; height:48px; font-weight: 400;}
    .radioPills .pill{padding:6px 12px; }
}

.rsvDateInfo{display:flex; align-items:center; gap:40px; padding:40px; border-radius:16px; border:1px solid #ccc;}
.rsvDateInfo .date{font-size:2.1rem; font-weight:500;}
.seatMap{position:relative; width:100%; background:#f5f5f5; border-radius:16px; overflow:hidden;}
.seatMap img{min-width:100%; }
.seatMap .mob{display:none;}
.sec{margin-top:40px;}
.sec .h3Tit{margin-bottom:16px;}
.sec .seatSel{display:flex; flex-direction:row; }
.sec .seatSel .div{flex:1; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.sec .seatSel .div .tit{display:inline-block; padding:8px; text-align:center; width:100%; font-size:1.5rem; background:#f5f5f5; border-bottom:1px solid #ccc; }
.sec .seatSel .div:first-child{border-right:1px solid #ccc;}
.sec .seatSel .selBox{padding:16px; text-align:center; }
.sec .seatSel .selBox select{padding-left:16px; min-width:250px; height:56px; border:1px solid #ccc; border-radius:8px; }
.sec .electronic{display:flex; align-items:center; padding:8px 16px; border-radius:8px; border:1px solid #ccc; min-height:56px;}
.sec .electronic:has(input:checked){border:2px solid var(--color-main); }
.sec .notiTxt{display:flex; flex-direction:column; gap:4px;}
.sec .notiTxt .stxt{display:inline-block; padding-left:16px; font-size:1.5rem;}

.sec .notiTxt.rsvEnd{margin:0 auto; padding:40px; border-radius:30px; background:#f5f5f5; width:630px; font-size: 1.5rem;}

.sec .tbl{width:100%; border-collapse:collapse;}
.sec .tbl th,
.sec .tbl td{padding:16px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.sec .tbl td .reduce{text-decoration: line-through;}
.sec .tbl th{background:#f5f5f5; text-align:center; font-weight:500; width:15%; min-width:200px;}
.sec .tbl td:has(.ret){padding:8px 16px;}
.sec .tbl td input[type="text"],
.sec .tbl td input[type="number"],
.sec .tbl td select{min-height:40px;}
.sec .tbl td input[type="file"]{font-size:1.5rem;}
.sec .tbl td .radiW{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center;}
.sec .tbl td .radiW .areaW{display:inline-flex; gap:4px; align-items:center; }

.areaChk.btn.secondary{display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:8px 16px; margin-left:8px;  font-size:1.3rem; border-radius:8px; min-width:auto; height:auto; vertical-align:middle;}
.areaChk.btn.secondary i{font-size:1.7rem;}

.sec .total{display:flex; align-items:center; justify-content:center; padding:32px; margin-top:24px; border:2px solid var(--color-main); background:#f5f5f5; border-radius:16px; }
.sec .total .price{font-size:1.9rem; font-weight:600; color:var(--color-main);}
.sec .totalInfo{margin-top:8px;text-align:right; font-size: 1.5rem;}

.sec .formBox{display:flex; align-items:flex-start; margin-top:16px; }
.sec .formBox .tit{display:inline-flex; align-items:center; gap:4px; min-width:200px; font-weight:500;min-height:56px;}
.sec .formBox .inpArea{flex:1; display:inline-flex; flex-direction:column; gap:16px;}
.sec .formBox .inp{display:inline-flex; align-items:center; padding:8px 16px; min-height:56px; width:100%; border:1px solid #ccc; border-radius:8px; background:#fff;}
.sec .formBox .inp:disabled{background-color:var(--color-gray-10); cursor:no-drop;}
.sec .formBox .inp[type="file"]{padding:14px 16px;}
.sec .formBox .txtBox{display:flex; flex-direction:column; gap:16px; padding:16px; border:1px solid #ccc; border-radius:8px; background:#f5f5f5; }
.sec .formBox .txtBox .em{font-weight:600; }
.sec .formBox .txtBox .em,
.sec .formBox .txtBox .txtCirNum,
.sec .formBox .txtBox .txtDot{font-size:1.5rem;}
.sec .formBox .txtBox .reducChk:has(input:checked){border:2px solid var(--color-main);}
.sec .formBox .txtBox .inp span{flex:1;}

.sec .formBox .radiW{display:flex; flex-direction:row; align-items:center;  gap:24px;}
.sec .formBox .radiW .mobW{display:flex; flex-direction:row; align-items:center; gap:8px;}
.sec .formBox .radiW .inp{width:auto;}
.sec .formBox .radiW .inp:has(input:checked){border:2px solid var(--color-main);}
.sec .formBox .radiW select{min-height:40px; border-radius:8px;}
.sec .formBox .radiW select:disabled{background-color:var(--color-gray-10) !important; cursor:no-drop;}

.agreeBox{display:flex; padding:24px; width:100%; height:300px; overflow-y:auto; border:1px solid #ccc; border-radius:16px;}
.agreeChk{display:flex; align-items:center; justify-content:flex-end; margin-top:24px; text-align:right;}

.rvsOk{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;}
.rvsOk .txt{font-size:2.8rem; font-weight:500; text-align:center;}

.notiBox{display:flex; flex-direction:column; gap:16px; padding:16px;  border:1px solid #ccc; border-radius:8px; background:#f5f5f5; }
.notiBox .tit{font-weight:600; }
.notiBox .tit,
.notiBox .txtCirNum,
.notiBox .txtDot{font-size:1.5rem;}

@media all and (max-width:1024px){
    .rsvDateInfo{padding:24px 40px;}
    .rsvDateInfo .date{font-size: 1.9rem;}

    .rvsOk img{width:150px;}
    .rvsOk .txt{font-size: 2.5rem;}
}
@media all and (max-width:768px){
    .rsvDateInfo{flex-direction:column; align-items:flex-start; gap:8px; padding:16px 24px;}
    .rsvDateInfo .tit{font-size: 1.5rem;}
    .rsvDateInfo .date{font-size: 1.7rem;}
    .seatMap .mob{display:block;}
    .seatMap .web{display:none;}
    .sec{margin-top:32px;}
    .h3Tit{font-size: 2.1rem;}
    .sec .h3Tit{margin-bottom:8px;}
    .sec .seatSel{flex-direction:column; }
    .sec .seatSel .div:first-child{border-right:0; border-bottom:0;}

    .sec .notiTxt.rsvEnd{padding:24px; border-radius:16px; width:100%;}

    .sec .tbl{display:inline-block; border-top:2px solid #111; border-bottom:1px solid #111;}
    .sec .tbl tbody{display:inline-block; width:100%;}
    .sec .tbl tr{display:flex; flex-direction:column; width:100%;}
    .sec .tbl th, 
    .sec .tbl td{padding:8px; font-size: 1.5rem; width:100%; text-align:left;}
    .sec .tbl th{border-bottom:0;} 
    .sec .tbl td{border-top:0;}
    .sec .total{padding:16px 24px;}
    .sec .totalInfo{font-size: 1.3rem; line-height:1.3;}
    .sec .tbl td:has(.ret){padding:8px;}

    .titBox .stxt{font-size:1.3rem;}

    .sec .formBox{flex-direction:column; gap:4px;}
    .sec .formBox .tit{min-height:auto; font-size: 1.5rem;}
    .sec .formBox .inp{padding:8px;font-size: 1.5rem;}

    .agreeBox{font-size:1.5rem; height:230px;}
    .agreeChk{align-items:flex-start; text-align:left; justify-content:flex-start; margin-top:16px; font-size: 1.5rem;}
    .agreeChk input[type="checkbox"]{margin-top:4px;}

    .rvsOk{margin:40px auto;}
    .rvsOk img{width:130px;}
    .rvsOk .txt{font-size: 2.1rem;}

    .sec .formBox .radiW{flex-direction:column; gap:8px; align-items:flex-start;}
    .sec .formBox .radiW select{font-size: 1.5rem;}
}
@media all and (max-width:425px){
    .h3Tit{font-size: 1.9rem;}
    .rsvDateInfo{margin-top:16px; gap:0; padding:0; border-radius:0; border:0; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
    .rsvDateInfo .tit{display:inline-flex; align-items:center; justify-content:center; border-bottom:1px solid #ccc; background:#f5f5f5; width:100%; padding:8px;}
    .rsvDateInfo .date{display:inline-flex; flex-direction:column; font-size: 1.5rem; width:100%; justify-content:center; align-items:center; padding:8px 4px;}
    .rsvDateInfo .date .web{display:none;}
    .sec:first-child{margin-top:16px;}
    .sec .seatSel .selBox select{height:48px;}
    .sec .electronic{font-size:1.5rem; min-height:48px;}
    .sec .notiTxt{font-size: 1.5rem;}
    .sec .notiTxt .stxt{font-size:1.3rem;}

    .sec .tbl th{font-size: 1.3rem;}
    .sec .total{font-size: 1.5rem;}
    .sec .total .price{font-size: 1.7rem;}

    .sec .formBox .inp{min-height:48px;}
    .sec .formBox .inp[type="file"]{padding:10px;}
    .sec .formBox .txtBox .inp {min-height:auto; padding:12px; align-items:flex-start;}
    .sec .formBox .txtBox .inp input{margin-top:4px;}
    
    .rvsOk img{width:110px;}
    .rvsOk .txt{font-size: 1.9rem;}

    .agreeBox{padding:16px;}
}

/*?상태블릿 */
.stateList{display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:16px;}
.stateList .state{display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border:2px solid #ccc; font-size:1.5rem; font-weight:500; border-radius:100px;}
.stateList .state.done{color:#007aed; border:2px solid #007aed;}
.stateList .state.cancel{border:0; color:#999; text-decoration:line-through;}
.stateList .state.paydone{color:#228019; border:2px solid #228019;}
.stateList .state.redone{color:#676767; border:0; }
.stateList .state.admCancel{color:var(--color-red); border:0; }
.blit{display:inline-flex; align-items:center; justify-content:center; font-weight: 500; font-size:1.5rem;}
.blit.done{color:#007aed;}
.blit.cancel{color:#999; text-decoration: line-through;}
.blit.paydone{color:#228019;}
.blit.redone{color:#676767;}
.blit.admCancel{display:inline-flex; align-items:center; justify-content:center; gap:0.8rem; width:auto; line-height:1; cursor:pointer; white-space: nowrap; transition:.3s ease-in-out; height:3.4rem; padding:0 1.6rem; border-radius:.8rem; font-size: 1.5rem; background:#fff; border:1px solid var(--color-red); color:var(--color-red);}
.blit.admCancel:hover{background-color:#fff6f7;}
@media all and (max-width:768px){
    .stateList{margin-bottom:8px;}
}
@media all and (max-width:425px){
    .stateList{gap:0;}
    .stateList .state{padding:8px; border-radius:0; border:0 !important;}
    .blit.admCancel{font-size: 1.3rem;}
}



/*?회원가입*/
.join{ margin: 100px auto; width: 700px; }
.join .h3Tit.title{margin-bottom:80px; text-align:center; font-size: 3.2rem;}
.join .joinPro{ display:flex; justify-content: space-between; align-items: center; margin:0 auto; margin-bottom:80px; font-weight: 500; width: 350px; }
.join .joinPro .joinStep { position:relative; }
.join .joinPro .joinStep::before { content:""; position:absolute; left:-54%; top:24%; width: 16px; height: 4px; background: url(../images/sub/dot.svg) no-repeat 50% 50%; background-size:contain;}
.join .joinPro .joinStep:first-child::before{ content:none; }
.join .joinPro .joinStep { display:flex; flex-direction: column; align-items: center; gap: 16px; }
.join .joinPro .joinStep .joinNum { background-color:var(--color-gray-10); width: 40px; height: 40px; line-height: 40px; color:var(--color-main); text-align: center; border-radius:10rem; }
.join .joinPro .joinStep .joinNum.on { position:relative; background-color:var(--color-main); color:#fff; }
.join .joinPro .joinStep .joinNum.on::before { content: ""; position: absolute; top: 18px; left: -8px; width: 56px; height: 5px; border-radius:10rem; background-color: var(--color-main); transform: rotate(-35deg); z-index: -1; }
/**회원가입 - 약관동의*/
.join .agrBox{margin-bottom:40px;}
.join .agrBox .h3Tit{margin-bottom:8px;}
.join .agrBox .agrOk{display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:8px; padding:12px; border-radius:8px; background:#f5f5f5; }
/**회원가입 - 본인인증*/
.join .certi{display:flex; flex-direction:row; gap:24px; justify-content:center;}
.join .certi .box{position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:space-between; gap:24px; padding:60px 24px; margin-top:8px; height:360px; width:calc(50% - 12px); border:10px solid #f5f5f5; border-radius:16px; text-align: center;}
.join .certi .box:hover{border:10px solid var(--color-main);}
.join .certi .box .txt em{font-weight:600;}
.join .certi .box .imgIcon{width:70px; height:70px; display:inline-block;}
.join .certi .box.phone .imgIcon{background:url(../images/sub/phone-off.svg) no-repeat 50% 50%; background-size:contain;}
.join .certi .box.ipin .imgIcon{background:url(../images/sub/ipin-off.svg) no-repeat 50% 50%; background-size:contain;}
.join .certi .box.phone:hover .imgIcon{background:url(../images/sub/phone-on.svg) no-repeat 50% 50%; background-size:contain;}
.join .certi .box.ipin:hover .imgIcon{background:url(../images/sub/ipin-on.svg) no-repeat 50% 50%; background-size:contain;}
/**회원가입 - 정보입력*/
.join .userF {font-size: 1.5rem; }
.join .userF .list { display:flex; flex-direction: column; gap:32px; }
.join .userF .list .tit { font-weight: 600; }
.join .userF .form.disabled { background:var(--color-gray-10); cursor:no-drop;}
.join .userF input[type=text], 
.join .userF input[type=password],
.join .userF select { width: 100%;  font-size: 1.4rem; height:48px;}
.join .userF input[type=text], 
.join .userF input[type=password]{padding-left:16px;}
.join .userF input.form.userN { flex:1; min-width: auto; }
.join .userF div.dpf { display:flex; justify-content: space-between; gap:4px; }
.join .userF input.form.userI, 
.join .userF input.form.addr,
.join .userF input.form.userPhchk {flex:1; min-width: auto;}
.join .userF .radio-list,
.join .userF .chk-list{ display:flex; gap:24px; }
.join .userF .emailF { width: calc(100% - 184px); position: relative; display: inline-flex; align-items: center; padding: 4px 16px; min-width: 200px; border: 1px solid #ccc; border-radius: 8px; background: #fff; font-size: 1.6rem; color: #111; height:48px;}
.join .userF .emailF input { padding:0 8px; border:none; height: 39px; min-width: auto; }
.join .userF .emailF input:first-child { padding:0; }
.join .userF .emailF input:focus { border:none; outline:none; box-shadow:none; }
.join .userF .emailC { width: 180px; }
.join .userF .infoM { margin-bottom: 16px; font-size: 1.2rem; color:#777; }
.join .userF .chk-list { margin-bottom: 40px; }
.join .userF .btn{height:48px; border-radius:8px;}
.policyPw{display:flex; flex-direction:column; margin-top:16px;}
.policyPw li{position:relative; padding-left:24px; font-size: 1.4rem;}
.policyPw li .micon{position:absolute; left:0; top:2px; width:18px; height:18px; font-size: 18px; color:#dbdbdb;}
.policyPw li.ok .micon{color:var(--color-blue);}
.policyPw li.no{color:var(--color-red);}
.policyPw li.no .micon{color:var(--color-red);}
.policyPw li.info .micon { color:var(--color-green); }
.alarm { display: flex; align-items: center; justify-content: center; margin-top: 8px; border-radius: 100px; font-size: 1.5rem; min-height: 32px; font-weight: 500; }
.alarm.ok { color: var(--color-blue); background: #E7F6FF; }
.alarm.no { color: var(--color-red); background: #FFE8E8; }
@media all and (max-width:768px){
}
@media all and (max-width:425px){
    .alarm{font-size: 1.3rem;}
    .join .userF .emailC{width:auto; min-width:120px;}
    .join .userF .emailF{width:auto; min-width: auto;}
}
/**회원가입 - 가입완료*/
.join .compFind{margin:32px auto; text-align:center;}
.join .compFind .tit{font-weight:600;}
.join .compFind .tit .logNm{color:var(--color-main);}
.join .compFind img{margin-bottom:40px;}
.join .compFind .infoid{margin-top:24px; background:#f5f5f5; border-radius:16px; padding:40px; font-size: 1.9rem; color:var(--color-point); font-weight: 600; width:100%;}
.join .compFind .infoid li{display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.join .compFind .infoid li:last-child{margin-top:8px;}
.join .compFind .infoid li .infoTxt{font-size:1.6rem; font-weight:normal; color:#222; margin-right:16px;}
.join .compFind .logList{margin:0 auto; margin-top:40px; padding-right:0;}
.join .compFind .infopw{margin-top:24px;font-size: 1.4rem; }
@media all and (max-width:768px){
    .join{margin:48px auto; width:100%;}
    .join .h3Tit.title{margin-bottom:48px; font-size:2.8rem; }
    /**회원가입 - 본인인증*/
    .join .certi{gap:16px;}
    .join .certi .box{padding:40px 16px; height:345px; width:calc(50% - 8px);}
    /**회원가입 - 정보입력*/
    /**회원가입 - 가입완료*/
    .join .joinPro{margin-bottom:40px;}
    .join .compFind{margin:0 auto;}
    .join .compFind img{width:200px;}
    .join .compFind .infoid{padding:32px;}
}
@media all and (max-width:425px){
    /**회원가입 - 본인인증*/
    .join .certi{flex-direction:column; }
    .join .certi .box{padding:16px; height:auto; width:100%;}
    .join .certi .box .btn{width:100%;}
    /**회원가입 - 정보입력*/
    /**회원가입 - 가입완료*/
    .join .joinPro{width:260px; font-size: 1.3rem; color:#676767}
    .join .joinPro .joinStep::before{width:10px; left:-36%;}
    .join .compFind img{width:160px;}
    .join .compFind .infoid{padding:24px; font-size:1.7rem; }
}



/*?이용약관*/

#terms{display:flex; flex-direction:column; gap:40px; margin: 0 auto; color: #111; word-break: keep-all;}
#terms h1,
#terms h2,
#terms h3{margin: 0; font-weight: 600;}
#terms h1{font-size: 3.2rem;}
#terms h2{font-size: 2.4rem; padding-top: 40px;  border-top: 1px solid #ccc;}
#terms h3{font-size: 1.9rem; margin-top: 32px;}
#terms p{margin: 10px 0;}
#terms a{color: inherit; text-decoration: underline; text-underline-offset: 3px;}
#terms a:focus-visible{outline: 2px solid currentColor; outline-offset: 2px;  border-radius: 4px;}
#terms ol{margin: 10px 0 14px;  padding-left: 20px;}
#terms ul{margin: 10px 0 14px;}
#terms ol{list-style-type:deciaml !important; list-style-position:outside; }
#terms ol > li{list-style:decimal !important;}
#terms ol > li::marker{font-family: auto;}
#terms li{margin: 6px 0; }
#terms ol ol,
#terms ul ul,
#terms ol ul,
#terms ul ol{margin-top: 6px;  margin-bottom: 6px;}
#terms dl{margin: 12px 0 16px;  padding:24px;  background: #f9f9f9;  border: 1px solid #ccc;  border-radius: 16px;}
#terms dt{font-weight: 600;  margin-top: 10px;}
#terms dt:first-child{  margin-top: 0;}
#terms dd{margin: 4px 0 0 0;  color: #333;}
#terms section{  margin: 0;}

.agreeBox #terms{gap:24px; font-size: 1.5rem;}
.agreeBox #terms h1{font-size: 2.4rem;}
.agreeBox #terms h2{font-size: 1.9rem; padding-top: 24px;}
.agreeBox #terms h3{font-size: 1.7rem; margin-top: 16px;}

@media all and (max-width:425px){
    #terms{gap:24px;}
    #terms h1{font-size: 2.8rem;}
    #terms h2{font-size: 2.1rem; padding-top: 24px;}
    #terms h3{font-size: 1.7rem; margin-top: 16px;}
    #terms dl{padding:16px;}

    .agreeBox #terms{font-size: 1.3rem; gap:8px;}
    .agreeBox #terms h1{font-size: 2.1rem;}
    .agreeBox #terms h2{font-size: 1.7rem; padding-top: 16px;}
    .agreeBox #terms h3{font-size: 1.5rem; margin-top: 8px;}
    .agreeBox #terms dl{padding:0; border:0; border-radius:0; background:transparent;}

}


/*?나의 정보관리*/
.myTab{display:flex; align-items:center; justify-content:center; gap:0; margin:80px auto; background:#f5f5f5; border-radius:24px; width:100%; }
.myTab li{flex:1;}
.myTab li a{display:inline-flex; align-items:center; justify-content:center; padding:16px; height:80px; border-radius:24px; color:#676767; font-size:1.9rem; font-weight:500; width:100%; }
.myTab li a.on{background:var(--color-main); color:#fff; box-shadow:3px 7px 15px rgba(0,0,0,0.2);}

.myInfo{display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px; margin:0 auto; width:400px;}
.myInfo .txt{margin:40px auto; text-align:center; }
.myInfo label{width:100%;}
.myInfo input{padding-left:16px; width:100%; height:48px;}
.myInfo input.disabled{background-color:#f5f5f5;}

.subCon .join{margin:0 auto;}
.subCon .join .titBox{margin-bottom:40px;}

.chgPwList {display:flex; flex-direction:column; gap:24px;}
.chgPwList .tit{font-weight:600; font-size: 1.5rem}
.chgPwList input[type="password"]{width:100%; height:48px;}
#chgPw .btn{width:100%;}
#secession .agr{display:flex; margin-top:8px; font-size: 1.5rem;}
#secession .agr input{margin-top:4px;}
#secession .agr span{flex:1;}

@media all and (max-width:1024px){
    .myTab{margin:56px auto; border-radius:16px;}
    .myTab li a{padding:15px 8px; min-height:auto; height:auto; font-size:1.7rem; border-radius:16px;}
}
@media all and (max-width:768px){
    .myInfo .txt{margin:24px auto;}
    .myTab li a{padding:16px; gap:0;font-size:1.5rem;}
}
@media all and (max-width:425px){
    .myInfo{width:100%;}
    .myInfo input{font-size: 1.5rem;}
    .join .userF div.dpf.mobFlex{flex-direction:column;}
    .myTab{margin:40px auto;}
}


/*?야영장소개*/
.campOverview{display:flex; gap:64px; align-items:flex-start;}
.campOverview .imgW{position:relative; width:40%; height:645px; border-radius:30px; overflow: hidden;}
.campOverview .imgW img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit: cover;}
.campOverview .txtW{flex:1; }
.campOverview .txtW .tit{font-size:40px; font-weight:600; color:var(--color-main); }
.campOverview .txtW .stit{margin-top:32px; font-size:25px; font-weight: 500; ;}
.campOverview .txtW .txt{margin-top:40px; display:flex; flex-direction:column; gap:24px; color:#444; word-break:break-word;}

.directionsInfo .root_daum_roughmap .cont{display:none;}
.directionsInfo .root_daum_roughmap{width:100% !important; }
.directionsInfo .txt{display:flex; align-items:center; justify-content:center; gap:8px 40px; flex-wrap:wrap; padding:16px; background:#F8FAFF; border:1px solid #ccc; width:100%; }
.directionsInfo .txt p{display:inline-flex; align-items:center; gap:8px; }
.directionsInfo .txt p i{font-size:2.1rem; color:var(--color-main);}

.usageInfo{display:flex; flex-direction:column; gap:80px;}
.usageInfo h3{font-size: 2.4rem; margin-bottom:16px;}
.usageInfo table{table-layout: fixed;}

.txtBox{margin: 12px 0 16px;  padding:24px;  background: #f9f9f9;  border: 1px solid #ccc;  border-radius: 16px;}
.txtBox .tit{font-weight: 600;  margin-top: 24px;}
.txtBox .tit:first-child{  margin-top: 0;}
.txtBox .txt{margin: 4px 0 0 0;  color: #333;}
.txtBox > ul.txt{display:flex; flex-direction:column; gap:8px;}
.txtBox > ul.txt > li{position:relative; padding-left:16px;}
.txtBox > ul.txt > li::before{position:absolute; content:'•'; left:0; top:0; font-size: 1.7rem; color:#676767;}
.txtBox .noteMark{position:relative; padding-left:24px; margin-top:16px;}
.txtBox .noteMark:first-child{margin-top:0;}
.txtBox .noteMark::before{position:absolute; content:'※'; left:0; top:0; }
.txtBox .noteMark b{font-weight: 600;}

.cont{display:flex; flex-direction:column; gap:80px;}
.cont h3{font-size: 2.4rem; margin-bottom:16px;}
.cont .map{border-radius:30px;}
.cont .map.web{display:block; margin:0 auto; width:auto; }
.cont .map.mob{display:none;}
.cont .imgBox{display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.cont .imgBox > li{display:flex; flex-direction:column; gap:8px; width:calc(100% / 2 - 20px);}
.cont .imgBox > li .imgW{position:relative; padding-top:60%; border-radius:24px; border:1px solid #ccc; background:url(../img/common/noimg.jpg) no-repeat 50% 50%; background-size:contain; overflow:hidden;}
.cont .imgBox > li .imgW img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit: cover;}
.cont .imgBox > li .tit{text-align:center; }

@media all and (max-width:1024px){
    .campOverview{flex-direction:column; gap:40px;}
    .campOverview .imgW{border-radius:24px; width:100%; height:300px;}
    .campOverview .txtW .tit{font-size: 3.2rem;}
    .campOverview .txtW .stit{margin-top:8px; font-size: 2.1rem;}
    .campOverview .txtW .txt{margin-top:24px;}

    .usageInfo h3,
    .cont h3{font-size: 2.1rem;}
    .cont .map{border-radius:16px;}
    .cont .imgBox{gap:40px 24px;}
    .cont .imgBox > li .imgW{border-radius:16px;}
}
@media all and (max-width:768px){
    .campOverview .txtW .tit{font-size: 2.5rem;}
    .campOverview .txtW .stit{font-size: 1.9rem;}

    .usageInfo,
    .cont{gap:40px;}
    .cont .map.web{display:none;}
    .cont .map.mob{display:block;}
    .cont .imgBox{gap:24px 16px;}
    .cont .imgBox > li{width:100%;}
    .cont .imgBox > li .imgW{border-radius:8px;}
    .usageInfo h3, .cont h3{font-size: 1.9rem;}
}
@media all and (max-width:425px){
    .campOverview{gap:24px;}
    .campOverview .txtW .tit{font-size: 2.1rem;}
    .campOverview .txtW .stit{font-size: 1.7rem;}
    .campOverview .imgW{border-radius:16px; height:200px;}
    
    .directionsInfo .txt{justify-content:flex-start;}

    .usageInfo h3, .cont h3{margin-bottom:8px;}
    .cont .imgBox{gap:16px;}
    .cont .imgBox > li{width:100%;}
}

/* hover 시 해당 메뉴만 dropdown 오픈 */
#gnb .dep01:hover > .dep02,
#gnb .dep01:focus-within > .dep02{
  display:flex;
}

/* menuModal 안에서 이름 + 로그아웃을 한 줄로 */
.menuModal{
  display:flex;
  align-items:center;
  justify-content:flex-end;   /* 오른쪽 정렬 */
  gap:12px;
  padding:12px 16px;
}

/* 이름(왼쪽), 로그아웃(오른쪽) */
.menuModal .name{
  margin:0;
  font-size:1.5rem;
  font-weight:600;
  color:#111;
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--color-main);
}

/* 기존 logmenu(로그아웃 ul) 한 줄로 */
.menuModal .logmenu{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
}

/* li 기본 여백 제거 */
.menuModal .logmenu > li{
  margin:0;
  padding:0;
}

/*  로그아웃 버튼 자체는 건드리지 않음(스타일 변경 없음)
   다만 줄바꿈만 방지 */
.menuModal .logmenu a.logout{
  white-space:nowrap;
}

/**상세-댓글*/
.detComt{margin-top:4.0rem;}
.detComt .comtBox{position:relative; padding:16px 116px 16px 16px; width:100%; border:1px solid var(--color-main); border-radius:var(--border); box-shadow:0 0 10px #d1dbff; overflow:hidden;}
.detComt .comtBox .txt{padding:0; width:100%; height:48px; overflow-y:auto; border:0; outline:0; resize: none;}
.detComt .comtBox .byte{margin-top:8px; font-size:var(--fz-labelM); color:#ccc;}
.detComt .comtBox .byte .num{color:#777;}
.detComt .comtBox .regist{position:absolute; display:inline-flex; align-items:center; justify-content: center; right:0; top:0; width:100px; height:100%; background:var(--color-main); color:#fff; font-weight:500;}
.detComt .comtBox .regist:active{opacity:.9;}
.detComt .noComt{display:flex; align-items:center; justify-content:center; padding:3.2rem 0; border-bottom:1px solid #dbdbdb; color:#444;}
.detComt .comtList > li{position:relative; padding:2.4rem 0; border-bottom:1px solid #dbdbdb;}
.detComt .comtList > li .name{display:inline-flex; align-items:center; gap:8px; font-size:var(--fz-bodyM); font-weight:500;}
.detComt .comtList > li .name .date{color:#777; font-weight:400;}
.detComt .comtList > li .txt{margin-top:8px; color:#444; width:100%;}
.detComt .comtList > li .etcBtn{position:absolute; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; right:0; top:1.6rem; border-radius:100%; color:#ccc; transition:.3s;}
.detComt .comtList > li .etcBtn:hover{color:var(--color-p60); box-shadow:0 0 15px rgba(0,0,0,0.15);}
.detComt .comtList > li .etcFunc{position:absolute; top:1.6rem; right: 36px; background:#fff; border-radius:var(--border); border:1px solid #dbdbdb;display:none;}
.detComt .comtList > li .etcFunc .func{display:flex; align-items:center; justify-content:center; padding:8px 16px; font-size:var(--fz-bodyM); color:#444;}
.detComt .comtList > li .etcFunc .func:hover{background:#f9f9f9;}
.detComt .comtList .comtBox{margin-top:0; box-shadow:none; border:1px solid #dbdbdb; }
.detComt .comtList .comtBox .fixBtn{position:absolute; display:inline-flex; align-items:center; justify-content:center; right:0; width:100px; height:50%; font-weight:500;}
.detComt .comtList .comtBox .fixBtn.fix{top:0; background:var(--color-main); color:#fff;}
.detComt .comtList .comtBox .fixBtn.can{bottom:0; color:#777; border-left:1px solid #dbdbdb;}
.detComt .comtList .comtBox .fixBtn:active{opacity:.9;}