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

/* Font Setting */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../webfonts/PretendardVariable.woff2') format('woff2-variations');
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}


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

    --font-point: 'Paperozi';
    --font-eng: 'Open Sans';

    --font-size-2xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
}


/* 기본 컬러 */
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-hover: #0a0a0a;
    --color-basic-hover-rgb: 10,10,10;
    --color-basic-reverse: #FFF;
    --color-basic-reverse-rgb: 255,255,255;
    --color-gray: #686C7A;
    --color-gray-rgb: 104,108,122;
    --color-gray-hover: #424655;
    --color-gray-hover-rgb: 66,70,85;
    --color-gray-deep: #45474e;
    --color-gray-deep-rgb: 69,71,78;
    --color-gray-deep-hover: #292b32;
    --color-gray-deep-hover-rgb: 41,43,50;
    --color-gray-light: #99a1af;
    --color-gray-light-rgb: 106,114,130;

    --color-point: #008CD6;
    --color-point-rgb: 0,140,214;
    --color-point-hover: #23639e;
    --color-point-hover-rgb: 35,99,158;
    --color-red: #DB2A24;
    --color-red-rgb: 219,42,36;
    --color-red-hover: #ad2521;
    --color-red-hover-rgb: 173,37,33;
    --color-blue: #007AFF;
    --color-blue-rgb: 0,122,255;
    --color-blue-hover: #0563c6;
    --color-blue-hover-rgb: 5,99,198;
    --color-yellow: #ECAE1A;
    --color-yellow-rgb: 236,174,26;
    --color-yellow-hover: #ce950f;
    --color-yellow-hover-rgb: 206,149,15;
    --color-green: #23A566;
    --color-green-rgb: 35,165,102;
    --color-green-hover: #1b9359;
    --color-green-hover-rgb: 27,147,89;

    --color-line-basic: #E5E5EC;
    --color-line-basic-rgb: 229,229,236;
    --color-line-light: #f6f3f4;
    --color-line-light-rgb: 246,243,244;
    --color-box-basic: #F5F5F8;
    --color-box-basic-rgb: 245,245,248;
    --color-bg-gray: #d7d9e0;

    --state-orange: #EC7003;
    --state-lightgreen: #B6CD4F;
    --state-green: #579F53;
    --state-red: #D95151;
    --state-purple: #BB9CCF;
}


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


/* 텍스트 사이즈 */
.text-size-2xs              { font-size: var(--font-size-2xs) !important; }
.text-size-xs               { font-size: var(--font-size-xs) !important; }
.text-size-sm               { font-size: var(--font-size-sm) !important; }
.text-size-md               { font-size: var(--font-size-md) !important; }
.text-size-lg               { font-size: var(--font-size-lg) !important; }
.text-size-xl               { font-size: var(--font-size-xl) !important; }
.text-size-2xl              { font-size: var(--font-size-2xl) !important; }


/* 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: 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-mini                   { padding: 2px 6px; font-size: var(--size-12); }
[class*="btns"].size-sm                     { padding: 5px 10px; font-size: var(--size-13); }
[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-gray-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-point-line                            { border-color: var(--color-point); background-color: var(--color-box-basic); color: var(--color-point); }
.btns-point-line-hover:hover                { border-color: var(--color-point-hover) !important; background-color: var(--color-blue-50) !important; color: var(--color-point-hover) !important; }
.btns-point-line:hover                      { border-color: var(--color-point-hover); background-color: var(--color-blue-50); color: var(--color-point-hover); }

.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-basic                                 { border-color: var(--color-basic); background-color: var(--color-basic); color: var(--color-white) !important; }
.btns-basic-hover:hover                     { border-color: var(--color-basic-hover) !important; background-color: var(--color-basic-hover) !important; color: var(--color-white) !important; }
.btns-basic:hover                           { border-color: var(--color-basic-hover); background-color: var(--color-basic-hover); color: var(--color-white); }

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

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

.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-blue-hover) !important; }
.btns-green-line:hover                       { border-color: var(--color-green-hover); background-color: var(--color-green-50); color: var(--color-green-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.1); }
.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.1); }
.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.1); }
    .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.1); }
    .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.1); }
    .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.1); }
    .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.1); }
    .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.1); }
    .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 */
