/* Ezpen public UI polish
   Applies the better-ui principles to legacy public screens without changing
   their layout contracts or JavaScript behavior. */

::selection {
    color: var(--ez-color-text-strong);
    background: rgba(20, 122, 104, 0.2);
}

:target {
    scroll-margin-top: 9.6rem;
}

button,
[role='button'],
summary {
    cursor: pointer;
    touch-action: manipulation;
}

button:disabled,
[role='button'][aria-disabled='true'] {
    cursor: not-allowed;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(20, 122, 104, 0.4);
    outline-offset: 3px;
}

:where(
    .btn_1,
    .btn_2,
    .btn_3,
    .btn_4,
    .btn_5,
    .btn_6,
    .btn_7,
    .btn_8,
    .btn_9,
    .detail_search-button,
    .seo-topic-callout a,
    .seo-links-card a,
    .seononsul-actions a,
    .seononsul-cta a,
    .go-faq
) {
    transition-property: transform, background-color, border-color, color, box-shadow;
    transition-duration: var(--ez-motion-fast);
    transition-timing-function: var(--ez-ease-standard);
}

:where(
    .btn_1,
    .btn_2,
    .btn_3,
    .btn_4,
    .btn_5,
    .btn_6,
    .btn_7,
    .btn_8,
    .btn_9,
    .detail_search-button,
    .seo-topic-callout a,
    .seo-links-card a,
    .seononsul-actions a,
    .seononsul-cta a,
    .go-faq
):active {
    transform: scale(0.96);
}

/* Header and search */
.header-topbar {
    background: linear-gradient(90deg, #0b5f57, #147a68 58%, #187f6d);
}

.header-topbar .topbar-logout button {
    min-height: 2.8rem;
    border-color: rgba(255, 255, 255, 0.72);
    transition-property: background-color, color, transform;
    transition-duration: var(--ez-motion-fast);
    transition-timing-function: var(--ez-ease-standard);
}

.header-topbar .topbar-logout button:active {
    transform: scale(0.96);
}

.header-contents {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(18, 40, 34, 0.06);
}

.header-contents .gnb > li > a,
.header-sticky .gnb > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
    color: #263c36;
    transition: color var(--ez-motion-fast) var(--ez-ease-standard);
}

.header-contents .gnb > li > a::after,
.header-sticky .gnb > li > a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0.2rem;
    left: 0;
    height: 0.3rem;
    border-radius: var(--ez-radius-pill);
    background: var(--ez-color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ez-motion-fast) var(--ez-ease-standard);
}

.gnb-sub {
    border: 1px solid rgba(18, 40, 34, 0.08);
    border-radius: var(--ez-radius-xl);
    box-shadow: var(--ez-shadow-md);
}

.gnb-sub li a {
    margin: 0 0.8rem;
    border-radius: var(--ez-radius-sm);
    transition: background-color var(--ez-motion-fast) var(--ez-ease-standard), color var(--ez-motion-fast) var(--ez-ease-standard);
}

.header-search {
    margin-bottom: 3.2rem;
}

.header-search input[type='text'] {
    border-color: rgba(52, 177, 151, 0.72);
    box-shadow: 0 0.1rem 0.2rem rgba(18, 40, 34, 0.05), 0 0.8rem 2.4rem rgba(18, 40, 34, 0.11);
    transition: border-color var(--ez-motion-fast) var(--ez-ease-standard), box-shadow var(--ez-motion-fast) var(--ez-ease-standard);
}

.header-search input[type='text']:focus {
    border-color: var(--ez-color-primary);
    box-shadow: 0 0 0 0.4rem rgba(52, 177, 151, 0.12), 0 1rem 2.8rem rgba(18, 40, 34, 0.12);
}

.header-search input[type='text']:focus-visible {
    outline: 3px solid rgba(52, 177, 151, 0.3);
    outline-offset: 3px;
}

