@charset "utf-8";
/* ════════════════════════════════════════════════════════
   Infostep.kr — AI Dark Theme  |  layout.css
   ─────────────────────────────────────────────────────
   역할  : 전역 레이아웃 스타일 (PC 기준, 반응형 제외)
   로드  : layout.css → respond.css → proto.css
   기준  : 최대 콘텐츠 너비 1300px
   폰트  : Google Fonts — Syne / IBM Plex Mono / Noto Sans KR
   ─────────────────────────────────────────────────────
   섹션 목록:
     [1]  CSS 변수 — 전역 디자인 토큰
     [2]  리셋 — 브라우저 기본값 초기화
     [3]  Zig Alert — 다크 테마 알림창
     [4]  Zig Confirm — 다크 테마 확인창
     [5]  배경 효과 — 그리드 + 글로우 오브
     [6]  공통 너비 컨테이너
     [7]  키프레임 애니메이션
     [8]  헤더 — .main-header
     [9]  GNB — 3단 드롭다운 메뉴
     [10] 유저 컨트롤 — #tnb2 / #tnb
     [11] 모바일 햄버거 버튼 — #slide-btn
     [12] 모바일 슬라이드 메뉴 — #slide-menu
     [13] 히어로 배너 — .hero-banner
     [14] 메인 콘텐츠 그리드 — .content-wrapper
     [15] 중간 파트너 배너 — #mid-bn
     [16] 푸터 — .main-footer / #fnb
     [17] 서브 페이지 공통 — #sub
     [18] 유틸리티 클래스
     [19] 스크롤바 커스텀
     [20] 가이드 콘텐츠 — #gui-content
     [21] 약관/정책 — #policy-agree-box
     [22] 흰 배경 강제 제거 (외부 CSS 충돌 차단)
     [23] 알림·메시지함 — 공통 레이아웃
     [24] 로그인 페이지 — #signin
     [25] 마이페이지 — ul.mypagebox / .tblform
   ─────────────────────────────────────────────────────
   수정 이력:
     · 2026-03  심볼 아이콘 Cyber Grid 스타일로 교체
                  기존: linear-gradient(cyan→blue) 밝은 배경
                  변경: 다크 bg-card + 격자 패턴 + cyan 글로우 링
     · 2026-03  .empty-msg / td[colspan] / #board-nodata
                  '// ' 텍스트 기호 → 📭 이모지 아이콘으로 교체
                  FA 폰트 의존 완전 제거
     · 2026-03  #message-send input/textarea 가시성 개선
                  기본 텍스트 색상 → --text-primary
                  hover / focus 상태 추가
     · 2026-03  #message-send .btn 발송버튼 오른쪽 정렬
                  선택자 .btn-area → .btn 으로 교정
     · GNB 2차 드롭다운 top: calc(var(--header-h) - 5px) 유지
                  헤더 하단 테두리 1px 겹침 방지 목적으로 -5px 사용 중
     · [22] color:inherit !important
                  → .txt-red 등 색상 유틸 클래스 무력화 주의
                  → proto.css에서 더 구체적인 선택자로 개별 복원
     · [22] font-family:inherit !important
                  → FA 아이콘 폰트 무력화 주의
                  → [1] FA7 하위호환 규칙이 있으나 [22]에 덮임
                  → 아이콘 요소는 #sub 밖에 배치하거나 proto.css에서 복원
════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   Google Fonts 임포트
   Syne        : 제목/강조용 디스플레이 폰트 (wght 400~800)
   IBM Plex Mono: 코드/숫자/모노스페이스 (wght 300~500)
   Noto Sans KR : 한글 본문 폰트 (wght 300~700)
   display=swap : FOUT 방지 — 폰트 로드 전 fallback 폰트 표시
──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');


/* ════════════════════════════════════
   [1] CSS 변수 — 전역 디자인 토큰
   ─────────────────────────────────
   배경색 계열   : --bg-base / --bg-card / --bg-card-hover
   테두리 계열   : --border / --border-bright
   강조색 계열   : --accent-cyan / --accent-orange / --accent-green / --accent-blue
   텍스트 계열   : --text-primary / --text-secondary / --text-dim
   발광 계열     : --glow-cyan / --glow-orange / --glow-green
   레이아웃      : --header-h / --site-w
   폰트          : --font-display / --font-mono / --font-body
   애니메이션    : --ease
   ─────────────────────────────────
   ★ 의존 순서: layout.css → respond.css → proto.css
     하위 파일에서 이 변수를 오버라이드하면 전역에 영향
════════════════════════════════════ */
:root {
  /* ── 배경색 ── */
  --bg-base:        #050810;                          /* 최하단 페이지 배경 */
  --bg-card:        #0c1124;                          /* 카드/패널 배경 */
  --bg-card-hover:  #101828;                          /* 카드 hover 배경 */

  /* ── 테두리 ── */
  --border:         rgba(0,200,255,0.11);             /* 기본 테두리 (약한 cyan) */
  --border-bright:  rgba(0,200,255,0.36);             /* 강조 테두리 (hover/active) */

  /* ── 강조색 ── */
  --accent-cyan:    #00c8ff;                          /* 주 강조색 — 헤더/링크/포커스 */
  --accent-orange:  #ff6b2b;                          /* 보조 강조색 — 경고/CTA 버튼 */
  --accent-green:   #00ff9d;                          /* 활성/라이브 색 — 상태 표시 */
  --accent-blue:    #6a8aff;                          /* 링크/버튼 색 — 폴더/파일 아이콘 */

  /* ── 텍스트 ── */
  --text-primary:   #e8f0ff;                          /* 기본 텍스트 — 제목/강조 */
  --text-secondary: #7a8aaa;                          /* 보조 텍스트 — 본문/설명 */
  --text-dim:       #3a4660;                          /* 흐린 텍스트 — 날짜/메타 */

  /* ── 발광 그림자 (box-shadow용) ── */
  --glow-cyan:      0 0 22px rgba(0,200,255,0.28);    /* cyan 발광 — 포커스/hover */
  --glow-orange:    0 0 22px rgba(255,107,43,0.38);   /* orange 발광 — CTA 버튼 */
  --glow-green:     0 0 12px rgba(0,255,157,0.35);    /* green 발광 — 라이브/활성 */

  /* ── 레이아웃 ── */
  --header-h:       62px;                             /* 헤더 높이 — JS에서도 참조 */
  --site-w:         1300px;                           /* 최대 콘텐츠 너비 */

  /* ── 폰트 ── */
  --font-display:   'Syne', sans-serif;               /* 제목/강조 — 영문 디스플레이 */
  --font-mono:      'IBM Plex Mono', monospace;       /* 코드/숫자/날짜 */
  --font-body:      'Noto Sans KR', sans-serif;       /* 본문 — 한글 지원 */

  /* ── 애니메이션 ── */
  --ease:           cubic-bezier(0.4,0,0.2,1);        /* Material Design 표준 easing */
}

/* ── 스크린리더 전용 숨김 클래스 ──
   시각적으로 완전히 숨기되 스크린리더는 읽을 수 있게 유지
   (display:none / visibility:hidden 은 스크린리더도 무시하므로 사용 금지) */
.sound_only_ele {
  background: none !important; border: none !important; height: 0 !important; left: 0 !important;
  overflow: hidden !important; position: absolute !important; text-indent: -999em !important;
  top: 0 !important; width: 0 !important;
}

/* ════════════════════════════════════
   [2] 리셋 — 브라우저 기본값 초기화
   ─────────────────────────────────
   크로스브라우저 일관성 확보
   box-sizing: border-box — padding/border가 width에 포함되게
════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
ul, ol    { list-style: none; }                     /* 기본 불릿/숫자 제거 */
a         { text-decoration: none; color: inherit; } /* 링크 밑줄/색상 초기화 */
button    { cursor: pointer; background: none; border: none; font-family: inherit; }
img       { display: block; max-width: 100%; }      /* 이미지 인라인 여백 제거 + 반응형 */
address   { font-style: normal; }                   /* 주소 이탤릭 제거 */
html      { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* 부드러운 스크롤 + iOS 폰트 크기 고정 */

/* ── body 기본 스타일 ── */
body {
  background:   var(--bg-base);                     /* 최하단 다크 배경 */
  color:        var(--text-primary);                /* 기본 텍스트 밝은 색 */
  font-family:  var(--font-body);                   /* Noto Sans KR */
  font-size:    14px;
  line-height:  1.6;
  min-height:   100vh;
  overflow-x:   hidden;                             /* 가로 스크롤 방지 */
  padding-top:  var(--header-h);                    /* fixed 헤더 높이만큼 콘텐츠 시작점 확보 */
}


/* ════════════════════════════════════
   [3] Zig Alert — 다크 테마 알림창
   ─────────────────────────────────
   구조: #zig-alert-wrap (딤 레이어)
           └── #zig-alert (알림창 본체)
                 ├── .content (메시지 영역)
                 └── .button (확인 버튼)
   ─────────────────────────────────
   표시/숨김:
     기본: opacity:0 / top:calc(50% - 5px) (살짝 위)
     .show 추가 시: opacity:1 / top:50% (슬라이드 인)
   ─────────────────────────────────
   z-index 계층:
     딤 레이어 #zig-alert-wrap : 900
     알림창 본체 #zig-alert     : 901 (딤 위에 표시)
════════════════════════════════════ */

/* 딤(어둠) 레이어 — 배경 전체를 반투명으로 덮음 */
#zig-alert-wrap {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* 배경 블러 */
  height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 900;
}

/* 알림창 본체 */
#zig-alert {
  background:    var(--bg-card, #12161f);           /* 다크 카드 배경 (변수 없을 때 폴백) */
  border:        1px solid rgba(0,200,255,0.25);    /* 연한 cyan 테두리 */
  border-top:    3px solid var(--accent-cyan, #00c8ff); /* 상단 포인트 라인 */
  border-radius: 10px;
  box-shadow:    0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(0,200,255,0.06); /* 외부 글로우 */
  box-sizing:    border-box;
  left: 50%; opacity: 0;                            /* 초기: 투명 */
  position: fixed;
  top: calc(50% - 5px);                             /* .show 전 살짝 위 — 슬라이드 인 효과 */
  transform: translate(-50%, -50%);                 /* 정확한 수평/수직 중앙 */
  transition: all 0.3s;
  width: min(450px, calc(100vw - 10px));            /* 모바일 좌우 여백 최소 5px */
  z-index: 901;
}
/* 활성 상태 — JS에서 .show 클래스 추가 */
#zig-alert.show { opacity: 1; top: 50%; }

/* 메시지 내용 영역 */
#zig-alert .content {
  border-bottom: 1px solid rgba(255,255,255,0.08);  /* 버튼 영역과 구분선 */
  max-height: calc(100vh - 160px);                  /* 화면 넘침 방지 */
  overflow-y: auto;
  padding: 30px 24px;
}
#zig-alert .content p {
  color: #d0dff0;
  font-size: 15px; line-height: 1.7; letter-spacing: -0.5px;
  text-align: center; word-break: break-all;        /* 긴 URL 등 줄바꿈 */
}

/* 버튼 영역 */
#zig-alert .button { padding: 12px 16px; text-align: center; }
#zig-alert .button button {
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.3); border-radius: 6px;
  color: #00c8ff; font-size: 15px; font-weight: 700;
  letter-spacing: -0.5px; line-height: 38px; padding: 0 28px;
  cursor: pointer; transition: all 0.2s;
}
#zig-alert .button button:hover {
  background: rgba(0,200,255,0.18);
  border-color: rgba(0,200,255,0.6);
}

/* 베팅게시판 전체 컨테이너 */
.info-card.fade-in {
    background-color: #0d1424; /* 깊은 네이비 톤 배경 */
    border-radius: 15px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 상단 타이틀 영역 */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 10px;
}

