/* ==========================================================================
   OverGuide - 인터랙티브 앱 가이드 스타일
   --------------------------------------------------------------------------
   토큰은 css/experience-home.css 의 :root 값을 그대로 씁니다(--ink, --white,
   --blue, --cyan, --hairline, --ease-out). 이 파일은 지연 로드되므로 자체
   폴백을 함께 적어 단독으로도 깨지지 않게 합니다.
   ========================================================================== */
.og-root {
  --og-ink: var(--ink, #050711);
  --og-ink-2: var(--ink-2, #0a1020);
  --og-line: var(--hairline, rgba(247, 249, 255, .15));
  --og-line-strong: rgba(247, 249, 255, .28);
  --og-text: var(--white, #f7f9ff);
  --og-muted: #bac3d3;
  --og-accent: var(--blue, #5277ff);
  --og-accent-2: var(--cyan, #51e5ff);
  --og-ez: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  --og-r: 8px;

  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  color: var(--og-text);
}
body.og-open { overflow: hidden; }

/* 배경 딤 + 블러 */
.og-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, .72);
  backdrop-filter: blur(9px) saturate(115%);
  opacity: 0;
  transition: opacity .3s var(--og-ez);
}
.og-root[data-open] .og-backdrop { opacity: 1; }

/* 스포트라이트 밖 클릭을 막는 단계에서만 포인터를 잠급니다. */
.og-root[data-block] .og-shell { pointer-events: auto; }

/* ---- 데모 창 -------------------------------------------------------------- */
.og-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1080px, 100%);
  height: min(660px, 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--og-r);
  /* 좌상단에서 아주 옅게만 번집니다. 색을 여러 겹 깔면 창이 시끄러워지고,
     정작 봐야 할 스포트라이트가 배경과 경쟁합니다. */
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(82, 119, 255, .1), transparent 55%),
    linear-gradient(180deg, var(--og-ink-2), var(--og-ink));
  box-shadow:
    0 48px 130px rgba(0, 0, 0, .66),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  opacity: 0;
  transform: translate(var(--og-from-x, 0), var(--og-from-y, 0)) scale(var(--og-from-scale, .9));
  transform-origin: center;
  transition: opacity .26s var(--og-ez), transform .42s var(--og-ez);
}
.og-root[data-open] .og-shell { opacity: 1; transform: none; }
.og-root[data-full] .og-shell { width: 100%; height: 100%; }

