@charset "utf-8";
/* TOURMUCH // Maker : H.J Jeon // E-Mail : jinia21@naver.com // Site : tourmuch.com */

/* Font Setting */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* 폰트 세팅 */
:root {
    --font-basic: 'Roboto';
    --font-weight-light: 100;
    --font-weight-regular: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 800;
    --font-weight-heavy: 900;
}


/* 기본 컬러 */
html {
    --input-placeholder-color: #99a1af;
    --color-background: #FFF;
    --color-background-rgb: 255,255,255;

    --color-basic: #191A1C;
    --color-basic-rgb: 25,26,28;
    --color-basic-reverse: #FFF;
    --color-basic-reverse-rgb: 255,255,255;
    --color-gray: #A79F99;
    --color-gray-rgb: 167,159,153;
    --color-gray-light: #99a1af;
    --color-gray-light-rgb: 106,114,130;
    --color-gray-deep: #575452;
    --color-gray-deep-rgb: 87,84,82;
    --color-gray-deep-hover: #1a1f28;
    --color-gray-deep-hover-rgb: 26,31,40;

    --color-point: #F37321;
    --color-point-rgb: 243,115,33;
    --color-point-hover: #e94b17;
    --color-point-hover-rgb: 233,75,23;
    --color-red: #e7000b;
    --color-red-rgb: 231,0,11;
    --color-red-hover: #c10007;
    --color-red-hover-rgb: 193,0,7;
    --color-green: #00bc7d;
    --color-green-rgb: 0,188,125;
    --color-green-hover: #096;
    --color-green-hover-rgb: 0,153,102;
    --color-blue: #1D6D9B;
    --color-blue-rgb: 29,109,155;
    --color-blue-hover: #134f72;
    --color-blue-hover-rgb: 19,79,114;
    --color-yellow: #fed072;
    --color-yellow-rgb: 254,208,114;
    --color-yellow-hover: #e7b85b;
    --color-yellow-hover-rgb: 231,184,91;
    --color-aqua: #0b9a9c;
    --color-aqua-rgb: 11,154,156;
    --color-aqua-hover: #07b9bc;
    --color-aqua-hover-rgb: 7,185,188;
    --color-brown: #221005;
    --color-brown-rgb: 34,16,5;
    --color-brown-hover: #593b25;
    --color-brown-hover-rgb: 89,59,37;
    --color-pink: #F89B6C;
    --color-pink-rgb: 248,155,108;
    --color-pink-hover: #ec6d6d;
    --color-pink-hover-rgb: 236,109,109;

    --color-line-basic: #d1d5dc;
    --color-line-basic-rgb: 209,213,220;
    --color-line-light: #f6f3f4;
    --color-line-light-rgb: 246,243,244;
    --color-box-basic: #FFF;
    --color-box-basic-rgb: 255,255,255;
}


/* Dark Mode */
html.theme-dark {
}


/* Color // Basic */
.color-basic, .hover-color-basic:hover                          { color: var(--color-basic) !important; }
.color-white, .hover-color-white:hover                          { color: var(--color-white) !important; }
.color-black, .hover-color-black:hover                          { color: var(--color-black) !important; }
.color-point, .hover-color-point:hover                          { color: var(--color-point) !important; }
.color-gray, .hover-color-gray:hover                            { color: var(--color-gray) !important; }
.color-gray-light, .hover-color-gray-light:hover                { color: var(--color-gray-light) !important; }
.color-gray-deep, .hover-color-gray-deep:hover                  { color: var(--color-gray-deep) !important; }
.color-red, .hover-color-red:hover                              { color: var(--color-red) !important; }
.color-green, .hover-color-green:hover                          { color: var(--color-green) !important; }
.color-blue, .hover-color-blue:hover                            { color: var(--color-blue) !important; }
.color-yellow, .hover-color-yellow:hover                        { color: var(--color-yellow) !important; }
.color-pink, .hover-color-yellow:hover                          { color: var(--color-pink) !important; }


/* color // Background */
.bg-transparent                                                 { background-color: transparent !important; }
.bg-basic                                                       { background-color: var(--color-box-basic) !important; }
.bg-point                                                       { background-color: var(--color-point) !important; }
.bg-gray                                                        { background-color: var(--color-gray) !important; }
.bg-red                                                         { background-color: var(--color-red) !important; }
.bg-green                                                       { background-color: var(--color-green) !important; }
.bg-blue                                                        { background-color: var(--color-blue) !important; }
.bg-yellow                                                      { background-color: var(--color-yellow) !important; }
.bg-brown                                                       { background-color: var(--color-brown) !important; }