.card-top h3 {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-top .more {
    color: #64748b;
    transition: color 0.3s;
}

.card-top .more:hover {
    color: #38bdf8; /* 호버 시 포인트 컬러 */
}

/* 리스트 스타일 초기화 */
.list-item {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 개별 게시물 카드 (dl 태그) */
.list-item dl {
    display: flex;
    gap: 15px;
    background: #161e2e;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    align-items: center;
}

.list-item dl:hover {
    border-color: #38bdf8;
    background: #1c263b;
    transform: translateX(5px); /* 오른쪽으로 살짝 이동하는 애니메이션 */
}

/* 이미지 영역 (dt 태그) */
.list-item dt {
    flex-shrink: 0; /* 이미지 크기 고정 */
}

.list-item dt .tmb {
    display: block;
    width: 80px;  /* 이미지 크기 최적화 */
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #334155;
}

.list-item dt .tmb img {
    width: 100% !important;  /* HTML의 width 무시 */
    height: 100% !important; /* HTML의 height 무시 */
    object-fit: cover;       /* 이미지 비율 유지하며 채우기 */
}

/* 텍스트 정보 영역 (dd 태그) */
.list-item dd {
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 제목 스타일 */
.list-item dd .sbj {
    font-size: 1.05rem;
    font-weight: 600;
    color: #f1f5f9;
    text-decoration: none;
    display: block;
}

/* 댓글 수 (em 태그) */
.list-item dd .sbj em {
    font-style: normal;
    font-size: 0.85rem;
    color: #38bdf8;
    margin-left: 5px;
}

/* 작성자 및 날짜 영역 */
.list-item dd .writer, 
.list-item dd .date {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-right: 10px;
}

.list-item dd .writer {
    color: #cbd5e1; /* 작성자 강조 */
}

/* "배팅이력" 소제목 숨기기 또는 정렬 (선택사항) */
.list-item h4 {
    display: none; /* 디자인상 깔끔함을 위해 숨기거나, 필요시 커스텀 */
}
/* 정리자료 섹션 컨테이너 */
.info-card[aria-label="정리자료"] {
    background-color: #0d1424;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* 상단 타이틀 영역 (베팅게시판과 통일성 유지) */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e293b;
}

.card-top h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
}

/* 리스트 스타일 초기화 */
.list-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 개별 리스트 항목 (li) */
.list-item ul li {
    position: relative;
    padding: 12px 15px;
    margin-bottom: 8px;
    background: #161e2e;
    border-radius: 10px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

/* 호버 시 효과 */
.list-item ul li:hover {
    background: #1e293b;
    border-color: #38bdf8;
    transform: translateY(-2px);
}

/* 제목 스타일 (sbj) */
.list-item ul li .sbj {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #e2e8f0;
    text-decoration: none;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 긴 제목은 말줄임표 처리 */
}

/* 제목 앞의 가상 불렛 포인트 */
.list-item ul li .sbj::before {
    content: '•';
    color: #38bdf8;
    margin-right: 8px;
    font-weight: bold;
}

/* 메타 정보 (날짜, 작성자) 정렬 */
.list-item ul li .date,
.list-item ul li .writer {
    font-size: 0.82rem;
    color: #64748b;
}

.list-item ul li .date {
    margin-right: 12px;
    font-family: 'Consolas', monospace; /* 숫자 가독성 향상 */
}

.list-item ul li .writer {
    color: #94a3b8;
    position: relative;
    padding-left: 12px;
}

/* 작성자 앞에 구분선 추가 */
.list-item ul li .writer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background-color: #334155;
}

/* 불필요한 h4 제목 숨기기 */
.list-item > h4 {
    display: none;
}
/* ════════════════════════════════════
   [4] Zig Confirm — 다크 테마 확인창
   ─────────────────────────────────
   구조: #zig-confirm-wrap (딤 레이어)
           └── #zig-confirm (확인창 본체)
                 ├── .content (메시지 영역)
                 └── .button (버튼 영역)
   ─────────────────────────────────
   버튼 종류:
     button.no  : 취소 — 어두운 테두리 스타일
     button.yes : 확인 — cyan→blue 그라디언트 강조
   ─────────────────────────────────
   z-index 계층: 딤(900) / 확인창(901) — Alert와 동일
════════════════════════════════════ */

/* 딤 레이어 */
#zig-confirm-wrap {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 900;
}

/* 확인창 본체 — Alert와 동일한 구조 */
#zig-confirm {
  background:    var(--bg-card, #12161f);
  border:        1px solid rgba(0,200,255,0.25);
  border-top:    3px solid var(--accent-cyan, #00c8ff);
  border-radius: 10px;
  box-shadow:    0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(0,200,255,0.06);
  box-sizing:    border-box;
  left: 50%; opacity: 0;
  position: fixed;
  top: calc(50% - 5px);                             /* 슬라이드 인 시작 위치 */
  transform: translate(-50%, -50%);
  transition: all 0.3s;
  width: min(450px, calc(100vw - 10px));
  z-index: 901;
}
#zig-confirm.show { opacity: 1; top: 50%; }

/* 메시지 내용 영역 */
#zig-confirm .content {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  max-height: calc(100vh - 160px);
  overflow-y: auto; padding: 30px 24px;
}
#zig-confirm .content p {
  color: #d0dff0;
  font-size: 15px; line-height: 1.7; letter-spacing: -0.5px;
  text-align: center; word-break: break-all;
}

/* 버튼 영역 — flex로 버튼 나란히 배치 */
#zig-confirm .button {
  padding: 12px 16px; text-align: center;
  display: flex; justify-content: center; gap: 10px;
}
/* 버튼 공통 기본 */
#zig-confirm .button button {
  background: none; border: 1px solid transparent; border-radius: 6px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.5px;
  line-height: 38px; padding: 0 28px; cursor: pointer; transition: all 0.2s;
}
#zig-confirm .button button:hover { background: rgba(255,255,255,0.06); }

/* 취소 버튼 — 어두운 테두리 */
#zig-confirm .button button.no  { color: #7a8aaa; border-color: rgba(255,255,255,0.1); }
#zig-confirm .button button.no:hover { color: #b0b8c8; border-color: rgba(255,255,255,0.2); }

/* 확인 버튼 — cyan→blue 그라디언트 강조 */
#zig-confirm .button button.yes {
  color: #fff; font-weight: 700;
  background: linear-gradient(135deg, #00c8ff, #0055dd);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(0,200,255,0.3);
}
#zig-confirm .button button.yes:hover  { box-shadow: 0 4px 18px rgba(0,200,255,0.5); filter: brightness(1.1); }
#zig-confirm .button button.yes:active { transform: scale(0.97); } /* 클릭 시 살짝 눌리는 효과 */


/* ════════════════════════════════════
   [5] 배경 효과 — 그리드 + 글로우 오브
   ─────────────────────────────────
   body::before : 전체 화면 미세 격자 패턴
                  position:fixed → 스크롤해도 고정
                  z-index:0 → 모든 콘텐츠 아래에 위치
   body::after  : 좌상단 ambient glow 오브
                  radial-gradient 타원형
                  ambientDrift 애니메이션으로 천천히 이동
════════════════════════════════════ */

/* 미세 격자 패턴 — 수평선 + 수직선 2겹 레이어 */
body::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.022) 1px, transparent 1px),   /* 수평선 */
    linear-gradient(90deg, rgba(0,200,255,0.022) 1px, transparent 1px); /* 수직선 */
  background-size: 54px 54px;                       /* 격자 간격 54px */
  pointer-events: none; z-index: 0;
}

/* 좌상단 ambient glow — 은은한 발광 분위기 연출 */
body::after {
  content: ''; position: fixed; top: -25%; left: -8%;
  width: 55%; height: 55%;
  background: radial-gradient(ellipse, rgba(0,200,255,0.055) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: ambientDrift 14s ease-in-out infinite alternate; /* 천천히 유영하는 효과 */
}


/* ════════════════════════════════════
   [6] 공통 너비 컨테이너
   ─────────────────────────────────
   .inner / .container
     최대 너비 1300px, 좌우 패딩 28px, 가로 중앙 정렬
   ★ respond.css에서 모바일 환경 패딩 오버라이드
════════════════════════════════════ */
.inner, .container {
  max-width: var(--site-w);                         /* 최대 1300px */
  margin: 0 auto;                                   /* 가로 중앙 정렬 */
  padding: 0 28px;                                  /* 좌우 여백 28px */
  width: 100%;
}


/* ════════════════════════════════════
   [7] 키프레임 애니메이션
   ─────────────────────────────────
   ambientDrift : body::after 배경 오브 이동
   fadeUp       : 요소 하단→상단 페이드인 (히어로/카드 등장)
   fadeIn       : 단순 투명→불투명 페이드인
   livePulse    : 라이브 점 맥박 효과 (scale + opacity)
   barPulse     : 실시간 바 그래프 맥박 (scaleY + opacity)
   orbA         : 히어로 상단 오브 상하 부유
   orbB         : 보조 오브 상하 부유 (orbA보다 작은 진폭)
   bannerScroll : 파트너 배너 무한 가로 스크롤
   starFloat    : 별 파티클 이동+페이드 (--move-x/y CSS 변수 사용)
════════════════════════════════════ */
@keyframes ambientDrift { from { transform: translate(0,0); }    to { transform: translate(6%,10%); } }
@keyframes fadeUp       { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn       { from { opacity: 0; }  to { opacity: 1; } }
@keyframes livePulse    { 0%,100% { opacity: 1; transform: scale(1); }   50% { opacity: .3; transform: scale(.6); } }
@keyframes barPulse     { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: .4; transform: scaleY(.6); } }
@keyframes orbA         { from { transform: translateX(-50%) translateY(0); }  to { transform: translateX(-50%) translateY(-24px); } }
@keyframes orbB         { from { transform: translateY(0); }  to { transform: translateY(-16px); } }
@keyframes bannerScroll { from { transform: translateX(0); }  to { transform: translateX(-50%); } }
@keyframes starFloat {
  0%   { opacity: 0; transform: translate(0,0) scale(.4); }
  15%  { opacity: 1; }
  85%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--move-x,60px), var(--move-y,-60px)) scale(1); }
}


/* ════════════════════════════════════
   [8] 헤더 — .main-header
   ─────────────────────────────────
   구조: .main-header
           └── .inner
                 ├── .logo-search-group (.logo-container + #sch)
                 ├── nav.nav-bar (#gnb)
                 └── .user-control-group (#tnb2 + #tnb)
   ─────────────────────────────────
   position: fixed — iOS Safari sticky 버그 회피
   height: 62px (--header-h)
   backdrop-filter: blur(24px) — 반투명 글라스 효과
   z-index: 400 — GNB 드롭다운(401)보다 낮게
   ─────────────────────────────────
   심볼 아이콘 (.is-symbol):
     [2026-03 수정] 밝은 그라디언트 → Cyber Grid 스타일
     다크 bg-card + 미세 격자 패턴 + cyan 글로우 링
     body::before 배경 격자와 동일 계열 → 테마 일체감
════════════════════════════════════ */

/* 헤더 본체 */
.main-header {
  position: fixed;                                  /* sticky → fixed: iOS Safari sticky 버그 회피 */
  top: 0; left: 0; right: 0;
  z-index: 400;                                     /* GNB 드롭다운(401)보다 낮게 유지 */
  height: var(--header-h);                          /* 62px */
  background: rgba(5,8,16,0.92);                    /* 반투명 다크 배경 */
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); /* 글라스 효과 */
  border-bottom: 1px solid var(--border);           /* 하단 구분선 */
}
/* 헤더 내부 flex 정렬 */
.main-header .inner { height: 100%; display: flex; align-items: center; }

/* ── 로고 + 검색 그룹 ── */
.logo-search-group { display: flex; align-items: center; gap: 18px; margin-right: 24px; flex-shrink: 0; }
.logo-container    { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* ── 심볼 아이콘 (.is-symbol) ──
   [2026-03 수정] 밝은 그라디언트 → Cyber Grid 스타일
   배경: 다크 --bg-card (#0c1124)
   테두리: cyan 0.45 불투명도로 선명하게
   box-shadow: 글로우 링(3px) + 발광(18px) 2중 레이어
   ::after: 미세 격자 패턴 — body::before 격자와 동일 계열 */
.is-symbol {
  width: 34px; height: 34px;
  background: var(--bg-card);                       /* 다크 카드 배경 (#0c1124) */
  border: 1px solid rgba(0,200,255,0.45);           /* cyan 테두리 */
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(0,200,255,0.08),       /* 외곽 글로우 링 */
              0 0 18px rgba(0,200,255,0.22);         /* 발광 그림자 */
  flex-shrink: 0; position: relative; overflow: hidden;
}
/* 격자 패턴 오버레이 — body::before와 동일 계열, 8px 촘촘 */
.is-symbol::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.12) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
}
/* 심볼 내부 아이콘 (정사각형 테두리) */
.is-inner {
  width: 14px; height: 14px;
  border: 2px solid rgba(0,200,255,0.9);            /* cyan 테두리 — 격자 위에서 선명하게 */
  border-radius: 3px;
  position: relative; z-index: 1;                   /* ::after 격자 위에 표시 */
  box-shadow: 0 0 8px rgba(0,200,255,0.6);          /* 내부 아이콘 발광 */
}
/* 심볼 내부 점 (좌상단 작은 사각형) */
.is-inner::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 4px; height: 4px;
  background: #00c8ff;                              /* cyan 점 */
  border-radius: 1px;
  box-shadow: 0 0 6px #00c8ff;                      /* 점 자체 발광 */
}

