/* 체험판 (프로젝트 만들기 · 폴리오 과정) — 서버에 아무것도 보내지 않는 연습판 */

.demo-section {
  padding-bottom: var(--section-gap);
}

.demo-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  align-items: end;
  margin-bottom: var(--space-7);
}

@media (max-width: 960px) {
  .demo-section__head { grid-template-columns: 1fr; }
}

.demo {
  border: 1px solid var(--color-line-strong);
}

.demo__notice {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* 단계 표시 */
.demo__steps {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-line);
  scrollbar-width: none;
}

.demo__steps::-webkit-scrollbar { display: none; }

.demo__step {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-right: 1px solid var(--color-line);
}

.demo__step:last-child { border-right: 0; }

.demo__step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.demo__step.is-current {
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.demo__step.is-current .demo__step-num,
.demo__step.is-done .demo__step-num {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.demo__who {
  margin-left: var(--space-1);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

/* 본문 */
.demo__body {
  padding: clamp(1.25rem, 1rem + 2vw, 3rem);
  min-height: 420px;
}

.demo__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.demo__lead {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.demo__grid {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.demo__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  align-items: start;
}

@media (max-width: 760px) {
  .demo__cols { grid-template-columns: 1fr; }
}

.demo__field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

.demo__hint {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.demo__error {
  margin-top: var(--space-4);
  font-size: var(--text-small);
}

.demo__error::before { content: "— "; }

.demo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.demo__text-btn {
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 고르는 칩 (체험판 안) */
.demo .chips .chip {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-small);
  min-height: 36px;
}

.chip:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* 줄 목록 */
.demo-rows {
  border-top: 1px solid var(--color-line);
}

.demo-rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-small);
}

.demo-rows__sub {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
}

.demo-rows__remove {
  width: 32px;
  height: 32px;
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

/* 카드 */
.demo-card {
  border: 1px solid var(--color-line);
  padding: var(--space-5);
}

.demo-card--strong {
  border-color: var(--color-line-strong);
}

.demo-card__label {
  color: var(--color-text-muted);
}

.demo-card__title {
  margin-top: var(--space-2);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
}

/* 고를 수 있는 카드 */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.pick-card {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.pick-card:hover { border-color: #9a9a9a; }

.pick-card[aria-pressed="true"] {
  border-color: var(--color-line-strong);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}

.pick-card__name {
  font-weight: var(--weight-bold);
}

.pick-card__sub {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.pick-card__tag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 2px var(--space-2);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
}

/* 진행 막대 — 채운 칸 = 한 만큼, 진한 회색 = 오늘까지 해야 할 만큼 */
.bar {
  position: relative;
  height: 8px;
  background: #efefef;
  overflow: hidden;
}

.bar__plan,
.bar__done {
  position: absolute;
  inset: 0 auto 0 0;
  transition: width var(--duration-base) var(--ease-out);
}

.bar__plan { background: #c9c9c9; }
.bar__done { background: var(--color-text); }

.bar--thin { height: 4px; }

/* 큰 숫자 */
.big-num {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.stepper__input {
  width: 6rem;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--color-line-strong);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  background: transparent;
}

.stepper__input:focus { outline: none; }

/* 주차별 계획 막대 그래프 */
.week-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 96px;
  margin-top: var(--space-4);
}

.week-chart__bar {
  flex: 1;
  background: #d7d7d7;
  min-height: 2px;
}

.week-chart__bar.is-now { background: var(--color-text); }

.week-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* 날짜 바(시간 여행) */
.day-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #f5f5f5;
  font-size: var(--text-small);
}

/* 보고서 미리보기 — 글 대신 회색 줄 */
.para {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-4);
}

.para__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.para__num {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.para__title {
  font-weight: var(--weight-bold);
}

.para__share {
  margin-left: auto;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.para__lines {
  margin-top: var(--space-3);
  display: grid;
  gap: 8px;
}

.para__lines > span {
  height: 9px;
  background: #ececec;
}

.blank {
  display: inline;
  padding: 1px 6px;
  background: #ececec;
  font-weight: var(--weight-bold);
}

.status {
  display: inline-block;
  min-width: 5.5em;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-line-strong);
  font-size: 0.75rem;
  text-align: center;
}

.status--met {
  background: var(--color-text);
  color: var(--color-bg);
}

.status--none {
  border-style: dashed;
  color: var(--color-text-muted);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--text-small);
}

.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-text);
}

.demo-done {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* 체험판 버튼은 한글 문장이라 대문자 · 넓은 자간을 쓰지 않는다 ('이 Folio 로 쓸게요') */
.demo .btn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--text-small);
}