/*
  메타그라운드 서비스 개편 안내 페이지

  원본: metaground-front-nextjs 의
        components/closing/ClosingPage.js / components/foot/ClosingFoot.js
  @emotion/styled 로 되어 있던 것을 순수 CSS 로 옮겼다.
  clamp 값 · breakpoint(768px / 1340px / 1920px) · aspect-ratio(1920/1024) 는
  원본 수치를 그대로 유지한다. 조정하면 달 배경 이음매가 어긋난다.
*/

/* ---------- webfont ---------- */
/* 원래 metaground-cdn S3 에서 받아쓰던 것을 프로젝트에 동봉했다.
   이 페이지는 400 / 700 두 굵기만 쓴다. */
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    font-display: swap;
    src: local('Spoqa Han Sans Neo Regular'),
    url('/font/SpoqaHanSansNeo-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    font-display: swap;
    src: local('Spoqa Han Sans Neo Bold'),
    url('/font/SpoqaHanSansNeo-Bold.woff2') format('woff2');
}

/* ---------- reset ---------- */
/* 원본 reset.scss 전체가 아니라 이 페이지에 실제로 필요한 것만 옮겼다. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body,
div, section, footer,
h1, h2, h3, p, a, b, img,
ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    font-family: 'Spoqa Han Sans Neo', sans-serif;
    line-height: 1;
    /* 스크롤 바운스나 여백에서 드러나는 색이다. 원본은 style.scss 의 #0b1024 를
       이 페이지에서만 푸터 색으로 덮어썼다. 그 결정을 그대로 따른다. */
    background-color: #020615;
    -webkit-text-size-adjust: 100%;
}