/* ── 로고 텍스트 ── */
.logo-wrapper   { display: flex; align-items: center; }
h1.logo-text    { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -.5px; line-height: 1; }
h1.logo-text span { font-size: 11px; color: var(--accent-cyan); font-family: var(--font-mono); font-weight: 400; vertical-align: super; } /* 'KR' 위첨자 */

/* ── 헤더 검색창 #sch ── */
#sch form     { display: flex; }
#sch fieldset { border: none; display: flex; align-items: center; }
#sch legend   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* 접근성: 숨김 */
/* 검색 입력창 */
#sch .inp {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-right: none;  /* 오른쪽 테두리 제거 → 버튼과 합체 */
  border-radius: 8px 0 0 8px;
  padding: 7px 14px; width: 200px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-primary);
  outline: none; transition: all .25s var(--ease);
}
/* 포커스 시 너비 확장 + 글로우 */
#sch .inp:focus {
  width: 240px; border-color: var(--border-bright);
  background: rgba(0,200,255,.05); box-shadow: var(--glow-cyan);
}
#sch .inp::placeholder { color: var(--text-dim); }
/* 검색 버튼 */
#sch .sbm {
  background: rgba(0,200,255,.09);
  border: 1px solid var(--border); border-left: none;   /* 왼쪽 테두리 제거 → 입력창과 합체 */
  border-radius: 0 8px 8px 0;
  padding: 7px 13px; color: var(--accent-cyan); font-size: 12px; transition: all .2s;
}
#sch .sbm:hover { background: rgba(0,200,255,.18); border-color: var(--border-bright); }


/* ════════════════════════════════════
   [9] GNB — 3단 드롭다운 메뉴
   ─────────────────────────────────
   구조: nav.nav-bar
           └── #gnb (ul)
                 └── li > a          ← 1차 메뉴
                       └── ul        ← 2차 드롭다운
                             └── li > a
                                   └── ul  ← 3차 플라이아웃
                                         └── li > a
   ─────────────────────────────────
   2차 드롭다운:
     top: calc(--header-h - 5px)
     ★ -5px: 헤더 하단 1px 테두리 겹침 방지 + 여유 공간
     hover 시 translateY(0)으로 슬라이드다운
   3차 플라이아웃:
     left: calc(100% + 1px) — 2차 메뉴 오른쪽에 표시
     border-left: 2px solid orange — orange 포인트 라인
   ─────────────────────────────────
   z-index 계층:
     헤더(.main-header): 400
     2차 드롭다운      : 401 (헤더 위에 표시)
     3차 플라이아웃    : 402 (2차 위에 표시)
════════════════════════════════════ */

.nav-bar { flex: 1; display: flex; align-items: center; justify-content: flex-end; height: 100%; }
#gnb     { display: flex; align-items: center; height: 100%; }

/* ── 1차 메뉴 아이템 ── */
#gnb > li { position: relative; height: 100%; display: flex; align-items: center; }
#gnb > li > a {
  display: flex; align-items: center;
  height: 100%; padding: 0 15px;
  font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
  white-space: nowrap; letter-spacing: .2px;
  position: relative; transition: color .2s;
}
/* 하단 밑줄 인디케이터 — hover/active 시 scaleX(1)로 펼쳐짐 */
#gnb > li > a::after {
  content: ''; position: absolute; bottom: 0; left: 15px; right: 15px;
  height: 2px; background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s var(--ease);
  border-radius: 2px 2px 0 0;
}
#gnb > li:hover > a,
#gnb > li > a.active             { color: var(--text-primary); }
#gnb > li:hover > a::after,
#gnb > li > a.active::after      { transform: scaleX(1); }

/* ── 2차 드롭다운 ── */
#gnb > li > ul {
  position: absolute;
  top: calc(var(--header-h) - 5px);                /* 헤더 하단 - 5px (겹침 방지) */
  left: 0; min-width: 168px;
  background: rgba(9,13,26,0.98);
  border: 1px solid var(--border); border-top: 2px solid var(--accent-cyan);
  border-radius: 0 0 10px 10px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(8px); /* 초기: 숨김 + 약간 아래 */
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 401;
  overflow: visible;                                /* 3차 메뉴 clip 방지 */
}
#gnb > li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }

/* 2차 li — 3차 메뉴 기준점 */
#gnb > li > ul > li { position: relative; }

/* 2차 메뉴 링크 */
#gnb > li > ul > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  font-size: 13px; color: var(--text-secondary);
  border-bottom: 1px solid rgba(0,200,255,.05);
  white-space: nowrap; transition: color .15s, background .15s, padding .15s;
}
#gnb > li > ul > li:last-child > a { border-bottom: none; }
/* hover 시 왼쪽 › 화살표 장식 */
#gnb > li > ul > li > a::before {
  content: '›'; color: var(--accent-cyan); opacity: 0;
  font-size: 16px; flex-shrink: 0;
  transition: opacity .15s, transform .15s; transform: translateX(-4px);
}
#gnb > li > ul > li > a:hover { color: var(--text-primary); background: rgba(0,200,255,.06); padding-left: 22px; }
#gnb > li > ul > li > a:hover::before { opacity: 1; transform: translateX(0); }

/* ── 3차 플라이아웃 ── */
#gnb > li > ul > li > ul {
  position: absolute;
  top: -2px; left: calc(100% + 1px);               /* 2차 메뉴 오른쪽에 붙임 */
  min-width: 160px;
  background: rgba(9,13,26,0.98);
  border: 1px solid var(--border); border-left: 2px solid var(--accent-orange); /* orange 포인트 */
  border-radius: 0 10px 10px 10px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 8px 8px 32px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 402;
  overflow: hidden;
}
#gnb > li > ul > li:hover > ul { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
/* 3차 메뉴 링크 */
#gnb > li > ul > li > ul > li > a {
  display: block; padding: 9px 16px;
  font-size: 12px; color: var(--text-secondary);
  border-bottom: 1px solid rgba(0,200,255,.05);
  white-space: nowrap; transition: all .15s;
}
#gnb > li > ul > li > ul > li:last-child > a { border-bottom: none; }
#gnb > li > ul > li > ul > li > a:hover { color: var(--text-primary); background: rgba(255,107,43,.06); padding-left: 22px; }


/* ════════════════════════════════════
   [10] 유저 컨트롤 — #tnb2 / #tnb
   ─────────────────────────────────
   구조: .user-control-group
           ├── #tnb2 — 알림/메시지 (뱃지 카운트 포함)
           └── #tnb  — 로그인/가입 버튼
   ─────────────────────────────────
   버튼 종류:
     .btn-nomal : 일반 고스트 버튼
     .btn-ghost : 고스트 버튼 (btn-nomal과 유사)
     .btn-neon  : 강조 버튼 (회원가입 — orange 그라디언트)
   ─────────────────────────────────
   뱃지 em:
     알림 : accent-orange 배경
     메시지 (2번째) : accent-cyan 배경 + 검정 텍스트
════════════════════════════════════ */

.user-control-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 16px; }

/* ── 알림/메시지 그룹 #tnb2 ── */
#tnb2 { display: flex; align-items: center; gap: 6px; }
#tnb2 a {
  display: flex; align-items: center; gap: 6px; padding: 6px 11px;
  background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; color: var(--text-secondary); white-space: nowrap; transition: all .2s;
}
#tnb2 a:hover { border-color: var(--border-bright); color: var(--text-primary); }
/* 뱃지 카운트 */
#tnb2 em {
  font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  background: var(--accent-orange); color: #fff;
  border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center;
}
#tnb2 li:nth-child(2) em { background: var(--accent-cyan); color: #000; } /* 메시지 뱃지 */

/* ── 로그인/가입 그룹 #tnb ── */
#tnb { display: flex; align-items: center; gap: 5px; }

/* 일반 버튼 */
.btn-nomal {
  display: inline-flex; align-items: center; padding: 6px 13px;
  font-size: 12px; font-family: var(--font-body);
  border-radius: 8px; border: 1px solid var(--border);
  color: var(--text-secondary); background: transparent; transition: all .2s; white-space: nowrap;
}
.btn-nomal:hover { border-color: var(--border-bright); color: var(--text-primary); }
/* 로그인 버튼 (마지막에서 2번째) — cyan 포인트 */
#tnb li:nth-last-child(2) .btn-nomal       { border-color: rgba(0,200,255,.28); color: var(--accent-cyan); }
#tnb li:nth-last-child(2) .btn-nomal:hover { background: rgba(0,200,255,.08); box-shadow: var(--glow-cyan); }

/* 고스트 버튼 */
.btn-ghost {
  display: inline-flex; align-items: center; padding: 6px 13px;
  font-size: 12px; font-family: var(--font-body);
  border-radius: 8px; border: 1px solid var(--border);
  color: var(--text-secondary); background: transparent; transition: all .2s;
}
.btn-ghost:hover { border-color: var(--border-bright); color: var(--text-primary); }

/* 네온 버튼 — 회원가입 등 CTA 강조 */
.btn-neon {
  display: inline-flex; align-items: center;
  padding: 6px 16px; font-size: 12px; font-weight: 700; font-family: var(--font-body);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-orange), #e83000);
  color: #fff; border: none; box-shadow: var(--glow-orange);
  transition: all .2s; white-space: nowrap;
}
.btn-neon:hover { filter: brightness(1.15); transform: translateY(-1px); }


/* ════════════════════════════════════
   [11] 모바일 햄버거 버튼 — #slide-btn
   ─────────────────────────────────
   PC: display:none
   모바일: display:flex (respond.css에서 처리)
   ─────────────────────────────────
   구조: #slide-btn > button > span × 3 (3선)
   열림(.is-open) 상태:
     span:1 — translateY(7px) rotate(45deg)  → \ 
     span:2 — opacity:0 scaleX(0)            → 사라짐
     span:3 — translateY(-7px) rotate(-45deg) → /
     → X 모양 완성
════════════════════════════════════ */
#slide-btn {
  display: none;                                    /* PC에서 숨김 */
  flex-direction: column; align-items: center;
  gap: 3px; margin-left: auto; padding: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase;
}
#slide-btn button { display: flex; flex-direction: column; gap: 5px; padding: 2px; }
/* 햄버거 선 3개 */
#slide-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--text-secondary); border-radius: 2px;
  transition: all .3s var(--ease);
}
/* X 모양 변환 (.is-open) */
#slide-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#slide-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#slide-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ════════════════════════════════════
   [12] 모바일 슬라이드 메뉴 — #slide-menu
   ─────────────────────────────────
   구조: #slide-menu (우측 패널)
           └── .inner
                 ├── .mo-close (닫기 버튼)
                 ├── #mo-tnb   (유저 메뉴)
                 ├── #mo-sch   (검색창)
                 └── #mo-gnb   (아코디언 메뉴 1~3차)
         #slide-bg (딤 배경)
   ─────────────────────────────────
   슬라이드 인: right:-100% → .open 시 right:0
   딤 배경: opacity:0 → .open 시 opacity:1
   ─────────────────────────────────
   아코디언:
     1차 li.open → 2차 ul display:flex
     2차 li.open → 3차 ul display:flex
     .mo-arrow 회전으로 열림/닫힘 표시
════════════════════════════════════ */

/* 슬라이드 패널 본체 */
#slide-menu {
  position: fixed; top: 0; right: -100%;            /* 초기: 화면 밖 */
  width: min(300px, 85vw); height: 100vh;
  background: rgba(7,10,22,0.98);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  z-index: 600; overflow-y: auto;
  transition: right .36s var(--ease);
  padding: 72px 0 40px;                             /* 상단 72px: 닫기 버튼 공간 확보 */
}
#slide-menu.open    { right: 0; }                   /* 열림 */
#slide-menu .inner  { padding: 0 20px; }

