.container {
    max-width: var(--max-width2);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--padding-30-60);
    margin-top: var(--padding-80-160);
}

/* 상단 타이틀 영역 */
.header-area {
	text-align: left;
}

.brand-name {
    width: 100%;
    max-width: var(--max-width2);
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 600;
    margin: 0 auto var(--padding-15-30);
}

.main-title {
	font-size: var(--font-size-22-48);
    font-weight: 700;
    line-height: 1.4;
    color: var(--sub-color-1);
    margin-bottom: var(--padding-20-40);
}

.sub-title {
	font-size: 18px;
	color: #333333;
}

/* 기본 PC 화면: 5개가 한 줄에 나열 (flex: 1로 균등 분할) */
.process-container {
    display: flex;
    flex-wrap: wrap; /* 카드가 넘칠 경우 다음 줄로 내려가도록 허용 */
    gap: var(--padding-15-30);
    width: 100%;
}

.process-card {
    flex: 1; /* 기본 PC에서 5개가 동일한 너비를 가짐 */
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    padding: var(--padding-15-30);
    gap: var(--padding-30-60);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}


/* 태블릿 화면 (예: 768px ~ 1280px): 한 줄에 3개 배치 후, 남은 2개는 다음 줄 중앙 정렬 */
@media screen and (max-width: 1280px) {
    .process-card {
        /* calc(33.333% - gap 여백)을 활용해 정확히 3개 배치 */
        flex: 0 0 calc(33.333% - (var(--padding-15-30) * 2 / 3));
        max-width: calc(33.333% - (var(--padding-15-30) * 2 / 3));
    }
}


/* 모바일 화면 (768px 미만): 1개씩 세로로 꽉 차게 배치 */
@media screen and (max-width: 767px) {
    .process-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 카드 상단 (숫자 및 아이콘) */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-number {
    font-size: var(--font-size-22-48);
    font-weight: 600;
    color: #d1d1d1;
    transition: color 0.4s ease;
}

.card-icon {
	font-size: 24px;
	color: #b5b5b5;
	transition: color 0.4s ease;
}

/* 카드 하단 텍스트 */
.card-body {
    font-size: var(--font-size-14-16);
    font-weight: 500;
    line-height: 1.5;
    color: #666666;
    transition: color 0.4s ease;
    word-break: keep-all;
}
.card-body .weight {
    font-weight: 700;
}

/* 활성화(Active) 및 호버(Hover) 상태 스타일 (백운산 작명원 브라운 톤) */
.process-card.active,
.process-card:hover {
	background-color: var(--main-color);
	border-color: var(--main-color);
	transform: translateY(-6px);
	box-shadow: 0 5px 10px rgba(167, 109, 69, 0.25);
}

.process-card.active .card-number,
.process-card:hover .card-number,
.process-card.active .card-icon,
.process-card:hover .card-icon,
.process-card.active .card-body,
.process-card:hover .card-body {
	color: #ffffff;
}

/* 하단 안내 박스 */
.info-box {
    background-color: #f2f3f5;
    border-radius: var(--gap-10-20);
    padding: var(--padding-25-50);
    background-image: url('../../img/backwnsan-sub-naming-request-bg-01.webp');
    background-size: cover;
    background-position: center;
}

.info-box p:first-child {
    font-size: var(--font-size-15-18);
    color: #555555;
    margin-bottom: var(--padding-5-10);
}

.info-box p:last-child {
    font-size: var(--font-size-16-20);
    font-weight: 700;
    color: #222222;
}



.sub-cont-board {
    margin-top: var(--padding-40-160);
    width: 100%;
    max-width: var(--max-width2);
}
.sub-cont-board.margin-top {
    margin-top: var(--padding-20-40);
}
.bo_w_info.write_div {
    display: grid;
    grid-template-columns: 50% 1fr;
    gap: var(--padding-20-40) var(--padding-40-60);
}
/* .item 클래스를 가진 요소 너비 100% 설정 */
.bo_w_info.write_div .info_item.full {
    grid-column: 1 / -1;
}

#bo_v_atc {
    border-bottom: solid 1px var(--sub-color-1);
}