.custom-tooltip {
    position: absolute; /* 마우스 위치를 따라다니도록 absolute 설정 */
    top: 0;
    left: 0;
    visibility: hidden; /* 초기에는 숨김 */
    line-height: 1.4;
    padding: 8px 12px;
    background-color: var(--color-basic);
    color: var(--color-basic-reverse);
    border-radius: 4px;
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    white-space: normal; /* 툴팁 내용이 줄바꿈 되지 않도록 함 */
    z-index: 9999;
    pointer-events: none; /* 툴팁 자체가 마우스 이벤트를 방해하지 않도록 함 */
    opacity: 0;
    transition: opacity 0.3s ease-out;

    max-width: 180px;
}

.custom-tooltip.active {
    visibility: visible;
    opacity: 1;
}

/* 툴팁이 적용될 요소는 position: relative;가 필요할 수 있습니다. */
.tooltip-trigger {
    position: relative;
    cursor: help;
}


/* Alerts */
.gw-alert {
    padding: 1rem;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-background);
    box-shadow: 0 5px 5px -3px rgba(var(--color-black-rgb),0.1);
    border-radius: 0.375rem;
    color: var(--color-gray);
}

.gw-alert.alert-primary         { border-color: #9ec5fe; background-color: #cfe2ff; color: #052c65; }
.gw-alert.alert-secondary       { border-color: #c4c8cb; background-color: #e2e3e5; color: #2b2f32; }
.gw-alert.alert-success         { border-color: #a3cfbb; background-color: #d1e7dd; color: #0a3622; }
.gw-alert.alert-danger          { border-color: #f1aeb5; background-color: #f8d7da; color: #58151c; }
.gw-alert.alert-warning         { border-color: #ffe96c; background-color: #fff3cd; color: #664d03; }
.gw-alert.alert-info            { border-color: #9eeaf9; background-color: #cff4fc; color: #055160; }
.gw-alert.alert-light           { border-color: #e9ecef; background-color: #fcfcfd; color: #495057; }


/* 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;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-background);
    border-radius: 5px;
    word-break: break-all;
    transition: .3s;
    font-size: inherit;
}

div.basic-input, input.basic-input, select.basic-select {
    padding: 10px;
}

div.basic-input.like-text, input.basic-input.like-text, select.basic-select.like-text,
div.line-input.like-text, input.line-input.like-text, select.line-select.like-text {
    background-color: transparent;
}

div.line-input, input.line-input, select.line-select {
    padding: 10px 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.line-select,
select.basic-select {
    padding-right: 26px;
    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='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat;
    background-position: right 5px center;
    background-size: 20px;
}

.theme-dark select.line-select,
.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);
    border-radius: 5px;
    font-size: inherit;
    transition: .3s;
}

textarea.basic-textarea:focus {
    outline: none;
}

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

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

    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-box-basic);
    text-align: center;
    border-radius: 4px;
    color: var(--color-line-basic);
    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%;
}


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

.scrollbox::-webkit-scrollbar {
	width: 4px;
    height: 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-point);
}


/* 가로 스크롤 */
.width-scrollbox {
	overflow-x: auto;
    margin: 0 calc(var(--page-padding) * -1);
	-ms-overflow-style: scrollbar;
}

.width-scrollbox .scroll-con {
	padding: 0 var(--page-padding) 10px;
}

.width-scrollbox.w480 .scroll-con {
	width: 480px;
}

.width-scrollbox.w640 .scroll-con {
	width: 600px;
}

.width-scrollbox.w768 .scroll-con {
	width: 800px;
}

.width-scrollbox.w980 .scroll-con {
	width: 1000px;
}

.width-scrollbox.w1240 .scroll-con {
	width: 1200px;
}

@media screen and (min-width: 479px) {
	.width-scrollbox.w480 {
		margin: 0 !important;
	}

	.width-scrollbox.w480 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 639px) {
	.width-scrollbox.w640 {
		margin: 0 !important;
	}

	.width-scrollbox.w640 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 767px) {
	.width-scrollbox.w768 {
		margin: 0 !important;
	}

	.width-scrollbox.w768 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 979px) {
	.width-scrollbox.w980 {
		margin: 0 !important;
	}

	.width-scrollbox.w980 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 1239px) {
	.width-scrollbox.w1240 {
		margin: 0 !important;
	}

	.width-scrollbox.w1240 .scroll-con {
		width: 100%;
        padding: 0;
	}
}