@charset "utf-8";


/* table */
.tb_box.typeA {border-top:1px solid var(--color-line-default); border-bottom:1px solid var(--color-line-default);}
.tb_box.typeA > div {display:flex;}
.tb_box.typeA .info_label {width:400px; background:var(--color-surface-secondary); padding-left:60px; display:flex; align-items: center; font-size:var(--font-size-md); font-weight:var(--font-weight-medium); color:var(--color-text-default);}
.tb_box.typeA .info_entry {padding:20px 100px 20px 100px; width:800px; display:flex; flex-direction: column; align-items: flex-start; font-size:var(--font-size-xs); font-weight:var(--font-weight-regular); line-height:14px; color:var(--color-text-default);}
.tb_box.typeA .info_entry.row {flex-direction: row; gap:20px; align-items: center;}

.tb_box .info_label span {color:var(--color-brand-primary); font-weight:var(--font-weight-bold);}
.tb_box .info_entry .guide_txt {margin-top:3px; font-size:var(--font-size-xs); font-weight:var(--font-weight-regular); color:var(--color-text-subtle);}
.tb_box + .option {display:flex; justify-content: flex-end; margin-top:20px;}
.tb_box + .option .btn.typeA {padding:8px 16px; border-radius:var(--radius-md); border:1px solid var(--color-line-default); color:var(--color-line-default); font-size:var(--font-size-md);}

.tb_list_box.typeA .tb_header * {font-size:var(--font-size-md); font-weight:var(--font-weight-medium); line-height:19px; color:var(--color-text-primary);}
.tb_list_box.typeA .tb_body {margin-top:20px; border-top:1px solid var(--color-brand-primary);}
.tb_list_box.typeA .tb_body .tb_row {border-bottom:1px solid var(--color-line-default);}
.tb_list_box.typeA .tb_body .tb_row .img {width:62px; height:62px;}

.tb_box .btn_blue_line {width:106px; height:58px; line-height:56px; border:1px solid var(--color-brand-primary); border-radius:var(--radius-sm); text-align:center; color:var(--color-brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);}

/* input */
.input-field {border:1px solid var(--color-line-default); width:100%; background:var(--color-surface-primary); border-radius:var(--radius-sm); box-sizing:border-box; height:58px;}
.input-field:focus-within {border:1px solid var(--color-brand-primary); transition:all .2s ease;}
.input-field.error {border:1px solid var(--color-text-negative);}
.input-field input[type="text"],
.input-field input[type="password"],
.input-field input[type="number"] {width:100%; height:100%; line-height:100%; border:none; border-radius:var(--radius-sm); padding:0 8px; font-size:var(--font-size-sm); font-weight:var(--font-weight-regular);}
.input-field input[type="text"]:disabled,
.input-field input[type="password"]:disabled,
.input-field input[type="number"]:disabled {background:var(--color-surface-alt);}
.input-field:has(input:disabled) {border:1px solid var(--color-surface-alt);}

.input-field.overlap {position:relative;}
.input-field.overlap button {width:70px; height:58px; border-radius:var(--radius-sm); text-align:center; color:var(--color-surface-primary); background:var(--color-brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); position:absolute; top:-1px; right:-1px;}
.input-field.overlap input {padding: 0 76px 0 8px;}

.input-field.area_code {width:75px}
.input-field.phone_number {width:calc(100% - 100px);}

.input-field.typeB {height:48px;}
.input-field.typeB input[type="text"],
.input-field.typeB input[type="password"],
.input-field.typeB input[type="number"] {padding:0 12px; font-size:var(--font-size-md); font-weight:var(--font-weight-medium);}


/* check */
.check-group {display:flex; gap:20px; align-items: center;}
.check-label {display: flex; align-items: center; cursor: pointer; font-size:var(--font-size-xs); font-weight:var(--font-weight-regular); gap: 8px;}
.check-label span {font-size:var(--font-size-xs); color:var(--color-brand-primary); font-weight:var(--font-weight-medium);}
.check-circle {width: 20px; height: 20px; border-radius:var(--radius-full); position: relative; background-color: var(--color-line-default); transition: background-color 0.25s ease, border-color 0.25s ease; display: flex; align-items: center; justify-content: center;}
.check-input:checked + .check-label .check-circle {background-color: var(--color-brand-primary); border-color: var(--color-line-strong);}
.check-dot {top: 2px; position: absolute; width: 7px; height: 12px; border-right: 2px solid var(--color-surface-primary); border-bottom: 2px solid var(--color-surface-primary); transform: rotate(45deg) scale(1); opacity: 1; transition: all 0.2s ease;}
.check-input:checked + .check-label .check-circle .check-dot {transform: rotate(45deg) scale(1); opacity: 1;}

