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

   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(163, 132, 116, 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:#A38474;

  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 #A38474;

  }

  .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: rgba(163,132,116,.92) !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; }

    }

/*미디어 쿼리 end*/