@charset "UTF-8";

/* ==========================================================
   GREYFALL · BASE
   ----------------------------------------------------------
   무드: 히어로 시대가 끝난 뒤의 비 오는 범죄도시
         + 영화 오프닝 타이틀 + 고급 편집디자인
         + 절제된 행정 기록물
   ========================================================== */

/* 한글 Pretendard / 영문 display Barlow Condensed / 메타 IBM Plex Mono
   오프라인에서는 아래 system fallback 스택으로 자연스럽게 대체된다. */
@font-face {
    font-family: "Pretendard Variable";
    src: url("/assets/fonts/pretendard/PretendardVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/assets/fonts/barlow-condensed/BarlowCondensed-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/assets/fonts/barlow-condensed/BarlowCondensed-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/assets/fonts/barlow-condensed/BarlowCondensed-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/ibm-plex-mono/IBMPlexMono-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/ibm-plex-mono/IBMPlexMono-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
/* ----------------------------------------------------------
   01 · TOKENS
   ---------------------------------------------------------- */

:root {

    /* -- ink : warm charcoal 레이어링 ---------------------- */
    --gf-void:          #050506;
    --gf-bg:            #0c0d10;
    --gf-bg-soft:       #101116;
    --gf-surface:       #131519;
    --gf-surface-2:     #171a1f;
    --gf-surface-3:     #1d2027;
    --gf-shell:         #0e0f13;

    /* -- line : 따뜻한 회색 계열 --------------------------- */
    --gf-line-soft:     rgba(226, 219, 208, 0.055);
    --gf-line:          rgba(226, 219, 208, 0.098);
    --gf-line-strong:   rgba(226, 219, 208, 0.17);
    --gf-line-bright:   rgba(226, 219, 208, 0.3);

    /* -- text : warm gray ---------------------------------- */
    --gf-text-strong:   #f2eee7;
    --gf-text:          #e2ddd4;
    --gf-text-dim:      #bcb7ad;
    --gf-text-faint:    #86817a;
    --gf-text-ghost:    #56534e;

    /* -- signal : muted crimson ---------------------------- */
    --gf-red:           #9e332c;
    --gf-red-bright:    #c04a3e;
    --gf-red-soft:      #7d2822;
    --gf-red-deep:      #4a1512;
    --gf-red-wash:      rgba(158, 51, 44, 0.085);
    --gf-red-glow:      rgba(158, 51, 44, 0.22);

    /* -- accent 보조 --------------------------------------- */
    --gf-amber:         #a98a52;
    --gf-amber-wash:    rgba(169, 138, 82, 0.07);
    --gf-good:          #6d8f72;

    /* -- type ---------------------------------------------- */
    --gf-font:
        "Pretendard Variable", Pretendard, SUIT,
        -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Segoe UI",
        "Malgun Gothic", "Noto Sans KR",
        system-ui, sans-serif;

    /* 영문 display — condensed sans (산업 도시 표지판 / 사건 기록) */
    --gf-font-display:
        "Barlow Condensed", "IBM Plex Sans Condensed",
        "Roboto Condensed", "Arial Narrow",
        "Pretendard Variable", Pretendard,
        "Apple SD Gothic Neo", "Malgun Gothic",
        sans-serif;

    /* display weight — 시스템 전체 통일 */
    --gf-w-display:     600;
    --gf-w-display-lg:  600;

    /* NAV / 날짜 / 메타 전용 */
    --gf-mono:
        "IBM Plex Mono", ui-monospace, SFMono-Regular,
        "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* -- metrics ------------------------------------------- */
    --gf-max-width:     1200px;
    --gf-gutter:        32px;
    --gf-gutter-m:      20px;
    --gf-header-h:      70px;
    --gf-header-h-s:    62px;

    --gf-space-section: clamp(44px, 4.6vw, 70px);
    --gf-space-block:   clamp(24px, 2.8vw, 36px);

    /* -- elevation ----------------------------------------- */
    --gf-inset:         inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --gf-inset-soft:    inset 0 1px 0 rgba(255, 255, 255, 0.022);
    --gf-lift:          0 18px 38px -22px rgba(0, 0, 0, 0.9);

    /* -- legacy aliases ------------------------------------ */
    --gf-muted:         var(--gf-text-dim);
    --gf-accent:        var(--gf-red);
}


/* ----------------------------------------------------------
   02 · RESET
   ---------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--gf-bg);
    color: var(--gf-text);

    font-family: var(--gf-font);
    font-size: 100%;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    position: relative;

    margin: 0;
    min-height: 100vh;

    background-color: var(--gf-bg);
    color: var(--gf-text);

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.003em;

    word-break: keep-all;
    overflow-wrap: break-word;
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ----------------------------------------------------------
   03 · ATMOSPHERE
   비 오는 항구도시 · 젖은 아스팔트 · 먼 붉은 신호
   ---------------------------------------------------------- */

/* 레이어 1 — 도시 배경.
   position:absolute (문서 기준) 이므로 뷰포트를 따라다니지 않는다.
   실루엣 3종을 문서의 서로 다른 높이에 배치해 반복 인상을 없앤다.
   가독성은 배경을 지워서가 아니라 §14 전경 스크림으로 확보한다. */
body::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:
        /* 근경 실루엣 — 문서 하단 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 250' preserveAspectRatio='none'%3E%3Cg opacity='0.62'%3E%3Cg fill='%23070809'%3E%3Crect x='0' y='111' width='52' height='139'/%3E%3Crect x='55' y='106' width='59' height='144'/%3E%3Crect x='120' y='68' width='68' height='182'/%3E%3Crect x='189' y='164' width='80' height='86'/%3E%3Crect x='270' y='137' width='98' height='113'/%3E%3Crect x='368' y='67' width='127' height='183'/%3E%3Crect x='495' y='117' width='77' height='133'/%3E%3Crect x='574' y='97' width='74' height='153'/%3E%3Crect x='651' y='108' width='115' height='142'/%3E%3Crect x='769' y='103' width='50' height='147'/%3E%3Crect x='823' y='82' width='64' height='168'/%3E%3Crect x='894' y='103' width='69' height='147'/%3E%3Crect x='965' y='128' width='63' height='122'/%3E%3Crect x='1030' y='163' width='96' height='87'/%3E%3Crect x='1129' y='154' width='69' height='96'/%3E%3Crect x='1198' y='90' width='61' height='160'/%3E%3Crect x='1263' y='166' width='72' height='84'/%3E%3Crect x='1335' y='165' width='81' height='85'/%3E%3Crect x='1370' y='147' width='10' height='18'/%3E%3Crect x='1418' y='162' width='96' height='88'/%3E%3Crect x='1516' y='125' width='84' height='125'/%3E%3C/g%3E%3Cg fill='%23e0b781' opacity='0.58'%3E%3Crect x='504' y='129' width='5' height='7'/%3E%3Crect x='617' y='109' width='5' height='7'/%3E%3Crect x='617' y='147' width='5' height='7'/%3E%3Crect x='660' y='196' width='5' height='7'/%3E%3Crect x='728' y='120' width='5' height='7'/%3E%3Crect x='1427' y='174' width='5' height='7'/%3E%3Crect x='1559' y='213' width='5' height='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        /* 중경 실루엣 — 문서 68% 지점 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cg opacity='0.26'%3E%3Cg fill='%2312161d'%3E%3Crect x='0' y='76' width='97' height='144'/%3E%3Crect x='100' y='72' width='73' height='148'/%3E%3Crect x='173' y='102' width='102' height='118'/%3E%3Crect x='275' y='117' width='115' height='103'/%3E%3Crect x='326' y='85' width='13' height='32'/%3E%3Crect x='393' y='117' width='99' height='103'/%3E%3Crect x='498' y='63' width='107' height='157'/%3E%3Crect x='605' y='127' width='114' height='93'/%3E%3Crect x='726' y='95' width='108' height='125'/%3E%3Crect x='834' y='78' width='70' height='142'/%3E%3Crect x='904' y='125' width='96' height='95'/%3E%3Crect x='948' y='107' width='9' height='18'/%3E%3Crect x='1001' y='142' width='93' height='78'/%3E%3Crect x='1097' y='128' width='103' height='92'/%3E%3Crect x='1205' y='120' width='72' height='100'/%3E%3Crect x='1284' y='114' width='79' height='106'/%3E%3Crect x='1366' y='108' width='97' height='112'/%3E%3Crect x='1468' y='106' width='92' height='114'/%3E%3Crect x='1509' y='83' width='11' height='23'/%3E%3Crect x='1561' y='83' width='39' height='137'/%3E%3C/g%3E%3Cg fill='%23d9ae7a' opacity='0.5'%3E%3Crect x='141' y='156' width='5' height='7'/%3E%3Crect x='214' y='114' width='5' height='7'/%3E%3Crect x='246' y='150' width='5' height='7'/%3E%3Crect x='316' y='165' width='5' height='7'/%3E%3Crect x='434' y='165' width='5' height='7'/%3E%3Crect x='571' y='183' width='5' height='7'/%3E%3Crect x='1509' y='190' width='5' height='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        /* 원경 실루엣 — 문서 34% 지점 (안개 속) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cg opacity='0.2'%3E%3Cg fill='%23222833'%3E%3Crect x='0' y='128' width='122' height='72'/%3E%3Crect x='127' y='146' width='107' height='54'/%3E%3Crect x='237' y='124' width='125' height='76'/%3E%3Crect x='369' y='110' width='75' height='90'/%3E%3Crect x='445' y='128' width='80' height='72'/%3E%3Crect x='479' y='99' width='13' height='29'/%3E%3Crect x='530' y='92' width='72' height='108'/%3E%3Crect x='605' y='98' width='99' height='102'/%3E%3Crect x='648' y='72' width='12' height='26'/%3E%3Crect x='708' y='138' width='75' height='62'/%3E%3Crect x='788' y='102' width='82' height='98'/%3E%3Crect x='873' y='143' width='102' height='57'/%3E%3Crect x='981' y='93' width='48' height='107'/%3E%3Crect x='1030' y='150' width='92' height='50'/%3E%3Crect x='1127' y='119' width='49' height='81'/%3E%3Crect x='1178' y='97' width='52' height='103'/%3E%3Crect x='1231' y='101' width='67' height='99'/%3E%3Crect x='1303' y='92' width='120' height='108'/%3E%3Crect x='1358' y='75' width='10' height='17'/%3E%3Crect x='1423' y='144' width='58' height='56'/%3E%3Crect x='1486' y='96' width='114' height='104'/%3E%3C/g%3E%3Cg fill='%23d8b07a' opacity='0.55'%3E%3Crect x='614' y='144' width='5' height='7'/%3E%3Crect x='644' y='178' width='5' height='7'/%3E%3Crect x='797' y='148' width='5' height='7'/%3E%3Crect x='1136' y='131' width='5' height='7'/%3E%3Crect x='1495' y='108' width='5' height='7'/%3E%3Crect x='1525' y='108' width='5' height='7'/%3E%3Crect x='1555' y='176' width='5' height='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),

        /* 젖은 노면 반사 */
        linear-gradient(
            180deg,
            transparent calc(100% - 470px),
            rgba(196, 158, 112, 0.045) calc(100% - 250px),
            rgba(158, 51, 44, 0.05) calc(100% - 178px),
            rgba(9, 10, 13, 0.9) calc(100% - 140px),
            rgba(9, 10, 13, 0.97) 100%
        ),

        /* muted red atmospheric glow — 가장자리 / 빈 공간 */
        radial-gradient(
            420px 260px at 88% 30%,
            rgba(170, 56, 46, 0.16),
            transparent 72%
        ),
        radial-gradient(
            360px 220px at 6% 62%,
            rgba(170, 56, 46, 0.12),
            transparent 74%
        ),
        radial-gradient(
            300px 180px at 82% calc(100% - 300px),
            rgba(176, 58, 48, 0.2),
            transparent 72%
        ),

        /* warm charcoal haze — 도시 대기 */
        radial-gradient(
            120% 420px at 50% 34%,
            rgba(198, 160, 114, 0.075),
            transparent 70%
        ),
        radial-gradient(
            110% 380px at 50% 68%,
            rgba(198, 160, 114, 0.065),
            transparent 72%
        ),
        radial-gradient(
            86% 340px at 50% calc(100% - 172px),
            rgba(198, 160, 114, 0.13),
            transparent 70%
        ),

        /* 상단 광원 */
        radial-gradient(
            112% 460px at 50% 0%,
            rgba(233, 226, 214, 0.055),
            transparent 66%
        );

    background-repeat:
        repeat-x, repeat-x, repeat-x,
        no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat;

    background-position:
        bottom 168px center, center 68%, center 34%,
        bottom, center, center, bottom,
        center 34%, center 68%, bottom, top;

    background-size:
        1600px 168px, 1600px 132px, 1600px 112px,
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* 레이어 2 — 비 · 그레인 · 가장자리 비네트 (뷰포트 고정, 하드 엣지 없음) */
body::after {
    content: "";

    position: fixed;
    inset: -220px -48px -180px -48px;
    z-index: 0;

    pointer-events: none;

    opacity: 0.58;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),
        repeating-linear-gradient(
            78deg,
            rgba(233, 226, 214, 0.042) 0 1px,
            transparent 1px 9px,
            rgba(233, 226, 214, 0.018) 9px 10px,
            transparent 10px 23px
        ),
        repeating-linear-gradient(
            74deg,
            rgba(233, 226, 214, 0.024) 0 1px,
            transparent 1px 31px
        ),
        repeating-linear-gradient(
            81deg,
            rgba(233, 226, 214, 0.015) 0 1px,
            transparent 1px 47px
        ),
        radial-gradient(
            122% 90% at 50% 46%,
            transparent 54%,
            rgba(5, 5, 6, 0.62) 100%
        );

    background-size: 180px 180px, auto, auto, auto, cover;

    animation: gf-rain 5.9s linear infinite;
}

@keyframes gf-rain {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-34px, 148px, 0); }
}

