현재 작업 전체 반영
This commit is contained in:
Yun Chan
parent
5560638e54
commit
c0dddab594
85 changed files with 11322 additions and 539 deletions
|
|
@ -18,6 +18,13 @@
|
|||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: var(--sp-4);
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(251, 250, 248, 0.94), rgba(244, 242, 238, 0.9)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
}
|
||||
.sx-page,
|
||||
.sx-page * {
|
||||
|
|
@ -26,6 +33,12 @@
|
|||
.sx-page--prestart {
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
overflow: auto;
|
||||
color: #eef4f2;
|
||||
background:
|
||||
radial-gradient(circle at 14% 18%, rgba(95, 150, 139, 0.2), transparent 26%),
|
||||
radial-gradient(circle at 86% 8%, rgba(176, 115, 92, 0.18), transparent 24%),
|
||||
linear-gradient(135deg, rgba(13, 24, 22, 0.96), rgba(28, 39, 36, 0.93)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
}
|
||||
.sx-page--active {
|
||||
height: 100vh;
|
||||
|
|
@ -33,9 +46,16 @@
|
|||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
padding: 14px;
|
||||
gap: 12px;
|
||||
background:
|
||||
radial-gradient(circle at 16% 14%, rgba(95, 150, 139, 0.2), transparent 27%),
|
||||
radial-gradient(circle at 82% 8%, rgba(176, 115, 92, 0.18), transparent 24%),
|
||||
linear-gradient(135deg, #111c1a, #1d2926 52%, #15211f);
|
||||
color: #eaf0f1;
|
||||
}
|
||||
.sx-page--active .sx-grid {
|
||||
height: auto;
|
||||
width: min(100%, 1460px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.sx-page--active .sx-head {
|
||||
display: none;
|
||||
|
|
@ -216,6 +236,9 @@
|
|||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
.sx-page--active .sx-col-center {
|
||||
grid-template-rows: minmax(230px, 0.42fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
/* ── LEFT: 세로 단계 트랙 ── */
|
||||
.sx-track {
|
||||
|
|
@ -419,6 +442,24 @@
|
|||
column-gap: 18px;
|
||||
row-gap: 8px;
|
||||
}
|
||||
.sx-page--active .sx-stage {
|
||||
background:
|
||||
radial-gradient(circle at 28% 50%, rgba(145, 200, 189, 0.18), transparent 42%),
|
||||
linear-gradient(135deg, rgba(11, 22, 20, 0.96), rgba(31, 43, 39, 0.93)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
border-color: rgba(255, 255, 255, 0.11);
|
||||
box-shadow: 0 18px 44px rgba(7, 16, 14, 0.28);
|
||||
grid-template-columns: minmax(184px, 256px) minmax(0, 1fr);
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.sx-page--active .sx-stage::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: calc(var(--radius-lg) - 2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* stage 상단 좌측 상태 라벨 (어두운 배경 위 옅은 텍스트) */
|
||||
.sx-stage__top {
|
||||
width: 100%;
|
||||
|
|
@ -526,17 +567,17 @@
|
|||
min-width: 0;
|
||||
}
|
||||
.sx-page--active .sx-stage .vg-avatar {
|
||||
width: clamp(136px, 12vw, 184px) !important;
|
||||
width: clamp(176px, 15vw, 238px) !important;
|
||||
}
|
||||
.sx-page--active .sx-stage .vg-avatar__label {
|
||||
display: none;
|
||||
}
|
||||
.sx-page--active .sx-stage .vg-avatar__stage {
|
||||
height: clamp(136px, 12vw, 184px) !important;
|
||||
height: clamp(176px, 15vw, 238px) !important;
|
||||
}
|
||||
.sx-page--active .sx-stage .vg-avatar__svg {
|
||||
width: clamp(136px, 12vw, 184px) !important;
|
||||
height: clamp(136px, 12vw, 184px) !important;
|
||||
width: clamp(176px, 15vw, 238px) !important;
|
||||
height: clamp(176px, 15vw, 238px) !important;
|
||||
}
|
||||
.sx-page--active .sx-stage .vg-avatar__meta {
|
||||
display: none;
|
||||
|
|
@ -554,6 +595,11 @@
|
|||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sx-page--active .sx-transcript {
|
||||
background: rgba(251, 250, 248, 0.97);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
box-shadow: 0 14px 34px rgba(7, 16, 14, 0.16);
|
||||
}
|
||||
.sx-transcript__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -987,6 +1033,25 @@
|
|||
.sx-safety__text b {
|
||||
font-weight: 600;
|
||||
}
|
||||
.sx-crisis-resource {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--warn-text) 18%, transparent);
|
||||
}
|
||||
.sx-crisis-resource strong {
|
||||
font-size: 12px;
|
||||
color: var(--warn-text);
|
||||
}
|
||||
.sx-crisis-resource a {
|
||||
width: fit-content;
|
||||
color: var(--warn-text);
|
||||
font-family: var(--font-num);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── 하단 컨트롤 바 (80px) ── */
|
||||
.sx-controlbar {
|
||||
|
|
@ -1003,6 +1068,47 @@
|
|||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.sx-page--active .sx-controlbar {
|
||||
width: min(100%, 1460px);
|
||||
margin: 0 auto;
|
||||
background: rgba(16, 28, 26, 0.94);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 14px 36px rgba(7, 16, 14, 0.24);
|
||||
color: rgba(238, 244, 242, 0.86);
|
||||
}
|
||||
.sx-page--active .sx-mic-block__l,
|
||||
.sx-page--active .sx-seg-block__label {
|
||||
color: #eef4f2;
|
||||
}
|
||||
.sx-page--active .sx-mic-block__h {
|
||||
color: rgba(238, 244, 242, 0.58);
|
||||
}
|
||||
.sx-page--active .sx-segmented {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.sx-page--active .sx-segmented button {
|
||||
color: rgba(238, 244, 242, 0.68);
|
||||
}
|
||||
.sx-page--active .sx-segmented button:hover {
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.sx-page--active .sx-segmented button.is-on {
|
||||
background: rgba(145, 200, 189, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
.sx-page--active .sx-cb-sep {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.sx-page--active .sx-pause {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #eef4f2;
|
||||
}
|
||||
.sx-page--active .sx-pause:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
/* 마이크 (주 컨트롤, 음성 호흡 펄스) — 원형 예외 허용 */
|
||||
.sx-mic-block {
|
||||
display: flex;
|
||||
|
|
@ -1226,28 +1332,80 @@
|
|||
align-self: start;
|
||||
justify-self: center;
|
||||
text-align: left;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(132deg, rgba(15, 28, 26, 0.96), rgba(31, 44, 40, 0.92) 56%, rgba(46, 55, 49, 0.86)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
border: 1px solid rgba(255, 255, 255, 0.11);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
box-shadow: 0 18px 52px rgba(6, 14, 13, 0.34);
|
||||
color: #eef4f2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sx-page--prestart .sx-head {
|
||||
width: min(1180px, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.sx-page--prestart .sx-head__title,
|
||||
.sx-page--prestart .sx-ph.is-cur .sx-ph__name {
|
||||
color: #f3f8f6;
|
||||
}
|
||||
.sx-page--prestart .sx-head__title em {
|
||||
color: #91c8bd;
|
||||
}
|
||||
.sx-page--prestart .sx-head__sub,
|
||||
.sx-page--prestart .sx-ph__name,
|
||||
.sx-page--prestart .sx-ph__t {
|
||||
color: rgba(238, 244, 242, 0.62);
|
||||
}
|
||||
.sx-page--prestart .sx-ph__dot {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.sx-page--prestart .sx-ph__link {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.sx-page--prestart .sx-ph__link.is-fill {
|
||||
background: rgba(145, 200, 189, 0.74);
|
||||
}
|
||||
.sx-page--prestart .sx-prestart::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 38%),
|
||||
radial-gradient(circle at 20% 22%, rgba(126, 184, 173, 0.22), transparent 32%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.sx-prestart__visual {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: var(--sp-3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: stretch;
|
||||
align-content: center;
|
||||
padding: var(--sp-4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
radial-gradient(circle at 50% 45%, rgba(145, 200, 189, 0.2), transparent 52%),
|
||||
rgba(251, 250, 248, 0.06);
|
||||
}
|
||||
.sx-prestart__visual .vg-avatar {
|
||||
justify-self: center;
|
||||
}
|
||||
.sx-prestart__main {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.sx-prestart__eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--accent-deep);
|
||||
color: #a8d4ca;
|
||||
font-family: var(--font-num);
|
||||
font-size: var(--fs-kicker);
|
||||
font-weight: 700;
|
||||
|
|
@ -1264,13 +1422,13 @@
|
|||
font-size: var(--fs-h2);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
color: var(--text-strong);
|
||||
color: #f4f8f7;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.sx-prestart__desc {
|
||||
margin-top: var(--sp-3);
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-body);
|
||||
color: rgba(238, 244, 242, 0.76);
|
||||
line-height: 1.6;
|
||||
max-width: 58ch;
|
||||
}
|
||||
|
|
@ -1283,17 +1441,20 @@
|
|||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
.sx-page--prestart .sx-prestart__facts {
|
||||
border-color: rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
.sx-prestart__facts div {
|
||||
min-width: 0;
|
||||
}
|
||||
.sx-prestart__facts dt {
|
||||
color: var(--text-muted);
|
||||
color: rgba(238, 244, 242, 0.52);
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sx-prestart__facts dd {
|
||||
margin: 6px 0 0;
|
||||
color: var(--text-strong);
|
||||
color: #f4f8f7;
|
||||
font-size: 13.5px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
|
|
@ -1314,20 +1475,20 @@
|
|||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent-deep);
|
||||
background: rgba(145, 200, 189, 0.16);
|
||||
color: #bfe0d9;
|
||||
font-family: var(--font-num);
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sx-prestart__chips span.is-clay {
|
||||
background: var(--clay-tint);
|
||||
color: var(--clay-deep);
|
||||
background: rgba(204, 143, 119, 0.17);
|
||||
color: #f0bda9;
|
||||
}
|
||||
.sx-prestart__note {
|
||||
max-width: 460px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-muted);
|
||||
color: rgba(238, 244, 242, 0.6);
|
||||
line-height: 1.55;
|
||||
margin-top: calc(var(--sp-3) * -1);
|
||||
}
|
||||
|
|
@ -1343,7 +1504,7 @@
|
|||
margin-top: var(--sp-5);
|
||||
}
|
||||
.sx-prestart__actions span {
|
||||
color: var(--text-muted);
|
||||
color: rgba(238, 244, 242, 0.58);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
|
@ -1353,7 +1514,12 @@
|
|||
display: grid;
|
||||
align-content: center;
|
||||
gap: var(--sp-4);
|
||||
padding: var(--sp-3) 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: var(--sp-4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(251, 250, 248, 0.07);
|
||||
}
|
||||
.sx-prestart__plan ol {
|
||||
list-style: none;
|
||||
|
|
@ -1378,7 +1544,7 @@
|
|||
}
|
||||
.sx-prestart__plan p {
|
||||
margin: 0;
|
||||
color: var(--text-body);
|
||||
color: rgba(238, 244, 242, 0.74);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue