@charset "utf-8";
/* =========================================================================
 * visitor.css — 방문 경로 질문지 (board/visitor) 작성 폼
 * ========================================================================= */

/* 단독 사용: 사이트 헤더/푸터/사이드바/플로팅/본문제목 숨김 + 본문 전체폭 (기본 float 레이아웃 해제) */
#hd, #ft, #floatbtn, #container_title, #skip_to_container, #aside { display: none !important; }
#wrapper { min-width: 0 !important; }
#container_wr { margin: 0 !important; max-width: none !important; min-width: 0 !important; }
#container { float: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; }

.vs_w { position: relative; box-sizing: border-box; width: 100%; padding: 90px 0 0; }
.vs_form { box-sizing: border-box; width: 100%; max-width: 1123px; margin: 0 auto; padding: 0 20px; }

/* 상단 안내 */
.vs_intro { text-align: center; }
.vs_intro_ttl { font-size: 38px; font-weight: 600; letter-spacing: -0.42px; line-height: 1.5; color: #111; word-break: keep-all; }
.vs_intro_desc { margin-top: 16px; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.5; color: #222; word-break: keep-all; }

/* 필드 블록: 상·하단 라인으로 감쌈 */
.vs_fields { margin-top: 30px; border-top: 2px solid #2f3a42; border-bottom: 1px solid #2f3a42; }
.vs_sec { display: flex; flex-direction: column; gap: 20px; padding: 40px; }
.vs_sec--name { gap: 12px; }

/* 라벨 */
.vs_lb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: -0.96px; line-height: 1.2; color: #111; word-break: keep-all; }
.vs_lb em { color: #da0000; font-style: normal; }
.vs_dot { flex: 0 0 auto; width: 7px; height: 7px; background: #1f2e38; }
.vs_help { font-size: 17px; font-weight: 300; letter-spacing: -0.42px; color: #111; }

/* 성함 입력 */
.vs_inp { box-sizing: border-box; width: 100%; height: 60px; padding: 10px 20px; background: #fff; border: 0; border-bottom: 1px solid #78838a; font-size: 18px; color: #111; }
.vs_inp::placeholder { color: #555; }
.vs_inp:focus { outline: none; border-bottom-color: #2f3a42; }

/* 단일선택 (당사자/항목/우선사항) — 5열 그리드 */
.vs_opts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; }
.vs_opt { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.vs_opt input { position: absolute; width: 0; height: 0; opacity: 0; }
.vs_chk { position: relative; flex: 0 0 auto; width: 18px; height: 18px; background: #c1ccd2; }
.vs_opt input:checked + .vs_chk { background: #2f3a42; }
.vs_opt input:checked + .vs_chk::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vs_opt input:focus-visible + .vs_chk { outline: 2px solid #2f3a42; outline-offset: 2px; }
.vs_opt_tx { font-size: 20px; font-weight: 400; letter-spacing: -0.8px; line-height: 1.4; color: #111; }

/* 방문 경로 (중복) — 3열 그리드, 카페·기타는 전체폭 */
.vs_paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 50px; }
.vs_pgroup:nth-last-child(-n + 2) { grid-column: 1 / -1; }
.vs_pgroup_ttl { margin-bottom: 8px; font-size: 20px; font-weight: 500; letter-spacing: -0.42px; line-height: 1.8; color: #111; }
.vs_pills { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vs_pill { display: inline-flex; align-items: center; padding: 16px 24px; border: 1px solid #c0ccd2; border-radius: 50px; background: rgba(255, 255, 255, .8); color: #2f3a42; font-size: 17px; font-weight: 500; letter-spacing: -0.68px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.vs_pill input { position: absolute; width: 0; height: 0; opacity: 0; }
.vs_pill.is-on { background: #2f3a42; color: #fff; }
.vs_petc { display: inline-flex; }
.vs_petc_inp { box-sizing: border-box; width: 220px; height: 50px; padding: 10px 20px; background: #fff; border: 0; border-bottom: 1px solid #78838a; font-size: 18px; color: #111; }
.vs_petc_inp::placeholder { color: #555; }
.vs_petc_inp:focus { outline: none; border-bottom-color: #2f3a42; }

/* 작성완료 버튼 */
.vs_btns { margin-top: 60px; padding: 0 20px; display: flex; justify-content: center; }
.vs_submit { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 300px; height: 55px; padding: 0 52px 0 12px; border: 0; border-radius: 30px; background: linear-gradient(90deg, #20262b 0%, #4c5d6a 50%, #7894a8 100%); cursor: pointer; }
.vs_submit[disabled] { opacity: .6; cursor: default; }
.vs_submit_tx { font-size: 20px; font-weight: 700; color: #fff; }
.vs_submit_ar { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 20px; line-height: 1; }

/* 하단 인사말 (전체폭 대리석 배경) */
.vs_greet { margin-top: 120px; width: 100%; background: #e9ebe9 url("../../../img/board/visitor/greet-bg.webp") no-repeat center bottom / cover; }
.vs_greet_in { box-sizing: border-box; width: 100%; max-width: 1413px; margin: 0 auto; padding: 130px 20px 150px; display: flex; gap: 35px; align-items: flex-start; }
.vs_greet_head { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; }
.vs_greet_ic { flex: 0 0 auto; width: 69px; height: 85px; background: url("../../../img/board/visitor/greet-logo.svg") no-repeat center / contain; }
.vs_greet_ttl { font-size: 35px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.4; color: #222; word-break: keep-all; }
.vs_greet_body { flex: 1 1 auto; min-width: 0; max-width: 840px; font-size: 18px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.6; color: #222; word-break: keep-all; }

/* 작성완료 팝업 */
.vs_done { position: fixed; inset: 0; z-index: 9999; display: none; }
.vs_done.on { display: block; }
.vs_done_dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.vs_done_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: calc(100% - 40px); max-width: 420px; padding: 44px 30px 30px; background: #fff; border-radius: 16px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.vs_done_ic { display: inline-flex; margin-bottom: 18px; }
.vs_done_msg { font-size: 22px; font-weight: 600; line-height: 1.45; color: #111; }
.vs_done_btn { margin-top: 28px; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 54px; border: 0; border-radius: 27px; background: linear-gradient(90deg, #20262b 0%, #4c5d6a 50%, #7894a8 100%); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }

/* 상세(읽기전용) */
.vs_view { padding: 60px 20px; }
.vs_view_in { max-width: 900px; margin: 0 auto; }
.vs_view_ttl { font-size: 28px; font-weight: 700; color: #111; margin-bottom: 24px; }
.vs_view_tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #2f3a42; }
.vs_view_tbl th, .vs_view_tbl td { padding: 16px 20px; border-bottom: 1px solid #e2e6e9; text-align: left; font-size: 17px; vertical-align: top; }
.vs_view_tbl th { width: 160px; background: #f6f8f9; color: #2f3a42; font-weight: 600; }
.vs_view_tag { display: inline-block; margin: 2px 6px 2px 0; padding: 5px 12px; border-radius: 40px; background: #2f3a42; color: #fff; font-size: 14px; }
.vs_view_btns { margin-top: 24px; display: flex; gap: 10px; }
.vs_view_btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 8px; background: #2f3a42; color: #fff; font-size: 15px; }
.vs_view_btn--del { background: #b03a3a; }

.vs_greet_body br.pc {display:none}

/* ========================= 반응형 ========================= */
@media (max-width: 1024px) {
    .vs_w { padding-top: 80px; }
    .vs_intro_ttl { font-size: 30px; }
    .vs_intro_desc { font-size: 17px; }
    .vs_intro_desc br { display: none; }
    .vs_sec { padding: 32px 24px; }
    .vs_lb { font-size: 20px; }
    .vs_opt_tx { font-size: 18px; }
    .vs_paths { gap: 32px 30px; }
    .vs_greet_in { padding: 70px 24px; gap: 28px; }
    .vs_greet_in { padding: 100px 24px 120px; }
    .vs_greet_ttl { font-size: 28px; }

	.vs_pills {gap:10px}
    .vs_w { padding-top: 60px; }
    .vs_intro_ttl { font-size: 23px; }
    .vs_intro_desc { font-size: 15px; }
    .vs_sec { padding: 26px 6px; gap: 16px; }
    .vs_lb { font-size: 18px; gap: 8px; }
    .vs_help { font-size: 14px; }
    .vs_inp { height: 52px; font-size: 16px; }
    /* 단일선택: 3열 */
    .vs_opts {  gap: 14px 8px; }
    .vs_opt_tx { font-size: 16px; }
    /* 경로: 1열 */
    .vs_paths { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
    .vs_pgroup_ttl { font-size: 17px; }
    .vs_pill { padding: 12px 18px; font-size: 15px; }
    .vs_petc_inp { width: 180px; height: 46px; font-size: 15px; }
    .vs_btns { margin-top: 40px; }
    .vs_greet { margin-top: 70px; }
    .vs_greet_in {  padding: 50px 20px; gap: 20px;     flex-direction: column;}
    .vs_greet_head { flex: none; }
    .vs_greet_ttl { font-size: 22px; }
    .vs_greet_body { font-size: 15px; line-height: 1.8; max-width:100%}
    .vs_done_msg { font-size: 19px; }
	.vs_greet_body br.none {display:none}
	.vs_greet_body br.pc {display:block}
}

@media (max-width: 768px) {
    .vs_w { padding-top: 60px; }
    .vs_intro_ttl { font-size: 23px; }
    .vs_intro_desc { font-size: 15px; }
    .vs_sec { padding: 26px 6px; gap: 16px; }
    .vs_lb { font-size: 18px; gap: 8px; }
    .vs_help { font-size: 14px; }
    .vs_inp { height: 52px; font-size: 16px; }
    /* 단일선택: 3열 */
    .vs_opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
    .vs_opt_tx { font-size: 16px; }
    /* 경로: 1열 */
    .vs_paths { grid-template-columns: 1fr; gap: 24px; }
    .vs_pgroup:nth-last-child(-n + 2) { grid-column: auto; }
    .vs_pgroup_ttl { font-size: 17px; }
    .vs_pill { padding: 12px 18px; font-size: 15px; }
    .vs_petc_inp { width: 180px; height: 46px; font-size: 15px; }
    .vs_btns { margin-top: 40px; }
    .vs_greet { margin-top: 70px; }
    .vs_greet_in { flex-direction: column; padding: 50px 20px; gap: 20px; }
    .vs_greet_head { flex: none; }
    .vs_greet_ttl { font-size: 22px; }
    .vs_greet_ttl br { display: none; }
    .vs_greet_body { font-size: 15px; line-height: 1.8; }
    .vs_done_msg { font-size: 19px; }
}
@media (max-width: 486px) {
    .vs_intro_ttl { font-size: 20px; }
    .vs_lb { font-size: 16px; }
    .vs_opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vs_opt_tx { font-size: 15px; }
    .vs_pill { padding: 11px 16px; font-size: 14px; }
    .vs_greet_ttl { font-size: 20px; }
}