#bo_w .bo_w_info .frm_input,
#bo_v_atc .bo_w_info .frm_input {
    display: inline-block;
    vertical-align: middle;
}
#bo_w .bo_w_info input.frm_input,
#bo_v_atc .bo_w_info input.frm_input,
#bo_w .bo_w_tit .frm_input {
	width: 100%;
    padding: var(--padding-8-15) var(--padding-10-20);
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
    box-sizing: border-box;
	margin-bottom: 0;
}
#bo_w .bo_w_info input.frm_input2,
#bo_v_atc .bo_w_info input.frm_input2 {
	width: 100%;
    padding: var(--padding-8-15) var(--padding-10-20);
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
    box-sizing: border-box; 
	flex: 1;
}
#bo_w .bo_w_info select.frm_input, 
#bo_v_atc .bo_w_info select.frm_input {
    padding: var(--padding-8-15) var(--padding-5-10);
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
	box-sizing: border-box;  
	width: 100%;  
	min-width: fit-content;
}
#bo_w .bo_w_info select.frm_input2, 
#bo_v_atc .bo_w_info select.frm_input2 {
    padding: var(--padding-8-15) var(--padding-10-20);
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
	box-sizing: border-box;
	flex: 1;
}
#email_id.frm_input,
#email_select.frm_input{
	width: 50% !important;
}
#btn_back_select.btn_frmline {
    margin-left: var(--padding-4-8);
}

/* 1. [좌측 제목 부분] 폰트 크기 유지 */
#bo_w .bo_w_info .label_subject,
#bo_v_atc .bo_w_info .label_subject {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: flex-end;
    font-size: var(--font-size-14-16);
    font-weight: 600;
    padding: 0 0 var(--padding-5-10) 0;
}

#bo_w .info_item_title, 
#bo_v_atc .info_item_title {
    display: flex;
    font-size: var(--font-size-19-30);
    color: var(--sub-color-1);
    font-weight: 700;
    line-height: 0.9;
    margin-top: var(--padding-5-10);
    margin-bottom: var(--padding-20-40);
    padding-bottom: var(--padding-10-20);
    border-bottom: solid 1px var(--sub-color-9);
    justify-content: space-between;
    align-items: flex-end;
}

#bo_w .info_item_title.margin-top, 
#bo_v_atc .info_item_title.margin-top {
    margin-top: var(--padding-30-60);
}
#bo_w .info_item_title2, 
#bo_v_atc .info_item_title2 {
    display: flex;
    font-size: var(--font-size-19-30);
    color: var(--sub-color-1);
    font-weight: 700;
    line-height: 0.9;
    margin-top: var(--padding-5-10);
    margin-bottom: var(--padding-30-60);
    padding-bottom: var(--padding-10-20);
    justify-content: space-between;
    align-items: flex-end;
}

#bo_w .info_item_desc, 
#bo_v_atc .info_item_desc {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: var(--font-size-14-16);
    font-weight: 400;
    padding: var(--padding-15-30);
    border-radius: var(--padding-5-10);
    color: var(--main-color);
    background-color: var(--sub-color-11);
    flex-direction: column;
    gap: var(--padding-5-10);
	line-height: 1.4;
}

/* 기본 구조 설정 */
#bo_w .info_item, 
#bo_v_atc .info_item {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

#bo_w .info_item > label,
#bo_v_atc .info_item > label {
    width: 20%;
    flex-shrink: 0;
}

#bo_w .bo_w_info .label_subject strong,
#bo_v_atc .bo_w_info .label_subject strong {
    color: var(--main-color);
    margin-left: 5px;
    font-weight: 600;
    font-size: var(--font-size-18-24); 
	line-height: 0;
}
#bo_w .info_item_title strong,
#bo_v_atc .info_item_title strong {
    color: var(--main-color);
    margin-left: 5px;
    font-weight: 600;
    font-size: var(--font-size-14-16);
}
#bo_w .wr_content,
#bo_v_atc .wr_content {
	width: 100%;
}

/* 2. [우측 입력 부분] 전체 그룹 및 하위 요소 폰트 크기 13-15로 통일 */
#bo_w .item_group,
#bo_v_atc .item_group,
#bo_w .radio_group,
#bo_v_atc .radio_group,
#bo_w .select_group,
#bo_v_atc .select_group {
    font-size: var(--font-size-14-16);
}

