/* ==========================================================================
   GrowLog — 서비스 화면
   대시보드 · 타임라인 · 목표 · 기록(작성 · 상세)
   ========================================================================== */

/* ---------- 상단 사용자 영역 (모바일 상단 바) ---------- */
.topbar .avatar { width: 32px; height: 32px; font-size: var(--fs-xs); }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.stat {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.stat__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-surface-2);
  color: var(--c-ink-2);
}
.stat__icon .icon { width: 20px; height: 20px; }
.stat__label { color: var(--c-ink-2); font-size: var(--fs-xs); font-weight: 600; }
.stat__value { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__value small { margin-left: 2px; font-size: var(--fs-sm); font-weight: 600; }
.stat__note { display: none; color: var(--c-ink-3); font-size: var(--fs-xs); }

.stat--streak { border-color: transparent; background: var(--c-primary); color: var(--c-on-primary); }
.stat--streak .stat__icon { background: rgb(255 255 255 / 0.18); color: var(--c-on-primary); }
.stat--streak .stat__label,
.stat--streak .stat__note { color: var(--c-on-primary); }

@media (min-width: 768px) {
  .stats { gap: var(--sp-4); }
  .stat { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
  .stat__icon { grid-row: span 3; width: 48px; height: 48px; border-radius: 14px; }
  .stat__icon .icon { width: 24px; height: 24px; }
  .stat__label { font-size: var(--fs-sm); }
  .stat__value { font-size: 2rem; }
  .stat__note { display: block; }
}

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1024px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
  .dash-grid__wide { grid-column: 1 / -1; }
}

/* 활동 히트맵 */
.heatmap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); }
.heatmap-wrap { display: grid; gap: var(--sp-4); }
.heatmap__days {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  padding-top: 22px;
  color: var(--c-ink-3);
  font-size: 11px;
  line-height: 1;
}
.heatmap__days span { display: flex; align-items: center; }
.heatmap__days span:nth-child(even) { visibility: hidden; }
.heatmap__scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
.heatmap__months {
  display: grid;
  grid-template-columns: repeat(12, minmax(14px, 26px));
  gap: 4px;
  height: 18px;
  margin-bottom: 4px;
  color: var(--c-ink-3);
  font-size: 11px;
}
.heatmap__grid {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-template-columns: repeat(12, minmax(14px, 26px));
  grid-auto-flow: column;
  gap: 4px;
}
.heatmap__cell {
  aspect-ratio: 1;
  min-width: 14px;
  border-radius: 4px;
  background: var(--c-heat-0);
}
.heatmap__cell[data-level="1"] { background: var(--c-heat-1); }
.heatmap__cell[data-level="2"] { background: var(--c-heat-2); }
.heatmap__cell[data-level="3"] { background: var(--c-heat-3); }
.heatmap__cell.is-today { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-ink); }
.heatmap__cell.is-empty { background: transparent; }

.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: var(--sp-3);
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
}
.heatmap-legend i { width: 12px; height: 12px; border-radius: 3px; }
.heatmap-legend span:first-child { margin-right: var(--sp-1); }
.heatmap-legend span:last-child { margin-left: var(--sp-1); }
.heatmap-summary { color: var(--c-ink-2); font-size: var(--fs-sm); }
.heatmap-summary strong { color: var(--c-ink); }

