@charset "UTF-8";
/* PC (java) - Foundation / Color & base variables
 *
 * 아래 hex·#RRGGBBAA 값은 디자인 Foundation (:root $color-* ) 과 1:1 입니다.
 * base/_theme.scss 가 $color-* 를 :root 의 $color-* 로 출력합니다.
 *
 * 스타일 작성에서는 var($color-*), var($l-page-*) 만 사용합니다. ($color-* 직접 참조 금지)
 */
:root {
    --color-neu-00: #ffffff;
    --color-neu-10: #f5f5f5;
    --color-neu-100: #a1a1a1;
    --color-neu-20: #ebebeb;
    --color-neu-200: #949494;
    --color-neu-30: #dedede;
    --color-neu-300: #757575;
    --color-neu-40: #d1d1d1;
    --color-neu-400: #595959;
    --color-neu-50: #c7c7c7;
    --color-neu-500: #454545;
    --color-neu-600: #373737;
    --color-neu-700: #292929;
    --color-neu-800: #1c1c1c;
    --color-neu-900: #121212;
    --color-neu-bk: #000000;
    --color-opa-neu00-rgba-05: rgba(255, 255, 255, 0.05);
    --color-opa-neu00-rgba-10: rgba(255, 255, 255, 0.1);
    --color-opa-neu00-rgba-15: rgba(255, 255, 255, 0.15);
    --color-opa-neu00-rgba-20: rgba(255, 255, 255, 0.2);
    --color-opa-neu00-rgba-30: rgba(255, 255, 255, 0.3);
    --color-opa-neu00-rgba-40: rgba(255, 255, 255, 0.4);
    --color-opa-neu00-rgba-50: rgba(255, 255, 255, 0.5);
    --color-opa-neu00-rgba-60: rgba(255, 255, 255, 0.6);
    --color-opa-neu00-rgba-70: rgba(255, 255, 255, 0.7);
    --color-opa-neu00-rgba-80: rgba(255, 255, 255, 0.8);
    --color-opa-neu00-rgba-90: rgba(255, 255, 255, 0.9);
    --color-opa-neubk-rgba-02: rgba(0, 0, 0, 0.02);
    --color-opa-neubk-rgba-05: rgba(0, 0, 0, 0.05);
    --color-opa-neubk-rgba-10: rgba(0, 0, 0, 0.1);
    --color-opa-neubk-rgba-15: rgba(0, 0, 0, 0.15);
    --color-opa-neubk-rgba-20: rgba(0, 0, 0, 0.2);
    --color-opa-neubk-rgba-30: rgba(0, 0, 0, 0.3);
    --color-opa-neubk-rgba-40: rgba(0, 0, 0, 0.4);
    --color-opa-neubk-rgba-50: rgba(0, 0, 0, 0.5);
    --color-opa-neubk-rgba-60: rgba(0, 0, 0, 0.6);
    --color-opa-neubk-rgba-70: rgba(0, 0, 0, 0.7);
    --color-opa-neubk-rgba-80: rgba(0, 0, 0, 0.8);
    --color-opa-neubk-rgba-90: rgba(0, 0, 0, 0.9);
    --color-pri-10: #f5f9ff;
    --color-pri-100: #c5ddfc;
    --color-pri-200: #94c1fa;
    --color-pri-30: #ecf4fe;
    --color-pri-300: #63a4f8;
    --color-pri-400: #4190f6;
    --color-pri-50: #ddebfd;
    --color-pri-500: #2882f5;
    --color-pri-600: #0f64d2;
    --color-pri-700: #0f57b3;
    --color-pri-800: #0a3b7b;
    --color-pri-900: #072b5a;
    --color-sec-gold-10: #fff9f0;
    --color-sec-gold-200: #f3d7a0;
    --color-sec-gold-30: #fff5e5;
    --color-sec-gold-300: #eeca81;
    --color-sec-gold-400: #e9ae63;
    --color-sec-gold-50: #ffebcc;
    --color-sec-gold-500: #e99d3a;
    --color-sec-gold-600: #cf7f17;
    --color-sec-green-10: #f7fdfa;
    --color-sec-green-200: #8fdcb5;
    --color-sec-green-30: #ecf9f2;
    --color-sec-green-300: #70d2a1;
    --color-sec-green-400: #4dc78a;
    --color-sec-green-50: #d0f0e0;
    --color-sec-green-500: #00a352;
    --color-sec-green-600: #12874d;
    --color-sec-org-10: #fff9f5;
    --color-sec-org-200: #ffcead;
    --color-sec-org-30: #feefe5;
    --color-sec-org-300: #ffba8f;
    --color-sec-org-400: #ffa46b;
    --color-sec-org-50: #ffe6d6;
    --color-sec-org-500: #fa7000;
    --color-sec-org-600: #d65200;
    --color-sec-red-10: #fff5f5;
    --color-sec-red-200: #f6a2a2;
    --color-sec-red-30: #ffebeb;
    --color-sec-red-300: #f28c8c;
    --color-sec-red-400: #ef7171;
    --color-sec-red-50: #ffdcdc;
    --color-sec-red-500: #e83030;
    --color-sec-red-600: #ac3737;
    --color-sec-sky-10: #f5fcff;
    --color-sec-sky-200: #8ed6fa;
    --color-sec-sky-30: #ebf8fe;
    --color-sec-sky-300: #71ccf9;
    --color-sec-sky-400: #45bcf7;
    --color-sec-sky-50: #ceedfd;
    --color-sec-sky-500: #0096e0;
    --color-sec-sky-600: #027dbb;
    --color-sys-caution-400: #ef8925;
    --color-sys-caution-500: #e4780c;
    --color-sys-caution-600: #cb6b0b;
    --color-sys-info-400: #3198f2;
    --color-sys-info-500: #0777da;
    --color-sys-info-600: #0467be;
    --color-sys-negative-400: #fc4a4a;
    --color-sys-negative-500: #de3535;
    --color-sys-negative-600: #c62f2f;
    --color-sys-positive-400: #08ba08;
    --color-sys-positive-500: #00a300;
    --color-sys-positive-600: #008500;
    --l-page-max-width: 1100px;
    --l-page-snb-width: 245px;
    --l-page-col-gap: 40px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: #9fa7a7;
    --scrollbar-thumb-hover: #7d8383;
}

