/* ==========================================================================
   layout — 헤더 · 사이드바 · 하단 탭바 · 푸터
   수치 근거: ../02-레이아웃/공통레이아웃.md
   ========================================================================== */

/* ==========================================================================
   1. 헤더  —  높이 72 · 여백 0 24 · 배경 #191939
   ========================================================================== */
/* ⚠⚠ 사이드바(z-index:50)보다 <위>여야 한다 (레드 2026-09-15
     「모바일 메뉴열면 상단 메뉴 클릭안됨」).

     폰에서 머리글은 두 줄로 늘어나는데 --header-h 는 56 으로 고정이다.
     사이드바가 그 56 아래부터 깔리니 <머리글의 아래쪽 절반을 덮었고>,
     지갑·선물·프로필이 눌리지 않았다. 덮개보다 위로 올려 둔다. */
.header{
  position:sticky; top:0; z-index:70;
  height:var(--header-h);
  background:var(--surface-1);
  display:flex; align-items:center;
  padding:0 var(--gutter);
}

/* 로고 170 × 44 */
/*
  ★ 로고 상자를 <헤더 높이에 맞춘다>.

    44px 는 옛 「W」 원의 크기였다. 로고로 바꾸고도 그 값이 남아 있어서
    72px 헤더 안에서 로고가 34px 로 눌려 있었다 — 「너무 작다」(레드 2026-09-10).
*/
.brand{ display:flex; align-items:center; flex:none; height:100%; }
/*
  ★ 로고는 <세로 기준>으로 맞춘다.

    가로를 고정하면 로고를 갈아 끼울 때(가로세로비가 다른 것) 눌리거나 늘어난다.
    높이만 정하고 가로는 auto 로 두면 어떤 비율이 와도 원래 모양을 지킨다.
    ⚠ QR 이 132×200 으로 눌렸던 것과 같은 종류의 실수다(2026-09-10).

  ★ 헤더가 44px 인데 로고는 34px 로 둔다 — 위아래 숨 쉴 자리를 남긴다.
*/
/*
  ★ 로고는 <세로 기준>으로 맞춘다.
    가로를 고정하면 로고를 갈아 끼울 때 눌리거나 늘어난다.
    ⚠ QR 이 132×200 으로 눌렸던 것과 같은 종류의 실수다(2026-09-10).

  ★ 헤더 72px 에 로고 56px. 위아래 8px 씩 숨 쉴 자리를 남긴다 —
    꽉 채우면 글자가 헤더 테두리에 닿아 답답해 보인다.
  ★ PNG 자체 여백은 7% 미만이라(실측) 잘라낼 것이 없다.
*/
.brand__logo{
  height:56px; width:auto; display:block;
  /* 어두운 바탕 위의 흰 로고라, 살짝 띄워 두면 판에 붙어 보이지 않는다 */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

/* 잔액 알약 — 로고와 오른쪽 버튼 묶음 사이의 가운데.
   절대 위치로 컨테이너 정중앙에 두면 오른쪽 버튼 묶음이 넓어질수록
   한쪽 여백만 넓어져 가운데로 보이지 않는다. */
.header__center{
  margin:0 auto; min-width:0;
  display:flex; align-items:center;
}
.balance{
  height:44px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:3px; 
  display:flex; align-items:center; gap:4px;
}
.balance__inner{ display:flex; align-items:center; gap:4px; height:36px; padding-left:5px; }
/* 커런시 마크 — 루벳은 원 안에 자산 심볼(₮)을 넣는다. 우리는 표시 커런시 기호를 넣는다 */
.balance__coin{
  width:20px; height:20px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-full);
  background:var(--success); color:#FFFFFF;
  font-size:12px; font-weight:900; line-height:1;
}
.balance__amount{
  font-size:14px; font-weight:700;
  letter-spacing:-.4px;               /* 자릿수가 많은 원화도 좁게 들어가도록 */
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.balance__caret{
  width:20px; height:20px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-chip); color:var(--text);
}
.balance__caret svg{ width:20px; height:20px; display:block; }
.balance__caret:hover{ background:var(--surface-2); }

/* 입금 36 × 36 노란 정사각 */
.btn-cta{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  padding:0;
  border-radius:var(--r);
  background:var(--cta); color:#FFFFFF;
  box-shadow: inset 0 -3px 0 0 var(--cta-lo), inset 0 2px 0 0 var(--cta-hi);
  transition:background var(--t-bg);
}
.btn-cta:hover{ background:var(--cta-hi); }
.btn-cta:active{ box-shadow: inset 0 2px 0 0 var(--cta-lo); }
/* 십자는 흰색이고 바깥에 어두운 주황 테두리가 한 겹 둘러 있다.
   paint-order 로 선을 먼저 그려야 테두리가 글자 바깥쪽에 남는다. */
.btn-cta svg{
  width:17px; height:17px; display:block;
  stroke:var(--cta-lo); stroke-width:2.5; stroke-linejoin:round;
  paint-order:stroke fill;
}

/* 오른쪽 묶음 — 아이콘 버튼 44 × 44, 간격 8 */
/* margin-left:auto 를 주면 .header__center 의 auto 여백과 남은 공간을
   나눠 가져 잔액이 한쪽으로 치우친다. 가운데 정렬은 center 쪽에 맡긴다. */
.header__right{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  position:relative;
  width:var(--btn); height:var(--btn); flex:none;
  display:grid; place-items:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  color:var(--text);
  transition:background var(--t-bg);
}
.icon-btn:hover{ background:var(--surface-3); }
.icon-btn svg{ width:var(--icon); height:var(--icon); display:block; }
.icon-btn__dot{
  position:absolute; top:10px; right:10px;
  width:8px; height:8px; border-radius:var(--r-full);
  background:var(--cta);
}