.checkbox.typeA {cursor:pointer; width:24px; height:24px; border-radius:var(--radius-full); background:var(--color-line-default); position:relative;}
.checkbox.typeA:before {content:''; width:12px; height:6px; border-left:2px solid var(--color-surface-primary); border-bottom:2px solid var(--color-surface-primary); transform:rotate(-45deg); display:block; position:absolute; top:6px; left:4px;}
input[type="checkbox"]:checked + .checkbox.typeA {background:var(--color-brand-primary)}

/* radio */
.radio-group {display:flex; gap:20px; align-items: center;}
.radio-label {display: flex; align-items: center; cursor: pointer; font-size:var(--font-size-xs); font-weight:var(--font-weight-regular); gap: 10px;}
.radio-label .radio-circle {width: 20px; height: 20px; border-radius:var(--radius-full); background:var(--color-surface-muted); position: relative; display:flex; justify-content: center; align-items: center;}
.radio-dot {width: 12px; height: 12px; background: var(--color-line-default); border-radius:var(--radius-full); transition: all 0.15s ease; opacity: 1;}
.radio-input:checked + .radio-label .radio-circle .radio-dot {width: 12px; height: 12px; opacity: 1; background: var(--color-brand-primary);}

/* file */
.file-upload {display: flex; gap: 8px;}
.file-upload-name {flex: 1; border: 1px solid var(--color-line-default); padding: 0px 68px 0px 8px; height:58px; line-height:56px; border-radius:var(--radius-sm); font-size:var(--font-size-sm); color: var(--color-text-primary);}
.file-upload-name:focus {border:1px solid var(--color-brand-primary); transition:all .2s ease;}
.file-upload-button {display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--color-surface-contrast); color: var(--color-surface-primary); border-radius:var(--radius-xs); cursor: pointer; font-size:var(--font-size-sm);}
.file-upload-real {display: none;}

/* select */
.custom-select.typeA {position: relative; width: 100%;}
.custom-select.typeA .select-selected {background-color:var(--color-surface-secondary); padding: 0 7px 0 14px; border-radius:var(--radius-xs); cursor: pointer; user-select: none; position: relative; z-index: 10; height: 28px; line-height: 28px; box-sizing: border-box; font-size:var(--font-size-sm); color: var(--color-text-default); font-weight:var(--font-weight-regular);}
.custom-select.typeA .select-selected:after {content: ''; position: absolute; right: 12px; top:12px; color: var(--color-surface-contrast); width: 7px; height: 4px; display: block; background: url(/images/common/arrow2-b-fb1592a246600de4357aa22c9381ecd0.png) no-repeat 0 0; background-size: 7px 4px;}
.custom-select.typeA .select-items {position: absolute; top: 1px; left: 0; right: 0; background-color:var(--color-surface-primary); border-top: none; border-radius: 0; max-height: 0; overflow-y: auto; z-index: 20; transform: translateY(-100%);}
.custom-select.typeA.active .select-items {max-height: 200px; top: 0px; transform: translateY(0); border: 1px solid var(--color-brand-primary); border-radius:var(--radius-xs); padding: 0px 0;}
.custom-select.typeA .select-items div {font-size:var(--font-size-sm); height: 28px; padding: 0 0 0 14px; margin-right: 2px; line-height: 28px; cursor: pointer;}
.custom-select.typeA .select-items div:hover {background-color: var(--color-surface-secondary); font-weight:var(--font-weight-semibold);}
.custom-select.typeA .select-selected.selected {background-color: var(--color-line-light);}
.custom-select.typeA .select-items::-webkit-scrollbar {width: 5px;}
.custom-select.typeA .select-items::-webkit-scrollbar-track {background: var(--color-surface-primary);}
.custom-select.typeA .select-items::-webkit-scrollbar-thumb {background: var(--color-line-light);}
.custom-select.typeA .select-items::-webkit-scrollbar-thumb:hover {background: var(--color-line-light);}
.custom-select.typeA.disabled .select-selected {background-color: var(--color-surface-alt); color: var(--color-text-placeholder); border:1px solid var(--color-surface-alt); cursor: not-allowed;}
.custom-select.typeA.disabled .select-selected:after {opacity: 1;}
.custom-select.typeA.disabled .select-items {display: none !important;}
.custom-select.typeA .select-selected.thin {font-weight:var(--font-weight-regular); color:var(--color-text-thin);}
.custom-select.typeA .select-selected.bold {color:var(--color-line-strong);}