/* 딤 배경 */
#slide-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  z-index: 590; opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#slide-bg.open { opacity: 1; visibility: visible; }

/* 닫기(×) 버튼 */
.mo-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 18px; cursor: pointer; transition: all .2s;
}
.mo-close:hover { border-color: var(--border-bright); color: var(--text-primary); }

/* ── 모바일 유저 메뉴 #mo-tnb ── */
#mo-tnb {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
#mo-tnb a {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 9px;
  font-size: 13px; color: var(--text-secondary); transition: all .2s;
}
#mo-tnb a:hover { border-color: var(--border-bright); color: var(--text-primary); }
#mo-tnb em {
  font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  background: var(--accent-orange); color: #fff; border-radius: 9px; padding: 1px 6px;
}

/* ── 모바일 검색 #mo-sch ── */
#mo-sch { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
#mo-sch fieldset { border: none; display: flex; }
#mo-sch legend   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
#mo-sch .inp {
  flex: 1; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 9px 14px; font-size: 13px;
  color: var(--text-primary); font-family: var(--font-mono); outline: none;
}
#mo-sch .inp::placeholder { color: var(--text-dim); }
#mo-sch .sbm {
  background: rgba(0,200,255,.09); border: 1px solid var(--border); border-left: none;
  border-radius: 0 8px 8px 0; padding: 9px 14px; color: var(--accent-cyan); font-size: 14px; transition: all .2s;
}
#mo-sch .sbm:hover { background: rgba(0,200,255,.18); }

/* ── 모바일 GNB 아코디언 #mo-gnb ── */
#mo-gnb { display: flex; flex-direction: column; gap: 4px; }

/* 1차 메뉴 */
#mo-gnb > li > a {
  display: flex; align-items: center; justify-content: space-between; padding: 11px 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all .2s;
}
#mo-gnb > li > a:hover { border-color: var(--border-bright); color: var(--text-primary); }
#mo-gnb > li > a .mo-arrow { font-size: 14px; color: var(--accent-cyan); transition: transform .25s var(--ease); flex-shrink: 0; }
#mo-gnb > li.open > a .mo-arrow { transform: rotate(90deg); } /* 열림 시 화살표 회전 */

/* 2차 메뉴 — 기본 숨김, li.open 시 flex로 표시 */
#mo-gnb > li > ul {
  display: none;
  margin: 3px 0 4px 14px; padding-left: 12px;
  border-left: 2px solid rgba(0,200,255,.18);       /* cyan 들여쓰기 라인 */
  flex-direction: column; gap: 2px;
}
#mo-gnb > li.open > ul { display: flex; }
#mo-gnb > li > ul > li > a {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  font-size: 12px; color: var(--text-dim); border-radius: 6px; transition: all .15s;
}
#mo-gnb > li > ul > li > a:hover { color: var(--accent-cyan); background: rgba(0,200,255,.06); }
#mo-gnb > li > ul > li > a .mo-arrow { font-size: 12px; color: var(--accent-orange); transition: transform .25s; }
#mo-gnb > li > ul > li.open > a .mo-arrow { transform: rotate(90deg); }

/* 3차 메뉴 — orange 들여쓰기 라인 */
#mo-gnb > li > ul > li > ul {
  display: none;
  margin: 2px 0 2px 12px; padding-left: 10px;
  border-left: 2px solid rgba(255,107,43,.22);      /* orange 들여쓰기 라인 */
  flex-direction: column; gap: 2px;
}
#mo-gnb > li > ul > li.open > ul { display: flex; }
#mo-gnb > li > ul > li > ul > li > a {
  display: block; padding: 7px 10px;
  font-size: 11px; color: var(--text-dim); border-radius: 5px; transition: all .15s;
}
#mo-gnb > li > ul > li > ul > li > a:hover { color: var(--accent-orange); }


/* ════════════════════════════════════
   [13] 히어로 배너 — .hero-banner
   ─────────────────────────────────
   구조: .hero-banner
           ├── .star-container (별 파티클 — JS 생성)
           ├── .hero-orb-2 / .hero-orb-3 (보조 글로우 오브)
           └── .hero-content
                 ├── .hero-badge  (상단 배지)
                 ├── h2.hero-title (메인 제목)
                 ├── .hero-subtitle (부제목)
                 └── .hero-live   (라이브 상태 배지)
   ─────────────────────────────────
   배경 효과:
     ::before — 상단 cyan 글로우 오브 (orbA 애니메이션)
     ::after  — 수평 스캔라인 오버레이 (repeating-linear-gradient)
   ─────────────────────────────────
   .hero-title font-size: clamp(24px, 3.2vw, 44px)
     → respond.css에서 모바일 고정값으로 오버라이드
════════════════════════════════════ */

.hero-banner {
  position: relative; z-index: 1;
  min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 28px 50px;
  overflow: hidden; text-align: center; width: 100%;
}
/* 상단 cyan 글로우 오브 */
.hero-banner::before {
  content: ''; position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 280px;
  background: radial-gradient(ellipse, rgba(0,200,255,.1) 0%, transparent 70%);
  filter: blur(40px); pointer-events: none;
  animation: orbA 9s ease-in-out infinite alternate;
}
/* 수평 스캔라인 오버레이 */
.hero-banner::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,200,255,.007) 2px, rgba(0,200,255,.007) 4px);
  pointer-events: none; z-index: 1;
}
/* 별 파티클 컨테이너 — JS에서 .star 요소를 동적 생성 */
.star-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.star {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
  --move-x: 60px; --move-y: -60px;                 /* JS에서 랜덤값으로 오버라이드 */
  animation-name: starFloat; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
/* 보조 글로우 오브 */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero-orb-2 { width: 260px; height: 200px; background: radial-gradient(ellipse, rgba(255,107,43,.09) 0%, transparent 70%); bottom: -30px; right: 8%;  animation: orbB 11s ease-in-out infinite alternate; }
.hero-orb-3 { width: 180px; height: 180px; background: radial-gradient(ellipse, rgba(0,255,157,.07) 0%, transparent 70%); bottom: 0; left: 5%; animation: orbB 13s ease-in-out infinite alternate; animation-delay: -4s; }

/* 히어로 콘텐츠 영역 */
.hero-content {
  position: relative; z-index: 3;
  width: 100%; max-width: 780px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* 상단 배지 — 양쪽 가로선 + 텍스트 */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 3px; color: var(--accent-cyan); text-transform: uppercase;
  margin-bottom: 20px; opacity: 0; animation: fadeUp .8s .2s forwards;
}
.hero-badge::before, .hero-badge::after { content: ''; width: 34px; height: 1px; }
.hero-badge::before { background: linear-gradient(90deg, transparent, var(--accent-cyan)); } /* 왼쪽 페이드인 선 */
.hero-badge::after  { background: linear-gradient(90deg, var(--accent-cyan), transparent); } /* 오른쪽 페이드아웃 선 */

/* 히어로 제목 — clamp로 뷰포트 반응형 */
h2.hero-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 44px);             /* 최소24px ~ 뷰포트3.2% ~ 최대44px */
  font-weight: 800; line-height: 1.25; letter-spacing: -.8px;
  margin-bottom: 16px; text-align: center; width: 100%;
  opacity: 0; animation: fadeUp .8s .4s forwards;
}
/* 제목 내 강조 span — 그라디언트 텍스트 */
h2.hero-title span {
  background: linear-gradient(90deg, var(--accent-cyan) 0%, #4a90ff 48%, var(--accent-orange) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: clamp(15px, 3.2vw, 30px);
}
/* 부제목 */
.hero-subtitle {
  font-family: var(--font-mono); font-size: clamp(4px, 15.2vw, 12px);
  color: var(--text-secondary); letter-spacing: .3px; line-height: 1.9;
  max-width: 460px; margin: 0 auto; text-align: center;
  opacity: 0; animation: fadeUp .8s .6s forwards;
}
/* 라이브 상태 배지 */
.hero-live {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 7px 20px;
  background: rgba(0,255,157,.05); border: 1px solid rgba(0,255,157,.2); border-radius: 100px;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-green); letter-spacing: 1.2px;
  opacity: 0; animation: fadeUp .8s .8s forwards;
}
/* 라이브 점 — 맥박 애니메이션 */
.live-dot {
  width: 7px; height: 7px; background: var(--accent-green);
  border-radius: 50%; box-shadow: var(--glow-green);
  animation: livePulse 1.6s ease-in-out infinite; flex-shrink: 0;
}


/* ════════════════════════════════════
   [14] 메인 콘텐츠 그리드 — .content-wrapper
   ─────────────────────────────────
   구조: .content-wrapper
           └── .card-grid
                 ├── .grid-row-1 (2열 1:2 비율)
                 └── .grid-row-2 (3열 1:1:1 비율)
   ─────────────────────────────────
   .info-card:
     기본: opacity:0 / translateY(24px) (숨김)
     JS에서 .card-visible 추가 → 등장 애니메이션
   ─────────────────────────────────
   데이터 없음:
     [2026-03 수정] content:'// ' → 📭 이모지
     FA 폰트 의존 완전 제거
     display:flex + flex-direction:column 으로 아이콘+텍스트 세로 배치
════════════════════════════════════ */

.content-wrapper { position: relative; z-index: 1; padding-top: 4px; padding-bottom: 56px; }
.card-grid       { display: flex; flex-direction: column; gap: 16px; }
.grid-row-1      { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }  /* 좌:우 = 1:2 */
.grid-row-2      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } /* 3등분 */

/* ── 카드 공통 ── */
.info-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; position: relative; overflow: hidden;
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease), opacity .5s ease;
  opacity: 0; transform: translateY(24px);          /* JS .card-visible 전 숨김 상태 */
}
/* JS에서 .card-visible 추가 시 등장 */
.info-card.card-visible { opacity: 1; transform: translateY(0); }
/* hover 효과 */
.info-card.card-visible:hover {
  border-color: var(--border-bright); background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,200,255,.1);
}
/* 좌상단 글로우 장식 */
.info-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 64px; height: 64px;
  background: linear-gradient(135deg, rgba(0,200,255,.065) 0%, transparent 60%);
  border-radius: 14px 0 0 0; pointer-events: none;
}

/* ── 카드 헤더 ── */
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-top h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: .2px; }
/* Bootstrap Icons 색상 — 카드 제목 아이콘별 강조색 */
.card-top h3 .bi-megaphone-fill { color: var(--accent-orange); } /* 공지 */
.card-top h3 .bi-graph-up-arrow { color: var(--accent-cyan); }   /* 통계 */
.card-top h3 .bi-dice-5-fill    { color: var(--accent-orange); } /* 경기 */
.card-top h3 .bi-wallet2        { color: var(--accent-green); }  /* 포인트 */
.card-top h3 .bi-folder-fill    { color: var(--accent-blue); }   /* 폴더 */

/* 더보기(+) 버튼 */
.more {
  width: 26px; height: 26px; background: rgba(0,200,255,.07);
  border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-cyan); font-size: 14px; transition: all .2s; flex-shrink: 0;
}
.more:hover { background: rgba(0,200,255,.15); border-color: var(--border-bright); box-shadow: var(--glow-cyan); }

/* ── 데이터 없음 메시지 ──
   [2026-03 수정] '// ' 텍스트 → 📭 이모지 아이콘
   FA 폰트 의존 완전 제거 → FA 버전에 무관하게 항상 표시 */
.empty-msg {
  display: flex; flex-direction: column;            /* 아이콘 위, 텍스트 아래 */
  align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dim); text-align: center;
  padding: 28px 0; letter-spacing: .5px;
}
.empty-msg::before {
  content: '📭';                                    /* 빈 편지함 — 데이터 없음 표현 */
  font-family: initial;                             /* OS 기본 이모지 폰트 — FA 차단 */
  font-size: 28px; line-height: 1;
  opacity: 0.45; filter: grayscale(30%);            /* 다크 테마에 자연스럽게 */
}

