/* oodot 으로 옮긴 것을 알리는 창 (2026-10-07)
 * oodot 디자인 시스템의 .od-scrim · .od-modal · .od-btn 과 같은 값이다.
 * tokens.css 를 통째로 부르면 Hubb 화면의 글꼴·여백이 바뀌므로 이 창 안에만 값을 둔다. */
.ood-notice[hidden], .ood-notice [hidden] { display: none !important; }
.ood-notice {
  --od-gray-400: #8a8a90; --od-gray-600: #5a5a61; --od-gray-900: #1d1d1f;
  --od-accent: #2a64f6; --od-accent-hover: #1c4fd8; --od-accent-active: #1740ad;
  position: fixed; inset: 0; z-index: 1000;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ood-notice__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .32);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ood-notice__box {
  position: absolute; left: 50%; top: 50%;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  padding: .75rem .75rem 1.5rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14), 0 6px 18px rgba(0, 0, 0, .06);
  color: var(--od-gray-900);
  opacity: 0;
  transform: translate(-50%, -48%) scale(.98);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ood-notice[data-open="true"] .ood-notice__scrim { opacity: 1; }
.ood-notice[data-open="true"] .ood-notice__box { opacity: 1; transform: translate(-50%, -50%); }
.ood-notice__box:focus { outline: none; }
/* 미리보기 — 회색 판 위에 oodot 대문 한 조각 */
.ood-notice__peek { padding: 1rem 1rem 0; border-radius: 10px; background: #f5f5f7; overflow: hidden; }
.ood-notice__page {
  border: 1px solid #e1e1e6; border-bottom: 0; border-radius: 8px 8px 0 0;
  background: #fff; padding: 0 1rem;
}
.ood-notice__bar {
  display: flex; align-items: center; gap: .375rem;
  height: 2.5rem; border-bottom: 1px solid #ececf0;
  font-size: .75rem;
}
.ood-notice__logo { color: #000; flex: none; }
.ood-notice__brand { font-weight: 600; letter-spacing: -0.01em; }
.ood-notice__addr { margin-left: auto; color: var(--od-gray-400); }
.ood-notice__rows { margin: 0; padding: 0; list-style: none; }
.ood-notice__rows li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; }
.ood-notice__rows li + li { border-top: 1px solid #ececf0; }
.ood-notice__icon {
  flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
  background: #1d1d1f; color: #fff; font-size: .875rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.ood-notice__icon img { width: 100%; height: 100%; display: block; }
.ood-notice__icon.has-img { background: #fff; }
.ood-notice__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ood-notice__name b { font-size: .8125rem; font-weight: 600; }
.ood-notice__name span { color: var(--od-gray-600); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ood-notice__date { flex: none; color: var(--od-gray-400); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ood-notice__text { padding: 1.25rem .75rem 0; word-break: keep-all; overflow-wrap: anywhere; }
.ood-notice__actions { padding: 0 .75rem; }
.ood-notice__title {
  margin: 0 0 .375rem;
  font-size: 1.25rem; line-height: 1.5; font-weight: 600; letter-spacing: -0.006em;
}
.ood-notice__body { margin: 0; color: var(--od-gray-600); font-size: .9375rem; line-height: 1.55; }
.ood-notice__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.ood-notice__btn {
  --_bg: #fff; --_fg: var(--od-gray-900); --_border: var(--od-gray-400);
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 1rem;
  border: 1px solid var(--_border); border-radius: 8px;
  background: var(--_bg); color: var(--_fg);
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 80ms ease-out;
}
.ood-notice__btn:hover { --_bg: #fbfbfd; }
.ood-notice__btn:active { transform: scale(.97); }
.ood-notice__btn--primary { --_bg: var(--od-accent); --_fg: #fff; --_border: transparent; }
.ood-notice__btn--primary:hover { --_bg: var(--od-accent-hover); }
.ood-notice__btn--primary:active { --_bg: var(--od-accent-active); }
.ood-notice__btn:focus-visible { outline: 2px solid var(--od-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ood-notice__scrim, .ood-notice__box { transition: none; }
}
@media (max-width: 480px) {
  .ood-notice__date { display: none; }
  .ood-notice__title { font-size: 1.125rem; }
  .ood-notice__actions { flex-direction: column-reverse; }
  .ood-notice__btn { width: 100%; height: 44px; }
}