@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-display: swap;
    src: local("Pretendard Black"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-Black.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-display: swap;
    src: local("Pretendard ExtraBold"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-ExtraBold.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-display: swap;
    src: local("Pretendard Bold"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-Bold.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-display: swap;
    src: local("Pretendard SemiBold"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-SemiBold.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-display: swap;
    src: local("Pretendard Medium"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-Medium.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-display: swap;
    src: local("Pretendard Regular"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-Regular.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-display: swap;
    src: local("Pretendard Light"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-Light.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-display: swap;
    src: local("Pretendard ExtraLight"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-ExtraLight.woff2) format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-display: swap;
    src: local("Pretendard Thin"), url(https://cdn1.munpia.com/v2/assets/fonts/Pretendard-Thin.woff2) format("woff2");
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.3;
    background: var(--color-neu-00);
    -webkit-text-size-adjust: none;
    font-weight: 400;
}

/* reset */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
p,
blockquote,
th,
td,
input,
select,
textarea,
button {
    margin: 0;
    padding: 0;
}

article,
aside,
details,
figcaption,
div,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

h1 {
    margin: 0.67em 0;
    font-size: 2em;
}

mark {
    color: var(--color-neu-bk);
    background: var(--color-sec-gold-50);
}

small {
    font-size: 80%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

svg:not(:root) {
    overflow: hidden;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

button {
    overflow: visible;
    background: transparent;
    border: 0;
}

button,
select {
    text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input {
    line-height: normal;
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search] {
    -webkit-appearance: textfield;
    outline: 0;
}

fieldset {
    padding: 0.35em 0.625em 0.75em;
    margin: 0 2px;
    border: 1px solid silver;
}

legend {
    padding: 0;
    border: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: 600;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

td,
th {
    padding: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

select {
    height: 30px;
    border: 1px solid var(--color-neu-50);
    border-radius: 4px;
}

a {
    color: var(--color-pri-500);
    text-decoration: none;
    background-color: transparent;
}

a:focus,
a:hover {
    color: var(--color-pri-700);
    text-decoration: none;
    outline: 0;
}

a:active,
a:hover {
    outline: 0;
}

figure {
    margin: 0;
}

img {
    vertical-align: middle;
    border: 0;
}

.page-wrap {
    box-sizing: border-box;
    max-width: var(--l-page-max-width);
    width: 100%;
    margin-inline: auto;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}

/**
 * 신규 마크업용 페이지 셸
 *
 * 1단 (SNB 없음):
 *   <div class="l-page l-page--1col">
 *     <main class="l-page__main">...</main>
 *   </div>
 *
 * 2단 (SNB 200px + 메인):
 *   <div class="l-page l-page--2col">
 *     <div class="l-page__cols">
 *       <aside class="l-page__snb">...</aside>
 *       <div class="l-page__main">...</div>
 *     </div>
 *   </div>
 */
.l-page {
    box-sizing: border-box;
    max-width: var(--l-page-max-width);
    min-width: var(--l-page-max-width);
    width: 100%;
    margin-inline: auto;
}

.l-page__cols {
    display: flex;
    align-items: flex-start;
    gap: var(--l-page-col-gap);
    width: 100%;
}

.l-page__snb {
    flex: 0 0 var(--l-page-snb-width);
    width: var(--l-page-snb-width);
    max-width: var(--l-page-snb-width);
    box-sizing: border-box;
}

.l-page__main {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.l-page--1col .l-page__main {
    width: 100%;
}

.mypage-wrap.l-page--2col {
    display: flex;
    align-items: flex-start;
    gap: var(--l-page-col-gap);
}

.header {
    height: 60px;
    background-color: var(--color-neu-10);
}
.header .logo {
    font-weight: bold;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 12px;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
    height: 36px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    border: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg {
    flex-shrink: 0;
    color: inherit;
    width: 16px;
    height: 16px;
}
.btn svg * {
    stroke: currentColor;
    fill: currentColor;
}
.btn svg[fill=none] *,
.btn svg *[fill=none] {
    fill: none;
}
.btn svg *[stroke=none] {
    stroke: none;
}
.btn span {
    color: currentColor !important;
}
.btn > svg,
.btn > * > svg {
    margin-left: -2px;
}
.btn > span + svg,
.btn > span + * > svg {
    margin-right: -2px;
    margin-left: 0;
}
.btn.active, .btn:active, .btn:focus, .btn.focus {
    outline: 0;
}
.btn:focus, .btn.focus, .btn:hover {
    text-decoration: none;
}
.btn:not(.outlined):not(.secondary) {
    background-color: var(--color-pri-500);
    color: var(--color-neu-00);
}
.btn:not(.outlined):not(.secondary):hover {
    background-color: var(--color-pri-700);
    color: var(--color-neu-00);
}
.btn:not(.outlined):not(.secondary).disabled, .btn:not(.outlined):not(.secondary)[disabled], fieldset[disabled] .btn:not(.outlined):not(.secondary) {
    background-color: var(--color-pri-300);
    color: var(--color-pri-100);
}
.btn:not(.outlined).secondary {
    background-color: var(--color-pri-50);
    color: var(--color-pri-500);
}
.btn:not(.outlined).secondary:hover {
    background-color: var(--color-pri-100);
    color: var(--color-pri-500);
}
.btn:not(.outlined).secondary.disabled, .btn:not(.outlined).secondary[disabled], fieldset[disabled] .btn:not(.outlined).secondary {
    background-color: var(--color-pri-30);
    color: var(--color-pri-300);
}
.btn.outlined {
    border: 1px solid var(--color-pri-500);
    background-color: var(--color-neu-00);
    color: var(--color-pri-500);
}
.btn.outlined:hover:not(:disabled) {
    background-color: var(--color-pri-30);
    border-color: var(--color-pri-500);
    color: var(--color-pri-500);
}
.btn.outlined.disabled, .btn.outlined[disabled], fieldset[disabled] .btn.outlined {
    border-color: var(--color-neu-30);
    background-color: var(--color-neu-20);
    color: var(--color-neu-200);
}
.btn.outlined.secondary {
    border: 1px solid var(--color-neu-50);
    background-color: var(--color-neu-00);
    color: var(--color-neu-900);
}
.btn.outlined.secondary:hover:not(:disabled) {
    background-color: var(--color-neu-10);
    border-color: var(--color-neu-50);
    color: var(--color-neu-900);
}
.btn.outlined.secondary.disabled, .btn.outlined.secondary[disabled], fieldset[disabled] .btn.outlined.secondary {
    border-color: var(--color-neu-30);
    background-color: var(--color-neu-20);
    color: var(--color-neu-200);
}
.btn.outlined.btn--two-line {
    border: 1px solid var(--color-neu-50);
    background-color: var(--color-neu-00);
    color: var(--color-neu-500);
}
.btn.outlined.btn--two-line:hover:not(:disabled) {
    background-color: var(--color-neu-10);
    border-color: var(--color-neu-50);
    color: var(--color-neu-500);
}
.btn.outlined.btn--two-line.disabled, .btn.outlined.btn--two-line[disabled], fieldset[disabled] .btn.outlined.btn--two-line {
    border-color: var(--color-neu-30);
    background-color: var(--color-neu-10);
    color: var(--color-neu-200);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
}
.btn.block {
    display: flex;
    width: 100%;
}
.btn.xs {
    height: 24px;
    font-size: 12px;
    padding: 0 8px;
    gap: 2px;
    border-radius: 4px;
}
.btn.xs svg {
    width: 12px;
    height: 12px;
}
.btn.sm {
    height: 30px;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 5px;
}
.btn.sm svg {
    width: 14px;
    height: 14px;
}
.btn.lg {
    height: 42px;
    font-size: 15px;
    padding: 0 14px;
}
.btn.xl {
    height: 48px;
    font-size: 16px;
    padding: 0 16px;
    gap: 6px;
    border-radius: 7px;
}
.btn.xl svg {
    width: 18px;
    height: 18px;
}
.btn.btn--two-line {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 54px;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 7px;
    line-height: normal;
    font-size: unset;
}
.btn.btn--two-line > svg,
.btn.btn--two-line > * > svg {
    margin-left: 0;
    margin-right: 0;
}
.btn.btn--two-line .btn__text,
.btn.btn--two-line .btn__caption {
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    text-align: center;
}
.btn.btn--two-line .btn__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}
.btn.btn--two-line .btn__caption {
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
}

.content-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    padding: 0 0 20px 0;
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--color-neu-500);
}

.content-title > span {
    color: var(--color-neu-300);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.content-title h2 {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-neu-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 29px;
    padding-left: 2px;
}

.content-title h2 > span {
    color: var(--color-neu-300);
    font-size: 20px;
    font-weight: 500;
}

.content-title .btn {
    position: absolute;
    right: 0;
    top: 2px;
}

.page-title {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    position: relative;
}

.page-title__text {
    margin: 0;
    padding: 0;
    color: var(--color-neu-900);
}

.page-title__sub {
    color: var(--color-neu-300);
}

.page-title--h1 {
    gap: 8px;
    padding-bottom: 24px;
}
.page-title--h1 .page-title__text {
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 6px;
}
.page-title--h1 .page-title__text > span {
    color: var(--color-neu-300);
}
.page-title--h1 .page-title__sub {
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
}

.page-title--h2 {
    gap: 8px;
}
.page-title--h2 .page-title__text {
    font-size: 22px;
    font-weight: 700;
    line-height: 29px;
}
.page-title--h2 .page-title__sub {
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
}

.page-title--h3 {
    gap: 5px;
}
.page-title--h3 .page-title__text {
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
}
.page-title--h3 .page-title__sub {
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

.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:focus {
    color: var(--color-neu-900);
}

.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:focus {
    color: var(--color-neu-900);
}
.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:focus {
    color: var(--color-neu-500);
}
.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);
}
.novel-lnb .btn {
    margin: 6px 20px 0 20px;
}

.btn-provision {
    margin-top: 24px;
    display: flex;
    padding: 15px 18px 15px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 14px;
    border: 1px solid var(--color-neu-20);
    background: var(--color-neu-10);
    width: 100%;
    box-sizing: border-box;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-neu-500);
    text-align: left;
}
.btn-provision__text {
    flex: 1 0 0;
}
.btn-provision svg:last-of-type path {
    stroke: var(--color-neu-400);
}

.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;
}

.pagination {
    position: relative;
    display: flex;
    padding: 20px 0 0 0;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pagination a.page-num,
.pagination button.page-num {
    background-color: transparent;
    border: 0;
    margin: 5px 10px 7px 10px;
    padding: 0 1px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-neu-200);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}
.pagination a.page-num:hover,
.pagination button.page-num:hover {
    color: var(--color-neu-900);
}
.pagination a.page-num:visited,
.pagination button.page-num:visited {
    color: var(--color-neu-200);
}
.pagination a.page-num.active,
.pagination button.page-num.active {
    font-weight: 500;
    color: var(--color-neu-900);
    border-color: var(--color-neu-900);
}
.pagination a.page-num.active:visited,
.pagination button.page-num.active:visited {
    color: var(--color-neu-900);
}
.pagination button.btn-first,
.pagination button.btn-prev,
.pagination button.btn-next,
.pagination button.btn-last {
    background-color: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination button.btn-first a,
.pagination button.btn-prev a,
.pagination button.btn-next a,
.pagination button.btn-last a {
    display: inline-flex;
    height: 16px;
}
.pagination button.btn-first svg path,
.pagination button.btn-prev svg path,
.pagination button.btn-next svg path,
.pagination button.btn-last svg path {
    stroke: var(--color-neu-900);
}
.pagination button.btn-first:disabled svg path,
.pagination button.btn-prev:disabled svg path,
.pagination button.btn-next:disabled svg path,
.pagination button.btn-last:disabled svg path {
    stroke: var(--color-neu-50);
}
.pagination .btn-outline {
    width: 30px;
    height: 30px;
    padding: 3px 0 0 0;
}
.pagination .btn-ghost {
    width: 30px;
    height: 30px;
    padding: 3px 0 0 0;
}
.pagination .icon-16 {
    margin: 3px 0;
}
.pagination .page-num-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.txtfield-ctd {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.txtfield-ctd__input {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-neu-30);
    background: var(--color-neu-00);
    color: var(--color-neu-900);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.txtfield-ctd__input::placeholder {
    color: var(--color-neu-200);
}
.txtfield-ctd__input:focus {
    outline: none;
    border-color: var(--color-neu-500);
}
.txtfield-ctd__input:disabled {
    border-color: var(--color-neu-30);
    background: var(--color-neu-10);
    color: var(--color-neu-900);
    cursor: not-allowed;
    opacity: 1;
}
.txtfield-ctd__input[readonly] {
    border-color: var(--color-neu-30);
    background: var(--color-neu-10);
    color: var(--color-neu-900);
    cursor: default;
}
.txtfield-ctd__clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    box-sizing: border-box;
}
.txtfield-ctd__clear.is-visible {
    display: flex;
}
.txtfield-ctd__clear:focus-visible {
    outline: 2px solid var(--color-pri-500);
    outline-offset: 2px;
}
.txtfield-ctd__clear:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.txtfield-ctd__clear-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}
.txtfield-ctd__clear-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
}
.txtfield-ctd__clear-icon svg circle {
    fill: var(--color-neu-50);
}
.txtfield-ctd__clear-icon svg path {
    fill: none;
    stroke: var(--color-neu-00);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.txtfield-ctd__status {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    box-sizing: border-box;
    pointer-events: none;
    background: transparent;
}
.txtfield-ctd__status svg {
    display: block;
    flex-shrink: 0;
}
.txtfield-ctd__status-svg {
    width: 24px;
    height: 24px;
    fill: none;
}
.txtfield-ctd__status--positive .txtfield-ctd__status-svg path {
    fill: none;
    stroke: var(--color-sys-positive-500);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.txtfield-ctd__status--negative .txtfield-ctd__status-svg path {
    fill: none;
    stroke: var(--color-sys-negative-500);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.txtfield-ctd__input:disabled ~ .txtfield-ctd__clear {
    display: none !important;
}
.txtfield-ctd__input[readonly] ~ .txtfield-ctd__clear {
    display: none !important;
}
.txtfield-ctd__input:disabled ~ .txtfield-ctd__status, .txtfield-ctd__input[readonly] ~ .txtfield-ctd__status {
    display: none !important;
}
.txtfield-ctd--xl .txtfield-ctd__input {
    height: 48px;
    padding: 0 42px 0 16px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}
.txtfield-ctd--xl .txtfield-ctd__clear {
    right: 6px;
    width: 36px;
    height: 36px;
    padding: 6px;
}
.txtfield-ctd--xl .txtfield-ctd__clear-icon {
    width: 24px;
    height: 24px;
}
.txtfield-ctd--lg .txtfield-ctd__input {
    height: 42px;
    padding: 0 34px 0 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}
.txtfield-ctd--lg .txtfield-ctd__clear {
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 4px;
}
.txtfield-ctd--lg .txtfield-ctd__clear-icon {
    width: 20px;
    height: 20px;
}
.txtfield-ctd:not([class*=txtfield-ctd--]) .txtfield-ctd__input {
    height: 36px;
    padding: 0 32px 0 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}
.txtfield-ctd:not([class*=txtfield-ctd--]) .txtfield-ctd__clear {
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 4px;
}
.txtfield-ctd:not([class*=txtfield-ctd--]) .txtfield-ctd__clear-icon {
    width: 18px;
    height: 18px;
}
.txtfield-ctd--sm .txtfield-ctd__input {
    height: 30px;
    padding: 0 28px 0 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
}
.txtfield-ctd--sm .txtfield-ctd__clear {
    right: 3px;
    width: 24px;
    height: 24px;
    padding: 4px;
}
.txtfield-ctd--sm .txtfield-ctd__clear-icon {
    width: 16px;
    height: 16px;
}

.txtfield-ctd__input[type=search]::-webkit-search-cancel-button {
    display: none;
}

.input-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.input-text-wrap--success .txtfield-ctd__input:not(:disabled):not([readonly]),
.input-text-wrap--success .txtfield-ctd__input:not(:disabled):not([readonly]):focus {
    border-color: var(--color-sys-positive-500);
}

.input-text-wrap--error .txtfield-ctd__input:not(:disabled):not([readonly]),
.input-text-wrap--error .txtfield-ctd__input:not(:disabled):not([readonly]):focus {
    border-color: var(--color-sys-negative-500);
}

.input-text-wrap--success .txtfield-ctd__input:disabled,
.input-text-wrap--error .txtfield-ctd__input:disabled {
    border-color: var(--color-neu-30);
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--xl:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]),
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--xl:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 78px;
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--xl:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear,
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--xl:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear {
    right: 41px;
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--lg:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]),
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--lg:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 80px;
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--lg:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear,
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--lg:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear {
    right: 37px;
}

.input-text-wrap--success .txtfield-ctd:not([class*=txtfield-ctd--]):has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]),
.input-text-wrap--error .txtfield-ctd:not([class*=txtfield-ctd--]):has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 76px;
}

.input-text-wrap--success .txtfield-ctd:not([class*=txtfield-ctd--]):has(.txtfield-ctd__status--positive) .txtfield-ctd__clear,
.input-text-wrap--error .txtfield-ctd:not([class*=txtfield-ctd--]):has(.txtfield-ctd__status--negative) .txtfield-ctd__clear {
    right: 35px;
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--sm:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]),
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--sm:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 68px;
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--sm:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear,
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--sm:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear {
    right: 31px;
}

.input-text-wrap--success .txtfield-ctd__status--positive,
.input-text-wrap--error .txtfield-ctd__status--negative {
    display: flex;
}

.input-text-wrap--success .txtfield-ctd.txtfield-ctd--sm:has(.txtfield-ctd__status--positive) .txtfield-ctd__status,
.input-text-wrap--error .txtfield-ctd.txtfield-ctd--sm:has(.txtfield-ctd__status--negative) .txtfield-ctd__status {
    right: 3px;
}

.input-text-wrap__help {
    margin: 0;
    padding-left: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    color: var(--color-neu-300);
}

.input-text-wrap--success .input-text-wrap__help,
.input-text-wrap--error .input-text-wrap__help {
    font-size: 13px;
    line-height: 17px;
}

.input-text-wrap--success .input-text-wrap__help {
    color: var(--color-sys-positive-500);
}

.input-text-wrap--error .input-text-wrap__help {
    color: var(--color-sys-negative-500);
}

.input-text-wrap__help--ok {
    color: var(--color-sys-positive-500);
}

.input-text-wrap__help--error {
    font-size: 13px;
    line-height: 17px;
    color: var(--color-sys-negative-500);
}

.dropdown-wrap.error + .input-text-wrap__help,
.input-text-wrap:has(.dropdown-wrap.error) > .input-text-wrap__help {
    font-size: 13px;
    line-height: 17px;
    color: var(--color-sys-negative-500);
}

.txtfield-ctd.input-error .txtfield-ctd__input:not(:disabled):not([readonly]),
.txtfield-ctd.input-error .txtfield-ctd__input:not(:disabled):not([readonly]):focus {
    border-color: var(--color-sys-negative-500);
}

.txtfield-ctd.input-success .txtfield-ctd__input:not(:disabled):not([readonly]),
.txtfield-ctd.input-success .txtfield-ctd__input:not(:disabled):not([readonly]):focus {
    border-color: var(--color-sys-positive-500);
}

.txtfield-ctd.input-error .txtfield-ctd__input:disabled,
.txtfield-ctd.input-success .txtfield-ctd__input:disabled {
    border-color: var(--color-neu-30);
}

.txtfield-ctd.input-error ~ .input-text-wrap__help,
.txtfield-ctd.input-success ~ .input-text-wrap__help,
:has(> .txtfield-ctd.input-error) ~ .input-text-wrap__help,
:has(> .txtfield-ctd.input-success) ~ .input-text-wrap__help {
    font-size: 13px;
    line-height: 17px;
}

.txtfield-ctd.input-error ~ .input-text-wrap__help,
:has(> .txtfield-ctd.input-error) ~ .input-text-wrap__help {
    color: var(--color-sys-negative-500);
}

.txtfield-ctd.input-success ~ .input-text-wrap__help,
:has(> .txtfield-ctd.input-success) ~ .input-text-wrap__help {
    color: var(--color-sys-positive-500);
}

.txtfield-ctd.input-error .txtfield-ctd__status--negative,
.txtfield-ctd.input-success .txtfield-ctd__status--positive {
    display: flex;
}

.txtfield-ctd.txtfield-ctd--xl.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]),
.txtfield-ctd.txtfield-ctd--xl.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 78px;
}

.txtfield-ctd.txtfield-ctd--xl.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear,
.txtfield-ctd.txtfield-ctd--xl.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear {
    right: 41px;
}

.txtfield-ctd.txtfield-ctd--lg.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]),
.txtfield-ctd.txtfield-ctd--lg.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 80px;
}