/* 진행 중 목표 미니 리스트 */
/* 1열 그리드의 기본 열 너비(auto)는 줄바꿈 없는 제목 길이만큼 늘어나므로 0까지 줄어들게 한다 */
.mini-goals { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.mini-goal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.mini-goal + .mini-goal { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.mini-goal__head { display: flex; align-items: center; gap: var(--sp-2); }
.mini-goal__title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-goal__dday { color: var(--c-warning-text); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

/* 최근 활동 리스트 (대시보드) */
.feed { display: grid; }
.feed__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-line);
}
.feed__item:first-child { border-top: 0; }
.feed__type {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.feed__type .icon { width: 18px; height: 18px; }
.feed__type--record { background: var(--c-primary-soft); color: var(--c-primary-text); }
.feed__type--goal { background: var(--c-success-soft); color: var(--c-success-text); }
.feed__title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.feed__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed__sub { display: block; color: var(--c-ink-3); font-size: var(--fs-xs); }
.feed__date { color: var(--c-ink-3); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 로딩 스켈레톤 배치 */
.skeleton-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.skeleton-stats .skeleton { height: 112px; border-radius: var(--radius-md); }
.skeleton-grid { display: grid; gap: var(--sp-4); }
.skeleton-grid .skeleton { height: 240px; border-radius: var(--radius-md); }
@media (min-width: 768px) {
  .skeleton-stats { gap: var(--sp-4); }
  .skeleton-stats .skeleton { height: 104px; }
}
@media (min-width: 1024px) {
  .skeleton-grid { grid-template-columns: 1.25fr 1fr; }
}

/* ==========================================================================
   Toolbar (타임라인 · 목표 공통)
   ========================================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.toolbar .segmented { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.toolbar__sort { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar__sort .select { min-height: 40px; width: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); font-size: var(--fs-sm); }

/* ==========================================================================
   Timeline
   ========================================================================== */
.month-nav { display: flex; align-items: center; gap: var(--sp-1); }
.month-nav__title { min-width: 8.5em; font-size: var(--fs-xl); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.month-nav .icon-btn { border: 1px solid var(--c-line-strong); background: var(--c-surface); }
.month-nav .icon-btn:disabled { opacity: 0.4; }

.month-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.month-summary li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.month-summary strong { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.month-summary .icon { width: 16px; height: 16px; }

.tl { display: grid; gap: var(--sp-8); }
.tl__day { position: relative; }
.tl__date {
  position: sticky;
  top: 60px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) 0;
  background: var(--c-bg);
  font-size: var(--fs-md);
  font-weight: 700;
}
.tl__date small { color: var(--c-ink-3); font-size: var(--fs-sm); font-weight: 500; }
@media (min-width: 1024px) {
  .tl__date { top: 0; }
}

.tl__items {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-8);
}
/* 세로 연결선 */
.tl__items::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-line);
}

.tl-item { position: relative; }
.tl-item::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(var(--sp-8) * -1 + 3px);
  width: 14px;
  height: 14px;
  border: 3px solid var(--c-bg);
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-line-strong);
}
.tl-item--goal::before { background: var(--c-success); }

.tl-item__card {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
a.tl-item__card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tl-item__meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-3); }
.tl-item__title { font-size: var(--fs-md); font-weight: 700; }
.tl-item__text {
  display: -webkit-box;
  margin-top: var(--sp-1);
  overflow: hidden;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
   Goals
   ========================================================================== */
.goal-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) {
  .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .goal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.goal-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.goal-card:hover { box-shadow: var(--shadow-md); }
.goal-card.is-done { background: color-mix(in srgb, var(--c-success-soft) 35%, var(--c-surface)); }
.goal-card.is-paused .goal-card__title,
.goal-card.is-paused .goal-card__desc { color: var(--c-ink-3); }

.goal-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.goal-card__title { font-size: var(--fs-lg); font-weight: 700; }
.goal-card__desc {
  display: -webkit-box;
  margin-top: var(--sp-1);
  overflow: hidden;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goal-card__period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
}
.goal-card__period > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.goal-card__period .icon { width: 14px; height: 14px; }
.goal-card__dday { color: var(--c-warning-text); font-weight: 700; }
.goal-card__dday.is-over { color: var(--c-danger); }
.goal-card__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.goal-card__actions .btn { flex: 1; }
.goal-card__actions .btn--ghost { color: var(--c-danger); flex: 0 0 auto; }
.goal-card__actions .btn--ghost:hover { background: var(--c-danger-soft); color: var(--c-danger); }

/* 목표 수정 다이얼로그 — 진행률 슬라이더 */
.range-field { display: grid; gap: var(--sp-2); }
.range-field__head { display: flex; justify-content: space-between; align-items: baseline; }
.range-field output { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.range {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  --fill: 50%;
}
.range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--c-primary) var(--fill), var(--c-surface-2) var(--fill));
}
.range::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--c-surface-2); }
.range::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--c-primary); }
.range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 3px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-primary-text);
  box-shadow: var(--shadow-md);
  -webkit-appearance: none;
}
.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-primary-text);
}
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.range:focus-visible::-moz-range-thumb { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.range-field__scale { display: flex; justify-content: space-between; color: var(--c-ink-3); font-size: var(--fs-xs); }

.status-choices { grid-template-columns: repeat(3, 1fr); }
.status-choices .choice__box { justify-content: center; }

/* ==========================================================================
   Form page (목표 추가 · 기록 작성)
   ========================================================================== */
.form-card { padding: var(--sp-5); }
@media (min-width: 768px) {
  .form-card { padding: var(--sp-8); }
}
.form-section + .form-section {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-line);
}
.form-section__title { margin-bottom: var(--sp-5); font-size: var(--fs-lg); font-weight: 700; }
.form-section__title small { margin-left: var(--sp-2); color: var(--c-ink-3); font-size: var(--fs-sm); font-weight: 500; }

.field-grid { display: grid; gap: var(--sp-5); }
.field-grid .field + .field { margin-top: 0; }
@media (min-width: 640px) {
  .field-grid--2 { grid-template-columns: 1fr 1fr; }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}
@media (max-width: 639px) {
  .form-actions .btn { flex: 1; }
}

