/* =========================================================

   1) FLOATING BANNER: 위치/정렬

   ========================================================= */

.floBanContainer{

  position:fixed;

  top:50vh;

  right:15px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:10px;

  transform:translateY(-50%);

  z-index:9;

}



/* =========================================================

   2) FLOATING BANNER: 공통 버튼(동그라미)

   ========================================================= */

.floBtn{

  width:60px;

  height:60px;

  border-radius:50%;

  background: rgba(181, 126, 120, 0.6);

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  cursor:pointer;

  box-shadow:0 4px 12px rgba(0,0,0,0.15);

  transition:background .25s ease, transform .15s ease;

}

.floBtn:active{ transform:scale(.98); }



/* 아이콘 */

.floBtn img{

  display:block;

  width:60%;

  height:60%;

  object-fit:contain;

  transition:opacity .2s ease;

}



/* 숨긴 라벨 */

.floBtn .floLabel{

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:8px;

  font-size:12px;

  line-height:1.2;

  font-weight:700;

  font-family:'Noto Sans KR', sans-serif;

  color:#b57e78;;

  opacity:0;

  pointer-events:none;

  transition:opacity .2s ease;

}



html[lang="zh-CN"] .CN {

  display: none;

}



html[lang="ko-KR"] .KR {

  display: none;

}

html[lang="en-US"] .EN {

  display: none;

}

html[lang="ja"] .JA {

  display: none;

}

/* 데스크탑 hover에서 아이콘 숨기고 라벨 보이기 */

@media (hover:hover) and (pointer:fine){

  .floBtn:hover{

    background:#fff;

    border:1px solid #b57e78;;

  }

  .floBtn:hover img{ opacity:0; }

  .floBtn:hover .floLabel{ opacity:1; }

}



/* 태블릿 */

@media (max-width:1024px){

  .floBtn{ width:60px; height:60px; }

}



/* 모바일 */

@media (max-width: 767px){

  .floBtn{ width:50px; height:50px; }

}



/* =========================================================

   3) DESKTOP/TABLET SWITCH: 좌하단 pill (#clinicSwitch)

   ========================================================= */

#clinicSwitch.clinic-switch{

  --accent: #a38474;

  --text: #a38474;

  --text-active: #ffffff;



  position: fixed;

  left: 3%;

  bottom: 10%;

  z-index: 9999;



  display: grid;

  grid-template-columns: 1fr 1fr;

  width: 360px;

  height: 78px;

  border-radius: 999px;

  background: #fff;

  overflow: hidden;

  box-shadow: 0 10px 22px rgba(0,0,0,.10);



  opacity: 0;

  transform: translateX(-18px);

}

#clinicSwitch.clinic-switch.is-show{

  opacity: 1;

  transform: translateX(0);

  transition: opacity .8s ease .15s,

              transform 1.1s cubic-bezier(.16,1,.3,1) .15s;

}



#clinicSwitch .switch-btn{

  position: relative;

  display: grid;

  place-items: center;

  text-decoration: none;

  color: var(--text);

  background: transparent;

  transition: background .18s ease, color .18s ease;

}



#clinicSwitch .btn-inner{

  display: inline-flex;

  align-items: center;

  gap: 10px;

}



#clinicSwitch .btn-logo{

  width: 40px;

  height: 40px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

#clinicSwitch .btn-logo img{

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



#clinicSwitch .switch-label{

  font-size: 16px;

  line-height: 1.15;

  font-weight: 700;

  text-align: left;

}



/* active */

#clinicSwitch .switch-btn.is-active{

  background: var(--accent);

  color: var(--text-active);

}

#clinicSwitch .switch-btn.is-active .btn-logo img{

  filter: brightness(0) invert(1);

}



/* hover 로직 */

#clinicSwitch.is-hovering .switch-btn.is-active:not(.is-hover){

  background: transparent;

  color: var(--text);

}

#clinicSwitch.is-hovering .switch-btn.is-active:not(.is-hover) .btn-logo img{

  filter: none;

}

#clinicSwitch.is-hovering .switch-btn.is-hover{

  background: var(--accent);

  color: var(--text-active);

}

