/* 상단바 UDS. 색상은 tokens.css의 토큰만 사용합니다. */:root{
    --logo-width:calc(var(--spacing-gap-40) * 5);
    --logo-height:calc(var(--spacing-gap-40) + var(--spacing-gap-4));
    --topbar-height:calc(var(--spacing-gap-40) + var(--spacing-gap-32) + var(--spacing-gap-4));
}
.topbar{
    display:flex;
    align-items:center;
    height:var(--topbar-height);
    padding:0 var(--spacing-layout-x-20);
    background:var(--color-container-base-primary);
    border-bottom:var(--border-width-default) solid var(--color-border-base-low);
    color:var(--color-text-base-primary);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
    flex-shrink:0;
}
.topbar .topbar-logo{
    width:var(--logo-width);
    height:var(--logo-height);
    min-width:0;
    display:flex;
    align-items:center;
    cursor:pointer;
}
.topbar .topbar-logo img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.topbar .topbar-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    flex-shrink:0;
}
.topbar .topbar-right > * + *{margin-left:var(--spacing-gap-24);
}
.topbar .attend{display:flex;align-items:center;
}
.topbar .attend > * + *{margin-left:var(--spacing-gap-32);
}
.topbar .attend-cal{
    position:relative;
    flex-shrink:0;
    width:var(--spacing-gap-40);
    height:var(--spacing-gap-40);
    border:0;
    border-radius:var(--radius-small);
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
    padding:0;
    margin:0;
    cursor:pointer;
    display:block;
}
.topbar .attend-cal img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
}
.topbar .attend-cal:hover,.topbar .point-btn:hover{background:var(--color-state-light-hover);
}
.topbar .attend-cal:active,.topbar .point-btn:active{background:var(--color-state-light-pressed);
}
.topbar .attend-cal:focus-visible,.topbar .point-btn:focus-visible{
    outline:var(--border-width-focus) solid var(--color-border-brand-primary);
    outline-offset:var(--spacing-gap-2);
}
.topbar .attend-days{
    position:absolute;
    top:65%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
    line-height:var(--line-height-tight);
    white-space:nowrap;
}
.topbar .attend-text{display:flex;flex-direction:column;min-width:0;
}
.topbar .user-name{
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
}
.topbar .attend-label{
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
    white-space:nowrap;
}
.topbar .attend-sub{display:flex;align-items:center;
}
.topbar .attend-sub > * + *{margin-left:var(--spacing-gap-32);
}
.topbar .point-btn{
    display:flex;
    align-items:center;
    border:0;
    border-radius:var(--radius-small);
    background:transparent;
    padding:0;
    font:inherit;
    cursor:pointer;
    white-space:nowrap;
}
.topbar .point-btn > * + *{margin-left:var(--spacing-gap-4);
}
.topbar .point-icon{
    width:var(--spacing-gap-20);
    height:var(--spacing-gap-20);
    flex-shrink:0;
}
.topbar .point-icon{display:flex;align-items:center;
}
.topbar .point-icon img{max-width:100%;max-height:100%;object-fit:contain;display:block;
}
.topbar .point-value{
    font-size:var(--font-size-20);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
    line-height:var(--line-height-tight);
}
@media (max-width:767px){
    .topbar{padding:0 var(--spacing-layout-x-16);
}
    .topbar .topbar-logo{
        flex:1 1 auto;
        max-width:calc(var(--spacing-gap-40) * 3 + var(--spacing-gap-10));
        margin-right:var(--spacing-gap-10);
    }
    .topbar .topbar-right > * + *,
    .topbar .attend > * + *,
    .topbar .attend-sub > * + *{margin-left:var(--spacing-gap-10);
}
    .topbar .attend-cal{width:var(--spacing-gap-32);height:var(--spacing-gap-32);
}
    .topbar .user-name,.topbar .attend-label{font-size:var(--font-size-12);white-space:nowrap;
}
    .topbar .point-value{font-size:var(--font-size-16);
}
}