/* ── 목록 아이템 ── */
.list-item         { display: flex; flex-direction: column; }
.list-item li      { border-bottom: 1px solid rgba(255,255,255,.04); }
.list-item li:last-child { border-bottom: none; }
.list-item li a    { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 12.5px; color: var(--text-secondary); transition: all .2s; }
.list-item li a:hover { color: var(--accent-cyan); padding-left: 4px; }
.item-title        { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 12px; } /* 긴 제목 말줄임 */
.item-meta         { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.item-date         { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.item-author       { font-family: var(--font-mono); font-size: 10px; color: var(--accent-cyan); opacity: .65; }
.mini-card         { height: 100%; }

/* ── 상태 박스 ── */
.status-box {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(0,255,157,.04); border: 1px solid rgba(0,255,157,.18); border-radius: 9px;
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.pulse { background: var(--accent-green); box-shadow: var(--glow-green); animation: livePulse 2s ease-in-out infinite; }
.status-box strong {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: rgba(0,255,157,.13); color: var(--accent-green);
  padding: 3px 10px; border-radius: 100px;
  border: 1px solid rgba(0,255,157,.25); letter-spacing: .8px; margin-left: 4px;
}

/* ── 실시간 바 그래프 ── */
.realtime-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-top: 14px; }
.bar           { flex: 1; background: linear-gradient(180deg, var(--accent-cyan), rgba(0,200,255,.22)); border-radius: 2px; animation: barPulse 1.6s ease-in-out infinite; }
/* 각 바별 높이 + 딜레이 — 자연스러운 파형 효과 */
.bar:nth-child(1){height:38%;animation-delay:.00s} .bar:nth-child(2){height:72%;animation-delay:.12s}
.bar:nth-child(3){height:52%;animation-delay:.24s} .bar:nth-child(4){height:90%;animation-delay:.36s}
.bar:nth-child(5){height:64%;animation-delay:.48s} .bar:nth-child(6){height:42%;animation-delay:.60s}
.bar:nth-child(7){height:80%;animation-delay:.72s} .bar:nth-child(8){height:30%;animation-delay:.84s}
.bar:nth-child(9){height:62%;animation-delay:.96s} .bar:nth-child(10){height:50%;animation-delay:1.08s}
.live-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }


/* ════════════════════════════════════
   [15] 중간 파트너 배너 — #mid-bn
   ─────────────────────────────────
   구조: #mid-bn
           ├── ::before — 'PARTNERS' 라벨
           ├── ::after  — 좌측 페이드
           ├── ul > li > a.link > img (배너 이미지)
           ├── .bn-track — JS가 생성하는 무한 스크롤 트랙
           └── .bn-fade-right — 우측 페이드
   ─────────────────────────────────
   JS initBanner() 동작:
     .bn-track 요소를 동적으로 생성
     배너 아이템을 2번 복제 → seamless 무한 스크롤
     translateX(-50%) 시 처음으로 돌아가는 효과
   ─────────────────────────────────
   hover 시 animation-play-state: paused → 일시정지
════════════════════════════════════ */

#mid-bn {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; height: 70px;
}
/* 'PARTNERS' 라벨 — 좌측 고정 */
#mid-bn::before {
  content: 'PARTNERS'; position: absolute;
  left: max(28px, calc((100% - var(--site-w)) / 2 + 28px)); /* 콘텐츠 너비 기준 정렬 */
  top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2.5px; color: var(--text-dim);
  white-space: nowrap; z-index: 3; pointer-events: none;
}
/* 좌측 페이드 — 'PARTNERS' 라벨과 배너 사이 자연스러운 경계 */
#mid-bn::after {
  content: ''; position: absolute; left: 0; top: 0; width: 160px; height: 100%;
  background: linear-gradient(90deg, var(--bg-base) 60%, transparent 100%);
  z-index: 2; pointer-events: none;
}
#mid-bn ul { display: contents; list-style: none; }
/* 배너 카드 */
#mid-bn ul li {
  flex-shrink: 0; display: flex; align-items: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
#mid-bn ul li:hover { border-color: var(--border-bright); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
#mid-bn ul li a.link { display: flex; align-items: center; justify-content: center; padding: 8px 16px; min-width: 90px; height: 50px; }
/* 배너 이미지 — 기본 채도/밝기 낮춤, hover 시 원본으로 */
#mid-bn ul li a.link img { height: 28px; width: auto; max-width: 130px; object-fit: contain; filter: brightness(.82) saturate(.75); transition: filter .25s, opacity .25s; opacity: .7; }
#mid-bn ul li:hover a.link img { filter: brightness(1.08) saturate(1.1); opacity: 1; }

/* JS가 생성하는 무한 스크롤 트랙 */
#mid-bn .bn-track {
  display: inline-flex; align-items: center; gap: 14px;
  padding-left: max(130px, calc((100% - var(--site-w)) / 2 + 130px)); /* 'PARTNERS' 라벨 너비만큼 오프셋 */
  padding-right: 28px; height: 70px;
  animation: bannerScroll 32s linear infinite;       /* 32초 주기 무한 스크롤 */
  will-change: transform; flex-shrink: 0; position: relative; z-index: 1;
}
#mid-bn .bn-track:hover { animation-play-state: paused; } /* hover 시 일시정지 */

/* 우측 페이드 */
#mid-bn .bn-fade-right {
  position: absolute; right: 0; top: 0; width: 80px; height: 100%;
  background: linear-gradient(90deg, transparent, var(--bg-base) 80%);
  z-index: 2; pointer-events: none;
}


/* ════════════════════════════════════
   [16] 푸터 — .main-footer / #fnb
   ─────────────────────────────────
   구조: .main-footer
           ├── #fnb (링크 목록)
           │     ├── .fnb-menu1 (굵은 텍스트 링크)
           │     └── .fnb-menu2 (일반 텍스트 링크)
           └── .fnb-txt
                 ├── address (회사 정보)
                 └── .copyright (저작권)
   ─────────────────────────────────
   구분선: li + li::before 의사요소로 세로 1px 구분선 생성
   링크 밑줄: a::after width 0→100% 애니메이션
════════════════════════════════════ */

.main-footer {
  position: relative; z-index: 1;
  background: rgba(5,8,16,0.94); border-top: 1px solid var(--border);
  padding: 36px 40px 30px; text-align: center;
}
/* 링크 목록 */
#fnb { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 20px; }
#fnb li { display: flex; align-items: center; }
/* li 사이 세로 구분선 */
#fnb li + li::before { content: ''; display: inline-block; width: 1px; height: 11px; background: var(--text-dim); margin: 0 16px; opacity: .5; }
#fnb a { font-size: 12px; font-family: var(--font-mono); letter-spacing: .5px; padding: 3px 0; position: relative; transition: color .2s; }
#fnb .fnb-menu1 a { color: var(--text-primary); font-weight: 600; }  /* 개인정보처리방침 등 중요 링크 */
#fnb .fnb-menu2 a { color: var(--text-secondary); }                  /* 일반 링크 */
/* hover 밑줄 애니메이션 */
#fnb a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent-cyan); transition: width .22s; }
#fnb a:hover  { color: var(--accent-cyan); }
#fnb a:hover::after { width: 100%; }

/* 회사 정보 + 저작권 */
.fnb-txt { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fnb-txt address {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); line-height: 1; letter-spacing: .3px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
/* 주소 항목 사이 세로 구분선 — hr 태그 활용 */
.fnb-txt address hr { display: inline-block; width: 1px; height: 10px; background: var(--text-dim); border: none; margin: 0 12px; vertical-align: middle; opacity: .35; }
.fnb-txt address a  { color: var(--accent-cyan); opacity: .6; transition: opacity .2s; }
.fnb-txt address a:hover { opacity: 1; }
.copyright { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); line-height: 2; letter-spacing: .3px; margin-top: 4px; }


/* ════════════════════════════════════
   [17] 서브 페이지 공통 — #sub
   ─────────────────────────────────
   구조: #sub
           ├── .sub-tit2 (상단 배너 — 전체 너비)
           └── #content  (본문 — 최대 1300px)
                 ├── .sub-tab  (LNB 탭)
                 ├── #navi     (브레드크럼)
                 └── 본문 콘텐츠
   ─────────────────────────────────
   .sub-tit2:
     전체 너비 / 배경 그라디언트 + 글로우
     ::before — 상단 ambient glow
     ::after  — 스캔라인 오버레이
     h3 font-size: clamp(22px, 2.6vw, 34px) 반응형
   ─────────────────────────────────
   .sub-tab: 가운데 정렬 pill 스타일 탭
   #navi: 브레드크럼 — 폰트모노 11px, text-dim 컬러
════════════════════════════════════ */

#sub { position: relative; z-index: 1; }

/* 서브 상단 배너 — 전체 너비 */
.sub-tit2 {
  position: relative; width: 100%; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 44px 28px 36px;
  text-align: center; overflow: hidden;
  border-bottom: 1px solid var(--border); margin-bottom: 0;
  background: linear-gradient(180deg, rgba(0,200,255,0.04) 0%, transparent 100%);
}
/* 상단 글로우 오브 */
.sub-tit2::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 200px;
  background: radial-gradient(ellipse, rgba(0,200,255,0.09) 0%, transparent 70%);
  filter: blur(30px); pointer-events: none;
}
/* 스캔라인 오버레이 */
.sub-tit2::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,200,255,0.005) 2px, rgba(0,200,255,0.005) 4px);
  pointer-events: none;
}
.sub-tit2 .star-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }

/* 배너 제목 */
.sub-tit2 h3 {
  font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800; color: var(--text-primary);
  position: relative; z-index: 1; margin-bottom: 10px; letter-spacing: -0.5px;
}
/* 배너 부제목 — 양쪽 가로선 */
.sub-tit2 em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 12px; color: var(--text-secondary); letter-spacing: 1px;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
}
.sub-tit2 em::before, .sub-tit2 em::after { content: ''; width: 28px; height: 1px; }
.sub-tit2 em::before { background: linear-gradient(90deg, transparent, var(--accent-cyan)); }
.sub-tit2 em::after  { background: linear-gradient(90deg, var(--accent-cyan), transparent); }

/* 서브 콘텐츠 너비 제한 */
#sub > #content { max-width: var(--site-w); margin: 0 auto; padding: 0 28px; width: 100%; box-sizing: border-box; }

/* LNB 탭 */
.sub-tab { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; justify-content: center; }
.sub-tab li a {
  display: inline-flex; align-items: center; padding: 7px 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 100px;
  font-size: 13px; color: var(--text-secondary); transition: all .2s;
}
.sub-tab li a:hover,
.sub-tab li a.active { border-color: var(--border-bright); color: var(--accent-cyan); background: rgba(0,200,255,.06); }

/* 브레드크럼 #navi */
#navi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 24px; padding-top: 16px; }
#navi li { display: flex; align-items: center; gap: 6px; }
#navi li a { color: var(--text-dim); transition: color .2s; }
#navi li a:hover { color: var(--accent-cyan); }
#navi li i { font-size: 10px; color: var(--text-dim); }          /* 구분 아이콘 */
#navi li:last-child a { color: var(--text-secondary); }          /* 현재 페이지는 밝게 */


/* ════════════════════════════════════
   [18] 유틸리티 클래스
   ─────────────────────────────────
   .fade-in : JS에서 .visible 추가 시 등장
              Intersection Observer 패턴과 함께 사용
════════════════════════════════════ */
.fade-in         { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }


/* ════════════════════════════════════
   [19] 스크롤바 커스텀
   ─────────────────────────────────
   Webkit 전용 (Chrome/Safari/Edge)
   Firefox는 scrollbar-width/color로 별도 처리 필요
════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(0,200,255,.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,.38); }


/* ════════════════════════════════════
   [20] 가이드 콘텐츠 — #gui-content
   ─────────────────────────────────
   구조: #gui-content > .inner >
           h2.sub-tit  (페이지 제목)
           h2.ctit2    (섹션 소제목 — 왼쪽 cyan 라인)
           span.ctxt2  (본문 텍스트)
           .img-size   (이미지 컨테이너)
           div:has(img)(이미지 컨테이너 대안)
           .gui-warbox (경고 박스)
           .gui-linkbox(연관 링크 박스)
════════════════════════════════════ */

#gui-content         { position: relative; z-index: 1; padding-bottom: 60px; }
#gui-content > .inner { display: flex; flex-direction: column; gap: 0; padding-top: 8px; }

/* 페이지 메인 제목 */
h2.sub-tit {
  font-family: var(--font-display); font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700; color: var(--text-primary); line-height: 1.5;
  padding: 24px 0 20px; border-bottom: 1px solid var(--border);
  margin-bottom: 28px; letter-spacing: -0.3px;
}
/* 제목 하단 설명 em */
h2.sub-tit em {
  display: block; font-style: normal; font-family: var(--font-mono);
  font-size: 12px; font-weight: 400; color: var(--text-secondary);
  margin-top: 7px; letter-spacing: 0.3px; line-height: 1.7;
}

