/* =====================================================
   금동산 Design System v0.2 — Components
   토스 스타일: 큰 라디우스 · 두꺼운 폰트 · 그림자 절제
   ===================================================== */

/* ── Buttons ──────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  border: none;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--border); }
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--primary);
  color: var(--ink);            /* 카카오 패턴: 검정 텍스트 */
}
.btn--primary:hover { background: var(--primary-hover); }

/* 호환: 기존 .btn--gold 도 primary로 매핑 */
.btn--gold {
  background: var(--primary);
  color: var(--ink);
}
.btn--gold:hover { background: var(--primary-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface-alt); }

.btn--dark-ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.btn--dark-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.btn--danger {
  background: var(--error);
  color: #FFFFFF;
}
.btn--danger:hover { background: #D9333F; }

.btn--lg {
  height: 56px;
  padding: 0 var(--sp-7);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  border-radius: var(--r-lg);
}

.btn--sm {
  height: 36px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-14);
  border-radius: var(--r-sm);
}

.btn--block { width: 100%; }

.btn:disabled,
.btn[disabled] {
  background: var(--surface-alt);
  color: var(--text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* ── Chips & Badges ──────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 28px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--text);
  white-space: nowrap;
}

.chip--brand,
.chip--gold {  /* 호환: gold → brand */
  background: var(--primary-soft);
  color: var(--primary-deep);
}

.chip--success { background: var(--success-soft); color: var(--success); }
.chip--warning { background: var(--warning-soft); color: #B36900; }
.chip--error   { background: var(--error-soft);   color: var(--error); }
.chip--info    { background: var(--info-soft);    color: var(--info); }

.chip--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

/* ── Card ────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.card--shadow {
  border: none;
  box-shadow: var(--sh-1);
}
.card--shadow:hover { box-shadow: var(--sh-2); }

.card--flat {
  background: var(--canvas);
  border: none;
}

.card__title {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.2px;
}

.card__subtitle {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}

/* ── KPI ─────────────────────────────────────────── */

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt);
  border-radius: var(--r-md);
  min-width: 0;
}

.kpi--brand,
.kpi--gold {  /* 호환 */
  background: var(--primary-soft);
}
.kpi--brand .kpi__value,
.kpi--gold .kpi__value {
  color: var(--primary-deep);
}

.kpi__label {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.kpi__value {
  font-family: var(--font-num);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: -0.6px;
  color: var(--ink);
}

/* ── Form ────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.field__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.field__label--required::after {
  content: ' *';
  color: var(--error);
}

.field__hint {
  font-size: var(--fs-13);
  color: var(--text-tertiary);
}

.input {
  height: 52px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-16);
  font-family: inherit;
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--dur-fast),
              background var(--dur-fast);
  width: 100%;
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
}

.input-group {
  display: flex;
  align-items: center;
  background: var(--surface-alt);
  border-radius: var(--r-md);
  padding-right: var(--sp-4);
}
.input-group .input {
  background: transparent;
  flex: 1;
}
.input-group__suffix {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}

.input-row { display: grid; gap: var(--sp-3); }
.input-row--2 { grid-template-columns: 1fr 1fr; }

.radio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  background: var(--surface-alt);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast),
              color var(--dur-fast);
  user-select: none;
}
.radio.is-checked {
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: var(--fw-semibold);
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }

/* ── Stepper ─────────────────────────────────────── */

.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
}

.step.is-active { color: var(--ink); font-weight: var(--fw-bold); }
.step.is-active .step__num {
  background: var(--primary);
  color: var(--ink);
}
.step.is-done .step__num {
  background: var(--primary-deep);
  color: #FFFFFF;
}

.step__bar {
  flex: 1;
  height: 2px;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
}
.step__bar.is-done { background: var(--primary-deep); }

/* ── Tabs ────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.tab {
  padding: var(--sp-4) 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast);
}
.tab:hover { color: var(--text); }
.tab.is-active {
  color: var(--ink);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--primary);
}

/* ── App nav ─────────────────────────────────────── */

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface);
}

.app-nav__brand {
  font-size: var(--fs-18);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.app-nav__brand em {
  color: var(--primary-deep);
  font-style: normal;
}

.app-nav__menu {
  display: flex;
  gap: var(--sp-1);
  flex: 1;
  margin-left: var(--sp-7);
}

.app-nav__item {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.app-nav__item:hover { background: var(--surface-alt); }
.app-nav__item.is-active {
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: var(--fw-semibold);
}

.app-nav__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.app-nav__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}

/* ── Empty ──────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  gap: var(--sp-3);
}
.empty__icon { font-size: 48px; }
.empty__title {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.empty__desc {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}

/* ── Toast ──────────────────────────────────────── */

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  background: var(--ink);
  color: #FFFFFF;
}
.toast--success { background: var(--success); }
.toast--brand   { background: var(--primary); color: var(--ink); }
.toast--error   { background: var(--error); }

/* ── Score bar ──────────────────────────────────── */

.score-bar {
  height: 6px;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.score-bar__fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.score-bar__fill--mute   { background: var(--text-tertiary); }
.score-bar__fill--accent { background: var(--primary-deep); }
/* 하위호환 */
.score-bar__fill--gold   { background: var(--primary-deep); }

/* ── Goal Card ──────────────────────────────────── */

.goal-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-7);
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary-50) 100%);
  border-radius: var(--r-xl);
}

.goal-card__purpose {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--primary-deep);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.goal-card__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: var(--sp-2) 0 var(--sp-3);
  letter-spacing: -0.4px;
}

.goal-card__chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.goal-card__chips .chip {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}

.goal-card__kpis {
  display: flex;
  gap: var(--sp-6);
  padding-left: var(--sp-6);
  border-left: 1px solid rgba(184, 130, 26, 0.18);
}

.goal-card__kpi-label {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.goal-card__kpi-value {
  font-family: var(--font-num);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.3px;
}

/* ── Check item · Rating ───────────────────────── */

.check-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.check-item__cat {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.check-item__q {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.check-item__sub {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin-top: 2px;
}

.rating { display: flex; gap: var(--sp-1); }
.rating__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-tertiary);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rating__dot.is-on {
  background: var(--primary);
  color: var(--ink);
}

/* ── Map ────────────────────────────────────────── */

.map-placeholder {
  position: relative;
  background: linear-gradient(135deg, #F2F4F6 0%, #E5E8EB 100%);
}

.map-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  background: var(--primary-deep);
  color: #FFFFFF;
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  box-shadow: var(--sh-2);
}
.map-pin span { transform: rotate(45deg); display: block; }

.map-pin--brand,
.map-pin--gold {  /* 하위호환 별칭 */
  background: var(--primary);
  color: var(--ink);
}