.og-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  height: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
}
.og-brand { display: flex; align-items: center; gap: 8px; }
.og-brand-mark {
  width: 18px; height: 18px;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--og-accent-2), var(--og-accent));
  box-shadow: 0 2px 8px rgba(82, 119, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.og-brand b { font-size: 14px; letter-spacing: 0; }
.og-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(82, 119, 255, .5);
  background: rgba(82, 119, 255, .14);
  color: #a9bcff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}
/* 실제 창 캡처를 둘러보는 투어는 색으로도 구분합니다. */
.og-badge[data-kind="tour"] {
  border-color: rgba(81, 229, 255, .5);
  background: rgba(81, 229, 255, .13);
  color: var(--og-accent-2);
}
.og-notice {
  font-size: 11px;
  color: var(--og-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.og-tools { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; }
/* 키보드로 나가는 길. 버튼이 아니라 안내라 pointer-events 를 뺍니다. */
.og-esc {
  padding: 3px 6px;
  border: 1px solid var(--og-line);
  border-radius: 5px;
  color: var(--og-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  pointer-events: none;
}
.og-tool {
  appearance: none;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--og-line);
  border-radius: 8px;
  background: transparent;
  color: var(--og-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color .16s var(--og-ez), border-color .16s var(--og-ez);
}
.og-tool:hover { color: var(--og-text); border-color: var(--og-line-strong); }
.og-tool--close { width: 36px; padding: 0; }
.og-tool--close:hover { background: #b3262f; color: #fff; border-color: #b3262f; }

.og-stage { position: relative; min-width: 0; min-height: 0; overflow: auto; }

/* ---- 진행 패널 ----------------------------------------------------------- */
.og-progress {
  border-left: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
  padding: 15px 14px;
  overflow: auto;
  min-height: 0;
}
.og-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.og-progress-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--og-muted);
  text-transform: uppercase;
}
.og-progress-title {
  display: block;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}
.og-progress-count {
  font-size: 10px;
  color: var(--og-muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
}
.og-progress-bar {
  margin: 11px 0 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.og-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--og-accent), var(--og-accent-2));
  box-shadow: 0 0 10px rgba(81, 229, 255, .5);
  transition: width .42s var(--og-ez);
}
/* 단계 목록은 세로 레일 위에 점을 얹은 형태입니다. 레일이 있어야 "몇 개 중 어디"
   인지가 한눈에 들어옵니다. 레일은 목록 전체에 한 줄로 깔고, 각 항목은 그 위에
   불투명한 점을 올려 끊어 보이게 합니다. */
.og-progress-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.og-progress-list::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}
.og-progress-step {
  position: relative;
  padding: 7px 8px 7px 28px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--og-muted);
  line-height: 1.45;
  transition: color .2s var(--og-ez), background .2s var(--og-ez);
}
.og-progress-step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .18);
  background: var(--og-ink-2);
  box-sizing: border-box;
  transition: border-color .2s var(--og-ez), background .2s var(--og-ez);
}
.og-progress-step[data-state="done"] { color: rgba(247, 249, 255, .72); }
.og-progress-step[data-state="done"]::before {
  border-color: var(--og-accent-2);
  background: var(--og-accent-2);
}
/* 완료 표시는 점 안에 체크로. 마스크 없이 두 획을 겹쳐 그립니다. */
.og-progress-step[data-state="done"]::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 12.5px;
  width: 4px;
  height: 7px;
  border: solid var(--og-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.og-progress-step[data-state="current"] {
  background: linear-gradient(90deg, rgba(82, 119, 255, .2), rgba(82, 119, 255, .04));
  color: var(--og-text);
  font-weight: 600;
}
.og-progress-step[data-state="current"]::before {
  border-color: var(--og-accent);
  background: var(--og-accent);
  box-shadow: 0 0 0 4px rgba(82, 119, 255, .2);
  animation: og-dot 2.4s ease-in-out infinite;
}
@keyframes og-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(82, 119, 255, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(82, 119, 255, .28); }
}

/* ---- 스포트라이트 -------------------------------------------------------- */
.og-spot {
  position: fixed;
  z-index: 3;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  /* 바깥을 어둡게 하는 대신 대상만 남기는 방식: 큰 그림자로 주변을 덮습니다.
     테두리는 흰 실선 한 겹으로 경계를 또렷하게 잡고, 바깥에 아주 옅은 번짐만
     둡니다. 형광 링을 여러 겹 두르면 대상이 오히려 안 보입니다. */
  box-shadow:
    0 0 0 9999px rgba(3, 5, 12, .64),
    0 0 0 1.5px rgba(255, 255, 255, .58),
    0 0 0 6px rgba(82, 119, 255, .16);
  transition: opacity .2s var(--og-ez), left .28s var(--og-ez), top .28s var(--og-ez), width .28s var(--og-ez), height .28s var(--og-ez);
}
.og-spot[data-on] { opacity: 1; animation: og-pulse 3.2s ease-in-out infinite; }
/* 숨쉬듯 아주 얕게만. 빠르게 깜빡이면 읽는 걸 방해합니다. */
@keyframes og-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(3, 5, 12, .64),
      0 0 0 1.5px rgba(255, 255, 255, .58),
      0 0 0 5px rgba(82, 119, 255, .16);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(3, 5, 12, .64),
      0 0 0 1.5px rgba(255, 255, 255, .72),
      0 0 0 9px rgba(82, 119, 255, .1);
  }
}

