:root{
  --bg:#070A10;
  --card:#0D1220;
  --line:#1E2A45;
  --text:#EAF1FF;
  --muted:#A7B3CC;
  --accent:#F8C34A;
  --accent2:#7C5CFF;
}

html, body{
  overflow-x: hidden; /* hover 순간 가로 스크롤바 생성 방지 */
}

body{
  background: radial-gradient(1200px 600px at 30% -10%, rgba(124,92,255,0.25), transparent 60%),
              radial-gradient(1000px 500px at 80% 0%, rgba(248,195,74,0.18), transparent 55%),
              var(--bg);
  color: var(--text);
}

a{ color: #CFE2FF; }
a:hover{ color: var(--accent); text-decoration: none; }

.l2-nav{
  background: rgba(5,8,14,0.92);
  border-bottom: 1px solid rgba(30,42,69,0.7);
  backdrop-filter: blur(10px);
  overflow-x: hidden; /* 네비 영역도 클립 */
}
.l2-badge{
  background: linear-gradient(90deg, var(--accent), #ffd36a);
  color:#111;
}

.l2-nav .l2-auth-nav{
  margin-left: 18px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.08);
}

.l2-nav .l2-auth-nav .nav-link{
  font-size: 0.8rem;
  color: #9fb1cf;
  font-weight: 600;
}

.l2-nav .l2-auth-nav .nav-link i{
  color: #86a7d8;
}

.l2-nav .l2-auth-nav .nav-link:hover,
.l2-nav .l2-auth-nav .nav-link:focus{
  color: #d6e4ff;
}

.l2-nav .l2-auth-nav .nav-link:hover i,
.l2-nav .l2-auth-nav .nav-link:focus i{
  color: var(--accent);
}

.l2-hero{
  position: relative;
  background-size: cover;
  background-position: center;
  height: 200px;
  border-bottom: 1px solid rgba(30,42,69,0.7);
}
.l2-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,10,16,0.25), rgba(7,10,16,0.85));
}
.l2-hero-inner{
  position: relative;
  height: 100%;
  display:flex;
  align-items:end;
  padding-bottom: 28px;
}
.l2-hero-sub{ color: var(--muted); letter-spacing: .18em; }
.l2-accent{ color: var(--accent); text-shadow: 0 0 18px rgba(248,195,74,0.25); }
.l2-hero-desc{ color: var(--muted); max-width: 720px; }

.card.l2-card{
  background: linear-gradient(180deg, rgba(13,18,32,0.95), rgba(11,14,26,0.95));
  border: 1px solid rgba(30,42,69,0.85);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  border-radius: 14px;
}
.l2-card .card-header{
  border-bottom: 1px solid rgba(30,42,69,0.7);
  background: rgba(10,14,25,0.6);
}

.l2-muted{ color: var(--muted); }
.l2-line{ border-top:1px solid rgba(30,42,69,0.8); }

.table.l2-table{
  color: var(--text);
}
.table.l2-table thead th{
  border-color: rgba(30,42,69,0.9);
  color: var(--muted);
}
.table.l2-table td, .table.l2-table th{
  border-color: rgba(30,42,69,0.6);
  vertical-align: middle;
}

/* ===== 게시판 페이징(상/하단) 가독성 강화 ===== */
.l2-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.l2-pager .pagination{ margin: 0; }
.l2-pager .page-link{
  background: rgba(10,14,25,0.7);
  border: 1px solid rgba(30,42,69,0.85);
  color: var(--text);
}
.l2-pager .page-link:hover{
  color: #fff;
  border-color: rgba(248,195,74,0.75);
}
.l2-pager .page-item.active .page-link{
  background: linear-gradient(90deg, rgba(124,92,255,0.9), rgba(248,195,74,0.9));
  color:#111;
  border-color: transparent;
}
.l2-pager .page-item.disabled .page-link{
  color: rgba(167,179,204,0.6);
  background: rgba(10,14,25,0.35);
}
.l2-pager .l2-jump{
  gap: 8px;
}
.l2-pager .l2-jump .form-control{
  width: 90px;
}

/* prevent author/date wrapping */
.l2-rowmeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.l2-rowmeta .meta-right{
  white-space: nowrap;
  flex-shrink:0;
  color: var(--muted);
  font-size: 12px;
}
.l2-rowmeta .meta-right span{ margin-left: 10px; }

.badge-highlight{
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  color:#10131a;
  font-weight: 800;
}

.l2-footer{
  border-top: 1px solid rgba(30,42,69,0.6);
  background: rgba(5,8,14,0.65);
}

.form-control, .custom-select{
  background: rgba(10,14,25,0.7);
  border: 1px solid rgba(30,42,69,0.9);
  color: var(--text);
}
.form-control:focus{
  background: rgba(10,14,25,0.85);
  color: var(--text);
  border-color: rgba(248,195,74,0.9);
  box-shadow: 0 0 0 .2rem rgba(248,195,74,0.12);
}

.btn-l2{
  background: linear-gradient(90deg, rgba(248,195,74,0.95), rgba(255,211,106,0.95));
  color:#0b0b12;
  border:0;
  font-weight: 800;
}
.btn-l2:hover{ filter: brightness(1.05); }

.btn-outline-l2{
  border: 1px solid rgba(248,195,74,0.9);
  color: var(--accent);
}
.btn-outline-l2:hover{
  background: rgba(248,195,74,0.12);
  color: #fff;
}

.l2-post-content img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* =========================
   Top nav: Blur + Glow Hover
   (scale 제거로 hover 스크롤바 발생 방지)
   ========================= */
.l2-nav .navbar-nav .nav-link{
  position: relative;
  border-radius: 12px;
  padding: .55rem .85rem;
  transition: transform .14s ease, color .14s ease, text-shadow .14s ease;
  letter-spacing: .01em;
}

/* Blur "pill" behind text */
.l2-nav .navbar-nav .nav-link::before{
  content:"";
  position:absolute;
  inset: 7px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .16s ease;
  pointer-events:none;
}

/* subtle border glow layer */
.l2-nav .navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  inset: 7px 8px;
  border-radius: 14px;
  border: 1px solid rgba(248,195,74,0.0);
  box-shadow: 0 0 0 rgba(248,195,74,0.0);
  opacity: 0;
  transition: opacity .16s ease, border-color .16s ease, box-shadow .16s ease;
  pointer-events:none;
}

.l2-nav .navbar-nav .nav-link:hover{
  color: var(--accent);
  transform: translateY(-1px) scale(1) !important; /* ★ scale 제거 */
  text-shadow:
    0 0 10px rgba(248,195,74,0.35),
    0 0 18px rgba(124,92,255,0.18);
}

.l2-nav .navbar-nav .nav-link:hover::before{ opacity: 1; }

.l2-nav .navbar-nav .nav-link:hover::after{
  opacity: 1;
  border-color: rgba(248,195,74,0.35);
  box-shadow:
    0 0 18px rgba(248,195,74,0.22),
    0 0 26px rgba(124,92,255,0.16);
}

/* Active menu highlight */
.l2-nav .navbar-nav .nav-item.active .nav-link{
  color: var(--accent);
  text-shadow: 0 0 10px rgba(248,195,74,0.25);
}
.l2-nav .navbar-nav .nav-item.active .nav-link::before{ opacity: .70; }
.l2-nav .navbar-nav .nav-item.active .nav-link::after{
  opacity: 1;
  border-color: rgba(248,195,74,0.22);
  box-shadow: 0 0 14px rgba(248,195,74,0.16);
}

/* Mobile: keep it clean */
@media (max-width: 991.98px){
  .l2-nav .navbar-nav .nav-link:hover{
    transform: none;
  }
}

/* =========================
   Navbar text break + scroll (Final)
   - 한글 쪼개짐 방지
   - 메뉴 줄바꿈 방지
   - 메뉴가 많아도 가로 스크롤 (스크롤바 숨김)
   ========================= */
.l2-nav, .l2-nav *{
  word-break: keep-all;
}

.l2-nav .nav-link{
  white-space: nowrap;
}

.l2-nav .l2-nav-scroll{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge legacy */
}

.l2-nav .l2-nav-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;             /* Chrome/Safari/Edge */
}

/* 아주 좁은 화면(토글 메뉴)에서는 자연 줄바꿈 허용 */
@media (max-width: 575.98px){
  .l2-nav .navbar-nav .nav-link{
    white-space: normal;
    word-break: keep-all;
  }
  .l2-nav .l2-nav-scroll{
    overflow-x: visible;
  }
}

/* =====================================================
   Navbar: 창을 줄여도 메뉴가 "사라지지" 않도록
   - Bootstrap collapse(햄버거) 대신 자동 줄바꿈(아래로 밀림)
   - 적용 대상: navbar-expand-xl 구간(<1200px)
   ===================================================== */
