/* layout.css — topbar, builder grid, left/right panel containers */ /* ===== APP SHELL ===== Builder-only chrome: fixed 3-column grid (panel-l + preview + panel-r) that needs a desktop-width viewport and owns its own internal scrolling. Opt-in via — tms2-builder.html / websites.html. home.html also loads this file but stays responsive (no class). */ body.app-shell { min-width: 1280px; overflow: hidden; } /* ===== TOPBAR ===== */ .topbar { height: var(--topbar-h); flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; position: relative; z-index: 50; } .topbar-row { flex: 1; min-height: 0; display: flex; align-items: center; padding: 0 20px; gap: 16px; } .topbar-row + .topbar-row { border-top: 1px solid var(--border-soft); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 14px; padding-right: 16px; border-right: 1px solid var(--border); height: 32px; } .brand-mark { height: 22px; width: auto; display: block; object-fit: contain; } .brand-version { font-size: 10px; color: var(--text-3); background: var(--surface-3); padding: 2px 6px; border-radius: 4px; font-weight: 600; font-family: var(--font-mono); } .crumb { display: flex; align-items: center; gap: 8px; color: var(--text-2); } .crumb-sep { color: var(--text-4); font-size: 11px; } /* 톱바 크럼 셀렉터 드롭다운 (오퍼레이터 / 웹사이트 / 페이지 전환) */ .crumb-menu { position: fixed; z-index: 1000; min-width: 180px; max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.16); } .crumb-menu[hidden] { display: none; } .crumb-menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-1); transition: background .1s; } .crumb-menu-item:hover { background: var(--surface); } .crumb-menu-item.active { background: var(--brand-bg); color: var(--brand-strong); } .crumb-menu-empty { padding: 8px 10px; font-size: 12px; color: var(--text-3); } .selector.open { border-color: var(--border-strong); background: var(--surface); } .topbar-list-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; transition: all .12s; } .topbar-list-btn:hover { background: var(--surface); color: var(--text-1); border-color: var(--border-strong); } .topbar-list-btn.active { background: var(--brand-bg); color: var(--brand-strong); border-color: var(--brand-soft); } .topbar-list-btn svg { width: 14px; height: 14px; } /* In list view, hide builder-only topbar pieces (crumb, lang-tabs, controls row). */ body.view-website-list .crumb, body.view-website-list .lang-tabs, body.view-website-list .topbar-row-controls { display: none !important; } body.view-website-list .topbar { height: auto; min-height: 48px; } body.view-website-list .builder { display: none !important; } .selector { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); font-weight: 600; transition: all .15s; } .selector:hover { background: var(--surface); border-color: var(--border-strong); } .selector-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-3); } .selector-chevron { width: 12px; height: 12px; color: var(--text-3); } .selector-tenant { background: var(--brand-bg); border-color: var(--brand-soft); color: var(--brand-strong); } .selector-tenant .selector-icon { color: var(--brand); } .selector-tenant:hover { background: var(--brand-soft); } .selector-vendor { background: #EEF2FF; border-color: #E0E7FF; color: #3730A3; } .selector-vendor .selector-icon { color: #4F46E5; } .selector-vendor:hover { background: #E0E7FF; } /* 오퍼레이터(tenant) 크럼 — 변경 불가(읽기 전용): 흐려짐/호버/포인터 제거, 색은 유지 */ #crumbOperator, .selector-tenant:disabled { cursor: default; opacity: 1; } #crumbOperator:hover, .selector-tenant:disabled:hover { background: var(--brand-bg); border-color: var(--brand-soft); } .lang-tabs { margin-left: auto; display: flex; background: var(--surface-3); border-radius: 8px; padding: 2px; border: 1px solid var(--border); } .lang-tab { padding: 5px 11px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); font-family: var(--font-mono); text-transform: uppercase; transition: all .12s; display: flex; align-items: center; gap: 4px; } .lang-tab:hover { color: var(--text-1); } .lang-tab.active { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-1); } .lang-tab-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--status-draft); } .lang-tab-dot.complete { background: var(--status-live); } .lang-tab-dot.empty { background: var(--text-4); } .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-pill.draft { background: var(--status-draft-bg); color: var(--status-draft); } .status-pill.live { background: var(--status-live-bg); color: var(--status-live); } .status-pill.live::before { box-shadow: 0 0 0 3px rgba(22,101,52,.18); animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(22,101,52,.18); } 50% { box-shadow: 0 0 0 5px rgba(22,101,52,.05); } } .meta-text { color: var(--text-3); font-size: 11px; } .meta-text strong { color: var(--text-2); font-weight: 600; } /* Controls row: status pill (left) · device toggle (center) · actions (right) */ .topbar-row-controls { position: relative; } .topbar-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .topbar-row-controls .actions { margin-left: auto; } .device-switcher { display: flex; background: var(--surface-3); border-radius: 8px; padding: 2px; border: 1px solid var(--border); } .device-btn { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; transition: all .12s; } .device-btn:hover { color: var(--text-1); } .device-btn.active { background: var(--text-1); color: var(--surface); box-shadow: var(--shadow-1); } .device-btn svg { width: 13px; height: 13px; } .device-meta { margin-left: 12px; color: var(--text-3); font-size: 11px; font-family: var(--font-mono); } .actions { display: flex; gap: 8px; margin-left: 12px; } .btn { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: all .12s; white-space: nowrap; } .btn svg { width: 13px; height: 13px; } .btn-ghost { color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text-1); } .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text-1); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-2); } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(14,95,74,.32); } .btn-primary:hover { background: var(--brand-strong); } /* 발행중지 등 파괴적 액션 — 레드 배경 */ .btn-danger { background: var(--status-error); color: #fff; border: 1px solid var(--status-error); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(185,28,28,.32); } .btn-danger:hover { background: #991616; border-color: #991616; } .btn-icon-bare { width: 28px; height: 28px; border-radius: 6px; color: var(--text-3); display: inline-grid; place-items: center; } .btn-icon-bare:hover { background: var(--surface-3); color: var(--text-1); } .btn-icon-bare svg { width: 14px; height: 14px; } .builder { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: var(--panel-l) 1fr var(--panel-r); overflow: hidden; } /* When the right panel is collapsed (e.g., site-settings view), drop the 3rd column entirely. */ .builder:has(.panel-r.panel-r-collapsed) { grid-template-columns: var(--panel-l) 1fr; } .panel-l, .panel-r { background: var(--surface); display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .panel-l { border-right: 1px solid var(--border); } .panel-r { border-left: 1px solid var(--border); } .panel-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } /* Clickable variant — used for the site-settings entry in the left panel header. */ .panel-header.panel-header-clickable { width: 100%; background: var(--surface); border-left: none; border-right: none; border-top: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: background .12s; } .panel-header-clickable:hover { background: var(--surface-2); } .panel-header-clickable.active { background: var(--brand-bg); } .panel-header-clickable.active .panel-title { color: var(--brand); } .panel-header-chev { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; } .panel-header-clickable.active .panel-header-chev { color: var(--brand); } .panel-title { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); } .panel-body { flex: 1; overflow-y: auto; } .panel-body::-webkit-scrollbar { width: 8px; } .panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; border: 2px solid var(--surface); } .panel-body::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }