/* ========================================================= 웅녀범이 CMS v1.4.2 추가 기능 전용 CSS 기존 style.css를 덮지 않고 필요한 기능만 보강합니다. ========================================================= */ .ub-static-page{max-width:800px;margin:42px auto;padding:0 18px;line-height:1.8}.ub-static-page h1{margin-bottom:24px}.ub-static-page h2{margin-top:34px}.ub-policy-date{margin-top:40px;color:#777}.ub-contact-form{margin-top:28px}.ub-note{padding:14px 16px;border:1px solid #eadfce;border-radius:12px;background:#fffaf2} .ub-footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.92rem}.ub-footer-links a{text-decoration:none} .ub-like-wrap{display:flex;align-items:center;gap:10px;margin:14px 0 4px}.ub-like-button{border:1px solid #d9c7ae;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font:inherit}.ub-like-button[disabled]{opacity:.68;cursor:default}.ub-like-count{font-size:.9rem;white-space:nowrap} .ub-card-like{margin-left:6px;font-size:.9em;white-space:nowrap}.ub-free-media{margin:20px auto;max-width:100%}.ub-free-media img,.ub-free-media video{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:10px} /* ========================================================= 카페24 게시판에서 사용하던 웅녀·범이·마르 말풍선 복구 - 기존 ung-talk HTML이 남아 있으면 그대로 다시 스타일링합니다. - JS가 '범이/웅녀/마르 + 줄바꿈' 형식의 옛 대사도 자동 복원합니다. v1.6.17: 얼굴 아이콘 크기를 52px -> 57px로 키웠습니다. (아래 .ung-talk::before 의 width/height 값) 임금·관리(72px)와 모바일(42px)은 기존 값을 그대로 둡니다. v1.6.18: 말풍선 색을 캐릭터에 맞게 조정했습니다. - 웅녀 : 분홍(#ffe3ec) -> 연밤색(#BB8F56), 글자 #4A3524 - 마르 : 연두(#e8f5df) -> 보라핑크(#C276C2), 글자 #5A3462 - 범이 : 기존 색(#FFA539) 그대로 말풍선 꼬리 색도 배경과 같은 값으로 함께 바뀝니다. ========================================================= */ .ung-talk{display:flex!important;align-items:flex-start!important;gap:10px!important;margin:16px 0!important;width:100%!important;max-width:680px!important}.ung-talk::before{content:''!important;flex:0 0 auto!important;box-sizing:border-box!important;width:57px!important;height:57px!important;border-radius:50%!important;background-color:#fff!important;background-size:82%!important;background-position:center!important;background-repeat:no-repeat!important;border:5px solid #eee!important}.ung-talk-ungnyeo::before{background-image:url('../icons/ungnyeo.png')!important}.ung-talk-beomi::before{background-image:url('../icons/beomi.png')!important}.ung-talk-mareu::before{background-image:url('../icons/mareu.png')!important}.ung-talk-official::before{background-image:url('../icons/official.png')!important}.ung-talk-king::before{background-image:url('../icons/king.png')!important}.ung-talk-left{flex-direction:row!important;justify-content:flex-start!important}.ung-talk-right{flex-direction:row-reverse!important;justify-content:flex-start!important}.ung-talk-bubble{position:relative!important;max-width:72%!important;padding:12px 16px!important;border-radius:16px!important;line-height:1.75!important;word-break:keep-all!important}.ung-talk-bubble p{margin:0!important}.ung-talk-ungnyeo .ung-talk-bubble{background:#BB8F56!important;color:#4A3524!important}.ung-talk-beomi .ung-talk-bubble{background:#FFA539!important;color:#5a3a1a!important}.ung-talk-mareu .ung-talk-bubble{background:#C276C2!important;color:#5A3462!important}.ung-talk-official .ung-talk-bubble{background:#72A9D4!important;color:#24445d!important}.ung-talk-king .ung-talk-bubble{background:#CA9A72!important;color:#6b3c22!important}/* v1.6.21: 꼬리를 두 겹으로 다시 그립니다. - 왼쪽 말풍선(::before가 큰 삼각형=테두리색, ::after가 작은 삼각형=흰색) - 오른쪽 말풍선(::after가 큰 삼각형=테두리색, ::before가 작은 삼각형=흰색) 흰 삼각형을 안쪽으로 겹치면, 테두리색 부분만 얇은 띠처럼 남아 말풍선 테두리가 꼬리 끝까지 이어지는 것처럼 보입니다. 기존(6px 8px 6px 0, -7px)보다 크게 키워 꼬리를 더 길게 만들었습니다. */ /* 왼쪽 말풍선 꼬리 — 바깥(테두리색) */ .ung-talk-left .ung-talk-bubble::before{content:''!important;position:absolute!important;left:-13px!important;top:24px!important;border-width:9px 13px 9px 0!important;border-style:solid!important;border-color:transparent!important;z-index:1!important} /* 왼쪽 말풍선 꼬리 — 안쪽(흰색, 위에 겹쳐서 테두리만 남김) */ .ung-talk-left .ung-talk-bubble::after{content:''!important;position:absolute!important;left:-9px!important;top:26px!important;border-width:7px 11px 7px 0!important;border-style:solid!important;border-color:transparent!important;border-right-color:#fff!important;z-index:2!important} /* 오른쪽 말풍선 꼬리 — 바깥(테두리색) */ .ung-talk-right .ung-talk-bubble::after{content:''!important;position:absolute!important;right:-13px!important;top:24px!important;border-width:9px 0 9px 13px!important;border-style:solid!important;border-color:transparent!important;z-index:1!important} /* 오른쪽 말풍선 꼬리 — 안쪽(흰색, 위에 겹쳐서 테두리만 남김) */ .ung-talk-right .ung-talk-bubble::before{content:''!important;position:absolute!important;right:-9px!important;top:26px!important;border-width:7px 0 7px 11px!important;border-style:solid!important;border-color:transparent!important;border-left-color:#fff!important;z-index:2!important} .ung-talk-left.ung-talk-ungnyeo .ung-talk-bubble::before{border-right-color:#BB8F56!important} .ung-talk-left.ung-talk-beomi .ung-talk-bubble::before{border-right-color:#FFA539!important} .ung-talk-left.ung-talk-mareu .ung-talk-bubble::before{border-right-color:#C276C2!important} .ung-talk-left.ung-talk-official .ung-talk-bubble::before{border-right-color:#72A9D4!important} .ung-talk-left.ung-talk-king .ung-talk-bubble::before{border-right-color:#CA9A72!important} .ung-talk-right.ung-talk-ungnyeo .ung-talk-bubble::after{border-left-color:#BB8F56!important} .ung-talk-right.ung-talk-beomi .ung-talk-bubble::after{border-left-color:#FFA539!important} .ung-talk-right.ung-talk-mareu .ung-talk-bubble::after{border-left-color:#C276C2!important} .ung-talk-right.ung-talk-official .ung-talk-bubble::after{border-left-color:#72A9D4!important} .ung-talk-right.ung-talk-king .ung-talk-bubble::after{border-left-color:#CA9A72!important} /* 카페24에서 만든 카드/오버레이/퀴즈 HTML이 독립 CMS에서도 최소한 깨지지 않게 하는 호환 스타일 */ .ung-card-block{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:18px;align-items:center;margin:22px 0;padding:16px;border:1px solid #e6e6e6;border-radius:14px;background:#fff;box-sizing:border-box}.ung-card-image img{display:block;width:100%;height:auto;border-radius:10px}.ung-card-text{min-width:0;line-height:1.75}.ung-overlay-img{position:relative;overflow:hidden;border-radius:12px;margin:22px auto;max-width:100%}.ung-overlay-img>img{display:block;width:100%;height:auto}.ung-overlay-text{position:absolute;left:6%;right:6%;bottom:7%;padding:12px 15px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff!important;text-align:center;line-height:1.5}.ung-quiz-box{margin:22px 0;padding:18px;border:1px solid #e4e7eb;border-radius:14px;background:#fff}.ung-quiz-text{font-weight:700;margin-bottom:12px}.ung-quiz-option{display:block;width:100%;margin:8px 0;padding:11px 13px;border:1px solid #d9dde3;border-radius:10px;background:#fff;text-align:left}.ung-emoticon-img{display:inline-block;max-width:96px;height:auto;vertical-align:middle} @media(max-width:600px){.ung-card-block{grid-template-columns:1fr}.ung-overlay-text{left:4%;right:4%;bottom:5%;padding:9px 11px}} /* ========================================================= v1.4.2 댓글 패널 — 카페24 게시판의 댓글 감각을 독립 CMS에 복원 - 봄돌이 이모티콘 / 일반 이모지 - AJAX 등록 / 대댓글 - 모바일에서도 입력창과 이모티콘이 크게 보이도록 구성 ========================================================= */ .ub-comments-mount{max-width:800px;margin:34px auto 48px;padding:0 16px;box-sizing:border-box}.ub-comments-panel{border-top:2px solid #ece7de;padding-top:20px}.ub-comments-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}.ub-comments-title-row h2{margin:0;font-size:22px}.ub-comments-title-row h2 span{font-size:.88em;color:#8a6c3d}.ub-comments-title-row small{color:#777}.ub-comment-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.ub-comment-empty{padding:18px;border:1px dashed #d8d3ca;border-radius:12px;background:#fffdf9;color:#777;text-align:center}.ub-comment-item{margin-left:calc(min(var(--ub-depth),5) * 18px);padding:13px 14px;border:1px solid #e8e2d9;border-radius:12px;background:#fff;box-sizing:border-box}.ub-comment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}.ub-comment-head strong{display:inline-block;padding:3px 8px;border:1px solid #eadca6;border-radius:999px;background:#fffdf0;color:#80651b;font-size:14px}.ub-comment-head time{font-size:12px;color:#888}.ub-comment-body{font-size:15px;line-height:1.75;word-break:break-word}.ub-comment-reply{margin-top:8px;padding:4px 8px;border:0;background:transparent;color:#6b6259;font:inherit;font-size:13px;cursor:pointer}.ub-comment-reply:hover{text-decoration:underline}.ub-comment-form{padding:16px;border:1px solid #e7e1d8;border-radius:14px;background:#fffdf9}.ub-comment-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.ub-comment-fields label,.ub-comment-bottom label{font-size:13px;font-weight:700}.ub-comment-fields input,.ub-comment-bottom input{display:block;width:100%;margin-top:5px;padding:9px 10px;border:1px solid #d9d3ca;border-radius:9px;background:#fff;box-sizing:border-box;font:inherit}.ub-comment-fields small{display:block;margin-top:3px;color:#888;font-weight:400}.ub-editor-wrap{position:relative}.ub-comment-editor{min-height:110px;padding:12px;border:1px solid #d9d3ca;border-radius:10px;background:#fff;line-height:1.7;outline:none;word-break:break-word}.ub-comment-editor:empty::before{content:attr(data-placeholder);color:#aaa;pointer-events:none}.ub-comment-hidden-content{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.ub-editor-tools{display:flex;gap:8px;margin-top:8px}.ub-emoticon-toggle,.ub-emoji-toggle{min-height:36px;padding:0 12px;border:1px solid #d9d3ca;border-radius:999px;background:#fff;font:inherit;font-size:14px;cursor:pointer}.ub-emoticon-toggle:hover,.ub-emoji-toggle:hover{background:#f8f4ec}.ub-emoticon-popup,.ub-emoji-popup{margin-top:8px;padding:10px;border:1px solid #ddd5c9;border-radius:12px;background:#fff}.ub-bomdol-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.ub-bomdol-pick,.ub-emoji-pick{border:0;border-radius:9px;background:#fff;cursor:pointer}.ub-bomdol-pick{padding:4px}.ub-bomdol-pick:hover,.ub-emoji-pick:hover{background:#f4efe7}.ub-bomdol-pick img{display:block;width:100%;max-width:62px;height:auto;margin:auto}.ub-emoji-popup{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.ub-emoji-pick{padding:7px 4px;font-size:22px}.ub-bomdol-inline{display:inline-block!important;width:78px!important;max-width:78px!important;height:auto!important;margin:2px 3px!important;vertical-align:middle!important;border:0!important;border-radius:0!important}.ub-comment-bottom{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:12px}.ub-comment-bottom label{flex:1;max-width:260px}.ub-comment-submit{min-width:110px}.ub-comment-message{min-height:1.2em;margin:10px 0 0;color:#7a4f23;font-size:13px}.ub-replying{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:8px 10px;border-radius:9px;background:#f7f2e9;font-size:13px}.ub-reply-cancel{border:0;background:transparent;color:#725d3d;cursor:pointer;text-decoration:underline} @media(max-width:700px){.ub-comments-mount{padding:0 12px}.ub-comment-item{margin-left:calc(min(var(--ub-depth),3) * 10px)}.ub-comment-fields{grid-template-columns:1fr}.ub-bomdol-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ub-emoji-popup{grid-template-columns:repeat(4,minmax(0,1fr))}.ub-bomdol-inline{width:68px!important;max-width:68px!important}.ub-comment-bottom{align-items:stretch;flex-direction:column}.ub-comment-bottom label{max-width:none}.ub-comment-submit{width:100%}} /* ========================================================= v1.4.6 HTML 크기·글자크기 우선 적용 핵심 변경 - 게시글 HTML에 적은 width / max-width / font-size / line-height 값을 CMS가 덮어쓰지 않습니다. - CMS가 style 속성을 정리하더라도 ubxcss-* 클래스에 보존된 안전한 스타일을 JS가 복원합니다. - 별도 크기 지정이 없는 과거 글만 기존 기본값(PC 약 60%, 모바일 94%)을 사용합니다. ========================================================= */ .ung-talk-ungnyeo::before{background-image:url('/assets/icons/ungnyeo.png')!important} .ung-talk-beomi::before{background-image:url('/assets/icons/beomi.png')!important} .ung-talk-mareu::before{background-image:url('/assets/icons/mareu.png')!important} /* 사용자 HTML 스타일이 없는 단독 이미지만 기본 크기를 적용합니다. */ .ub-standalone-image-block:not(.ub-user-html-style):not([class*="ubxcss-"]){ width:60%; max-width:60%; margin-left:auto!important; margin-right:auto!important; text-align:center!important; box-sizing:border-box!important; } .ub-standalone-image-block > img, .ub-standalone-image-block > a > img, .ub-standalone-image-block .ub-standalone-image{ display:block!important; max-width:100%!important; height:auto!important; margin-left:auto!important; margin-right:auto!important; } /* 폭을 직접 지정하지 않은 예전 단독 이미지의 기본값 */ img.ub-standalone-image-direct:not(.ub-user-html-style):not([class*="ubxcss-"]){ display:block!important; width:60%; max-width:60%; height:auto!important; margin-left:auto!important; margin-right:auto!important; } /* 본문 글자는 CMS에서 강제 크기를 지정하지 않습니다. HTML의 font-size / line-height가 있으면 복원 JS가 inline !important로 최종 적용합니다. */ .article-content .ub-user-html-style, .ung-view-content .ub-user-html-style, .post-content .ub-user-html-style, .entry-content .ub-user-html-style, .article-body .ub-user-html-style{ box-sizing:border-box; } @media(max-width:700px){ .ub-static-page{margin:24px auto} .ung-talk::before{width:42px!important;height:42px!important;border-width:3px!important} .ung-talk-bubble{max-width:78%!important} .ub-comments-mount{padding:0 12px} .ub-comment-item{margin-left:calc(min(var(--ub-depth),3) * 10px)} .ub-comment-fields{grid-template-columns:1fr} .ub-bomdol-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .ub-emoji-popup{grid-template-columns:repeat(4,minmax(0,1fr))} .ub-bomdol-inline{width:68px!important;max-width:68px!important} .ub-comment-bottom{align-items:stretch;flex-direction:column} .ub-comment-bottom label{max-width:none} .ub-comment-submit{width:100%} .ub-standalone-image-block:not(.ub-user-html-style):not([class*="ubxcss-"]){width:94%;max-width:94%} img.ub-standalone-image-direct:not(.ub-user-html-style):not([class*="ubxcss-"]){width:94%;max-width:94%} } /* ========================================================= v1.4.9 목록 이미지 표시 규칙 - 목록 이미지는 board.php의 카드/목록에서만 사용합니다. - 개별 post.php 상단에 자동 출력된 목록 이미지는 JS가 이 클래스를 붙여 감춥니다. - 사용자가 본문 HTML에 직접 넣은 이미지는 대상이 아닙니다. ========================================================= */ .ub-list-image-single-hidden { display: none !important; } /* ========================================================= v1.5.11 카페24 v3.8.0 슬라이드 복원 최근 고정폭/자동높이/오버랩 실험 기능을 제거하고 카페24 방식으로 되돌립니다. ========================================================= */ /* ================================================== [v3.7.7] 좌우 카드뉴스 슬라이드 ================================================== */ .ung-slider-insert-btn, .ung-slider-html-btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px; border:0;border-radius:8px;background:#7a4e9d;color:#fff; font-size:13px;font-weight:700;cursor:pointer; } .ung-slider-insert-btn:hover, .ung-slider-html-btn:hover { background:#603a7e; } .ung-slider-html-btn { background:#4f6f52; } .ung-cardnews-slider { position:relative; width:min(100%, calc(80vh * 9 / 16)); max-width:750px; margin:24px auto; overflow:hidden; border-radius:12px; background:transparent; touch-action:pan-y; } .ung-cardnews-track { display:flex; width:100%; transition:transform .35s ease; will-change:transform; } .ung-cardnews-slide { position:relative; flex:0 0 100%; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; } .ung-cardnews-slide img { display:block; width:100%; height:auto; max-height:none; aspect-ratio:9 / 16; object-fit:cover; margin:0!important; user-select:none; -webkit-user-drag:none; } .ung-cardnews-caption { position:absolute; left:5%; right:5%; bottom:7%; padding:12px 16px; border-radius:10px; background:rgba(0,0,0,.66); color:#fff; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.8); } .ung-cardnews-caption, .ung-cardnews-caption p { color:#fff!important; font-size:clamp(17px,3.2vw,30px); line-height:1.45; font-weight:800; word-break:keep-all; } .ung-cardnews-caption p { margin:0!important; } .ung-cardnews-caption:empty { display:none; } .ung-cardnews-nav { position:absolute!important; top:50%!important; transform:translateY(-50%)!important; z-index:30!important; display:flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; pointer-events:auto!important; width:44px!important; height:44px!important; padding:0!important; margin:0!important; border:2px solid rgba(255,255,255,.9)!important; border-radius:50%!important; background:rgba(20,20,20,.72)!important; color:#fff!important; font-family:Arial,sans-serif!important; font-size:30px!important; font-weight:700!important; line-height:1!important; box-shadow:0 2px 8px rgba(0,0,0,.35)!important; cursor:pointer!important; opacity:1!important; } .ung-cardnews-prev { left:10px!important; } .ung-cardnews-next { right:10px!important; } .ung-cardnews-nav:hover,.ung-cardnews-nav:focus-visible { background:rgba(20,20,20,.9)!important; } .ung-cardnews-nav:disabled { opacity:.38!important; cursor:default!important; } .ung-cardnews-dots { position:absolute; left:0; right:0; bottom:10px; z-index:10; display:flex; justify-content:center; gap:7px; pointer-events:auto; } .ung-cardnews-caption + .ung-cardnews-dots { bottom:4px; } .ung-cardnews-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.45); } .ung-cardnews-dot.is-active { background:#fff; transform:scale(1.25); } .ung-cardnews-count { position:absolute; top:10px; right:12px; z-index:10; padding:4px 9px; border-radius:999px; background:rgba(0,0,0,.58); color:#fff; font-size:13px; } @media (max-width:600px){ .ung-cardnews-slider{border-radius:8px;margin:18px auto}.ung-cardnews-nav{width:38px!important;height:38px!important;font-size:26px!important} .ung-cardnews-caption{left:4%;right:4%;bottom:8%;padding:9px 11px}.ung-cardnews-caption p{font-size:17px} } /* CMS 자동 슬라이드도 카페24 v3.8.0 모양과 동작을 그대로 사용합니다. */ .ub-slider{ position:relative; width:min(100%, calc(80vh * 9 / 16)); max-width:750px; margin:24px auto; overflow:hidden; border-radius:12px; background:transparent; touch-action:pan-y; } .ub-slider-track{ display:flex; width:100%; transition:transform .35s ease; will-change:transform; } .ub-slide{ position:relative; flex:0 0 100%; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; } .ub-slide img{ display:block; width:100%; height:auto; max-height:none; aspect-ratio:9 / 16; object-fit:cover; margin:0!important; user-select:none; -webkit-user-drag:none; } .ub-slider-arrow{ position:absolute!important; top:50%!important; transform:translateY(-50%)!important; z-index:30!important; display:flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; pointer-events:auto!important; width:44px!important; height:44px!important; padding:0!important; margin:0!important; border:2px solid rgba(255,255,255,.9)!important; border-radius:50%!important; background:rgba(20,20,20,.72)!important; color:#fff!important; font-family:Arial,sans-serif!important; font-size:30px!important; font-weight:700!important; line-height:1!important; box-shadow:0 2px 8px rgba(0,0,0,.35)!important; cursor:pointer!important; opacity:1!important; } .ub-slider-prev{left:10px!important} .ub-slider-next{right:10px!important} .ub-slider-arrow:disabled{opacity:.38!important;cursor:default!important} .ub-slider-dots{ position:absolute;left:0;right:0;bottom:10px;z-index:10; display:flex;justify-content:center;gap:7px;pointer-events:auto; } .ub-slider-dot{ width:8px;height:8px;padding:0;border:0;border-radius:50%; background:rgba(255,255,255,.45); } .ub-slider-dot.is-active{background:#fff;transform:scale(1.25)} .ub-slider-counter{ position:absolute;top:10px;right:12px;z-index:10;padding:4px 9px; border-radius:999px;background:rgba(0,0,0,.58);color:#fff;font-size:13px; } @media(max-width:600px){ .ub-slider{border-radius:8px;margin:18px auto} .ub-slider-arrow{width:38px!important;height:38px!important;font-size:26px!important} } /* ========================================================= v1.5.12 회원 전용 댓글 + 카페24풍 간결한 댓글 디자인 --------------------------------------------------------- - 댓글 목록은 흰 카드 여러 개보다 선으로 구분한 깔끔한 구조 - 작성 영역은 한 덩어리의 심플한 입력 박스 - 비로그인 사용자는 입력폼 대신 로그인 안내만 표시 - 슬라이드 CSS에는 손대지 않습니다. ========================================================= */ .ub-comments-mount{ max-width:800px!important; margin:42px auto 56px!important; padding:0 16px!important; box-sizing:border-box!important; } .ub-comments-panel{ border-top:1px solid #dfd8ce!important; padding-top:20px!important; } .ub-comments-title-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-bottom:18px!important; } .ub-comments-title-row h2{ margin:0!important; font-size:20px!important; line-height:1.35!important; color:#3f2b1d!important; } .ub-comments-title-row h2 span{ color:#946f4f!important; font-size:15px!important; } .ub-comments-title-row small{ color:#9a9087!important; font-size:12px!important; } .ub-comment-list{ display:block!important; margin:0 0 22px!important; } .ub-comment-empty{ margin:0 0 22px!important; padding:28px 16px!important; border:1px solid #ebe5dc!important; border-radius:8px!important; background:#fff!important; color:#8f877f!important; text-align:center!important; } .ub-comment-item{ margin-left:calc(min(var(--ub-depth),5) * 22px)!important; padding:16px 4px 15px!important; border:0!important; border-bottom:1px solid #eee9e2!important; border-radius:0!important; background:transparent!important; } .ub-comment-head{ display:flex!important; align-items:center!important; gap:9px!important; margin-bottom:8px!important; } .ub-comment-head strong{ padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:#4a3526!important; font-size:14px!important; font-weight:750!important; } .ub-comment-head time{ color:#aaa19a!important; font-size:12px!important; } .ub-comment-body{ color:#3f3a36!important; font-size:15px!important; line-height:1.7!important; } .ub-comment-reply{ margin-top:7px!important; padding:0!important; color:#8a6b52!important; font-size:12px!important; } .ub-comment-form{ padding:14px!important; border:1px solid #e3dbd0!important; border-radius:10px!important; background:#fff!important; box-shadow:none!important; } .ub-comment-fields{ gap:8px!important; margin-bottom:10px!important; } .ub-comment-fields input, .ub-comment-bottom input{ border:1px solid #ddd5ca!important; border-radius:7px!important; background:#fff!important; } .ub-comment-editor{ min-height:96px!important; padding:13px 14px!important; border:1px solid #ddd5ca!important; border-radius:8px!important; background:#fff!important; font-size:15px!important; line-height:1.65!important; } .ub-editor-tools{ gap:6px!important; margin-top:8px!important; } .ub-emoticon-toggle, .ub-emoji-toggle{ min-height:32px!important; padding:0 10px!important; border:1px solid #ddd5ca!important; border-radius:7px!important; background:#faf8f5!important; color:#59483b!important; font-size:13px!important; } .ub-emoticon-toggle:hover, .ub-emoji-toggle:hover{ background:#f3eee7!important; } .ub-emoticon-popup, .ub-emoji-popup{ border:1px solid #e3dbd0!important; border-radius:8px!important; box-shadow:0 8px 24px rgba(62,43,29,.08)!important; } .ub-comment-bottom{ margin-top:10px!important; } .ub-comment-submit{ min-width:104px!important; min-height:38px!important; border:0!important; border-radius:7px!important; background:#624025!important; color:#fff!important; font-weight:750!important; cursor:pointer!important; } .ub-comment-submit:hover{ background:#4f321d!important; } .ub-replying{ margin-bottom:9px!important; border-radius:7px!important; background:#f7f2ec!important; } /* 비로그인 회원 안내 */ .ub-comment-login-required{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; padding:16px 18px; border:1px solid #e3dbd0; border-radius:10px; background:#faf8f5; color:#6e6258; font-size:14px; } .ub-comment-login-required a{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px; border-radius:7px; background:#624025; color:#fff!important; font-weight:750; text-decoration:none!important; } .ub-comment-login-required a:hover{ background:#4f321d; } @media(max-width:700px){ .ub-comments-mount{ padding:0 12px!important; } .ub-comment-item{ margin-left:calc(min(var(--ub-depth),3) * 12px)!important; } .ub-comment-login-required{ align-items:stretch; flex-direction:column; } .ub-comment-login-required a{ width:100%; } } /* ========================================================= v1.5.13 댓글 중복 제거 + 비회원 입력폼 완전 숨김 --------------------------------------------------------- - 로그아웃 상태에서는 댓글 관련 입력폼을 모두 숨깁니다. - 새 댓글 패널의 로그인 안내는 그대로 표시합니다. - 예전 CMS의 이름/비밀번호/자동등록방지 댓글폼도 숨깁니다. ========================================================= */ /* 새 댓글폼 */ body[data-member-logged-in="0"] .ub-comment-form{ display:none!important; } /* 과거 댓글폼에서 자주 쓰던 클래스명 */ body[data-member-logged-in="0"] .comment-form, body[data-member-logged-in="0"] .comments-form, body[data-member-logged-in="0"] .comment-write, body[data-member-logged-in="0"] .comment-write-form, body[data-member-logged-in="0"] .comment-form-wrap, body[data-member-logged-in="0"] .legacy-comment-form, body[data-member-logged-in="0"] form[action*="comment"]{ display:none!important; } /* JS가 찾아낸 예전 댓글 영역 */ .ub-legacy-comment-hidden{ display:none!important; } /* 로그인 안내는 항상 한 번만 깔끔하게 */ .ub-comment-login-required{ display:flex!important; } /* ========================================================= v1.5.20 일반 본문 이미지 = 원본 자연크기의 60% 표시 --------------------------------------------------------- 사용자가 이미지를 일정한 원본 크기로 제작해 올린 뒤, 공개 게시글에서는 원본의 60% 크기로 자동 축소해 표시합니다. 예: 원본 563 x 750px -> 약 338 x 450px 원본 900 x 1200px -> 약 540 x 720px 중요: - 원본 이미지 파일은 수정하거나 자르지 않습니다. - 가로/세로 비율을 그대로 유지합니다. - 카페24 카드뉴스 슬라이드는 이 규칙에서 제외합니다. - 말풍선/댓글/이모티콘/오버레이 이미지도 제외합니다. ========================================================= */ /* 단독 이미지의 바깥 wrapper가 60%로 먼저 줄어드는 기존 규칙을 해제합니다. 실제 60% 계산은 아래 JS가 원본 자연크기(naturalWidth)를 기준으로 합니다. */ .ub-standalone-image-block{ width:100%!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; text-align:center!important; box-sizing:border-box!important; } /* JS가 크기를 계산하기 전에도 이미지 비율이 깨지지 않도록 기본 안전 규칙을 둡니다. */ .ub-standalone-image, img.ub-standalone-image-direct{ display:block!important; width:auto; max-width:100%!important; height:auto!important; margin-left:auto!important; margin-right:auto!important; object-fit:contain!important; } /* ========================================================= v1.5.21 일반 본문 이미지 표시 기준 --------------------------------------------------------- JS가 모든 일반 본문 이미지의 비율을 읽어 다음 기준으로 표시합니다. 기준 세로 750px × 60% = 공개 화면 세로 약 450px 가로폭은 이미지 원본 비율에 따라 자동 계산합니다. 이미지 파일은 자르지 않고 원본 비율 그대로 사용합니다. 모바일/본문 폭보다 이미지가 넓어지는 경우에는 max-width:100%로 추가 축소되어 화면 밖으로 나가지 않습니다. 카페24 카드뉴스 슬라이드, 말풍선, 댓글 이모티콘은 제외합니다. ========================================================= */ /* ========================================================= v1.5.23 공개 상단 메뉴 — 연재 하위 메뉴 --------------------------------------------------------- 구조: - 웅녀의 정보통 - 범이의 수다 - 연재 · 길 위의 만물상 · 판결문의 해석 - 법률용어사전 - 자유게시판 - 채널 소개 문의/관리자/서버 현황 같은 관리용 바로가기는 공개 헤더에서 제거합니다.
/를 사용하므로 별도 JavaScript 없이도 PC 클릭과 모바일 터치에서 안정적으로 열고 닫을 수 있습니다. ========================================================= */ .site-menu .ub-series-nav{ position:relative; margin:0; padding:0; } .site-menu .ub-series-nav > summary{ list-style:none; cursor:pointer; color:#423122; font-weight:700; white-space:nowrap; user-select:none; } .site-menu .ub-series-nav > summary::-webkit-details-marker{ display:none; } .site-menu .ub-series-nav > summary::after{ content:'▾'; display:inline-block; margin-left:5px; font-size:.72em; transition:transform .16s ease; } .site-menu .ub-series-nav[open] > summary::after{ transform:rotate(180deg); } .site-menu .ub-series-nav-menu{ position:absolute; top:calc(100% + 10px); left:50%; z-index:120; min-width:190px; padding:8px; border:1px solid #eadfce; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgba(74,53,37,.12); transform:translateX(-50%); } .site-menu .ub-series-nav-menu a{ display:block; padding:9px 12px; border-radius:8px; color:#423122; white-space:nowrap; text-decoration:none; } .site-menu .ub-series-nav-menu a:hover{ background:#fff7ed; text-decoration:none; } /* 모바일 메뉴에서는 드롭다운을 떠 있는 팝업이 아니라 메뉴 안쪽의 자연스러운 하위 목록으로 표시합니다. */ @media(max-width:720px){ .site-menu .ub-series-nav{ width:100%; border-bottom:1px solid rgba(0,0,0,.08); } .site-menu .ub-series-nav > summary{ display:block; width:100%; padding:11px 4px; } .site-menu .ub-series-nav-menu{ position:static; min-width:0; width:100%; padding:0 0 8px 14px; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; } .site-menu .ub-series-nav-menu a{ padding:9px 8px; border-bottom:0; font-weight:650; } } /* ========================================================= v1.5.24 본문 끝 좋아요 --------------------------------------------------------- 좋아요를 댓글 바로 위로 옮겼으므로 본문과 댓글 사이에 자연스럽게 보이도록 위/아래 여백만 정리합니다. ========================================================= */ .article .ub-like-wrap-bottom{ margin:28px 0 8px!important; padding-top:14px; border-top:1px solid #eee6dc; } /* ========================================================= v1.5.26 공개 게시글 판결문 PDF 첨부 --------------------------------------------------------- 실제 판결문 원문을 본문 끝에서 쉽게 열거나 내려받을 수 있게 합니다. PDF 내용 자체를 페이지에 자동 렌더링하지 않아 게시글 성능 부담을 줄입니다. ========================================================= */ .judgment-attachment{ display:flex; align-items:center; gap:14px; margin:30px 0 14px; padding:16px 18px; border:1px solid #e4d8c8; border-radius:12px; background:#fffaf3; } .judgment-attachment-icon{ flex:0 0 auto; font-size:28px; } .judgment-attachment-body{ min-width:0; flex:1 1 auto; } .judgment-attachment-body strong{ display:block; margin-bottom:4px; color:#4e3624; } .judgment-attachment-name{ overflow:hidden; text-overflow:ellipsis; color:#68584b; } .judgment-attachment-name span{ margin-left:6px; color:#9a8b80; font-size:12px; } .judgment-attachment-actions{ display:flex; gap:7px; flex-wrap:wrap; flex:0 0 auto; } @media(max-width:650px){ .judgment-attachment{ align-items:flex-start; flex-wrap:wrap; } .judgment-attachment-actions{ width:100%; } } /* ========================================================= v1.5.42 공개 상단 메뉴 — 버튼형 + 살짝 떠오르는 hover --------------------------------------------------------- PC에서는 평소 단정한 버튼처럼 보이고 마우스를 올리면 4px 위로 부드럽게 올라옵니다. 모바일은 기존 펼침형 메뉴 동작을 유지합니다. ========================================================= */ @media (min-width: 721px) { #site-menu.site-menu { gap: 8px; } #site-menu.site-menu > a, #site-menu.site-menu > .ub-series-nav > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px; box-sizing: border-box; border: 1px solid #eadfce; border-radius: 10px; background: #fffaf5; color: #4a3525; text-decoration: none; font-weight: 700; line-height: 1.2; box-shadow: 0 1px 0 rgba(94, 64, 42, .02); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; } #site-menu.site-menu > a:hover, #site-menu.site-menu > a:focus-visible, #site-menu.site-menu > .ub-series-nav > summary:hover, #site-menu.site-menu > .ub-series-nav > summary:focus-visible { transform: translateY(-4px); background: #fff; border-color: #cfb99f; box-shadow: 0 8px 18px rgba(85, 58, 36, .12); } #site-menu.site-menu > a:active, #site-menu.site-menu > .ub-series-nav > summary:active { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(85, 58, 36, .09); } } /* ========================================================= v1.5.42 운영자 게시글 이미지 — "AI 생성" 화면 오버레이 --------------------------------------------------------- 이미지 파일 자체는 수정하지 않습니다. 일반 본문 이미지 + 카드뉴스/슬라이드 이미지 모두 적용합니다. 글자 내부는 투명, 흰색 테두리는 약 10% 농도로 아주 옅게 표시합니다. 자유게시판 방문자 이미지·댓글 이모티콘 등은 제외합니다. ========================================================= */ .ub-ai-image-wrap { position: relative !important; display: table !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .ub-ai-image-wrap > img { display: block !important; max-width: 100% !important; } .ub-ai-image-host { position: relative !important; } .ub-ai-image-badge { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 4 !important; pointer-events: none !important; user-select: none !important; white-space: nowrap !important; font-family: Arial, "Noto Sans KR", sans-serif !important; font-size: clamp(34px, 8vw, 78px) !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .05em !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 2px rgba(255,255,255,.10) !important; text-shadow: 1px 0 rgba(255,255,255,.05), -1px 0 rgba(255,255,255,.05), 0 1px rgba(255,255,255,.05), 0 -1px rgba(255,255,255,.05) !important; } /* 슬라이드 조작 UI/캡션이 AI 표식보다 항상 위에 보이게 합니다. */ .ung-cardnews-caption { z-index: 6 !important; } .ung-cardnews-nav, .ub-slider-arrow { z-index: 30 !important; } .ung-cardnews-count, .ung-cardnews-dots, .ub-slider-counter, .ub-slider-dots { z-index: 10 !important; } @media (max-width: 600px) { .ub-ai-image-badge { font-size: clamp(30px, 12vw, 58px) !important; -webkit-text-stroke-width: 1.5px !important; } } /* ======================================================== * v1.5.68 PPT형 슬라이드 480px 표시 규칙 * -------------------------------------------------------- * 일반 9:16 카드뉴스 규칙은 변경하지 않습니다. * .ung-ppt-* 및 .ung-ppt-slider 조합에만 적용합니다. * * PC : 480px * 모바일 : 화면이 480px보다 좁으면 100%로 자동 축소 * 이미지 : 원본 비율 유지, 크롭 없음 * ======================================================== */ .ung-cardnews-slider.ung-ppt-slider { width: 480px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* 기존 카드뉴스 트랙 JS는 그대로 사용하고 PPT 폭만 부모 480px에 맞춥니다. */ .ung-ppt-slider .ung-cardnews-track { width: 100% !important; } .ung-ppt-slide { position: relative !important; flex: 0 0 100% !important; width: 100% !important; max-width: 480px !important; overflow: hidden !important; align-items: flex-start !important; justify-content: center !important; } .ung-ppt-slide img { display: block !important; width: 100% !important; max-width: 480px !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; margin: 0 auto !important; } /* PPT 글씨는 기존처럼 이미지 내부 absolute 오버레이를 유지합니다. */ .ung-ppt-caption { position: absolute !important; left: 6% !important; right: 6% !important; width: auto !important; box-sizing: border-box !important; z-index: 20 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; font-size: 16pt !important; line-height: 1.5 !important; font-weight: 700 !important; word-break: keep-all !important; pointer-events: none !important; -webkit-text-stroke: 0.6px rgba(0,0,0,.90); text-shadow: 1px 1px 2px rgba(0,0,0,.95), -1px 1px 2px rgba(0,0,0,.95), 1px -1px 2px rgba(0,0,0,.95), -1px -1px 2px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.85); } .ung-ppt-caption p { margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; word-break: keep-all !important; background: transparent !important; } /* 기존 위 / 가운데 / 아래 위치 선택 기능 유지 */ .ung-ppt-pos-top { top: 24px !important; bottom: auto !important; transform: none !important; } .ung-ppt-pos-middle { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } .ung-ppt-pos-bottom { top: auto !important; bottom: 24px !important; transform: none !important; } /* 기존 왼쪽 / 가운데 / 오른쪽 정렬 기능 유지 */ .ung-ppt-align-left { text-align: left !important; } .ung-ppt-align-center { text-align: center !important; } .ung-ppt-align-right { text-align: right !important; } /* 기존 크기 선택 기능 유지 */ .ung-ppt-size-normal, .ung-ppt-size-normal p { font-size: 16pt !important; line-height: 1.5 !important; } .ung-ppt-size-large, .ung-ppt-size-large p { font-size: 20pt !important; line-height: 1.5 !important; } /* 화살표/카운터/점은 기존 카드뉴스 JS를 그대로 사용합니다. */ .ung-ppt-slider .ung-cardnews-nav { z-index: 40 !important; } .ung-ppt-slider .ung-cardnews-count, .ung-ppt-slider .ung-cardnews-dots { z-index: 30 !important; } /* 480px 이하에서는 부모 화면 폭에 맞춰 자동 축소합니다. */ @media (max-width: 480px) { .ung-cardnews-slider.ung-ppt-slider { width: 100% !important; max-width: 100% !important; } .ung-ppt-slide, .ung-ppt-slide img { width: 100% !important; max-width: 100% !important; } } /* ========================================================= v1.5.67 본문 끝 좋아요·즐겨찾기 안내 --------------------------------------------------------- 공개 게시글의 기존 하단 좋아요 영역 바로 위에 안내문을 자동 표시합니다. 게시글 HTML에는 문구를 직접 넣지 않습니다. 자유게시판 등 다른 화면에는 적용하지 않습니다. ========================================================= */ .article .ub-like-wrap-bottom::before{ content:"글이 도움이 되셨다면 좋아요와 즐겨찾기를 눌러주세요. 웅녀범이가 계속 좋은 정보를 만드는 데 큰 도움이 됩니다."; display:block; flex:0 0 100%; width:100%; box-sizing:border-box; margin:0 0 14px; padding:13px 16px; border:1px solid #dce8dd; border-radius:12px; background:#f7fbf7; color:#3f5145; font-size:15px; font-weight:650; line-height:1.65; text-align:center; word-break:keep-all; } @media (max-width:640px){ .article .ub-like-wrap-bottom::before{ padding:12px 13px; font-size:14px; line-height:1.6; } } /* ========================================================= v1.5.69 운영자 AI 안내문 형광펜 강조 --------------------------------------------------------- 운영자 게시글 상단의 AI 안내문을 본문과 구분되게 표시합니다. "형광펜 칠한 것 같은" 느낌으로 연노랑 배경과 부드러운 경계를 줍니다. 일반 본문 문단에는 영향이 적도록 1) 명시적 AI 안내 클래스 2) 게시글 제목/메타 다음 구분선(hr) 바로 아래 첫 문단 순서로만 적용합니다. ========================================================= */ /* 명시적 클래스가 있는 경우 */ .ub-ai-note, .ub-ai-notice, .article-ai-note, .article-ai-notice, .post-ai-note, .post-ai-notice, .ai-disclosure, .ai-help-notice, .ai-help-disclosure, /* 게시글 본문 상단 구분선 바로 아래 안내문 추정 위치 */ .article hr + p, .article .post-content hr + p, .article .article-content hr + p, .article .entry-content hr + p, .article .post-body hr + p, .article .article-body hr + p { display: block; box-sizing: border-box; width: fit-content; max-width: 100%; margin: 18px 0 26px; padding: 8px 12px 9px; color: #5a4936; font-size: 15px; line-height: 1.8; font-weight: 700; letter-spacing: -0.01em; background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,245,154,.18) 18%, rgba(255,238,103,.70) 18%, rgba(255,238,103,.70) 88%, rgba(255,245,154,.22) 88%, rgba(255,255,255,0) 100% ); border-radius: 8px; box-shadow: 0 1px 0 rgba(171,141,66,.10); } /* 문단 안에 작은 링크/강조가 있어도 톤 유지 */ .ub-ai-note a, .ub-ai-notice a, .article-ai-note a, .article-ai-notice a, .post-ai-note a, .post-ai-notice a, .ai-disclosure a, .ai-help-notice a, .ai-help-disclosure a, .article hr + p a, .article .post-content hr + p a, .article .article-content hr + p a, .article .entry-content hr + p a, .article .post-body hr + p a, .article .article-body hr + p a { color: inherit; font-weight: inherit; } @media (max-width: 640px) { .ub-ai-note, .ub-ai-notice, .article-ai-note, .article-ai-notice, .post-ai-note, .post-ai-notice, .ai-disclosure, .ai-help-notice, .ai-help-disclosure, .article hr + p, .article .post-content hr + p, .article .article-content hr + p, .article .entry-content hr + p, .article .post-body hr + p, .article .article-body hr + p { width: 100%; padding: 8px 10px 9px; font-size: 14px; line-height: 1.75; margin: 16px 0 22px; } } /* ========================================================= v1.5.70 운영자 AI 안내문 — 인간미 있는 형광펜 느낌 --------------------------------------------------------- v1.5.69의 반듯한 박스형 표시를 덮어써서, 사람이 형광펜으로 쓱 그은 것 같은 자연스러운 느낌으로 조정합니다. 줄 전체 박스가 아니라 글자 뒤쪽에만 하이라이트가 보이게 합니다. ========================================================= */ .ub-ai-note, .ub-ai-notice, .article-ai-note, .article-ai-notice, .post-ai-note, .post-ai-notice, .ai-disclosure, .ai-help-notice, .ai-help-disclosure, .article hr + p, .article .post-content hr + p, .article .article-content hr + p, .article .entry-content hr + p, .article .post-body hr + p, .article .article-body hr + p { display: inline !important; box-sizing: border-box !important; width: auto !important; max-width: 100% !important; margin: 18px 0 24px !important; padding: .10em .42em .18em !important; color: #5a4936 !important; font-size: 15px !important; line-height: 1.9 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: linear-gradient( 177deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 36%, rgba(255,247,170,.18) 36%, rgba(255,238,95,.72) 43%, rgba(255,235,79,.74) 83%, rgba(255,244,156,.24) 91%, rgba(255,255,255,0) 100% ) !important; -webkit-box-decoration-break: clone !important; box-decoration-break: clone !important; text-decoration: none !important; } /* 너무 반듯하지 않게 살짝 자연스러운 흔들림을 줍니다. */ .ub-ai-note, .ub-ai-notice, .article-ai-note, .article-ai-notice, .post-ai-note, .post-ai-notice, .ai-disclosure, .ai-help-notice, .ai-help-disclosure { transform: rotate(-0.15deg); transform-origin: left center; } /* 구분선 아래 첫 문단은 block 문맥을 깨지 않도록 after 줄바꿈을 하나 둡니다. */ .article hr + p::after, .article .post-content hr + p::after, .article .article-content hr + p::after, .article .entry-content hr + p::after, .article .post-body hr + p::after, .article .article-body hr + p::after, .ub-ai-note::after, .ub-ai-notice::after, .article-ai-note::after, .article-ai-notice::after, .post-ai-note::after, .post-ai-notice::after, .ai-disclosure::after, .ai-help-notice::after, .ai-help-disclosure::after { content: ""; display: block; height: 0; } @media (max-width: 640px) { .ub-ai-note, .ub-ai-notice, .article-ai-note, .article-ai-notice, .post-ai-note, .post-ai-notice, .ai-disclosure, .ai-help-notice, .ai-help-disclosure, .article hr + p, .article .post-content hr + p, .article .article-content hr + p, .article .entry-content hr + p, .article .post-body hr + p, .article .article-body hr + p { font-size: 14px !important; line-height: 1.85 !important; padding: .10em .36em .16em !important; margin: 16px 0 22px !important; } } /* ========================================================= v1.5.72 게시글 하단 3버튼 디자인 통일 - 좋아요: 보라 - 즐겨찾기: 연노랑 - 댓글: 핑크 - 세 버튼의 크기/모양을 동일하게 하고 버튼 사이 간격을 넓힘 ========================================================= */ .article .ub-like-wrap-bottom{ display:none !important; } .article .ub-like-wrap-bottom::before{ content:none !important; display:none !important; } .ub-post-actions{ display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:18px; margin:30px 0 14px; padding-top:18px; border-top:1px solid #eee6dc; } .ub-post-actions .ub-post-action, .ub-post-actions .ub-like-button{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:156px !important; min-width:156px !important; min-height:46px !important; box-sizing:border-box !important; padding:10px 14px !important; border-radius:999px !important; font:inherit !important; font-weight:700 !important; line-height:1 !important; cursor:pointer; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow:0 1px 2px rgba(55,42,28,.04); } .ub-post-actions .ub-post-action:hover{ filter:brightness(.985); box-shadow:0 2px 6px rgba(55,42,28,.08); } .ub-post-actions .ub-post-action:active{transform:translateY(1px)} .ub-post-actions .ub-post-action:disabled{opacity:.65;cursor:wait} /* 좋아요 — 보라 */ .ub-post-actions .ub-like-button{ background:#f3efff !important; border:1px solid #b9a7df !important; color:#65479b !important; } .ub-post-actions .ub-like-button.is-active{ background:#e9e0ff !important; border-color:#9274c8 !important; color:#57358e !important; } /* 즐겨찾기 — 연노랑 */ .ub-post-actions .ub-favorite-button{ background:#fff8d9 !important; border:1px solid #e5cf77 !important; color:#7b6715 !important; } .ub-post-actions .ub-favorite-button.is-active{ background:#fff0ad !important; border-color:#d7b944 !important; color:#6f5900 !important; } /* 댓글 — 핑크 */ .ub-post-actions .ub-comments-toggle{ background:#fff0f5 !important; border:1px solid #e5aec1 !important; color:#9a4e69 !important; } .ub-post-actions .ub-comments-toggle.is-active{ background:#ffe2ec !important; border-color:#d889a5 !important; color:#8d3c59 !important; } /* v1.6.1 공유하기 — 연초록. is-active는 "주소 복사됨/공유했어요" 안내가 잠깐 뜨는 동안만 켜집니다. */ .ub-post-actions .ub-share-button{ background:#eef8ee !important; border:1px solid #a9d3ad !important; color:#2f6b3a !important; } .ub-post-actions .ub-share-button.is-active{ background:#dcf2de !important; border-color:#7fbf87 !important; color:#245a2e !important; } .ub-post-action .ub-action-icon{font-size:18px;line-height:1} .ub-post-action .ub-action-label{white-space:nowrap} .ub-post-action .ub-action-count{ min-width:auto; padding:0; border-radius:0; background:transparent !important; color:inherit !important; font-size:13px; font-weight:800; text-align:center; } .ub-comments-mount[hidden]{display:none !important} .ub-comments-mount{margin-top:10px;scroll-margin-top:80px} .ub-comments-loading{padding:22px;text-align:center;color:#7a6d62} @media(max-width:640px){ .ub-post-actions{ gap:8px; margin-top:24px; justify-content:stretch; } /* v1.6.1: 공유하기가 추가되어 버튼이 4개이므로 한 줄(4개)이 아니라 2열(2×2)로 놓습니다. 한 줄에 4개를 넣으면 "즐겨찾기 추가" 같은 긴 글자가 잘리기 때문입니다. */ .ub-post-actions .ub-post-action, .ub-post-actions .ub-like-button{ flex:1 1 calc(50% - 4px) !important; width:auto !important; min-width:0 !important; padding:9px 7px !important; gap:4px !important; font-size:13px !important; } .ub-post-action .ub-action-icon{font-size:16px} .ub-post-action .ub-action-count{font-size:11px} } /* v1.5.84 첨부 문서 종류 배지 */ .judgment-type-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.2} .judgment-type-judgment{background:#eaf5e6;color:#376b2b} .judgment-type-inquiry{background:#e8f1ff;color:#285fa8} .judgment-type-reference{background:#fff0dc;color:#a65b12} /* v1.5.93 임금·관리 고정 얼굴 말풍선 기본 캐릭터와 같은 ::before 프로필 구조를 사용해 빈 동그라미/분리된 얼굴 문제를 없앱니다. */ .ung-talk-official,.ung-talk-king{max-width:680px!important} .ung-talk-official::before,.ung-talk-king::before{display:block!important;content:''!important;background-color:#fff!important;background-size:cover!important;background-position:center 34%!important} .ung-talk-official .ung-talk-avatar,.ung-talk-king .ung-talk-avatar{display:none!important} /* ========================================================= v1.5.94 임금·관리 말풍선 가독성 보강 - 얼굴 아이콘을 52px -> 72px로 확대 - 말풍선 꼬리를 얼굴 쪽으로 더 길게 연결 - 모바일에서도 얼굴이 충분히 보이도록 60px 유지 ========================================================= */ .ung-talk-official,.ung-talk-king{ gap:14px!important; } .ung-talk-official::before,.ung-talk-king::before{ width:72px!important; height:72px!important; flex-basis:72px!important; border-width:2px!important; background-size:cover!important; background-position:center center!important; } .ung-talk-left.ung-talk-official .ung-talk-bubble::before, .ung-talk-left.ung-talk-king .ung-talk-bubble::before{ left:-15px!important; top:24px!important; border-width:9px 16px 9px 0!important; } .ung-talk-right.ung-talk-official .ung-talk-bubble::after, .ung-talk-right.ung-talk-king .ung-talk-bubble::after{ right:-15px!important; top:24px!important; border-width:9px 0 9px 16px!important; } .ung-talk-left.ung-talk-official .ung-talk-bubble::before{border-right-color:#72A9D4!important} .ung-talk-left.ung-talk-king .ung-talk-bubble::before{border-right-color:#CA9A72!important} .ung-talk-right.ung-talk-official .ung-talk-bubble::after{border-left-color:#72A9D4!important} .ung-talk-right.ung-talk-king .ung-talk-bubble::after{border-left-color:#CA9A72!important} @media(max-width:700px){ .ung-talk-official,.ung-talk-king{gap:12px!important} .ung-talk-official::before,.ung-talk-king::before{ width:60px!important; height:60px!important; flex-basis:60px!important; } .ung-talk-left.ung-talk-official .ung-talk-bubble::before, .ung-talk-left.ung-talk-king .ung-talk-bubble::before{ left:-13px!important; top:20px!important; border-width:8px 14px 8px 0!important; } .ung-talk-right.ung-talk-official .ung-talk-bubble::after, .ung-talk-right.ung-talk-king .ung-talk-bubble::after{ right:-13px!important; top:20px!important; border-width:8px 0 8px 14px!important; } } /* ========================================================= v1.6.1 저장한 글 — 상단 메뉴 배지 + /saved.php 목록 화면 --------------------------------------------------------- 저장 내용은 방문자 브라우저(localStorage)에만 있으므로 목록과 개수는 site-extra.js 가 그립니다. 여기서는 모양만 정합니다. ========================================================= */ /* 상단 메뉴 "★ 저장한 글" 옆 개수. 0개면 JS가 hidden 처리합니다. */ .ub-saved-posts-link .ub-saved-posts-count{ display:inline-block; min-width:20px; margin-left:6px; padding:1px 6px; border-radius:999px; background:#f2c94c; color:#4a3a00; font-size:12px; font-weight:800; line-height:1.5; text-align:center; vertical-align:1px; } .ub-saved-posts-link .ub-saved-posts-count[hidden]{display:none} .ub-saved-page-help{color:#6e6157;font-size:15px} .ub-saved-page-help strong{color:#7b6715} .ub-saved-loading,.ub-saved-empty{ margin:26px 0; padding:26px 18px; border:1px dashed #e5d8c4; border-radius:12px; text-align:center; color:#7a6d62; } .ub-saved-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 10px; color:#6e6157; font-size:14px; } .ub-saved-clear{ border:1px solid #e0c9c9; background:#fff5f5; color:#9a4e4e; border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; } .ub-saved-clear:hover{background:#ffeaea} .ub-saved-list{list-style:none;margin:0;padding:0} .ub-saved-item{ display:flex; align-items:center; gap:12px; padding:14px 4px; border-bottom:1px solid #eee6dc; } .ub-saved-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px} .ub-saved-title{ color:#3f2b1c; font-weight:700; text-decoration:none; overflow-wrap:anywhere; } .ub-saved-title:hover{text-decoration:underline} .ub-saved-meta{color:#8d8177;font-size:13px} .ub-saved-remove{ flex:0 0 auto; border:1px solid #dcccb6; background:#fff7ed; color:#6e5237; border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; } .ub-saved-remove:hover{background:#fdeed9} @media(max-width:640px){ .ub-saved-item{padding:12px 2px} .ub-saved-remove{padding:6px 10px;font-size:12px} } /* ========================================================= v1.6.5 접근성 공통 기능 - 본문 바로가기, 키보드 포커스, 글자 확대, 고대비, 링크 밑줄 - 모션 감소, 표 키보드 스크롤, 본문 읽기 도구 ========================================================= */ .ub-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .ub-skip-link{position:fixed;left:12px;top:8px;z-index:10000;padding:10px 14px;border:2px solid #111;border-radius:8px;background:#fff;color:#111!important;font-weight:800;text-decoration:none!important;transform:translateY(-160%);transition:transform .12s ease} .ub-skip-link:focus{transform:translateY(0)} /* 키보드 포커스를 색상만이 아니라 두꺼운 윤곽선으로 표시 */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #1f63d8!important;outline-offset:3px!important} #main-content:focus{outline:none} /* 공개 메뉴 접근성 설정 */ .site-menu .ub-a11y-nav{position:relative;margin:0;padding:0} .site-menu .ub-a11y-nav>summary{list-style:none;cursor:pointer;color:#423122;font-weight:700;white-space:nowrap;user-select:none} .site-menu .ub-a11y-nav>summary::-webkit-details-marker{display:none} .site-menu .ub-a11y-nav>summary::after{content:'▾';display:inline-block;margin-left:5px;font-size:.72em} .site-menu .ub-a11y-nav[open]>summary::after{transform:rotate(180deg)} .ub-a11y-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:150;display:grid;gap:7px;min-width:190px;padding:10px;border:1px solid #d7cab9;border-radius:12px;background:#fff;box-shadow:0 12px 28px rgba(45,35,25,.14)} .ub-a11y-panel button{min-height:42px;padding:8px 10px;border:1px solid #cfc5b8;border-radius:8px;background:#fff;color:#302a25;font:inherit;font-weight:700;text-align:left;cursor:pointer} .ub-a11y-panel button[aria-pressed="true"]{border-color:#254f9d;background:#edf4ff;color:#153c82} /* 루트 글자 확대: rem 기반 요소와 본문을 함께 키웁니다. */ html.ub-a11y-font-large{font-size:112.5%} html.ub-a11y-font-xlarge{font-size:125%} html.ub-a11y-font-large .article-content,html.ub-a11y-font-large .ub-static-page{line-height:1.9} html.ub-a11y-font-xlarge .article-content,html.ub-a11y-font-xlarge .ub-static-page{line-height:2} /* 고대비는 흰 바탕/검정 글씨를 기본으로 하여 이미지 자체는 건드리지 않습니다. */ html.ub-a11y-contrast body,html.ub-a11y-contrast .site-main,html.ub-a11y-contrast .site-header,html.ub-a11y-contrast .site-footer,html.ub-a11y-contrast .ung-post-card,html.ub-a11y-contrast .article,html.ub-a11y-contrast .ub-static-page{background:#fff!important;color:#000!important} html.ub-a11y-contrast .site-header,html.ub-a11y-contrast .site-footer,html.ub-a11y-contrast .ung-post-card,html.ub-a11y-contrast .article{border-color:#000!important} html.ub-a11y-contrast a{color:#0000c8!important;text-decoration:underline!important;text-decoration-thickness:2px!important} html.ub-a11y-contrast button,html.ub-a11y-contrast .button,html.ub-a11y-contrast input,html.ub-a11y-contrast select,html.ub-a11y-contrast textarea,html.ub-a11y-contrast summary{border-color:#000!important;background:#fff!important;color:#000!important} html.ub-a11y-contrast .post-meta,html.ub-a11y-contrast .ung-card-meta,html.ub-a11y-contrast .ub-policy-footer-notice{color:#222!important} html.ub-a11y-contrast .article-content,html.ub-a11y-contrast .article-content p,html.ub-a11y-contrast .article-content li,html.ub-a11y-contrast .article-content h2,html.ub-a11y-contrast .article-content h3,html.ub-a11y-contrast .article-content h4{color:#000!important} html.ub-a11y-underline a{text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:.14em} /* 긴 표는 의미를 유지한 채 바깥 래퍼만 스크롤 가능하게 만듭니다. */ .ub-a11y-table-scroll{max-width:100%;overflow-x:auto;padding:3px;scrollbar-width:auto} .ub-a11y-table-scroll:focus-visible{outline:3px solid #1f63d8;outline-offset:2px} .ub-a11y-table-scroll>table{margin-top:0;margin-bottom:0} /* 브라우저 내장 음성 합성 기반 본문 읽기 */ .ub-read-aloud{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:12px 0 18px;padding:10px 12px;border:1px solid #d8dfdc;border-radius:10px;background:#f8fbfa} .ub-read-aloud strong{margin-right:2px;color:#33443d} .ub-read-aloud button{min-height:40px;padding:7px 11px;border:1px solid #b9c9c1;border-radius:8px;background:#fff;color:#263b32;font:inherit;font-weight:700;cursor:pointer} .ub-read-aloud button:disabled{opacity:.5;cursor:not-allowed} .ub-read-aloud-status{flex:1 1 100%;margin:1px 0 0;color:#5f6b65;font-size:13px} @media(max-width:720px){ .site-menu .ub-a11y-nav{width:100%;border-bottom:1px solid rgba(0,0,0,.08)} .site-menu .ub-a11y-nav>summary{display:block;width:100%;padding:11px 4px} .ub-a11y-panel{position:static;min-width:0;width:100%;padding:8px 0 12px;border:0;box-shadow:none;background:transparent} .ub-a11y-panel button{width:100%;min-height:44px} .ub-read-aloud button{min-height:44px} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } @media (forced-colors: active){ .ub-skip-link,.ub-read-aloud,.ub-a11y-panel button{forced-color-adjust:auto} } /* ========================================================= v1.6.7 연재 전체보기 복구 + 목록 이미지 각진 모서리 --------------------------------------------------------- - 홈 '연재 > 전체 보기'의 /series.php 404를 새 연재 허브로 복구합니다. - 홈/게시판/연재 목록 썸네일은 모두 둥근 모서리 없이 사각형으로 통일합니다. - 목록 이미지 자동복구 중에는 깨진 이미지 아이콘이 보이지 않게 합니다. ========================================================= */ .page-home .home-post-thumb, .page-home .home-post-thumb-empty, .ung-card-grid--board .ung-card-thumb, .ung-card-grid--board .ung-card-thumb-empty{ border-radius:0!important; } /* 네트워크 재시도 중인 실제 img는 숨기고 같은 크기의 대체 썸네일을 보여줍니다. */ img.ub-thumb-retrying{ visibility:hidden!important; } .ub-thumb-retry-placeholder{ display:flex!important; align-items:center!important; justify-content:center!important; background:#f7f1e7!important; color:#8d7b68!important; font-size:.72rem!important; font-weight:700!important; text-align:center!important; border-radius:0!important; } .page-home .home-post-row{position:relative} .page-home .home-post-row > .ub-thumb-retry-placeholder{ flex:0 0 100px;width:100px;height:100px; } .ung-card-grid--board .ung-post-card-link > .ub-thumb-retry-placeholder{ flex:0 0 108px;width:108px;height:108px;margin:0 auto; } .ub-series-hub-section{margin-top:34px} .ub-series-hub-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;border-bottom:2px solid var(--board-accent,#6d7054);padding-bottom:9px} .ub-series-hub-head h2{margin:0;font-size:1.35rem;color:#2f332d} .ub-series-hub-head a{color:#655444;font-weight:700;text-decoration:none} .ub-series-hub-head a:hover{text-decoration:underline} @media(max-width:520px){ .page-home .home-post-row > .ub-thumb-retry-placeholder{flex-basis:100px;width:100px;height:100px} .ung-card-grid--board .ung-post-card-link > .ub-thumb-retry-placeholder{flex-basis:96px;width:96px;height:96px;margin:0} } /* ========================================================= v1.6.20 말풍선·얼굴 아이콘 스타일 변경 (v1.6.21에서 테두리 두께·꼬리·얼굴 크기 일부를 다시 조정 — 아래 참고) --------------------------------------------------------- [바뀐 점] 1) 얼굴 아이콘의 색 테두리를 없앱니다. (v1.6.19에서 넣었던 5px 테두리 제거) 2) 말풍선을 "색으로 꽉 채운 상자"에서 "흰 바탕 + 캐릭터 색 테두리"로 바꿉니다. 3) 캐릭터별로 아이콘 안 얼굴 크기를 다르게 지정합니다. (100% = 동그란 아이콘을 꽉 채우는 크기) [참고] - 말풍선 꼬리는 v1.6.21에서 두 겹(테두리색 큰 삼각형 + 흰색 작은 삼각형)으로 다시 그려 흰 말풍선의 테두리가 꼬리까지 이어지는 것처럼 보이게 했습니다. - 글자색은 기존 값을 그대로 유지합니다. ========================================================= */ /* 1) 아이콘 테두리 제거 — 흰 바탕 원 안에 얼굴만 보이게 합니다. */ .ung-talk::before{ border:0!important; background-color:#fff!important; background-position:center!important; background-repeat:no-repeat!important; } /* 2) 말풍선: 흰 바탕 + 캐릭터 색 테두리 v1.6.21: 테두리를 3px -> 2px로 얇게 조정 */ .ung-talk-bubble{ background:#fff!important; border:2px solid #ddd!important; } .ung-talk-beomi .ung-talk-bubble{ background:#fff!important; border-color:#FFA539!important; color:#5a3a1a!important } .ung-talk-ungnyeo .ung-talk-bubble{ background:#fff!important; border-color:#BB8F56!important; color:#4A3524!important } .ung-talk-mareu .ung-talk-bubble{ background:#fff!important; border-color:#C276C2!important; color:#5A3462!important } .ung-talk-official .ung-talk-bubble{ background:#fff!important; border-color:#72A9D4!important; color:#24445d!important } .ung-talk-king .ung-talk-bubble{ background:#fff!important; border-color:#CA9A72!important; color:#6b3c22!important } /* 3) 캐릭터별 얼굴 크기 v1.6.21: 범이를 한 번 더 축소(95%->82%), 마르는 이미지를 다시 만들면서 지나치게 작았던 60%를 88%로 되돌림 (아래 v1.6.21 안내 참고) */ .ung-talk-beomi::before { background-size:82%!important } /* 범이 */ .ung-talk-ungnyeo::before { background-size:85%!important } /* 웅녀 */ .ung-talk-mareu::before { background-size:88%!important } /* 마르 */ .ung-talk-official::before, .ung-talk-king::before { background-size:95%!important } /* ======================================================== * v1.6.31 게시글 본문 이미지 600 × 700(6:7) 표시 기준 * (v1.6.26 블록을 v1.6.28에서 교체, v1.6.29에서 figure 대체 선택자 보강, * v1.6.31에서 세로가 너무 길다는 의견에 따라 800px -> 700px 로 조정) * -------------------------------------------------------- * v1.6.26이 실제 화면에서 안 먹던 이유 (실제 렌더링으로 측정): * 1) 선택자가 `.article-content > img` / `> figure img` 처럼 * "직계 자식"만 잡아서, 가장 흔한 `

` 형태는 * 아예 대상이 아니었음 → 800×600 그대로 표시 * 2) height를 지정하지 않아 옛 글의 인라인 `style="height:400px"`가 * 살아남음. height가 auto가 아니면 브라우저는 aspect-ratio를 * 무시하므로 3:4가 적용되지 않았음 * 3) 에디터 리사이즈로 생긴 `figure.image_resized style="width:45%"`가 * 이미지를 가두어 360×480으로 표시 * 4)
기본 좌우 여백(40px) 때문에 모바일에서 폭이 제각각 * * 이번 규칙: * - 본문(.article-content) 안의 img를 감싸는 태그와 관계없이 모두 대상 * - PC: 600×700 고정 + object-fit:contain (왜곡·잘림 없이 박스 안에 맞춤) * - 모바일(≤640px): 화면 폭에 맞춰 축소, aspect-ratio로 6:7 유지 * - v1.6.31: 가로 600px 은 그대로 두고 세로만 800 -> 700 으로 줄임. * 앞으로 만드는 이미지는 600×700(또는 배수 1200×1400) 권장. * 기존 3:4 이미지는 잘리지 않고 위아래에 약간 여백이 생김. * - 이미지를 감싸는 figure/p 도 함께 600px·가운데 정렬로 맞춤 * - 제외: 봄돌이 이모티콘(.ub-bomdol-inline), 퀴즈 진행자 아이콘 * (.ung-quiz-host-icon), 이모지(.ung-emoji), * 9:16 카드뉴스 슬라이더(.ung-cardnews-slider 중 PPT가 아닌 것), * 자동 슬라이더(.ub-slider) * - 목록 썸네일·대표이미지(.featured-image)·말풍선 아이콘·관리자 화면은 * .article-content 밖이므로 영향 없음 * ======================================================== */ /* 1) 본문 이미지 본체 — PC 기준 600 × 700 */ .article .article-content img:not(.ub-bomdol-inline):not(.ung-quiz-host-icon):not(.ung-emoji):not(.ung-cardnews-slider:not(.ung-ppt-slider) img):not(.ub-slider img) { display: block !important; width: 600px !important; height: 700px !important; max-width: 100% !important; max-height: none !important; aspect-ratio: 6 / 7 !important; object-fit: contain !important; margin: 20px auto !important; background: #fff; } /* 2) 이미지를 감싸는 figure — 인라인 폭(image_resized 등)과 기본 여백을 정리 2-a) :has() 를 지원하는 브라우저용 (Chrome/Edge 105+, Safari 15.4+, Firefox 121+) */ .article .article-content figure:has(> img):not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure:has(> a > img):not(.ung-cardnews-slider figure):not(.ub-slider figure) { display: block !important; width: 600px !important; max-width: 100% !important; margin: 20px auto !important; padding: 0 !important; } /* 2-b) v1.6.29: :has() 가 없는 브라우저를 위한 대체 선택자. 브라우저가 :has() 를 모르면 2-a 규칙 전체가 버려지므로, 이미지용 figure 클래스를 이름으로 직접 지정해 같은 값을 한 번 더 적용합니다. (:has() 를 아는 브라우저에서는 2-a와 값이 같아 겹쳐도 문제 없음) */ .article .article-content figure.image:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.image_resized:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.ung-cover-img:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.ung-infographic:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.ung-cardnews-slide:not(.ung-cardnews-slider figure):not(.ub-slider figure) { display: block !important; width: 600px !important; max-width: 100% !important; margin: 20px auto !important; padding: 0 !important; } /* figure 안의 img는 figure가 여백을 담당하므로 img 자체 여백은 0 */ .article .article-content figure:has(> img):not(.ung-cardnews-slider figure):not(.ub-slider figure) > img, .article .article-content figure:has(> a > img):not(.ung-cardnews-slider figure):not(.ub-slider figure) > a > img, .article .article-content figure.image:not(.ung-cardnews-slider figure) > img, .article .article-content figure.image_resized:not(.ung-cardnews-slider figure) > img, .article .article-content figure.ung-cover-img:not(.ung-cardnews-slider figure) > img, .article .article-content figure.ung-infographic:not(.ung-cardnews-slider figure) > img, .article .article-content figure.ung-cardnews-slide:not(.ung-cardnews-slider figure) > img { margin: 0 auto !important; } /* 3) PPT 슬라이드 — 본문 이미지와 동일하게 600 × 700 기준 */ .ung-cardnews-slider.ung-ppt-slider { width: 600px !important; max-width: 100% !important; } .ung-ppt-slide { width: 100% !important; max-width: 600px !important; aspect-ratio: 6 / 7 !important; } /* 4) 모바일 — 화면 폭에 맞춰 축소하되 6:7 유지 */ @media (max-width: 640px) { .article .article-content img:not(.ub-bomdol-inline):not(.ung-quiz-host-icon):not(.ung-emoji):not(.ung-cardnews-slider:not(.ung-ppt-slider) img):not(.ub-slider img) { width: 100% !important; height: auto !important; max-width: 600px !important; aspect-ratio: 6 / 7 !important; margin: 16px auto !important; } .article .article-content figure:has(> img):not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure:has(> a > img):not(.ung-cardnews-slider figure):not(.ub-slider figure) { width: 100% !important; max-width: 600px !important; margin: 16px auto !important; } /* v1.6.29: :has() 대체 선택자 (위 2-b와 같은 이유) */ .article .article-content figure.image:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.image_resized:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.ung-cover-img:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.ung-infographic:not(.ung-cardnews-slider figure):not(.ub-slider figure), .article .article-content figure.ung-cardnews-slide:not(.ung-cardnews-slider figure):not(.ub-slider figure) { width: 100% !important; max-width: 600px !important; margin: 16px auto !important; } .ung-cardnews-slider.ung-ppt-slider, .ung-ppt-slide { width: 100% !important; max-width: 100% !important; } }