/* Color // Button */
[class*="btns"]                             { padding: 5px 10px; border-color: var(--color-line-basic); background-color: var(--color-box-basic); font-size: clamp(0.875rem, 2vw, 1rem); color: var(--color-gray); transition: .2s; }
[class*="btns"].size-sm                     { padding: 5px 10px; font-size: var(--size-14); }
[class*="btns"].size-md                     { padding: 7px 15px; font-size: var(--size-16); }
[class*="btns"].size-lg                     { padding: 10px 20px; font-size: var(--size-18); }
[class*="btns"].size-xl                     { padding: 12px 25px; font-size: var(--size-20); }
[class*="btns"].flex                        { display: flex !important; }
[class*="btns"]:hover                       { border-color: var(--color-line-light); color: var(--color-basic); }

.btns-point                                 { border-color: var(--color-point); background-color: var(--color-point); color: var(--color-white) !important; }
.btns-point-hover:hover                     { border-color: var(--color-point-hover) !important; background-color: var(--color-point-hover) !important; color: var(--color-white) !important; }
.btns-point:hover                           { border-color: var(--color-point-hover); background-color: var(--color-point-hover); color: var(--color-white); }

.btns-base                                  { border-color: rgba(var(--color-point-rgb),0.1); background-color: rgba(var(--color-point-rgb),0.1); }
.btns-base-hover:hover                      { border-color: var(--color-point-hover) !important; background-color: var(--color-point-hover) !important; color: var(--color-white) !important; }
.btns-base:hover                            { border-color: rgba(var(--color-point-rgb),0.2); background-color: rgba(var(--color-point-rgb),0.2); color: var(--color-basic); }

.btns-gray-deep                             { border-color: var(--color-gray-deep); background-color: var(--color-gray-deep); color: var(--color-white) !important; }
.btns-gray-deep-hover:hover                 { border-color: var(--color-gray-deep-hover) !important; background-color: var(--color-gray-deep-hover) !important; color: var(--color-white) !important; }
.btns-gray-deep:hover                       { border-color: var(--color-gray-deep-hover); background-color: var(--color-gray-deep-hover); color: var(--color-white); }

.btns-red                                   { border-color: var(--color-red); background-color: var(--color-red); color: var(--color-white) !important; }
.btns-red-hover:hover                       { border-color: var(--color-red-hover) !important; background-color: var(--color-red-hover) !important; color: var(--color-white) !important; }
.btns-red:hover                             { border-color: var(--color-red-hover); background-color: var(--color-red-hover); }

.btns-red-line                              { border-color: var(--color-red); background-color: var(--color-box-basic); color: var(--color-red); }
.btns-red-line-hover:hover                  { border-color: var(--color-red-hover) !important; background-color: var(--color-red-50) !important; color: var(--color-red-hover) !important; }
.btns-red-line:hover                        { border-color: var(--color-red-hover); background-color: var(--color-red-50); color: var(--color-red-hover); }

.btns-blue                                  { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white) !important; }
.btns-blue-hover:hover                      { border-color: var(--color-blue-hover) !important; background-color: var(--color-blue-hover) !important; color: var(--color-white) !important; }
.btns-blue:hover                            { border-color: var(--color-blue-hover); background-color: var(--color-blue-hover); }

.btns-blue-line                             { border-color: var(--color-blue); background-color: var(--color-box-basic); color: var(--color-blue); }
.btns-blue-line-hover:hover                 { border-color: var(--color-blue-hover) !important; background-color: var(--color-blue-50) !important; color: var(--color-blue-hover) !important; }
.btns-blue-line:hover                       { border-color: var(--color-blue-hover); background-color: var(--color-blue-50); color: var(--color-blue-hover); }

.btns-green                                 { border-color: var(--color-green); background-color: var(--color-green); color: var(--color-white) !important; }
.btns-green-hover:hover                     { border-color: var(--color-green-hover) !important; background-color: var(--color-green-hover) !important; color: var(--color-white) !important; }
.btns-green:hover                           { border-color: var(--color-green-hover); background-color: var(--color-green-hover); }

