/* 게시판 (skin/board/basic, skin/board/telephone, 비밀글 패스워드) - 모든 스타일은 .ys-bd 로 시작
   색 · 글꼴은 css/header.css 와 같음. 링크: board.lib.php 의 ys_board_css() */
.ys-bd {
    --bd-navy: #1d2b44;
    --bd-blue: #29a9e1;
    --bd-blue-dk: #1b7fb0;
    --bd-text: #4a5566;
    --bd-muted: #8a94a3;
    --bd-line: #e6edf3;
    --bd-soft: #f4f8fb;
    --bd-field: #d3dde7;
    --bd-red: #d9485f;
    font-family: var(--ys-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--bd-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ys-bd *,
.ys-bd *::before,
.ys-bd *::after {
    box-sizing: border-box;
}

.ys-bd td,
.ys-bd th,
.ys-bd p,
.ys-bd input,
.ys-bd select,
.ys-bd textarea,
.ys-bd button {
    font-family: var(--ys-font);
}

.ys-bd a {
    color: var(--bd-navy);
}

.ys-bd a:hover {
    color: var(--bd-blue-dk);
    text-decoration: none;
}

.ys-bd svg {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -.125em;
}

/* ---------- 버튼 ---------- */
.ys-bd-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ys-bd .ys-bd-btn,
.ys-bd a.ys-bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--bd-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bd-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}

.ys-bd .ys-bd-btn:hover {
    border-color: var(--bd-blue);
    color: var(--bd-blue-dk);
}

.ys-bd .ys-bd-btn.is-primary {
    border-color: var(--bd-navy);
    background: var(--bd-navy);
    color: #fff;
}

.ys-bd .ys-bd-btn.is-primary:hover {
    border-color: #2a3d5e;
    background: #2a3d5e;
    color: #fff;
}

.ys-bd .ys-bd-btn.is-danger:hover {
    border-color: var(--bd-red);
    color: var(--bd-red);
}

.ys-bd .ys-bd-btn.is-sm {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 13px;
}

.ys-bd .ys-bd-btn.is-lg {
    min-height: 50px;
    padding: 12px 28px;
    font-size: 16px;
}

.ys-bd .ys-bd-btn b {
    font-weight: 800;
}

.ys-bd .ys-bd-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* ---------- 입력칸 ---------- */
.ys-bd .ys-bd-input,
.ys-bd .ys-bd-select {
    display: inline-block;
    max-width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--bd-field);
    border-radius: 10px;
    background-color: #fff;
    /* js/wrest.js 가 필수칸에 넣는 모서리 그림 대신 라벨의 * 표시를 씀 */
    background-image: none !important;
    color: var(--bd-navy);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.ys-bd .ys-bd-select {
    padding-right: 32px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a94a3' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 8px !important;
    -webkit-appearance: none;
    appearance: none;
}

.ys-bd textarea.ys-bd-input {
    display: block;
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 12px;
    line-height: 1.7;
    resize: vertical;
}

.ys-bd .ys-bd-input:focus,
.ys-bd .ys-bd-select:focus {
    border-color: var(--bd-blue);
    box-shadow: 0 0 0 3px rgba(41, 169, 225, .18);
    outline: none;
}

.ys-bd .ys-bd-input::placeholder {
    color: #a3acb9;
}

.ys-bd .ys-bd-input[type=file] {
    height: auto;
    padding: 9px 10px;
    font-size: 14px;
}

.ys-bd .ys-bd-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 14px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--bd-text);
    white-space: nowrap;
    cursor: pointer;
}

.ys-bd .ys-bd-check .ys-bd-help {
    white-space: normal;
}

.ys-bd .ys-bd-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bd-navy);
}

/* ---------- 목록 위: 분류, 전체 건수, 관리자 ---------- */
.ys-bd-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 20px 0 12px;
}

.ys-bd-top form {
    margin: 0;
}