/* 프로필 176 × 44 */
.profile{
  width:176px; height:44px; flex:none;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:4px;
  display:flex; align-items:center;
}
/* 등급 아바타 — 육각형 테두리 안에 등급 숫자 */
.profile__tier{
  width:49px; height:36px; flex:none;
  display:grid; place-items:center;
}
.hexa{
  width:30px; height:34px;
  display:grid; place-items:center;
  background:var(--surface-3);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-size:var(--fs-sm); font-weight:900; color:var(--cta);
}
.profile__body{ width:83px; flex:none; display:grid; gap:4px; margin-left:3px; }
.profile__name{
  height:16px; font-size:var(--fs-sm); font-weight:700; line-height:16px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.profile__bar{
  width:83px; height:8px;
  background:var(--surface-1);
  border-radius:var(--r-full);
  overflow:hidden;
}
.profile__bar i{
  display:block; height:100%;
  background:var(--cta); border-radius:var(--r-full);
  min-width:8px;                       /* 0% 여도 노란 점이 보인다 */
}
.profile__caret{
  width:var(--icon); height:var(--icon); flex:none; margin-left:auto;
  display:grid; place-items:center;
  border-radius:var(--r-chip); font-size:10px;
}

/* ==========================================================================
   2. 사이드바  —  폭 220 · 메뉴 188
   ========================================================================== */
.sidebar{
  position:fixed; inset:0 auto 0 0; z-index:50;
  width:var(--sidebar-w);
  background:var(--surface-1);
  display:flex; flex-direction:column;
  transition:width var(--t-bg);
}
.sidebar__top{ height:var(--header-h); flex:none; padding:18px 16px; }
.sidebar__toggle{
  width:var(--btn-sm); height:var(--btn-sm);
  display:grid; place-items:center;
  background:var(--surface-2);
  border-radius:var(--r);
  color:var(--text);
  transition:background var(--t-bg);
}
.sidebar__toggle:hover{ background:var(--surface-3); }
.sidebar__toggle svg{ transition:transform var(--t-bg); }
body.sidebar-mini .sidebar__toggle svg{ transform:rotate(180deg); }
/* 컨테이너를 사이드바보다 16px 넓게 잡고 오른쪽 여백 32 로 스크롤바를 밀어낸다.
   그래서 메뉴 실제 폭이 188 이 된다. (220 + 16 − 16 − 32 = 188) */
/* 스크롤은 되지만 막대는 보이지 않는다 */
.sidebar__scroll{
  scrollbar-width:none; -ms-overflow-style:none;
  flex:1; overflow-y:auto;
  width:calc(100% + 16px);
  padding:0 32px 16px 16px;
}
.sidebar__scroll::-webkit-scrollbar{ width:0; height:0; }

/* 그룹 — 헤더와 하위 목록이 하나의 박스 (#463E7A, r12) */
.navgroup{
  margin-bottom:8px;
  background:var(--nav-closed);
  border-radius:var(--r);
  overflow:hidden;
  transition:background var(--t-bg);
}
/* 펼치면 박스가 한 단계 밝아지고, 헤더는 거기서 또 한 단계 밝다 */
.navgroup.is-open{ background:var(--nav-box); }
.navgroup.is-open > .navgroup__head{ background:var(--nav-head); }
.navgroup__head{ display:flex; align-items:center; }
.navgroup__btn{
  flex:1; min-width:0;
  height:var(--nav-row);
  display:flex; align-items:center; gap:8px;
  padding:0 6px 0 8px;
  color:var(--text);
  font-size:var(--fs-base); font-weight:700;
  transition:background var(--t-bg);
  text-align:left;
}
.navgroup__btn:hover{ background:rgba(255,255,255,.08); }
.navgroup.is-active > .navgroup__head{ background:var(--primary); }
.navgroup__ico{ width:var(--icon); height:var(--icon); flex:none; display:grid; place-items:center; }
.navgroup__ico svg,.navitem__ico svg{ display:block; }
.navgroup__label{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 펼침 화살표 — 반투명 칩 24 × 24, 오른쪽 끝에서 6px */
/* 화살표 칩 — 그룹 종류와 상관없이 오른쪽 끝에서 6px, 24 × 24 */
.navgroup__caret{
  width:var(--icon); height:var(--icon); flex:none;
  display:grid; place-items:center;
  background:var(--nav-caret);
  border-radius:var(--r-chip);
  color:var(--text);
  transition:transform var(--t-bg);
}
.navgroup__caret svg{ width:16px; height:16px; display:block; }
.navgroup.is-open .navgroup__caret{ transform:rotate(180deg); }
.navgroup--link .navgroup__btn{ padding-right:0; }
.navgroup--link .navgroup__caretbtn{
  width:30px; flex:none; height:var(--nav-row);
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:6px;
  transition:background var(--t-bg);
}
.navgroup--link .navgroup__caretbtn:hover{ background:rgba(255,255,255,.07); }


.navgroup__list{ overflow:hidden; max-height:0; transition:max-height var(--t-zoom); }
.navgroup.is-open .navgroup__list{ max-height:720px; }

/* 하위 항목 — 배경 없음, 12/500, #9789CD */
.navitem{
  height:var(--nav-row);
  display:flex; align-items:center; gap:12px;
  padding:6px 8px 4px;
  font-size:var(--fs-sm); font-weight:500;
  color:var(--nav-item);
  transition:color var(--t-color), background var(--t-bg);
}
.navitem:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.navitem .navitem__ico{ color:var(--nav-icon); }
.navitem:hover .navitem__ico{ color:var(--text); }
.navitem.is-active{ color:var(--text); }
.navitem__ico{ width:var(--icon); height:var(--icon); flex:none; display:grid; place-items:center; }
.navitem__label{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 단일 항목 — 그룹과 달리 배경이 #2C2852 다 */
.navsolo{
  height:var(--nav-row);
  display:flex; align-items:center; gap:8px;
  padding:0 6px 0 8px; margin-bottom:8px;
  border-radius:var(--r);
  background:var(--nav-closed);
  color:var(--text);
  font-size:var(--fs-base); font-weight:700;
  transition:background var(--t-bg);
}
.navsolo:hover{ background:var(--nav-box); }
.navsolo.is-active{ background:var(--primary); }

/* 뱃지 — LIVE 는 어두운 배경, 숫자는 노란 원 */
/* ── 곁줄의 LIVE 배지 ─────────────────────────────────────────────────
   ★ 게임 카드의 LIVE 와 <같은 것>으로 맞춘다 (레드 2026-09-13).

     전에는 곁줄만 흐린 회색 알약이었다. 같은 낱말이 화면마다 다르게 생기면
     회원은 <다른 것>으로 읽는다 — 카드에서 빨간 LIVE 를 본 사람이
     곁줄의 회색 LIVE 를 보고 「지금 하는 것」이라고 잇지 못한다.

   ★ 색·점·깜빡임을 vendorcard__live 와 한 벌로 둔다.
     그쪽은 카드 위라 자리를 절대좌표로 잡고, 이쪽은 줄 끝이라 margin-left:auto 다 —
     다른 것은 <자리뿐>이다.
   ------------------------------------------------------------------ */
/* 사이드바 LIVE 배지.

   ⚠ 처음에는 24px 알약에 12px 굵은 글씨 + 번짐이었다. 옆 항목 글자도 12px 인데
     배지만 굵고 letter-spacing 까지 붙어, 줄에서 <배지가 먼저 읽혔다> —
     이름이 주인공인 자리인데 꼬리표가 더 컸다 (레드 2026-09-13).

   ★ 줄 높이에 맞춘다. 글자는 10px 로 내린다 —
     토큰에 12보다 작은 것이 없어 여기서만 값을 적는다.
     LIVE 는 네 글자 대문자라 10 에서도 또렷하다.

   ⚠ 번짐(box-shadow)을 걷었다. 크기를 줄여도 빛이 남으면 여전히 커 보인다. */
.badge-live{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:4px;
  height:18px; padding:0 6px; border-radius:var(--r-chip);
  background:#E11D3F; color:#fff;
  font-size:10px; font-weight:700; line-height:1;
  letter-spacing:.02em;
}
.badge-live__dot{
  width:5px; height:5px; border-radius:50%; flex:none;
  background:#fff;
  animation:vc-live-blink 1.1s ease-in-out infinite;
}
/* ⚠ 깜빡임을 싫어하는 설정이면 멈춘다. 애니메이션은 어지럼을 부르기도 한다. */
@media (prefers-reduced-motion:reduce){
  .badge-live__dot{ animation:none; }
}
.badge-count{
  margin-left:auto; flex:none;
  width:20px; height:20px;
  display:grid; place-items:center;
  border-radius:var(--r-full);
  /*
   * ⚠⚠ --cta 는 <플래티넘(#D8DEE6)>이고 --text 는 흰색이다.
   *   둘을 겹치면 흰 위에 흰이라 숫자가 안 읽힌다 (레드 2026-09-13).
   *
   * ★ 밝은 바탕은 그대로 두고 <글자를 어둡게> 한다.
   *   이 배지는 「몇 개 있다」를 알리는 것이라, 알림처럼 붉을 필요는 없다.
   */
  background:var(--cta); color:var(--bg);
  font-size:var(--fs-sm); font-weight:800;
  /*
   * ⚠ 숫자가 원 안에서 <가운데로 안 온다> (레드 2026-09-14).
   *   place-items:center 는 글자 <상자>를 가운데 두는데, 눈에 보이는 것은
   *   상자가 아니라 숫자다. 셋이 어긋나게 만든다.
   *     · font-style — <i> 로 쓴 자리가 있어 숫자가 기울어 오른쪽으로 밀린다
   *     · line-height — 글꼴의 위아래 여백이 상자를 숫자보다 크게 만든다
   *     · 자간 — 1 은 좌우 여백이 넓어 제 폭보다 왼쪽으로 앉는다.
   *       tabular-nums 는 숫자마다 같은 폭을 줘 그 치우침을 없앤다.
   */
  font-style:normal; line-height:1; font-variant-numeric:tabular-nums;
}

/* 언어 — 선택된 언어는 보라 배경 */
.langpack{ margin-bottom:8px; }
.langpack summary{ list-style:none; cursor:pointer; margin:0; }
.langpack summary::-webkit-details-marker{ display:none; }
.langpack__list{ padding:4px 0 0; }
.langpack .navitem.is-active{ background:var(--nav-head); color:var(--text); border-radius:var(--r-chip); }

/* 하단 카운터 */

/* ---- 접힌 사이드바 — 대메뉴 아이콘만 --------------------------------- */
@media (min-width:1025px){
  body.sidebar-mini{ --sidebar-w:68px; }
  body.sidebar-mini .sidebar__scroll{ width:100%; padding:0 8px 16px; }
  /* 접으면 대메뉴 아이콘만 남는다.
     이름 · 화살표 · 하위 목록 · 뱃지는 모두 감춘다. */
  body.sidebar-mini .navgroup__label,
  body.sidebar-mini .navitem__label,
  body.sidebar-mini .navgroup__caret,
  body.sidebar-mini .navgroup__caretbtn,
  body.sidebar-mini .navgroup__list,
  body.sidebar-mini .badge-live,
  body.sidebar-mini .badge-count,
  body.sidebar-mini .langpack__list{ display:none; }

  /* 남은 아이콘 한 칸을 가운데로 */
  body.sidebar-mini .navgroup,
  body.sidebar-mini .navsolo,
  body.sidebar-mini .langpack summary{
    width:52px; justify-content:center; padding:0;
  }
  body.sidebar-mini .navgroup__btn{ width:100%; justify-content:center; padding:0; }
  /* 접은 채로 열려 있던 묶음의 배경까지 남으면 아이콘 줄이 끊겨 보인다 */
  body.sidebar-mini .navgroup.is-open{ background:none; }
  body.sidebar-mini .navgroup.is-open > .navgroup__head{ background:none; }
  body.sidebar-mini .navgroup.is-active > .navgroup__head{ background:var(--primary); }
}

/* ==========================================================================
   2-1. 모바일 헤더 — 루벳 실측 (뷰포트 529)
   로고 마크 36 · 잔액 159×40 · 입금 32 · 오른쪽 버튼 40×40 두 개
   ========================================================================== */
@media (max-width:1024px){
  /* 로고는 마크만 남긴다. 글자까지 두면 잔액과 겹친다 */
  /* 좁은 화면 — 헤더도 56px 로 줄어든다 */
  .brand{ height:100%; gap:0; }
  /* 좁은 화면 — 로고를 한 단계 줄인다. 감추지 않는다, 브랜드를 알아볼 유일한 자리다 */
  /*
    ★ 모바일 로고는 비율이 1.50 이라 (가로 로고는 2.02) 같은 높이에서
      가로를 덜 먹는다. 그래서 헤더 56px 에 44px 까지 키운다.
  */
  .brand__logo{ height:44px; }

  /* PC 전용 버튼은 숨긴다 — 하단 탭바가 대신한다 */
  .is-pc{ display:none !important; }

  .balance{ height:40px; padding:2px; gap:2px; }
  .balance__inner{ height:32px; gap:3px; padding-left:6px; }
  .balance__amount{ font-size:13px; }
  .btn-cta{ width:32px; height:32px; border-radius:var(--r-chip); }
  .btn-cta svg{ width:16px; height:16px; }

  .header__right{ gap:8px; }
  .icon-btn{ width:40px; height:40px; }

  /* 프로필은 아바타만 — 이름과 게이지는 계정 화면에서 본다 */
  .profile{ width:40px; height:40px; padding:0; justify-content:center; }
  .profile__tier{ width:40px; height:40px; }
  .hexa{ width:26px; height:30px; }
  .profile__body, .profile__caret{ display:none; }
}

/* ==========================================================================
   3. 모바일 — 사이드바를 시트로, 하단 탭바
   ========================================================================== */
@media (max-width:1024px){
  .sidebar{
    inset:var(--header-h) 0 var(--tabbar-h) 0;
    width:auto;
    transform:translateY(8px);
    opacity:0; pointer-events:none;
    transition:opacity var(--t-bg), transform var(--t-bg);
  }
  body.menu-open .sidebar{ opacity:1; transform:none; pointer-events:auto; }
  .sidebar__top{ display:none; }
  /* ⚠⚠ 폭을 <되돌린다>. PC 는 스크롤 막대를 밀어내려고 width:calc(100% + 16px)
       인데, 폰에서는 그 16px 이 그대로 <화면 밖으로> 나간다 —
       메뉴가 왼쪽으로 밀려 보이고 쪽 전체가 좌우로 흔들렸다(실측 409 / 393). */
  .sidebar__scroll{ width:100%; padding:16px var(--gutter); }
  .navgroup__btn,.navsolo{ border-radius:var(--r); }
}

/* 하단 탭바 */
.tabbar{ display:none; }
@media (max-width:1024px){
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    height:var(--tabbar-h);
    background:var(--bg);
    display:grid; grid-template-columns:repeat(5,1fr);
  }
  .tabbar__item{
    display:grid; justify-items:center; align-content:start;
    padding-top:8px; gap:4px;
    color:var(--text);
  }
  .tabbar__item svg{ width:var(--icon); height:var(--icon); color:var(--text-5); transition:color var(--t-color); }
  .tabbar__item span{ font-size:var(--fs-tab); font-weight:700; line-height:var(--lh-tab); }
  .tabbar__item.is-active svg{ color:var(--cta); }
}

/* ==========================================================================
   4. 푸터
   roobet 실측 (컨테이너 1084 기준) — 전체 1084 × 572
     34 위여백 + 284 링크열 + 16 + 70 커뮤니티 + 32 + 136 라이선스 = 572
   ========================================================================== */
.footer{
  margin-top:var(--gap-sec);
  padding:34px var(--gutter) 0;
  background:var(--bg);
}
.footer__inner{
  max-width:var(--container); margin:0 auto;
}

/* ---- 링크 열 — 5열 × 204, 간격 16 (204×5 + 16×4 = 1084) --------------- */
.footer__cols{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 204px));
  justify-content:center;          /* 남는 폭은 양옆에 균등하게 */
  gap:16px;
}
.footer__col{
  min-height:284px;
  text-align:center;               /* 제목은 열 안에서 가운데 */
}
/* PC 는 항상 펼쳐진 상태다. 접기 표시와 마커를 감춘다 */
.footer__coltitle{ list-style:none; cursor:default; }
.footer__coltitle::-webkit-details-marker{ display:none; }
.footer__coltitle svg{ display:none; }
/* 제목 14/700 흰색 — 아래 8 을 더해 링크 묶음이 열 위에서 28 지점에 온다 */
.footer__coltitle{
  display:block; margin:0 0 8px;
  font-size:var(--fs-base); line-height:var(--lh-base);
  font-weight:700; color:var(--text);
}
.footer__collinks{ display:flex; flex-direction:column; }
.footer__collinks a{
  display:block;
  padding:12px 0;                  /* 12 + 16 + 12 = 행 간격 40 */
  font-size:var(--fs-sm); line-height:var(--lh-sm);
  font-weight:500; color:var(--text-5);
  transition:color var(--t-color);
}
.footer__collinks a:hover{ color:var(--text); }