#bo_w .item_group {
    width: 100%;
    display: flex;
    gap: var(--padding-10-20);
    flex-direction: row;
    align-items: center;
}
#bo_w .item_group.screen {
    width: 100%;
    display: flex;
    gap: var(--padding-10-20);
    flex-direction: column;
    align-items: stretch;
}

#bo_w .item_group.row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-5-10);
}

#bo_w .item_group.dolrim_group { 
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    gap: var(--gap-5-10);
}

#bo_w .item_group.column,
#bo_v_atc .item_group.column { 
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    gap: var(--gap-5-10);
    flex-direction: row;
    align-items: center;
}

#bo_w .item_group.column2 { 
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    gap: var(--gap-10-20);
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
}

#bo_w .item_group.column.hanja_search_group label:not(:first-child),
#bo_v_atc .item_group.column.hanja_search_group label:not(:first-child) {
    margin-left: var(--padding-8-15);
}

#bo_w .radio_group { 
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    padding: var(--padding-8-15) var(--padding-10-20);
    gap: var(--gap-10-20);
    align-items: center;
    font-weight: 500;
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
}

#bo_w .radio_group2 { 
	width: auto;
    display: flex;
	flex-wrap: wrap;
    padding: var(--padding-8-15) var(--padding-10-20);
    gap: var(--padding-8-15);
    align-items: center;
    font-weight: 500;
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
}

#bo_w .radio_group.column {    
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    padding: var(--padding-8-15) var(--padding-10-20);
    gap: var(--gap-10-20);
    align-items: center;
    font-weight: 500;
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
}

#bo_w .radio_group.column.padding { 
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    padding: var(--padding-8-15) var(--padding-10-20);
    gap: var(--gap-10-20);
    font-weight: 500;
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
}

#bo_w .post_group,
#bo_v_atc .post_group {
    width: 100%;
    display: flex;
    gap: var(--gap-5-10);
    border-radius: 10px;
}
#bo_w .post_group {
	flex:0.3;
}
#bo_w .post_group.column {
	flex:0.7;
}

#bo_w .item_group.dolrim_group .radio_group,
#bo_v_atc .item_group.dolrim_group .radio_group { 
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    padding: 0;
    gap: var(--gap-10-20);
    align-items: center;
    font-weight: 500;
    border: solid 0px var(--sub-color-10);
    border-radius: 10px;
}

#bo_w .item_group.dolrim_group .radio_group span.unit:nth-of-type(1) {
    margin-left: var(--padding-5-10);
}
#bo_w .item_group.dolrim_group .radio_group span.unit:nth-of-type(2) {
    margin-left: var(--padding-5-10);
}

#bo_w .info_item .guide_desc {   
	width: 100%;
    padding-left: var(--padding-10-20);
    color: var(--main-color);
	font-size: var(--font-size-14-16); 
	margin-top: var(--gap-5-10);
}

#bo_w .item_group.dolrim_group .guide_desc,
#bo_w .item_group.parents_group .guide_desc,
#bo_w .item_group .content_desc,
#bo_v_atc .item_group.dolrim_group .guide_desc,
#bo_v_atc .item_group.parents_group .guide_desc,
#bo_v_atc .item_group .content_desc {   
	width: 100%;
    padding-left: var(--padding-10-20);
    color: var(--main-color);
	margin-top: 0;
}

#bo_w .radio_label,
#bo_v_atc .radio_label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: normal;
}

#bo_w .radio_label input[type="radio"],
#bo_v_atc .radio_label input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

#bo_w .select_group.mo-column,
#bo_v_atc .select_group.mo-column {
	width: 100%;
    display: flex;
    align-items: center;
}

#bo_w .mo_group1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;   
	flex: 0.6;
}
#bo_w .mo_group2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
	flex: 0.4;
}

#bo_w .select_group,
#bo_v_atc .select_group {
    display: flex;
    align-items: center;
    width: 0;
    flex: 1;
}

#bo_w .mobile_group,
#bo_w .mobile_group.reverse,
#bo_w .mobile_group3 {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 0;
    flex: 1;
}
#bo_w .mobile_group2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--padding-10-20);
    width: 0;
    flex: 1;
}