.ys-bd-top-r {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.ys-bd-total {
    margin-right: 4px;
    font-size: 14px;
    color: var(--bd-muted);
}

.ys-bd-total b {
    font-weight: 700;
    color: var(--bd-navy);
}

/* ---------- 목록 ---------- */
.ys-bd-list {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-top: 2px solid var(--bd-navy);
    table-layout: fixed;
}

.ys-bd-list th {
    height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--bd-line);
    background: var(--bd-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-text);
    text-align: center;
    white-space: nowrap;
}

.ys-bd-list th a {
    color: inherit !important;
}

.ys-bd-list td {
    padding: 15px 8px;
    border-bottom: 1px solid var(--bd-line);
    font-size: 14px;
    color: var(--bd-muted);
    text-align: center;
    vertical-align: middle;
}

.ys-bd-list tbody tr {
    transition: background-color .15s;
}

.ys-bd-list tbody tr:hover {
    background: #f9fbfd;
}

.ys-bd-list .ys-bd-num { width: 72px; }
.ys-bd-list .ys-bd-chk { width: 44px; }
.ys-bd-list .ys-bd-name { width: 120px; }
.ys-bd-list .ys-bd-state { width: 96px; }
.ys-bd-list .ys-bd-date { width: 80px; }
.ys-bd-list .ys-bd-hit { width: 64px; }
.ys-bd-list .ys-bd-good { width: 64px; }

.ys-bd-list td.ys-bd-subj {
    text-align: left;
    color: var(--bd-navy);
}

.ys-bd-list td.ys-bd-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bd-text);
}

.ys-bd-list td.ys-bd-name span,
.ys-bd-list td.ys-bd-name a {
    font-weight: 500;
    color: var(--bd-text) !important;
}

.ys-bd-list .ys-bd-chk input {
    width: 17px;
    height: 17px;
    margin: 0;
    vertical-align: middle;
}

.ys-bd .ys-bd-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--bd-navy);
}

.ys-bd .ys-bd-link:visited {
    color: var(--bd-navy);
}

.ys-bd .ys-bd-ca {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bd-soft);
    font-size: 12px;
    font-weight: 700;
    color: var(--bd-blue-dk);
    vertical-align: 1px;
}

.ys-bd .ys-bd-re {
    display: inline-block;
    margin-right: 4px;
    font-weight: 700;
    color: var(--bd-blue);
}

.ys-bd .ys-bd-cnt {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-blue) !important;
}

.ys-bd-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    vertical-align: 1px;
    font-style: normal;
    line-height: 1;
}

.ys-bd-ico svg {
    width: 15px;
    height: 15px;
    vertical-align: 0;
}

.ys-bd-ico.is-lock,
.ys-bd-ico.is-file,
.ys-bd-ico.is-link {
    color: #a3acb9;
}

.ys-bd-ico.is-new {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--bd-blue);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

.ys-bd-ico.is-hot {
    padding: 2px 6px;
    border-radius: 999px;
    background: #fdeef0;
    font-size: 11px;
    font-weight: 700;
    color: var(--bd-red);
}

.ys-bd .ys-bd-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bd-navy);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.ys-bd-list tr.is-notice {
    background: #f9fbfd;
}

.ys-bd-list tr.is-current {
    background: #eef7fd;
}

.ys-bd-list tr.is-current td.ys-bd-num {
    font-weight: 700;
    color: var(--bd-blue-dk);
}

.ys-bd-list .ys-bd-m {
    display: none;
}

.ys-bd-list td.ys-bd-empty {
    padding: 64px 12px;
    font-size: 15px;
    color: var(--bd-muted);
}

/* 상담 게시판의 답변 상태 */
.ys-bd .ys-bd-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bd-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bd-muted);
    white-space: nowrap;
}

.ys-bd .ys-bd-badge.is-done {
    background: #e3f4fc;
    color: var(--bd-blue-dk);
}

/* 목록 아래 버튼 */
.ys-bd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 0;
}

