/**
 * 페이지 레이아웃.
 *
 * - app 그리드 (main + side)
 * - 캘린더 격자
 * - 사이드 패널
 * - 개발 허브
 */

/* ===== 앱 그리드 ===== */
.app {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 100vh;
  gap: var(--space-4);
  padding: var(--space-4);
  max-width: 1400px;
  margin: 0 auto;
}

.app__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.app__side {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  overflow-y: auto;
  max-height: calc(100vh - var(--space-8));
  position: sticky;
  top: var(--space-4);
  align-self: flex-start;
}

@media (max-width: 920px) {
  .app {
    grid-template-columns: 1fr;
  }
  .app__side {
    position: static;
    max-height: none;
  }
}

/* ===== topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-wrap: wrap;
}
.topbar__divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

#topbarMonthTitle {
  font-size: var(--font-size-lg);
  font-weight: 600;
  padding: 4px 12px;
}

/* ===== 캘린더 ===== */
.calendar-wrap {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafafa;
  border-bottom: 1px solid var(--color-border);
}
.cal-header__cell {
  text-align: center;
  padding: 10px 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-sub);
}
.cal-header__cell--sun { color: var(--color-sun); }
.cal-header__cell--sat { color: var(--color-sat); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, auto);
}
.cal-cell {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  background: var(--color-surface);
  min-height: 96px;
}
.cal-cell:hover { background: #f3f4f6; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell--other-month { background: #fafafa; }
.cal-cell--other-month .cal-cell__day { color: var(--color-other-month); }
.cal-cell--today {
  background: #fffbeb;
  box-shadow: inset 0 0 0 2px #f59e0b;
}
.cal-cell--selected {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.cal-cell--today.cal-cell--selected {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.cal-cell--holiday {
  background: var(--color-holiday-bg);
}
.cal-cell--holiday.cal-cell--other-month {
  background: #fef2f2;
  opacity: 0.6;
}
.cal-cell__day {
  font-size: var(--font-size-md);
  font-weight: 500;
}
.cal-cell__day--sun, .cal-cell__day--holiday { color: var(--color-sun); }
.cal-cell__day--sat { color: var(--color-sat); }
.cal-cell__holiday {
  font-size: var(--font-size-xs);
  color: var(--color-sun);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-legend {
  display: flex;
  gap: var(--space-4);
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}

/* ===== 사이드 패널 ===== */
.side-header {
  margin-bottom: var(--space-3);
}
.side-header__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
}
.side-header__sub {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-sub);
}
.side-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* ===== 개발 허브 ===== */
.dev-hub {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}
.dev-hub__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
.dev-hub__subtitle {
  color: var(--color-text-sub);
  margin: 0 0 var(--space-6);
}
.dev-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
.dev-hub__link {
  display: block;
  padding: 10px 14px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--font-size-md);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.dev-hub__link:hover { background: #bfdbfe; text-decoration: none; }
.dev-hub__link--done { background: #d1fae5; color: var(--color-success); }
.dev-hub__link--todo {
  background: var(--color-bg);
  color: var(--color-text-muted);
  pointer-events: none;
  cursor: not-allowed;
}

.row-line {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  padding: 4px 0;
}
.row-line__label {
  color: var(--color-text-sub);
  width: 140px;
  flex-shrink: 0;
}

.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }