@charset "UTF-8";

/* ==========================================================
   GREYFALL · HOME
   영화 오프닝 타이틀 + 비대칭 편집 구성
   ========================================================== */

.gf-home {
    padding-top: clamp(22px, 2.4vw, 34px);
}


/* ----------------------------------------------------------
   01 · HERO — 비대칭 2컬럼 구성
   좌: 타이틀 + 매니페스토   우: offset 정보 패널
   ---------------------------------------------------------- */

.gf-home-hero {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 322px;
    grid-template-rows: auto auto auto auto;

    column-gap: clamp(32px, 3.4vw, 52px);

    padding-bottom: clamp(16px, 1.8vw, 26px);
}

/* -- meta rule (전체 폭) --------------------------------- */

.gf-home-hero-meta {
    grid-column: 1 / -1;
    grid-row: 1;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;

    padding-bottom: 14px;

    border-bottom: 1px solid var(--gf-line);
}

.gf-home-hero-meta .gf-section-number {
    margin: 0;
}

.gf-home-hero-meta > p:last-child {
    font-family: var(--gf-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;

    color: var(--gf-text-ghost);
    opacity: 0.72;
}

/* -- title ------------------------------------------------ */

.gf-home-title {
    grid-column: 1;
    grid-row: 2;

    margin: clamp(24px, 2.8vw, 38px) 0 0;

    font-family: var(--gf-font-display);
    font-size: clamp(3rem, 7.4vw, 6.2rem);
    font-weight: var(--gf-w-display-lg);
    line-height: 0.98;
    letter-spacing: -0.02em;

    color: var(--gf-text-strong);

    background:
        linear-gradient(
            178deg,
            #fbf8f3 8%,
            #ece7dd 52%,
            #c6c0b6 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* -- manifesto -------------------------------------------- */

.gf-home-manifesto {
    grid-column: 1;
    grid-row: 3;

    counter-reset: gf-manifesto;

    max-width: 64ch;
    margin-top: clamp(20px, 2.4vw, 30px);
}

.gf-home-manifesto p {
    counter-increment: gf-manifesto;

    position: relative;

    padding: 11px 0 11px 40px;

    border-bottom: 1px solid var(--gf-line-soft);

    font-size: clamp(1rem, 1.6vw, 1.16rem);
    font-weight: 500;
    line-height: 1.68;
    letter-spacing: -0.02em;

    color: var(--gf-text);
}

.gf-home-manifesto p:first-child {
    border-top: 1px solid var(--gf-line-soft);

    color: var(--gf-text-strong);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.9vw, 1.32rem);
}

.gf-home-manifesto p::before {
    content: counter(gf-manifesto, decimal-leading-zero);

    position: absolute;
    left: 0;
    top: 1.16em;

    font-family: var(--gf-mono);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.04em;

    color: var(--gf-text-ghost);
}

.gf-home-manifesto p:first-child::before {
    color: var(--gf-red-bright);
}


/* -- offset 정보 패널 (우측) ------------------------------ */

.gf-home-hero-bottom {
    grid-column: 2;
    grid-row: 2 / 4;

    align-self: start;

    display: flex;
    flex-direction: column;
    gap: 0;

    margin-top: clamp(24px, 2.8vw, 38px);

    /* 상단 룰 + 좌측 얇은 룰만 — 떠 있는 위젯이 아니라 본문 컬럼처럼 */
    border: 0;
    border-top: 1px solid var(--gf-line-strong);
    border-left: 1px solid var(--gf-line-soft);

    background: transparent;
    box-shadow: none;
}

/* 패널 상단 red tick */
.gf-home-hero-bottom::before {
    content: "";

    position: absolute;
    left: 0;
    top: -1px;

    width: 24px;
    height: 1px;

    background: var(--gf-red-bright);
}

.gf-home-hero-bottom {
    position: relative;
}

/* 운영 기간 — 패널 상단 */
.gf-home-period {
    order: -1;

    display: grid;
    gap: 7px;

    padding: 15px 0 17px 17px;

    border-bottom: 1px solid var(--gf-line-soft);
}

.gf-home-period > span {
    font-family: var(--gf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;

    color: var(--gf-text-ghost);
}

.gf-home-period strong {
    font-family: var(--gf-mono);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.002em;

    color: var(--gf-text-strong);
}

/* 키워드 — 패널 하단 */
.gf-home-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    padding: 15px 0 0 17px;
}

.gf-home-keywords span {
    padding: 7px 12px;

    border: 1px solid var(--gf-line);

    font-family: var(--gf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;

    color: var(--gf-text-dim);

    transition: border-color 200ms ease, color 200ms ease;
}

.gf-home-keywords span:first-child {
    border-color: rgba(158, 51, 44, 0.46);
    background: var(--gf-red-wash);
    color: var(--gf-text);
}


/* -- primary links (전체 폭) ------------------------------ */

.gf-home-primary-links {
    grid-column: 1 / -1;
    grid-row: 4;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-top: clamp(26px, 3vw, 40px);

    border-top: 1px solid var(--gf-line-strong);
    border-left: 1px solid var(--gf-line);
}

.gf-home-primary-links a {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 9px 16px;

    min-height: 86px;
    padding: 17px 20px 19px;

    border-right: 1px solid var(--gf-line);
    border-bottom: 1px solid var(--gf-line);

    transition: background-color 260ms ease;
}

/* hover 시 아래에서 차오르는 미묘한 면 */
.gf-home-primary-links a::after {
    content: "";

    position: absolute;
    inset: auto 0 0 0;
    height: 100%;

    background:
        linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.045),
            transparent 70%
        );

    transform: translateY(100%);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-home-primary-links a:hover::after {
    transform: translateY(0);
}

.gf-home-primary-links a > * {
    position: relative;
    z-index: 1;
}

.gf-home-primary-links a > span:first-child {
    grid-column: 1 / -1;

    font-family: var(--gf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;

    color: var(--gf-text-ghost);
}

.gf-home-primary-links a strong {
    min-width: 0;

    font-family: var(--gf-font-display);
    font-size: clamp(1.2rem, 2.1vw, 1.56rem);
    font-weight: var(--gf-w-display);
    line-height: 1.1;
    letter-spacing: -0.014em;

    color: var(--gf-text-strong);
}

.gf-home-primary-links a > span:last-child {
    font-size: 1.05rem;
    line-height: 1;

    color: var(--gf-red-bright);

    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-home-primary-links a:hover > span:last-child {
    transform: translateX(7px);
}

/* APPLICATION — 붉은 면이 아니라 상단 라인과 라벨로 표시 */
.gf-home-primary-links a:last-child {
    background:
        linear-gradient(
            180deg,
            rgba(158, 51, 44, 0.055),
            transparent 46%
        );
}

.gf-home-primary-links a:last-child > span:first-child {
    color: var(--gf-red-bright);
}

.gf-home-primary-links a:last-child::before {
    content: "";

    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 2;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gf-red-bright),
            rgba(158, 51, 44, 0.16) 78%,
            transparent
        );
}


/* ----------------------------------------------------------
   02 · GUIDE INDEX
   ---------------------------------------------------------- */

.gf-home-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--gf-line);
    border-left: 1px solid var(--gf-line);
}

.gf-home-guide-grid a {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;

    gap: 0 8px;

    min-height: 0;
    padding: 17px 20px 20px;

    border-right: 1px solid var(--gf-line);
    border-bottom: 1px solid var(--gf-line);

    background-color: rgba(10, 11, 14, 0.93);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.004) 38%,
            transparent 72%
        ),
        radial-gradient(
            120% 74% at 4% 0%,
            rgba(226, 219, 208, 0.036),
            transparent 62%
        );

    box-shadow: var(--gf-inset-soft);

    transition: background-color 240ms ease, box-shadow 240ms ease;
}

/* hover 시 상단 red hairline */
.gf-home-guide-grid a::after {
    content: "";

    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;

    height: 1px;

    background: var(--gf-red-bright);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-home-guide-grid a:hover::after {
    transform: scaleX(1);
}

/* 번호 + 영문 라벨을 한 줄로 묶는다 (장식 3단 → 2단) */
.gf-home-guide-grid a > span {
    grid-column: 1;
    grid-row: 1;

    font-family: var(--gf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;

    color: var(--gf-red-bright);
    opacity: 0.68;
}

.gf-home-guide-grid a > span::after {
    content: " /";
    color: var(--gf-text-ghost);
}

.gf-home-guide-grid a > p {
    grid-column: 2;
    grid-row: 1;

    margin: 0;

    font-family: var(--gf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.07em;

    color: var(--gf-text-ghost);
    opacity: 0.8;
}

/* 한글 제목이 카드의 주인공 */
.gf-home-guide-grid a h3 {
    grid-column: 1 / -1;
    grid-row: 2;

    margin-top: 16px;
    padding-bottom: 12px;

    border-bottom: 1px solid var(--gf-line-soft);

    font-size: clamp(1.2rem, 2vw, 1.44rem);
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -0.028em;

    color: var(--gf-text-strong);
}

.gf-home-guide-grid a small {
    grid-column: 1 / -1;
    grid-row: 3;

    margin-top: 11px;

    font-size: 0.83rem;
    line-height: 1.7;

    color: var(--gf-text-dim);
}

.gf-home-guide-grid a b {
    grid-column: 3;
    grid-row: 1;

    align-self: center;

    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1;

    color: var(--gf-text-ghost);

    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}

.gf-home-guide-grid a:hover {
    background-color: rgba(22, 25, 31, 0.95);
    box-shadow: var(--gf-inset), inset 0 -40px 60px -50px rgba(226, 219, 208, 0.4);
}

.gf-home-guide-grid a:hover b {
    transform: translateX(6px);
    color: var(--gf-red-bright);
}

/* APPLICATION — 면이 아니라 상단 라인 + 라벨로 상태 표시 */
.gf-home-guide-grid a.is-application {
    background-image:
        linear-gradient(
            180deg,
            rgba(158, 51, 44, 0.075),
            transparent 40%
        ),
        radial-gradient(
            120% 74% at 4% 0%,
            rgba(226, 219, 208, 0.03),
            transparent 62%
        );
}

.gf-home-guide-grid a.is-application::before {
    content: "";

    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gf-red-bright),
            rgba(158, 51, 44, 0.2) 72%,
            transparent
        );
}

.gf-home-guide-grid a.is-application > p {
    color: var(--gf-red-bright);
    opacity: 0.82;
}

.gf-home-guide-grid a.is-application:hover {
    background-color: rgba(158, 51, 44, 0.05);
}


/* ----------------------------------------------------------
   03 · CITY BRIEF
   ---------------------------------------------------------- */

.gf-home-brief {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
}

.gf-home-brief article {
    position: relative;

    min-width: 0;
    padding-top: 18px;

    border-top: 1px solid var(--gf-line-strong);
}

.gf-home-brief article::before {
    content: "";

    position: absolute;
    left: 0;
    top: -1px;

    width: 26px;
    height: 1px;

    background: var(--gf-red-bright);
}

.gf-home-brief article span {
    display: block;

    font-family: var(--gf-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;

    color: var(--gf-red-bright);
}

.gf-home-brief article p {
    display: inline;
    margin-left: 7px;

    font-family: var(--gf-mono);
    font-size: 0.62rem;
    letter-spacing: 0.07em;

    color: var(--gf-text-ghost);
}

/* 번호와 라벨을 한 줄로 */
.gf-home-brief article span {
    display: inline;
}

.gf-home-brief article span::after {
    content: " /";
    color: var(--gf-text-ghost);
}

.gf-home-brief article strong {
    display: block;
    margin-top: 15px;

    font-size: clamp(1.04rem, 1.6vw, 1.18rem);
    font-weight: 500;
    line-height: 1.76;
    letter-spacing: -0.022em;

    color: var(--gf-text-strong);
}

.gf-home-world-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 28px;

    margin-top: clamp(24px, 2.8vw, 36px);
    padding-top: 18px;

    border-top: 1px solid var(--gf-line);
}

.gf-home-world-link > span {
    font-family: var(--gf-mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;

    color: var(--gf-text-ghost);
}

.gf-home-world-link a {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    font-family: var(--gf-font-display);
    font-size: clamp(1.16rem, 2vw, 1.46rem);
    font-weight: var(--gf-w-display);
    letter-spacing: -0.012em;

    color: var(--gf-text-strong);

    transition: gap 260ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease;
}

.gf-home-world-link a span {
    color: var(--gf-red-bright);
    font-size: 0.76em;
}

.gf-home-world-link a:hover {
    gap: 21px;
    color: var(--gf-red-bright);
}


/* ----------------------------------------------------------
   04 · RUN PERIOD
   ---------------------------------------------------------- */

.gf-home-run {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;

    gap: 0 clamp(18px, 2.4vw, 30px);

    max-width: 760px;
    padding: 18px 0 20px;

    border-top: 1px solid var(--gf-line);
    border-bottom: 1px solid var(--gf-line);
}

.gf-home-run-date {
    min-width: 0;
}

.gf-home-run-date > span {
    display: inline-block;
    margin-bottom: 9px;
    padding-bottom: 5px;

    border-bottom: 1px solid var(--gf-line);

    font-family: var(--gf-mono);
    font-size: 0.63rem;
    letter-spacing: 0.09em;

    /* 장식이 아니라 읽어야 하는 라벨 */
    color: var(--gf-text-faint);
}

.gf-home-run-date strong {
    display: block;

    font-family: var(--gf-font-display);
    font-size: clamp(1.62rem, 3.2vw, 2.36rem);
    font-weight: var(--gf-w-display);
    line-height: 1.06;
    letter-spacing: -0.014em;

    color: var(--gf-text-strong);
}

.gf-home-run-date:last-child strong {
    color: var(--gf-text-dim);
}

.gf-home-run-line {
    position: relative;

    display: flex;
    align-items: center;

    height: 1px;
    margin-top: 16px;
}

.gf-home-run-line span {
    display: block;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gf-red-bright) 0 8%,
            var(--gf-line-bright) 8% 62%,
            var(--gf-line) 62% 100%
        );
}

/* 시작 노드 */
.gf-home-run-line::before {
    content: "";

    position: absolute;
    left: 0;

    width: 5px;
    height: 5px;

    background: var(--gf-red-bright);
    box-shadow: 0 0 0 3px rgba(158, 51, 44, 0.2);
}

/* 종료 노드 */
.gf-home-run-line::after {
    content: "";

    position: absolute;
    right: 0;

    width: 5px;
    height: 5px;

    background: var(--gf-line-bright);
}

.gf-home-run-note {
    display: grid;
    gap: 7px;

    max-width: 780px;
    margin-top: clamp(18px, 2vw, 26px);
    padding-top: 0;

    border-top: 0;
}

.gf-home-run-note p {
    max-width: 56ch;

    font-size: 0.92rem;
    line-height: 1.86;

    color: var(--gf-text);
}

.gf-home-run-note a {
    justify-self: start;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 10px;
    padding: 12px 20px;

    min-height: 46px;

    border: 1px solid var(--gf-line-strong);

    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%);
    box-shadow: var(--gf-inset-soft);

    font-family: var(--gf-mono);
    font-size: 0.68rem;
    letter-spacing: 0.09em;

    color: var(--gf-text);

    transition:
        border-color 200ms ease,
        background-color 200ms ease,
        color 200ms ease;
}

.gf-home-run-note a span {
    color: var(--gf-red-bright);
}

.gf-home-run-note a:hover {
    color: var(--gf-text-strong);
    border-color: rgba(158, 51, 44, 0.6);
    background-color: var(--gf-red-wash);
}


/* ----------------------------------------------------------
   05 · ENTRY RULES
   ---------------------------------------------------------- */

.gf-home-entry-rules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--gf-line-strong);
    border-left: 1px solid var(--gf-line);
}

/* 섹션마다 동일 패턴이 반복되지 않도록 정렬을 어긋나게 */
.gf-home-section:nth-of-type(4) .gf-home-section-head,
.gf-home-section:nth-of-type(4) .gf-home-run,
.gf-home-section:nth-of-type(4) .gf-home-run-note {
    margin-left: clamp(0px, 5vw, 96px);
}

.gf-home-entry-rules article {
    position: relative;

    min-width: 0;
    padding: 17px 18px 20px;

    border-right: 1px solid var(--gf-line);
    border-bottom: 1px solid var(--gf-line);

    background-color: rgba(10, 11, 14, 0.91);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.028),
            transparent 44%
        ),
        radial-gradient(
            120% 70% at 4% 0%,
            rgba(226, 219, 208, 0.03),
            transparent 60%
        );

    box-shadow: var(--gf-inset-soft);

    transition: background-color 240ms ease;
}

.gf-home-entry-rules article:hover {
    background-color: rgba(22, 25, 31, 0.95);
}

.gf-home-entry-rules article span {
    display: block;

    font-family: var(--gf-mono);
    font-size: 0.63rem;
    letter-spacing: 0.06em;

    color: var(--gf-red-bright);
}

.gf-home-entry-rules article strong {
    display: block;
    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--gf-line-soft);

    font-family: var(--gf-mono);
    font-size: 0.71rem;
    font-weight: 500;
    letter-spacing: 0.05em;

    color: var(--gf-text-strong);
}

.gf-home-entry-rules article p {
    margin-top: 9px;

    font-size: 0.85rem;
    line-height: 1.78;

    color: var(--gf-text-dim);
}


/* ----------------------------------------------------------
   06 · FINAL CTA
   ---------------------------------------------------------- */

.gf-home-final {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: start;

    column-gap: clamp(28px, 3.2vw, 52px);
    row-gap: 0;

    margin-top: clamp(38px, 4vw, 58px);
    padding-top: clamp(22px, 2.4vw, 32px);

    border-top: 1px solid var(--gf-line-strong);

    /* 좌상단 red tick (기존 ::before 를 background 로 이관) */
    background-image:
        linear-gradient(
            90deg,
            var(--gf-red-bright) 0 84px,
            transparent 84px
        );
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 1px;
}

/* 콘텐츠 뒤 스크림 — 모든 방향으로 부드럽게 빠진다 */
.gf-home-final::before {
    content: "";

    position: absolute;
    inset: -30px -120px -50px -90px;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.9) 0%,
            rgba(10, 11, 14, 0.8) 26%,
            rgba(10, 11, 14, 0.54) 52%,
            rgba(10, 11, 14, 0.22) 76%,
            rgba(10, 11, 14, 0.06) 90%,
            transparent 100%
        );
}

/* 설명 + CTA 를 하나의 진입 블록으로 묶는 수직 룰 */
.gf-home-final::after {
    content: "";

    position: absolute;
    top: clamp(22px, 2.4vw, 32px);
    bottom: 0;
    left: calc((100% - clamp(28px, 3.2vw, 52px)) * 0.4444 + clamp(28px, 3.2vw, 52px));

    width: 1px;

    background:
        linear-gradient(
            180deg,
            var(--gf-line),
            var(--gf-line) 68%,
            transparent
        );
}

.gf-home-final > p {
    grid-column: 1;
    grid-row: 1;
}

.gf-home-final h2 {
    grid-column: 1;
    grid-row: 2;
}

/* 설명과 CTA 를 같은 컬럼에 연속 배치 — 하나의 진입 블록 */
.gf-home-final-copy {
    grid-column: 2;
    grid-row: 1;
}

.gf-home-final-button {
    grid-column: 2;
    grid-row: 2;
}

.gf-home-final > p {
    font-family: var(--gf-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;

    color: var(--gf-red-bright);
}

.gf-home-final h2 {
    max-width: 14ch;
    margin-top: 12px;

    font-family: var(--gf-font-display);
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: var(--gf-w-display-lg);
    line-height: 1.02;
    letter-spacing: -0.022em;

    color: var(--gf-text-strong);
}

.gf-home-final-copy {
    display: grid;
    gap: 9px;
    align-content: start;

    max-width: 50ch;
    margin-top: 2px;
    padding-left: clamp(14px, 1.8vw, 24px);
}

.gf-home-final-copy p {
    font-size: 0.92rem;
    line-height: 1.9;

    color: var(--gf-text-dim);
}

.gf-home-final-button {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    justify-self: start;
    align-self: start;

    min-height: 56px;
    margin-top: clamp(16px, 1.8vw, 22px);
    margin-left: clamp(14px, 1.8vw, 24px);
    padding: 16px 24px;

    border: 1px solid rgba(158, 51, 44, 0.5);

    background:
        linear-gradient(
            180deg,
            rgba(158, 51, 44, 0.09),
            rgba(158, 51, 44, 0.02)
        );

    box-shadow: var(--gf-inset), var(--gf-lift);

    font-family: var(--gf-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;

    color: var(--gf-text-strong);

    transition: border-color 220ms ease, gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-home-final-button::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(158, 51, 44, 0.3),
            transparent 76%
        );

    transform: translateY(100%);
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-home-final-button > * {
    position: relative;
    z-index: 1;
}

.gf-home-final-button:hover {
    gap: 46px;
    border-color: var(--gf-red-bright);
}

.gf-home-final-button:hover::after {
    transform: translateY(0);
}

.gf-home-final-button span:last-child {
    color: var(--gf-red-bright);
    font-size: 1.02rem;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1120px) {

    .gf-home-hero {
        grid-template-columns: minmax(0, 1fr) 286px;
    }

}

@media (max-width: 1040px) {

    .gf-home-guide-grid,
    .gf-home-entry-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 940px) {

    /* 히어로 단일 컬럼 — 패널은 매니페스토 아래로 */
    .gf-home-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .gf-home-title,
    .gf-home-manifesto {
        grid-column: 1;
    }

    .gf-home-hero-bottom {
        grid-column: 1;
        grid-row: auto;

        margin-top: clamp(30px, 3.6vw, 42px);
    }

    .gf-home-primary-links {
        grid-row: auto;
    }
}

@media (max-width: 860px) {

    .gf-home {
        padding-top: 26px;
    }

    /* GREYFALL 이 두 줄로 쪼개지지 않는 최대 크기 */
    .gf-home-title {
        font-size: min(15.4vw, 5.4rem);
        line-height: 1;
        white-space: nowrap;
    }

    .gf-home-manifesto p {
        padding: 12px 0 12px 36px;
        font-size: clamp(0.96rem, 3.9vw, 1.1rem);
        line-height: 1.7;
    }

    .gf-home-manifesto p::before {
        font-size: 0.62rem;
    }

    .gf-home-hero-bottom {
        flex-direction: column;
    }

    .gf-home-primary-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .gf-home-primary-links a {
        min-height: 92px;
        padding: 19px 18px 21px;
    }

    .gf-home-guide-grid a {
        min-height: 0;
        padding: 19px 18px 22px;
    }

    .gf-home-brief {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .gf-home-brief article {
        padding: 18px 0 22px;
        border-top: 1px solid var(--gf-line);
    }

    .gf-home-brief article:first-child {
        border-top-color: var(--gf-line-strong);
    }

    .gf-home-brief article p {
        margin-top: 13px;
    }

    .gf-home-world-link a {
        min-height: 44px;
        padding: 4px 0;
    }

    .gf-home-run {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .gf-home-run-line {
        height: 42px;
        margin: 4px 0 4px 2px;
    }

    .gf-home-run-line span {
        width: 1px;
        height: 100%;

        background:
            linear-gradient(
                180deg,
                var(--gf-red-bright) 0 8%,
                var(--gf-line-bright) 8% 62%,
                var(--gf-line) 62% 100%
            );
    }

    /* 세로 타임라인에서는 시작·종료 노드도 세로로 배치 */
    .gf-home-run-line::before {
        top: 0;
        left: -2px;
    }

    .gf-home-run-line::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: -2px;
    }

    .gf-home-run-note a {
        width: 100%;
        justify-content: space-between;
    }

    .gf-home-final {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }

    .gf-home-final::after {
        display: none;
    }

    .gf-home-final > p,
    .gf-home-final h2,
    .gf-home-final-copy,
    .gf-home-final-button {
        grid-column: 1;
        grid-row: auto;
    }

    .gf-home-final-copy {
        padding-left: 0;
        border-left: 0;
    }

    .gf-home-final-button {
        display: flex;
        width: 100%;
        margin-left: 0;
        gap: 20px;
        padding: 19px 20px;
    }

    .gf-home-final-button:hover {
        gap: 20px;
    }
}

@media (max-width: 520px) {

    .gf-home-guide-grid,
    .gf-home-entry-rules {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ----------------------------------------------------------
   07 · GUIDE INDEX — 핵심 경로 미세 위계
   색상 차별화가 아니라 표면 밝기 · 번호 마커 수준의 차이만 준다.
   01 WORLD / 03 PARTICIPATION / 06 APPLICATION = 주요 진입점
   ---------------------------------------------------------- */

.gf-home-guide-grid a:nth-child(1),
.gf-home-guide-grid a:nth-child(3),
.gf-home-guide-grid a:nth-child(6) {
    background-color: rgba(14, 16, 20, 0.94);
}

/* 주요 경로에만 번호 앞 red marker */
.gf-home-guide-grid a:nth-child(1) > span::before,
.gf-home-guide-grid a:nth-child(3) > span::before,
.gf-home-guide-grid a:nth-child(6) > span::before {
    content: "";

    display: inline-block;

    width: 3px;
    height: 3px;

    margin: 0 7px 3px 0;

    background: var(--gf-red-bright);
}

.gf-home-guide-grid a:nth-child(1) > span,
.gf-home-guide-grid a:nth-child(3) > span,
.gf-home-guide-grid a:nth-child(6) > span {
    opacity: 0.9;
}

/* 보조 경로는 한 톤 낮게 */
.gf-home-guide-grid a:nth-child(2) h3,
.gf-home-guide-grid a:nth-child(4) h3,
.gf-home-guide-grid a:nth-child(5) h3 {
    color: var(--gf-text);
}


/* ----------------------------------------------------------
   09 · LOWER PAGE RHYTHM — 섹션별 미세 변주
   구조는 그대로 두고 정렬·폭만 조금씩 어긋나게 한다.
   ---------------------------------------------------------- */

/* 02 CITY BRIEF — 본문 폭을 살짝 좁혀 3열 리듬을 다르게 */
.gf-home-section:nth-of-type(3) .gf-home-brief article strong {
    max-width: 30ch;
}

/* 04 BEFORE ENTRY — 헤더만 살짝 안쪽으로 */
.gf-home-section:nth-of-type(5) .gf-home-section-head {
    margin-left: clamp(0px, 2.4vw, 44px);
}

/* 03 OPERATION 은 이미 offset 되어 있으므로 추가 변주 없음 */


/* ----------------------------------------------------------
   10 · FOREGROUND SCRIM (HOME)
   도시 배경은 유지하고, 텍스트가 놓이는 자리만 어둡게.
   ---------------------------------------------------------- */

.gf-home-manifesto,
.gf-home-brief article,
.gf-home-run,
.gf-home-run-note,
.gf-home-title {
    position: relative;
}

.gf-home-title::before {
    content: "";

    position: absolute;
    inset: -118px -300px -110px -160px;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.9) 0%,
            rgba(10, 11, 14, 0.8) 26%,
            rgba(10, 11, 14, 0.54) 52%,
            rgba(10, 11, 14, 0.22) 76%,
            rgba(10, 11, 14, 0.06) 90%,
            transparent 100%
        );
}

.gf-home-manifesto::before {
    content: "";

    position: absolute;
    inset: -66px -220px -72px -110px;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.9) 0%,
            rgba(10, 11, 14, 0.8) 26%,
            rgba(10, 11, 14, 0.54) 52%,
            rgba(10, 11, 14, 0.22) 76%,
            rgba(10, 11, 14, 0.06) 90%,
            transparent 100%
        );
}

/* 우측 정보 패널 — 어두운 패널 표면, 하단으로 빠진다 */
.gf-home-hero-bottom {
    background:
        linear-gradient(
            180deg,
            rgba(15, 17, 22, 0.9),
            rgba(10, 11, 14, 0.72)
        );
}

/* CITY BRIEF */
.gf-home-brief article::after {
    content: "";

    position: absolute;
    inset: -52px -74px -70px -64px;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.9) 0%,
            rgba(10, 11, 14, 0.8) 26%,
            rgba(10, 11, 14, 0.54) 52%,
            rgba(10, 11, 14, 0.22) 76%,
            rgba(10, 11, 14, 0.06) 90%,
            transparent 100%
        );
}

/* OPERATION */
.gf-home-run::before {
    content: "";

    position: absolute;
    inset: -64px -180px -66px -110px;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.9) 0%,
            rgba(10, 11, 14, 0.8) 26%,
            rgba(10, 11, 14, 0.54) 52%,
            rgba(10, 11, 14, 0.22) 76%,
            rgba(10, 11, 14, 0.06) 90%,
            transparent 100%
        );
}

.gf-home-run-note::before {
    content: "";

    position: absolute;
    inset: -58px -190px -66px -110px;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.9) 0%,
            rgba(10, 11, 14, 0.8) 26%,
            rgba(10, 11, 14, 0.54) 52%,
            rgba(10, 11, 14, 0.22) 76%,
            rgba(10, 11, 14, 0.06) 90%,
            transparent 100%
        );
}

/* ==========================================================
   HOME · OFFICIAL RUN PROGRESS
   ========================================================== */

.gf-home-run-line {
    --gf-run-progress: 0%;
}

.gf-home-run-line span {
    position: relative;

    overflow: hidden;

    background: var(--gf-line);
}

.gf-home-run-line span::after {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: var(--gf-run-progress);
    height: 100%;

    background: var(--gf-red-bright);

    transition:
        width 700ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.gf-home-run-line[data-status="running"]::before,
.gf-home-run-line[data-status="completed"]::before {
    background: var(--gf-red-bright);
}

.gf-home-run-line[data-status="completed"]::after {
    background: var(--gf-red-bright);
    box-shadow:
        0 0 0 3px
        rgba(158, 51, 44, 0.2);
}
/* ==========================================================
   HOME · HERO INFO PANEL BOTTOM SPACE
   keyword row 아래에 패널 내부 breathing room을 확보한다.
   ========================================================== */

.gf-home-hero-bottom {
    padding-bottom: clamp(10px, 1vw, 16px);
}

/* 순정 자형 확인 */
.gf-home-manifesto,
.gf-home-manifesto p {
    letter-spacing: 0 !important;
}

.gf-home-manifesto p:first-child {
    font-weight: 700;
}

.gf-home-manifesto p:not(:first-child) {
    font-weight: 400;
}

/* ==========================================================
   HOME · MOBILE OPERATION HORIZONTAL TIMELINE
   ========================================================== */

@media (max-width: 860px) {

    .gf-home-run {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(72px, 1.3fr)
            minmax(0, 0.82fr);

        align-items: center;
        gap: 0 12px;

        width: 100%;
        max-width: none;

        padding: 22px 0 24px;
    }

    .gf-home-run-date {
        min-width: 0;
    }

    .gf-home-run-date:last-child {
        text-align: right;
    }

    .gf-home-run-date > span {
        margin-bottom: 8px;
        padding-bottom: 4px;

        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .gf-home-run-date strong {
        font-size: clamp(1.72rem, 8.2vw, 2.15rem);
        line-height: 0.98;
    }

    .gf-home-run-line {
        width: 100%;
        height: 1px;

        margin: 17px 0 0;
    }

    .gf-home-run-line span {
        width: 100%;
        height: 1px;
    }

    .gf-home-run-line::before {
        top: 50%;
        left: 0;

        transform: translate(-50%, -50%);
    }

    .gf-home-run-line::after {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;

        transform: translate(50%, -50%);
    }

    .gf-home-run-note {
        margin-top: 20px;
    }
}

@media (max-width: 420px) {

    .gf-home-run {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(58px, 1.15fr)
            minmax(0, 0.9fr);

        gap: 0 10px;
    }

    .gf-home-run-date strong {
        font-size: clamp(1.58rem, 8vw, 1.95rem);
    }
}


/* ==========================================================
   HOME · MOBILE OPERATION ALIGNMENT FIX
   ========================================================== */

@media (max-width: 860px) {

    .gf-home-section:nth-of-type(4) .gf-home-run,
    .gf-home-section:nth-of-type(4) .gf-home-run-note {
        margin-left: 0;
    }

    .gf-home-run {
        grid-template-columns:
            auto
            minmax(54px, 1fr)
            auto;

        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        gap: 0 14px;
    }

    .gf-home-run-date {
        width: auto;
        min-width: 0;
    }

    .gf-home-run-date:last-child {
        text-align: right;
    }

    .gf-home-run-line {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 420px) {

    .gf-home-run {
        grid-template-columns:
            auto
            minmax(42px, 1fr)
            auto;

        gap: 0 10px;
    }
}


/* HOME · MOBILE OPERATION HEADER ALIGNMENT */
@media (max-width: 860px) {
    .gf-home-section:nth-of-type(4) .gf-home-section-head {
        margin-left: clamp(0px, 2.4vw, 44px);
    }
}


/* ==========================================================
   HOME · MOBILE SECTION HEADER ALIGNMENT
   데스크톱용 비대칭 offset을 모바일에서는 해제
   ========================================================== */

@media (max-width: 860px) {

    .gf-home-section:nth-of-type(4) .gf-home-section-head,
    .gf-home-section:nth-of-type(5) .gf-home-section-head {
        margin-left: 0;
    }

}


/* ==========================================================
   MOBILE PASS 01 · OPERATION HORIZONTAL
   ========================================================== */

@media (max-width: 860px) {

    .gf-home-section:nth-of-type(4) .gf-home-run,
    .gf-home-section:nth-of-type(4) .gf-home-run-note {
        margin-left: 0;
    }

    .gf-home-run {
        grid-template-columns:
            minmax(74px, auto)
            minmax(40px, 1fr)
            minmax(74px, auto);

        align-items: end;
        gap: 0 12px;

        width: 100%;
        max-width: none;

        padding: 18px 0 18px;
    }

    .gf-home-run-date:last-child {
        text-align: right;
    }

    .gf-home-run-date > span {
        margin-bottom: 8px;
    }

    .gf-home-run-date strong {
        font-size: clamp(1.72rem, 8.5vw, 2.18rem);
        line-height: 1.02;
    }

    .gf-home-run-line {
        display: flex;
        align-items: center;
        align-self: end;

        width: 100%;
        height: 1px;

        margin: 0 0 11px;
    }

    .gf-home-run-line span {
        width: 100%;
        height: 1px;
    }

    .gf-home-run-line span::after {
        width: var(--gf-run-progress);
        height: 100%;
    }

    .gf-home-run-line::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: auto;

        transform: translate(-50%, -50%);
    }

    .gf-home-run-line::after {
        top: 50%;
        bottom: auto;
        left: auto;
        right: 0;

        transform: translate(50%, -50%);
    }

    .gf-home-run-note {
        margin-top: 18px;
    }
}

@media (max-width: 520px) {

    .gf-home-run {
        grid-template-columns:
            76px
            minmax(32px, 1fr)
            76px;

        gap: 0 10px;
    }
}

/* ==========================================================
   MOBILE QA · HOME OPERATION
   ========================================================== */

@media (max-width: 560px) {

    .gf-home-run {
        grid-template-columns: minmax(0, 1fr) minmax(68px, 0.75fr) minmax(0, 1fr);
        align-items: end;
        column-gap: 8px;

        padding: 16px 0 18px;
    }

    .gf-home-run-date:last-child {
        text-align: right;
    }

    .gf-home-run-date > span {
        margin-bottom: 8px;
    }

    .gf-home-run-date strong {
        font-size: clamp(1.72rem, 9vw, 2rem);
    }

    .gf-home-run-line {
        display: flex;
        align-items: center;

        width: 100%;
        height: 1px;
        margin: 0 0 13px;
    }

    .gf-home-run-line span {
        width: 100%;
        height: 1px;
    }

    .gf-home-run-line::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: auto;

        transform: translateY(-50%);
    }

    .gf-home-run-line::after {
        top: 50%;
        bottom: auto;
        left: auto;
        right: 0;

        transform: translateY(-50%);
    }

    .gf-home-run-note {
        margin-top: 15px;
    }
}

/* ==========================================================
   GF MOBILE FINAL TUNE 20260908
   ========================================================== */

@media (max-width: 860px) {

    /* GUIDE INDEX — 높이만 살짝 압축 */
    .gf-home-guide-grid a {
        min-height: 0;
        padding: 16px 18px 18px;
    }


    /* 흐린 HOME mono / meta 가독성 소폭 상승 */
    .gf-home-hero-meta > p:last-child {
        color: var(--gf-text-faint);
        opacity: 0.88;
    }

    .gf-home-eyebrow {
        color: var(--gf-text-faint);
        opacity: 0.9;
    }

    .gf-home-guide-grid a > span {
        opacity: 0.82;
    }

    .gf-home-guide-grid a > p {
        opacity: 0.9;
    }

    .gf-home-world-link > span {
        color: var(--gf-text-faint);
        opacity: 0.88;
    }


    /* OPERATION — 날짜는 그대로, 가운데 선이 남는 폭을 최대한 사용 */
    .gf-home-run {
        grid-template-columns:
            auto
            minmax(96px, 1fr)
            auto;

        column-gap: 8px;
        width: 100%;
        max-width: none;
    }

    .gf-home-run-date:last-child {
        text-align: right;
    }

    .gf-home-run-line {
        width: 100%;
        min-width: 0;
        height: 1px;
        margin: 0 0 13px;
    }

    .gf-home-run-line span {
        width: 100%;
        height: 1px;
    }
}


@media (max-width: 380px) {

    .gf-home-run {
        grid-template-columns:
            auto
            minmax(82px, 1fr)
            auto;

        column-gap: 6px;
    }
}

/* END · GF MOBILE FINAL TUNE 20260908 */

/* HOME · MOBILE OPERATION LINE LENGTH TUNE */
@media (max-width: 860px) {
    .gf-home-run-line {
        width: calc(100% - 20px);
        justify-self: center;
    }
}