/* ---- 커뮤니티 — 링크 열과 별개 블록, 120 × 70 -------------------------- */
/* 16 × 4행 + 2 × 3간격 = 70 */
.footer__social{
  margin-top:48px;
  display:flex; justify-content:flex-end; gap:8px;
}
.footer__social a{
  width:40px; height:40px;
  display:grid; place-items:center;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text-5);
  transition:color var(--t-color), background var(--t-bg), border-color var(--t-bg);
}
.footer__social a:hover{
  color:var(--text); background:var(--surface-2); border-color:var(--nav-caret);
}
.footer__social svg{ width:20px; height:20px; }

/* ---- 아래쪽 덩이들 — 덩이 사이 간격 40 (루벳 실측) --------------------- */
.footer__rule{
  height:1px; margin:40px 0;
  background:var(--line);
}
.footer__blocktitle{
  margin:0 0 16px;
  font-size:var(--fs-base); line-height:var(--lh-base);
  font-weight:700; color:var(--text); text-align:center;
}

/* 지원 자산 — 왼쪽에 맞춘다. 칩마다 그 코인의 색을 --c 로 받아
   마크·테두리·hover 에 함께 쓴다. */
.footer__block--assets{ text-align:left; }
.footer__block--assets .footer__blocktitle{ text-align:left; }
/* ★ auto-fit 이다. auto-fill 은 <빈 칸을 남겨> 두어, 자산이 적으면 첫 칸만 차고
     오른쪽이 통째로 빈다. auto-fit 은 빈 칸을 접어 남은 칸이 가로를 다 쓴다
     (레드 2026-09-13 「가로 100% 사용」). */
