@import url("basic_css.css");

/* =========================
   공통 레이아웃
========================= */
.contents {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 준비중 박스 */
.lifestyle-wrap {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ddd;
  border-radius: 8px;
  color: #888;
}

/* 표 컨테이너 */
.line_wrap{
  overflow-x: visible;
  overflow-y: hidden;
  width: 100%;
}

/* =========================
   컬러/치수 변수
========================= */
:root{
  /* 타이틀 팔레트 */
  --title-fg: #0f172a;
  --muted-fg: #6b7280;
  --chip-fg: #0b1330;
  --chip-bg: #e2e8f0;
  --ring: 12,114,246;
  --grad-a:#6366f1;
  --grad-b:#06b6d4;
  --grad-c:#22c55e;

  /* 카드 간격 */
  --gap-x: 24px;
  --gap-y: 24px;
}

/* =========================
   주니어/생활체육 카드 (통합)
   - PC 4열 / 모바일 2열
========================= */

/* 최상위 컨테이너 */
:is(#junior, #junior-area, #lifestyle) {
  clear: both !important;
  display: block;
  width: 100%;
  position: relative;
  z-index: 0;
  margin-top: 40px;
}

/* 내부 패딩/배경 */
:is(#junior, #junior-area, #lifestyle) .junior-wrap {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 섹션 */
:is(#junior, #junior-area, #lifestyle) .jr-section { 
  margin-top: 10px;
  margin-bottom: 28px; }

/* 헤더 */
:is(#junior, #junior-area, #lifestyle) .jr-head{
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 2px 10px;
  padding: 10px 14px;
  border-radius: 12px;
box-shadow: 0 0 0 3px rgba(var(--ring, 12, 114, 246), .15);
}
:is(#junior, #junior-area, #lifestyle) .jr-head h3 {
margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -.2px;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: black;
}
:is(#junior, #junior-area, #lifestyle) .jr-head .jr-count {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--chip-fg);
  background: linear-gradient(180deg, #f8fafc, var(--chip-bg));
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 1px rgba(2,6,23,.06);
  display: none; /* 요청대로 숨김 */
}

/* 그리드: PC 4열 고정, 전체폭 꽉 채움 */
:is(#junior, #junior-area, #lifestyle) .junior-grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px var(--gap-x);
  padding: 20px 8px 18px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;
  overflow: visible;
}

/* 카드 */
:is(#junior, #junior-area, #lifestyle) .jr-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
}

/* 사진(3:4) */
:is(#junior, #junior-area, #lifestyle) .jr-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: #f9fafb;
  overflow: hidden;
  display: block;
}
:is(#junior, #junior-area, #lifestyle) .jr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 이름 + 하단 라인 */
:is(#junior, #junior-area, #lifestyle) .jr-name {
  width: 95%;
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid #6B99D6;
  padding: 10px 0;
}

/* 보조 텍스트/빈 상태 */
.jr-card .jr-extra{ font-size:.78rem; color:#666; margin-top:4px; }
:is(#junior, #junior-area, #lifestyle) .jr-empty {
  grid-row: 1 / span 2;
  align-self: center;
  color: #9ca3af;
  padding: 16px;
}

/* 순위 뱃지 */
.rank-badge{
  position:absolute; top:6px; left:6px;
  padding: 2px 7px;
  border-radius:9999px; background:#111827; color:#fff;
  font-size:.72rem; font-weight:700; opacity:.9;
}

/* flex 부모 예외 */
#junior-area { flex: 0 0 100%; }

/* =========================
   모바일 (<=768px)
   - 2열 고정, 동일 스타일 유지
========================= */
@media (max-width: 768px) {
  :is(#junior, #junior-area, #lifestyle) .junior-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 18px;
    padding: 20px 6px 14px;
  }
  :is(#junior, #junior-area, #lifestyle) .jr-head{ padding: 8px 10px; }
  :is(#junior, #junior-area, #lifestyle) .jr-head h3 { font-size: 1rem; }
  :is(#junior, #junior-area, #lifestyle) .jr-name{ font-size: .84rem; }
  .jr-card .jr-extra{ font-size:.76rem; }
  .rank-badge{ font-size:.68rem; padding:2px 6px; }
}

/* =========================
   대제목 (.sub-title)
========================= */
.sub-title{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 30px 10px 30px;
  margin: 10px 0 22px 0;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--title-fg);
  background: linear-gradient(90deg, rgba(99,102,241,.12), rgba(34,197,94,.08));
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 0 0 6px rgba(var(--ring), .06) inset;
}

@media (max-width: 768px){
  .sub-title{ padding:8px 12px; font-size:1.08rem; }

}

/* =========================
   생활체육 랭킹 테이블
========================= */
.lifestyle-table {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}
.ls-row {
  display: grid;
  grid-template-columns: 70px 80px 1fr 120px;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  min-height: 48px;
}
.ls-row:last-child { border-bottom: none; }
.ls-head { background: #f8fafc; font-weight: 700; }
.ls-col { padding: 10px 12px; font-size: 0.95rem; }
.ls-col.rank { text-align: center; }
.ls-col.photo { display: flex; align-items: center; justify-content: center; }
.ls-col.photo img {
  width: 56px; height: 56px; border-radius: 8px; object-fit: cover; display: block;
  background: #f3f4f6;
}
.ls-col.name { font-weight: 700; color: #111827; }
.ls-col.point { text-align: right; font-variant-numeric: tabular-nums; }
.ls-empty { padding: 18px; color: #9ca3af; text-align: center; }
@media (max-width: 768px) {
  .ls-row { grid-template-columns: 56px 64px 1fr 90px; }
  .ls-col { padding: 8px 10px; font-size: 0.9rem; }
  .ls-col.photo img { width: 48px; height: 48px; }
}

/* =========================
   표(회원현황) 공통 스타일
========================= */
.sub-title + .section-filter select { padding: 6px 8px; border-radius: 6px; }

.line{
  width: 100%;
  float: left;
  border: 1px solid black;
  box-sizing: border-box;
  border-bottom: none;
  text-align: center;
  height: 40px;
  font-size: 14px;
}
.css_type1, .line1 { background-color: gray; color: #fff; }
.css_type2 { background-color: #F7F7F7; }
.line11 { border-bottom: 1px solid black; }
.line div:nth-child(1){ width: 110px; }
.line .line-box{
  float: left;
  width: calc(1088px / 12);
  border-right: 1px solid black;
  box-sizing: border-box;
  height: 100%;
  line-height: 40px;
}
.line .line-box:last-child{ border:none; }
@media screen and (min-width:360px) and (max-width:1024px){
  .overflow_container{ width:100%; }
  .line { width: 1000px; height: 30px; font-size: 12px; }
  .line div:nth-child(1){ width: 90px; }
  .line .line-box{ width: calc(756px / 10); line-height: 30px; }
}

/* =========================
   데스크탑 기타 레이아웃(유지)
========================= */
@media screen and (min-width:1025px) {
  .content1 {
    position: relative;
    margin-top: 75px;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(-45deg, #1d2c41, #B7C9D9, #4FA3F0, #22131a);
    background-size: 400% 400%;
    animation: AnimationName 20s ease infinite;
  }
  @keyframes AnimationName {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
  }
  .content1 .where { position: absolute; right: 30px; top: 20px; font-size: 12px; width: 251px; height: 20px; }
  .content1_text_wrap { overflow: hidden; width: 100%; height: 100%; position: relative; z-index: 10; color: #fff; }
  .content1 span:nth-child(1) { display:block; width:100%; height:50px; font-size:24px; float:left; margin-top:30px; line-height:70px; letter-spacing:-2px; }
  .content1_text { position:absolute; width:100%; height:100%; top:calc(50% - 100px); text-align:center; }
  .content1 .underline_wrap { width:100%; height:30px; position:relative; float:left; }
  .content1 .underline1 { position:absolute; left:calc(50% - 10px); width:20px; height:1px; background-color:#fbd784; top:15px; }
  .content1 span:nth-child(2) { display:block; width:100%; height:30px; font-size:14px; float:left; line-height:25px; margin-top:30px; letter-spacing:-1px; }

  .content2{
    position: static;
    width: 100%;
    height: 50px;
    z-index: 13;
    background: white;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    color: #4a5160;
  }
  .content2_active{ position: fixed; top: 0; z-index: 7900; }
  .content2 img{ position:absolute; display:block; width:180px; height:40px; margin:5px 0; left:-220px; transition:.5s; }
  .menu_plus2{ transition:.5s; position:absolute; width:50px; height:50px; right:-60px; text-align:center; z-index:11; cursor:pointer; }
  .menu_plus2 .i{ position:absolute; left:0; width:21px; height:21px; margin:14.5px; background-repeat:no-repeat; background-image:cover; }
  .x_img{ background-image:url(../image/icon/x_black.png); }
  .list_img{ background-image:url(../image/icon/list_black.png); }
  .menu_plus2_active{ width:200px; }
  .content2 .text_wrap{ width:1000px; min-width:1000px; max-width:1000px; height:100%; margin:0 auto; }
  .content2 .text1{ width:100%; height:100%; }
  .content2 .text1 ul{ width:100%; height:100%; margin:0 auto; }
  .content2 .text1 li{ display:block; width:calc(100% / 6); float:left; box-sizing:border-box; height:50px; text-align:center; }
  .content2 .text1 a{ display:block; color:#4a5160; font-size:14px; position:relative; margin-top:16px; height:18px; border-right:1px solid #4a516056; }
  .content2 .text1 li:last-child a{ border-right:none; }
  .content2 .text1 a:hover{ color:#0070c9; }
  .content2 li:nth-child(3) a{ color:#0070c9; }
  .content2 li:nth-child(3) a:after { content:""; position:absolute; bottom:-16px; left:0; z-index:8000; width:100%; height:1px; background:#0070c9; }

  .content3 { position: relative; width: 100%; overflow: hidden; padding-bottom: 100px; z-index: 12; }
  .container { width: 900px; margin: 0 auto; height: 100%; }
  .content3_text { position: relative; width: 100%; height: 200px; text-align: center; margin-top: 80px; }
  .content3 .content3_text span:nth-child(1) { display:block; width:100%; height:50px; font-size:30px; float:left; font-weight:100; }
  .content3 .content3_text span:nth-child(3) { display:block; width:100%; height:60px; font-size:15px; float:left; font-weight:100; line-height:30px; }
  .content3 .underline_wrap { width:100%; height:50px; position:relative; float:left; }
  .content3 .underline1 { position:absolute; left:calc(50% - 10px); width:20px; height:1px; background-color:#fbd784; top:20px; }

  /* 데스크탑 표 폭 정합 (기존 유지) */
  .line { width: 1200px; }
}

/* =========================
   모바일/태블릿 기타 레이아웃(유지)
========================= */
@media screen and (min-width:360px) and (max-width:1024px){
  .content1 {
    position: relative;
    width: 100%;
    height: 210px;
    background-image: url(../image/background/sejong.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center center;
  }
  .content1 .where { display: none; }
  .content1_text_wrap {
    overflow: hidden; width: 100%; height: 100%; position: relative; color: #fff;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  }
  .content1 span:nth-child(1) { display:block; width:100%; height:25px; font-size:18px; float:left; margin-top:70px; letter-spacing:-2px; }
  .content1_text { position:absolute; width:calc(100% - 50px); padding:0 25px; height:100%; top:calc(50% - 100px); text-align:center; }
  .content1 .underline_wrap { width:100%; height:15px; position:relative; float:left; }
  .content1 .underline1 { position:absolute; left:calc(50% - 5px); width:10px; height:1px; background-color:#fbd784; top:7.5px; }
  .content1 span:nth-child(2) { display:block; width:100%; height:40px; font-size:11px; float:left; line-height:20px; margin-top:20px; letter-spacing:-1px; }

  .content2{
    position: static; width: 100%; height: 50px; z-index: 13;
    background: white; box-sizing: border-box; border-bottom: 1px solid rgba(128, 128, 128, 0.3); color: #4a5160;
    -ms-overflow-style: none; overflow-y: hidden;
  }
  .content2::-webkit-scrollbar{ display:none; }
  .content2_active{ display: none; }
  .content2 img, .menu_plus2, .menu_plus2 .i, .x_img, .list_img, .menu_plus2_active { display: none; }
  .content2 .text_wrap{ width: 600px; min-width: 600px; max-width: 600px; height: 100%; margin: 0 auto; }
  .content2 .text1{ width: 100%; height: 100%; }
  .content2 .text1 ul{ width: 100%; height: 100%; margin: 0 auto; }
  .content2 .text1 li{ display:block; width:calc(100% / 6); float:left; box-sizing:border-box; height:50px; text-align:center; }
  .content2 .text1 a{ display:block; color:#4a5160; font-size:14px; position:relative; margin-top:16px; height:18px; border-right:1px solid #4a516056; }
  .content2 .text1 li:last-child a{ border-right:none; }
  .content2 .text1 a:hover{ color:#0070c9; }
  .content2 li:nth-child(3) a{ color:#0070c9; }
  .content2 li:nth-child(3) a:after { content:""; position:absolute; bottom:-15px; left:0; z-index:9000; width:100%; height:1px; background:#0070c9; }

  .container { width: 100%; height: 100%; position: relative; }
  .content3 {
    width: calc(100% - 50px);
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    z-index: 11;
    margin-top: 0;
    margin-bottom: 100px;
  }
  .content3_text {
    position: relative; width: 100%; height: 120px; text-align: center; margin-top: 0;
  }
  .content3 .content3_text span:nth-child(1) { display:block; width:100%; height:25px; font-size:18px; float:left; margin-top:40px; color:black; font-weight:500; letter-spacing:-1px; }
  .content3 .content3_text span:nth-child(3) { display:block; width:100%; overflow:hidden; color:black; font-size:12px; float:left; line-height:25px; letter-spacing:-1px; margin-top:5px; text-align:center; }
  .content3 .content3_text .underline_wrap { width:100%; height:15px; position:relative; float:left; }
  .content3 .content3_text .underline1 { position:absolute; left:calc(50% - 5px); width:10px; height:1px; background-color:#fbd784; top:7.5px; }

  .middle1 { width: 100%; overflow: hidden; }
  .table_wrap{ width: 100%; }


}


  .junior-grid{
    max-width: 95%;
    margin: 0 auto;
  }

  /* =========================
   회원현황 리뉴얼 스타일 (ms-*)
========================= */
.ms-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  margin: 10px 0 18px;
}
.kpi{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  display:flex; flex-direction:column; gap:4px;
}
.kpi-label{ font-size:.9rem; color:#475569; font-weight:700; }
.kpi-value{ font-size:1.6rem; font-weight:900; color:#0f172a; letter-spacing:-.5px; }
.kpi-sub{ font-size:.8rem; color:#64748b; }
.kpi-delta{ font-size:.8rem; font-weight:800; }
.kpi-delta.up{ color:#16a34a; }
.kpi-delta.down{ color:#dc2626; }

.ms-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:22px;
}
.ms-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.ms-card-head{
  display:flex; align-items:center; gap:10px;
}
.ms-card-head h4{
  margin:0; font-size:1rem; font-weight:900; letter-spacing:-.2px;
}
.ms-card-head .chip{
  margin-left:auto;
  padding:4px 10px;
  border-radius:9999px;
  font-size:.78rem; font-weight:800; color:#0b1330;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  border:1px solid #cbd5e1;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 1px rgba(2,6,23,.06);
}

.ms-metrics{ display:flex; flex-direction:column; gap:8px; }
.metric{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px; }
.m-label{ font-size:.86rem; color:#475569; font-weight:700; }
.m-value{ font-size:.9rem; color:#0f172a; font-weight:800; }
.m-bar{
  grid-column: 1 / -1;
  height:8px; border-radius:9999px;
  background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(6,182,212,.18));
  position: relative; overflow:hidden;
}
.m-bar::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: var(--v, 0%);
  background: linear-gradient(90deg, #6366f1, #06b6d4);
}

.ms-card-foot{ display:flex; justify-content:flex-end; }
.ms-card-foot .link{
  border:none; background:transparent; color:#2563eb; font-weight:800; cursor:pointer;
}

.ms-table.hidden{ display:none; }
.table-scroll{ overflow:auto; border-radius:12px; border:1px solid #e5e7eb; background:#fff; margin-top:14px; }

/* 반응형 */
@media (max-width: 1024px){
  .ms-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ms-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ms-kpis{ grid-template-columns: 1fr; }
  .ms-grid{ grid-template-columns: 1fr; }
}
/* =========================
   보기/섹션 셀렉트 바 스타일
   - 대상: .section-filter, #modeSelect, #sectionSelect
========================= */
.section-filter{
  --bar-bg:#ffffff;
  --bar-bd:#e5e7eb;
  --txt:#0f172a;
  --muted:#64748b;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  margin: 8px 0 18px;
  border-radius: 12px;
  background: var(--bar-bg);
  box-shadow: var(--bar-shadow);
  flex-wrap: wrap; /* 작은 화면에서 줄바꿈 허용 */
}

/* "보기" 라벨 */
.section-filter > label{
  font-size:.92rem;
  font-weight:800;
  color: var(--txt);
  white-space:nowrap;
  margin-right:6px;
}

/* 셀렉트 공통 */
.section-filter select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  position:relative;
  display:inline-block;
  min-width: 160px;         /* PC 기본 폭 */
  padding:10px 36px 10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(180deg,#f8fafc,#e5e7eb) border-box;
  color:#111827;
  font-size:.92rem;
  line-height:1;
  cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* 커스텀 화살표 */
.section-filter select{
  background-image:
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 8l4.5 4 4.5-4' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 10px center;
  background-size:18px 18px;
}

/* hover/focus 상태 */
.section-filter select:hover{
  border-color:#cbd5e1;
}
.section-filter select:focus{
  outline:none;
  border-color: rgba(var(--ring,12,114,246), .75);
  box-shadow: 0 0 0 3px rgba(var(--ring,12,114,246), .15);
}

/* 디스에이블드 시 */
.section-filter select:disabled{
  color:#9ca3af; background-color:#f8fafc; cursor:not-allowed;
}

/* select 배치 간격 */
#modeSelect{ margin-right: 6px; }
#sectionSelect{ margin-left: 2px; }

/* 컴팩트 높이(표시 영역을 아담하게) */
.section-filter{
  padding: 10px 12px;
}
.section-filter select{
  padding-top:9px; padding-bottom:9px;
}

/* 반응형: 태블릿 */
@media (max-width: 1024px){
  .section-filter{ gap:8px; }
  .section-filter select{ min-width: 150px; }
}

/* 반응형: 모바일 */
@media (max-width: 768px){
  .section-filter{
    gap:8px;
    padding:8px 10px;
  }
  .section-filter > label{
    font-size:.9rem;
    margin-right:4px;
  }
  .section-filter select{
    min-width: 140px;       /* 모바일 폭 */
    font-size:.9rem;
    padding:9px 34px 9px 10px;
    border-radius:9px;
    background-position: right 8px center;
  }
  /* 작은 화면에서는 행 바꿔도 자연스럽게 */
  #modeSelect{ margin-right: 4px; }
  #sectionSelect{ margin-left: 0; }
}

/* 다크톤 대비(옵션: 필요시 body에 .dark 클래스 추가해 사용) */
.dark .section-filter{
  --bar-bg:#0b1220; --bar-bd:#1e293b; --txt:#e5e7eb; --muted:#94a3b8;
  background: var(--bar-bg); border-color: var(--bar-bd);
}
.dark .section-filter select{
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(180deg,#0b1220,#111827) border-box;
  color:#e5e7eb; border-color:#1f2937;
}
.dark .section-filter select:focus{
  box-shadow: 0 0 0 3px rgba(var(--ring,12,114,246), .25);
}


.jr-name a{
  color: black;
}


.container{
  margin-top: 100px;
}