body > * {
    position: relative;
    z-index: 1;
}


/* ----------------------------------------------------------
   04 · ELEMENT DEFAULTS
   ---------------------------------------------------------- */

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.018em;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--gf-red);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--gf-red-bright);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}


/* ----------------------------------------------------------
   05 · LAYOUT
   ---------------------------------------------------------- */

.gf-main {
    width: min(
        calc(100% - (var(--gf-gutter) * 2)),
        var(--gf-max-width)
    );

    margin: 0 auto;
    padding: clamp(34px, 3.6vw, 52px) 0 clamp(28px, 2.8vw, 40px);
}

[id] {
    scroll-margin-top: calc(var(--gf-header-h) + 24px);
}


/* ----------------------------------------------------------
   06 · TYPE PRIMITIVES
   ---------------------------------------------------------- */

/* 기록 번호 — 00 / HOME */
.gf-section-number {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 16px;

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

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

.gf-section-number::before {
    content: "";

    width: 20px;
    height: 1px;

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

/* 페이지 타이틀 — 영문 condensed */
.gf-title {
    margin: 0;

    font-family: var(--gf-font-display);
    font-size: clamp(2.3rem, 5vw, 3.9rem);
    font-weight: var(--gf-w-display-lg);
    line-height: 1.0;
    letter-spacing: -0.012em;

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

    word-break: keep-all;
    overflow-wrap: break-word;
}

.gf-subtitle {
    max-width: 60ch;
    margin-top: 18px;

    color: var(--gf-text-dim);
    font-size: 0.96rem;
    font-weight: 400;
    line-height: 1.85;
}


/* ----------------------------------------------------------
   07 · SHARED · HERO LEAD / INTRO
   ---------------------------------------------------------- */

.gf-world-lead,
.gf-rules-lead,
.gf-participation-lead,
.gf-schedule-lead,
.gf-faq-lead {
    position: relative;

    max-width: 40ch;
    margin-top: clamp(20px, 2.4vw, 30px);
    padding-left: 18px;

    color: var(--gf-text-strong);
    font-size: clamp(1.1rem, 1.8vw, 1.38rem);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

/* 얇은 수직 룰 + 상단 red tick */
.gf-world-lead::before,
.gf-rules-lead::before,
.gf-participation-lead::before,
.gf-schedule-lead::before,
.gf-faq-lead::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.42em;
    bottom: 0.2em;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            var(--gf-red-bright) 0 22px,
            var(--gf-line-strong) 22px
        );
}

.gf-world-intro,
.gf-rules-intro,
.gf-participation-intro,
.gf-schedule-intro,
.gf-faq-intro {
    max-width: 56ch;
    margin-top: 16px;

    color: var(--gf-text-dim);
    font-size: 0.94rem;
    line-height: 1.86;
}


/* ----------------------------------------------------------
   08 · SHARED · SECTION INDEX
   ---------------------------------------------------------- */

.gf-world-index,
.gf-rules-index,
.gf-participation-index,
.gf-faq-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

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

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

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.016),
            transparent 56%
        );
}

