/*
기본 색상은 #636773으로 연한 검정색을 사용
h 관련 태그는 #313131로 진한 검정색을 사용
*/
:root {
    --color-dark-gray: #313131;
    --color-light-gray: #777;
    --color-blue: #2477ff;
    --color-orange: #f64a00;
    --color-red: #db2a34;
    --color-green: #2d8515;
    --color-dark-border: #ddd;
    --color-light-border: #eee;
}

.newsletters-container {
    width: 100%;
    box-sizing: border-box;
    letter-spacing: -0.5px !important;
    color: var(--color-light-gray);
}
.newsletters-detail-container {
    width: 100%;
    letter-spacing: -0.5px !important;
    color: var(--color-light-gray);
}

.article-wrapper {
    width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark-gray);
}
a, a:hover, a:visited, a:active, a:focus {
    color: inherit;
    text-decoration: none;
}
input, input:hover, input:focus, input:active, input:focus-within {
    color: inherit;
    outline: 0;
}
button {
    all: unset;
    cursor: pointer;
    letter-spacing: -0.5px;
}
img {
    max-width: 100%;
    display: block;
}

.article-wrapper img {
    width: 100%;
    max-height: 630px;
    object-fit: cover;
}

/*margin 관련*/
.mx-auto {margin-left: auto; margin-right: auto;}
.mr-auto {margin-right: auto;}
.ml-auto {margin-left: auto;}
.my-2 {margin-top: 0.5rem; margin-bottom: 0.5rem;}
.my-4 {margin-top: 1rem; margin-bottom: 1rem;}
.my-6 {margin-top: 1.5rem; margin-bottom: 1.5rem;}
.my-9 {margin-top: 2.25rem; margin-bottom: 2.25rem;}
.my-14 {margin-top : 3.5rem; margin-bottom: 3.5rem;}
.mt-4 {margin-top: 1rem;}
.mt-6 {margin-top: 1.5rem;}
.mt-14 {margin-top: 3.5rem;}
.mr-2 {margin-right: 0.5rem;}
.mr-4 {margin-right: 1rem;}
.mr-55px {margin-right: 55px;}
.mb-2 {margin-bottom: 0.5rem;}
.mb-6 {margin-bottom: 1.5rem;}
.mb-9 {margin-bottom: 2.25rem;}
.mb-20 {margin-bottom: 5rem;}
.mb-28 {margin-bottom: 7rem;}
.mb-2px {margin-bottom: 2px;}
.ml-1 {margin-left: 0.25rem;}
.ml-4 {margin-left: 1rem;}
.ml-20px {margin-left: 20px;}
.ml-30px {margin-left: 30px;}
.ml-45 {margin-left: 11.25rem;}

