/* ==========================================================================
   BeCozU — Sub-Page Components (pages.css)
   Loaded only by about/, technology/, app/ — never by the root page, which
   never needed these shapes. Assumes core.css (tokens, .card, .section,
   .eyebrow, etc.) is already loaded.
   ========================================================================== */

/* Numbered step card (app/'s "How to Use"). The ghost numeral is the fourth
   rung of the veil ladder read as depth (제2원칙) rather than an outline on
   a pastel tint, and it sits behind .step-body so the text never fights it. */
.step-card {
  position: relative;
  overflow: hidden;
}

.step-index {
  position: absolute;
  top: -0.18em;
  right: 0.04em;
  font-size: clamp(5rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--veil-2);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.step-card > .step-body {
  position: relative;
  z-index: 1;
}

/* QR code tile (app/'s hero). The one deliberate white surface on a dark
   page: a QR code needs a guaranteed light background to stay scannable,
   which is a functional requirement, not a palette choice -- the same
   "photographed, not painted" exception design.md grants amber-lit product
   photography. Kept small and framed in a dark card so it reads as an
   object on the page rather than a hole in it. */
.qr-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.qr-tile img {
  width: 96px;
  height: 96px;
  display: block;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.qr-tile span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.qr-row {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}

/* technology/'s "How It Works": the GABA/serotonin list and the safety
   callout sit below the neuro-flow diagram rather than under a fresh
   .section-intro, so they need the same space-9 gap by hand. */
.how-detail {
  margin-top: var(--space-9);
  align-items: start;
}

/* about/'s timeline. The light theme marked its one milestone (MAY
   "Launch") with a filled indigo pill and inverted text -- on black a
   filled emphasis has to be a colour, and amber is illegal this deep into
   a night-only page (design.md 여정 조항). Resolution: light the surface
   and the text instead of filling it (제2원칙's corollary: hierarchy is
   brightness and weight, not a third hue). The emphasis survives on
   --text-highlight + weight 600 alone; the cyan chip is confirmation, not
   the mechanism. */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin-top: var(--space-6);
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.timeline-row > .chip {
  flex-shrink: 0;
  min-width: 58px;
  justify-content: center;
}

.timeline-row.is-milestone .timeline-row-label {
  color: var(--text-highlight);
  font-weight: 600;
}

/* about/'s testimonial rating. The one deliberate departure from the
   outline-icon language: a star rating has to read as filled-vs-empty to
   convey a score at all, which an outline can't do at a glance. White, not
   yellow -- design.md bans Tailwind's default colours and a third accent
   hue outright, and its own reasoning for .btn-primary already settles
   this: "the brightest thing in the dark is not a colour, it's white
   light." Empty stars sit one veil rung above the card surface. */
.rating {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
}

.rating svg {
  width: 16px;
  height: 16px;
}

.rating svg.is-filled {
  fill: var(--text-highlight);
}

.rating svg.is-empty {
  fill: var(--veil-3);
}

/* ==========================================================================
   technology/'s Clinical Study & Interactive Stress Management Charts
   ========================================================================== */

/* ==========================================================================
   technology/'s Clinical Study & Interactive Stress Management Charts
   ========================================================================== */

/* Metric Category Tabs */
.study-tab-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.study-tab-btn {
  background: var(--veil-1);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-base);
}

.study-tab-btn:hover {
  background: var(--veil-2);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.study-tab-btn.active {
  background: var(--veil-3);
  color: var(--text-highlight);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Chart Container & Layout */
.study-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.study-dass-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.study-dass-grid.is-hidden {
  display: none !important;
}

/* Chart Card */
.study-chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base);
}

.study-chart-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.study-chart-card.is-hidden {
  display: none !important;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.chart-title-group {
  display: flex;
  flex-direction: column;
}

.chart-main-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-highlight);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.chart-sub-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.2;
}

.chart-reduction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Chart Canvas / Body */
.chart-body {
  position: relative;
  display: flex;
  gap: var(--space-3);
  height: 170px;
  margin-bottom: var(--space-4);
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-weight: 500;
  text-align: right;
  min-width: 24px;
  padding-bottom: 22px;
  user-select: none;
}

.chart-stage {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.grid-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
}

.grid-line-bottom {
  background: var(--border-subtle);
}

/* Bars */
.chart-bars-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: calc(100% - 22px);
  width: 100%;
}

.chart-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  width: 28%;
}

.bar-val {
  position: absolute;
  bottom: calc(var(--bar-h, 0%) + 4px);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-highlight);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, color 0.2s ease;
  pointer-events: none;
}

.study-charts-grid.is-animated .bar-val,
.study-chart-card.is-animated .bar-val {
  opacity: 1;
  transform: translateY(0);
}

.bar-track {
  width: 100%;
  max-width: 36px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 4px 4px 0 0;
}

.bar-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, rgba(0, 210, 255, 0.85) 0%, rgba(0, 114, 255, 0.4) 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.15);
  transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

.study-charts-grid.is-animated .bar-fill,
.study-chart-card.is-animated .bar-fill {
  height: var(--bar-h, 0%);
}

.chart-col:hover .bar-fill {
  background: linear-gradient(180deg, #00d2ff 0%, #0072ff 100%);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.35);
}

.chart-col:hover .bar-val {
  color: var(--accent-cyan);
}

.bar-x-lbl {
  position: absolute;
  bottom: -20px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Footer info */
.chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--veil-1);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  margin-top: auto;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  display: inline-block;
}

.legend-cyan {
  background: var(--accent-cyan);
}

.chart-metric-detail {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

/* Study Disclaimer */
.study-disclaimer-box {
  background: var(--veil-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-disclaimer-box strong {
  color: var(--text-primary);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .study-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .study-dass-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .study-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .study-charts-grid {
    grid-template-columns: 1fr;
  }
  .study-dass-grid {
    grid-template-columns: 1fr;
  }
  .study-dass-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .study-stats-grid {
    grid-template-columns: 1fr;
  }
  .bar-x-lbl {
    font-size: 0.6875rem;
  }
}

/* --------------------------------------------------------------------------
   Legal documents — term/service.html, term/privacy.html, term/data_delete.html

   The site's only long-form flowing prose. Everywhere else the content is
   composed section by section and each element carries its own class; here
   the text runs to sixty-odd headings and paragraphs, so the block styles its
   raw tags once instead. Values are lifted from core.css's scale
   (.headline-medium, .headline-small, .body-medium) rather than invented, so
   these pages read as the same typeface ladder as the rest of the site.

   These three used to sit outside the design system entirely: two rendered
   their text from a JS string through a CDN copy of marked.js, and the third
   shipped its own light theme.
   -------------------------------------------------------------------------- */
.legal-doc {
  color: #d1d1d6;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: -0.005em;
}

.legal-doc h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

.legal-doc h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.legal-doc h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-primary);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.legal-doc p {
  margin-bottom: var(--space-5);
}

/* reset.css strips list markers site-wide; a numbered legal clause is one of
   the few places the number carries meaning, so they come back here. */
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--space-5) var(--space-6);
  padding-left: var(--space-4);
}

.legal-doc ul {
  list-style: disc;
}

.legal-doc ol {
  list-style: decimal;
}

.legal-doc li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.legal-doc li::marker {
  color: var(--text-secondary);
}

.legal-doc strong {
  font-weight: 600;
  color: var(--text-primary);
}

.legal-doc a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The one call-out shape these documents need: data deletion is
   irreversible, and that warning should not read as another paragraph. */
.legal-note {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.legal-note p:last-child {
  margin-bottom: 0;
}

.legal-note-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-3);
}