@charset "utf-8"; /* [Reference] Pixel to Rem Converter */ /* 템플릿 포인트 컬러 설정 */ :root { --point-color: #32c0b6; /* 메인 강조 색상 */ --point-hover-color: #119a90; /* 메인 강조 호버 색상 */ --point-border-color: #119a90; --point-color-light: #8fd2cd; /* 배경용 연한 색상 */ --point-color-dark: #119a90; /* 배경용 진한 색상 */ --point-text-color: #32c0b6; /* 포인트 컬러 글자색 */ --text-on-point: #ffffff; /* 포인트 컬러 글자색 */ --text-on-white-point: #ffffff; /* 포인트 컬러 위의 흰색 글자색 */ --gradient-color-bar: linear-gradient(to right, var(--point-color), var(--point-color), #b142d6, #f12d85) 1; /* 포인트 그라데이션 색상 */ --text-total-price-color: #dd0d00; /* 결제금액 색상 */ --text-discount-color: #247de9; /* 할인금액 색상 */ --text-link-color: #32c0b6; /* 텍스트링크 색상 */ --text-coupon-color: #dd0d00; /* 텍스트쿠폰 색상 */ --product-thumb-radius: 6px; /* 상품이미지 라운드 처리 */ } /* 초기화 */ a { color: #666; text-decoration: none; } a:hover { color: #333; text-decoration: none; } ul li { list-style: none; } legend { display: none; } fieldset { border: 0; margin: 0; padding: 0; } button[type="submit"] { color: inherit; font: inherit; margin: 0; border: 0; background: none; -webkit-appearance: button; } b, strong {font-weight:600;} /* custom */ .hide { display: none !important; } .transition { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } /* 소셜버튼 */ .ui.facebook.color.button { background: #3b5998; color: #fff; } .ui.twitter.color.button { background: #00aced; color: #fff; } .ui.google.color.button { background: #d34836; color: #fff; } /* 모달창 */ .ui.dimmer { background-color: rgba(0, 0, 0, .6); } .ui.modal>.header { background:none; color: #333; padding:20px 20px; border-bottom: 0; font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif !important; } .ui.modal>.header .title { font-weight: 700; } /* 닫기 X 는 배경이미지로 그린다 */ .ui.modal>.close { width: 24px; height: 24px; top:20px !important; right:20px !important; color: rgba(255, 255, 255, 1); font-size: 0 !important; background: url('/theme/site/giftwiki/giftwiki/mobile/assets/css/../images/common_icon_big_close.png') no-repeat center center; } .ui.modal .actions>.button:not(.fluid) { margin-left: .25em; } /* 커스텀 모달창 */ .ui.modal.custom>.content { margin: 10px 20px 0px; padding: 20px; width: auto; background: #f8f8f8; } .ui.modal.custom>.actions { padding: 20px 0; text-align: center; background: none; border-top: 0px; } /* 알림창 */ .ui.alerts { position: fixed; z-index: 2060; padding: 22px; max-width: 500px; top: 20px; right: 20px; cursor: default; } .ui.alerts .progress { position: absolute; left: 0; bottom: 0; width: 100%; } .ui.alerts .progress .bar { min-width: 1px; } @media (min-width:500px) { .ui.alerts { max-width: 90%; } } /* 수량버튼 */ .ui.quantity button { cursor: pointer; } .ui.quantity button:active { background: #eee; } .ui.quantity button .icon { margin: 0 -.11428571em 0 -.11428571em !important; } .ui.quantity input { font-weight: bold; text-align: center; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; border-right: 0; } /* 파일 업로드 */ .ui.file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .ui.file .text { width: auto !important; min-width: 150px; margin-right: 3px !important; } .ui.divider:not(.vertical):not(.horizontal) { border-top: 1px solid rgba(34, 36, 38, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); } /* divder css 오류수정 */ .ui.horizontal.divider:before, .ui.horizontal.divider:after { top: 0; } /***** semantic ui custom *****/ /* Pagination 페이징버튼 */ /* 페이징 래퍼(전 페이지 공용) */ .centered.grid.pagination { margin: 8px 0 0; justify-content: center; } /* 컬럼 풀폭 + 텍스트중앙 → 인라인 메뉴박스 자체를 중앙에 */ .centered.grid.pagination > .column { width: 100%; text-align: center; } .centered.grid.pagination .ui.pagination.menu { flex-wrap: wrap; justify-content: center; box-shadow: none; } .centered.grid.pagination .ui.pagination.menu .item { margin-bottom: 3px; } .ui.pagination {margin:1rem 0;} .ui.pagination.menu { margin: 0em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; border: 0; box-shadow: none; background: transparent; } /* item 공통 규칙 */ .ui.pagination.menu .item { min-width: 2em; margin: 0 2px; padding: .76857143em 1.00285714em .75857143em; font-size: 1rem; color: #777; text-align: center; border: 1px solid #eee; background: #fff; } .ui.pagination.menu .item:last-child, .ui.pagination.menu .item:first-child { border-radius: 0; } .ui.pagination.menu .item:last-child:before { display: none; } .ui.pagination.menu .item:before { width: 0; background: none; } .ui.pagination.menu .item:hover { color: #222; border-color: #ccc; background: #fff; } .ui.pagination.menu .icon.item i.icon { vertical-align: top; font-size: 0.6875rem; } /* Active */ .ui.pagination.menu .active.item { border: 1px solid #222; padding-top: .76857143em; background-color: #fff; color: #222; -webkit-box-shadow: none; box-shadow: none; } /* 모바일: 페이징 버튼이 넘치면 줄바꿈되도록 */ @media (max-width: 767px) { .ui.pagination.menu, .ui.tiny.pagination.menu { flex-wrap: wrap; justify-content: center; row-gap: 6px; } } .ui.dropdown .menu { margin: 0em; padding: 0em 0em; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; border-radius: 0 !important; border-color: rgba(34, 36, 38, 0.25); } /* Active */ .ui.selection.active.dropdown { border-color: #333; } .ui.selection.active.dropdown .menu { border-color: #333; border-radius:0 0 .28571429rem .28571429rem !important; } /* Focus */ .ui.selection.dropdown:hover, .ui.selection.dropdown:focus { border-color: #333 !important; } .ui.selection.dropdown:focus .menu { border-color: #333 !important; } /* Visible */ .ui.selection.visible.dropdown>.text:not(.default) { font-weight: normal; color: rgba(0, 0, 0, 0.8); } /* Visible Hover */ .ui.selection.active.dropdown:hover { border-color: #333; } .ui.selection.active.dropdown:hover .menu { border-color: #333; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif !important; margin: 0em; outline: none; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid #ccc; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: 0em 0em 0em 0em transparent inset; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; } /* Focus */ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.95); border: 1px solid #333 !important; border-radius: 0.28571429rem; background: #FFFFFF; -webkit-box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset; box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset; } .ui.input.focus>input, .ui.input>input:focus { border-color: #aaa; background: #FFFFFF; color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: none; box-shadow: none; } .ui.input.focus>input::-webkit-input-placeholder, .ui.input>input:focus::-webkit-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus>input::-moz-placeholder, .ui.input>input:focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus>input:-ms-input-placeholder, .ui.input>input:focus:-ms-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.action.input:not([class*="left action"])>input:focus { border-right-color: #333 !important; } .ui.form textarea { margin: 0em; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571429em 1em; background: #FFFFFF; border: 1px solid #ddd; outline: none; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: 0em 0em 0em 0em transparent inset; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; line-height: 1.2857; resize: vertical; } /* 예외: Fomantic 검색 드롭다운 */ .ui.form .ui.search.dropdown > input.search:focus { border: none !important; background: none transparent !important; box-shadow: none !important; } /* 텍스트영역 포커스 */ .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #333; border-radius: 0; background: #FFFFFF; -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } .ui.toggle.checkbox input:focus:checked~label::before, .ui.toggle.checkbox input:checked~label::before {background-color:var(--point-color);} /* 버튼 */ .ui.button, .ui.basic.button, .ui.basic.buttons .button { border-radius: 5px; } /* Fomantic 기본 회색/700 을 밝은톤+#ddd 보더+weight500 으로 오버라이드 */ .ui.button { background-color: #f9f9f9; color: #222; font-weight: 500; /* semantic 기본 700 → 500 */ } .ui.button:not(.basic):not(.inverted):not(.primary):not(.secondary):not(.positive):not(.negative):not(.info):not(.warning):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.color), .ui.button:not(.basic):not(.inverted):not(.primary):not(.secondary):not(.positive):not(.negative):not(.info):not(.warning):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.color):focus { border: 1px solid #ddd; } .ui.buttons .button { border: 0 !important; } .ui.basic.buttons:not(.inverted) .button:not(.basic) { border-right: 1px solid rgba(34, 36, 38, 0.15) !important; } /* focus */ .ui.button:focus { background-color: #f9f9f9; color: #222; } .ui.button:hover, .ui.button:active { /* active=누름 피드백도 hover 와 동일 다크 반전 */ border-color: transparent; /* hover 시 테두리 제거(크기 흔들림 없음) */ background-color: #222; color: #fff; } .ui.label { border-radius: 5px; } .ui.primary.button:hover, .ui.primary.buttons .button:hover {color:var(--text-on-white-point); background-color:var(--point-hover-color) !important;} .ui.primary.button, .ui.primary.buttons .button {color:var(--text-on-white-point); background-color:var(--point-color) !important;} /* basic(외곽선형) 강조 버튼 */ .ui.basic.primary.buttons .button, .ui.basic.primary.button { background: transparent none !important; box-shadow: 0 0 0 1px var(--point-border-color) inset !important; color: var(--point-text-color) !important; } .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus { background: transparent none !important; box-shadow: 0 0 0 1px var(--point-hover-color) inset !important; color: var(--point-hover-color) !important; } .ui.basic.labels .primary.label, .ui.ui.ui.basic.primary.label { background: none #fff; border-color: var(--point-border-color); color:var(--point-text-color); } /* naver */ .ui.naver.button { background-color: #26c826; color: #FFFFFF; text-shadow: none; background-image: none; -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.naver.button:hover { background-color: #26c826; color: #FFFFFF; text-shadow: none; } .ui.naver.button:active { background-color: #2d4373; color: #FFFFFF; text-shadow: none; } /* kakao */ .ui.kakao.button { background-color: #fcce00; color: #1d1d1d; text-shadow: none; background-image: none; -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.kakao.button:hover { background-color: #fcce00; color: #1d1d1d; text-shadow: none; } .ui.kakao.button:active { background-color: #fcce00; color: #1d1d1d; text-shadow: none; } .ui.basic.button, .ui.basic.buttons .button { background: #fff !important; } /* Column Width */ .ui.table th.one-half.wide, .ui.table td.one-half.wide { width: 10%; } /* .ui.table */ .ui.table { font-size: 0.9286rem; } /* custom */ .right.floated { float: right; } .left.floated { float: left; } .m-0 { margin: 0 !important; } .mt-5 { margin-top: 5px !important; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; } .mt-100 { margin-top: 100px !important; } .ml-5 { margin-left: 5px !important; } .ml-10 { margin-left: 10px !important; } .ml-20 { margin-left: 20px !important; } .ml-30 { margin-left: 30px !important; } .mr-5 { margin-right: 5px !important; } .mr-10 { margin-right: 10px !important; } .mr-20 { margin-right: 20px !important; } .mr-30 { margin-right: 30px !important; } .mx-5 { margin-left: 5px !important; margin-right: 5px !important; } .mx-10 { margin-left: 10px !important; margin-right: 10px !important; } .mx-20 { margin-left: 20px !important; margin-right: 20px !important; } .mx-30 { margin-left: 30px !important; margin-right: 30px !important; } .p-0 { padding: 0px !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; } .py-5 { padding-left: 5px !important; padding-right: 5px !important; } .py-10 { padding-left: 10px !important; padding-right: 10px !important; } .py-20 { padding-left: 20px !important; padding-right: 20px !important; } .py-30 { padding-left: 30px !important; padding-right: 30px !important; } /* img.full-image */ img.full-image { display: block; position: relative; left: 50%; height: 100%; -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } /* 로딩이미지 */ #loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; text-align: center; } #loading img { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -24px; width: 48px; height: 10px; } /* 로딩 일반 메세지 */ #loading-message { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; } #loading-message .message { position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -215px; width: 430px; height: 85px; } #loading-message .message .content { padding: 10px 0; } /* 로딩 결제 메세지 */ #loading-payment-message { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #loading-payment-message .message { position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -215px; width: 430px; height: 85px; } #loading-payment-message .message .content { padding: 10px 0; } /* html 로드후 보여져야 할 영역 */ .after-show { display: none; } /**************** 기본양식 ****************/ /* 기본 테이블 목록 */ .normal-list .board-top-sort { clear: both; } .normal-list .board-top-sort:after { content: ''; display: block; clear: both; } .normal-list .ui.count { padding: 0; } .normal-list .total-count { display: inline-block; padding-bottom: 5px; font-size: 1rem; } .normal-list .total-count strong { color: #000; } .normal-list .ui.table { border: 0; border-bottom: 1px solid #d5dbe0; border-radius: 0; } .normal-list .ui.table thead th { border-left: 0; background: #fff !important; border-top: 2px solid #000; border-bottom: 1px solid #d5dbe0; color: #000; font-weight: 500; font-size: 1rem; border-radius: 0 !important; } .normal-list .ui.sortable.table>thead>tr>th { border-left: 0; } .normal-list .ui.table tbody td { font-size: 0.9286rem; color: #222; padding: 1.48571429em .78571429em; border-color: #eee; } .normal-list .ui.table tbody tr:hover { background: #fff !important; } .normal-list .ui.table tbody td.product-info img.thumb { width: 80px; } .normal-list .ui.table tbody td.product-info span.product-name { overflow: hidden; display: block; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word !important; max-height: calc(1em * 1.4 * 2); white-space: normal; margin: 0 0 0; padding: 0; font-size: 0.8571rem; line-height: 1.4; color: #666; font-weight: normal; } /* no-data */ .list-no-data { padding: 100px 0 !important; text-align: center; background: #fff; } .list-no-data p { color: #999; } /* 폭을 고정하면 글리프가 넘쳐 한쪽으로 쏠린다. 크기는 PC 와 비슷하게 맞춘다 */ .list-no-data p i { position: relative; display: block; margin: 0 auto; font-size: 4.5rem; line-height: 1; color: #ccc; } .list-no-data p i:after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; border: 0px solid #eaeaea; border-radius: 30px; } .list-no-data p span { display: block; margin: 15px 0 0; text-align: center; } /* 기본 폼 등록/수정 */ .ui.form, .ui.form .field .dropdown, .ui.form .field .dropdown .menu>.item { font-size: 0.9286rem; } .normal-form .ui.form { background: #fff; } .normal-form .ui.form.segment { border-top: 1px solid #dedede; padding: 20px; } .normal-form .ui.form .field.border-none, .normal-form .ui.form .fields.border-none { border-bottom: 0; } .normal-form .ui.form .field.padding-bottom-none, .normal-form .ui.form .fields.padding-bottom-none { padding-bottom: 0 !important; } .normal-form .ui.form .field.margin-bottom-none, .normal-form .ui.form .fields.margin-bottom-none { margin-bottom: 0 !important; } .normal-form .ui.form em.at { font-style: normal; display: inline-block; margin: 0; font-size: 1rem; vertical-align: middle; } .normal-form .ui.form p.desc { font-weight: normal !important; color: #777; } .normal-form .ui.form .field>label, .normal-form .ui.form .inline.fields>label { display: inline-block; min-width: 130px; font-size: 0.9286rem; font-weight: bold; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .normal-form .ui.form .inline-radio { display: inline-block; margin-right: 5px; padding: 5px 0; } .normal-form .upload { margin: 0; -webkit-box-shadow: none !important; box-shadow: none !important; } .normal-form .upload .file { border: 0px !important; } .normal-form .upload .content { margin-top: 10px !important; } .normal-form .upload .delete-file { margin-top: 10px; } .normal-form .fields.captcha { align-items: stretch !important; } .normal-form .ui.divider:not(.vertical):not(.horizontal) { margin: 1.3rem 0; border-top: 1px solid rgba(34, 36, 38, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); } /* Fomantic 토글(.ui.toggle.checkbox) */ .ui.toggle.checkbox {min-height:1.1rem;} .ui.toggle.checkbox input {width:1.9rem; height:1.1rem;} .ui.toggle.checkbox label {padding-left:2.5rem;} .ui.toggle.checkbox label::before {width:1.9rem; height:1.1rem; top:50%; margin-top:-0.55rem;} .ui.toggle.checkbox label::after {width:1.1rem; height:1.1rem; top:50%; margin-top:-0.55rem;} .ui.toggle.checkbox input ~ label::after {left:-0.05rem;} .ui.toggle.checkbox input:checked ~ label::after {left:0.85rem;} .ui.right.aligned.toggle.checkbox label {padding-right:2.5rem;} .ui.segment {box-shadow:none;} /* semantic-ui elements font */ .ui.header, .ui.button { font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif !important; } /* semantic-ui Tabular custom */ .ui.tabular.menu.custom { border-radius: 0; -webkit-box-shadow: none !important; box-shadow: none !important; border: none; background: #fafafa; border-top: 2px solid #333; border-bottom: 1px solid #ddd; margin-bottom: 10px; } .ui.tabular.fluid.menu { width: calc(100% + 2px) !important; } .ui.tabular.menu .item { background: transparent; border-bottom: none; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; padding: 1.2em 1.2em; color: rgba(0, 0, 0, 0.87); font-size: 1rem; } .ui.tabular.menu .item:before { display: none; } /* Hover */ .ui.tabular.menu .item:hover { background-color: transparent; color: rgba(0, 0, 0, 0.8); } /* Active */ .ui.tabular.menu .active.item { background: none #FFFFFF; color: rgba(0, 0, 0, 0.95); border-top-width: 0; border-color: #ddd; font-weight: bold; margin-bottom: -1px; -webkit-box-shadow: none; box-shadow: none; border-radius: 0 !important; } /* Coupling with segment for attachment */ .ui.tabular.menu+.attached:not(.top).segment, .ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment { border-top: none; margin-left: 0; margin-top: 0; margin-right: 0; width: 100%; } .top.attached.segment+.ui.bottom.tabular.menu { position: relative; width: calc(100% + 2px); left: -1px; } /* 더보기 글내용 */ .more-text { display: none; } /* 리믹스 아이콘 커스텀 사이즈 (24px과 32px 사이) */ .ri-xxl { font-size: 1.75em !important; /* 약 28px */ vertical-align: middle; /* 높이 정렬 보정 */ } .ri-color-black { color:#000; } /* swiper v11 button 초기화 */ .swiper-button-next,.swiper-button-prev { position: absolute; top: var(--swiper-navigation-top-offset,50%); width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)) } /* .rich-content — 에디터 저장본 렌더 스타일 */ .rich-content { box-sizing: border-box; line-height: 1.42; text-align: left; white-space: normal; /* 루트는 normal */ word-wrap: break-word; tab-size: 4; -moz-tab-size: 4; /* 본문 14px = 에디터 .ql-container 기준값. size 배율(small/large/huge)의 기준 */ font-size: 14px; font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif; } /* 블록 여백/카운터 초기화 (snow .ql-editor 와 동일) */ .rich-content p, .rich-content ol, .rich-content ul, .rich-content pre, .rich-content blockquote, .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } /* 공백/줄바꿈(에디터 다중공백·수동 줄맞춤) 보존은 블록 요소에만 */ .rich-content p, .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6, .rich-content li, .rich-content blockquote { white-space: pre-wrap; } /* 본문 줄간격 = 에디터(.ql-editor 1.42 '단위없는' 배수)와 동일 */ .rich-content p, .rich-content li, .rich-content blockquote { line-height: 1.8; } /* ── 헤딩 글자크기 = 에디터 initialize.css 와 동일(px 못박음) ── */ .rich-content h1 { font-size: 32px; } .rich-content h2 { font-size: 27px; } .rich-content h3 { font-size: 21px; } .rich-content h4 { font-size: 17px; } .rich-content h5 { font-size: 16px; } .rich-content h6 { font-size: 14px; } /* 헤딩 굵기·줄간격 = 에디터와 동일 고정 */ .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { font-weight: 500; line-height: 1.2; margin: 0.5em 0; } /* ── 내용 글자크기(size 피커) = 에디터 initialize.css 와 동일 ── */ .rich-content .ql-size-small { font-size: 12px; } .rich-content .ql-size-large { font-size: 18px; } .rich-content .ql-size-huge { font-size: 24px; } /* ── 리스트(ordered/bullet) + 중첩 카운터 (snow 원본 그대로) ── */ .rich-content ol, .rich-content ul { padding-left: 1.5em; list-style-type: none; /* Fomantic/Bootstrap 기본 마커 제거 — 카운터/•로 대체 */ } .rich-content ol > li, .rich-content ul > li { list-style-type: none; } .rich-content ul > li::before { content: '\2022'; } .rich-content li::before { display: inline-block; white-space: nowrap; width: 1.2em; } .rich-content li:not(.ql-direction-rtl)::before { margin-left: -1.5em; margin-right: 0.3em; text-align: right; } .rich-content ol li:not(.ql-direction-rtl), .rich-content ul li:not(.ql-direction-rtl) { padding-left: 1.5em; } .rich-content ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; } .rich-content ol li:before { content: counter(list-0, decimal) '. '; } .rich-content ol li.ql-indent-1 { counter-increment: list-1; } .rich-content ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; } .rich-content ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-2 { counter-increment: list-2; } .rich-content ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; } .rich-content ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-3 { counter-increment: list-3; } .rich-content ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; } .rich-content ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-4 { counter-increment: list-4; } .rich-content ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; } .rich-content ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-5 { counter-increment: list-5; } .rich-content ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; } .rich-content ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-6 { counter-increment: list-6; } .rich-content ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; } .rich-content ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .rich-content ol li.ql-indent-7 { counter-increment: list-7; } .rich-content ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; } .rich-content ol li.ql-indent-7 { counter-reset: list-8 list-9; } .rich-content ol li.ql-indent-8 { counter-increment: list-8; } .rich-content ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; } .rich-content ol li.ql-indent-8 { counter-reset: list-9; } .rich-content ol li.ql-indent-9 { counter-increment: list-9; } .rich-content ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; } /* 중첩 목록 카운터는 점으로 통일 */ .rich-content ol li.ql-indent-1:before, .rich-content ol li.ql-indent-2:before, .rich-content ol li.ql-indent-3:before, .rich-content ol li.ql-indent-4:before, .rich-content ol li.ql-indent-5:before, .rich-content ol li.ql-indent-6:before, .rich-content ol li.ql-indent-7:before, .rich-content ol li.ql-indent-8:before, .rich-content ol li.ql-indent-9:before { content: '\2022'; } /* 들여쓰기(indent) 패딩 */ .rich-content .ql-indent-1:not(.ql-direction-rtl) { padding-left: 1.5em; } .rich-content li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; } .rich-content .ql-indent-2:not(.ql-direction-rtl) { padding-left: 3em; } .rich-content li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 4.5em; } .rich-content .ql-indent-3:not(.ql-direction-rtl) { padding-left: 4.5em; } .rich-content li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 6em; } .rich-content .ql-indent-4:not(.ql-direction-rtl) { padding-left: 6em; } .rich-content li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 7.5em; } .rich-content .ql-indent-5:not(.ql-direction-rtl) { padding-left: 7.5em; } .rich-content li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 9em; } .rich-content .ql-indent-6:not(.ql-direction-rtl) { padding-left: 9em; } .rich-content li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 10.5em; } .rich-content .ql-indent-7:not(.ql-direction-rtl) { padding-left: 10.5em; } .rich-content li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 12em; } .rich-content .ql-indent-8:not(.ql-direction-rtl) { padding-left: 12em; } .rich-content li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 13.5em; } .rich-content .ql-indent-9:not(.ql-direction-rtl) { padding-left: 13.5em; } .rich-content li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 15em; } /* ── 정렬 ── */ .rich-content .ql-align-center { text-align: center; } .rich-content .ql-align-justify { text-align: justify; } .rich-content .ql-align-right { text-align: right; } .rich-content .ql-direction-rtl { direction: rtl; text-align: inherit; } /* ── 글자색/배경색 (팔레트) ── */ .rich-content .ql-color-white { color: #fff; } .rich-content .ql-color-red { color: #e60000; } .rich-content .ql-color-orange { color: #f90; } .rich-content .ql-color-yellow { color: #ff0; } .rich-content .ql-color-green { color: #008a00; } .rich-content .ql-color-blue { color: #06c; } .rich-content .ql-color-purple { color: #93f; } .rich-content .ql-bg-black { background-color: #000; } .rich-content .ql-bg-red { background-color: #e60000; } .rich-content .ql-bg-orange { background-color: #f90; } .rich-content .ql-bg-yellow { background-color: #ff0; } .rich-content .ql-bg-green { background-color: #008a00; } .rich-content .ql-bg-blue { background-color: #06c; } .rich-content .ql-bg-purple { background-color: #93f; } /* ── 서체(font 피커) ── */ .rich-content .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; } .rich-content .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; } /* ── 링크/인용/코드/이미지/비디오 ── */ .rich-content a { text-decoration: underline; color: #06c; } /* 링크색 고정 — 전역 a{color:#666} 지배 차단(에디터와 동일) */ .rich-content blockquote { border-left: 4px solid #ccc; margin-top: 5px; margin-bottom: 5px; padding-left: 16px; } .rich-content code, .rich-content pre { background-color: #f0f0f0; border-radius: 3px; } .rich-content pre { white-space: pre-wrap; margin-top: 5px; margin-bottom: 5px; padding: 5px 10px; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px; /* 에디터 코드블록과 동일 — 전역 pre 가 키우지 못하게 고정 */ } .rich-content code { font-size: 85%; padding: 2px 4px; } .rich-content pre.ql-syntax { background-color: #23241f; color: #f8f8f2; overflow: visible; } .rich-content img { max-width: 100%; } .rich-content video, .rich-content iframe { max-width: 100%; height: auto; } .rich-content .ql-video { display: block; max-width: 100%; } .rich-content .ql-video.ql-align-center { margin: 0 auto; } .rich-content .ql-video.ql-align-right { margin: 0 0 0 auto; } /* 표(table) */ .rich-content table { max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0.5em 0; } /* width 100% 강제 안 함 */ .rich-content td, .rich-content th { border: 1px solid #d0d3d7; padding: 6px 9px; vertical-align: top; } .rich-content th { background: #f6f7f9; font-weight: 600; text-align: center; } /* Fomantic 툴팁 */ [data-tooltip]::before, [data-tooltip]::after { font-size: 0.8125rem; } /* Quill 2.0 목록 */ .rich-content li[data-list] { list-style-type: none; } .rich-content ol li[data-list="bullet"][data-list] { counter-increment: none; } .rich-content ol li[data-list="bullet"][data-list]::before { content: '\2022'; } /* 에디터가 마커를 그리려고 넣는 빈 span — 보기 화면에서는 li::before 가 그린다 */ .rich-content .ql-ui { display: none; }