.custom-select.typeB {position: relative; width: 100%;}
.custom-select.typeB .select-selected {background-color:var(--color-surface-primary); border:1px solid var(--color-line-default); padding: 0 7px 0 12px; border-radius:var(--radius-xs); cursor: pointer; user-select: none; position: relative; z-index: 10; height: 58px; line-height: 56px; box-sizing: border-box; font-size:var(--font-size-sm); color: var(--color-text-default); font-weight:var(--font-weight-regular);}
.custom-select.typeB .select-selected:after {content: ''; position: absolute; right: 12px; top:27px; color: var(--color-surface-contrast); width: 7px; height: 4px; display: block; background: url(/images/common/arrow2-b-fb1592a246600de4357aa22c9381ecd0.png) no-repeat 0 0; background-size: 7px 4px;}
.custom-select.typeB .select-items {position: absolute; top: 1px; left: 0; right: 0; background-color:var(--color-surface-primary); border-top: none; border-radius: 0; max-height: 0; overflow-y: auto; z-index: 20; transform: translateY(-100%);}
.custom-select.typeB.active .select-items {max-height: 200px; top: 0px; transform: translateY(0); border: 1px solid var(--color-line-default); border-radius:var(--radius-xs); padding: 0px 0;}
.custom-select.typeB .select-items div {font-size:var(--font-size-sm); height: 58px; padding: 0 0 0 14px; margin-right: 2px; line-height: 58px; cursor: pointer;}
.custom-select.typeB .select-items div:hover {background-color: var(--color-surface-secondary); font-weight:var(--font-weight-semibold);}
.custom-select.typeB .select-selected.selected {background-color: var(--color-line-light);}
.custom-select.typeB .select-items::-webkit-scrollbar {width: 5px;}
.custom-select.typeB .select-items::-webkit-scrollbar-track {background: var(--color-surface-primary);}
.custom-select.typeB .select-items::-webkit-scrollbar-thumb {background: var(--color-line-light);}
.custom-select.typeB .select-items::-webkit-scrollbar-thumb:hover {background: var(--color-line-light);}
.custom-select.typeB.disabled .select-selected {background-color: var(--color-surface-alt); color: var(--color-text-placeholder); border:1px solid var(--color-surface-alt); cursor: not-allowed;}
.custom-select.typeB.disabled .select-selected:after {opacity: 1;}
.custom-select.typeB.disabled .select-items {display: none !important;}
.custom-select.typeB .select-selected.thin {font-weight:var(--font-weight-regular); color:var(--color-text-thin);}
.custom-select.typeB .select-selected.bold {color:var(--color-line-strong);}