.footer__coins{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
  gap:8px;
}
.footer__coin{
  position:relative; overflow:hidden;
  height:56px; padding:0 14px;
  display:flex; align-items:center; gap:10px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color var(--t-bg), transform var(--t-bg);
}
/* 칩 왼쪽에서 코인 색이 옅게 번진다 */
.footer__coin::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%);
  opacity:.55; pointer-events:none;
  transition:opacity var(--t-bg);
}
.footer__coin:hover{ border-color:var(--c); transform:translateY(-2px); }
.footer__coin:hover::before{ opacity:1; }
.footer__coin > *{ position:relative; z-index:1; }
.footer__coincode{
  font-size:var(--fs-base); line-height:var(--lh-base);
  font-weight:700; color:var(--text);
}
.footer__coinname{
  margin-left:auto;
  font-size:var(--fs-sm); line-height:var(--lh-sm);
  font-weight:500; color:var(--text-6);
}

/*
  신뢰 배지를 감싼 칸. PC 에서는 <아무 일도 하지 않는다> —
  좌우 단추는 모바일에서만 뜨고, 여기서는 자리만 지킨다.
*/
.footer__stripwrap{ position:relative; }
.footer__stripnav{ display:none; }

/* 신뢰 배지 — 라이선스 · 책임 있는 이용 · 공정성 3열 */
.footer__trust{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
}
.footer__badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
/*
  신뢰 배지 — 글자도 판도 없이 <그림 하나>다 (레드 2026-09-14
  「로그 테두리 배경색 없애고 이미지로만 표현을할텐데 이미지 최대한 크게」).

  ★ 판을 걷으면 같은 자리에서 그림이 그만큼 커진다. 전에는 테두리·바탕·여백이
    가로 28px · 세로 24px 을 먹고 있었다.

  ⚠ 그림 크기가 제각각이라 <높이로> 맞춘다. 폭으로 맞추면 가로로 긴 로고(GLI ·
    Provably)가 세로로 짧은 우표만 해지고, 세로가 있는 것(앙주안 · GCB)은 넘친다.
*/
.footer__badge{
  width:calc(50% - 4px);
  padding:6px;
  display:flex; align-items:center; justify-content:center;
}
.footer__badge img{
  display:block; max-width:100%; max-height:56px;
  width:auto; height:auto; object-fit:contain;
}
/* 누를 수 있는 것은 살짝 밝아진다 — 판이 없으니 테두리로는 알릴 수 없다 */
.footer__badge.is-link{ transition:opacity var(--t-color), transform var(--t-bg); }
.footer__badge.is-link:hover{ opacity:.82; transform:translateY(-1px); }
.footer__badge.is-link:focus-visible{ outline:2px solid var(--primary); outline-offset:4px; border-radius:var(--r-sm); }