/* ---- 툴팁 --------------------------------------------------------------- */
.og-tip {
  position: fixed;
  z-index: 4;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  /* 꼬리(::after)와 이어 붙기 때문에 단색입니다. 그라데이션을 깔면 회전한 사각형인
     꼬리와 색이 어긋나서 접합부가 드러납니다. */
  background: rgba(19, 25, 45, .985);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 2px 12px rgba(0, 0, 0, .34);
  opacity: 0;
  /* 위치는 전적으로 left/top 으로만 잡습니다. transform 을 위치 계산에 섞으면
     등장 애니메이션과 center 배치의 translate 가 서로 물려, 전환이 끝나지 않은
     사이 툴팁이 안내 대상 위를 덮습니다. 등장 효과는 opacity 로만 냅니다. */
  /* left/top 은 애니메이션하지 않습니다. 지연된 렌더 위치를 다음 배치 계산이
     다시 읽어 엉뚱한 크기로 자리를 잡는 일이 생깁니다. 이동은 즉시, 등장만 부드럽게. */
  transition: opacity .2s var(--og-ez);
}
.og-tip[data-on] { opacity: 1; }
.og-tip[data-placement="center"] { width: min(420px, calc(100vw - 24px)); }
.og-tip[data-placement="sheet"] { width: calc(100% - 24px); }

/* 대상을 가리키는 꼬리.
   JS 가 배치 후 실측으로 --og-nub-x/y 를 넘겨주므로, 툴팁이 화면 가장자리에서
   밀려도 꼭지점이 대상 중심을 유지합니다. 테두리와 이어 보이게 배경과 같은 색을
   쓰고, 한 변만 테두리를 남겨 툴팁 외곽선과 연결합니다. */
.og-tip[data-nub]::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: rgba(19, 25, 45, .985);
  border: 1px solid rgba(255, 255, 255, .14);
  transform: rotate(45deg);
}
.og-tip[data-nub="bottom"]::after {
  top: -6px;
  left: var(--og-nub-x, 50%);
  margin-left: -6px;
  border-right: 0;
  border-bottom: 0;
}
.og-tip[data-nub="top"]::after {
  bottom: -6px;
  left: var(--og-nub-x, 50%);
  margin-left: -6px;
  border-left: 0;
  border-top: 0;
}
.og-tip[data-nub="right"]::after {
  left: -6px;
  top: var(--og-nub-y, 50%);
  margin-top: -6px;
  border-right: 0;
  border-top: 0;
}
.og-tip[data-nub="left"]::after {
  right: -6px;
  top: var(--og-nub-y, 50%);
  margin-top: -6px;
  border-left: 0;
  border-bottom: 0;
}

/* 상단 헤더: 번호 + 얇은 진행 트랙. 장식용 색선 한 줄보다 읽을 것이 있습니다. */
.og-tip-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}
.og-tip-step {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.og-tip-step b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--og-text);
}
.og-tip-step i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--og-muted);
}
.og-tip-step[data-done] b { color: var(--og-accent-2); font-size: 14px; }
.og-tip-track {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.og-tip-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--og-accent), var(--og-accent-2));
  transition: width .34s var(--og-ez);
}
.og-tip-title {
  display: block;
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: 0;
}
.og-tip-body { margin: 0; font-size: 14px; line-height: 1.75; color: var(--og-muted); }
/* 구체적인 값·조건은 목록으로 뺍니다. "라벨: 값" 형태는 앞부분이 굵게 나와
   눈으로 표처럼 훑을 수 있습니다. */
.og-tip-list {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.og-tip-list[hidden] { display: none; }
.og-tip-item {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(247, 249, 255, .74);
}
/* 짧은 세로 획. 원형 점보다 목록의 왼쪽 정렬선이 또렷하게 잡힙니다. */
.og-tip-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: rgba(82, 119, 255, .7);
}
.og-tip-item b { font-weight: 600; color: var(--og-text); }

/* 지금 무엇을 해야 하는지. 왼쪽 굵은 획으로만 구분하고 면은 아주 옅게 깔아,
   본문과 같은 무게로 읽히지 않게 합니다. */