#clinicSwitch.is-hovering .switch-btn.is-hover .btn-logo img{

  filter: brightness(0) invert(1);

}



/* 모바일에서는 pill 숨김 */

@media (max-width: 767px){

  #clinicSwitch{ display:none !important; }

}



/* =========================================================

   4) MOBILE SWITCH: 플로밴 아래 원형 버튼(#clinicSwitchMobile)

   - “중앙 라벨”은 JS로 body로 이동 → 진짜 화면 중앙 고정

   ========================================================= */



/* 스크린리더용 */

.sr-only{

  position:absolute !important;

  width:1px; height:1px;

  padding:0; margin:-1px;

  overflow:hidden; clip:rect(0,0,0,0);

  white-space:nowrap; border:0;

}



/* 기본 숨김(모바일만 표시) */

#clinicSwitchMobile{ display:none; }

 #clinicMobLink.clinic-mob-label{ display:none; }



@media (min-width: 768px) and (max-width: 1440px){

     #clinicSwitch.clinic-switch{

         bottom: 15%;

     }

}

@media (max-width: 767px){

  #clinicSwitchMobile{

    display:block;

    margin-top: 10px;     /* 플로밴 마지막 버튼 아래 간격 */

  }



  /* 원형 버튼(흰색) */

  #clinicSwitchMobile .mob-btn{

    width: 50px;

    height: 50px;

    border-radius: 999px;

    border: 1px solid rgba(163,132,116,.35);

    background: #fff;

    box-shadow: 0 6px 16px rgba(0,0,0,.12);

    padding: 0;

    cursor: pointer;



    display:flex;

    align-items:center;

    justify-content:center;

    position: relative;



    transition: transform .15s ease;

  }

  #clinicSwitchMobile .mob-btn:active{ transform: scale(.98); }



  /* 로고 */

  #clinicSwitchMobile .mob-logo{

    width: 60%;

    height: 60%;

    object-fit: contain;

    display:block;

  }



  /* X 아이콘 */

  #clinicSwitchMobile .mob-x{

    position:absolute;

    inset:0;

    display:none;

  }

  #clinicSwitchMobile .mob-x::before,

  #clinicSwitchMobile .mob-x::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width: 22px;

    height: 2px;

    background: #a38474;

    transform-origin: center;

    border-radius: 2px;

  }

  #clinicSwitchMobile .mob-x::before{ transform: translate(-50%,-50%) rotate(45deg); }

  #clinicSwitchMobile .mob-x::after{  transform: translate(-50%,-50%) rotate(-45deg); }



  /* open 상태: 로고 -> X */

  #clinicSwitchMobile.is-open .mob-logo{ display:none; }

  #clinicSwitchMobile.is-open .mob-x{ display:block; }



  /* =========================================================

     중앙 라벨(“진짜” 화면 중앙) 스타일

     - 이 라벨은 JS가 body로 이동시키며, 아래 클래스가 붙음

     ========================================================= */

  #clinicMobLink.clinic-mob-label{

    position: fixed !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) translateY(18px) !important;



    width: min(240px, 74vw) !important; /* 가로 줄인 값 */

    height: 52px !important;



    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    gap: 8px !important;



    margin: 0 !important;

    padding: 0 14px !important;

    border-radius: 999px !important;



    background: #B57E78 !important;

    color: #fff !important;

    text-decoration: none !important;



    opacity: 0 !important;

    pointer-events: none !important;



    font-size: 14px !important;

    font-weight: 700 !important;

    font-family: 'Noto Sans KR', sans-serif !important;



    box-shadow: 0 14px 26px rgba(0,0,0,.22) !important;

    transition: transform .38s cubic-bezier(.2,.9,.2,1),

                opacity .22s ease !important;

    z-index: 10000 !important;

  }

  #clinicMobLink.clinic-mob-label.is-open{

    transform: translate(-50%, -50%) translateY(0) !important;

    opacity: 1 !important;

    pointer-events: auto !important;

  }



  #clinicMobLink .chev{ font-weight: 900; }

}