.ys-bd-actions > .ys-bd-btn:last-child,
.ys-bd-actions > .ys-bd-btns:last-child {
    margin-left: auto;
}

/* ---------- 페이지 번호 ---------- */
.ys-bd-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 28px 0 0;
    font-size: 0;
}

.ys-bd-page a,
.ys-bd-page strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bd-text) !important;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.ys-bd-page a:hover {
    background: var(--bd-soft);
    color: var(--bd-blue-dk) !important;
}

.ys-bd-page strong {
    background: var(--bd-navy);
    color: #fff !important;
}

.ys-bd-page .ys-bd-pg-nav {
    font-size: 18px;
    color: var(--bd-muted) !important;
}

.ys-bd-page .ys-bd-pg-part {
    padding: 0 12px;
    border: 1px solid var(--bd-line);
    border-radius: 999px;
    font-size: 13px;
}

/* ---------- 검색 ---------- */
.ys-bd-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 640px;
    margin: 20px auto 0;
    padding: 14px;
    border-radius: 16px;
    background: var(--bd-soft);
}

.ys-bd-search .ys-bd-select {
    flex: 0 0 auto;
    width: 140px;
}

.ys-bd-search .ys-bd-input {
    flex: 1 1 180px;
    min-width: 0;
}

.ys-bd-search .ys-bd-btn {
    min-height: 44px;
    padding: 8px 20px;
}

.ys-bd-search .ys-bd-sop-sel {
    width: 86px;
}

.ys-bd-sop {
    display: inline-flex;
    gap: 2px;
}

.ys-bd-sop .ys-bd-check {
    margin: 0 8px 0 0;
    font-size: 13px;
}

.ys-bd-sop .ys-bd-check input {
    width: 16px;
    height: 16px;
}

/* ---------- 글보기 ---------- */
.ys-bd-view {
    margin: 20px 0 48px;
}

.ys-bd-vhead {
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--bd-line);
}

.ys-bd-vhead .ys-bd-ca {
    margin-bottom: 10px;
}

.ys-bd .ys-bd-vtitle {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: var(--bd-navy);
}

.ys-bd-vtitle .ys-bd-ico svg {
    width: 20px;
    height: 20px;
}

.ys-bd-vmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    font-size: 14px;
    color: var(--bd-muted);
}

.ys-bd-vmeta > span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 10px;
    background: var(--bd-field);
    vertical-align: -1px;
}

.ys-bd-vmeta .ys-bd-vname,
.ys-bd-vmeta .ys-bd-vname span {
    font-weight: 600;
    color: var(--bd-text) !important;
}

.ys-bd-vmeta .ys-bd-vtools {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.ys-bd-vmeta .ys-bd-vtools::before {
    display: none !important;
}

.ys-bd-vmeta img {
    vertical-align: middle;
}

.ys-bd-ip {
    font-size: 12px;
    font-weight: 400;
    color: #a3acb9;
}

/* 상담 정보 (연락처, 나이 등) */
.ys-bd-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
    padding: 0;
    list-style: none;
}

.ys-bd-info li {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bd-soft);
}

.ys-bd-info span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--bd-muted);
}

.ys-bd-info strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--bd-navy);
}

/* 첨부파일 · 링크 */
.ys-bd-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ys-bd-files a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 11px 14px;
    border: 1px solid var(--bd-line);
    border-radius: 12px;
    font-size: 14px;
    text-decoration: none !important;
    transition: border-color .15s;
}

.ys-bd-files a:hover {
    border-color: var(--bd-blue);
}

.ys-bd-files svg {
    width: 17px;
    height: 17px;
    color: var(--bd-blue);
}

.ys-bd-fname {
    font-weight: 600;
    color: var(--bd-navy);
    overflow-wrap: anywhere;
}

.ys-bd-fmeta {
    font-size: 12px;
    color: var(--bd-muted);
}