.og-tip-hint {
  margin: 12px 0 0;
  padding: 8px 11px 8px 12px;
  border-left: 2px solid var(--og-accent-2);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(81, 229, 255, .1), transparent);
  font-size: 11px;
  line-height: 1.55;
  color: #a6ecff;
}
.og-tip-nav {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.og-btn {
  appearance: none;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--og-line);
  border-radius: 8px;
  background: transparent;
  color: var(--og-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .16s var(--og-ez), border-color .16s var(--og-ez), transform .12s var(--og-ez);
}
.og-btn:hover { border-color: var(--og-line-strong); background: rgba(255, 255, 255, .05); }
.og-btn:active { transform: translateY(1px); }
.og-btn:disabled { opacity: .35; cursor: default; }
.og-btn:disabled:hover { background: transparent; border-color: var(--og-line); }
.og-btn:focus-visible { outline: 2px solid var(--og-accent-2); outline-offset: 2px; }
.og-btn--primary {
  background: linear-gradient(180deg, #6183ff, var(--og-accent));
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(82, 119, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.og-btn--primary:hover { background: linear-gradient(180deg, #7794ff, #5c80ff); border-color: transparent; }
.og-btn--quiet { color: var(--og-muted); border-color: transparent; margin-right: auto; }
.og-btn--quiet:hover { color: var(--og-text); background: transparent; }

/* 마무리 화면은 "다음에 할 일" 목록입니다. 버튼이 셋 넘게 붙는데 오른쪽 정렬로
   흘리면 좁은 툴팁에서 두세 줄로 어긋나게 접힙니다. 세로로 쌓아 각각 한 줄을
   차지하게 하면 선택지가 그대로 읽힙니다. */
.og-root[data-guide-state="completed"] .og-tip-nav { flex-direction: column; align-items: stretch; gap: 7px; }
.og-root[data-guide-state="completed"] .og-tip-nav .og-btn { height: 38px; justify-content: center; margin: 0; }
.og-root[data-guide-state="completed"] .og-tip-nav .og-btn--quiet { height: 32px; font-size: 11.5px; }

/* ---- 데모 앱 본체 --------------------------------------------------------
   실제 제품 창처럼 보이는 게 목적입니다. 사이드바 - 헤더 - 본문의 3단 구성을
   지키고, 각 패널은 한 가지 결정만 요구하도록 요소를 최소로 둡니다. */
.ogd {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  min-height: 100%;
}

/* 사이드바 */
.ogd-rail {
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
}
.ogd-rail-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ogd-rail-brand b { font-size: 12px; letter-spacing: -.01em; }
.ogd-rail-mark {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--og-accent-2), var(--og-accent));
  box-shadow: 0 2px 8px rgba(82, 119, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ogd-rail-nav { display: grid; gap: 2px; }
.ogd-rail-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--og-muted);
  font: inherit;
  font-size: 12px;
  cursor: default;
  transition: background .18s var(--og-ez), color .18s var(--og-ez);
}
.ogd-rail-item svg { flex: none; opacity: .75; }
.ogd-rail-item.is-on {
  background: linear-gradient(90deg, rgba(82, 119, 255, .22), rgba(82, 119, 255, .06));
  color: var(--og-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--og-accent);
}
.ogd-rail-item.is-on svg { opacity: 1; color: var(--og-accent-2); }
/* 계정 칩 - 인증 전후 상태가 창 안에 항상 보이게 */
.ogd-rail-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .22);
  transition: border-color .25s var(--og-ez), background .25s var(--og-ez);
}
.ogd-rail-user-mark {
  width: 24px; height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--og-muted);
}
.ogd-rail-user-text {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--og-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ogd-rail-user.is-on { border-color: rgba(81, 229, 255, .4); background: rgba(81, 229, 255, .08); }
.ogd-rail-user.is-on .ogd-rail-user-mark { background: var(--og-accent-2); color: var(--og-ink); }
.ogd-rail-user.is-on .ogd-rail-user-text { color: var(--og-text); }

/* 본문 헤더 */
.ogd-main { padding: 20px 26px 26px; min-width: 0; }
.ogd-head { margin-bottom: 18px; }
.ogd-crumb {
  margin: 0 0 7px;
  font-size: 9.5px;
  letter-spacing: .13em;
  color: var(--og-muted);
  text-transform: uppercase;
}
.ogd-h { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.015em; }
.ogd-sub { margin: 6px 0 0; max-width: 52ch; font-size: 12.5px; line-height: 1.6; color: var(--og-muted); }
.ogd-panels { display: grid; }
.ogd-panel { display: grid; justify-items: start; gap: 14px; align-content: start; }
.ogd-panel[hidden] { display: none; }
.ogd-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--og-muted); }

