.snb-wrap {
    display: flex;
    width: var(--l-page-snb-width);
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.snb {
    display: flex;
    padding: 12px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-neu-20);
    background: var(--color-neu-00);
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.snb a,
.snb span {
    height: 32px;
    display: flex;
    align-items: center;
    color: var(--color-neu-900);
    font-weight: 500;
    outline: none;
    gap: 4px;
    flex-direction: row;
    text-decoration: none;
}

.snb a:hover {
    color: var(--color-pri-500);
}

.snb a.active {
    color: var(--color-pri-500);
    font-weight: 500;
}

.snb a > span {
    color: var(--color-neu-300);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

.snb a:hover > span {
    text-decoration: none;
}

.snb .snb-line {
    height: 1px;
    background-color: var(--color-neu-10);
    width: 100%;
}

.novel-lnb {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border: 1px solid var(--color-neu-30);
    border-radius: 14px;
    background: var(--color-neu-00);
    box-sizing: border-box;
}
.novel-lnb__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 20px;
}
.novel-lnb__sep {
    margin: 0 24px;
    border: 0;
    border-top: 1px solid var(--color-neu-10);
}
.novel-lnb__lv1 {
    display: block;
    width: 100%;
    padding: 11px 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-neu-900);
    border-radius: 6px;
    text-decoration: none;
    box-sizing: border-box;
}
.novel-lnb__lv1:hover {
    color: var(--color-pri-500);
    background: var(--color-opa-neubk-rgba-02);
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.novel-lnb__lv1.active {
    background: var(--color-pri-10);
    color: var(--color-pri-500);
}
.novel-lnb__label,
.novel-lnb .novel-list-label {
    padding: 11px 0 11px 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-neu-900);
}
.novel-lnb__sub {
    list-style: none;
    margin: 0;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.novel-lnb__lv2 {
    display: block;
    padding: 8.5px 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: var(--color-neu-500);
    border-radius: 6px;
    text-decoration: none;
}
.novel-lnb__lv2:hover {
    background: var(--color-opa-neubk-rgba-02);
    color: var(--color-pri-500);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.novel-lnb__lv2.active {
    background: var(--color-pri-10);
    color: var(--color-pri-500);
}

.snb-banner,
.best-lnb__banner {
    border-radius: 14px;
    overflow: hidden;
    margin-top: 24px;
}
.snb-banner a,
.best-lnb__banner a {
    display: block;
}
.snb-banner img,
.best-lnb__banner img {
    display: block;
    width: 100%;
    height: auto;
}

.l-page--novel-list {
    --l-page-snb-width: 245px;
}

.page-title--h2 {
    margin-bottom: 28px;
}

.banner-slider {
    position: relative;
    height: 184px;
    overflow: hidden;
}

.banner-swiper {
    overflow: visible;
    height: 184px;
}
.banner-swiper .swiper-slide {
    width: 532px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}
.banner-swiper .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-neu-900);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.banner-swiper .swiper-slide a {
    display: block;
    height: 184px;
    pointer-events: none;
}
.banner-swiper .swiper-slide.swiper-slide-active::after {
    opacity: 0;
}
.banner-swiper .swiper-slide.swiper-slide-active a {
    pointer-events: auto;
}
.banner-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 184px;
    object-fit: cover;
}

.banner-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--color-neu-20);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 0;
}
.banner-btn svg path {
    stroke: var(--color-neu-200);
}
.banner-btn--prev {
    left: 8px;
}
.banner-btn--prev svg {
    margin-right: 1px;
}
.banner-btn--next {
    right: 8px;
}
.banner-btn--next svg {
    margin-left: 1px;
}
.banner-btn.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

.banner-indicator {
    position: absolute;
    bottom: 14px;
    right: 166px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 13px;
    line-height: 17px;
    pointer-events: none;
}
.banner-indicator__current {
    font-weight: 500;
    color: var(--color-neu-00);
}
.banner-indicator__sep {
    display: block;
    width: 1px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
}
.banner-indicator__total {
    font-weight: 400;
    color: var(--color-neu-30);
}

