/* ============================================================
   탭
   마크업 :
     <div class="tabs" data-tab-group="ex">
        <button class="tab is-selected" data-tab="a">탭1</button>
        <button class="tab" data-tab="b">탭2</button>
     </div>
     <div class="tab-panels" data-tab-group="ex">
        <div class="tab-panel is-selected" data-tab="a">…</div>
        <div class="tab-panel" data-tab="b">…</div>
     </div>
   ============================================================ */

.tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line2);
}

.tab {
    flex: 1 1 0;
    position: relative;
    padding: 1.4rem 0;
    background: none;
    border: 0;

    /* Heading 1 토큰 */
    font-family:    var(--font-family-base);
    font-weight:    var(--font-heading-1-weight);
    font-size:      var(--font-heading-1-size);
    line-height:    var(--font-heading-1-line);
    letter-spacing: var(--font-heading-1-spacing);

    color: var(--gray-400);
    cursor: pointer;
}

.tab.is-selected {
    color: var(--gray-900);
    font-weight: var(--fw-bold);
}

.tab.is-selected::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--gray-900);
}

/* 패널 */
.tab-panel { display: none; }
.tab-panel.is-selected { display: block; }