/* 본문 */
.ys-bd-vbody {
    min-height: 120px;
    padding: 28px 0 32px;
    font-size: 16px;
    line-height: 1.8;
    color: #2f3a4b;
    overflow-wrap: anywhere;
}

/* style.css 의 td, p { font-size:9pt } 대신 본문 글자 크기를 따름 (글 안에서 직접 정한 크기는 그대로) */
.ys-bd-vbody p,
.ys-bd-vbody td,
.ys-bd-vbody li,
.ys-bd-cbody p,
.ys-bd-cbody td {
    font-size: inherit;
    color: inherit;
}

.ys-bd-vbody img,
.ys-bd-vbody video,
.ys-bd-vbody iframe {
    max-width: 100% !important;
    height: auto !important;
}

.ys-bd-vbody table {
    max-width: 100%;
}

.ys-bd-pre {
    white-space: pre-line;
}

.ys-bd-vimg {
    margin: 0 0 16px;
}

.ys-bd-vimg img {
    display: block;
    border-radius: 12px;
    cursor: zoom-in;
}

.ys-bd-good {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 32px 0 0;
}

.ys-bd-sign {
    margin: 0 0 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bd-soft);
    font-size: 14px;
}

/* 이전글 · 다음글 */
.ys-bd-prevnext {
    margin: 28px 0 0;
    border-top: 1px solid var(--bd-line);
}

.ys-bd-prevnext a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--bd-line);
    text-decoration: none !important;
}

.ys-bd-prevnext span {
    flex: none;
    width: 52px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bd-muted);
}

.ys-bd-prevnext strong {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    color: var(--bd-navy);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ys-bd-prevnext a:hover strong {
    color: var(--bd-blue-dk);
}

.ys-bd-vfoot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 20px 0 0;
}

/* ---------- 댓글 ---------- */
.ys-bd-comments {
    margin: 8px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--bd-line);
}

.ys-bd .ys-bd-ctitle {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--bd-navy);
}

.ys-bd-ctitle b {
    color: var(--bd-blue);
}

.ys-bd-citem {
    margin: 0 0 10px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bd-soft);
}

.ys-bd-citem.is-reply {
    position: relative;
    background: #fff;
    border: 1px solid var(--bd-line);
}

.ys-bd-chead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0 0 6px;
}

.ys-bd-cname,
.ys-bd-cname span,
.ys-bd-cname a {
    font-size: 15px;
    font-weight: 700;
    color: var(--bd-navy) !important;
}

.ys-bd-cdate {
    font-size: 13px;
    color: var(--bd-muted);
}

.ys-bd-cact {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    margin-left: auto;
    font-size: 13px;
}

.ys-bd-cact a {
    font-weight: 600;
    color: var(--bd-muted) !important;
    text-decoration: none !important;
}

.ys-bd-cact a:hover {
    color: var(--bd-blue-dk) !important;
}

.ys-bd-cact img {
    vertical-align: middle;
    cursor: pointer;
}

.ys-bd-cbody {
    font-size: 15px;
    line-height: 1.75;
    color: #2f3a4b;
    overflow-wrap: anywhere;
}

.ys-bd-cbody img {
    max-width: 100%;
    height: auto;
}

.ys-bd-csecret {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bd-muted);
    vertical-align: 1px;
}

/* 댓글 쓰기 */
.ys-bd-cform {
    margin: 12px 0 0;
    padding: 16px;
    border: 1px solid var(--bd-line);
    border-radius: 16px;
    background: #fff;
}

.ys-bd-citem .ys-bd-cform {
    margin-top: 14px;
}

.ys-bd-cguest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.ys-bd-cguest .ys-bd-input {
    flex: 1 1 160px;
    min-width: 0;
}

.ys-bd-cform textarea.ys-bd-input {
    min-height: 96px;
}

.ys-bd-cfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--bd-muted);
}

.ys-bd-cfoot .ys-bd-btn {
    margin-left: auto;
}