.novel-list-sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 16px;
}

.novel-list-sort__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.novel-lnb__lv2 {
    display: block;
    padding: 8.5px 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: var(--color-neu-500);
    border-radius: 6px;
    text-decoration: none;
}
.novel-lnb__lv2:hover {
    background: var(--color-opa-neubk-rgba-02);
    color: var(--color-pri-500);
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.novel-lnb__lv2.active {
    background: var(--color-pri-10);
    color: var(--color-pri-500);
    font-weight: 500;
}

.novel-list {
    display: flex;
    flex-direction: column;
}

.novel-list__body {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-neu-20);
}
.novel-list__body:first-child {
    border-top: 1px solid var(--color-neu-30);
}

.novel-list__body:hover {
    text-decoration: none;
}

.novel-list__cover {
    position: relative;
    flex-shrink: 0;
    width: 88px;
    height: 126px;
    border: 1px solid var(--color-neu-20);
    border-radius: 7px;
    overflow: hidden;
}
.novel-list__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s cubic-bezier(0.15, 0, 0.2, 1);
}
.novel-list__cover:hover img {
    transform: scale(1.04);
}
.novel-list__cover .badge-19 {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
}

.novel-list__info {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    align-self: stretch;
}

.novel-list__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.novel-list__genre-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.novel-list__genre {
    flex: 1 0 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-neu-300);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.novel-list__genre svg path {
    stroke: var(--color-neu-300);
}

