/*공통*/ #container{background:#f8f8f8;padding-bottom:170px;} .gw-bbs-con{margin:0 auto;width: 1200px;} .more_opt {display: none;position:absolute;top: 45px;right:0;background: #fff;border: 1px solid #ddd;z-index: 100;box-shadow: 70px 70px 130px rgb(39 49 108 / 20%);} .more_opt:before {content: "";position: absolute;top: -8px;right: 13px;width: 0;height: 0;border-style: solid;border-width: 0 6px 8px 6px;border-color: transparent transparent #b8bfc4 transparent;} .more_opt:after {content: "";position: absolute;top: -6px;right: 13px;width: 0;height: 0;border-style: solid;border-width: 0 6px 8px 6px;border-color: transparent transparent #fff transparent;} .more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:154px;margin:0;color:#666;text-align:left} .more_opt li:last-child {border-bottom:0} .more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#666;text-align: left;} .more_opt li:hover a, .more_opt li:hover button {color:#000} .more_opt li i {float:right;line-height:20px} /* 페이징 */ .pg_wrap {display: flex;align-items: center;place-content: center;font-family: "Outfit", sans-serif; font-weight: 600;} .pg {text-align:center;display: flex;} .pg_page,.pg_current { min-width: 20px;padding: 0 3px;margin: 0 6px;text-align: center;} .pg_page{color:#999 !important;} .pg_current{border-bottom:2px solid #000;} .pg a:focus, .pg a:hover {text-decoration:none} .pg_start {text-indent:-999px;overflow:hidden;padding:0;background: url('img/gw-bbs-start.png') no-repeat 50% 50%;background-size: 100%;} .pg_prev {text-indent:-999px;overflow:hidden;padding:0;background: url('img/gw-bbs-prev.png') no-repeat 50% 50%;background-size: 100%;} .pg_end {text-indent:-999px;overflow:hidden;padding:0;background: url("img/gw-bbs-end.png") no-repeat 50% 50%;background-size: 100%;} .pg_next {text-indent:-999px;overflow:hidden;padding:0;background: url('img/gw-bbs-next.png') no-repeat 50% 50%;background-size: 100%;} /*list*/ #gw-bo-list .search-container {padding:80px 0;position: relative;width: 700px;margin: 0 auto;display: flex;gap: 15px;} #gw-bo-list .search-container button {position: absolute;right: 17px;top:50%;transform:translateY(-50%);} #gw-bo-list .sch_input {padding:12px 17px;height:55px;border: 2px solid #ddd;border-radius: 5px;background: #fff;} #gw-bo-list .sch_input::placeholder{text-align: left;font-family: "Noto Sans KR", sans-serif; font-weight: 500;color:#666;} #gw-bo-list .sch_input:focus{text-align: left;border-color: #000;} input[type="text"]:not(:focus) {text-align: left;} #bo_cate_on{background: #fff;box-shadow: 0 15px 10px rgba(34, 34, 34, .02);color: var(--main-color);} #bo_cate ul {zoom:1;} .gw-table01 .chk_box {width: 60px;} #gw-bo-list .td_num2 {width: 100px;} #gw-bo-list .td_datetime {width: 140px;} #gw-bo-list .profile_img {display: none;} #gw-bo-list .gw-table01 .td_subject > a {display: inline-block;vertical-align: middle;} #gw-bo-list .bo_cate_link {margin-right:5px;color:var(--main-color);transition: all .3s;} #gw-bo-list .bo_tit {font-size: var(--main-title04);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;width:100%;} /* 공지 목록 정리: 번호/제목/날짜 3칸 구조에 맞춘 여백과 구분선 */ /* 헤더 칸 사이 세로 구분선을 없애 가로선만 남긴다 */ #gw-bo-list .gw-table01 th:not(:last-child):after {display: none;} #gw-bo-list .gw-table01 th {padding: 20px 0;color: #666;font-weight: 500;border-bottom: 1px solid #ddd;} #gw-bo-list .gw-table01 td {padding: 24px 0;} /* 제목 칸만 왼쪽 정렬 + 좌우 여백을 줘 번호/날짜와 붙지 않게 한다 */ #gw-bo-list .gw-table01 .td_subject {padding: 24px 30px;} #gw-bo-list .gw-table01 .td_num2 {color: #999;} #gw-bo-list .gw-table01 .td_datetime {color: #999;} /* 마지막 행 아래 선은 표 바깥 테두리처럼 진하게 마감 */ #gw-bo-list .gw-table01 tbody tr:last-child td {border-bottom: 2px solid #000;} /* 공지글 행은 옅은 배경으로 구분 */ #gw-bo-list .gw-table01 tbody tr.bo_notice {background: #fafafa;} #gw-bo-list .btn_bo_user > li.btn_bo_item {position: relative;width: 140px;} #gw-bo-list .btn_bo_user{place-content: center;align-items:flex-start;margin-top: 10px;} /* N(새글)·첨부 아이콘을 칸 오른쪽 끝이 아니라 제목 바로 뒤에 붙인다 */ #gw-bo-list .icon-wrap {position: static;transform: none;font-size: 16px;color: #000;display:inline-flex;vertical-align: middle;margin-left: 8px;gap:5px;} #gw-bo-list .new_icon {font-size:14px;font-family: "Outfit", sans-serif; font-weight: 600;color: #fff;width: 20px;height: 20px;display: block;text-align: center;line-height: 20px;background: var(--main-color);} #gw-bo-list .icon-wrap .fa-download:before {content: "\eb7c";font-family: xeicon;} #gw-bo-list .icon-wrap .fa-link:before {content: "\e9c0";font-family: xeicon;} #gw-bo-list .fa-lock:before {content: "\e964";font-family: xeicon;} #gw-bo-list .cnt_cmt {color: var(--main-color);} #gw-bo-list .gw-table01 tbody tr{position:relative;transition: all .5s;} #gw-bo-list .gw-table01 tbody tr.on{background: #fff;} #gw-bo-list .gw-table01 td{transition: all .3s;color: #000;} #gw-bo-list .subject > a {display: inline-block;} #gw-bo-list .gw-table01 .td_subject {transition: all .3s;} #gw-bo-list .gw-table01 .td_subject:hover{cursor:pointer;} #gw-bo-list .gw-table01 .td_subject:hover .bo_cate_link {background: var(--main-color);color: #fff !important;} #gw-bo-list .gw-empty-list{border-top: 2px solid #000;} #gw-bo-list .gw-empty-list {padding: 40px 0;border-bottom: 1px solid #ddd;border-top:2px solid #ddd;} #gw-bo-list .gw-empty-list > h3 {font-size: var(--main-title03);} /*view*/ #gw-bo-v{padding-top: 120px;} #gw-bo-v .profile_img {display: none;} #bo_v_info .profile_info{text-align: center;padding-bottom: 40px;margin-bottom: 40px;border-bottom: 1px solid #ddd;} #bo_v_atc {min-height: 250px;border: 2px solid #ddd;border-radius: 5px;background: #fff;padding: 20px;} #gw-bo-v .bo_v_nb{padding-top:60px;margin-bottom:60px;align-items:center;border-top: 1px solid #ddd;text-align: center;} #gw-bo-v .bo_v_nb > li > a {display: block;width: 100%;transition: all .3s;text-transform: uppercase;font-size: var(--main-title04);} #gw-bo-v .bo_v_nb > li > .list-btn {display:inline-block;width: 60px;height: 60px;background: #000;color: #fff;position: relative;box-shadow: 0 20px 30px rgba(0, 0, 0, .05);transition: all .3s;} #gw-bo-v .bo_v_nb > li > .list-btn:hover {background: var(--main-color);} #gw-bo-v .bo_v_nb > li > a.disabled-link {color: #ccc;} #gw-bo-v .btn_bo_user {place-content: center;align-items:flex-start;} #bo_v_link .gw-box01 {margin-bottom: 30px;} #bo_v_link .gw-box01 .gw-flex {align-items: center;gap: 10px;} .gw-empty-list {padding: 40px 0;border-bottom: 1px solid #ddd;border-top:2px solid #ddd;} .gw-empty-list > h3 {font-size: var(--main-title03);} #wr_content{background: #fff;} #bo_vc .cmt_contents {background: #fff;} #bo_vc .gw-box02 {border: 2px solid #ddd;margin-bottom: 20px;} #bo_v_sns{place-content: center;} #bo_v_sns > li {width: 40px;height: 40px;line-height:40px;border: 1px solid #ddd;} #bo_v_sns > li > a {display: block;width: 100%;height: 100%;color: #666;} #bo_v_sns > li > a.disabled {color: #ccc;} #bo_v_act {place-content: center;} #bo_vc_w .bo_vc_w_wr input{background: #fff;} #gw-bo-v .bo_v_nb > li > a{position: relative;} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a:before {content: "";display: block;width: 100%;height: 3px;background: var(--main-color);position: absolute;top: -80px;opacity: 0;transition: all .3s;} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a:hover:before{opacity: 1;} #gw-bo-v .bo_v_nb > li > .prev > i {transition: all .3s;} #gw-bo-v .bo_v_nb > li > .prev:hover{color: var(--main-color);} #gw-bo-v .bo_v_nb > li > .prev:hover > i {transform: translateX(-10px);} #gw-bo-v .bo_v_nb > li > .next > i {transition: all .3s;} #gw-bo-v .bo_v_nb > li > .next:hover{color: var(--main-color);} #gw-bo-v .bo_v_nb > li > .next:hover > i {transform: translateX(10px);} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a.disabled-link:before {opacity: 0;} #gw-bo-v .bo_v_nb > li > .disabled-link:hover > i {transform: translateX(0);} /* 게시판 쓰기 */ #char_count_desc {display:block;margin:0 0 5px;padding:0} #char_count_wrap {margin:5px 0 0;text-align:right} #char_count {font-weight:bold} #autosave_wrapper {position:relative} #autosave_wrapper .gw-btn03 {position: absolute;right: 17px;top: 50%;transform: translateY(-50%);} #autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #ddd;background:#fff;box-shadow:70px 70px 130px rgb(39 49 108 / 20%);} #autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent} #autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent} html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */ #autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden} #autosave_pop div {text-align:center;margin:0 !important} #autosave_pop button {margin:0;padding:0;border:0} #autosave_pop ul {padding:15px;border-top:1px solid #ddd;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #ddd} #autosave_pop li {padding:10px;border-bottom:1px solid #fff;background:#f3f3f3;zoom:1} #autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""} #autosave_pop a {display:block;float:left} #autosave_pop span {display:block;float:right;color:#999;font-family: "Outfit", sans-serif; font-weight: 400;} .autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em} .autosave_close:hover {background:#f3f3f3;color:#3597d9} .autosave_content {display:none} .autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px} /*글쓰기*/ #gw-bo-w{padding-top: 120px;width: 1000px;} #gw-bo-w > h2 {padding-bottom: 40px;margin-bottom: 20px;border-bottom: 2px solid #000;} #gw-bo-w > form > div:not(:last-child) {border-bottom: 1px solid #ddd;} #gw-bo-w > form input {margin-top:10px;background: #fff;} #gw-bo-w .file-name {background: #fff;width: calc(80% - 3px);} #gw-bo-w .file-name .num {border-bottom: 1px solid #000;margin-left: 10px;} #gw-bo-w .gw-btn-wrap {margin: 0 auto;} #gw-bo-w .file_del {position: absolute;right: 17px;top: 50%;transform: translateY(-50%);} .btn_cke_sc{font-size:14px;} .cke_sc_def{font-size:14px;} @media screen and (max-width:1280px){ #container{padding-bottom:120px;} .gw-bbs-con{width: 100%;padding: 0 40px;} /*write*/ #gw-bo-w{width: 100%;} } @media screen and (max-width:1024px){ .gw-bbs-con{width: 100%;padding: 0 20px;} /*list*/ #gw-bo-list .search-container{padding: 60px 0;width:100%;} #gw-bo-list .gw-table01 .td_chk {text-align: left;} /* 1024 이하는 gw.css 가 표를 카드형으로 바꾸므로 PC용 셀 여백/마감선을 되돌린다 */ #gw-bo-list .gw-table01 td, #gw-bo-list .gw-table01 .td_subject {padding: 19px 20px;} #gw-bo-list .gw-table01 tbody tr:last-child td {border-bottom: 0;} #gw-bo-list .bo_tit{padding-left: 0;padding-right: 0;width:80vw;} #gw-bo-list .gw-table01 .td_subject{display: flex;align-items:center;} #gw-bo-list .bo_cate_link{margin-right:10px;margin-bottom:0 !important;position: relative;left: auto;top: auto;transform: translateY(0);} #gw-bo-list .icon-wrap{right: 20px;} } @media screen and (max-width:768px){ #container{padding-bottom:60px;} /*write*/ #gw-bo-w{padding-top: 60px;} /*view*/ #gw-bo-v{padding-top: 60px;} } @media screen and (max-width:576px){ /*공통*/ .pg_page, .pg_current{height: 25px;} /*말풍선*/ .sv_on{left:auto;right: 0;} .sv_wrap .sv:before{left:auto;right: 15px;} .sv_wrap .sv:after{left:auto;right: 15px;} /*list*/ #gw-bo-list .search-container{padding: 40px 0;width: 100%;flex-wrap: wrap;} #gw-bo-list .icon-wrap{right: 10px;} #gw-bo-list .btn_bo_user{width: 100%;flex-direction:column;} #gw-bo-list .btn_bo_user > li{flex: 1;font-size: 12px;} #gw-bo-list .btn_bo_user > li.btn_bo_item{width: 100%;} #gw-bo-list .gw-table01 .td_subject{flex-direction:column;align-items:flex-start;gap:5px;} #gw-bo-list .bo_cate_link{margin-right: 0;margin-bottom: 5px;} /*write*/ #gw-bo-w > form > div {flex-direction: column;} #gw-bo-w > form > div .gw-w-15 {width: 100% !important;margin-bottom: 10px;} #gw-bo-w > form > div .gw-w-85 {width: 100% !important;flex-wrap: wrap;} #gw-bo-w > form > div .gw-w-85 > li {width: 40%;} #gw-bo-w > form > div > .gw-w-50:first-child {border-bottom: 1px solid #ddd;padding-bottom: 10px;} #gw-bo-w .file-name{width: calc(75% - 3px);} .gw-file-input-button{width: 25% !important;} .btn_cke_sc{font-size:12px;} .cke_sc_def{font-size:12px;} .cke_sc_def dd{text-align:center;} /*view*/ #gw-bo-v .sv_wrap .sv {right: auto;left: 0;} #gw-bo-v .sv_wrap .sv:before {left: 15px;right: auto;} #gw-bo-v .sv_wrap .sv:after {left: 15px;right: auto;} #bo_vc .cm_wrap > .gw-flex-btw {flex-direction: column;gap: 10px;text-align:center;} #bo_vc .cmt_contents{margin-bottom: 0 !important;} #gw-bo-v .bo_v_nb{margin-bottom: 30px;} #gw-bo-v .gw-btn0102 {width: 100% !important;} #gw-bo-v .btn_bo_user{width: 100%;flex-direction:column;} #gw-bo-v .btn_bo_user > li{flex: 1;font-size: 12px;} #bo_v_info .profile_info{padding-bottom: 20px;margin-bottom: 20px;font-size: 12px;} #gw-bo-v .bo_v_nb {padding-top: 30px;} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a:before{top: -50px;} .more_opt li{width:122px;} } @media screen and (max-width:375px){ /*list*/ .pg_page, .pg_current{margin:0 3px;} /*view*/ #gw-bo-v .bo_v_nb > li > .list-btn{width:50px;height:50px;} } /****************************************************************** 공지사항 리디자인 (2026-07) 이 파일 앞쪽의 기존 규칙을 덮어쓰기 위해 파일 맨 끝에 둔다. - 목록: 번호/제목/날짜 표 구조는 그대로 두고 선·여백·타이포만 정돈 - 상세: 제목 헤더 / 본문 타이포 / 하단 이동 버튼 정돈 컬러 토큰(--navy, --brand-orange 등)은 brand.css 정의를 쓴다. ******************************************************************/ /* ---------- 목록 ---------- */ /* 검색 영역(셀렉트·인풋)은 건드리지 않는다 — 표 스타일만 바꾼다 */ /* 표 외곽: 굵은 검정 선(2px) 대신 얇은 남색 선으로 마감 */ #gw-bo-list .gw-table01 { border-top: 2px solid var(--navy); } #gw-bo-list .gw-table01 th { padding: 16px 0; border-top: 0; border-bottom: 1px solid #e5e5e5; color: #999; font-size: 14px; font-weight: 500; letter-spacing: .02em; } #gw-bo-list .gw-table01 td { padding: 20px 0; border-bottom: 1px solid #eee; } #gw-bo-list .gw-table01 .td_subject { padding: 20px 28px; } #gw-bo-list .gw-table01 tbody tr:last-child td { border-bottom: 1px solid #e5e5e5; } /* 번호·날짜는 보조 정보라 옅게, 제목이 시선을 먼저 받게 한다 */ #gw-bo-list .td_num2 { width: 88px; } #gw-bo-list .td_datetime { width: 132px; } #gw-bo-list .gw-table01 .td_num2 { color: #bbb; font-size: 15px; } #gw-bo-list .gw-table01 .td_datetime { color: #aaa; font-size: 14px; } #gw-bo-list .bo_tit { font-size: 17px; line-height: 1.5; color: #222; transition: color .2s; } /* 행 hover: 배경을 흰색으로 띄우고 제목만 포인트 컬러로 */ #gw-bo-list .gw-table01 tbody tr { transition: background .2s; } #gw-bo-list .gw-table01 tbody tr.on { background: #fff; } #gw-bo-list .gw-table01 tbody tr.on .bo_tit { color: var(--brand-orange); } /* 공지글: 옅은 배경 대신 왼쪽 포인트 선으로 구분 */ #gw-bo-list .gw-table01 tbody tr.bo_notice { background: transparent; } #gw-bo-list .gw-table01 tbody tr.bo_notice .td_subject .bo_tit { font-weight: 700; } #gw-bo-list .notice_icon { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--navy); color: #fff; font-size: 12px; line-height: 1.4; } /* N 배지 */ #gw-bo-list .new_icon { width: auto; height: 18px; min-width: 18px; padding: 0 5px; line-height: 18px; font-size: 11px; background: var(--brand-orange); border-radius: 2px; } /* 하단 버튼 */ #gw-bo-list .btn_bo_user { margin-top: 30px; } /* ---------- 상세 ---------- */ #gw-bo-v { padding-top: 90px; } /* 제목 헤더: 가운데 정렬 -> 왼쪽 정렬. 제목이 길어져도 안정적으로 읽힌다 */ #gw-bo-v > header { text-align: left; } #gw-bo-v #bo_v_title { margin-bottom: 0 !important; padding-bottom: 22px; border-bottom: 2px solid var(--navy); } #gw-bo-v .bo_v_tit { font-size: 28px; line-height: 1.4; color: var(--navy); word-break: keep-all; } #gw-bo-v .bo_v_cate { display: inline-block; margin-bottom: 12px; padding: 5px 12px; background: var(--accent-bg); color: var(--cta-orange); font-size: 13px; font-weight: 700; } /* 메타(작성자·댓글·조회·작성일): 제목 아래 한 줄로 옅게 */ #gw-bo-v #bo_v_info .profile_info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 0 0; margin-bottom: 36px; border-bottom: 0; text-align: left; } #gw-bo-v .gw-profile-info { margin-bottom: 0 !important; color: #999; font-size: 14px; } #gw-bo-v .gw-profile-info strong { font-weight: 400; color: #999; } #gw-bo-v .gw-profile-info i { color: #ccc; } /* 본문: 두꺼운 테두리 상자 대신 여백 중심으로 */ #gw-bo-v #bo_v_atc { padding: 0 0 48px; /* 짧은 공지에서 빈 공간이 과하게 남지 않도록 기존 250px 보다 낮춘다 */ min-height: 140px; border: 0; border-radius: 0; background: transparent; } #gw-bo-v #bo_v_con { font-size: 16px; line-height: 1.9; color: #444; word-break: keep-all; } #gw-bo-v #bo_v_con p { margin-bottom: 1em; } #gw-bo-v #bo_v_con img { max-width: 100%; height: auto; } /* 본문에 넓은 표가 들어와도 레이아웃을 밀지 않게 가로 스크롤 */ #gw-bo-v #bo_v_con table { max-width: 100%; } #gw-bo-v #bo_v_img { margin-bottom: 24px; } #gw-bo-v #bo_v_img img { max-width: 100%; height: auto; } /* 하단 이동 버튼: 이전 / 목록 / 다음 */ #gw-bo-v .bo_v_nb { padding-top: 28px; margin-bottom: 50px; border-top: 1px solid #e5e5e5; } #gw-bo-v .bo_v_nb > li > a { font-size: 15px; color: #666; } #gw-bo-v .bo_v_nb > li > .list-btn { width: 52px; height: 52px; background: var(--navy); box-shadow: none; } #gw-bo-v .bo_v_nb > li > .list-btn:hover { background: var(--brand-orange); } #gw-bo-v .bo_v_nb > li > .prev:hover, #gw-bo-v .bo_v_nb > li > .next:hover { color: var(--brand-orange); } /* hover 시 위쪽에 나타나던 굵은 선은 제거 (헤더 구분선과 겹쳐 지저분했다) */ #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) > a:before { display: none; } /* ---------- 반응형 ---------- */ @media screen and (max-width: 1024px) { /* gw.css 가 1024 이하에서 표를 '라벨 + 값' 카드로 바꾸는데, 공지 목록에는 번호/날짜 라벨이 오히려 방해가 된다. 제목 한 줄 + 날짜 한 줄로 되돌린다. */ #gw-bo-list .gw-table01 tr { display: block; margin: 0; padding: 18px 4px; border: 0; border-bottom: 1px solid #eee; box-shadow: none; } #gw-bo-list .gw-table01 tr:not(:last-child) { margin-bottom: 0; } #gw-bo-list .gw-table01 tbody td { display: block; width: 100% !important; padding: 0; border: 0; background: none; text-align: left; } /* data-label(번호/제목/날짜) 말머리 제거 */ #gw-bo-list .gw-table01 tbody td:before { display: none; } /* 번호는 숨기고, '공지' 배지가 들어가는 행에서만 보여준다 */ #gw-bo-list .gw-table01 .td_num2 { display: none; } #gw-bo-list .gw-table01 tr.bo_notice .td_num2 { display: block; margin-bottom: 10px; } #gw-bo-list .gw-table01 .td_subject { display: block; padding: 0; } #gw-bo-list .bo_tit { width: auto; padding: 0; white-space: normal; font-size: 16px; line-height: 1.55; } #gw-bo-list .gw-table01 .td_datetime { margin-top: 8px; font-size: 13px; color: #aaa; } #gw-bo-list .icon-wrap { position: static; right: auto; } /* 상세 */ #gw-bo-v .bo_v_tit { font-size: 24px; } } @media screen and (max-width: 768px) { #gw-bo-v { padding-top: 50px; } #gw-bo-v .bo_v_tit { font-size: 21px; } #gw-bo-v #bo_v_info .profile_info { flex-direction: column; align-items: flex-start; margin-bottom: 26px; } #gw-bo-v #bo_v_atc { padding-bottom: 36px; } #gw-bo-v #bo_v_con { font-size: 15px; line-height: 1.8; } } @media screen and (max-width: 576px) { #gw-bo-list .gw-table01 tr { padding: 16px 2px; } #gw-bo-list .bo_tit { font-size: 15px; } /* 576 이하에서 td_subject 를 세로 flex 로 바꾸던 규칙 무력화 */ #gw-bo-list .gw-table01 .td_subject { display: block; } #gw-bo-v .bo_v_tit { font-size: 19px; } #gw-bo-v .bo_v_nb > li > a { font-size: 14px; } } /* ---------- 상세: 하단 이동 버튼(한글) ---------- */ /* 목록 버튼이 아이콘 정사각형에서 '목록으로' 텍스트 버튼으로 바뀌었다 */ #gw-bo-v .bo_v_nb > li > .list-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: 132px; padding: 15px 28px; font-size: 15px; font-family: "Noto Sans KR", sans-serif; font-weight: 700; text-transform: none; } #gw-bo-v .bo_v_nb > li > a { text-transform: none; } /* ---------- 댓글 ---------- */ /* 댓글 영역을 감싸던 회색 배경(.gw-box02 background:#F3F3F3) 제거 */ #gw-bo-v .gw-box02, #bo_vc .gw-box02 { background: transparent; border-radius: 0; } #bo_vc .cmt_contents { background: transparent; } /* '댓글 N' 배지 — 주황 배경 + 흰 글자 */ #gw-bo-v .cmt_btn .total.sticky02 { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; padding: 7px 14px; } /* 자동입력방지와 '답변등록' 버튼을 한 줄에 두고 버튼은 오른쪽 끝으로 */ #gw-bo-v .bcm-submit-row { display: flex; align-items: center; /* wrap 을 허용하면 캡차가 폭을 다 먹고 버튼이 아랫줄로 떨어진다 */ flex-wrap: nowrap; gap: 16px; margin-top: 14px; } /* 캡차는 내용만큼만 차지하게 (1 1 auto 로 두면 남은 폭을 다 먹는다) */ #gw-bo-v .bcm-submit-row #captcha { flex: 0 1 auto; min-width: 0; margin: 0; } #gw-bo-v .bcm-submit-row .btn_confirm { flex: 0 0 auto; margin-top: 0 !important; margin-left: auto; } /* 댓글 등록: 검정 풀폭 버튼 -> 주황 + 캡차 높이(50px)에 맞춘 작은 버튼 */ #gw-bo-v .bcm-submit-row .gw-btn0102 { /* .gw-btn0102 는 all:unset 이라 box-sizing 이 content-box 로 돌아간다. 그 상태로 width:100% + 좌우 padding 24px 를 주면 48px 만큼 넘쳐 폭이 깨진다. */ box-sizing: border-box; width: auto !important; min-width: 112px; height: 50px; line-height: 46px; padding: 0 24px; border: 2px solid var(--brand-orange); background: var(--brand-orange); color: #fff; font-size: 15px; } #gw-bo-v .bcm-submit-row .gw-btn0102:hover { border-color: var(--cta-orange); background: var(--cta-orange); } /* ---------- 라운드 제거: 상세(댓글)·글쓰기 영역의 입력요소·버튼 ---------- */ /* 견적문의 폼(main.css)의 둥근 입력창은 의도된 디자인이라 건드리지 않는다. 목록의 검색 셀렉트·인풋도 제외 — 목록에서는 표 스타일만 바꾼다. */ #gw-bo-v input[type="text"], #gw-bo-v input[type="password"], #gw-bo-v textarea, #gw-bo-v select, #gw-bo-v button, #gw-bo-v .gw-box01, #gw-bo-v .gw-btn0102, #gw-bo-v .gw-btn02, #gw-bo-v .gw-btn03, #gw-bo-w input[type="text"], #gw-bo-w input[type="password"], #gw-bo-w textarea, #gw-bo-w select, #gw-bo-w button, #gw-bo-w .file-name, #gw-bo-w .gw-file-input-button { border-radius: 0; } /* 체크박스는 :before 로 그려진다 */ #gw-bo-v input[type="checkbox"] + .check-label:before, #gw-bo-w input[type="checkbox"] + .check-label:before { border-radius: 0; } /* 자동입력방지 입력칸·버튼 */ #gw-bo-v #captcha #captcha_key, #gw-bo-v #captcha #captcha_mp3, #gw-bo-v #captcha #captcha_reload { border-radius: 0; } @media screen and (max-width: 768px) { /* 좁은 화면에서는 자동입력방지 아래로 버튼을 내리고 폭을 채운다 */ #gw-bo-v .bcm-submit-row { flex-direction: column; align-items: stretch; } #gw-bo-v .bcm-submit-row #captcha { flex: 0 0 auto; } #gw-bo-v .bcm-submit-row .btn_confirm { margin-top: 14px !important; margin-left: 0; width: 100%; } #gw-bo-v .bcm-submit-row .gw-btn0102 { width: 100% !important; min-width: 0; } /* 이름 / 비밀번호 세로 정렬은 파일 맨 끝에 둔다 (.bcm-guest-row 기본 규칙이 이 블록보다 뒤에 있어 여기서 쓰면 덮인다) */ #gw-bo-v .bo_v_nb > li > .list-btn { min-width: 104px; padding: 13px 18px; font-size: 14px; } } /* ---------- 목록 표 스타일 ---------- 번호/제목/날짜 레이아웃은 그대로 두고 표의 '겉모습'만 바꾼다. 테두리는 쓰지 않고, 헤더에 아주 옅은 웜그레이(주황 기운이 살짝 도는 회색)를 깔아 머리와 본문을 구분한다. */ #gw-bo-list .bo-list-wrap { border: 0; /* 표 위쪽만 포인트 컬러 라인으로 마감 */ border-top: 3px solid var(--brand-orange); background: #fff; margin-bottom: 50px; } #gw-bo-list .gw-table01 { border: 0; border-top: 0; margin-bottom: 0 !important; } #gw-bo-list .gw-table01 thead th { padding: 16px 0; border: 0; border-bottom: 1px solid #f0e3da; background: transparent; color: var(--cta-orange); font-size: 13px; font-weight: 700; letter-spacing: .08em; } /* '날짜'는 정렬 링크()라 링크 기본색(검정)을 물려받아 혼자 튀었다 → 헤더 색을 따르게 */ #gw-bo-list .gw-table01 thead th a { color: inherit; transition: opacity .2s; } #gw-bo-list .gw-table01 thead th a:hover { opacity: .65; } #gw-bo-list .gw-table01 tbody tr { background: #fff; } #gw-bo-list .gw-table01 td { padding: 17px 0; border-bottom: 1px solid #f2f2f2; } #gw-bo-list .gw-table01 .td_subject { padding: 17px 28px; } #gw-bo-list .gw-table01 tbody tr:last-child td { border-bottom: 0; } /* 행 hover: 헤더와 같은 계열을 더 옅게 깔고 제목만 포인트 컬러 */ #gw-bo-list .gw-table01 tbody tr.on { background: #fef8f4; } #gw-bo-list .gw-table01 tbody tr.on .bo_tit { color: var(--cta-orange); } /* 공지글 행 */ #gw-bo-list .gw-table01 tbody tr.bo_notice { background: #fdf7f3; } @media screen and (max-width: 1024px) { /* 카드형으로 바뀌는 구간: 표 헤더는 숨겨지므로 행 구분선만 남긴다 */ #gw-bo-list .bo-list-wrap { margin-bottom: 36px; } #gw-bo-list .gw-table01 tr { padding: 16px 18px; border-bottom: 1px solid #f2f2f2; } #gw-bo-list .gw-table01 tr:last-child { border-bottom: 0; } #gw-bo-list .gw-table01 tbody tr.bo_notice { background: #fdf7f3; } } /* ---------- 페이지네이션 ---------- */ /* 기존: 숫자만 나열되고 현재 페이지는 아래 검정 밑줄. 변경: 현재 페이지를 주황 사각 블록으로, 나머지는 hover 시 옅은 배경이 깔린다. */ #gw-bo-list .pg_wrap { margin-top: 8px; } #gw-bo-list .pg { gap: 4px; align-items: center; } #gw-bo-list .pg_page, #gw-bo-list .pg_current { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; margin: 0; padding: 0 6px; border-radius: 0; font-size: 15px; transition: background .2s, color .2s; } #gw-bo-list .pg_page { color: #999 !important; background: #fff; } #gw-bo-list .pg_page:hover { background: #fdf7f3; color: var(--cta-orange) !important; } #gw-bo-list .pg_current { background: var(--brand-orange); border-bottom: 0; color: #fff; font-weight: 700; } /* 처음/이전/다음/끝 화살표 버튼 */ #gw-bo-list .pg_start, #gw-bo-list .pg_prev, #gw-bo-list .pg_next, #gw-bo-list .pg_end { background-color: #fff; background-size: 42%; border: 1px solid #eee; } #gw-bo-list .pg_start:hover, #gw-bo-list .pg_prev:hover, #gw-bo-list .pg_next:hover, #gw-bo-list .pg_end:hover { background-color: #fdf1ea; border-color: #f2ddd0; } /* ---------- 댓글 입력 폼 정리 ---------- */ /* '비밀글' 글자를 체크박스와 세로 가운데로 맞춘다 (체크박스는 .check-label:before 로 그려지고 텍스트는 그 뒤에 흘러 어긋나 있었다) */ #gw-bo-v .secret_cm .check-label { display: inline-flex; align-items: center; gap: 8px; line-height: 1; cursor: pointer; } #gw-bo-v .secret_cm .check-label:before { margin-right: 0; flex: 0 0 auto; } #gw-bo-v .secret_cm .check-label > span { display: none; } /* 이름 + 비밀번호: 둘이 합쳐 한 줄을 꽉 채우게 (gw-w-50 은 50%+50%+gap 이라 넘쳤다). 위치도 내용 입력칸 위로 올라갔다(view_comment.skin.php). */ #gw-bo-v .bcm-guest-row { width: 100%; } #gw-bo-v .bcm-guest-row > input.gw-w-50 { flex: 1 1 0; width: auto !important; min-width: 0; } /* ---------- 자동입력방지 ---------- */ #gw-bo-v #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #gw-bo-v #captcha #captcha_img { height: 50px; vertical-align: middle; } #gw-bo-v #captcha #captcha_key { width: 110px; height: 50px; margin: 0; border: 1px solid #ddd; } /* 소리듣기 / 새로고침 아이콘: xeicon 웹폰트 글리프(\ea5b 등)가 iOS 사파리에서 재생버튼 모양으로 잘못 렌더되는 문제가 있어, 기기·브라우저 무관하게 동일한 SVG(배경 이미지)로 그린다. */ #gw-bo-v #captcha #captcha_mp3, #gw-bo-v #captcha #captcha_reload { position: relative; width: 50px; height: 50px; margin: 0; padding: 0; border: 1px solid #ddd; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 22px 22px; text-indent: -9999px; /* 버튼 텍스트(숫자음성듣기/새로고침) 숨김 */ overflow: hidden; font-size: 0; transition: background-color .2s, border-color .2s; } #gw-bo-v #captcha #captcha_mp3 > span, #gw-bo-v #captcha #captcha_reload > span { display: none; } /* 남아있을 수 있는 폰트 아이콘 규칙 무력화 */ #gw-bo-v #captcha #captcha_mp3:before, #gw-bo-v #captcha #captcha_reload:before { content: none; } #gw-bo-v #captcha #captcha_mp3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E"); } #gw-bo-v #captcha #captcha_reload { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 1 0-2.2 5.5'/%3E%3Cpath d='M20 4v6h-6'/%3E%3C/svg%3E"); } #gw-bo-v #captcha #captcha_mp3:hover, #gw-bo-v #captcha #captcha_reload:hover { background-color: #fdf1ea; border-color: var(--brand-orange); } #gw-bo-v #captcha #captcha_mp3:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b85228' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E"); } #gw-bo-v #captcha #captcha_reload:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b85228' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 1 0-2.2 5.5'/%3E%3Cpath d='M20 4v6h-6'/%3E%3C/svg%3E"); } /* '자동등록방지 숫자를 순서대로 입력하세요' 안내문구 제거 ($captcha_html 이 그누보드에서 생성돼 마크업에서 뺄 수 없다) */ #gw-bo-v #captcha #captcha_info { display: none; } #gw-bo-v #captcha legend { display: none; } /* 모바일에서 kcaptcha 는 소리듣기를