.ys-bd-cfoot a,
.ys-bd-cfoot span[onclick] {
    font-weight: 600;
    color: var(--bd-text) !important;
    cursor: pointer;
}

/* ---------- 글쓰기 ---------- */
.ys-bd-write {
    max-width: 860px;
    margin: 24px auto 48px;
}

.ys-bd .ys-bd-wtitle {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bd-navy);
}

.ys-bd-wdesc {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--bd-muted);
}

.ys-bd-form {
    padding: 8px 28px;
    border: 1px solid var(--bd-line);
    border-radius: 18px;
    background: #fff;
}

.ys-bd-field {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bd-line);
}

.ys-bd-field:last-child {
    border-bottom: 0;
}

.ys-bd-field.is-top {
    align-items: start;
}

.ys-bd-field.is-top > .ys-bd-label {
    padding-top: 11px;
}

.ys-bd-field.is-wide {
    grid-template-columns: minmax(0, 1fr);
}

.ys-bd-label {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bd-navy);
}

.ys-bd-req::after {
    content: " *";
    color: var(--bd-blue);
}

.ys-bd-ctrl {
    min-width: 0;
}

.ys-bd-ctrl .ys-bd-input {
    width: 100%;
}

.ys-bd-ctrl .ys-bd-input.is-short {
    width: 220px;
}

.ys-bd-ctrl .ys-bd-input.is-tiny {
    width: 90px;
}

.ys-bd-help {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--bd-muted);
}

.ys-bd-unit {
    margin-left: 6px;
    font-size: 14px;
    color: var(--bd-text);
}

.ys-bd-count {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--bd-muted);
    text-align: right;
}

/* 첨부파일 칸 (자바스크립트가 줄을 더함) */
.ys-bd-filebtns {
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
}

.ys-bd-files-tbl {
    width: 100%;
    border-collapse: collapse;
}

.ys-bd-files-tbl td {
    padding: 0 0 8px;
    font-size: 13px;
    color: var(--bd-muted);
}

.ys-bd-files-tbl input[type=file],
.ys-bd-files-tbl input[type=text] {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 4px;
    padding: 9px 10px;
    border: 1px solid var(--bd-field);
    border-radius: 10px;
    background: #fff !important;
    font-size: 14px;
}

.ys-bd-files-tbl input[type=text] {
    height: 40px;
}

.ys-bd-files-tbl input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0 4px 0 8px;
    vertical-align: -3px;
}

.ys-bd-files-tbl a {
    font-weight: 600;
}

/* 자동등록방지 (reCAPTCHA) */
.ys-bd-captcha {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
}

.ys-bd-captcha:empty {
    display: none;
}

.ys-bd-wbtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 24px 0 0;
}

.ys-bd-wbtns .ys-bd-btn {
    min-width: 140px;
}

/* 에디터 (cheditor) 가 좁은 화면에서 넘치지 않도록 */
.ys-bd-write .ys-bd-editor {
    max-width: 100%;
}

.ys-bd-write .ys-bd-editor table {
    max-width: 100%;
}

/* ---------- 비밀글 패스워드 (skin/member/basic/password.skin.php) ---------- */
.ys-bd-pw {
    max-width: 440px;
    margin: 56px auto;
    padding: 0 16px;
}

.ys-bd-pw-card {
    padding: 36px 28px 28px;
    border: 1px solid var(--bd-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(29, 43, 68, .08);
    text-align: center;
}

.ys-bd-pw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 0 14px;
    border-radius: 50%;
    background: #e3f4fc;
    color: var(--bd-blue-dk);
}

.ys-bd-pw-icon svg {
    width: 26px;
    height: 26px;
}

.ys-bd .ys-bd-pw-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--bd-navy);
}

.ys-bd .ys-bd-pw-desc {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bd-muted);
}

.ys-bd-pw-row {
    position: relative;
    display: flex;
    gap: 8px;
}