.header-search-button {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    transition: background-color var(--ez-motion-fast) var(--ez-ease-standard), transform var(--ez-motion-fast) var(--ez-ease-standard);
}

.header-search-button:active {
    transform: translateY(-50%) scale(0.96);
}

.header-search .detail_search .detail_search-button {
    border-color: transparent;
    box-shadow: 0 0.1rem 0.2rem rgba(18, 40, 34, 0.08), 0 0.6rem 1.8rem rgba(35, 143, 121, 0.2);
}

.popup-detail_search {
    border-color: rgba(52, 177, 151, 0.26);
    border-radius: var(--ez-radius-2xl);
    box-shadow: var(--ez-shadow-lg);
}

.header-sticky,
.header-mobile {
    border-bottom: 1px solid rgba(18, 40, 34, 0.06);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0.1rem 0.2rem rgba(18, 40, 34, 0.04), 0 0.6rem 2rem rgba(18, 40, 34, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Home */
.main h2 {
    text-decoration: none;
}

.main .banner .banner-img.banner-sweep::after,
.main .move-down2,
.main .move-down3,
.main .moving-img {
    animation: none;
}

.main .banner .banner-img.banner-sweep > img {
    outline: 1px solid var(--ez-image-outline);
    outline-offset: -1px;
}

.main .section3 {
    background: linear-gradient(180deg, #f6faf9 0%, #fff 100%);
}

.main .section3-a {
    gap: 2rem;
}

.main .section3-a div {
    margin-right: 0;
}

.main .section3-a div > img {
    border-radius: var(--ez-radius-2xl);
    outline: 1px solid var(--ez-image-outline);
    outline-offset: -1px;
}

.main .section3-a ul {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.main .section3-a ul li {
    flex: 1;
    padding: 2.4rem;
    border: 1px solid rgba(18, 40, 34, 0.07);
    border-radius: var(--ez-radius-2xl);
    background: #fff;
    box-shadow: var(--ez-shadow-sm);
}

.main .section1 {
    background-color: #2eae94;
    background-image: url('../images/img_pattern_02@2x.png'), linear-gradient(120deg, #2ba98f 0%, #34b197 52%, #58c4ad 100%);
    background-repeat: repeat-x, no-repeat;
    background-size: 3.2rem, cover;
}

.main .section1 img {
    filter: drop-shadow(0 2rem 3.6rem rgba(5, 67, 53, 0.16));
}

.main .section4 .wrapper {
    gap: 4rem;
    padding: 4.8rem;
    border: 1px solid rgba(18, 40, 34, 0.07);
    border-radius: 3.2rem;
    background: linear-gradient(135deg, #fff 0%, #f3faf7 100%);
    box-shadow: var(--ez-shadow-md);
}

.main .section4 img {
    border-radius: var(--ez-radius-xl);
    outline: 1px solid var(--ez-image-outline);
    outline-offset: -1px;
}

.main .section5 .price-item,
.subscribe .section3 .price-item {
    border-width: 0;
    border-radius: 2.8rem;
    box-shadow: var(--ez-shadow-lg);
}

.main .section5 .price-item button,
.subscribe .section3 .price-item button {
    width: calc(100% - 2.4rem);
    margin: 1.5rem 1.2rem 1.2rem;
    border-radius: var(--ez-radius-xl);
    box-shadow: 0 0.6rem 1.8rem rgba(35, 143, 121, 0.2);
    transition: background-color var(--ez-motion-fast) var(--ez-ease-standard), box-shadow var(--ez-motion-fast) var(--ez-ease-standard), transform var(--ez-motion-fast) var(--ez-ease-standard);
}

.main .section5 .price-item button:active,
.subscribe .section3 .price-item button:active {
    transform: scale(0.96);
}

.main .app-download-section {
    padding: 4.8rem 0;
    background: linear-gradient(110deg, #153e35 0%, #1d5549 100%);
}

.main .app-download-section #applink {
    display: flex;
    justify-content: center;
    gap: 2.4rem;
    max-width: 74rem;
    margin: 0 auto !important;
}

.main .app-download-section #applink a {
    flex: 1;
    max-width: 32rem;
    border-radius: 1.8rem;
    transition: transform var(--ez-motion-fast) var(--ez-ease-standard), filter var(--ez-motion-fast) var(--ez-ease-standard);
}

.main .app-download-section #applink a:active {
    transform: scale(0.96);
}

.main .app-download-section #applink img {
    width: 100% !important;
    outline: 1px solid oklch(1 0 0 / 0.16);
    outline-offset: -1px;
}

.main .category-list-item-icon {
    border: 0;
    background: #eff9f6;
    box-shadow: inset 0 0 0 1px rgba(52, 177, 151, 0.13), var(--ez-shadow-sm);
    transition: transform var(--ez-motion-fast) var(--ez-ease-standard), box-shadow var(--ez-motion-fast) var(--ez-ease-standard);
}

.main .seo-links .seo-links-card,
.main .seo-faq .seo-faq-item {
    border: 1px solid rgba(18, 40, 34, 0.07);
    box-shadow: var(--ez-shadow-sm);
    transition: transform var(--ez-motion-base) var(--ez-ease-standard), box-shadow var(--ez-motion-base) var(--ez-ease-standard);
}

.main .seo-links .seo-links-card a {
    background: #1d3d35;
}

.main .seo-faq .seo-faq-item {
    overflow: hidden;
}

/* Content discovery and reading surfaces */
.sub-contents_area {
    background: linear-gradient(180deg, #fff 0%, #fbfdfc 36rem, #fff 100%);
}

.sub-title {
    color: #243b35;
    letter-spacing: -0.03em;
}

.articles_container .category ul {
    border: 1px solid rgba(18, 40, 34, 0.07);
    border-radius: var(--ez-radius-2xl);
    background: #fff;
    box-shadow: var(--ez-shadow-sm);
}

.articles_container .category ul li {
    margin-bottom: 0.6rem;
    padding: 0;
}

.articles_container .category ul li a {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: var(--ez-radius-md);
    transition: background-color var(--ez-motion-fast) var(--ez-ease-standard), color var(--ez-motion-fast) var(--ez-ease-standard), transform var(--ez-motion-fast) var(--ez-ease-standard);
}

.articles_container .category ul li.active a {
    color: #238f79;
    background: var(--ez-color-primary-soft);
}

.tab_btn1 ul {
    border-radius: var(--ez-radius-lg);
    box-shadow: var(--ez-shadow-sm);
}

.tab_btn1 ul li a {
    background: #fff;
    transition: background-color var(--ez-motion-fast) var(--ez-ease-standard), border-color var(--ez-motion-fast) var(--ez-ease-standard), color var(--ez-motion-fast) var(--ez-ease-standard), transform var(--ez-motion-fast) var(--ez-ease-standard);
}

.tab_btn1 ul li a:active {
    transform: scale(0.96);
}

.articles-list-item a,
.articles-list-item2 a {
    transition: transform var(--ez-motion-base) var(--ez-ease-standard), box-shadow var(--ez-motion-base) var(--ez-ease-standard);
}

.articles-list-item-thumbsarea,
.articles-list-item2-thumbsarea {
    outline: 1px solid var(--ez-image-outline);
    outline-offset: -1px;
}

.articles-list-item button,
.articles-list-item2 button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    transition: background-color var(--ez-motion-fast) var(--ez-ease-standard), transform var(--ez-motion-fast) var(--ez-ease-standard);
}

.articles-list-item button:active,
.articles-list-item2 button:active {
    transform: scale(0.96);
}

.article_view-body {
    border-radius: var(--ez-radius-2xl);
    box-shadow: var(--ez-shadow-sm);
}

.article_view-body img {
    outline: 1px solid var(--ez-image-outline);
    outline-offset: -1px;
}

.seo-topic-callout {
    border-color: rgba(52, 177, 151, 0.18);
    border-radius: var(--ez-radius-2xl);
    box-shadow: var(--ez-shadow-sm);
}

.seononsul-page .seononsul-card,
.seononsul-page .seononsul-step,
.seononsul-page .seononsul-faq-list details {
    border-color: rgba(18, 40, 34, 0.07);
    box-shadow: var(--ez-shadow-sm);
    transition: transform var(--ez-motion-base) var(--ez-ease-standard), box-shadow var(--ez-motion-base) var(--ez-ease-standard);
}

.seononsul-page .seononsul-cta {
    box-shadow: var(--ez-shadow-lg);
}

@media(hover: hover) and (pointer: fine) {
    .header-contents .gnb > li > a:hover,
    .header-sticky .gnb > li > a:hover {
        color: var(--ez-color-primary-strong);
    }

    .header-contents .gnb > li > a:hover::after,
    .header-sticky .gnb > li > a:hover::after {
        transform: scaleX(1);
    }

    .header-topbar .topbar-logout button:hover {
        color: var(--ez-color-primary-strong);
        background: #fff;
    }

    .header-search-button:hover,
    .articles-list-item button:hover,
    .articles-list-item2 button:hover {
        background: var(--ez-color-primary-soft);
    }

    .header-search .detail_search .detail_search-button:hover {
        background: var(--ez-color-primary-strong);
        box-shadow: 0 0.2rem 0.4rem rgba(18, 40, 34, 0.08), 0 1rem 2.4rem rgba(35, 143, 121, 0.26);
    }

    .main .category-list-item a:hover .category-list-item-icon {
        transform: translateY(-0.4rem);
        box-shadow: inset 0 0 0 1px rgba(52, 177, 151, 0.18), var(--ez-shadow-md);
    }

    .main .app-download-section #applink a:hover {
        transform: translateY(-0.3rem);
        filter: brightness(1.04);
    }

    .main .seo-links .seo-links-card:hover,
    .seononsul-page .seononsul-card:hover,
    .seononsul-page .seononsul-step:hover {
        transform: translateY(-0.4rem);
        box-shadow: var(--ez-shadow-md);
    }

    .articles_container .category ul li a:hover {
        color: #238f79;
        background: #f1faf7;
    }
}

@media(min-width: 1025px) {
    .articles-list-item a {
        border: 1px solid rgba(18, 40, 34, 0.07);
        border-radius: 2rem;
        box-shadow: var(--ez-shadow-sm);
    }

    .articles-list-item a:hover {
        transform: translateY(-0.4rem);
        box-shadow: var(--ez-shadow-md);
    }
}

@media(max-width: 1024px) {
    .main .section3-a {
        gap: 1.6rem;
    }

    .main .section4 .wrapper {
        padding: 3.2rem;
    }
}

@media(max-width: 767px) {
    .main .moving-img {
        right: 0;
        left: 0;
        width: calc(100% - 2rem) !important;
        margin: 0 auto;
    }

    .main .section3-a ul li {
        padding: 2rem;
        border-radius: 2rem;
    }

    .main .section4 .wrapper {
        gap: 2.4rem;
        padding: 2.4rem;
        border-radius: 2.4rem;
    }

    .main .app-download-section #applink {
        gap: 1.2rem;
        padding: 0 0.8rem;
    }

    .main .app-download-section #applink a {
        border-radius: 1.2rem;
    }

    .seo-topic-callout {
        border-radius: 2rem;
    }
}

@media(prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        scroll-behavior: auto !important;
    }

    :where(
        .btn_1,
        .btn_2,
        .btn_3,
        .btn_4,
        .btn_5,
        .btn_6,
        .btn_7,
        .btn_8,
        .btn_9,
        .articles-list-item a,
        .articles-list-item2 a,
        .category-list-item-icon,
        .seo-links-card,
        .seononsul-card,
        .seononsul-step
    ) {
        transition-duration: 0.01ms;
    }
}