/* 소개 — 로고 아래 한 줄 소개가 아니라 <푸터 전폭>에 두 문단으로 선다
   (레드 2026-09-14). 브랜드 칸은 좁아서 이 길이를 담으면 글줄이 세로로 길게
   흘러내린다. 법적 고지 <위>에 두어 읽는 순서를 「무엇인가 → 누가 허가했나」로 둔다. */
.footer__about{
  margin:0 auto 26px; max-width:960px;
  text-align:center;
}
.footer__about-title{
  margin-bottom:12px;
  font-size:var(--fs-md); line-height:1.5; font-weight:700;
  color:var(--text-2); letter-spacing:.01em;
}
.footer__about-body{
  font-size:var(--fs-sm); line-height:1.9;
  color:var(--text-5);
  word-break:keep-all;   /* 접힐 때도 낱말 가운데에서 갈리지 않게 */
}
.footer__about-body + .footer__about-body{ margin-top:14px; }

/* ★ 한 줄로 (레드 2026-09-13). max-width:760px 이 넓은 화면에서도 강제로 접어
     「…책임감 있 / 게 이용하세요」처럼 낱말 가운데가 갈렸다.
     상한을 풀면 넓은 화면에서는 한 줄, 좁은 화면에서는 자연스럽게 접힌다. */
.footer__legal{
  margin:0 auto 20px; max-width:none;
  font-size:var(--fs-sm); line-height:1.8;
  color:var(--text-6); text-align:center;
  word-break:keep-all;   /* 접힐 때도 낱말 가운데에서 갈리지 않게 */
}

/* 맨 아래 줄 — 저작권과 언어 선택
   ★ 저작권을 <가운데>에 둔다 (레드 2026-09-13).
     space-between 은 왼쪽 끝에 붙인다 — 언어 단추가 없으면 더 어색해진다.
     세 칸(빈칸·저작권·언어)으로 나누면 언어 단추가 있든 없든 가운데가 유지된다. */
