/* ============================================================
   디지털 핏 존 — 포털 스킨 (9단계)

   ★ 정체성(기획 초안 사이트 기준):
     다크 네이비 바탕 + 네온 시안·마젠타 그라데이션, 큰 라운드 카드,
     필(pill) 칩, 밝고 캐주얼한 아케이드 톤.

   ★ 다크 고정이다 — 라이트 모드 없음(브랜드 결정).
   ★ 본문 대비는 WCAG AA 이상을 지킨다. 토큰 값은 테스트가 검사한다
     (BrandContrastTests) — 여기 색을 바꾸면 그 테스트와 함께 바꿀 것.
   ★ 외부 자원 없음(폰트·아이콘 전부 시스템/인라인) — 기관 방화벽·오프라인.
   ============================================================ */

:root {
    /* 이 네 값이 브랜드다. 대비 테스트가 이 이름을 읽는다. */
    --dfz-bg: #0B1020;          /* 바탕: 다크 네이비 */
    --dfz-surface: #141B33;     /* 카드 표면 */
    --dfz-text: #E4EAF5;        /* 본문 */
    --dfz-muted: #9AA7C0;       /* 보조 글 */

    --dfz-cyan: #22D3EE;
    --dfz-magenta: #E879F9;
    --dfz-purple: #818CF8;
    --dfz-line: #232D4D;

    --dfz-grad: linear-gradient(90deg, var(--dfz-cyan), var(--dfz-purple), var(--dfz-magenta));
    --dfz-grad-cta: linear-gradient(90deg, #22D3EE, #38BDF8);
    --dfz-radius: 20px;
}

* { box-sizing: border-box; }

body {
    font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
    margin: 0;
    color: var(--dfz-text);
    background:
        radial-gradient(60rem 30rem at 80% -10%, rgba(129, 140, 248, .18), transparent 60%),
        radial-gradient(50rem 26rem at 10% 0%, rgba(34, 211, 238, .14), transparent 55%),
        var(--dfz-bg);
    min-height: 100vh;
}

/* ------------------------------------------------------------ 머리 */

header {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    align-items: center;
    padding: .8rem 1.4rem;
    border-bottom: 1px solid var(--dfz-line);
    background: rgba(11, 16, 32, .85);
    position: sticky;
    top: 0;
    backdrop-filter: blur(8px);
    z-index: 10;
}

header a {
    color: var(--dfz-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    padding: .35rem .2rem;
}

header a:hover { color: var(--dfz-cyan); }

/* 첫 링크 = 로고 자리 */
header a.brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.25rem;
    font-weight: 800;
    margin-right: .6rem;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--dfz-grad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

header .nav-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--dfz-muted);
    font-size: .9rem;
}

header form { margin: 0; }

/* ------------------------------------------------------------ 본문 틀 */

main { max-width: 72rem; margin: 2rem auto; padding: 0 1.4rem 4rem; }

h1 { font-size: 1.8rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .8rem; }

a { color: var(--dfz-cyan); }

/* ------------------------------------------------------------ 히어로 (홈) */

.hero { text-align: center; padding: 3.5rem 0 2rem; }

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.25;
    background: var(--dfz-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 1rem;
}

.hero p { color: var(--dfz-muted); font-size: 1.1rem; max-width: 42rem; margin: 0 auto; }

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    margin: 2.4rem 0 1rem;
}

.hero-stats .stat b {
    display: block;
    font-size: 2.4rem;
    color: var(--dfz-cyan);
    font-weight: 800;
}

.hero-stats .stat span { color: var(--dfz-muted); font-size: .95rem; }

/* ------------------------------------------------------------ 칩(필터) */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .6rem 0;
}

.chip-row .chip-label { color: var(--dfz-muted); font-size: .9rem; margin-right: .2rem; }

.chip {
    display: inline-block;
    padding: .42rem 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--dfz-line);
    background: var(--dfz-surface);
    color: var(--dfz-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

/* 누를 수 있는 칩만 반응한다. 설명용 칩(<span>)이 손가락을 따라 밝아지면
   눌러도 아무 일이 없는 것을 눌러 보게 된다. */
a.chip:hover { border-color: var(--dfz-cyan); color: var(--dfz-cyan); }

.chip.on {
    background: var(--dfz-cyan);
    border-color: var(--dfz-cyan);
    color: #06222B;   /* 시안 위 진한 글자 — 대비 테스트 대상 */
}

/* 작은 태그(카드 안) */
.tag {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, .12);
    color: var(--dfz-cyan);
    font-size: .78rem;
    font-weight: 600;
}

.tag.alt { background: rgba(232, 121, 249, .12); color: var(--dfz-magenta); }

