/* =========================================================
   GILDONG MEMBER PROFILE MODAL V1
========================================================= */

body.member-profile-open{
  overflow:hidden;
}


/* 클릭 가능 카드 */
.crew-leader-card[data-member-profile],
.crew-card[data-member-profile]{
  cursor:pointer;
}

.crew-leader-card[data-member-profile]:focus-visible,
.crew-card[data-member-profile]:focus-visible{
  outline:
    3px solid
    rgba(73,100,71,.28);

  outline-offset:4px;
}


/* overlay */
.member-profile-overlay{
  position:fixed;
  inset:0;

  z-index:10050;

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

  overflow-y:auto;

  padding:
    28px 16px;

  box-sizing:border-box;

  background:
    rgba(17,18,20,.66);

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);

  animation:
    memberProfileFade
    .18s ease both;
}


/* modal */
.member-profile-modal{
  position:relative;

  width:min(410px,100%);

  margin:auto 0;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:30px;

  background:#121318;

  color:#fff;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.34);

  animation:
    memberProfileUp
    .28s
    cubic-bezier(.18,.82,.25,1.06)
    both;
}


/* close */
.member-profile-close{
  position:absolute;

  z-index:5;

  top:15px;
  right:15px;

  width:35px;
  height:35px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:50%;

  background:
    rgba(15,16,20,.62);

  color:#fff;

  font-size:21px;
  line-height:1;

  cursor:pointer;

  -webkit-backdrop-filter:
    blur(7px);

  backdrop-filter:
    blur(7px);
}


/* hero */
.member-profile-visual{
  position:relative;

  min-height:335px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #394336 0%,
      #232b24 45%,
      #15171a 100%
    );
}


.member-profile-visual.has-image{
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.08) 38%,
      rgba(15,16,21,.94) 100%
    ),
    var(--member-profile-image);

  background-size:
    cover;

  background-position:
    center 20%;
}


.member-profile-visual-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.00) 30%,
      rgba(13,14,18,.16) 48%,
      rgba(13,14,18,.92) 100%
    );
}


.member-profile-identity{
  position:absolute;

  z-index:2;

  left:25px;
  right:25px;
  bottom:23px;
}


.member-profile-role{
  display:inline-flex;

  margin-bottom:7px;

  color:#e3cf78;

  font-size:10px;
  font-weight:900;

  letter-spacing:.12em;
}


.member-profile-identity h2{
  margin:0;

  color:#fff;

  font-size:35px;
  line-height:1;

  letter-spacing:-.055em;
}


.member-profile-identity small{
  display:block;

  margin-top:7px;

  color:
    rgba(255,255,255,.62);

  font-size:11px;
}


/* body */
.member-profile-body{
  padding:
    24px 25px 27px;
}


.member-profile-intro{
  margin:
    0 0 19px;

  padding-bottom:19px;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);

  color:
    rgba(255,255,255,.91);

  font-size:13px;
  line-height:1.65;
}


.member-profile-intro.muted{
  color:
    rgba(255,255,255,.56);
}


/* info */
.member-profile-info{
  display:grid;
}


.member-profile-row{
  min-height:43px;

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

  gap:22px;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);
}


.member-profile-row span{
  flex:0 0 auto;

  color:
    rgba(255,255,255,.54);

  font-size:11px;
}


.member-profile-row strong{
  min-width:0;

  color:#fff;

  font-size:12px;
  font-weight:800;

  text-align:right;

  overflow-wrap:anywhere;
}


/* channel */
.member-profile-channel-section{
  margin-top:24px;
}


.member-profile-channel-section > small{
  display:block;

  margin-bottom:11px;

  color:
    rgba(255,255,255,.54);

  font-size:9px;
  font-weight:900;

  letter-spacing:.18em;
}


.member-profile-channels{
  display:flex;
  flex-wrap:wrap;

  gap:10px;
}


.member-profile-channel{
  width:47px;

  display:grid;
  justify-items:center;

  gap:6px;

  color:
    rgba(255,255,255,.72);

  text-decoration:none;

  font-size:8px;
  font-weight:700;
}


.member-profile-channel-glyph{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  box-sizing:border-box;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:50%;

  background:
    rgba(255,255,255,.07);

  color:#fff;

  font-size:17px;
  font-weight:900;

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


.member-profile-channel:hover
.member-profile-channel-glyph{
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.13);
}


.member-profile-channel-glyph.soop{
  color:#65d9ff;

  font-size:26px;
  line-height:1;
}


.member-profile-channel-glyph.youtube{
  color:#ff5b5b;
}


.member-profile-channel-glyph.instagram{
  color:#ff8eb5;

  font-size:22px;
}


.member-profile-channel-glyph.tiktok{
  color:#f0f0f0;

  font-size:21px;
}


/* mobile */
@media(max-width:620px){

  .member-profile-overlay{
    padding:
      12px;
  }


  .member-profile-modal{
    width:min(390px,100%);

    border-radius:24px;
  }


  .member-profile-visual{
    min-height:300px;
  }


  .member-profile-identity{
    left:21px;
    right:21px;
    bottom:20px;
  }


  .member-profile-identity h2{
    font-size:31px;
  }


  .member-profile-body{
    padding:
      21px 21px 24px;
  }
}


