You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1142 lines
21 KiB
CSS
1142 lines
21 KiB
CSS
/* =========================================================
|
|
아리(Ari) — Lumi 따뜻한 테마
|
|
크림→버터 그라데이션 · 소프트 라운드 카드 · 옐로우 액센트
|
|
========================================================= */
|
|
|
|
:root {
|
|
--ink: #2a2620;
|
|
--ink-2: #5d584f;
|
|
--muted: #908a7e;
|
|
--faint: #b6afa1;
|
|
|
|
--card: rgba(255, 253, 247, 0.74);
|
|
--card-solid: #fbf7ee;
|
|
--card-2: #f3eee2;
|
|
--inset: rgba(255, 255, 255, 0.5);
|
|
--line: rgba(42, 38, 28, 0.10);
|
|
--line-2: rgba(42, 38, 28, 0.16);
|
|
|
|
--yellow: #f3c63f;
|
|
--yellow-deep: #ecbb27;
|
|
--yellow-soft: #f8e6a4;
|
|
|
|
--dark: #272320;
|
|
--dark-2: #322d28;
|
|
--on-dark: #f6f1e6;
|
|
--on-dark-mut: #a39c8f;
|
|
|
|
/* 따뜻한 톤 보조색 (낮은 채도) */
|
|
--terra: #cf8a55;
|
|
--sage: #8f9c64;
|
|
--dusty: #8190ab;
|
|
|
|
--r-frame: 40px;
|
|
--r-card: 26px;
|
|
--r-sm: 16px;
|
|
|
|
--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
|
|
0 14px 34px -22px rgba(60, 50, 20, 0.30);
|
|
|
|
--font: "Onest", "Pretendard", -apple-system, BlinkMacSystemFont,
|
|
"Apple SD Gothic Neo", system-ui, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
font-family: var(--font);
|
|
color: var(--ink);
|
|
background: radial-gradient(120% 120% at 85% 110%, #b7b3ab 0%, #9a9ca3 55%, #909298 100%);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
letter-spacing: -0.012em;
|
|
word-break: keep-all;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30px;
|
|
}
|
|
button {
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
input {
|
|
font-family: inherit;
|
|
}
|
|
.ic {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---------------- 프레임 ---------------- */
|
|
.frame {
|
|
width: 100%;
|
|
max-width: 1480px;
|
|
border-radius: var(--r-frame);
|
|
padding: 28px 34px 34px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(90% 120% at 100% 105%, rgba(246, 217, 121, 0.92) 0%, rgba(247, 232, 178, 0) 55%),
|
|
linear-gradient(146deg, #edeae4 0%, #f1ead9 44%, #f6e6a8 100%);
|
|
box-shadow: 0 40px 90px -40px rgba(30, 25, 10, 0.55),
|
|
0 2px 0 rgba(255, 255, 255, 0.5) inset;
|
|
}
|
|
|
|
/* ---------------- 상단바 ---------------- */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 26px;
|
|
}
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 22px 10px 16px;
|
|
border: 1.5px solid var(--line-2);
|
|
border-radius: 999px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
background: rgba(255, 255, 255, 0.28);
|
|
}
|
|
.brand .spark {
|
|
width: 17px;
|
|
height: 17px;
|
|
border-radius: 5px;
|
|
background: var(--ink);
|
|
position: relative;
|
|
transform: rotate(45deg);
|
|
}
|
|
.brand .spark::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 4px;
|
|
border-radius: 2px;
|
|
background: var(--yellow);
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin: 0 auto;
|
|
padding: 6px;
|
|
background: rgba(255, 255, 255, 0.42);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
border-radius: 999px;
|
|
box-shadow: 0 8px 24px -18px rgba(60, 50, 20, 0.4);
|
|
}
|
|
.nav a {
|
|
text-decoration: none;
|
|
color: var(--ink-2);
|
|
font-size: 14.5px;
|
|
font-weight: 500;
|
|
padding: 10px 17px;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.nav a:hover {
|
|
color: var(--ink);
|
|
}
|
|
.nav a.active {
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
}
|
|
.nav a .badge {
|
|
margin-left: 6px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
border-radius: 999px;
|
|
padding: 1px 6px;
|
|
}
|
|
.top-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
.set-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14.5px;
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
padding: 11px 17px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
}
|
|
.set-btn .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.icon-circ {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
color: var(--ink);
|
|
position: relative;
|
|
}
|
|
.icon-circ .ic {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
.icon-circ.dot::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 11px;
|
|
right: 12px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--yellow-deep);
|
|
border: 2px solid #fff;
|
|
}
|
|
.icon-circ.avatar {
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ---------------- 헤더 ---------------- */
|
|
.head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
margin: 6px 0 22px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hello {
|
|
font-size: clamp(36px, 4.4vw, 58px);
|
|
font-weight: 400;
|
|
letter-spacing: -0.035em;
|
|
line-height: 1;
|
|
margin: 0 0 12px;
|
|
}
|
|
.hello b {
|
|
font-weight: 600;
|
|
}
|
|
.hello .sun {
|
|
font-size: 0.7em;
|
|
}
|
|
.hello-sub {
|
|
font-size: 15.5px;
|
|
color: var(--ink-2);
|
|
margin: 0;
|
|
}
|
|
.hello-sub b {
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
}
|
|
.kpis {
|
|
display: flex;
|
|
gap: 28px;
|
|
}
|
|
.kpi {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.kpi-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.kpi-ic {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 9px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
color: var(--ink);
|
|
}
|
|
.kpi-ic .ic {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.kpi-num {
|
|
font-size: 46px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.05em;
|
|
line-height: 0.8;
|
|
}
|
|
.kpi-label {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-top: 8px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
/* ---------------- 커맨드바 ---------------- */
|
|
.cmd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 999px;
|
|
padding: 9px 9px 9px 22px;
|
|
box-shadow: var(--shadow-card);
|
|
margin-bottom: 14px;
|
|
}
|
|
.cmd .spark-ic {
|
|
width: 21px;
|
|
height: 21px;
|
|
color: var(--yellow-deep);
|
|
flex-shrink: 0;
|
|
}
|
|
.cmd input {
|
|
flex: 1;
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
font-size: 16px;
|
|
color: var(--ink);
|
|
padding: 8px 0;
|
|
min-width: 0;
|
|
}
|
|
.cmd input::placeholder {
|
|
color: var(--faint);
|
|
}
|
|
.cmd .mic {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
color: var(--ink-2);
|
|
flex-shrink: 0;
|
|
}
|
|
.cmd .mic .ic {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
.cmd .send {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
flex-shrink: 0;
|
|
}
|
|
.cmd .send .ic {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
.chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 9px;
|
|
margin-bottom: 26px;
|
|
}
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13.5px;
|
|
font-weight: 500;
|
|
color: var(--ink-2);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
border-radius: 999px;
|
|
padding: 9px 15px;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.chip .ic {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--yellow-deep);
|
|
}
|
|
.chip:hover {
|
|
background: #fff;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* ---------------- 그리드 ---------------- */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-areas:
|
|
"brief brief sched meeting"
|
|
"tasks goals sched meeting"
|
|
"health finance auto know";
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
.brief { grid-area: brief; }
|
|
.sched { grid-area: sched; }
|
|
.meeting { grid-area: meeting; }
|
|
.tasks { grid-area: tasks; }
|
|
.goals { grid-area: goals; }
|
|
.health { grid-area: health; }
|
|
.finance { grid-area: finance; }
|
|
.auto { grid-area: auto; }
|
|
.know { grid-area: know; }
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
border-radius: var(--r-card);
|
|
padding: 22px;
|
|
box-shadow: var(--shadow-card);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
}
|
|
.card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.card-ic {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 11px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
color: var(--ink);
|
|
flex-shrink: 0;
|
|
}
|
|
.card-ic .ic {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.card-ic.y {
|
|
background: var(--yellow);
|
|
border-color: transparent;
|
|
}
|
|
.card-tt {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.card-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.card-sub {
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
margin-top: 1px;
|
|
}
|
|
.card-act {
|
|
margin-left: auto;
|
|
}
|
|
.ghost-btn {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--ink-2);
|
|
padding: 7px 13px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
.ghost-btn .ic {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.ghost-btn:hover {
|
|
background: #fff;
|
|
}
|
|
.expand {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
color: var(--ink);
|
|
}
|
|
.expand .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
/* ---------- 아침 브리핑 ---------- */
|
|
.brief-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.brief-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-radius: var(--r-sm);
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
}
|
|
.brief-stat .bs-ic {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--yellow-soft);
|
|
color: var(--ink);
|
|
flex-shrink: 0;
|
|
}
|
|
.brief-stat .bs-ic .ic {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
.brief-stat b {
|
|
display: block;
|
|
font-size: 19px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.05;
|
|
white-space: nowrap;
|
|
}
|
|
.brief-stat > div {
|
|
min-width: 0;
|
|
}
|
|
.brief-stat span {
|
|
font-size: 11.5px;
|
|
color: var(--muted);
|
|
display: block;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.ari-note {
|
|
display: flex;
|
|
gap: 13px;
|
|
padding: 16px 18px;
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
border-radius: var(--r-sm);
|
|
}
|
|
.ari-note .ava {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.ari-note .ava .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.ari-note p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
.ari-note p b {
|
|
color: var(--yellow);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- 할 일 ---------- */
|
|
.task-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
padding: 11px 6px;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.14s;
|
|
}
|
|
.task-row:hover {
|
|
background: var(--inset);
|
|
}
|
|
.check {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 8px;
|
|
border: 2px solid var(--line-2);
|
|
flex-shrink: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
transition: 0.14s;
|
|
}
|
|
.check .ic {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--ink);
|
|
opacity: 0;
|
|
}
|
|
.check.done {
|
|
background: var(--yellow);
|
|
border-color: transparent;
|
|
}
|
|
.check.done .ic {
|
|
opacity: 1;
|
|
}
|
|
.task-main {
|
|
min-width: 0;
|
|
}
|
|
.task-title {
|
|
font-size: 14.5px;
|
|
font-weight: 500;
|
|
}
|
|
.task-row.is-done .task-title {
|
|
color: var(--faint);
|
|
text-decoration: line-through;
|
|
}
|
|
.task-meta {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin-top: 2px;
|
|
}
|
|
.task-meta .prio {
|
|
color: var(--terra);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- 일정 ---------- */
|
|
.sched-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.sched-row {
|
|
display: grid;
|
|
grid-template-columns: 46px 4px 1fr;
|
|
gap: 12px;
|
|
padding: 11px 0;
|
|
}
|
|
.sched-time {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--ink-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.sched-line {
|
|
border-radius: 999px;
|
|
width: 4px;
|
|
}
|
|
.sl-y { background: var(--yellow); }
|
|
.sl-t { background: var(--terra); }
|
|
.sl-s { background: var(--sage); }
|
|
.sl-d { background: var(--dusty); }
|
|
.sched-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.sched-meta {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin-top: 2px;
|
|
}
|
|
.sched-row.soon {
|
|
background: var(--yellow-soft);
|
|
border-radius: 12px;
|
|
padding: 11px 10px;
|
|
margin: 0 -10px;
|
|
}
|
|
.conflict {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
margin-top: 12px;
|
|
padding: 13px 14px;
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
border-radius: var(--r-sm);
|
|
font-size: 12.5px;
|
|
color: var(--ink-2);
|
|
line-height: 1.45;
|
|
}
|
|
.conflict .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
color: var(--terra);
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* ---------- 미팅 (다크 패널) ---------- */
|
|
.meeting {
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
border-radius: var(--r-card);
|
|
padding: 24px;
|
|
box-shadow: 0 30px 60px -28px rgba(20, 15, 5, 0.6);
|
|
}
|
|
.meeting .m-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.meeting .m-ic {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 11px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--dark-2);
|
|
color: var(--on-dark);
|
|
}
|
|
.meeting .m-ic .ic {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.meeting .m-label {
|
|
font-size: 13px;
|
|
color: var(--on-dark-mut);
|
|
flex: 1;
|
|
}
|
|
.meeting .pill-soon {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
background: var(--yellow);
|
|
padding: 5px 11px;
|
|
border-radius: 999px;
|
|
}
|
|
.meeting .m-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.meeting .m-when {
|
|
font-size: 13.5px;
|
|
color: var(--on-dark-mut);
|
|
margin-bottom: 4px;
|
|
}
|
|
.meeting .m-people {
|
|
font-size: 13px;
|
|
color: var(--on-dark-mut);
|
|
margin-bottom: 20px;
|
|
}
|
|
.meeting .m-brief-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--on-dark-mut);
|
|
margin-bottom: 12px;
|
|
}
|
|
.m-brief {
|
|
list-style: none;
|
|
margin: 0 0 22px;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.m-brief li {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
color: #e8e2d6;
|
|
}
|
|
.m-brief .num {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 7px;
|
|
background: var(--dark-2);
|
|
color: var(--yellow);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.m-cta {
|
|
width: 100%;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
font-size: 14.5px;
|
|
font-weight: 600;
|
|
padding: 14px;
|
|
border-radius: 14px;
|
|
}
|
|
.m-cta .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
/* ---------- 목표 ---------- */
|
|
.goal {
|
|
margin-bottom: 18px;
|
|
}
|
|
.goal:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.goal-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.goal-title {
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 78%;
|
|
}
|
|
.goal-pct {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.bar {
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: var(--inset);
|
|
overflow: hidden;
|
|
}
|
|
.bar > span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
}
|
|
.goal-sub {
|
|
font-size: 11.5px;
|
|
color: var(--muted);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* ---------- 건강 (도넛) ---------- */
|
|
.rings {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.ring-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-align: center;
|
|
}
|
|
.ring {
|
|
--p: 0;
|
|
--c: var(--yellow);
|
|
width: 74px;
|
|
height: 74px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background:
|
|
radial-gradient(closest-side, var(--card-solid) 76%, transparent 77%),
|
|
conic-gradient(var(--c) calc(var(--p) * 1%), #e6e0d2 0);
|
|
}
|
|
.ring .ic {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--c);
|
|
}
|
|
.ring-wrap b {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
.ring-wrap span {
|
|
font-size: 11.5px;
|
|
color: var(--muted);
|
|
}
|
|
.nudge {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 12px 14px;
|
|
background: var(--yellow-soft);
|
|
border-radius: var(--r-sm);
|
|
font-size: 12.5px;
|
|
color: var(--ink);
|
|
line-height: 1.4;
|
|
}
|
|
.nudge .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
color: var(--yellow-deep);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---------- 지출 ---------- */
|
|
.fin-amt {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.fin-amt b {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.04em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.fin-amt span {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.fin-trend {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--sage);
|
|
background: rgba(143, 156, 100, 0.16);
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
}
|
|
.fin-trend .ic {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
.fin-subs-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
color: var(--faint);
|
|
margin: 18px 0 6px;
|
|
}
|
|
.fin-sub {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
font-size: 13.5px;
|
|
border-top: 1px dashed var(--line-2);
|
|
}
|
|
.fin-sub:first-of-type {
|
|
border-top: none;
|
|
}
|
|
.fin-sub b {
|
|
font-weight: 600;
|
|
}
|
|
.fin-sub .date {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
margin-left: auto;
|
|
}
|
|
.fin-sub .amt {
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- 자동화 ---------- */
|
|
.auto-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border-radius: var(--r-sm);
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
margin-bottom: 10px;
|
|
}
|
|
.auto-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.auto-ic {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 11px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--yellow-soft);
|
|
color: var(--ink);
|
|
flex-shrink: 0;
|
|
}
|
|
.auto-ic .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.auto-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.auto-when,
|
|
.auto-then {
|
|
font-size: 12.5px;
|
|
line-height: 1.45;
|
|
color: var(--ink-2);
|
|
}
|
|
.auto-when b,
|
|
.auto-then b {
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
margin-right: 5px;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.toggle {
|
|
width: 42px;
|
|
height: 24px;
|
|
border-radius: 999px;
|
|
background: var(--line-2);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transition: background 0.2s;
|
|
}
|
|
.toggle .knob {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
}
|
|
.toggle.on {
|
|
background: var(--yellow-deep);
|
|
}
|
|
.toggle.on .knob {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
/* ---------- 제2의 뇌 ---------- */
|
|
.kb-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 15px;
|
|
border-radius: 999px;
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
margin-bottom: 12px;
|
|
color: var(--faint);
|
|
font-size: 13.5px;
|
|
cursor: text;
|
|
}
|
|
.kb-search .ic {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.kb-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px;
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
transition: background 0.14s;
|
|
}
|
|
.kb-row:hover {
|
|
background: var(--inset);
|
|
}
|
|
.kb-ic {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 11px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
color: var(--ink-2);
|
|
flex-shrink: 0;
|
|
}
|
|
.kb-ic .ic {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.kb-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.kb-title {
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
}
|
|
.kb-src {
|
|
font-size: 11.5px;
|
|
color: var(--muted);
|
|
margin-top: 1px;
|
|
}
|
|
.kb-tag {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--ink-2);
|
|
background: var(--inset);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---------------- 반응형 ---------------- */
|
|
@media (max-width: 1240px) {
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-areas:
|
|
"brief brief"
|
|
"sched meeting"
|
|
"tasks goals"
|
|
"health finance"
|
|
"auto know";
|
|
}
|
|
}
|
|
@media (max-width: 720px) {
|
|
body {
|
|
padding: 12px;
|
|
}
|
|
.frame {
|
|
padding: 18px 14px 22px;
|
|
border-radius: 26px;
|
|
}
|
|
.nav,
|
|
.set-btn span {
|
|
display: none;
|
|
}
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"brief" "sched" "meeting" "tasks" "goals" "health" "finance" "auto" "know";
|
|
}
|
|
.kpis {
|
|
gap: 18px;
|
|
}
|
|
}
|