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.
1010 lines
18 KiB
CSS
1010 lines
18 KiB
CSS
/* =========================================================
|
|
Lumi — People OS 대시보드
|
|
따뜻한 크림→버터 그라데이션 · 소프트 라운드 카드 · 옐로우 액센트
|
|
========================================================= */
|
|
|
|
:root {
|
|
--ink: #2a2620;
|
|
--ink-2: #5d584f;
|
|
--muted: #908a7e;
|
|
--faint: #b6afa1;
|
|
|
|
--card: rgba(255, 253, 247, 0.72);
|
|
--card-solid: #fbf7ee;
|
|
--card-2: #f3eee2;
|
|
--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;
|
|
|
|
--r-frame: 40px;
|
|
--r-card: 28px;
|
|
--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);
|
|
--shadow-pop: 0 24px 60px -28px rgba(60, 45, 10, 0.45);
|
|
|
|
--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: #9c9ea5;
|
|
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;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 34px;
|
|
}
|
|
button {
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
.ic {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
/* ---------------- 프레임 ---------------- */
|
|
.frame {
|
|
width: 100%;
|
|
max-width: 1480px;
|
|
border-radius: var(--r-frame);
|
|
padding: 30px 36px 36px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(90% 120% at 100% 105%, rgba(246, 217, 121, 0.95) 0%, rgba(247, 232, 178, 0.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: 18px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 11px 24px 11px 18px;
|
|
border: 1.5px solid var(--line-2);
|
|
border-radius: 999px;
|
|
font-size: 23px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
.brand .spark {
|
|
width: 16px;
|
|
height: 16px;
|
|
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.4);
|
|
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 18px;
|
|
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);
|
|
}
|
|
.top-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.set-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14.5px;
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
padding: 11px 18px;
|
|
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);
|
|
}
|
|
|
|
/* ---------------- 헤더 / 인사 ---------------- */
|
|
.hello {
|
|
font-size: clamp(40px, 5.4vw, 70px);
|
|
font-weight: 400;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
margin: 4px 0 30px;
|
|
}
|
|
.hello b {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------------- 통계 스트립 ---------------- */
|
|
.stats {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 40px;
|
|
margin-bottom: 26px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.seg-wrap {
|
|
flex: 1;
|
|
min-width: 420px;
|
|
}
|
|
.seg-labels {
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: var(--ink-2);
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
.seg-labels span {
|
|
white-space: nowrap;
|
|
}
|
|
.seg-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
height: 56px;
|
|
}
|
|
.seg {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.seg.dark {
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
}
|
|
.seg.yellow {
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
}
|
|
.seg.hatch {
|
|
color: var(--ink-2);
|
|
background:
|
|
repeating-linear-gradient(
|
|
-50deg,
|
|
rgba(255, 255, 255, 0.85) 0 8px,
|
|
rgba(255, 255, 255, 0.35) 8px 16px
|
|
);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
}
|
|
.seg.ghost {
|
|
color: var(--muted);
|
|
border: 1.5px solid var(--line-2);
|
|
background: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.kpis {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
.kpi {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.kpi-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
}
|
|
.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: 52px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.05em;
|
|
line-height: 0.8;
|
|
}
|
|
.kpi-label {
|
|
font-size: 13.5px;
|
|
color: var(--muted);
|
|
margin-top: 9px;
|
|
padding-left: 41px;
|
|
}
|
|
|
|
/* ---------------- 메인 그리드 ---------------- */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 1.15fr 1.15fr 1.15fr;
|
|
grid-template-areas:
|
|
"profile progress tracker right"
|
|
"list calendar calendar right";
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
.rightcol {
|
|
grid-area: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
.profile {
|
|
grid-area: profile;
|
|
}
|
|
.list-card {
|
|
grid-area: list;
|
|
}
|
|
.progress {
|
|
grid-area: progress;
|
|
}
|
|
.tracker {
|
|
grid-area: tracker;
|
|
}
|
|
|
|
.calendar {
|
|
grid-area: calendar;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
border-radius: var(--r-card);
|
|
padding: 24px;
|
|
box-shadow: var(--shadow-card);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
}
|
|
.card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 18px;
|
|
}
|
|
.card-title {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.expand {
|
|
width: 40px;
|
|
height: 40px;
|
|
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);
|
|
transition: transform 0.18s, background 0.18s;
|
|
}
|
|
.expand .ic {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.expand:hover {
|
|
transform: rotate(8deg);
|
|
background: #fff;
|
|
}
|
|
|
|
/* ---------- 프로필 ---------- */
|
|
.profile {
|
|
position: relative;
|
|
border-radius: var(--r-card);
|
|
overflow: hidden;
|
|
min-height: 408px;
|
|
box-shadow: var(--shadow-card);
|
|
background: linear-gradient(160deg, #d7d1c5 0%, #c7c0b2 55%, #bdb6a6 100%);
|
|
}
|
|
.profile image-slot {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
--is-bg: transparent;
|
|
}
|
|
.profile::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
transparent 42%,
|
|
rgba(18, 15, 10, 0.62) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.profile-info {
|
|
position: absolute;
|
|
left: 22px;
|
|
right: 22px;
|
|
bottom: 20px;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
pointer-events: none;
|
|
}
|
|
.profile-info b {
|
|
display: block;
|
|
font-size: 23px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.profile-info span {
|
|
font-size: 13.5px;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
.salary {
|
|
pointer-events: auto;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
padding: 11px 18px;
|
|
border-radius: 999px;
|
|
border: 1.5px solid rgba(255, 255, 255, 0.65);
|
|
background: rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(4px);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- 리스트 / 아코디언 ---------- */
|
|
.list-card {
|
|
padding: 8px 22px;
|
|
}
|
|
.acc {
|
|
border-bottom: 1px dashed var(--line-2);
|
|
}
|
|
.acc:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.acc-head {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
}
|
|
.acc-head .chev {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--muted);
|
|
transition: transform 0.2s;
|
|
}
|
|
.acc.open .acc-head .chev {
|
|
transform: rotate(180deg);
|
|
}
|
|
.acc-body {
|
|
display: none;
|
|
padding-bottom: 16px;
|
|
}
|
|
.acc.open .acc-body {
|
|
display: block;
|
|
}
|
|
.device {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
}
|
|
.device .thumb {
|
|
width: 52px;
|
|
height: 40px;
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
background: #d9d4c8;
|
|
flex-shrink: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #8a8576;
|
|
}
|
|
.device .thumb .ic {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
.device-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
.device-main b {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
}
|
|
.device-main span {
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.device .more {
|
|
margin-left: auto;
|
|
color: var(--muted);
|
|
padding: 6px;
|
|
}
|
|
|
|
/* ---------- 진행(바차트) ---------- */
|
|
.work-h {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.work-h b {
|
|
font-size: 46px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.04em;
|
|
line-height: 0.9;
|
|
}
|
|
.work-h span {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
line-height: 1.25;
|
|
}
|
|
.chart {
|
|
margin-top: 26px;
|
|
height: 168px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
position: relative;
|
|
}
|
|
.chart::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 30px;
|
|
border-top: 1.5px dashed var(--line-2);
|
|
}
|
|
.col {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
.col .bar {
|
|
width: 11px;
|
|
border-radius: 999px;
|
|
background: var(--ink);
|
|
}
|
|
.col.ghost .bar {
|
|
background:
|
|
repeating-linear-gradient(
|
|
-45deg,
|
|
var(--line-2) 0 4px,
|
|
transparent 4px 8px
|
|
);
|
|
}
|
|
.col.peak .bar {
|
|
background: var(--yellow);
|
|
}
|
|
.col .dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--ink);
|
|
margin-bottom: -19px;
|
|
}
|
|
.col.ghost .dot,
|
|
.col.nodot .dot {
|
|
visibility: hidden;
|
|
}
|
|
.col .day {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
}
|
|
.tip {
|
|
position: absolute;
|
|
top: -2px;
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
padding: 5px 11px;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- 타임 트래커 ---------- */
|
|
.tracker .dial-wrap {
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 6px 0 18px;
|
|
}
|
|
.dial {
|
|
--p: 70;
|
|
width: 210px;
|
|
height: 210px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
position: relative;
|
|
background:
|
|
radial-gradient(closest-side, var(--card-solid) 79%, transparent 80%),
|
|
conic-gradient(var(--yellow) calc(var(--p) * 1%), #e6e0d2 0);
|
|
}
|
|
.dial::before {
|
|
/* 눈금 링 */
|
|
content: "";
|
|
position: absolute;
|
|
inset: 18px;
|
|
border-radius: 50%;
|
|
background:
|
|
repeating-conic-gradient(
|
|
from 0deg,
|
|
var(--ink) 0deg 1.1deg,
|
|
transparent 1.1deg 6deg
|
|
);
|
|
-webkit-mask: radial-gradient(closest-side, transparent 86%, #000 87%);
|
|
mask: radial-gradient(closest-side, transparent 86%, #000 87%);
|
|
opacity: 0.55;
|
|
}
|
|
.dial .time {
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
.dial .time b {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.04em;
|
|
display: block;
|
|
}
|
|
.dial .time span {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.tracker-ctrl {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.tc {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
color: var(--ink);
|
|
}
|
|
.tc .ic {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.tc.dark {
|
|
margin-left: auto;
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* ---------- 온보딩 ---------- */
|
|
.onb-top {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: 22px;
|
|
}
|
|
.onb-top b {
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.onb-ticks {
|
|
display: flex;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--ink-2);
|
|
margin-bottom: 9px;
|
|
font-weight: 500;
|
|
}
|
|
.onb-segs {
|
|
display: flex;
|
|
gap: 6px;
|
|
height: 52px;
|
|
}
|
|
.onb-segs .s {
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.onb-segs .s.y {
|
|
background: var(--yellow);
|
|
color: var(--ink);
|
|
}
|
|
.onb-segs .s.d {
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
}
|
|
.onb-segs .s.g {
|
|
background: #cfc9bc;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ---------- 온보딩 태스크(다크) ---------- */
|
|
.task {
|
|
position: relative;
|
|
margin-top: 2px;
|
|
}
|
|
.task .peek,
|
|
.task .peek2 {
|
|
position: absolute;
|
|
left: 14px;
|
|
right: 14px;
|
|
border-radius: 24px;
|
|
background: var(--card-2);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
.task .peek {
|
|
top: -16px;
|
|
height: 40px;
|
|
left: 22px;
|
|
right: 22px;
|
|
opacity: 0.85;
|
|
}
|
|
.task .peek2 {
|
|
top: -8px;
|
|
height: 40px;
|
|
left: 18px;
|
|
right: 18px;
|
|
}
|
|
.task .panel {
|
|
position: relative;
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
border-radius: 26px;
|
|
padding: 22px 22px 12px;
|
|
box-shadow: 0 30px 60px -30px rgba(20, 15, 5, 0.7);
|
|
}
|
|
.task .panel-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.task .panel-top .t {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.task .panel-top .frac {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: var(--yellow);
|
|
}
|
|
.t-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
padding: 12px 0;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
.t-row:first-of-type {
|
|
border-top: none;
|
|
}
|
|
.t-ic {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #423c34;
|
|
color: #fbf7ee;
|
|
flex-shrink: 0;
|
|
}
|
|
.t-row.done .t-ic {
|
|
background: var(--dark-2);
|
|
color: var(--on-dark-mut);
|
|
}
|
|
.t-ic .ic {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.t-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.t-main b {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
display: block;
|
|
}
|
|
.t-main span {
|
|
font-size: 12.5px;
|
|
color: var(--on-dark-mut);
|
|
}
|
|
.t-row.done .t-main b {
|
|
color: var(--on-dark-mut);
|
|
text-decoration: line-through;
|
|
}
|
|
.t-check {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1.8px solid rgba(255, 255, 255, 0.22);
|
|
}
|
|
.t-check.on {
|
|
background: var(--yellow);
|
|
border-color: transparent;
|
|
color: var(--ink);
|
|
}
|
|
.t-check .ic {
|
|
width: 15px;
|
|
height: 15px;
|
|
opacity: 0;
|
|
}
|
|
.t-check.on .ic {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ---------- 캘린더 ---------- */
|
|
.cal-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.cal-top .mo {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
padding: 8px 16px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
}
|
|
.cal-top .cur {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.cal-grid {
|
|
position: relative;
|
|
}
|
|
.cal-days {
|
|
display: grid;
|
|
grid-template-columns: 60px repeat(6, 1fr);
|
|
}
|
|
.cal-days .dh {
|
|
text-align: center;
|
|
padding-bottom: 14px;
|
|
}
|
|
.cal-days .dh small {
|
|
display: block;
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
}
|
|
.cal-days .dh b {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--ink-2);
|
|
}
|
|
.cal-body {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 60px repeat(6, 1fr);
|
|
grid-auto-rows: 46px;
|
|
}
|
|
.cal-body .tlabel {
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
padding-top: 2px;
|
|
}
|
|
.cal-body .gcell {
|
|
border-left: 1px dashed var(--line);
|
|
}
|
|
.evt {
|
|
position: absolute;
|
|
border-radius: 16px;
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: 0 12px 26px -16px rgba(40, 30, 10, 0.5);
|
|
}
|
|
.evt .etext b {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: block;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.evt .etext span {
|
|
font-size: 12px;
|
|
}
|
|
.evt.dark {
|
|
background: var(--dark);
|
|
color: var(--on-dark);
|
|
}
|
|
.evt.dark .etext span {
|
|
color: var(--on-dark-mut);
|
|
}
|
|
.evt.light {
|
|
background: #fff;
|
|
color: var(--ink);
|
|
}
|
|
.evt.light .etext span {
|
|
color: var(--muted);
|
|
}
|
|
.faces {
|
|
display: flex;
|
|
margin-left: auto;
|
|
}
|
|
.faces .f {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--dark);
|
|
margin-left: -9px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
.evt.light .faces .f {
|
|
border-color: #fff;
|
|
}
|
|
|
|
/* ---------------- 반응형 ---------------- */
|
|
@media (max-width: 1200px) {
|
|
.grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"profile progress"
|
|
"profile tracker"
|
|
"list right"
|
|
"calendar calendar";
|
|
}
|
|
.stats {
|
|
gap: 24px;
|
|
}
|
|
}
|
|
@media (max-width: 760px) {
|
|
body {
|
|
padding: 12px;
|
|
}
|
|
.frame {
|
|
padding: 20px 16px 24px;
|
|
border-radius: 28px;
|
|
}
|
|
.nav,
|
|
.set-btn span {
|
|
display: none;
|
|
}
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"profile" "progress" "tracker" "right" "calendar" "list";
|
|
}
|
|
.seg-wrap {
|
|
min-width: 0;
|
|
}
|
|
.stats {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|