@charset "utf-8";
/* ==========================================================================
   시스템 점검 안내 페이지 (maintenance.html) — 페이지 스코프 .page-maint
   기준: Figma 2646:3442 (PC 1920) / 2646:3570 (Mobile 360) — 경기아트센터 아카이브
   구간별 값은 아래 페이지 토큰을 @media 에서 재정의해서 바꾼다.
   ========================================================================== */

.page-maint {
  /* 페이지 토큰 — PC 1920 (1280~1919 는 비율로 줄어듦) */
  --mt-pad-top: 160px;            /* 로고 영역 확보 (로고 위치 = --mt-logo-top) */
  --mt-logo-top: 72px;
  --mt-min-h: 600px;              /* 이보다 낮은 창에서만 스크롤 허용 */
  --mt-pad-left: clamp(80px, 11.4vw, 219px);
  --mt-pad-right: clamp(40px, 6.3vw, 121px);
  --mt-pad-bottom: 80px;
  --mt-logo-w: 259px;
  --mt-logo-opacity: 1;
  --mt-logo-gap: 142px;          /* 로고 하단 → 본문 시작 */
  --mt-col-gap: 20px;
  --mt-text-w: 880px;
  /* 창 높이가 낮으면 일러스트도 같이 줄여 한 화면에 들어가게 (680:467 비율) */
  --mt-illust-w: min(680px, 43%, calc((100vh - 240px) * 680 / 467));
  --mt-illust-shift: 0px;
  --mt-kicker-fs: 18px;
  --mt-kicker-pad-y: var(--space-8);
  --mt-kicker-pad-x: var(--space-20);
  --mt-head-gap: var(--space-8); /* kicker → 제목 */
  --mt-title-fs: clamp(40px, 2.6vw, 50px);
  --mt-title-desc-gap: var(--space-32);
  --mt-desc-fs: 18px;
  --mt-desc-date-gap: 64px;
  --mt-dt-fs: 21px;
  --mt-dt-dd-gap: 0px;
  --mt-dd-fs: clamp(28px, 1.875vw, 36px);
  --mt-dd-note-gap: var(--space-10);
  --mt-note-fs: 16px;

  background: var(--bg-soft);
}

/* PC(1024~) : 한 화면(100vh) 안에 담아 세로 스크롤 없이 본문을 세로 가운데 정렬.
   로고는 좌상단에 고정(absolute)하고, 본문은 로고 영역(--mt-pad-top)을 비운 나머지 높이의 가운데에 둔다. */
.maint {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1920px;
  height: 100vh;
  height: 100dvh;
  min-height: var(--mt-min-h);
  margin: 0 auto;
  overflow: hidden; /* 원형 빛이 화면 밖으로 스크롤 만들지 않게 */
  padding: var(--mt-pad-top) var(--mt-pad-right) var(--mt-pad-bottom) var(--mt-pad-left);
}

/* 로고 */
.maint__logo {
  position: absolute;
  top: var(--mt-logo-top);
  left: var(--mt-pad-left);
  width: var(--mt-logo-w);
  opacity: var(--mt-logo-opacity);
}
.maint__logo img { width: 100%; }

/* 본문 + 일러스트 */
.maint__body {
  display: flex;
  align-items: center;            /* 텍스트와 일러스트를 서로 세로 가운데로 */
  gap: var(--mt-col-gap);
}

.maint__text {
  flex: 1 1 var(--mt-text-w);
  min-width: 0;
  max-width: var(--mt-text-w);
}

