/* =========================================================
   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;
  }
}