.footer__bottom{
  padding-bottom:32px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.footer__copy{ grid-column:2; text-align:center; }
.footer__langbtn{ grid-column:3; justify-self:end; }
.footer__copy{
  font-size:var(--fs-sm); line-height:var(--lh-sm);
  font-weight:500; color:var(--text-6);
}
.footer__langbtn{
  height:36px; padding:0 12px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:var(--fs-sm); font-weight:700; color:var(--text-3);
  transition:background var(--t-bg);
}
.footer__langbtn:hover{ background:var(--surface-2); }
.footer__langbtn svg{ width:20px; height:20px; }

/* ★★ 모바일에서는 <안 그린다> (레드 2026-09-15 「하단 언어선택 모바일에서는 삭제」).

     세 칸(1fr·auto·1fr)이 좁은 화면에서 눌려 단추가 36px 폭이 되고,
     「한국어」 석 자가 <세 줄로 쪼개져> 지구본 옆에 세로로 섰다.

   ⚠ 기능이 사라지는 것이 아니다. 언어는 회원 설정에 그대로 있고,
     푸터 단추는 그리로 가는 <지름길>일 뿐이다. */
@media (max-width:1024px){
  /* 언어 단추를 걷었으니 아래 여백도 같이 줄인다 — 32px 은 단추가 있을 때의 값이다 */
  .footer__bottom{ grid-template-columns:1fr; justify-items:center; padding-bottom:8px; }
  .footer__copy{ grid-column:1; }
  .footer__langbtn{ display:none; }
}


/* ---- 모바일 — 2열로 접는다. 가운데 정렬은 그대로 -------------------- */
@media (max-width:1024px){
  /* ⚠⚠ 탭바 자리를 <두 번> 비워 두고 있었다 (레드 2026-09-15 「하단에 여백 너무 큼」).
       base.css 의 body 가 이미 padding-bottom:var(--tabbar-h) 로 비워 두는데
       여기서 또 더했다 — 60 + 60 + 24 = 144px 이 저작권 밑에 남았다.
     ★ 여기서는 <제 여백만> 준다. 탭바 몫은 body 가 맡는다. */
  .footer{ padding-bottom:16px; }
  .footer__cols{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
  }
  .footer__col{ min-height:0; }
  .footer__collinks a{ padding:10px 0; }
  .footer__social{ justify-content:center; margin-top:32px; }
  .footer__rule{ margin:24px 0; }

  /* 링크 열은 접힌 아코디언이 된다 (루벳 실측 행 32 · 14/700) */
  .footer__cols{ display:block; }
  .footer__col{
    min-height:0; text-align:left;
    border-bottom:1px solid var(--line);
  }
  .footer__coltitle{
    height:48px; margin:0;
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer;
  }
  .footer__coltitle svg{
    display:block; width:24px; height:24px;
    color:var(--text-5);
    transition:transform var(--t-bg);
  }
  .footer__col[open] .footer__coltitle svg{ transform:rotate(180deg); }
  .footer__collinks{ padding-bottom:8px; }
  .footer__collinks a{ padding:8px 0; }

  /* 자산 칩 3열 (루벳 실측 120×44) */
  .footer__coins{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .footer__coin{ height:44px; padding:0 10px; gap:6px; }
  .footer__coinname{ display:none; }
  /*
    신뢰 배지 — 모바일은 <가로 띠 하나>다 (레드 2026-09-14 「이렇게 가로로」).

    ⚠ 전에는 세 덩이를 세로로 쌓았다. 배지가 여섯인데 두 장씩 세 층이라
      푸터에서만 화면 한 장 가까이 먹었다.

    ★ display:contents 로 덩이(.footer__trustcol)와 감싼 칸(.footer__badges)을
      <걷어 낸다> — 여섯 장이 .footer__trust 의 직계가 되어 한 줄로 흐른다.
      래퍼를 남긴 채 가로로 만들면 덩이 단위로만 밀려 두 장이 늘 붙어 다닌다.

    ⚠ 갈래 이름(라이선스·책임 있는 이용·공정성)은 모바일에서 감춘다. 한 줄에
      섞이면 이름과 그림의 짝이 오히려 어긋나 읽힌다 — 뜻은 alt 가 지킨다.

    ★ 좌우로 <화면 끝까지> 흐르게 한다. 여백 안에서 끊기면 더 있다는 것이
      안 보여 아무도 밀지 않는다.
  */
  .footer__trust{
    display:flex; gap:20px;
    grid-template-columns:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    /*
      ⚠⚠ <스냅을 끈다.> (레드 2026-09-15 「계속 누르다보면 빈공간이떠」)

        scroll-snap 이 두 가지를 망가뜨리고 있었다.
        ① 부드럽게 미는 도중에 스냅이 끼어들어 <원래 자리로 되돌렸다> —
          단추를 눌러도 띠가 꿈쩍도 안 했다(실측: scrollLeft 가 16 에서 고정).
        ② snap-align:start 라 마지막 배지가 <왼쪽에> 붙는다. 그러면 그 뒤로
          빈 공간이 한 칸 남아, 띠가 끝났는데 배지가 더 있는 것처럼 보였다.

      ★ 이제 단추가 <배지 자리로 정확히> 민다(Footer 의 nudge). 스냅이 할 일이
        없고, 끝에서는 오른쪽 끝에 맞춰 멈춰 빈 공간이 안 생긴다.
    */
    scroll-snap-type:none;
    /* ★ 부드러움은 <여기서> 준다 — JS 의 behavior:smooth 는 이 요소에서
         아예 안 듣는다(실측). CSS 로 두면 감축모션 배려도 한 줄로 끝난다 */
    scroll-behavior:smooth;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .footer__trust::-webkit-scrollbar{ display:none; }
  .footer__trustcol,
  .footer__badges{ display:contents; }
  .footer__trust .footer__blocktitle{ display:none; }
  .footer__trust .footer__badge{
    flex:0 0 auto; width:auto; min-width:112px; padding:0;
  }
  .footer__trust .footer__badge img{ max-height:44px; }
  /*
    ★ 앙주앙만 <더 크게> (레드 2026-09-15 「1번째 이미지 크게 눌리기」).
      이 로고는 <가로로 긴> 모양이라, 다른 다섯과 같은 높이를 주면 혼자만
      작아 보인다. 눈은 높이가 아니라 <차지한 넓이>로 크기를 잰다.
  */
  .footer__trust .footer__badge[data-badge="anjouan"] img{ max-height:58px; }

  /*
    좌우 단추 — 전달본의 <알약 하나를 반으로 가른> 모양이다
    (레드 2026-09-14). 가운데 선은 두 번째 단추의 왼쪽 테두리 하나로 낸다 —
    사이에 따로 칸을 두면 두 단추의 누르는 넓이가 서로 달라진다.

    ⚠ 띠 <위>에 세운다. 띠 안에 넣으면 함께 흘러가 버린다.
  */
  .footer__stripnav{
    display:flex; justify-content:flex-end;
    margin:0 0 10px;
  }
  .footer__stripnav button{
    /* ★ 작게 (레드 2026-09-15 「좌우 화살표 크기 줄이기」) — 배지를 보러 온
       화면인데 단추가 배지만 하면 그쪽으로 눈이 간다 */
    width:34px; height:26px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:0; color:var(--text-2);
    cursor:pointer;
    transition:background var(--t-bg), color var(--t-color);
  }
  .footer__stripnav button:first-child{ border-radius:var(--r) 0 0 var(--r); }
  .footer__stripnav button:last-child{
    border-radius:0 var(--r) var(--r) 0;
    border-left:1px solid var(--bg);
  }
  .footer__stripnav button:hover{ background:var(--surface-3); color:var(--text); }
  .footer__stripnav button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
  /* 좁은 화면에서도 저작권과 언어 버튼은 같은 줄에 둔다 */
  .footer__bottom{ gap:12px; }
  .footer__copy{ min-width:0; }
}


/* ==========================================================================
   사이드바 아이콘 호버 모션 — 디자이너 「사이드바-아이콘-한글_1/모션.css」
   (레드 2026-09-11 「사이드바 아이콘 변경하자 · 아이콘만 · 마우스오버시 효과도 같이」)

   ★ 아이콘은 Sidebar.tsx SideIcon 이 인라인 SVG 로 그린다(p0 p1 … 부분이 살아 있어야 움직인다).
   ★ 디자이너 CSS 의 .menu-item:hover 를 우리 메뉴 셋(.navitem · .navsolo · .navgroup__btn)으로 바꿔 옮겼다.
     키보드로 올 때도 같이 움직인다(:focus-visible). 값은 디자이너 것 그대로.
   ★ .sidebar 안으로만 묶는다 — 지갑 모달에도 .ico 클래스(이모지 칸)가 있다.
   ★ 키프레임 이름 wave → side-ico-wave (흔한 이름이라 다른 곳과 부딪히지 않게).
   ========================================================================== */
.sidebar .ico{ transition:transform .34s cubic-bezier(.34,1.32,.64,1); }
.sidebar .ico *{ transform-box:fill-box; transform-origin:50% 50%; transition:transform .34s cubic-bezier(.34,1.32,.64,1); }
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-reward .p0,.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-reward .p3,.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-reward .p4,
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-event  .p0,.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-event  .p3,.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-event  .p4{transform:translateY(-3.2px) rotate(-9deg);transform-origin:88% 100%}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-event .p5{transform:rotate(90deg) scale(1.25)}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-vip .p1{transform:translateY(-2px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-vip .p2{transform:translateY(-2.4px);transition-delay:.05s}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-vip .p3{transform:translateY(-2px);transition-delay:.1s}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-favorites .p0{transform:scale(1.16)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-hot .p0{transform:scale(1.12) translateY(-.6px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-new-games .p0{transform:rotate(90deg) scale(1.12)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-new-games .p1{transform:rotate(-90deg) scale(1.3);transition-delay:.06s}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-slots .p2{transform:translateY(-2px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-slots .p3{transform:translateY(-2px);transition-delay:.07s}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-slots .p4{transform:translateY(-2px);transition-delay:.14s}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-baccarat .p0{transform:rotate(-13deg);transform-origin:100% 100%}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-baccarat .p1{transform:rotate(4deg);transform-origin:0% 100%}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-blackjack .p1{transform:scale(1.18) translateY(-.6px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-game-show .p2{transform:rotate(72deg) scale(1.18)}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-roulette{transform:rotate(160deg)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-casino{transform:rotate(72deg)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-sports{transform:rotate(80deg)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-global .p1{transform:translateY(-1.4px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-global .p2{transform:translateY(1.4px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-language .p2{transform:scaleX(.3)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-crypto{transform:rotateY(180deg);transition-duration:.45s}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-live-casino .p1{transform:translateX(1.8px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-futures-game .p2{transform:translateY(-1.6px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-futures-game .p3{transform:translateY(1.6px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-prediction-market .p1{transform:translate(.9px,-.9px) scale(1.06)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-sports{transform:rotate(80deg)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-economy .p1,.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-economy .p2{transform:translate(1.1px,-1.1px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-pm-politics{transform:scale(1.07)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-promotion .p1{transform:rotate(-22deg) scale(1.1)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-referral .p1{transform:translateY(-1.2px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-referral .p2{transform:scale(1.45)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-livechat .p0{transform:translate(-1px,-1px)}
.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-livechat .p1{transform:translate(1px,1px)}

.sidebar :is(.navitem,.navsolo,.navgroup__btn):is(:hover,:focus-visible) .a-inplay .p1{animation:side-ico-wave 1.3s ease-in-out infinite}
@keyframes side-ico-wave{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.55}}
@media (prefers-reduced-motion: reduce){
  .sidebar .ico, .sidebar .ico *{ transition:none !important; animation:none !important; transform:none !important; }
}

/* 갈 곳이 있는 신뢰 배지 (기획팀 2026-09-13) — 누를 수 있다는 것이 보여야 한다.
   ⚠ 링크가 없는 배지(사업자·18+)와 <같은 모양이면 안 된다>. 눌러 보고
     아무 일도 안 일어나면 회원은 그것을 고장으로 읽는다. */
.footer__badge.is-link{
  cursor:pointer;
  transition:border-color var(--t-bg), background var(--t-bg);
}
.footer__badge.is-link:hover{
  border-color:color-mix(in oklab, var(--primary) 60%, var(--line));
  background:var(--surface-3);
}
.footer__badge.is-link:hover i{ color:var(--text-2); }

/* ════════════════════════════════════════════════════════════════════
   푸터 사이트맵 (레드 2026-09-13 「푸터에 사이트맵좀 멋지게」)

   ★ 왼쪽에 <우리가 누구인지>, 오른쪽에 <어디로 갈 수 있는지>.
     예전에는 링크 다섯 열만 가운데 정렬로 떠 있었다 — 기준선이 없어
     글자가 공중에 뜬 것처럼 보였고, 커뮤니티 아이콘은 저 혼자 오른쪽
     끝에 한 줄을 차지했다.

   ⚠ 열을 <가운데 정렬하지 않는다>. 줄 수가 열마다 다른데
     (스포츠 4개 · 약관 6개) 가운데로 맞추면 어느 줄도 서로 안 맞는다.

   ⚠ 열 높이를 못 박지 않는다. min-height:284px 이 있어서 네 줄짜리
     열도 여섯 줄 자리를 차지했다 — 그래서 푸터가 텅 빈 것처럼 보였다.
   ════════════════════════════════════════════════════════════════════ */
.footer__map{
  display:grid;
  grid-template-columns:minmax(200px, 260px) minmax(0, 1fr);
  gap:40px;
  align-items:start;
}

/* ---- 브랜드 ---- */
.footer__brand{ display:grid; gap:14px; justify-items:start; }
.footer__logo{ height:34px; width:auto; opacity:.95; }
.footer__tag{
  margin:0;
  font-size:var(--fs-sm); line-height:1.7;
  color:var(--text-5);
  max-width:30ch;
}

/* ---- 링크 열 — 가운데 정렬을 걷고 왼쪽 기준선에 세운다 ---- */
.footer__map .footer__cols{
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  justify-content:stretch;
  gap:24px 20px;
}
.footer__map .footer__col{
  min-height:0;            /* ⚠ 284px 고정을 푼다 */
  text-align:left;
}
.footer__map .footer__coltitle{
  margin:0 0 10px;
  font-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:.04em;
  color:var(--text-3);
}
/* 행 간격 40 → 28. 다섯 열이 스무 줄을 쓰는 자리라 40 은 너무 성기다 */
.footer__map .footer__collinks a{
  padding:5px 0;
  font-size:var(--fs-sm);
  color:var(--text-5);
}
.footer__map .footer__collinks a:hover{ color:var(--text); }

/* ---- 커뮤니티 — 브랜드 블록 안으로 들어왔다 ---- */
.footer__brand .footer__social{
  margin-top:2px;
  justify-content:flex-start;
}
.footer__brand .footer__social a{ width:36px; height:36px; }

@media (max-width:900px){
  /* ★ 좁아지면 브랜드가 위로. 옆에 붙이면 열이 한 칸에 두 글자씩 들어간다 */
  .footer__map{ grid-template-columns:minmax(0,1fr); gap:28px; }
}

/* ════════════════════════════════════════════════════════════════════
   푸터 모바일 (레드 2026-09-13 「PC푸터는 훌륭한데 모바일은 손을봐야겠다」)

   ⚠⚠ 이 덩이는 <반드시 .footer__map 위에 온다>.
     PC 규칙을 `.footer__map .footer__collinks a` 로 적었더니 선택자가 둘이라
     모바일 블록의 `.footer__collinks a` 보다 셌다. 그래서 모바일에서
     탭 높이가 26px 로 눌렸다 — 손가락으로 누르기엔 너무 작다.
     같은 무게로 다시 적어 되돌린다.

   ★ 모바일 푸터는 <아코디언>이다. 열 제목을 누르면 펴진다.
     다섯 열 스무 줄을 한 번에 세우면 화면 세 개를 잡아먹는다.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  /* ---- 브랜드 ---- */
  .footer__map .footer__brand{ gap:12px; }
  .footer__map .footer__logo{ height:28px; }
  .footer__map .footer__tag{
    /* ⚠ 30ch 가 좁은 화면에서 「앙주안 라 / 이선스」 처럼 어색하게 끊었다.
         칸을 다 쓰고 낱말 단위로 넘기게 둔다. */
    max-width:none;
    font-size:var(--fs-xs);
    line-height:1.75;
    word-break:keep-all;     /* 한국어는 낱말 가운데서 끊지 않는다 */
  }
  .footer__map .footer__brand .footer__social a{ width:40px; height:40px; }

  /* ---- 링크 — 손가락이 닿는 크기로 ---- */
  .footer__map .footer__col{ border-bottom:1px solid var(--line); }
  .footer__map .footer__coltitle{
    height:52px; margin:0;
    font-size:var(--fs-base);
    font-weight:700;
    color:var(--text);
    letter-spacing:0;
  }
  .footer__map .footer__collinks{ padding:2px 0 10px; }
  .footer__map .footer__collinks a{
    /* ★ 44 는 손가락이 닿는 최소 크기다. 26 이었다 */
    min-height:44px;
    display:flex; align-items:center;
    padding:0 0 0 2px;
    font-size:var(--fs-sm);
    color:var(--text-4);     /* 모바일은 밝게 — 작은 글자가 흐리면 안 읽힌다 */
  }

  /* ---- 사이트맵 덩이 자체 ---- */
  .footer__map{ gap:22px; }
}


/* ==========================================================================
   우측 상단 메뉴 아이콘 (레드 2026-09-15)

   ★ 그림에서 <모양만> 빌리고 색은 currentColor 로 칠한다. 그래서 평소엔
     글자와 같은 회색이고, 마우스를 얹으면 글자와 <함께> 밝아진다.
     <img> 로 깔면 흰색이 박혀 아이콘만 도드라지고 hover 를 안 탄다.

   ⚠ -webkit-mask 를 같이 적는다. 빠지면 모양이 사라지는 게 아니라
     <칸 전체가 칠해진다> — 네모난 색판이 뜬다. 오류가 안 나서 못 찾는다.
   ========================================================================== */
.pmenu__ico{
  flex:none; display:block;
  background-color:currentColor;
  -webkit-mask:var(--ico) center / contain no-repeat;
          mask:var(--ico) center / contain no-repeat;
}


/* ★ 머리글 단추 안의 <그림> 아이콘. 선 아이콘과 같은 자리·같은 크기로 앉는다.
     ⚠ pointer-events 를 끈다 — 그림이 눌림을 받으면 링크 대신 그림이 잡혀
       드래그가 시작된다(브라우저 기본 동작). */
.icon-btn__art{ display:block; width:24px; height:24px; pointer-events:none; }