/* ------------------------------------------------------------ 카드 */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.game-card {
    background: var(--dfz-surface);
    border: 1px solid var(--dfz-line);
    border-radius: var(--dfz-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .12s ease, border-color .12s ease;
}

.game-card:hover { transform: translateY(-3px); border-color: var(--dfz-cyan); }

.game-thumb {
    height: 8.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
}

/* 카테고리별 네온 그라데이션 썸네일 — 이미지 파일 없이 정체성을 낸다 */
.cat-Reaction    { background: linear-gradient(135deg, #0E7490, #2563EB); }
.cat-Relay       { background: linear-gradient(135deg, #A21CAF, #6D28D9); }
.cat-Memory      { background: linear-gradient(135deg, #6D28D9, #3730A3); }
.cat-Endurance   { background: linear-gradient(135deg, #BE185D, #C2410C); }
.cat-Cooperation { background: linear-gradient(135deg, #047857, #0E7490); }
.cat-Accuracy    { background: linear-gradient(135deg, #B45309, #A21CAF); }
.cat-Balance     { background: linear-gradient(135deg, #0E7490, #047857); }
.cat-Any         { background: linear-gradient(135deg, #334155, #6D28D9); }

.game-thumb .badge {
    position: absolute;
    top: .7rem;
    left: .7rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: rgba(11, 16, 32, .72);
    color: var(--dfz-cyan);
    border: 1px solid rgba(34, 211, 238, .5);
}

.game-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.game-body h3 { margin: 0; font-size: 1.08rem; }
.game-body h3 a { color: var(--dfz-text); text-decoration: none; }
.game-body h3 a:hover { color: var(--dfz-cyan); }

.game-meta { color: var(--dfz-muted); font-size: .85rem; display: flex; gap: .9rem; }

.game-desc {
    color: var(--dfz-muted);
    font-size: .88rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.game-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ------------------------------------------------------------ 버튼·폼 */

button, .btn {
    padding: .55rem 1.3rem;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    background: var(--dfz-grad-cta);
    color: #06222B;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover { filter: brightness(1.1); }

button.quiet, .btn.quiet {
    background: var(--dfz-surface);
    color: var(--dfz-text);
    border: 1px solid var(--dfz-line);
}

label { display: block; margin: .85rem 0 .3rem; font-weight: 600; }

input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
    width: 100%;
    padding: .6rem .8rem;
    background: var(--dfz-surface);
    color: var(--dfz-text);
    border: 1px solid var(--dfz-line);
    border-radius: 12px;
    font: inherit;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--dfz-cyan);
    outline-offset: 1px;
    border-color: transparent;
}

input::placeholder, textarea::placeholder { color: var(--dfz-muted); }

/* 폼만 있는 화면(가입·로그인 등)을 카드처럼 좁게 */
main > form:only-of-type, form.panel {
    max-width: 30rem;
    background: var(--dfz-surface);
    border: 1px solid var(--dfz-line);
    border-radius: var(--dfz-radius);
    padding: 1.5rem 1.6rem 1.7rem;
    margin-top: 1rem;
}

/* ------------------------------------------------------------ 알림·표 */

.error {
    color: #FCA5A5;
    background: rgba(252, 165, 165, .08);
    border-left: 3px solid #F87171;
    padding: .7rem 1rem;
    border-radius: 0 10px 10px 0;
}

.notice {
    background: rgba(34, 211, 238, .08);
    border-left: 3px solid var(--dfz-cyan);
    padding: .75rem 1rem;
    border-radius: 0 10px 10px 0;
    color: var(--dfz-text);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--dfz-surface);
    border: 1px solid var(--dfz-line);
    border-radius: 14px;
    overflow: hidden;
}

th { color: var(--dfz-muted); font-size: .85rem; font-weight: 600; }

th, td { border-bottom: 1px solid var(--dfz-line); padding: .65rem .9rem; text-align: left; }

tr:last-child td { border-bottom: 0; }

/* 전국 기관 순위에서 우리 기관 줄. 표가 길어도 눈이 바로 찾는다. */
tr.mine td { background: rgba(34, 211, 238, .10); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--dfz-cyan); }

details { margin: .6rem 0; }
summary { cursor: pointer; color: var(--dfz-cyan); font-weight: 600; }

pre {
    background: #0A0E1C;
    border: 1px solid var(--dfz-line);
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
    font-size: .82rem;
    color: #B7C3DC;
}

/* ------------------------------------------------------------ 작은 화면 */

@media (max-width: 640px) {
    .hero-stats { gap: 1.6rem; }
    header { gap: .3rem .8rem; }
    main { margin-top: 1.2rem; }
}