.btns-green-line                            { border-color: var(--color-green); background-color: var(--color-box-basic); color: var(--color-green); }
.btns-green-line-hover:hover                { border-color: var(--color-green-hover) !important; background-color: var(--color-green-50) !important; color: var(--color-green-hover) !important; }
.btns-green-line:hover                      { border-color: var(--color-green-hover); background-color: var(--color-green-50); color: var(--color-green-hover); }

.btns-brown                                 { border-color: var(--color-brown); background-color: var(--color-brown); color: var(--color-white) !important; }
.btns-brown-hover:hover                     { border-color: var(--color-brown-hover) !important; background-color: var(--color-brown-hover) !important; color: var(--color-white) !important; }
.btns-brown:hover                           { border-color: var(--color-brown-hover); background-color: var(--color-brown-hover); }

.btns-brown-line                            { border-color: var(--color-brown); background-color: var(--color-box-basic); color: var(--color-brown); }
.btns-brown-line-hover:hover                { border-color: var(--color-brown-hover) !important; background-color: var(--color-amber-50) !important; color: var(--color-blue-hover) !important; }
.btns-brown-line:hover                      { border-color: var(--color-brown-hover); background-color: var(--color-amber-50); color: var(--color-brown-hover); }

@media screen and (min-width: 768px) {
    [class*="btns"].md\:size-sm             { padding: var(--size-3) var(--size-5); font-size: var(--size-14); }
    [class*="btns"].md\:size-md             { padding: var(--size-7) var(--size-15); font-size: var(--size-16); }
    [class*="btns"].md\:size-lg             { padding: var(--size-10) var(--size-20); font-size: var(--size-18); }
    [class*="btns"].md\:size-xl             { padding: var(--size-12) var(--size-25); font-size: var(--size-20); }
    [class*="btns"].md\:flex                { display: flex !important; }
}

@media screen and (min-width: 1024px) {
    [class*="btns"].lg\:size-sm             { padding: var(--size-3) var(--size-5); font-size: var(--size-14); }
    [class*="btns"].lg\:size-md             { padding: var(--size-7) var(--size-15); font-size: var(--size-16); }
    [class*="btns"].lg\:size-lg             { padding: var(--size-10) var(--size-20); font-size: var(--size-18); }
    [class*="btns"].lg\:size-xl             { padding: var(--size-12) var(--size-25); font-size: var(--size-20); }
    [class*="btns"].lg\:flex                { display: flex !important; }
}

@media screen and (min-width: 1440px) {
    [class*="btns"].xl\:size-sm             { padding: var(--size-3) var(--size-5); font-size: var(--size-14); }
    [class*="btns"].xl\:size-md             { padding: var(--size-7) var(--size-15); font-size: var(--size-16); }
    [class*="btns"].xl\:size-lg             { padding: var(--size-10) var(--size-20); font-size: var(--size-18); }
    [class*="btns"].xl\:size-xl             { padding: var(--size-12) var(--size-25); font-size: var(--size-20); }
    [class*="btns"].xl\:flex                { display: flex !important; }
}


/* Div Table Setting */
.div-table                      { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
.div-table-fixed                { table-layout: fixed !important; }
.div-table .thead,
.div-table .tbody,
.div-table .tfoot               { display: table-header-group; }
.div-table .tr                  { display: table-row; border-color: inherit; }
.div-table .th,
.div-table .td                  { display: table-cell; vertical-align:middle; }

@media screen and (min-width: 767px) {
    .md\:div-table              { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
    .md\:div-table .thead,
    .md\:div-table .tbody,
    .md\:div-table .tfoot       { display: table-header-group; }
    .md\:div-table .tr          { display: table-row; border-color: inherit; }
    .md\:div-table .th,
    .md\:div-table .td          { display: table-cell; vertical-align:middle; }
}

@media screen and (min-width: 1024px) {
    .lg\:div-table              { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
    .lg\:div-table .thead,
    .lg\:div-table .tbody,
    .lg\:div-table .tfoot       { display: table-header-group; }
    .lg\:div-table .tr          { display: table-row; border-color: inherit; }
    .lg\:div-table .th,
    .lg\:div-table .td          { display: table-cell; vertical-align:middle; }
}

@media screen and (min-width: 1440px) {
    .xl\:div-table              { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
    .xl\:div-table .thead,
    .xl\:div-table .tbody,
    .xl\:div-table .tfoot       { display: table-header-group; }
    .xl\:div-table .tr          { display: table-row; border-color: inherit; }
    .xl\:div-table .th,
    .xl\:div-table .td          { display: table-cell; vertical-align:middle; }
}


/* Rounded */
.rounded-xs, .hover-rounded-xs:hover                { border-radius: 0.188rem } /* 3px */
.rounded-sm, .hover-rounded-sm:hover                { border-radius: 0.313rem } /* 5px */
.rounded-md, .hover-rounded-md:hover                { border-radius: 0.625rem } /* 10px */
.rounded-lg, .hover-rounded-lg:hover                { border-radius: 1rem } /* 20px */
.rounded-xl, .hover-rounded-xl:hover                { border-radius: 1.25rem } /* 30px */

@media screen and (min-width: 768px) {
    .md\:rounded-xs, .md\:hover-rounded-xs:hover    { border-radius: 0.188rem } /* 3px */
    .md\:rounded-sm, .md\:hover-rounded-sm:hover    { border-radius: 0.313rem } /* 5px */
    .md\:rounded-md, .md\:hover-rounded-md:hover    { border-radius: 0.625rem } /* 10px */
    .md\:rounded-lg, .md\:hover-rounded-lg:hover    { border-radius: 1rem } /* 20px */
    .md\:rounded-xl, .md\:hover-rounded-xl:hover    { border-radius: 1.25rem } /* 30px */
}

@media screen and (min-width: 1024px) {
    .lg\:rounded-xs, .lg\:hover-rounded-xs:hover    { border-radius: 0.188rem } /* 3px */
    .lg\:rounded-sm, .lg\:hover-rounded-sm:hover    { border-radius: 0.313rem } /* 5px */
    .lg\:rounded-md, .lg\:hover-rounded-md:hover    { border-radius: 0.625rem } /* 10px */
    .lg\:rounded-lg, .lg\:hover-rounded-lg:hover    { border-radius: 1rem } /* 20px */
    .lg\:rounded-xl, .lg\:hover-rounded-xl:hover    { border-radius: 1.25rem } /* 30px */
}

@media screen and (min-width: 1440px) {
    .xl\:rounded-xs, .xl\:hover-rounded-xs:hover    { border-radius: 0.188rem } /* 3px */
    .xl\:rounded-sm, .xl\:hover-rounded-sm:hover    { border-radius: 0.313rem } /* 5px */
    .xl\:rounded-md, .xl\:hover-rounded-md:hover    { border-radius: 0.625rem } /* 10px */
    .xl\:rounded-lg, .xl\:hover-rounded-lg:hover    { border-radius: 1rem } /* 20px */
    .xl\:rounded-xl, .xl\:hover-rounded-xl:hover    { border-radius: 1.25rem } /* 30px */
}


/* Shadow */
.shadow-sm, .hover-shadow-sm:hover                  { box-shadow: 0 5px 5px -5px rgba(var(--color-black-rgb),0.15); }
.shadow-md, .hover-shadow-md:hover                  { box-shadow: 0 10px 10px -8px rgba(var(--color-black-rgb),0.1); }
.shadow-lg, .hover-shadow-lg:hover                  { box-shadow: 0 15px 15px -10px rgba(var(--color-black-rgb),0.15); }
.shadow-xl, .hover-shadow-xl:hover                  { box-shadow: 0 20px 20px -20px rgba(var(--color-black-rgb),0.2); }
.inset-shadow-sm, .hover-inset-shadow-sm            { box-shadow: inset 2px 3px 5px rgba(var(--color-black-rgb),0.1); }

@media screen and (min-width: 768px) {
    .md\:shadow-sm, .md\:hover-shadow-sm:hover      { box-shadow: 0 5px 5px -5px rgba(0,0,0,0.15); }
    .md\:shadow-md, .md\:hover-shadow-md:hover      { box-shadow: 0 10px 10px -8px rgba(0,0,0,0.1); }
    .md\:shadow-lg, .md\:hover-shadow-lg:hover      { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.15); }
    .md\:shadow-xl, .md\:hover-shadow-xl:hover      { box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2); }
}

@media screen and (min-width: 1024px) {
    .lg\:shadow-sm, .lg\:hover-shadow-sm:hover      { box-shadow: 0 5px 5px -5px rgba(0,0,0,0.15); }
    .lg\:shadow-md, .lg\:hover-shadow-md:hover      { box-shadow: 0 10px 10px -8px rgba(0,0,0,0.1); }
    .lg\:shadow-lg, .lg\:hover-shadow-lg:hover      { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.15); }
    .lg\:shadow-xl, .lg\:hover-shadow-xl:hover      { box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2); }
}