.novel-list__title-row {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.novel-list__badges {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.novel-list__body:hover .novel-list__title {
    text-decoration: underline;
}

.novel-list__title {
    flex: 1 0 0;
    min-width: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: var(--color-neu-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.novel-list__author {
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-neu-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.novel-list__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.novel-list__stat {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}
.novel-list__stat-label {
    color: var(--color-neu-300);
}
.novel-list__stat-value {
    color: var(--color-neu-500);
}

.novel-list__stat-sep {
    width: 1px;
    height: 10px;
    background: var(--color-neu-40);
    flex-shrink: 0;
}

.novel-list__desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-neu-500);
    width: 100%;
    margin: 0;
}

.badge-up {
    width: 26px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='20' viewBox='0 0 26 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.4' y='0.4' width='25.2' height='19.2' rx='3.6' fill='%23FA7000'/%3E%3Crect x='0.4' y='0.4' width='25.2' height='19.2' rx='3.6' stroke='%23FA7000' stroke-width='0.8'/%3E%3Cpath d='M11.1526 11.4855V5.09945H12.6657V11.6064C12.6657 13.6899 11.0994 15.1644 8.72576 15.1644C6.34731 15.1644 4.79068 13.6899 4.79068 11.6064V5.09945H6.29413V11.4855C6.29413 12.8294 7.22715 13.7914 8.72576 13.7914C10.2292 13.7914 11.1526 12.8294 11.1526 11.4855ZM14.6754 5.09945H18.2141C20.5104 5.09945 21.6416 6.48204 21.6416 8.30939C21.6416 10.1367 20.5056 11.529 18.2093 11.529H16.1789V15H14.6754V5.09945ZM16.1789 10.2479H18.0594C19.5194 10.2479 20.1285 9.4261 20.1285 8.30939C20.1285 7.19268 19.5194 6.39019 18.0546 6.39019H16.1789V10.2479Z' fill='white'/%3E%3C/svg%3E%0A");
    overflow: hidden;
    text-indent: -1000px;
}

.badge-novelend {
    width: 32px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='20' viewBox='0 0 32 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='20' rx='4' fill='%23757575'/%3E%3Cpath d='M13.9895 3.66989V7.72099H15.7346V8.81354H13.9895V13.0387H12.6939V3.66989H13.9895ZM11.9398 9.81906L12.0413 10.7762C9.46945 11.2403 6.57857 11.2838 4.4805 11.2838L4.33547 10.23C5.24915 10.23 6.32235 10.2251 7.44873 10.1865V9.04075C5.98879 8.83771 5.01227 7.9192 5.02194 6.65262C5.01227 5.19268 6.27401 4.21133 8.06752 4.21133C9.86103 4.21133 11.1228 5.19268 11.1324 6.65262C11.1228 7.89986 10.1704 8.81354 8.74915 9.03108V10.1285C9.83202 10.0656 10.9246 9.96892 11.9398 9.81906ZM6.2305 6.65262C6.22083 7.52279 6.98948 8.0884 8.06752 8.09807C9.16006 8.0884 9.8997 7.52279 9.90937 6.65262C9.8997 5.76796 9.16006 5.20718 8.06752 5.20235C6.98948 5.20718 6.22083 5.76796 6.2305 6.65262ZM6.06614 12.2169H7.37139V14.5808H14.4294V15.6492H6.06614V12.2169ZM25.3688 6.37707H22.4199C21.6561 8.27693 19.8094 9.53867 17.0925 10.1671L16.6381 9.10359C19.5822 8.45097 21.1678 7.09254 21.3757 5.28936H17.2859V4.23066H22.8115C22.8115 4.62707 22.7776 5.00414 22.7099 5.36188H25.3688V3.66022H26.6644V9.89641H25.3688V8.72168H22.2555V7.71133H25.3688V6.37707ZM19.9689 13.5173V14.7452H27.0318V15.7942H18.6782V12.5407H25.364V11.4482H18.654V10.4088H26.6644V13.5173H19.9689Z' fill='white'/%3E%3C/svg%3E%0A");
    overflow: hidden;
    text-indent: -1000px;
}

.contest {
    width: 43px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='20' viewBox='0 0 43 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='43' height='20' rx='4' fill='%23ECF4FE'/%3E%3Cpath d='M13.8179 8.73619L12.6328 8.61499C12.9381 7.44337 12.9381 6.61291 12.9381 5.72859H6.28993V4.75898H14.1366V5.71512C14.1366 6.62189 14.1366 7.56457 13.8179 8.73619ZM10.4153 7.29972V9.43197H15.4249V10.4106H5.0824V9.43197H9.23019V7.29972H10.4153ZM10.1998 11.3532C12.6597 11.3532 14.2129 12.1298 14.2219 13.4631C14.2129 14.7828 12.6597 15.5594 10.1998 15.5594C7.75782 15.5594 6.19566 14.7828 6.19566 13.4631C6.19566 12.1298 7.75782 11.3532 10.1998 11.3532ZM10.1998 14.6212C11.9325 14.6212 13.0144 14.1948 13.0234 13.4631C13.0144 12.7134 11.9325 12.269 10.1998 12.2645C8.47605 12.269 7.38972 12.7134 7.3987 13.4631C7.38972 14.1948 8.47605 14.6212 10.1998 14.6212ZM22.0771 10.5318V13.1623H26.7142V14.1588H16.3043V13.1623H20.883V10.5318H17.4894V5.1136H25.4662V10.5318H22.0771ZM24.2856 6.08771H18.67V9.57562H24.2856V6.08771ZM33.6356 8.27383V7.29075H35.8173V4.21133H37.0203V12.5428H35.8173V8.27383H33.6356ZM31.0186 8.40849C30.5158 9.66091 29.5238 10.6664 28.1681 11.1512L27.5441 10.1682C29.2948 9.58011 30.3856 8.0808 30.3856 6.51416V6.06526H27.9167V5.08218H34.0576V6.06526H31.6066V6.51416C31.6066 7.93267 32.6346 9.35566 34.3494 9.93025L33.7344 10.8909C32.4505 10.4465 31.5124 9.53073 31.0186 8.40849ZM30.839 11.8021V14.3564H37.3211V15.3439H29.636V11.8021H30.839Z' fill='%232882F5'/%3E%3C/svg%3E%0A");
    overflow: hidden;
    text-indent: -1000px;
}

.gifts-banner {
    width: 100%;
    height: 172px;
    border-radius: 14px;
    overflow: hidden;
    background-color: #ffd2fe;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gifts-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gifts-banner__guide {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #c719c2;
    text-align: center;
}

.tab-line {
    margin-top: 16px;
}
.tab-line .tab-line__sort {
    position: absolute;
    bottom: 14px;
    right: 0;
    z-index: 2;
}

.gifts-tab .tab-line__item {
    width: 120px;
}

.gift-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 20px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-neu-20);
}
.gift-list .empty {
    grid-column: 1/-1;
}
.gift-list__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-neu-20);
}
.gift-list__item:last-child, .gift-list__item:nth-last-child(2):nth-child(odd) {
    padding-bottom: 0;
    border-bottom: none;
}
.gift-list__novel {
    display: flex;
    gap: 18px;
    height: 160px;
    align-items: center;
}
.gift-list__cover {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 112px;
    height: 160px;
    border-radius: 8px;
    border: 1px solid var(--color-neu-10);
    overflow: hidden;
}
.gift-list__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s cubic-bezier(0.15, 0, 0.2, 1);
}
.gift-list__cover:hover img {
    transform: scale(1.04);
}
.gift-list__cover .badge-19 {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
}
.gift-list__meta-wrap {
    flex: 1 0 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 1px;
}
.gift-list__meta {
    flex: 1 0 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gift-list__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gift-list__genre, .gift-list__author {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-neu-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.gift-list__title {
    display: block;
    width: fit-content;
    max-width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    color: var(--color-neu-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    text-decoration: none;
}
.gift-list__title:hover {
    text-decoration: underline;
    color: var(--color-neu-900);
}
.gift-list__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gift-list__rental {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    line-height: 18px;
}
.gift-list__rental-label {
    color: var(--color-neu-500);
    margin-right: 2px;
}
.gift-list__rental-count {
    font-weight: 500;
    color: var(--color-neu-900);
    display: inline-flex;
    gap: 2px;
}
.gift-list__rental-date {
    color: var(--color-neu-300);
}
.gift-list__status {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-pri-500);
    margin: 0;
}
.gift-list__btn {
    width: 120px;
    flex-shrink: 0;
}
.gift-list__timer-btn {
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-pri-500);
    border-radius: 6px;
    background: var(--color-neu-00);
}
.gift-list__timer-btn__gauge {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    background: var(--color-pri-30);
}
.gift-list__timer-btn__label {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-pri-500);
    white-space: nowrap;
}
.gift-list__done-btn {
    width: 120px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #ebebeb;
    font-size: 14px;
    line-height: 18px;
    color: #949494;
    cursor: default;
}
.gift-list__epi {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}
.gift-list__epi-label {
    color: var(--color-neu-500);
}
.gift-list__epi-count {
    color: var(--color-pri-500);
}
.gift-list__epi-sep {
    width: 1px;
    height: 10px;
    flex-shrink: 0;
    background: var(--color-neu-40);
    margin: 0 4px;
}