@keyframes memberProfileFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


@keyframes memberProfileUp{

  from{
    opacity:0;

    transform:
      translateY(12px)
      scale(.98);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* /GILDONG MEMBER PROFILE MODAL V1 */


/* =========================================================
   MEMBER CARD CHANNEL ICONS V1
========================================================= */

.member-page-links.member-page-links-icons{
  display:flex;

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

  flex-wrap:wrap;

  gap:9px;

  margin-top:15px;
}


/*
 * 기존 텍스트 버튼 스타일 무효화
 */
.member-page-links-icons
.member-page-link-icon{
  width:37px !important;
  height:37px !important;

  min-width:37px !important;

  display:grid !important;
  place-items:center !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden;

  border:
    1px solid
    rgba(54,70,58,.16) !important;

  border-radius:50% !important;

  background:
    rgba(255,255,255,.76) !important;

  color:inherit !important;

  text-decoration:none !important;

  box-shadow:
    0 4px 13px
    rgba(40,48,40,.045);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}


.member-page-links-icons
.member-page-link-icon:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(54,70,58,.28) !important;

  box-shadow:
    0 7px 16px
    rgba(40,48,40,.09);
}


/*
 * 팝업용 glyph를 카드에서도 사용하되
 * 바깥 원은 카드 링크가 담당.
 */
.member-page-links-icons
.member-page-link-icon
.member-profile-channel-glyph{
  width:auto !important;
  height:auto !important;

  min-width:0 !important;

  display:block !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  transform:none !important;
}


/* SOOP */
.member-page-links-icons
.member-page-link-icon.soop
.member-profile-channel-glyph{
  color:#28aada !important;

  font-size:25px !important;
}


/* YOUTUBE */
.member-page-links-icons
.member-page-link-icon.youtube
.member-profile-channel-glyph{
  color:#e94f49 !important;

  font-size:17px !important;
}


/* INSTAGRAM */
.member-page-links-icons
.member-page-link-icon.instagram
.member-profile-channel-glyph{
  color:#ca668e !important;

  font-size:21px !important;
}


/* TIKTOK */
.member-page-links-icons
.member-page-link-icon.tiktok
.member-profile-channel-glyph{
  color:#23242a !important;

  font-size:20px !important;
}


/* WEBSITE */
.member-page-links-icons
.member-page-link-icon.website
.member-profile-channel-glyph{
  color:#62656b !important;

  font-size:16px !important;
}


@media(max-width:620px){

  .member-page-links-icons
  .member-page-link-icon{
    width:34px !important;
    height:34px !important;

    min-width:34px !important;
  }
}

/* /MEMBER CARD CHANNEL ICONS V1 */


/* =========================================================
   MEMBER BRAND ICONS V1
========================================================= */

.member-brand-icon{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  color:#555;

  line-height:1;
}


.member-brand-icon svg{
  width:100%;
  height:100%;

  display:block;

  overflow:visible;
}


/* SOOP */
.member-brand-icon.soop{
  color:#1eb6e8;
}


/* YouTube */
.member-brand-icon.youtube{
  color:#ff2e2e;
}


/* Instagram */
.member-brand-icon.instagram{
  color:#e4568c;
}


/* TikTok */
.member-brand-icon.tiktok{
  color:#16171b;
}


.member-brand-icon.tiktok
.tiktok-shadow.cyan{
  fill:#25f4ee;

  transform:
    translate(-1px,1px);
}


.member-brand-icon.tiktok
.tiktok-shadow.pink{
  fill:#fe2c55;

  transform:
    translate(1px,-1px);
}


.member-brand-icon.tiktok
.tiktok-main{
  fill:#16171b;
}


/* website */
.member-brand-icon.website{
  color:#666972;
}


/*
 * 상세 팝업 아이콘
 */
.member-profile-channel-glyph{
  display:grid !important;
  place-items:center !important;
}


.member-profile-channel-glyph
.member-brand-icon{
  width:24px;
  height:24px;
}


/*
 * 바깥 멤버 카드
 */
.member-page-links-icons
.member-page-link-icon
.member-brand-icon{
  width:23px;
  height:23px;
}


/*
 * 실제 아이콘이 들어가므로
 * 예전 문자 기반 font-size 영향 제거
 */
.member-page-links-icons
.member-page-link-icon
.member-profile-channel-glyph{
  font-size:0 !important;
}


.member-profile-channel-glyph{
  font-size:0 !important;
}


/*
 * 바깥 카드 버튼 자체도
 * 기존보다 살짝 작고 정돈되게.
 */
.member-page-links-icons
.member-page-link-icon{
  width:38px !important;
  height:38px !important;

  min-width:38px !important;

  border:
    1px solid
    rgba(74,82,70,.14) !important;

  background:
    rgba(255,255,255,.86) !important;

  box-shadow:
    0 3px 10px
    rgba(39,46,37,.045);
}


/* /MEMBER BRAND ICONS V1 */