@media screen and (min-width: 1440px) {
    .xl\:shadow-sm, .xl\:hover-shadow-sm:hover      { box-shadow: 0 5px 5px -5px rgba(0,0,0,0.15); }
    .xl\:shadow-md, .xl\:hover-shadow-md:hover      { box-shadow: 0 10px 10px -8px rgba(0,0,0,0.1); }
    .xl\:shadow-lg, .xl\:hover-shadow-lg:hover      { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.15); }
    .xl\:shadow-xl, .xl\:hover-shadow-xl:hover      { box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2); }
}


/* Transition */
.transition-1 { transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.transition-2 { transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }




/* Tooltip */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

[data-tooltip]::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

[data-tooltip][data-tooltip-position="top"]::after {bottom: 100%;left: 50%;transform: translateX(-50%);margin-bottom: 5px;}
[data-tooltip][data-tooltip-position="top"]::before {border-width: 5px 5px 0 5px;border-color: #333 transparent transparent transparent;bottom: 100%;left: 50%;transform: translateX(-50%);margin-bottom: 3px;}
[data-tooltip][data-tooltip-position="bottom"]::after {top: 100%;left: 50%;transform: translateX(-50%);margin-top: 5px;}
[data-tooltip][data-tooltip-position="bottom"]::before {border-width: 0 5px 5px 5px;border-color: transparent transparent #333 transparent;top: 100%;left: 50%;transform: translateX(-50%);margin-top: 3px;}
[data-tooltip][data-tooltip-position="left"]::after {right: 100%;top: 50%;transform: translateY(-50%);margin-right: 5px;}
[data-tooltip][data-tooltip-position="left"]::before {border-width: 5px 0 5px 5px;border-color: transparent transparent transparent #333;right: 100%;top: 50%;transform: translateY(-50%);margin-right: 3px;}
[data-tooltip][data-tooltip-position="right"]::after {left: 100%;top: 50%;transform: translateY(-50%);margin-left: 5px;}
[data-tooltip][data-tooltip-position="right"]::before {border-width: 5px 5px 5px 0;border-color: transparent #333 transparent transparent;left: 100%;top: 50%;transform: translateY(-50%);margin-left: 3px;}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}


/* Alerts */
[class*="lowup-alerts"] {
    padding: 3px 10px;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-gray-100);
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    color: var(--color-gray);
    border-radius: 4px;
}

.lowup-alerts__success                  { border-color: var(--color-emerald-100); background-color: var(--color-emerald-50); color: var(--color-emerald-700); }
button.lowup-alerts__success:hover,
a.lowup-alerts__success:hover           { border-color: var(--color-emerald-200); color: var(--color-emerald-800); }
.lowup-alerts__danger                   { border-color: var(--color-red-100); background-color: var(--color-red-50); color: var(--color-red-700); }
button.lowup-alerts__danger:hover,
a.lowup-alerts__danger:hover           { border-color: var(--color-red-200); color: var(--color-red-800); }
.lowup-alerts__warning                  { border-color: var(--color-yellow-100); background-color: var(--color-yellow-50); color: var(--color-yellow-700); }
button.lowup-alerts__warning:hover,
a.lowup-alerts__warning:hover           { border-color: var(--color-yellow-200); color: var(--color-yellow-800); }


/* H Setting */
h1.h1-tit > em.tit { font-size: clamp(2.125rem, 2.5vw, 3rem); font-weight: var(--font-weight-bold); }
h2.h2-tit > em.tit { font-size: clamp(1.5rem, 2.5vw, 2.125rem); font-weight: var(--font-weight-bold); }
h3.h3-tit > em.tit { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: var(--font-weight-bold); }
h4.h4-tit > em.tit { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: var(--font-weight-semibold); }
h5.h5-tit > em.tit { font-size: clamp(0.875rem, 2.5vw, 1rem); font-weight: var(--font-weight-medium); }


/* Form Setting */
div.basic-input, input.basic-input, select.basic-select,
div.line-input, input.line-input, select.line-select {
    position: relative;
    margin: 0;
    background-color: var(--color-background);
    word-break: break-all;
    transition: .3s;
}

div.basic-input, input.basic-input, select.basic-select {
    padding: 5px 10px;
    border: 1px solid var(--color-line-basic);
    box-shadow: inset 1px 2px 3px rgba(var(--color-black-rgb),0.08);
}

div.line-input, input.line-input, select.line-select {
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid var(--color-line-basic);
}

input.basic-input:focus,
input.line-input:focus {
    outline: none;
}

input.basic-input:not(.readonly):focus,
input.line-input:not(.readonly):focus {
    border-color: var(--color-gray);
}

select.basic-select {
    padding-right: 26px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat;
    background-position: right 5px center;
    background-size: 20px;
}

.snuh-theme-dark select.basic-select {
    background: var(--color-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat;
    background-position: right 5px center;
    background-size: 20px;
}

textarea.basic-textarea {
    position: relative;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-background);
    box-shadow: inset 1px 2px 3px rgba(var(--color-black-rgb),0.08);
    word-break: break-all;
    transition: .3s;
}

textarea.basic-textarea:focus {
    outline: none;
    border-color: var(--color-gray);
}

input.basic-check,
input.basic-radio {
    display: none;
}

input.basic-check + label,
input.basic-radio + label {
    --label-check-size: 24px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--color-gray);
}

input.basic-check + label > span,
input.basic-radio + label > span {
    display: inline-block;
    width: var(--label-check-size);
    height: var(--label-check-size);
    line-height: calc(var(--label-check-size) - 2px);
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-background);
    box-shadow: inset 1px 2px 3px rgba(var(--color-black-rgb),0.08);
    text-align: center;
    border-radius: 4px;
    color: var(--color-gray-light);
    font-size: 0.813rem;
}

input.basic-radio + label > span {
    border-radius: 50%;
}

input.basic-check:checked + label > span,
input.basic-radio:checked + label > span {
    border-color: var(--color-point);
    background-color: var(--color-point);
    color: var(--color-white);
}

input.basic-check:checked + label,
input.basic-radio:checked + label {
    color: var(--color-basic);
}

input.basic-check.mini + label,
input.basic-radio.mini + label {
    --label-check-size: 18px;
    font-size: 0.875rem;
}

input.basic-check.mini + label > span,
input.basic-radio.mini + label > span {
    font-size: 0.75rem;
}


/* 동영상 임베드 */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* 페이지네이션 */
.pagenation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
}

.pagenation .arrow-link {
    padding: 5px 15px;
    font-size: 1.25rem;
}

.pagenation .arrow-link.disabled {
    color: var(--color-gray);
    cursor: default;
}

.pagenation .page-input {
    width: 70px;
    text-align: center;
    border-radius: 20px;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
}

.pagenation .page {
    color: var(--color-gray);
}


/* 파일 업로더 */
.file-uploader .upload-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border: 2px dashed var(--color-line-basic);
    background-color: rgba(var(--color-line-light-rgb),0.5);
    border-radius: var(--rounded-lg);
    color: var(--color-gray);
    text-align: center;
}