.gift-list--gifts .gift-list__info {
    flex-shrink: 0;
    gap: 3px;
}

.gift-list--binge .gift-list__meta-wrap {
    justify-content: space-between;
}
.gift-list--binge .gift-list__meta-wrap .gift-list__meta {
    justify-content: space-between;
    flex: none;
}
.gift-list--binge .gift-list__meta-wrap .gift-list__info {
    flex: 1;
    min-height: 0;
    gap: 4px;
}
.gift-list--binge .gift-list__meta-wrap .gift-list__title {
    display: block;
    width: auto;
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.binge-sort {
    padding-top: 28px;
}
.binge-sort__dropdown {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-neu-20);
}
.binge-sort__dropdown .dropdown-list {
    left: 0;
    right: auto;
}

.binge-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.page-title--h2 .gg-participate-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.gg-page-title__tooltip {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-neu-50);
}
.gg-page-title__tooltip svg {
    display: block;
    width: 100%;
    height: 100%;
}
.gg-page-title__tooltip path {
    fill: currentColor;
}
.gg-page-title__tooltip circle:first-of-type {
    fill: currentColor;
}

.novel-list-content .page-title__sub {
    font-weight: 500;
    color: var(--color-pri-500);
}
.novel-list-content .page-title__sub.secondary {
    color: var(--color-sec-org-500);
}

