/* 따라 하는 시작 안내: 왼쪽에 도킹되는 설명 패널과, 지금 눌러야 할 것만 남기고
 * 화면을 덮는 스포트라이트.
 *
 * 패널은 오버레이가 아니라 도킹이다. 본문을 옆으로 밀어 두는 쪽이 안내를 읽으면서
 * 실제로 화면을 조작하기에 낫고, 설명이 가릴 자리를 매번 계산할 필요도 없다.
 * 그래서 설명은 타깃 옆 말풍선이 아니라 전부 이 패널에 모여 있다.
 *
 * 레일은 dashboard.css가 761px부터 그리므로 여기서도 같은 경계를 쓴다. 그 아래에서는
 * 레일이 상단 바가 되므로 패널도 하단 시트로 내려간다. */

:root {
  --guide-width: 300px;
  --guide-dim: rgba(14, 26, 24, .55);
}

/* ---------- 패널 ---------- */
.guide-panel {
  position: fixed;
  z-index: 910;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: var(--guide-width);
  padding: 20px 18px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 10px 0 30px rgba(31, 41, 51, .1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 열릴 때 포커스를 받지만, 클릭해서 들어온 경우까지 테두리를 그릴 일은 아니다.
 * 키보드로 들어왔을 때만 남긴다. */
.guide-panel:focus {
  outline: none;
}

.guide-panel:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: -2px;
}

.guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.guide-head small {
  display: block;
  color: var(--brand-dark);
  font-size: var(--fs-1);
  font-weight: 800;
}

.guide-head b {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.guide-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -6px 0 0;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--muted);
  background: none;
  font-size: var(--fs-6);
  line-height: 1;
  cursor: pointer;
}

.guide-close:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.guide-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
  contain: layout;
}

.guide-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width .2s ease;
}

.guide-body h2 {
  margin: 0 0 8px;
  font-size: var(--fs-5);
  line-height: 1.4;
  word-break: keep-all;
}

.guide-body p {
  margin: 0;
  /* U-6: this is the onboarding guide's actual instructional text. */
  color: var(--text);
  font-size: var(--fs-3);
  line-height: 1.65;
  word-break: keep-all;
}

.guide-done {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px !important;
  padding: 9px 11px;
  border-radius: var(--row-radius);
  color: var(--brand-dark) !important;
  background: var(--brand-soft);
  font-size: var(--fs-2) !important;
  font-weight: 700;
}

.guide-done::before {
  content: '✓';
}

/* 전체 순서. 지금 어디쯤인지, 앞으로 무엇이 남았는지 한 번에 보인다. */
.guide-chapters {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: guide-chapter;
}

.guide-chapters li {
  counter-increment: guide-chapter;
}

.guide-chapters button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--muted);
  background: none;
  font-size: var(--fs-2);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.guide-chapters button::before {
  display: grid;
  place-items: center;
  flex: none;
  width: 19px;
  height: 19px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  content: counter(guide-chapter);
  font-size: var(--fs-1);
  font-weight: 700;
}

.guide-chapters button:hover {
  color: var(--text);
  background: var(--surface-muted);
}

/* 지나온 챕터일 뿐 끝낸 챕터는 아니다. 체크 표시는 실제로 완료를 확인한 자리
 * (.guide-done)에만 쓴다. */
.guide-chapters [data-state="passed"] button::before {
  border-color: var(--brand-soft);
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.guide-chapters [data-state="current"] button {
  color: var(--text);
  font-weight: 800;
}

.guide-chapters [data-state="current"] button::before {
  border-color: var(--brand-dark);
  color: #fff;
  background: var(--brand-dark);
}

.guide-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.guide-actions button {
  min-height: 44px;
  border-radius: var(--control-radius);
  font-weight: 700;
  cursor: pointer;
}

.guide-actions [data-guide-prev] {
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--muted-strong);
  background: var(--surface);
}

.guide-actions [data-guide-prev]:disabled {
  color: var(--muted);
  opacity: .5;
  cursor: default;
}

.guide-actions [data-guide-next] {
  border: 1px solid var(--brand-dark);
  color: #fff;
  background: var(--brand-dark);
}

/* 할 일을 마친 단계에서만 강조한다. 그 전까지는 눌러도 되지만 재촉하지 않는다. */
.guide-actions [data-guide-next].ready {
  box-shadow: 0 0 0 3px rgba(10, 189, 163, .28);
}

/* ---------- 스포트라이트 ---------- */
/* 상자 하나가 타깃 자리에 놓이고, 화면의 나머지는 이 상자의 box-shadow가 덮는다.
 * pointer-events가 없으니 덮인 채로도 클릭은 통과한다. */
.guide-spot {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  border-radius: 12px;
  /* outline은 box-shadow보다 나중에 그려지므로 덮개 위로 올라온다. */
  outline: 2px solid var(--brand);
  box-shadow: 0 0 0 9999px var(--guide-dim);
  transition: top .16s ease, left .16s ease, width .16s ease, height .16s ease;
}

@media (prefers-reduced-motion: reduce) {
  .guide-spot,
  .guide-track span {
    transition: none;
  }
}

/* ---------- 본문 밀어내기 ---------- */
@media (min-width: 761px) {
  body[data-guide="on"][data-workspace-shell="rail"] .guide-panel {
    left: var(--rail);
  }

  body[data-guide="on"][data-workspace-shell="rail"] main {
    margin-left: calc(var(--rail) + var(--guide-width));
  }

  /* 로그인 화면에는 레일이 없다. 가운데 정렬된 로그인 카드가 패널에 가리지 않게
   * 여백만 준다. */
  body[data-guide="on"]:not([data-workspace-shell="rail"]) main {
    padding-left: calc(var(--guide-width) + 24px);
  }
}

@media (max-width: 760px) {
  .guide-panel {
    inset: auto 0 0 0;
    width: auto;
    max-height: 46vh;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(31, 41, 51, .14);
  }

  body[data-guide="on"] main {
    margin-left: 0;
    padding-bottom: 48vh;
  }
}

/* ---------- 안내를 여는 자리 ---------- */
.rail-guide-toggle {
  display: none;
}

body[data-workspace-shell="rail"] header .rail-guide-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 calc(var(--rail-inset) - 1px);
  border: 1px solid var(--rail-line);
  border-radius: var(--rail-radius);
  color: var(--rail-text);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-3);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

body[data-workspace-shell="rail"] header .rail-guide-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

body[data-workspace-shell="rail"] header .rail-guide-toggle .nav-icon {
  color: var(--brand);
}

/* 안내 입구. '새 워크스페이스' 갈래에서만 서고(index.html), 폼 위 한 줄로 물러난다.
   점선 테두리를 두른 44px 상자였을 때는 입력칸보다 먼저 눈에 들어와, 바로 만들려고
   온 사람에게까지 읽을거리를 먼저 들이밀었다. */
.auth-guide-start {
  display: block;
  margin: -4px 0 14px auto;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: none;
  font-size: var(--fs-2);
  font-weight: 700;
  cursor: pointer;
}

.auth-guide-start:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

@media (max-width: 760px) {
  /* 가로 막대에는 안내 버튼이 들어갈 폭이 없다. 대시보드의 시작 가이드 패널이
   * 그 역할을 대신한다. */
  body[data-workspace-shell="rail"] header .rail-guide-toggle {
    display: none;
  }
}