/* /Views/Account/FindAccount.cshtml.rz.scp.css */
/* 계정 레이아웃 ::deep 에서 일괄 처리됨 */
/* /Views/Account/ResetPassword.cshtml.rz.scp.css */
/* 계정 레이아웃 ::deep 에서 일괄 처리됨 */
/* /Views/Account/VerifyMail.cshtml.rz.scp.css */
/* 계정 레이아웃 ::deep 에서 일괄 처리됨 */
/* /Views/Account/_ExternalLogins.cshtml.rz.scp.css */
/* 계정 레이아웃 ::deep 에서 일괄 처리됨 */
nav.externalLogin > a > img.brandIcon[b-c0tagh1r1d] {
width: 1.25em;
height: 1.25em;
object-fit: contain;
flex-shrink: 0;
}
/* /Views/Content/Blog/Index.cshtml.rz.scp.css */
@charset "UTF-8";
/* 블로그형 첫 화면(Index/List) 전용 스타일: 글 보기 피드 */
.contentBlog[b-x6slgs7b2p] {
overflow: visible;
}
.contentBlog > div[b-x6slgs7b2p] {
overflow: visible;
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.8em;
}
.contentBlog > div > header[b-x6slgs7b2p] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
gap: 0.6em;
}
.contentBlog > div > header[b-x6slgs7b2p] > form {
display: flex;
align-items: center;
gap: 0.4em;
}
.contentBlog > div > header[b-x6slgs7b2p] > form > .dropDown > header {
height: 2.6em;
min-height: 2.6em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.9rem;
}
.contentBlog > div > header > div[b-x6slgs7b2p] {
display: flex;
flex-direction: row;
padding: 0;
gap: 0.5em;
}
.contentBlog > div > header > div > button[b-x6slgs7b2p] {
font-size: 0.9rem;
padding: 0.65em 0.8em;
height: auto;
}
.contentBlog > div > ul[b-x6slgs7b2p] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
padding: 0;
list-style: none;
}
.contentBlog > div > ul > li[b-x6slgs7b2p] {
min-width: 0;
display: flex;
flex-direction: column;
}
.contentBlog > div > ul > li.empty[b-x6slgs7b2p] {
flex: 1 1 auto;
justify-content: center;
align-items: center;
border-bottom: none;
text-align: center;
padding: 3em 0;
color: var(--txLight);
}
.contentBlog > div > ul > li.locked[b-x6slgs7b2p] {
font-size: 1.1em;
color: var(--txLight);
}
.contentBlog > div > ul > li.locked > a[b-x6slgs7b2p] {
color: var(--txColor);
text-decoration: none;
}
.contentBlog > footer[b-x6slgs7b2p] {
display: flex;
align-items: center;
justify-content: center;
}
/* /Views/Content/Default/Index.cshtml.rz.scp.css */
@charset "UTF-8";
/* 일반 형식 목록(Index/List) 전용 스타일 */
.contentDefault[b-7oxd1n5gix] {
overflow: visible;
}
.contentDefault > div[b-7oxd1n5gix] {
overflow: visible;
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.5em;
}
.contentDefault > div > header[b-7oxd1n5gix] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
gap: 0.6em;
/* 검색줄: 카테고리 선택 상자 + 검색 입력 */
}
.contentDefault > div > header[b-7oxd1n5gix] > form {
display: flex;
align-items: center;
gap: 0.4em;
/* 카테고리 드롭박스: 옆의 검색 입력(.inputGroup.sm, 글자 0.9rem 기준 2.6em)과 같은 글자 크기·높이 */
}
.contentDefault > div > header[b-7oxd1n5gix] > form > .dropDown > header {
height: 2.6em;
min-height: 2.6em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.9rem;
}
.contentDefault > div > header > div[b-7oxd1n5gix] {
display: flex;
flex-direction: row;
padding: 0;
gap: 0.5em;
}
.contentDefault > div > header > div > button[b-7oxd1n5gix] {
font-size: 0.9rem;
padding: 0.65em 0.8em;
height: auto;
}
.contentDefault > div > header > div > button:hover[b-7oxd1n5gix] {
background-color: var(--bgColor);
box-shadow: 0.1em 0.1em 0.4em 0.2em var(--aLight);
border-color: var(--aColor);
}
.contentDefault > div > header > div > button:active[b-7oxd1n5gix] {
box-shadow: inset 0.1em 0.1em 0.4em 0.2em var(--aColor);
}
.contentDefault > div > div[b-7oxd1n5gix] {
flex: 1 1 auto;
padding: 0;
max-width: 100%;
overflow: hidden;
font-size: 0.9em;
}
.contentDefault > div > div[b-7oxd1n5gix] > header {
background-color: var(--deco);
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span {
flex: 0 0 6em;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.space, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.space {
display: none;
flex: 1 1 auto;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.contentNo, .contentDefault > div > div[b-7oxd1n5gix] > header > span.read, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.contentNo, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.read {
flex: 0 0 3em;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title {
flex: 1 1 auto;
width: 0;
min-width: 0;
font-size: 1.1em;
display: flex;
flex-direction: row;
gap: 0.5em;
/* 목록 줄의 제목칸: 위에 제목줄(뱃지·제목·첨부·댓글 수), 아래에 요약글 */
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
min-width: 0;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span > a, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span > a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span {
/* 열 수 없는 글 (잠금): 링크가 없는 제목 */
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span > a:not([href]), .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span > a:not([href]) {
color: var(--txLight);
cursor: default;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span {
/* 제목 뒤 첨부 파일 수 */
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span > em, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span > em {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.1em;
align-items: center;
font-size: 0.8em;
color: var(--txLight);
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span > .badge, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span > .badge {
white-space: nowrap;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > span > i.fiArrReply, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > span > i.fiArrReply {
transform: rotate(180deg);
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title {
/* 요약글 줄의 본문 첫 이미지: 제목·요약글 왼쪽에 두 줄 높이로, 넓이는 최대 6em 까지(넘치면 가운데를 잘라 보임) */
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > img, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > img {
grid-row: 1/span 2;
height: 4em;
width: auto;
max-width: 6em;
object-fit: cover;
border-radius: var(--roundBox);
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title {
/* 요약글 (게시판 옵션 "요약글 표시", 공지 제외): 제목 아래 두 줄까지 */
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.title > small, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title > small {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
font-size: 0.75em;
color: var(--txLight);
white-space: normal;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span.create > span, .contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.create > span {
font-size: 0.9em;
}
.contentDefault > div > div[b-7oxd1n5gix] > header > span {
justify-content: center;
font-weight: bold;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul {
overflow: auto;
gap: 0;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li {
border: 1px solid transparent;
border-bottom: 1px dashed var(--aColor);
overflow: hidden;
transition: all 0.2s;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li:hover {
border-bottom: 1px solid var(--aLow);
border-radius: 0;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li > span:not(.title) {
justify-content: center;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title {
flex-direction: column;
justify-content: center;
align-items: stretch; /* 세로 쌓기라 공용 align-items: center 가 가로 가운데 정렬이 되지 않도록 */
gap: 0.2em;
/* 이미지가 있으면 [이미지 | 제목줄 / 요약글] 두 칸 */
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title:has(> img) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-content: center;
column-gap: 0.7em;
}
.contentDefault > footer[b-7oxd1n5gix] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 0.4em 0.8em;
background-color: var(--aLow);
border: 1px solid var(--aLow);
border-radius: var(--roundBox);
}
.contentDefault > footer > div[b-7oxd1n5gix] {
display: flex;
align-items: center;
gap: 0.6em;
flex: 1 1 auto;
justify-content: flex-end;
}
.contentDefault > footer > div:first-child[b-7oxd1n5gix] {
justify-content: flex-start;
}
.contentDefault > footer > div ul.pager > li[b-7oxd1n5gix] {
padding: 0;
}
.contentDefault > footer > div ul.pager > li > a[b-7oxd1n5gix] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0 0.6em;
color: inherit;
text-decoration: none;
}
/* 타블렛 W 이하 (~ 1024px) */
@media (width <= 1024px) {
.contentDefault > div > header[b-7oxd1n5gix] {
gap: 1.5em;
}
.contentDefault > div > header > div[b-7oxd1n5gix] {
display: flex;
flex-direction: row;
justify-content: right;
}
.contentDefault > div > header[b-7oxd1n5gix] > form {
display: flex;
}
.contentDefault > div > header[b-7oxd1n5gix] > form > div.dropDown {
flex: 0 0 auto;
}
.contentDefault > div > header[b-7oxd1n5gix] > form > div.inputGroup {
flex: 1 1 auto;
}
}
/* 타블렛 H 이하 (~ 780px) */
@media (width <= 780px) {
.contentDefault > div > div[b-7oxd1n5gix] > ul > li {
flex-wrap: wrap;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.space {
display: block;
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title {
flex: 1 1 calc(100% - 3.5em);
}
.contentDefault > div > div[b-7oxd1n5gix] > ul > li > span.title.topic {
flex: 1 1 100%;
}
}
/* 모바일 (~ 520px) */
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22Index.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;AACA;;AACA;EACI;EACA;EACA;AACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EAEI;;AAEA;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAVR;AAYI;;AACA;EACI;EACA;;AAfR;AAiBI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AA5CZ;AA+CI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAtDR;AAwDI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAKZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;AACA;;AACA;EACI;EACA;EACA;EACA;;AAQxB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMpB;AACA;EAGY;IACI;;EAEA;IACI;IACA;IACA;;EAEJ;IACI;;EAEI;IAAY;;EACZ;IAAe;;;AAQvC;AACA;EAIgB;IACI;;EAGI;IACI;;EAGJ;IACI;;EAEA;IACI;;;AAUhC%22,%22file%22:%22Index.cshtml.css%22%7D */
/* /Views/Content/Default/Manage.cshtml.rz.scp.css */
@charset "UTF-8";
/* 게시판 관리(Manage) 전용 스타일 */
.contentManage > section[b-ihb0ezz6ij] {
flex: 1 1 auto;
}
.contentManage > section > section[b-ihb0ezz6ij] {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.contentManage > section > section > div[b-ihb0ezz6ij] {
flex: 1 1 auto;
}
.contentManage > section > section > div > .form > .flexRow[b-ihb0ezz6ij] {
justify-content: flex-start;
flex-wrap: wrap;
gap: 1em;
}
.contentManage > section > section > div > .form > .flexRow > label.check[b-ihb0ezz6ij] {
width: auto;
}
.contentManage > section > section > div > .form[b-ihb0ezz6ij] {
/* 안내 문구: 작은 글씨, 옅은 색 (모든 탭 공통, 예: 갤러리 파일 구성 하단) */
}
.contentManage > section > section > div > .form > li > span.infoMsg[b-ihb0ezz6ij] {
font-size: 0.85em;
color: var(--txLight);
padding-left: 0.3em;
}
.contentManage > section > section > div > .form > li.subTitle > span > label[b-ihb0ezz6ij] {
font-weight: normal !important;
float: right;
margin: 0.5em 0.5em 0 0;
}
.contentManage > section > section > div#boardTabAccess[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove[b-ihb0ezz6ij] {
flex-direction: column;
flex-wrap: nowrap;
}
.contentManage > section > section > div#boardTabAccess.active[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile.active[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove.active[b-ihb0ezz6ij] {
display: flex;
}
.contentManage > section > section > div#boardTabAccess > ul.form[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form[b-ihb0ezz6ij] {
flex: 1 1 auto;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li[b-ihb0ezz6ij] {
flex: 0 0 auto;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto[b-ihb0ezz6ij] {
flex: 1 1 auto;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto > header[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto > header[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto > header[b-ihb0ezz6ij] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
flex: 0 0 auto;
padding: 0 0 0 0.3em;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto > header > div[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto > header > div[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto > header > div[b-ihb0ezz6ij] {
border: none;
padding: 0;
gap: 0.4em;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto > header > div:first-child[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto > header > div:first-child[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto > header > div:first-child[b-ihb0ezz6ij] {
padding-top: 0.4em;
line-height: 1em;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto > span.infoMsg[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto > span.infoMsg[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto > span.infoMsg[b-ihb0ezz6ij] {
flex: 0 0 auto;
font-size: 0.85em;
color: var(--txLight);
padding-left: 0.3em;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto > ul.managedList[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto > ul.managedList[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto > ul.managedList[b-ihb0ezz6ij] {
flex: 1 1 auto;
height: 10em;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto > footer[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto > footer[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto > footer[b-ihb0ezz6ij] {
border: none;
justify-content: flex-end;
gap: 0.5em;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto[inert][b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto[inert][b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto[inert][b-ihb0ezz6ij] {
opacity: 0.45;
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.auto[inert] > ul.managedList[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.auto[inert] > ul.managedList[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.auto[inert] > ul.managedList[b-ihb0ezz6ij] {
background-color: var(--bgSub);
border-color: var(--lineColor);
}
.contentManage > section > section > div#boardTabAccess > ul.form > li.subTitle[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabAccess > ul.form > .flexRow[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > li.subTitle[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabFile > ul.form > .flexRow[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > li.subTitle[b-ihb0ezz6ij], .contentManage > section > section > div#boardTabApprove > ul.form > .flexRow[b-ihb0ezz6ij] {
flex: 0 0 auto;
}
.contentManage[b-ihb0ezz6ij] {
/* 승인자 목록: 드래그 앤 드롭 순서 조정 */
}
.contentManage #boardTabApprove ul.managedList > li[b-ihb0ezz6ij] {
cursor: grab;
}
.contentManage #boardTabApprove ul.managedList > li.dragging[b-ihb0ezz6ij] {
opacity: 0.4;
}
.contentManage #boardTabApprove ul.managedList > li > .authDrag[b-ihb0ezz6ij] {
color: var(--txLight);
cursor: grab;
}
.contentManage > footer[b-ihb0ezz6ij] {
border-top: 1px dashed var(--aColor);
padding-top: 1em;
display: flex;
justify-content: center;
gap: 0.6em;
}
/* /Views/Content/Default/PostPassword.cshtml.rz.scp.css */
.postPassword[b-im4ji5rwry] {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 60dvh;
padding: 1em;
}
.postPassword > form[b-im4ji5rwry] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9em;
width: 100%;
max-width: 26em;
padding: 2.2em 1.6em;
border-radius: var(--roundBox);
background-color: var(--aLow);
text-align: center;
}
.postPassword > form > small[b-im4ji5rwry] {
color: var(--txLight);
}
.postPassword > form > i[b-im4ji5rwry] {
font-size: 2.4em;
color: var(--txLight);
}
.postPassword > form > p[b-im4ji5rwry] {
margin: 0;
}
.postPassword > form > strong[b-im4ji5rwry] {
font-size: 0.9em;
color: var(--danger1);
}
.postPassword > form > div[b-im4ji5rwry] {
display: flex;
gap: 0.6em;
width: 100%;
}
.postPassword > form > div > input[b-im4ji5rwry] {
flex: 1 1 auto;
min-width: 0;
}
.postPassword > form > div > button[b-im4ji5rwry] {
flex: 0 0 auto;
}
.postPassword > form > a[b-im4ji5rwry] {
font-size: 0.9em;
color: var(--txLight);
}
/* /Views/Content/Default/View.cshtml.rz.scp.css */
@charset "UTF-8";
/* 일반 형식 글 보기(View) 전용 스타일 */
.contentPost[b-ug4qoykdgw] {
flex: 1 1 auto;
height: 100%;
/* 메뉴얼: 맨 위 제목줄 — 게시판 제목은 크고 굵게 왼쪽, 목차 메뉴는 반대편 끝 */
/* 제목줄: 배지(공지·카테고리·상태)와 제목 */
/* 댓글 */
/* 이전/다음 글 */
/* 메뉴얼의 이전/다음 페이지: 양쪽 끝, 작은 "이전 글/다음 글" 글자 아래에 제목을 크게 */
/* 비회원 글 본인 확인(PostPassword) */
}
.contentPost > header.withToc[b-ug4qoykdgw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
.contentPost > header.withToc > span[b-ug4qoykdgw] {
font-size: 1.2em;
font-weight: bold;
}
.contentPost > header.withToc > span > a[b-ug4qoykdgw] {
color: var(--txLight);
}
.contentPost > div.contentWrap[b-ug4qoykdgw] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 0;
/* 다국어: 언어 전환 (제목줄 아래 작은 글자, 지금 보이는 언어는 진한 글자 + 밑줄 막대) */
/* AI 번역 안내 (본문 앞) */
/* 본문 (샌드박스 프레임이 들어간다) */
}
.contentPost > div.contentWrap > header[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
border-top: 2px solid var(--deco);
border-bottom: 1px solid var(--lineColor);
}
.contentPost > div.contentWrap > header > div.title[b-ug4qoykdgw] {
display: flex;
flex-direction: row;
padding: 0.5em 0;
align-items: center;
gap: 0.5em;
}
.contentPost > div.contentWrap > header > div.title > div[b-ug4qoykdgw] {
flex: 0 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
vertical-align: text-top;
gap: 0.5em;
/* 보이는 배지가 하나도 없으면(숨긴 "이전 글" 배지뿐) 칸 자체를 없애 제목 앞에 간격(gap)이 남지 않게 */
}
.contentPost > div.contentWrap > header > div.title > div > i[hidden][b-ug4qoykdgw] {
display: none;
}
.contentPost > div.contentWrap > header > div.title > div:not(:has(> i:not([hidden])))[b-ug4qoykdgw] {
display: none;
}
.contentPost > div.contentWrap > header > div.title > div > i.badge[b-ug4qoykdgw] {
white-space: nowrap;
}
.contentPost > div.contentWrap > header > div.title > span[b-ug4qoykdgw] {
flex: 1 1 auto;
margin: 0;
font-size: 1.2em;
font-weight: bold;
overflow-wrap: anywhere;
}
.contentPost > div.contentWrap div.contentInfo[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 0.3em;
}
.contentPost > div.contentWrap div.contentInfo > ul[b-ug4qoykdgw] {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
line-height: 1em;
color: var(--txLight);
justify-content: flex-end;
align-items: center;
gap: 1em;
/* 변경 기록 버튼 (변경 기록이 있을 때만) */
}
.contentPost > div.contentWrap div.contentInfo > ul:first-child[b-ug4qoykdgw] {
justify-content: flex-start;
}
.contentPost > div.contentWrap div.contentInfo > ul > li[b-ug4qoykdgw] {
font-size: 0.85em;
/* 글쓴이: 댓글 작성자와 같은 모양 (이미지 + 굵은 이름 + 활성 그룹·역할) */
/* 클릭하는 항목(변경 기록, 승인 기록) */
}
.contentPost > div.contentWrap div.contentInfo > ul > li.writer[b-ug4qoykdgw] {
font-size: 1em;
color: var(--main);
}
.contentPost > div.contentWrap div.contentInfo > ul > li.writer > strong[b-ug4qoykdgw] {
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.contentPost > div.contentWrap div.contentInfo > ul > li.writer > strong > small[b-ug4qoykdgw] {
font-weight: normal;
color: var(--txLight);
}
.contentPost > div.contentWrap div.contentInfo > ul > li.writer > strong > img[b-ug4qoykdgw] {
width: 1.6em;
height: 1.6em;
border-radius: 50%;
object-fit: cover;
}
.contentPost > div.contentWrap div.contentInfo > ul > li.writer > strong > i.fi[b-ug4qoykdgw] {
font-size: 1.3em;
color: var(--txLight);
}
.contentPost > div.contentWrap div.contentInfo > ul > li[id][b-ug4qoykdgw] {
cursor: pointer;
}
.contentPost > div.contentWrap div.contentInfo > ul > li > i.fi[b-ug4qoykdgw] {
vertical-align: middle;
font-size: 1.3em;
}
.contentPost > div.contentWrap div.contentInfo > ul button[b-ug4qoykdgw] {
height: auto;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.contentPost > div.contentWrap > nav[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3em 1em;
padding: 0.6em 1em 0;
font-size: 0.8em;
color: var(--txLight);
}
.contentPost > div.contentWrap > nav > a[b-ug4qoykdgw] {
color: inherit;
text-decoration: none;
padding-bottom: 0.15em;
border-bottom: 2px solid transparent;
}
.contentPost > div.contentWrap > nav > a:hover[b-ug4qoykdgw] {
color: var(--txColor);
}
.contentPost > div.contentWrap > nav > a.active[b-ug4qoykdgw] {
color: var(--main6);
font-weight: bold;
border-bottom-color: var(--main6);
}
.contentPost > div.contentWrap > p[b-ug4qoykdgw] {
flex: 0 0 auto;
margin: 1em 1em 0;
padding: 0.6em 0.9em;
border-radius: 0.5em;
background: var(--info1);
color: var(--txColor);
font-size: 0.85em;
}
.contentPost > div.contentWrap > section[b-ug4qoykdgw] {
flex: 1 1 auto;
min-height: 12em;
padding: 1em;
font-size: 0.9em; /* 본문 이미지 높이 제한은 공용 .contentBody(_Editor.scss) — 스크립트로 넣는 본문이라 이 격리 스타일은 닿지 않음 */
}
.contentPost > div.contentWrap > footer[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 1em;
/* 연관 링크 */
/* 태그, 첨부 파일 */
/* 좋아요(+1)·싫어요(-1) 합산, SNS 공유 / 승인전 글은 승인·반려 버튼 */
/* 승인 현황 (미승인 글) */
}
.contentPost > div.contentWrap > footer > aside[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
margin: 1em 0;
padding: 0.8em 1em;
border: 1px solid var(--aLow);
border-radius: var(--roundBox);
background-color: var(--aLow);
}
.contentPost > div.contentWrap > footer > aside > ul[b-ug4qoykdgw] {
display: flex;
flex-direction: column;
gap: 0.2em;
margin: 0;
padding: 0;
list-style: none;
}
.contentPost > div.contentWrap > footer > aside > ul a[b-ug4qoykdgw] {
color: var(--txLight);
overflow-wrap: anywhere;
font-size: 0.85em;
}
.contentPost > div.contentWrap > footer > div.viewExtend[b-ug4qoykdgw] {
flex: 0 0 auto;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.contentPost > div.contentWrap > footer > div.viewExtend > div.tags[b-ug4qoykdgw], .contentPost > div.contentWrap > footer > div.viewExtend > div.files[b-ug4qoykdgw] {
width: 100%;
padding: 0.5em 0;
border-radius: var(--roundBox);
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5em;
font-size: 0.85em;
}
.contentPost > div.contentWrap > footer > div.viewExtend > div.tags > label[b-ug4qoykdgw], .contentPost > div.contentWrap > footer > div.viewExtend > div.files > label[b-ug4qoykdgw] {
font-weight: bold;
text-transform: uppercase;
margin-right: 0.5em;
}
.contentPost > div.contentWrap > footer > div.viewExtend > div.tags > i.badge[b-ug4qoykdgw], .contentPost > div.contentWrap > footer > div.viewExtend > div.tags > a.badge[b-ug4qoykdgw], .contentPost > div.contentWrap > footer > div.viewExtend > div.files > i.badge[b-ug4qoykdgw], .contentPost > div.contentWrap > footer > div.viewExtend > div.files > a.badge[b-ug4qoykdgw] {
background-color: var(--aLow);
border: 1px solid var(--aLow);
color: var(--aDeep);
font-weight: bold;
}
.contentPost > div.contentWrap > footer > div.viewExtend > div.tags > a.badge[b-ug4qoykdgw], .contentPost > div.contentWrap > footer > div.viewExtend > div.files > a.badge[b-ug4qoykdgw] {
text-decoration: none;
overflow-wrap: anywhere;
}
.contentPost > div.contentWrap > footer > menu[b-ug4qoykdgw] {
display: flex;
justify-content: center;
gap: 0.8em;
padding: 1em 0;
/* 내가 누른 표 */
}
.contentPost > div.contentWrap > footer > menu > button.voted[b-ug4qoykdgw] {
font-weight: bold;
border-color: var(--aDeep);
color: var(--aDeep);
}
.contentPost > div.contentWrap > footer > menu > b[b-ug4qoykdgw] {
background-color: var(--aLow);
border: 1px solid var(--aLow);
border-radius: var(--roundBox);
padding: 0.5em;
display: flex;
justify-content: center;
align-items: center;
min-width: 3em;
}
.contentPost > div.contentWrap > footer > dl[b-ug4qoykdgw] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
margin: 1em 0 0;
padding: 0.6em 1em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
}
.contentPost > div.contentWrap > footer > dl[hidden][b-ug4qoykdgw] {
display: none;
}
.contentPost > div.contentWrap > footer > dl > dt[b-ug4qoykdgw] {
font-weight: bold;
}
.contentPost > div.contentWrap > footer > dl > dd[b-ug4qoykdgw] {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
margin: 0;
}
.contentPost > article[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding: 0;
}
.contentPost > article[hidden][b-ug4qoykdgw] {
display: none;
}
.contentPost > article > header[b-ug4qoykdgw] {
border-bottom: 2px solid var(--deco);
font-weight: bold;
font-size: 1em;
color: var(--main);
padding: 0.3em 0;
}
.contentPost > article > ul[b-ug4qoykdgw] {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.contentPost > article > ul > li[b-ug4qoykdgw] {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0.5em 0.3em 0.3em 0.3em;
border-bottom: 1px solid var(--lineColor);
/* 아래줄: 좋아요 묶음(좌) / 편집·삭제 묶음(우) */
}
.contentPost > article > ul > li > div:first-child[b-ug4qoykdgw] {
display: flex;
gap: 0.8em;
align-items: center;
color: var(--main);
/* 작성자: 이미지가 있으면 이름 앞에 작은 둥근 이미지 (한 줄) */
}
.contentPost > article > ul > li > div:first-child > strong[b-ug4qoykdgw] {
display: inline-flex;
align-items: center;
gap: 0.4em;
/* 활성 그룹·역할 */
}
.contentPost > article > ul > li > div:first-child > strong > small[b-ug4qoykdgw] {
font-weight: normal;
color: var(--txLight);
}
.contentPost > article > ul > li > div:first-child > strong > img[b-ug4qoykdgw] {
width: 1.6em;
height: 1.6em;
border-radius: 50%;
object-fit: cover;
}
.contentPost > article > ul > li > div:first-child > strong > i.fi[b-ug4qoykdgw] {
font-size: 1.3em;
color: var(--txLight);
}
.contentPost > article > ul > li > div:first-child > time[b-ug4qoykdgw] {
color: var(--txLight);
font-size: 0.85em;
}
.contentPost > article > ul > li > p[b-ug4qoykdgw] {
margin: 0 0 0.3em 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--txSub);
}
.contentPost > article > ul > li > textarea[b-ug4qoykdgw] {
width: 100%;
}
.contentPost > article > ul > li > div:last-child[b-ug4qoykdgw] {
display: flex;
align-items: center;
justify-content: space-between;
}
.contentPost > article > ul > li > div:last-child > div[b-ug4qoykdgw] {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
}
.contentPost > article > ul > li > div:last-child > div > span[b-ug4qoykdgw] {
padding: 0 0.5em;
border: none;
background-color: transparent;
box-shadow: none;
gap: 0.2em;
color: var(--txLight);
height: auto;
font-size: 0.9em;
transition: color 0.2s;
cursor: pointer;
/* 내가 누른 표 */
}
.contentPost > article > ul > li > div:last-child > div > span:hover[b-ug4qoykdgw] {
color: var(--txColor);
}
.contentPost > article > ul > li > div:last-child > div > span:active[b-ug4qoykdgw] {
color: var(--txLight);
}
.contentPost > article > ul > li > div:last-child > div > span.voted[b-ug4qoykdgw] {
font-weight: bold;
}
.contentPost > article > ul > li > div:last-child > div > span.voted[data-vote="1"][b-ug4qoykdgw] {
color: var(--deco);
}
.contentPost > article > ul > li > div:last-child > div > span.voted[data-vote="-1"][b-ug4qoykdgw] {
color: var(--danger);
}
.contentPost > article > ul > li > div:last-child > div > b[b-ug4qoykdgw] {
padding: 0.2em 0.5em;
color: var(--deco);
background-color: var(--aLow);
border: 1px solid var(--aLow);
border-radius: var(--roundBox);
line-height: 1.2em;
}
.contentPost > article[b-ug4qoykdgw] > form {
padding-top: 0.5em;
display: flex;
flex-direction: row;
gap: 0.5em;
}
.contentPost > article[b-ug4qoykdgw] > form[hidden] {
display: none;
}
.contentPost > article[b-ug4qoykdgw] > form > textarea {
width: 100%;
}
.contentPost > article[b-ug4qoykdgw] > form > button {
height: 100%;
flex-direction: column;
font-size: 0.9em;
}
.contentPost > nav[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
border: 1px solid var(--aColor);
border-radius: var(--roundBox);
}
.contentPost > nav > a[b-ug4qoykdgw] {
display: flex;
gap: 1em;
padding: 0.5em 1em;
border-bottom: 1px dashed var(--lineColor);
color: var(--txColor);
text-decoration: none;
/* 열 수 없는 이전/다음 글 (잠금) */
}
.contentPost > nav > a:last-child[b-ug4qoykdgw] {
border-bottom: none;
}
.contentPost > nav > a:hover[b-ug4qoykdgw] {
background-color: var(--aLow);
}
.contentPost > nav > a:not([href])[b-ug4qoykdgw] {
color: var(--txLight);
cursor: default;
}
.contentPost > nav > a:not([href]):hover[b-ug4qoykdgw] {
background-color: transparent;
}
.contentPost > nav > a > b[b-ug4qoykdgw] {
flex: 0 0 6em;
color: var(--txLight);
font-weight: normal;
}
.contentPost > nav > a > span[b-ug4qoykdgw] {
overflow-wrap: anywhere;
}
.contentPost > nav.manualNav[b-ug4qoykdgw] {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
padding: 0.5em;
border: none;
border-top: 1px solid var(--lineColor);
border-radius: 0;
}
.contentPost > nav.manualNav > a[b-ug4qoykdgw] {
display: flex;
flex-direction: column;
gap: 0.2em;
padding: 0;
border: none;
color: var(--deco);
font-size: 1em;
font-weight: bold;
}
.contentPost > nav.manualNav > a:hover[b-ug4qoykdgw] {
background-color: transparent;
}
.contentPost > nav.manualNav > a.next[b-ug4qoykdgw] {
grid-column: 2;
align-items: flex-end;
text-align: right;
}
.contentPost > nav.manualNav > a > b[b-ug4qoykdgw] {
flex: 0 0 auto;
color: var(--txLight);
font-size: 0.75em;
font-weight: bold;
}
.contentPost > nav.manualNav > a > span[b-ug4qoykdgw] {
padding-left: 1em;
}
.contentPost > nav.manualNav > a.next > span[b-ug4qoykdgw] {
padding-right: 1em;
}
.contentPost > nav.manualNav > a:not([href])[b-ug4qoykdgw] {
color: var(--txLight);
}
.contentPost > form[b-ug4qoykdgw] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8em;
padding: 2em 0;
}
.contentPost > form > p[b-ug4qoykdgw] {
margin: 0;
color: var(--txLight);
}
.contentPost > form > strong[b-ug4qoykdgw] {
color: var(--danger1);
}
.contentPost > form > div[b-ug4qoykdgw] {
display: flex;
gap: 0.6em;
}
.contentPost > footer[b-ug4qoykdgw] {
flex: 0 0 auto;
border-top: 1px dashed var(--aColor);
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 1em;
}
.contentPost > footer > div[b-ug4qoykdgw] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.5em;
}
.contentPost > footer > div > button[b-ug4qoykdgw], .contentPost > footer > div > .btn[b-ug4qoykdgw] {
font-size: 0.9rem;
padding: 0.65em 0.8em;
height: auto;
}
/* 타블렛 W 이하 (~ 1024px) */
@media (width <= 1024px) {
.contentPost > div.contentWrap > header > div.title[b-ug4qoykdgw] {
display: block;
}
.contentPost > div.contentWrap > header > div.title > div[b-ug4qoykdgw] {
margin-right: 0.5em;
}
}
/* 타블렛 H 이하 (~ 780px) */
/* 모바일 (~ 520px) */
/* 작성자 메뉴(메시지 보내기·글 보기)가 있는 작성자 이름: 누를 수 있음 표시 */
.contentPost [data-user][b-ug4qoykdgw] {
cursor: pointer;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Default/View.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;AACA;AAgBA;AA4SA;AA8JA;AA4CA;AAmDA;;AAxjBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;AA6HA;AA4BA;AAUA;;AAjKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAKA;;AAHA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA8CA;;AA5CA;EACI;;AAGJ;EACI;AACA;AA4BA;;AA3BA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAKZ;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;AACA;AA0BA;AAwCA;AAwBA;;AAzFA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;EACA;AACA;;AACA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;AA+CA;;AA7CA;EACI;EACA;EACA;EACA;AACA;;AACA;EACI;EACA;EACA;AACA;;AACA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AASA;;AAPA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;AASA;;AAPA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;;AAMhB;AACA;EAIgB;IACI;;EAEA;IACI;;;AAQxB;AAOA;AAOA;AACA;EACI%22%7D */
/* /Views/Content/Default/Write.cshtml.rz.scp.css */
@charset "UTF-8";
/* 일반 형식 글쓰기(Write) 전용 스타일 */
.contentWrite > ul.form[b-g9hi312n40] {
flex: 1 1 auto;
}
/* 다국어: 원문 + 번역 언어 탭 (공용 .tabBox 머리 모양) */
.contentWrite > nav[b-g9hi312n40] {
flex: 0 0 auto;
}
.contentWrite > nav > header[b-g9hi312n40] {
flex-wrap: wrap;
}
/* 번역 탭: 제목·본문 줄만 (원문에만 있는 항목, 공지·비공개 선택, 더보기 메뉴 숨김) */
.contentWrite > ul.form[data-translation] > li:not(.body):not(:first-child)[b-g9hi312n40], .contentWrite > ul.form[data-translation] > li:first-child .checkGroup[b-g9hi312n40], .contentWrite > ul.form[data-translation] #contentMoreBtn[b-g9hi312n40] {
display: none;
}
.contentWrite > ul.form > li[b-g9hi312n40] {
flex: 0 0 auto;
}
.contentWrite > ul.form > li.body[b-g9hi312n40] {
flex: 1 1 auto;
min-height: 20em;
}
.contentWrite > ul.form > li[hidden][b-g9hi312n40] {
display: none;
}
.contentWrite > ul.form > li[data-section=password] > div > input[b-g9hi312n40] {
width: 16em;
max-width: 100%;
}
.contentWrite > ul.form > li[b-g9hi312n40] {
/* 첨부 파일: 선택 버튼 + 제한 안내, 아래 목록은 한 줄에 파일명(말줄임) / 전송 상태(가장 넓게, 진행률) / 용량 / 삭제 */
}
.contentWrite > ul.form > li[data-section=files] > div[b-g9hi312n40] {
display: flex;
flex-direction: column;
gap: 0.6em;
}
.contentWrite > ul.form > li[data-section=files] > div > div[b-g9hi312n40] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8em;
}
.contentWrite > ul.form > li[data-section=files] > div > div > button[b-g9hi312n40] {
flex: 0 0 auto;
width: auto;
height: auto;
padding: 0.45em 0.8em 0.45em 0.6em; /* 모달의 취소/저장 버튼과 같은 크기 */
font-size: 0.9em;
}
.contentWrite > ul.form > li[data-section=files] > div > div > small[b-g9hi312n40] {
color: var(--txLight);
}
.contentWrite > ul.form > li[data-section=files] > div > div > input[type=file][b-g9hi312n40] {
display: none;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] {
display: flex;
flex-direction: column;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
gap: 0.2em;
margin: 0;
padding: 0.3em;
list-style: none;
}
.contentWrite > ul.form > li[data-section=files] > div > ul:empty[b-g9hi312n40] {
display: none;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] {
max-height: 8.4em; /* 4개 높이, 넘으면 스크롤 */
overflow-y: auto;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.2em;
border-radius: var(--roundBox);
border-top: 1px dashed var(--aColor);
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li:first-child {
border-top: none;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > span {
flex: 0 1 20em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9em;
padding-left: 0.4em;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > div {
flex: 1 1 0;
min-width: 6em;
display: flex;
align-items: center;
gap: 0.6em;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > div > progress {
flex: 1 1 auto;
min-width: 0;
height: 0.8em;
accent-color: var(--deco);
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > div > em {
flex: 0 0 auto;
min-width: 3em;
text-align: right;
font-style: normal;
font-size: 0.85em;
color: var(--txLight);
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > small {
flex: 0 0 5.5em;
text-align: right;
color: var(--txLight);
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > button {
flex: 0 0 auto;
width: 1.35em;
height: 1.35em;
padding: 0;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li[data-state=error] > div > progress {
display: none;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li[data-state=error] > div > em {
flex: 1 1 auto;
text-align: left;
color: var(--danger5);
}
.contentWrite > ul.form > li[data-section=links] > ul.links[b-g9hi312n40] {
display: flex;
flex-direction: column;
gap: 0.4em;
margin: 0;
padding: 0;
list-style: none;
}
.contentWrite > ul.form > li > header[b-g9hi312n40] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6em;
}
.contentWrite > ul.form > li > header > div[b-g9hi312n40] {
display: flex;
align-items: center;
gap: 0.6em;
}
.contentWrite > ul.form > li > div.title[b-g9hi312n40] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 1em;
}
.contentWrite > ul.form > li > div.title > div.inputGroup[b-g9hi312n40] {
flex: 1 1 auto;
}
.contentWrite > ul.form > li > div.title > div.checkGroup[b-g9hi312n40] {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 1em;
}
.contentWrite > ul.form > li > div.title > div.checkGroup > label.check[b-g9hi312n40] {
flex: 0 0 auto;
}
.contentWrite > ul.form > li div.category[b-g9hi312n40] {
justify-content: right;
}
.contentWrite > ul.form > li div.category > select[b-g9hi312n40] {
width: auto;
padding-right: 2.5em;
}
.contentWrite > ul.form[hidden][b-g9hi312n40], .contentWrite > footer > button[hidden][b-g9hi312n40] {
display: none;
}
.contentWrite[b-g9hi312n40] {
/* 수정할 비회원 글의 본인 확인(비밀번호 입력) */
}
.contentWrite > section.gate[b-g9hi312n40] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8em;
padding: 2em 0;
}
.contentWrite > section.gate[hidden][b-g9hi312n40] {
display: none;
}
.contentWrite > section.gate > p[b-g9hi312n40] {
margin: 0;
color: var(--txLight);
}
.contentWrite > section.gate > div[b-g9hi312n40] {
display: flex;
gap: 0.6em;
}
.contentWrite > footer[b-g9hi312n40] {
border-top: 1px dashed var(--aColor);
padding-top: 1em;
display: flex;
justify-content: center;
gap: 0.6em;
}
/* 타블렛 W 이하 (~ 1024px) */
/* 타블렛 H 이하 (~ 780px) */
@media (width <= 780px) {
.contentWrite > ul.form > li[b-g9hi312n40] {
flex-direction: column;
}
.contentWrite > ul.form > li > div.title[b-g9hi312n40] {
flex-direction: column;
align-items: initial;
}
.contentWrite > ul.form > li > div.title > div.checkGroup[b-g9hi312n40] {
justify-content: flex-end;
margin-bottom: -0.5em;
}
.contentWrite > ul.form > li.col2[b-g9hi312n40] {
display: flex;
}
.contentWrite > ul.form > li.col2 > div[b-g9hi312n40] {
flex-direction: column;
}
.contentWrite > ul.form > li.col2 > div > *[b-g9hi312n40], .contentWrite > ul.form > li.col2 > div > div > select[b-g9hi312n40] {
width: 100%;
}
}
/* 모바일 (~ 520px) */
@media (width <= 520px) {
.contentWrite[b-g9hi312n40] {
/* 첨부 파일 한 줄: 파일명 + 용량 + 삭제 위, 전송 상태는 아래 줄 전체 */
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] {
max-height: 14em; /* 모바일은 한 항목이 두 줄이라 더 높음 */
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li {
flex-wrap: wrap;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > span {
flex: 1 1 0;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > small {
order: 2;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > button {
order: 3;
}
.contentWrite > ul.form > li[data-section=files] > div > ul[b-g9hi312n40] > li > div {
order: 4;
flex: 1 1 100%;
}
}
/* /Views/Content/FAQ/Index.cshtml.rz.scp.css */
@charset "UTF-8";
/* FAQ형 목록(FAQ/Index) 전용 스타일: 가운데 제목·검색바·카테고리 목록 아래에 질문(Q)·답변(A) 카드 */
.contentFaq[b-wzs9vmla3w] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 1.2em;
width: 100%;
max-width: 56em;
margin-inline: auto;
/* 질문·답변 카드 (JS 로 그린 요소라 ::deep) */
}
.contentFaq > header[b-wzs9vmla3w] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
padding: 1em 0 0.5em 0;
/* 검색바: 카테고리 위쪽 가운데 */
/* 카테고리 목록: 태그처럼 늘어놓고 누르면 그 카테고리만, 한눈에 찾을 수 있는 크기 */
}
.contentFaq > header > h1[b-wzs9vmla3w] {
margin: 0;
font-size: 2em;
font-weight: bold;
}
.contentFaq > header > form[b-wzs9vmla3w] {
width: min(26em, 100%);
}
.contentFaq > header > ul.faqCategory[b-wzs9vmla3w] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4em 1.4em;
margin: 0;
padding: 0;
list-style: none;
}
.contentFaq > header > ul.faqCategory > li > span[b-wzs9vmla3w] {
display: inline-block;
padding: 0.4em 0.1em;
border-bottom: 3px solid transparent;
color: var(--txLight);
font-size: 1.1em;
cursor: pointer;
user-select: none;
transition: color 0.15s;
}
.contentFaq > header > ul.faqCategory > li > span:hover[b-wzs9vmla3w] {
color: var(--txColor);
}
.contentFaq > header > ul.faqCategory > li > span.active[b-wzs9vmla3w] {
border-bottom-color: var(--primary);
color: var(--txColor);
font-weight: bold;
}
.contentFaq > .faqBar[b-wzs9vmla3w] {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li {
display: flex;
flex-direction: column;
gap: 0.9em;
padding: 1.2em 1.4em;
border-radius: var(--roundBox);
background-color: var(--aLow);
/* 수정·삭제: 카드 아래 오른쪽, 평소에는 글자 */
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li.empty {
align-items: center;
color: var(--txLight);
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > .q, .contentFaq > ul.faqList[b-wzs9vmla3w] li > .a {
display: flex;
gap: 0.8em;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > .q > b, .contentFaq > ul.faqList[b-wzs9vmla3w] li > .a > b {
flex: 0 0 auto;
font-size: 1.25em;
font-weight: normal;
font-family: serif;
color: var(--txLight);
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > .q {
align-items: baseline;
padding-bottom: 0.9em;
border-bottom: 1px dashed var(--lineColor);
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > .q > strong {
font-size: 1.15em;
overflow-wrap: anywhere;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > .a > .body {
min-width: 0;
line-height: 1.7;
overflow-wrap: anywhere;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > footer {
display: flex;
justify-content: flex-end;
gap: 0.3em;
font-size: 0.85em;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > footer > span {
padding: 0.2em 0.8em;
border-radius: 2em;
color: var(--txLight);
cursor: pointer;
user-select: none;
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > footer > span:hover {
background-color: var(--aColor);
color: var(--txColor);
}
.contentFaq > ul.faqList[b-wzs9vmla3w] li > footer > span.danger:hover {
color: var(--danger1);
}
.contentFaq > footer[b-wzs9vmla3w] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 0.4em 0.8em;
}
.contentFaq > footer > div[b-wzs9vmla3w] {
display: flex;
align-items: center;
gap: 0.6em;
flex: 1 1 auto;
justify-content: flex-end;
}
.contentFaq > footer > div:first-child[b-wzs9vmla3w] {
justify-content: flex-start;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/FAQ/Index.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA4DA;;AA1DA;EACI;EACA;EACA;EACA;EACA;EACA;AAQA;AAKA;;AAXA;EACI;EACA;EACA;;AAIJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAMhB;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;AAsCA;;AApCA;EACI;EACA;;AAGJ;EAEI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAOpB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI%22%7D */
/* /Views/Content/FAQ/Write.cshtml.rz.scp.css */
@charset "UTF-8";
/* FAQ형 등록(FAQ/Write) 전용 스타일 */
.contentFaqWrite[b-0zamh0yfbr] {
display: flex;
flex-direction: column;
gap: 1em;
width: 100%;
max-width: 56em;
margin-inline: auto;
}
.contentFaqWrite > header > span > small[b-0zamh0yfbr] {
margin-inline-start: 0.5em;
color: var(--txLight);
}
.contentFaqWrite textarea[b-0zamh0yfbr] {
width: 100%;
resize: vertical;
line-height: 1.6;
}
.contentFaqWrite > footer[b-0zamh0yfbr] {
display: flex;
justify-content: center;
gap: 0.6em;
}
/* /Views/Content/Forum/Replies.cshtml.rz.scp.css */
@charset "UTF-8";
/* 포럼 토픽 보기의 댓글 영역(Replies) 전용 스타일 */
.forumReplies[b-lj6drv24m0] {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.forumReplies > header[b-lj6drv24m0] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
padding: 0.4em 0.2em;
border-bottom: 1px dashed var(--aDark);
font-weight: bold;
}
.forumReplies > header > span[role=button][b-lj6drv24m0] {
cursor: pointer;
}
.forumReplies > header > span[role=button] > i.fiChevronDown[b-lj6drv24m0] {
transition: transform 0.2s;
}
.forumReplies > header > div[b-lj6drv24m0] {
display: flex;
align-items: center;
gap: 0.4em;
}
.forumReplies.folded > ul[b-lj6drv24m0] {
display: none;
}
.forumReplies:not(.folded) > header > span[role=button] > i.fiChevronDown[b-lj6drv24m0] {
transform: rotate(180deg);
}
.forumReplies > ul[b-lj6drv24m0] {
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
padding: 0;
list-style: none;
}
.forumReplies > ul[b-lj6drv24m0] li {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0.5em;
border-bottom: 1px dashed var(--aDark);
transition: background-color 0.4s;
}
.forumReplies > ul[b-lj6drv24m0] li.flash {
background-color: var(--aLow);
}
.forumReplies > ul[b-lj6drv24m0] li.empty {
align-items: center;
color: var(--txLight);
}
.forumReplies > ul[b-lj6drv24m0] li {
/* 작성자·시각·부모 댓글 표시 */
}
.forumReplies > ul[b-lj6drv24m0] li > header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
/* 작성자: 이미지가 있으면 이름 앞에 작은 둥근 이미지 (한 줄) */
}
.forumReplies > ul[b-lj6drv24m0] li > header > strong {
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.forumReplies > ul[b-lj6drv24m0] li > header > strong > small {
font-weight: normal;
color: var(--txLight);
}
.forumReplies > ul[b-lj6drv24m0] li > header > strong > img {
width: 1.6em;
height: 1.6em;
border-radius: 50%;
object-fit: cover;
}
.forumReplies > ul[b-lj6drv24m0] li > header {
/* 오른쪽 끝: 작성자 IP(가려짐) + 시각 */
}
.forumReplies > ul[b-lj6drv24m0] li > header > .meta {
display: flex;
align-items: center;
gap: 0.5em;
margin-inline-start: auto;
color: var(--txLight);
font-size: 0.85em;
}
.forumReplies > ul[b-lj6drv24m0] li > header > a.to {
color: var(--txLight);
text-decoration: none;
font-size: 0.85em;
cursor: pointer;
}
.forumReplies > ul[b-lj6drv24m0] li > .body {
overflow-wrap: anywhere;
font-size: 0.9em;
}
.forumReplies > ul[b-lj6drv24m0] li > .body img {
max-width: 100%;
height: auto;
max-height: min(80vh, 48em); /* 너무 긴 이미지는 화면 높이를 넘지 않게 (비율은 유지) */
object-fit: contain;
border-radius: var(--roundBox);
}
.forumReplies > ul[b-lj6drv24m0] li {
/* 첨부: 글 보기의 첨부와 같은 모양 (라벨 + 파일 배지) */
}
.forumReplies > ul[b-lj6drv24m0] li > .files {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 0.2em 0.4em;
gap: 0.5em;
font-size: 0.85em;
}
.forumReplies > ul[b-lj6drv24m0] li > .files > label {
font-weight: bold;
text-transform: uppercase;
margin-right: 0.5em;
}
.forumReplies > ul[b-lj6drv24m0] li > .files > a.badge {
flex: 0 0 auto;
width: auto;
height: auto;
padding: 0.2em 0.7em;
background-color: var(--aLow);
border: 1px solid var(--aLow);
color: var(--aDeep);
font-weight: bold;
text-decoration: none;
overflow-wrap: anywhere;
}
.forumReplies > ul[b-lj6drv24m0] li {
/* 아래줄: 좋아요 묶음 / 기록·수정·삭제·댓글 달기 묶음 */
}
.forumReplies > ul[b-lj6drv24m0] li > footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div {
display: flex;
align-items: center;
gap: 0.2em;
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > * {
font-size: 0.9em;
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > b {
background-color: var(--aLow);
border: 1px solid var(--aLow);
border-radius: var(--roundBox);
padding: 0.2em 0.4em;
line-height: 1em;
color: var(--txSub);
}
.forumReplies > ul[b-lj6drv24m0] li {
/* 댓글 도구(span): 평소에는 글자, 마우스를 올리면 알약 모양 배경 */
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act] {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.2em 0.4em;
border-radius: 2em;
color: var(--txLight);
cursor: pointer;
user-select: none;
transition: background-color 0.15s, color 0.15s;
border: 1px solid transparent;
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span:hover, .forumReplies > ul[b-lj6drv24m0] li > footer > div > span:focus-visible, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act]:hover, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act]:focus-visible {
background-color: var(--aLow);
border-color: var(--aLow);
color: var(--txColor);
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span.voted, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act].voted {
color: var(--deco1);
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act] {
/* "N개의 댓글" 펼침 표시 화살표 */
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span.fold > i.fi, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act].fold > i.fi {
transition: transform 0.15s;
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span.fold.expanded > i.fi, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act].fold.expanded > i.fi {
transform: rotate(180deg);
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span:active, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act]:active {
color: var(--txLight);
}
.forumReplies > ul[b-lj6drv24m0] li > footer > div > span.disabled, .forumReplies > ul[b-lj6drv24m0] li > header > .meta > span[data-act].disabled {
opacity: 0.4;
pointer-events: none;
}
.forumReplies > ul[b-lj6drv24m0] li {
/* 바로 아래 댓글 목록 ("N개의 댓글"을 눌러 펼침) */
}
.forumReplies > ul[b-lj6drv24m0] li > ul.children {
display: flex;
flex-direction: column;
gap: 0.6em;
margin: 0.3em 0 0 0.6em;
padding: 0 0 0 1em;
list-style: none;
border-left: 2px solid var(--aColor);
}
.forumReplies > ul[b-lj6drv24m0] li > ul.children[hidden] {
display: none;
}
.forumReplies > ul[b-lj6drv24m0] li > ul.children > li {
border-top: 1px dashed var(--aColor);
border-bottom: none;
}
.forumReplies[b-lj6drv24m0] > ul.pager {
flex-direction: row;
justify-content: center;
}
/* 작성자 메뉴(메시지 보내기·글 보기)가 있는 댓글 작성자 이름: 누를 수 있음 표시 (스크립트로 그린 요소라 ::deep) */
.forumReplies[b-lj6drv24m0] strong[data-act=user] {
cursor: pointer;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22Replies.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAC;AACD;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAfR;AAiBI;;AACA;EACI;EACA;EACA;EACA;AACA;;AACA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAfZ;AAkBI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AA/DZ;AAkEI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA5FZ;AA+FI;;AACA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AArHhB;AAyHI;;AACA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EACI;;AArBR;AAuBI;;AACA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAhKZ;AAmKI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAMhB;EACQ;EACA;;;AAIZ;AACA;EACI;;AAEA;EACI%22,%22file%22:%22Replies.cshtml.css%22%7D */
/* /Views/Content/Gallery/Carousel.cshtml.rz.scp.css */
@charset "UTF-8";
/* 갤러리형 글 보기의 이미지 캐러셀: 큰 이미지(가운데) + 이전/다음 버튼 + 아래 썸네일 줄 */
.galleryViewer[b-vp24zuwr9b] {
display: flex;
flex-direction: column;
gap: 0.6em;
width: 100%;
font-size: 1rem;
margin-top: 1em;
/* 큰 이미지 무대 */
/* 썸네일 줄 */
}
.galleryViewer > div[b-vp24zuwr9b] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 8em; /* 높이는 지금 보이는 이미지의 높이에 맞춰 달라진다 (이미지 안 불러졌을 때만 최소 높이) */
background-color: var(--bgColor);
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
overflow: hidden;
/* 이전/다음 버튼: 무대 좌우 가장자리에 겹쳐 둔다 */
/* 현재 장 / 전체 장 */
}
.galleryViewer > div:fullscreen[b-vp24zuwr9b] {
height: 100vh;
border: none;
border-radius: 0;
}
.galleryViewer > div:fullscreen > ul > li > img[b-vp24zuwr9b] {
max-height: 100vh;
}
.galleryViewer > div > ul[b-vp24zuwr9b] {
flex: 1 1 auto;
align-self: stretch;
display: flex;
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.galleryViewer > div > ul > li[b-vp24zuwr9b] {
display: none;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
cursor: zoom-in;
}
.galleryViewer > div > ul > li.active[b-vp24zuwr9b] {
display: flex;
}
.galleryViewer > div > ul > li > img[b-vp24zuwr9b] {
display: block;
width: 100%;
height: auto;
max-height: min(80vh, 48em); /* 너무 긴 이미지는 화면을 넘지 않게 제한 */
object-fit: cover;
}
.galleryViewer > div:fullscreen > ul > li[b-vp24zuwr9b] {
cursor: zoom-out;
}
.galleryViewer > div > button[b-vp24zuwr9b] {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 2.6em;
height: 2.6em;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: 0.8;
}
.galleryViewer > div > button:hover[b-vp24zuwr9b] {
opacity: 1;
}
.galleryViewer > div > button:first-of-type[b-vp24zuwr9b] {
left: 0.6em;
}
.galleryViewer > div > button:last-of-type[b-vp24zuwr9b] {
right: 0.6em;
}
.galleryViewer > div > button[hidden][b-vp24zuwr9b] {
display: none;
}
.galleryViewer > div > span[b-vp24zuwr9b] {
position: absolute;
right: 0.8em;
bottom: 0.6em;
padding: 0.2em 0.7em;
font-size: 0.85em;
color: var(--txLight);
background-color: var(--bgColor);
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
}
.galleryViewer > ol[b-vp24zuwr9b] {
display: flex;
gap: 0.5em;
margin: 0;
padding: 0.2em 0;
list-style: none;
overflow-x: auto;
}
.galleryViewer > ol > li[b-vp24zuwr9b] {
flex: 0 0 5.5em;
height: 4em;
border: 2px solid transparent;
border-radius: 0.4em;
overflow: hidden;
opacity: 0.6;
cursor: pointer;
transition: opacity 0.2s;
}
.galleryViewer > ol > li:hover[b-vp24zuwr9b] {
opacity: 1;
}
.galleryViewer > ol > li.active[b-vp24zuwr9b] {
opacity: 1;
border-color: var(--deco);
}
.galleryViewer > ol > li > img[b-vp24zuwr9b] {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 모바일 (~ 520px) */
@media (width <= 520px) {
.galleryViewer > div > ul > li > img[b-vp24zuwr9b] {
max-height: 70vh;
}
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Gallery/Carousel.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;AAEA;AAwGA;;AAvGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA+CA;AAgCA;;AA7EA;EACI;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;AAMhB;AACA;EACI;IACI%22%7D */
/* /Views/Content/Gallery/Index.cshtml.rz.scp.css */
@charset "UTF-8";
/* 갤러리형 목록(Index/List) 전용 스타일: 카드 격자 */
.contentGallery[b-wtg0q0b0kz] {
overflow: visible;
}
.contentGallery > div[b-wtg0q0b0kz] {
overflow: visible;
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.8em;
/* 도구줄: 쓰기·미승인 버튼 / 검색 */
}
.contentGallery > div > header[b-wtg0q0b0kz] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
gap: 0.6em;
}
.contentGallery > div > header[b-wtg0q0b0kz] > form {
display: flex;
align-items: center;
gap: 0.4em;
}
.contentGallery > div > header[b-wtg0q0b0kz] > form > .dropDown > header {
height: 2.6em;
min-height: 2.6em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.9rem;
}
.contentGallery > div > header > div[b-wtg0q0b0kz] {
display: flex;
flex-direction: row;
padding: 0;
gap: 0.5em;
}
.contentGallery > div > header > div > button[b-wtg0q0b0kz] {
font-size: 0.9rem;
padding: 0.65em 0.8em;
height: auto;
}
.contentGallery > div[b-wtg0q0b0kz] {
/* 카드 격자 */
}
.contentGallery > div > ul[b-wtg0q0b0kz] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
gap: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li {
min-width: 0;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li.empty {
grid-column: 1/-1;
text-align: center;
padding: 3em 0;
color: var(--txLight);
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a {
display: flex;
flex-direction: column;
gap: 0.4em;
height: 100%;
padding: 0.5em;
color: var(--txColor);
text-decoration: none;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: var(--bgColor);
transition: box-shadow 0.2s, border-color 0.2s;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a:not([href]) {
color: var(--txLight);
cursor: default;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a[href]:hover {
border-color: var(--aColor);
box-shadow: 0.1em 0.1em 0.6em 0.1em var(--aLight);
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a {
/* 대표 이미지 (4:3, 가운데 채움) */
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > figure {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: var(--roundBox);
background-color: var(--aLow);
color: var(--txLight);
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > figure > i {
font-size: 3.2em;
opacity: 0.55;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > figure > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > figure {
/* 공지·임시저장·미승인 배지 */
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > figure > span {
position: absolute;
top: 0.4em;
left: 0.4em;
display: flex;
flex-wrap: wrap;
gap: 0.25em;
font-size: 0.8em;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > b {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > small {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2em 0.6em;
font-size: 0.8em;
color: var(--txLight);
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > small > i.fi {
margin-right: -0.4em;
}
.contentGallery > div > ul[b-wtg0q0b0kz] > li > a > small > time {
margin-left: auto;
}
.contentGallery[b-wtg0q0b0kz] {
/* 하단: 목록 크기, 페이저 */
}
.contentGallery > footer[b-wtg0q0b0kz] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6em;
}
/* 모바일 (~ 520px) */
@media (width <= 520px) {
.contentGallery > div > ul[b-wtg0q0b0kz] {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6em;
}
}
/* /Views/Content/Index.cshtml.rz.scp.css */
@charset "UTF-8";
div.pageWrap[b-utyp8jfhgm] {
display: flex;
height: 100%;
flex-direction: row;
gap: 1em;
overflow: visible;
/* 게시판 설정 사이드 구성 = 우측: 사이드 패널을 본문 오른쪽에 */
}
div.pageWrap.sideRight[b-utyp8jfhgm] {
flex-direction: row-reverse;
}
div.pageWrap > div[b-utyp8jfhgm] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow: visible;
padding: 0 0.5em;
/* 게시판 설정의 상단/하단 영역 HTML: 파샬뷰만 남는 높이를 채우고 이 영역은 내용 높이만 차지 */
}
div.pageWrap > div > header[b-utyp8jfhgm], div.pageWrap > div > footer[b-utyp8jfhgm] {
flex: 0 0 auto;
display: block;
padding: 0 1em;
}
div.pageWrap > div[b-utyp8jfhgm] > article {
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding: 0;
gap: 0.5em;
overflow: visible;
}
div.pageWrap > div[b-utyp8jfhgm] > article > header {
padding: 1em 0.5em;
}
div.pageWrap > div[b-utyp8jfhgm] > article > header > span {
display: inline-block;
padding: 0;
font-size: 1.8em;
font-weight: bold;
text-transform: capitalize;
color: var(--main);
}
div.pageWrap > div[b-utyp8jfhgm] > article > header > span > i.fi {
font-size: 1.1em;
margin: 0.05em 0 -0.05em 0;
}
div.pageWrap > div[b-utyp8jfhgm] > article > header > span > .badge {
font-size: 0.4em;
}
div.pageWrap > div[b-utyp8jfhgm] > article > header > span > small {
font-size: 0.7em;
color: var(--txLight);
}
div.pageWrap > div[b-utyp8jfhgm] > article > header > span > small > i.fi {
color: var(--main);
cursor: pointer;
transition: transform 0.2s;
}
/* 타블렛 W 이하 (~ 1024px) */
@media (width <= 1024px) {
div.pageWrap > div.auto[b-utyp8jfhgm] {
padding: 0;
}
}
/* 타블렛 H 이하 (~ 780px) */
/* 모바일 (~ 520px) */
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Index.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EAEI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;;AAS5B;AACA;EAEQ;IACI;;;AAKZ;AAOA%22%7D */
/* /Views/Content/Manual/Toc.cshtml.rz.scp.css */
@charset "UTF-8";
/* 메뉴얼 목차(Manual/Toc) 전용 스타일: 그룹 제목줄(굵게) 아래 페이지 메뉴 (JS 로 그린 요소라 ::deep) */
.manualToc[b-27x07s2mco] {
display: flex;
flex-direction: column;
gap: 1em;
font-size: 0.95rem;
}
.manualToc > .dropDown > header[b-27x07s2mco] {
height: 2.6em;
min-height: 2.6em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.9rem;
}
.manualToc > ul[b-27x07s2mco] {
display: flex;
flex-direction: column;
gap: 1.2em;
margin: 0;
padding: 0;
list-style: none;
}
.manualToc > ul[b-27x07s2mco] li.group {
display: flex;
flex-direction: column;
gap: 0.3em;
/* 그룹 제목줄 */
/* 그룹의 페이지 메뉴 */
}
.manualToc > ul[b-27x07s2mco] li.group > strong {
padding-bottom: 0.3em;
border-bottom: 1px solid var(--lineColor);
color: var(--txColor);
}
.manualToc > ul[b-27x07s2mco] li.group > strong a, .manualToc > ul[b-27x07s2mco] li.group > strong span {
color: inherit;
text-decoration: none;
}
.manualToc > ul[b-27x07s2mco] li.group > ol {
display: flex;
flex-direction: column;
gap: 0.4em;
margin: 0;
padding: 0 0 0 2em;
font-size: 0.9em;
}
.manualToc > ul[b-27x07s2mco] li.group > ol > li {
padding: 0.2em;
line-height: 1em;
color: var(--txLight);
}
.manualToc > ul[b-27x07s2mco] li.group > ol > li a {
color: inherit;
text-decoration: none;
}
.manualToc > ul[b-27x07s2mco] li.group > ol > li a:hover {
color: var(--txColor);
}
.manualToc > ul[b-27x07s2mco] li.group > ol > li a.active {
color: var(--pointDark);
font-weight: bold;
}
.manualToc > ul[b-27x07s2mco] li.group span {
color: var(--txLight);
}
.manualToc > ul[b-27x07s2mco] li.empty {
color: var(--txLight);
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Manual/Toc.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;AAEA;AAaA;;AAZA;EACI;EACA;EACA;;AAEA;EAEI;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAMhB;EACI;;AAIR;EACI%22%7D */
/* /Views/Content/Manual/TocMenu.cshtml.rz.scp.css */
@charset "UTF-8";
/* 메뉴얼 목차 메뉴(Manual/TocMenu) 전용 스타일: "목차" 버튼(span)과 그 아래로 열리는 목차 드롭다운 상자 */
.manualBar[b-zb83o4yl46] {
position: relative;
display: flex;
justify-content: flex-end;
font-size: 1rem;
font-weight: normal;
/* 목차 버튼: 평소에는 글자, 마우스를 올리거나 열려 있으면 알약 모양 배경 */
/* 목차 드롭다운 상자 */
}
.manualBar > span[b-zb83o4yl46] {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.9em;
border-radius: 2em;
border: 1px solid transparent;
color: var(--txLight);
cursor: pointer;
user-select: none;
transition: background-color 0.15s, color 0.15s;
}
.manualBar > span:hover[b-zb83o4yl46], .manualBar > span:focus-visible[b-zb83o4yl46], .manualBar > span.expanded[b-zb83o4yl46] {
border-color: var(--aLow);
background-color: var(--aLow);
color: var(--txColor);
}
.manualBar > span.expanded > i.fi:last-child[b-zb83o4yl46] {
transform: rotate(180deg);
}
.manualBar > .manualPanel[b-zb83o4yl46] {
position: absolute;
top: 100%;
right: 0;
z-index: 20;
width: min(24em, 94vw);
max-height: 70dvh;
overflow-y: auto;
margin-top: 0.3em;
padding: 0.9em 1em;
background-color: var(--bgColor);
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
box-shadow: 0 0.4em 1.5em var(--aDark);
text-align: left;
}
.manualBar > .manualPanel[hidden][b-zb83o4yl46] {
display: none;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Manual/TocMenu.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;EACA;EACA;AAEA;AA0BA;;AAzBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGI;EACA;EACA;;AAGJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI%22%7D */
/* /Views/Content/Manual/View.cshtml.rz.scp.css */
@charset "UTF-8";
/* 메뉴얼형 화면(Manual/View, Index) 전용 스타일: 글이 하나도 없을 때의 빈 화면 (글이 있으면 Default/View 가 그림) */
.contentManual[b-fdjoq9mkfu] {
flex: 1 1 auto;
}
.contentManual > .manualEmpty[b-fdjoq9mkfu] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8em;
padding-bottom: 2em;
color: var(--txLight);
/* 제목줄: 제목은 왼쪽, 목차 메뉴는 반대편 끝 */
}
.contentManual > .manualEmpty > header[b-fdjoq9mkfu] {
align-self: stretch;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 0.3em 0;
border-bottom: 2px solid var(--aColor);
color: var(--txColor);
}
.contentManual > .manualEmpty > header > h2[b-fdjoq9mkfu] {
margin: 0;
font-size: 1.5em;
font-weight: bold;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Manual/View.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA%22%7D */
/* /Views/Content/Portal.cshtml.rz.scp.css */
@charset "UTF-8";
div.flexRow.alignStart[b-da6es9a1r6] {
font-size: 1rem;
height: 100%;
}
div.flexRow.alignStart > div[b-da6es9a1r6] {
padding: 0 0 0 0.5em;
padding-top: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 1em;
}
div.flexRow.alignStart > div > .flexRow[b-da6es9a1r6] {
gap: 1em;
}
div.flexRow.alignStart > div > .flexRow > *[b-da6es9a1r6] {
flex: 1 1 auto;
}
div.flexRow.alignStart > div > .flexRow > img[b-da6es9a1r6] {
border-radius: var(--roundBox);
}
div.flexRow.alignStart > div > .flexRow > ul.vertical[b-da6es9a1r6] {
flex: 1 1 33%;
min-width: 16em;
}
/* 타블렛 W 이하 (~ 1024px) */
@media (width <= 1024px) {
div.flexRow.alignStart > div.auto[b-da6es9a1r6] {
padding: 0;
}
}
/* 타블렛 H 이하 (~ 780px) */
/* 모바일 (~ 520px) */
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Portal.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;EACI;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;;AAMhB;AACA;EAEQ;IACI;;;AAKZ;AAOA%22%7D */
/* /Views/Content/SidePanel.cshtml.rz.scp.css */
@charset "UTF-8";
/* 컨텐츠 공통 사이드 패널(SidePanel): 쌓기형 위젯(맨 위 컨텐츠맵 트리 위젯 …) — 트리 머리줄·트리 모양은 Views/Widgets/ContentMap/View.cshtml.scss */
.contentSide[b-y3e8w0nol9] {
flex: 0 0 14em;
/* 화면 높이 안에 머무름 (스크롤 영역 = 머리글 아래 본문, 그 여백 0.5em 만큼 띄움) — 넘치는 위젯은 위젯 부분 스크롤 */
position: sticky;
top: 0.5em;
max-height: calc(100vh - 6em);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.5em;
font-size: 1rem;
}
.contentSide > *[b-y3e8w0nol9] {
width: 100%;
}
.contentSide[b-y3e8w0nol9] {
/* 사이드 위젯(_PageSections "side", 다른 뷰라 ::deep): 페이지 본문용 위아래 여백(1em) 없이, 위젯 사이 0.5em,
패널 높이(화면 높이까지)를 넘으면 위젯 부분만 스크롤 */
}
.contentSide[b-y3e8w0nol9] > div.pageSections {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0;
gap: 0.5em;
}
/* 타블렛 W 이하 (~ 1024px) */
@media (width <= 1024px) {
aside.contentSide[b-y3e8w0nol9] {
position: fixed;
top: 4.8em;
right: 0.5em;
bottom: 0.5em;
width: 16em;
height: auto;
max-height: none;
margin-right: -17em;
gap: 0.5em;
z-index: 9999;
background-color: var(--bgColor);
padding: 1em 0.5em;
border: 1px solid var(--aDark);
border-radius: var(--roundBox);
transition: all 0.2s;
box-shadow: 0 0 0.6em 0.2em var(--aDark);
}
}
/* 타블렛 H 이하 (~ 780px) */
@media (width <= 780px) {
aside.contentSide[b-y3e8w0nol9] {
top: 4em;
}
}
/* 모바일 (~ 520px) */
/* /Views/Content/Survey/Editor.cshtml.rz.scp.css */
@charset "UTF-8";
/* 설문 편집기(Survey/Editor) 전용 스타일: 소개문 입력 + 설문 항목 카드 목록 (JS 로 그린 요소라 ::deep) */
.surveyEditor[b-4fk6en2uz3] {
display: flex;
flex-direction: column;
gap: 1.2em;
width: 100%;
}
.surveyEditor[b-4fk6en2uz3] section {
display: flex;
flex-direction: column;
gap: 0.5em;
/* 설문 항목 카드 (보기 전용) */
}
.surveyEditor[b-4fk6en2uz3] section > label {
font-size: 0.9em;
font-weight: 700;
}
.surveyEditor[b-4fk6en2uz3] section > textarea {
width: 100%;
resize: vertical;
line-height: 1.6;
}
.surveyEditor[b-4fk6en2uz3] section > header {
display: flex;
align-items: center;
gap: 0.6em;
padding: 0;
}
.surveyEditor[b-4fk6en2uz3] section > header > small {
color: var(--txLight);
}
.surveyEditor[b-4fk6en2uz3] section > header > button {
margin-inline-start: auto;
}
.surveyEditor[b-4fk6en2uz3] section > .note {
margin: 0;
font-size: 0.85em;
color: var(--txLight);
}
.surveyEditor[b-4fk6en2uz3] section > ol {
display: flex;
flex-direction: column;
gap: 0.6em;
margin: 0;
padding: 0;
list-style: none;
}
.surveyEditor[b-4fk6en2uz3] section > ol > li {
display: flex;
flex-direction: column;
gap: 0.4em;
padding: 0.8em 1em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
/* 편집·삭제: 평소에는 글자 */
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .head > .q.empty {
color: var(--txLight);
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .head > em {
padding: 0 0 0 0.5em;
font-style: normal;
font-size: 0.8em;
color: var(--txLight);
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > ol {
display: flex;
flex-direction: column;
gap: 0.2em;
margin: 0;
padding: 0 0 0 1.4em;
list-style: lower-alpha;
color: var(--txLight);
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .tools {
display: flex;
justify-content: flex-end;
gap: 0.3em;
font-size: 0.85em;
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .tools > span {
padding: 0.2em 0.8em;
border-radius: 2em;
color: var(--txLight);
cursor: pointer;
user-select: none;
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .tools > span:hover {
background-color: var(--aColor);
color: var(--txColor);
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .tools > span.danger:hover {
color: var(--danger1);
}
.surveyEditor[b-4fk6en2uz3] section > ol > li > .tools > i.fi {
color: var(--txLight);
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Survey/Editor.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;AAiCA;;AA/BA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;AAyBA;;AArBI;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAIR;EACI%22%7D */
/* /Views/Content/Survey/Panel.cshtml.rz.scp.css */
@charset "UTF-8";
/* 설문 패널(Survey/Panel) 전용 스타일: 소개문, 참여 폼 또는 결과 (JS 로 그린 요소라 ::deep) */
.surveyPanel[b-inv4qxbycl] {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 1em 0;
}
.surveyPanel[b-inv4qxbycl] p.intro {
margin: 0;
line-height: 1.7;
white-space: pre-line;
overflow-wrap: anywhere;
}
.surveyPanel[b-inv4qxbycl] p.stat {
margin: 0;
font-size: 0.9em;
color: var(--txLight);
}
.surveyPanel[b-inv4qxbycl] p.notice {
margin: 0;
color: var(--txLight);
}
.surveyPanel[b-inv4qxbycl] .toggle {
align-self: flex-start;
padding: 0.3em 0.9em;
border-radius: 2em;
color: var(--txLight);
cursor: pointer;
user-select: none;
}
.surveyPanel[b-inv4qxbycl] .toggle:hover {
background-color: var(--aColor);
color: var(--txColor);
}
.surveyPanel[b-inv4qxbycl] .questions {
display: flex;
flex-direction: column;
gap: 1em;
}
.surveyPanel[b-inv4qxbycl] .questions > section.question {
display: flex;
flex-direction: column;
gap: 0.7em;
padding: 1em 1.2em;
border-radius: var(--roundBox);
background-color: var(--aLow);
/* 결과: 옵션 이름·득표수 줄과 비율 막대 */
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > .head {
display: inline-block;
font-weight: bold;
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > .head > em {
padding: 0 0 0 0.5em;
font-style: normal;
font-size: 0.8em;
font-weight: normal;
color: var(--txLight);
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ul, .surveyPanel[b-inv4qxbycl] .questions > section.question > ol {
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
padding: 0;
list-style: none;
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result {
padding-left: 2em;
list-style: lower-alpha;
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li {
display: list-item; /* flex 로 두면 번호가 나오지 않음 */
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li > .line {
display: flex;
justify-content: space-between;
gap: 1em;
font-size: 0.95em;
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li > .line > .num {
flex: 0 0 auto;
color: var(--txLight);
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li > .bar {
margin-top: 0.25em;
height: 0.6em;
border-radius: 1em;
background-color: var(--aColor);
overflow: hidden;
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li > .bar > i {
display: block;
height: 100%;
background-color: var(--main);
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li.mine > .line > .name {
font-weight: bold;
color: var(--pointDark);
}
.surveyPanel[b-inv4qxbycl] .questions > section.question > ol.result > li.mine > .bar > i {
background-color: var(--point);
}
.surveyPanel[b-inv4qxbycl] > button {
align-self: center;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Content/Survey/Panel.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;AA6BA;;AA3BA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAIR;EAEI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;;AAMhB;EACI%22%7D */
/* /Views/Home/Color.cshtml.rz.scp.css */
@charset "UTF-8";
/* 서비스 컬러선택 도우미 (.colorHelper, /Service/Color): 좌측 세트 편집(하단 3×2 타일 버튼) / 가운데 샘플(+하단 슬롯 바) / CSS 코드 모달, 색 선택기·슬롯 팝오버
목록·팝오버 내용은 스크립트(ColorHelper.ts)가 만들므로 하위 요소는 모두 ::deep 으로 지정한다.
가운데 샘플의 --main/--sub/--point/--deco(+Light/Dark/1~9)는 스크립트가 슬롯 값으로(샘플 section 에만), 배경·글자색은 샘플 테마(어둡게 = [data-theme="dark"], 사이트가 어두울 때 밝게 = 스크립트가 루트 표면색 지정)로 바뀐다.
좌측 패널·모달은 샘플 밖이라 사이트 레이아웃 색을 그대로 쓴다. */
.colorHelper[b-2sy0j9mkrc] {
font-size: 1rem;
display: flex;
gap: 1em;
height: calc(100vh - 9em);
min-height: 40em;
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] {
/* ---------- 좌측 패널: 둥근 상자 / 탭 · 목록 · 타일 버튼 ---------- */
/* ---------- 가운데: 제목·설명·안내 + 미리보기 상자 (사이트 레이아웃 색) ---------- */
/* ---------- 미리보기 상자: 샘플 ---------- */
/* ---------- CSS 코드 모달: 좌측 옵션·변수 이름 / 우측 코드, 제목·닫기는 레이아웃 main 색 ---------- */
/* ---------- 팝오버 공통 ---------- */
/* 색 선택기 */
/* 슬롯 색 고르기: 좌측 색들의 작은 원형 목록 */
}
.colorHelper[b-2sy0j9mkrc] > aside {
flex: none;
display: flex;
flex-direction: column;
gap: 0.8em;
width: 18.5em;
padding: 0.8em;
border-radius: var(--roundBox);
background-color: var(--bgSub);
overflow: hidden;
/* 탭: 가운데 정렬된 알약형 전환 */
/* 프리셋 한 줄: 덮어쓰기 · 알약형 색 막대 · 삭제 (아이콘은 마우스를 올린 줄만 표시) */
/* 편집 색 카드: 큰 견본 + 밝은/어두운 색, 아래 단계 1~9 를 이어 붙인 띠.
선택은 안쪽 2px 테두리(스크롤 영역에 잘리지 않음), 삭제는 마우스를 올린 카드만 표시 */
/* 타일 버튼: 위 = 색상 추가 · 프리셋 추가 · CSS 코드 (주요 기능 3칸) / 아래 = 내보내기 · 가져오기 (보조 기능 슬림 바 2칸 가득) */
}
.colorHelper[b-2sy0j9mkrc] > aside > nav {
flex: none;
display: flex;
padding: 0.25em;
border-radius: 2em;
background-color: var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > aside > nav > a {
flex: 1;
padding: 0.4em;
text-align: center;
font-size: 0.8em;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 2em;
color: var(--txSub);
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
}
.colorHelper[b-2sy0j9mkrc] > aside > nav > a:hover {
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > aside > nav > a.active {
background-color: var(--bgColor);
color: var(--main);
box-shadow: 0 0.1em 0.4em var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul {
flex: auto;
display: flex;
flex-direction: column;
gap: 0.6em;
list-style: none;
margin: 0;
padding: 0.1em;
overflow-y: auto;
scrollbar-width: thin;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li {
flex: none;
display: flex;
align-items: center;
gap: 0.25em;
height: 1.7em;
padding: 0.1em 0.2em;
border-radius: 2em;
cursor: pointer;
transition: background-color 0.15s;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li > span {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
font-size: 1.1em;
color: var(--txLight);
opacity: 0;
transition: opacity 0.15s, color 0.15s, transform 0.15s;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li > span:first-child:hover {
color: var(--info);
transform: scale(1.15);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li > span:last-child:hover {
color: var(--danger);
transform: scale(1.15);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li > div {
flex: auto;
display: flex;
height: 100%;
border-radius: 2em;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--aLow), 0 0.1em 0.3em var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li > div > span {
flex: auto;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li:hover {
background-color: var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=preset] > li:hover > span {
opacity: 1;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li {
position: relative;
flex: none;
display: grid;
grid-template-columns: 3.6em 1fr;
align-items: center;
gap: 0.7em 0.8em;
padding: 0.7em;
border: 2px solid transparent;
border-radius: var(--roundBox);
background-color: var(--bgColor);
box-shadow: 0 0.1em 0.3em var(--aLow);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li:hover {
box-shadow: 0 0.2em 0.7em var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li.active {
border-color: var(--main); /* 레이아웃 main (좌측 패널은 샘플 밖) */
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > header {
display: flex;
align-items: center;
justify-content: center;
width: 3.6em;
height: 3.6em;
border-radius: 0.7em;
box-shadow: inset 0 0 0 1px var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > header > span {
font-size: 0.7em;
font-weight: normal;
font-family: monospace;
letter-spacing: -0.02em;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > ol {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 3.6em;
list-style: none;
margin: 0;
padding: 0;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > ol > li {
display: flex;
align-items: center;
gap: 0.6em;
font-size: 0.85em;
font-weight: 500;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > ol > li > span {
flex: none;
width: 1.8em;
height: 1.8em;
border-radius: 0.35em;
box-shadow: inset 0 0 0 1px var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > ul {
grid-column: 1/-1;
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-radius: 0.5em;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > ul > li {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 1.9em;
margin: 0;
padding: 0;
font-size: 0.7em;
font-weight: 600;
line-height: 1;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > span {
position: absolute;
top: 0.35em;
right: 0.45em;
line-height: 1;
color: var(--txLight);
opacity: 0;
transition: opacity 0.15s;
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li > span:hover {
color: var(--danger);
}
.colorHelper[b-2sy0j9mkrc] > aside > ul[data-list=palette] > li:hover > span {
opacity: 1;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer {
flex: none;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.4em;
padding-top: 0.8em;
border-top: 1px solid var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > input[hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button {
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35em;
height: auto;
padding: 0.7em 0.2em 0.6em;
border: none;
border-radius: var(--roundBox);
background-color: var(--main);
color: var(--bgColor);
box-shadow: 0 0.1em 0.3em var(--aLight);
/* 보조 버튼 (Export, Import): 주요 기능을 강조하기 위해 가로 슬림 바 형태와 --main4 / --aLow 톤 적용 */
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button > i {
width: 1em; /* 아이콘은 마스크라 크기를 em 으로 지정 */
height: 1em;
font-size: 1.7em;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button > span {
font-size: 0.72em;
font-weight: 600;
white-space: nowrap;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button:hover {
background-color: var(--mainLight);
box-shadow: 0 0.2em 0.7em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button:disabled {
opacity: 0.4;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=export], .colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=import] {
grid-column: span 3;
flex-direction: row;
gap: 0.4em;
padding: 0.4em 0.6em;
background-color: var(--main4);
border: 1px solid var(--aLow);
color: var(--bgColor);
box-shadow: 0 0.1em 0.25em var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=export] > i, .colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=import] > i {
font-size: 1.2em;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=export] > span, .colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=import] > span {
font-size: 0.75em;
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=export]:hover, .colorHelper[b-2sy0j9mkrc] > aside > footer > button[data-act=import]:hover {
background-color: var(--main5);
border-color: var(--aColor);
color: var(--bgColor);
box-shadow: 0 0.15em 0.4em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article {
flex: auto;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.7em;
/* 제목 줄: 제목 · (오른쪽 끝) 도움말 아이콘, 아래 설명. 도움말 드롭다운은 제목 줄 오른쪽 아래에 */
/* 페이지 사용법 한 줄 안내 */
}
.colorHelper[b-2sy0j9mkrc] > article > header {
position: relative;
flex: none;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.6em;
padding: 0.2em 0.2em 0;
}
.colorHelper[b-2sy0j9mkrc] > article > header > h1 {
margin: 0 0 0.2em;
font-size: 1.7em;
font-weight: 800;
line-height: 1.2;
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > article > header > span {
font-size: 1.5em;
line-height: 1;
color: var(--txLight);
cursor: pointer;
transition: color 0.15s;
}
.colorHelper[b-2sy0j9mkrc] > article > header > span:hover {
color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > header > p {
grid-column: 1/-1;
margin: 0;
font-size: 0.95em;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] {
position: absolute;
top: 2.6em;
right: 0;
z-index: 60;
width: min(34em, 100vw - 1.5em);
max-height: min(36em, 70vh);
overflow-y: auto;
scrollbar-width: thin;
padding: 0.4em 1em 1em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: var(--bgColor);
box-shadow: 0 0.5em 1.6em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help][hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > h3 {
display: flex;
align-items: center;
gap: 0.4em;
margin: 0.9em 0 0.4em;
font-size: 0.95em;
color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul {
display: flex;
flex-direction: column;
gap: 0.35em;
list-style: none;
margin: 0;
padding: 0;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li {
display: grid;
grid-template-columns: 9.5em 1fr;
align-items: center;
gap: 0.8em;
padding: 0.35em 0;
/* 실제 화면과 같은 모양: 아이콘(i) · 탭(em) · 색 막대(q > u) · 견본(s) · 타일(b[data-tile]) */
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li + li {
border-top: 1px dashed var(--lineColor);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > span {
font-size: 0.85em;
line-height: 1.45;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > span > strong {
margin-right: 0.3em;
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35em;
min-height: 2em;
padding: 0.4em 0.5em;
border-radius: var(--roundBtn);
background-color: var(--bgSub); /* 화면 모양(아이콘·막대 등)만 옅은 바탕으로 구분 */
font-weight: normal;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > i {
font-size: 1.25em;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > i[data-tone=info] {
color: var(--info);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > i[data-tone=danger] {
color: var(--danger);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > i[data-tone=point] {
color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > em {
padding: 0.3em 0.6em;
font-size: 0.65em;
font-style: normal;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 2em;
background-color: var(--aLight);
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > em:last-child {
background-color: var(--bgColor);
color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > code {
font-family: monospace;
font-size: 0.72em;
color: var(--txSub);
white-space: nowrap;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > q {
display: flex;
flex: auto;
height: 1.2em;
border-radius: 2em;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > q::before, .colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > q::after {
content: none;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > q > u {
flex: 1;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > s {
flex: none;
width: 2em;
height: 2em;
border-radius: 0.5em;
box-shadow: inset 0 0 0 1px var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > s[data-shape=round] {
width: 1.1em;
height: 1.1em;
border-radius: 50%;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b > s[data-shape=slot] {
width: 1.5em;
height: 1.5em;
border-radius: 50%;
border: 0.12em solid var(--bgColor);
box-shadow: 0 0 0 1px var(--aColor);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b[data-tile] {
justify-self: center;
width: 3em;
height: 2.6em;
border-radius: var(--roundBtn);
background-color: var(--main);
color: var(--bgColor);
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b[data-tile] > i {
color: inherit;
}
.colorHelper[b-2sy0j9mkrc] > article > p {
flex: none;
display: flex;
align-items: center;
gap: 0.5em;
margin: 0;
padding: 0.45em 0.9em;
border-radius: 2em;
background-color: var(--aLow);
font-size: 0.8em;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > p > i {
font-size: 1.15em;
}
.colorHelper[b-2sy0j9mkrc] > article > section {
position: relative;
flex: auto;
min-width: 0;
min-height: 0; /* 제목·안내 아래 남은 높이 안에서 샘플이 스크롤 */
display: flex;
flex-direction: column;
gap: 0.8em;
padding: 0.8em 1.2em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: var(--bgColor);
color: var(--txColor);
/* 화면 샘플 — 슬롯 색을 넓게: 상단 바 main 진한 단계, 히어로 main→sub 그라데이션, 지표 타일·목록은 슬롯별 옅은 단계 바탕 + 진한 단계 글자,
순수 슬롯 색은 아이콘 원·진행 막대·그래프·도넛에 (단계 1~9 는 밝기가 고정이라 글자 대비가 슬롯 색과 상관없이 유지됨) */
/* 컴포넌트 샘플: 카테고리 제목 및 테두리 상자 없이 다양한 컨트롤 흐름 배치 */
/* 명도 대비 및 색상 변화 샘플 */
/* 숨긴 샘플 화면: 위 화면별 display 지정보다 뒤에 두어 hidden 이 이기게 함 */
/* 슬롯 선택기: 샘플 아래쪽 가운데에 뜬 둥근 바 — 안내 문구 위, 역할(main·sub·point·deco)별 원형 견본 아래 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > header {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding-bottom: 0.7em;
border-bottom: 1px solid var(--lineColor);
/* 샘플 테마 전환: 현재 테마 아이콘만 표시 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > div {
display: flex;
flex-direction: column;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > div > h2 {
display: flex;
align-items: center;
gap: 0.4em;
margin: 0;
font-size: 1.25em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > div > h2:before {
content: "";
width: 0.3em;
height: 1.1em;
border-radius: 0.5em;
background-color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > div > small {
font-size: 0.75em;
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav {
display: flex;
gap: 0.25em;
padding: 0.25em;
border-radius: var(--roundBtn);
background-color: var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav > a {
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.4em 0.85em;
font-size: 0.8em;
font-weight: 600;
border-radius: var(--roundBtn);
color: var(--txSub);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav > a.active {
background-color: var(--bgColor);
color: var(--txColor);
box-shadow: 0 0.1em 0.3em var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > span {
flex: none;
font-size: 1.3em;
color: var(--point);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > span > i.fiMoon {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section[data-theme=dark] > header > span > i.fiSun {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section[data-theme=dark] > header > span > i.fiMoon {
display: inline-block;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main {
flex: auto;
overflow-y: auto;
padding: 0 0.3em 6.5em 0; /* 아래쪽 여백: 떠 있는 슬롯 바에 마지막 내용이 가리지 않게 */
scrollbar-width: thin;
/* 샘플 공통 카드 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article {
display: flex;
flex-direction: column;
gap: 0.8em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article > header,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article > section,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article > ul > li,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article > div > figure,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article > div > aside {
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: var(--bgSub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main small {
font-size: 0.75em;
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] {
/* 지표 타일: 순서대로 main · sub · point · deco · colorA · colorB 원 색상 배경 + 내부 요소 밝기 단계 시각화 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header {
display: flex;
align-items: center;
gap: 0.8em;
padding: 0.6em 0.9em;
border: none;
background-color: var(--mainDark);
color: var(--mainLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > b {
color: var(--main2);
letter-spacing: 0.05em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > span {
font-weight: 700;
color: var(--pointLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > nav {
display: flex;
gap: 0.2em;
margin-right: auto;
margin-left: 1em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > nav > a {
padding: 0.3em 0.8em;
font-size: 0.8em;
border-radius: 2em;
color: var(--main2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > nav > a.active {
background-color: var(--main6);
color: var(--main1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > input {
flex: 0 1 16em;
height: 2.2em;
font-size: 0.8em;
border: none;
background-color: var(--main7);
color: var(--main1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > input::placeholder {
color: var(--main4);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > em {
display: flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
font-size: 0.75em;
font-style: normal;
font-weight: 700;
background-color: var(--point);
color: var(--point9);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2em;
padding: 1.4em 1.5em;
border: none;
/* 두 번째 가로 바 = sub 색 (첫 번째 상단 바는 main): 글자가 놓이는 왼쪽은 진한 단계(sub7), 오른쪽으로 sub 원색 — 단계색은 밝기가 고정이라 어떤 sub 든 글자 대비 유지 */
background-color: var(--sub7);
background-image: linear-gradient(110deg, var(--sub8) 0%, var(--sub7) 45%, var(--sub) 100%);
color: var(--sub1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > section > div > h2 {
margin: 0 0 0.25em;
font-size: 1.2em;
color: var(--sub1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > section > div > p {
margin: 0;
font-size: 0.85em;
color: var(--sub2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > .dashBanner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8em;
padding: 0.7em 1.2em;
border-radius: var(--roundBtn);
background-color: var(--bgSub);
border: 1px solid var(--lineColor);
border-left: 0.35em solid var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > .dashBanner > span:first-child {
display: flex;
align-items: center;
gap: 0.6em;
font-size: 0.85em;
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > .dashBanner > span:first-child > i {
color: var(--point);
font-size: 1.1em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > .dashBanner > span:first-child > b {
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.8em;
list-style: none;
margin: 0;
padding: 0;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li {
position: relative;
display: flex;
flex-direction: column;
gap: 0.2em;
padding: 0.9em 1em;
border: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li > span {
position: absolute;
top: 0.8em;
right: 0.8em;
display: flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li > small {
font-size: 0.75em;
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li > b {
font-size: 1.4em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li > em {
font-size: 0.75em;
font-style: normal;
font-weight: 700;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li > p {
height: 0.4em;
margin: 0.5em 0 0;
border-radius: 0.2em;
overflow: hidden;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li > p > span {
display: block;
height: 100%;
border-radius: 0.2em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) {
background-color: var(--main); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) > span {
background-color: var(--mainDark); /* 어두운 단계 */
color: var(--main1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) > small {
color: var(--main2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) > b {
color: var(--main1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) > em {
background-color: var(--mainLight); /* 밝은 단계 */
color: var(--main9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) > p {
background-color: var(--mainDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=main] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(1) > p > span {
background-color: var(--main1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) {
background-color: var(--sub); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) > span {
background-color: var(--subDark); /* 어두운 단계 */
color: var(--sub1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) > small {
color: var(--sub2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) > b {
color: var(--sub1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) > em {
background-color: var(--subLight); /* 밝은 단계 */
color: var(--sub9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) > p {
background-color: var(--subDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=sub] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(2) > p > span {
background-color: var(--sub1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) {
background-color: var(--point); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) > span {
background-color: var(--pointDark); /* 어두운 단계 */
color: var(--point1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) > small {
color: var(--point2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) > b {
color: var(--point1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) > em {
background-color: var(--pointLight); /* 밝은 단계 */
color: var(--point9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) > p {
background-color: var(--pointDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=point] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(3) > p > span {
background-color: var(--point1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) {
background-color: var(--deco); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) > span {
background-color: var(--decoDark); /* 어두운 단계 */
color: var(--deco1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) > small {
color: var(--deco2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) > b {
color: var(--deco1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) > em {
background-color: var(--decoLight); /* 밝은 단계 */
color: var(--deco9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) > p {
background-color: var(--decoDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=deco] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(4) > p > span {
background-color: var(--deco1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) {
background-color: var(--colorA); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) > span {
background-color: var(--colorADark); /* 어두운 단계 */
color: var(--colorA1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) > small {
color: var(--colorA2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) > b {
color: var(--colorA1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) > em {
background-color: var(--colorALight); /* 밝은 단계 */
color: var(--colorA9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) > p {
background-color: var(--colorADark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorA] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(5) > p > span {
background-color: var(--colorA1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) {
background-color: var(--colorB); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) > span {
background-color: var(--colorBDark); /* 어두운 단계 */
color: var(--colorB1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) > small {
color: var(--colorB2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) > b {
color: var(--colorB1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) > em {
background-color: var(--colorBLight); /* 밝은 단계 */
color: var(--colorB9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) > p {
background-color: var(--colorBDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorB] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(6) > p > span {
background-color: var(--colorB1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) {
background-color: var(--colorC); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) > span {
background-color: var(--colorCDark); /* 어두운 단계 */
color: var(--colorC1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) > small {
color: var(--colorC2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) > b {
color: var(--colorC1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) > em {
background-color: var(--colorCLight); /* 밝은 단계 */
color: var(--colorC9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) > p {
background-color: var(--colorCDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorC] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(7) > p > span {
background-color: var(--colorC1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) {
background-color: var(--colorD); /* 원 색상 배경 */
box-shadow: 0 0.25em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) > span {
background-color: var(--colorDDark); /* 어두운 단계 */
color: var(--colorD1); /* 밝은 단계 1 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD] > small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) > small {
color: var(--colorD2); /* 밝은 단계 2 */
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD] > b,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) > b {
color: var(--colorD1); /* 가장 밝은 단계 1 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) > em {
background-color: var(--colorDLight); /* 밝은 단계 */
color: var(--colorD9); /* 어두운 단계 9 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD] > p,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) > p {
background-color: var(--colorDDark); /* 어두운 트랙 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li[data-color=colorD] > p > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul > li:nth-child(8) > p > span {
background-color: var(--colorD1); /* 밝은 채움 막대 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div {
display: flex;
gap: 0.8em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure {
flex: 2 1 0;
display: flex;
flex-direction: column;
gap: 0.8em;
margin: 0;
padding: 1em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > header {
display: flex;
align-items: center;
justify-content: space-between;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > header > p {
display: flex;
flex-direction: column;
margin: 0;
font-size: 0.95em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > header > nav {
display: flex;
gap: 0.3em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > header > nav > a {
padding: 0.25em 0.7em;
font-size: 0.75em;
border-radius: 2em;
background-color: var(--main1);
color: var(--main7);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > header > nav > a.active {
background-color: var(--main7);
color: var(--main1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > svg {
width: 100%;
height: 8em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0.75em 0.9em;
border-radius: var(--roundBtn);
background-color: var(--bgColor);
border: 1px solid var(--lineColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart > header {
display: flex;
align-items: center;
justify-content: space-between;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart > header > b {
font-size: 0.85em;
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart > header > small {
font-size: 0.7em;
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows {
display: flex;
flex-direction: column;
gap: 0.4em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow {
display: flex;
align-items: center;
gap: 0.7em;
font-size: 0.78em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow > span {
width: 4.2em;
color: var(--txSub);
font-weight: 500;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack {
flex: auto;
height: 0.55em;
border-radius: 0.3em;
background-color: var(--aLow);
overflow: hidden;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill {
height: 100%;
border-radius: 0.3em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.main {
background-color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.sub {
background-color: var(--sub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.point {
background-color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.deco {
background-color: var(--deco);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.colorA {
background-color: var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.colorB {
background-color: var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.colorC {
background-color: var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow .barTrack .barFill.colorD {
background-color: var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure .dashBarChart .barRows .barRow > b {
width: 2.5em;
text-align: right;
color: var(--txColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > figcaption {
display: flex;
flex-wrap: wrap;
gap: 1.2em;
padding-top: 0.4em;
border-top: 1px solid var(--lineColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > figcaption > span {
display: flex;
align-items: center;
gap: 0.4em;
font-size: 0.75em;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > figcaption > span > i {
width: 0.7em;
height: 0.7em;
border-radius: 50%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 0.7em;
padding: 1em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > header {
display: flex;
flex-direction: column;
font-size: 0.95em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > svg {
align-self: center;
width: 7em;
height: 7em;
transform: rotate(-90deg);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul {
display: flex;
flex-direction: column;
gap: 0.4em;
list-style: none;
margin: 0;
padding: 0;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li {
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.35em 0.5em;
border-radius: var(--roundBtn);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li > span {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 1.9em;
height: 1.9em;
border-radius: 50%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li > p {
flex: auto;
display: flex;
flex-direction: column;
margin: 0;
font-size: 0.8em;
overflow: hidden;
color: inherit; /* 바탕이 옅은 단계라 샘플 테마 글자색 대신 슬롯의 진한 단계 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li > p > b {
color: inherit;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li > em {
padding: 0.2em 0.6em;
font-size: 0.7em;
font-style: normal;
font-weight: 700;
border-radius: 1em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=main],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(1) {
background-color: var(--main1);
color: var(--main8);
box-shadow: inset 0.25em 0 0 var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=main] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(1) small {
color: var(--main6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=main] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(1) > span {
background-color: var(--main6);
color: var(--main1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=main] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(1) > em {
background-color: var(--main7);
color: var(--main1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=sub],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(2) {
background-color: var(--sub1);
color: var(--sub8);
box-shadow: inset 0.25em 0 0 var(--sub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=sub] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(2) small {
color: var(--sub6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=sub] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(2) > span {
background-color: var(--sub6);
color: var(--sub1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=sub] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(2) > em {
background-color: var(--sub7);
color: var(--sub1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=point],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(3) {
background-color: var(--point1);
color: var(--point8);
box-shadow: inset 0.25em 0 0 var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=point] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(3) small {
color: var(--point6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=point] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(3) > span {
background-color: var(--point6);
color: var(--point1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=point] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(3) > em {
background-color: var(--point7);
color: var(--point1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=deco],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(4) {
background-color: var(--deco1);
color: var(--deco8);
box-shadow: inset 0.25em 0 0 var(--deco);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=deco] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(4) small {
color: var(--deco6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=deco] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(4) > span {
background-color: var(--deco6);
color: var(--deco1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=deco] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(4) > em {
background-color: var(--deco7);
color: var(--deco1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorA],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(5) {
background-color: var(--colorA1);
color: var(--colorA8);
box-shadow: inset 0.25em 0 0 var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorA] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(5) small {
color: var(--colorA6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorA] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(5) > span {
background-color: var(--colorA6);
color: var(--colorA1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorA] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(5) > em {
background-color: var(--colorA7);
color: var(--colorA1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorB],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(6) {
background-color: var(--colorB1);
color: var(--colorB8);
box-shadow: inset 0.25em 0 0 var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorB] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(6) small {
color: var(--colorB6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorB] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(6) > span {
background-color: var(--colorB6);
color: var(--colorB1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorB] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(6) > em {
background-color: var(--colorB7);
color: var(--colorB1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorC],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(7) {
background-color: var(--colorC1);
color: var(--colorC8);
box-shadow: inset 0.25em 0 0 var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorC] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(7) small {
color: var(--colorC6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorC] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(7) > span {
background-color: var(--colorC6);
color: var(--colorC1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorC] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(7) > em {
background-color: var(--colorC7);
color: var(--colorC1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorD],
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(8) {
background-color: var(--colorD1);
color: var(--colorD8);
box-shadow: inset 0.25em 0 0 var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorD] small,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(8) small {
color: var(--colorD6);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorD] > span,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(8) > span {
background-color: var(--colorD6);
color: var(--colorD1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li[data-color=colorD] > em,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul > li:nth-child(8) > em {
background-color: var(--colorD7);
color: var(--colorD1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] {
display: flex;
flex-direction: column;
gap: 1em;
padding: 0.4em 0;
/* 1. 버튼 계열 */
/* 2. 배지 & 칩 태그 */
/* 3. 탭 바, 페이저 & 스텝바 */
/* 4. 선택 및 슬라이더 */
/* 5. 진행률 바 */
/* 6. 콜아웃 & 선택 카드 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .ctrlRow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .ctrlCol {
display: flex;
flex-direction: column;
gap: 0.6em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .ctrlGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
gap: 0.8em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.icon {
width: 2.6em;
height: 2.6em;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.colorA {
background-color: var(--colorA);
color: var(--colorA1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.colorB {
background-color: var(--colorB);
color: var(--colorB1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.colorC {
background-color: var(--colorC);
color: var(--colorC1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.colorD {
background-color: var(--colorD);
color: var(--colorD1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintMain {
background-color: var(--main1);
color: var(--main8);
border: 1px solid var(--main3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintSub {
background-color: var(--sub1);
color: var(--sub8);
border: 1px solid var(--sub3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintPoint {
background-color: var(--point1);
color: var(--point8);
border: 1px solid var(--point3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintDeco {
background-color: var(--deco1);
color: var(--deco8);
border: 1px solid var(--deco3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintColorA {
background-color: var(--colorA1);
color: var(--colorA8);
border: 1px solid var(--colorA3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintColorB {
background-color: var(--colorB1);
color: var(--colorB8);
border: 1px solid var(--colorB3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintColorC {
background-color: var(--colorC1);
color: var(--colorC8);
border: 1px solid var(--colorC3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.tintColorD {
background-color: var(--colorD1);
color: var(--colorD8);
border: 1px solid var(--colorD3);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.lineMain {
background-color: transparent;
color: var(--main);
border: 1px solid var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.linePoint {
background-color: transparent;
color: var(--point);
border: 1px solid var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.lineDeco {
background-color: transparent;
color: var(--deco);
border: 1px solid var(--deco);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.lineColorA {
background-color: transparent;
color: var(--colorA);
border: 1px solid var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.lineColorB {
background-color: transparent;
color: var(--colorB);
border: 1px solid var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.lineColorC {
background-color: transparent;
color: var(--colorC);
border: 1px solid var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .btn.lineColorD {
background-color: transparent;
color: var(--colorD);
border: 1px solid var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .badge.colorA {
background-color: var(--colorA);
color: var(--colorA1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .badge.colorB {
background-color: var(--colorB);
color: var(--colorB1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .badge.colorC {
background-color: var(--colorC);
color: var(--colorC1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .badge.colorD {
background-color: var(--colorD);
color: var(--colorD1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.25em 0.8em;
font-size: 0.78em;
font-weight: 600;
border-radius: 2em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge > .dot {
width: 0.5em;
height: 0.5em;
border-radius: 50%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.main {
background-color: var(--main1);
color: var(--main8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.main > .dot {
background-color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.sub {
background-color: var(--sub1);
color: var(--sub8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.sub > .dot {
background-color: var(--sub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.point {
background-color: var(--point1);
color: var(--point8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.point > .dot {
background-color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.deco {
background-color: var(--deco1);
color: var(--deco8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.deco > .dot {
background-color: var(--deco);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorA {
background-color: var(--colorA1);
color: var(--colorA8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorA > .dot {
background-color: var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorB {
background-color: var(--colorB1);
color: var(--colorB8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorB > .dot {
background-color: var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorC {
background-color: var(--colorC1);
color: var(--colorC8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorC > .dot {
background-color: var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorD {
background-color: var(--colorD1);
color: var(--colorD8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillBadge.colorD > .dot {
background-color: var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .chipTag {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.85em;
font-size: 0.8em;
border-radius: 2em;
border: 1px solid var(--lineColor);
background-color: var(--bgColor);
color: var(--txSub);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .chipTag.active {
border-color: var(--point);
background-color: var(--point1);
color: var(--point8);
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .countBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8em;
height: 1.8em;
padding: 0 0.4em;
font-size: 0.75em;
font-weight: 700;
border-radius: 1em;
background-color: var(--point);
color: var(--point9);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .segTab {
display: inline-flex;
padding: 0.25em;
border-radius: 2em;
background-color: var(--aLight);
border: 1px solid var(--lineColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .segTab > span {
padding: 0.3em 0.9em;
font-size: 0.8em;
font-weight: 600;
border-radius: 2em;
color: var(--txSub);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .segTab > span.active {
background-color: var(--bgColor);
color: var(--point);
box-shadow: 0 0.1em 0.3em var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .miniPager {
display: inline-flex;
align-items: center;
gap: 0.2em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .miniPager > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1em;
height: 2.1em;
font-size: 0.8em;
font-weight: 600;
border-radius: 50%;
color: var(--txSub);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .miniPager > span.active {
background-color: var(--main);
color: var(--main9);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .miniPager > span.arrow {
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .stepBar {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .stepBar > .step {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.8em;
font-size: 0.8em;
border-radius: 2em;
background-color: var(--aLow);
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .stepBar > .step.done {
background-color: var(--main1);
color: var(--main8);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .stepBar > .step.active {
background-color: var(--point);
color: var(--point9);
font-weight: 700;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .sampleSlider {
flex: 1 1 10em;
max-width: 14em;
accent-color: var(--point);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .inputGroup {
flex: 1 1 14em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillSelect {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.8em;
padding: 0.5em 1em;
font-size: 0.85em;
border: 1px solid var(--lineColor);
border-radius: 2em;
background-color: var(--bgColor);
color: var(--txColor);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .pillSelect > i {
color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .inputActive {
flex: 1 1 14em;
border-color: var(--point);
box-shadow: 0 0 0 2px var(--point1);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressRow {
display: flex;
flex-direction: column;
gap: 0.6em;
width: 100%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar {
width: 100%;
height: 0.6em;
border-radius: 0.3em;
background-color: var(--aLight);
overflow: hidden;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.main > span {
display: block;
height: 100%;
width: var(--val, 50%);
background-color: var(--main);
border-radius: 0.3em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.point > span {
display: block;
height: 100%;
width: var(--val, 50%);
background-color: var(--point);
border-radius: 0.3em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi {
display: flex;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segM {
height: 100%;
background-color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segS {
height: 100%;
background-color: var(--sub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segP {
height: 100%;
background-color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segD {
height: 100%;
background-color: var(--deco);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segA {
height: 100%;
background-color: var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segB {
height: 100%;
background-color: var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segC {
height: 100%;
background-color: var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .progressBar.multi > .segD {
height: 100%;
background-color: var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.toggle.colorA > input:checked ~ span:first-of-type {
background-color: var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.check.colorA > input:checked ~ span::before {
background-color: var(--colorA);
border-color: var(--colorA);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.toggle.colorB > input:checked ~ span:first-of-type {
background-color: var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.check.colorB > input:checked ~ span::before {
background-color: var(--colorB);
border-color: var(--colorB);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.toggle.colorC > input:checked ~ span:first-of-type {
background-color: var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.check.colorC > input:checked ~ span::before {
background-color: var(--colorC);
border-color: var(--colorC);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.toggle.colorD > input:checked ~ span:first-of-type {
background-color: var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] label.check.colorD > input:checked ~ span::before {
background-color: var(--colorD);
border-color: var(--colorD);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard {
display: flex;
align-items: center;
gap: 0.9em;
padding: 0.8em 1.1em;
border-radius: var(--roundBox);
border: 1px solid var(--lineColor);
background-color: var(--bgColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard > i {
font-size: 1.4em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard > div {
flex: auto;
display: flex;
flex-direction: column;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard > div > b {
font-size: 0.9em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard > div > small {
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard.point {
border-left: 0.3em solid var(--point);
background-color: color-mix(in srgb, var(--point1) 40%, var(--bgColor));
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard.point > i {
color: var(--point);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard.deco {
border-left: 0.3em solid var(--deco);
background-color: color-mix(in srgb, var(--deco1) 40%, var(--bgColor));
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .calloutCard.deco > i {
color: var(--deco);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .selectCard {
display: flex;
align-items: center;
gap: 0.9em;
padding: 0.8em 1.1em;
border-radius: var(--roundBox);
border: 1px solid var(--lineColor);
background-color: var(--bgColor);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .selectCard > i {
font-size: 1.3em;
color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .selectCard > div {
flex: auto;
display: flex;
flex-direction: column;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .selectCard > div > b {
font-size: 0.9em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .selectCard > div > small {
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] .selectCard.active {
border-color: var(--main);
background-color: color-mix(in srgb, var(--main1) 50%, var(--bgColor));
box-shadow: 0 0.2em 0.8em var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] {
display: flex;
flex-direction: column;
gap: 1.2em;
padding: 0.4em 0;
/* 1. 1~9단계 명도 스케일 띠 */
/* 2. 라이트 & 다크 서피스 비교 카드 */
/* 3. 테마색 솔리드 카드 */
/* 4. 대비율 가독성 리스트 */
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection {
display: flex;
flex-direction: column;
gap: 0.6em;
padding: 0.9em 1.1em;
border-radius: var(--roundBox);
border: 1px solid var(--lineColor);
background-color: var(--bgColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection .scaleRow {
display: flex;
align-items: center;
gap: 0.9em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection .scaleRow > b {
width: 4.5em;
font-size: 0.78em;
letter-spacing: 0.05em;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection .scaleRow .scaleStrip {
flex: auto;
display: flex;
height: 2em;
border-radius: var(--roundBtn);
overflow: hidden;
border: 1px solid var(--aLow);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection .scaleRow .scaleStrip > span {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
font-weight: 700;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection .scaleRow .scaleStrip > span.darkText {
color: #111827;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .scaleSection .scaleRow .scaleStrip > span.lightText {
color: #ffffff;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
gap: 0.9em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard {
display: flex;
flex-direction: column;
gap: 0.8em;
padding: 1.2em;
border-radius: var(--roundBox);
border: 1px solid var(--lineColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard > header {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 0.85em;
padding-bottom: 0.5em;
border-bottom: 1px solid var(--aLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard .surfaceBody {
display: flex;
flex-direction: column;
gap: 0.7em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard .surfaceBody > h3 {
margin: 0;
font-size: 1.15em;
font-weight: 700;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard .surfaceBody > p {
margin: 0;
font-size: 0.85em;
line-height: 1.4;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard .surfaceBody .sampleBadges,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard .surfaceBody .sampleBtns {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard.light {
background-color: #ffffff;
color: #111827;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard.light > header {
color: #4b5563;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard.dark {
background-color: #1a202c;
color: #f7fafc;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .surfaceGrid .surfaceCard.dark > header {
color: #a0aec0;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .colorSurfaceGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.8em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .colorSurfaceGrid .colorCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3em;
padding: 1.1em 0.8em;
border-radius: var(--roundBox);
color: #ffffff;
box-shadow: 0 0.2em 0.8em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .colorSurfaceGrid .colorCard > b {
font-size: 0.9em;
letter-spacing: 0.05em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .colorSurfaceGrid .colorCard > small {
font-size: 0.7em;
opacity: 0.85;
color: inherit;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .colorSurfaceGrid .colorCard .whiteBtn {
margin-top: 0.4em;
padding: 0.25em 0.8em;
font-size: 0.75em;
font-weight: 600;
border-radius: 2em;
background-color: rgba(255, 255, 255, 0.9);
color: #111827;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul {
display: flex;
flex-direction: column;
gap: 0.5em;
list-style: none;
margin: 0;
padding: 0;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.7em 1.1em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBtn);
background-color: var(--bgColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li .contrastBox {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em;
border-radius: var(--roundBtn);
border: 1px solid var(--lineColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li .contrastBox .previewText {
font-size: 0.85em;
font-weight: 600;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li .ratioInfo {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li .ratioInfo .ratioBadge {
font-size: 0.85em;
font-weight: 700;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li .ratioInfo .gradeBadge {
padding: 0.15em 0.55em;
font-size: 0.75em;
font-weight: 700;
border-radius: 1em;
background-color: var(--aLight);
color: var(--danger);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] .contrastListWrap > ul > li .ratioInfo .gradeBadge.pass {
color: var(--success);
background-color: color-mix(in srgb, var(--success) 15%, transparent);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer {
position: absolute;
left: 50%;
bottom: 1em;
z-index: 2;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4em;
padding: 0.5em 1.4em 0.6em;
border: 1px solid var(--lineColor);
border-radius: 2em;
background-color: var(--bgColor);
box-shadow: 0 0.3em 1.2em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > small {
font-size: 0.75em;
color: var(--txLight);
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > div {
display: flex;
gap: 1em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > div > span {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2em;
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > div > span > i {
width: 2.2em;
height: 2.2em;
border-radius: 50%;
border: 0.15em solid var(--bgColor);
box-shadow: 0 0 0 1px var(--aColor);
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > div > span > small {
font-size: 0.7em;
color: var(--txSub);
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > div > span:hover > i {
box-shadow: 0 0 0 2px var(--point);
}
.colorHelper[b-2sy0j9mkrc] > dialog {
width: 34em;
}
.colorHelper[b-2sy0j9mkrc] > dialog > header {
color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > dialog > section {
display: grid;
grid-template-columns: 16em 1fr;
gap: 1em;
padding: 0.5em 1em;
min-height: 0;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:first-child {
display: flex;
flex-direction: column;
gap: 0.8em;
min-height: 0;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:first-child > ul {
display: flex;
flex-direction: column;
gap: 0.4em;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.85em;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:first-child > ul > li {
display: flex;
gap: 0.3em;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:first-child > ul > li > span {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 2.6em;
height: 2.2em;
border-radius: var(--roundBtn);
box-shadow: inset 0 0 0 1px var(--aLow);
color: var(--bgColor);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:first-child > ul > li > input {
flex: auto;
width: 3em;
height: 2.2em;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:first-child > ul > li.active > input {
border-color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:last-child {
position: relative;
display: flex;
height: 22em;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:last-child > span {
position: absolute;
top: 0.6em;
right: 0.9em;
color: var(--txLight);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:last-child > span:hover {
color: var(--main);
}
.colorHelper[b-2sy0j9mkrc] > dialog > section > div:last-child > code {
flex: auto;
padding: 0.6em;
font-size: 0.75em;
line-height: 1.5em;
white-space: pre-wrap;
word-break: break-all;
user-select: text;
overflow-y: auto;
scrollbar-width: thin;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: var(--bgSub);
}
.colorHelper[b-2sy0j9mkrc] div[data-pop] {
position: fixed;
z-index: 9001;
display: flex;
padding: 0.8em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: var(--bgColor);
box-shadow: 0 0.3em 1.2em var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] div[data-pop][hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] { /* 사이드 패널(aside) 안에 있음 */
flex-direction: column;
gap: 0.6em;
width: 16em;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > div {
position: relative;
width: 100%;
aspect-ratio: 5/4;
border-radius: var(--roundBtn);
cursor: crosshair;
touch-action: none;
overflow: hidden;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > div > span {
position: absolute;
width: 0.9em;
height: 0.9em;
border: 0.15em solid var(--bgColor);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--aDark);
transform: translate(-50%, -50%);
pointer-events: none;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p {
display: flex;
align-items: center;
gap: 0.6em;
margin: 0;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > span[data-act] {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border: 1px solid var(--lineColor);
border-radius: 50%;
background-color: var(--bgSub);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > span[data-act][hidden] {
display: none;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > i {
flex: none;
width: 1.8em;
height: 1.8em;
border: 0.15em solid var(--bgColor);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > span:last-child {
flex: auto;
display: flex;
flex-direction: column;
gap: 0.4em;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > span:last-child > input {
appearance: none;
width: 100%;
height: 0.7em;
padding: 0;
border: none;
border-radius: 0.35em;
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > span:last-child > input::-webkit-slider-thumb {
appearance: none;
width: 1em;
height: 1em;
border: 0.15em solid var(--bgColor);
border-radius: 50%;
background-color: var(--bgColor);
box-shadow: 0 0 0 1px var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > p > span:last-child > input::-moz-range-thumb {
width: 1em;
height: 1em;
border: 0.15em solid var(--bgColor);
border-radius: 50%;
background-color: var(--bgColor);
box-shadow: 0 0 0 1px var(--aDark);
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=picker] > input {
width: 100%;
height: 2.2em;
text-align: center;
text-transform: uppercase;
font-family: monospace;
font-size: 0.85em;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=slot] {
gap: 0.5em;
padding: 0.6em;
border-radius: 2em;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=slot] > i {
width: 1.8em;
height: 1.8em;
border-radius: 50%;
border: 0.15em solid var(--bgColor);
box-shadow: 0 0 0 1px var(--aColor);
cursor: pointer;
}
.colorHelper[b-2sy0j9mkrc] div[data-pop=slot] > i:hover, .colorHelper[b-2sy0j9mkrc] div[data-pop=slot] > i.active {
box-shadow: 0 0 0 2px var(--point);
}
/* 어두운 사이트 테마: 타일 버튼 글자는 밝은 글자색으로 (밝은 테마는 bgColor = 흰색) */
[data-theme=dark] .colorHelper[b-2sy0j9mkrc] > aside > footer > button {
color: var(--txColor);
}
/* 타블렛 W 이하 (~ 1024px): 사이드 패널을 우측 플로팅 서랍으로 전환 (우상단 3점 아이콘 #pageMore 클릭 시 슬라이드 인) */
@media (width <= 1024px) {
.colorHelper[b-2sy0j9mkrc] {
height: auto;
min-height: 0;
}
.colorHelper[b-2sy0j9mkrc] > aside#pageMenu {
position: fixed;
top: 4.8em;
right: 0.5em;
bottom: 0.5em;
width: 18.5em;
max-width: calc(100vw - 1em);
height: auto;
max-height: none;
margin-right: -20em;
gap: 0.8em;
z-index: 9999;
background-color: var(--bgColor);
padding: 0.8em;
border: 1px solid var(--aDark);
border-radius: var(--roundBox);
box-shadow: 0 0 0.6em 0.2em var(--aDark);
transition: margin-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.colorHelper[b-2sy0j9mkrc] > article > section {
width: 100%;
}
}
/* 타블렛 H 이하 (~ 780px) */
@media (width <= 780px) {
.colorHelper[b-2sy0j9mkrc] > aside#pageMenu {
top: 4em;
}
}
/* ---------- 미리보기 반응형 ---------- */
/* 타블렛 이하 (~ 1024px): 페이지가 길어지므로 슬롯 바는 화면 아래에 고정, 그래프·현황은 세로로 */
@media (width <= 1024px) {
.colorHelper[b-2sy0j9mkrc] > article > section {
min-width: 0;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main {
overflow: visible;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer {
position: fixed;
bottom: 0.8em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul {
grid-template-columns: repeat(2, 1fr);
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div {
flex-direction: column;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > header {
flex: 1 0 100%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > aside > ul {
flex: 1 1 14em;
}
}
/* 타블렛 H 이하 (~ 780px): 머리 줄 바꿈, 상단 바 메뉴·검색 접기, 카드 1열 */
@media (width <= 780px) {
.colorHelper[b-2sy0j9mkrc] > article > section {
padding: 0.8em 0.7em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header {
flex-wrap: wrap;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > div {
flex: 1 1 auto;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav {
order: 3;
flex: 1 0 100%;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav > a {
flex: 1;
justify-content: center;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > nav,
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > input {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > header > span {
margin-right: auto;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > section {
flex-direction: column;
align-items: flex-start;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=components] {
grid-template-columns: 1fr;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] > section > ul > li {
grid-template-columns: 1fr 1fr;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] > section > ul > li > div:first-child {
grid-column: 1/-1;
}
}
/* 모바일 (~ 480px): 지표 타일 1열, 탭 아이콘만, 슬롯 바 축소 */
@media (width <= 480px) {
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav > a {
font-size: 0;
padding: 0.5em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > header > nav > a > i {
font-size: 0.9rem;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > ul {
grid-template-columns: 1fr;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=ui] > div > figure > header {
flex-direction: column;
align-items: flex-start;
gap: 0.4em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > main > article[data-view=contrast] > section > ul > li {
grid-template-columns: 1fr;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer {
max-width: calc(100vw - 1em);
padding: 0.4em 0.9em 0.5em;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > small {
display: none;
}
.colorHelper[b-2sy0j9mkrc] > article > section > footer > div {
gap: 0.6em;
}
}
/* 모바일 (~ 480px): 도움말 항목은 모양 위·설명 아래 한 줄씩 */
@media (width <= 480px) {
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li {
grid-template-columns: 1fr;
gap: 0.4em;
}
.colorHelper[b-2sy0j9mkrc] > article > header > div[data-help] > ul > li > b {
justify-content: flex-start;
}
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Home/Color.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AACA;AAAA;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AACI;AAiTA;AAmOA;AAw2CA;AA8FA;AAeA;AAyGA;;AAjlEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAgDA;AAuDA;AAAA;AA+GA;;AArNA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAMZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAuBA;;AArBA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;AAEA;AAuMA;;AAtMA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;AAiBA;;AAfA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGI;EACI;;AADJ;EACI;;AADJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAU5B;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAmHA;AAAA;AAycA;AAsgBA;AAgOA;AAIA;;AAryCA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAqDA;;AAnDA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAMR;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;AAWA;;AATA;EACI;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAGJ;EACI;EACA;;AAKR;AAwHI;;AAvHA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAMR;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AA7BZ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EAAS;;AACT;EAAQ;;AACR;EAAU;;AACV;EAAS;;AACT;EAAW;;AACX;EAAW;;AACX;EAAW;;AACX;EAAW;;AAInB;EACI;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAKJ;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAlBR;AAAA;EAEI;EACA;EAMA;;AAJA;AAAA;EACI;;AAKJ;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;EACA;;AAS5B;EACI;EACA;EACA;EACA;AAqBA;AA2HA;AAyHA;AAgFA;AAoCA;AAuDA;;AAlbA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAMJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAGb;EACI;EACA;;AACA;EAAS;;AAIjB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAMZ;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AACA;EAAU;EAAc;;AACxB;EAAU;EAAc;;AACxB;EAAU;EAAc;;AACxB;EAAU;EAAc;;AACxB;EAAU;EAAc;;AACxB;EAAU;EAAc;;AACxB;EAAU;EAAc;;AACxB;EAAU;EAAc;;AAK5B;EACI;;AAGJ;EACI;EACA;;AANJ;EACI;;AAGJ;EACI;EACA;;AANJ;EACI;;AAGJ;EACI;EACA;;AANJ;EACI;;AAGJ;EACI;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;;AACA;EAAM;;AAGV;EACI;EACA;;AACA;EAAM;;AAId;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;AAEA;AAkDA;AA+DA;AAwCA;;AAxJA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAQpB;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AACA;EAAW;;AAGf;EACI;EACA;;AACA;EAAW;;AAMvB;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAS5B;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAOpB;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAMhB;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;;;AAOpB;AACA;EACI;;;AAGJ;AACA;EACI;IACI;IACA;;EAGI;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGJ;IACI;;;AAMhB;AACA;EAGY;IACI;;;AAMhB;AACA;AACA;EAGY;IACI;;EAEA;IACI;;EAGJ;IACI;IACA;;EAIA;IACI;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;;AAUhC;AACA;EAGY;IACI;;EAEA;IACI;;EAEA;IACI;;EAGJ;IACI;IACA;;EAEA;IACI;IACA;;EAOJ;AAAA;IAEI;;EAGJ;IACI;;EAIR;IACI;IACA;;EAIR;IACI;;EAGJ;IACI;;EAEA;IACI;;;AAQxB;AACA;EAIgB;IACI;IACA;;EAEA;IACI;;EAKJ;IACI;;EAGJ;IACI;IACA;IACA;;EAIR;IACI;;EAGJ;IACI;IACA;;EAEA;IACI;;EAGJ;IACI;;;AAQxB;AACA;EACI;IACI;IACA;;EAEA;IACI%22%7D */
/* /Views/Home/Icons.cshtml.rz.scp.css */
@charset "UTF-8";
/* 서비스 아이콘 (.iconBrowser, /Service/Icons): 제목·내려받기 / 도구 줄(검색·채움/선형·크기·개수) / 사용법 / 아이콘 칸 목록
목록 칸은 스크립트(IconBrowser.ts)가 만들므로 ::deep. 아이콘 크기는 스크립트가 목록(ul)의 font-size 로 바꾸고 칸 크기도 같이 커진다. */
.iconBrowser[b-h7z7ur7lic] {
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 0.9em;
color: var(--txColor);
/* 도구 줄 */
/* 원본 저작권·라이선스 고지 */
/* 복사 안내: 화면 아래 가운데에서 떠오름 (바탕·글자는 테마 글자색·배경색을 뒤집어 라이트·다크 모두 눈에 띔) */
}
.iconBrowser > header[b-h7z7ur7lic] {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8em;
padding: 1em 0.5em;
}
.iconBrowser > header > div > h1[b-h7z7ur7lic] {
margin: 0 0 0.2em;
font-size: 1.7em;
font-weight: 800;
line-height: 1.2;
}
.iconBrowser > header > div > p[b-h7z7ur7lic] {
margin: 0;
font-size: 0.95em;
color: var(--txSub);
}
.iconBrowser > nav[b-h7z7ur7lic] {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6em 1em;
padding: 0.6em 0.8em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBox);
background-color: color-mix(in srgb, var(--bgColor) 96%, var(--txColor));
}
.iconBrowser > nav > label:first-child[b-h7z7ur7lic] {
flex: 1 1 18em;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0 0.8em;
border: 1px solid var(--lineColor);
border-radius: 2em;
background-color: var(--bgColor);
color: var(--txLight);
/* 안쪽 입력은 테두리·그림자·기본 검색 모양 없이 — 바깥 알약 상자 하나만 보이게 (공용 input 의 포커스 그림자도 덮음) */
}
.iconBrowser > nav > label:first-child > input[b-h7z7ur7lic] {
flex: auto;
min-width: 0;
height: 2.3em;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
appearance: none;
}
.iconBrowser > nav > label:first-child > input:hover[b-h7z7ur7lic], .iconBrowser > nav > label:first-child > input:focus[b-h7z7ur7lic] {
border: none;
box-shadow: none;
outline: none;
}
.iconBrowser > nav > label:first-child:focus-within[b-h7z7ur7lic] {
border-color: var(--main);
}
.iconBrowser > nav > span[b-h7z7ur7lic] {
display: flex;
padding: 0.2em;
border-radius: 2em;
background-color: var(--aLight);
}
.iconBrowser > nav > span > a[b-h7z7ur7lic] {
padding: 0.3em 0.9em;
font-size: 0.85em;
font-weight: 600;
border-radius: 2em;
color: var(--txSub);
cursor: pointer;
}
.iconBrowser > nav > span > a.active[b-h7z7ur7lic] {
background-color: var(--bgColor);
color: var(--main);
box-shadow: 0 0.1em 0.3em var(--aLight);
}
.iconBrowser > nav > label:nth-of-type(2)[b-h7z7ur7lic] {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 0.85em;
color: var(--txSub);
}
.iconBrowser > nav > label:nth-of-type(2) > input[b-h7z7ur7lic] {
width: 7em;
height: auto;
padding: 0;
border: none;
background: transparent;
accent-color: var(--main);
}
.iconBrowser > nav > small[b-h7z7ur7lic] {
margin-left: auto;
font-size: 0.8em;
color: var(--txLight);
}
.iconBrowser > p[b-h7z7ur7lic] {
display: flex;
align-items: center;
gap: 0.4em;
margin: 0;
font-size: 0.8em;
color: var(--txSub);
}
.iconBrowser > p[hidden][b-h7z7ur7lic] {
display: none;
}
.iconBrowser > p[data-empty][b-h7z7ur7lic] {
justify-content: center;
padding: 3em 0;
font-size: 0.95em;
}
.iconBrowser > div[data-more][b-h7z7ur7lic] {
height: 1px;
}
.iconBrowser > footer[b-h7z7ur7lic] {
padding: 1.5em 0 0.5em;
border-top: 1px solid var(--lineColor);
font-size: 0.75em;
text-align: center;
color: var(--txLight);
}
.iconBrowser > footer > a[b-h7z7ur7lic] {
color: var(--main);
}
.iconBrowser > div[data-toast][b-h7z7ur7lic] {
position: fixed;
left: 50%;
bottom: 1.5em;
z-index: 100;
display: flex;
align-items: center;
gap: 0.6em;
max-width: calc(100vw - 2em);
padding: 0.7em 1.2em;
border-radius: 2em;
background-color: var(--txColor);
color: var(--bgColor);
box-shadow: 0 0.4em 1.4em var(--aDark);
font-size: 0.9em;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 150%);
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s;
}
.iconBrowser > div[data-toast].show[b-h7z7ur7lic] {
opacity: 1;
transform: translate(-50%, 0);
}
.iconBrowser > div[data-toast] > i[b-h7z7ur7lic] {
flex: none;
font-size: 1.2em;
color: var(--point);
}
.iconBrowser > div[data-toast] > code[b-h7z7ur7lic] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.85em;
opacity: 0.8;
}
.iconBrowser[b-h7z7ur7lic] {
/* 아이콘 칸 (ul 글자 크기 = 아이콘 크기) */
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(3.6em, 1fr));
gap: 0.25em;
list-style: none;
margin: 0;
padding: 0;
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] > li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35em;
aspect-ratio: 1;
padding: 0.4em;
border: 1px solid transparent;
border-radius: var(--roundBox);
cursor: pointer;
content-visibility: auto; /* 화면 밖 칸은 그리기 생략 */
contain-intrinsic-size: auto 3.6em;
transition: background-color 0.15s, border-color 0.15s;
/* 이름 글자는 아이콘 크기와 상관없이 고정 (rem) */
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] > li > i {
width: 1em;
height: 1em;
color: var(--txColor);
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] > li > span {
max-width: 100%;
font-size: 0.7rem;
color: var(--txLight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] > li:hover {
border-color: var(--lineColor);
background-color: var(--bgSub);
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] > li:hover > i {
color: var(--main);
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] > li:hover > span {
color: var(--txColor);
}
/* 모바일 (~ 480px): 도구 줄 세로, 칸 조금 작게 */
@media (width <= 480px) {
.iconBrowser > header > a[b-h7z7ur7lic] {
width: 100%;
}
.iconBrowser > nav[b-h7z7ur7lic] {
position: static;
}
.iconBrowser > nav > small[b-h7z7ur7lic] {
margin-left: 0;
}
.iconBrowser[b-h7z7ur7lic] > ul[data-list=icons] {
grid-template-columns: repeat(auto-fill, minmax(3.2em, 1fr));
}
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Home/Icons.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AACA;AAAA;AAEA;EACI;EACA;EACA;EACA;EACA;AAwBA;AAwHA;AAaA;;AA3JA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAIR;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;AACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAQA;;AANA;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAQxB;AACA;EAEQ;IACI;;EAGJ;IACI;;EAEA;IACI;;EAIR;IACI%22%7D */
/* /Views/Home/Index.cshtml.rz.scp.css */
div.mainBanner[b-0mnz02aeyp] {
background: url(/img/sampleBg.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
height: 20em;
border-radius: var(--roundBox, 0.8em);
}
div.mainBanner > span[b-0mnz02aeyp] {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
font-size: 6em;
font-weight: 900;
color: #ffffff;
text-shadow: 0.1em 0.1em 0.3em #000000;
}
div.pageWrap[b-0mnz02aeyp] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding: 0 0 2em 0;
gap: 2em;
}
div.pageWrap > header > b[b-0mnz02aeyp] {
display: inline-block;
color: var(--primary);
}
div.pageWrap > header > span[b-0mnz02aeyp] {
display: block;
font-size: 1.6em;
font-weight: bold;
text-transform: uppercase;
color: var(--txColor);
}
div.pageWrap > header > p[b-0mnz02aeyp] {
margin: 1em 0;
padding: 0.3em;
background-color: var(--aColor);
border-radius: 0.5em;
width: 70%;
}
div.pageWrap > header > p.short[b-0mnz02aeyp] {
width: 40%;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Home/Index.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI%22%7D */
/* /Views/Layouts/Account/Default/Layout.cshtml.rz.scp.css */
@charset "UTF-8";
div#app.accountLayout[b-0wzzdbbuft] {
--main: #346472;
--sub: #31363b;
--point: var(--point, #2a8699);
--accountActionColor: var(--main);
--accountActionHover: var(--mainDark);
/* 화면 높이에 고정: 카드가 화면보다 크면 카드 안 main 영역이 세로 스크롤된다 */
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 3em 1.5em;
font-size: 1rem;
box-sizing: border-box;
/* sub 색상 기반 배경색 & 부드러운 radial gradient 앰비언트 조명 */
background-color: var(--sub);
background-image: radial-gradient(ellipse at 50% 35%, var(--subLight) 0%, var(--subDark) 100%), radial-gradient(circle at 1px 1px, var(--aLight) 1px, transparent 0);
background-size: 100% 100%, 24px 24px;
/* 배경과 뚜렷하게 분리되는 엽서 카드: 입체 그림자 및 클린 외곽선 */
/* 약관 팝업 다이얼로그 (HTML5 Native Modal) */
/* 모바일 반응형 대응 (세로 모드 시 상하로 화면을 가득 채우도록 구현) */
}
div#app.accountLayout > .postcard[b-0wzzdbbuft] {
width: 100%;
max-width: 66em;
min-height: min(40em, 100%);
max-height: 100%;
display: flex;
flex-direction: row;
border-radius: 0.8em;
overflow: hidden;
background-color: #444444;
border: 1px solid var(--aColor);
box-shadow: 0.1em 0.1em 0.6em 0.2em var(--aColor);
/* 좌측 프레스티지 블루 브랜드 영역 (main 색상 바인딩) */
/* 우측 라이트 클린 스튜디오 폼 영역 */
}
div#app.accountLayout > .postcard > .brandSide[b-0wzzdbbuft] {
flex: 0 0 42%;
background: linear-gradient(155deg, var(--main) 0%, var(--mainDark) 100%);
color: var(--mainText, #fff);
padding: 3.2em 3em;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
position: relative;
overflow: hidden;
/* 언어 선택 드롭다운 (공용 .dropDown, ul.up 으로 위로 펼침) — 어두운 패널용 색만 조정 */
}
div#app.accountLayout > .postcard > .brandSide[b-0wzzdbbuft]::before {
content: "";
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: radial-gradient(circle at 30% 25%, var(--decoLight) 0%, transparent 60%);
opacity: 0.35;
pointer-events: none;
}
div#app.accountLayout > .postcard > .brandSide > header[b-0wzzdbbuft] {
position: relative;
z-index: 1;
}
div#app.accountLayout > .postcard > .brandSide > header > .brandLogo[b-0wzzdbbuft] {
font-size: 1.3em;
font-weight: bold;
letter-spacing: 0.02em;
color: var(--pointLight);
text-transform: uppercase;
}
div#app.accountLayout > .postcard > .brandSide > .brandContent[b-0wzzdbbuft] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1em;
/* 방문 환영 문구 (옅은 색) */
}
div#app.accountLayout > .postcard > .brandSide > .brandContent > h1[b-0wzzdbbuft] {
font-family: "Playfair Display", Didot, "Cinzel", Georgia, serif;
font-size: 2.6em;
line-height: 1.15;
font-weight: 500;
margin: 0;
color: var(--mainText, #fff);
letter-spacing: -0.02em;
}
div#app.accountLayout > .postcard > .brandSide > .brandContent > h1[b-0wzzdbbuft]::after {
content: "";
display: block;
width: 2em;
height: 3px;
background-color: var(--deco);
margin-top: 0.45em;
border-radius: 2px;
}
div#app.accountLayout > .postcard > .brandSide > .brandContent > p[b-0wzzdbbuft] {
margin: 0;
font-size: 0.95em;
line-height: 1.6;
color: var(--mainText, #fff);
opacity: 0.75;
}
div#app.accountLayout > .postcard > .brandSide > footer[b-0wzzdbbuft] {
position: relative;
z-index: 1;
}
div#app.accountLayout > .postcard > .brandSide > footer > .dropDown[b-0wzzdbbuft] {
font-size: 0.85em;
}
div#app.accountLayout > .postcard > .brandSide > footer > .dropDown > header[b-0wzzdbbuft] {
background-color: transparent;
color: var(--mainText, #fff);
border-color: var(--aColor);
opacity: 0.85;
}
div#app.accountLayout > .postcard > .brandSide > footer > .dropDown > ul[b-0wzzdbbuft] {
color: var(--txColor);
background-color: var(--bgColor);
}
div#app.accountLayout > .postcard > .formSide[b-0wzzdbbuft] {
flex: 1 1 58%;
min-height: 0;
background-color: var(--bgColor);
color: var(--txColor);
padding: 3.2em 3.8em;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
div#app.accountLayout > .postcard > .formSide > header > nav[b-0wzzdbbuft] {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.8em;
font-size: 0.88em;
}
div#app.accountLayout > .postcard > .formSide > header > nav > a[b-0wzzdbbuft] {
color: var(--txSub);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
div#app.accountLayout > .postcard > .formSide > header > nav > a:hover[b-0wzzdbbuft] {
color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > header > nav > a.navBtn[b-0wzzdbbuft] {
border: 1px solid var(--accountActionColor);
border-radius: var(--roundBtn, 2em);
padding: 0.4em 1em;
color: var(--accountActionColor);
font-weight: 600;
transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
div#app.accountLayout > .postcard > .formSide > header > nav > a.navBtn:hover[b-0wzzdbbuft] {
background-color: var(--accountActionColor);
color: var(--mainText, #fff);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: safe center;
padding: 1.5em 0;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] {
/* 모던 언더라인 입력 필드 그리드 */
/* 약관 동의 한 줄 문장(로그인) & 약관 동의 목록(회원가입) — 보기/팝업 링크 버튼 공용 */
/* 모던 제출 액션 버튼 (스타일 기반 화살표 가상 요소 포함) */
/* 아이디 찾기 / 비밀번호 재설정 요청 (.findAccount) */
/* 비밀번호 재설정 (.resetPassword) */
/* 메일 인증 안내 (.verifyMail) */
/* 외부 로그인 버튼 (nav.externalLogin) */
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] > h2, div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] h2 {
font-family: "Playfair Display", Didot, Georgia, serif;
font-size: 2.2em;
font-weight: 500;
color: var(--txColor);
margin: 0 0 1em;
letter-spacing: -0.01em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .inputGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4em;
margin-bottom: 1.3em;
/* 입력 아래 보조 안내 (예: 비밀번호 규칙) — 그리드 전체 폭 */
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .inputGrid.single {
grid-template-columns: 1fr;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .inputGrid > small {
grid-column: 1/-1;
margin-top: -1.2em;
font-size: 0.75em;
color: var(--txLight);
line-height: 1.4;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .fieldCol {
display: flex;
flex-direction: column;
gap: 0.35em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .fieldCol > label {
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--txSub);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .fieldCol > input {
border: none;
border-bottom: 1px solid var(--silver);
background: transparent;
height: 2.2em;
padding: 0.4em 0;
font-size: 0.95em;
color: var(--txColor);
border-radius: 0;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-shadow: none;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .fieldCol > input:focus {
border-bottom-color: var(--accountActionColor);
box-shadow: 0 1px 0 var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .fieldCol > input::placeholder {
color: var(--txLight);
font-weight: 300;
font-size: 0.9em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsSentence {
font-size: 0.82em;
color: var(--txSub);
line-height: 1.5;
margin: 0.6em 0 1.2em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree {
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0.6em 0 1.2em;
font-size: 0.85em;
color: var(--txSub);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree[hidden] {
display: none;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > label.agreeAll,
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > label {
font-size: 1.05em;
font-weight: 600;
color: var(--txColor);
padding-bottom: 0.5em;
border-bottom: 1px dashed var(--lineColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > ul {
list-style: none;
margin: 0;
padding: 0.2em 0 0;
display: flex;
flex-direction: column;
gap: 0.45em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > ul > li {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > ul > li > label > span {
font-size: 0.9em;
color: var(--txColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsSentence > .termsBtn, div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > ul > li > .termsBtn {
background: none;
border: none;
height: auto;
padding: 0;
margin: 0;
font-size: inherit;
color: var(--accountActionColor);
font-weight: 600;
text-decoration: underline;
cursor: pointer;
border-radius: 0;
box-shadow: none;
transition: color 0.2s;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsSentence > .termsBtn:hover, div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .termsAgree > ul > li > .termsBtn:hover {
color: var(--accountActionHover);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitBtn,
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitArrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
height: auto;
font-size: 1.05em;
font-weight: 600;
color: var(--accountActionColor);
cursor: pointer;
padding: 0.4em 0.8em 0.4em 0;
margin-top: 0.5em;
overflow: visible;
transition: color 0.2s, transform 0.15s;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitBtn::after,
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitArrow::after {
content: "→";
display: inline-block;
font-size: 1.15em;
line-height: 1;
margin-left: 0.1em;
transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitBtn:hover,
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitArrow:hover {
color: var(--accountActionHover);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitBtn:hover::after,
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitArrow:hover::after {
transform: translateX(0.35em);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitBtn:active,
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .submitArrow:active {
transform: scale(0.98);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount {
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 1.5em;
width: 100%;
}
@media (max-width: 780px) {
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount {
max-width: 24em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > nav > span {
flex: 1 1 0;
padding: 0.6em 0.4em;
text-align: center;
white-space: nowrap;
}
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > nav {
display: flex;
gap: 0.5em;
border-bottom: 1px solid var(--lineColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > nav > span {
padding: 0.6em 1.2em;
font-size: 0.95em;
font-weight: 500;
color: var(--txLight);
border-bottom: 2px solid transparent;
cursor: pointer;
user-select: none;
transition: color 0.2s, border-color 0.2s;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > nav > span:hover {
color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > nav > span[aria-selected=true] {
font-weight: 600;
color: var(--accountActionColor);
border-bottom-color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > nav > span[aria-selected=true]:hover {
color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) {
display: flex;
flex-direction: column;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) > p {
margin: 0 0 1.5em;
font-size: 0.88em;
line-height: 1.6;
color: var(--txLight);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) > div:not([hidden]) {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
padding: 2.2em 1.5em;
text-align: center;
border: 1px solid var(--lineColor);
border-radius: var(--roundSize);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) > div:not([hidden]) > b {
display: flex;
align-items: center;
justify-content: center;
width: 2em;
height: 2em;
font-size: 1.4em;
border-radius: 50%;
background-color: var(--success);
color: var(--bgColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) > div:not([hidden]) > p {
margin: 0;
font-size: 0.85em;
color: var(--txColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) > div:not([hidden]) > strong {
font-size: 0.9em;
color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .findAccount > article:not([hidden]) > div:not([hidden]) > nav {
display: flex;
justify-content: center;
gap: 0.8em;
margin-top: 0.8em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .resetPassword {
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 1.2em;
width: 100%;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .resetPassword > p {
margin: 0 0 1em;
font-size: 0.88em;
line-height: 1.6;
color: var(--txLight);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .resetPassword > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2em;
padding: 2.2em 1.5em;
text-align: center;
border: 1px solid var(--danger);
border-radius: var(--roundSize);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .resetPassword > div > p {
margin: 0;
font-size: 0.95em;
line-height: 1.6;
color: var(--danger);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .resetPassword > div > nav {
display: flex;
justify-content: center;
gap: 0.8em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail {
font-size: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85em;
width: 100%;
max-width: 30em;
margin: 0 auto;
text-align: center;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > b {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.8em;
height: 3.8em;
border-radius: 50%;
border: 2px solid var(--primary2);
background-color: var(--primary1);
color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > b > i.fi {
font-size: 1.9em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail.notSent > b {
border-color: var(--warning2);
background-color: var(--warning1);
color: var(--warning);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail.failed > b {
border-color: var(--danger2);
background-color: var(--danger1);
color: var(--danger);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > h2 {
margin: 0;
font-size: 1.45em;
font-weight: 700;
color: var(--txColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > p {
margin: 0;
font-size: 0.9em;
line-height: 1.5;
color: var(--txLight);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > strong {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1.2em;
font-size: 0.95em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBtn);
color: var(--txColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > strong > i.fi {
color: var(--accountActionColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > small {
font-size: 0.82em;
line-height: 1.5;
color: var(--txLight);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > form {
display: flex;
justify-content: center;
width: 100%;
margin: 0;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > form > button.btn {
width: 100%;
max-width: 22em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > form + form > button, div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > a {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.4em 0.8em;
font-size: 0.85em;
border: none;
background: none;
color: var(--txLight);
text-decoration: none;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > form + form > button:hover, div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > a:hover {
color: var(--txColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > aside {
width: 100%;
margin-top: 0.8em;
padding: 0.9em 1.2em;
font-size: 0.8em;
text-align: left;
border: 1px solid var(--lineColor);
border-radius: var(--roundSize);
color: var(--txLight);
box-sizing: border-box;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > aside > h4 {
display: flex;
align-items: center;
gap: 0.4em;
margin: 0 0 0.4em;
font-size: 1em;
color: var(--txColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > aside > h4 > i.fi {
color: var(--info);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .verifyMail > aside > ul {
margin: 0;
padding-left: 1.2em;
line-height: 1.4;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin {
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 0.6em;
margin-top: 1.6em;
}
@media (max-width: 780px) {
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin {
width: 100%;
max-width: 24em;
}
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > span {
display: flex;
align-items: center;
gap: 0.8em;
font-size: 0.8em;
color: var(--txLight);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > span::before, div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > span::after {
content: "";
flex: 1 1 auto;
border-top: 1px solid var(--lineColor);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
height: 2.6em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBtn);
font-size: 0.9em;
font-weight: 600;
color: var(--txColor);
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > a:hover {
border-color: var(--accountActionColor);
color: var(--accountActionColor);
background-color: var(--aLow);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > a > img.brandIcon {
width: 1.25em;
height: 1.25em;
object-fit: contain;
flex-shrink: 0;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] nav.externalLogin > a > i.fi {
font-size: 1.15em;
}
@media (max-width: 780px) {
div#app.accountLayout[b-0wzzdbbuft] {
padding: 0;
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
div#app.accountLayout > .postcard[b-0wzzdbbuft] {
flex-direction: column;
width: 100%;
max-width: 100%;
height: auto;
min-height: 100vh;
min-height: 100dvh;
border-radius: 0;
border: none;
box-shadow: none;
}
div#app.accountLayout > .postcard > .brandSide[b-0wzzdbbuft] {
flex: 0 0 auto;
padding: 2.2em 1.8em 1.5em;
gap: 1.2em;
}
div#app.accountLayout > .postcard > .brandSide > .brandContent[b-0wzzdbbuft] {
gap: 1em;
}
div#app.accountLayout > .postcard > .brandSide > .brandContent > h1[b-0wzzdbbuft] {
font-size: 1.8em;
}
div#app.accountLayout > .postcard > .formSide[b-0wzzdbbuft] {
flex: 1 1 auto;
min-height: 0;
padding: 1.8em 1.8em max(2em, env(safe-area-inset-bottom, 2em));
border-radius: 0;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] {
padding: 1em 0;
justify-content: flex-start;
align-items: center;
overflow: visible;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] > form {
width: 100%;
max-width: 24em;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] > form input {
padding: 0.3em 0.5em !important;
}
div#app.accountLayout > .postcard > .formSide > main[b-0wzzdbbuft] .inputGrid {
grid-template-columns: 1fr;
gap: 1.2em;
margin-bottom: 1.2em;
}
}
/* 다크 테마 오버라이드: 어두운 배경 위에서 화사하고 선명한 민트 포인트 색상 바인딩 */
[data-theme=dark] div#app.accountLayout[b-0wzzdbbuft] {
--accountActionColor: var(--point);
--accountActionHover: var(--pointLight);
}
[data-theme=dark] div#app.accountLayout > .postcard > .formSide > header > nav > a.navBtn:hover[b-0wzzdbbuft] {
color: var(--pointText, #112019);
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Layouts/Account/Default/Layout.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;EACI;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AA4pBA;AA+EA;;AA1uBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AA+FA;;AA9FA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA8DA;;AA5DA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;AAqBA;;AAnBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AASI;AA0DA;AAsEA;AAyCA;AAmGA;AAuCA;AAuIA;;AAlcA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;AAKA;;AAHA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;AAAA;EACI;;AAEA;AAAA;EACI;;AAIR;AAAA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EAPJ;IAQQ;;EAEA;IACI;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EAPJ;IAQQ;IACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAS5B;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAKZ;EAjwBJ;IAkwBQ;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;;EAGI;IACI;IACA;;EAEA;IACI;;EAIR;IACI;IACA;IACA;;;;AAS5B;AACA;EACI;EACA;;AAEA;EACI%22%7D */
/* /Views/Layouts/Account/Modern/Layout.cshtml.rz.scp.css */
div#app.modernAccountLayout[b-fche95k8mi] {
--modernMain: var(--main, #182134);
--modernSub: var(--sub, #707b90);
--modernPoint: var(--point, #538fa8);
--modernDeco: var(--deco, #184957);
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1rem;
box-sizing: border-box;
padding: 1.5em;
background-color: var(--modernMain);
color: var(--txColor);
background-image:
radial-gradient(ellipse at 15% 20%, rgba(56, 189, 248, 0.15) 0%, transparent 45%),
radial-gradient(ellipse at 85% 80%, rgba(15, 23, 42, 0.95) 0%, transparent 60%),
linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.95) 100%),
repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, transparent 0, transparent 40px),
repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, transparent 0, transparent 40px);
background-size: cover;
background-attachment: fixed;
}
div#app.modernAccountLayout > .modernContainer[b-fche95k8mi] {
width: 100%;
max-width: 76em;
min-height: min(46em, 92dvh);
display: grid;
grid-template-columns: 1.15fr 1fr;
border-radius: 2em;
overflow: hidden;
border: 1px solid var(--aLight);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
background-color: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
div#app.modernAccountLayout > .modernContainer > .heroSection[b-fche95k8mi] {
padding: 3.2em 3.4em;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
color: #ffffff;
box-sizing: border-box;
background: linear-gradient(160deg, rgba(15, 23, 42, 0.75) 0%, rgba(30, 41, 59, 0.88) 100%);
border-right: 1px solid var(--aLight);
}
div#app.modernAccountLayout > .modernContainer > .heroSection[b-fche95k8mi]::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(215deg, transparent 65%, rgba(56, 189, 248, 0.08) 100%),
linear-gradient(35deg, transparent 70%, rgba(255, 255, 255, 0.04) 100%);
pointer-events: none;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader[b-fche95k8mi] {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .brandWrap[b-fche95k8mi] {
display: flex;
align-items: center;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .brandWrap > .brandLogo[b-fche95k8mi] {
display: inline-flex;
align-items: center;
gap: 0.6em;
text-decoration: none;
color: #ffffff;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .brandWrap > .brandLogo > img.logoImg[b-fche95k8mi] {
height: 2em;
max-height: 2.2em;
width: auto;
object-fit: contain;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .brandWrap > .brandLogo > .logoText[b-fche95k8mi] {
font-size: 1.35em;
font-weight: 700;
letter-spacing: -0.01em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .backToWeb[b-fche95k8mi] {
display: inline-flex;
align-items: center;
gap: 0.4em;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-size: 0.88em;
font-weight: 500;
padding: 0.45em 0.9em;
border-radius: var(--roundBtn, 2em);
border: 1px solid rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.05);
transition: all 0.2s;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .backToWeb:hover[b-fche95k8mi] {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
transform: translateX(-2px);
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader > .backToWeb > i.fi[b-fche95k8mi] {
font-size: 1em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent[b-fche95k8mi] {
position: relative;
z-index: 2;
margin: 4em 0 3em;
display: flex;
flex-direction: column;
gap: 2.4em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap[b-fche95k8mi] {
display: flex;
flex-direction: column;
gap: 1.1em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .sloganTitle[b-fche95k8mi] {
margin: 0;
font-size: 2.5em;
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.03em;
color: #ffffff;
word-break: keep-all;
background: linear-gradient(135deg, #ffffff 40%, var(--modernPoint) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .brandGreeting[b-fche95k8mi] {
margin: 0;
font-size: 1.05em;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
word-break: keep-all;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sliderIndicator[b-fche95k8mi] {
display: flex;
align-items: center;
gap: 0.5em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sliderIndicator > .indBar[b-fche95k8mi] {
width: 2.2em;
height: 0.32em;
border-radius: 0.2em;
background-color: var(--modernPoint);
transition: width 0.3s;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sliderIndicator > .indDot[b-fche95k8mi] {
width: 0.35em;
height: 0.35em;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.35);
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter[b-fche95k8mi] {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding-top: 1.2em;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter > .cultureDrop[b-fche95k8mi] {
position: relative;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter > .cultureDrop > header[b-fche95k8mi] {
padding: 0.35em 0.8em;
font-size: 0.82em;
border-radius: var(--roundBtn, 2em);
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4em;
white-space: nowrap;
transition: all 0.2s;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter > .cultureDrop > header:hover[b-fche95k8mi] {
background-color: rgba(255, 255, 255, 0.14);
color: #ffffff;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter > .cultureDrop > ul.up[b-fche95k8mi] {
border: 1px solid var(--aLight);
border-radius: 0.6em;
background-color: var(--bgColor);
color: var(--txColor);
box-shadow: 0 4px 16px var(--aDark);
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter > .copyright[b-fche95k8mi] {
font-size: 0.78em;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
}
div#app.modernAccountLayout > .modernContainer > .cardSection[b-fche95k8mi] {
padding: 2.2em 2.4em;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: var(--bgColor);
box-sizing: border-box;
position: relative;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader[b-fche95k8mi] {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
flex: 0 0 auto;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader > .authNav[b-fche95k8mi] {
display: flex;
align-items: center;
gap: 1.1em;
flex-wrap: wrap;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader > .authNav > .navLink[b-fche95k8mi] {
font-size: 0.88em;
font-weight: 500;
color: var(--txSub);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.3em 0.4em;
transition: color 0.18s;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader > .authNav > .navLink > i.fi[b-fche95k8mi] {
font-size: 1.05em;
opacity: 0.85;
transition: opacity 0.18s;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader > .authNav > .navLink:hover[b-fche95k8mi] {
color: var(--modernPoint);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader > .authNav > .navLink:hover > i.fi[b-fche95k8mi] {
opacity: 1;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .sectionHeader > .authNav > .navLink:active[b-fche95k8mi] {
transform: scale(0.98);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard[b-fche95k8mi] {
width: 100%;
max-width: 27em;
margin: auto 0;
display: flex;
flex-direction: column;
gap: 1.6em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardHeader[b-fche95k8mi] {
display: flex;
flex-direction: column;
gap: 0.4em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardHeader > .cardTitle[b-fche95k8mi] {
margin: 0;
font-size: 1.85em;
font-weight: 700;
color: var(--txColor);
letter-spacing: -0.02em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardHeader > .cardDesc[b-fche95k8mi] {
margin: 0;
font-size: 0.9em;
color: var(--txSub);
line-height: 1.5;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] {
display: flex;
flex-direction: column;
gap: 1.2em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form {
display: flex;
flex-direction: column;
gap: 1.1em;
width: 100%;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid.single {
grid-template-columns: 1fr;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol {
display: flex;
flex-direction: column;
gap: 0.4em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol label {
font-size: 0.82em;
font-weight: 600;
color: var(--txColor);
letter-spacing: 0.01em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input[type="text"],
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input[type="password"],
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input[type="email"] {
width: 100%;
height: 2.85em;
min-height: 2.85em;
padding: 0 1em;
border: 1px solid var(--aLight);
border-radius: 0.65em;
background-color: var(--bgSub);
color: var(--txColor);
font-size: 0.92em;
box-sizing: border-box;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input[type="text"]:focus,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input[type="password"]:focus,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input[type="email"]:focus {
border-color: var(--modernPoint);
background-color: var(--bgColor);
box-shadow: 0 0 0 3px var(--aLight);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid .fieldCol input::placeholder {
color: var(--txLight);
opacity: 0.7;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid small {
grid-column: 1 / -1;
font-size: 0.78em;
color: var(--txLight);
line-height: 1.4;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form button.submitBtn,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form button[type="submit"].submitBtn,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form button[type="submit"] {
width: 100%;
height: 2.85em;
min-height: 2.85em;
border-radius: var(--roundBtn, 2em);
background: linear-gradient(135deg, var(--modernMain) 0%, var(--modernSub) 100%);
color: #ffffff;
border: 1px solid var(--aColor);
font-size: 0.95em;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4em;
margin-top: 0.6em;
transition: all 0.2s;
box-shadow: 0 4px 14px var(--aLow);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form button.submitBtn:hover,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form button[type="submit"]:hover {
filter: brightness(1.15);
box-shadow: 0 4px 12px var(--aDark);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree {
display: flex;
flex-direction: column;
gap: 0.6em;
margin: 0.4em 0 0.8em;
padding: 0.9em 1.1em;
background-color: var(--bgSub);
border: 1px solid var(--aLight);
border-radius: 0.75em;
box-sizing: border-box;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree[hidden] {
display: none;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > label.agreeAll {
font-size: 0.92em;
font-weight: 600;
color: var(--txColor);
padding-bottom: 0.6em;
margin-bottom: 0.2em;
border-bottom: 1px dashed var(--aLight);
display: inline-flex;
align-items: center;
gap: 0.4em;
cursor: pointer;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > label.agreeAll > span {
color: var(--txColor);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8em;
margin: 0;
padding: 0.15em 0;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li > label.check {
font-size: 0.85em;
color: var(--txColor);
flex: 1 1 auto;
min-width: 0;
cursor: pointer;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li > label.check > span {
color: var(--txColor);
line-height: 1.4;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li > label.check > span b,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li > label.check > span strong {
color: var(--txColor);
font-weight: 600;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li > button.termsBtn {
flex: 0 0 auto;
font-size: 0.78em;
padding: 0.25em 0.7em;
height: auto;
min-height: unset;
border-radius: var(--roundBtn, 2em);
border: 1px solid var(--aLight);
background-color: var(--bgColor);
color: var(--txSub);
font-weight: 500;
cursor: pointer;
line-height: 1.3;
margin: 0;
width: auto;
box-shadow: none;
transition: all 0.2s;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form section.termsAgree > ul > li > button.termsBtn:hover {
color: var(--modernPoint);
border-color: var(--modernPoint);
background-color: var(--aLow);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount {
display: flex;
flex-direction: column;
gap: 1.2em;
width: 100%;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount nav[role="tablist"] {
display: flex;
gap: 0.5em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount nav[role="tablist"] span[role="tab"] {
padding: 0.45em 0.9em;
font-size: 0.85em;
font-weight: 600;
border-radius: var(--roundBtn, 2em);
cursor: pointer;
border: 1px solid var(--aLight);
background: var(--bgSub);
color: var(--txSub);
transition: all 0.2s;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount nav[role="tablist"] span[role="tab"]:hover {
border-color: var(--modernPoint);
color: var(--modernPoint);
box-shadow: 0 4px 12px var(--aDark);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount nav[role="tablist"] span[role="tab"]:active {
transform: scale(0.98);
box-shadow: inset 0 2px 4px var(--aHigh);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount nav[role="tablist"] span[role="tab"][aria-selected="true"] {
background: var(--modernPoint);
color: var(--pointText, #ffffff);
border-color: var(--modernPoint);
box-shadow: 0 2px 8px var(--aDark);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount nav[role="tablist"] span[role="tab"][aria-selected="true"]:hover {
color: var(--pointText, #ffffff);
background-color: var(--pointLight, var(--modernPoint));
box-shadow: 0 4px 14px var(--aDark);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount article[role="tabpanel"] {
display: flex;
flex-direction: column;
gap: 0.8em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount article[role="tabpanel"][hidden] {
display: none;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount article[role="tabpanel"] p {
font-size: 0.88em;
color: var(--txSub);
line-height: 1.5;
margin: 0 0 0.5em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] section.findAccount article[role="tabpanel"] form {
margin-top: 0.2em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] > form button.submitBtn:active,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] > form button[type="submit"]:active {
transform: scale(0.98);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin {
display: flex;
flex-direction: column;
gap: 0.7em;
margin-top: 0.5em;
position: relative;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > span {
display: flex;
align-items: center;
gap: 0.8em;
font-size: 0.78em;
color: var(--txLight);
text-align: center;
margin: 0.4em 0;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > span::before,
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > span::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--aLight);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > a {
width: 100%;
height: 2.85em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
border-radius: var(--roundBtn, 2em);
border: 1px solid var(--aLight);
background-color: var(--bgColor);
color: var(--txColor);
text-decoration: none;
font-size: 0.9em;
font-weight: 500;
transition: all 0.2s;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > a:hover {
background-color: var(--aLow);
border-color: var(--aColor);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > a > img.brandIcon {
width: 1.25em;
height: 1.25em;
object-fit: contain;
flex-shrink: 0;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] nav.externalLogin > a > i.fi {
font-size: 1.15em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardFooter[b-fche95k8mi] {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.6em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardFooter > .securedBadge[b-fche95k8mi] {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: 0.76em;
color: var(--txLight);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardFooter > .securedBadge > i.fi[b-fche95k8mi] {
color: var(--modernPoint);
font-size: 1.1em;
}
/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
div#app.modernAccountLayout[b-fche95k8mi] {
padding: 1.2em;
}
div#app.modernAccountLayout > .modernContainer[b-fche95k8mi] {
grid-template-columns: 1fr 1fr;
min-height: min(42em, 95dvh);
}
div#app.modernAccountLayout > .modernContainer > .heroSection[b-fche95k8mi] {
padding: 2.5em 2.2em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent[b-fche95k8mi] {
margin: 2.5em 0 2em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .sloganTitle[b-fche95k8mi] {
font-size: 2em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection[b-fche95k8mi] {
padding: 2em 1.8em;
}
}
/* 모바일 표준 (860px 이하) - 단일 컬럼 세로 스택 전환 */
@media (max-width: 860px) {
div#app.modernAccountLayout[b-fche95k8mi] {
padding: 0 0 1em 0;
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
}
div#app.modernAccountLayout > .modernContainer[b-fche95k8mi] {
grid-template-columns: 1fr;
min-height: 100vh;
min-height: 100dvh;
border-radius: 0;
border: none;
box-shadow: none;
background-color: transparent;
}
div#app.modernAccountLayout > .modernContainer > .heroSection[b-fche95k8mi] {
flex: 0 0 auto;
padding: 1.4em 1.4em 1em;
border-right: none;
border-bottom: none;
background: transparent;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroHeader[b-fche95k8mi] {
margin-bottom: 0.6em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent[b-fche95k8mi] {
margin: 0.8em 0 0.6em;
gap: 0.8em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap[b-fche95k8mi] {
gap: 0.4em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .sloganTitle[b-fche95k8mi] {
font-size: 1.35em;
line-height: 1.25;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .brandGreeting[b-fche95k8mi] {
font-size: 0.85em;
line-height: 1.5;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sliderIndicator[b-fche95k8mi] {
display: none;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter[b-fche95k8mi] {
padding-top: 0.8em;
margin-top: 0.4em;
border-top: none;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroFooter > .copyright[b-fche95k8mi] {
display: none;
}
div#app.modernAccountLayout > .modernContainer > .cardSection[b-fche95k8mi] {
flex: 1 1 auto;
margin: 0 1em 1em 1em;
padding: 1.8em 1.4em max(1.8em, env(safe-area-inset-bottom, 1.8em));
align-items: flex-start;
background-color: var(--bgColor);
border-radius: 1.5em;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
border: 1px solid var(--aLight);
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard[b-fche95k8mi] {
max-width: 100%;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardHeader > .cardTitle[b-fche95k8mi] {
font-size: 1.5em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardBody[b-fche95k8mi] form .inputGrid {
grid-template-columns: 1fr;
gap: 0.8em;
}
}
/* 소형 스마트폰 (480px 이하) - 콤팩트 최적화 */
@media (max-width: 480px) {
div#app.modernAccountLayout[b-fche95k8mi] {
padding: 0 0 1em 0;
}
div#app.modernAccountLayout > .modernContainer > .heroSection[b-fche95k8mi] {
padding: 1.2em 1.2em 0.8em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .sloganTitle[b-fche95k8mi] {
font-size: 1.2em;
}
div#app.modernAccountLayout > .modernContainer > .heroSection > .heroContent > .sloganWrap > .brandGreeting[b-fche95k8mi] {
font-size: 0.82em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection[b-fche95k8mi] {
margin: 0 1em 1em 1em;
padding: 1.4em 1.2em max(1.6em, env(safe-area-inset-bottom, 1.6em));
border-radius: 1.3em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard[b-fche95k8mi] {
gap: 1.2em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardHeader[b-fche95k8mi] {
gap: 0.8em;
}
div#app.modernAccountLayout > .modernContainer > .cardSection > .authCard > .cardHeader > .cardTitle[b-fche95k8mi] {
font-size: 1.35em;
}
}
/* /Views/Layouts/General/Default/Layout.cshtml.rz.scp.css */
@charset "UTF-8";
div#app.pageLayout[b-6gclf10xy4] {
--frameMax: 1280px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
font-size: 1rem;
min-height: 100vh;
transition: padding-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
box-sizing: border-box;
}
div#app.pageLayout.hasLayoutConfigSide[b-6gclf10xy4] {
padding-right: 21.5em;
}
div#app.pageLayout > *[b-6gclf10xy4] {
flex: 0 0 auto;
min-height: 2em;
}
div#app.pageLayout > header[b-6gclf10xy4] {
background-color: var(--bgColor);
position: sticky;
top: 0;
z-index: 100;
}
div#app.pageLayout > header > div[b-6gclf10xy4] {
width: 100%;
max-width: var(--frameMax);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0.8em;
gap: 1em;
}
div#app.pageLayout > header > div > div[b-6gclf10xy4] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
div#app.pageLayout > header > div > div img.logo[b-6gclf10xy4] {
height: 1.6em;
vertical-align: bottom;
will-change: transform;
image-rendering: auto; /* 또는 -webkit-optimize-contrast */
}
div#app.pageLayout > header > div > div img.logo + span.logo[b-6gclf10xy4] {
display: flex;
flex-direction: row;
align-items: baseline;
font-size: 1.8em;
line-height: 1em;
cursor: pointer;
color: var(--main);
}
div#app.pageLayout > header > div > div img.logo + span.logo > b[b-6gclf10xy4] {
color: var(--point);
}
div#app.pageLayout > header > div > div img.logo + span.logo > small[b-6gclf10xy4] {
font-size: 0.7em;
color: var(--silver);
}
div#app.pageLayout > header > div > div.left[b-6gclf10xy4] {
gap: 0.4em;
font-size: 1rem;
}
div#app.pageLayout > header > div > div.left > span.menu[b-6gclf10xy4] {
display: none;
justify-content: center;
align-items: center;
font-size: 2em;
margin-right: 0.5em;
cursor: pointer;
}
div#app.pageLayout > header > div > div.left > i.fiSettings[b-6gclf10xy4] {
margin-left: 0.3em;
font-size: 1.1em;
color: var(--txLight);
cursor: pointer;
transition: color 0.2s, transform 0.2s;
}
div#app.pageLayout > header > div > div.left > i.fiSettings:hover[b-6gclf10xy4] {
color: var(--main);
transform: rotate(30deg) scale(1.1);
}
div#app.pageLayout > header > div > div.left > i.fiSettings:active[b-6gclf10xy4] {
transform: rotate(30deg) scale(0.95);
}
div#app.pageLayout > header > div > div.right[b-6gclf10xy4] {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 2em;
}
div#app.pageLayout > header > div > div.right > ul[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > ul[b-6gclf10xy4] {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
list-style: none;
gap: 0.5em;
}
div#app.pageLayout > header > div > div.right > ul > li[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > ul > li[b-6gclf10xy4] {
cursor: pointer;
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav[b-6gclf10xy4] {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > ul[b-6gclf10xy4] {
font-size: 0.95em;
font-weight: bold;
color: var(--txLight);
text-transform: uppercase;
gap: 2.2em;
}
div#app.pageLayout > header > div > div.right > nav > ul > li[b-6gclf10xy4] {
position: relative;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span[b-6gclf10xy4] {
display: block;
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span:hover[b-6gclf10xy4] {
transform: scale(1.1);
color: var(--point);
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span:active[b-6gclf10xy4] {
transform: scale(0.98);
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span[b-6gclf10xy4] {
/* 하위 메뉴 표시 화살표: 열리면 뒤집힘 */
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span > i.fi[b-6gclf10xy4] {
font-size: 0.8em;
margin-left: 0.15em;
transition: transform 0.25s;
}
div#app.pageLayout > header > div > div.right > nav > ul > li.active > span[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > ul > li:hover > span[b-6gclf10xy4] {
color: var(--point);
}
div#app.pageLayout > header > div > div.right > nav > ul > li[b-6gclf10xy4] {
/* 2단 메뉴: 1단 아래 가운데에 좌우가 둥근 가로 바 — 마우스를 올리면(또는 키보드 포커스) 살짝 내려오며 나타남 */
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul[b-6gclf10xy4] {
position: absolute;
top: 100%;
left: 50%;
display: flex;
flex-direction: row;
gap: 0.2em;
margin: 1.1em 0 0 0;
padding: 0.35em;
list-style: none;
white-space: nowrap;
font-size: 0.9em;
color: var(--txColor);
background-color: var(--bgColor);
border: 1px solid var(--lineColor);
border-radius: 2em;
box-shadow: 0 0.5em 1.5em var(--aColor);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -0.6em) scale(0.96);
transform-origin: top center;
transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.2s;
/* 1단과 바 사이 틈에서 마우스가 벗어나 닫히지 않도록 잇는 투명 다리 */
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul[b-6gclf10xy4]::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 1.3em;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul > li[b-6gclf10xy4] {
padding: 0.5em 1.1em;
border-radius: 2em;
cursor: pointer;
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul > li:hover[b-6gclf10xy4] {
color: var(--main);
background-color: var(--main1);
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul > li.active[b-6gclf10xy4] {
color: var(--bgColor);
background-color: var(--main);
}
div#app.pageLayout > header > div > div.right > nav > ul > li:hover > ul[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > ul > li:focus-within > ul[b-6gclf10xy4] {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
div#app.pageLayout > header > div > div.right > nav > ul > li:hover > span > i.fi[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > ul > li:focus-within > span > i.fi[b-6gclf10xy4] {
transform: rotate(180deg);
}
div#app.pageLayout > header > div > div.right > nav > header[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > footer[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > span[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > a[b-6gclf10xy4] {
display: none;
}
div#app.pageLayout > header > div > div.right > ul[b-6gclf10xy4] {
font-size: 0.85em;
padding: 0.25em 0.4em;
border: 1px solid var(--lineColor);
border-radius: 2em;
align-items: center;
gap: 0;
}
div#app.pageLayout > header > div > div.right > ul > li[b-6gclf10xy4] {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.3em 0.6em;
text-transform: uppercase;
gap: 0.4em;
font-weight: bold;
color: var(--main);
border-radius: 2em;
}
div#app.pageLayout > header > div > div.right > ul > li:hover[b-6gclf10xy4] {
color: var(--point);
}
div#app.pageLayout > header > div > div.right > ul > li[b-6gclf10xy4] {
/* 통합 검색: 옅은 메인색 둥근 바탕의 아이콘 — 옆 회원 항목과 구분 */
}
div#app.pageLayout > header > div > div.right > ul > li[data-search][b-6gclf10xy4] {
justify-content: center;
width: 2.2em;
height: 2.2em;
padding: 0;
margin-right: 0.3em;
border-radius: 50%;
background-color: var(--main2);
}
div#app.pageLayout > header > div > div.right > ul > li[data-search]:hover[b-6gclf10xy4] {
color: var(--bgColor);
background-color: var(--main5);
}
div#app.pageLayout > header > div > div.right > ul > li.stack[b-6gclf10xy4] {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0;
padding: 0 0.9em 0 0.6em;
font-size: 0.72em;
line-height: 1.05;
letter-spacing: 0.02em;
}
div#app.pageLayout > header > div > div.right > ul > li > span.userName[b-6gclf10xy4] {
display: block;
max-width: 8em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div#app.pageLayout > header > div > div.right > ul > li.bgMain[b-6gclf10xy4] {
background-color: var(--main);
color: var(--bgColor);
border: 1px solid var(--aColor);
padding-left: 0.4em;
}
div#app.pageLayout > header > div > div.right > ul > li.bgMain > i[b-6gclf10xy4] {
width: 1.8em;
height: 1.8em;
padding: 0.15em;
border: 1px solid var(--aDark);
border-radius: 50%;
background-color: var(--mainLight);
display: flex;
align-items: center;
justify-content: center;
}
div#app.pageLayout > header > div > div.right > ul > li.bgMain > i:has(img)[b-6gclf10xy4] {
padding: 0;
border: none;
}
div#app.pageLayout > header > div > div.right > ul > li.bgMain > i:has(img) > img[b-6gclf10xy4] {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
div#app.pageLayout > header > div > div.right > ul > li.bgMain > i > i.fi[b-6gclf10xy4] {
font-size: 1.1em;
}
div#app.pageLayout > header > div > div.right > ul + i.fi[b-6gclf10xy4] {
display: none;
}
div#app.pageLayout > div[b-6gclf10xy4] {
flex: 1 1 auto;
overflow: auto;
padding: 0.5em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
div#app.pageLayout > div > main[b-6gclf10xy4] {
flex: 1 1 auto;
/* 현 레이아웃을 전체 페이지 스크롤 형으로 작성함. */
}
div#app.pageLayout[b-6gclf10xy4] {
/* 창 높이 맞춤(화면이 AppClass = "fit"): 앱을 창 높이로 고정하고 main 이 남은 높이를 채우는 flex 열 — 화면 안 영역(예: 메시지 대화)이 먼저 줄고,
main 이 내용의 최소 높이(화면이 정한 min-height)에 닿으면 그때부터 본문 영역(> div)이 스크롤 */
}
div#app.pageLayout.fit[b-6gclf10xy4] {
height: 100vh;
height: 100dvh;
}
div#app.pageLayout.fit > div[b-6gclf10xy4] {
min-height: 0;
}
div#app.pageLayout.fit > div > main[b-6gclf10xy4] {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
div#app.pageLayout > div > footer[b-6gclf10xy4] {
padding: 1.5em 2em;
color: white;
background-color: var(--decoDark); /* 하단 영역: 단계색(1~9)은 다크에서 밝기 순서가 뒤집히므로 테마와 상관없이 짙은 데코색 */
border-radius: var(--roundBox, 0.8em);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2em;
}
div#app.pageLayout > div > footer > div.logoContainer[b-6gclf10xy4] {
flex: 0 0 17em;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
gap: 0.5em;
}
div#app.pageLayout > div > footer > div.logoContainer > div[b-6gclf10xy4] {
flex: 0 0 auto;
display: flex;
flex-direction: row;
gap: 0.2em;
}
div#app.pageLayout > div > footer > div.logoContainer > div > img[b-6gclf10xy4] {
height: 1.6em;
vertical-align: bottom;
margin: 0.2em 0 -0.2em 0;
}
div#app.pageLayout > div > footer > div.logoContainer > div > span.logo[b-6gclf10xy4] {
display: flex;
flex-direction: row;
align-items: baseline;
font-size: 1.8rem;
line-height: 1em;
cursor: pointer;
color: white;
}
div#app.pageLayout > div > footer > div.logoContainer > div > span.logo > b[b-6gclf10xy4] {
color: var(--pointLight);
}
div#app.pageLayout > div > footer > div.logoContainer > div > span.logo > small[b-6gclf10xy4] {
font-size: 1.1rem;
color: var(--silver);
}
div#app.pageLayout > div > footer > div.logoContainer > p[b-6gclf10xy4] {
flex: 1 1 auto;
color: rgba(255, 255, 255, 0.35);
font-size: 0.85rem;
line-height: 1.6em;
}
div#app.pageLayout > div > footer > div:not(.logoContainer)[b-6gclf10xy4] {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2em;
height: 100%;
}
div#app.pageLayout > div > footer > section[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section[b-6gclf10xy4] {
flex: 1 1 auto;
font-size: 0.9rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
color: white;
}
div#app.pageLayout > div > footer > section > header[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > header[b-6gclf10xy4] {
font-weight: bold;
font-size: 1em;
}
div#app.pageLayout > div > footer > section > ul[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > ul[b-6gclf10xy4] {
list-style: none;
margin: 0.3em 0 0 0;
padding: 0;
}
div#app.pageLayout > div > footer > section > ul > li[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > ul > li[b-6gclf10xy4] {
margin: 0.25em 0;
}
div#app.pageLayout > div > footer > section > ul > li[b-6gclf10xy4], div#app.pageLayout > div > footer > section > ul > li > a[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > ul > li[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > ul > li > a[b-6gclf10xy4] {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: all 0.2s;
}
div#app.pageLayout > div > footer > section > ul > li:hover[b-6gclf10xy4], div#app.pageLayout > div > footer > section > ul > li > a:hover[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > ul > li:hover[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section > ul > li > a:hover[b-6gclf10xy4] {
color: var(--deco2);
transform: scale(1.1) translateX(1em);
}
div#app.pageLayout > div > footer > section.page[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section.page[b-6gclf10xy4] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
}
div#app.pageLayout > div > footer > section.page > div[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section.page > div[b-6gclf10xy4] {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
color: white;
gap: 0.5em;
}
div#app.pageLayout > div > footer > section.page > div > i.fi[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section.page > div > i.fi[b-6gclf10xy4] {
font-size: 2.8em;
}
div#app.pageLayout > div > footer > section.page > div > header[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section.page > div > header[b-6gclf10xy4] {
font-size: 1.1em;
}
div#app.pageLayout > div > footer > section.page > div > header > small[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section.page > div > header > small[b-6gclf10xy4] {
display: block;
font-size: 0.7em;
color: rgba(255, 255, 255, 0.5);
}
div#app.pageLayout > div > footer > section.page > small[b-6gclf10xy4], div#app.pageLayout > div > footer > div > section.page > small[b-6gclf10xy4] {
flex: 0 0 auto;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.6);
}
div#app.pageLayout > header > div > div.right > ul + i#pageMore.locked[b-6gclf10xy4] {
display: none !important;
}
div#app.pageLayout[b-6gclf10xy4] > div > * {
flex: 0 0 auto;
width: 100%;
max-width: var(--frameMax);
margin: 0 auto;
}
/* 타블렛 W 이하 (~ 1024px) */
@media (width <= 1024px) {
div#app.pageLayout > header[b-6gclf10xy4] {
border-bottom: 1px solid var(--aColor);
}
div#app.pageLayout > header > div > div.left > span.menu[b-6gclf10xy4] {
display: flex;
}
div#app.pageLayout > header > div > div.right[b-6gclf10xy4] {
justify-content: flex-end;
gap: 1em;
}
div#app.pageLayout > header > div > div.right > nav[b-6gclf10xy4] {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 20em;
height: 100vh;
height: 100dvh;
max-height: 100dvh;
box-sizing: border-box;
padding: 1em 1em max(1em, env(safe-area-inset-bottom, 1em)) 1em;
margin-left: -21em;
color: var(--txColor);
background-color: var(--bgColor);
border-right: 1px solid var(--aDark);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: initial;
gap: 1em;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
div#app.pageLayout > header > div > div.right > nav > header[b-6gclf10xy4] {
flex: 0 0 auto;
}
div#app.pageLayout > header > div > div.right > nav > header[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > header > span[b-6gclf10xy4] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 0.5em;
}
div#app.pageLayout > header > div > div.right > nav > header.logoWrap[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > header > span.logoWrap[b-6gclf10xy4] {
font-size: 0.85em;
}
div#app.pageLayout > header > div > div.right > nav > header.closer[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > header > span.closer[b-6gclf10xy4] {
font-size: 1.6em;
cursor: pointer;
color: var(--mainLight);
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > header.closer:hover[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > header > span.closer:hover[b-6gclf10xy4] {
transform: scale(1.1);
color: var(--mainDark);
}
div#app.pageLayout > header > div > div.right > nav > header.closer:active[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > header > span.closer:active[b-6gclf10xy4] {
color: var(--mainLight);
transform: scale(0.95);
}
div#app.pageLayout > header > div > div.right > nav > ul[b-6gclf10xy4] {
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
padding: 1em 0.5em;
flex-direction: column;
align-items: initial;
gap: 0.5em;
border-bottom: 1px solid var(--aColor);
}
div#app.pageLayout > header > div > div.right > nav > ul > li[b-6gclf10xy4] {
font-size: 1.2em;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span[b-6gclf10xy4] {
display: inline-block;
width: auto;
/* 사이드 패널은 하위 메뉴가 늘 펼쳐져 있으므로 화살표 숨김 */
}
div#app.pageLayout > header > div > div.right > nav > ul > li > span > i.fi[b-6gclf10xy4] {
display: none;
}
div#app.pageLayout > header > div > div.right > nav > ul > li[b-6gclf10xy4] {
/* 2단 메뉴(사이드 패널): 늘 펼쳐 보임 — 왼쪽 세로줄 아래 들여 쓴 둥근 항목, 지금 페이지는 메인색 바탕 */
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul[b-6gclf10xy4] {
position: static;
flex-direction: column;
gap: 0.1em;
margin: 0.4em 0 0 0.3em;
padding: 0 0 0 0.7em;
font-size: 0.75em;
font-weight: normal;
text-transform: none;
background-color: transparent;
border: none;
border-left: 2px solid var(--main2);
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul[b-6gclf10xy4]::before {
display: none;
}
div#app.pageLayout > header > div > div.right > nav > ul > li > ul > li[b-6gclf10xy4] {
padding: 0.45em 0.9em;
}
div#app.pageLayout > header > div > div.right > nav > ul > li:hover > ul[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > ul > li:focus-within > ul[b-6gclf10xy4] {
transform: none;
}
div#app.pageLayout > header > div > div.right > nav[b-6gclf10xy4] {
/* 통합 검색 바로가기 (780 이하에서만 보임): 인증 상자 위 검색창 모양 — 둥근 아이콘 · 이름/안내 · 화살표 */
}
div#app.pageLayout > header > div > div.right > nav > a[b-6gclf10xy4] {
flex: 0 0 auto;
align-items: center;
gap: 0.7em;
padding: 0.45em 0.9em 0.45em 0.45em;
color: var(--txColor);
text-decoration: none;
border: 1px solid var(--lineColor);
border-radius: 2em;
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > a > i:first-child[b-6gclf10xy4] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
color: var(--main);
background-color: var(--main2);
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > a > span[b-6gclf10xy4] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
font-size: 0.9em;
font-weight: bold;
line-height: 1.2em;
}
div#app.pageLayout > header > div > div.right > nav > a > span > small[b-6gclf10xy4] {
font-weight: normal;
color: var(--txLight);
}
div#app.pageLayout > header > div > div.right > nav > a > i.fi:last-child[b-6gclf10xy4] {
color: var(--txLight);
transition: transform 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > a:hover[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > a.active[b-6gclf10xy4] {
border-color: var(--main3);
background-color: var(--main1);
}
div#app.pageLayout > header > div > div.right > nav > a:hover > i:first-child[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > a.active > i:first-child[b-6gclf10xy4] {
color: var(--bgColor);
background-color: var(--main);
}
div#app.pageLayout > header > div > div.right > nav > a:hover > i.fi:last-child[b-6gclf10xy4], div#app.pageLayout > header > div > div.right > nav > a.active > i.fi:last-child[b-6gclf10xy4] {
transform: translateX(0.2em);
}
div#app.pageLayout > header > div > div.right > nav > span.space[b-6gclf10xy4] {
display: block;
flex: 1 1 auto;
min-height: 0.5em;
}
div#app.pageLayout > header > div > div.right > i.fi[b-6gclf10xy4] {
display: block !important;
font-size: 2em;
cursor: pointer;
}
div#app.pageLayout > header.open > div > div.right > nav[b-6gclf10xy4] {
margin-left: 0;
box-shadow: 0.1em 0.1em 0.6em 0.2em var(--aDark);
}
div#app.pageLayout.open[b-6gclf10xy4] #pageMenu {
margin-right: 0 !important;
}
}
/* 타블렛 H 이하 (~ 780px) */
@media (width <= 780px) {
div#app.pageLayout > header > div > div.right > nav > footer[b-6gclf10xy4] {
flex: 0 0 auto;
padding: 0.5em;
background-color: var(--main1);
border: 1px solid var(--main2);
border-radius: 2em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
gap: 1em;
}
div#app.pageLayout > header > div > div.right > nav > footer > span[b-6gclf10xy4] {
flex: 0 0 auto;
width: 3em;
height: 3em;
border-radius: 1.5em;
background-color: var(--main);
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
div#app.pageLayout > header > div > div.right > nav > footer > span:has(img)[b-6gclf10xy4] {
border: 2px solid var(--main);
overflow: hidden;
}
div#app.pageLayout > header > div > div.right > nav > footer > span:has(img) > img[b-6gclf10xy4] {
width: 100%;
height: 100%;
object-fit: cover;
}
div#app.pageLayout > header > div > div.right > nav > footer > span > i.fi[b-6gclf10xy4] {
font-size: 2em;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul[b-6gclf10xy4] {
flex: 1 1 auto;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.2em;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li[b-6gclf10xy4] {
line-height: 1em;
font-size: 0.85em;
font-weight: bold;
cursor: pointer;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li.name[b-6gclf10xy4] {
font-size: 1em;
cursor: default; /* 사용자 페이지 이동은 이미지만 */
font-weight: bold;
text-transform: capitalize;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li.userInfo[b-6gclf10xy4] {
line-height: 1.2em;
cursor: default;
font-size: 0.8em;
font-weight: normal;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li.userInfo > i.fi[b-6gclf10xy4] {
cursor: pointer;
color: var(--main);
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li.userInfo > i.fi:hover[b-6gclf10xy4] {
transform: scale(1.3);
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li.userInfo > i.fi:active[b-6gclf10xy4] {
transform: scale(1.1);
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li.name[onclick][b-6gclf10xy4] {
cursor: pointer;
color: var(--main);
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li[b-6gclf10xy4] {
/* 알림·메시지 수: 아이콘 + 숫자 링크 */
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li > a[b-6gclf10xy4] {
display: inline-flex;
align-items: center;
gap: 0.2em;
margin-right: 0.8em;
color: var(--main);
text-decoration: none;
transition: all 0.2s;
}
div#app.pageLayout > header > div > div.right > nav > footer > ul > li > a:hover[b-6gclf10xy4] {
color: var(--point);
}
div#app.pageLayout > header > div > div.right > ul[b-6gclf10xy4] {
display: none;
}
div#app.pageLayout > header > div > div.right[b-6gclf10xy4] {
/* 회원 상자가 숨으므로 통합 검색은 사이드 패널 인증 상자 위 바로가기로 */
}
div#app.pageLayout > header > div > div.right > nav > a[b-6gclf10xy4] {
display: flex;
}
div#app.pageLayout > div > footer[b-6gclf10xy4] {
flex-direction: column;
justify-content: initial;
align-items: initial;
}
div#app.pageLayout > div > footer > *[b-6gclf10xy4] {
flex: 0 0 auto !important;
height: auto !important;
}
div#app.pageLayout > div > footer > *.page[b-6gclf10xy4] {
height: 6em !important;
}
div#app.pageLayout > div > footer > *.page > small[b-6gclf10xy4] {
text-align: right;
font-size: 0.9rem;
}
div#app.pageLayout > div > footer > div:not(.logoContainer)[b-6gclf10xy4] {
gap: 0.5em;
}
}
/* 모바일 (~ 520px) */
/* 하단 "GET QR CODE" 모달: QR 이미지 가운데, 그 아래 주소 입력 그룹(읽기 전용 + 복사 버튼), 확인 버튼은 가운데 */
dialog.qrDialog[b-6gclf10xy4] {
width: 22em;
}
dialog.qrDialog > section[b-6gclf10xy4] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8em;
}
dialog.qrDialog > section > img[b-6gclf10xy4] {
width: 14em;
height: 14em;
}
dialog.qrDialog > section > .inputGroup[b-6gclf10xy4] {
width: 100%;
}
dialog.qrDialog > section > .inputGroup > input[b-6gclf10xy4] {
font-size: 0.85em;
}
dialog.qrDialog > footer[b-6gclf10xy4] {
justify-content: center;
}
/* 메시지 보내기 창 (dialog#messageDialog): 받는 사람 제목 / 내용 입력 / 취소·보내기 */
dialog.messageDialog[b-6gclf10xy4] {
width: 28em;
}
dialog.messageDialog > section > textarea[b-6gclf10xy4] {
width: 100%;
resize: vertical;
}
/* 상단 회원 정보 상자 (li#userBox): 버튼(이미지·ID·안 읽은 메시지 수) / 누르면 드롭박스(이미지·이름·ID, 그룹·역할·메시지, 그룹 변경·내 정보) */
#userBox[b-6gclf10xy4] {
cursor: pointer;
}
#userBox > i > img[b-6gclf10xy4] {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
#userBox > section[b-6gclf10xy4] {
width: 18em;
padding: 1em;
cursor: default;
text-transform: none;
font-weight: normal;
color: var(--txColor);
}
#userBox > section > header[b-6gclf10xy4] {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.8em;
padding-bottom: 0.8em;
border-bottom: 1px solid var(--lineColor);
}
#userBox > section > header > div.pic[b-6gclf10xy4] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2em;
height: 3.2em;
border-radius: 50%;
overflow: hidden;
color: var(--deco);
border: 0.15em solid var(--lineColor);
}
#userBox > section > header > div.pic > i.fi[b-6gclf10xy4] {
font-size: 1.8em;
}
#userBox > section > header > div.pic > img[b-6gclf10xy4] {
width: 100%;
height: 100%;
object-fit: cover;
}
#userBox > section > header > div:last-child[b-6gclf10xy4] {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.4em;
color: var(--txColor);
}
#userBox > section > header > div:last-child > span[b-6gclf10xy4] {
display: flex;
flex-direction: row;
align-items: center;
line-height: 1em;
gap: 0.3em;
}
#userBox > section > header > div:last-child > span > strong[b-6gclf10xy4] {
color: var(--main);
overflow: hidden;
font-size: 1.1em;
text-overflow: ellipsis;
}
#userBox > section > header > div:last-child > span > small[b-6gclf10xy4] {
color: var(--silver);
font-size: 0.9em;
text-transform: capitalize;
}
#userBox > section > header > div:last-child > span:last-child[b-6gclf10xy4] {
font-size: 0.85em;
color: var(--txLight);
}
#userBox > section > header > div:last-child > span:last-child > i.fi[b-6gclf10xy4] {
cursor: pointer;
color: var(--main);
transition: all 0.2s;
}
#userBox > section > header > div:last-child > span:last-child > i.fi:hover[b-6gclf10xy4] {
transform: scale(1.3);
}
#userBox > section > header > div:last-child > span:last-child > i.fi:active[b-6gclf10xy4] {
transform: scale(1.1);
}
#userBox > section > ul[b-6gclf10xy4] {
max-height: none;
padding: 0.6em 0;
}
#userBox > section > ul > li[b-6gclf10xy4] {
display: flex;
justify-content: space-between;
gap: 1em;
padding: 0.3em 0.5em;
background-color: transparent;
cursor: default;
}
#userBox > section > ul > li > label[b-6gclf10xy4] {
color: var(--txLight);
display: flex;
align-items: center;
gap: 0.5em;
}
#userBox > section > ul > li > label > i.fi[b-6gclf10xy4] {
font-size: 1.2em;
}
#userBox > section > ul > li > a[b-6gclf10xy4] {
color: var(--main);
font-weight: bold;
}
#userBox > section > footer[b-6gclf10xy4] {
display: flex;
justify-content: flex-end;
gap: 0.4em;
padding-top: 0.8em;
border-top: 1px solid var(--lineColor);
}
aside.layoutConfigSidePanel[b-6gclf10xy4] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 21.5em;
max-width: 100vw;
z-index: 10000;
background-color: var(--bgColor);
border-left: 1px solid var(--lineColor);
box-shadow: -4px 0 20px var(--aColor);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
aside.layoutConfigSidePanel.open[b-6gclf10xy4] {
transform: translateX(0);
}
/* /Views/Manager/Account/Config.cshtml.rz.scp.css */
@charset "UTF-8";
/* 계정 구성 — 가입 기본 그룹/역할 모달(chipEdit): 예전 카드와 같은 칩 목록 상자를 고정 폭·높이로 보여 준다 */
dialog.chipEdit[b-c06s3szc0k] {
width: 28em;
}
dialog.chipEdit > section[b-c06s3szc0k] {
display: flex;
flex-direction: column;
height: 18em;
}
/* /Views/Manager/Account/OAuth.cshtml.rz.scp.css */
@charset "UTF-8";
/* 계정 관리 > OAuth 구성 전용 스타일. 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.oauthBox > article > section.card[b-mixnbw6e7r] {
padding: 0;
overflow: hidden;
}
div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] {
padding: 0.5em;
overflow-y: auto;
}
div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > header > .colName, div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > ul > li > .colName {
flex: 1 1 auto;
min-width: 0;
}
div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > header > .colKind, div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > ul > li > .colKind {
flex: 0 0 9em;
justify-content: center;
white-space: nowrap;
}
div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > header > .colClient, div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > ul > li > .colClient {
flex: 0 0 16em;
min-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > header > .colFlag, div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > ul > li > .colFlag {
flex: 0 0 6em;
justify-content: center;
}
div.oauthBox > article > section.card > div.dataList[b-mixnbw6e7r] > ul > li {
cursor: pointer;
}
dialog#oauthModal[b-mixnbw6e7r] {
width: 36em;
}
dialog#oauthModal > header[b-mixnbw6e7r] {
color: var(--main);
}
dialog#oauthModal li[hidden][b-mixnbw6e7r] {
display: none;
}
dialog#oauthModal > footer > label.check[b-mixnbw6e7r] {
width: auto;
margin-right: auto;
}
/* /Views/Manager/Account/Users.cshtml.rz.scp.css */
@charset "UTF-8";
/* 사용자 및 조직 관리 (iframe 임베드) 페이지 전용 스코프 스타일.
좌측(조직 트리)/우측(목록) 모두 독립된 .card 라운드 박스이며,
flex-grow 비율만 다르게 준 flex 사이즈라 컨테이너 폭에 따라 유동적으로 늘고 줄고,
내용이 넘치면 각 박스 내부에서만 스크롤된다(overflow-y: auto). */
div.pageBox > div.flexRow[b-xd32sfva2u] {
gap: 1em;
}
div.pageBox > div.flexRow > aside.orgBox[b-xd32sfva2u] {
flex: 0 0 18em;
overflow: hidden;
padding: 0.5em;
gap: 0.5em;
}
div.pageBox > div.flexRow > aside.orgBox > div.treeBox[b-xd32sfva2u] {
overflow-y: auto;
}
div.pageBox > div.flexRow > section[b-xd32sfva2u] {
flex: 1 1 auto;
padding: 0;
overflow: hidden;
gap: 0;
}
div.pageBox > div.flexRow > section > header[b-xd32sfva2u] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
/* 검색창 폭만 지정 — 나머지는 공용 .inputGroup 그대로 사용 */
}
div.pageBox > div.flexRow > section > header > strong[b-xd32sfva2u] {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div.pageBox > div.flexRow > section > header > strong > i.fi[b-xd32sfva2u] {
font-size: 1.4em;
}
div.pageBox > div.flexRow > section > header > div.inputGroup[b-xd32sfva2u] {
width: 16em;
}
div.pageBox > div.flexRow > section > header > div.inputGroup > input[b-xd32sfva2u] {
font-size: 0.9em;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] {
overflow-y: auto;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > * .colName {
flex: 1 1 auto;
cursor: pointer;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > * .colFlag {
flex: 0 0 5em;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > * .colDate {
flex: 0 0 8em;
font-size: 0.85em;
justify-content: center;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > * .colAction {
flex: 0 0 2em;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > ul > li {
padding: 0.2em 0.5em;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > ul > li > .colName {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.5em;
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > ul > li > .colName > i.fi {
font-size: 1.4em;
color: var(--main);
}
div.pageBox > div.flexRow > section > div[b-xd32sfva2u] > ul > li > button {
height: auto;
width: auto;
padding: 0.3em;
}
div.pageBox > div.flexRow > section > footer[b-xd32sfva2u] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em 1em;
border-top: 1px solid var(--lineColor);
}
dialog#userModal > header[b-xd32sfva2u],
dialog#groupModal > header[b-xd32sfva2u] {
color: var(--main);
}
dialog#userModal > header > span.badge[b-xd32sfva2u],
dialog#groupModal > header > span.badge[b-xd32sfva2u] {
background-color: var(--danger);
color: white;
}
dialog#userModal > section > section[b-xd32sfva2u], dialog#userModal > section > section > div[b-xd32sfva2u], dialog#userModal > section > section > div > div[b-xd32sfva2u],
dialog#groupModal > section > section[b-xd32sfva2u],
dialog#groupModal > section > section > div[b-xd32sfva2u],
dialog#groupModal > section > section > div > div[b-xd32sfva2u] {
width: 100%;
height: 100%;
}
/* 그룹/사용자 모달 — 탭마다 콘텐츠 양(기본정보 폼 vs 속성/그룹/역할 목록)이 달라
dialog 기본값(내용에 맞춰 자동 가로/세로 크기 조정)이 탭 전환마다 흔들린다.
dialog 자체 너비를 고정하고, 탭 패널 공통 컨테이너 높이를 기본정보 탭 기준으로 고정한다. */
dialog#userModal[b-xd32sfva2u],
dialog#groupModal[b-xd32sfva2u] {
width: 34em;
/* 삭제 버튼은 저장/취소와 떨어진 왼쪽에 둔다 (그룹/사용자 모달 공통) */
}
dialog#userModal .tabBox > section[b-xd32sfva2u],
dialog#groupModal .tabBox > section[b-xd32sfva2u] {
/* min-height 는 바닥값일 뿐이라 기본정보 탭 실제 높이가 추정치보다 크면 그만큼 또 흔들린다.
고정 height + 내부 스크롤로 탭이 바뀌어도 콘텐츠 양과 무관하게 항상 동일 높이를 유지한다. */
height: 27em;
overflow-y: auto;
}
dialog#userModal .tabBox ul.form[b-xd32sfva2u],
dialog#groupModal .tabBox ul.form[b-xd32sfva2u] {
padding: 0;
}
dialog#userModal > footer > button.danger[b-xd32sfva2u],
dialog#groupModal > footer > button.danger[b-xd32sfva2u] {
margin-right: auto;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Manager/Account/Users.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AAAA;AAAA;AAAA;AASA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;AAcA;;AAZA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAKZ;EACI;;AAGI;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAOR;AAAA;EACI;;AACA;AAAA;EACI;EACA;;AAKJ;AAAA;AAAA;AAAA;EAGI;EACA;;;AAKZ;AAAA;AAAA;AAGA;AAAA;EAEI;AAaA;;AAXA;AAAA;AACI;AAAA;EAEA;EACA;;AAGJ;AAAA;EACI;;AAIJ;AAAA;EACI%22%7D */
/* /Views/Manager/Content.cshtml.rz.scp.css */
@charset "UTF-8";
/* 컨텐츠 관리 전용 스타일 — 탭 조각(Content/Boards, Content/Pages)은 fetch 로 #contentManage 안에 꽂히고 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다.
두 탭이 같은 목록 카드 구조(.contentList)라 한곳에 둔다. */
div#contentManage[b-3zrub9bex3] div.contentList > section {
padding: 0;
overflow: hidden;
gap: 0;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > header > strong {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div#contentManage[b-3zrub9bex3] div.contentList > section > header > strong > i.fi {
font-size: 1.4em;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > header .inputGroup {
width: 14em;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList {
overflow-y: auto;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colNo, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colNo {
flex: 0 0 4em;
justify-content: center;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colName, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colName {
flex: 1 1 auto;
min-width: 0;
gap: 0.5em;
overflow: hidden;
white-space: nowrap;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colType, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colType {
flex: 0 0 7em;
justify-content: center;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colCount, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colCount {
flex: 0 0 5em;
justify-content: center;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colAction, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colAction {
flex: 0 0 9em;
font-size: 0.85em;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colFlag, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colFlag {
flex: 0 0 6em;
justify-content: center;
gap: 0.4em;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colDate, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colDate {
flex: 0 0 8em;
font-size: 0.85em;
justify-content: center;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > header > .colMore, div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colMore {
flex: 0 0 2.4em;
justify-content: center;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li {
padding: 0.2em 0.5em;
cursor: pointer;
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colFlag {
color: var(--main);
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colAction {
color: var(--txSub);
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colMore {
border-radius: var(--roundBtn);
}
div#contentManage[b-3zrub9bex3] div.contentList > section > div.dataList > ul > li > .colMore:hover {
background-color: var(--aColor);
}
div#contentManage[b-3zrub9bex3] div.contentList > section > footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 0.8em;
border-top: 1px solid var(--lineColor);
}
/* 신고 상세 창(신고 탭 조각): 항목 이름 옆 값, 제목 아래 신고된 댓글·답글 내용 일부, 신고자 옆 신고 시각 */
div#contentManage[b-3zrub9bex3] dialog:is(#reportModal, #reportUserModal) ul.form > li > p {
flex: 1 1 auto;
min-width: 0;
margin: 0;
word-break: break-word;
white-space: pre-wrap;
}
div#contentManage[b-3zrub9bex3] dialog:is(#reportModal, #reportUserModal) ul.form > li > p > small {
display: block;
margin-top: 0.3em;
font-size: 0.85em;
color: var(--txLight);
}
div#contentManage[b-3zrub9bex3] dialog:is(#reportModal, #reportUserModal) ul.form > li > p > a[href="#"]:hover {
text-decoration: underline;
}
/* 사용자 표시(이름 + 아이디): 아이디는 작은 회색 — 신고 목록의 신고자 열, 신고 상세·사용자 정보 창 */
div#contentManage[b-3zrub9bex3] div.contentList li > .colAction > span > small,
div#contentManage[b-3zrub9bex3] dialog ul.form > li > p span > small {
font-size: 0.8em;
color: var(--txLight);
}
/* 사용자 정보 창(신고 상세에서): 기본 최소 너비(18em)보다 75% 넓게 */
div#contentManage[b-3zrub9bex3] dialog#reportUserModal {
width: 31.5em;
}
/* /Views/Manager/Content/Board.cshtml.rz.scp.css */
@charset "UTF-8";
/* 관리자 게시판 설정 전용 스타일 — 사용자 화면과 같은 Manage 파샬뷰(article.contentManage)를 관리자 화면 톤에 맞춘다.
제목줄은 관리자 레이아웃 제목과 겹치므로 숨기고, 탭 본문만 스크롤되며 저장 버튼 줄은 다른 관리자 화면(.pageFooter)처럼 화면 아래에 붙는다. */
div.boardSettings[b-q2nwvzil2o] article.contentManage {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 1em;
}
div.boardSettings[b-q2nwvzil2o] article.contentManage > header {
display: none;
}
div.boardSettings[b-q2nwvzil2o] article.contentManage > section.tabBox {
min-height: 0;
}
div.boardSettings[b-q2nwvzil2o] article.contentManage > section.tabBox > section {
overflow-y: auto;
}
div.boardSettings[b-q2nwvzil2o] article.contentManage > footer {
flex: 0 0 auto;
justify-content: flex-end;
padding: 0.5em;
border: 1px solid var(--aLight);
border-radius: var(--roundBox);
background-color: var(--aLow);
}
div.boardSettings[b-q2nwvzil2o] article.contentManage > footer > a, div.boardSettings[b-q2nwvzil2o] article.contentManage > footer > button {
font-size: 0.85em;
}
/* /Views/Manager/Content/FileRule.cshtml.rz.scp.css */
@charset "UTF-8";
/* 파일 규칙 관리 페이지 전용 스타일 */
div.fileRuleBox[b-neuundrh6h] {
display: flex;
flex-direction: column;
gap: 1em;
}
div.fileRuleBox > section.card[b-neuundrh6h] {
padding: 0;
overflow: hidden;
}
div.fileRuleBox > section.card > header[b-neuundrh6h] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.6em 0.8em;
border-bottom: 1px solid var(--lineColor);
}
div.fileRuleBox > section.card > header > strong[b-neuundrh6h] {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1.05em;
color: var(--txColor);
}
div.fileRuleBox > section.card > header > strong > i.fi[b-neuundrh6h] {
font-size: 1.3em;
color: var(--main);
}
div.fileRuleBox > section.card > header .inputGroup[b-neuundrh6h] {
width: 14em;
}
div.fileRuleBox > section.card > div.dataList[b-neuundrh6h] {
overflow-y: auto;
}
div.fileRuleBox > section.card > div.dataList > header[b-neuundrh6h] {
background-color: var(--aLow);
}
div.fileRuleBox > section.card > div.dataList > header > span[b-neuundrh6h] {
font-weight: 600;
color: var(--txColor);
opacity: 0.9;
}
div.fileRuleBox > section.card > div.dataList > header[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li {
display: flex;
align-items: center;
padding: 0.5em 0.8em;
gap: 0.6em;
}
div.fileRuleBox > section.card > div.dataList > header > .colName[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colName {
flex: 0 0 12em;
display: flex;
align-items: center;
gap: 0.6em;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.fileRuleBox > section.card > div.dataList > header > .colWeb[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colWeb {
flex: 1 1 auto;
font-family: monospace;
font-size: 0.9em;
color: var(--txSub);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.fileRuleBox > section.card > div.dataList > header > .colExt[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colExt {
flex: 0 0 12em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.fileRuleBox > section.card > div.dataList > header > .colCount[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colCount {
flex: 0 0 5em;
justify-content: center;
}
div.fileRuleBox > section.card > div.dataList > header > .colSize[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colSize {
flex: 0 0 6em;
justify-content: center;
}
div.fileRuleBox > section.card > div.dataList > header > .colTotal[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colTotal {
flex: 0 0 7em;
justify-content: center;
}
div.fileRuleBox > section.card > div.dataList > header > .colDate[b-neuundrh6h], div.fileRuleBox > section.card > div.dataList > ul[b-neuundrh6h] > li > .colDate {
flex: 0 0 8em;
justify-content: center;
color: var(--txSub);
}
div.fileRuleBox > section.card > div.dataList > ul > li[b-neuundrh6h] {
border-bottom: 1px solid var(--aLow);
cursor: pointer;
transition: background-color 0.15s ease;
}
div.fileRuleBox > section.card > div.dataList > ul > li:hover[b-neuundrh6h] {
background-color: var(--aLow);
}
div.fileRuleBox > section.card > footer[b-neuundrh6h] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 0.8em;
border-top: 1px solid var(--lineColor);
}
/* 파일 규칙 등록/수정 모달 */
dialog#fileRuleModal[b-neuundrh6h] {
width: 28em;
}
dialog#fileRuleModal[b-neuundrh6h] > header {
color: var(--main);
}
dialog#fileRuleModal[b-neuundrh6h] > header > span.badge {
background-color: var(--danger);
color: white;
}
dialog#fileRuleModal[b-neuundrh6h] .tabBox > section {
height: 21em;
overflow-y: auto;
padding: 0;
}
dialog#fileRuleModal[b-neuundrh6h] .tabBox ul.form {
padding: 0 0.5em;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess {
display: none;
flex-direction: column;
gap: 0.5em;
padding: 0;
height: 100%;
overflow-y: auto;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess.active {
display: flex;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessToolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 0.5em;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessToolbar > button {
padding: 0.4em 0.6em;
height: auto;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox {
flex: 1 1 auto;
border: 1px solid var(--lineColor);
border-radius: var(--roundSm, 0.4em);
overflow-y: auto;
/* 빈 목록: li.empty 를 박스 가운데에 */
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul:has(> li.empty) {
height: 100%;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul {
margin: 0;
padding: 0.5em;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
padding: 0.5em;
border-bottom: 1px dashed var(--aColor);
transition: background-color 0.15s ease;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li:last-child {
border-bottom: none;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .modeBox {
flex: 0 0 5em;
padding: 0;
font-weight: bold;
line-height: 1em;
text-transform: uppercase;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .modeBox.upload {
color: var(--primary);
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .modeBox.download {
color: var(--warning);
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .targetBox {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.6em;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .targetBox > .badge {
font-size: 0.78em;
padding: 0.2em 0.5em;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .targetBox > .name {
font-size: 0.95em;
color: var(--txColor);
font-weight: 500;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .delRuleBtn {
width: 1.8em;
height: 1.8em;
min-width: 1.8em;
min-height: 1.8em;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--roundSm, 0.3em);
background-color: var(--danger);
color: white;
border: none;
cursor: pointer;
padding: 0;
font-size: 0.85em;
transition: opacity 0.15s ease, transform 0.1s ease;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .delRuleBtn:hover {
opacity: 0.85;
}
dialog#fileRuleModal[b-neuundrh6h] #fileRuleTabAccess > .accessRuleBox > ul > li > .delRuleBtn:active {
transform: scale(0.95);
}
dialog#fileRuleModal[b-neuundrh6h] > footer > button.danger {
margin-right: auto;
}
/* UpFileAccessRule 편집 서브 모달 */
dialog#fileAccessRuleModal[b-neuundrh6h] {
width: 28em;
}
dialog#fileAccessRuleModal > header[b-neuundrh6h] {
color: var(--main);
}
dialog#fileAccessRuleModal > section[b-neuundrh6h] {
padding: 0.8em 0.5em;
}
/* /Views/Manager/Content/Page.cshtml.rz.scp.css */
@charset "UTF-8";
/* 관리자 페이지 컨텐츠 편집 전용 스타일 — 사용자 화면(/view/edit)과 같은 폼 파샬뷰(article.contentEdit)를 관리자 화면 톤에 맞춘다.
폼이 남는 높이를 채우고(에디터가 늘어남), 취소·저장 줄은 다른 관리자 화면(.pageFooter)처럼 화면 아래에 붙는다. */
div.pageEdit[b-gi009vxni6] article.contentEdit {
flex: 1 1 auto;
min-height: 0;
gap: 1em;
}
div.pageEdit[b-gi009vxni6] article.contentEdit > footer {
flex: 0 0 auto;
justify-content: flex-end;
gap: 0.6em;
padding: 0.5em;
border: 1px solid var(--aLight);
border-radius: var(--roundBox);
background-color: var(--aLow);
}
div.pageEdit[b-gi009vxni6] article.contentEdit > footer > a, div.pageEdit[b-gi009vxni6] article.contentEdit > footer > button {
font-size: 0.85em;
}
/* /Views/Manager/External/Ai.cshtml.rz.scp.css */
@charset "UTF-8";
/* 외부 서비스 > AI API 전용 스타일. 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.aiBox > article > section.card[b-0cvt7oa6di] {
padding: 0;
overflow: hidden;
}
div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] {
padding: 0.5em;
overflow-y: auto;
}
div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > header > .colName, div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > ul > li > .colName {
flex: 1 1 auto;
min-width: 0;
}
div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > header > .colFormat, div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > ul > li > .colFormat {
flex: 0 0 7em;
justify-content: center;
white-space: nowrap;
}
div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > header > .colModel, div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > ul > li > .colModel {
flex: 0 0 16em;
min-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > header > .colFlag, div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > ul > li > .colFlag {
flex: 0 0 6em;
justify-content: center;
}
div.aiBox > article > section.card > div.dataList[b-0cvt7oa6di] > ul > li {
cursor: pointer;
}
/* 탭(접속 정보·옵션) 내용 높이가 달라 탭을 바꿀 때 창 크기가 흔들리지 않도록 너비와 탭 본문 높이를 고정(넘치면 안에서 스크롤). */
dialog#aiModal[b-0cvt7oa6di] {
width: 40em;
}
dialog#aiModal .tabBox > section[b-0cvt7oa6di] {
height: 22em;
overflow-y: auto;
}
dialog#aiModal > header[b-0cvt7oa6di] {
color: var(--main);
}
dialog#aiModal[b-0cvt7oa6di] {
/* 하단: 왼쪽에 사용·기본 체크, 오른쪽 끝에 (수정이면 삭제)·취소·저장 */
}
dialog#aiModal > footer > label.check[b-0cvt7oa6di] {
width: auto;
}
dialog#aiModal > footer > label.check:last-of-type[b-0cvt7oa6di] {
margin-right: auto;
}
/* /Views/Manager/External/Token.cshtml.rz.scp.css */
@charset "UTF-8";
/* 외부 서비스 > 접근 토큰 전용 스타일. 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.tokenBox > article > section.card[b-niptgspji2] {
padding: 0;
overflow: hidden;
min-height: 12em;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] {
padding: 0.5em;
overflow-y: auto;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > header > .colName, div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > ul > li > .colName {
flex: 1 1 auto;
min-width: 0;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > header > .colUser, div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > ul > li > .colUser {
flex: 0 0 9em;
overflow: hidden;
white-space: nowrap;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > header > .colState, div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > ul > li > .colState {
flex: 0 0 6em;
justify-content: center;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > header > .colDate, div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > ul > li > .colDate {
flex: 0 0 9em;
font-size: 0.85em;
justify-content: center;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > header > .colAction, div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > ul > li > .colAction {
flex: 0 0 4em;
justify-content: flex-end;
}
div.tokenBox > article > section.card > div.dataList[b-niptgspji2] > ul > li[data-invalid] {
color: var(--txLight);
}
dialog#tokenModal[b-niptgspji2] {
width: 32em;
}
dialog#tokenModal > header[b-niptgspji2] {
color: var(--main);
}
/* /Views/Manager/Index.cshtml.rz.scp.css */
@charset "UTF-8";
/* 관리자 대시보드: 인사 / 첫 줄(오늘 방문 · 4칸 지표 · 14일 방문 막대) / 둘째 줄(회원 현황·최근 가입 · 최근 활동 표) */
.dashboard[b-zc492lcfs0] {
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 1.2em;
}
.dashboard .card[b-zc492lcfs0] {
padding: 1.2em;
gap: 0.6em;
border: 1px solid var(--lineColor);
border-radius: 1em;
}
.dashboard .card > header[b-zc492lcfs0] {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em;
font-size: 1em;
white-space: normal;
}
.dashboard .card > header > small[b-zc492lcfs0] {
flex: 1 0 100%;
}
.dashboard .card > header > i.fi[b-zc492lcfs0] {
font-size: 1.3em;
color: var(--txLight);
}
.dashboard .card > strong[b-zc492lcfs0] {
font-size: 2.2em;
line-height: 1.1em;
color: var(--txColor);
}
.dashboard > header > h2[b-zc492lcfs0] {
margin: 0;
font-size: 1.8em;
color: var(--txColor);
}
.dashboard > header > p[b-zc492lcfs0] {
margin: 0.3em 0 0;
color: var(--txLight);
}
.dashboard[b-zc492lcfs0] {
/* 첫 줄: 오늘 방문 / 4칸 지표 / 방문 막대 */
}
.dashboard > section:first-of-type[b-zc492lcfs0] {
display: grid;
grid-template-columns: 1fr 1.2fr 1.3fr;
gap: 1em;
/* 오늘 방문: 큰 수 · 어제 대비 · 어제/이번 달/올해 작은 칸 */
}
.dashboard > section:first-of-type > article:first-child > p[b-zc492lcfs0] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4em;
margin: 0;
font-size: 0.85em;
color: var(--txLight);
}
.dashboard > section:first-of-type > article:first-child > ul[b-zc492lcfs0] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
margin: auto 0 0;
padding: 0;
list-style: none;
}
.dashboard > section:first-of-type > article:first-child > ul > li[b-zc492lcfs0] {
display: flex;
flex-direction: column;
gap: 0.2em;
padding: 0.7em;
border-radius: 0.7em;
background: var(--main1);
}
.dashboard > section:first-of-type > article:first-child > ul > li > small[b-zc492lcfs0] {
font-size: 0.75em;
color: var(--txLight);
}
.dashboard > section:first-of-type > article:first-child > ul > li > b[b-zc492lcfs0] {
font-size: 1.2em;
color: var(--txColor);
}
.dashboard > section:first-of-type > article:first-child > ul > li > span[b-zc492lcfs0] {
font-size: 0.7em;
color: var(--txLight);
}
.dashboard > section:first-of-type[b-zc492lcfs0] {
/* 4칸 지표: 첫 칸은 메인색 강조 */
}
.dashboard > section:first-of-type > article:nth-child(2)[b-zc492lcfs0] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
}
.dashboard > section:first-of-type > article:nth-child(2) > .card[b-zc492lcfs0] {
justify-content: space-between;
background: var(--main1);
border-color: transparent;
}
.dashboard > section:first-of-type > article:nth-child(2) > .card > span[b-zc492lcfs0] {
flex: 0 0 auto;
font-size: 0.8em;
color: var(--txLight);
}
.dashboard > section:first-of-type > article:nth-child(2) > .card[b-zc492lcfs0] {
/* 링크 칸(신고 → 신고 목록): 올리면 테두리 */
}
.dashboard > section:first-of-type > article:nth-child(2) > .card[href][b-zc492lcfs0] {
text-decoration: none;
}
.dashboard > section:first-of-type > article:nth-child(2) > .card[href]:hover[b-zc492lcfs0] {
border-color: var(--main);
}
.dashboard > section:first-of-type > article:nth-child(2) > .card:first-child[b-zc492lcfs0] {
background: var(--main);
}
.dashboard > section:first-of-type > article:nth-child(2) > .card:first-child > header[b-zc492lcfs0], .dashboard > section:first-of-type > article:nth-child(2) > .card:first-child > header > i.fi[b-zc492lcfs0], .dashboard > section:first-of-type > article:nth-child(2) > .card:first-child > strong[b-zc492lcfs0], .dashboard > section:first-of-type > article:nth-child(2) > .card:first-child > span[b-zc492lcfs0] {
color: white;
}
.dashboard > section:first-of-type[b-zc492lcfs0] {
/* 최근 14일 방문 막대: 막대 = 페이지 요청, 아래 짙은 부분 = 방문자 */
}
.dashboard > section:first-of-type > article:last-child > figure[b-zc492lcfs0] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.6em;
margin: 0;
padding: 0.8em;
border-radius: 0.7em;
background: var(--main1);
}
.dashboard > section:first-of-type > article:last-child > figure > figcaption[b-zc492lcfs0] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.4em;
font-size: 0.75em;
color: var(--txLight);
}
.dashboard > section:first-of-type > article:last-child > figure > figcaption > i[b-zc492lcfs0] {
width: 0.8em;
height: 0.8em;
border-radius: 0.2em;
background: var(--main);
}
.dashboard > section:first-of-type > article:last-child > figure > figcaption > i:last-of-type[b-zc492lcfs0] {
margin-left: 0.6em;
background: var(--point);
}
.dashboard > section:first-of-type > article:last-child > figure > ol[b-zc492lcfs0] {
flex: 1 1 auto;
display: flex;
align-items: stretch;
gap: 0.3em;
min-height: 10em;
margin: 0;
padding: 0;
list-style: none;
}
.dashboard > section:first-of-type > article:last-child > figure > ol > li[b-zc492lcfs0] {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 0.3em;
}
.dashboard > section:first-of-type > article:last-child > figure > ol > li > span[b-zc492lcfs0] {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
max-width: 1.6em;
min-height: 0.2em;
border-radius: 0.4em;
overflow: hidden;
background: var(--point);
}
.dashboard > section:first-of-type > article:last-child > figure > ol > li > span > i[b-zc492lcfs0] {
display: block;
background: var(--main);
}
.dashboard > section:first-of-type > article:last-child > figure > ol > li > small[b-zc492lcfs0] {
font-size: 0.7em;
color: var(--txLight);
}
.dashboard[b-zc492lcfs0] {
/* 둘째 줄: 회원 현황·최근 가입 / 최근 활동 */
}
.dashboard > section:last-of-type[b-zc492lcfs0] {
display: grid;
grid-template-columns: 1fr 2.5fr;
gap: 1em;
}
.dashboard > section:last-of-type > aside[b-zc492lcfs0] {
display: flex;
flex-direction: column;
gap: 1em;
}
.dashboard > section:last-of-type > aside > article > label[b-zc492lcfs0] {
display: flex;
justify-content: space-between;
font-size: 0.85em;
color: var(--txLight);
}
.dashboard > section:last-of-type > aside > article > label > b[b-zc492lcfs0] {
color: var(--txColor);
}
.dashboard > section:last-of-type > aside > article > meter[b-zc492lcfs0] {
width: 100%;
height: 0.8em;
}
.dashboard > section:last-of-type > aside > article > ul[b-zc492lcfs0] {
display: flex;
flex-direction: column;
gap: 0.6em;
margin: 0;
padding: 0;
list-style: none;
}
.dashboard > section:last-of-type > aside > article > ul > li[b-zc492lcfs0] {
display: flex;
align-items: center;
gap: 0.6em;
}
.dashboard > section:last-of-type > aside > article > ul > li > i[b-zc492lcfs0] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
overflow: hidden;
color: var(--deco);
background: var(--main1);
}
.dashboard > section:last-of-type > aside > article > ul > li > i > img[b-zc492lcfs0] {
width: 100%;
height: 100%;
object-fit: cover;
}
.dashboard > section:last-of-type > aside > article > ul > li > span[b-zc492lcfs0] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
}
.dashboard > section:last-of-type > aside > article > ul > li > span > b[b-zc492lcfs0], .dashboard > section:last-of-type > aside > article > ul > li > span > small[b-zc492lcfs0] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard > section:last-of-type > aside > article > ul > li > span > small[b-zc492lcfs0] {
font-size: 0.75em;
color: var(--txLight);
}
.dashboard > section:last-of-type > aside > article > ul > li > time[b-zc492lcfs0] {
font-size: 0.75em;
color: var(--txLight);
}
.dashboard > section:last-of-type > article[b-zc492lcfs0] {
overflow-x: auto;
}
.dashboard > section:last-of-type > article > table[b-zc492lcfs0] {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.dashboard > section:last-of-type > article > table th[b-zc492lcfs0] {
padding: 0.6em;
text-align: left;
font-size: 0.85em;
font-weight: normal;
color: var(--txLight);
border-bottom: 1px solid var(--lineColor);
}
.dashboard > section:last-of-type > article > table td[b-zc492lcfs0] {
padding: 0.7em 0.6em;
border-bottom: 1px solid var(--lineColor);
white-space: nowrap;
}
.dashboard > section:last-of-type > article > table td:nth-child(2)[b-zc492lcfs0] {
white-space: normal;
}
.dashboard > section:last-of-type > article > table td > a[b-zc492lcfs0] {
color: var(--txColor);
}
.dashboard > section:last-of-type > article > table td > a:hover[b-zc492lcfs0] {
color: var(--main);
}
.dashboard > section:last-of-type > article > table tr:last-child > td[b-zc492lcfs0] {
border-bottom: none;
}
/* 좁은 화면: 한 줄씩 */
@media (width <= 1100px) {
.dashboard > section:first-of-type[b-zc492lcfs0] {
grid-template-columns: 1fr 1fr;
}
.dashboard > section:first-of-type > article:last-child[b-zc492lcfs0] {
grid-column: 1/-1;
}
.dashboard > section:last-of-type[b-zc492lcfs0] {
grid-template-columns: 1fr;
}
}
@media (width <= 640px) {
.dashboard > section:first-of-type[b-zc492lcfs0] {
grid-template-columns: 1fr;
}
}
/* /Views/Manager/Service/List.cshtml.rz.scp.css */
@charset "UTF-8";
/* 관리자 > 서비스 전용 스타일. 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.serviceBox[b-fr2hb56ij0] {
font-size: 1rem;
}
div.serviceBox > section.card[b-fr2hb56ij0] {
padding: 0;
overflow: hidden;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] {
padding: 0.5em;
overflow-y: auto;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > header > .colName, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colName {
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
align-items: flex-start;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > header > .colEvents, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colEvents {
flex: 0 0 16em;
min-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > header > .colState, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > header > .colFlag, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colState, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colFlag {
flex: 0 0 6em;
justify-content: center;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > header > .colCount, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colCount {
flex: 0 0 5em;
justify-content: flex-end;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > header > .colDate, div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colDate {
flex: 0 0 10em;
justify-content: center;
white-space: nowrap;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li {
cursor: pointer;
/* 마지막 처리에 오류가 있으면 마지막 실행 시각을 경고색으로 (오류 문구는 title) */
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li > .colName > small {
max-width: 100%;
font-size: 0.85em;
color: var(--txLight);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.serviceBox > section.card > div.dataList[b-fr2hb56ij0] > ul > li[data-error] > .colDate {
color: var(--danger);
}
dialog#serviceModal[b-fr2hb56ij0] {
width: 36em;
/* 하단: 왼쪽에 활성 체크, 오른쪽 끝에 취소·저장 */
}
dialog#serviceModal > header[b-fr2hb56ij0] {
color: var(--main);
}
dialog#serviceModal > section > p[b-fr2hb56ij0] {
margin: 0 0 1em;
color: var(--txLight);
}
dialog#serviceModal > footer > label.check[b-fr2hb56ij0] {
width: auto;
margin-right: auto;
}
/* /Views/Manager/Service/Menu.cshtml.rz.scp.css */
@charset "UTF-8";
/* 시스템 설정 > 사이트 메뉴 전용 스타일.
좌측 메뉴 트리 / 우측 하위 메뉴 목록은 각각 독립된 .card 박스이며 내용이 넘치면 박스 안에서만 스크롤된다.
목록 행과 접근 권한 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.pageBox > div.flexRow[b-h48bpcvuzg] {
gap: 1em;
}
div.pageBox > div.flexRow > aside[b-h48bpcvuzg] {
flex: 0 0 18em;
overflow: hidden;
padding: 0.5em;
}
div.pageBox > div.flexRow > aside > div.treeBox[b-h48bpcvuzg] {
overflow-y: auto;
}
div.pageBox > div.flexRow > section[b-h48bpcvuzg] {
flex: 1 1 auto;
padding: 0;
overflow: hidden;
gap: 0;
}
div.pageBox > div.flexRow > section > header[b-h48bpcvuzg] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
div.pageBox > div.flexRow > section > header > strong[b-h48bpcvuzg] {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div.pageBox > div.flexRow > section > header > strong > i.fi[b-h48bpcvuzg] {
font-size: 1.4em;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] {
overflow-y: auto;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > header > .colName, div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colName {
flex: 0 0 24em; /* 표시명 + 키 · SYS 표시가 잘리지 않을 폭 */
display: flex;
align-items: center;
gap: 0.5em;
overflow: hidden;
white-space: nowrap;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > header > .colType, div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colType {
flex: 0 0 8em;
justify-content: center;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > header > .colAction, div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colAction {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.85em;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > header > .colFlag, div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colFlag {
flex: 0 0 5em;
justify-content: center;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > header > .colDate, div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colDate {
flex: 0 0 8em;
font-size: 0.85em;
justify-content: center;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li {
padding: 0.2em 0.5em;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li[draggable=true] {
cursor: grab;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colName {
cursor: pointer;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colName > i.fiReOrderDotsVert {
color: var(--txLight);
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colName > i:not(.fiReOrderDotsVert) {
font-size: 1.3em;
color: var(--main);
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colName > small {
color: var(--txLight);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
div.pageBox > div.flexRow > section > div[b-h48bpcvuzg] > ul > li > .colAction {
color: var(--txSub);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* /Views/Manager/Service/Popup.cshtml.rz.scp.css */
@charset "UTF-8";
/* 시스템 설정 > 팝업 전용 스타일. 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.popupBox > section.card[b-ku0q0ev4nk] {
padding: 0;
overflow: hidden;
gap: 0;
}
div.popupBox > section.card > header[b-ku0q0ev4nk] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
div.popupBox > section.card > header > strong[b-ku0q0ev4nk] {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div.popupBox > section.card > header > strong > i.fi[b-ku0q0ev4nk] {
font-size: 1.4em;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] {
overflow-y: auto;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colName, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colName {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colArea, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colArea {
flex: 0 0 7em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colPeriod, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colPeriod {
flex: 0 0 18em;
font-size: 0.85em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colTarget, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colTarget {
flex: 0 0 7em;
font-size: 0.85em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colSize, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colSize {
flex: 0 0 7em;
font-size: 0.85em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colFlag, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colFlag {
flex: 0 0 5em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colDate, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colDate {
flex: 0 0 8em;
font-size: 0.85em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > header > .colPreview, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colPreview {
flex: 0 0 3em;
justify-content: center;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li {
padding: 0.2em 0.5em;
cursor: pointer;
}
div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colPeriod, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colTarget, div.popupBox > section.card > div.dataList[b-ku0q0ev4nk] > ul > li > .colSize {
color: var(--txSub);
}
div.popupBox > section.card > footer[b-ku0q0ev4nk] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 0.8em;
border-top: 1px solid var(--lineColor);
}
/* 팝업 등록/수정 모달: 높이는 내용(입력 항목 + 에디터 38em, 스크립트에서 지정)만큼 */
dialog#popupModal[b-ku0q0ev4nk] {
width: 48em;
}
dialog#popupModal > header[b-ku0q0ev4nk] {
color: var(--main);
}
dialog#popupModal[b-ku0q0ev4nk] {
/* 하단: 왼쪽 끝에 활성 체크(자리 고정), 오른쪽 끝에 취소·(수정이면 삭제)·저장 */
}
dialog#popupModal > footer > label.check[b-ku0q0ev4nk] {
width: auto;
margin-right: auto;
}
/* /Views/Manager/System/Config.cshtml.rz.scp.css */
@charset "UTF-8";
/* 시스템 설정 > 설정 관리 — 컨텐츠 관리 목록 카드와 같은 모양(제목·검색 한 줄, 아래 목록, 바닥 목록 크기·페이저). 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.configBox > section.card[b-6a376uczmd] {
padding: 0;
overflow: hidden;
gap: 0;
}
div.configBox > section.card > header[b-6a376uczmd] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
div.configBox > section.card > header > strong[b-6a376uczmd] {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div.configBox > section.card > header > strong > i.fi[b-6a376uczmd] {
font-size: 1.4em;
}
div.configBox > section.card > header .inputGroup[b-6a376uczmd] {
width: 14em;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] {
overflow-y: auto;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] > header > .colCategory, div.configBox > section.card > div.dataList[b-6a376uczmd] > ul > li > .colCategory {
flex: 0 0 8em;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] > header > .colKey, div.configBox > section.card > div.dataList[b-6a376uczmd] > ul > li > .colKey {
flex: 0 0 14em;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] > header > .colValue, div.configBox > section.card > div.dataList[b-6a376uczmd] > ul > li > .colValue {
flex: 1 1 auto;
min-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] > header > .colFlag, div.configBox > section.card > div.dataList[b-6a376uczmd] > ul > li > .colFlag {
flex: 0 0 6em;
justify-content: center;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] > header > .colDate, div.configBox > section.card > div.dataList[b-6a376uczmd] > ul > li > .colDate {
flex: 0 0 9em;
justify-content: center;
font-size: 0.85em;
white-space: nowrap;
}
div.configBox > section.card > div.dataList[b-6a376uczmd] > ul > li {
padding: 0.2em 0.5em;
cursor: pointer;
}
div.configBox > section.card > footer[b-6a376uczmd] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 0.8em;
border-top: 1px solid var(--lineColor);
}
dialog#configModal[b-6a376uczmd] {
width: 44em;
}
dialog#configModal > header[b-6a376uczmd] {
color: var(--main);
}
dialog#configModal textarea[b-6a376uczmd] {
width: 100%;
}
dialog#configModal textarea[name=value][b-6a376uczmd] {
height: 21em;
resize: none;
font-family: monospace;
font-size: 0.9em;
}
dialog#configModal > footer > label.check[b-6a376uczmd] {
width: auto;
margin-right: auto;
}
dialog#configModal .tabBox > section[b-6a376uczmd] {
height: 22em;
overflow-y: auto;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Manager/System/Config.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;AACA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA%22%7D */
/* /Views/Manager/System/Language.cshtml.rz.scp.css */
@charset "UTF-8";
/* 시스템 설정 > 다국어 관리 — 컨텐츠 관리 목록 카드와 같은 모양(제목·검색 한 줄, 아래 목록, 바닥 목록 크기·페이저). 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.languageBox > section.card[b-wl946s1awh] {
padding: 0;
overflow: hidden;
gap: 0;
}
div.languageBox > section.card > header[b-wl946s1awh] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.5em;
}
div.languageBox > section.card > header > strong[b-wl946s1awh] {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div.languageBox > section.card > header > strong > i.fi[b-wl946s1awh] {
font-size: 1.4em;
}
div.languageBox > section.card > header .inputGroup[b-wl946s1awh] {
width: 14em;
}
div.languageBox > section.card > div.dataList[b-wl946s1awh] {
overflow-y: auto;
}
div.languageBox > section.card > div.dataList[b-wl946s1awh] > header > .colCategory, div.languageBox > section.card > div.dataList[b-wl946s1awh] > ul > li > .colCategory {
flex: 0 0 8em;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.languageBox > section.card > div.dataList[b-wl946s1awh] > header > .colKey, div.languageBox > section.card > div.dataList[b-wl946s1awh] > ul > li > .colKey {
flex: 0 0 14em;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.languageBox > section.card > div.dataList[b-wl946s1awh] > header > .colValue, div.languageBox > section.card > div.dataList[b-wl946s1awh] > ul > li > .colValue {
flex: 1 1 auto;
min-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.languageBox > section.card > div.dataList[b-wl946s1awh] > header > .colDate, div.languageBox > section.card > div.dataList[b-wl946s1awh] > ul > li > .colDate {
flex: 0 0 9em;
justify-content: center;
font-size: 0.85em;
white-space: nowrap;
}
div.languageBox > section.card > div.dataList[b-wl946s1awh] > ul > li {
padding: 0.2em 0.5em;
cursor: pointer;
}
div.languageBox > section.card > footer[b-wl946s1awh] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 0.8em;
border-top: 1px solid var(--lineColor);
}
dialog#languageModal[b-wl946s1awh] {
width: 44em;
}
dialog#languageModal > header[b-wl946s1awh] {
color: var(--main);
}
dialog#languageModal textarea[b-wl946s1awh] {
width: 100%;
}
/* /Views/Manager/System/Log.cshtml.rz.scp.css */
@charset "UTF-8";
/* 시스템 설정 > 로그 — 설정 관리 목록 카드와 같은 모양(제목·조건 한 줄, 아래 목록, 바닥 읽은 위치·더 보기). 목록 행은 스크립트로 만들어지므로 ::deep 으로 스타일을 건다. */
div.logBox > section.card[b-cdbwrcsaqo] {
padding: 0;
overflow: hidden;
gap: 0;
}
div.logBox > section.card > header[b-cdbwrcsaqo] {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em 1em;
padding: 0.5em;
}
div.logBox > section.card > header > strong[b-cdbwrcsaqo] {
display: flex;
align-items: center;
padding: 0 0.5em;
gap: 0.4em;
font-size: 1.02em;
color: var(--txColor);
}
div.logBox > section.card > header > strong > i.fi[b-cdbwrcsaqo] {
font-size: 1.4em;
}
div.logBox > section.card > header > div[b-cdbwrcsaqo] {
flex-wrap: wrap;
}
div.logBox > section.card > header > div > select[b-cdbwrcsaqo], div.logBox > section.card > header > div > input[b-cdbwrcsaqo] {
width: auto;
font-size: 0.85em;
}
div.logBox > section.card > header > div > select[name=kind][b-cdbwrcsaqo] {
max-width: 18em;
}
div.logBox > section.card > header > div > .inputGroup[b-cdbwrcsaqo] {
width: 12em;
}
div.logBox > section.card > div.dataList[b-cdbwrcsaqo] {
overflow-y: auto;
}
div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > header > .colTime, div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > ul > li > .colTime {
flex: 0 0 7.5em;
font-family: monospace;
font-size: 0.85em;
white-space: nowrap;
}
div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > header > .colLevel, div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > ul > li > .colLevel {
flex: 0 0 7em;
justify-content: center;
}
div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > header > .colSummary, div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > ul > li > .colSummary {
flex: 1 1 auto;
min-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.9em;
}
div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > header > .colDuration, div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > ul > li > .colDuration {
flex: 0 0 5em;
justify-content: flex-end;
font-size: 0.85em;
white-space: nowrap;
}
div.logBox > section.card > div.dataList[b-cdbwrcsaqo] > ul > li {
padding: 0.2em 0.5em;
cursor: pointer;
}
div.logBox > section.card > footer[b-cdbwrcsaqo] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 0.8em;
border-top: 1px solid var(--lineColor);
}
div.logBox > section.card > footer > span[b-cdbwrcsaqo] {
color: var(--txLight);
font-size: 0.85em;
}
dialog#logModal[b-cdbwrcsaqo] {
width: 52em;
}
dialog#logModal > header[b-cdbwrcsaqo] {
color: var(--main);
}
dialog#logModal > section > pre[b-cdbwrcsaqo] {
margin: 0;
max-height: 60vh;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
font-size: 0.85em;
}
/* 로그 제외 규칙 모달: 줄마다 카테고리 · 수준 · 포함 글자 · 지우기 */
dialog#logExcludeModal[b-cdbwrcsaqo] {
width: 52em;
}
dialog#logExcludeModal > header[b-cdbwrcsaqo] {
color: var(--main);
}
dialog#logExcludeModal > section > p[b-cdbwrcsaqo] {
margin: 0 0 0.8em;
color: var(--txLight);
font-size: 0.9em;
}
dialog#logExcludeModal > section > ul[b-cdbwrcsaqo] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5em;
max-height: 55vh;
overflow: auto;
}
dialog#logExcludeModal > section > ul > li[b-cdbwrcsaqo] {
display: grid;
grid-template-columns: 2fr 9em 1.5fr auto;
gap: 0.5em;
align-items: center;
}
dialog#logExcludeModal > section > ul > li > span[b-cdbwrcsaqo] {
cursor: pointer;
color: var(--danger5);
}
/* /Views/Search/Index.cshtml.rz.scp.css */
@charset "UTF-8";
/* 통합 검색 페이지 — 검색 입력, 구분 탭, 구분별 결과 목록, 페이지 이동 */
div.searchPage[b-n3n07tolnn] {
font-size: 1rem;
width: 100%;
flex: 1 0 auto; /* 창 높이 맞춤(fit) 레이아웃의 main 높이를 채움 */
padding: 1em 1em 3em;
display: flex;
flex-direction: column;
gap: 1.5em;
/* 제목·검색바·구분 탭은 가운데 (FAQ 목록 머리와 같은 모양). form 은 태그 헬퍼가 처리해 범위 특성(b-…)이 붙지 않으므로 ::deep */
}
div.searchPage[b-n3n07tolnn] > form {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
padding-top: 1em;
}
div.searchPage[b-n3n07tolnn] > form > h2 {
margin: 0;
font-size: 2em;
font-weight: bold;
line-height: 1.3;
}
div.searchPage[b-n3n07tolnn] > form > .inputGroup {
width: min(26em, 100%);
}
div.searchPage > nav[b-n3n07tolnn] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4em 1.4em;
}
div.searchPage > nav > a[b-n3n07tolnn] {
padding: 0.4em 0.1em;
border-bottom: 3px solid transparent;
color: var(--txLight);
font-size: 1.1em;
text-decoration: none;
transition: color 0.15s;
}
div.searchPage > nav > a > b[b-n3n07tolnn] {
margin-left: 0.3em;
font-size: 0.8em;
}
div.searchPage > nav > a:hover[b-n3n07tolnn] {
color: var(--txColor);
}
div.searchPage > nav > a.active[b-n3n07tolnn] {
border-bottom-color: var(--primary);
color: var(--txColor);
font-weight: bold;
}
div.searchPage[b-n3n07tolnn] {
/* 검색 전 안내: 옅은 원 안의 큰 검색 아이콘, 안내 문구, 최근 검색어 칩 */
}
div.searchPage > article[b-n3n07tolnn] {
flex: 1 1 auto; /* 탭 아래 남은 높이를 채우고 그 가운데에 안내 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6em;
padding: 1em 1em 17em; /* 가운데보다 8em 위 (아래 여백 16em 추가) */
text-align: center;
}
div.searchPage > article > span[b-n3n07tolnn] {
display: flex;
align-items: center;
justify-content: center;
width: 5.6em;
height: 5.6em;
border-radius: 50%;
background-color: var(--main1);
}
div.searchPage > article > span > i[b-n3n07tolnn] {
color: var(--main);
font-size: 2.6em;
}
div.searchPage > article > h3[b-n3n07tolnn] {
margin: 0.4em 0 0;
font-size: 1.3em;
}
div.searchPage > article > p[b-n3n07tolnn] {
margin: 0;
color: var(--txLight);
}
div.searchPage > article > footer[b-n3n07tolnn] {
width: min(40em, 100%);
margin-top: 1.5em;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.6em;
text-align: left;
}
div.searchPage > article > footer[hidden][b-n3n07tolnn] {
display: none;
}
div.searchPage > article > footer > header[b-n3n07tolnn] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9em;
color: var(--txLight);
}
div.searchPage > article > footer > div[b-n3n07tolnn] {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.4em;
}
div.searchPage > article > footer > div[b-n3n07tolnn] > a {
padding: 0.3em 0.9em;
border: 1px solid var(--lineColor);
border-radius: var(--roundBtn);
color: var(--txColor);
font-size: 0.9em;
text-decoration: none;
}
div.searchPage > article > footer > div[b-n3n07tolnn] > a:hover {
border-color: var(--primary);
color: var(--primary);
}
div.searchPage > p[b-n3n07tolnn] {
padding: 3em 0;
text-align: center;
color: var(--txLight);
}
div.searchPage > section[b-n3n07tolnn] {
display: flex;
flex-direction: column;
gap: 0.5em;
}
div.searchPage > section > header[b-n3n07tolnn] {
display: flex;
align-items: center;
justify-content: space-between;
}
div.searchPage > section > header > h3[b-n3n07tolnn] {
margin: 0;
font-size: 1.15em;
}
div.searchPage > section > header > h3 > small[b-n3n07tolnn] {
margin-left: 0.3em;
color: var(--txLight);
font-weight: normal;
}
div.searchPage > section > header > a[b-n3n07tolnn] {
font-size: 0.9em;
color: var(--txLight);
text-decoration: none;
}
div.searchPage > section > ul:not(.pager)[b-n3n07tolnn] {
list-style: none;
margin: 0;
padding: 0;
}
div.searchPage > section > ul:not(.pager) > li[b-n3n07tolnn] {
padding: 0.9em 0;
border-bottom: 1px solid var(--lineColor);
display: flex;
flex-direction: column;
gap: 0.3em;
}
div.searchPage > section > ul:not(.pager) > li > a[b-n3n07tolnn] {
font-size: 1.05em;
font-weight: 600;
color: var(--txColor);
text-decoration: none;
}
div.searchPage > section > ul:not(.pager) > li > a:hover[b-n3n07tolnn] {
text-decoration: underline;
}
div.searchPage > section > ul:not(.pager) > li > div[b-n3n07tolnn] {
display: flex;
gap: 0.8em;
font-size: 0.8em;
color: var(--txLight);
}
div.searchPage > section > ul:not(.pager) > li > div > span[b-n3n07tolnn] {
color: var(--main);
}
div.searchPage > section > ul:not(.pager) > li > p[b-n3n07tolnn] {
margin: 0;
font-size: 0.9em;
color: var(--txLight);
line-height: 1.5;
word-break: break-all;
}
div.searchPage > section > ul:not(.pager) > li mark[b-n3n07tolnn] {
background-color: var(--point2);
color: inherit;
padding: 0 0.1em;
}
div.searchPage > section > ul.pager[b-n3n07tolnn] {
justify-content: center;
margin-top: 1em;
}
div.searchPage > section > ul.pager > li > a[b-n3n07tolnn] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
/* /Views/Shared/_AdminLayout.cshtml.rz.scp.css */
@charset "UTF-8";
div#app.adminLayout[b-2n3dqf7irc] {
--sideMaxWidth: 15em;
--sideMinWidth: 3em;
font-size: 1rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
min-height: 100vh;
}
div#app.adminLayout > aside[b-2n3dqf7irc] {
flex: 0 0 var(--sideMinWidth);
width: var(--sideMinWidth);
min-width: var(--sideMinWidth);
overflow: hidden;
background-color: var(--main);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
color: white;
}
div#app.adminLayout > aside > header[b-2n3dqf7irc] {
flex: 0 0 var(--sideMinWidth);
height: var(--sideMinWidth);
background-color: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
div#app.adminLayout > aside > header > *[b-2n3dqf7irc] {
display: flex;
align-items: center;
}
div#app.adminLayout > aside > header > div[b-2n3dqf7irc] {
flex: 0 0 var(--sideMinWidth);
width: var(--sideMinWidth);
height: var(--sideMinWidth);
justify-content: center;
cursor: pointer;
}
div#app.adminLayout > aside > header > div > svg.ham[b-2n3dqf7irc] {
transform: translateZ(0);
will-change: transform;
-webkit-tap-highlight-color: transparent;
transition: transform 200ms;
width: 100%;
height: 100%;
padding: 0.1em;
shape-rendering: geometricPrecision;
}
div#app.adminLayout > aside > header > div > svg.ham > .hamLine[b-2n3dqf7irc] {
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: #fff;
stroke-width: 5.5;
stroke-linecap: round;
}
div#app.adminLayout > aside > header > div > svg.ham.hamRotate[b-2n3dqf7irc] {
transform: rotate(0);
}
div#app.adminLayout > aside > header > div > svg.ham.hamRotate .top[b-2n3dqf7irc], div#app.adminLayout > aside > header > div > svg.ham.hamRotate .middle[b-2n3dqf7irc], div#app.adminLayout > aside > header > div > svg.ham.hamRotate .bottom[b-2n3dqf7irc] {
stroke-dasharray: 40 82;
stroke-dashoffset: 0;
}
div#app.adminLayout > aside > header > span[b-2n3dqf7irc] {
flex: 1 1 auto;
font-weight: bold;
font-size: 1.1em;
line-height: 1em;
white-space: nowrap;
padding-left: 0.5em;
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul {
flex: 1 1 auto;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li {
height: var(--sideMinWidth);
min-height: var(--sideMinWidth);
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
gap: 0.8em;
cursor: pointer;
transition: background-color 0.2s;
white-space: nowrap;
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li > header, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li > header {
width: var(--sideMinWidth);
min-width: var(--sideMinWidth);
height: var(--sideMinWidth);
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1);
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li > header > i, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li > header > i {
font-size: 1.4em;
margin: 0 !important;
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li > span, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li > span {
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.6);
transition: color 0.2s;
white-space: nowrap;
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li:hover, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li:hover > span, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li:hover > span {
color: white;
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li.active > header, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li.active > header {
background-color: var(--point);
}
div#app.adminLayout > aside[b-2n3dqf7irc] > nav > ul > li.active > span, div#app.adminLayout > aside[b-2n3dqf7irc] > footer > ul > li.active > span {
color: white;
}
div#app.adminLayout > aside > nav[b-2n3dqf7irc] {
flex: 1 1 auto;
overflow: hidden;
}
div#app.adminLayout > aside > footer[b-2n3dqf7irc] {
flex: 0 0 auto;
}
div#app.adminLayout.ready > aside[b-2n3dqf7irc] {
transition: flex 0.2s, width 0.2s;
}
div#app.adminLayout.opened > aside[b-2n3dqf7irc] {
flex: 0 0 var(--sideMaxWidth);
width: var(--sideMaxWidth);
}
div#app.adminLayout.opened > aside > header > div > svg.hamRotate[b-2n3dqf7irc] {
transform: rotate(45deg);
}
div#app.adminLayout.opened > aside > header > div > svg.hamRotate .top[b-2n3dqf7irc] {
stroke-dasharray: 17 82;
stroke-dashoffset: -62px;
}
div#app.adminLayout.opened > aside > header > div > svg.hamRotate .middle[b-2n3dqf7irc] {
stroke-dasharray: 40 111;
stroke-dashoffset: 23px;
}
div#app.adminLayout.opened > aside > header > div > svg.hamRotate .bottom[b-2n3dqf7irc] {
stroke-dasharray: 40 161;
stroke-dashoffset: -83px;
}
div#app.adminLayout > article[b-2n3dqf7irc] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow: auto;
}
div#app.adminLayout > article > header[b-2n3dqf7irc] {
flex: 0 0 var(--sideMinWidth);
height: var(--sideMinWidth);
background-color: var(--mainLight);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
div#app.adminLayout > article > header > div[b-2n3dqf7irc] {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 0 0.5em;
}
div#app.adminLayout > article > header > div.right[b-2n3dqf7irc] {
justify-content: flex-end;
gap: 1em;
padding-right: 1.5em;
/* 홈(새 탭) · 알림 · 메시지 아이콘 */
/* 알림·메시지 드롭다운: 최근 안 읽은 목록, 항목마다 확인 버튼 */
}
div#app.adminLayout > article > header > div.right > a[b-2n3dqf7irc], div#app.adminLayout > article > header > div.right > div > span[b-2n3dqf7irc] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0.2em;
color: rgba(255, 255, 255, 0.8);
font-size: 1.3em;
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
/* 안 읽은 수 뱃지 */
}
div#app.adminLayout > article > header > div.right > a:hover[b-2n3dqf7irc], div#app.adminLayout > article > header > div.right > div > span:hover[b-2n3dqf7irc] {
color: var(--pointLight);
}
div#app.adminLayout > article > header > div.right > a > b[b-2n3dqf7irc], div#app.adminLayout > article > header > div.right > div > span > b[b-2n3dqf7irc] {
position: absolute;
top: -0.3em;
right: -0.5em;
min-width: 1.4em;
padding: 0.1em 0.35em;
border-radius: 1em;
background-color: var(--danger);
color: white;
font-size: 0.55em;
line-height: 1.2;
text-align: center;
}
div#app.adminLayout > article > header > div.right > div[b-2n3dqf7irc] {
position: relative;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox[b-2n3dqf7irc] {
width: 22em;
padding: 0;
color: var(--txColor);
/* 목록 항목은 스크립트로 만들어지므로 ::deep. 빈 목록 안내: 드롭다운 항목 글자색(txColor)을 이기도록 다시 옅은 회색·작은 크기, 위아래 여백 */
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > header[b-2n3dqf7irc] {
padding: 0.6em 1em;
border-bottom: 1px solid var(--lineColor);
font-weight: 700;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > header > a[b-2n3dqf7irc] {
color: var(--txColor);
text-decoration: none;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li {
align-items: flex-start;
white-space: normal;
cursor: default;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li > div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.2em;
min-width: 0;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li > div > a {
color: var(--txColor);
text-decoration: none;
word-break: break-word;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li > div > a[href]:hover {
text-decoration: underline;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li > div > small {
color: var(--txLight);
font-size: 0.85em;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li > button {
flex: 0 0 auto;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li.empty {
padding: 1.6em 0;
gap: 0.4em;
color: var(--txLight);
font-size: 0.8em;
font-weight: normal;
}
div#app.adminLayout > article > header > div.right > div > section.dropBox > ul[b-2n3dqf7irc] > li.empty > i.fi {
font-size: 2.2em;
opacity: 0.6;
}
div#app.adminLayout > article > header > div > span.logo[b-2n3dqf7irc] {
line-height: 1em;
padding: 0 0.5em;
font-weight: bold;
font-size: 1.4em;
color: white;
text-transform: uppercase;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
div#app.adminLayout > article > header > div > span.logo > b[b-2n3dqf7irc] {
color: var(--pointLight);
}
div#app.adminLayout > article > main[b-2n3dqf7irc] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
padding: 1em;
max-width: 1600px;
gap: 1em;
}
div#app.adminLayout > article > main > header[b-2n3dqf7irc] {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
color: var(--mainDark);
padding: 0.5em;
}
div#app.adminLayout > article > main > header > div.left[b-2n3dqf7irc] {
display: flex;
flex-direction: column;
font-size: 1.3em;
font-weight: bold;
}
div#app.adminLayout > article > main > header > div.left > span[b-2n3dqf7irc] {
line-height: 1.4em;
color: var(--txColor);
}
div#app.adminLayout > article > main > header > div.left > small[b-2n3dqf7irc] {
font-size: 0.7em;
font-weight: normal;
color: var(--txLight);
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
/* 탭 페이지 (.tabView) — 상단 탭(header.frameTabs) + fetch 로 받은 조각 본문(div.frameBody > div).
계정 관리, 시스템 설정 등 관리자 탭 화면 공용 (common.bindTabView 와 짝) */
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 1em;
overflow: hidden;
/* 네비게이션 탭 — 독립 라운드 박스 */
/* 본문 — 테두리/배경/패딩 없음, 탭 박스와는 1em 간격만.
fetch 로 받은 조각(fragment)을 본문 div 에 그대로 꽂으므로
그 안의 .pageBox(height:100%) 가 제대로 채워지도록 플렉스 높이를 계속 이어준다. */
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > header.frameTabs {
flex: 0 0 auto;
display: flex;
gap: 0.3em;
padding: 0.3em;
background-color: var(--bgColor);
border: 1px solid var(--aColor);
border-radius: var(--roundBox, 1em);
box-shadow: 0 4px 16px var(--aLow);
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > header.frameTabs > a {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.4em 0.8em;
font-size: 0.92em;
font-weight: 500;
color: var(--txSub);
text-decoration: none;
border-radius: var(--roundBtn, 2em);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > header.frameTabs > a > i.fi {
font-size: 1.2em;
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > header.frameTabs > a:hover {
color: var(--txColor);
background-color: var(--aLight);
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > header.frameTabs > a.active {
color: white;
background-color: var(--main);
font-weight: 600;
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > div.frameBody {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > div.frameBody > div {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
div#app.adminLayout > article > main > section[b-2n3dqf7irc] .tabView > div.frameBody > div .asideList {
flex: 0 0 18em;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///D:/Source%2520Code/GeminiBaseDotNet/BitPlus.Web.Site/Views/Shared/_AdminLayout.cshtml.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EAGI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;;AAKJ;EACI;;AAGJ;EACI;;AAMhB;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;AAEA;AAkCA;;AAjCA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKR;EACI;;AAEA;EACI;EACA;EACA;AA8CA;;AA5CA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;AAEA;AAAA;;AAEA;EACI;EACA;EACA;EACA;EACA;AACA;AAwCA;AAAA;AAAA;;AAvCA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAOZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI%22%7D */
/* /Views/Shared/_PageSections.cshtml.rz.scp.css */
@charset "UTF-8";
/* 위젯 페이지 영역 — 영역은 위에서 아래로, 영역 안 슬롯은 CSS grid(열 수·영역 줄은 영역마다