.gg-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 31px;
    border-radius: 14px;
    border: 1px solid var(--color-pri-200);
    background: var(--color-pri-10);
    overflow: hidden;
}
.gg-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gg-card__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 29px;
    color: var(--color-neu-900);
    margin: 0;
}
.gg-card__title-sub {
    font-size: 19px;
    font-weight: 400;
    line-height: 25px;
    color: var(--color-neu-500);
}
.gg-card__title-sub span {
    color: var(--color-pri-500);
}
.gg-card__login-btn {
    height: 36px;
    padding: 0 12px;
    min-width: 120px;
    border-radius: 100px;
    border: 1px solid var(--color-neu-50);
    background: var(--color-neu-00);
    font-size: 14px;
    line-height: 18px;
    color: var(--color-neu-900);
    cursor: pointer;
    flex-shrink: 0;
}
.gg-card__login-btn:hover {
    background-color: var(--color-neu-10);
}
.gg-card__login-btn--active {
    border-color: var(--color-pri-500);
    color: var(--color-pri-500);
}
.gg-card__login-btn--active:hover {
    background: var(--color-pri-30);
}
.gg-card__login-btn[disabled] {
    border-color: var(--color-neu-30);
    background: var(--color-neu-20);
    color: var(--color-neu-200);
}
.gg-card__gauge-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gg-card__gauge-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gg-card__dday {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 17px;
    line-height: 22px;
}
.gg-card__dday-label {
    font-weight: 400;
    color: var(--color-neu-500);
}
.gg-card__dday-value {
    font-weight: 500;
    color: var(--color-neu-900);
}
.gg-card__progress {
    display: flex;
    align-items: center;
    gap: 2px;
}
.gg-card__progress-current {
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    color: var(--color-pri-500);
}
.gg-card__progress-sep {
    font-size: 15px;
    line-height: 20px;
    color: var(--color-pri-300);
}
.gg-card__progress-total {
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-pri-300);
}
.gg-card.secondary {
    border-color: var(--color-sec-org-200);
    background: var(--color-sec-org-10);
}
.gg-card.secondary .gg-card__title-sub span {
    color: var(--color-sec-org-500);
}
.gg-card.secondary .gg-card__login-btn--active {
    border-color: var(--color-sec-org-500);
    color: var(--color-sec-org-500);
}
.gg-card.secondary .gg-card__login-btn--active:hover {
    background: var(--color-sec-org-30);
}
.gg-card.secondary .gg-card__login-btn[disabled] {
    border-color: var(--color-neu-30);
    background: var(--color-neu-20);
    color: var(--color-neu-200);
}
.gg-card.secondary .gg-card__progress-current {
    color: var(--color-sec-org-600);
}
.gg-card.secondary .gg-card__progress-sep,
.gg-card.secondary .gg-card__progress-total {
    color: var(--color-sec-org-400);
}
.gg-card.secondary .gg-gauge {
    background: linear-gradient(to right, transparent var(--gg-progress, 0%), var(--color-sec-org-200) var(--gg-progress, 0%)), linear-gradient(to right, #ffa46b 0.315%, #e83030 100%);
}
.gg-card.secondary .gg-gauge .gauge-scale div:nth-child(odd)::after {
    opacity: 0.4;
}

.gg-gauge {
    position: relative;
    height: 18px;
    border-radius: 100px;
    overflow: hidden;
    background: linear-gradient(to right, transparent var(--gg-progress, 0%), var(--color-pri-200, #94c1fa) var(--gg-progress, 0%)), linear-gradient(to right, #2882f5 0.315%, #0f57b3 100%);
}
.gg-gauge .gauge-scale {
    width: 100%;
    height: 8px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
.gg-gauge .gauge-scale div {
    position: relative;
}
.gg-gauge .gauge-scale div::after {
    content: "";
    height: 8px;
    width: 1px;
    background: var(--color-neu-00);
    border-radius: 2px;
    position: absolute;
    bottom: 5px;
    right: 0;
}
.gg-gauge .gauge-scale div:last-child::after {
    display: none;
}
.gg-gauge__start, .gg-gauge__end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 15px;
    color: rgba(255, 255, 255, 0.9);
}
.gg-gauge__start {
    left: 8px;
}
.gg-gauge__end {
    right: 8px;
}

.gg-tab .tab-line__list {
    justify-content: center;
}
.gg-tab .tab-line__item {
    min-width: 120px;
}

.gg-novel-grid {
    display: grid;
    grid-template-columns: repeat(5, 148px);
    justify-content: space-between;
    row-gap: 30px;
    padding-top: 36px;
}

.tab-line + .gg-novel-grid {
    padding-top: 24px;
}

a.gg-novel-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
}
a.gg-novel-card:hover {
    text-decoration: none;
}

.gg-novel-card__cover {
    position: relative;
    width: 148px;
    height: 212px;
    border: 1px solid var(--color-neu-20);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.gg-novel-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s cubic-bezier(0.15, 0, 0.2, 1);
}
.gg-novel-card__cover:hover img {
    transform: scale(1.04);
}
.gg-novel-card__cover .badge-19 {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
}
.gg-novel-card__badge-new {
    position: absolute;
    bottom: 9px;
    left: 9px;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='22' height='22' rx='5' fill='%23FA7000'/%3E%3Cpath d='M13.2344 5.39226H15.4254V16H13.5193L8.85769 9.26139H8.77999V16H6.57868V5.39226H8.51584L13.1412 12.1257H13.2344V5.39226Z' fill='white'/%3E%3C/svg%3E%0A");
    overflow: hidden;
    text-indent: -1000px;
}
.gg-novel-card__timer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 146px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 1px;
    border-radius: 0 0 9px 9px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 15px;
    line-height: 20px;
    color: #ffba8f;
    white-space: nowrap;
    box-sizing: border-box;
}
.gg-novel-card__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    width: 148px;
}
.gg-novel-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gg-novel-card__genre {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-neu-300);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}
.gg-novel-card__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-neu-900);
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}
.gg-novel-card__author {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-neu-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.modal-content .gold-gauge-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.modal-content .gold-gauge-info li {
    color: var(--color-neu-500);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    list-style: none;
    text-align: left;
    position: relative;
}
.modal-content .gold-gauge-info li span {
    color: var(--color-pri-500);
    font-weight: 500;
}
.modal-content .gold-gauge-info li {
    padding-left: 9px;
}
.modal-content .gold-gauge-info li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-neu-500);
}
.modal-content .gold-gauge-coupon-info {
    margin-top: 12px;
    display: flex;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 7px;
    background: var(--color-neu-10);
}
.modal-content .gold-gauge-coupon-info ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.modal-content .gold-gauge-coupon-info ul li {
    color: var(--color-neu-300);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    list-style: none;
    text-align: left;
    position: relative;
}
.modal-content .gold-gauge-coupon-info ul li span {
    color: var(--color-pri-500);
}
.modal-content .gold-gauge-coupon-info ul li {
    padding-left: 11px;
}
.modal-content .gold-gauge-coupon-info ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 5px;
    height: 1px;
    background: var(--color-neu-300);
}
.modal-content .gifts-coupon-info {
    margin-top: 12px;
    display: flex;
    padding: 18px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    border-radius: 7px;
    background: var(--color-neu-10);
    color: var(--color-neu-900);
    text-align: center;
    font-size: 16px;
    line-height: 21px;
}
.modal-content .binge-reading-coupon-info {
    margin-top: 12px;
    display: flex;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 7px;
    background: var(--color-neu-10);
    color: var(--color-neu-900);
}
.modal-content .binge-reading-coupon-info ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.modal-content .binge-reading-coupon-info ul li {
    color: var(--color-neu-500);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    list-style: none;
    text-align: left;
    position: relative;
    padding-left: 9px;
}
.modal-content .binge-reading-coupon-info ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-neu-500);
}

