@charset "utf-8";
/*───────────────────────────────────────────────────────────
	Board
───────────────────────────────────────────────────────────*/
    /* 작성 */
        #wrap .bbs_write{position: relative; display: block; width: 100%; border-top: 1px solid var(--black-color03); border-bottom: 1px solid var(--border-color01); padding:30px 20px;}
        #wrap .bbs_write :where(tbody, tr, th, td){display: block; width: 100%; border:0; padding:0; background: none;}
        #wrap .bbs_write tbody{display: flex; flex-wrap: wrap; gap: 20px clamp(40px, 4.2vw, 80px);}
        #wrap .bbs_write tr{width: calc(100% / 2 - clamp(40px, 4.2vw, 80px) / 2); display: flex; align-items: baseline; font-size: var(--title-20);}
            #wrap .bbs_write tr:has(:is(#title, #contents)){width: 100%;}
        #wrap .bbs_write th{width: 170px;flex-shrink: 0;font-size: inherit;font-weight: 500;color: var(--black-color03);line-height: 1.3;letter-spacing: -0.03em;vertical-align: middle;padding-right: 15px;}
            #wrap .bbs_write tr:has(textarea) th{translate: 0 15px;}
        #wrap .bbs_write th em{font-weight: inherit; color: var(--point-color10);}
        #wrap .bbs_write td{width: 100%; font-size: 90%; font-weight: 400; color: var(--black-color06); line-height: 1.3; letter-spacing: -0.03em; vertical-align: middle; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 60px;}
            #wrap .bbs_write td:has(.cap_wrap){flex-wrap: nowrap;}
        #wrap .bbs_write td :where([type="text"], [type="password"], select){width: 100%;min-width: auto;height: 60px;vertical-align: middle;border-radius: var(--radius-06);border-color: var(--border-color02); color: var(--black-color03);}
            #wrap .bbs_write td :where([type="text"], [type="password"], select)::placeholder{color: var(--black-color07);}
        #wrap .bbs_write select{background: url('../images/sub/selArw.svg') no-repeat calc(100% - 18px) 50%;padding-right: 50px;}
        #wrap .bbs_write :where(textarea, iframe){vertical-align: top;}
        #wrap .bbs_write textarea{border-radius: var(--radius-06);resize: none;font-size: var(--title-18);font-weight: 400;color: var(--black-color03);border: 1px solid var(--border-color02);padding: 18px;letter-spacing: -0.03em;line-height: 1.6;height: 160px;}
        #wrap .bbs_write [for="is_secret-y"]{margin-bottom: 10px;}
        
        #wrap .bbs_write .cap_wrap{display: flex;align-items: center;width: 225px;height:60px;box-shadow: inset 0 0 0 1px var(--border-color02);padding:10px;gap: 10px;flex-shrink: 0;border-radius: var(--radius-06);}
        #wrap .bbs_write #captcha_box{width: 100%;height: 100%;overflow: hidden;border: 1px solid var(--border-color01);border-radius: inherit;}
        #wrap .bbs_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;translate: -1px -1px;max-width: none;max-height: none;}
        #wrap .bbs_write #refreshCode{width: 40px;height: 100%;border: 1px solid var(--border-color02);background: url('../images/sub/icon_reset.svg') no-repeat center;flex-shrink: 0;border-radius: inherit;}

            #wrap .sub_join .bbs_write tr{width: 100%;}
            #wrap .sub_join .bbs_write td{flex-wrap: nowrap;}
            #wrap .sub_join .bbs_write td:has(.noti){flex-wrap: wrap;}
            #wrap .sub_join .bbs_write td .btn_sm{flex-shrink: 0;height: 60px;line-height: 1.4;padding: 0 20px;border-radius: var(--radius-06);}
			
		#wrap .warning_box {background: var(--gray-bg);border: 1px solid var(--border-color01);border-radius: var(--radius-06);padding: 15px 20px;display: flex;align-items: center;gap: 10px;margin-bottom: 20px;font-size: var(--title-20);}
		#wrap .warning_icon {flex-shrink: 0;color: var(--point-color10);}
		#wrap .warning_text {font-size: 70%;color: var(--black-color03);line-height: 1.5;}
		#wrap .warning_text strong {color: var(--point-color10);font-weight: 500;}

    /* 예약 */
        #wrap .bbs_app{display: flex; gap: 40px; border: 1px solid var(--border-color01); padding:40px; border-radius: var(--radius-10);}
        #wrap .bbs_app .desc{font-size: var(--title-20);display: flex;flex-direction: column;gap: 15px;width: min(280px, 100%);}
            #wrap .bbs_app .desc.birth{width: min(460px, 100%);}
            #wrap .bbs_app .desc.gender{width: min(180px, 100%);}
            #wrap .bbs_app.btwn .desc{width: 100%;}
        #wrap .bbs_app .desc dt{font-size: 110%;font-weight: 500;color: var(--black-color03);letter-spacing: -0.03em;flex-shrink: 0;}
        #wrap .bbs_app .desc dt em{font-weight: inherit; color: var(--point-color10);}
        #wrap .bbs_app .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color03);display: flex;align-items: center;gap: 10px;height: 100%;}
        #wrap .bbs_app :where([type="text"], [type="password"], select){height: 60px;border-radius: var(--radius-06);border-color: var(--border-color02);color: var(--black-color03);width: 100%;font-family: var(--font-type02);}
        #wrap .bbs_app :where([type="text"], [type="password"], select)::placeholder{color: var(--black-color07);}
        #wrap .bbs_app select{font-size: var(--title-20);background: url('../images/sub/selArw.svg') no-repeat calc(100% - 18px) 50%;padding-right: 50px;}
        #wrap .bbs_app select:first-child{width: 126%;}
        #wrap .bbs_app .radio_list{min-height: 100%;}

        #wrap .radio_list{display: flex;align-items: center;flex-wrap: wrap;gap:15px 30px;}

        #wrap label:has([type="radio"]){display: flex;align-items: flex-start;gap: 10px;font-size: var(--title-20);font-weight: 400;color: var(--black-color01);line-height: 20px; cursor: pointer;}
        #wrap label [type="radio"]{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; aspect-ratio: auto 1; border: 1px solid var(--black-color10); border-radius: 100%; background: var(--point-white); cursor: pointer; transition: all 0.4s;}
            #wrap label [type="radio"]:before{content: ''; width: 50%; aspect-ratio: auto 1; background: var(--black-color00); border-radius: 100%; opacity: 0; transition: all 0.4s;}
            #wrap label [type="radio"]:checked{border-color: var(--black-color00);}
            #wrap label [type="radio"]:checked:before{opacity: 1;}

        #wrap label:has([type="checkbox"]){display: flex;align-items: flex-start;gap: 10px;font-size: var(--title-18);font-weight: 500;color: var(--black-color03);line-height: 26px;cursor: pointer;}
        #wrap label [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: 26px;height: 26px;aspect-ratio: auto 1;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-02);background: var(--point-white);cursor: pointer;transition: all 0.4s;overflow: hidden;flex-shrink: 0;}
            #wrap label [type="checkbox"]:before{content: '';width: 18px;aspect-ratio: auto 1.28;background: url('../images/sub/chk_icon.svg') no-repeat center / 100% auto;opacity: 0;transition: all 0.4s;filter: var(--filter-white);}
            #wrap label [type="checkbox"]:checked{box-shadow: inset 0 0 0 1px var(--point-color10);background: var(--point-color10);}
            #wrap label [type="checkbox"]:checked:before{opacity: 1;}
        #wrap label:has([type="checkbox"]) em{display: contents;font-weight: inherit;color: var(--point-color10);}

        #wrap .app_divide{position: relative; display: flex; align-items: flex-start; gap: 60px;}
        #wrap .app_divide .sticky{position: relative;width: 50%;flex-shrink: 0;display: flex;flex-direction: column;gap: 20px;}
        #wrap .app_divide .cont{width: 100%;}
        #wrap .app_divide .bbs_write{padding:0; border:0;}
        #wrap .app_divide .bbs_write tr{width: 100%;}
        #wrap .app_divide .bbs_write select{height: 70px;border-color: var(--border-color01);font-size: var(--title-20);}
        #wrap .app_divide .bullet_list{padding-top: 15px;gap: 9px;}
        #wrap .app_divide .bullet_list > li{font-size: inherit; color: var(--black-color04);}
        #wrap .app_divide .area_box{display: none;}
        #wrap .calen_table{width: 100%; font-size: var(--title-20); text-align: center;}
        #wrap .calen_table table{position: relative;}
        #wrap .calen_table table:before{position: absolute;content:'';inset: 0;border: 1px solid var(--border-color01);border-top: 0;pointer-events: none;}
        #wrap .calen_table thead th{font-size: 90%;font-weight: 400;color: var(--black-color00);line-height: 1.3;background: var(--gray-bg);padding: 8px 5px;box-shadow: inset 1px 0 0 var(--border-color01);}
        #wrap .calen_table tbody td{padding: 14px 20px;font-size: inherit;font-weight: 400;color: var(--black-color00);line-height: 1.3;font-family: var(--font-type02);box-shadow: inset 1px 1px 0 var(--border-color01);}
            #wrap .calen_table tbody td:has(span){cursor: pointer;}
			/*#wrap .calen_table tbody td:is(.now, .sun){pointer-events:none;}*/
        #wrap .calen_table tbody td span{display: flex;align-items: center;justify-content: center;width: 100%;aspect-ratio: auto 1;border-radius: 100%; transition: all 0.4s;}
            #wrap .calen_table tbody td.now span{background: var(--point-bg);}
			#wrap .calen_table tbody td.on span{background: var(--point-color01);box-shadow: var(--shadow-05);color: var(--point-white);}
			/*#wrap .calen_table tbody :is(tr:has(~ tr .now) td, tr td:has(~ .now)){pointer-events:none;}*/
        #wrap .calen_table .sun{color: var(--point-color11);}
        #wrap .calen_table .sat{color: var(--point-color14);}
        #wrap .calen_table .info_title{position: relative; font-size: var(--title-20); display: flex; align-items: center; justify-content: center; gap: 15px 30px; text-align: center; background: var(--point-color02); border-radius: var(--radius-10) var(--radius-10) 0 0; padding: 20px;}
        #wrap .calen_table .info_title h5{font-size: 140%; font-weight: 500; color: var(--point-white); line-height: 1.3;}
        #wrap .calen_table .arw{position: relative; width: 40px; aspect-ratio: auto 1; border-radius: 100%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;}
            #wrap .calen_table .arw:before{display: block;content:'';width: 8px;aspect-ratio: auto 0.66;background: url('../images/sub/calendarArw.svg') no-repeat center / 100% auto;}
        #wrap .calen_table .arw.next{scale: -1 -1;}

        #wrap .calen_exp{display: flex; flex-wrap: wrap; align-items: center; gap: 15px 20px; font-size: var(--title-20);}
        #wrap .calen_exp > li{font-size: inherit; font-weight: 400; color: var(--black-color04); display: flex; align-items: baseline; gap: 10px;}
        #wrap .calen_exp > li:before{display: inline-flex;content:'';width:14px;aspect-ratio: auto 1;background:var(--point-bg);border: 1px solid var(--border-color01);border-radius: 100%;box-sizing: border-box;translate: 0 -2px;}
        #wrap .calen_exp > li.on:before{background: var(--point-color01); border-color: var(--point-color01);}
        #wrap .app_divide .btn_wrap{padding-top: 30px;font-size: var(--title-20);}
        #wrap .app_divide .btn_wrap .btn{width: 100%;height: 80px;font-size: 120%;border-radius: var(--radius-10);padding: 0 15px;}
        #wrap .hopeDate{width: 100%;display: flex;align-self: center;justify-content: space-between;gap: 15px 30px;flex-wrap: wrap;font-size: var(--title-20);padding: 30px;background: var(--point-bg);border-radius: var(--radius-06);}
        #wrap .hopeDate :where(dt, dd){font-size: 130%;font-weight: 500;color: var(--black-color03);line-height: 1.54;}
        #wrap .hopeDate dd{font-weight: 600;color: var(--point-color01);font-family: var(--font-type02);}