/* app bar */
.app_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 750px;
  height: 96px;
  background: var(--core-surface-a, #FFF);
  border-bottom: 2px solid #DADBDE;
}

.app_bar .app_title {
  color: var(--on-color-black-high-emphasis, #1A1E27);
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  height: 38px;
  flex: 1 0 0;
}

.app_bar .app0 {
  width: 96px;
  height: 96px;
  background-position: 50% 50%;
}

.app_bar .app1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_935_449)'><path d='M17.5098 3.86998L15.7298 2.09998L5.83984 12L15.7398 21.9L17.5098 20.13L9.37984 12L17.5098 3.86998Z' fill='%2351545B'></path></g><defs><clipPath id='clip0_935_449'><rect width='24' height='24' fill='white'></rect></clipPath></defs></svg>");
  background-repeat: no-repeat;
  width: 96px;
  height: 96px;
  background-position: 50% 50%;
}

.app_bar .app2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none'><g clip-path='url(%23clip0_935_458)'><path d='M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z' fill='%2351545B'></path></g><defs><clipPath id='clip0_935_458'><rect width='24' height='24' fill='white'></rect></clipPath></defs></svg>");
  background-repeat: no-repeat;
  width: 96px;
  height: 96px;
  background-position: 50% 50%;
}

.app_bar .app3 {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_935_462)'%3E%3Cpath d='M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69ZM12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z' fill='%2351545B'%3E%3C/path%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_935_462'%3E%3Crect width='24' height='24' fill='white'%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 96px;
  height: 96px;
  background-position: 50% 50%;
}