/* =========================================================
   상담하기 레이어 (modal) - 통짜 완성본 (반응형/스케일 통일)
   목표:
   - PC: 740px 고정 느낌 + 여백(패딩) 충분
   - Mobile: 화면에 맞게 자연스럽게 축소(깨짐 방지)
   - 이미지/번호/이름/가격/시간버튼/코인박스/설명/하단버튼 전부
     동일 스케일 변수(--s)로 같이 커졌다 작아졌다
   ========================================================= */

/* ===== overlay ===== */
.counsel-layer{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}
.counsel-layer.is-open{display:block;}

.counsel-layer .dim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

/* =========================================================
   핵심: 패널 폭을 740px로 “적당히” 제한 + 스케일 변수로 전체 크기 동기화
   ========================================================= */
.counsel-layer .panel{
  --baseW: 740; /* PC 기준 폭 */

  /* 화면 너비에 따라 자동 스케일(모바일 ↓, PC 약간 ↑ 허용) */
  --s: clamp(.78, calc((100vw - 64px) / (var(--baseW) * 1px)), 1.05);

  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transform-origin:center center;

  width:min(740px, calc(100vw - 64px));
  max-height:calc(100vh - 64px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  background:#fff;
  border-radius:calc(20px * var(--s));
  box-shadow:0 calc(20px * var(--s)) calc(60px * var(--s)) rgba(0,0,0,.35);
}

/* 모바일에서는 더 넉넉하게 화면에 붙여주기 */
@media (max-width: 520px){
  .counsel-layer .panel{
    width:min(560px, calc(100vw - 24px));
    max-height:calc(100vh - 24px);
    --s: clamp(.78, calc((100vw - 24px) / (var(--baseW) * 1px)), 1.00);
  }
}

/* ===== header ===== */
.counsel-layer .head{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:calc(18px * var(--s)) calc(18px * var(--s)) calc(14px * var(--s));
  border-bottom:1px solid #eee;
}
.counsel-layer .head .ttl{
  font-size:calc(22px * var(--s));
  font-weight:900;
  color:#111;
  line-height:1.1;
}
.counsel-layer .head .btn-x{
  position:absolute;
  right:calc(12px * var(--s));
  top:calc(10px * var(--s));

  width:calc(44px * var(--s));
  height:calc(44px * var(--s));
  border:0;
  background:transparent;
  cursor:pointer;

  font-size:calc(28px * var(--s));
  line-height:calc(44px * var(--s));
  color:#999;
}

/* ===== hero (프로필 배너) ===== */
.counsel-layer .hero{
  position:relative;
  padding:calc(18px * var(--s));
  min-height:calc(140px * var(--s));

  display:flex;
  align-items:center;
  gap:calc(16px * var(--s));

  /* 왼쪽 시작 + 오른쪽 빈공간 완화 */
  /*
  background:
    radial-gradient(calc(340px * var(--s)) calc(340px * var(--s)) at 88% 35%, rgba(74,167,255,.33), rgba(74,167,255,0) 72%),
    radial-gradient(calc(420px * var(--s)) calc(420px * var(--s)) at 62% 82%, rgba(28,134,216,.22), rgba(28,134,216,0) 72%)
    linear-gradient(90deg, #ffeef1 0%, #ffeef1 34%, #f0f6ff 100%);
  */
}
.counsel-layer .hero .thumb{
  width:calc(250px * var(--s));
  /*height:calc(120px * var(--s));*/
  height : auto;
  border-radius:calc(16px * var(--s));
  overflow:hidden;
  background:#fff;
  box-shadow:0 calc(10px * var(--s)) calc(30px * var(--s)) rgba(0,0,0,.12);
  flex:0 0 auto;
}
.counsel-layer .hero .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 텍스트(번호/이름)도 같이 스케일 */
.counsel-layer .hero .info{min-width:0;}
.counsel-layer .hero .no{
  font-size:calc(30px * var(--s));
  font-weight:900;
  color:#4aa7ff;
  letter-spacing:-1px;
  line-height:1.05;
  white-space:nowrap;
  margin-top: 5px;
}
.counsel-layer .hero .name{
  margin-top:calc(6px * var(--s));
  font-size:calc(26px * var(--s));
  font-weight:900;
  color:#fff;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(480px * var(--s));
}

.counsel-layer .hero .c_like{
  margin-top:calc(15px * var(--s));
  font-size:calc(17px * var(--s));
  font-weight:900;
  color:#fff;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(480px * var(--s));
}

.counsel-layer .hero .c_category{
  margin-top:calc(6px * var(--s));
  font-size:calc(17px * var(--s));
  font-weight:900;
  color:#fff;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(480px * var(--s));
}

/* ===== body ===== */
.counsel-layer .body{
  padding:calc(18px * var(--s));
}

/* row (채팅상담/가격) */
.counsel-layer .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(10px * var(--s));
  padding:calc(10px * var(--s)) 0;
  border-bottom:1px solid #f1f1f1;
}

.counsel-layer .type{
  display:flex;
  align-items:center;
  gap:calc(10px * var(--s));
  font-size:calc(18px * var(--s));
  font-weight:900;
  color:#111;
}
.counsel-layer .type .ico{
  width:calc(34px * var(--s));
  height:calc(34px * var(--s));
  border-radius:999px;
  display:grid;
  place-items:center;
  border:2px solid #a9d7ff;
  color:#2a93ff;
  font-weight:900;
  font-size:calc(16px * var(--s));
}

.counsel-layer .price{
  display:flex;
  align-items:center;
  gap:calc(10px * var(--s));
  font-size:calc(18px * var(--s));
  font-weight:900;
  color:#111;
  white-space:nowrap;
}
.counsel-layer .pill{
  padding:calc(6px * var(--s)) calc(10px * var(--s));
  border-radius:calc(10px * var(--s));
  background:#f3f3f3;
  color:#666;
  font-weight:800;
  font-size:calc(13px * var(--s));
  white-space:nowrap;
}

/* ===== time select ===== */
.counsel-layer .sec-ttl{
  margin:calc(14px * var(--s)) 0 calc(10px * var(--s));
  font-size:calc(16px * var(--s));
  font-weight:900;
  color:#111;
}

/* PC: 4칸 / Mobile: 2칸 */
.counsel-layer .times{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:calc(10px * var(--s));
}
@media (max-width: 520px){
  .counsel-layer .times{grid-template-columns:repeat(2, 1fr);}
}

.counsel-layer .time-btn{
  height:calc(44px * var(--s));
  border-radius:calc(12px * var(--s));
  border:1px solid #e7e7e7;
  background:#fff;
  font-size:calc(16px * var(--s));
  font-weight:900;
  color:#777;
  cursor:pointer;
}
.counsel-layer .time-btn.is-on{
  border-color:#FEE500;
  /*background:rgba(74,167,255,.10);*/
  background: #fff9c7;
  color:#000;
}

/* =========================================================
   coin-box (login/guest) - 전부 스케일 + 모바일 깨짐 방지
   ========================================================= */
.counsel-layer .coin-box{
  margin-top:calc(18px * var(--s));
  border:1px solid #cdcdcd;
  background:#f2f2f2;
  border-radius:calc(18px * var(--s));
  padding:calc(18px * var(--s));
}

/* guest */
.counsel-layer .coin-guest{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(14px * var(--s));
}
.counsel-layer .coin-guest-left{min-width:0;}
.counsel-layer .coin-guest .txt{
  font-size:calc(16px * var(--s));
  color:#222;
  font-weight:800;
  margin-bottom:calc(6px * var(--s));
  white-space:nowrap;
}
.counsel-layer .coin-guest .sub{
  font-size:calc(18px * var(--s));
  color:#111;
  font-weight:900;
  white-space:nowrap;
}

/* user */
.counsel-layer .coin-user{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(12px * var(--s));
}
.counsel-layer .coin-user .coin-col{
  flex:1 1 0;
  min-width:0;
  text-align:center;
}

.counsel-layer .coin-user .txt{
  /* ✅ 최소 12px 보장 + 스케일 */
  font-size:clamp(12px, calc(16px * var(--s)), 16px);
  color:#222;
  font-weight:800;
  margin-bottom:calc(6px * var(--s));
  white-space:nowrap;
}

/* ✅ 숫자도 최소 12px 보장 + 한줄 유지 */
.counsel-layer .coin-user .val{
  font-size:clamp(12px, calc(26px * var(--s)), 26px);
  font-weight:900;
  color:#111;
  letter-spacing:-.35px;
  line-height:1.05;
  white-space:nowrap;
  word-break:keep-all;
}
.counsel-layer .coin-user .val.red{color:#ef4444;}

.counsel-layer .coin-user .sub2{
  margin-top:calc(6px * var(--s));
  font-size:clamp(10px, calc(14px * var(--s)), 14px);
  color:#7a7a7a;
  font-style:italic;
  font-weight:800;
  white-space:nowrap;
}

/* arrow */
.counsel-layer .coin-user .coin-arrow{
  width:calc(18px * var(--s));
  height:calc(18px * var(--s));
  border-right:calc(3px * var(--s)) solid #FEE500;
  border-bottom:calc(3px * var(--s)) solid #FEE500;
  transform:rotate(-45deg);
  margin:0 calc(2px * var(--s));
  flex:0 0 auto;
  opacity:.95;
}

/* charge button */
.counsel-layer .btn-charge{
  flex:0 0 auto;
  border:none;
  border-radius:999px;
  padding:calc(14px * var(--s)) calc(18px * var(--s));
  background:#FEE500;
  color:#000;
  font-weight:900;
  font-size:calc(18px * var(--s));
  cursor:pointer;
  white-space:nowrap;
}
.counsel-layer .btn-charge:active{transform:translateY(1px);}

/* 모바일에서는 버튼이 너무 커지면 살짝 줄이기 */
@media (max-width: 520px){
  .counsel-layer .btn-charge{
    font-size:clamp(12px, calc(16px * var(--s)), 16px);
    padding:calc(12px * var(--s)) calc(16px * var(--s));
  }
}

/* ===== desc ===== */
.counsel-layer .desc{
  margin:calc(14px * var(--s)) 0 calc(10px * var(--s));
  color:#777;
  font-size:clamp(12px, calc(13px * var(--s)), 13px);
  text-align:center;
  line-height:1.5;
}

/* ===== footer ===== */
.counsel-layer .foot{
  padding:calc(14px * var(--s)) calc(18px * var(--s)) calc(18px * var(--s));
}
.counsel-layer .btn-go{
  width:100%;
  height:calc(54px * var(--s));
  border-radius:calc(14px * var(--s));
  border:1px solid #000;
  background:#fff;
  color:#000;
  font-size:calc(18px * var(--s));
  font-weight:900;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(8px * var(--s));
}


.counsel-layer .btn-go:disabled{opacity:.55; cursor:not-allowed;}
.counsel-layer .btn-go .bubble{font-size:calc(18px * var(--s)); }

/* =========================================================
   ✅ 모바일에서 코인 값(내코인 / 차감코인) 폰트 더 작게
   ========================================================= */
@media (max-width: 480px){
  /* 라벨(나의 보유코인 / 차감되는 코인) */
  .counsel-layer .coin-user .txt{
    font-size: clamp(12px, 3.2vw, 14px);
    margin-bottom: 4px;
  }

  /* ✅ 값(내 코인 / 빨간 차감 코인) */
  .counsel-layer .coin-user .val{
    font-size: clamp(13px, 4.2vw, 15px);  /* 기존보다 더 작게 */
    line-height: 1.1;
    letter-spacing: -0.3px;
    white-space: nowrap; /* 한줄 유지 */
  }

  /* 빨간값도 동일 (명확히) */
  .counsel-layer .coin-user .val.red{
    font-size: clamp(13px, 4.2vw, 15px);
  }

  /* 부족 코인 문구 */
  .counsel-layer .coin-user .sub2{
    font-size: clamp(11px, 3.0vw, 12px);
    margin-top: 4px;
    white-space: nowrap;
  }
}

/* 아이폰 SE급 더 작게 */
@media (max-width: 360px){
  .counsel-layer .coin-user .val{
    font-size: clamp(12px, 4.0vw, 14px);
    letter-spacing: -0.4px;
  }
  .counsel-layer .coin-user .val.red{
    font-size: clamp(12px, 4.0vw, 14px);
  }
}

/* ===== body scroll lock ===== */
body.layer-lock{overflow:hidden;}




.detail-chat-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #ececec;
  box-sizing: border-box;
}

.btn-detail-chat-open{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  height: 3.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: #FEE500;
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  box-sizing: border-box;
}

.btn-detail-chat-open .bubble{
  font-size: 1rem;
  line-height: 1;  
}

.main{
  padding-bottom: 5.5rem;
  box-sizing: border-box;
}

@media (min-width: 721px){
  .detail-chat-bottom{
    left: 50%;
    width: 100%;
    max-width: 720px;
    transform: translateX(-50%);
    padding: 0.875rem 1rem 1rem;
  }

  .btn-detail-chat-open{
    height: 3.5rem;
    font-size: 1.0625rem;
  }

  .main{
    padding-bottom: 6rem;
  }
}

.counsel-layer{
  display: none;
}

.counsel-layer.is-show{
  display: block;
}

body.layer-open{
  overflow: hidden;
}


.chatLowCoin {
  width: 85px;

  /* ✅ 반응형 폰트: 16px → 24.5px */
  font-size: clamp(1rem, 3vw, 1.53125rem);

  /* ✅ 아이콘 위치 여백: 글자 크기에 맞춰 em 사용 */
  padding-left: 1.36364em;

  margin-left: -1px;

  background: url("../img/m/coin_list_img.png") no-repeat 0 50%;

  /* ✅ 아이콘 크기도 글자 크기에 비례 */
  background-size: auto 1em;
}