.back-dim .modal-wrap .modal-content-text {
    font-size: 17px;
}
.back-dim .modal-wrap .modal-content-text span {
    color: var(--color-pri-500);
}
.back-dim .modal-wrap .modal-content-caption {
    font-size: 15px;
    line-height: 20px;
}

#gold_log_pop .modal-wrap {
    height: min(800px, 100vh - 40px);
}

.modal-content--scroll {
    flex: 1 1 auto;
    gap: 20px;
}
.modal-content--scroll .gold-gauge-usage-log {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.modal-content--scroll .gold-gauge-usage-log .coupon-get-wrap {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.modal-content--scroll .gold-gauge-usage-log .coupon-get-wrap:not(:has(.empty)) {
    flex: 0 0 auto;
    min-height: auto;
    padding-bottom: 28px;
}
.modal-content--scroll .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1 1 0;
    min-height: 0;
    align-self: stretch;
    color: var(--color-neu-300);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    padding-bottom: 10px;
}
.modal-content--scroll .dashboard-box {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 12px;
    background: var(--color-pri-10);
    overflow: hidden;
}
.modal-content--scroll .dashboard-box .coupon-point {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
.modal-content--scroll .dashboard-box .coupon-point .coupon-point-sep {
    width: 1px;
    height: 40px;
    background: var(--color-pri-50);
}
.modal-content--scroll .dashboard-box .coupon-point div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    color: var(--color-neu-500);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}
.modal-content--scroll .dashboard-box .coupon-point div span {
    color: var(--color-pri-500);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
}
.modal-content--scroll .dashboard-box .last-month {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    align-self: stretch;
    background: var(--color-pri-30);
}
.modal-content--scroll .dashboard-box .last-month div:nth-child(1) {
    color: var(--color-neu-900);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-content--scroll .dashboard-box .last-month .btn-gold-get-pre {
    display: inline-flex;
    align-items: center;
    color: var(--color-pri-500);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}
.modal-content--scroll .dashboard-box .last-month .btn-gold-get-pre path {
    stroke: currentColor;
}
.modal-content--scroll .dashboard-box .last-month .btn-gold-get-pre:hover {
    text-decoration: underline;
    color: var(--color-pri-500);
}
.modal-content--scroll .dashboard-box .last-month div:nth-child(2) {
    font-size: 14px;
    color: var(--color-neu-300);
    font-weight: 400;
    line-height: 18px;
}
.modal-content--scroll .tab-line {
    margin-top: 0;
}
.modal-content--scroll .tab-line .tab-line__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.modal-content--scroll .calendar {
    display: flex;
    padding: 2px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.modal-content--scroll .calendar span {
    color: var(--color-neu-500);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
}
.modal-content--scroll .calendar .select-receive-date {
    display: flex;
    line-height: 0;
}
.modal-content--scroll .calendar .select-receive-date svg path {
    stroke: var(--color-neu-500);
}
.modal-content--scroll .calendar .select-receive-date.disabled {
    pointer-events: none;
    cursor: default;
}
.modal-content--scroll .calendar .select-receive-date.disabled svg path {
    stroke: var(--color-neu-50);
}
.modal-content--scroll .coupon-get-item {
    border-bottom: 1px solid var(--color-neu-20);
}
.modal-content--scroll .coupon-get-item .coupon-get-list button {
    transform: rotate(180deg);
}
.modal-content--scroll .coupon-get-item.active {
    border-bottom: 0;
}
.modal-content--scroll .coupon-get-item.active .coupon-get-detail {
    display: block;
}
.modal-content--scroll .coupon-get-item.active .coupon-get-list button {
    transform: rotate(0deg);
}
.modal-content--scroll .coupon-get-list {
    display: flex;
    width: 100%;
    height: 62px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--color-neu-900);
    font-size: 17px;
    font-weight: 500;
    position: relative;
}
.modal-content--scroll .coupon-get-list .date {
    color: var(--color-neu-900);
    font-variant-numeric: tabular-nums;
    width: 72px;
}
.modal-content--scroll .coupon-get-list > div:nth-child(2) {
    color: var(--color-pri-500);
}
.modal-content--scroll .coupon-get-list button {
    position: absolute;
    right: 0;
    top: 18px;
    background-color: transparent;
    border: 0;
    width: 20px;
    height: 20px;
    text-align: center;
}
.modal-content--scroll .coupon-get-list button svg {
    display: block;
}
.modal-content--scroll .coupon-get-list button svg path {
    stroke: var(--color-neu-300);
}
.modal-content--scroll .coupon-get-list:first-child {
    border-top: 0;
}
.modal-content--scroll .coupon-get-detail {
    border-radius: 10px;
    background: var(--color-opa-neubk-rgba-02);
    padding: 18px;
    display: none;
}
.modal-content--scroll .coupon-get-detail-list {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-neu-200);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 2px;
    border-top: 1px solid var(--color-neu-20);
    line-height: 21px;
    text-align: left;
}
.modal-content--scroll .coupon-get-detail-list span {
    font-weight: 400;
}
.modal-content--scroll .coupon-get-detail-list:first-of-type {
    padding-top: 0;
    border: 0;
}
.modal-content--scroll .coupon-get-detail-list:last-of-type {
    padding-bottom: 0;
}
.modal-content--scroll .coupon-get-detail-list .date {
    color: var(--color-neu-300);
    width: 52px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}
.modal-content--scroll .coupon-get-detail-list .period {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}
.modal-content--scroll .coupon-get-detail-list div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}
.modal-content--scroll .coupon-get-detail-list.active {
    color: var(--color-neu-900);
}
.modal-content--scroll .coupon-get-detail-list.active span {
    color: var(--color-neu-500);
}
.modal-content--scroll .coupon-get-detail-list.active .period {
    color: var(--color-neu-300);
}
.modal-content--scroll .point-get-list {
    display: block;
    padding: 16px 74px 16px 0;
    position: relative;
    border-bottom: 1px solid var(--color-neu-20);
    text-align: left;
}
.modal-content--scroll .point-get-list .novel-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neu-900);
    line-height: 21px;
}
.modal-content--scroll .point-get-list .episode-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    color: var(--color-neu-500);
    line-height: 20px;
    margin-top: 3px;
}
.modal-content--scroll .point-get-list .date {
    color: var(--color-neu-300);
    font-size: 14px;
    line-height: 18px;
    margin-top: 6px;
}
.modal-content--scroll .point-get-list .point {
    position: absolute;
    right: 0;
    top: 38px;
    color: var(--color-pri-500);
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    display: flex;
    gap: 4px;
}
.modal-content--scroll .coupon-use-list {
    display: block;
    padding: 16px 0;
    position: relative;
    border-bottom: 1px solid var(--color-neu-20);
    text-align: left;
}
.modal-content--scroll .coupon-use-list .novel-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neu-900);
    line-height: 21px;
}
.modal-content--scroll .coupon-use-list .episode-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    color: var(--color-neu-500);
    line-height: 20px;
    margin-top: 3px;
}
.modal-content--scroll .coupon-use-list .date {
    color: var(--color-neu-300);
    font-size: 14px;
    line-height: 18px;
    margin-top: 6px;
}