.txtfield-ctd.txtfield-ctd--lg.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear,
.txtfield-ctd.txtfield-ctd--lg.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear {
    right: 37px;
}

.txtfield-ctd:not([class*=txtfield-ctd--]).input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]),
.txtfield-ctd:not([class*=txtfield-ctd--]).input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 76px;
}

.txtfield-ctd:not([class*=txtfield-ctd--]).input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear,
.txtfield-ctd:not([class*=txtfield-ctd--]).input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear {
    right: 35px;
}

.txtfield-ctd.txtfield-ctd--sm.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__input:not(:disabled):not([readonly]),
.txtfield-ctd.txtfield-ctd--sm.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__input:not(:disabled):not([readonly]) {
    padding-right: 68px;
}

.txtfield-ctd.txtfield-ctd--sm.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__clear,
.txtfield-ctd.txtfield-ctd--sm.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__clear {
    right: 31px;
}

.txtfield-ctd.txtfield-ctd--sm.input-error:has(.txtfield-ctd__status--negative) .txtfield-ctd__status,
.txtfield-ctd.txtfield-ctd--sm.input-success:has(.txtfield-ctd__status--positive) .txtfield-ctd__status {
    right: 3px;
}

.searchbar-ctd {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
}
.searchbar-ctd__select {
    flex: 0 0 auto;
    max-width: 100%;
}
.searchbar-ctd__select .select-board {
    gap: 0;
}
.searchbar-ctd__field {
    flex: 1 1 0;
    min-width: 0;
}
.searchbar-ctd__action {
    flex: 0 0 auto;
}
.searchbar-ctd--xl {
    gap: 8px;
}
.searchbar-ctd--xl .searchbar-ctd__field {
    flex: 0 0 260px;
    width: 260px;
    max-width: 100%;
}
.searchbar-ctd--lg {
    gap: 8px;
}
.searchbar-ctd--lg .searchbar-ctd__field {
    flex: 0 0 240px;
    width: 240px;
    max-width: 100%;
}

