동의 게이트와 런타임 안정화
This commit is contained in:
Yun Chan
parent
0eb7d925ed
commit
0ec266a761
34 changed files with 1186 additions and 158 deletions
|
|
@ -6,6 +6,45 @@
|
|||
===================================================================== */
|
||||
|
||||
/* ── 레이아웃: 좌측 섹션 내비(sticky) + 우측 폼 ── */
|
||||
body[data-page="settings"] .vg-shell {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(251, 250, 248, 0.96), rgba(244, 242, 238, 0.92)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar {
|
||||
background: rgba(251, 250, 248, 0.94);
|
||||
border-bottom-color: var(--hair);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__wm,
|
||||
body[data-page="settings"] .vg-topbar__wm .v,
|
||||
body[data-page="settings"] .vg-topbar__role,
|
||||
body[data-page="settings"] .vg-topbar__uname,
|
||||
body[data-page="settings"] .vg-iconbtn,
|
||||
body[data-page="settings"] .vg-topbar__mark {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__brand svg {
|
||||
color: var(--accent);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__role {
|
||||
border-left-color: var(--hair);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__user {
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
body[data-page="settings"] .vg-topbar__avatar {
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
body[data-page="settings"] .vg-iconbtn:hover {
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
body[data-page="settings"] .vg-main {
|
||||
padding: var(--sp-6) var(--sp-5) var(--sp-8);
|
||||
}
|
||||
|
||||
.vg-set {
|
||||
display: grid;
|
||||
grid-template-columns: 204px minmax(0, 780px);
|
||||
|
|
@ -1175,3 +1214,326 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Image-aligned workspace: generated settings concept -> production controls. */
|
||||
body[data-page="settings"] .vg-shell {
|
||||
min-height: 100dvh;
|
||||
background:
|
||||
radial-gradient(circle at 8% 0%, rgba(222, 238, 234, 0.62), transparent 34%),
|
||||
linear-gradient(135deg, rgba(252, 250, 247, 0.97), rgba(244, 242, 237, 0.94)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
}
|
||||
body[data-page="settings"] .vg-main {
|
||||
padding: 0;
|
||||
}
|
||||
body[data-page="settings"] .vg-main__inner {
|
||||
max-width: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__callout {
|
||||
max-width: 1120px;
|
||||
margin: var(--sp-5) auto 0;
|
||||
}
|
||||
|
||||
body[data-page="settings"] .vg-set {
|
||||
grid-template-columns: 244px minmax(0, 820px);
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
gap: 28px;
|
||||
max-width: 1168px;
|
||||
min-height: 100dvh;
|
||||
padding: 30px 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
min-height: calc(100dvh - 60px);
|
||||
padding: 24px 16px 18px;
|
||||
border: 1px solid rgba(38, 101, 92, 0.14);
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(238, 248, 245, 0.92), rgba(248, 250, 248, 0.72)),
|
||||
rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 24px 58px rgba(37, 45, 42, 0.08);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
padding: 2px 6px 20px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-mark {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: none;
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title h1 {
|
||||
margin: 0;
|
||||
color: var(--text-strong);
|
||||
font-size: 24px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title p {
|
||||
margin: 3px 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.35;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-card {
|
||||
display: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav {
|
||||
position: static;
|
||||
padding: 0;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-kicker {
|
||||
display: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item {
|
||||
min-height: 49px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius);
|
||||
color: #1f5f58;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item:hover {
|
||||
background: rgba(24, 121, 103, 0.09);
|
||||
color: #124d47;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item.is-active {
|
||||
background: linear-gradient(135deg, #187967, #106759);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(16, 103, 89, 0.22);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item.is-active svg {
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-status {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
padding: 18px 4px 0;
|
||||
}
|
||||
|
||||
body[data-page="settings"] .vg-set__forms {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
max-width: 820px;
|
||||
}
|
||||
body[data-page="settings"] #set-account {
|
||||
order: 1;
|
||||
}
|
||||
body[data-page="settings"] #set-engine {
|
||||
order: 2;
|
||||
}
|
||||
body[data-page="settings"] #set-appearance {
|
||||
order: 3;
|
||||
}
|
||||
body[data-page="settings"] #set-voice {
|
||||
order: 4;
|
||||
}
|
||||
body[data-page="settings"] #set-notify {
|
||||
order: 5;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group {
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(37, 45, 42, 0.12);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.93);
|
||||
box-shadow: 0 18px 38px rgba(38, 45, 43, 0.07);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group-head {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group-title {
|
||||
font-size: 18px;
|
||||
font-weight: 750;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__profile {
|
||||
margin-bottom: 12px;
|
||||
padding: 13px;
|
||||
background: rgba(244, 241, 236, 0.78);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__avatar {
|
||||
background: linear-gradient(135deg, #1d8774, #0f6559);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__field-grid--account,
|
||||
body[data-page="settings"] .vg-set__field-grid--engine {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
body[data-page="settings"] .vg-set__field--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__field,
|
||||
body[data-page="settings"] .vg-set__control-block,
|
||||
body[data-page="settings"] .vg-set__opt,
|
||||
body[data-page="settings"] .vg-set__range-row {
|
||||
border-color: rgba(37, 45, 42, 0.12);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__engine-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__seg {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
background: rgba(244, 241, 236, 0.82);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__seg-btn.is-active {
|
||||
background: #187967;
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__ops {
|
||||
width: min(300px, 100%);
|
||||
min-height: 54px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__voicelist {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
body[data-page="settings"] .vg-set__voice {
|
||||
min-height: 72px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__foot {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__pill {
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
body[data-page="settings"] .vg-set {
|
||||
grid-template-columns: 86px minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
max-width: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail {
|
||||
padding: 18px 10px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title {
|
||||
justify-content: center;
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title div,
|
||||
body[data-page="settings"] .vg-set__nav-item span,
|
||||
body[data-page="settings"] .vg-set__rail-status {
|
||||
display: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item {
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__forms {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
body[data-page="settings"] .vg-set__callout {
|
||||
margin: 12px 12px 0;
|
||||
}
|
||||
body[data-page="settings"] .vg-set {
|
||||
display: block;
|
||||
min-height: 100dvh;
|
||||
padding: 0 16px 28px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
min-height: auto;
|
||||
margin: 0 -16px 12px;
|
||||
padding: 13px 16px 10px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(37, 45, 42, 0.1);
|
||||
border-radius: 0;
|
||||
background: rgba(252, 250, 247, 0.96);
|
||||
box-shadow: 0 12px 26px rgba(37, 45, 42, 0.08);
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title {
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title div {
|
||||
display: block;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-title p {
|
||||
display: none;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__rail-mark {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item {
|
||||
flex: 0 0 auto;
|
||||
min-height: 34px;
|
||||
gap: 5px;
|
||||
padding: 0 7px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__nav-item span {
|
||||
display: inline;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__forms {
|
||||
gap: 10px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group {
|
||||
padding: 13px;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__field-grid--account,
|
||||
body[data-page="settings"] .vg-set__field-grid--engine,
|
||||
body[data-page="settings"] .vg-set__seg,
|
||||
body[data-page="settings"] .vg-set__voicelist {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__field--wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__group-head--split {
|
||||
flex-direction: column;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__ops {
|
||||
width: 100%;
|
||||
}
|
||||
body[data-page="settings"] .vg-set__voice {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue