/* [Home 전용] Hero·공지·카테고리·퀵메뉴·VIP·Sports Center·게임(비반응형 기본) */
.ntc-bar {
  display:flex; align-items:center;
  height:34px; padding:0 14px;
  background:transparent;
  border:0;
  border-top:0;
  border-bottom:0;
  box-shadow:none;
  border-radius:0;
  cursor:default; overflow:hidden;          /* T020: 정보 전용 — pointer 제거 */
}
.ntc-ico { display:none; }
.ntc-ico svg {
  width:16px; height:16px; fill:none;                  /* T018-2 */
  stroke:#D4AF5A; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.ntc-view { flex:1; min-width:0; height:34px; overflow:hidden; position:relative; }
.ntc-track {
  list-style:none; margin:0; padding:0;
  transition:transform .5s cubic-bezier(.32,.72,0,1);
}
.ntc-item {
  height:34px; line-height:34px;
  font-size:11.5px; color:rgba(255,255,255,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero {
  position:relative;
  height:176px;
  overflow:hidden;
  background:linear-gradient(128deg,
    #08070d 0%,
    #0c1020 38%,
    #090c18 68%,
    #070608 100%
  );
  padding-top:0;
}
.hero::after {
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:15px;
  background:linear-gradient(transparent,rgba(0,0,0,.24));
  pointer-events:none;
  z-index:4;
}
.hero-track {
  display:flex;
  height:100%;
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  will-change:transform;
}
.hero-slide {
  flex:0 0 100%;
  position:relative;
  height:176px;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.hero-slide-brand {
  background-color:#08070d;                         /* 로딩 실패 fallback(기존 다크) */
  background-image:url('../assets/ESS83_Home_Hero.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:62% center;                   /* Mobile 기본 — 왕관 우측 유지 */
  cursor:default;                                    /* Route 없음 */
}
.hero-slide-brand::before {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,7,13,.92) 0%, rgba(6,7,13,.80) 26%, rgba(6,7,13,.42) 52%,
    rgba(6,7,13,.10) 72%, rgba(6,7,13,0) 88%);
}
.hero-slide-event {position:relative;overflow:hidden}
.hero-ev-bg {
  position:absolute;inset:0;z-index:0;
  background-repeat:no-repeat;           /* 반복 출력 금지 */
  background-size:cover;                 /* 비율 강제 변형 없음 */
  background-position:right center;      /* 우측 핵심 오브젝트 보존 */
}
/* 좌측 문구 안전영역 Scrim — 최소 강도(우측 피사체 구간은 완전 투명) */
.hero-slide-event .hero-ev-bg::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,5,7,.78) 0%, rgba(5,5,7,.58) 26%, rgba(5,5,7,.26) 50%,
    rgba(5,5,7,.06) 68%, rgba(5,5,7,0) 82%);
}
/* 실이미지 적용에 따라 임시 인라인 SVG Art 비노출 (마크업은 보존) */
.hero-slide-event .hero-visual { display:none; }
.hero-ev-body {
  position:relative;z-index:2;
  padding:14px 20px 0;
  width:62%;
}
.hero-ev-eye {
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:5px;opacity:.80;
}
.hero-ev-ttl {
  font-size:20px;font-weight:800;line-height:1.08;
  color:#fff;letter-spacing:-.02em;margin-bottom:5px;
}
.hero-ev-sub {
  font-size:10px;color:rgba(255,255,255,.52);line-height:1.40;
}
.hero-ev-art {
  position:absolute;right:0;bottom:0;
  width:140px;height:140px;z-index:1;
  pointer-events:none;
}
.hero-ev-cta {
  display:inline-flex;align-items:center;gap:4px;
  margin-top:8px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:99px;
  border:1px solid currentColor;
  opacity:.80;
}
.hero-event-unlimited .hero-ev-bg {
  background-color:#050e1a;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-casino.webp');
}
.hero-event-unlimited .hero-ev-eye {color:#00C8FF}
.hero-event-unlimited .hero-ev-cta {color:#00C8FF}
.hero-event-score .hero-ev-bg {
  background-color:#140008;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-sports.webp');
}
.hero-event-score .hero-ev-eye {color:#FF4880}
.hero-event-score .hero-ev-cta {color:#FF4880}
.hero-event-project .hero-ev-bg {
  background-color:#030e04;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-streak.webp');
}
.hero-event-project .hero-ev-eye {color:#40C860}
.hero-event-project .hero-ev-cta {color:#40C860}
.hero-event-reward .hero-ev-bg {
  background-color:#030e08;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-reward.webp');
}
.hero-event-reward .hero-ev-eye {color:#14C88C}
.hero-event-reward .hero-ev-cta {color:#14C88C}
.hero-event-payback .hero-ev-bg {
  background-color:#120008;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-payback.webp');
}
.hero-event-payback .hero-ev-eye {color:#FF3C5A}
.hero-event-payback .hero-ev-cta {color:#FF3C5A}
.hero-visual {
  position:absolute;right:0;bottom:0;
  width:140px;height:100%;
  pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-end;
}
.hero-nav-wrap {
  position:relative;   /* 화살표 배치 기준 — Hero의 overflow:hidden 유지 */
  min-width:0;
}
.hero-side-nav {
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;                       /* Hero(6) 아래 — 문구/이미지 위로 올라가지 않음 */
  width:20px;                      /* 24px Gutter 내부 Slim Control */
  height:48px;
  padding:0;
  background:transparent;          /* 배경 없는 Slim Chevron */
  border:0;
  border-radius:6px;
  color:rgba(255,255,255,.36);     /* 기본 저대비 — Secondary 위계 */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s ease;      /* DS: 150ms, Scale/Rotate/Bounce 없음 */
}
.hero-side-nav svg {
  width:15px; height:15px;         /* DS Directional Arrow 14~16px */
  display:block; margin:0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;                /* DS: 2~2.5 */
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-side-nav:hover { color:#D4AF5A; }
.hero-nav-wrap:hover .hero-side-nav { color:rgba(255,255,255,.52); }
.hero-nav-wrap:hover .hero-side-nav:hover { color:#D4AF5A; }
.hero-side-nav:focus-visible {
  /* [Hero Nav] Gutter 여유가 좌우 2px뿐이므로 outline 확장폭을 2px 이내로 제한.
     offset 2px + width 2px(=4px)는 Rail/Hero를 2px 침범 → offset 0 + width 1.5px로 조정.
     버튼 위치(left/right:-22px)와 App Shell/Rail/Main/column-gap은 불변. */
  outline:1.5px solid rgba(212,175,90,.72);
  outline-offset:0;
  border-radius:6px;
  color:#D4AF5A;
}
.hero-side-nav--prev { left:-22px; }
.hero-side-nav--next { right:-22px; }
.hero-dots {
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:6;
}
.hero-dot {
  width:8px;height:8px;border-radius:99px;
  background:rgba(255,255,255,.28);
  transition:width .24s,background .24s;
  cursor:pointer;
}
.hero-dot.on {
  width:18px;
  background:#D4AF5A;
}
.hero-gr {
  position:absolute;right:-18px;top:-52px;
  width:284px;height:284px;
  background:radial-gradient(ellipse at 58% 42%,
    rgba(212,175,90,.20) 0%,
    rgba(212,175,90,.07) 32%,
    transparent 62%
  );
  pointer-events:none;
}
.hero-gl {
  position:absolute;left:-28px;bottom:-18px;
  width:158px;height:158px;
  background:radial-gradient(ellipse,rgba(212,175,90,.055) 0%,transparent 70%);
  pointer-events:none;
}
.hero-st {
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at  9% 16%,rgba(212,175,90,.78) 0%,transparent 100%),
    radial-gradient(1.0px 1.0px at 83% 10%,rgba(212,175,90,.55) 0%,transparent 100%),
    radial-gradient(1.7px 1.7px at 44% 75%,rgba(212,175,90,.62) 0%,transparent 100%),
    radial-gradient(1.0px 1.0px at 73% 52%,rgba(255,255,255,.30) 0%,transparent 100%),
    radial-gradient(1.0px 1.0px at 19% 86%,rgba(212,175,90,.37) 0%,transparent 100%),
    radial-gradient(2.0px 2.0px at 92% 37%,rgba(212,175,90,.52) 0%,transparent 100%),
    radial-gradient(1.0px 1.0px at 61% 24%,rgba(255,255,255,.25) 0%,transparent 100%),
    radial-gradient(1.2px 1.2px at 31% 52%,rgba(212,175,90,.30) 0%,transparent 100%),
    radial-gradient(1.3px 1.3px at  4% 66%,rgba(255,255,255,.20) 0%,transparent 100%),
    radial-gradient(1.0px 1.0px at 55% 88%,rgba(212,175,90,.22) 0%,transparent 100%);
}
.hero-body {
  position:relative;z-index:2;
  padding:5px 20px 0;
  width:56%;
}
.hero-eye {
  font-size:10px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:#D4AF5A;margin-bottom:5px;  /* 6→5px */
  padding-left:4px;
}
.hero-h1 {
  font-size:24px;font-weight:800;
  color:#fff;letter-spacing:-.02em;
  line-height:1.08;      /* T5: 1.20→1.08 */
  margin-bottom:6px;
}
.hero-h1 .au {color:#EDD98A}
.hero-sub {
  font-size:12px;color:rgba(255,255,255,.40);
  line-height:1.38;      /* T6: 1.50→1.38 */
  margin-bottom:0;
}
.hero-art {
  position:absolute;
  right:6px;
  bottom:0;
  width:142px;height:142px;
  pointer-events:none;
}
.hero-event-lotto .hero-ev-bg {
  background-color:#040c14;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-lotto.webp');
  background-position:right 70%;                    /* 하단 핵심 오브젝트 보존 */
}
.hero-event-lotto .hero-ev-eye {color:#00DCD2}
.hero-event-lotto .hero-ev-cta {color:#D4AF5A}
.hero-event-closing .hero-ev-bg {
  background-color:#030810;                          /* 로딩 실패 fallback */
  background-image:url('../assets/events/event-closing.webp');
  background-position:right 72%;                    /* 하단 핵심 오브젝트 보존 */
}
.hero-event-closing .hero-ev-eye {color:#D4AF5A}
.hero-event-closing .hero-ev-cta {color:#D4AF5A}
.cat-bar {
  /* [Category Card] 5개 독립 Category Card Grid. Quick Menu와 동일한 Card Gap·Surface 기준.
     아이콘 위·라벨 아래 구조. 외곽 Bar/Border/Radius/Padding 없음. */
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  width:100%;
  box-sizing:border-box;
  overflow:visible;
}
.cat-item {
  width:100%;
  min-width:0;
  min-height:64px;
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:6px 2px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer;position:relative;
  transition:background .15s,border-color .15s;
}
.cat-ico {
  width:26px;height:26px;               /* [T041] Box 형태 제거 */
  background:transparent;
  border:0;
  border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
.cat-ico svg {
  width:24px;height:24px;   /* [T041] Desktop 24 / Mobile 22(아래 MQ) */
  stroke:rgba(255,255,255,.46);stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.cat-item:hover { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); }
.cat-item:active { background:rgba(212,175,90,.08); border-color:rgba(212,175,90,.24); }
.cat-item.on { background:rgba(212,175,90,.08); border-color:rgba(212,175,90,.24); }
.cat-item.on .cat-ico svg {stroke:#D4AF5A}
.cat-item.on .cat-lbl {color:#D4AF5A}
.cat-lbl {
  font-size:10px;font-weight:500;          /* DS: Caption — 5개 라벨 전부 동일 */
  color:rgba(255,255,255,.36);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  letter-spacing:-.04em;                   /* [Category Final] 전 라벨 균등 자간 보정 */
  transition:color .15s;
}
.bh {background:#F4802A;color:#fff}
.bn {background:#1A56DB;color:#fff}
.qv-wrap {
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;
  padding:var(--section-pad-y-sm) var(--section-pad-x) var(--section-pad-y-sm);  /* was 16px 16px 16px */
  background:#0A0A0A;
  /* border 제거 */
}
.qm-card {
  background:#111111;
  border:1px solid rgba(255,255,255,.07);  /* #1F1F1F → 살짝 더 소프트 */
  border-radius:14px;
  padding:14px 11px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.32);  /* DS: L2 elevation */
  box-sizing:border-box;
}
.qm-eye {
  font-size:10px;font-weight:700;          /* DS: Caption 10px/700 */
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
  margin-bottom:12px;
}
.qm-grid {
  /* [T041] 3열×2행. Cell 자체가 Tile. 아이콘 Box 없음. */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.qm-item {
  width:100%;
  min-width:0;
  height:62px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:6px 4px;
  box-sizing:border-box;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.qm-ico {
  width:24px;height:24px;               /* [T041] Box 형태 제거 */
  background:transparent;
  border:0;
  border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
.qm-ico svg {
  width:21px;height:21px;
  stroke:rgba(255,255,255,.55);stroke-width:2;  /* DS: icon stroke 2px */
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
/* 포인트 코인의 P — 21px 실표시에서 획이 뭉치지 않도록 면 글리프로 그린다.
   외곽 원은 다른 아이콘과 동일한 stroke 2px · 동일 색상을 그대로 쓴다. */
.qm-ico svg .qm-p { fill:rgba(255,255,255,.55); stroke:none; }
.qm-item:active .qm-ico svg .qm-p { fill:#D4AF5A; }
.qm-item:hover { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); }
.qm-item:active { background:rgba(212,175,90,.08); border-color:rgba(212,175,90,.24); }
.qm-item:active .qm-ico svg {stroke:#D4AF5A}
.qm-lbl {font-size:10px;font-weight:500;color:rgba(255,255,255,.36);white-space:nowrap}
/* 높이 — 뷰포트 전용 고정 높이를 쓰지 않는다.
   외곽 상·하단 기준선은 부모 .qv-wrap 의 Grid Stretch 가 맞추고,
   남는 세로 공간은 내부 Layout 분배(align-content)가 흡수한다.
   내부 구조 — 상단: 좌 브랜드 / 우 자산 2행, 하단: 혜택 버튼 전체 폭. */
.vip-card {
  background:#111111;
  border:1px solid rgba(212,175,90,.18);   /* DS: --br-gold */
  border-radius:14px;                       /* DS: --r-xl panel */
  padding:14px;
  display:grid;
  grid-template-columns:minmax(82px,30%) minmax(0,1fr);
  align-items:center;
  align-content:space-between;              /* 남는 세로 공간을 상·하로 균등 분배 */
  column-gap:14px;
  row-gap:10px;                             /* 상단 정보 ↔ 버튼 최소 간격 */
  box-sizing:border-box;
  box-shadow:
    0 6px 24px rgba(0,0,0,.46),            /* DS: L5 base */
    0 0 0 1px rgba(212,175,90,.06);        /* DS: L5 gold outer glow */
}
/* ── 좌측 브랜드 영역 (약 30%) ──
   세로 위계: 엠블럼 → VIP 보조 라벨 → GOLD 등급명. 가로 중심선 일치.
   우측 자산 영역과는 낮은 명도의 Gold 세로 구분선으로 나눈다. */
.vip-brand {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  gap:6px;
  padding:2px 12px 2px 2px;
  border-right:1px solid rgba(212,175,90,.16);
  min-width:0;
}
.vip-eyebrow {
  font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(212,175,90,.58);
  line-height:1;
}
.vip-grade {
  font-size:17px;font-weight:800;
  color:var(--vg-crown);letter-spacing:.01em;line-height:1;
  white-space:nowrap;
}

/* ── 우측 자산 영역 (약 70%) ──
   보유금 · 포인트는 Mobile · Tablet · Desktop 전 구간에서 위아래 2행이다.
   두 값 사이 구분선은 항상 가로선이다. */
.vip-side { display:flex; flex-direction:column; min-width:0; }

/* 혜택 버튼 Wrapper — 상단 두 열을 모두 차지한다.
   좌우 기준선은 카드 내부 Padding 과 정확히 일치한다. */
.vip-cta {
  grid-column:1 / -1;
  min-width:0;
}

/* 등급 엠블럼 — Dark Navy 면 + Champagne Gold 외곽선 + Crown.
   Glow · 불꽃 · Chip · 3D 없음. 등급별 교체는 data-grade Hook 으로. */
.vip-emblem {
  width:50px;height:50px;
  flex:0 0 50px;
  display:flex;align-items:center;justify-content:center;
  /* 등급별 엠블럼 이미지 — data-grade Hook 이 --vg-emblem 을 지정한다. */
  background-image:var(--vg-emblem);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.vip-emblem svg {display:none}
/* 색상은 05-shell-components.css 의 등급 Token 이 담당한다(Home·Right Nav 공통). */
.vip-emblem .ve-shield {
  fill:var(--vg-face);
  stroke:var(--vg-line);
  stroke-width:.85;
  stroke-linecap:round;stroke-linejoin:round;
}
.vip-emblem .ve-crown {
  fill:none;
  stroke:var(--vg-crown);
  stroke-width:1.05;
  stroke-linecap:round;stroke-linejoin:round;
}
.vip-emblem .ve-base {
  fill:none;
  stroke:var(--vg-line);
  stroke-width:.9;
  stroke-linecap:round;
  opacity:.65;
}
/* 게스트(로그아웃) 엠블럼은 data-vip-grade-icon Hook 이 없어 등급 Token 이
   비어 있으므로 방패가 검정으로 렌더된다. 기본 골드 Token 을 직접 지정한다. */
.vip-guest .vip-emblem {
  --vg-face:#1C2A4A;
  --vg-line:#D4AF5A;
  --vg-crown:#E2C36F;
  --vg-emblem:url('/s/ess83/assets/emblem/gold.png');
}

/* 카드 폭이 넓어지는 구간 — 좌측 브랜드를 한 단계 키우고 상단↔버튼 간격을 조인다.
   기본 .vip-emblem / .vip-grade 선언보다 반드시 뒤에 와야 덮이지 않는다. */
@media (min-width:768px){
  .vip-card { row-gap:8px; }
  .vip-emblem { width:56px;height:56px;flex:0 0 56px; }
  /* 최장 등급명 PLATINUM 기준으로 폭 여유를 확보한 크기 */
  .vip-grade { font-size:17px; }
  .vip-eyebrow { font-size:10px; }
  .vip-brand { padding-right:14px; }
}

/* 보유금 · 포인트 — 전 구간 위아래 2행. 사이에 낮은 명도의 가로 구분선. */
.vip-wallet {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  row-gap:7px;
  width:100%;
  min-width:0;
  margin-bottom:0;
}
.vip-wal-item {
  display:flex;
  flex-direction:column;
  gap:2px;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
/* 자산 Label — Mobile 8.5~9px / Tablet·Desktop 9~10px */
.vip-wal-lbl {
  font-size:8.5px; font-weight:600; letter-spacing:.03em;
  color:rgba(255,255,255,.46);
}
/* 금액 표시 규칙 — 보유금 상한 999,999,999(9자리).
   최대 문자열 '999,999,999원' 을 한 줄로 담는 것이 기준이다.
   말줄임 · 숫자 생략 · 줄바꿈을 쓰지 않는다(text-overflow:clip 유지). */
.vip-wal-val {
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  font-size:clamp(11px,3.1vw,12px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  line-height:1.25;
  color:#D4AF5A;                                    /* DS: gold — 보유금 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}
.vip-wal-val.pt { color:#3B7CF4; }
/* 9자리(1억 이상) — 가독 하한.
   Mobile 390px 11.5px 이상 / Tablet·Desktop 13px 이상. 자간은 -.04em 아래로 내리지 않는다. */
.vip-wal-val.is-long {
  font-size:11.5px;
  letter-spacing:-.04em;
}
@media (min-width:768px){
  .vip-wal-lbl { font-size:9.5px; }
  .vip-wal-val.is-long { font-size:13px; }
}
.vip-wal-sep {
  width:100%;
  height:1px;
  margin:0;
  background:rgba(255,255,255,.07);                 /* DS: --br-default */
}
.vip-btn {
  display:flex;align-items:center;justify-content:center;gap:5px;
  height:36px;
  width:100%;
  box-sizing:border-box;
  background:transparent;
  border:1px solid rgba(212,175,90,.26);
  border-radius:8px;                        /* DS: --r-sm btn */
  color:#D4AF5A;font-size:11px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;                       /* 줄바꿈·압축·말줄임 금지 */
  transition:background .15s,border-color .15s;
}
.vip-btn:active {background:rgba(212,175,90,.10);border-color:rgba(212,175,90,.40)}
.vip-btn svg {width:13px;height:13px;flex:0 0 auto;stroke:#D4AF5A;stroke-width:2;fill:none;stroke-linecap:round}
/* 게스트 카드 — 로그인 카드와 동일한 좌우 구조. 등급명·자산·진행률 미표시.
   Wrapper 는 display:contents 로 두어 .vip-card 의 2열 Grid 를 그대로 쓴다
   (별도 Grid 를 중첩하지 않으므로 세로 정렬·비율이 로그인 카드와 동일). */
.vip-guest { display:contents; }
.vip-guest-eye {
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(212,175,90,.58);
  line-height:1;
  margin-bottom:7px;
}
.vip-guest-ttl {
  font-size:12.5px;font-weight:700;
  color:rgba(255,255,255,.78);line-height:1.35;
  margin-bottom:11px;
  word-break:keep-all;
}
.vip-guest-btn {
  display:flex;align-items:center;justify-content:center;gap:4px;
  height:34px;width:100%;
  background:transparent;
  border:1px solid rgba(212,175,90,.26);
  border-radius:8px;
  color:#D4AF5A;font-size:10px;font-weight:700;letter-spacing:.02em;
  transition:background .15s,border-color .15s;
}
.vip-guest-btn:active {background:rgba(212,175,90,.10);border-color:rgba(212,175,90,.40)}
/* ── Mobile 대응 ──
   .qv-wrap 의 좌우 배치(Quick Menu | VIP)를 유지하므로 390px 에서 VIP 카드
   실폭은 174px 다. 좁은 폭에 맞춰 브랜드 열 · 엠블럼 · 등급명만 한 단계 조인다.
   상단 좌(브랜드)·우(자산) 배치 · 자산 세로 2행 · 하단 전체 폭 버튼 구조는 그대로다. */
@media (max-width:767px){
  /* 브랜드 열 폭은 최장 등급명(PLATINUM)이 한 줄로 들어가는 값으로 잡는다.
     우측 자산 열에는 '999,999,999원' 이 들어갈 폭이 남아야 한다. */
  .vip-card {
    grid-template-columns:minmax(66px,40%) minmax(0,1fr);
    column-gap:10px;
    padding:12px;
  }
  .vip-brand { padding-right:9px; gap:5px; }
  .vip-emblem { width:42px;height:42px;flex:0 0 42px; }
  .vip-grade { font-size:11px; letter-spacing:-.02em; }
  .vip-eyebrow { font-size:8.5px; }

  /* 게스트는 좌측에 GOLD 등급명이 없어 브랜드 열을 더 좁혀 우측 안내 폭을 확보한다. */
  .vip-card.auth-guest-only {
    grid-template-columns:44px minmax(0,1fr);
    column-gap:9px;
  }
  .vip-guest .vip-brand { padding-right:8px; }
  .vip-guest .vip-emblem { width:38px;height:38px;flex:0 0 38px; }
  /* 좌측 VIP 라벨과 중복되므로 좁은 폭에서는 eyebrow 를 숨긴다. */
  .vip-guest-eye { display:none; }
  .vip-guest-ttl { font-size:11px; line-height:1.4; margin-bottom:10px; }
  .vip-guest-btn { font-size:9px; letter-spacing:0; gap:3px; }
  .vip-guest-btn svg { display:none; }
}

/* 초소형 폭(≤389px) — 실측 기준 별도 조정 구간.
   카드 실폭이 좁아 '999,999,999원'(우) 과 최장 등급명 PLATINUM(좌) 을 동시에
   기본 크기로 담을 수 없다. Padding · Gap · 열 폭을 조인 뒤 필요한 최소 범위만
   폰트를 낮춘다. 금액과 등급명 모두 두 줄로 나누지 않는다.
   390px 이상은 지시 하한(금액 11.5px)을 그대로 지킨다. */
@media (max-width:389px){
  .vip-card {
    padding:8px;
    column-gap:7px;
    grid-template-columns:minmax(52px,38%) minmax(0,1fr);
  }
  .vip-brand { padding-right:5px; }
  .vip-grade { font-size:9px; letter-spacing:-.03em; }
  .vip-eyebrow { font-size:8px; }
  .vip-card.auth-guest-only { column-gap:7px; }
  .vip-wal-val.is-long { font-size:10px; }
  .vip-wal-lbl { font-size:8px; }
}

@media (max-width:379px){
  .vip-guest-btn {
    white-space:normal; line-height:1.25;
    height:auto; min-height:32px; padding:5px 4px;
  }
  .vip-guest-ttl { font-size:10.5px; margin-bottom:8px; }
}
.vip-guest-btn svg {width:12px;height:12px;stroke:#D4AF5A;stroke-width:2;fill:none;stroke-linecap:round}
.sec {
  background:#0c0c0c;
  padding-top:20px;
}
.sec-hd {
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;margin-bottom:14px;
}
.sec-ttl {
  font-size:15px;font-weight:700;
  color:rgba(255,255,255,.90);
  letter-spacing:-.010em;   /* DS: Section */
  line-height:1.30;
}
.sec-more {
  display:inline-flex;align-items:center;gap:3px;
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.30);
  transition:color .15s;
}
.sec-more:active {color:rgba(255,255,255,.60)}
.sec-more svg {
  width:14px;height:14px;
  stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;
}
.hs::-webkit-scrollbar {display:none}
.pt-view {
  overflow:hidden;
  padding:0 16px;
  /* [Partner Final] 수동 Swipe/Drag 차단 — 자동 Loop 전용 보조 정보 영역.
     pan-y로 페이지 세로 스크롤은 정상 허용, 가로 제스처만 무효화. */
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.pt-track {
  display:flex;
  gap:10px;
  transition:transform .7s cubic-bezier(.32,.72,0,1);   /* [Partner Final] .45s → .7s (저속화) */
  will-change:transform;
}
.pt-card {
  flex:0 0 auto;
  width:104px;height:56px;
  display:flex;align-items:center;justify-content:center;
  padding:0 10px;
  border-radius:12px;                        /* DS: --r-lg */
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.pt-logo {
  width:100%;height:24px;                    /* 모든 로고 동일 높이 */
  display:block;
}
.gc-toggle {
  display:inline-flex;align-items:center;gap:3px;
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.30);
  transition:color .15s;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gc-toggle:active {color:rgba(255,255,255,.60)}
.gc-toggle svg {
  width:14px;height:14px;
  stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;
  transition:transform .26s ease;
}
.gc-toggle.open {color:rgba(212,175,90,.80)}
.gc-toggle.open svg {transform:rotate(180deg)}
.gc-row {
  display:flex;
  gap:var(--card-gap-mobile);
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 16px;
  -webkit-overflow-scrolling:touch;
}
.gc-row::-webkit-scrollbar {display:none}
.game-sec {
  background:#0e0e0e;
  padding:var(--section-pad-y) 0 var(--section-pad-y);  /* was 20px 0 20px */
}
.game-sec--sub {
  padding:16px 0 18px;
  background:#0c0c0c;
}
.game-sec-hd {
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;margin-bottom:14px;
}
.game-sec--sub .game-sec-hd {margin-bottom:12px}
.game-sec-ttl {
  font-size:15px;font-weight:700;      /* DS: Section */
  color:rgba(255,255,255,.90);letter-spacing:-.010em;line-height:1.30;
}
.game-sec--sub .game-sec-ttl {
  font-size:15px;                       /* DS: Section — 14→15px 통일 */
  color:rgba(255,255,255,.65);          /* 보조 섹션은 opacity로만 구분 */
}
.game-sec-more {
  display:inline-flex;align-items:center;gap:3px;
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.30);
  transition:color .15s;
}
.game-sec-more:active {color:rgba(255,255,255,.60)}
.game-sec-more svg {
  width:14px;height:14px;
  stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;
}
.gg {
  display:flex;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:0 16px;
  -webkit-overflow-scrolling:touch;
}
.gg::-webkit-scrollbar {display:none}
.ggc {
  flex-shrink:0;width:96px;
  scroll-snap-align:start;cursor:pointer;
  transition:transform 150ms ease,opacity 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
.ggc:active {transform:scale(.98);opacity:.90}
.ggc-img {
  width:96px;height:96px;
  aspect-ratio:1 / 1;                   /* 이미지 영역 정사각형 보장 (전 Breakpoint 공통) */
  border-radius:12px;                   /* DS: --r-lg card (14→12px 통일) */
  overflow:hidden;position:relative;    /* 영역 밖 Overflow 차단 + .ggc-thumb 기준 박스 */
  border:1px solid rgba(255,255,255,.07);  /* DS: --br-default */
  box-shadow:0 4px 16px rgba(0,0,0,.32);  /* DS: L4 — Task 10 20% 감소 */
}
.ggc-thumb {
  position:absolute;top:0;left:0;right:0;bottom:0;  /* .ggc-img = position:relative + overflow:hidden */
  display:block;
  width:100%;height:100%;
  object-fit:cover;                     /* 340x340 원본을 비율 왜곡 없이 영역에 꽉 채움 */
  object-position:center;               /* 크롭 기준을 중앙으로 고정 (카드별 편차 0) */
  background:transparent;               /* 미배치 시 .gi-* 배경 그라디언트가 그대로 노출 */
  border:0;
  /* [부분 조치] alt 텍스트 노출만 억제한다. 브라우저 기본 깨진 이미지 글리프까지
     완전히 가려지는지는 엔진별로 다르므로 이것만으로 로딩 실패 처리가 끝난 것이 아니다.
     현재 HTML/JS 에 onerror 계열 처리는 존재하지 않으며(전수 확인), 에셋 업로드 전까지
     src 는 변경하지 않는다. 레이아웃 자체는 .ggc-img 의 고정 박스가 보장한다. */
  font-size:0;color:transparent;
}
.ggc-img::after {
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:30%;background:linear-gradient(transparent,rgba(0,0,0,.30));
  pointer-events:none;
}
.ggc-bdg {
  position:absolute;top:8px;left:8px;
  padding:2px 5px;border-radius:4px;   /* DS: --r-xs badge */
  font-size:8px;font-weight:800;       /* DS: Badge */
  letter-spacing:.05em;text-transform:uppercase;line-height:1.4;z-index:1;
}
.ggc-info {padding:8px 2px 0}
.ggc-name {
  font-size:12px;font-weight:700;      /* DS: Card-T */
  color:rgba(255,255,255,.90);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.35;letter-spacing:-.010em;
}
.ggc-prov {
  font-size:10px;font-weight:400;      /* DS: Caption size, body weight */
  color:rgba(255,255,255,.36);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.30;margin-top:2px;letter-spacing:.01em;
}
.game-sec--sub .ggc {width:96px}
.game-sec--sub .ggc-img {
  /* 중복 크기 선언 제거 — 기본 .ggc-img 와 04 반응형 규칙이 이미 담당한다.
     여기에 크기를 남기면 특이도 0-2-0 으로 04 의 반응형 폭 지정을 전 Breakpoint 에서
     덮어 고정 크기로 묶어 버리는 잠재 충돌이 된다.
     이 섹션의 카드 폭은 바로 위 .game-sec--sub .ggc 규칙이 결정하고,
     이미지는 그 폭을 따라 1 대 1 로 계산된다. 결과값 동일, 회귀 없음. */
  border-radius:12px;                   /* DS: --r-lg 통일 */
  box-shadow:0 3px 12px rgba(0,0,0,.34);  /* DS: L3 */
}
.game-sec--sub .ggc-name {font-size:12px;color:rgba(255,255,255,.76)}
.game-sec--sub .ggc-prov {font-size:10px;color:rgba(255,255,255,.32)}
.game-sec--sub .ggc-info {padding:8px 2px 0}
.spc {
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(22,36,62,.80);
  border-bottom:1px solid rgba(26,26,46,.60);
  --spc-asset:url('../assets/ESS83_Sports_Center_mobile.png');   /* Mobile 기본 에셋 (≤767) */
  background-color:#050d1a;                         /* 로딩 실패 fallback(기존 딥 네이비) */
  background-image:
    linear-gradient(180deg, rgba(4,7,18,.34) 0%, rgba(4,6,16,.50) 42%, rgba(4,6,14,.72) 68%, rgba(3,5,12,.92) 100%),  /* 다크 포그 오버레이 */
    linear-gradient(90deg, rgba(5,10,26,.90) 0%, rgba(5,10,26,.66) 34%, rgba(5,10,26,.24) 60%, rgba(5,10,26,0) 82%),   /* 좌측 텍스트 보호 */
    var(--spc-asset);                                 /* 실이미지(하단 레이어) — 폭별 에셋 자동 교체 */
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,cover;
  background-position:center,center,center center;   /* Mobile 기본 — 세로형 모바일 에셋 중앙 */
  padding:8px 0 0;
}
.spc::before {
  content:'';
  position:absolute;
  top:-90px;right:-30px;
  width:320px;height:310px;
  background:radial-gradient(ellipse at 62% 16%,
    rgba(59,124,244,.24) 0%,
    rgba(26,86,219,.14) 30%,
    rgba(15,60,160,.04) 58%,
    transparent 72%
  );
  pointer-events:none;z-index:0;
}
.spc::after {
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(26,86,219,.30) 18%,
    rgba(59,124,244,.78) 50%,
    rgba(26,86,219,.30) 82%,
    transparent 100%
  );
  z-index:1;
}
.spc-fog {
  position:absolute;left:-16px;bottom:0;
  width:200px;height:90px;
  background:radial-gradient(ellipse at 25% 85%,
    rgba(6,18,54,.28) 0%,transparent 68%
  );
  pointer-events:none;z-index:0;
}
.spc-hero {
  position:relative;
  padding:0 16px;
  margin-bottom:8px;
  /* 선수(배경 이미지) 우측 공간 — 텍스트 겹침 방지 최소값 */
  padding-right:140px;
  min-height:0;
}
.spc-eyebrow {
  display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;          /* DS: Caption 10px/700 */
  letter-spacing:.16em;text-transform:uppercase;
  color:#3B7CF4;
  margin-bottom:6px;
}
.spc-eyebrow-line {
  display:block;flex:1;max-width:24px;height:2px;
  background:linear-gradient(90deg,#1A56DB,#3B7CF4);
  border-radius:1px;
}
/* Sports Center 제목 — 1행 Groove(브랜드) / 2행 프리미엄 스포츠(서비스).
   각 행을 독립 block 으로 두어 줄바꿈 위치를 고정한다(<br> 의존 제거).
   2행은 어떤 Viewport 에서도 다시 갈라지지 않는다. */
.spc-ttl {
  font-size:21px;font-weight:800;          /* DS: Display */
  color:#fff;letter-spacing:-.025em;
  line-height:1.06;                        /* 두 행이 하나의 제목으로 읽히도록 좁게 */
  margin-bottom:3px;
}
.spc-ttl-line {
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  text-align:left;                         /* 영문 브랜드명·한글 설명 좌측 기준선 일치 */
}
.spc-ttl-brand { color:#fff; }
.spc-ttl-gold  { color:#D4AF5A; }
.spc-sub {
  font-size:12px;font-weight:600;          /* DS: Body weight with emphasis */
  color:rgba(255,255,255,.82);
  margin-bottom:2px;
}
.spc-desc-txt {
  font-size:12px;font-weight:400;          /* DS: Body */
  color:rgba(255,255,255,.42);
  line-height:1.3;
}
.spc-player {
  position:absolute;
  right:0;top:-10px;
  width:158px;height:148px;
  pointer-events:none;
  z-index:1;
}
.spc-grid {
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));  /* T5: 라이브 삭제 → 5개 */
  gap:6px;
  padding:0 16px;
  margin-bottom:8px;
}
.spc-item {
  font:inherit;color:inherit;text-align:start;width:100%;appearance:none;-webkit-appearance:none;
  position:relative;
  background:rgba(255,255,255,.058);
  border:1px solid rgba(255,255,255,.07);  /* DS: --br-default */
  border-radius:12px;                       /* DS: --r-lg card */
  padding:7px 4px 6px;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;min-width:0;
}
.spc-item:active {
  background:rgba(26,86,219,.16);
  border-color:rgba(59,124,244,.32);
}
.spc-ico {width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spc-ico svg {width:26px;height:26px;display:block}
.spc-lbl {
  font-size:10px;font-weight:700;   /* DS: Caption size */
  color:#fff;text-align:center;
  letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;
}
.spc-desc {
  font-size:8px;font-weight:400;
  color:rgba(255,255,255,.40);
  text-align:center;line-height:1.2;margin-top:-3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;
}
.spc-badge {
  position:absolute;top:5px;left:5px;
  padding:2px 5px;border-radius:4px;       /* DS: --r-xs badge */
  font-size:8px;font-weight:800;           /* DS: Badge 8px/800 (6.5→8) */
  letter-spacing:.05em;text-transform:uppercase;line-height:1.4;
}
.spc-badge-new {background:#1A56DB;color:#fff}
.gi-bac {background:linear-gradient(145deg,#1e0a0a,#2e0e0e,#180808)}
.gi-cra {background:linear-gradient(145deg,#0c1c0a,#122e0c,#0a1808)}
.gi-avi {background:linear-gradient(145deg,#08081e,#0a0a2e,#060618)}
.gi-spo {background:linear-gradient(145deg,#081c10,#0e2e14,#081808)}
.gi-blj {background:linear-gradient(145deg,#1c0e0a,#2e1610,#180c08)}
.gi-bon {background:linear-gradient(145deg,#1c0a1c,#2e0c2e,#180818)}
.gi-oly {background:linear-gradient(145deg,#1c1208,#2e200a,#181006)}
.gi-sug {background:linear-gradient(145deg,#081c0c,#0e2e14,#081808)}
.gi-wan {background:linear-gradient(145deg,#101008,#1c1c0a,#0c0c06)}
.gi-ban {background:linear-gradient(145deg,#08081c,#0a0a2c,#060618)}
.gi-lro {background:linear-gradient(145deg,#160808,#220e0e,#120606)}
.cat-item, .qm-card, .vip-card, .spc-item, .ggc { min-width:0; }

/* ============================================================
   [NoticeLayer] Home 공지 팝업 레이어
   - 소유: 03-home.css (Home 전용). 별도 CSS 파일로 분리하지 않는다.
   - z-index 8700: Drawer(8800/8900)와 LoginModal(9000) 아래.
     공지 위에서 Drawer/로그인 UI 가 정상 노출되도록 의도한 배치.
   - 개수 구분: .notice-count-1 ~ .notice-count-5 (서버 렌더 + JS 갱신)
   ============================================================ */
.notice-layer {
  position:fixed;inset:0;z-index:8700;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:rgba(5,5,5,.68);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:20px var(--section-pad-x)
          calc(var(--ess83-nav-h) + var(--ess83-nav-bottom-pad) + 24px);
  animation:noticeLayerIn .18s ease-out both;
}
.notice-layer[hidden] {display:none}
@keyframes noticeLayerIn {
  from {opacity:0}
  to   {opacity:1}
}
.notice-layer__grid {
  display:grid;
  gap:14px;
  grid-template-columns:minmax(0,1fr);   /* Mobile 기본 1열 */
  align-content:start;                   /* 첫 공지가 상단에 붙도록 */
  align-items:stretch;                   /* 같은 줄 카드 높이를 최고 카드에 맞춤 */
  justify-content:center;
  max-width:1120px;
  margin:0 auto;
}

/* ── 팝업 카드 ── */
.notice-popup {
  width:100%;
  max-width:360px;
  min-width:0;
  justify-self:center;
  display:flex;flex-direction:column;
  height:100%;                                         /* Grid 셀 높이를 채워 하단선 일치 */
  background:#111111;                                  /* DS: Surface */
  border:1px solid rgba(255,255,255,.07);              /* DS: --br-default */
  border-radius:14px;                                  /* DS: --r-lg */
  box-shadow:0 2px 8px rgba(0,0,0,.32);                /* DS: L2 */
  overflow:hidden;
  opacity:0;transform:scale(.98);
  animation:noticePopIn .18s ease-out forwards;
}
@keyframes noticePopIn {
  to {opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .notice-layer, .notice-popup {animation:none}
  .notice-popup {opacity:1;transform:none}
}
.notice-popup[hidden] {display:none}

/* ── Header ── */
.notice-popup__header {
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  flex-shrink:0;
  padding:12px 8px 10px 14px;
  border-bottom:1px solid rgba(212,175,90,.28);        /* Gold: 제목 구분선 한정 */
}
.notice-popup__header h2 {
  flex:1 1 auto;min-width:0;
  font-size:14px;font-weight:700;                      /* DS: Card-T */
  color:rgba(255,255,255,.88);
  letter-spacing:-.010em;line-height:1.40;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;                                     /* 제목 최대 2줄 */
}
.notice-popup__close {
  flex:0 0 auto;
  width:44px;height:44px;                              /* 모바일 터치 영역 최소 44px */
  margin:-10px -6px -10px 0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  color:rgba(255,255,255,.52);
  border-radius:10px;
  transition:background .15s,color .15s;
}
.notice-popup__close:hover {color:rgba(255,255,255,.88)}
.notice-popup__close:active {background:rgba(255,255,255,.08)}

/* ── 이미지 영역 ── */
.notice-popup__content {
  display:block;position:relative;
  flex:1 1 auto;                                       /* 남는 높이를 본문이 흡수 (Footer 밀어내기) */
  width:100%;
  min-height:120px;                                    /* 이미지 로드 실패 시 레이아웃 유지 */
  background:#0A0A0A;
  text-decoration:none;
}
.notice-popup__content img {
  display:block;
  width:100%;height:auto;
  max-height:60vh;
  object-fit:cover;                                    /* 비율이 달라도 카드 폭 유지 */
  border:0;
}

/* ── Footer ── */
.notice-popup__footer {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;                                     /* 카드 최하단 고정 */
  flex-shrink:0;
  padding:8px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  background:#0E0E0E;
}
.notice-popup__hide-label {
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;                                     /* 터치 영역 */
  font-size:12px;font-weight:400;
  color:rgba(255,255,255,.52);
  cursor:pointer;user-select:none;
}
.notice-popup__hide-today {
  width:16px;height:16px;flex:0 0 auto;
  accent-color:#1A56DB;                                /* DS: Royal Blue */
  cursor:pointer;
}
.notice-popup__close-text {
  min-width:64px;min-height:36px;
  padding:0 14px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.88);
  transition:background .15s;
}
.notice-popup__close-text:active {background:rgba(255,255,255,.12)}

/* ── Tablet : 최대 2열 / 마지막 "표시 중인" 홀수 카드 중앙 ──
   nth-child 는 hidden 카드까지 세므로 DOM 순번에 의존하면
   앞·중간 공지가 숨겨졌을 때 엉뚱한 카드가 중앙에 놓인다.
   home.js 의 syncLayer() 가 실제 표시 목록의 마지막 카드에만
   .notice-popup--last-centered 를 부여하고, 여기서는 그 클래스만 본다.
   Desktop 배열에 영향을 주지 않도록 구간을 1023px 로 닫는다. ── */
@media (min-width:768px) and (max-width:1023px){
  .notice-layer {padding:32px var(--page-pad-tablet) 48px}
  .notice-layer__grid {gap:16px;grid-template-columns:repeat(2,minmax(0,320px))}
  .notice-count-1 .notice-layer__grid {grid-template-columns:minmax(0,360px)}
  .notice-popup--last-centered {grid-column:1 / -1;justify-self:center}
}

/* ── Desktop : 1~5개 바둑판 배열 (폭 확대) ──
   Grid 전체 폭 = min(1440px, viewport - 좌우 32px x 2)
   .notice-layer 의 좌우 padding 32px 이 안전 여백을 담당하므로
   width:100% 만으로 이미 viewport-64px 를 넘지 않는다.
   calc(100vw - 64px) 를 직접 width 로 쓰면 세로 스크롤바 폭만큼
   가로 Overflow 가 발생하므로 max-width 상한으로만 사용한다.
   3개 배열 기준 카드 실폭 = (1440 - 24 x 2) / 3 = 464px ── */
@media (min-width:1024px){
  .notice-layer {padding:40px var(--page-pad-desktop) 56px}
  .notice-layer__grid {
    gap:24px;
    width:100%;
    max-width:min(1440px, calc(100vw - 64px));
    margin:0 auto;
    align-items:stretch;
  }
  .notice-popup {
    width:100%;
    max-width:none;      /* 320px / 360px 제한 해제 — 열 너비를 전부 사용 */
    min-width:0;
  }

  /* 1개: 과도한 확대 방지 상한 480px, 중앙 */
  .notice-count-1 .notice-layer__grid {grid-template-columns:minmax(0,480px)}
  /* 2개: 각 상한 600px, 중앙 */
  .notice-count-2 .notice-layer__grid {grid-template-columns:repeat(2,minmax(0,600px))}
  /* 3개: 1440px 전폭 3열 (카드당 464px) */
  .notice-count-3 .notice-layer__grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 4개: 2x2 중앙. 3열 카드와 폭을 맞추기 위해 Grid 폭을 952px 로 제한 */
  .notice-count-4 .notice-layer__grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:min(952px, calc(100vw - 64px));
  }

  /* 동적 중앙 클래스는 Tablet 전용. Desktop 배열에 개입하지 않도록 해제 */
  .notice-popup--last-centered {grid-column:auto;justify-self:center}
  .notice-count-5 .notice-popup--last-centered {grid-column:span 2}

  /* 5개: 6트랙 각 2칸 span. 4번째를 2열, 5번째를 4열부터 시작시켜 둘째 줄 중앙 */
  .notice-count-5 .notice-layer__grid {grid-template-columns:repeat(6,minmax(0,1fr))}
  .notice-count-5 .notice-popup {grid-column:span 2}
  .notice-count-5 .notice-popup:nth-child(4) {grid-column:2 / span 2}
  .notice-count-5 .notice-popup:nth-child(5) {grid-column:4 / span 2}
}