.searchbar-ctd:not(.searchbar-ctd--xl):not(.searchbar-ctd--lg) {
    gap: 6px;
}
.searchbar-ctd:not(.searchbar-ctd--xl):not(.searchbar-ctd--lg) .searchbar-ctd__field {
    flex: 0 0 220px;
    width: 220px;
    max-width: 100%;
}

.searchbar-ctd--narrow-select.searchbar-ctd--xl .select-board .dropdown {
    width: 122px;
}

.searchbar-ctd--narrow-select.searchbar-ctd--lg .select-board .dropdown {
    width: 115px;
}

.searchbar-ctd--narrow-select:not(.searchbar-ctd--xl):not(.searchbar-ctd--lg) .select-board .dropdown {
    width: 110px;
}

.input-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.input-search__field {
    flex: 1 1 0;
    min-width: 0;
}

.input-search__btn {
    flex: 0 0 auto;
}

.input-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 20px;
    justify-content: center;
    cursor: pointer;
    color: var(--color-neu-900);
}

.input-check--h18 {
    gap: 7px;
    font-size: 14px;
    line-height: 18px;
}

.input-check--h16 {
    gap: 6px;
    font-size: 13px;
    line-height: 17px;
}

.input-check:has(input[type=checkbox]:disabled) {
    color: var(--color-neu-300);
    cursor: not-allowed;
}