/*padding 관련*/
.p-0 {padding: 0;}
.p-2 {padding: 0.5rem;}
.p-3 {padding: 0.75rem;}
.p-4 {padding: 1rem;}
.p-6 {padding: 1.5rem;}
.p-8 {padding: 2rem;}
.px-2 {padding-left: 0.5rem; padding-right: 0.5rem;}
.px-3 {padding-left: 0.75rem; padding-right: 0.75rem;}
.px-4 {padding-left: 1rem; padding-right: 1rem;}
.px-6 {padding-left: 1.5rem; padding-right: 1.5rem;}
.px-8 {padding-left: 2rem; padding-right: 2rem;}
.px-9 {padding-left: 2.25rem; padding-right: 2.25rem;}
.py-0 {padding-top: 0; padding-bottom: 0;}
.py-1 {padding-top: 0.25rem; padding-bottom: 0.25rem;}
.py-2 {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.py-4 {padding-top: 1rem; padding-bottom: 1rem;}
.py-9 {padding-top: 2.25rem; padding-bottom: 2.25rem;}
.py-2px {padding-top: 2px; padding-bottom: 2px;}
.pt-2 {padding-top: 0.5rem;}
.pt-6 {padding-top: 1.5rem;}
.pr-4 {padding-right: 1rem;}
.pb-0 {padding-bottom: 0;}
.pb-8 {padding-bottom: 2rem;}
.pl-0 {padding-left: 0;}

/*gap 관련*/
.gap-1 {gap: 0.25rem;}
.gap-2 {gap: 0.5rem;}
.gap-3 {gap: 0.75rem;}
.gap-4 {gap: 1rem;}
.gap-5 {gap: 1.25rem;}
.gap-6 {gap: 1.5rem;}
.gap-8 {gap: 2rem;}
.gap-10 {gap: 2.5rem;}
.gap-1px {gap: 1px;}
.gap-2px {gap: 2px;}
.gap-6px {gap: 6px;}

/*text 관련*/
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.text-13px {font-size: 13px;}
.text-14px {font-size: 14px;}
.text-15px {font-size: 15px;}
.text-48px {font-size: 48px;}
.text-3 {font-size: 0.75rem;}
.text-4 {font-size: 1rem;}
.text-5 {font-size: 1.25rem;}
.text-6 {font-size: 1.5rem;}
.text-8 {font-size: 2rem;}
.text-9 {font-size: 2.25rem;}
.font-bold {font-weight: 700;}
.font-normal {font-weight: 400;}
.font-color-inherit {color: inherit;}
.font-color-white {color: #fff;}
.font-color-text-heading {color: var(--color-dark-gray);}
.font-color-text-content {color: var(--color-light-gray);}
.font-color-blue {color: var(--color-blue);}
.font-color-orange {color: var(--color-orange);}
.font-color-red {color: var(--color-red);}
.font-color-green {color: var(--color-green);}

/*배치 관련*/
/*flex 관련*/
.d-flex {display: flex;}
.flex-col {flex-direction: column;}
.flex-row {flex-direction: row;}
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}
.flex-grow-0 {flex-grow: 0;}
.flex-shrink-0 {flex-shrink: 0;}
.flex-basis-auto {flex-basis: auto;}
.flex-1 {flex: 1 1 0;}

/*justify 관련*/
.justify-content-center {justify-content: center;}
.justify-content-right {justify-content: right;}
.justify-content-flex-start {justify-content: flex-start;}
.justify-content-flex-end {justify-content: flex-end;}
.justify-content-space-between {justify-content: space-between;}

/*align 관련*/
.align-items-center {align-items: center;}
.align-items-flex-start {align-items: flex-start;}
.align-self-stretch {align-self: stretch;}

.whitespace-nowrap {white-space: nowrap;}
.overflow-hidden {overflow: hidden;}
.overflow-x-auto {overflow-x: auto;}
.scrollbar-width-none {scrollbar-width: none;}

/*position 관련*/
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.left-0 {left: 0;}
.top-1px {top: 1px;}

/*배경 관련*/
.bg-transparent {background-color: transparent;}
.bg-white {background-color: #fff !important;}
.bg-dark-gray {background-color: var(--color-dark-gray);}
.bg-light-gray {background-color: var(--color-light-gray);}
.bg-blue {background-color: var(--color-blue);}
.bg-dedfe7 {background-color: #dedfe7;}
.bg-f2f2f2 {background-color: #f2f2f2;}
.bg-cover {background-size: cover;}
.bg-no-repeat {background-repeat: no-repeat;}

/*넓이 관련*/
.w-full {width: 100%;}
.w-4 {width: 1rem;}
.w-5 {width: 1.25rem;}
.w-8 {width: 2rem;}
.w-25 {width: 6.25rem;}
.w-px {width: 1px;}
.w-250px {width: 250px;}
.w-257px {width: 257px;}
.w-268px {width: 268px;}
.w-307px {width: 307px;}
.w-636px {width: 636px;}
.w-838px {width: 838px;}
.min-w-60px {min-width: 60px;}
.min-w-96px {min-width: 96px;}
.h-full {height: 100%;}
.h-px {height: 1px;}
.h-54px {height: 54px;}
.h-2 {height: 0.5rem;}
.h-3 {height: 0.75rem;}
.h-5 {height: 1.25rem;}
.h-8 {height: 2rem;}
.h-140px {height: 140px;}
.h-150px {height: 150px;}
.line-height-23px {line-height: 23px;}
.line-height-30px {line-height: 30px;}
.line-height-54px {line-height: 54px;}
.box-border {box-sizing: border-box;}

/*border 관련*/
.border-0 {border-width: 0;}
.border-1px {border-width: 1px;}
.border-top-1px {border-top-width: 1px;}
.border-bottom-1px {border-bottom-width: 1px;}
.border-solid {border-style: solid;}
.border-color-dedfe7 {border-color: #dedfe7;}
.border-radius-md {border-radius: 0.375rem;}
.border-radius-4 {border-radius: 1rem;}
.border-radius-tr-none {border-top-right-radius: 0;}
.border-radius-tl-3 {border-top-left-radius: 0.75rem;}
.border-radius-br-3 {border-bottom-right-radius: 0.75rem;}
.border-radius-bl-none {border-bottom-left-radius: 0;}

.object-fit-cover {object-fit: cover;}
.object-fit-contain {object-fit: contain;}

.cursor-text {cursor: text;}
.cursor-pointer {cursor: pointer;}

.hidden {display: none;}
.contents {display: contents;}
.block {display: block;}
.inline-block {display: inline-block;}

/*뉴스레터에서만 사용되는 클래스*/
.nav-button-selected, .nav-button-selected:hover, .nav-button-selected:focus, .nav-button-selected:active {
    padding: inherit;
    color: var(--color-dark-gray);
    font-weight: 600;
    border-bottom: 2px solid var(--color-dark-gray);
}
.line-clamp-1, .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-1 {-webkit-line-clamp: 1;}
.line-clamp-2 {-webkit-line-clamp: 2;}

.ease-in-out {transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}
.duration-300 {transition-duration: 0.3s;}
.group:hover .group-hover\:scale-105 {transform: scale(1.05);}

.title-background-gradient {
    --tw-gradient-to: #ffeba3;
    --tw-gradient-from: #ffddc7;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    background-repeat: no-repeat;
    background-size: 0 10px;       /* Start with 0% width */
    background-position: 0 15px;
    transition: background-size 0.6s ease;
}
.group:hover .group-hover\:title-background-gradient {
    background-size: 100% 10px;    /* Fill full width on hover */
}



/*xl*/
@media (max-width: 1199px) {
    .newsletters-container {max-width: 1200px; width: 100%;}
}

/*lg*/
@media (max-width: 991px) {
    .newsletters-container {max-width: 970px; width: 100%;}
}

/*md*/
@media (max-width: 767px) {
    .newsletters-container {max-width: 720px; width: 100%;}
    .only-mobile {display: inherit !important; visibility: visible !important;}
    .md\:hidden {display: none;}
    .md\:overflow-hidden {overflow: hidden;}
    .md\:mx-auto {margin-left: auto; margin-right: auto;}
    .md\:flex-col {flex-direction: column;}
    .md\:grid {display: grid;}
    .md\:grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .md\:justify-content-center {justify-content: center;}
    .md\:my-8 {margin-top: 2rem; margin-bottom: 2rem;}
    .md\:my-10 {margin-top: 2.5rem; margin-bottom: 2.5rem;}
    .md\:mt-4 {margin-top: 1rem;}
    .md\:mt-10 {margin-top: 2.5rem;}
    .md\:mb-0 {margin-bottom: 0;}
    .md\:mb-6 {margin-bottom: 1.5rem;}
    .md\:mr-3 {margin-right: 0.75rem;}
    .md\:px-5 {padding-left: 1.25rem; padding-right: 1.25rem;}
    .md\:p-4 {padding: 1rem;}
    .md\:p-5 {padding: 1.25rem;}
    .md\:gap-0 {gap: 0;}
    .md\:gap-2 {gap: 0.5rem;}
    .md\:gap-3 {gap: 0.75rem;}
    .md\:gap-10 {gap: 2.5rem;}
    .md\:w-full {width: 100%;}
    .md\:w-90\% {width: 90%;}
    .md\:w-50\% {width: 50%;}
    .md\:h-22px {height: 22px;}
    .md\:line-height-18px {line-height: 18px;}
    .md\:line-height-20px {line-height: 20px;}
    .md\:line-height-30px {line-height: 30px;}
    .md\:text-3 {font-size: 0.75rem;}
    .md\:text-4 {font-size: 1rem;}
    .md\:text-5 {font-size: 1.25rem;}
    .md\:border-0 {border-width: 0;}
    .md\:border-1 {border-width: 1px;}
    .md\:order-0 {order: 0;}
    .md\:order-1 {order: 1;}
    .md\:bg-whitesmoke {background-color: rgb(246 247 249);}
    .md\:bg-white {background-color: #fff;}
}

/*sm*/
@media (max-width: 575px) {
    .newsletters-container{max-width: 540px; width: 100%;}
    .sm\:grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
    .sm\:w-full {width: 100%;}
}