/* 아이콘 + 제목 + 설명의 3단 목록 */
.ogd-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 460px; }
.ogd-points--tight { gap: 8px; }
.ogd-point { display: flex; align-items: flex-start; gap: 11px; }
.ogd-point-mark {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: var(--og-accent-2);
}
.ogd-point-text { display: grid; gap: 2px; min-width: 0; }
.ogd-point-text strong { font-size: 12.5px; font-weight: 600; }
.ogd-point-text span { font-size: 11.5px; line-height: 1.55; color: var(--og-muted); }

.ogd-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--og-line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--og-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .16s var(--og-ez), transform .12s var(--og-ez), box-shadow .16s var(--og-ez);
}
.ogd-btn svg { opacity: .9; }
.ogd-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
.ogd-btn:active:not(:disabled) { transform: translateY(1px); }
.ogd-btn:disabled { opacity: .38; cursor: default; }
.ogd-btn:focus-visible { outline: 2px solid var(--og-accent-2); outline-offset: 2px; }
.ogd-btn--primary {
  background: linear-gradient(180deg, #6183ff, var(--og-accent));
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(82, 119, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.ogd-btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #7794ff, #5c80ff); }
.ogd-btn--primary:disabled { box-shadow: none; }

/* 입력 카드 */
.ogd-card-form {
  display: grid;
  gap: 14px;
  justify-items: start;
  width: min(400px, 100%);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ogd-field { display: grid; gap: 6px; width: 100%; }
.ogd-label { font-size: 10px; letter-spacing: .09em; color: var(--og-muted); text-transform: uppercase; }
.ogd-help { font-size: 10.5px; line-height: 1.45; color: var(--og-muted); }
.ogd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--og-line-strong);
  border-radius: 9px;
  background: rgba(0, 0, 0, .34);
  transition: border-color .18s var(--og-ez), box-shadow .18s var(--og-ez);
}
.ogd-input-wrap svg { flex: none; color: var(--og-muted); }
.ogd-input-wrap:focus-within { border-color: var(--og-accent-2); box-shadow: 0 0 0 3px rgba(81, 229, 255, .14); }
.ogd-input-wrap:focus-within svg { color: var(--og-accent-2); }
.ogd-input-wrap.is-ok { border-color: rgba(81, 229, 255, .5); }
.ogd-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--og-text);
  font: inherit;
  font-size: 13px;
}
.ogd-input:focus { outline: none; }
.ogd-input--code { letter-spacing: .42em; font-variant-numeric: tabular-nums; font-size: 15px; }