/* 기록 종류 선택 */
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.type-switch .choice__box { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 72px; }
.type-switch .choice__box small { color: var(--c-ink-2); font-size: var(--fs-xs); font-weight: 500; }
.type-switch .choice__box strong { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* 이미지 업로드 */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-8) var(--sp-4);
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.dropzone:hover,
.dropzone.is-over { border-color: var(--c-primary-text); background: var(--c-primary-soft); }
.dropzone:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.dropzone .icon { width: 28px; height: 28px; color: var(--c-primary-text); }
.dropzone strong { color: var(--c-ink); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.preview { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-2); }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-scrim);
  color: #fff;
}
.preview button .icon { width: 16px; height: 16px; }

/* ==========================================================================
   Record detail
   ========================================================================== */
.record { padding: var(--sp-6) var(--sp-5); }
@media (min-width: 768px) {
  .record { padding: var(--sp-10); }
}
.record__labels { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.record__labels a.chip:hover { text-decoration: underline; text-underline-offset: 2px; }
.record__title { font-size: var(--fs-2xl); font-weight: 800; }
@media (min-width: 768px) {
  .record__title { font-size: 2rem; }
}
.record__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
}
.record__actions { display: flex; gap: var(--sp-2); }
.record__body { margin-top: var(--sp-6); font-size: var(--fs-lg); line-height: 1.75; white-space: pre-line; }

.record__notes { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.note {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-surface-2);
}
.note--solution { border-left-color: var(--c-success); }
.note--retro { border-left-color: var(--c-ink-3); }
.note__title { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2); }
.note__title .icon { width: 16px; height: 16px; }
.note p { white-space: pre-line; }

.level { display: inline-flex; align-items: center; gap: var(--sp-2); }
.level__bars { display: inline-flex; gap: 3px; }
.level__bars i { width: 14px; height: 6px; border-radius: 3px; background: var(--c-line-strong); }
.level[data-level="1"] .level__bars i:nth-child(-n+1),
.level[data-level="2"] .level__bars i:nth-child(-n+2) { background: var(--c-primary); }
.level[data-level="3"] .level__bars i { background: var(--c-danger); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-8); }
.gallery figure { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface-2); }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery figcaption { padding: var(--sp-2) var(--sp-3); color: var(--c-ink-3); font-size: var(--fs-xs); }

.video-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.video-link:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.video-link__thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--c-deep);
  color: #fff;
  flex-shrink: 0;
}
.video-link__thumb .icon { width: 20px; height: 20px; fill: currentColor; }
.video-link strong { display: block; }
.video-link span { color: var(--c-ink-3); font-size: var(--fs-xs); word-break: break-all; }

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.pager a {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  min-width: 0;
  transition: border-color var(--dur-fast);
}
.pager a:hover { border-color: var(--c-line-strong); }
.pager a:last-child:not(:first-child),
.pager .pager__next { text-align: right; grid-column: 2; }
.pager small { display: inline-flex; align-items: center; gap: 2px; color: var(--c-ink-3); font-size: var(--fs-xs); }
.pager__next small { justify-content: flex-end; }
.pager small .icon { width: 14px; height: 14px; }
.pager strong { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   인라인 스타일 대신 쓰는 보조 클래스
   ========================================================================== */
/* 히트맵 범례 */
.heatmap-legend i[data-level="0"] { background: var(--c-heat-0); }
.heatmap-legend i[data-level="1"] { background: var(--c-heat-1); }
.heatmap-legend i[data-level="2"] { background: var(--c-heat-2); }
.heatmap-legend i[data-level="3"] { background: var(--c-heat-3); }

/* 로딩 스켈레톤 배치 */
.skeleton--card { height: 250px; border-radius: var(--radius-md); }
.skeleton-stack { display: grid; gap: var(--sp-3); }
.skeleton-stack--timeline .skeleton--title { width: 30%; }
.skeleton-stack--timeline .skeleton--block { height: 92px; }
.skeleton-stack--timeline .skeleton:nth-child(4) { margin-top: var(--sp-4); }
.skeleton-stack--record { gap: 14px; }
.skeleton-stack--record .skeleton:nth-child(1) { width: 120px; }
.skeleton-stack--record .skeleton:nth-child(3) { width: 40%; }
.skeleton-stack--record .skeleton:nth-child(4) { margin-top: var(--sp-4); }
.skeleton-stack--record .skeleton:nth-child(5) { height: 80px; }

/* 폼 간격 */
.form-card .form-alert { margin-bottom: var(--sp-6); }
.form-card .choice-group + .field { margin-top: var(--sp-5); }
.form-card .field + .field-grid { margin-top: var(--sp-5); }
#goalForm .choice-group + .field { margin-top: var(--sp-6); }
.choice-list--3 { grid-template-columns: repeat(3, 1fr); }

/* 진행 상황 수정 다이얼로그 */
.dialog__body .choice-group { margin-top: var(--sp-6); }
.dialog__hint { margin-top: var(--sp-3); }