@media (max-width: 1199.98px){
  /* 토글(햄버거) 숨김: 메뉴를 항상 노출 */
  .navbar.navbar-expand-xl .navbar-toggler{ display:none !important; }

  /* collapse 상태여도 항상 펼쳐서 표시 */
  .navbar.navbar-expand-xl .navbar-collapse,
  .navbar.navbar-expand-xl .navbar-collapse.collapse,
  .navbar.navbar-expand-xl .navbar-collapse.collapsing{
    display:flex !important;
    flex-direction: column;      /* LEFT(게시판) / RIGHT(계정) 를 아래로 배치 */
    align-items: stretch;
    height: auto !important;
    overflow: visible !important;
  }

  /* 두 개의 UL이 각각 한 줄 블록을 차지하면서, 내부는 자동 줄바꿈 */
  .navbar.navbar-expand-xl .navbar-collapse > .navbar-nav{
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* 좌측 메뉴는 스크롤 방식 해제하고 줄바꿈 */
  .l2-nav .l2-nav-scroll{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  /* 우측(로그인/관리자 등)은 우측정렬, 화면이 더 좁으면 자연스럽게 다음 줄로 */
  .navbar.navbar-expand-xl .navbar-collapse > .navbar-nav:last-child{
    justify-content: flex-end;
  }

  .l2-nav .l2-auth-nav{
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: 6px;
  }
}

/* =========================================
   Simple table style (Home / Board list)
   - 구분선 최소화: 헤더 하단 1줄만
   ========================================= */

/* 테이블 전체 셀 구분선 제거 */
.table.l2-table td,
.table.l2-table th{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 헤더는 하단 1줄만 남김 */
.table.l2-table thead th{
  border-bottom: 1px solid rgba(30,42,69,0.55) !important;
}

/* 행 사이 간격을 여유 있게 (선 대신 여백으로 구분) */
.table.l2-table tbody td{
  padding-top: .65rem;
  padding-bottom: .65rem;
}

/* 행 hover는 은은하게만 */
.table.l2-table tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

/* 카드 내부에서 보이는 추가 구분선(필요시) 더 약하게 */
.card.l2-card .card-header{
  border-bottom: 1px solid rgba(30,42,69,0.45);
}

/* Home 상단 퀵링크(좌측) + 우측 버튼 가로정렬 / 스크롤바 방지 */
.l2-quicklinks{
  display: flex;
  flex-wrap: wrap;      /* 화면 좁으면 자동 줄바꿈 */
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.l2-quicklinks .btn{
  white-space: nowrap;  /* 버튼 내부 줄바꿈 방지 */
}

.l2-top-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;      /* 모바일에서 자연스럽게 */
  justify-content: flex-end;
}

/* 전체 가로 스크롤 방지 */
html, body { overflow-x: hidden; }

/* 게시판 리스트 테이블: 가로 스크롤 대신 말줄임 */
.l2-table{
  width: 100%;
  table-layout: fixed;
}
.l2-table th, .l2-table td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 제목 링크가 길어도 칸을 밀지 않게 */
.l2-table td a{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* table-responsive가 불필요하게 스크롤바 만드는 경우 차단 */
.table-responsive{
  overflow-x: hidden;
}

/* ================================
   관리자 > 회원관리(/admin/users)
   - IP가 길어도 줄바꿈 없이 전체 표시
   - 필요 시 가로 스크롤로 확인
   ================================ */
.table-responsive.l2-table-scroll{
  overflow-x: auto !important;
}
.table.l2-table.l2-admin-users{
  table-layout: auto !important;
}
.table.l2-table.l2-admin-users th,
.table.l2-table.l2-admin-users td{
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: .18rem .28rem !important;
  font-size: 11px;
  line-height: 1.2;
}
.table.l2-table.l2-admin-users td.l2-ip{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: -0.2px;
}

/* 회원관리(/admin/users) 카드 내부 여백 축소(공백 과다 개선) */
.l2-admin-users-wrap .card-body{
  padding: .75rem !important;
}
.l2-admin-users-wrap .card-header{
  padding: .75rem 1rem !important;
}


/* ===== Footer (High Quality) ===== */
.l2-footer{
  position: relative;
  background: rgba(8,10,20,.65);
  border-top: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

.l2-footer-divider{
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    rgba(0,0,0,0),
    rgba(255,215,0,.65),
    rgba(0,0,0,0)
  );
  box-shadow: 0 0 18px rgba(255,215,0,.22);
}

.l2-footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}

.l2-footer-logo{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: rgba(255,215,0,.12);
  border: 1px solid rgba(255,215,0,.25);
  box-shadow: 0 0 18px rgba(255,215,0,.12);
}

.l2-footer-title{
  font-size: 16px;
  color: rgba(255,255,255,.92);
}

.l2-footer-desc{
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
}

.l2-footer-accent{
  color: rgba(255,215,0,.9);
  font-weight: 800;
}

.l2-footer-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  font-size: 12px;
}

.l2-footer-links a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
  transition: .15s ease;
}

.l2-footer-links a:hover{
  color: rgba(255,215,0,.95);
  text-decoration:none;
}

.l2-footer-links .dot{
  color: rgba(255,255,255,.35);
}

.l2-footer-copy{
  text-align:right;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* 모바일 정렬 보정 */
@media (max-width: 767.98px){
  .l2-footer-links{ justify-content:flex-start; }
  .l2-footer-copy{ text-align:left; }
}

.l2-logo{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255,215,0,.25));
}

.l2-footer-logo-img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255,215,0,.25));
}

/* =========================
   Home list title ellipsis fix (FINAL)
   - 제목은 가능한 한 길게 표시
   - 넘칠 때만 제목 끝에 ... 처리
   - 배지/댓글수/작성자/날짜는 절대 숨지 않음
   ========================= */

.l2-rowmeta-home{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.l2-rowmeta-home .meta-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 1 auto;
  min-width:0;               /* ✅ flex 환경에서 ellipsis 필수 */
}

.l2-rowmeta-home .meta-right{
  flex: 0 0 auto;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
}

/* 제목 링크는 남은 폭을 최대한 사용 */
.l2-title-link{
  flex: 1 1 auto;
  min-width:0;
  max-width:100%;
  display:block;
  color: #CFE2FF;
}

