@charset "utf-8";

/* =====================================================
   온라인상담 게시판 스킨 (skin/board/online)
   PC 1920 기준 1rem = 10px, 모바일 375 기준
   ===================================================== */
.online .inner {width: 94rem; margin: 0 auto;}
.online .hide {display: none;}

/* 비주얼 */
.online .sv {position: relative; height: 78rem; padding-top: 36.2rem; background: url(img/sv.jpg) no-repeat center / cover; color: #fff; text-align: center;}
.online .sv::before {content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4);}
.online .sv .tit {position: relative; font-size: 5rem; font-weight: 700; line-height: 7rem; text-shadow: 0 0 1rem #000;}

/* 공통 : 답변여부 배지, 비밀글 자물쇠, 답변 표시, 하단 장식 문구 */
.online .badge {display: inline-block; width: 6rem; height: 2.6rem; border-radius: 0.4rem; font-size: 1.2rem; font-weight: 400; font-style: normal; line-height: 2.6rem; letter-spacing: -0.024rem; color: #fff; text-align: center; vertical-align: middle;}
.online .badge.req {background: #222664;}
.online .badge.done {background: #ababab;}
.online .lock {display: inline-block; width: 2rem; height: 2rem; margin-left: 0.9rem; vertical-align: middle;}
.online .re {display: inline-block; margin-right: 0.6rem; font-size: 1.2rem; font-style: normal; font-weight: 600; color: #222664;}
.online .deco {overflow: hidden; margin-top: 8rem; font-size: 10rem; font-weight: 700; line-height: 24.9rem; color: #f5f5f5; text-align: center; white-space: nowrap;}

/* 목록 */
.online .bo_list {padding-top: 13.5rem;}
.online .bo_top {font-size: 1.4rem; line-height: 3rem; letter-spacing: -0.028rem;}
.online .list {border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; font-size: 1.4rem; letter-spacing: -0.028rem;}
.online .list li {border-bottom: 1px solid #bebebe;}
.online .list li:last-child {border-bottom: 0;}
.online .list .hd, .online .list li a {display: grid; grid-template-columns: 7rem 61rem 9rem 6rem 11rem; align-items: center; min-height: 6.7rem; line-height: 3rem; color: #000;}
.online .list .hd {min-height: 6.6rem; font-weight: 600;}
.online .list .num, .online .list .date, .online .list .status {text-align: center;}
.online .list .subject {padding-left: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.online .list .name {padding-left: 1.1rem;}
.online .list .empty {padding: 4rem 0; font-size: 1.4rem; color: #666; text-align: center;}

/* 목록 하단 : 페이지 번호 + 글쓰기 */
.online .bo_btm {position: relative; display: flex; justify-content: space-between; align-items: flex-start; min-height: 2.6rem; margin-top: 1.65rem;}
.online .pg_wrap {display: block; margin: 0; padding: 0; text-align: left;}
.online .pg {display: flex; gap: 0.4rem;}
.online .pg_page, .online .pg_current {display: block; width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; border: 0; border-radius: 0.4rem; background: #e9e9e9; font-size: 1.4rem; font-weight: 400; line-height: 2.6rem; letter-spacing: -0.028rem; color: #222; text-align: center;}
.online .pg_current {background: #222664; color: #fff;}
.online .pg_start, .online .pg_prev, .online .pg_next, .online .pg_end {font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 2.4rem;}
.online .pg_prev {background-image: url(img/ic_arrow.svg);}
.online .pg_start {background-image: url(img/ic_arrow2.svg);}
.online .pg_next {background-image: url(img/ic_arrow.svg); transform: scaleX(-1);}
.online .pg_end {background-image: url(img/ic_arrow2.svg); transform: scaleX(-1);}
.online .btn_write {display: block; font-size: 1.8rem; color: #fff; background: #222664; border-radius: 0.4rem; padding: 0.4rem 1.2rem; font-weight: 600;}
.online .btn_write img {display: block; width: 100%;}

/* 상담신청 폼 */
.online .wform {padding: 9.55rem 0 8.6rem; background: #f5f5f5; text-align: center;}
.online .wform .small {font-size: 1.4rem; font-weight: 500; line-height: 1.4rem; color: #161616;}
.online .wform .tit {margin-top: 1.1rem; font-size: 3.6rem; font-weight: 700; line-height: 3.6rem; color: #222664;}
.online .card {display: grid; grid-template-columns: 33rem 33rem; justify-content: center; column-gap: 5.9rem; row-gap: 2.15rem; margin-top: 2.65rem; padding: 4.64rem 11.1rem; border-radius: 1.2rem; background: #fff; text-align: left;}
.online .field {display: flex; align-items: center; gap: 0.84rem; height: 3.85rem; border-bottom: 1px solid #b5b5b5;}
.online .field img {flex: none; width: 2.4rem; height: 2.4rem; object-fit: contain;}
.online .field input {flex: 1; min-width: 0; height: 3.75rem; padding: 0; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: 1.5rem; font-weight: 500; line-height: 1.5rem; color: #161616;}
.online .field input::placeholder {color: #161616; opacity: 1;}
.online .field.f_pw {grid-column: 1 / -1;}
.online .field.f_pw img {width: 2rem; height: 2rem; margin: 0 0.2rem;}
.online .field input:focus {outline: none;}
.online .wform .captcha {margin-top: 2.4rem;}
.online .wform .captcha #captcha {display: inline-block;}
.online .agree {display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 2.9rem; font-size: 1.4rem; line-height: 1.4rem; color: #5a5a5a; cursor: pointer;}
.online .agree input {appearance: none; -webkit-appearance: none; width: 1.4rem; height: 1.4rem; margin: 0; border: 1px solid #b5b5b5; border-radius: 50%; background: #fff; cursor: pointer;}
.online .agree input:checked {border: 0; background: url(img/ic_check.svg) no-repeat center / 100%;}
.online .btns {margin-top: 1.8rem;}
.online .btn_submit {display: inline-block; width: 22.8rem; height: 4.8rem; padding: 0; border: 0; border-radius: 0.8rem; background: #222664; font-family: inherit; font-size: 1.6rem; font-weight: 500; line-height: 4.8rem; color: #fff; text-align: center; cursor: pointer;}
.online .btn_submit:disabled {opacity: 0.6; cursor: default;}

/* 답변 폼 (관리자 답변 작성·수정) */
.online .card.ans {display: block;}
.online .field.f_subject {height: auto; padding-bottom: 0.8rem;}
.online .field.f_subject input {height: 3rem; font-size: 1.8rem; font-weight: 700;}
.online .ans_content {margin-top: 2.4rem;}
.online .ans_content textarea {display: block; width: 100%; height: 32rem; padding: 1.4rem; border: 1px solid #b5b5b5; border-radius: 0.8rem; font-family: inherit; font-size: 1.5rem; line-height: 1.7; color: #161616; resize: vertical;}
.online .ans_content textarea:focus {outline: none; border-color: #222664;}
.online .wform.answer .btns {display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.9rem;}
.online .btn_cancel {display: inline-block; width: 12rem; height: 4.8rem; border: 1px solid #bebebe; border-radius: 0.8rem; background: #fff; font-size: 1.6rem; font-weight: 500; line-height: 4.6rem; color: #333; text-align: center;}

/* 상세 */
.online .bo_view {padding-top: 10rem;}
.online .vhead {padding-bottom: 2rem; border-bottom: 1px solid #2a2a2a;}
.online .vhead .subject {margin-top: 1.2rem; font-size: 2.4rem; font-weight: 700; line-height: 3.4rem; color: #161616;}
.online .vhead .meta {margin-top: 0.6rem; font-size: 1.4rem; color: #666;}
.online .vhead .meta span + span::before {content: '|'; margin: 0 0.8rem; color: #ccc;}
.online .bo_view .card {margin-top: 3rem; border: 1px solid #e5e5e5;}
.online .bo_view .field {align-items: center; height: auto; padding-bottom: 1rem;}
.online .bo_view .field .lb {flex: none; width: 7rem; font-size: 1.5rem; font-weight: 500; color: #161616;}
.online .bo_view .field .val {flex: 1; font-size: 1.5rem; color: #333; word-break: break-all;}
.online .vcon {margin-top: 3rem; padding: 3rem; border: 1px solid #e5e5e5; border-radius: 1.2rem; font-size: 1.5rem; line-height: 1.8; color: #333; word-break: break-all;}
.online .vcon img {max-width: 100%; height: auto;}
.online .vbtns {display: flex; justify-content: center; gap: 0.6rem; margin-top: 3rem;}
.online .vbtns .btn {display: inline-block; min-width: 9rem; height: 4rem; padding: 0 2rem; border: 1px solid #bebebe; border-radius: 0.6rem; font-size: 1.4rem; font-weight: 500; line-height: 3.8rem; color: #333; text-align: center;}
.online .vbtns .btn.navy {border-color: #222664; background: #222664; color: #fff;}

@media all and (max-width: 880px){
    .online .inner {width: auto; margin: 0 2.75rem;}
    .online .sv {background: url(img/sv_mo.jpg) no-repeat center / cover; height: 90vh; padding: 0;}
    .online .sv .tit {font-size: 3.6rem; line-height: 5rem;}
    .online .deco {margin: 5.9rem 0 3.9rem; font-size: 3rem; line-height: 4.6rem;}

    /* 목록 : 제목/배지 왼쪽, 글쓴이 오른쪽. 건수 표시는 페이지 번호 아래 회색 바 */
    .online .bo_list {padding-top: 8rem;}
    .online .bo_list .inner {display: flex; flex-direction: column;}
    .online .bo_top {order: 3; height: 3.8rem; margin-top: 1.3rem; border-radius: 0.4rem; background: #f1f1f1; line-height: 3.8rem; text-align: center;}
    .online .list .hd {display: none;}
    .online .list li a {grid-template-columns: 1fr auto; grid-template-areas: "subject name" "status name"; min-height: 7.8rem; padding: 1.05rem 0.55rem 1.45rem;}
    .online .list .num, .online .list .date {display: none;}
    .online .list .subject {grid-area: subject; padding-left: 0; font-weight: 700; white-space: normal; display: flex; align-items: center;}
    .online .list .name {grid-area: name; padding-left: 1rem;}
    .online .list .status {grid-area: status; margin-top: -0.3rem; text-align: left;}
    .online .bo_btm {justify-content: center; margin-top: 1.8rem;}
    .online .btn_write {position: absolute; right: 0; top: 0;}

    /* 상담신청 폼 */
    .online .wform {padding: 7.7rem 0 6.7rem;}
    .online .wform .inner {margin: 0;}
    .online .wform .tit {font-size: 3.4rem; line-height: 3.4rem;}
    .online .card {grid-template-columns: 1fr; row-gap: 2.15rem; margin: 2.6rem 2.5rem 0; padding: 3.04rem 2.4rem 4.37rem;}
    .online .field.f_age {order: 1;}
    .online .field.f_phone {order: 2;}
    .online .field.f_symptom {order: 3;}
    .online .field.f_pw {order: 4;}
    .online .agree {margin-top: 2.1rem;}
    .online .btns {margin-top: 1.6rem;}

    /* 상세 */
    .online .bo_view {padding-top: 6rem;}
    .online .bo_view .card {margin: 3rem 0 0; padding: 2.4rem 2rem;}
    .online .vhead .subject {font-size: 2rem; line-height: 3rem;}
    .online .vbtns {flex-wrap: wrap;}
    .online .vbtns .btn {min-width: 0; padding: 0 1.4rem;}
}