img {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

/* ---------- layout ---------- */
.closing {
    /* moon.webp 가장자리가 순검정이라 배경도 순검정이어야 이음매가 안 보인다 */
    background-color: #000;

    /* 콘텐츠가 화면보다 짧으면 body 배경이 푸터 아래로 드러나
       푸터가 늘어난 것처럼 보인다. 최소 한 화면을 채우고 푸터를 바닥에 붙인다. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 남는 높이는 안내문 영역이 흡수한다 (푸터는 자기 높이 유지) */
.closing > section:last-of-type {
    flex: 1 0 auto;
}

/* ---------- 히어로 (달 배경) ---------- */
.moon {
    max-width: 1920px;
    margin: 0 auto;

    background-image: url('/img/moon.webp');
    background-repeat: no-repeat;
    /* 가로만 꽉 채우고 높이는 원본 비율(53.33%)대로 정해진다.
       cover 와 달리 섹션이 세로로 늘어나도 이미지가 확대되지 않아 달 구도가 유지되고,
       contain 과 달리 폭 기준이라 좌우가 잘리거나 남지 않는다. */
    background-size: 100% auto;
    /* 아래로 붙여 남는 위쪽은 배경색(#000)이 잇는다. moon.webp 위쪽 가장자리가
       순검정이라 이음매가 보이지 않는다. */
    background-position: center bottom;
    /* 콘텐츠가 짧을 때도 이미지가 그려지는 높이(= 자기 폭의 53.33%)를 확보한다.
       vw 가 아니라 섹션 폭 기준이라 max-width(1920px) 가 걸려도 어긋나지 않는다. */
    aspect-ratio: 1920 / 1024;
    min-height: auto;

    /* 부모가 flex 컬럼이라 기본 shrink 로 높이가 눌리는 것을 막는다.
       basis 를 auto 로 두면 폭까지 콘텐츠 기준으로 줄어들므로 shrink 만 끈다. */
    flex-shrink: 0;
    width: 100%;

    /* 달의 밝은 곡선은 이미지 세로 35% 아래부터 시작한다.
       타이틀이 그 위 어두운 하늘 영역에 놓이도록 위쪽으로 모은다. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.moon .moon-contents {
    /* 부모가 flex 컬럼이라 폭을 명시하지 않으면 콘텐츠 기준으로 줄어든다 */
    width: 100%;
    /* 좌우 패딩이 max-width 를 넘어 가로 스크롤을 만들지 않도록 border-box 로 둔다 */
    max-width: calc(1280px + 40px);
    margin: 0 auto;
    padding: 60px 0 0;
}

@media (max-width: 1920px) {
    .moon .moon-contents {
        padding: 40px 20px 0;
    }
}

.moon h3 {
    color: #fff;
    font-weight: bold;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.4;
    /* 히어로 높이(= 폭의 53.33%)에 비례시켜 타이틀을 어두운 하늘 영역에 앉힌다.
       폭 기준이라 화면이 좁아져도 달과 겹치지 않는다. */
    margin-bottom: 5vw;
}

/* 모바일에서는 히어로 높이(폭의 53.33%)가 낮아 타이틀 두 줄이 들어갈 어두운 하늘이
   없다. 예전에는 이미지 위에 검은 하늘 140px 을 덧대 자리를 만들었는데, 그만큼
   달이 아래로 밀려 화면 상단이 빈 검정으로 남았다.
   대신 달을 화면 맨 위로 올리고 — 히어로는 이미지 높이 그대로 —
   로고(h3)만 하늘 위에 겹쳐 얹고, 타이틀은 히어로 아래 안내문 위로 내린다. */
@media (max-width: 768px) {
    .moon {
        /* 덧대던 검은 하늘 140px 을 걷어낸다. 높이 = 이미지가 그려지는 높이 그대로라
           달이 화면 맨 위에 붙고 상단의 빈 검정이 사라진다. */
        aspect-ratio: 1920 / 1024;
        min-height: auto;
    }

    /* 로고만 달 위 어두운 하늘에 남긴다 */
    .moon .moon-contents {
        padding: 24px 20px 0;
    }

    .moon h3 {
        margin-bottom: 0;
    }

    /* 타이틀은 달과 겹치므로 히어로 안에서는 숨기고, 아래 .title-below 로 대신 보여준다 */
    .moon .moon-title {
        display: none;
    }
}

.moon .moon-title h1 {
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: clamp(1.75rem, 5.6vw, 4.5rem);
    line-height: 1.15;
    margin-bottom: 15px;
}

/* ---------- 모바일 전용 타이틀 (달 아래) ---------- */
/* 기본은 숨김. 히어로 안 타이틀이 보이는 769px 이상에서는 존재하지 않아야 한다. */
.title-below {
    display: none;
}

@media (max-width: 768px) {
    .title-below {
        display: block;
        /* .closing 이 flex 컬럼이라 기본 shrink 로 높이가 눌리는 것을 막는다 */
        flex-shrink: 0;
        /* 달 아래 검은 배경 위. 안내문과의 간격은 .notice 가 이어서 만든다 */
        padding: 28px 20px 0;
    }

    .title-below h1 {
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: clamp(1.75rem, 5.6vw, 4.5rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .title-below h1:last-child {
        margin-bottom: 0;
    }
}

/* ---------- 안내문 ---------- */
.notice {
    width: 100%;
    padding: 0 20px 140px;
}

/* 모바일에서는 좌우 여백을 .notice-box 한 겹으로만 준다 */
@media (max-width: 768px) {
    .notice {
        padding: 0 0 140px;
    }
}

/* 데스크톱에서는 히어로와 안내문을 150px 당겨 붙인다.
   히어로 하단은 달 곡선 아래 여백이라 안내문이 올라와도 가리지 않는다.
   1024px 이하는 히어로가 낮아 간격이 이미 좁으므로 적용하지 않는다. */
@media (min-width: 1025px) {
    .notice {
        margin-top: -150px;
    }
}

.notice .notice-box {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px 60px;

    font-size: clamp(0.93753rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    text-align: center;
    color: #fff;
}

.notice .notice-box p {
    margin-bottom: 1.75rem;
}

.notice .notice-box p:last-child {
    margin-bottom: 0;
}

.notice .notice-box b {
    font-weight: bold;
}

.notice .notice-box a {
    color: #fff;
    text-decoration: underline;
}

/* '주요 안내' 소제목 — 본문보다 한 단계만 키운다. 박스나 테두리는 쓰지 않는다
   (원본에서 .notice-box 의 배경/테두리를 걷어낸 결정을 그대로 따른다) */
.notice .notice-box h2 {
    font-weight: bold;
    font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
    line-height: 1.4;
    margin-bottom: 1rem;
}

/* 항목 사이는 문단보다 촘촘하게 붙여 하나의 안내 묶음으로 읽히게 한다.
   페이지 전체가 가운데 정렬이라 목록도 마커 없이 가운데로 흐르게 둔다 */
.notice .notice-box .notice-list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}

.notice .notice-box .notice-list li {
    margin-bottom: 0.6rem;
}

.notice .notice-box .notice-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .notice .notice-box {
        padding: 40px 24px;

        /* 좁은 폭에서 가운데 정렬은 줄마다 시작점이 달라져 읽는 흐름이 끊긴다.
           본문은 좌측으로 흘린다. 달 아래 타이틀(.title-below)은 가운데 유지. */
        text-align: left;
    }

    /* 모바일에서는 줄바꿈을 없애고 폭에 맞춰 자연스럽게 흐르게 한다 */
    .notice .notice-box br {
        display: none;
    }
}

/* ---------- 푸터 ---------- */
.foot {
    width: 100%;
    padding: 40px 0 40px 0;
    background-color: #020615;
    color: #606776;
}

/* 원본 DefaultLayout (maxWidth 1280) 의 여백 규칙 */
.foot .foot-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 1340px) {
    .foot .foot-inner {
        padding: 0 32px;
    }
}

@media (max-width: 768px) {
    .foot .foot-inner {
        padding: 0 16px;
    }
}

.foot .foot-center {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}