/* 런처 내려받기 카드 */
.ogd-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(440px, 100%);
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(0, 0, 0, .2);
}
.ogd-dl-mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(82, 119, 255, .3), rgba(81, 229, 255, .14));
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--og-accent-2);
}
.ogd-dl-text { display: grid; gap: 2px; min-width: 0; }
.ogd-dl-text strong { font-size: 13px; }
.ogd-dl-text span { font-size: 11px; color: var(--og-muted); }
.ogd-specs {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.ogd-specs dt { font-size: 9.5px; letter-spacing: .1em; color: var(--og-muted); text-transform: uppercase; }
.ogd-specs dd { margin: 3px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }

/* 설치 진행 */
.ogd-progress { display: grid; gap: 9px; width: min(440px, 100%); }
.ogd-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ogd-bar-label { font-size: 11.5px; color: var(--og-text); }
.ogd-bar-text { font-size: 11px; color: var(--og-muted); font-variant-numeric: tabular-nums; }
.ogd-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.ogd-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--og-accent), var(--og-accent-2));
  box-shadow: 0 0 10px rgba(81, 229, 255, .5);
  transition: width .24s linear;
}
.ogd-stages { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ogd-stage {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--og-muted);
  transition: color .2s var(--og-ez);
}
.ogd-stage-mark {
  width: 16px; height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: transparent;
  transition: background .2s var(--og-ez), border-color .2s var(--og-ez), color .2s var(--og-ez);
}
.ogd-stage.is-now { color: var(--og-text); }
.ogd-stage.is-now .ogd-stage-mark { border-color: var(--og-accent); box-shadow: 0 0 0 3px rgba(82, 119, 255, .2); }
.ogd-stage.is-done { color: rgba(247, 249, 255, .74); }
.ogd-stage.is-done .ogd-stage-mark { background: var(--og-accent-2); border-color: var(--og-accent-2); color: var(--og-ink); }

/* 제품 카드 */
.ogd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 10px; width: 100%; }
.ogd-card {
  position: relative;
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--og-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--og-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--og-ez), transform .16s var(--og-ez), background .16s var(--og-ez);
}
.ogd-card:hover { border-color: var(--og-line-strong); background: rgba(255, 255, 255, .055); transform: translateY(-1px); }
.ogd-card:focus-visible { outline: 2px solid var(--og-accent-2); outline-offset: 2px; }
.ogd-card.is-on {
  border-color: var(--ogd-accent, var(--og-accent-2));
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 1px var(--ogd-accent, var(--og-accent-2)), 0 8px 24px rgba(0, 0, 0, .35);
}
.ogd-card-mark {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: color-mix(in srgb, var(--ogd-accent, #5277ff) 22%, transparent);
  color: var(--ogd-accent, var(--og-accent-2));
}
.ogd-card-body { display: grid; gap: 3px; min-width: 0; }
.ogd-card-body strong { font-size: 13px; }
.ogd-card-body small { font-size: 10.5px; color: var(--ogd-accent, var(--og-accent-2)); letter-spacing: .01em; }
.ogd-card-body p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--og-muted); }
.ogd-chip {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--og-muted);
}
.ogd-card-tick {
  position: absolute;
  top: 11px; right: 11px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ogd-accent, var(--og-accent-2));
  color: var(--og-ink);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s var(--og-ez), transform .18s var(--og-ez);
}
.ogd-card.is-on .ogd-card-tick { opacity: 1; transform: none; }

.ogd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.ogd-foot .ogd-note { flex: 1; min-width: 180px; }

/* 실행 완료 */
.ogd-done {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(400px, 100%);
  padding: 15px 17px;
  border: 1px solid var(--ogd-accent, var(--og-accent-2));
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 0 30px -12px var(--ogd-accent, var(--og-accent-2));
}
.ogd-done-mark {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ogd-accent, var(--og-accent-2));
  color: var(--og-ink);
}
.ogd-done-text { display: grid; gap: 2px; min-width: 0; }
.ogd-done-name { font-size: 14px; }
.ogd-done-text span { color: var(--og-muted); font-size: 11px; }
.ogd-done-live {
  margin-left: auto;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 999px;
  background: var(--ogd-accent, var(--og-accent-2));
  animation: og-live 1.8s ease-in-out infinite;
}
@keyframes og-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(81, 229, 255, .5); }
  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(81, 229, 255, 0); }
}