.ys-bd-pw-row .ys-bd-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    font-size: 16px;
}

.ys-bd-pw-row .ys-bd-btn {
    flex: none;
    min-height: 50px;
    padding: 8px 22px;
}

.ys-bd-pw-foot {
    margin: 18px 0 0;
    font-size: 13px;
}

.ys-bd-pw-foot a {
    font-weight: 600;
    color: var(--bd-muted) !important;
}

/* CapsLock 안내 (js/capslock.js) */
.ys-bd-pw #capslock_info {
    position: absolute;
    left: 0;
    top: 54px;
    z-index: 2;
}

/* ---------- 온라인상담 (skin/board/telephone, 미래e솔루션 MW 스킨) ----------
   스킨의 style.common.css 는 그대로 두고, 바꾼 부분만 여기서 */
table.ys-bd-mw {
    width: 100%;
    border-collapse: collapse;
}

table.ys-bd-mw > tbody > tr > td.ys-bd {
    padding: 0;
}

.ys-bd-vtable {
    width: 100%;
    border-collapse: collapse;
}

.ys-bd-vtable > tbody > tr > td {
    padding: 0;
    border: 0;
}

.ys-bd-vtable > tbody > tr > td.ys-bd-vbody {
    padding: 28px 0 32px;
}

.ys-bd-vtable > tbody > tr > td.ys-bd-vadmin {
    padding: 12px;
    border: 1px dashed var(--bd-field);
}

/* 예전 구분선 줄 (umz 주소 등 쓰지 않는 기능에만 남아 있음) */
.ys-bd-vtable td[height="1"] {
    display: none;
}

.ys-bd-vadmin {
    margin: 16px 0 0;
    padding: 12px;
    border: 1px dashed var(--bd-field);
    border-radius: 14px;
    background: #fbfcfd;
}

.ys-bd-vadmin img {
    vertical-align: middle;
}


.ys-bd-view .ys-bd-vbody #view_content {
    min-height: 80px;
}

/* 지금 보고 있는 글 (style.common.css 의 주황색 대신) */
#mw_basic.ys-bd .mw_basic_list_num_select {
    font-weight: 700;
    color: var(--bd-blue-dk);
}

.ys-bd-cphoto {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ys-bd .ys-bd-cempty {
    margin: 0 0 12px;
    padding: 18px;
    border-radius: 14px;
    background: var(--bd-soft);
    font-size: 14px;
    color: var(--bd-muted);
    text-align: center;
}

.ys-bd-cgood {
    margin: 8px 0 0;
    font-size: 13px;
    text-align: right;
}

/* style.common.css 의 #mw_basic #mw_basic_comment_write_form 대신 */
#mw_basic.ys-bd #mw_basic_comment_write_form {
    margin: 12px 0 0;
    padding: 16px;
    border: 1px solid var(--bd-line);
    border-radius: 16px;
    background: #fff;
}

/* 글쓰기 표 (MW 스킨): 왼쪽 항목명, 오른쪽 입력칸 */
.ys-bd-wtable {
    width: 100%;
    border-collapse: collapse;
}

.ys-bd-wtable > tbody > tr > td {
    padding: 16px 0;
    border-top: 1px solid var(--bd-line);
    font-size: 14px;
    color: var(--bd-text);
    vertical-align: top;
}

.ys-bd-wtable > tbody > tr:first-child > td {
    border-top: 0;
}

.ys-bd-wtable td[height="1"],
.ys-bd-wtable td.mw_basic_line_color {
    display: none;
}

/* style.common.css 의 #mw_basic .mw_basic_write_title 보다 우선 */
#mw_basic.ys-bd .ys-bd-wtable > tbody > tr > td.mw_basic_write_title {
    width: 136px;
    height: auto;
    padding-top: 27px;
    padding-left: 0;
    padding-right: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bd-navy);
}

#mw_basic.ys-bd .ys-bd-wtable > tbody > tr > td.mw_basic_write_title.is-top {
    vertical-align: top;
    padding-top: 27px;
}

