/* 기본 */ #bo_list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 15px; width: 100%; box-sizing: border-box; } #bo_list > * { box-sizing: border-box; min-width: 0; } span.cat-cnt, a.tags-txt > span { font-size: .9em; margin-left: 4px; } /* 밑줄 라인 */ span.line { display: inline; padding: 0 0.04em; } .line.yellow { background: linear-gradient(180deg, transparent 60%, rgba(255, 255, 0, 0.6) 60%); } .line.pink { background: linear-gradient(180deg, transparent 60%, rgba(255, 105, 180, 0.5) 60%); } .line.blue { background: linear-gradient(180deg, transparent 60%, rgba(135, 206, 250, 0.5) 60%); } .line.marker { background: linear-gradient(transparent 60%, #fff475 60%); background-size: 100% 100%; filter: blur(0.4px); } .line.underline { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; } /* 카테고리 있을 때 */ #bo_list:has(#bo_cate) > #bo_cate { flex: 0 0 calc(30% - 7.5px); max-width: calc(30% - 7.5px); } #bo_list:has(#bo_cate) > .board-admin, #bo_list:has(#bo_cate) > form { flex: 0 0 calc(70% - 7.5px); max-width: calc(70% - 7.5px); } /* 카테고리 없을 때 */ #bo_list:not(:has(#bo_cate)) > .board-admin, #bo_list:not(:has(#bo_cate)) > form { flex: 0 0 100%; max-width: 100%; } /* 카테고리 기본 스타일 정리 */ ul#bo_cate_ul {list-style:none;margin:0;padding:0} #bo_cate_ul li a{ position: relative; text-decoration: none; letter-spacing: -0.1em; line-height: 25px; display: block; cursor: pointer; padding: .5em .7em; font-size: .9rem; } #bo_cate_on { background: #000; border: 1px solid #000; color:#fff; } [data-theme=dark] #bo_cate_on {background: #8e49aa; } #bo_cate_ul li { background: #efefef; border: 1px solid #efefef; border-radius: 2px; margin-bottom: 5px; } [data-theme=dark] #bo_cate_ul li { background: #000; border: 1px solid #222; } #bo_cate li { } a.cat-list.side { font-size: 38px; font-weight: 200; line-height: 1.1; margin: 0; letter-spacing: -1px; z-index: 5; text-transform: uppercase; } /* 모바일 */ @media (max-width: 768px) { #bo_list > #bo_cate, #bo_list > .board-admin, #bo_list > form { flex: 0 0 100% !important; max-width: 100% !important; } } .board-admin { position: absolute; right: 1px; top: -50px; } .board-admin .btn_admin { display: inline-block; width: 38px; height: 38px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 50%; position: relative; overflow: hidden; text-indent: -8000px; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; } .board-admin .btn_admin::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; text-indent: 0; } .board-admin .btn_admin:hover { background-color: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.2); } .board-admin .btn_admin:focus { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 2px; } .guest-edit-form { background: #f9f9f9; padding: 15px; border: 1px solid #ddd; margin: 10px 0; border-radius: 5px; } .guest-edit-form .tbl_frm01 > div { margin-bottom: 15px; } .guest-edit-form label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } .guest-edit-form input[type="text"]:read-only { background-color: #f5f5f5 !important; color: #666; cursor: not-allowed; } .guest-edit-form input[type="password"], .guest-edit-form textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; } .guest-edit-form .btn_confirm { } .guest-edit-form .btn_cancel, .guest-edit-form .btn_submit { padding: 8px 20px; border: none; border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: bold; } .guest-edit-form .btn_cancel { background: #6c757d; color: white; margin-right: 10px; } .guest-edit-form .btn_cancel:hover { background: #5a6268; } .guest-edit-form .btn_submit { background: #007bff; color: white; } .guest-edit-form .btn_submit:hover { background: #0069d9; } .guest-edit-form .btn_submit:disabled { background: #cccccc; cursor: not-allowed; } /* view_comment.skin.php 또는 별도 CSS 파일에 */ /* * GNUpress comment skin → WordPress comment design match * 대상: view_comment.skin.php 동봉 수정본 */ #bo_vc, #bo_vc_w { width: 100%; max-width: 880px; box-sizing: border-box; } #bo_vc *, #bo_vc_w * { box-sizing: border-box; max-width:100%; } #bo_vc .comments-title, #bo_vc_w .comment-reply-title { margin: 0 0 20px; font-size: 1.35rem; line-height: 1.35; } #bo_vc .comments-title .g5-comment-count { font-weight: inherit; } /* 전체 댓글 스레드 */ #bo_vc .comment-parent, #bo_vc .comment-thread { margin: 0; padding: 0; } #bo_vc article.comment-parent { position: relative; overflow: visible; margin-top: 100px; margin-bottom: 30px; padding: 0 0 10px; border: 1px solid #000; border-radius: 4px; background: #fff; } /* 부모 말풍선 꼬리 */ #bo_vc article.comment-parent::before, #bo_vc article.comment-parent::after { content: ""; position: absolute; left: 12px; width: 0; height: 0; border-style: solid; } #bo_vc article.comment-parent::before { top: -12px; border-width: 0 10px 12px; border-color: transparent transparent #000; } #bo_vc article.comment-parent::after { top: -10px; z-index: 1; border-width: 0 10px 12px; border-color: transparent transparent #fff; } /* 게시글 작성자 댓글 강조 */ #bo_vc article.comment-parent.bypostauthor { border-width: 2px; border-color: #555; background: #efefef; } #bo_vc article.comment-parent.bypostauthor::after { top: -9px; border-color: transparent transparent #efefef; } #bo_vc .g5-comment-item { position: relative; min-width: 0; } /* 부모 댓글 본체 */ #bo_vc .comment-main { min-height: 70px; padding: 15px; } #bo_vc .comment-main > .comment-body { padding-top: 30px; } #bo_vc .comment-main > .comment-avatar { position: absolute; top: -60px; left: 0; z-index: 12; display: block; width: 45px; height: 45px; border: 1px solid #000; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } /* 부모 댓글 메타는 말풍선 바깥 */ #bo_vc .comment-main > .comment-meta { position: absolute; top: -60px; left: 55px; right: 10px; z-index: 10; display: flex; align-items: center; flex-wrap: nowrap; min-height: 45px; gap: 8px; white-space: nowrap; } #bo_vc .comment-meta h1 { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #bo_vc .comment-meta > .member, #bo_vc .comment-meta > .guest { margin: 0; color: #000; font-size: 13px; font-weight: 700; line-height: 1.4; } #bo_vc .comment-main > .comment-meta > .member, #bo_vc .comment-main > .comment-meta > .guest { font-size: 1rem; } #bo_vc .comment-meta .bo_vc_hdinfo { margin: 0; color: #666; font-size: 11px; line-height: 1.4; white-space: nowrap; } #bo_vc .comment-main > .comment-meta .bo_vc_hdinfo { font-size: .9rem; } #bo_vc .comment-meta time { color: inherit; } #bo_vc .reply-cmt { display: none; } /* 실제 댓글 본문 */ #bo_vc .comment-body.comment-content { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; line-height: 1.65; overflow-wrap: anywhere; } #bo_vc .comment-body.comment-content p, #bo_vc .comment-body.comment-content .wr_content { margin: .4em 0; } #bo_vc .comment-body.comment-content img { max-width: 100%; height: auto; } /* 비밀댓글 본문 */ #bo_vc .comment-body.comment-content.secret { margin: 0; padding: 12px; border: 1px solid var(--g5-secret-comment-border, #d8cbea); border-radius: 5px; background: var(--g5-secret-comment-bg, #f6f2fb); } /* 자식 댓글 */ #bo_vc .comment-reply { position: relative; min-height: 70px; margin: 12px 15px; padding: 12px; border: 1px solid #ddd; border-radius: 5px; background: #fff; } #bo_vc .comment-reply.bypostauthor { background: #efefef; } #bo_vc .comment-reply.comment-depth-1 { margin-left: 15px !important; } #bo_vc .comment-reply.comment-depth-2 { margin-left: 35px !important; } #bo_vc .comment-reply.comment-depth-3 { margin-left: 55px !important; } #bo_vc .comment-reply > .comment-avatar { position: absolute; top: 12px; left: 12px; display: block; width: 35px; height: 35px; border: 1px solid #000; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } #bo_vc .comment-reply > .comment-meta { position: static; display: flex; align-items: center; flex-wrap: nowrap; min-height: 43px; margin: 0 0 8px; padding: 0 150px 8px 45px; gap: 8px; border-bottom: 1px solid #eee; white-space: nowrap; } #bo_vc .comment-reply > .comment-body { padding-top: 2px; } /* 답변·수정·삭제 */ #bo_vc .bo_vc_act.comment-actions { position: absolute; right: 11px; top: 9px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; list-style: none; } #bo_vc .bo_vc_act.comment-actions li { margin: 0; padding: 0; } #bo_vc .bo_vc_act.comment-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background: transparent; color: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; } #bo_vc .bo_vc_act.comment-actions a:hover, #bo_vc .bo_vc_act.comment-actions a:focus { border-color: #333; background: #333; color: #fff; } /* AJAX 편집·삭제·비밀댓글 폼 */ #bo_vc [id^="edit_"], #bo_vc [id^="reply_"], #bo_vc [id^="delete_"], #bo_vc [id^="secret_view_"] { display: block; } #bo_vc .guest-edit-form, #bo_vc .guest-delete-form, #bo_vc .guest-secret-form { margin: 12px 0 0; } /* 댓글 작성 폼 */ #bo_vc_w { margin-top: 40px; } #bo_vc_w .comment-form { position: relative; display: block; width: 100%; margin: 0; } #bo_vc_w .g5-comment-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "comment comment comment" "secret secret secret" "author password submit"; gap: 9px; width: 100%; } #bo_vc_w .comment-form-comment { grid-area: comment; position: relative; } #bo_vc_w .comment-form-comment label { display: block; margin-bottom: 8px; color: #333; font-size: 16px; font-weight: 600; } #bo_vc_w #cm_content { display: block; width: 100%; min-height: 120px; margin: 0; padding: 12px; border: 1px solid #555; border-radius: 4px; background: #fff; color: inherit; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; } #bo_vc_w #cm_content:focus { outline: none; border-color: rgba(96, 38, 158, .94); box-shadow: 0 0 0 1px rgba(96, 38, 158, .1); } #bo_vc_w #char_cnt { grid-area: comment; z-index: 2; justify-self: end; align-self: start; margin: 4px 8px 0 0; color: #666; font-size: 11px; font-weight: 400; pointer-events: none; } #bo_vc_w .comment-form-secret { grid-area: secret; margin: 0; } #bo_vc_w .comment-form-secret label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; } #bo_vc_w .comment-form-secret input[type="checkbox"] { width: 16px; height: 16px; margin: 0; } #bo_vc_w .comment-secret-notice { margin-top: 5px; color: #666; font-size: 12px; } #bo_vc_w .comment-form-fields { display: contents; margin: 0; padding: 0; list-style: none; } #bo_vc_w .comment-form-author { grid-area: author; } #bo_vc_w .comment-form-password { grid-area: password; } #bo_vc_w .form-submit { grid-area: submit; } #bo_vc_w .comment-form-author, #bo_vc_w .comment-form-password { display: flex; min-width: 0; flex-direction: column; } #bo_vc_w .comment-form-author label, #bo_vc_w .comment-form-password label { min-height: 20px; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; } #bo_vc_w .comment-form-author input, #bo_vc_w .comment-form-password input { width: 100%; height: 44px; padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; background: #fff; color: inherit; font-size: 14px; } #bo_vc_w .comment-form-author input:focus, #bo_vc_w .comment-form-password input:focus { outline: none; border-color: #60269e; box-shadow: 0 0 0 3px rgba(0, 124, 186, .1); } #bo_vc_w .pw-description { margin-top: 4px; color: #666; font-size: 12px; font-style: italic; line-height: 1.4; } #bo_vc_w .form-submit { display: flex; align-items: flex-start; gap: 6px; } #bo_vc_w .form-submit .submit-button { width: 100%; height: 44px; padding: 10px 16px; border: 0; border-radius: 6px; background: #111; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } #bo_vc_w .form-submit .submit-button:hover, #bo_vc_w .form-submit .submit-button:focus { background: #000; } #bo_vc_w .form-submit .scd_cancelinput { border: 1px solid #ccc; background: #f7f7f7; color: #555; } /* 로그인 사용자 프로필 */ #bo_vc_w .g5-comment-user-profile.is-guest { display: none; } #bo_vc_w .g5-comment-user-profile.is-member { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; } #bo_vc_w .current-avatar { display: block; width: 50px; height: 50px; flex: 0 0 50px; border: 3px solid #007cba; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } #bo_vc_w .g5-comment-user-profile .user-name { color: #333; font-size: 16px; font-weight: 600; } /* 회원 작성 폼은 워드프레스 로그인 상태와 같은 말풍선 */ #bo_vc_w .comment-form.is-member .g5-comment-form-grid { grid-template-columns: 1fr; grid-template-areas: "comment" "secret" "submit"; } #bo_vc_w .comment-form.is-member .comment-form-comment, #bo_vc_w .comment-form.is-member .comment-form-secret, #bo_vc_w .comment-form.is-member .form-submit { margin-left: 60px; } #bo_vc_w .comment-form.is-member .comment-form-comment label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } #bo_vc_w .comment-form.is-member #cm_content { padding: 16px 20px; border: 2px solid #e1e5e9; border-radius: 18px 18px 18px 4px; background: #f8f9fa; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } #bo_vc_w .comment-form.is-member .comment-form-comment::after { content: ""; position: absolute; top: 40px; left: -12px; width: 0; height: 0; border-width: 12px 12px 12px 0; border-style: solid; border-color: transparent #e1e5e9 transparent transparent; } #bo_vc_w .comment-form.is-member #cm_content:focus { border-color: rgba(96, 38, 158, .94); background: #fff; box-shadow: 0 4px 20px rgba(96, 38, 158, .15); transform: translateY(-1px); } #bo_vc_w .comment-form.is-member .form-submit { justify-content: flex-end; } #bo_vc_w .comment-form.is-member .form-submit .submit-button { width: auto; min-width: 120px; padding: 12px 24px; border-radius: 20px; background: linear-gradient(135deg, #007cba 0%, #005a87 100%); box-shadow: 0 2px 10px rgba(0, 124, 186, .2); } #bo_vc_w .comment-form.is-member .form-submit .submit-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 124, 186, .3); } /* 반응형 */ @media (max-width: 768px) { #bo_vc article.comment-parent { margin-top: 82px; } #bo_vc .comment-main { padding: 12px; } #bo_vc .comment-main > .comment-avatar { top: -52px; width: 40px; height: 40px; } #bo_vc .comment-main > .comment-meta { top: -52px; left: 48px; min-height: 40px; gap: 6px; } #bo_vc .comment-meta > .member, #bo_vc .comment-meta > .guest { font-size: 12px; } #bo_vc .comment-meta .bo_vc_hdinfo { max-width: 125px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; } #bo_vc .comment-reply { margin-right: 10px; padding: 10px; } #bo_vc .comment-reply.comment-depth-1 { margin-left: 10px !important; } #bo_vc .comment-reply.comment-depth-2 { margin-left: 24px !important; } #bo_vc .comment-reply.comment-depth-3 { margin-left: 38px !important; } #bo_vc .comment-reply > .comment-avatar { top: 10px; left: 10px; width: 30px; height: 30px; } #bo_vc .comment-reply > .comment-meta { min-height: 38px; padding-left: 38px; } #bo_vc .bo_vc_act.comment-actions a { padding: 4px 6px; font-size: 10px; } #bo_vc_w .g5-comment-form-grid { grid-template-columns: 1fr; grid-template-areas: "comment" "secret" "author" "password" "submit"; gap: 7px; } #bo_vc_w #cm_content { min-height: 100px; } #bo_vc_w .comment-form.is-member .comment-form-comment, #bo_vc_w .comment-form.is-member .comment-form-secret, #bo_vc_w .comment-form.is-member .form-submit { margin-left: 0; } #bo_vc_w .comment-form.is-member .comment-form-comment::after { display: none; } #bo_vc_w .form-submit { flex-wrap: wrap; } } @media (max-width: 420px) { #bo_vc .comment-main > .comment-meta { right: 0; } #bo_vc .comment-meta .bo_vc_hdinfo { max-width: 92px; } #bo_vc .comment-reply.comment-depth-2, #bo_vc .comment-reply.comment-depth-3 { margin-left: 10px !important; } } /* ========================================================= * 댓글 내부 답글·회원 수정 폼 * ========================================================= */ #bo_vc .g5-comment-inline-slot { display: block; clear: both; width: 100%; } #bo_vc .g5-comment-inline-slot:empty { display: none; } #bo_vc .g5-comment-form { position: relative; display: block; width: 100%; margin: 0; } #bo_vc .g5-comment-form.is-replying, #bo_vc .g5-comment-form.is-editing { margin: 14px 0 2px; padding: 16px; border: 1px solid #ddd; border-radius: 5px; background: #f8f9fa; } #bo_vc .g5-comment-form-mode-title { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid #ddd; color: #222; font-size: 15px; font-weight: 700; line-height: 1.4; } #bo_vc .g5-comment-form-mode-title[hidden] { display: none !important; } #bo_vc .g5-comment-form .g5-comment-form-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "comment comment" "secret secret" "author password" "submit submit"; gap: 10px; } #bo_vc .g5-comment-form .comment-form-comment { position: relative; grid-area: comment; } #bo_vc .g5-comment-form .comment-form-comment label { display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; } #bo_vc .g5-comment-form #cm_content { display: block; width: 100%; min-height: 110px; margin: 0; padding: 12px; border: 1px solid #555; border-radius: 4px; background: #fff; color: inherit; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; } #bo_vc .g5-comment-form #cm_content:focus { outline: none; border-color: #60269e; box-shadow: 0 0 0 2px rgba(96, 38, 158, .1); } #bo_vc .g5-comment-form #char_cnt { grid-area: comment; z-index: 2; justify-self: end; align-self: start; margin: 4px 8px 0 0; color: #666; font-size: 11px; font-weight: 400; pointer-events: none; } #bo_vc .g5-comment-form .comment-form-secret { grid-area: secret; margin: 0; } #bo_vc .g5-comment-form .comment-form-secret label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; } #bo_vc .g5-comment-form .comment-secret-notice { display: block; margin-top: 5px; color: #666; font-size: 12px; } #bo_vc .g5-comment-form .comment-form-fields { display: contents; margin: 0; padding: 0; list-style: none; } #bo_vc .g5-comment-form .comment-form-author { grid-area: author; } #bo_vc .g5-comment-form .comment-form-password { grid-area: password; } #bo_vc .g5-comment-form .form-submit { grid-area: submit; } #bo_vc .g5-comment-form .comment-form-author, #bo_vc .g5-comment-form .comment-form-password { display: flex !important; min-width: 0; flex-direction: column; } #bo_vc .g5-comment-form .comment-form-author label, #bo_vc .g5-comment-form .comment-form-password label { min-height: 20px; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; } #bo_vc .g5-comment-form .comment-form-author input, #bo_vc .g5-comment-form .comment-form-password input { width: 100%; height: 44px; padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; background: #fff; color: inherit; font-size: 14px; } #bo_vc .g5-comment-form .comment-form-author input:focus, #bo_vc .g5-comment-form .comment-form-password input:focus { outline: none; border-color: #60269e; box-shadow: 0 0 0 3px rgba(96, 38, 158, .1); } #bo_vc .g5-comment-form .pw-description { margin-top: 4px; color: #666; font-size: 12px; font-style: italic; line-height: 1.4; } #bo_vc .g5-comment-form .form-submit { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; } #bo_vc .g5-comment-form .form-submit .submit-button { width: auto; min-width: 100px; height: 44px; padding: 10px 16px; border: 0; border-radius: 6px; background: #111; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } #bo_vc .g5-comment-form .form-submit .submit-button:hover, #bo_vc .g5-comment-form .form-submit .submit-button:focus { background: #000; } #bo_vc .g5-comment-form .form-submit .scd_cancelinput { border: 1px solid #ccc; background: #f7f7f7; color: #555; } /* 비회원 폼에는 프로필 요소가 존재하지 않지만 외부 CSS 충돌도 차단 */ #bo_vc .g5-comment-form.is-guest .g5-comment-user-profile { display: none !important; } /* 로그인 회원 답글·수정 */ #bo_vc .g5-comment-form.is-member .g5-comment-form-grid { grid-template-columns: 1fr; grid-template-areas: "comment" "secret" "submit"; } #bo_vc .g5-comment-form.is-member .g5-comment-user-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } #bo_vc .g5-comment-form.is-member .current-avatar { display: block; width: 42px; height: 42px; flex: 0 0 42px; border: 2px solid #007cba; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } #bo_vc .g5-comment-form.is-member .user-name { color: #333; font-size: 14px; font-weight: 600; } #bo_vc .g5-comment-form.is-member .comment-form-comment, #bo_vc .g5-comment-form.is-member .comment-form-secret, #bo_vc .g5-comment-form.is-member .form-submit { margin-left: 0 !important; } #bo_vc .g5-comment-form.is-member .comment-form-comment::after { display: none !important; } #bo_vc .g5-comment-form.is-member #cm_content { border: 2px solid #e1e5e9; border-radius: 12px; background: #fff; } @media (max-width: 768px) { #bo_vc .comment-main > .comment-body { padding-top: 27px; } #bo_vc .comment-reply > .comment-meta { padding-right: 118px; } #bo_vc .g5-comment-form.is-replying, #bo_vc .g5-comment-form.is-editing { padding: 12px; } #bo_vc .g5-comment-form .g5-comment-form-grid { grid-template-columns: 1fr; grid-template-areas: "comment" "secret" "author" "password" "submit"; } #bo_vc .g5-comment-form.is-member .g5-comment-form-grid { grid-template-areas: "comment" "secret" "submit"; } #bo_vc .g5-comment-form .form-submit { justify-content: stretch; flex-wrap: wrap; } #bo_vc .g5-comment-form .form-submit .submit-button { width: 100%; } } /* ========================================================= * 로그인 회원 댓글 폼 단순화 * * - 아바타와 이름은 폼 상단 * - textarea 왼쪽 여백 없음 * - 말풍선 꼬리와 전용 그림자 제거 * - 비밀댓글과 등록 버튼은 같은 줄 * - 버튼은 비회원과 같은 검정색 * ========================================================= */ :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member { display: block; width: 100%; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .g5-comment-user-profile { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .current-avatar { display: block; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #000; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: none; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .user-name { color: #222; font-size: 15px; font-weight: 700; line-height: 1.4; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .g5-comment-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "comment comment" "secret submit"; gap: 10px 14px; align-items: center; width: 100%; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .comment-form-comment { grid-area: comment; position: relative; width: 100%; margin: 0 !important; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .comment-form-comment::after { display: none !important; content: none !important; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member #cm_content { display: block; width: 100%; min-height: 120px; margin: 0; padding: 12px; border: 1px solid #555; border-radius: 4px; background: #fff; color: inherit; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; box-shadow: none; transform: none; transition: border-color .2s ease, box-shadow .2s ease; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member #cm_content:focus { border-color: #60269e; background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(96, 38, 158, .1); transform: none; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .comment-form-secret { grid-area: secret; align-self: center; min-width: 0; margin: 0 !important; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .comment-form-secret label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; cursor: pointer; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .comment-secret-notice { margin-top: 4px; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit { grid-area: submit; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 !important; padding: 0; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit .submit-button { width: auto; min-width: 100px; height: 44px; margin: 0; padding: 10px 16px; border: 0; border-radius: 6px; background: #111; color: #fff; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; transform: none; transition: background-color .2s ease; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit .submit-button:hover, :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit .submit-button:focus { background: #000; box-shadow: none; transform: none; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit .scd_cancelinput { border: 1px solid #ccc; background: #f7f7f7; color: #555; } /* 답글·수정 카드 안에서도 같은 회원 폼 구조 유지 */ #bo_vc .g5-comment-form.is-member.is-replying, #bo_vc .g5-comment-form.is-member.is-editing { padding: 16px; } @media (max-width: 639px) { :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .g5-comment-form-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "comment comment" "secret submit"; gap: 9px; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member #cm_content { min-height: 105px; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit { flex-wrap: nowrap; justify-content: flex-end; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit .submit-button { width: auto; min-width: 88px; padding-right: 12px; padding-left: 12px; } } @media (max-width: 380px) { :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .g5-comment-form-grid { grid-template-columns: 1fr; grid-template-areas: "comment" "secret" "submit"; } :is(#bo_vc_w, #bo_vc) .g5-comment-form.is-member .form-submit { justify-content: flex-start; } } /* ========================================================= * 실제 중첩 댓글 트리 * * depth-2는 해당 depth-1의 .comment-children 안에 위치합니다. * 기존의 깊이별 margin-left 대신 부모 컨테이너가 들여쓰기를 담당합니다. * ========================================================= */ #bo_vc .comment-node { position: relative; display: block; min-width: 0; } #bo_vc .comment-node-depth-0 { width: 100%; } #bo_vc .comment-children { position: relative; display: block; min-width: 0; margin: 0; box-sizing: border-box; } #bo_vc .comment-children-depth-1 { padding: 10px 15px 1px; } #bo_vc .comment-children-depth-2, #bo_vc .comment-children-depth-3 { margin: 12px 0 0 18px; padding: 0 0 0 14px; border-left: 1px solid #ddd; } /* * 기존 CSS의 comment-depth-N별 절대 들여쓰기를 해제합니다. * 실제 DOM 중첩이 누적 들여쓰기를 만듭니다. */ #bo_vc .comment-node > .comment-reply, #bo_vc .comment-reply.comment-depth-1, #bo_vc .comment-reply.comment-depth-2, #bo_vc .comment-reply.comment-depth-3 { width: auto; margin: 12px 0; } #bo_vc .comment-children-depth-1 > .comment-node:first-child > .comment-reply, #bo_vc .comment-children > .comment-node:first-child > .comment-reply { margin-top: 0; } #bo_vc .comment-children > .comment-node:last-child > .comment-reply { margin-bottom: 0; } /* 글 작성자 대댓글의 배경은 개별 카드에만 적용 */ #bo_vc .comment-node > .comment-reply.bypostauthor { background: #efefef; } /* 다크 모드의 트리 연결선 */ [data-theme="dark"] #bo_vc .comment-children-depth-2, [data-theme="dark"] #bo_vc .comment-children-depth-3 { border-left-color: var(--g5c-dark-border, #4d4d4d); } @media (max-width: 639px) { #bo_vc .comment-children-depth-1 { padding: 6px 10px 1px; } #bo_vc .comment-children-depth-2, #bo_vc .comment-children-depth-3 { margin-left: 10px; padding-left: 9px; } } /* ========================================================= * WordPress형 중첩 댓글 박스 * * 구조: * depth 0: 바깥 말풍선 * depth 1: 회색 가지 박스 * depth 2: depth 1 안쪽의 흰색 댓글 카드 * depth 3: depth 2 안쪽의 옅은 회색 댓글 카드 * ========================================================= */ /* * 첫 번째 대댓글 묶음. * 이 컨테이너 안에는 여러 개의 depth-1 가지가 들어갈 수 있습니다. */ #bo_vc .comment-children-depth-1 { margin: 0; padding: 10px 15px; border: 0; background: transparent; } /* * depth-1 댓글과 그 자손 전체를 감싸는 가지 박스. * 첨부 이미지의 큰 회색 대댓글 영역에 해당합니다. */ #bo_vc .comment-node.comment-node-depth-1 { position: relative; margin: 0 0 12px; padding: 0 0 12px; border: 1px solid #d3d3d3; border-radius: 5px; background: #efefef; overflow: visible; } #bo_vc .comment-node.comment-node-depth-1:last-child { margin-bottom: 0; } /* * depth-1 자신의 댓글은 별도 흰색 카드가 아니라 * 회색 가지 박스의 상단 내용처럼 표시합니다. */ #bo_vc .comment-node.comment-node-depth-1 > .comment-reply { width: auto; min-height: 70px; margin: 0; padding: 12px; border: 0; border-radius: 0; background: transparent; } /* * depth-1 댓글 아래에 달린 depth-2 목록. * 회색 가지 박스 안쪽으로 여백을 두어 포함 관계를 나타냅니다. */ #bo_vc .comment-node.comment-node-depth-1 > .comment-children-depth-2 { margin: 10px 12px 0; padding: 0; border: 0; background: transparent; } /* * depth-2 댓글과 그 자손을 감싸는 흰색 카드. * 첨부 이미지 안쪽의 흰색 댓글 박스에 해당합니다. */ #bo_vc .comment-node.comment-node-depth-2 { position: relative; margin: 0 0 10px; padding: 0 0 10px; border: 1px solid #d7d7d7; border-radius: 5px; background: #fff; overflow: visible; } #bo_vc .comment-node.comment-node-depth-2:last-child { margin-bottom: 0; } #bo_vc .comment-node.comment-node-depth-2 > .comment-reply { width: auto; min-height: 70px; margin: 0; padding: 12px; border: 0; border-radius: 0; background: transparent; } /* * depth-2 댓글 아래의 depth-3 목록. */ #bo_vc .comment-node.comment-node-depth-2 > .comment-children-depth-3 { margin: 10px 12px 0; padding: 0; border: 0; background: transparent; } /* * 마지막 단계 댓글 카드. */ #bo_vc .comment-node.comment-node-depth-3 { position: relative; margin: 0 0 10px; padding: 0; border: 1px solid #d2d2d2; border-radius: 5px; background: #f7f7f7; overflow: visible; } #bo_vc .comment-node.comment-node-depth-3:last-child { margin-bottom: 0; } #bo_vc .comment-node.comment-node-depth-3 > .comment-reply { width: auto; min-height: 70px; margin: 0; padding: 12px; border: 0; border-radius: 0; background: transparent; } /* * 이전 실제 트리 CSS에 있던 왼쪽 연결선과 누적 들여쓰기를 해제합니다. * 이제 박스 안에 박스가 들어가는 방식으로 관계를 표시합니다. */ #bo_vc .comment-children-depth-2, #bo_vc .comment-children-depth-3 { border-left: 0; } /* * 자식 댓글의 메타 구분선. */ #bo_vc .comment-node > .comment-reply > .comment-meta { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ddd; } /* * 글 작성자 댓글은 워드프레스의 bypostauthor처럼 조금 더 강조합니다. */ #bo_vc .comment-node > .comment-reply.bypostauthor { background: transparent; } #bo_vc .comment-node.comment-node-depth-2 > .comment-reply.bypostauthor, #bo_vc .comment-node.comment-node-depth-3 > .comment-reply.bypostauthor { background: #efefef; } /* * 댓글 안에 답글·수정 폼이 열릴 때 * 현재 가지 박스 안에 자연스럽게 들어가도록 합니다. */ #bo_vc .comment-node > .g5-comment-inline-slot:not(:empty) { margin: 10px 12px 0; } /* ========================================================= * 다크 모드 * ========================================================= */ [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-1 { border-color: #4d4d4d; background: #292929; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-2 { border-color: #555; background: #1f1f1f; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-3 { border-color: #5d5d5d; background: #292929; } [data-theme="dark"] #bo_vc .comment-node > .comment-reply > .comment-meta { border-bottom-color: #444; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-2 > .comment-reply.bypostauthor, [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-3 > .comment-reply.bypostauthor { background: #303030; } /* ========================================================= * 모바일 * ========================================================= */ @media (max-width: 639px) { #bo_vc .comment-children-depth-1 { padding: 7px 9px; } #bo_vc .comment-node.comment-node-depth-1 { padding-bottom: 8px; } #bo_vc .comment-node.comment-node-depth-1 > .comment-reply, #bo_vc .comment-node.comment-node-depth-2 > .comment-reply, #bo_vc .comment-node.comment-node-depth-3 > .comment-reply { padding: 10px; } #bo_vc .comment-node.comment-node-depth-1 > .comment-children-depth-2, #bo_vc .comment-node.comment-node-depth-2 > .comment-children-depth-3 { margin-right: 8px; margin-left: 8px; } #bo_vc .comment-node > .g5-comment-inline-slot:not(:empty) { margin-right: 8px; margin-left: 8px; } } /* ========================================================= * 댓글 작성자 상태를 가지 노드 전체에 적용 * * 실제 배경색은 .comment-reply가 아니라 .comment-node가 담당합니다. * 따라서 작성자 강조가 하위 트리 중간에서 끊기지 않습니다. * ========================================================= */ /* * 내부 댓글 카드에서 이전 bypostauthor 배경을 제거합니다. * 상태 색상은 바깥 .comment-node에만 적용합니다. */ #bo_vc .comment-node > .comment-reply.bypostauthor, #bo_vc .comment-node > .comment-reply.byadmin, #bo_vc .comment-node > .comment-reply.bypostauthor.byadmin { background: transparent; } /* 일반 회원과 비회원은 기본 노드 색상을 사용 */ #bo_vc .comment-node.bymember, #bo_vc .comment-node.byguest { color: inherit; } /* * 게시글 작성자 댓글 가지 * 보라색을 아주 옅게 사용하여 일반 회색 가지와 구분합니다. */ #bo_vc .comment-node.comment-node-depth-1.bypostauthor { border-color: #b9a9cb; background: #f0ebf5; } #bo_vc .comment-node.comment-node-depth-2.bypostauthor { border-color: #c9bdd6; background: #f8f5fb; } #bo_vc .comment-node.comment-node-depth-3.bypostauthor { border-color: #d2c8dc; background: #f3eff7; } /* * 관리자 댓글 가지 * 게시글 작성자와 구분하기 위해 옅은 녹회색을 사용합니다. */ #bo_vc .comment-node.comment-node-depth-1.byadmin:not(.bypostauthor) { border-color: #a9c4b2; background: #eaf3ed; } #bo_vc .comment-node.comment-node-depth-2.byadmin:not(.bypostauthor) { border-color: #bdd2c3; background: #f3f8f4; } #bo_vc .comment-node.comment-node-depth-3.byadmin:not(.bypostauthor) { border-color: #c7d9cc; background: #edf5ef; } /* * 게시글 작성자이면서 관리자일 때. * 두 상태가 겹치면 게시글 작성자 강조를 조금 더 선명하게 표시합니다. */ #bo_vc .comment-node.bypostauthor.byadmin { border-color: #9a82b4; } #bo_vc .comment-node.comment-node-depth-1.bypostauthor.byadmin { background: #ebe3f2; } #bo_vc .comment-node.comment-node-depth-2.bypostauthor.byadmin { background: #f5f0f9; } #bo_vc .comment-node.comment-node-depth-3.bypostauthor.byadmin { background: #efe9f5; } /* * 최상위 댓글은 article과 depth-0 노드에 상태 클래스가 모두 붙습니다. * 말풍선 색도 작성자 상태에 맞춥니다. */ #bo_vc article.comment-parent.bypostauthor { border-color: #8d769f; background: #fff; } #bo_vc article.comment-parent.bypostauthor::before { border-color: transparent transparent #8d769f; } #bo_vc article.comment-parent.bypostauthor::after { border-color: transparent transparent #fff; } #bo_vc article.comment-parent.byadmin:not(.bypostauthor) { border-color: #779483; background: #fff; } #bo_vc article.comment-parent.byadmin:not(.bypostauthor)::before { border-color: transparent transparent #779483; } #bo_vc article.comment-parent.byadmin:not(.bypostauthor)::after { border-color: transparent transparent #fff; } /* * 비밀댓글 상태는 노드 테두리에만 가볍게 표시합니다. * 본문 자체의 비밀댓글 배경은 기존 .comment-body.secret가 담당합니다. */ #bo_vc .comment-node.is-secret { box-shadow: inset 3px 0 0 #80639f; } #bo_vc .comment-node.is-secret-locked { box-shadow: inset 3px 0 0 #69527e; } /* ========================================================= * 다크 모드 * ========================================================= */ [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-1.bypostauthor { border-color: #806b96; background: #312b38; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-2.bypostauthor { border-color: #756585; background: #28232e; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-3.bypostauthor { border-color: #6f617d; background: #302a36; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-1.byadmin:not(.bypostauthor) { border-color: #637d6c; background: #26322a; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-2.byadmin:not(.bypostauthor) { border-color: #5d7464; background: #222b25; } [data-theme="dark"] #bo_vc .comment-node.comment-node-depth-3.byadmin:not(.bypostauthor) { border-color: #596e60; background: #29322c; } [data-theme="dark"] #bo_vc .comment-node.bypostauthor.byadmin { border-color: #947eaa; } [data-theme="dark"] #bo_vc article.comment-parent.bypostauthor { border-color: #9b87ae; background: var(--g5c-dark-surface, #202020); } [data-theme="dark"] #bo_vc article.comment-parent.bypostauthor::before { border-color: transparent transparent #9b87ae; } [data-theme="dark"] #bo_vc article.comment-parent.bypostauthor::after { border-color: transparent transparent var(--g5c-dark-surface, #202020); } [data-theme="dark"] #bo_vc article.comment-parent.byadmin:not(.bypostauthor) { border-color: #789181; background: var(--g5c-dark-surface, #202020); } [data-theme="dark"] #bo_vc article.comment-parent.byadmin:not(.bypostauthor)::before { border-color: transparent transparent #789181; } [data-theme="dark"] #bo_vc article.comment-parent.byadmin:not(.bypostauthor)::after { border-color: transparent transparent var(--g5c-dark-surface, #202020); } /* ========================================================= * 비회원 댓글 수정 폼 * * 답글 폼과 같은 순서: * 댓글 내용 * 이름 | 비밀번호 * 비밀댓글 | 취소·수정 * ========================================================= */ #bo_vc .guest-edit-form { margin: 12px 0 0; padding: 16px; border: 1px solid #ddd; border-radius: 5px; background: #f8f9fa; } #bo_vc .guest-edit-form .guest-edit-title { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid #ddd; color: #222; font-size: 15px; font-weight: 700; line-height: 1.4; } #bo_vc .guest-edit-form .guest-edit-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "content content" "name password" "secret buttons"; gap: 10px; align-items: end; width: 100%; } #bo_vc .guest-edit-form .form-group { min-width: 0; margin: 0; } #bo_vc .guest-edit-form .guest-edit-content { grid-area: content; } #bo_vc .guest-edit-form .guest-edit-name { grid-area: name; } #bo_vc .guest-edit-form .guest-edit-password { grid-area: password; } #bo_vc .guest-edit-form .guest-edit-secret-option { grid-area: secret; align-self: center; } #bo_vc .guest-edit-form .guest-edit-buttons { grid-area: buttons; } #bo_vc .guest-edit-form label { display: block; min-height: 20px; margin: 0 0 8px; color: #333; font-size: 14px; font-weight: 600; } #bo_vc .guest-edit-form .guest-edit-secret-option label { display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 0; cursor: pointer; } #bo_vc .guest-edit-form .guest-edit-secret-option input[type="checkbox"] { width: 16px; height: 16px; margin: 0; } #bo_vc .guest-edit-form .form-control { display: block; width: 100%; height: 44px; padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; background: #fff; color: inherit; font-family: inherit; font-size: 14px; line-height: 1.5; box-sizing: border-box; } #bo_vc .guest-edit-form textarea.form-control { min-height: 110px; height: auto; border-width: 1px; border-color: #555; border-radius: 4px; resize: vertical; } #bo_vc .guest-edit-form .form-control:focus { border-color: #60269e; outline: none; box-shadow: 0 0 0 2px rgba(96, 38, 158, .1); } #bo_vc .guest-edit-form .form-control:read-only { background: #e9ecef; color: #6c757d; cursor: not-allowed; } #bo_vc .guest-edit-form .comment-secret-notice { margin: 5px 0 0; color: #666; font-size: 12px; line-height: 1.4; } #bo_vc .guest-edit-form .form-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; border: 0; text-align: right; } #bo_vc .guest-edit-form .btn { min-width: 88px; height: 44px; margin: 0; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1; } #bo_vc .guest-edit-form .btn-cancel { border: 1px solid #ccc; background: #f7f7f7; color: #555; } #bo_vc .guest-edit-form .btn-cancel:hover, #bo_vc .guest-edit-form .btn-cancel:focus { border-color: #999; background: #eee; color: #222; } #bo_vc .guest-edit-form .btn-submit { border: 1px solid #111; background: #111; color: #fff; } #bo_vc .guest-edit-form .btn-submit:hover, #bo_vc .guest-edit-form .btn-submit:focus { border-color: #000; background: #000; color: #fff; } /* 다크 모드 */ [data-theme="dark"] #bo_vc .guest-edit-form { border-color: #4d4d4d; background: #292929; } [data-theme="dark"] #bo_vc .guest-edit-form .guest-edit-title { border-bottom-color: #444; color: #ededed; } [data-theme="dark"] #bo_vc .guest-edit-form label { color: #ededed; } [data-theme="dark"] #bo_vc .guest-edit-form .form-control { border-color: #4d4d4d; background: #181818; color: #ededed; } [data-theme="dark"] #bo_vc .guest-edit-form .form-control:read-only { border-color: #444; background: #303030; color: #aaa; } [data-theme="dark"] #bo_vc .guest-edit-form .comment-secret-notice { color: #aaa; } [data-theme="dark"] #bo_vc .guest-edit-form .btn-cancel { border-color: #666; background: #303030; color: #ddd; } [data-theme="dark"] #bo_vc .guest-edit-form .btn-submit { border-color: #ededed; background: #ededed; color: #111; } @media (max-width: 639px) { #bo_vc .guest-edit-form { padding: 12px; } #bo_vc .guest-edit-form .guest-edit-form-grid { grid-template-columns: 1fr; grid-template-areas: "content" "name" "password" "secret" "buttons"; } #bo_vc .guest-edit-form .form-buttons { justify-content: stretch; } #bo_vc .guest-edit-form .btn { flex: 1 1 0; } } /* 댓글 URL 자동 임베드 */ #bo_vc .g5-comment-text-line { min-height: 1.65em; overflow-wrap: anywhere; word-break: break-word; } #bo_vc .g5-comment-text-line.is-empty { min-height: .9em; } #bo_vc .g5-comment-text-line a { overflow-wrap: anywhere; word-break: break-all; } #bo_vc .g5-comment-embed { width: 100%; max-width: 760px; margin: 12px 0 16px; overflow: hidden; } #bo_vc .g5-comment-embed iframe, #bo_vc .g5-comment-embed video, #bo_vc .g5-comment-embed object, #bo_vc .g5-comment-embed embed { display: block; width: 100%; max-width: 100%; border: 0; } #bo_vc .g5-comment-embed--video { aspect-ratio: 16 / 9; background: #000; } #bo_vc .g5-comment-embed--video iframe, #bo_vc .g5-comment-embed--video video { width: 100%; height: 100%; } #bo_vc .g5-comment-embed--audio iframe { min-height: 166px; } #bo_vc .g5-comment-embed blockquote { margin: 0; } @media screen and (max-width: 639px) { #bo_vc .g5-comment-embed { max-width: 100%; margin-top: 10px; margin-bottom: 14px; } } /* 브라우저 자동 완성 배경 */ [data-theme="dark"] :is(#bo_vc_w, #bo_vc) .g5-comment-form input:-webkit-autofill, [data-theme="dark"] :is(#bo_vc_w, #bo_vc) .g5-comment-form input:-webkit-autofill:hover, [data-theme="dark"] :is(#bo_vc_w, #bo_vc) .g5-comment-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--g5c-dark-text); box-shadow: 0 0 0 1000px var(--g5c-dark-input) inset; transition: background-color 9999s ease-out; } /* 새 댓글 강조 */ [data-theme="dark"] .g5c-flash { outline-color: rgba(169, 122, 222, .8); } /* ========================================================= * 댓글 상태별 최종 색상 정리 * * 우선순위 * 1. 비밀댓글: 보라색 전체 배경 * 2. 관리자: 녹색 전체 배경 * 3. 원저자: 배경 변경 없이 글자만 굵게 * ========================================================= */ #bo_vc { --g5-comment-bg: #fff; --g5-comment-border: #000; --g5-admin-depth-1-bg: #eaf3ed; --g5-admin-depth-2-bg: #f3f8f4; --g5-admin-depth-3-bg: #edf5ef; --g5-admin-border: #a9c4b2; --g5-secret-depth-0-bg: #f4eef9; --g5-secret-depth-1-bg: #eee4f6; --g5-secret-depth-2-bg: #f6f0fa; --g5-secret-depth-3-bg: #f1e9f7; --g5-secret-border: #b59ac9; --g5-secret-border-strong: #9675af; } /* ========================================================= * 기존 원저자 배경색과 테두리 제거 * ========================================================= */ #bo_vc article.comment-parent.bypostauthor { border-color: var(--g5-comment-border); background: var(--g5-comment-bg); } #bo_vc article.comment-parent.bypostauthor::before { border-color: transparent transparent var(--g5-comment-border); } #bo_vc article.comment-parent.bypostauthor::after { top: -10px; border-color: transparent transparent var(--g5-comment-bg); } #bo_vc .comment-node.comment-node-depth-1.bypostauthor, #bo_vc .comment-node.comment-node-depth-2.bypostauthor, #bo_vc .comment-node.comment-node-depth-3.bypostauthor { border-color: #d3d3d3; background: inherit; } /* * 원저자 댓글은 자기 댓글 내용만 굵게 표시합니다. * 하위 댓글에는 굵기가 상속되지 않습니다. */ #bo_vc .comment-node.bypostauthor > .g5-comment-item > .comment-body .wr_content { font-weight: 700; } /* ========================================================= * 관리자 댓글 * 비밀댓글이 아닌 경우에만 녹색 배경 적용 * ========================================================= */ #bo_vc .comment-node.comment-node-depth-1.byadmin:not(.is-secret) { border-color: var(--g5-admin-border); background: var(--g5-admin-depth-1-bg); } #bo_vc .comment-node.comment-node-depth-2.byadmin:not(.is-secret) { border-color: var(--g5-admin-border); background: var(--g5-admin-depth-2-bg); } #bo_vc .comment-node.comment-node-depth-3.byadmin:not(.is-secret) { border-color: var(--g5-admin-border); background: var(--g5-admin-depth-3-bg); } #bo_vc .comment-node.byadmin:not(.is-secret) > .g5-comment-item > .comment-body .wr_content { font-weight: 500; } /* * 최상위 관리자 댓글 */ #bo_vc article.comment-parent.byadmin:not(.is-secret) { border-color: #779483; background: var(--g5-admin-depth-1-bg); } #bo_vc article.comment-parent.byadmin:not(.is-secret)::before { border-color: transparent transparent #779483; } #bo_vc article.comment-parent.byadmin:not(.is-secret)::after { border-color: transparent transparent var(--g5-admin-depth-1-bg); } /* ========================================================= * 비밀댓글 * 기존 왼쪽 box-shadow를 제거하고 노드 전체를 보라색으로 표시 * ========================================================= */ #bo_vc .comment-node.is-secret, #bo_vc .comment-node.is-secret-locked { box-shadow: none; } #bo_vc .comment-node.comment-node-depth-1.is-secret { border-color: var(--g5-secret-border); background: var(--g5-secret-depth-1-bg); } #bo_vc .comment-node.comment-node-depth-2.is-secret { border-color: var(--g5-secret-border); background: var(--g5-secret-depth-2-bg); } #bo_vc .comment-node.comment-node-depth-3.is-secret { border-color: var(--g5-secret-border); background: var(--g5-secret-depth-3-bg); } /* * 기존 .comment-body.secret에 들어가던 별도 보라색 박스를 제거합니다. * 이제 comment-node 전체 배경이 비밀댓글 색을 담당합니다. */ #bo_vc .comment-node.is-secret > .g5-comment-item > .comment-body.secret, #bo_vc .comment-node.is-secret-locked > .g5-comment-item > .comment-body.secret { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* * 비밀댓글이 관리자나 원저자 댓글이어도 * 안쪽 comment-reply에 별도 배경이 생기지 않게 처리합니다. */ #bo_vc .comment-node.is-secret > .comment-reply, #bo_vc .comment-node.is-secret > .comment-main { background: transparent; } /* ========================================================= * 최상위 부모 비밀댓글 * 말풍선 전체와 삼각형 꼬리 색상을 함께 변경 * ========================================================= */ #bo_vc article.comment-parent.is-secret { border-color: var(--g5-secret-border-strong); background: var(--g5-secret-depth-0-bg); } /* * 말풍선 꼬리 바깥 테두리 */ #bo_vc article.comment-parent.is-secret::before { border-color: transparent transparent var(--g5-secret-border-strong); } /* * 말풍선 꼬리 안쪽 배경 */ #bo_vc article.comment-parent.is-secret::after { top: -10px; border-color: transparent transparent var(--g5-secret-depth-0-bg); } /* * 최상위 비밀댓글의 depth-0 노드는 * article 배경을 그대로 사용합니다. */ #bo_vc article.comment-parent.is-secret .comment-node-depth-0 { background: transparent; box-shadow: none; } /* ========================================================= * 다크 모드 * ========================================================= */ [data-theme="dark"] #bo_vc { --g5-comment-bg: #202020; --g5-comment-border: #999; --g5-admin-depth-1-bg: #26322a; --g5-admin-depth-2-bg: #222b25; --g5-admin-depth-3-bg: #29322c; --g5-admin-border: #637d6c; --g5-secret-depth-0-bg: #302638; --g5-secret-depth-1-bg: #372b41; --g5-secret-depth-2-bg: #2e2535; --g5-secret-depth-3-bg: #352a3d; --g5-secret-border: #765f88; --g5-secret-border-strong: #9578aa; } [data-theme="dark"] #bo_vc article.comment-parent.bypostauthor:not(.byadmin):not(.is-secret) { border-color: var(--g5-comment-border); background: var(--g5-comment-bg); } [data-theme="dark"] #bo_vc article.comment-parent.bypostauthor:not(.byadmin):not(.is-secret)::before { border-color: transparent transparent var(--g5-comment-border); } [data-theme="dark"] #bo_vc article.comment-parent.bypostauthor:not(.byadmin):not(.is-secret)::after { border-color: transparent transparent var(--g5-comment-bg); } [data-theme="dark"] #bo_vc .comment-node.is-secret > .g5-comment-item > .comment-body.secret, [data-theme="dark"] #bo_vc .comment-node.is-secret-locked > .g5-comment-item > .comment-body.secret { background: transparent; color: #eee7f5; } [data-theme="dark"] #bo_vc article.comment-parent::after { border-color: transparent transparent #111;} [data-theme="dark"] #bo_vc article.comment-parent { background: #111; } .form-group.guest-edit-name label, .form-group.guest-edit-content label, .form-group.guest-edit-password label, span.pw-description, label[for="user_pass"], label[for="user_name"], label[for="cm_content"] { display:none !important;} /* 비밀글 아이콘 */ .comment-body .g5-icon-secret { vertical-align: middle; margin-right: 5px; } .g5-oembed-provider-tiktok .g5-oembed-inner { max-width: 605px; margin: 0 auto; } .g5-oembed-provider-tiktok blockquote.tiktok-embed { width: 100% !important; max-width: 605px !important; min-width: 0 !important; margin: 0 auto !important; } .g5-oembed-preview .g5-oembed-provider-tiktok .g5-oembed-inner { max-width: 605px; margin: 0 auto; } .g5-oembed-preview .tiktok-embed { width: 100% !important; max-width: 605px !important; min-width: 0 !important; margin: 0 auto !important; } #bo_vc .g5-comment-embed--social { width: 100%; max-width: 605px; } #bo_vc .g5-comment-embed blockquote.tiktok-embed { width: 100% !important; max-width: 605px !important; min-width: 0 !important; margin: 0 auto !important; } .g5u-wrap{border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:12px;background:#fff;} .g5u-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .g5u-drop{flex:1;min-height:56px;border:1px dashed rgba(0,0,0,.18);border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;} .g5u-drop.is-over{outline:2px dashed rgba(0,0,0,.22);outline-offset:2px;} .g5u-help{font-size:12px;opacity:.75;} .g5u-btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.18);background:#fff;cursor:pointer;font-weight:700;} .g5u-msg{margin-top:8px;font-size:12px;min-height:16px;} .g5u-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;} .g5u-item{display:flex;gap:10px;align-items:stretch;border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:10px;background:#fff;position: relative;counter-increment: item;} li.g5u-item:before { content: counter(item); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center; position: absolute; top: -4px; left: -5px; font-weight: bold; color: #fff; background: #e4685d; } .g5u-thumb{width:120px;height:auto;border-radius:10px;border:1px solid rgba(0,0,0,.08);display:block;} .g5u-meta{display:flex;flex-direction:column;gap:4px;min-width:220px;} .g5u-name{font-weight:800;font-size:13px;word-break:break-all;} .g5u-size{font-size:12px;opacity:.7;} .g5u-right{display:flex;gap:8px;align-items:center;flex:1;} .g5u-content{flex:1;padding:10px 12px;border:1px solid rgba(0,0,0,.14);border-radius:12px;} .g5u-del{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.18);background:#fff;cursor:pointer;white-space:nowrap;} .g5u-ghost{opacity:.35;} .g5u-handle{cursor:grab;user-select:none;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.02);} .g5u-handle:active{cursor:grabbing;} /* 접근성(라벨 숨김) */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* 리스트 */ .b5-list{ list-style:none; margin:0; padding:0; } .b5-item{ border-bottom:1px solid rgba(0,0,0,.08); } /* ✅ PC 기본: grid 3열(왼쪽/본문/오른쪽) */ .b5-row{ display:grid; grid-template-columns: auto 1fr auto; /* left | body | meta */ align-items:center; gap:12px; padding:12px 10px; } /* 왼쪽이 없으면 2열 */ .b5-row.no-left{ grid-template-columns: 1fr auto; /* body | meta */ } /* 메타가 없으면 2열(또는 1열) */ .b5-row.no-meta{ grid-template-columns: auto 1fr; /* left | body */ } .b5-row.no-left.no-meta{ grid-template-columns: 1fr; /* body only */ } /* 왼쪽(번호/체크) */ .b5-left{ display:flex; align-items:center; gap:10px; } .b5-num{ width:52px; text-align:center; font-variant-numeric: tabular-nums; opacity:.85; } .b5-chk{ width:28px; display:flex; justify-content:center; } /* 본문(제목/태그) + 답글 들여쓰기 */ .b5-body{ min-width:0; padding-left: calc(var(--reply-depth, 0) * 15px); } .b5-title{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .b5-cmt{ margin-left:6px; font-size:.9em; opacity:.75; } /* 태그: 제목 아래, 제목 시작점에서 */ .b5-tags{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; } .b5-tags a, .b5-tags .tag{ display:inline-flex; align-items:center; padding:3px 8px; border:1px solid rgba(0,0,0,.15); border-radius:999px; font-size:12px; line-height:1; text-decoration:none; } /* 메타(작성자/날짜/조회) - PC에서는 오른쪽 정렬 */ .b5-meta{ display:flex; align-items:center; gap:12px; white-space:nowrap; justify-content:flex-end; } .b5-meta .m{ display:inline-flex; align-items:center; gap:6px; opacity:.85; font-size:13px; } .b5-meta .avatar{ width:18px; height:18px; border-radius:50%; background-size:cover; background-position:center; } li.bo_notice { background: #eee; border-radius: 4px; } [data-theme=dark] li.bo_notice { background: #000; } /* ✅ 모바일: 2열로 바꾸고, 메타는 "제목 시작점(2열) 아래"로 내려오게 */ @media (max-width: 768px){ .b5-row{ grid-template-columns: auto 1fr; /* left | body */ align-items:start; gap:2px; } /* 왼쪽 없으면 1열 */ .b5-row.no-left{ grid-template-columns: 1fr; } /* 메타는 2열에 붙여서(=제목 시작점) 아래로 떨어뜨림 */ .b5-meta{ grid-column: 2 / -1; /* body와 같은 시작점 */ justify-content:flex-start; white-space:normal; flex-wrap:wrap; margin-top:8px; /* 답글 들여쓰기 동일 적용 */ padding-left: calc(var(--reply-depth, 0) * 15px); } /* 왼쪽이 없는 경우 메타는 1열 전체 */ .b5-row.no-left .b5-meta{ grid-column: 1 / -1; } /* 번호 폭 조금 줄이기 */ .b5-num{ width:38px;font-size:.9em;text-align: left; } } select#ca_name { height: 50px; } .arom-may { position: relative; background: #fff; z-index: 12; width: 100%; max-width: 450px; } .ant-alert.ant-alert-info.ant-alert-no-icon { display: none !important; } .comment-parent article.cmt-parent:after { content: ""; width: 100%; display: block; clear: both; margin-bottom: 10px; } .current-avatar { } span.prev_post { } .comment-parent { } /**********************************/ /* 멀티 업로드 /* /**********************************/ ol#ajax-file-upload-container { list-style: none; } ol#ajax-file-upload-container li.ajax-file-upload-statusbar { counter-increment: item; } ol#ajax-file-upload-container li.ajax-file-upload-statusbar:before { content: counter(item); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center; position: absolute; top: -4px; left: -5px; font-weight: bold; color: #fff; background: #e4685d; } span.sortable-number { border-radius: 50%; display: block; float: left; width: 30px; height: 30px; line-height: 30px; text-align: center; position: absolute; top: -1px; left: -15px; font-weight: bold; color: #fff; background: #e4685d; } #ajax-file-upload-container { list-style-type: none; margin: 0; padding:0; } #ajax-file-upload-container li { display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; } #ajax-file-upload-container .ui-selected { background: red; color: white; font-weight: bold; } #ajax-file-upload-container .highlight { border: 2px dashed #888; font-weight: bold; font-size: 45px; background-color: #fff; min-height:119px; color:#e67a73; max-width: 478px; text-indent:15px; line-height:119px; width:50%; } .ajax-file-upload-statusbar { position: relative; border: 1px solid #ccc; width: 50% !important; min-height:121px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: move; max-width: 480px; } .ajax-file-upload-statusbar:nth-child(odd), #ajax-file-upload-container .highlight:nth-child(odd) { } .ajax-file-upload-statusbar:nth-child(even),#ajax-file-upload-container .highlight:nth-child(even) { } .ajax-file-upload-statusbar:after { display:block; content:""; width:100%; clear:both; height:1px; } img.ajax-file-upload-preview { float: left; margin-right: 15px; } .extrahtml { margin-left:30px;margin-right: 7px; } .extrahtml input.ed { width: 240px; z-index: 1000; position: relative; } .ajax-file-upload-filename { height: auto; margin: 10px 0 5px 0px; display: inline-block; max-width: 300px; word-break: break-all; } .ajax-file-upload-filesize { width: 50px; height: auto; margin: 0 5px 5px 0px; display: inline-block; vertical-align:middle; } .ajax-file-upload-progress { margin: 2px 10px 5px 0px; position: relative; width: 250px; border: 1px solid #ddd; padding: 1px; border-radius: 2px; display: inline-block; color:#FFFFFF; } .ajax-file-upload-bar { background-color: #508dc3; width: 0; height: 23px; border-radius: 2px; color:#FFFFFF; } .ajax-file-upload-percent { position: absolute; display: inline-block; top: 3px; left: 48% } .ajax-file-upload-red { -moz-box-shadow: inset 0 39px 0 -24px #e67a73; -webkit-box-shadow: inset 0 39px 0 -24px #e67a73; box-shadow: inset 0 39px 0 -24px #e67a73; background-color: #e4685d; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; display: inline-block; color: #fff; font-size: 13px; font-weight: normal; padding: 4px 15px; text-decoration: none; text-shadow: 0 1px 0 #b23e35; cursor: pointer; vertical-align: top; margin: 5px 10px 5px 0px; float:right; } .ajax-file-upload-green { background-color: #77b55a; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0; padding: 0; display: inline-block; color: #fff; font-family: arial; font-size: 13px; font-weight: normal; padding: 4px 15px; text-decoration: none; cursor: pointer; text-shadow: 0 1px 0 #5b8a3c; vertical-align: top; margin: 5px 10px 5px 0px; } .ajax-file-upload { font-size: 14px; padding: 0px 10px; cursor: pointer; line-height: 35px; height: 38px; margin: 0 10px 10px 0; display: inline-block; background: #fff; border: 1px solid #e8e8e8; color: #888; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -moz-box-shadow: 0 2px 0 0 #e8e8e8; color: #fff; background: #00a1db; border: none; -moz-box-shadow: 0 2px 0 0 #13648d; vertical-align: middle; } .ajax-file-upload:hover { background: #3396c9; } .ajax-upload-dragdrop { border:2px dotted #ccc; width:100% !important; max-width: 1180px; color: #aaa; text-align:left; vertical-align:middle; padding:10px 10px 0px 10px; border-radius: 5px; } .ajax-upload-dragdrop span { text-align:center; } .state-hover { border:2px solid #ccc; } .ajax-file-upload-container { margin: 20px 0px 20px 0px; width: 100%; position: relative; max-width: 832px; } /* ### 기본 스타일 커스터마이징 시작 ### */ .sch_word {color: #ff3061} .gp_skin_list, #bo_v, #bo_w{width:100%;padding:0;margin:0;position:relative;} #bo_w input[type="text"], #bo_w textarea, #bo_vc_w input[type="text"], #bo_vc_w textarea{} #bo_w textarea, #bo_vc_w textarea { } /* 리스트 테이블 및 기본 테이블 */ /* ie6 이미지 너비 지정 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;border:0} #captcha legend label{font-size:0 !important;} #captcha #captcha_img {display:inline;border:1px solid #e9e9e9;width:100px;height:41px;vertical-align:top} #captcha #captcha_mp3 {position:absolute;top:0;left:101px;;margin:0;padding:0;width:23px;height:22px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer} #captcha #captcha_mp3 span {position:absolute;top:0;left:0;width:23px;height:22px;background:url("./img/sound.gif")} #captcha #captcha_reload {position:absolute;top:21px;left:101px;margin:0;padding:0;width:23px;height:22px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer} #captcha #captcha_reload span {position:absolute;top:0;left:0;width:23px;height:22px;background:url("./img/reload.gif")} #captcha #captcha_key {display:inline;margin:0 0 0 25px;padding:0 5px !important;width:70px;height:41px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:2.8em;vertical-align:middle} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* 버튼 */ a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm a, fieldset .btn_submit { } button.btn_cancel, a.btn_cancel, .btn_confirm a { } div#pw_confirm { line-height: initial; max-width: 1180px; margin: 0 auto; } div#pw_confirm h1 { border-bottom: 2px dashed #efefef; padding: 10px 0; margin-bottom: 10px; } .btn_confirm input.submit-button.button { border-color: #5b9dd9; background: #5b9dd9 url(./img/upload-01.svg) no-repeat;} .btn_confirm input.submit-button.button:hover { border: 1px solid #ff6863 !important; background: #ff6863 url(./img/upload-01.svg) no-repeat !important;} a.btn_cancel {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn_cancel:hover{border:1px solid #ccc;} button.btn_cancel {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;vertical-align:top;text-decoration:none} a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;height:24px;border:0;background:#333;color:#fff;letter-spacing:-0.1em;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ a.btn_frmline {line-height:24px} button.btn_frmline {font-size:1em} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} .g5_list_wrap ul{margin:0;padding:0;margin-bottom:10px} .g5_list_wrap ul li{list-style:none} ul.g5_title_head{background: #eaeaea;border-top: 1px solid #eee;font-weight:bold;padding:8px} ul.g5_title_head, .g5_doc_line{*zoom:1;} ul.g5_title_head:after, .g5_doc_line:after{content:""; display:block; clear:both;} .g5_doc_line{border-bottom: 1px solid #eee;padding:8px} .g5_list_walker ul{clear:both} .g5_doc_num{float:left;text-align: center;width: 5%;} .g5_doc_chk{float:left;text-align: center;width: 5%;} .g5_doc_subject{float: left;text-align: left;width: 55%;} .g5_doc_writer{float: left;text-align: center;width: 10%;} .g5_doc_date{float: left;text-align: center;width: 10%;} .g5_doc_hit{float: left;text-align: center;width: 5%;} /* 페이징 */ .pg_wrap {clear:both;margin:0 0 20px;padding:20px 0 0;text-align:center} .pg {} .pg_page, .pg_current {display:inline-block;padding:0 8px;color:#000;letter-spacing:0;line-height:2.2em;vertical-align:middle} a.pg_page {border:0} .pg a:focus, .pg a:hover {text-decoration:none} .pg_page {background:#e4eaec;text-decoration:none} .pg_start, .pg_prev {/* 이전 */} .pg_end, .pg_next {/* 다음 */} .pg_current {display:inline-block;margin:0 4px 0 0;background:#333;color:#fff;font-weight:normal} /* 폼 테이블 */ /* list-head 태그 리스트 */ .list_head_tags { position: relative; width: 100%; margin: 0; padding: 1px 0 0 1px; list-style: none; display: flex; flex-wrap: wrap; } .list_head_tags li { width: 20%; aspect-ratio: 1 / 1; margin-left: -1px; margin-top: -1px; border: 1px solid #333; position: relative; transition: all 0.4s; overflow: hidden; } .list_head_tags li:after { content: ""; position: absolute; border-right: 1px solid #333; right: 0; top: 0; transition: all 0.4s; } .list_head_tags li a { text-align: center; letter-spacing: -0.08rem; word-break: break-word; justify-content: center; align-items: center; padding: 0; font-size: 0.8rem; position: absolute; z-index: 9; width: 100%; height: 100%; display: flex; transition: all 0.4s; } .list_head_tags li a.tags-on { background: #8e49aa; color: #fff !important; transform: scale(1.03); } .wp-editor-container #wr_content {height:400px} /* 사이드뷰 */ .sv_wrap {display:inline-block;position:relative;font-weight:normal;text-align:left} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #283646} .sv_wrap .sv a {display:inline-block;margin:0;padding:3px;width:94px;border-bottom:1px solid #283646;background:#111;color:#fff !important;font-size:12px} .sv_wrap a:focus, .sv_wrap a:hover, .sv_wrap a:active {text-decoration:none} .sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 게시판 버튼 */ /* 목록 버튼 */ /* 읽기 버튼 */ /* 쓰기 버튼 */ #bo_w .btn_confirm { display: flex;} /* 서식단계 진행 */ #bo_w .btn_submit, #bo_w button.btn_submit { padding:8px;border:0;background:#ff3061;color:#fff;height:36px;cursor:pointer;font-size:1em;vertical-align:middle;margin-bottom:0 } #bo_w .btn_cancel {height:36px} #bo_w select {padding: 3px 6px;font-size: 1em;line-height: 1.5;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px} /* 기본 테이블 */ /* 목록 테이블 */ #bo_list .tbl_head01 td {border-left:0} #bo_list .tbl_head01 a.wr_subject { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inherit;position:relative;width:100%;float:left;} /* 읽기 내 테이블 */ /* 쓰기 테이블 */ #bo_w h2{font-size:1.2em} #bo_w h3{font-size:1.1em} #bo_w input[type="checkbox"]{vertical-align: middle;} #bo_w .block_label{display:block;margin-bottom:5px} /* 필수입력 */ /* ### 기본 스타일 커스터마이징 끝 ### */ /* 게시판용 버튼 */ a.btn_b02 {display:inline-block;padding:7px 7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn_b02:focus, a.btn_b02:hover {text-decoration:none;border:1px solid #3b3c3f;} /* 댓글 스타일 */ .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold} /* 게시판 목록 */ div.ori-con:before { content: "원 글"; width:100%; text-align:center; border-bottom: 2px dashed #bbb; color: #aaa; display: block; margin-bottom: 15px; } /* 게시판 목록 공통 */ .bo_fx {zoom:1} .tbl_head01.tbl_wrap:after, .bo_fx:after {display:block;visibility:hidden;clear:both;content:"";width:100%;} .bo_fx ul {margin:0;padding:0;list-style:none} #bo_list_total { text-align: right; font-size: .9em; font-weight: 100; padding-right: 8px;} .btn_bo_user {float:right;margin:0;padding:0;list-style:none; } .btn_bo_user li {float:left;margin-left:5px} .btn_bo_adm {float:left} .btn_bo_adm li {float:left;margin-right:5px} .btn_bo_adm input, .btn_bo_adm button{} .bo_notice td {background:#f5f6fa} .bo_notice td a {font-weight:bold} .td_num strong {position:relative;z-index:2;font-size: .8rem;color:#fff;} .bo_cate_link {display:inline-block;margin:0 3px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none} /* 글제목줄 분류스타일 */ .bo_current {} #bo_list .cnt_cmt {display:inline-block; font-weight: bold; margin-left: 5px;} .bo_fx ul li{list-style:none} .wp-editor-container {border: 1px solid #ddd; } #bo_sch {margin-bottom:10px;padding-top:5px;text-align:center} #bo_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;border:0;} /* 리스트 검색 폼 */ #bo_sch select{margin:0;height:auto !important;vertical-align:middle;font-size:1em;width:auto;} #bo_sch select[name="sfl"]{display:inline-block;height:30px !important;width:auto;padding-top:2px;padding-bottom:2px} #bo_sch input[type="text"].frm_input{display:inline-block;margin:0;padding:2px !important;width:98px;height:30px;vertical-align:middle;font-size:1em;line-height:1em} #bo_sch input[type="submit"].btn_submit{margin:0;vertical-align:middle;height:30px !important;padding:.5em .8em !important;font-size:1em;height:auto;line-height:1em} /* 게시판 쓰기 */ #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} /* 게시판 읽기 */ #bo_v {margin-bottom:20px;padding-bottom:20px} #bo_v .sv_wrap a {border:0} #bo_v .bo-tags { margin: 20px 0; border-top: 1px solid #f1f1f1; padding-top: 15px;} #bo_v .bo-tags-view a {border:0} #bo_v .bo-tags-view a:before { display: inline-block; margin: 0 0 0 8px; content: ""; font-family: "genericons"; font-size: 1.3em; vertical-align: bottom;} #bo_v_table {display:none;position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em} #bo_v_title {margin-top: 0;font-size:1.6rem; font-weight:700;line-height:1.5;max-width:inherit;} #bo_v_info {border-bottom: 1px solid #777; padding-bottom: 2em;} #bo_v #bo_v_info h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v #bo_v_info strong {display:inline-block;margin:0 15px 0 5px;font-weight:normal} #bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .member, #bo_v_info .guest {font-weight:bold} #bo_v_file { max-width: 700px; overflow: hidden; z-index: 9; position: relative;} #bo_v_file h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_file ul {margin:-1px 0 0 0;padding:0;list-style:none} #bo_v_file li {position:relative; width:100%; color:#ccc;} #bo_v_file li a { background: #5C5F69 url(./img/download-icon.png) no-repeat left center; list-style: none; padding: 10px 10px 10px 45px;font-size: .9rem; color: #ccc;position: relative; background-position: 0 -36px; transition: all .4s;display: block; } span.bo_v_file { margin-right: 5px; } span.bo_v_file_date { font-size: .8rem; } #bo_v_file li a:hover { background: #4A8AC4 url(./img/download-icon.png) no-repeat left center; background-position: 0 12px; color: #f0f0f0; } #bo_v_file a:focus, #bo_v_file a:hover, #bo_v_file a:active {text-decoration:none} #bo_v_file img {float:left;margin:0 10px 0 0;vertical-align:middle} .bo_v_file_cnt { position: absolute; right: 10px; background: #444957; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; font-size: .8em; color: #f6f6f6;} #bo_v_link {} #bo_v_link h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_link ul {margin:0;padding:0;list-style:none} #bo_v_link li {padding:0 10px;border-bottom:1px solid #eee;background:#f5f6fa;list-style:none} #bo_v_link a {border:0;display:inline-block;padding:8px 0 7px;width:100%;color:#000;word-wrap:break-word} #bo_v_link a:focus, #bo_v_link a:hover, #bo_v_link a:active {text-decoration:none} .bo_v_link_cnt {display:inline-block;margin:0 0 3px 16px} #bo_v_link a img{display:inline-block;vertical-align:middle} #bo_v_top {margin:0 0 10px;padding:10px 0;zoom:1} #bo_v_top:after {display:block;visibility:hidden;clear:both;content:""} #bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_top ul {margin:0;padding:0;list-style:none} #bo_v_bot {zoom:1} #bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""} #bo_v_bot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_bot ul {margin:0;padding:0;list-style:none} .bo_v_nb {max-width:700px;} .bo_v_nb li {margin:0 5px 10px 0;list-style:none !important} .bo_v_nb li a {width:100%;} .bo_v_com {float:right} .bo_v_com li {float:left;margin-left:5px;list-style:none !important} #bo_v_atc {min-height:200px;height:auto !important;height:200px} #bo_v_atc #bo_v_atc_title {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_atc img {max-width:700px;} #bo_v_img {margin:0 0 10px;width:100%;overflow:hidden;zoom:1} #bo_v_img:after {display:block;visibility:hidden;clear:both;content:""} #bo_v_img img {margin-bottom:20px;max-width:100%;height:auto} #bo_v_con {margin-bottom:40px;width:100%;line-height:1.7em;word-break:break-all;overflow:hidden;min-height:80px;max-width:700px;position:relative;z-index:2} #bo_v_con a {color:#000;text-decoration:underline} #bo_v_con img {max-width:100%;height:auto} #bo_v_act {display:none;} #bo_v_act .bo_v_act_gng {position:relative} #bo_v_act a {margin-right:5px;vertical-align:middle} #bo_v_act strong {color:#ff3061} #bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center} #bo_v_sns { list-style: none; width: 100%; margin: 0 auto; background: #f9f9f9; box-shadow: 0px 1px 2px #D5D5D5; border-radius: 3px; padding: 13px 0 10px 20px; box-sizing: border-box;} #bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""} #bo_v_sns li {float:left;margin:0 5px 0 0} /* 게시판 댓글 */ #bo_vc {outline:none;} #bo_v #bo_vc h2 {margin: 0; margin-bottom: 10px; font-size: 1em; width: 100%; margin: -3px auto 20px auto; box-shadow: 0px 1px 2px #D5D5D5; padding: 13px 0 10px 20px; background: #FFFFFF; line-height: 32px; color: #222; border-radius: 0 0 3px 3px; box-sizing: border-box; position:relative; max-width:inherit; } #bo_v #bo_vc h2 span { border-radius: 50%; background: #86bcc3; color: #fff; position: absolute; top: 14px; left: 60px; text-align: center; line-height: 30px; width: 30px; height: 30px; font-size: .8em; font-weight: 500; } #bo_vc article { padding: 0 0 10px;} #bo_vc .sv_wrap {margin-right:15px} #bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold} .side-meta.board span.sv_member:before, .side-meta.board span.sv_guest:before { content: ""; font-family: "Genericons"; font-size: 1.4rem; vertical-align: bottom; } .bo_vc_hdinfo {display:inline-block;margin:0 15px 0 5px} #bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_vc a {text-decoration:none;font-size:.9em;} #bo_vc p {padding:0 0 5px;line-height:1.8em} #bo_vc p a {text-decoration:underline} #bo_vc_empty {margin:0;padding:20px !important;text-align:center} #bo_vc #bo_vc_winfo { } #bo_vc footer {zoom:1;float:none;width:100%} #bo_vc footer:after {display:block;visibility:hidden;clear:both;content:""} #bo_vc_w { } #bo_v #bo_vc_w h2 { } #bo_vc_w #char_cnt { } /* 쓰기페이지 태그 */ .screen-reader-text{display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} #post_tag ul.tagit li.tagit-new {padding: .25em 4px .25em 0} #bo_w #post_tag ul.tagit input[type="text"].ui-autocomplete-input { -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; width: inherit !important; background-color: inherit !important; outline: none !important; } #post_tag ul.tagit{margin-top:0;margin-bottom:20px} #post_tag ul.tagit li{list-style:none} @media screen and (max-width: 768px) { .tbl_wrap .wr_good, .tbl_wrap .wr_nogood {display:none} .col60, .board-meta { width: 100%; display: block !important; padding-left: 40px; } #post-115 .col60 {padding-left:0px;} li.post.icon_reply .board-meta {margin-top: -20px;} li.post.icon_reply .board-meta .wr_writer { margin-left:40px; } .wr_datetime { position: absolute; right: 10px; font-size: .8rem; } li.post.icon_reply:before { height: 3px; background: #fff; top:-1px; } li.post.icon_reply { background: #f9f9f9; } #post-215 a.wr_subject, a.wr_subject.is-secret { white-space: nowrap; text-overflow: ellipsis; } #post-215 a.wr_subject { padding-left:36px; } .col5.td_num.wr_number { position: absolute; border-radius: 50%; font-size: .7rem; width: 30px; height: 30px; line-height: 30px; top: 10px; background: #444; color: #fff; } li.post.icon_reply .col5.td_num.wr_number {display:none !important;} .col60 { } article#post-115 {} #post-215 .col60, li.post.icon_reply.is-secret .col60 { text-indent: 0px; } a.is-secret:after, li.post .wr_writer span.list-avatar { opacity: .3; } li.post.icon_reply.is-secret span { opacity:1 } #post-215 li.post:nth-child(even) { background: #f9f9f9; } input#user_name, input#user_pass, input#user_email, .frm_file {width:100% !important;} .col10.td_name.sv_use.wr_writer { float: right; margin-right: 80px; } .wr_hit {display:none !important;} } @media screen and (max-width: 640px) { #bo_sch select{width:auto} #ajax-file-upload-container .highlight, .ajax-file-upload-statusbar { width: 98% !important; } .current-avatar { } .comment-parent, .tbl_frm01.tbl_wrap, .comment-parent article.cmt-parent {width:100%;} article.cmt-child { padding-left: 30px !important;} .cmt-child .comment-avatar {width: 40px;height: 40px;top:7px;} ol#ajax-file-upload-container img { max-width: 120px !important; } /* 업로드 헤더: 안내문 + 버튼을 위아래로 */ .g5u-head{flex-direction:column; align-items:stretch;} .g5u-drop{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:10px; } .g5u-btn{width:100%;} /* 리스트 아이템: 좌우 배치 -> 위아래 배치 */ .g5u-item{ flex-direction:column; gap:10px; align-items:stretch; } /* li 내부 첫 번째 래퍼(div inline style)와 .g5u-right 모두 세로로 */ .g5u-item > div:first-child{ display:flex !important; flex-direction:column; align-items:stretch !important; gap:8px !important; } .g5u-right{ flex-direction:column; align-items:stretch; gap:8px; } .g5u-content{width:100%;} .g5u-del{width:100%;} /* 썸네일: 모바일에서 가로 꽉(너무 커지지 않게) */ .g5u-thumb{ width:100%; max-width:340px; height:auto; } /* ========================= "이미지일 때만" 메타를 썸네일 아래 + 파일명/용량 한 줄 - 현재 구조상 pdf는 img가 display:none 처리됨 => img가 실제로 보이는(이미지) 경우만 적용 ========================= */ .g5u-item > div:first-child:has(img.g5u-thumb:not([style*="display: none"])) .g5u-meta{ min-width:0; width:100%; flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; } /* 파일명/용량 같은 라인 + 줄바꿈 방지(너무 길면 …) */ .g5u-item > div:first-child:has(img.g5u-thumb:not([style*="display: none"])) .g5u-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .g5u-item > div:first-child:has(img.g5u-thumb:not([style*="display: none"])) .g5u-size{ white-space:nowrap; flex:0 0 auto; opacity:.7; } /* pdf 같이 썸네일이 숨겨진 경우(메타는 그냥 세로로) */ .g5u-meta{ min-width:0; width:100%; } /* 핸들: 모바일에서 터치하기 쉽게 */ .g5u-handle{ width:100%; text-align:center; padding:12px 12px; } /* 번호 배지 위치 살짝 조정(세로 스택에서 겹침 방지) */ li.g5u-item:before{ top:-10px; left:-10px; } } @media screen and (max-width: 500px) { .ajax-file-upload-preview { max-width: 70px; } .extrahtml input.ed { max-width: 180px; } .ajax-file-upload-statusbar { min-height:80px; width:90%; } #ajax-file-upload-container .highlight { min-height:78px !important; line-height:78px ; } #bo_sch select[name="sfl"] {width:100px} /* li.post.icon_reply.is-secret .board-meta .wr_datetime { margin-left:-40px; } */ } /* 수정·삭제 제한 버튼 */ a.g5-action-disabled[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } a.g5-action-disabled[aria-disabled="true"]:hover, a.g5-action-disabled[aria-disabled="true"]:focus { opacity: 0.7; } /* 우측 하단 AJAX 알림 fallback */ #g5c-toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 1200000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .g5c-toast { min-width: 220px; max-width: 340px; padding: 12px 14px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); color: #fff; font-size: 14px; line-height: 1.35; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: auto; word-break: break-word; } .g5c-toast.is-show { opacity: 1; transform: translateY(0); } .g5c-toast--error { background: #dc3545; } @media screen and (max-width: 639px) { #g5c-toast-host { right: 12px; bottom: 12px; left: 12px; } .g5c-toast { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } } /* Masonry list */ .g5-masonry-header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 auto 24px;max-width:1400px;padding:24px 16px 0}.g5-masonry-header .page-title{margin:0}.g5-masonry-header p{margin:6px 0 0;color:#777}.g5-masonry-actions{display:flex;gap:8px}.g5-masonry-filters{max-width:1400px;margin:0 auto 24px;padding:16px;border:1px solid #e9e9e9;border-radius:16px;background:#fff}.g5-masonry-filter-row{display:flex;gap:14px;align-items:flex-start}.g5-masonry-filter-row+ .g5-masonry-filter-row{margin-top:12px}.g5-masonry-filter-row strong{min-width:64px;padding-top:7px}.g5-masonry-filter-row ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}.g5-masonry-filter-row a{display:inline-flex;gap:5px;align-items:center;padding:7px 10px;border-radius:999px;background:#f4f4f4;text-decoration:none}.g5-masonry-filter-row a.is-active,.g5-masonry-filter-row .bo_cate_on{background:#222;color:#fff}.g5-masonry-filter-row small{opacity:.65}.g5-masonry-reset{display:inline-block;margin-top:12px}.g5-masonry-board{max-width:1400px;margin:0 auto;padding:0 16px 48px}.g5-masonry-grid{position:relative;width:100%}.g5-masonry-sizer,.g5-masonry-item{width:100%}.g5-masonry-gutter{width:12px}.g5-masonry-item{margin-bottom:12px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.07);position:relative;transition:transform .2s ease,box-shadow .2s ease}.g5-masonry-item:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.12)}.g5-masonry-item.is-notice{background:#f2f2f2}.g5-masonry-thumbnail img{display:block;width:100%;height:auto}.g5-masonry-content{padding:14px}.g5-masonry-kicker,.g5-masonry-meta{display:flex;flex-wrap:wrap;gap:8px;color:#888;font-size:12px}.g5-masonry-kicker .is-notice{font-weight:700;color:#b42318}.g5-masonry-title{margin:8px 0 10px;font-size:18px;line-height:1.4}.g5-masonry-excerpt{margin:0 0 13px;color:#555;line-height:1.65}.g5-masonry-tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:2;margin-bottom:12px}.g5-masonry-tag{padding:4px 7px;border-radius:6px;background:#f3f3f3;font-size:12px;text-decoration:none}.g5-masonry-meta{padding-top:10px;border-top:1px solid #eee}.g5-masonry-sentinel{height:1px}.g5-masonry-status{text-align:center;padding:18px}.g5-masonry-load-more{display:block;margin:12px auto 0;padding:10px 20px}.g5-masonry-load-more[hidden]{display:none} @media(min-width:360px){.g5-masonry-sizer,.g5-masonry-item{width:calc(50% - 6px)}} @media(min-width:768px){.g5-masonry-gutter{width:24px}.g5-masonry-sizer,.g5-masonry-item{width:calc(33.333% - 16px);margin-bottom:24px}.g5-masonry-content{padding:17px}} @media(min-width:1100px){.g5-masonry-sizer,.g5-masonry-item{width:calc(25% - 18px)}} /* Masonry AJAX 목록 상호작용 */ .g5-masonry-item { /* 작성자 메뉴를 카드 내부에서 확장하므로 바깥 레이어가 필요하지 않습니다. */ overflow: hidden; } .g5-masonry-thumbnail { overflow: hidden; border-radius: 14px 14px 0 0; } .g5-masonry-reply-label { display: inline-flex; align-items: center; margin-right: 5px; padding: 2px 6px; border-radius: 999px; background: #eef2ff; color: #4353a4; font-size: 11px; font-weight: 700; vertical-align: 2px; } .g5-masonry-author { position: relative; z-index: 3; flex: 1 1 100%; min-width: 0; max-width: 100%; } /* * Masonry 목록 작성자 메뉴 * * 일반 사이드뷰처럼 카드 밖에 absolute 레이어를 띄우지 않고 작성자 이름 * 옆에서 카드 내부 패널로 확장합니다. 카드 높이가 늘어나면 Masonry JS가 * class 변경을 감지해 다시 배치합니다. */ .g5-masonry-author .sv_wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; vertical-align: middle; } .g5-masonry-author .sv_member, .g5-masonry-author .sv_guest { display: inline-block; overflow: hidden; max-width: 100%; color: inherit; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .g5-masonry-author .sv, .g5-masonry-author .sv.sv_on { position: static !important; inset: auto !important; z-index: auto; width: auto; height: auto; min-width: 0; margin: 0; border: 0; background: transparent; box-shadow: none; } .g5-masonry-author .sv { display: none; } .g5-masonry-author .sv.sv_on { display: inline-flex !important; flex: 1 1 auto; flex-wrap: wrap; gap: 5px; padding: 7px; border: 1px solid #e3e6eb; border-radius: 9px; background: #f7f8fa; } .g5-masonry-author .sv a { display: inline-flex; align-items: center; width: auto; min-width: 0; margin: 0; padding: 5px 7px; border: 0; border-radius: 6px; background: #fff; color: #3f4650 !important; font-size: 11px; line-height: 1.25; white-space: nowrap; } .g5-masonry-author .sv a:hover, .g5-masonry-author .sv a:focus { background: #e9edf2; } .g5-masonry-author .sv_nojs { display: none; } /* Masonry modal trigger behavior */ .g5-masonry-item[data-g5-modal-view] { cursor: zoom-in; outline: none; } .g5-masonry-item[data-g5-modal-view]:focus-visible { box-shadow: 0 0 0 3px rgba(40, 90, 220, .28), 0 12px 28px rgba(0,0,0,.12); } .g5-masonry-title a { position: relative; z-index: 4; color: inherit; text-decoration: none; } .g5-masonry-title a:hover, .g5-masonry-title a:focus { text-decoration: underline; } .g5-masonry-item a, .g5-masonry-item button, .g5-masonry-item .sv_wrap, .g5-masonry-item .sv { cursor: pointer; } /* 0.83: 목록 카드 클릭 방식 */ .g5-masonry-item[data-g5-modal-view] { cursor: zoom-in; } .g5-masonry-title > span, .g5-masonry-title > a { display: block; color: inherit; text-decoration: none; } .g5-masonry-page-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .g5-masonry-item.is-page-link .g5-masonry-title, .g5-masonry-item.is-page-link .g5-masonry-tags, .g5-masonry-item.is-page-link .g5-masonry-author, .g5-masonry-item.is-page-link .sv_wrap { position: relative; z-index: 3; } /* ========================================================================== Masonry modal view - 모달 레이아웃과 미리보기 전용 스타일 - 테마 수정 위치: gnupress/skin/board/masonry/style.css ========================================================================== */ html.g5-masonry-modal-open, body.g5-masonry-modal-open { overflow: hidden; } body.g5-masonry-modal-open { position: fixed; right: 0; left: 0; width: 100%; } .g5-masonry-modal-overlay { position: fixed; inset: 0; z-index: 1000000; display: grid; place-items: center; padding: 24px; background: rgba(10, 10, 12, .78); opacity: 0; transition: opacity .18s ease; } .g5-masonry-modal-overlay[hidden] { display: none; } .g5-masonry-modal-overlay.is-open { opacity: 1; } .g5-masonry-modal-dialog { position: relative; width: min(1280px, 96vw); height: min(880px, 92vh); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 90px rgba(0, 0, 0, .38); } .g5-masonry-modal-close { position: absolute; top: 12px; right: 12px; z-index: 20; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(20, 20, 20, .78); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .g5-masonry-modal-container, .g5-masonry-modal-view { width: 100%; height: 100%; } .g5-masonry-modal-view { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr); background: #fff; } .g5-masonry-modal-view.no-media { grid-template-columns: minmax(0, 1fr); } .g5-masonry-modal-media { position: relative; min-width: 0; overflow: hidden; background: #0e0e10; } .g5-masonry-modal-media-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } .g5-masonry-modal-media-track::-webkit-scrollbar { display: none; } .g5-masonry-modal-media-slide { display: grid; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; place-items: center; scroll-snap-align: start; } .g5-masonry-modal-media-slide img { display: block; width: 100%; height: 100%; object-fit: contain; } .g5-masonry-modal-media-nav { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: 30px; line-height: 1; cursor: pointer; } .g5-masonry-modal-media-nav.is-prev { left: 14px; } .g5-masonry-modal-media-nav.is-next { right: 14px; } .g5-masonry-modal-media-count { position: absolute; right: 16px; bottom: 16px; z-index: 3; padding: 5px 9px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; } .g5-masonry-modal-panel { position: relative; z-index: 1; display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; } .g5-masonry-modal-header { position: relative; z-index: 40; overflow: visible; padding: 24px 26px 18px; border-bottom: 1px solid #ececef; } .g5-masonry-modal-kicker, .g5-masonry-modal-author-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: #777; font-size: 12px; } .g5-masonry-modal-title { margin: 9px 48px 10px 0; font-size: clamp(21px, 2vw, 30px); line-height: 1.32; } .g5-masonry-modal-title a { color: inherit; text-decoration: none; } .g5-masonry-modal-title a:hover { text-decoration: underline; } .g5-masonry-modal-author, .g5-masonry-modal-author .sv_wrap { position: relative; z-index: 60; } .g5-masonry-modal-author .sv { top: calc(100% + 6px); left: 0; z-index: 80; min-width: max-content; margin-top: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .24); } .g5-masonry-modal-author .sv a { width: auto; min-width: 110px; white-space: nowrap; } .g5-masonry-modal-scroll { position: relative; z-index: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .g5-masonry-modal-post-content { padding: 24px 26px 12px; } .g5-masonry-modal-body { font-size: 15px; line-height: 1.75; word-break: break-word; } .g5-masonry-modal-body img { max-width: 100%; height: auto; } .g5-masonry-modal-custom-fields { margin-bottom: 18px; } .g5-masonry-modal-tags, .g5-masonry-modal-reactions, .g5-masonry-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; } .g5-masonry-modal-tags { margin-top: 20px; } .g5-masonry-modal-tag, .g5-masonry-modal-reactions a, .g5-masonry-modal-reactions button, .g5-masonry-modal-reactions > span:not(.g5-masonry-modal-reaction-status), .g5-masonry-modal-actions a, .g5-masonry-modal-full-link { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid #e1e1e5; border-radius: 999px; background: #fff; color: #333; font: inherit; font-size: 12px; text-decoration: none; } .g5-masonry-modal-reactions { margin-top: 14px; } .g5-masonry-modal-reactions button { cursor: pointer; } .g5-masonry-modal-reactions button.is-complete { border-color: #b7dfc5; background: #edf9f1; color: #176b36; } .g5-masonry-modal-reaction-status { display: block; flex-basis: 100%; min-height: 18px; padding: 0; border: 0; background: transparent; color: #555; font-size: 12px; } .g5-masonry-modal-reaction-status.is-error { color: #b42318; } .g5-masonry-modal-files { margin-top: 22px; padding-top: 18px; border-top: 1px solid #ececef; } .g5-masonry-modal-files h2 { font-size: 14px; } .g5-masonry-modal-files ul { margin: 0; padding: 0; list-style: none; } .g5-masonry-modal-comments { padding: 0 26px 26px; border-top: 1px solid #ececef; } .g5-masonry-modal-comments .g5-comment-context { padding-top: 20px; } .g5-masonry-modal-comments-loading, .g5-masonry-modal-comments-error { display: grid; min-height: 120px; place-content: center; gap: 10px; padding: 24px 0; color: #666; text-align: center; } .g5-masonry-modal-comments-loading p, .g5-masonry-modal-comments-error p { margin: 0; } .g5-masonry-modal-comments-loading .spinner { width: 24px; height: 24px; margin: 0 auto; border: 3px solid rgba(0, 0, 0, .12); border-top-color: #333; border-radius: 50%; animation: g5-masonry-modal-spin .7s linear infinite; } .g5-masonry-modal-comments-error button { justify-self: center; min-height: 34px; padding: 6px 14px; border: 1px solid #d7d7dc; border-radius: 999px; background: #fff; color: #333; cursor: pointer; } @keyframes g5-masonry-modal-spin { to { transform: rotate(360deg); } } .g5-masonry-modal-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid #ececef; background: #fff; } .g5-masonry-modal-loading, .g5-masonry-modal-message { display: grid; height: 100%; place-content: center; gap: 12px; padding: 40px; text-align: center; } .g5-masonry-modal-message a { display: inline-flex; justify-content: center; padding: 10px 16px; border-radius: 999px; background: #222; color: #fff; text-decoration: none; } @media (max-width: 900px) { .g5-masonry-modal-overlay { padding: 0; } .g5-masonry-modal-dialog { width: 100vw; height: 100dvh; border-radius: 0; } .g5-masonry-modal-view { display: block; overflow-y: auto; } .g5-masonry-modal-media { height: min(68vh, 620px); } .g5-masonry-modal-panel { display: block; } .g5-masonry-modal-scroll { overflow: visible; } .g5-masonry-modal-footer { position: sticky; bottom: 0; z-index: 5; } } @media (max-width: 520px) { .g5-masonry-modal-media { height: 56vh; } .g5-masonry-modal-header, .g5-masonry-modal-post-content, .g5-masonry-modal-comments { padding-right: 16px; padding-left: 16px; } .g5-masonry-modal-footer { align-items: stretch; flex-direction: column; } } /* 클릭 즉시 카드 내용을 보여 주고, 서버 본문은 뒤에서 교체합니다. */ .g5-masonry-modal-preview { display: grid; grid-template-columns: minmax(220px, 44%) minmax(0, 1fr); min-height: 100%; background: #fff; } .g5-masonry-modal-preview-media { display: grid; min-height: 320px; place-items: center; overflow: hidden; background: #f2f2f2; } .g5-masonry-modal-preview-media img { width: 100%; height: 100%; object-fit: contain; } .g5-masonry-modal-preview-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 44px; } .g5-masonry-modal-preview-body > strong { font-size: clamp(22px, 3vw, 36px); line-height: 1.35; } .g5-masonry-modal-preview-status { display: inline-flex; align-items: center; gap: 10px; color: #777; } @media (max-width: 900px) { .g5-masonry-modal-preview { display: block; overflow-y: auto; } .g5-masonry-modal-preview-media { min-height: 48vh; max-height: 62vh; } .g5-masonry-modal-preview-body { padding: 28px 20px 80px; } } /* ========================== End: Masonry modal view ========================== */