/*팝업창*/
#send_bugo_pop {
    display: none; /*숨기기*/
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
}

#send_bugo_popmenu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 250px;
    text-align: center;
    background: #fff;
    border-radius:5px;

}


#send_bugo_exit {

    position: absolute;
    right: 5px;
    top: 15px;
    transform: translate(-50%,0);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #2c3e50; 
    color: white; 
    cursor: pointer;
    border-radius:3px;
    font-size:18pt;
    border: 1px solid #ccc;
}

/*버튼내용*/
#send_bugo {
    cursor: pointer;
}


/*팝업창*/
#ex_flower_pop {
    display: none; /*숨기기*/
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
}

#ex_flower_popmenu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 480px;
    text-align: center;
    background: #f7f7f7;
    
}

#ex_flower p {
    margin-top: 80px;
}

#ex_flower_exit {
    position: absolute;
    right: 10px;
    top: 20px;
    transform: translate(-50%,0);
    width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    border-radius:3px;
    font-size:17pt;
    border: 0px solid #ccc;
}

	/*물음표*/
	#ex_flower {
    		width: 20px;
    		height: 20px;
    		color: #ba6e6d;
    		background: #fee9e8;
    		border-radius: 50%;
    		border: 0px solid #aaa;
    		cursor: pointer;
	}






/*조문예절*/
#visit_manner_pop {
    display: none; /*숨기기*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
}

#visit_manner_popmenu {
    position: absolute; /* Keep this */
    left: 50%; /* Keep this */
    top: 50%; /* Keep this */
    transform: translate(-50%, -50%); /* Keep this */
    width: 300px; /* Keep this */
    height: 480px; /* Keep this */
    text-align: center; /* Keep this */
    background: #fff; /* Keep this */
    border-radius: 3px;
    /* overflow-y: auto; /* REMOVE THIS */ */
    position: relative; /* Add this to be the positioning context for absolute children */
    padding-top: 40px; /* Add space for the X button at the top */
    box-sizing: border-box; /* Optional: Include padding in the element's total height */
}

#visit_manner_exit {
    position: absolute; /* Keep this */
    right: 20px; /* Position from the right edge of #visit_manner_popmenu */
    top: 10px; /* Position from the top edge of #visit_manner_popmenu (adjust to fit within padding) */
    /* transform: translate(-50%, 0); /* REMOVE THIS - not needed with right/top positioning */ */
    text-align: center; /* Keep */
    cursor: pointer; /* Keep */
    border-radius: 3px; /* Keep */
    font-size: 15pt; /* Keep */
    font-weight:bold;
    z-index: 10; /* Ensure the button is above the content */
}

#visit_manner_content {
    width: 100%; /* Fill the width of the parent (minus horizontal padding if any) */
    height: calc(100% - 30px); /* Calculate height: Parent height (480px) - top position of exit button (10px) - height of exit button (30px) = 440px. Or simply use calc(100% - [padding-top value]) */
    /* A simpler calc might be calc(100% - 40px) if the parent padding-top is 40px */
    overflow-y: auto; /* MAKE THIS DIV SCROLLABLE */
    /* Add padding to the content div if needed, instead of the parent's original style="padding: 20;" on the ol */
    padding: 0 20px; /* Example: Add left/right padding to the content area */
    box-sizing: border-box; /* Include padding in the element's total height */
}

/* Adjust padding for the ordered list inside the content div */
#visit_manner_content ol {
    margin: 0;
    padding: 0 0 0 20px; /* Keep left padding, remove top/right/bottom if handled by #visit_manner_content padding */
    text-align: left; /* Align list items to the left */
}

/* Style for the inner div wrapping the image and text */
#visit_manner_content > div {
    width: 100%;
    /* No overflow here */
}

/*최초클릭*/
#visit_manner {

background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 5px 20px 5px 5px; margin-left:3px; display: flex; align-items: center; width: fit-content;cursor: pointer;

}