zio
9faeb8892b
- Public: live notice feed, event subscribe, smart/rotating ticket QR, info pages, unsubscribe - Visitor: kiosk check-in, account page + API - Admin/work/analytics/floorplan/auction/cms/ops screen updates - Components: Modal, BrandLogo, TenantSwitcher, GridPdfButton - i18n 4 locales, public brand/login-slide/hero/track/venue assets Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1178 lines
27 KiB
CSS
1178 lines
27 KiB
CSS
/*
|
|
* M17 CMS 화면(SCR-35 게시 워크플로 · SCR-36 마이크로사이트 편집기 · SCR-37 다국어 관리) 공유 스타일.
|
|
* design.md §1 토큰(tokens.css)만 참조. shared.css 프리미티브(kx-page·kx-card·kx-seg·kx-select·kx-kpi·kx-barlist) 위에 얹는다.
|
|
* M17 백엔드 실구현 완료(cmsApi 실배선). 화면은 정상 경로에서 실 API 를 소비하며, 로컬 샘플은 강등 시 폴백 데모용이다.
|
|
*/
|
|
@import '../shared.css';
|
|
|
|
/* ── 페이지 헤더(공통) ── */
|
|
.kx-cms__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.kx-cms__title {
|
|
font-size: var(--fs-h1);
|
|
line-height: var(--lh-h1);
|
|
color: var(--color-neutral-900);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
.kx-cms__subtitle {
|
|
margin-top: 2px;
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-cms__head-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 샘플 데이터 배지 — M17 백엔드 준비 전 시연 표기 */
|
|
.kx-sample-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-warning);
|
|
background: var(--color-warning-bg);
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-pill);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── 공통 프리미티브(cms 자기완결: pill·field·table·toggle) ── */
|
|
.kx-cms-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 1px 10px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
white-space: nowrap;
|
|
}
|
|
.kx-cms-pill--draft {
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-neutral-700);
|
|
}
|
|
.kx-cms-pill--review {
|
|
background: var(--color-violation-warn-bg);
|
|
color: var(--color-violation-warn-text);
|
|
}
|
|
.kx-cms-pill--approved {
|
|
background: var(--color-primary-050);
|
|
color: var(--color-primary-700);
|
|
}
|
|
.kx-cms-pill--published {
|
|
background: var(--color-success-bg);
|
|
color: var(--color-success);
|
|
}
|
|
.kx-cms-pill--ai {
|
|
background: var(--color-ai-surface);
|
|
color: var(--color-ai-accent);
|
|
}
|
|
.kx-cms-pill--none {
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
|
|
.kx-cms-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
.kx-cms-label {
|
|
font-size: var(--fs-caption);
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-cms-input,
|
|
.kx-cms-textarea {
|
|
padding: 8px var(--space-3);
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-white);
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-900);
|
|
font-family: inherit;
|
|
width: 100%;
|
|
}
|
|
.kx-cms-textarea {
|
|
min-height: 88px;
|
|
line-height: var(--lh-body);
|
|
resize: vertical;
|
|
}
|
|
.kx-cms-input:focus,
|
|
.kx-cms-textarea:focus {
|
|
outline: 2px solid var(--color-primary-100);
|
|
border-color: var(--color-primary-600);
|
|
}
|
|
|
|
/* 토글 스위치 */
|
|
.kx-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
cursor: pointer;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-700);
|
|
}
|
|
.kx-toggle input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.kx-toggle__track {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 24px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-neutral-200);
|
|
transition: background 0.15s;
|
|
}
|
|
.kx-toggle__track::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--color-white);
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
|
|
transition: transform 0.15s;
|
|
}
|
|
.kx-toggle input:checked + .kx-toggle__track {
|
|
background: var(--color-primary-600);
|
|
}
|
|
.kx-toggle input:checked + .kx-toggle__track::after {
|
|
transform: translateX(16px);
|
|
}
|
|
.kx-toggle input:focus-visible + .kx-toggle__track {
|
|
outline: 2px solid var(--color-primary-100);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* 아이콘 버튼(툴바·리스트 액션) */
|
|
.kx-icon-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-neutral-500);
|
|
cursor: pointer;
|
|
}
|
|
.kx-icon-btn:hover {
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-icon-btn--danger:hover {
|
|
background: var(--color-error-bg);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
/* ══════════════════════ SCR-35 게시 워크플로 ══════════════════════ */
|
|
.kx-cms-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 320px);
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.kx-cms-grid {
|
|
grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
|
|
}
|
|
.kx-cms-grid > .kx-cms-flow {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
@media (max-width: 820px) {
|
|
.kx-cms-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.kx-cms-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 콘텐츠 목록 */
|
|
.kx-cms-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.kx-cms-list__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
}
|
|
.kx-cms-list__item:hover {
|
|
background: var(--color-neutral-050);
|
|
}
|
|
.kx-cms-list__item.is-active {
|
|
background: var(--color-primary-050);
|
|
border-color: var(--color-primary-100);
|
|
}
|
|
.kx-cms-list__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-900);
|
|
min-width: 0;
|
|
}
|
|
.kx-cms-list__label svg {
|
|
color: var(--color-neutral-500);
|
|
flex-shrink: 0;
|
|
}
|
|
.kx-cms-list__name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 에디터 */
|
|
.kx-cms-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
.kx-cms-title-input {
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-neutral-200);
|
|
background: transparent;
|
|
padding: 0 0 8px;
|
|
font-size: var(--fs-display);
|
|
line-height: var(--lh-display);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-neutral-900);
|
|
font-family: inherit;
|
|
}
|
|
.kx-cms-title-input:focus {
|
|
outline: none;
|
|
border-bottom-color: var(--color-primary-600);
|
|
}
|
|
.kx-cms-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 4px;
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-050);
|
|
}
|
|
.kx-cms-toolbar__divider {
|
|
width: 1px;
|
|
height: 18px;
|
|
background: var(--color-neutral-200);
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* 미디어 스트립 */
|
|
.kx-cms-media {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
.kx-cms-media__thumb {
|
|
flex-shrink: 0;
|
|
width: 128px;
|
|
height: 88px;
|
|
border-radius: var(--radius-sm);
|
|
border: var(--border-card);
|
|
background: var(--color-neutral-100);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-neutral-500);
|
|
overflow: hidden;
|
|
}
|
|
.kx-cms-media__thumb--img {
|
|
width: 156px;
|
|
padding: 0;
|
|
}
|
|
.kx-cms-media__thumb--img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.kx-cms-media__thumb--ph {
|
|
background: repeating-linear-gradient(
|
|
135deg,
|
|
var(--color-neutral-100),
|
|
var(--color-neutral-100) 8px,
|
|
var(--color-neutral-050) 8px,
|
|
var(--color-neutral-050) 16px
|
|
);
|
|
color: var(--color-primary-600);
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-semibold);
|
|
text-align: center;
|
|
padding: 6px;
|
|
}
|
|
.kx-cms-media__add {
|
|
flex-shrink: 0;
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px dashed var(--color-neutral-200);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--color-neutral-500);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.kx-cms-media__add:hover {
|
|
background: var(--color-neutral-050);
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
/* 콘텐츠 블록 */
|
|
.kx-cms-blocks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.kx-cms-block {
|
|
position: relative;
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-white);
|
|
padding: var(--space-3);
|
|
}
|
|
.kx-cms-block__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.kx-cms-block__kind {
|
|
font-size: var(--fs-caption);
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-cms-block__body {
|
|
font-size: var(--fs-body);
|
|
line-height: var(--lh-body);
|
|
color: var(--color-neutral-700);
|
|
}
|
|
.kx-cms-block__img {
|
|
height: 180px;
|
|
border-radius: var(--radius-sm);
|
|
background: linear-gradient(135deg, var(--color-primary-700), var(--color-canvas-bg));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-size: var(--fs-caption);
|
|
}
|
|
.kx-cms-block--ai {
|
|
border: 1px solid var(--color-ai-accent);
|
|
border-left: var(--accent-ai);
|
|
background: var(--color-ai-surface);
|
|
}
|
|
.kx-cms-block--ai .kx-cms-block__body {
|
|
color: var(--color-neutral-900);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* 예약 게시 */
|
|
.kx-cms-sched {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3);
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-050);
|
|
color: var(--color-primary-700);
|
|
font-weight: var(--fw-semibold);
|
|
font-size: var(--fs-body);
|
|
flex-wrap: wrap;
|
|
}
|
|
.kx-cms-sched svg {
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
/* 워크플로 패널 */
|
|
.kx-cms-flow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.kx-cms-flow__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.kx-cms-flow__label {
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-cms-stepper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.kx-cms-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-500);
|
|
padding: 4px 0;
|
|
}
|
|
.kx-cms-step__dot {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-neutral-200);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.kx-cms-step.is-done {
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-cms-step.is-done .kx-cms-step__dot {
|
|
background: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: var(--color-on-accent);
|
|
}
|
|
.kx-cms-step.is-current {
|
|
color: var(--color-primary-700);
|
|
font-weight: var(--fw-bold);
|
|
}
|
|
.kx-cms-step.is-current .kx-cms-step__dot {
|
|
border-color: var(--color-primary-600);
|
|
background: var(--color-primary-050);
|
|
}
|
|
|
|
/* 버전 히스토리 */
|
|
.kx-cms-ver {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.kx-cms-ver__item {
|
|
padding: 8px 10px;
|
|
border-left: 4px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-050);
|
|
}
|
|
.kx-cms-ver__item--current {
|
|
border-left-color: var(--color-primary-600);
|
|
background: var(--color-primary-050);
|
|
}
|
|
.kx-cms-ver__item--published {
|
|
border-left-color: var(--color-success);
|
|
}
|
|
.kx-cms-ver__v {
|
|
font-size: var(--fs-body);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-cms-ver__meta {
|
|
font-size: var(--fs-micro);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-cms-schedcard {
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--color-primary-100);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-primary-050);
|
|
}
|
|
.kx-cms-schedcard__t {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-primary-700);
|
|
margin-bottom: 4px;
|
|
}
|
|
.kx-cms-flow__toggles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding-top: var(--space-3);
|
|
border-top: var(--border-card);
|
|
}
|
|
|
|
/* ══════════════════════ SCR-36 마이크로사이트 편집기 ══════════════════════ */
|
|
.kx-mb-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 300px);
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.kx-mb-grid {
|
|
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
|
|
}
|
|
.kx-mb-grid > .kx-mb-sections {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
@media (max-width: 820px) {
|
|
.kx-mb-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.kx-mb-sec {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.kx-mb-sec__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
padding: 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
}
|
|
.kx-mb-sec__item:hover {
|
|
background: var(--color-neutral-050);
|
|
}
|
|
.kx-mb-sec__item.is-active {
|
|
background: var(--color-primary-050);
|
|
border-color: var(--color-primary-100);
|
|
}
|
|
.kx-mb-sec__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-mb-sec__label svg {
|
|
color: var(--color-neutral-500);
|
|
cursor: grab;
|
|
}
|
|
.kx-mb-sec__ctrls {
|
|
display: flex;
|
|
gap: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
.kx-mb-addbtn {
|
|
margin-top: var(--space-2);
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 10px;
|
|
border: 1px dashed var(--color-neutral-200);
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--color-neutral-500);
|
|
font-size: var(--fs-body);
|
|
font-weight: var(--fw-semibold);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
.kx-mb-addbtn:hover {
|
|
background: var(--color-neutral-050);
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
/* 테마 */
|
|
.kx-mb-swatches {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
}
|
|
.kx-mb-swatch {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-white);
|
|
box-shadow: 0 0 0 1px var(--color-neutral-200);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.kx-mb-swatch.is-active {
|
|
box-shadow: 0 0 0 2px var(--color-primary-600);
|
|
}
|
|
|
|
/* 캔버스 */
|
|
.kx-mb-canvas {
|
|
background-color: var(--color-neutral-050);
|
|
background-image: radial-gradient(var(--color-neutral-200) 0.5px, transparent 0.5px);
|
|
background-size: 20px 20px;
|
|
border-radius: var(--radius-lg);
|
|
border: var(--border-card);
|
|
padding: var(--space-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
align-items: center;
|
|
}
|
|
.kx-mb-devicebar {
|
|
align-self: center;
|
|
}
|
|
.kx-mb-frame {
|
|
width: 100%;
|
|
max-width: 880px;
|
|
background: var(--color-white);
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-level2);
|
|
}
|
|
.kx-mb-frame--mobile {
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* 마이크로사이트 프리뷰 내부 */
|
|
.kx-mb-site__nav {
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 var(--space-5);
|
|
border-bottom: 1px solid var(--color-neutral-100);
|
|
}
|
|
.kx-mb-site__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-primary-700);
|
|
}
|
|
.kx-mb-site__logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-primary-600);
|
|
color: var(--color-on-accent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: var(--fw-bold);
|
|
font-style: italic;
|
|
}
|
|
.kx-mb-site__menu {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
font-size: var(--fs-caption);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-mb-hero {
|
|
position: relative;
|
|
min-height: 320px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-6);
|
|
color: var(--color-on-accent);
|
|
background:
|
|
linear-gradient(90deg, rgba(0, 76, 134, 0.92), rgba(0, 76, 134, 0.35)),
|
|
linear-gradient(135deg, var(--color-primary-700), var(--color-canvas-bg));
|
|
}
|
|
.kx-mb-hero__eyebrow {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(255, 255, 255, 0.14);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.kx-mb-hero__title {
|
|
font-size: 30px;
|
|
line-height: 1.2;
|
|
font-weight: var(--fw-bold);
|
|
margin-bottom: var(--space-3);
|
|
max-width: 30ch;
|
|
}
|
|
.kx-mb-hero__desc {
|
|
font-size: var(--fs-body);
|
|
color: rgba(255, 255, 255, 0.82);
|
|
max-width: 44ch;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.kx-mb-hero__cta {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
.kx-mb-btn {
|
|
padding: 10px 20px;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: var(--fw-bold);
|
|
font-size: var(--fs-body);
|
|
cursor: default;
|
|
border: 1px solid transparent;
|
|
}
|
|
.kx-mb-btn--solid {
|
|
background: var(--color-white);
|
|
color: var(--color-primary-700);
|
|
}
|
|
.kx-mb-btn--ghost {
|
|
background: transparent;
|
|
color: var(--color-on-accent);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.kx-mb-section {
|
|
padding: var(--space-6);
|
|
}
|
|
.kx-mb-section--alt {
|
|
background: var(--color-neutral-050);
|
|
}
|
|
.kx-mb-section__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.kx-mb-section__bar {
|
|
width: 4px;
|
|
height: 22px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-primary-600);
|
|
}
|
|
.kx-mb-section__title {
|
|
font-size: var(--fs-h2);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-mb-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
.kx-mb-card {
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
background: var(--color-white);
|
|
}
|
|
.kx-mb-card__img {
|
|
height: 140px;
|
|
position: relative;
|
|
background: linear-gradient(135deg, var(--color-primary-100), var(--color-neutral-100));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-mb-card__tag {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-primary-600);
|
|
color: var(--color-on-accent);
|
|
font-size: var(--fs-nano);
|
|
font-weight: var(--fw-bold);
|
|
}
|
|
.kx-mb-card__body {
|
|
padding: var(--space-3);
|
|
border-left: 4px solid var(--color-primary-600);
|
|
}
|
|
.kx-mb-card__title {
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-neutral-900);
|
|
margin-bottom: 4px;
|
|
}
|
|
.kx-mb-card__desc {
|
|
font-size: var(--fs-caption);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-mb-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
.kx-mb-gallery__cell {
|
|
position: relative;
|
|
aspect-ratio: 4 / 3;
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
border: var(--border-card);
|
|
background: linear-gradient(135deg, var(--color-ai-accent), var(--color-primary-700));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
.kx-mb-gallery__wm {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
right: 6px;
|
|
}
|
|
|
|
/* 우측 게시 패널 */
|
|
.kx-mb-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.kx-mb-side__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.kx-mb-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-success-bg);
|
|
color: var(--color-success);
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
}
|
|
.kx-mb-status__dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--color-success);
|
|
}
|
|
.kx-mb-url {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 8px 10px;
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-050);
|
|
}
|
|
.kx-mb-url span {
|
|
flex: 1;
|
|
font-size: var(--fs-caption);
|
|
color: var(--color-primary-700);
|
|
font-weight: var(--fw-semibold);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.kx-mb-activity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.kx-mb-activity__row {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
.kx-mb-activity__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--color-primary-600);
|
|
margin-top: 5px;
|
|
flex-shrink: 0;
|
|
}
|
|
.kx-mb-activity__dot--muted {
|
|
background: var(--color-neutral-200);
|
|
}
|
|
.kx-mb-activity__t {
|
|
font-size: var(--fs-caption);
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-mb-activity__m {
|
|
font-size: var(--fs-micro);
|
|
color: var(--color-neutral-500);
|
|
}
|
|
|
|
/* ══════════════════════ SCR-37 다국어 콘텐츠 관리 ══════════════════════ */
|
|
.kx-i18n-cov {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
@media (max-width: 900px) {
|
|
.kx-i18n-cov {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
.kx-i18n-covcard {
|
|
border: var(--border-card);
|
|
border-left: 4px solid var(--color-primary-600);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-white);
|
|
padding: var(--space-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.kx-i18n-covcard__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: var(--fs-body);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-i18n-covcard__pct {
|
|
color: var(--color-primary-700);
|
|
}
|
|
.kx-i18n-bar {
|
|
height: 8px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-neutral-100);
|
|
overflow: hidden;
|
|
}
|
|
.kx-i18n-bar__fill {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-primary-600);
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
.kx-i18n-main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 1080px) {
|
|
.kx-i18n-main {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.kx-i18n-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* 매트릭스 테이블 — 기본 그리드는 정본 .kx-table 로 수렴. 아래는 확장만 유지. */
|
|
.kx-i18n-table tbody td {
|
|
vertical-align: top;
|
|
}
|
|
.kx-i18n-table tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
.kx-i18n-table tbody tr.is-active {
|
|
background: var(--color-primary-050);
|
|
}
|
|
.kx-i18n-row__key {
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-i18n-row__id {
|
|
font-size: var(--fs-micro);
|
|
color: var(--color-neutral-500);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.kx-i18n-row__trans--empty {
|
|
color: var(--color-neutral-500);
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}
|
|
.kx-i18n-cell--c {
|
|
text-align: center;
|
|
}
|
|
.kx-i18n-cell--r {
|
|
text-align: right;
|
|
color: var(--color-neutral-500);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 우측 편집기 */
|
|
.kx-i18n-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.kx-i18n-editor__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.kx-i18n-src {
|
|
padding: var(--space-3);
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-050);
|
|
font-size: var(--fs-body);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-i18n-editor__ta {
|
|
border: 2px solid var(--color-ai-accent);
|
|
}
|
|
.kx-i18n-glossary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.kx-i18n-glossary__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
border: var(--border-card);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-neutral-050);
|
|
font-size: var(--fs-caption);
|
|
}
|
|
.kx-i18n-glossary__row b {
|
|
color: var(--color-neutral-900);
|
|
}
|
|
.kx-i18n-glossary__row span {
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-i18n-tone {
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--color-ai-accent);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-ai-surface);
|
|
}
|
|
.kx-i18n-tone__t {
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
color: var(--color-ai-accent);
|
|
margin-bottom: 4px;
|
|
}
|
|
.kx-i18n-tone__p {
|
|
font-size: var(--fs-micro);
|
|
line-height: 1.5;
|
|
color: var(--color-neutral-700);
|
|
font-style: italic;
|
|
}
|
|
.kx-i18n-editor__actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* 섹션 라벨(공통 소제목) */
|
|
.kx-cms-sublabel {
|
|
font-size: var(--fs-micro);
|
|
font-weight: var(--fw-bold);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--color-neutral-500);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* ── M17 실 API 전환 보강(상태/알림/빈상태/미배선 힌트) ───────────────────── */
|
|
.kx-cms-alert {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
margin-bottom: 12px;
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
|
|
color: var(--color-error);
|
|
font-size: 13px;
|
|
}
|
|
.kx-cms-alert--ok {
|
|
background: color-mix(in srgb, var(--color-success) 12%, transparent);
|
|
border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
|
|
color: var(--color-success);
|
|
}
|
|
/* AI 초벌/일시 불가 등 비오류 안내(부드러운 톤) */
|
|
.kx-cms-alert--info {
|
|
background: var(--color-ai-surface);
|
|
border-color: color-mix(in srgb, var(--color-ai-accent) 35%, transparent);
|
|
color: var(--color-ai-accent);
|
|
}
|
|
.kx-cms-empty {
|
|
padding: 28px 16px;
|
|
text-align: center;
|
|
color: var(--color-neutral-500);
|
|
font-size: 13px;
|
|
}
|
|
.kx-cms-terminal {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--color-success) 10%, transparent);
|
|
color: var(--color-success);
|
|
font-size: 13px;
|
|
font-weight: var(--fw-semibold);
|
|
}
|
|
.kx-cms-disabled-hint {
|
|
margin-left: auto;
|
|
font-size: var(--fs-micro);
|
|
color: var(--color-neutral-500);
|
|
border: 1px dashed var(--color-neutral-200);
|
|
border-radius: 6px;
|
|
padding: 1px 6px;
|
|
cursor: help;
|
|
}
|
|
.kx-icon-btn.is-off {
|
|
opacity: 0.4;
|
|
}
|
|
.kx-mb-status--draft {
|
|
color: var(--color-neutral-500);
|
|
}
|
|
.kx-mb-status--draft .kx-mb-status__dot {
|
|
background: var(--color-neutral-400);
|
|
}
|