.custom-select.typeC {position: relative; width: 100%;}
.custom-select.typeC .select-selected {background-color:var(--color-surface-primary); border:1px solid var(--color-line-default); padding: 0 7px 0 12px; border-radius:var(--radius-xs); cursor: pointer; user-select: none; position: relative; z-index: 10; height: 46px; line-height: 44px; box-sizing: border-box; font-size:var(--font-size-sm); color: var(--color-text-default); font-weight:var(--font-weight-regular);}
.custom-select.typeC .select-selected:after {content: ''; position: absolute; right: 8px; top:20px; color: var(--color-surface-contrast); width: 7px; height: 4px; display: block; background: url(/images/common/arrow2-b-fb1592a246600de4357aa22c9381ecd0.png) no-repeat 0 0; background-size: 7px 4px;}
.custom-select.typeC .select-items {position: absolute; top: 1px; left: 0; right: 0; background-color:var(--color-surface-primary); border-top: none; border-radius: 0; max-height: 0; overflow-y: auto; z-index: 20; transform: translateY(-100%);}
.custom-select.typeC.active .select-items {max-height: 200px; top: 0px; transform: translateY(0); border: 1px solid var(--color-line-default); border-radius:var(--radius-xs); padding: 0px 0;}
.custom-select.typeC .select-items div {font-size:var(--font-size-sm); height: 28px; padding: 0 0 0 14px; margin-right: 2px; line-height: 28px; cursor: pointer;}
.custom-select.typeC .select-items div:hover {background-color: var(--color-surface-secondary); font-weight:var(--font-weight-semibold);}
.custom-select.typeC .select-selected.selected {background-color: var(--color-line-light);}
.custom-select.typeC .select-items::-webkit-scrollbar {width: 5px;}
.custom-select.typeC .select-items::-webkit-scrollbar-track {background: var(--color-surface-primary);}
.custom-select.typeC .select-items::-webkit-scrollbar-thumb {background: var(--color-line-light);}
.custom-select.typeC .select-items::-webkit-scrollbar-thumb:hover {background: var(--color-line-light);}
.custom-select.typeC.disabled .select-selected {background-color: var(--color-surface-alt); color: var(--color-text-placeholder); border:1px solid var(--color-surface-alt); cursor: not-allowed;}
.custom-select.typeC.disabled .select-selected:after {opacity: 1;}
.custom-select.typeC.disabled .select-items {display: none !important;}
.custom-select.typeC .select-selected.thin {font-weight:var(--font-weight-regular); color:var(--color-text-thin);}
.custom-select.typeC .select-selected.bold {color:var(--color-line-strong);}


.custom-select.typeB.area_code {width:110px;}
.custom-select.typeB.year,
.custom-select.typeB.month,
.custom-select.typeB.day {width:90px;}

/* textarea */
.textarea-field {border:1px solid var(--color-line-default); width:100%; background:var(--color-surface-primary); border-radius:var(--radius-sm); box-sizing:border-box;}
.textarea-field textarea {width:100%; line-height:160%; border:none; padding:8px 8px; border-radius:var(--radius-sm); font-size:var(--font-size-sm); font-weight:var(--font-weight-regular); min-height:80px;}
.textarea-field:focus-within {border:1px solid var(--color-brand-primary); transition:all .2s ease;}

/* 버튼 */
section.btn {width:100%; margin-top:40px; display:flex; flex-direction: row; gap:10px; justify-content: center; align-items: center;}
section.btn .btn_main {width:150px; height:36px; line-height:36px; background:var(--color-brand-primary); border-radius:var(--radius-xs); text-align:center; color:var(--color-surface-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold);}
section.btn .btn_sub {width:150px; height:36px; line-height:36px; background:var(--color-surface-tertiary); border-radius:var(--radius-xs); text-align:center; color:var(--color-brand-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-medium);}
section.btn .btn_line {width:150px; height:36px; line-height:34px; border:1px solid var(--color-brand-primary); border-radius:var(--radius-xs); text-align:center; color:var(--color-brand-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold);}
section.btn .btn_default {width:150px; height:36px; line-height:36px; background:var(--color-line-default); border-radius:var(--radius-xs); text-align:center; color:var(--color-surface-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold);}
section.btn .btn_skyblue {width:150px; height:36px; line-height:36px; background:var(--color-surface-tertiary); border-radius:var(--radius-xs); text-align:center; color:var(--color-brand-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold);}
section.btn *.wide {width:236px;}
section.btn .btn_more_outline {display:inline-flex; align-items:center; justify-content:center; width:150px; height:36px; line-height:36px; border:1.5px solid var(--color-brand-primary); border-radius:var(--radius-xs); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--color-brand-primary); background:var(--color-surface-primary); box-sizing:border-box; transition:background 0.2s ease, color 0.2s ease;}
section.btn .btn_more_outline span {font-weight:var(--font-weight-regular); color:var(--color-brand-primary); margin-left:8px;}