/* ---- 반응형 ------------------------------------------------------------- */
@media (max-width: 900px) {
  .og-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .og-progress {
    border-left: 0;
    border-top: 1px solid var(--og-line);
    max-height: 132px;
  }
  .og-progress-list { grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); overflow-x: auto; }
  /* 목록이 가로로 누우면 세로 연결선은 의미가 없습니다 - 왼쪽에 선만 남습니다. */
  .og-progress-list::before { display: none; }
}
@media (max-width: 720px) {
  .og-root { padding: 0; }
  .og-shell { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .ogd { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* 사이드바를 가로 막대로 눕힙니다. 브랜드와 계정 칩은 세로 배치를 전제로 한
     여백·구분선을 갖고 있어서, 좁은 화면에서는 내비게이션만 남깁니다. */
  .ogd-rail {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .ogd-rail-brand, .ogd-rail-user { display: none; }
  .ogd-rail-nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: 4px; }
  .ogd-rail-item { flex: none; min-height: 40px; }
  .ogd-rail-item.is-on { box-shadow: inset 0 -2px 0 var(--og-accent); }
  .ogd-main { padding: 16px 16px 22px; }
  .ogd-h { font-size: 17px; }
  .ogd-grid { grid-template-columns: minmax(0, 1fr); }
  .ogd-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .og-notice { display: none; }
  /* 좁은 화면에서 창 머리띠가 넘쳐 브랜드 글자가 네 줄로 쪼개졌습니다.
     - 브랜드는 줄이되 말줄임으로 남기고
     - "전체 화면" 은 이미 전체 화면이라 의미가 없고
     - ESC 안내는 키보드가 없으니 뺍니다. */
  .og-bar { height: auto; min-height: 46px; padding: 6px 10px; }
  .og-brand { min-width: 0; }
  .og-brand b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .og-badge { flex: none; }
  .og-esc, .og-tool--full { display: none; }
  /* 터치 타깃 최소 크기 */
  .og-btn, .ogd-btn, .og-tool { min-height: 44px; }
  .og-tip-nav { justify-content: stretch; }
  .og-tip-nav .og-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .og-backdrop, .og-shell, .og-spot, .og-tip, .og-progress-fill,
  .ogd-card, .ogd-btn, .og-btn, .ogd-bar-fill,
  .ogd-rail-item, .ogd-rail-user, .ogd-stage, .ogd-stage-mark,
  .ogd-card-tick, .ogd-input-wrap, .og-progress-step { transition: none; }
  .og-spot[data-on] { animation: none; }
  .og-progress-step[data-state="current"]::before { animation: none; }
  .ogd-done-live { animation: none; }
}

/* ---- 런처 버튼 (#ecosystem 안, 통합 런처 CTA 바로 아래) ------------------- */
.guide-launch {
  --gl-line: var(--hairline, rgba(247, 249, 255, .15));
  --gl-ez: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  appearance: none;
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gl-line);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(82, 119, 255, .16), rgba(81, 229, 255, .07) 62%, transparent);
  color: var(--white, #f7f9ff);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--gl-ez), transform .18s var(--gl-ez), background .18s var(--gl-ez);
}
.guide-launch:hover {
  border-color: rgba(81, 229, 255, .55);
  transform: translateY(-1px);
  background: linear-gradient(120deg, rgba(82, 119, 255, .24), rgba(81, 229, 255, .12) 62%, transparent);
}
.guide-launch:active { transform: translateY(1px); }
.guide-launch:focus-visible { outline: 2px solid var(--cyan, #51e5ff); outline-offset: 3px; }
.guide-launch__mark {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--cyan, #51e5ff), var(--blue, #5277ff));
}
.guide-launch__mark svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--ink, #050711);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guide-launch__copy { display: grid; gap: 2px; min-width: 0; }
.guide-launch__copy strong { font-size: 13.5px; font-weight: 650; }
.guide-launch__copy small { font-size: 11.5px; color: var(--muted, rgba(247, 249, 255, .56)); }
.guide-launch__go { margin-left: auto; flex: none; font-size: 14px; color: var(--cyan, #51e5ff); }

@media (prefers-reduced-motion: reduce) {
  .guide-launch { transition: none; }
}

/* 제품 상세 모달의 고정 헤더에 얹는 형태.
   이 줄은 position: sticky 라 스크롤해도 계속 보입니다 — 가이드로 들어가는 문을
   맨 아래 푸터에 두면 탭 세 개를 다 지나야 보여서 아무도 못 찾습니다. */
.guide-launch--top {
  margin: 0 0 0 auto;          /* 배지와 닫기 버튼 사이에서 오른쪽으로 붙습니다 */
  width: auto;
  /* 줄어들지 않습니다. 헤더가 좁아지면 배지 쪽이 먼저 접혀야 합니다 - 여기에
     min-width: 0 과 shrink 를 허용하면 22px 짜리 세로 막대로 짜부라집니다. */
  flex: none;
  white-space: nowrap;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--detail-accent, #51e5ff) 38%, rgba(255, 255, 255, .14));
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--detail-accent, #5277ff) 22%, transparent),
    color-mix(in srgb, var(--detail-accent, #51e5ff) 9%, transparent) 64%, transparent);
}
.guide-launch--top:hover {
  border-color: color-mix(in srgb, var(--detail-accent, #51e5ff) 70%, transparent);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--detail-accent, #5277ff) 32%, transparent),
    color-mix(in srgb, var(--detail-accent, #51e5ff) 15%, transparent) 64%, transparent);
}
.guide-launch--top .guide-launch__mark {
  width: 27px; height: 27px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--detail-accent, #51e5ff), var(--blue, #5277ff));
}
.guide-launch--top .guide-launch__mark svg { width: 14px; height: 14px; }
.guide-launch--top .guide-launch__copy strong { font-size: 12px; }
.guide-launch--top .guide-launch__copy small { font-size: 10.5px; }
.guide-launch--top .guide-launch__go { margin-left: 2px; font-size: 12px; color: var(--detail-accent, #51e5ff); }
.guide-launch[hidden] { display: none; }

/* 좁은 화면에서는 설명을 접고 아이콘 + 제목만 남깁니다. 배지·닫기 버튼과
   같은 줄을 나눠 쓰기 때문에, 두 줄 설명까지 넣으면 헤더가 무너집니다. */
@media (max-width: 720px) {
  .guide-launch--top { padding: 6px 10px; gap: 8px; }
  .guide-launch--top .guide-launch__copy small { display: none; }
  .guide-launch--top .guide-launch__copy strong { font-size: 11.5px; }
  .guide-launch--top .guide-launch__go { display: none; }
}

/* ---- 실제 UI 기반 투어 (실제 앱 창 캡처 위에 조작 지점을 얹습니다) -------- */
.ogs-frame {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  min-height: 100%;
}
/* 캡처를 감싸는 창틀. 데스크톱 앱 화면이라는 걸 형태로 알립니다. */
.ogs-win {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  overflow: hidden;
  background: var(--og-ink-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.ogs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}
.ogs-dots { display: flex; gap: 5px; flex: none; }
.ogs-dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.ogs-bar-name {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(247, 249, 255, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogs-bar-tag {
  margin-left: auto;
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(81, 229, 255, .13);
  color: var(--og-accent-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}
.ogs-shot {
  position: relative;
  margin: 0;
  /* 폭을 채우고 높이는 비율로 따라옵니다. 넘치면 스테이지가 스크롤합니다 —
     컨테이너 단위와 aspect-ratio 를 섞으면 엔진에 따라 비율이 무시됩니다. */
  width: 100%;
  aspect-ratio: var(--ogs-ratio, 1.6);
  overflow: hidden;
}
.ogs-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 핫스팟은 평소엔 보이지 않습니다. 스포트라이트가 현재 영역만 드러냅니다. */
.ogs-spot {
  position: absolute;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: default;
}
.ogs-spot:focus-visible { outline: 2px solid var(--og-accent-2); outline-offset: 2px; }
.ogs-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--og-muted);
  text-align: left;
}
.ogs-note-dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--og-accent-2);
  box-shadow: 0 0 0 3px rgba(81, 229, 255, .16);
}

@media (max-width: 720px) {
  .ogs-frame { padding: 10px; }
  .ogs-win { max-width: 100%; }
  .ogs-bar-name { font-size: 12px; }
  .ogs-note { font-size: 12px; }
}