/* 섹션 소제목 — 왼쪽 cyan 3px 라인 */
h2.ctit2 {
  font-family: var(--font-display); font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px;
  margin-top: 32px; margin-bottom: 12px;
  padding-left: 12px; border-left: 3px solid var(--accent-cyan); line-height: 1.4;
}

/* 본문 텍스트 */
span.ctxt2 { display: block; font-size: 13.5px; color: var(--text-secondary); line-height: 1.9; margin-bottom: 10px; word-break: keep-all; }
span.ctxt2:empty  { display: none; }                /* 빈 span 숨김 */
span.ctxt2 strong { color: var(--text-primary); font-weight: 600; }

/* 이미지 컨테이너 — .img-size 또는 div:has(img) 모두 동일 스타일 */
.img-size,
#gui-content > .inner > div:has(img) {
  margin: 16px 0 20px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card);
  display: inline-block; max-width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3); transition: border-color .2s, box-shadow .2s;
}
.img-size:hover,
#gui-content > .inner > div:has(img):hover { border-color: var(--border-bright); box-shadow: 0 6px 32px rgba(0,0,0,0.45), var(--glow-cyan); }
.img-size span.ctxt2,
#gui-content > .inner > div:has(img) span.ctxt2 { margin: 0; }
.img-size img,
#gui-content > .inner > div:has(img) img { display: block; max-width: 100%; height: auto; border-radius: 11px; }

/* 경고 박스 — ⚠ 아이콘 + orange 왼쪽 라인 */
.gui-warbox {
  position: relative;
  background: rgba(255,107,43,0.06); border: 1px solid rgba(255,107,43,0.28);
  border-left: 3px solid var(--accent-orange);
  border-radius: 10px; padding: 16px 18px 16px 48px;
  margin: 20px 0 28px; overflow: hidden;
}
.gui-warbox::before { content: '⚠'; position: absolute; left: 15px; top: 16px; font-size: 16px; color: var(--accent-orange); line-height: 1; }
.gui-warbox strong  { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--accent-orange); margin-bottom: 6px; letter-spacing: 0.3px; }
.gui-warbox p       { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.gui-warbox p strong { display: inline; color: var(--text-primary); font-size: 13px; margin-bottom: 0; }

/* 연관 링크 박스 — 상단 2px cyan 라인 */
.gui-linkbox {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 36px; padding: 16px 20px;
  background: rgba(0,200,255,0.05);
  border: 1px solid var(--border); border-top: 2px solid var(--accent-cyan);
  border-radius: 0 0 10px 10px;
}
.gui-linkbox strong { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.gui-linkbox a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: rgba(0,200,255,0.08); border: 1px solid rgba(0,200,255,0.28); border-radius: 100px;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-cyan);
  transition: all 0.2s; white-space: nowrap;
}
.gui-linkbox a::before { content: '→'; font-size: 13px; }          /* 화살표 접두사 */
.gui-linkbox a:hover   { background: rgba(0,200,255,0.15); border-color: var(--border-bright); box-shadow: var(--glow-cyan); transform: translateX(2px); }


/* ════════════════════════════════════
   [21] 약관/정책 — #policy-agree-box
   ─────────────────────────────────
   구조: #policy-agree-box
           ├── h4 (페이지 제목)
           └── .agreebox-wrap
                 └── .agreebox (스크롤 박스)
                       ├── h4.ctit2 (조항 소제목)
                       ├── 본문 내용
                       └── .tac (시행일)
   ─────────────────────────────────
   .agreebox-wrap::after : 하단 스크롤 유도 페이드
   .scrolled-to-end : JS에서 추가 → 페이드 opacity:0
   ─────────────────────────────────
   .agreebox 높이:
     calc(100vh - header - 200px) — 화면에 꽉 차게
     min-height:300px / max-height:780px 제한
════════════════════════════════════ */

#policy-agree-box { position: relative; z-index: 1; padding-bottom: 60px; }

/* 페이지 제목 */
#policy-agree-box > h4 {
  font-family: var(--font-display); font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800; color: var(--text-primary); letter-spacing: -0.4px; line-height: 1.4;
  padding: 28px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 0;
}

/* 스크롤 박스 */
.agreebox {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  margin-top: 24px;
  height: calc(100vh - var(--header-h) - 200px);   /* 화면 높이 - 헤더 - 여백 */
  min-height: 300px; max-height: 780px;
  overflow-y: auto; overflow-x: hidden;
  padding: 36px 40px;
  scrollbar-width: thin; scrollbar-color: rgba(0,200,255,0.25) transparent; /* Firefox */
  font-size: 13.5px; color: var(--text-secondary); line-height: 2; word-break: keep-all;
}
/* Webkit 스크롤바 */
.agreebox::-webkit-scrollbar       { width: 5px; }
.agreebox::-webkit-scrollbar-track { background: transparent; }
.agreebox::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.22); border-radius: 3px; }
.agreebox::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,0.42); }

/* 하단 스크롤 유도 페이드 */
#policy-agree-box .agreebox-wrap { position: relative; margin-top: 24px; }
#policy-agree-box .agreebox-wrap::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px;
  background: linear-gradient(transparent, var(--bg-card)); /* 박스 배경색과 동일하게 */
  border-radius: 0 0 14px 14px; pointer-events: none; transition: opacity 0.3s;
}
/* JS에서 scrolled-to-end 추가 시 페이드 숨김 */
#policy-agree-box .agreebox-wrap.scrolled-to-end::after { opacity: 0; }

/* 조항 소제목 — cyan 왼쪽 라인 + 배경 */
.agreebox h4.ctit2 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-primary); letter-spacing: -0.2px;
  margin-top: 36px; margin-bottom: 12px; padding: 10px 14px;
  border-left: 3px solid var(--accent-cyan); background: rgba(0,200,255,0.04);
  border-radius: 0 8px 8px 0; line-height: 1.4;
}
.agreebox h4.ctit2:first-child,
.agreebox h4.ctit2.mt0 { margin-top: 0; }           /* 첫 번째 조항 위 여백 제거 */
.agreebox strong   { color: var(--text-primary); font-weight: 600; }
.agreebox p        { margin-bottom: 8px; }

/* 시행일 표시 */
.agreebox .tac {
  text-align: center; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dim); letter-spacing: 0.5px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
}


/* ════════════════════════════════════
   [22] 기본 배경/색상 명시 — 변수 기반 직접 선언 (2026-04 개정)
   ─────────────────────────────────
   기존: background-color:transparent!important / color:inherit!important 강제 초기화 방식 폐기
   현재: CSS 변수로 배경/색상을 직접 지정 — 부작용 없음
════════════════════════════════════ */

/* 주요 배경 */
body, #content, #sub                           { background-color: var(--bg-base); }
.info-card, .agreebox                          { background-color: var(--bg-card); }
table.listtbl                                  { background-color: var(--bg-card); }
table.listtbl thead tr                         { background-color: rgba(0,200,255,0.06); }
table.listtbl tbody tr:hover                   { background-color: rgba(0,200,255,0.04); }

/* FA7 아이콘 폰트 명시 */
i.fa, i.fas, i.far, i.fal, i.fab, i.fat,
i.fa-solid, i.fa-regular, i.fa-light, i.fa-thin, i.fa-brands,
.fa-solid, .fa-regular, .fa-light { font-family: "Font Awesome 7 Free", "Font Awesome 7 Brands" !important; font-style: normal; }

/* 색상 유틸 — proto/alert 전용 */
.txt-red,       #pop-view .txt-red       { color: #ff6b6b !important; font-weight: 700; }
.txt-home-blue, #pop-view .txt-home-blue { color: #6eb0ff !important; }
.txt-away-red,  #pop-view .txt-away-red  { color: #ff6b6b !important; }
.highlight-me,  #pop-view .highlight-me  { color: var(--accent-cyan) !important; font-weight: 700; }
.fw-bold                                 { font-weight: 800 !important; }

/* .star-container — proto 파티클 */
.star-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }


/* ════════════════════════════════════
   [23] 알림·메시지함 — 공통 레이아웃
   ─────────────────────────────────
   23-1  #sub-tit       — 페이지 제목
   23-2  .mypoint        — 카운트 표시
   23-3  .message-tabs   — 탭
   23-4  .list-head      — 검색 컨트롤
   23-5  .btn-wrap       — 버튼 래퍼
   23-6  .btn1/2/3       — 공통 버튼
   23-7  table.listtbl   — 목록 테이블
   23-8  .paging         — 페이징
   23-9  .article-tab    — 아티클 탭
   23-10 #message-send   — 메시지 발송 팝업
   23-11 .msg-history    — 메시지 히스토리
════════════════════════════════════ */

/* 외부 CSS position 충돌 방지 — 일부 구형 CSS가 float 기반 레이아웃을 강제 적용하는 것을 차단 */
#sub-tit, .mypoint, .btn-wrap,
table.listtbl, .paging, .pagingbox { position: static !important; float: none; clear: both; }


/* ── 23-1. 페이지 제목 #sub-tit ── */
#sub-tit { margin-top: 36px; margin-bottom: 20px; }
/* .btn-wrap 최대 너비 제한 — 1300px 콘텐츠 영역 내 정렬 */
#sub > .btn-wrap,
#sub > #content > .btn-wrap { max-width: var(--site-w); margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }
/* 제목 — 그라디언트 텍스트 */
#sub-tit h2 {
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px);
  font-weight: 800; letter-spacing: -0.5px; line-height: 1.3;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, var(--text-primary) 55%, var(--accent-cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}


/* ── 23-2. 카운트 표시 .mypoint ── */
.mypoint {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 14px 20px;
  background: rgba(0,200,255,0.05) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent-cyan) !important; /* 왼쪽 cyan 포인트 라인 */
  border-radius: 0 10px 10px 0;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary) !important;
  margin-bottom: 16px;
}
.mypoint strong { font-size: 20px; font-weight: 800; color: var(--accent-cyan) !important; font-family: var(--font-display); line-height: 1; }


/* ── 23-3. 탭 .message-tabs ── */
.message-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.message-tabs a {
  display: flex; align-items: center; justify-content: center;
  padding: 0 36px; height: 48px;
  font-size: 14px; font-weight: 600; color: var(--text-dim); text-decoration: none;
  position: relative; transition: all 0.2s var(--ease);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 8px 8px 0 0; margin-right: 3px; margin-bottom: -2px; /* 하단 테두리 겹침 */
  font-family: var(--font-body); white-space: nowrap;
}
.message-tabs a:hover:not(.active) { color: var(--text-secondary); background: rgba(255,255,255,0.05); }
/* 활성 탭 */
.message-tabs a.active {
  color: var(--text-primary); background: rgba(0,200,255,0.04);
  border-color: var(--border-bright); border-bottom-color: var(--bg-base); /* 하단 테두리 배경색으로 숨김 */
}
/* 활성 탭 상단 cyan 라인 */
.message-tabs a.active::before {
  content: ''; position: absolute; top: -2px; left: -1px; right: -1px; height: 2px;
  background: var(--accent-cyan); border-radius: 2px 2px 0 0; box-shadow: 0 0 8px var(--accent-cyan);
}


/* ── 23-4. 검색 컨트롤 .list-head ── */
.list-head { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#search-form  { display: flex; align-items: center; gap: 8px; }
.list-head fieldset { border: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; }
.list-head fieldset legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* 입력/선택 공통 */
.list-head select,
.list-head .inp,
.list-head input[type="text"],
.list-head input[type="search"] {
  height: 40px;
  background: rgba(255,255,255,0.04) !important; border: 1px solid var(--border) !important;
  border-radius: 8px; padding: 0 14px; font-size: 13px; font-family: var(--font-body);
  color: var(--text-primary) !important; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
/* 포커스 상태 */
.list-head select:focus,
.list-head .inp:focus,
.list-head input[type="text"]:focus { border-color: var(--border-bright) !important; background: rgba(0,200,255,0.05) !important; box-shadow: var(--glow-cyan); }
.list-head .inp.keyword,
.list-head input.keyword { width: 220px; }
.list-head .inp::placeholder,
.list-head input::placeholder { color: var(--text-dim); }
/* select 화살표 SVG — 커스텀 드롭다운 화살표 */
.list-head select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233a4660'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px;
}
.list-head select option { background: #0c1124; color: var(--text-primary); } /* 옵션 배경 다크 */
/* 검색 버튼 */
.list-head .submit,
.list-head button[type="submit"] {
  height: 40px;
  background: rgba(0,200,255,0.1) !important; color: var(--accent-cyan) !important;
  border: 1px solid rgba(0,200,255,0.3) !important; border-radius: 8px;
  padding: 0 20px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: all 0.2s; font-family: var(--font-body);
}
.list-head .submit:hover,
.list-head button[type="submit"]:hover { background: rgba(0,200,255,0.2) !important; border-color: var(--border-bright) !important; box-shadow: var(--glow-cyan); }
/* 초기화 버튼 */
.reset-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--text-dim); text-decoration: none;
  font-size: 16px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); transition: all 0.2s;
}
.reset-btn:hover { color: var(--text-secondary); border-color: var(--border-bright); background: rgba(255,255,255,0.06); }