.input-check input[type=checkbox] {
    display: none;
}

.input-check input[type=checkbox] + .check-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

.input-check input[type=checkbox] + .check-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    background-color: var(--color-neu-00);
    box-sizing: border-box;
    border: 1px solid;
    border-color: var(--color-neu-40);
    border-radius: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.input-check--h18 input[type=checkbox] + .check-icon {
    width: 18px;
    height: 18px;
}

.input-check--h18 input[type=checkbox] + .check-icon svg {
    border-radius: 5px;
}

.input-check--h16 input[type=checkbox] + .check-icon {
    width: 16px;
    height: 16px;
}

.input-check--h16 input[type=checkbox] + .check-icon svg {
    border-radius: 4px;
}

.input-check input[type=checkbox] + .check-icon path {
    fill: transparent;
}

.input-check input[type=checkbox]:checked + .check-icon svg {
    background-color: var(--color-pri-500);
    border-color: var(--color-pri-500);
}

.input-check input[type=checkbox]:checked + .check-icon path {
    fill: var(--color-neu-00);
}

.input-check input[type=checkbox]:disabled + .check-icon {
    cursor: not-allowed !important;
}

.input-check input[type=checkbox]:disabled + .check-icon svg {
    background-color: var(--color-neu-20);
    border-color: var(--color-neu-30);
}

.input-check input[type=checkbox]:disabled + .check-icon path {
    fill: transparent;
}

.input-check input[type=checkbox]:disabled:checked + .check-icon {
    cursor: not-allowed !important;
}

.input-check input[type=checkbox]:disabled:checked + .check-icon svg {
    background-color: var(--color-neu-100);
    border-color: var(--color-neu-100);
}

.input-check input[type=checkbox]:disabled:checked + .check-icon path {
    fill: var(--color-neu-20);
}

.input-radio-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.input-radio {
    display: flex;
    align-items: flex-start;
}

.input-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    color: var(--color-neu-900);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    justify-content: flex-start;
    cursor: pointer;
}

.input-radio--h18 label {
    gap: 7px;
    min-height: 18px;
    font-size: 14px;
    line-height: 18px;
}

.input-radio--h16 label {
    gap: 6px;
    min-height: 17px;
    font-size: 13px;
    line-height: 17px;
}

.input-radio:has(input[type=radio]:disabled) label {
    color: var(--color-neu-300);
    cursor: not-allowed;
}

.input-radio input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-neu-40);
    outline: none;
    position: relative;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, border-width 0.15s ease;
}

.input-radio input[type=radio]:focus {
    outline: none;
}

.input-radio input[type=radio]:focus-visible {
    box-shadow: 0 0 0 2px var(--color-neu-00), 0 0 0 4px var(--color-pri-500);
}

.input-radio input[type=radio]:checked {
    border: 6px solid var(--color-pri-500);
    background-color: var(--color-neu-00);
}

.input-radio input[type=radio]:disabled {
    border: 1px solid var(--color-neu-30);
    background-color: var(--color-neu-20);
    cursor: not-allowed;
}

.input-radio input[type=radio]:disabled:checked {
    border: 6px solid var(--color-neu-100);
    background-color: var(--color-neu-20);
}

.input-radio--h18 input[type=radio] {
    width: 18px;
    height: 18px;
}

.input-radio--h18 input[type=radio]:checked {
    border: 5.5px solid var(--color-pri-500);
    background-color: var(--color-neu-00);
}

.input-radio--h18 input[type=radio]:disabled:checked {
    border: 5.5px solid var(--color-neu-100);
    background-color: var(--color-neu-20);
}

.input-radio--h16 input[type=radio] {
    width: 16px;
    height: 16px;
}

.input-radio--h16 input[type=radio]:checked {
    border: 5px solid var(--color-pri-500);
    background-color: var(--color-neu-00);
}

.input-radio--h16 input[type=radio]:disabled:checked {
    border: 5px solid var(--color-neu-100);
    background-color: var(--color-neu-20);
}

.switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
    --switch-thumb-size: 17px;
}
.switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.switch__track {
    position: relative;
    display: block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-neu-50);
    transition: background 0.2s ease;
    box-sizing: border-box;
}
.switch__thumb {
    position: absolute;
    top: 50%;
    left: 1.5px;
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    border-radius: 50%;
    background: var(--color-neu-00);
    transform: translateY(-50%);
    transition: left 0.2s ease;
    pointer-events: none;
    box-sizing: border-box;
}
.switch__input:checked + .switch__track {
    background: var(--color-pri-500);
}
.switch__input:checked + .switch__track .switch__thumb {
    left: calc(100% - var(--switch-thumb-size) - 1.5px);
}
.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--color-pri-500);
    outline-offset: 2px;
}
.switch__input:disabled {
    cursor: not-allowed;
}
.switch__input:disabled + .switch__track {
    cursor: not-allowed;
}
.switch__input:disabled:not(:checked) + .switch__track {
    background: var(--color-neu-30);
}
.switch__input:disabled:checked + .switch__track {
    background: var(--color-pri-200);
}
.switch__input:disabled + .switch__track .switch__thumb {
    background: var(--color-neu-10);
}
.switch--h18 {
    --switch-thumb-size: 15px;
}
.switch--h18 .switch__track {
    width: 32px;
    height: 18px;
}
.switch--h16 {
    --switch-thumb-size: 13px;
}
.switch--h16 .switch__track {
    width: 28px;
    height: 16px;
}

.switch-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
}
.switch-field__txt {
    flex-shrink: 0;
    color: var(--color-neu-900);
    user-select: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}
.switch-field--h18 {
    gap: 7px;
}
.switch-field--h18 .switch-field__txt {
    font-size: 14px;
    line-height: 18px;
}
.switch-field--h16 {
    gap: 6px;
}
.switch-field--h16 .switch-field__txt {
    font-size: 13px;
    line-height: 17px;
}
.switch-field--disabled {
    cursor: not-allowed;
}
.switch-field--disabled .switch-field__txt {
    color: var(--color-neu-300);
}

.chi-roundbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 36px;
    max-width: 100%;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--color-neu-10);
}
.chi-roundbox:has(.chi-roundbox__remove) {
    padding-right: 11px;
}

.chi-roundbox--sm {
    height: 30px;
    padding: 0 10px;
    border-radius: 5px;
}
.chi-roundbox--sm:has(.chi-roundbox__remove) {
    padding-right: 9px;
}
.chi-roundbox--sm .chi-roundbox__text {
    font-size: 14px;
    line-height: 18px;
}

.chi-roundbox__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neu-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chi-roundbox__remove {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 2px;
}
.chi-roundbox__remove:focus {
    outline: none;
}
.chi-roundbox__remove:focus-visible {
    outline: 2px solid var(--color-pri-500);
    outline-offset: 2px;
}

.chi-roundbox__name {
    flex: 1 0 0;
    min-width: 1px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neu-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chi-roundbox__size {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neu-500);
    white-space: nowrap;
}

.chi-roundbox__remove-icon {
    display: block;
    width: 14px;
    height: 14px;
    line-height: 0;
    pointer-events: none;
}
.chi-roundbox__remove-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
}
.chi-roundbox__remove-icon svg path {
    fill: none;
    stroke: var(--color-neu-500);
    stroke-linecap: round;
}

@keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.spinner {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: border-box;
    margin: 1px;
    aspect-ratio: 1;
    border-radius: 50%;
    --spinner-arc: var(--color-neu-300);
    --spinner-ring-w: 2px;
    --spinner-gap: 10%;
    background-color: transparent;
    background-image: radial-gradient(farthest-side, var(--spinner-arc) 100%, rgba(0, 0, 0, 0)), conic-gradient(from 0deg, rgba(0, 0, 0, 0) var(--spinner-gap), var(--spinner-arc) 100%);
    background-position: center top, center;
    background-size: var(--spinner-ring-w) var(--spinner-ring-w), 100% 100%;
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--spinner-ring-w)), #000 0);
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--spinner-ring-w)), #000 0);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    animation: loading 1s linear infinite;
}

.spinner--neu {
    --spinner-arc: var(--color-neu-300);
}

.spinner--pri {
    --spinner-arc: var(--color-pri-500);
}

.spinner--on-dark {
    --spinner-arc: var(--color-neu-00);
}

.spinner--h18 {
    width: 18px;
    --spinner-ring-w: 2px;
}

.spinner--h16 {
    width: 16px;
    --spinner-ring-w: 2px;
}

.spinner--h14 {
    width: 14px;
    --spinner-ring-w: 1.5px;
}

.spinner--h12 {
    width: 12px;
    --spinner-ring-w: 1.5px;
}

.txtarea-ctd-wrap {
    display: flex;
    width: 100%;
    padding: 14px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 6px;
    background: var(--color-neu-00);
    position: relative;
    border: 1px solid var(--color-neu-30);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.txtarea-ctd-wrap:focus-within {
    border-color: var(--color-neu-500);
}

.txtarea-ctd-wrap.disabled {
    background: var(--color-neu-10);
}

.txtarea-ctd-wrap.disabled:focus-within {
    border-color: var(--color-neu-30);
}

.txtarea-ctd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    color: var(--color-neu-900);
}

.txtarea-ctd textarea {
    border: 0;
    background: transparent;
    display: flex;
    height: 86px;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
    resize: none;
    outline: none;
    line-height: 20px;
    font-size: 15px;
    font-family: Pretendard, sans-serif;
}

.txtarea-ctd textarea::placeholder {
    color: var(--color-neu-200);
}

.txtarea-ctd textarea:disabled::placeholder {
    color: var(--color-neu-100);
}

.txtarea-ctd textarea:focus {
    border-color: var(--color-neu-900);
}

.txtarea-ctd textarea:disabled {
    color: var(--color-neu-200);
    cursor: not-allowed;
}

.count-submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.text-count {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: var(--color-neu-100);
}

.text-count span {
    font-weight: 500;
    color: var(--color-neu-300);
}

.count-submit .btn {
    width: 66px;
}

.dropdown-wrap {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.dropdown {
    display: flex;
    height: 20px;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neu-900);
    cursor: pointer;
}

.dropdown-wrap.error .dropdown {
    border: 1px solid var(--color-sys-negative-500);
}

.dropdown .arrow-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0s;
}

.dropdown.open .arrow-icon {
    transform: rotate(180deg);
}

.dropdown-list {
    position: absolute;
    top: 26px;
    right: 0;
    display: none;
    flex-direction: column;
    z-index: 10;
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid var(--color-neu-20);
    background: var(--color-neu-00);
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.05);
    padding: 10px;
    align-items: stretch;
    gap: 2px;
}

.dropdown-list div {
    padding: 0 14px;
    border-radius: 4px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-neu-500);
    width: 100%;
    min-width: 0;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    align-items: center;
    display: flex;
    min-height: 42px;
    height: auto;
    white-space: nowrap;
}

.dropdown-list div.selected {
    background: var(--color-pri-30);
    color: var(--color-neu-900);
}

.dropdown-list div:hover {
    background: var(--color-neu-10);
}

.dropdown-list.show {
    display: flex;
}

.select-board {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.select-board .dropdown {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-neu-30);
    background: var(--color-neu-00);
    color: var(--color-neu-900);
    width: 200px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    gap: 4px;
}

.select-board .dropdown .arrow-icon {
    position: absolute;
    transition: transform 0s;
    flex-shrink: 0;
    fill: none;
}
.select-board .dropdown .arrow-icon path {
    fill: none;
    stroke: var(--color-neu-300);
    stroke-width: 0.97px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.select-board .dropdown-list {
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

.select-board .dropdown.open {
    border: 1px solid var(--color-neu-500);
}

.select-board .dropdown.disabled,
.select-board .dropdown[aria-disabled=true] {
    border-color: var(--color-neu-30);
    background-color: var(--color-neu-10);
    color: var(--color-neu-200);
    cursor: not-allowed;
    pointer-events: none;
}

.select-board .dropdown.disabled.open,
.select-board .dropdown[aria-disabled=true].open {
    border-color: var(--color-neu-30);
}

.select-board .dropdown.disabled .arrow-icon,
.select-board .dropdown[aria-disabled=true] .arrow-icon {
    color: var(--color-neu-200);
}

.select-board .dropdown.disabled .arrow-icon path,
.select-board .dropdown[aria-disabled=true] .arrow-icon path {
    stroke: var(--color-neu-100);
}

.select-board .dropdown-wrap.error .dropdown.disabled,
.select-board .dropdown-wrap.error .dropdown[aria-disabled=true],
.select-board .dropdown-wrap.error .dropdown.disabled.open,
.select-board .dropdown-wrap.error .dropdown[aria-disabled=true].open {
    border-color: var(--color-neu-30);
}

.select-board .dropdown-wrap:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown {
    height: 36px;
    font-size: 14px;
    line-height: 18px;
    border-radius: 6px;
    padding: 0 30px 0 12px;
}

.select-board .dropdown-wrap:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown .arrow-icon {
    width: 14px;
    height: 14px;
    right: 12px;
    top: 10px;
}
.select-board .dropdown-wrap:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown .arrow-icon path {
    stroke-width: 0.97px;
}

.select-board .dropdown-wrap:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown-list {
    top: 42px;
}

.select-board .dropdown-wrap--lg .dropdown {
    height: 42px;
    font-size: 15px;
    line-height: 20px;
    border-radius: 6px;
    padding: 0 34px 0 14px;
}

.select-board .dropdown-wrap--lg .dropdown .arrow-icon {
    width: 16px;
    height: 16px;
    right: 14px;
    top: 12px;
}
.select-board .dropdown-wrap--lg .dropdown .arrow-icon path {
    stroke-width: 1.11px;
}

.select-board .dropdown-wrap--lg .dropdown-list {
    top: 48px;
}

.select-board .dropdown-wrap--sm .dropdown {
    height: 30px;
    font-size: 13px;
    line-height: 18px;
    border-radius: 5px;
    padding: 0 26px 0 10px;
}

.select-board .dropdown-wrap--sm .dropdown .arrow-icon {
    width: 12px;
    height: 12px;
    right: 10px;
    top: 8px;
}
.select-board .dropdown-wrap--sm .dropdown .arrow-icon path {
    stroke-width: 0.83px;
}

.select-board .dropdown-wrap--sm .dropdown-list {
    top: 36px;
}

.select-board .dropdown-wrap--xl .dropdown {
    height: 48px;
    font-size: 16px;
    line-height: 21px;
    border-radius: 7px;
    padding: 0 40px 0 16px;
}

.select-board .dropdown-wrap--xl .dropdown .arrow-icon {
    width: 18px;
    height: 18px;
    right: 15px;
    top: 14px;
}
.select-board .dropdown-wrap--xl .dropdown .arrow-icon path {
    stroke-width: 1.25px;
}

.select-board .dropdown-wrap--xl .dropdown-list {
    top: 55px;
}

.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-neu-30);
    background: var(--color-neu-00);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    gap: 4px;
    height: 48px;
    font-size: 16px;
    line-height: 21px;
    border-radius: 7px;
    padding: 0 40px 0 16px;
}

