@charset "UTF-8";

/* ==========================================================
   GREYFALL · RULES
   운영 규정 — 명료함과 경고 위계가 최우선
   ========================================================== */


/* ----------------------------------------------------------
   01 · IDENTITY PANELS (제출 가능 / 불가)
   ---------------------------------------------------------- */

.gf-id-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;

    margin-top: clamp(23.8px, 2.8vw, 35px);

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

.gf-rule-panel {
    min-width: 0;
    padding: 26px 24px 30px;

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

.gf-rule-panel-label {
    font-family: var(--gf-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;

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

.gf-rule-panel h3 {
    margin-top: 12px;
    padding-bottom: 18px;

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

    font-size: clamp(1.02rem, 2vw, 1.24rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;

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

.gf-rule-panel ul {
    margin-top: 18px;

    display: grid;
    gap: 11px;
}

.gf-rule-panel li {
    position: relative;

    padding-left: 20px;

    font-size: 0.87rem;
    line-height: 1.75;

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

.gf-rule-panel li::before {
    content: "";

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

    width: 8px;
    height: 1px;

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

/* 두 번째 패널 = 금지 · 붉은 계열 위계 */
.gf-rule-panel:last-child {
    background:
        linear-gradient(
            160deg,
            rgba(158, 51, 44, 0.055),
            transparent 58%
        ),
        var(--gf-surface);
}

.gf-rule-panel:last-child .gf-rule-panel-label {
    color: var(--gf-red-bright);
}

.gf-rule-panel:last-child li::before {
    background: var(--gf-red);
}


/* ----------------------------------------------------------
   02 · MASK (가려야 하는 항목)
   ---------------------------------------------------------- */

.gf-mask {
    margin-top: clamp(21px, 2.38vw, 30.8px);

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

.gf-mask-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 22px;

    padding: 20px 24px;

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

.gf-mask-head span {
    font-family: var(--gf-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;

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

.gf-mask-head strong {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;

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

.gf-mask-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;

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

.gf-mask-grid span {
    position: relative;

    min-width: 0;
    padding: 18px 16px 18px 32px;

    background: var(--gf-bg);

    font-size: 0.8rem;
    line-height: 1.5;

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

/* 마스킹 표시 — 붉은 사선 마커 */
.gf-mask-grid span::before {
    content: "";

    position: absolute;
    left: 16px;
    top: 50%;

    width: 9px;
    height: 9px;

    margin-top: -4px;

    background:
        linear-gradient(
            45deg,
            transparent 42%,
            var(--gf-red) 42% 58%,
            transparent 58%
        ),
        linear-gradient(
            -45deg,
            transparent 42%,
            var(--gf-red) 42% 58%,
            transparent 58%
        );
}

.gf-mask-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 20px;

    padding: 20px 24px;

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

.gf-mask-note span {
    font-family: var(--gf-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    line-height: 2.4;

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

.gf-mask-note p {
    min-width: 0;

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

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

.gf-mask-note strong {
    color: var(--gf-text-strong);
}


/* ----------------------------------------------------------
   03 · EXTERNAL / SECURITY LIST
   ---------------------------------------------------------- */

.gf-external-list {
    position: relative;

    margin-top: clamp(21px, 2.38vw, 30.8px);
    padding-top: 20px;

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

/* 섹션 시작 red tick — 사이트 전역 언어 */
.gf-external-list::before {
    content: "";

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

    width: 34px;
    height: 1px;

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

/* 라벨은 좌측 컬럼이 아니라 그리드 위 eyebrow 로 —
   PC 에서 폭을 온전히 쓰기 위해 */
.gf-external-list > span {
    display: block;
    margin-bottom: 15px;

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

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

/* 짧은 항목 7개 → 4열 기록 그리드 (02 마스킹 섹션과 같은 언어) */
.gf-external-list > div {
    display: grid;

    /* 셀은 2칸씩 차지 → 실질 4열.
       8칸으로 쪼개 두면 반 칸 오프셋이 가능해
       마지막 줄을 정확히 가운데로 모을 수 있다. */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;

    counter-reset: gf-ext;

    background: transparent;
}

.gf-external-list > div p {
    counter-increment: gf-ext;

    grid-column: span 2;

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

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

    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 16px 18px;

    background-color: rgba(9, 10, 13, 0.9);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.022),
            transparent 46%
        );

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

    color: var(--gf-text);

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

.gf-external-list > div p::before {
    content: counter(gf-ext, decimal-leading-zero);

    position: static;
    flex: 0 0 auto;

    font-family: var(--gf-mono);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.055em;

    color: rgba(190, 67, 58, 0.82);
}

/* 둘째 줄(05·06·07)을 가운데로 모은다 — 양 끝에 반 칸씩 남는다 */
.gf-external-list > div p:nth-child(5) {
    grid-column: 2 / span 2;
}

.gf-external-list > div p:hover {
    background-color: rgba(16, 19, 24, 0.94);
    color: var(--gf-text-strong);
}


/* ----------------------------------------------------------
   04 · CHARACTER SPLIT + RULE LIST
   ---------------------------------------------------------- */

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

    align-items: start;
}

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

.gf-rule-list article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0 16px;

    padding: 19px 0;

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

.gf-rule-list article span {
    font-family: var(--gf-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1.95;

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

.gf-rule-list article strong {
    min-width: 0;

    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: -0.008em;

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


/* ----------------------------------------------------------
   05 · CONSENT
   ---------------------------------------------------------- */

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

    margin-top: clamp(21px, 2.38vw, 30.8px);

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

.gf-consent-grid article {
    min-width: 0;
    padding: 22px 22px 26px;

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

.gf-consent-grid article span {
    display: block;

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

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

.gf-consent-grid article strong {
    display: block;
    margin-top: 18px;

    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: -0.01em;

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


/* ----------------------------------------------------------
   06 · ENFORCEMENT (제재)
   ---------------------------------------------------------- */

.gf-enforcement {
    counter-reset: gf-enf;

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

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

    padding: 20px 0;

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

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

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

.gf-enforcement article strong {
    min-width: 0;
    max-width: 68ch;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.82;
    letter-spacing: -0.01em;

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


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

@media (max-width: 980px) {

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

    .gf-mask-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 860px) {

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

    .gf-rule-panel {
        padding: 22px 18px 26px;
    }

    .gf-mask-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gf-mask-head,
    .gf-mask-note {
        padding: 18px;
    }

    .gf-mask-note {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .gf-mask-note span {
        line-height: 1.6;
    }

    .gf-external-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .gf-external-list > span {
        line-height: 1.6;
    }

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

    .gf-consent-grid article {
        padding: 20px 18px 24px;
    }

    .gf-enforcement article {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;

        padding: 18px 0 22px;
    }

    .gf-enforcement article span {
        line-height: 1.4;
    }
}


@media (max-width: 480px) {

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


/* ==========================================================
   RULES · CONSOLIDATED SURFACE  (single source of truth)
   ----------------------------------------------------------
   이전 99 / 100 두 블록이 같은 셀렉터를 최대 4회 재정의하며
   서로 덮어쓰고 있었다. 하나로 통합했다.

   원칙
   - 배경 질감은 유지, 읽어야 하는 항목에만 어두운 표면
   - hover 가 표면을 투명하게 되돌리지 않는다
   - 각진 구조 · red 는 마커/라벨 수준으로만
   ========================================================== */


/* ----------------------------------------------------------
   A · 신분증 패널
   ---------------------------------------------------------- */

.gf-rule-panel {
    background-color: rgba(10, 11, 14, 0.92);

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

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

/* 금지 패널 — 붉은 기운은 상단에만 얕게 */
.gf-rule-panel:last-child {
    background-color: rgba(10, 11, 14, 0.92);

    background-image:
        linear-gradient(
            168deg,
            rgba(158, 51, 44, 0.075),
            transparent 52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            transparent 44%
        );
}

/* 허용 = 얇은 대시 / 금지 = 또렷한 사각 마커
   (1px 대시는 서브픽셀에서 항목마다 굵기가 달라 보였다) */
.gf-rule-panel li::before {
    top: 0.66em;
    width: 9px;
    height: 2px;

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

.gf-rule-panel:last-child li::before {
    left: 1px;
    width: 6px;
    height: 6px;

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

.gf-rule-panel li {
    color: var(--gf-text);
}


/* ----------------------------------------------------------
   B · 마스킹 그리드
   ---------------------------------------------------------- */

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

.gf-mask-head,
.gf-mask-note {
    background-color: rgba(13, 15, 19, 0.92);
}

.gf-mask-grid span {
    background-color: rgba(9, 10, 13, 0.9);

    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            transparent 46%
        );

    color: var(--gf-text);

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

.gf-mask-grid span:hover {
    background-color: rgba(16, 19, 24, 0.94);
    color: var(--gf-text-strong);
}

.gf-mask-note p {
    color: var(--gf-text);
}


/* ----------------------------------------------------------
   C · 규칙 목록 · 제재 (행 단위 기록 surface)
   ---------------------------------------------------------- */

.gf-rule-list,
.gf-enforcement {
    display: grid;
    gap: 1px;

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

.gf-rule-list article,
.gf-enforcement article {
    padding: 19px 18px;
    border-bottom: 0;

    background-color: rgba(10, 11, 14, 0.86);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            transparent 48%
        );

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

.gf-enforcement article {
    padding: 20px 18px;
}

.gf-rule-list article:hover,
.gf-enforcement article:hover {
    background-color: rgba(16, 19, 24, 0.93);
}

.gf-rule-list article strong,
.gf-enforcement article strong {
    color: var(--gf-text);
}


/* ----------------------------------------------------------
   D · 합의 그리드
   ---------------------------------------------------------- */

.gf-consent-grid article {
    background-color: rgba(10, 11, 14, 0.9);

    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.022),
            transparent 46%
        );

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

    transition: background-color 260ms ease;
}

.gf-consent-grid article:hover {
    background-color: rgba(16, 19, 24, 0.94);
}

.gf-consent-grid article strong {
    color: var(--gf-text);
}


/* ----------------------------------------------------------
   E · RESPONSIVE (통합 블록 전용)
   ---------------------------------------------------------- */

/* 03 · 외부 공유 그리드 — 열 수에 맞춰 마지막 칸 span 조정 */
/* 3열 (6칸 기준) — 7 = 3 + 3 + 가운데 1 */
@media (max-width: 1180px) {

    .gf-external-list > div {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .gf-external-list > div p:nth-child(5) {
        grid-column: span 2;
    }

    .gf-external-list > div p:last-child {
        grid-column: 3 / span 2;
    }
}

/* 2열 (4칸 기준) — 7 = 2 + 2 + 2 + 가운데 1 */
@media (max-width: 860px) {

    .gf-external-list > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gf-external-list > div p:nth-child(5) {
        grid-column: span 2;
    }

    .gf-external-list > div p:last-child {
        grid-column: 2 / span 2;
    }

    .gf-external-list > div p {
        min-height: 54px;
        padding: 14px 15px;
    }

    .gf-rule-list article,
    .gf-enforcement article {
        padding-inline: 16px;
    }
}

/* 1열 */
@media (max-width: 480px) {

    .gf-external-list > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gf-external-list > div p:nth-child(5),
    .gf-external-list > div p:last-child {
        grid-column: span 2;
    }
}