/* ── 23-5. 버튼 래퍼 .btn-wrap ── */
#error-page {
  display: grid; align-items: center; gap: 8px; width: 100%;
  box-sizing: border-box;
  margin-top: 0; margin-bottom: 16px; overflow: visible;
  position: static !important; float: none !important; /* 외부 CSS float 차단 */
  justify-content: center;
}

.btn-wrap {
  display: flex; align-items: center; gap: 8px; width: 100%;
  box-sizing: border-box;
  margin-top: 0; margin-bottom: 16px; overflow: visible;
  position: static !important; float: none !important; /* 외부 CSS float 차단 */
}
.btn-wrap.mb20 { margin-bottom: 20px; }
.btn-wrap .right { margin-left: auto; display: flex; gap: 8px; } /* 오른쪽 정렬 그룹 */
.btn-wrap .left  { display: flex; gap: 8px; }                    /* 왼쪽 정렬 그룹 */


/* ── 23-6. 공통 버튼 .btn1 / .btn2 / .btn3 ── */
.btn1, .btn2, .btn3 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 8px; font-size: 13px;
  font-family: var(--font-body); font-weight: 500; cursor: pointer;
  transition: all 0.2s; white-space: nowrap; text-decoration: none; vertical-align: middle;
}
/* .btn2 — cyan 계열 (조회/일반 액션) */
.btn2       { background: rgba(0,200,255,0.08) !important; border: 1px solid rgba(0,200,255,0.3) !important; color: var(--accent-cyan) !important; }
.btn2:hover { background: rgba(0,200,255,0.18) !important; border-color: var(--border-bright) !important; box-shadow: var(--glow-cyan); transform: translateY(-1px); }
/* .btn1 — 그라디언트 주요 액션 (저장/등록) */
.btn1       { background: linear-gradient(135deg, var(--accent-cyan), #0066ff) !important; border: none !important; color: #fff !important; font-weight: 600; box-shadow: var(--glow-cyan); }
.btn1:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* .btn3 — orange 계열 (삭제/경고 액션) */
.btn3       { background: rgba(255,107,43,0.08) !important; border: 1px solid rgba(255,107,43,0.3) !important; color: var(--accent-orange) !important; }
.btn3:hover { background: rgba(255,107,43,0.18) !important; border-color: var(--accent-orange) !important; box-shadow: var(--glow-orange); transform: translateY(-1px); }


/* ── 23-7. 목록 테이블 table.listtbl ── */
table.listtbl {
  width: 100%; border-collapse: collapse; border-spacing: 0;
  margin-top: 0; margin-bottom: 30px; font-size: 13.5px;
  border: 1px solid var(--border) !important; border-radius: 12px; overflow: hidden;
  table-layout: auto;
}
/* 접근성: caption 숨김 (스크린리더는 읽음) */
table.listtbl caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* thead */
table.listtbl thead tr { background: rgba(0,200,255,0.06) !important; border-bottom: 2px solid rgba(0,200,255,0.22); }
table.listtbl thead th {
  padding: 13px 16px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary) !important; background: transparent !important;
  letter-spacing: 0.3px; text-align: center; white-space: nowrap;
}
table.listtbl thead th.tal { text-align: left; }

/* 커스텀 체크박스 */
table.listtbl thead th input[type="checkbox"],
table.listtbl tbody td  input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px;
  border: 1.5px solid var(--border-bright); border-radius: 4px;
  background: transparent !important; cursor: pointer; position: relative;
  vertical-align: middle; transition: all 0.15s;
}
/* 체크 상태 — cyan 배경 + ✓ 아이콘 */
table.listtbl thead th input[type="checkbox"]:checked,
table.listtbl tbody td  input[type="checkbox"]:checked { background: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important; }
table.listtbl thead th input[type="checkbox"]:checked::after,
table.listtbl tbody td  input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 9px; color: #000; font-weight: 800; }

/* tbody */
table.listtbl tbody tr { border-bottom: 1px solid var(--border); background: transparent !important; transition: background 0.18s; }
table.listtbl tbody tr:last-child { border-bottom: none; }
table.listtbl tbody tr:hover { background: rgba(0,200,255,0.04) !important; }
table.listtbl tbody td {
  padding: 13px 16px; color: var(--text-secondary) !important; background: transparent !important;
  text-align: center; vertical-align: middle; font-size: 13px; line-height: 1.5;
}
table.listtbl tbody td.tal   { text-align: left; }
table.listtbl tbody td.no    { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim) !important; } /* 번호 열 */
table.listtbl tbody td.tal a { color: var(--text-secondary) !important; display: block; line-height: 1.7; transition: color 0.2s; }
table.listtbl tbody td.tal a:hover { color: var(--accent-cyan) !important; }

/* 읽지 않은 항목 — orange 도트 표시 */
table.listtbl tbody td.tal a strong { position: relative; padding-left: 14px; color: var(--text-primary) !important; font-weight: 700; }
table.listtbl tbody td.tal a strong::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; background: var(--accent-orange); border-radius: 50%; box-shadow: 0 0 6px rgba(255,107,43,0.7);
}
/* 날짜/출처 열 */
table.listtbl tbody td:last-child,
table.listtbl tbody td:nth-child(2) { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim) !important; white-space: nowrap; }

/* 데이터 없음 행 (colspan 사용)
   [2026-03 수정] content:'// ' → 📭 이모지 */
table.listtbl tbody td[colspan] {
  text-align: center; padding: 48px 16px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dim) !important; letter-spacing: 0.5px;
}
table.listtbl tbody td[colspan]::before {
  content: '📭';                                    /* 빈 편지함 이모지 — FA 불필요 */
  display: block;                                   /* 텍스트와 줄 분리 */
  font-family: initial;                             /* OS 이모지 폰트 */
  font-size: 28px; line-height: 1;
  margin-bottom: 10px; opacity: 0.45; filter: grayscale(30%);
}


/* ── 23-8. 페이징 .paging / .pagingbox ── */
.paging, .pagingbox { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 20px; margin-bottom: 50px; flex-wrap: wrap; }
/* 페이지 버튼 공통 */
.paging a, .pagingbox a,
.paging span, .pagingbox span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary) !important; background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important; transition: all 0.18s; text-decoration: none;
}
.paging a:hover, .pagingbox a:hover { border-color: var(--border-bright) !important; color: var(--accent-cyan) !important; background: rgba(0,200,255,0.08) !important; }
/* 현재 페이지 강조 */
.paging .on, .paging .cur, .paging strong,
.pagingbox .on, .pagingbox .cur, .pagingbox strong { background: rgba(0,200,255,0.14) !important; border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; font-weight: 700; }


/* ── 23-9. 아티클 탭 .article-tab ── */
.article-tab { display: flex; list-style: none; padding: 0; margin: 0 0 20px 0; border-bottom: 1px solid var(--border); }
.article-tab > li { margin-right: 2px; }
.article-tab > li a {
  display: block; line-height: 46px; text-align: center; padding: 0 30px;
  background: rgba(255,255,255,0.02); border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; font-size: 13.5px; color: var(--text-dim);
  font-weight: 500; font-family: var(--font-body); transition: all 0.2s;
  margin-bottom: -1px; white-space: nowrap;
}
.article-tab > li a:hover   { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
/* 활성 탭 — bg-card 배경으로 하단 테두리 숨김 */
.article-tab > li.on a      { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); border-bottom-color: var(--bg-card); font-weight: 600; }


/* ── 23-10. 메시지 발송 팝업 #message-send ──
   구조: #message-send
           ├── .tit (제목 + 닫기 버튼)
           └── .cont (폼)
                 ├── table.table_wrt > tbody
                 │     ├── tr > th (받는회원)
                 │     │       td > input#to_mb_id
                 │     └── tr > th (내용)
                 │             td > textarea#article
                 │                  span.tbltxt
                 └── .btn.mt10
                       └── button.btn1 (발송)
   ─────────────────────────────────
   [2026-03 수정]
     input/textarea: 기본 텍스트 → --text-primary 명시
     기본 배경: 0.04 → 0.07 (입력칸 구분)
     hover: 테두리 밝아짐
     focus: cyan 테두리 + 글로우 링 3px
     textarea: min-height:110px / resize:vertical
     .btn 발송버튼: justify-content:flex-end 오른쪽 정렬
       (기존 .btn-area → 실제 HTML 클래스 .btn 으로 교정) */

#message-send {
  position: fixed;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-bright);
  border-top: 2px solid var(--accent-cyan);         /* 상단 포인트 라인 */
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 40px rgba(0,200,255,0.06);
  overflow: hidden;
  z-index: 9999;
  color: var(--text-primary) !important;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);                 /* 화면 정중앙 */
}
/* 팝업 타이틀 */
#message-send .tit {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(0,200,255,0.05) !important;
  border-bottom: 1px solid var(--border);
  height: 54px;
}
#message-send .tit h2 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important; /* gradient 상속 차단 */
  letter-spacing: -0.3px;
}
/* 닫기(X) 버튼 */
#message-send .tit .close {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--text-secondary); font-size: 20px;
  cursor: pointer; transition: all 0.2s; text-decoration: none;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border);
}
#message-send .tit .close:hover { background: rgba(255,255,255,0.1) !important; color: var(--text-primary); border-color: var(--border-bright); }
/* 팝업 내용 영역 */
#message-send .cont { padding: 20px; background: transparent !important; width: 100%; border-collapse: collapse; }
/* 테이블 th — 항목 라벨 */
#message-send .cont tbody th {
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary) !important; background: transparent !important;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  width: 72px; vertical-align: top;               /* textarea와 위 맞춤 */
}
/* 테이블 td — 입력 영역 */
#message-send .cont tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: transparent !important; color: var(--text-primary) !important;
}
/* input / textarea 공통 기본 스타일 */
#message-send .cont tbody td input,
#message-send .cont tbody td textarea {
  height: 40px;
  background: rgba(255,255,255,0.07) !important;  /* 입력칸 구분 */
  border: 1px solid rgba(0,200,255,0.25) !important; /* 기본 테두리 식별 가능하게 */
  border-radius: 8px; padding: 0 14px;
  font-size: 13px; font-family: var(--font-body);
  color: var(--text-primary) !important;           /* 입력 텍스트 밝게 */
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
  width: 100%;
}
/* textarea 전용 — input height 상속 차단 */
#message-send .cont tbody td textarea {
  height: auto !important;
  min-height: 110px;                               /* 메시지 입력 충분한 공간 */
  padding: 10px 14px;
  resize: vertical;                               /* 세로로만 크기 조절 */
  line-height: 1.6;
}
/* placeholder */
#message-send .cont tbody td input::placeholder,
#message-send .cont tbody td textarea::placeholder {
  color: var(--text-secondary);                   /* 중간 밝기 — 힌트 구분 */
  opacity: 1;                                     /* Firefox 0.54 보정 */
}
/* hover — 포커스 전 반응 */
#message-send .cont tbody td input:hover:not(:focus),
#message-send .cont tbody td textarea:hover:not(:focus) {
  border-color: var(--border-bright) !important;
  background: rgba(255,255,255,0.09) !important;
}
/* focus — 클릭/탭 활성 상태 */
#message-send .cont tbody td input:focus,
#message-send .cont tbody td textarea:focus {
  border-color: var(--accent-cyan) !important;    /* 강한 cyan 테두리 */
  background: rgba(0,200,255,0.08) !important;    /* cyan 틴트 배경 */
  box-shadow: 0 0 0 3px rgba(0,200,255,0.18),     /* 외곽 글로우 링 */
              var(--glow-cyan);
  color: var(--text-primary) !important;
}
/* 안내 텍스트 */
#message-send .cont .tbltxt {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.3px;
}
/* 발송 버튼 영역 — 오른쪽 정렬
   ★ HTML 실제 클래스: .btn.mt10 (기존 .btn-area 가 아님) */