.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown .arrow-icon {
    position: absolute;
    width: 18px;
    height: 18px;
    right: 15px;
    top: 14px;
    flex-shrink: 0;
    transition: transform 0s;
    fill: none;
}
.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown .arrow-icon path {
    fill: none;
    stroke: var(--color-neu-300);
    stroke-width: 1.25px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown.open {
    border-color: var(--color-neu-500);
}

.dropdown-wrap.error.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown,
.dropdown-wrap.error.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown.open {
    border-color: var(--color-sys-negative-500);
}

.dropdown-wrap--xl:not(.dropdown-wrap--naked) .dropdown-list {
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - 32px);
    top: 55px;
    max-height: 370px;
    overflow-y: auto;
}

.dropdown-wrap--right .dropdown-list {
    left: auto;
    right: 0;
}

.select-board .dropdown-wrap.error .dropdown,
.select-board .dropdown-wrap.error .dropdown.open {
    border-color: var(--color-sys-negative-500);
}

.dropdown-wrap--flip-up > .dropdown-list {
    top: auto !important;
    bottom: calc(100% + 4px);
}

.select-board .dropdown-wrap--naked .dropdown,
.dropdown-wrap--naked .dropdown {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 4px;
    color: var(--color-neu-900);
}

.select-board .dropdown-wrap--naked .dropdown.open,
.dropdown-wrap--naked .dropdown.open {
    border: none !important;
    box-shadow: none;
}

.select-board .dropdown-wrap--naked .dropdown .arrow-icon,
.dropdown-wrap--naked .dropdown .arrow-icon {
    position: static;
    right: auto;
    top: auto;
}

.select-board .dropdown-wrap--naked .dropdown .arrow-icon path,
.dropdown-wrap--naked .dropdown .arrow-icon path {
    stroke: var(--color-neu-300);
}

.dropdown-wrap--naked .dropdown.disabled,
.dropdown-wrap--naked .dropdown[aria-disabled=true] {
    color: var(--color-neu-200);
    cursor: not-allowed;
    pointer-events: none;
}

.dropdown-wrap--naked .dropdown.disabled .arrow-icon path,
.dropdown-wrap--naked .dropdown[aria-disabled=true] .arrow-icon path {
    stroke: var(--color-neu-100);
}

.select-board .dropdown-wrap--naked.dropdown-wrap--sm .dropdown,
.dropdown-wrap--naked.dropdown-wrap--sm .dropdown {
    gap: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
}

.select-board .dropdown-wrap--naked.dropdown-wrap--sm .dropdown .arrow-icon,
.dropdown-wrap--naked.dropdown-wrap--sm .dropdown .arrow-icon {
    width: 12px;
    height: 12px;
}
.select-board .dropdown-wrap--naked.dropdown-wrap--sm .dropdown .arrow-icon path,
.dropdown-wrap--naked.dropdown-wrap--sm .dropdown .arrow-icon path {
    stroke-width: 0.83px;
}

.select-board .dropdown-wrap--naked:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown,
.dropdown-wrap--naked:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown {
    height: auto;
    padding: 0;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.select-board .dropdown-wrap--naked:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown .arrow-icon,
.dropdown-wrap--naked:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown .arrow-icon {
    width: 14px;
    height: 14px;
}
.select-board .dropdown-wrap--naked:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown .arrow-icon path,
.dropdown-wrap--naked:not(.dropdown-wrap--sm):not(.dropdown-wrap--lg):not(.dropdown-wrap--xl) .dropdown .arrow-icon path {
    stroke-width: 0.97px;
}

.select-board .dropdown-wrap--naked.dropdown-wrap--lg .dropdown,
.dropdown-wrap--naked.dropdown-wrap--lg .dropdown {
    gap: 4px;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

.select-board .dropdown-wrap--naked.dropdown-wrap--lg .dropdown .arrow-icon,
.dropdown-wrap--naked.dropdown-wrap--lg .dropdown .arrow-icon {
    width: 16px;
    height: 16px;
}
.select-board .dropdown-wrap--naked.dropdown-wrap--lg .dropdown .arrow-icon path,
.dropdown-wrap--naked.dropdown-wrap--lg .dropdown .arrow-icon path {
    stroke-width: 1.11px;
}

.select-board .dropdown-wrap--naked.dropdown-wrap--xl .dropdown,
.dropdown-wrap--naked.dropdown-wrap--xl .dropdown {
    gap: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

.select-board .dropdown-wrap--naked.dropdown-wrap--xl .dropdown .arrow-icon,
.dropdown-wrap--naked.dropdown-wrap--xl .dropdown .arrow-icon {
    width: 18px;
    height: 18px;
}
.select-board .dropdown-wrap--naked.dropdown-wrap--xl .dropdown .arrow-icon path,
.dropdown-wrap--naked.dropdown-wrap--xl .dropdown .arrow-icon path {
    stroke-width: 1.25px;
}

.select-board .dropdown-wrap--naked .dropdown-list,
.dropdown-wrap--naked .dropdown-list {
    top: 100%;
    margin-top: 6px;
}

.dropdown-wrap.error.dropdown-wrap--naked .dropdown,
.dropdown-wrap.error.dropdown-wrap--naked .dropdown.open {
    border: none !important;
}

.no-scroll {
    height: 100%;
    overflow: hidden;
}

.back-dim {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--color-opa-neubk-rgba-70);
}
.back-dim.double-dim {
    z-index: 11100;
}
.back-dim.hidden, .back-dim[hidden] {
    display: none;
}

.back-dim .modal-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 380px;
    max-height: min(1000px, calc(100vh - 40px));
    min-height: 0;
    margin: auto;
    overflow: hidden;
    gap: 0;
    border-radius: 16px;
    background-color: var(--color-neu-00);
    box-sizing: border-box;
    z-index: auto;
}
.back-dim .modal-wrap > .modal-content-wrap {
    flex: 1 1 auto;
    min-height: 0;
    padding: 28px 28px 0 28px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.back-dim .modal-wrap:has(> .modal-header) > .modal-content-wrap {
    padding: 28px 28px 0 28px;
}
.back-dim .modal-wrap.modal-wrap--lg {
    width: 460px;
}
.back-dim .modal-wrap .modal-header {
    flex-shrink: 0;
    width: 100%;
    height: 52px;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neu-900);
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-neu-20);
}
.back-dim .modal-wrap .modal-header .btn-close {
    width: 51px;
    height: 51px;
}
.back-dim .modal-wrap .btn-area {
    flex-shrink: 0;
    padding: 28px;
    display: flex;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.modal-header {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-neu-20);
    font-size: 19px;
    font-weight: 500;
    color: var(--color-neu-900);
}
.modal-header .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
.modal-header .btn-close svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
}
.modal-header .btn-close svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    box-sizing: border-box;
    text-align: center;
}

.back-dim .modal-wrap .modal-content-title {
    margin: 0;
    align-self: stretch;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: var(--color-neu-900);
}

.back-dim .modal-wrap .modal-content-text {
    margin: 0;
    align-self: stretch;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: var(--color-neu-900);
}

.back-dim .modal-wrap .modal-content-caption {
    margin: 0;
    align-self: stretch;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: var(--color-neu-500);
}

.back-dim .modal-wrap.modal-wrap--lg .modal-content--custom {
    gap: 16px;
}

.back-dim .modal-wrap .modal-content--scroll {
    align-items: stretch;
    text-align: left;
}