/* 탭메뉴 */
.tab.typeA {margin-top:60px; display:flex; border-bottom:1px solid var(--color-brand-primary);}
.tab.typeA > * {border-radius:5px 5px 0 0; padding:16px 80px; position:relative; top:1px; font-size:var(--font-size-lg); font-weight:var(--font-weight-medium); color:var(--color-line-default);}
.tab.typeA > *.on {border:1px solid var(--color-brand-primary); border-bottom:1px solid var(--color-surface-primary); font-weight:var(--font-weight-bold); color:var(--color-brand-primary);}

.tab.typeB {margin-top:40px; display:flex; align-items: center;}
.tab.typeB > * {font-size:var(--font-size-md); font-weight:var(--font-weight-regular); color:var(--color-line-default); position:relative; padding:0 34px;}
.tab.typeB > *:before {position:absolute; top:0px; right:-1px; content:''; display:block; width:1px; height:20px; background:var(--color-line-default); }
.tab.typeB > *:last-child:before {display:none;}
.tab.typeB > *.on {font-weight:var(--font-weight-bold); color:var(--color-brand-primary);}

.tab.typeC {margin-top:48px; display:flex; align-items: center;}
.tab.typeC > * {font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--color-line-default); position:relative; padding:0 20px; height:28px; line-height:28px; border-radius:40px; background:var(--color-surface-subtle);}
.tab.typeC > *.on {color:var(--color-surface-primary); background:var(--color-brand-primary);}

.date_area {display:flex; justify-content: space-between;}
.date_area .search {margin-top:40px; display:flex; align-items: center; gap:8px;}
.date_area .search .ic_date {width:16px; height:16px; padding:4px; background:url(/images/common/ic_date-a850c68631cd189d2b9a463155a02527.png) no-repeat 0 0; background-size:16px 16px; cursor:pointer;}
.date_area .search .ic_date.on {background:url(/images/common/ic_date_b-543e924d9299e87bb8f82e06f5f68b52.png) no-repeat 0 0; background-size:16px 16px;}
.date_area .search .calc {width:7px; height:1px; background:var(--color-line-default); }
.date_area .search input {width:80px; height:24px; line-height:22px; border:1px solid var(--color-line-default); font-size:var(--font-size-sm); color:var(--color-text-subtle); font-weight:var(--font-weight-regular); border-radius:var(--radius-md); text-align:center;}
.date_area .search input.on {line-height:24px; border:none; background:var(--color-surface-tertiary); color:var(--color-brand-primary);}
.date_area .search button {font-size:var(--font-size-xs); background:var(--color-line-default); padding:0 8px; height:24px; line-height:24px; border-radius:var(--radius-md); color:var(--color-surface-primary); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex-shrink:0;}
.date_area .search button.on {background:var(--color-brand-primary); color:var(--color-surface-primary);}




@media (min-width: 769px) and (max-width: 1024px) { /* 태블릿 */
    .wrap.coupon .card .product-img {
        width: 140px;
        height: 140px;
    }
}
    
@media (min-width: 1025px) { /* PC */
    .wrap.coupon .card-layout {
        grid-template-columns: repeat(2, 1fr); /* 2열 */
        grid-gap: 12px;
    }
    .wrap.coupon .card {
        height: 246px;
    }
}

@media all and (max-width:768px){

/* table */
.tb_box.typeA {border-top:none; border-bottom:none;}
.tb_box.typeA > div {display:flex;}
.tb_box.typeA .info_label {width:128px; background:var(--color-surface-primary); padding-left:0px; font-size:var(--font-size-xs);}
.tb_box.typeA .info_entry {padding:15px 0px 15px 0px; width:calc(100% - 128px);}
.tb_box.typeA .info_entry.row {gap:4px;}

.tb_box .info_entry .guide_txt {margin-top:4px; font-size:var(--font-size-xs);}
.tb_box + .option {margin-top:0;}
.tb_box + .option .btn.typeA {padding:4px 8px; font-size:var(--font-size-sm);}

.tb_box .btn_blue_line {margin-left:16px; height:28px; line-height:26px;}

/* input */
.input-field {height:28px;}
.input-field input[type="text"],
.input-field input[type="password"],
.input-field input[type="number"] {font-size:var(--font-size-xs); font-weight:var(--font-weight-regular);}
.input-field.overlap {position:relative;}
.input-field.overlap button {width:60px; height:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); position:absolute; top:-1px; right:-1px;}
.input-field.overlap input {padding: 0 66px 0 8px;}