#bo_w .mobile_group3 {
    padding: var(--padding-8-15) var(--padding-10-20);
    gap: var(--gap-10-20);
    border: solid 1px var(--sub-color-10);
    border-radius: 10px;
    width: auto;
    flex: inherit;
}

#bo_w .frm_input, 
#bo_v_atc .frm_input{
    height: auto;
}

#bo_w .select_group .unit,
#bo_v_atc .select_group .unit {
    margin-right: var(--padding-4-8);
}

#bo_w .item_group .unit .txt_red,
#bo_v_atc .item_group .unit .txt_red {
    color: var(--main-color);
}

#bo_w .item_group .unit,
#bo_v_atc .item_group .unit {
    display: flex;
}

#bo_w .item_group .unit.agree {
    display: flex;
}

#bo_w .item_group.wr_name .unit,
#bo_v_atc .item_group.wr_name .unit {
    display: flex;
    white-space: nowrap;
}

#bo_w .item_group textarea,
#bo_v_atc .item_group textarea {
    width: 100% !important;
	padding: var(--padding-8-15) var(--padding-10-20);
}

#captcha {
    height: 100%;
    display: flex;
    gap: var(--gap-5-10);
    position: relative;
    align-items: center;
    box-sizing: border-box;
}
#captcha #captcha_info {
    margin: 0;
    color: var(--main-color);
}
#captcha #captcha_img {
    position: relative;
    padding: var(--padding-2-4) var(--padding-10-20) 0;
    height: 100%;
    max-height: 49.71px;
    object-fit: contain;
    border: 1px solid var(--sub-color-10);
    vertical-align: top;
    border-radius: 10px;
    object-position: center center;
}
#captcha #captcha_key {
    padding: var(--padding-8-15) var(--padding-15-30);
    height: fit-content;
    border: 1px solid var(--sub-color-9);
    background: #fff;
    font-size: var(--font-size-14-16);
    font-weight: 500;
    text-align: center;
    border-radius: 10px;
    vertical-align: top;
}
#layer_zip {
    display: none;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px !important;
    height: 480px !important;
    z-index: 9999;
    border: 1px solid #222;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.btn_submit, a.btn, .btn {
    border-radius: 10px;
    font-size: var(--font-size-15-18) !important;
}
#bo_w .btn_cancel {
    border-radius: 10px;
}
.bo_sch_bg {
    background: #000;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
}

/* 카카오 API가 생성하는 iframe이 레이어 크기에 꽉 차도록 강제 */
#layer_zip iframe {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}
button.btn_frmline {
    height: auto;
    font-size: var(--font-size-14-16);
    border-radius: 10px;
}
.btn_confirm {
    display: flex;
    margin-top: var(--padding-20-40);
    padding-top: var(--padding-40-80);
    gap: var(--gap-5-10);
    text-align: right;
    justify-content: center;
    border-top: solid 1px var(--sub-color-9);
}
.text-sm {
    font-size: 1em;
    font-weight: normal;
    color: var(--main-color);
	box-sizing: border-box;
}
#wr2_personal, #wr2_corporate {
    gap: var(--gap-10-20);
}


/* 반응형 스타일 (br 1780 이하) */
@media only screen and (max-width : 1780px) {
	.container {
		padding: 0 95px 0 0;
	}
	.sub-cont-board {
		padding: 0 95px 0 0;
	}
	#bo_w .radio_group2 {
		width: auto;
	}
}