#message-send .btn {
  display: flex !important;
  justify-content: flex-end !important;           /* 오른쪽 정렬 */
  align-items: center; gap: 8px;
  flex-wrap: nowrap;                              /* 버튼 줄바꿈 방지 */
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
/* 발송 버튼 최소 너비 */
#message-send .btn .btn1,
#message-send .btn .btn2,
#message-send .btn .btn3 { flex-shrink: 0; min-width: 80px; }


/* ── 23-11. 메시지 히스토리 .msg-history ── */
.msg-history    { list-style: none; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.msg-history li { padding: 14px 16px; background: rgba(255,255,255,0.03) !important; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-secondary) !important; line-height: 1.7; transition: border-color 0.2s; }
.msg-history li:hover { border-color: var(--border-bright); background: rgba(0,200,255,0.03) !important; }


/* ── 게시판 데이터 없음 #board-nodata ──
   [2026-03 추가] .empty-msg / td[colspan] 와 동일한 이모지 스타일
   3곳 공통 ::before 선언으로 한 번에 관리 */
.empty-msg::before,
table.listtbl tbody td[colspan]::before,
#board-nodata::before {
  content: '📭';
  font-family: initial;                            /* OS 이모지 폰트 — FA 차단 */
  font-size: 28px; line-height: 1;
  opacity: 0.45; filter: grayscale(30%);
}
/* #board-nodata 레이아웃 */
#board-nodata {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dim); text-align: center;
  padding: 28px 0; letter-spacing: .5px;
}


/* ════════════════════════════════════
   [24] 로그인 페이지 — #signin
   ─────────────────────────────────
   구조: #signin
           └── form (최대 600px 중앙 카드)
                 ├── h4 (로그인 제목)
                 ├── span.log-noti (회원가입 유도)
                 ├── fieldset.snsbox (SNS 로그인)
                 ├── p.or (구분선)
                 └── fieldset.inp-wrap (아이디/비번 입력)
                       ├── label + input.inp
                       ├── .tar (자동로그인 + 비번찾기)
                       └── button.btn1 (로그인 버튼)
   ─────────────────────────────────
   SNS 버튼:
     #kakao-login — yellow 계열 포인트
     #naver-login — green 계열 포인트
════════════════════════════════════ */

#signin {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: calc(100vh - var(--header-h) - 160px);
  padding: 60px 20px 80px; position: relative; z-index: 1;
}
/* 폼 카드 */
#signin form {
  width: 100%; max-width: 600px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px;
  padding: 52px 60px 48px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,200,255,0.05);
  position: relative; overflow: hidden;
}
/* 폼 상단 글로우 */
#signin form::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 180px;
  background: radial-gradient(ellipse, rgba(0,200,255,0.08) 0%, transparent 70%);
  filter: blur(28px); pointer-events: none;
}
/* 로그인 제목 — 그라디언트 텍스트 */
#signin h4 {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  background: linear-gradient(90deg, var(--text-primary) 50%, var(--accent-cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -0.5px; margin-bottom: 8px; position: relative; z-index: 1;
}
/* 회원가입 유도 문구 */
.log-noti { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-bottom: 28px; line-height: 1.5; position: relative; z-index: 1; }
.log-noti a       { color: var(--accent-cyan); text-decoration: none; transition: opacity 0.2s; }
.log-noti a:hover { opacity: 0.8; text-decoration: underline; }

/* SNS 로그인 박스 */
.snsbox { border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; background: rgba(255,255,255,0.02); margin-bottom: 20px; position: relative; z-index: 1; }
.snsbox legend { display: none; }
.snsbox h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.snsbox ul { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.snsbox ul li a {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); font-size: 13px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none; transition: all 0.2s;
}
.snsbox ul li a:hover { border-color: var(--border-bright); background: rgba(255,255,255,0.06); color: var(--text-primary); transform: translateY(-1px); }
.snsbox ul li a img { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
/* 카카오 포인트 */
#kakao-login       { border-color: rgba(255,220,0,0.2); }
#kakao-login:hover { border-color: rgba(255,220,0,0.5) !important; background: rgba(255,220,0,0.05) !important; }
/* 네이버 포인트 */
#naver-login       { border-color: rgba(3,199,90,0.2); }
#naver-login:hover { border-color: rgba(3,199,90,0.5) !important; background: rgba(3,199,90,0.05) !important; }

/* OR 구분선 */
.or {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-dim); letter-spacing: 2px; margin-bottom: 20px; position: relative; z-index: 1;
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* 입력 필드 래퍼 */
.inp-wrap { border: none; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; }
.inp-wrap legend { display: none; }
/* 라벨 */
.inp-wrap label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; margin-top: 16px; }
.inp-wrap label:first-of-type { margin-top: 0; }
/* 입력창 */
.inp-wrap .inp {
  width: 100%; height: 46px; background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important; border-radius: 10px;
  padding: 0 16px; font-size: 14px; font-family: var(--font-body);
  color: var(--text-primary) !important; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; box-sizing: border-box;
}
.inp-wrap .inp:focus        { border-color: var(--border-bright) !important; background: rgba(0,200,255,0.04) !important; box-shadow: var(--glow-cyan); }
.inp-wrap .inp::placeholder { color: var(--text-dim); }
/* 자동로그인 + 비밀번호 찾기 */
.inp-wrap .tar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inp-wrap .tar.mb15 { margin-bottom: 20px; }
.inp-wrap .tar label { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary); font-weight: 400; letter-spacing: 0; text-transform: none; margin-right: 120px; cursor: pointer; }
/* 커스텀 체크박스 */
.inp-wrap .tar label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--border-bright); border-radius: 4px; background: transparent !important; cursor: pointer; position: relative; flex-shrink: 0; transition: all 0.15s; vertical-align: middle; }
.inp-wrap .tar label input[type="checkbox"]:checked { background: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important; }
.inp-wrap .tar label input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; color: #000; font-weight: 800; }
/* 비밀번호 찾기 링크 */
.inp-wrap a.forgot       { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); text-decoration: none; transition: color 0.2s; letter-spacing: 0.3px; white-space: nowrap; }
.inp-wrap a.forgot:hover { color: var(--accent-cyan); }
/* 로그인 버튼 */
.inp-wrap .btn1.w100p,
.inp-wrap button.btn1 {
  width: 100% !important; height: 50px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: 0.5px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-cyan), #0066ff) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 4px 20px rgba(0,200,255,0.3); cursor: pointer; transition: all 0.2s; font-family: var(--font-body);
}
.inp-wrap .btn1.w100p:hover,
.inp-wrap button.btn1:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,200,255,0.4); }


/* ════════════════════════════════════
   [25] 마이페이지 — ul.mypagebox / .tblform
   ─────────────────────────────────
   구조: #sub > #content
           ├── ul.mypagebox (4열 요약 카드 그리드)
           │     └── li (카드) > h5 + span.txt + a.btn2
           └── .tblform (상세 정보)
                 ├── h5 (섹션 제목)
                 └── table.table_wrt (정보 테이블)
   ─────────────────────────────────
   ul.mypagebox:
     4열 그리드 → respond.css에서 2열/1열로 축소
     카드별 포인트 색상:
       1번 — cyan  / 2번 — green
       3번 — blue  / 4번 — orange
   ─────────────────────────────────
   table.table_wrt:
     th — 항목명 (왼쪽 고정 너비, bg 약한 cyan)
     td — 값 (나머지 너비, word-break:break-all)
════════════════════════════════════ */

/* z-index 확보 */
#sub > #content .mypagebox,
#sub > #content .tblform { position: relative; z-index: 1; }

/* ── 요약 카드 그리드 ── */
ul.mypagebox {
  display: grid; grid-template-columns: repeat(4,1fr); /* PC: 4열 */
  gap: 16px; list-style: none; margin-top: 8px; margin-bottom: 40px;
}
/* 카드 */
ul.mypagebox > li {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
ul.mypagebox > li:hover { border-color: var(--border-bright); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,200,255,0.08); }
/* 좌상단 글로우 장식 */
ul.mypagebox > li::before { content: ''; position: absolute; top: 0; left: 0; width: 72px; height: 72px; background: linear-gradient(135deg,rgba(0,200,255,0.07) 0%,transparent 60%); border-radius: 14px 0 0 0; pointer-events: none; }
/* 카드별 포인트 색상 */
ul.mypagebox > li:nth-child(1)::before { background: linear-gradient(135deg,rgba(0,200,255,0.08) 0%,transparent 60%); }  /* cyan */
ul.mypagebox > li:nth-child(2)::before { background: linear-gradient(135deg,rgba(0,255,157,0.08) 0%,transparent 60%); }  /* green */
ul.mypagebox > li:nth-child(3)::before { background: linear-gradient(135deg,rgba(106,138,255,0.08) 0%,transparent 60%); } /* blue */
ul.mypagebox > li:nth-child(4)::before { background: linear-gradient(135deg,rgba(255,107,43,0.08) 0%,transparent 60%); } /* orange */
/* 카드 라벨 h5 */
ul.mypagebox > li h5 { font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 1; position: relative; z-index: 1; }
ul.mypagebox > li:nth-child(1) h5 { color: var(--accent-cyan); }
ul.mypagebox > li:nth-child(2) h5 { color: var(--accent-green); }
ul.mypagebox > li:nth-child(3) h5 { color: var(--accent-blue); }
ul.mypagebox > li:nth-child(4) h5 { color: var(--accent-orange); }
/* 수치 텍스트 */
ul.mypagebox > li span.txt { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); line-height: 1.4; flex-grow: 1; position: relative; z-index: 1; }
ul.mypagebox > li span.txt strong { display: initial; font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; letter-spacing: -0.5px; }
ul.mypagebox > li:nth-child(1) span.txt strong { color: var(--text-primary); }
ul.mypagebox > li:nth-child(2) span.txt strong { color: var(--accent-green); }
ul.mypagebox > li:nth-child(3) span.txt strong { color: var(--accent-blue); }
ul.mypagebox > li:nth-child(4) span.txt strong { color: var(--accent-orange); }
/* 카드 내 버튼 */
ul.mypagebox > li a.btn2 {
  font-size: 20px; padding: 6px 12px; gap: 6px; position: relative; z-index: 1;
}
ul.mypagebox > li a.btn2 i { font-size: 10px; transition: transform 0.2s; }
ul.mypagebox > li a.btn2:hover i { transform: translateX(3px); } /* hover 시 화살표 오른쪽 이동 */

/* ── 상세 정보 래퍼 .tblform ── */
.tblform { margin-bottom: 60px; }
/* 섹션 제목 h5 — cyan 왼쪽 라인 */
.tblform h5 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-primary); letter-spacing: -0.2px;
  padding: 9px 14px; margin-bottom: 12px;
  border-left: 3px solid var(--accent-cyan); background: rgba(0,200,255,0.04); border-radius: 0 8px 8px 0;
}
.tblform h5.mt30 { margin-top: 36px; }

/* 정보 테이블 */
table.table_wrt {
  width: 100%; border-collapse: collapse; border-spacing: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  margin-bottom: 16px; font-size: 13.5px; background: var(--bg-card);
}
table.table_wrt tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
table.table_wrt tbody tr:last-child { border-bottom: none; }
table.table_wrt tbody tr:hover { background: rgba(0,200,255,0.03) !important; }
/* th — 항목명 */
table.table_wrt tbody th {
  padding: 14px 20px; background: rgba(0,200,255,0.04) !important;
  color: var(--text-secondary) !important; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  text-align: left; white-space: nowrap; border-right: 1px solid var(--border); vertical-align: middle;
}
/* td — 값 */
table.table_wrt tbody td {
  padding: 14px 20px; background: transparent !important;
  color: var(--text-primary) !important; font-size: 13.5px; line-height: 1.5;
  vertical-align: middle; word-break: break-all;  /* 긴 값 줄바꿈 */
}
/* 버튼 영역 오른쪽 정렬 */
.tblform .btn-wrap { justify-content: flex-end; margin-top: 10px; margin-bottom: 0; }