/* home.css - 통합 스타일 (모바일 강제 + 디자인 리뉴얼) */

/* =========================================
   1. [핵심] 모바일 레이아웃 강제 설정 (PC 방어)
   ========================================= */
/* 박스 모델 초기화 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* PC 배경 및 중앙 정렬 */
body {
  background-color: #f0f2f5; /* PC 배경색 (연회색) */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Noto Sans KR', sans-serif;
  overflow-y: scroll; /* 스크롤바 공간 미리 확보 */
}

/* 앱 컨테이너 (스마트폰 화면) */
#app {
  width: 100%;
  max-width: 480px; /* 모바일 폭 고정 */
  background-color: #ffffff;
  position: relative;
  box-shadow: 0 0 30px rgba(0,0,0,0.1); /* 입체감 그림자 */
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
}

/* 헤더/푸터 강제 고정 (중앙 정렬 유지) */
.topbar, .bottomnav {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 480px !important;
  right: auto !important;
}

/* =========================================
   2. 기존 컴포넌트 스타일 (유지 및 수정)
   ========================================= */

/* Sticky Header */
.topbar{
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.95); /* 가독성 위해 투명도 낮춤 */
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}

.topbar__inner{
  height:var(--top);
  padding: 0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;align-items:center;gap:10px;
  min-width:0;
  text-decoration: none; /* 링크 밑줄 제거 */
}
.brand__mark{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--p2);
  color:var(--p);
  font-weight:900;
}
.brand__name{
  font-weight:900;
  letter-spacing:-.4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 16px; /* 폰트 크기 고정 */
}

/* Searchbar */
.searchbar{
  padding: 0 var(--pad) 12px;
}
.searchbar__field{
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:0 10px;
}
.searchbar__field svg{width:20px;height:20px;fill:var(--muted)}
.searchbar__field input{
  flex:1;
  border:0;
  outline:none;
  font-size:14px;
}

/* Tabs */
.tabs{
  padding: 0 var(--pad);
  display:flex;
  align-items:center;
  gap:18px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
/* 스크롤바 숨김 */
.tabs::-webkit-scrollbar{display:none}

.tabs--primary{ height: var(--tabs1); }

/* [수정] 탭 간격 및 겹침 방지 */
.tabs--secondary{ 
  /* height: var(--tabs2);  */
  padding-bottom:10px; 
  margin-top: 10px; 
}

.tab{
  height:44px;
  border:0;
  background:transparent;
  font-weight:800;
  color:rgba(17,18,22,.55);
  position:relative;
  padding:0;
  flex:0 0 auto;
  cursor: pointer;
}
.tab.is-active{ color:var(--text); }
.tab.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:6px;
  height:2px;
  border-radius:2px;
  background:var(--p);
}

.chip{
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:rgba(17,18,22,.72);
  font-weight:800;
  flex:0 0 auto;
  cursor: pointer;
}
.chip.is-active{
  background:var(--p2);
  border-color:transparent;
  color:var(--p);
}

/* Main Layout */
.main{
  flex:1 1 auto;
  /* [수정] 헤더 높이만큼 상단 여백 확보 (겹침 방지) */
  padding: 160px var(--pad) 80px; 
}

/* =========================================
   [수정 완료] 배너 스타일 (흰색 글씨 + 그림자)
   ========================================= */
/* css/home.css - 배너 스타일 수정 (텍스트 위치 조정) */

.banner__card {
  position: relative;
  border-radius: 22px;
  background-color: #2a2a2a;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  align-items: center; /* 수직 중앙 정렬 */
  min-height: 200px;
  margin-top: 6px;
  /* 배경 이미지 */
  background-image: url('../img/main-banner-bg.jpg'); 
  background-size: cover;      
  background-position: center; 
  background-repeat: no-repeat; 
  color: #fff;
}

.banner__copy { 
  padding: 24px 24px; /* 패딩 유지 */
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column; /* 위에서 아래로 배치 */
  justify-content: center;
}

/* [수정] 상단 설명 문구 (제일 위로) */
.banner__top-text {
  margin: 0 0 8px 0; /* 아래 제목과의 간격 */
  font-size: 13px;
  color: #FFD700;    /* 눈에 확 띄는 금색(Gold) 포인트! */
  font-weight: 700;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  
  /* 배너 상단 라인에 딱 맞게 위치 보정 */
  transform: translateY(-30px); 
}

/* [수정] 메인 제목 (그 아래) */
.banner__copy h1 {
  margin: 0;
  transform: translateY(-30px);
  font-size: 26px; /* 크기 살짝 키움 */
  line-height: 1.25;
  letter-spacing: -0.8px;
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* 기존 p 태그 스타일은 위 .banner__top-text로 대체됨 */
/* 기존 장식(orb)은 배경이 화려하므로 숨김 처리 */
.banner__art, .orb, .orb--2 {
  display: none; 
}

/* Sections */
.section{ margin-top:24px; }
.section__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.section__title{
  margin:0;
  font-size:16px;
  letter-spacing:-.3px;
}
.section__more{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}

/* Gmae Grid */
.gamegrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.game{
  height:130px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px;
  cursor: pointer;
  text-decoration: none; /* 링크 밑줄 제거 */
}
.game_icon {width: 50px; height: 50px; border-radius: 10px;}
.game__txt{font-size:13px;font-weight:900;color:rgba(17,18,22,.82)}


/* Category Grid */
.catgrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.cat{
  height:72px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px;
  cursor: pointer;
  text-decoration: none; /* 링크 밑줄 제거 */
}
.cat__ico{font-size:20px}
.cat__txt{font-size:13px;font-weight:900;color:rgba(17,18,22,.82)}

/* Consultant List */
.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:12px;
  box-shadow: 0 8px 24px rgba(17,18,22,.05);
}

.thumb{
  width:120px;
  height:180px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  flex:0 0 auto;
  background:linear-gradient(135deg, rgba(106,62,181,.20), rgba(237,231,246,.65));
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cbody{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.row1{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
}
.name{
  font-weight:1000;
  letter-spacing:-.3px;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.id{
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  flex:0 0 auto;
}

.tags{
  color:rgba(17,18,22,.62);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 가격표 박스 스타일 */
.price-box {
  background: #f9f9fb;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid #eee;
}

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(17,18,22,.70);
  font-size:12px;
  font-weight:800;
}
.meta .stars{ display:flex;align-items:center;gap:6px; }

.cta{
  margin-top:auto;
  display:flex;
  gap:10px;
  align-items:center;
}

/* =========================================
   3. [디자인 리뉴얼] 버튼 스타일
   ========================================= */

/* (1) 카카오톡 버튼: 쨍한 노랑 */
.kakaobtn {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  background: #FEE500;
  color: #381e1f;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* (2) 예약 버튼: 소프트 라벤더 그레이 (노랑 보색 계열) */
.callbtn {
  flex: 1;
  width: auto;
  height: 40px;
  border-radius: 12px;
  background: #E8EAF6; /* Soft Indigo/Lavender */
  color: #3949AB;      /* Deep Indigo Text */
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.kakaobtn:active, .callbtn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.callbtn:disabled{
  background:rgba(17,18,22,.12);
  color:rgba(17,18,22,.35);
}

/* Empty State */
.empty{
  margin-top:14px;
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(17,18,22,.18);
  color:var(--muted);
  text-align:center;
}

/* Bottom Nav */
.bottomnav{
  position:fixed;
  left:0;right:0;bottom:0;
  height:56px;
  padding-bottom: env(safe-area-inset-bottom);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 메뉴 4개로 변경 */
  z-index:120;
}

.bnav{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:rgba(17,18,22,.62);
  font-weight:900;
  font-size:11px;
  text-decoration: none;
}
.bnav__ico{font-size:18px; line-height:1}
.bnav.is-active{color:var(--p)}

/* =========================================
   4. Desktop Layout Override (무력화)
   ========================================= */
/* PC에서도 모바일 레이아웃(480px, 1열 리스트, 4열 그리드)을 강제 유지 */
@media (min-width: 768px){
  .main{ max-width: 100% !important; margin: 0 !important; }
  .catgrid{ grid-template-columns: repeat(4, 1fr) !important; }
  .list{
    display:flex !important;
    flex-direction:column !important;
  }
}

/* [수정됨] 상담 배지 스타일 (이름 옆 배치) */
.badge-container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 공통 배지 디자인 */
.my-badge {
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* 분야별 컬러 */
.badge-ziwei { background: #9C27B0; }   /* 자미두수 */
.badge-myeongri { background: #2E7D32; } /* 사주명리 */
.badge-nakshatra { background: #FF9800; } /* 낙샤트라 */
.badge-tarot { background: #5C6BC0; }    /* 타로 */
.badge-pastlife { background: #E53935; } /* 전생 */
.badge-spirit { background: #555555; }   /* 신점 */