/* 반응형 스타일 (br 1450 이하) */
@media only screen and (max-width : 1450px) {
	br.responsive-1450 {
		display: none;
	}
	.bo_w_info.write_div {
		grid-template-columns: 1fr;
	}
	#bo_w .item_group.screen {
		display: flex;
		flex-direction: row;
	}
}
/* 반응형 스타일 (br 1350 이하) */
@media only screen and (max-width : 1350px) {
	br.responsive-1350 {
		display: none;
	}
}
/* 반응형 스타일 (br 1300 이하) */
@media only screen and (min-width : 1330px) {
	br.responsive-1330 {
		display: none;
	}
}
/* 반응형 스타일 (br 1300 이하) */
@media only screen and (max-width : 1300px) {
	br.responsive-1300 {
		display: none;
	}
}
/* 반응형 스타일 (br 1210 이하) */
@media only screen and (min-width : 1210px) {
	br.responsive-1210 {
		display: none;
	}
}
/* 반응형 스타일 (br 1200 이하) */
@media only screen and (max-width : 1200px) {
	br.responsive-1200 {
		display: none;
	}
}
/* 반응형 스타일 (br 1100 이하) */
@media only screen and (max-width : 1100px) {
	br.responsive-1100 {
		display: none;
	}
	#bo_w .item_group.screen-1100 {
		display: flex;
		flex-direction: column;
	}
	#bo_w .item_group.screen {
		display: flex;
		flex-direction: column;
	}
	#bo_w .radio_group2 {
        width: 100%;
    }
}
/* 반응형 스타일 (br 910 이하) */
@media only screen and (max-width : 910px) {
	br.responsive-910 {
		display: none;
	}
}
/* 반응형 스타일 (태블릿 및 모바일: ~ 768px 이하) */
@media only screen and (max-width : 768px) {
	.bo_w_info.write_div {
		grid-template-columns: 1fr;
	}
	#bo_w .bo_w_info.write_div {
		display: flex;
        flex-direction: column;
        gap: 20px;
	}
    #bo_w .item_group {
        width: 100%;       
    }
    #bo_w .item_group.mo-column {
        width: 100%;       
        flex-direction: column;
    }
    #bo_w .item_group.column {  
		flex-wrap: wrap;
        width: 100%;      
    }
    #bo_w .item_group.row {
        width: 100%; 
		flex-direction: column;      
    }
    .frm_input {
        width: 100%;
    }
    #bo_w .bo_w_info .label_subject {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        padding-left: 10px;
    }
    #bo_w .radio_group.column {
        align-items: flex-start;
    }
    #bo_w .radio_group {
        align-items: flex-start;
        padding-left: 0;
    }
    #bo_w .post_group.column {
        flex-direction: column;
    }
    #bo_w .item_group.column2 {
        flex-direction: column;
        align-items: flex-start;
    }
    #bo_w .item_group.dolrim_group .radio_group {
        align-items: flex-start;
        padding-left: 0;
    }
    #bo_w .mobile_group.reverse {
        flex-direction: row-reverse;
    }
    #bo_w .post_group {
        padding-left: 0;
    }
    #captcha {
        display: flex;  
        flex-wrap: wrap;   
    }
	#captcha.m_captcha #captcha_key {
		height: 40px;
	}
	#captcha.m_captcha #captcha_img {
		width: auto;
		height: 50px;
		margin-bottom: 0px;
		margin-top: 0px;
	}
	#captcha.m_captcha #captcha_info {
		margin: 0;
	}
    #bo_w .item_group .content_desc {
        padding-left: 0;
    }
	#captcha.m_captcha audio {
		margin: 0;
		height: 50px;
		width: 187px;
	}
    #bo_w .item_group.dolrim_group .guide_desc {
        padding-left: 0;
    }
    #bo_w .item_group.parents_group .guide_desc {
        padding-left: 0;
    }
    #bo_w .item_group .wr_content {
        padding-left: 0;
    }
    #bo_w .item_group .unit {
        white-space: nowrap;
    }
    #bo_w .select_group {
        padding-left: 0;
    }
    #bo_w .select_group.mo-column {
        padding-left: 0;
		flex-direction: column; 
		gap: 10px;
    }
    #bo_w .select_group {
        padding-left: 0;
    }
    #bo_w .mobile_group2 label {
        white-space: nowrap;
    }
    #bo_w .mobile_group,
    #bo_w .mobile_group.reverse,
    #bo_w .mobile_group2,
    #bo_w .mobile_group3 {
        width: 100%;
    }   
    #bo_w .item_group textarea {
        height: 185px !important;
    }	
	#layer_zip {
		width: calc(100% - 30px) !important;
	}
	.process-container {
		flex-direction: column;
	}
	#bo_w .radio_group2,
	#bo_w .select_group.mo-column {
		width: 100%;
	}
	.container {
		padding: 0;
	}
	.sub-cont-board {
		padding: 0;
	}
}