/* ✅ 말줄임은 "제목 텍스트"에만 적용 */
.l2-title-text{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* 댓글수는 고정(제목 말줄임에 같이 묻지 않게) */
.l2-rowmeta-home .l2-comment-count{
  flex: 0 0 auto;
  white-space:nowrap;
  font-size:12px;
  color: var(--muted);
}

/* 홈 리스트 행 높이(위아래 간격) 조금 더 타이트하게 */
.l2-home-table .l2-home-cell{
  padding: 6px 10px !important;
}

.l2-home-table .l2-home-row td{
  vertical-align: middle;
}

/* =========================
   Home list (FINAL)
   - 제목은 10자 제한(PHP) + ... 표시
   - 작성자/일자(meta-right)는 절대 밀리지 않음
   - 줄 간격 타이트
   ========================= */
.l2-rowmeta-home{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.l2-rowmeta-home .meta-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 1 auto;
  min-width:0;
}

.l2-rowmeta-home .meta-right{
  flex: 0 0 auto;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color: rgba(255,255,255,.65);
}

.l2-title-link{
  flex: 1 1 auto;
  min-width:0;
  display:block;
  max-width:100%;
}

.l2-title-text{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.l2-rowmeta-home .l2-comment-count{
  flex: 0 0 auto;
  white-space:nowrap;
  font-size:12px;
  color: rgba(255,255,255,.65);
}

.l2-home-table .l2-home-cell{
  padding: 6px 10px !important;
}

.l2-home-table .l2-home-row td{
  vertical-align: middle;
}

/* 퀵 링크 바: 넓으면 한줄, 좁아지면 자동 줄바꿈 */
.l2-quickbar{
  display:flex;
  flex-wrap: wrap;            /* ✅ 줄바꿈 허용 */
  align-items:center;
  gap:8px;
  min-width:0;

  /* ✅ 가로 스크롤 제거 */
  overflow: visible;
  padding-bottom:0;
}

/* 버튼 내부 줄바꿈 방지 + 줄바꿈 시에도 깔끔하게 */
.l2-qbtn{
  white-space:nowrap;
  flex: 0 0 auto;
}

/* (혹시 이미지 아이콘 섞여 있을 때 대비) */
.l2-qbtn img{
  width:16px;
  height:16px;
  object-fit:contain;
  margin-right:6px;
  vertical-align:middle;
}

/* 홈 메인 게시판 리스트 제목 글자 크기 */
.l2-rowmeta-home .l2-title-text { font-size: 13px; }
/* 홈 메인 오른쪽 작성 날짜 크기 */
.l2-rowmeta-home .meta-right { font-size: 10px; }


/* =========================
   3차 상단 메뉴 / 포인트 상점 가독성 보정
   ========================= */
.l2-nav .navbar-brand span{
  font-size: clamp(1.1rem, 1.15vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.l2-nav .navbar-nav .nav-link{
  font-size: clamp(12.5px, 0.9vw, 16.5px);
  font-weight: 900;
  letter-spacing: -0.02em;
  padding: .45rem .38rem;
  color: #f4f4f4;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    1px 0 0 rgba(0,0,0,.95),
   -1px 0 0 rgba(0,0,0,.95),
    0 -1px 0 rgba(0,0,0,.95),
    1px 1px 0 rgba(0,0,0,.85),
   -1px 1px 0 rgba(0,0,0,.85);
}

.l2-nav .navbar-nav .nav-link::before,
.l2-nav .navbar-nav .nav-link::after{
  display:none !important;
}

.l2-nav .navbar-nav .nav-link:hover,
.l2-nav .navbar-nav .nav-item.active .nav-link{
  color: #ffd15b;
  text-shadow:
    0 1px 0 rgba(0,0,0,.98),
    1px 0 0 rgba(0,0,0,.98),
   -1px 0 0 rgba(0,0,0,.98),
    0 -1px 0 rgba(0,0,0,.98),
    1px 1px 0 rgba(0,0,0,.88),
   -1px 1px 0 rgba(0,0,0,.88),
    0 0 10px rgba(255,184,52,.08);
}

.l2-nav .navbar-nav,
.l2-nav .navbar-collapse,
.l2-nav .container{
  min-width: 0;
}

.l2-nav .navbar-nav:last-child .nav-link{
  font-size: clamp(11.5px, 0.82vw, 15px);
}

@media (max-width: 1199.98px){
  .navbar.navbar-expand-xl .navbar-collapse,
  .navbar.navbar-expand-xl .navbar-collapse.collapse,
  .navbar.navbar-expand-xl .navbar-collapse.collapsing{
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .navbar.navbar-expand-xl .navbar-collapse > .navbar-nav{
    width: auto;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .l2-nav .l2-nav-scroll{
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  .navbar.navbar-expand-xl .navbar-collapse > .navbar-nav:last-child{
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: 12px;
  }
}

@media (max-width: 1400px){
  .l2-nav .navbar-nav .nav-link{ font-size: 15px; }
}
@media (max-width: 1280px){
  .l2-nav .navbar-nav .nav-link{ font-size: 14px; padding: .45rem .28rem; }
  .l2-nav .navbar-brand span{ font-size: 1.35rem; }
}
@media (max-width: 1160px){
  .l2-nav .navbar-nav .nav-link{ font-size: 13px; padding: .42rem .2rem; }
  .l2-nav .navbar-brand span{ font-size: 1.2rem; }
  .l2-logo{ width: 24px; height: 24px; }
}
@media (max-width: 1040px){
  .l2-nav .navbar-nav .nav-link{ font-size: 12px; padding: .4rem .16rem; }
  .l2-nav .navbar-nav:last-child .nav-link{ font-size: 11.5px; }
}

.l2-pointshop-btn{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,#ffd56b 0%,#ffbe4d 100%) !important;
  border: 1px solid rgba(255,199,87,.92) !important;
  color: #1a1205 !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.03em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.4),
    0 0 8px rgba(255,211,107,.18);
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.l2-pointshop-btn i{
  font-size: 16px;
  margin-right: 8px !important;
}

.l2-pointshop-btn:hover{
  color: #120d04 !important;
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(0,0,0,.28),
    0 0 16px rgba(255,197,79,.22),
    inset 0 1px 0 rgba(255,255,255,.48);
}

.l2-pointshop-btn .l2-new-badge{
  position:absolute;
  top:-10px;
  left:-10px;
  background:#ff4d5a;
  color:#fff;
  font-size:10px;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:.04em;
  transform:rotate(-8deg);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

@media (max-width: 991.98px){
  .l2-pointshop-btn{
    font-size: 15px !important;
    min-height: 40px;
    padding: 0 15px !important;
  }
}


/* =========================
   Top nav hover sparkle patch
   - 마우스 오버 시 별빛이 살짝 반짝이는 효과
   - 기존 다크/골드 톤 유지
   ========================= */
.l2-nav .navbar-nav .nav-link{
  overflow: hidden;
  isolation: isolate;
}

.l2-nav .navbar-nav .nav-link::before{
  inset: 5px 6px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.95) 0 1.2px, rgba(255,255,255,0) 2.6px),
    radial-gradient(circle at 78% 28%, rgba(255,230,150,.95) 0 1.1px, rgba(255,230,150,0) 2.4px),
    radial-gradient(circle at 66% 72%, rgba(162,220,255,.95) 0 1.05px, rgba(162,220,255,0) 2.3px),
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.75) 0 0.9px, rgba(255,255,255,0) 2px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(.15px) drop-shadow(0 0 5px rgba(255,235,170,.30));
  transform: translateY(2px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  animation: navSparkleTwinkle 1.25s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

.l2-nav .navbar-nav .nav-link::after{
  inset: 5px 6px;
  border-radius: 14px;
  border: 1px solid rgba(248,195,74,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 rgba(248,195,74,0),
    0 0 0 rgba(255,255,255,0);
  opacity: 0;
  transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
  pointer-events:none;
}

.l2-nav .navbar-nav .nav-link:hover{
  color: #f5d985;
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 1px 0 rgba(0,0,0,.85),
    0 0 8px rgba(255,223,132,.22);
}

.l2-nav .navbar-nav .nav-link:hover::before{
  opacity: .92;
  transform: translateY(0) scale(1);
}

.l2-nav .navbar-nav .nav-link:hover::after{
  opacity: 1;
  border-color: rgba(248,195,74,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 10px rgba(248,195,74,.14),
    0 0 18px rgba(143,197,255,.08);
}

.l2-nav .navbar-nav .nav-item.active .nav-link::before,
.l2-nav .navbar-nav .nav-item.active .nav-link::after{
  animation: none;
}

@keyframes navSparkleTwinkle{
  0%{
    filter: blur(.15px) drop-shadow(0 0 4px rgba(255,235,170,.20));
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  50%{
    filter: blur(.15px) drop-shadow(0 0 7px rgba(255,235,170,.34));
    background-position:
      1px -1px,
      -1px 1px,
      0 -1px,
      1px 0,
      0 0;
  }
  100%{
    filter: blur(.15px) drop-shadow(0 0 5px rgba(180,230,255,.26));
    background-position:
      -1px 1px,
      1px -1px,
      1px 0,
      -1px -1px,
      0 0;
  }
}

@media (max-width: 991.98px){
  .l2-nav .navbar-nav .nav-link::before,
  .l2-nav .navbar-nav .nav-link::after{
    animation: none;
  }
}

/* =====================================================
   GLOBAL 125% SCREEN SCALE (FINAL OVERRIDE)
   - 메인 화면 전체를 브라우저 125%처럼 보이게 함
   - 요소별 확대가 아니라 사이트 전체 체감 배율 적용
   ===================================================== */
html{
  font-size: 100%;
}

body{
  zoom: 1.25;
}

/* 너무 좁아질수록 메뉴가 사라지지 않게 상단만 별도 축소 */
.l2-nav .navbar-brand span{
  font-size: clamp(1rem, 1.02vw, 1.35rem) !important;
}

.l2-nav .navbar-nav .nav-link{
  font-size: clamp(11px, 0.72vw, 14px) !important;
  padding: .36rem .22rem !important;
}

.l2-nav .navbar-nav:last-child .nav-link{
  font-size: clamp(10.5px, 0.68vw, 13px) !important;
}

.l2-nav .l2-nav-scroll,
.navbar.navbar-expand-xl .navbar-collapse > .navbar-nav{
  min-width: 0;
}

@media (max-width: 1400px){
  body{ zoom: 1.2; }
}

@media (max-width: 1280px){
  body{ zoom: 1.16; }
  .l2-nav .navbar-nav .nav-link{
    font-size: 12px !important;
    padding: .32rem .16rem !important;
  }
  .l2-nav .navbar-brand span{
    font-size: 1.08rem !important;
  }
}

@media (max-width: 1100px){
  body{ zoom: 1.1; }
  .l2-nav .navbar-nav .nav-link{
    font-size: 11px !important;
    padding: .28rem .12rem !important;
  }
  .l2-nav .navbar-nav:last-child .nav-link{
    font-size: 10.5px !important;
  }
  .l2-nav .navbar-brand span{
    font-size: 1rem !important;
  }
}

@media (max-width: 991.98px){
  body{ zoom: 1; }
}

/* ================================
   Top main category menu font upscale
   - 전체 125% 적용은 유지
   - 상단 메인 메뉴만 기본보다 더 크게
   ================================ */
.l2-nav .navbar-nav .nav-link{
  font-size: 1.08rem;
  font-weight: 700;
}

.l2-nav .navbar-brand{
  font-size: 1.14rem;
}

@media (max-width: 1399.98px){
  .l2-nav .navbar-nav .nav-link{
    font-size: 1.02rem;
  }
}

@media (max-width: 1199.98px){
  .l2-nav .navbar-nav .nav-link{
    font-size: .98rem;
    padding: .5rem .75rem;
  }
}

@media (max-width: 991.98px){
  .l2-nav .navbar-nav .nav-link{
    font-size: .94rem;
    padding: .46rem .64rem;
  }
}

@media (max-width: 767.98px){
  .l2-nav .navbar-nav .nav-link{
    font-size: .90rem;
    padding: .42rem .56rem;
  }
}


/* ================================
   Comment area typography tuning
   - 댓글 영역 폰트를 추가로 더 축소
   ================================ */
.l2-comments{
  font-size: .84rem;
}

.l2-comments .l2-comments-title{
  font-size: .9rem;
  line-height: 1.4;
}

.l2-comments .list-group-item > .d-flex:first-child,
.l2-comments .l2-muted.small,
.l2-comments .badge,
.l2-comments .small{
  font-size: .74rem;
}

.l2-comments .list-group-item{
  line-height: 1.5;
}

.l2-comments .list-group-item > .mt-2,
.l2-comments .list-group-item > .mt-2 *{
  font-size: .82rem;
}

.l2-comments textarea.form-control,
.l2-comments .form-control,
.l2-comments .btn,
.l2-comments button{
  font-size: .8rem;
}


/* ================================
   2026-03-28 typography rebalance
   - 상단 카테고리 메뉴는 조금 더 크게
   - 홈 메인 본문은 상단 퀵버튼(파워링크 느낌 영역) 제외 후 약 10% 축소
   - 게시물 작성/본문 글 크기 약 10% 축소
   ================================ */

/* 1) 상단 카테고리 메뉴(좌측 게시판 메뉴) 살짝 확대 */
.l2-nav .l2-nav-scroll .nav-link{
  font-size: 1.14rem !important;
  padding: .42rem .46rem !important;
}

/* 우측 로그인/관리 메뉴는 비례만 맞추고 과도하게 커지지 않게 유지 */
.l2-nav .navbar-nav:last-child .nav-link{
  font-size: 1.01rem !important;
}

@media (max-width: 1399.98px){
  .l2-nav .l2-nav-scroll .nav-link{
    font-size: 1.08rem !important;
    padding: .4rem .4rem !important;
  }
}

@media (max-width: 1199.98px){
  .l2-nav .l2-nav-scroll .nav-link{
    font-size: 1.02rem !important;
    padding: .38rem .32rem !important;
  }
}

@media (max-width: 991.98px){
  .l2-nav .l2-nav-scroll .nav-link{
    font-size: .98rem !important;
    padding: .44rem .52rem !important;
  }
}

@media (max-width: 767.98px){
  .l2-nav .l2-nav-scroll .nav-link{
    font-size: .94rem !important;
    padding: .4rem .48rem !important;
  }
}

/* 2) 홈 메인 본문 10% 축소 (상단 퀵바/포인트상점 버튼 제외) */
.l2-home-table,
.l2-home-table tbody td,
.l2-home-table .l2-title-link,
.l2-home-table .l2-comment-count,
.l2-home-table .badge,
.l2-home-table .meta-left,
.l2-home-table .meta-right{
  font-size: 90% !important;
}

.l2-rowmeta-home .l2-title-text{
  font-size: 12px !important;
}

.l2-rowmeta-home .meta-right{
  font-size: 9px !important;
}

/* 3) 게시물 본문 10% 축소 */
.l2-post-content{
  font-size: .9rem !important;
  line-height: 1.72;
}

.l2-post-content p,
.l2-post-content div,
.l2-post-content span,
.l2-post-content li,
.l2-post-content td,
.l2-post-content th,
.l2-post-content blockquote,
.l2-post-content pre,
.l2-post-content code{
  font-size: inherit;
}

/* 4) 게시물 작성/수정 영역 10% 축소 */
input[name="title"][maxlength="120"],
textarea.editor,
.note-editor,
.note-editor .note-editable,
.note-editor .note-placeholder,
.note-editor .note-toolbar,
.note-editor .dropdown-toggle,
.note-editor .note-btn,
.note-editor .note-status-output,
.note-editor .note-modal,
.note-editor .note-input,
.note-editor .note-form-label{
  font-size: .9rem !important;
}

.note-editor .note-editable{
  line-height: 1.68;
}

.note-editor .note-editable p,
.note-editor .note-editable div{
  margin: 0;
}

.l2-post-content p{
  margin: 0;
}

.l2-post-content br{
  content: '';
}


/* ==================================================
   Global fixed top category bar
   - keep header always visible on all pages
   ================================================== */
:root{
  --l2-fixed-nav-height: 88px;
}

body{
  padding-top: var(--l2-fixed-nav-height);
}

.l2-nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1035;
}

.l2-hero{
  margin-top: 0;
}

@media (max-width: 1199.98px){
  :root{
    --l2-fixed-nav-height: 78px;
  }
}


/* =========================================
   Board list compact tuning
   - 카테고리별 게시판 목록만 선택적으로 축소
   ========================================= */
.l2-board-list-wrap .l2-board-list-table{
  font-size: .92rem;
}

.l2-board-list-wrap .l2-board-list-table thead th{
  font-size: .78rem;
  letter-spacing: -.01em;
  padding-top: .46rem;
  padding-bottom: .46rem;
}

.l2-board-list-wrap .l2-board-list-table tbody td{
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
  font-size: .86rem;
  line-height: 1.22;
}

.l2-board-list-wrap .l2-board-title-link{
  font-size: .9rem;
  line-height: 1.2;
}

.l2-board-list-wrap .badge-highlight{
  font-size: .68rem;
  padding: .28em .5em;
  vertical-align: middle;
}

.l2-board-list-wrap .l2-comment-count{
  font-size: .78rem;
}

@media (max-width: 767.98px){
  .l2-board-list-wrap .l2-board-list-table thead th{
    font-size: .72rem;
  }

  .l2-board-list-wrap .l2-board-list-table tbody td{
    font-size: .8rem;
  }

  .l2-board-list-wrap .l2-board-title-link{
    font-size: .84rem;
  }
}


/* =========================
   2026-04-08 board/list polish
   - 메인 제목 길이 확장 + 줄바꿈 방지
   - 새글 표시를 제목 뒤로 정렬
   - 게시판 목록/상세에 파워링크 및 하위게시물 목록 공통 스타일
   ========================= */
.l2-home-table,
.l2-home-table tbody td,
.l2-home-table .l2-title-link,
.l2-home-table .l2-comment-count,
.l2-home-table .badge,
.l2-home-table .meta-left,
.l2-home-table .meta-right{
  font-size: 90% !important;
}

.l2-rowmeta-home{
  gap:10px;
}

.l2-rowmeta-home .meta-left{
  gap:6px;
}

.l2-rowmeta-home .meta-right{
  gap:8px;
}

.l2-rowmeta-home .badge{
  flex: 0 0 auto;
  white-space: nowrap;
}

.l2-rowmeta-home .l2-title-link{
  min-width: 0;
  flex: 1 1 auto;
}

.l2-rowmeta-home .l2-title-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l2-home-new-badge,
.l2-board-new-badge{
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.l2-powerlinks-card .card-body{
  gap: 12px;
}

.l2-powerlink-right{
  flex: 0 0 auto;
}

.l2-board-sublist-table tbody td{
  padding-top: .56rem !important;
  padding-bottom: .56rem !important;
  vertical-align: middle;
}

.l2-board-sublist-table .l2-board-title-link{
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

@media (max-width: 991.98px){
  .l2-powerlinks-card .card-body{
    align-items: stretch !important;
  }

  .l2-powerlink-right{
    width: 100%;
    justify-content: flex-end;
  }
}

/* =========================================================
   메인 상단 배너 반응형 크기 보정
   - 전체 브라우저 폭으로 과하게 늘어나던 배너를 본문 폭에 맞춰 정리
   - 화면 크기에 따라 높이/여백/텍스트 크기 자동 조절
   ========================================================= */
.l2-hero{
  width:min(1320px, calc(100% - 32px));
  height:clamp(150px, 15.5vw, 230px);
  margin:16px auto 0;
  overflow:hidden;
  border:1px solid rgba(30,42,69,0.82);
  border-radius:18px;
  background-size:cover;
  background-position:center center;
  box-shadow:0 18px 46px rgba(0,0,0,0.34);
}

.l2-hero::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03), inset 0 -42px 80px rgba(0,0,0,0.35);
}

.l2-hero-overlay{
  background:
    linear-gradient(90deg, rgba(7,10,16,0.70), rgba(7,10,16,0.30) 48%, rgba(7,10,16,0.58)),
    linear-gradient(180deg, rgba(7,10,16,0.08), rgba(7,10,16,0.78));
}

.l2-hero-inner{
  padding-bottom:clamp(18px, 2.2vw, 30px);
}

.l2-hero-title .display-4{
  font-size:clamp(30px, 3.25vw, 56px);
  line-height:1.05;
  letter-spacing:-0.035em;
}

.l2-hero-sub{
  font-size:clamp(11px, .82vw, 13px);
}

.l2-hero-desc{
  font-size:clamp(13px, .95vw, 16px);
  max-width:min(720px, 78vw);
}

@media (min-width:1600px){
  .l2-hero{
    width:min(1320px, calc(100% - 48px));
    height:220px;
  }
}

@media (max-width:991.98px){
  .l2-hero{
    width:calc(100% - 24px);
    height:clamp(135px, 22vw, 180px);
    margin-top:12px;
    border-radius:16px;
    background-position:center top;
  }

  .l2-hero-inner{
    padding-bottom:18px;
  }

  .l2-hero-title .display-4{
    font-size:clamp(26px, 5vw, 40px);
  }
}

@media (max-width:575.98px){
  .l2-hero{
    width:calc(100% - 16px);
    height:128px;
    margin-top:8px;
    border-radius:14px;
  }

  .l2-hero-inner{
    align-items:center;
    padding-bottom:0;
  }

  .l2-hero-title .display-4{
    font-size:24px;
    line-height:1.08;
  }

  .l2-hero-desc{
    display:none;
  }
}

/* =========================================================
   메인 상단 배너 원본 비율 유지 보정
   - background-size: cover 로 인해 이미지가 잘리던 문제 수정
   - 실제 hero.jpg 원본 비율 1146x246 유지
   ========================================================= */
.l2-hero{
  width:min(1320px, calc(100% - 32px));
  aspect-ratio:1146 / 246;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:16px auto 0;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#080c14;
  overflow:hidden;
}

.l2-hero-inner{
  height:100%;
}

@media (max-width:991.98px){
  .l2-hero{
    width:calc(100% - 24px);
    aspect-ratio:1146 / 246;
    height:auto !important;
    margin-top:12px;
  }
}

@media (max-width:575.98px){
  .l2-hero{
    width:calc(100% - 16px);
    aspect-ratio:1146 / 246;
    height:auto !important;
    margin-top:8px;
  }

  .l2-hero-title .display-4{
    font-size:clamp(18px, 6vw, 24px);
  }

  .l2-hero-sub{
    font-size:10px;
  }

  .l2-hero-desc{
    display:none;
  }
}

/* =========================================================
   메인 상단 배너 여백/정렬 최종 보정
   - 원본 이미지 비율은 유지
   - 좌우 빈 여백을 줄이고 본문 영역과 자연스럽게 정렬
   - 상단 메뉴와 배너, 배너와 카테고리 사이 간격 축소
   ========================================================= */
.l2-hero{
  width:min(1360px, calc(100% - 24px));
  aspect-ratio:1146 / 246;
  height:auto !important;
  margin:8px auto 0 !important;
  border-radius:14px;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#080c14;
}

.l2-hero-inner{
  height:100%;
  padding-bottom:clamp(14px, 1.7vw, 24px);
}

.l2-hero-title .display-4{
  font-size:clamp(30px, 3.1vw, 52px);
}

.l2-hero-desc{
  margin-top:6px !important;
}

.container.mt-4{
  margin-top:1rem !important;
}

.l2-hero + .container,
header.l2-hero + .container{
  margin-top:1rem !important;
}

.l2-hero + .container .col-12.mb-3{
  margin-bottom:1rem !important;
}

.l2-quickbar{
  gap:8px;
}

.l2-quickbar + .d-flex,
.l2-card .card-body > .d-flex{
  row-gap:8px;
}

@media (min-width:1400px){
  .l2-hero,
  .container{
    max-width:1360px;
  }
}

@media (max-width:991.98px){
  .l2-hero{
    width:calc(100% - 18px);
    margin-top:8px !important;
    border-radius:13px;
  }

  .container.mt-4{
    margin-top:.75rem !important;
  }

  .l2-hero + .container,
  header.l2-hero + .container{
    margin-top:.75rem !important;
  }
}

@media (max-width:575.98px){
  .l2-hero{
    width:calc(100% - 12px);
    margin-top:6px !important;
    border-radius:12px;
  }

  .l2-hero-inner{
    padding-bottom:0;
  }

  .container.mt-4{
    margin-top:.6rem !important;
  }
}


/* =========================================================
   2026-05-10 요청 반영 최종 보정
   - 메인 배너 세로 약 10% 축소
   - 상단 카테고리와 배너 사이 여백 축소
   - 메인 배너 문구 은은한 반짝임
   - 게시판 목록/상세 하단 목록 글자 크기 추가 축소
   ========================================================= */
:root{
  --l2-fixed-nav-height: 68px;
}

@media (max-width: 1199.98px){
  :root{
    --l2-fixed-nav-height: 66px;
  }
}

.l2-hero{
  aspect-ratio: 1146 / 221 !important;
  margin-top: 4px !important;
}

.l2-hero + .container,
header.l2-hero + .container{
  margin-top: .55rem !important;
}

.l2-hero-inner{
  padding-bottom: clamp(10px, 1.35vw, 18px) !important;
}

.l2-hero-title .display-4{
  font-size: clamp(24px, 2.55vw, 43px) !important;
  line-height: 1.04;
}

.l2-hero-sub{
  font-size: clamp(10px, .74vw, 12px) !important;
}

.l2-hero-desc{
  font-size: clamp(12px, .82vw, 14px) !important;
  margin-top: 4px !important;
}

.l2-hero-shine{
  animation: l2HeroSoftShine 4.8s ease-in-out infinite;
}

.l2-hero-shine .l2-accent{
  text-shadow: 0 0 10px rgba(248,195,74,.34), 0 0 22px rgba(248,195,74,.18);
}

@keyframes l2HeroSoftShine{
  0%, 100%{
    filter: drop-shadow(0 0 0 rgba(248,195,74,0));
    opacity: .94;
  }
  45%{
    filter: drop-shadow(0 0 8px rgba(248,195,74,.28));
    opacity: 1;
  }
  55%{
    filter: drop-shadow(0 0 14px rgba(255,224,142,.22));
    opacity: .99;
  }
}

.l2-board-list-wrap .l2-board-list-table,
.l2-board-sublist-wrap .l2-board-sublist-table{
  font-size: .82rem !important;
}

.l2-board-list-wrap .l2-board-list-table thead th{
  font-size: .7rem !important;
  padding-top: .34rem !important;
  padding-bottom: .34rem !important;
}

.l2-board-list-wrap .l2-board-list-table tbody td,
.l2-board-sublist-wrap .l2-board-sublist-table tbody td{
  font-size: .78rem !important;
  line-height: 1.18 !important;
  padding-top: .30rem !important;
  padding-bottom: .30rem !important;
}

.l2-board-list-wrap .l2-board-title-link,
.l2-board-sublist-wrap .l2-board-title-link{
  font-size: .8rem !important;
  line-height: 1.18 !important;
}

.l2-board-list-wrap .badge,
.l2-board-sublist-wrap .badge,
.l2-board-list-wrap .l2-comment-count,
.l2-board-sublist-wrap .l2-comment-count{
  font-size: .68rem !important;
}

.l2-current-post-row{
  background: rgba(248,195,74,.10) !important;
  box-shadow: inset 3px 0 0 rgba(248,195,74,.82);
}

@media (max-width: 575.98px){
  .l2-hero{
    margin-top: 3px !important;
  }
  .l2-hero-title .display-4{
    font-size: clamp(16px, 5.1vw, 21px) !important;
  }
  .l2-hero-sub{
    font-size: 9px !important;
  }
}