.maint__kicker {
  display: inline-block;
  padding: var(--mt-kicker-pad-y) var(--mt-kicker-pad-x);
  border-radius: var(--radius-pill);
  background: var(--bg-chip);
  color: var(--text-inverse);
  font-size: var(--mt-kicker-fs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
}

.maint__title {
  margin-top: var(--mt-head-gap);
  color: var(--text-title);
  font-size: var(--mt-title-fs);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
}

.maint__desc {
  margin-top: var(--mt-title-desc-gap);
  color: var(--text-body);
  font-size: var(--mt-desc-fs);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
}

.maint__schedule { margin-top: var(--mt-desc-date-gap); }

.maint__schedule dt {
  color: var(--text-strong);
  font-size: var(--mt-dt-fs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
}

.maint__schedule dd {
  margin-top: var(--mt-dt-dd-gap);
  color: var(--text-point);
  font-size: var(--mt-dd-fs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-date);
  letter-spacing: var(--ls-tight);
}

.maint__note {
  margin-top: var(--mt-dd-note-gap);
  color: var(--text-sub);
  font-size: var(--mt-note-fs);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
}

/* 일러스트 (아카이브 시안은 뒤 원형 빛 없음) */
.maint__illust {
  position: relative;
  flex: 0 0 var(--mt-illust-w);
  width: var(--mt-illust-w);
  margin-top: var(--mt-illust-shift);
}
.maint__illust picture,
.maint__illust img {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ---------- 1439 이하 (일시가 한 줄에 안 들어가는 폭부터 「~」 앞에서 줄바꿈) ---------- */
@media (max-width: 1439px) {
  .page-maint .br-date { display: inline; }
}

/* ---------- 1279 이하 (소형 PC · 태블릿 가로) ---------- */
@media (max-width: 1279px) {
  .page-maint {
    --mt-pad-top: 130px;
    --mt-logo-top: 48px;
    --mt-pad-left: 60px;
    --mt-pad-right: 40px;
    --mt-logo-w: 223px;
    --mt-logo-gap: 100px;
    --mt-illust-w: min(44%, calc((100vh - 200px) * 680 / 467));
    --mt-kicker-fs: 16px;
    --mt-kicker-pad-y: var(--space-6);
    --mt-kicker-pad-x: var(--space-16);
    --mt-title-fs: 40px;
    --mt-title-desc-gap: var(--space-24);
    --mt-desc-fs: 17px;
    --mt-desc-date-gap: 48px;
    --mt-dt-fs: 19px;
    --mt-dd-fs: 30px;
    --mt-note-fs: 14px;
  }
  /* 이 폭부터는 모바일과 같은 줄바꿈(제목 2줄 · 안내문 5줄 · 일시 3줄) */
  .page-maint .br-mo { display: inline; }
  .maint__title-point { display: block; }
}

/* ---------- 1023 이하 (태블릿 세로 — 텍스트 위 · 일러스트 아래) ---------- */
@media (max-width: 1023px) {
  .page-maint {
    --mt-pad-top: 48px;
    --mt-pad-left: 40px;
    --mt-pad-right: 40px;
    --mt-pad-bottom: 56px;
    --mt-logo-gap: 48px;
    --mt-illust-w: 460px;
    --mt-illust-shift: 64px;
    --mt-kicker-fs: 15px;
    --mt-title-fs: 36px;
    --mt-title-desc-gap: var(--space-24);
    --mt-desc-fs: 17px;
    --mt-desc-date-gap: 44px;
    --mt-dt-fs: 19px;
    --mt-dt-dd-gap: var(--space-10);
    --mt-dd-fs: 28px;
    --mt-dd-note-gap: var(--space-10);
    --mt-note-fs: 14px;
  }
  .maint { display: block; height: auto; min-height: 100vh; }
  .maint__logo { position: static; margin: 0 auto; }
  .maint__body { margin-top: var(--mt-logo-gap); }
  .maint__body {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .maint__text { flex: none; }
  .maint__illust {
    flex: none;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ---------- 767 이하 (모바일 · Figma Mobile 360) ---------- */
@media (max-width: 767px) {
  .page-maint {
    --mt-pad-top: var(--space-28);
    --mt-pad-left: var(--space-20);
    --mt-pad-right: var(--space-20);
    --mt-pad-bottom: var(--space-40);
    --mt-logo-w: 223px;
    --mt-logo-gap: 48px;            /* 로고 ↔ 본문 여백 (10-08 사용자 요청 28 → 48) */
    --mt-illust-w: 300px;
    --mt-illust-shift: 56px;
    --mt-kicker-fs: 12px;
    --mt-kicker-pad-y: var(--space-6);
    --mt-kicker-pad-x: var(--space-14);
    --mt-head-gap: var(--space-6);
    --mt-title-fs: 26px;
    --mt-title-desc-gap: var(--space-20);
    --mt-desc-fs: 15px;
    --mt-desc-date-gap: var(--space-32);
    --mt-dt-fs: 17px;
    --mt-dt-dd-gap: var(--space-10);
    --mt-dd-fs: 22px;
    --mt-dd-note-gap: var(--space-8);
    --mt-note-fs: 12px;
  }
}