@charset "UTF-8";

/* ==========================================================
   GREYFALL · WORLD
   설정집 / 도시 기록물
   ========================================================== */


/* ----------------------------------------------------------
   01 · ATMOSPHERE / NOTE
   ---------------------------------------------------------- */

.gf-world-atmosphere {
    margin-left: 118px;
    max-width: 66ch;
}

.gf-world-atmosphere > span {
    display: block;
    margin-bottom: 12px;

    font-family: var(--gf-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;

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

.gf-world-atmosphere p {
    font-size: 0.88rem;
    line-height: 1.95;

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

.gf-world-note {
    max-width: 62ch;

    font-size: 0.88rem;
    line-height: 1.9;

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


/* ----------------------------------------------------------
   02 · ABILITY · SPLIT + RULE LIST
   ---------------------------------------------------------- */

.gf-world-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(34px, 4.6vw, 68px);

    align-items: start;
}

.gf-world-rules {
    display: grid;

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

.gf-world-rules > div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0 16px;

    padding: 20px 0;

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

.gf-world-rules dt {
    font-family: var(--gf-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1.9;

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

.gf-world-rules dd {
    min-width: 0;
    margin: 0;
}

.gf-world-rules dd strong {
    display: block;

    font-family: var(--gf-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1.7;

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

.gf-world-rules dd span {
    display: block;
    margin-top: 8px;

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

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


/* ----------------------------------------------------------
   03 · STATEMENT (AFTER THE FALL)
   ---------------------------------------------------------- */

.gf-world-statement {
    margin-top: clamp(28px, 3.5vw, 46.2px);
    padding: clamp(34px, 4vw, 52px) 0;

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

.gf-world-statement > span {
    display: block;
    margin-bottom: 20px;

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

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

.gf-world-statement strong {
    display: block;

    font-family: var(--gf-font-display);
    font-size: clamp(1.6rem, 5vw, 3.4rem);
    font-weight: var(--gf-w-display);
    line-height: 1.04;
    letter-spacing: -0.018em;

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


/* ----------------------------------------------------------
   04 · FACTIONS
   ---------------------------------------------------------- */

.gf-world-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

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

.gf-world-card {
    position: relative;

    min-width: 0;
    padding: 26px 26px 30px;

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

.gf-world-card-number {
    display: block;

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

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

.gf-world-card-type {
    margin-top: 26px;

    font-family: var(--gf-mono);
    font-size: 0.6rem;
    letter-spacing: 0.11em;

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

.gf-world-card h3 {
    margin-top: 12px;

    font-family: var(--gf-font-display);
    font-size: clamp(1.18rem, 2.3vw, 1.62rem);
    font-weight: var(--gf-w-display);
    line-height: 1.14;
    letter-spacing: -0.015em;

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

.gf-world-card-ko {
    margin-top: 8px !important;
    padding-bottom: 18px;

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

    font-size: 0.82rem !important;
    letter-spacing: 0.06em;

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

.gf-world-card p {
    margin-top: 16px;

    font-size: 0.86rem;
    line-height: 1.88;

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


/* ----------------------------------------------------------
   05 · LOCATIONS
   ---------------------------------------------------------- */

.gf-place-list {
    border-top: 1px solid var(--gf-line-strong);
}

.gf-place {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0 26px;

    padding: 30px 0;

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

    transition: background-color 160ms ease;
}

.gf-place:hover {
    background: rgba(255, 255, 255, 0.018);
}

.gf-place > span {
    font-family: var(--gf-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1.9;

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

.gf-place > div {
    min-width: 0;
    max-width: 66ch;
}

/* 한국어 장소명 */
.gf-place-ko {
    color: #b6b1a7;

    font-family: inherit !important;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.gf-place h3 {
    margin-top: 10px;

    font-family: var(--gf-font-display);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: var(--gf-w-display);
    line-height: 1.1;
    letter-spacing: -0.016em;

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

.gf-place-desc {
    margin-top: 14px;

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

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

.gf-place small {
    display: block;
    margin-top: 16px;
    padding-left: 14px;

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

    font-family: var(--gf-mono);
    font-size: 0.68rem;
    line-height: 1.9;
    letter-spacing: 0.04em;

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


/* ----------------------------------------------------------
   06 · WORLD LOGIC
   ---------------------------------------------------------- */

.gf-world-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

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

.gf-world-principles article {
    min-width: 0;
    padding: 24px 24px 28px;

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

.gf-world-principles article span {
    display: block;

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

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

.gf-world-principles article strong {
    display: block;
    margin-top: 20px;

    font-size: clamp(0.96rem, 1.8vw, 1.1rem);
    font-weight: 600;
    line-height: 1.78;
    letter-spacing: -0.012em;

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


/* ----------------------------------------------------------
   07 · FINAL
   ---------------------------------------------------------- */

.gf-world-final {
    margin-top: clamp(35px, 4.2vw, 57.4px);
    padding-top: clamp(23.8px, 2.8vw, 35px);

    border-top: 2px solid var(--gf-red);
}

.gf-world-final > span {
    display: block;
    margin-bottom: 22px;

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

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

.gf-world-final strong {
    display: block;

    font-family: var(--gf-font-display);
    font-size: clamp(1.5rem, 4.6vw, 3.1rem);
    font-weight: var(--gf-w-display);
    line-height: 1.06;
    letter-spacing: -0.018em;

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

.gf-world-final strong + strong {
    margin-top: 6px;
    color: var(--gf-text-faint);
}


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

@media (max-width: 980px) {

    .gf-world-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .gf-world-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


@media (max-width: 900px) {

    .gf-world-atmosphere {
        margin-left: 0;
    }
}


@media (max-width: 860px) {

    .gf-world-card {
        padding: 22px 18px 26px;
    }

    .gf-place {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;

        padding: 24px 0 28px;
    }

    .gf-place > span {
        line-height: 1.4;
    }

    .gf-world-principles {
        grid-template-columns: minmax(0, 1fr);
    }

    .gf-world-principles article {
        padding: 20px 18px 24px;
    }

    .gf-world-rules > div {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0 12px;
    }

    .gf-world-statement,
    .gf-world-final {
        margin-left: 0;
    }
}


/* ----------------------------------------------------------
   99 · SURFACE POLISH
   얇은 border + 미세한 상단 명암 + 부드러운 hover
   ---------------------------------------------------------- */

.gf-world-card,
.gf-world-principles article {
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            transparent 46%
        );

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

    transition: background-color 260ms ease;
}

.gf-world-card:hover,
.gf-world-principles article:hover {
    background-color: rgba(255, 255, 255, 0.024);
}

/* 카드 좌상단 red tick */
.gf-world-card::after {
    content: "";

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

    width: 22px;
    height: 1px;

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

    opacity: 0;
    transition: opacity 260ms ease;
}

.gf-world-card:hover::after {
    opacity: 1;
}

.gf-place {
    position: relative;
}

.gf-place::after {
    content: "";

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

    width: 100%;
    height: 1px;

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

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

.gf-place:hover::after {
    transform: scaleX(1);
}


/* ==========================================================
   WORLD · FOREGROUND READABILITY LAYER
   ----------------------------------------------------------
   HOME 에서 검증된 3계층 구조를 WORLD 전체에 적용한다.

       CITY BACKGROUND   (base.css · 그대로 유지)
             ↓
       DARK SCRIM / SURFACE   ← 이 블록
             ↓
       CONTENT

   배경(skyline / haze / rain / grain / red glow)은 건드리지 않는다.
   ========================================================== */


/* ----------------------------------------------------------
   A · 공통 soft scrim
   closest-side 타원이라 각 변의 중점에서 정확히 transparent 가 되고,
   따라서 사각형 경계가 생기지 않는다.
   ---------------------------------------------------------- */

.gf-world-split,
.gf-world-rules,
.gf-world-statement,
.gf-world-final,
.gf-place > div,
.gf-world-card-grid,
.gf-world-principles {
    position: relative;
}

.gf-world-rules::before,
.gf-world-statement::before,
.gf-world-final::before,
.gf-place > div::before {
    content: "";

    position: absolute;
    z-index: -1;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.92) 0%,
            rgba(10, 11, 14, 0.84) 26%,
            rgba(10, 11, 14, 0.58) 52%,
            rgba(10, 11, 14, 0.24) 76%,
            rgba(10, 11, 14, 0.07) 90%,
            transparent 100%
        );
}

/* 능력 규칙 목록 (ABILITY) */
.gf-world-rules::before {
    inset: -56px -120px -60px -110px;
}

/* AFTER THE FALL 대형 문장 */
.gf-world-statement::before {
    inset: -60px -170px -64px -120px;
}

/* 마지막 대형 카피 */
.gf-world-final::before {
    inset: -70px -200px -76px -140px;
}

/* LOCATIONS 각 항목 */
.gf-place > div::before {
    inset: -40px -150px -46px -90px;
}

/* 긴 본문 — base.css 스크림을 WORLD 에서 한 단계 강하게 */
.gf-world-copy::before {
    inset: -76px -200px -84px -120px;

    background:
        radial-gradient(
            ellipse closest-side at 50% 50%,
            rgba(10, 11, 14, 0.93) 0%,
            rgba(10, 11, 14, 0.86) 26%,
            rgba(10, 11, 14, 0.6) 52%,
            rgba(10, 11, 14, 0.26) 76%,
            rgba(10, 11, 14, 0.08) 90%,
            transparent 100%
        );
}


/* ==========================================================
   WORLD · CONSOLIDATED REFINEMENT  (single source of truth)
   ----------------------------------------------------------
   이전에 4겹으로 누적되어 서로 값을 덮어쓰던 패치 블록을
   하나로 통합했다. 동일 셀렉터 중복 정의 없음.

   원칙
   - opacity 스택 대신 명시 색상 (부모 opacity 는 자식까지 흐리게 만든다)
   - 표면이 있는 곳에는 radial scrim 을 겹치지 않는다 (탁해짐 방지)
   - red 는 긴 경고선이 아니라 짧은 편집용 tick 으로만
   - 가독성 등급은 유지하거나 상향, 하향 없음
   ========================================================== */


/* ----------------------------------------------------------
   01 · WORLD 내부 인덱스 (본문 내 앵커 링크)
   ---------------------------------------------------------- */

.gf-world main a[href^="#"],
main a[href^="#"] {
    color: #a9a49b;

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

main a[href^="#"]:hover,
main a[href^="#"]:focus-visible {
    color: var(--gf-text-strong);
}


/* ----------------------------------------------------------
   02 · ABILITY — 하나의 편집 밴드
   슬래브처럼 보이지 않도록 가장자리를 그라디언트로 흘린다.
   ---------------------------------------------------------- */

.gf-world-split {
    position: relative;

    margin-inline: -26px;
    padding: 26px 26px 28px;

    /* 좌우 끝으로 갈수록 옅어져 잘린 상자처럼 보이지 않는다 */
    background:
        linear-gradient(
            90deg,
            rgba(10, 11, 14, 0.5) 0%,
            rgba(10, 11, 14, 0.84) 12%,
            rgba(10, 11, 14, 0.84) 88%,
            rgba(10, 11, 14, 0.5) 100%
        );

    border: 0;
    box-shadow: none;
}

/* 하드 보더 대신 양 끝이 사라지는 hairline */
.gf-world-split::before,
.gf-world-split::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226, 219, 208, 0.13) 14%,
            rgba(226, 219, 208, 0.13) 86%,
            transparent
        );
}

.gf-world-split::before { top: 0; }
.gf-world-split::after  { bottom: 0; }

/* 밴드 시작을 알리는 짧은 red tick */
.gf-world-split::before {
    background:
        linear-gradient(
            90deg,
            var(--gf-red-bright) 0 46px,
            rgba(226, 219, 208, 0.13) 46px 86%,
            transparent
        );
}

.gf-world-split .gf-world-copy {
    /* 첫 문단이 첫 규칙(01)과 같은 선에서 시작하도록 상단 정렬 */
    align-self: start;
    padding: 2px 8px 0 0;
}

.gf-world-split .gf-world-copy p {
    color: var(--gf-text);
}

.gf-world-split .gf-world-copy .gf-world-copy-lead {
    color: var(--gf-text-strong);
}

/* 밴드 안에서는 별도 스크림이 필요 없다 */
.gf-world-split .gf-world-copy::before,
.gf-world-rules::before {
    content: none;
}


/* -- 규칙 목록 : 패널 속 패널이 아니라 같은 밴드 위의 컬럼 -- */

.gf-world-rules {
    padding: 0 0 0 26px;

    background: transparent;

    border-top: 1px solid rgba(226, 219, 208, 0.14);
    border-left: 1px solid rgba(226, 219, 208, 0.07);

    box-shadow: none;
}

.gf-world-rules > div {
    padding: 18px 0;
    border-bottom-color: rgba(226, 219, 208, 0.06);
}

.gf-world-rules > div:last-child {
    border-bottom: 0;
}

.gf-world-rules dt {
    color: rgba(190, 67, 58, 0.88);
}

.gf-world-rules dd strong {
    color: var(--gf-text-strong);
}

.gf-world-rules dd span {
    color: #cfcabf;
}


/* ----------------------------------------------------------
   02b · 본문 색상 (읽어야 하는 정보)
   ---------------------------------------------------------- */

.gf-world-copy p {
    color: var(--gf-text);
}

.gf-world-copy .gf-world-copy-lead {
    color: var(--gf-text-strong);
}

.gf-world-atmosphere p,
.gf-world-note {
    color: var(--gf-text);
}

.gf-world-card p {
    color: var(--gf-text);
}

.gf-world-principles article strong {
    color: var(--gf-text-strong);
}


/* ----------------------------------------------------------
   03 · FACTIONS
   ---------------------------------------------------------- */

.gf-world-card {
    background-color: rgba(10, 11, 14, 0.93);

    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.026),
            transparent 40%
        ),
        radial-gradient(
            90% 120% at 3% 0%,
            rgba(226, 219, 208, 0.03),
            transparent 60%
        );

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

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

.gf-world-card:hover {
    background-color: rgba(15, 17, 22, 0.96);

    box-shadow:
        var(--gf-inset),
        inset 0 -50px 70px -60px rgba(226, 219, 208, 0.4);
}

/* 영문 상위 라벨 = 장식 */
.gf-world-card-type {
    color: #7e7973;
}

/* 한글 명칭 = 실제 이름 */
.gf-world-card-ko {
    color: #b6b1a7 !important;
    letter-spacing: 0.04em;
}


/* ----------------------------------------------------------
   04 · LOCATIONS — 어두운 도시 기록 패널
   ---------------------------------------------------------- */

.gf-place {
    position: relative;

    margin-inline: -18px;
    padding: 28px 20px;

    background-color: rgba(10, 11, 14, 0.78);

    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.024),
            rgba(255, 255, 255, 0.006) 26%,
            transparent 56%
        ),
        linear-gradient(
            90deg,
            rgba(226, 219, 208, 0.02),
            transparent 30%,
            rgba(158, 51, 44, 0.022) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.026),
        inset 0 -1px 0 rgba(255, 255, 255, 0.012);

    transition: background-color 240ms ease;
}

/* 위→아래로 완만하게 밝아지는 램프 (교대 줄무늬 아님) */
.gf-place:nth-child(1) { background-color: rgba(10, 11, 14, 0.80); }
.gf-place:nth-child(2) { background-color: rgba(10, 11, 14, 0.78); }
.gf-place:nth-child(3) { background-color: rgba(10, 11, 14, 0.76); }
.gf-place:nth-child(4) { background-color: rgba(10, 11, 14, 0.74); }
.gf-place:nth-child(5) { background-color: rgba(10, 11, 14, 0.72); }

.gf-place:last-child {
    border-bottom: 0;
}

.gf-place:hover {
    background-color: rgba(16, 19, 24, 0.88);
}

/* 긴 경고선이 아니라 짧은 편집용 tick */
.gf-place::after {
    left: 20px;
    right: auto;
    width: 34px;

    background: var(--gf-red-bright);
    transform-origin: left;
}

/* 표면이 있으므로 항목별 scrim 은 해제 */
.gf-place > div::before {
    content: none;
}

/* 번호 — 장식, 그러나 판독은 가능하게 */
.gf-place > span {
    color: rgba(190, 67, 58, 0.78);
    opacity: 1;
}


/* 장소 설명 */
.gf-place-desc {
    color: var(--gf-text);
    font-size: 0.93rem;
}

/* 키워드 라인 — red rule 유지 */
.gf-place small {
    color: #b1aca2;
    font-size: 0.7rem;
    letter-spacing: 0.02em;

    border-left-color: rgba(158, 51, 44, 0.6);
}


/* ----------------------------------------------------------
   05 · 보조 패널 · 마무리
   ---------------------------------------------------------- */

/* 좁고 잘린 상자처럼 보이던 노트 패널을 컬럼 폭에 맞춘다 */
.gf-world-atmosphere,
.gf-world-note {
    max-width: 74ch;
    background-color: rgba(10, 11, 14, 0.93);
}

/* WORLD LOGIC 번호 */
.gf-world-principles article span {
    color: rgba(190, 67, 58, 0.78);
}

.gf-world-principles article {
    background-color: rgba(10, 11, 14, 0.92);
    transition: background-color 240ms ease;
}

.gf-world-principles article:hover {
    background-color: rgba(15, 17, 22, 0.95);
}

/* 섹션 마감 — red 를 경고선이 아니라 편집 포인트로 */
.gf-world-final {
    border-top: 1px solid rgba(226, 219, 208, 0.16);
}

.gf-world-final::after {
    content: "";

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

    width: 84px;
    height: 1px;

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

.gf-world-final > span,
.gf-world-statement > span {
    color: rgba(190, 67, 58, 0.9);
}

.gf-world-final strong {
    color: var(--gf-text-strong);
}

.gf-world-final strong + strong {
    color: #a8a39a;
}


/* ----------------------------------------------------------
   06 · RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 980px) {

    .gf-world-split {
        margin-inline: -14px;
        padding: 22px 14px 24px;
    }

    .gf-world-rules {
        margin-top: 10px;
        padding: 0;

        border-left: 0;
    }
}

@media (max-width: 860px) {

    .gf-place {
        margin-inline: -12px;
        padding: 24px 14px 28px;
    }

    .gf-place::after {
        left: 14px;
        width: 28px;
    }
}

@media (max-width: 560px) {

    .gf-world-split {
        margin-inline: -10px;
        padding: 20px 10px 22px;
    }
}

/* ==========================================================
   MOBILE PASS 01 · WORLD DENSITY
   ========================================================== */

@media (max-width: 860px) {

    /* ABILITY */
    .gf-world-rules > div {
        padding: 16px 0;
    }

    .gf-world-rules dd span {
        margin-top: 6px;
        line-height: 1.68;
    }

    /* AFTER HEROES */
    .gf-world-statement {
        margin-top: 24px;
        padding: 28px 0;
    }

    .gf-world-statement > span {
        margin-bottom: 16px;
    }

    /* FACTIONS */
    .gf-world-card {
        padding: 18px 18px 22px;
    }

    .gf-world-card-type {
        margin-top: 20px;
    }

    .gf-world-card h3 {
        margin-top: 10px;
    }

    .gf-world-card-ko {
        padding-bottom: 14px;
    }

    .gf-world-card p {
        margin-top: 13px;
        line-height: 1.72;
    }

    /* LOCATIONS */
    .gf-place {
        margin-inline: -8px;
        padding: 20px 10px 22px;
        gap: 8px;
    }

    .gf-place h3 {
        margin-top: 8px;
    }

    .gf-place-desc {
        margin-top: 11px;
        line-height: 1.7;
    }

    .gf-place small {
        margin-top: 13px;
        line-height: 1.72;
    }

    /* WORLD LOGIC */
    .gf-world-principles article {
        padding: 17px 18px 20px;
    }

    .gf-world-principles article strong {
        margin-top: 15px;
        line-height: 1.64;
    }

    /* long copy */
    .gf-world-atmosphere p,
    .gf-world-note,
    .gf-world-copy p {
        line-height: 1.76;
    }

    /* FINAL */
    .gf-world-final {
        margin-top: 30px;
        padding-top: 25px;
    }

    .gf-world-final > span {
        margin-bottom: 17px;
    }
}

/* ==========================================================
   MOBILE QA · WORLD DENSITY
   ========================================================== */

@media (max-width: 560px) {

    /* 상단 INDEX */
    .gf-world-index a {
        min-height: 0;
        padding-top: 17px;
        padding-bottom: 17px;
    }

    /* 긴 본문 */
    .gf-world-copy {
        line-height: 1.72;
    }

    .gf-world-copy p {
        margin-bottom: 18px;
    }

    /* ABILITY 규칙 블록 */
    .gf-world-rules {
        row-gap: 0;
    }

    .gf-world-rules > * {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    /* 카드 공통 — 과압축하지 않음 */
    .gf-world-card {
        padding-top: 22px;
        padding-bottom: 24px;
    }

    /* LOCATIONS */
    .gf-place {
        padding-top: 21px;
        padding-bottom: 22px;
    }

    .gf-place > div {
        row-gap: 9px;
    }

    /* 긴 키워드 줄 */
    .gf-place [class*="meta"],
    .gf-place [class*="tags"] {
        font-size: 0.86em;
        line-height: 1.65;
    }
}

/* ==========================================================
   WORLD · MOBILE FINAL DENSITY TUNE · 20260908
   ========================================================== */

@media (max-width: 560px) {

    /* TOP INDEX */
    .gf-world-index a {
        min-height: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }


    /* ABILITY · 01~04 */
    .gf-world-rules > * {
        padding-top: 15px;
        padding-bottom: 15px;
    }


    /* FACTIONS */
    .gf-world-card {
        padding: 18px 18px 20px;
    }

    .gf-world-card-type {
        margin-top: 16px;
    }

    .gf-world-card h3 {
        margin-top: 8px;
    }

    .gf-world-card-ko {
        padding-bottom: 12px;
    }


    /* LOCATIONS */
    .gf-place {
        padding-top: 18px;
        padding-bottom: 19px;
        gap: 7px;
    }

    .gf-place h3 {
        margin-top: 7px;
    }

    .gf-place-desc {
        margin-top: 9px;
    }

    .gf-place > div {
        row-gap: 8px;
    }


    /* WORLD LOGIC */
    .gf-world-principles article {
        padding: 15px 18px 17px;
    }

    .gf-world-principles article strong {
        margin-top: 12px;
    }
}

/* END · WORLD MOBILE FINAL DENSITY TUNE · 20260908 */

/* ==========================================================
   WORLD · MOBILE DENSITY TUNE · 20260908
   세로 밀도만 압축 / typography & width 유지
   ========================================================== */

@media (max-width: 860px) {

    /* 00 · GUIDE INDEX */
    .gf-world-index a {
        min-height: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }


    /* 02 · ABILITY */
    .gf-world-rules {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .gf-world-rules > article,
    .gf-world-rules > div,
    .gf-world-rules > li {
        padding-top: 14px;
        padding-bottom: 14px;
    }


    /* 04 · FACTIONS */
    .gf-world-card {
        padding-top: 24px;
        padding-bottom: 24px;
    }


    /* 05 · LOCATIONS */
    .gf-place {
        padding-top: 22px;
        padding-bottom: 22px;
    }


    /* 06 · WORLD LOGIC */
    .gf-world-final {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .gf-world-final > article,
    .gf-world-final > div,
    .gf-world-final > li {
        padding-top: 18px;
        padding-bottom: 18px;
    }


    /* 섹션 사이 리듬만 아주 소폭 압축 */
    .gf-world-section {
        margin-top: clamp(46px, 7vw, 64px);
    }
}

/* END · WORLD MOBILE DENSITY TUNE */