/* ==========================================================================
   override.css — 이지깡 테마/레이아웃 보정 (style.css 다음 로드)
   ========================================================================== */

/* ---- 색상 ---- */
:root{ --color-primary:#2B5CE8; --color-primary-dark:#1E4FBF; --color-primary-light:#E8EEFC; }
.logo__mark, .logo__mark em{ color:#2B5CE8; }

/* ---- 공식등록업체/제휴놀이터 카드: PC 4열, 모바일 2열(썸네일 대비) ---- */
.vbox-grid{ grid-template-columns: repeat(4, 1fr) !important; gap: 14px; }
@media (max-width: 860px){
  .vbox-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .vbox__body{ padding: 10px 10px 12px !important; }
  .vbox__name{ font-size: 13px !important; }
  .vbox__stats{ font-size: 11px !important; }
  .vbox__tier{ font-size: 10px !important; padding: 2px 6px !important; }
}
@media (max-width: 380px){ .vbox-grid{ gap:8px; } }

/* ---- 정식등록업체 카테고리 탭: 전체·소액·구글·카드 4개 한줄 ---- */
.categories--4{ grid-template-columns: repeat(4, 1fr) !important; gap:12px; }
@media (max-width: 860px){
  .categories--4{ grid-template-columns: repeat(4, 1fr) !important; gap:6px; }
  .categories--4 .category-card{ padding:10px 8px !important; }
  .categories--4 .category-card__desc{ display:none; }
}

/* ---- 파트너 배너 6칸 (3열x2행, 모바일 2열) ---- */
.ad-banner-zone__grid{ display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap:3px !important; }
.ad-banner-zone__grid a{ display:block; line-height:0; }
.ad-banner-zone__grid img.ad-slot{ width:100% !important; height:auto !important; aspect-ratio:380/100; border-radius:7px; object-fit:cover; padding:0; }
.ad-banner-zone__grid .ad-slot{ aspect-ratio:380/100; display:flex; align-items:center; justify-content:center; }
@media (max-width: 860px){ .ad-banner-zone__grid{ grid-template-columns: repeat(2, 1fr) !important; } }
/* GIF 깜빡임 방지: 배너 이미지를 별도 GPU 레이어로 승격 (hover 시에도 유지) */
.ad-banner-zone__grid .ad-slot{ transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ad-banner-zone__grid .ad-slot:hover{ transform:translateY(-2px) translateZ(0); }

/* ---- 카테고리 카드 이미지 아이콘 ---- */
.category-card__icon img{ width:46px; height:46px; display:block; }

/* ---- 하단 바로가기 아이콘 이미지 ---- */
.quick-links__icon img{ width:70px; height:70px; display:block; margin:0 auto; }

/* ---- 히어로: 텍스트 포함 이미지 슬라이더 (좌우 전환) ---- */
.hero--slider{ position:relative; background:none !important; padding:0 !important; overflow:hidden;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.hero__track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hero__track .hero__banner{ flex:0 0 100%; width:100%; height:auto; display:block; }
.hero__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.22); color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px);
  transition:background .15s ease; }
.hero__arrow:hover{ background:rgba(255,255,255,.4); }
.hero__arrow--prev{ left:14px; } .hero__arrow--next{ right:14px; }
.hero--slider.is-single .hero__arrow{ display:none; }
@media (max-width:860px){ .hero__arrow{ width:32px; height:32px; font-size:18px; } }

/* ---- 광고 패널: 텍스트 포함 단일 이미지 (박스 330x233 상한, 잘림 없음) ---- */
.ad-panel--img{ background:none !important; padding:0 !important; flex:0 0 auto !important;
  min-height:0 !important; max-height:none !important;
  display:block; line-height:0; width:100%; max-width:330px; aspect-ratio:330 / 200; margin:0 auto;
  border-radius:var(--radius-md); overflow:hidden; box-shadow:0 8px 24px rgba(43,92,232,.18); }
.ad-panel--img .ad-panel__banner{ width:100%; height:100%; object-fit:cover; display:block; }
.ad-panel__banner--mo{ display:none; }
/* 모바일: 좌우 꽉차게(풀폭) + 세로 짧게 → 전용 와이드 이미지로 스왑 */
@media (max-width: 860px){
  .ad-panel--img{ max-width:none !important; aspect-ratio: 1000 / 300 !important; }
  .ad-panel__banner--pc{ display:none !important; }
  .ad-panel__banner--mo{ display:block !important; }
}

/* ---- 사이트 바로가기 버튼: 파랑 배경에서도 잘 보이게(흰 바탕+파란 글씨) ---- */
.btn--site{ background:#FEE500 !important; color:#3B2E1A !important; font-weight: 900;}
  border:1.5px solid var(--color-primary) !important; font-weight:800;
  box-shadow:0 4px 14px rgba(43,92,232,.25); }
.btn--site:hover{ background:var(--color-primary-light) !important; color:var(--color-primary-dark) !important; }

/* ---- 내 이지톡: 카톡풍 노란 버튼 (헤더/드로어) ---- */
.btn--mytalk{ position:relative; background:#FEE500 !important; color:#3B2E1A !important;
  border:0px solid #3B2E1A !important; font-weight:800; box-shadow:0 2px 8px rgba(224,196,0,.5); }
.btn--mytalk:hover{ background:#FADA00 !important; transform:translateY(-1px); }
.drawer__btn--mytalk{ position:relative; background:#FEE500 !important; color:#3B2E1A !important;
  border:0px solid #3B2E1A !important; font-weight:800; }
.drawer__btn--mytalk:hover{ background:#FADA00 !important; }

/* ---- 내 이지톡 안읽음 개수 뱃지 ---- */
.mytalk-badge{ display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:9px;
  background:#ff3b30; color:#fff; font-size:11px; font-weight:800; line-height:1;
  vertical-align:middle; box-shadow:0 1px 3px rgba(0,0,0,.25); }
/* 헤더 버튼에서는 우상단에 겹쳐 띄운다 */
#myTalkBtn .mytalk-badge{ position:absolute; top:-7px; right:-7px; margin-left:0; border:2px solid #fff; }
.mytalk-badge[hidden]{ display:none !important; }
.mytalk-badge--drawer{ margin-left:auto; }

/* ---- 프리미엄 이지톡 버튼: 카톡풍 노란 버튼 ---- */
.panel--premium .btn--mini{
  background:#FEE500 !important; color:#3B2E1A !important; border:none !important;
  border-radius:999px !important; font-weight:800; padding:5px 13px;
  box-shadow:0 2px 8px rgba(224,196,0,.45); transition:transform .12s ease, box-shadow .12s ease; }
.panel--premium .btn--mini:hover{ background:#FADA00 !important;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(224,196,0,.55); }

/* ---- 최신후기 오토스크롤 티커 (화면 5개, 최대 20개 자동 흐름) ---- */
.review-ticker{ position:relative; overflow:hidden; }
.review-ticker .review-feed{ margin-top:0; }
.review-ticker::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:26px;
  background:linear-gradient(rgba(255,255,255,0), var(--color-surface)); pointer-events:none; z-index:2; }

/* ---- 프리미엄 보증업체: 파란 상단바 + 타이틀 이미지 + 폰트 크게 ---- */
.panel--premium{ border-color:#E4EAF6 !important;
  background:linear-gradient(180deg,#F4F7FE 0%,var(--color-surface) 32%) !important;
  box-shadow:0 4px 20px rgba(43,92,232,.10) !important; }
.panel--premium::before{ height:4px !important;
  background:linear-gradient(90deg,#2B5CE8 0%,#5B8CF6 50%,#2B5CE8 100%) !important; }
/* 타이틀은 크게, 리스트 행은 컴팩트하게 */
.panel__title-img{ line-height:0; margin:0; }
.panel__title-img img{ height:27px; width:auto; display:block; }
.srow__logo{ width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; background:#2B5CE8; }
.srow__logo--crown{ background:none !important; color:inherit; font-size:18px; width:22px; }
.panel--premium .srow{ gap:4px; padding:9px 0; }
.panel--premium .srow__rank{ display:none; }
.panel--premium .srow__name{ font-size:13px; }
.panel--premium .srow__score{ font-size:11.5px; }
.panel--premium .srow .tag{ font-size:10.5px !important; padding:2px 6px; }
.panel--premium .btn--mini{ font-size:11.5px; padding:5px 11px; }

/* ==========================================================================
   모바일(홈 전용): 카테고리 → 프리미엄 → 최신후기 → 관리자 전달사항
   (display:contents 사용, 기존 .sidebar .panel{flex:1 1 300px} 무력화가 핵심)
   ========================================================================== */
@media (max-width: 1024px){
  .content--home{ display:flex !important; flex-direction:column !important; gap:10px !important; }
  .content--home > .layout-main,
  .content--home > .sidebar{ display:contents !important; }
  .content--home .hero,
  .content--home .ad-banner-zone,
  .content--home .categories,
  .content--home .board,
  .content--home .panel,
  .content--home .ad-panel{
    flex: 0 0 auto !important; width: 100% !important; min-height: 0 !important; margin: 0 !important;
  }
  .content--home .hero{ order:1; }
  .content--home .ad-banner-zone{ order:2; }
  .content--home .categories{ order:3; }
  .content--home .panel--premium{ order:4; }
  .content--home .board{ order:5; }        /* 최신 후기 */
  .content--home .panel--notice{ order:6; } /* 관리자 전달사항 */
  .content--home .panel--stats{ order:7; }
  .content--home .ad-panel{ order:8; }
}

/* ==========================================================================
   추가: 로고 이미지 · 상단 네비 가운데 · 전체 카드 · 하단 바로가기 모바일 2열
   ========================================================================== */

/* ---- 로고 이미지(헤더/드로어/푸터) ---- */
.logo__img--full{ height:45px; width:auto; display:block; }
.logo__img--compact{ display:none; height:30px; width:auto; }
.drawer__brand-img{ height:33px; width:auto; display:block; }
.logo__img--footer{ height:30px; width:auto; display:block; margin-bottom:12px; }
/* 모바일: 태그라인 포함 풀 로고 대신 심볼 워드마크만 */
@media (max-width: 640px){
  .logo__img--full{ display:none; }
  .logo__img--compact{ display:block; height:40px; }
}

/* ---- 상단 네비게이션 가운데 정렬 (PC) ---- */
@media (min-width: 861px){
  .header__inner .logo{ flex:1 1 0; }
  .header__inner .nav{ flex:0 0 auto; margin:0 auto; }
  .header__inner .header__actions{ flex:1 1 0; display:flex; justify-content:flex-end; }
}

/* ---- 정식등록업체 '전체' 카드: 상단 보더 색상 ---- */
.category-card--all{ border-top-color:#334155; }

/* ---- 헤더 로그인 닉네임 (PC) ---- */
.header__nick{ font-size:13.5px; font-weight:600; color:var(--color-text-muted); white-space:nowrap; margin-right:2px; }
.header__nick strong{ color:var(--color-primary); font-weight:800; }
/* ---- 로그인 계정 박스 (닉네임/트론/내이지톡/로그아웃) : 헤더에서 본문으로 이동 ---- */
/*  디자인 = 모바일 드로어 프로필(.drawer__profile)과 동일한 브랜드 파란 그라데이션 카드 */
.ez-userbox{ display:flex; flex-direction:column; gap:15px; justify-content:center;
  position:relative; overflow:hidden; border-radius:18px; padding:20px 20px 18px; color:#fff;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,107,74,0.35) 0%, rgba(255,107,74,0) 55%),
    linear-gradient(150deg, var(--color-primary-dark,#1E4FBF) 0%, var(--color-primary,#2B5CE8) 55%, #3E72E8 100%);
  box-shadow:0 8px 24px rgba(43,92,232,.25); }
.ez-userbox[hidden]{ display:none !important; }
.ez-userbox__user{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.ez-userbox__avatar{ width:46px; height:46px; border-radius:15px; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0; }
.ez-userbox__welcome{ min-width:0; }
.ez-userbox__welcome strong{ display:block; font-size:15px; font-weight:700; line-height:1.35;
  letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ez-userbox__trx{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:12.5px;
  font-weight:800; color:#ffd76a; text-decoration:none; white-space:nowrap; }
.ez-userbox__trx b{ color:#ffd76a; }
.ez-userbox__trx:hover{ text-decoration:underline; }
.ez-userbox__actions{ display:flex; gap:8px; position:relative; z-index:1; }
.ez-userbox__btn{ flex:1; padding:10px 0; text-align:center; border-radius:10px; font-size:13px;
  font-weight:700; text-decoration:none; transition:transform .15s ease, background .15s ease; }
.ez-userbox__btn:active{ transform:scale(.97); }
.ez-userbox__btn--mytalk{ position:relative; background:#FEE500; color:#3B2E1A; }
.ez-userbox__btn--mytalk:hover{ background:#FADA00; }
.ez-userbox__btn--ghost{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.28); }
.ez-userbox__btn--ghost:hover{ background:rgba(255,255,255,.24); }
/* 홈 : 오른쪽 사이드바 '맨 위' (관리자 전달사항 위) 카드 */
/*  PC = DOM 순서 그대로(사이드바 첫번째) / 모바일(1024 이하) 홈 재배치에서는 전달사항(order 6) 직전 */
@media (max-width:1024px){ .content--home .ez-userbox--side{ order:6; } }
/* 그외 페이지 : 파란 페이지헤더 폭을 줄이고, 오른쪽에 계정 박스를 나란히 */
/*  카드 폭/간격은 foot.asp JS가 아래 본문의 오른쪽 사이드 박스를 실측해서 자동으로 맞춤 (기본 290px) */
.ez-headrow{ display:flex; align-items:stretch; gap:22px; margin-bottom:24px; }
.ez-headrow .page-head{ flex:1; min-width:0; margin-bottom:0; }
.ez-userbox--head{ flex:0 0 290px; }
/* page-head 없는 페이지 : 본문 맨 위 카드 */
.ez-userbox--top{ margin-bottom:16px; }
@media (max-width:860px){
  .ez-headrow{ flex-direction:column; gap:12px; }
  .ez-userbox--head{ flex:none; }
}
/* ---- 모바일 드로어 내 트론 갯수 ---- */
.drawer__trx{ display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:13px; font-weight:800;
  color:#ffd76a; text-decoration:none; }
.drawer__trx b{ color:#ffd76a; }
.drawer__trx:hover{ text-decoration:underline; }
/* ---- 헤더 로그인 버튼 : PC/모바일 모두 카톡 노랑 (내 이지톡 버튼과 톤 통일) ---- */
.header__actions .header__login{
  background:#FEE500 !important; color:#3B2E1A !important;
  border:0 !important; font-weight:800;
  box-shadow:0 2px 8px rgba(224,196,0,.5); }
.header__actions .header__login:hover{ background:#FADA00 !important; transform:translateY(-1px); }
/* ---- 모바일 상단: 로그아웃/닉네임 숨김 (드로어 메뉴엔 유지) ---- */
@media (max-width: 860px){ .header__logout, .header__nick{ display:none !important; } }
/* ---- 모바일 상단: 로그아웃 상태면 로고 오른쪽에 로그인 버튼만 (회원가입은 드로어 메뉴에 있음) ---- */
@media (max-width: 860px){
  .header__actions{ gap:5px; }
  .header__actions .header__login{
    display:inline-flex !important; align-items:center;
    padding:7px 12px; font-size:12.5px; font-weight:800;
    border:0 !important;
  }
  /* 로그인 = 카톡 노랑 (내 이지톡과 동일) */
  .header__actions .header__login{ background:#FEE500 !important; color:#3B2E1A !important; box-shadow:0 2px 8px rgba(224,196,0,.5); }
  .header__actions .header__login:hover{ background:#FADA00 !important; transform:translateY(-1px); }
  /* 회원가입 = 모바일에서는 숨김 (로고 가운데 정렬 자리 확보) */
  .header__actions .header__join{ display:none !important; }
}

/* ---- 모바일 상단(로그인 상태) : 트론 갯수 + 내 이지톡 ---- */
/*  PC 는 기존 닉네임 박스(.ez-userbox)가 담당하므로 이 두 버튼은 숨긴다. */
.header__trx, .header__talk{ display:none; }
@media (max-width: 860px){
  /* 모바일에서는 닉네임 박스를 감추고, 헤더 오른쪽에 트론 갯수 / 내 이지톡만 노출 */
  .ez-userbox{ display:none !important; }
  /* 로고는 모바일에서도 항상 화면 정가운데 (style.css 와 동일하게 left:49% 절대배치).
     로그인 상태에서도 흔들리지 않도록 여기서 한 번 더 못 박아 둔다.
     따라서 오른쪽 버튼은 로고를 침범하지 않도록 폭을 최대한 좁게 쓴다. */
  .header__inner{ position:relative; }
  .header .logo{ position:absolute; left:49%; transform:translateX(-50%); margin:0; z-index:2; }
  .header__actions{ gap:5px; flex-shrink:0; }
  .header__trx, .header__talk{
    display:inline-flex !important; align-items:center; white-space:nowrap;
    padding:7px 10px; border-radius:9px; font-size:12.5px; font-weight:800;
    text-decoration:none; border:0; }
  /* 트론 갯수 = 진한 남색 + 금색 숫자 */
  .header__trx{ gap:3px; background:#1E2A4A; color:#ffd76a; box-shadow:0 2px 8px rgba(30,42,74,.35); }
  .header__trx b{ color:#ffd76a; font-weight:900; }
  /* 내 이지톡 = 카톡 노랑 (드로어/계정박스와 동일 톤) */
  .header__talk{ position:relative; gap:3px; background:#FEE500; color:#3B2E1A;
    box-shadow:0 2px 8px rgba(224,196,0,.5); }
  .header__talk .mytalk-badge{ position:absolute; top:-6px; right:-6px; margin-left:0; border:2px solid #fff; }
}
/* 가운데 로고와 부딪히지 않게, 좁은 화면에서는 '내 이지톡' 글자를 빼고 아이콘만 남긴다 */
@media (max-width: 600px){
  .header__talk-t{ display:none; }
  .header__talk{ padding:7px 9px; font-size:14px; }
  .header__trx{ padding:7px 9px; }
}
@media (max-width: 400px){
  .header__trx, .header__talk{ padding:6px 7px; font-size:11.5px; }
  .header__talk{ font-size:13px; }
  .header__actions{ gap:4px; }
}

/* ==========================================================================
   상단 메뉴 : 트론채굴만 강조 (반짝이는 그라데이션 알약)
    - head.asp 에서 MenuKeys 가 "tron" 일 때만 .nav__link--tron 이 붙는다
   ========================================================================== */
/* 링크 자체는 껍데기 : 태그가 위로 넘칠 수 있게 overflow 를 열어둔다 */
.nav__link--tron{
  padding:0 !important; overflow:visible; position:relative;
  display:inline-flex; align-items:center;
  transition:transform .15s ease; }
.nav__link--tron:hover{ transform:translateY(-1px); }
/* 알약 본체 : 반짝임을 잘라내야 하므로 여기서만 overflow:hidden */
.nav__tron-pill{
  color:#fff; font-weight:800;
  /* 세로는 슬림하게 : 좌우 여백으로만 알약 모양을 만든다 */
  padding:0px 13px; line-height:1.55; font-size:14.5px;
  border-radius:999px;
  background:linear-gradient(100deg,#1E4FBF 0%,#3E72E8 45%,#FF6B4A 130%);
  box-shadow:0 3px 12px rgba(43,92,232,.4);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:5px;
  transition:box-shadow .15s ease; }
.nav__link--tron:hover .nav__tron-pill{ box-shadow:0 5px 16px rgba(43,92,232,.5); }
.nav__tron-ic{ font-size:13px; line-height:1; }
/* 빛이 주기적으로 지나가는 효과 */
.nav__tron-pill:before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  animation:navTronShine 2.6s ease-in-out infinite; pointer-events:none; }
@keyframes navTronShine{ 0%{ left:-60%; } 55%{ left:120%; } 100%{ left:120%; } }
/* EVENT 태그 : 알약 위에 뜨는 빨간 접힌 리본 (양옆으로 띠가 접혀 내려온 모양) */
.nav__tron-tag{ position:absolute; z-index:3; top:-13px; left:50%; transform:translateX(-50%);
  padding:4px 10px; border-radius:3px; white-space:nowrap;
  color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.04em; line-height:1;
  background:linear-gradient(180deg,#FF4E45,#D6211A);
  box-shadow:0 2px 6px rgba(214,33,26,.4); }
.nav__tron-tag:before, .nav__tron-tag:after{ content:""; position:absolute; bottom:-5px;
  width:0; height:0; border:5px solid transparent; }
.nav__tron-tag:before{ left:0; border-top-color:#9E1610; border-right-width:0; }
.nav__tron-tag:after{ right:0; border-top-color:#9E1610; border-left-width:0; }
/* 현재 페이지일 때 기본 메뉴의 파란 밑줄은 알약과 겹치므로 숨긴다 */
.nav__link--tron.is-active{ color:#fff !important; }
.nav__link--tron.is-active::after{ display:none !important; }
/* 애니메이션 최소화 설정을 켠 사용자에게는 반짝임을 멈춘다 */
@media (prefers-reduced-motion: reduce){ .nav__tron-pill:before{ animation:none; opacity:0; } }

/* ---- 모바일 드로어 메뉴 : 트론채굴 줄 강조 ---- */
/*  왼쪽 세로 바는 style.css 의 .drawer__link::before 를 그대로 쓴다 (색만 금색으로) */
.drawer__link--tron{ color:#1b2338 !important; font-weight:800;
  background:linear-gradient(90deg,#FFF6DB 0%,#fff 85%); }
.drawer__link--tron::before{ transform:translateY(-50%) scaleY(1); background:#E9B10A; }
.drawer__link--tron .drawer__link-icon{ background:#FFF0C2; }
.drawer__link-tag{ margin-left:auto; background:#2b3550; color:#ffd76a;
  font-size:10px; font-weight:800; letter-spacing:.02em;
  padding:3px 7px; border-radius:999px; white-space:nowrap; }

/* ---- 이지톡 로그인 모달 ---- */
.ez-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; }
.ez-modal.is-open{ display:flex; }
.ez-modal__dim{ position:absolute; inset:0; background:rgba(15,20,40,.55); }
.ez-modal__panel{ position:relative; z-index:1; width:min(92vw,360px); background:#fff; border-radius:18px;
  padding:30px 24px 24px; box-shadow:0 24px 60px rgba(10,20,60,.32); text-align:center;
  animation:ezPop .18s ease; }
@keyframes ezPop{ from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.ez-modal__x{ position:absolute; top:12px; right:12px; width:32px; height:32px; border:none; cursor:pointer;
  background:#EEF1F7; border-radius:50%; font-size:16px; line-height:1; color:#5a6b85; }
.ez-modal__x:hover{ background:#E2E7F0; }
.ez-modal__brand{ font-size:24px; font-weight:900; color:var(--color-primary); letter-spacing:-.03em; }
.ez-modal__brand em{ font-style:normal; color:var(--color-primary-dark); }
.ez-modal__title{ margin:12px 0 4px; font-size:18px; font-weight:800; }
.ez-modal__desc{ margin:0 0 18px; font-size:13.5px; color:var(--color-text-muted); }
.ez-modal__form{ display:flex; flex-direction:column; gap:10px; }
.ez-modal__form .field__input{ width:100%; }
.ez-modal__form .btn{ margin-top:2px; }
.ez-modal__foot{ margin-top:16px; font-size:13px; color:var(--color-text-muted); }
.ez-modal__foot a{ color:var(--color-primary); font-weight:700; }

/* ---- 하단 바로가기: 모바일에서도 한 줄 2개 ---- */
@media (max-width: 520px){
  .quick-links{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* 브레드크럼(홈 › 자유게시판) 글씨 더 잘 보이는 회색으로 */
.breadcrumb{ color:#6b7280 !important; }
.breadcrumb a{ color:#6b7280 !important; text-decoration:none; }
.breadcrumb a:hover{ color:var(--color-primary) !important; text-decoration:underline; }
.breadcrumb span{ color:#c2c7d0 !important; }

@media (max-width:860px){
  .drawer{ height:100dvh; -webkit-overflow-scrolling:touch; overflow-y:auto; }
  .drawer__profile, .drawer__nav, .drawer__foot{ flex-shrink:0; }
}
/* ---- 정식등록업체: 대분류 바로가기 탭 선택 상태 ---- */
.category-card{ text-decoration:none; }
.category-card.is-active{
  box-shadow: var(--shadow-hover);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.category-card.is-active .category-card__title{ color: var(--color-primary); }
 
/* 업체카드 분류 태그 : PC = 업체명과 같은 줄 / 모바일 = 업체명 아래 줄 */
.vbox__name .vbox__cats{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.vbox__cats .tag{ font-size:11px; padding:3px 8px; }
@media (max-width:860px){
  .vbox__name .vbox__cats{ flex-basis:100%; margin-top:3px; gap:3px; }
  .vbox__cats .tag{ font-size:10px; padding:2px 6px; }
}
 
/* 복합분류(소액+컨텐츠 등) — 분류 태그가 여러 개 붙는 경우 */
.srow .tag{ flex-shrink:0; }
@media (max-width:480px){
  .srow{ flex-wrap:wrap; }
  .srow__name{ white-space:normal; }
}

/* ---- 업체 상세 히어로: 한줄 소개 (admin 의 intro 필드) ---- */
.shop-hero__intro{
  margin: 0 0 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.93);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 860px){
  .shop-hero__intro{ font-size: 13.5px; margin-bottom: 8px; }
}
.vbox__tier--normal{
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: none;
}


/* =========================================================
   SEO Guide
   기존 이지깡 화이트 + 블루 계열 UI에 맞춘 스타일
   ========================================================= */

.seo-guide{
  margin-top:32px;
  padding:28px;
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:16px;
  box-shadow:0 4px 18px rgba(15,23,42,.035);
}


/* =========================================================
   Header
   ========================================================= */

.seo-guide__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}

.seo-guide__eyebrow{
  display:inline-flex;
  align-items:center;
  margin-bottom:6px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.8px;
  color:#0284C7;
}

.seo-guide__head h2{
  margin:0;
  font-size:21px;
  line-height:1.4;
  font-weight:800;
  color:#172033;
}

.seo-guide__head p{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.65;
  color:#7a8495;
}


/* =========================================================
   Content Grid
   ========================================================= */

.seo-guide__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}


/* =========================================================
   Content Card
   ========================================================= */

.seo-guide__card{
  display:flex;
  gap:15px;
  padding:20px;
  border:1px solid #edf0f5;
  border-radius:13px;
  background:#fbfcfe;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.seo-guide__card:hover{
  border-color:#cfe7f5;
  box-shadow:0 7px 20px rgba(2,132,199,.07);
  transform:translateY(-1px);
}


/* =========================================================
   Icon
   ========================================================= */

.seo-guide__icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  font-size:17px;
  font-weight:800;
  color:#fff;
  background:#0284C7;
}

.seo-guide__icon--money{
  background:#0284C7;
}

.seo-guide__icon--blue{
  background:#1479b8;
}

.seo-guide__icon--purple{
  background:#6366d9;
}

.seo-guide__icon--violet{
  background:#7657c7;
}

.seo-guide__icon--red{
  background:#dc5b5b;
}

.seo-guide__icon--orange{
  background:#e58b38;
}


/* =========================================================
   Text
   ========================================================= */

.seo-guide__content{
  flex:1;
  min-width:0;
}

.seo-guide__content h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.4;
  font-weight:800;
  color:#20283a;
}

.seo-guide__content p{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.75;
  color:#697386;
  word-break:keep-all;
}

.seo-guide__content p:last-of-type{
  margin-bottom:12px;
}

.seo-guide__content strong{
  color:#374151;
  font-weight:800;
}


/* =========================================================
   Link
   ========================================================= */

.seo-guide__link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:800;
  color:#0284C7;
  text-decoration:none;
}

.seo-guide__link span{
  font-size:17px;
  line-height:10px;
  transition:transform .15s ease;
}

.seo-guide__link:hover span{
  transform:translateX(3px);
}


/* =========================================================
   Check Notice
   ========================================================= */

.seo-guide__notice{
  margin-top:16px;
  padding:21px;
  border:1px solid #dcecf5;
  border-radius:13px;
  background:linear-gradient(135deg,#f8fcff,#fbfdff);
}

.seo-guide__notice-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.seo-guide__notice-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#0284C7;
  color:#fff;
  font-size:17px;
  font-weight:900;
}

.seo-guide__notice-head h3{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:#1d2939;
}

.seo-guide__notice-head p{
  margin:4px 0 0;
  font-size:12.5px;
  color:#778195;
  line-height:1.6;
}


/* =========================================================
   Checks
   ========================================================= */

.seo-guide__checks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.seo-guide__check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px;
  border-radius:10px;
  background:#fff;
  border:1px solid #edf1f5;
}

.seo-guide__check > span{
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:#eaf6fc;
  color:#0284C7;
  font-size:10px;
  font-weight:900;
}

.seo-guide__check strong{
  display:block;
  margin:1px 0 3px;
  font-size:12.5px;
  color:#30394a;
}

.seo-guide__check p{
  margin:0;
  font-size:11.5px;
  line-height:1.5;
  color:#7b8494;
}


/* =========================================================
   FAQ
   ========================================================= */

.seo-guide__faq{
  margin-top:25px;
  padding-top:23px;
  border-top:1px solid #edf0f4;
}

.seo-guide__faq-head{
  margin-bottom:13px;
}

.seo-guide__faq-head h3{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:#20283a;
}

.seo-faq-list{
  border-top:1px solid #e9edf2;
}

.seo-faq{
  border-bottom:1px solid #e9edf2;
}

.seo-faq summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 35px 15px 2px;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:700;
  color:#30394a;
}

.seo-faq summary::-webkit-details-marker{
  display:none;
}

.seo-faq summary::after{
  content:'+';
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  font-size:19px;
  font-weight:400;
  color:#98a2b3;
}

.seo-faq[open] summary::after{
  content:'−';
  color:#0284C7;
}

.seo-faq summary > span{
  flex:0 0 25px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:#edf8fd;
  color:#0284C7;
  font-size:10px;
  font-weight:900;
}

.seo-faq__answer{
  padding:0 35px 17px 37px;
}

.seo-faq__answer p{
  margin:0;
  font-size:12.5px;
  line-height:1.75;
  color:#737d8e;
  word-break:keep-all;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width:900px){

  .seo-guide{
    padding:22px;
  }

  .seo-guide__checks{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:600px){

  .seo-guide{
    margin-top:22px;
    padding:18px 14px;
    border-radius:13px;
  }

  .seo-guide__head{
    margin-bottom:16px;
  }

  .seo-guide__head h2{
    font-size:18px;
  }

  .seo-guide__head p{
    font-size:12px;
  }

  .seo-guide__grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  .seo-guide__card{
    padding:16px;
    gap:12px;
  }

  .seo-guide__icon{
    flex-basis:35px;
    width:35px;
    height:35px;
    border-radius:9px;
    font-size:15px;
  }

  .seo-guide__content h3{
    font-size:14px;
    margin-bottom:6px;
  }

  .seo-guide__content p{
    font-size:12px;
    line-height:1.7;
  }

  .seo-guide__link{
    font-size:11.5px;
  }

  .seo-guide__notice{
    padding:16px;
  }

  .seo-guide__notice-head{
    align-items:flex-start;
    margin-bottom:13px;
  }

  .seo-guide__notice-head p{
    font-size:11.5px;
  }

  .seo-guide__checks{
    grid-template-columns:1fr;
    gap:7px;
  }

  .seo-guide__check{
    padding:11px;
  }

  .seo-guide__faq{
    margin-top:20px;
    padding-top:19px;
  }

  .seo-faq summary{
    font-size:12px;
    padding:13px 30px 13px 0;
  }

  .seo-faq__answer{
    padding:0 20px 14px 35px;
  }

  .seo-faq__answer p{
    font-size:11.5px;
  }

}