@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: 600;
}

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

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

.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-200);
  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: var(--color-neu-00);
}
.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.22222;
  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: 25px;
  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: 1001;
  display: flex;
}

.toast-message > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neu-00);
  background: var(--color-opa-neubk-rgba-90);
  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);
}

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-72 {
  width: 72px;
  height: 72px;
}
.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");
}

/*# sourceMappingURL=common.css.map */