.ys-bd-wtable label {
    margin: 0;
    font-weight: 700;
}

#mw_basic.ys-bd .ys-bd-wtable .mw_basic_write_content,
#mw_basic.ys-bd .ys-bd-wtable .mw_basic_write_content select,
#mw_basic.ys-bd .ys-bd-wtable .mw_basic_write_content a {
    font-size: 14px;
    color: var(--bd-text);
}

.ys-bd-wtable input[type=text],
.ys-bd-wtable input[type=tel],
.ys-bd-wtable input[type=password],
.ys-bd-wtable input:not([type]),
.ys-bd-wtable select,
.ys-bd-wtable textarea {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--bd-field);
    border-radius: 10px;
    background-color: #fff;
    background-image: none !important;
    color: var(--bd-navy);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}

.ys-bd-wtable textarea {
    height: auto;
    min-height: 200px;
    padding: 12px;
    line-height: 1.7;
    resize: vertical;
}

.ys-bd-wtable select {
    width: auto !important;
    min-width: 200px;
}

.ys-bd-wtable input.is-short {
    width: 240px !important;
}

.ys-bd-wtable input.is-tiny {
    display: inline-block;
    width: 90px !important;
}

.ys-bd-wtable input:focus,
.ys-bd-wtable select:focus,
.ys-bd-wtable textarea:focus {
    border-color: var(--bd-blue);
    box-shadow: 0 0 0 3px rgba(41, 169, 225, .18);
    outline: none;
}

.ys-bd-wtable input::placeholder,
.ys-bd-wtable textarea::placeholder {
    color: #a3acb9;
}

.ys-bd-wtable input[type=radio],
.ys-bd-wtable input[type=checkbox] {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    accent-color: var(--bd-navy);
}

.ys-bd-wtable .ys-bd-files-tbl input[type=file],
.ys-bd-wtable .ys-bd-files-tbl input[type=text] {
    height: auto;
}