.input-field.area_code {width:34px}
.input-field.phone_number {width:calc(100% - 118px);}

.input-field.typeB {height:36px;}
.input-field.typeB input[type="text"],
.input-field.typeB input[type="password"],
.input-field.typeB input[type="number"] {padding:0 8px; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);}

.check-label {font-size:var(--font-size-xs);}

.checkbox.typeA {width:16px; height:16px;}
.checkbox.typeA:before {content:''; width:8px; height:4px; top:3px; left:3px;}

.radio-group {gap:10px;}
.radio-label {gap:6px;}
.radio-label .radio-circle {width: 18px; height: 18px;}
.radio-input:checked + .radio-label .radio-circle .radio-dot {width:10px; height:10px;}

.file-upload {gap: 8px;}
.file-upload .file-name {padding: 0px 40px 0 14px; font-size:var(--font-size-sm);}
.file-upload .btn-browse {padding: 0px 17px; font-size:var(--font-size-sm);}
.file-upload button {right:98px;}
.file-upload-name {height:28px; line-height:26px;}

/* select */
.custom-select.typeB {position: relative; width: 100%;}
.custom-select.typeB .select-selected {padding: 0 7px 0 6px; font-size:var(--font-size-xs); height:28px; line-height:26px;}
.custom-select.typeB .select-selected:after {content: ''; position: absolute; top:12px; right: 6px; color: var(--color-surface-contrast); width: 7px; height: 4px; display: block; background: url(/images/common/arrow2-b-fb1592a246600de4357aa22c9381ecd0.png) no-repeat 0 0; background-size: 7px 4px;}
.custom-select.typeB .select-items {position: absolute; top: 1px; left: 0; right: 0; background-color:var(--color-surface-primary); border-top: none; border-radius: 0; max-height: 0; overflow-y: auto; z-index: 20; transform: translateY(-100%);}

.custom-select.typeB .select-items div {font-size:var(--font-size-xs); height: 28px; padding: 0 0 0 4px; margin-right: 2px; line-height: 28px; cursor: pointer;}

.custom-select.typeB.area_code {width:76px;}
.custom-select.typeB.year,
.custom-select.typeB.month,
.custom-select.typeB.day {width:calc((100% - 8px)/3);}

.custom-select.typeC .select-selected {height:36px; line-height:34px; font-size:var(--font-size-sm);}
.custom-select.typeC .select-selected:after {top:15px;}

.custom-select.typeA .select-selected {height: 20px; line-height: 20px; font-size:var(--font-size-xs);}
.custom-select.typeA .select-selected:after {top:8px;}
.custom-select.typeA .select-items div {font-size:var(--font-size-xs);}

/* textarea */
.textarea-field textarea {font-size:var(--font-size-xs);}


/* 버튼 */
section.btn {margin-top:30px; gap:12px; justify-content: center; align-items: center;}
section.btn .btn_main {width:calc((100% - 12px) / 2); height:36px; line-height:36px;}
section.btn .btn_default {width:calc((100% - 12px) / 2); height:36px; line-height:36px;}
section.btn .btn_skyblue {width:calc((100% - 12px) / 2); height:36px; line-height:36px;}
section.btn .btn_sub {width:calc((100% - 12px) / 2); height:36px; line-height:36px;}
section.btn .btn_line {width:calc((100% - 12px) / 2); height:36px; line-height:34px;}
section.btn *.wide {width:auto; padding:0 50px;}

/* 탭메뉴 */
.tab.typeA {margin-top:20px; display:flex; border-bottom:none;}
.tab.typeA > * {width:calc(100% / 3); padding:6px 0px; text-align:center; top:0px; font-size:var(--font-size-sm); }
.tab.typeA > *.on {border:none; text-decoration: underline; text-underline-offset:6px; font-weight:var(--font-weight-bold); color:var(--color-brand-primary);}

.tab.typeB {flex-wrap:wrap; justify-content: center; row-gap:10px; margin-top:30px;}
.tab.typeB > * {padding:0 16px; font-size:var(--font-size-xs);}
.tab.typeB > *:before {height:16px; top:4px;}

}