/* ==========================================================================
   tb-promise.css (Reach W2-DOORS, 2026-09-27): the front doors
   The desktop scope sheet over the map (opened from the promise strip), the
   rail's scope strip above the Events feed, the landing's promise, sample
   and signer lines, and the story pages' promise line and doors. Every
   element here is drawn only while its Growth → Pulse switch is on.
   Celadon and porcelain only; the view's one gold stays where it was.
   Tokens come from tb-baekja.css; fallbacks cover pages that load a
   different token sheet. KO-visible serif text names Pretendard.
   ========================================================================== */

/* ---- desktop home: the scope sheet above the promise strip ---- */
body.tb-page .tb-scope-sheet {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%);
  z-index: 901; width: min(420px, 86vw); box-sizing: border-box;
  background: var(--color-base, #F9FBFD);
  border: 1px solid var(--color-line, rgba(28, 27, 24, 0.08));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-overlay, 0 12px 40px rgba(28, 27, 24, 0.12));
  padding: 8px; margin: 0; list-style: none;
}
body.tb-page .tb-scope-sheet[hidden] { display: none; }
.tb-scope-sheet__door {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--font-sans, 'Pretendard', sans-serif); color: var(--color-ink, #1C1B18);
}
.tb-scope-sheet__door:hover, .tb-scope-sheet__door:focus-visible { background: var(--color-base-sunk, #EEF2F4); outline: none; }
.tb-scope-sheet__door b { font-size: 14.5px; font-weight: 600; color: var(--color-celadon-deep, #44604F); }
.tb-scope-sheet__door span { font-size: 13px; line-height: 1.45; color: var(--color-ink-muted, #5A5E55); word-break: keep-all; }

/* ---- desktop rail: four doors above the Events lead card ----
   The strip sits inside #sidebar-content (the old .sidebar-menu), whose tab-button
   rules (tb-home-overrides.css: 10 px uppercase column buttons) would reach these
   buttons; the selectors carry the same weight as the chips' (#sidebar-content.tb-roomy). */
body.tb-page #sidebar-content .tb-scope { padding: 10px 16px 4px; }
body.tb-page #sidebar-content .tb-scope[hidden] { display: none; }
body.tb-page #sidebar-content .tb-scope__doors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.tb-page #sidebar-content.tb-roomy .tb-scope__door {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
  width: auto; min-height: 36px; margin: 0; box-sizing: border-box;
  padding: 7px 10px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-line-strong, rgba(28, 27, 24, 0.14));
  background: var(--color-base, #F9FBFD); color: var(--color-celadon-deep, #44604F);
  font-family: var(--font-sans, 'Pretendard', sans-serif); font-size: 13px; font-weight: 600; line-height: 1.25;
  text-transform: none; letter-spacing: 0; text-align: center;
  text-decoration: none; cursor: pointer; word-break: keep-all; transform: none;
}
body.tb-page #sidebar-content.tb-roomy .tb-scope__door::before { content: none !important; display: none !important; }
body.tb-page #sidebar-content.tb-roomy .tb-scope__door:hover,
body.tb-page #sidebar-content.tb-roomy .tb-scope__door:focus-visible {
  background: var(--color-celadon-soft, #DCE4DB); border-color: var(--color-celadon-soft, #DCE4DB); outline: none;
}
.tb-scope__next {
  display: inline-block; margin: 8px 2px 2px; font-size: 12.5px;
  color: var(--color-ink-muted, #5A5E55); text-decoration: none;
}
.tb-scope__next:hover { color: var(--color-celadon-deep, #44604F); text-decoration: underline; }
.tb-scope__next[hidden] { display: none; }

/* ---- landing: the promise above the clarity lines, the signer line, the sample link ---- */
.tbb-promise {
  margin: 0 0 6px; max-width: 34ch; text-align: center;
  font-family: 'Newsreader', 'Pretendard', Georgia, serif; font-style: italic;
  font-size: 17px; line-height: 1.4; color: var(--color-ink, #1C1B18); word-break: keep-all;
}
.tbb-promise[hidden], .tbb-signed[hidden], .tbb-sample[hidden] { display: none; }
.tbb-signed { margin: 10px 0 0; font-size: 12.5px; color: var(--color-ink-muted, #5A5E55); text-align: center; word-break: keep-all; }
.tbb-sample {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--color-celadon-deep, #44604F); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- story pages: the promise under the header, the doors ---- */
.sp-promise {
  max-width: 760px; margin: 0 auto; box-sizing: border-box; padding: 10px 20px 0;
  font-family: 'Newsreader', 'Pretendard', Georgia, serif; font-style: italic;
  font-size: 15.5px; line-height: 1.45; color: var(--color-ink-muted, #5A5E55); word-break: keep-all;
}
.sp-nav__a--door { color: var(--color-celadon-deep, #44604F); font-weight: 600; }
.sp-door { margin: 22px 0 8px; }
.sp-door__a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--color-celadon, #7B9E89); color: var(--color-celadon-deep, #44604F);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.sp-door__a:hover { background: var(--color-celadon-soft, #DCE4DB); }
@media (max-width: 640px) {
  .sp-promise { padding: 10px 16px 0; font-size: 15px; }
}