.file-uploader .upload-box .upload-icon {
    font-size: 3rem;
}

.file-uploader .upload-box span {
    position: relative;
}

.file-uploader .file-list {
    list-style: none;
    padding: 0;
}

.file-uploader .file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f8f9fc;
    padding: 1rem;
    border-radius: var(--rounded-md);
    margin-top: 10px;
}

.file-uploader .file-list .progress-bar {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    margin: 10px 0;
}

.file-uploader .file-list li .file-state {
    flex-grow: 1;
}

.file-uploader .file-list li .file-size {
    flex-shrink: 0;
}

.file-uploader .file-list li .del-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-color: var(--color-line-basic);
    color: var(--color-white);
    text-align: center;
    border-radius: 50%;
}

.file-uploader .file-list li .del-btn:hover {
    background-color: var(--color-red);
}


/* 스크롤 커스텀 // 세로 */
.scrollbox {
    overflow-x: hidden;
	overflow-y: auto;
	-ms-overflow-style: scrollbar;
}

.scrollbox::-webkit-scrollbar {
	width: 4px;
}

.scrollbox::-webkit-scrollbar-track {
	background-color: transparent;
}

.scrollbox::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: rgba(var(--color-basic-rgb),0.1);
    transition: .3s;
    cursor: pointer;
}

.scrollbox::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-yellow);
}