.gf-world-index a,
.gf-rules-index a,
.gf-participation-index a,
.gf-faq-index a {
    position: relative;

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

    min-height: 56px;
    padding: 15px 16px;

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

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

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

    transition:
        color 180ms ease,
        background-color 180ms ease,
        padding-left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-world-index a span,
.gf-rules-index a span,
.gf-participation-index a span,
.gf-faq-index a span {
    color: var(--gf-text-ghost);
    font-size: 0.66rem;

    transition: color 180ms ease;
}

.gf-world-index a::before,
.gf-rules-index a::before,
.gf-participation-index a::before,
.gf-faq-index a::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 1px;

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

    transform: scaleY(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-world-index a:hover,
.gf-rules-index a:hover,
.gf-participation-index a:hover,
.gf-faq-index a:hover {
    padding-left: 22px;

    color: var(--gf-text-strong);
    background-color: rgba(255, 255, 255, 0.03);
}

.gf-world-index a:hover span,
.gf-rules-index a:hover span,
.gf-participation-index a:hover span,
.gf-faq-index a:hover span {
    color: var(--gf-red-bright);
}

.gf-world-index a:hover::before,
.gf-rules-index a:hover::before,
.gf-participation-index a:hover::before,
.gf-faq-index a:hover::before {
    transform: scaleY(1);
}


/* ----------------------------------------------------------
   09 · SHARED · SECTION HEAD
   ---------------------------------------------------------- */

.gf-world-section,
.gf-rules-section,
.gf-participation-section,
.gf-schedule-section,
.gf-faq-section,
.gf-home-section {
    margin-top: var(--gf-space-section);
}

.gf-world-section-head,
.gf-rules-section-head,
.gf-participation-section-head,
.gf-schedule-section-head,
.gf-faq-section-head,
.gf-home-section-head {
    position: relative;

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

    padding-top: 14px;
    margin-bottom: clamp(20px, 2.2vw, 30px);

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

/* 섹션 시작 red tick — 디자인 언어 반복 */
.gf-world-section-head::before,
.gf-rules-section-head::before,
.gf-participation-section-head::before,
.gf-schedule-section-head::before,
.gf-faq-section-head::before,
.gf-home-section-head::before {
    content: "";

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

    width: 28px;
    height: 1px;

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

.gf-world-section-head > span,
.gf-rules-section-head > span,
.gf-participation-section-head > span,
.gf-schedule-section-head > span,
.gf-faq-section-head > span,
.gf-home-section-head > span {
    display: block;

    font-family: var(--gf-mono);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.72;

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

/* 번호와 라벨을 한 줄로 묶는 구분자 */
.gf-world-section-head > span::after,
.gf-rules-section-head > span::after,
.gf-participation-section-head > span::after,
.gf-schedule-section-head > span::after,
.gf-faq-section-head > span::after,
.gf-home-section-head > span::after {
    content: " /";
    color: var(--gf-text-ghost);
}

.gf-world-eyebrow,
.gf-rules-eyebrow,
.gf-participation-eyebrow,
.gf-schedule-eyebrow,
.gf-faq-eyebrow,
.gf-home-eyebrow {
    margin: 0 0 7px;

    font-family: var(--gf-mono);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.72;

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

.gf-world-section-head h2,
.gf-rules-section-head h2,
.gf-participation-section-head h2,
.gf-schedule-section-head h2,
.gf-faq-section-head h2,
.gf-home-section-head h2 {
    max-width: 22ch;

    font-size: clamp(1.42rem, 2.5vw, 1.94rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.026em;

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

/* 영문 h2 는 condensed */
.gf-home-section-head h2 {
    font-family: var(--gf-font-display);
    font-weight: var(--gf-w-display);
    letter-spacing: -0.012em;
    line-height: 1.1;

    font-size: clamp(1.62rem, 2.9vw, 2.28rem);
}


/* ----------------------------------------------------------
   10 · SHARED · BODY COPY
   ---------------------------------------------------------- */

.gf-world-copy,
.gf-rules-copy {
    max-width: 66ch;
    margin-left: 37px;
}

.gf-world-copy-reset,
.gf-rules-copy-reset {
    margin-left: 0;
}

.gf-world-copy p,
.gf-rules-copy p {
    margin: 0 0 1em;

    color: var(--gf-text-dim);
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.9;
}

.gf-world-copy p:last-child,
.gf-rules-copy p:last-child {
    margin-bottom: 0;
}

.gf-world-copy .gf-world-copy-lead,
.gf-rules-copy .gf-rules-copy-lead {
    color: var(--gf-text-strong);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.74;
    letter-spacing: -0.016em;
}


/* ----------------------------------------------------------
   11 · SHARED · NEXT LINK
   ---------------------------------------------------------- */

.gf-world-next,
.gf-rules-next,
.gf-participation-next,
.gf-schedule-next,
.gf-faq-next {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 28px;

    margin-top: clamp(36px, 3.8vw, 52px);
    padding-top: 18px;

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

.gf-world-next > p,
.gf-rules-next > p,
.gf-participation-next > p,
.gf-schedule-next > p,
.gf-faq-next > p {
    font-family: var(--gf-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;

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

.gf-world-next > a,
.gf-rules-next > a,
.gf-participation-next > a,
.gf-schedule-next > a,
.gf-faq-next > a {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    font-family: var(--gf-font-display);
    font-size: clamp(1.32rem, 2.5vw, 1.78rem);
    font-weight: var(--gf-w-display);
    letter-spacing: -0.012em;

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

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

.gf-world-next > a span,
.gf-rules-next > a span,
.gf-participation-next > a span,
.gf-schedule-next > a span,
.gf-faq-next > a span {
    color: var(--gf-red-bright);
    font-size: 0.7em;
}

.gf-world-next > a:hover,
.gf-rules-next > a:hover,
.gf-participation-next > a:hover,
.gf-schedule-next > a:hover,
.gf-faq-next > a:hover {
    gap: 24px;
    color: var(--gf-red-bright);
}


/* ----------------------------------------------------------
   12 · SHARED · CALLOUT
   ---------------------------------------------------------- */

.gf-rules-alert,
.gf-rules-warning {
    position: relative;

    margin-top: clamp(22px, 2.4vw, 32px);
    padding: 21px 24px 21px 26px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            transparent 44%
        ),
        linear-gradient(
            104deg,
            var(--gf-red-wash),
            rgba(158, 51, 44, 0.012) 66%
        ),
        var(--gf-surface);

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

.gf-rules-alert::before,
.gf-rules-warning::before {
    content: "";

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

    width: 2px;

    background:
        linear-gradient(
            180deg,
            var(--gf-red-bright),
            var(--gf-red-soft)
        );
}

.gf-rules-alert > span,
.gf-rules-warning > span {
    display: block;
    margin-bottom: 11px;

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

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

.gf-rules-alert strong,
.gf-rules-warning strong {
    display: block;

    font-size: clamp(0.98rem, 1.8vw, 1.14rem);
    font-weight: 600;
    line-height: 1.74;
    letter-spacing: -0.016em;

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

/* 중립 정보 패널 */
.gf-world-atmosphere,
.gf-world-note,
.gf-submission-note,
.gf-individual-rule,
.gf-latest-notice,
.gf-required-reading {
    position: relative;

    margin-top: clamp(20px, 2.2vw, 30px);
    padding: 19px 22px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            transparent 50%
        ),
        var(--gf-surface);

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

.gf-world-atmosphere::before,
.gf-world-note::before,
.gf-submission-note::before,
.gf-individual-rule::before,
.gf-latest-notice::before,
.gf-required-reading::before {
    content: "";

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

    width: 1px;
    height: 28px;

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


/* ----------------------------------------------------------
   13 · UTILITY
   ---------------------------------------------------------- */

.gf-placeholder {
    margin-top: 56px;
    padding-top: 22px;

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

    color: var(--gf-text-faint);
    font-size: 0.85rem;
}


/* ----------------------------------------------------------
   14 · RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .gf-world-copy,
    .gf-rules-copy {
        margin-left: 0;
    }
}

@media (max-width: 860px) {

    :root {
        --gf-gutter: var(--gf-gutter-m);
    }

    [id] {
        scroll-margin-top: calc(var(--gf-header-h) + 14px);
    }

    /* 모바일에서는 실루엣 밀도만 낮춘다 (배경 자체는 유지) */
    body::before {
        background-size:
            1040px 124px, 1040px 96px, 1040px 82px,
            100% 100%, 100% 100%, 100% 100%, 100% 100%,
            100% 100%, 100% 100%, 100% 100%, 100% 100%;
    }

    body::after {
        opacity: 0.46;
    }

    .gf-world-index,
    .gf-rules-index,
    .gf-participation-index,
    .gf-faq-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 번호 + 라벨은 좁은 화면에서도 한 줄을 유지한다 */
    .gf-world-section-head,
    .gf-rules-section-head,
    .gf-participation-section-head,
    .gf-schedule-section-head,
    .gf-faq-section-head,
    .gf-home-section-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 8px;

        padding-top: 13px;
    }

    .gf-world-section-head h2,
    .gf-rules-section-head h2,
    .gf-participation-section-head h2,
    .gf-schedule-section-head h2,
    .gf-faq-section-head h2,
    .gf-home-section-head h2 {
        max-width: none;
    }

    .gf-world-next > a,
    .gf-rules-next > a,
    .gf-participation-next > a,
    .gf-schedule-next > a,
    .gf-faq-next > a {
        min-height: 44px;
        padding: 4px 0;
    }

    .gf-rules-alert,
    .gf-rules-warning {
        padding: 21px 19px 21px 21px;
    }

    .gf-world-atmosphere,
    .gf-world-note,
    .gf-submission-note,
    .gf-individual-rule,
    .gf-latest-notice,
    .gf-required-reading {
        padding: 19px 17px;
    }
}

@media (max-width: 420px) {

    :root {
        --gf-header-h: var(--gf-header-h-s);
    }

    .gf-world-index,
    .gf-rules-index,
    .gf-participation-index,
    .gf-faq-index {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ----------------------------------------------------------
   15 · REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    body::after {
        animation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* ----------------------------------------------------------
   14 · FOREGROUND SCRIM
   CITY BACKGROUND → DARK SCRIM → TEXT 의 3계층.
   배경을 지우는 대신 글자가 놓이는 자리만 국소적으로 어둡게 한다.
   모든 방향으로 transparent 까지 빠지는 radial falloff 이므로
   "박스가 하나 더 생겼다"는 인상이 없다.
   ---------------------------------------------------------- */

.gf-world-copy,
.gf-rules-copy,
.gf-world-section-head,
.gf-rules-section-head,
.gf-participation-section-head,
.gf-schedule-section-head,
.gf-faq-section-head,
.gf-home-section-head,
.gf-world-lead,
.gf-rules-lead,
.gf-participation-lead,
.gf-schedule-lead,
.gf-faq-lead,
.gf-world-intro,
.gf-rules-intro,
.gf-participation-intro,
.gf-schedule-intro,
.gf-faq-intro,
.gf-subtitle,
.gf-title {
    position: relative;
}

/* 본문 블록 */
.gf-world-copy::before,
.gf-rules-copy::before,
.gf-world-intro::before,
.gf-rules-intro::before,
.gf-participation-intro::before,
.gf-schedule-intro::before,
.gf-faq-intro::before,
.gf-subtitle::before {
    content: "";

    position: absolute;
    inset: -72px -190px -78px -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-world-section-head::after,
.gf-rules-section-head::after,
.gf-participation-section-head::after,
.gf-schedule-section-head::after,
.gf-faq-section-head::after,
.gf-home-section-head::after,
.gf-world-lead::after,
.gf-rules-lead::after,
.gf-participation-lead::after,
.gf-schedule-lead::after,
.gf-faq-lead::after {
    content: "";

    position: absolute;
    inset: -70px -210px -74px -100px;
    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-title::before {
    content: "";

    position: absolute;
    inset: -96px -270px -92px -140px;
    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-rules-alert,
.gf-rules-warning,
.gf-world-atmosphere,
.gf-world-note,
.gf-submission-note,
.gf-individual-rule,
.gf-latest-notice,
.gf-required-reading {
    background-color: rgba(10, 11, 14, 0.94);
}

/* ==========================================================
   GLOBAL · SCROLLBAR
   ========================================================== */

html {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(226, 219, 208, 0.22)
        #0b0c0e;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0b0c0e;
}

::-webkit-scrollbar-thumb {
    background: rgba(226, 219, 208, 0.18);
    border: 2px solid #0b0c0e;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(226, 219, 208, 0.32);
}


/* ==========================================================
   GLOBAL · SCROLLBAR · SQUARE
   ========================================================== */

/* Chromium에서는 native thin scrollbar를 쓰지 않는다 */
html {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #090a0c;
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    min-height: 42px;

    background: rgba(226, 219, 208, 0.22);

    border: 0;
    border-radius: 0 !important;

    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.035),
        inset -1px 0 0 rgba(0, 0, 0, 0.55);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(226, 219, 208, 0.34);
}

::-webkit-scrollbar-corner {
    background: #090a0c;
}


/* GLOBAL · animated background clipping */
html,
body {
    overflow-x: clip;
}