.ys-bd-wtable .ys-bd-files-tbl input[type=checkbox] {
    display: inline-block;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 767px) {
    .ys-bd {
        font-size: 14px;
    }

    .ys-bd-top {
        margin: 14px 0 10px;
    }

    /* 목록: 표 대신 카드처럼 한 줄씩 */
    .ys-bd-list,
    .ys-bd-list tbody {
        display: block;
    }

    .ys-bd-list {
        border-top-width: 1px;
        border-top-color: var(--bd-line);
    }

    .ys-bd-list thead {
        display: none;
    }

    .ys-bd-list tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 14px 4px;
        border-bottom: 1px solid var(--bd-line);
    }

    .ys-bd-list td {
        display: block;
        width: auto !important;
        padding: 0;
        border: 0;
        font-size: 13px;
        text-align: left;
    }

    .ys-bd-list td.ys-bd-num {
        display: none;
    }

    .ys-bd-list tr.is-notice td.ys-bd-num {
        display: block;
        order: -2;
        margin: 0 8px 6px 0;
    }

    .ys-bd-list td.ys-bd-chk {
        order: -3;
        margin: 0 10px 4px 0;
    }

    /* 1줄: (체크박스) (공지) 제목, 2줄: 글쓴이 · 날짜 · 조회 */
    .ys-bd-list td.ys-bd-subj {
        flex: 1 1 auto;
        min-width: 0;
        order: -1;
        margin: 0 0 6px;
    }

    .ys-bd-list tbody tr::after {
        content: "";
        order: -1;
        flex-basis: 100%;
        height: 0;
    }

    .ys-bd-list td.ys-bd-chk {
        margin-bottom: 6px;
    }

    .ys-bd .ys-bd-link {
        font-size: 15px;
    }

    .ys-bd-list td.ys-bd-name {
        max-width: 45%;
    }

    .ys-bd-list td.ys-bd-state {
        margin: 0 8px 0 0;
    }

    .ys-bd-list td.ys-bd-state + td.ys-bd-name,
    .ys-bd-list td.ys-bd-date,
    .ys-bd-list td.ys-bd-hit,
    .ys-bd-list td.ys-bd-good {
        display: flex;
        align-items: center;
    }

    .ys-bd-list td.ys-bd-date::before,
    .ys-bd-list td.ys-bd-hit::before,
    .ys-bd-list td.ys-bd-good::before {
        content: "";
        width: 1px;
        height: 10px;
        margin: 0 8px;
        background: var(--bd-field);
    }

    .ys-bd-list .ys-bd-m {
        display: inline;
        margin-right: 3px;
    }

    .ys-bd-list td.ys-bd-empty {
        flex: 1 1 100%;
        padding: 40px 0;
        text-align: center;
    }

    .ys-bd-actions {
        margin-top: 14px;
    }

    .ys-bd-page {
        margin-top: 20px;
    }

    .ys-bd-page a,
    .ys-bd-page strong {
        min-width: 34px;
        height: 34px;
        padding: 0 6px;
    }

    .ys-bd-search {
        padding: 12px;
    }

    /* 1줄: 검색 대상 + and/or, 2줄: 검색어 + 버튼 */
    .ys-bd-search > select[name=sfl] {
        order: 1;
        flex: 1 1 auto;
        width: auto;
    }

    .ys-bd-search .ys-bd-sop,
    .ys-bd-search .ys-bd-sop-sel {
        order: 2;
    }

    .ys-bd-search .ys-bd-input {
        order: 3;
        flex: 1 1 60%;
    }

    .ys-bd-search .ys-bd-btn {
        order: 4;
    }

    /* 글보기 */
    .ys-bd-view {
        margin: 14px 0 32px;
    }

    .ys-bd .ys-bd-vtitle {
        font-size: 21px;
    }

    .ys-bd-vmeta {
        font-size: 13px;
    }

    .ys-bd-vmeta .ys-bd-vtools {
        flex-basis: 100%;
        margin: 8px 0 0;
    }

    .ys-bd-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ys-bd-vbody {
        padding: 22px 0 26px;
        font-size: 15px;
    }

    .ys-bd-vfoot {
        justify-content: flex-start;
    }

    .ys-bd-citem {
        padding: 14px;
    }

    /* 글쓰기 */
    .ys-bd-write {
        margin: 16px auto 32px;
    }

    .ys-bd .ys-bd-wtitle {
        font-size: 22px;
    }

    .ys-bd-form {
        padding: 4px 16px;
        border-radius: 16px;
    }

    .ys-bd-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 14px 0;
    }

    .ys-bd-field.is-top > .ys-bd-label {
        padding-top: 0;
    }

    .ys-bd-ctrl .ys-bd-input.is-short {
        width: 100%;
    }

    .ys-bd-wbtns .ys-bd-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .ys-bd-wtable,
    .ys-bd-wtable > tbody,
    .ys-bd-wtable > tbody > tr,
    .ys-bd-wtable > tbody > tr > td {
        display: block;
        width: auto !important;
    }

    #mw_basic.ys-bd .ys-bd-wtable > tbody > tr > td.mw_basic_write_title,
    #mw_basic.ys-bd .ys-bd-wtable > tbody > tr > td.mw_basic_write_title.is-top {
        padding: 14px 0 6px;
    }

    .ys-bd-wtable > tbody > tr > td {
        padding: 0 0 14px;
        border-top: 0;
    }

    .ys-bd-wtable input.is-short {
        width: 100% !important;
    }

    .ys-bd-wtable select {
        width: 100% !important;
        min-width: 0;
    }

    .ys-bd-wtable textarea {
        min-height: 180px;
    }

    .ys-bd-pw {
        margin: 32px auto;
    }

    .ys-bd-pw-card {
        padding: 28px 20px 22px;
    }
}