.tab-line {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--color-neu-20);
}

.tab-line__list {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}

.tab-line__item {
    height: 48px;
    padding: 12px 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: var(--color-neu-300);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}
.tab-line__item:hover {
    color: var(--color-neu-500);
    text-decoration: none;
}
.tab-line__item.active {
    font-weight: 700;
    color: var(--color-neu-900);
    border-bottom-color: var(--color-neu-900);
}

.divider-area {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--color-neu-10);
}
.divider-area--lv2 {
    border-top-color: var(--color-neu-20);
}
.divider-area--lv3 {
    border-top-color: var(--color-neu-30);
}
.divider-area--lv4 {
    border-top-color: var(--color-neu-40);
}
.divider-area--lv5 {
    border-top-color: var(--color-neu-100);
}
.divider-area--dash {
    border-top-style: dashed;
}

.toast-message {
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10101;
    display: flex;
}

.toast-message > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neu-00);
    background: var(--color-neu-bk);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 400;
    min-width: 240px;
    max-width: 400px;
    padding: 12px 20px 13px 20px;
    line-height: 23px;
    margin: 0 auto;
    word-break: keep-all;
    box-sizing: border-box;
    text-align: center;
}

.icon-h-12 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
}
.icon-h-12 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-14 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
}
.icon-h-14 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-16 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
}
.icon-h-16 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-18 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
}
.icon-h-18 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-20 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
}
.icon-h-20 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-24 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
}
.icon-h-24 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-28 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
}
.icon-h-28 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-32 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
}
.icon-h-32 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-40 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
}
.icon-h-40 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-48 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
}
.icon-h-48 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-h-64 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
}
.icon-h-64 svg {
    width: 100%;
    height: 100%;
    display: block;
}

.list-empty,
.empty {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 480px;
    font-size: 15px;
    line-height: 20px;
    color: var(--color-neu-300);
    padding-bottom: 10px;
}
.list-empty span,
.empty span {
    color: var(--color-pri-500);
}
.list-empty div,
.empty div {
    text-align: center;
}

td.list-empty,
td.empty {
    display: table-cell !important;
    vertical-align: middle;
    text-align: center;
    border-bottom: 0 !important;
    padding-bottom: 10px;
}

.list-empty ~ .pagination,
.empty ~ .pagination {
    display: none;
}

table:has(td.list-empty) ~ .pagination,
table:has(td.empty) ~ .pagination {
    display: none;
}

.tooltip-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
}
.tooltip-wrap--h20 {
    width: 20px;
    height: 20px;
}

.tooltip-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-neu-50);
}
.tooltip-trigger svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tooltip-panel {
    position: absolute;
    top: -5px;
    left: 28px;
    z-index: 10;
    width: 300px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 18px 16px 18px 18px;
    background: var(--color-neu-00);
    border: 1px solid var(--color-neu-30);
    border-radius: 10px;
}
.tooltip-panel[hidden] {
    display: none;
}
.tooltip-panel__content {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.tooltip-panel__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-neu-900);
    padding-bottom: 12px;
}
.tooltip-panel__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tooltip-panel__body ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tooltip-panel__body li {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neu-500);
    word-break: break-all;
    white-space: normal;
}
.tooltip-panel__body li::before {
    content: "-";
    flex-shrink: 0;
    line-height: 18px;
}
.tooltip-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neu-500);
    white-space: normal;
    word-break: break-all;
}
.tooltip-panel__item--basic {
    display: block;
}
.tooltip-panel__prefix {
    flex-shrink: 0;
    text-align: center;
}
.tooltip-panel__close {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-neu-900);
}
.tooltip-panel__close svg {
    display: block;
    width: 16px;
    height: 16px;
}
.tooltip-panel__close svg * {
    stroke-width: 1.111px;
}
.tooltip-panel__close:hover {
    color: var(--color-neu-900);
}

.badge-19 {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.badge-19 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Crect x='0.9' y='0.9' width='16.2' height='16.2' rx='8.1' fill='white'/%3E%3Crect x='0.9' y='0.9' width='16.2' height='16.2' rx='8.1' stroke='%23DE3535' stroke-width='1.8'/%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M3.751 6.199 3.751 7.487 5.198 6.62V13.046H6.558V4.875H5.692L3.751 6.199Z' fill='black'/%3E%3Cpath d='M13.854 7.406C13.758 6.925 13.601 6.528 13.385 6.191 13.18 5.842 12.939 5.577 12.675 5.373 12.398 5.155 12.097 4.999 11.772 4.915 11.014 4.686 10.244 4.711 9.558 4.963 9.185 5.107 8.872 5.312 8.619 5.565 8.354 5.818 8.15 6.119 8.017 6.468 7.873 6.805 7.801 7.166 7.801 7.575 7.801 7.984 7.861 8.345 8.006 8.67 8.126 8.995 8.319 9.296 8.583 9.56 8.848 9.825 9.149 10.018 9.498 10.15 9.835 10.283 10.232 10.355 10.665 10.355 11.183 10.355 11.664 10.234 12.097 9.994 12.302 9.885 12.483 9.753 12.639 9.608 12.639 9.636 12.616 9.822 12.591 9.958 12.527 10.306 12.446 10.583 12.326 10.824 12.206 11.077 12.073 11.269 11.941 11.414 11.785 11.57 11.604 11.703 11.399 11.811 11.207 11.907 10.978 11.955 10.714 11.955 10.352 11.955 10.064 11.883 9.823 11.727 9.594 11.57 9.438 11.354 9.354 11.065L9.293 10.86 7.958 11.113 8.03 11.366C8.198 11.955 8.523 12.425 8.993 12.749 9.462 13.074 10.04 13.243 10.689 13.243 11.135 13.243 11.544 13.158 11.905 13.002 12.29 12.846 12.603 12.617 12.892 12.328 13.626 11.582 13.999 10.391 13.999 8.802 13.999 8.357 13.951 7.9 13.854 7.43V7.406ZM11.917 8.658C11.616 8.959 11.174 9.115 10.762 9.115 10.35 9.115 9.976 9.021 9.642 8.694 9.309 8.368 9.197 8.032 9.197 7.587 9.197 7.274 9.281 6.997 9.462 6.732 9.63 6.48 9.835 6.299 10.064 6.203 10.593 5.986 11.087 6.01 11.508 6.203 11.712 6.299 11.881 6.432 12.025 6.588 12.158 6.732 12.242 6.877 12.302 7.057 12.495 7.598 12.327 8.248 11.917 8.658Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.498' height='9' fill='white' transform='translate(3.751 4.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.badge-19.size-16 {
    width: 16px;
    height: 16px;
}
.badge-19.size-14 {
    width: 14px;
    height: 14px;
}
.badge-19.size-12 {
    width: 12px;
    height: 12px;
}

.icon-new {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='4' fill='%23FA7000'/%3E%3Cpath d='M9.78753 3.51381H11.5403V12H10.0154L6.28615 6.60912H6.22399V12H4.46294V3.51381H6.01267L9.71294 8.90055H9.78753V3.51381Z' fill='white'/%3E%3C/svg%3E%0A");
}
.icon-new.size-14 {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' rx='3' fill='%23FA7000'/%3E%3Cpath d='M8.48961 3.42818H9.95024V10.5H8.67953L5.57179 6.0076H5.52V10.5H4.05245V3.42818H5.34389L8.42745 7.91713H8.48961V3.42818Z' fill='white'/%3E%3C/svg%3E%0A");
}

#topButton {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-neu-00);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 500;
}
#topButton img {
    width: 20px;
    height: 20px;
}
#topButton.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#topButton.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}