/* Customer center and community presentation only. Existing routes, forms and scripts stay intact. */

body.support-community-ui main {
    background: var(--site-page-background, #f5f6f8);
    color: #333 !important;
    font: 14px/1.8 Arial, 'Malgun Gothic', sans-serif !important;
}

body.support-community-ui main > article:first-child,
body.support-community-ui main > .write > article:first-child {
    background: #fff;
}

body.support-community-ui main .cs-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 1129px;
    min-height: 70vh;
    margin: 0 auto;
    padding: 28px 20px 42px;
    box-sizing: border-box;
}

body.support-community-ui main .customer-center {
    flex: 0 0 184px;
    width: 184px;
    padding: 19px 12px;
    border: 1px solid #e4e7eb;
    border-radius: 10px;
    background: #fff;
}

body.support-community-ui main .customer-title {
    margin: 0 8px 13px;
    padding: 0 0 13px;
    border-bottom: 1px solid #eceef1;
    color: #252525;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
}

body.support-community-ui main .customer-center #customerSupportTabs {
    width: 100% !important;
    gap: 4px;
}

body.support-community-ui main .customer-center .nav-link {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #666 !important;
    font-family: inherit;
    font-size: 13px !important;
    line-height: 1.8;
    text-align: left;
}

body.support-community-ui main .customer-center .nav-link.active {
    background: #fff1eb;
    color: #ff3900 !important;
    font-weight: 700;
}

body.support-community-ui main .customer-center .nav-link:hover {
    background: #fff6f1;
}

body.support-community-ui main .cs-content {
    flex: 1 1 0;
    min-width: 0;
    padding: 27px 28px 30px !important;
    border: 1px solid #e4e7eb;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 7px #172b4d03;
}

body.support-community-ui main .cs-about-wrap,
body.support-community-ui main .cs-board-wrap,
body.support-community-ui main .cs-about-inner {
    min-width: 0;
    margin: 0 !important;
    padding: 0;
}

body.support-community-ui main .cs-content .page-title {
    display: block;
    margin: 0 0 22px;
    padding: 0 0 0 11px;
    border: 0;
    border-left: 3px solid #ff3900;
    color: #252525;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.6px;
}

/* Match these two PC headings to the existing 18px notice/FAQ titles. */
body.support-community-ui.pc-support-lists-compact main .cs-content .user-manual .um-title,
body.support-community-ui main .cs-content .page-title.pc-customer-inquiry-title {
    font-size: 18px;
    line-height: 25px;
    letter-spacing: normal;
}


body.support-community-ui main .cs-content .notice-table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 0;
    font-size: 13px;
}

body.support-community-ui main .cs-content .notice-table > thead > tr > th {
    padding: 12px 8px;
    border: 0 !important;
    border-bottom: 1px solid #e2e5e9 !important;
    background: #f7f8fa;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

body.support-community-ui main .cs-content .notice-table .notice-accordion-item {
    background: #fff !important;
    line-height: 1.7 !important;
}

body.support-community-ui main .cs-content .notice-table .notice-accordion-item > td {
    padding: 18px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    color: #888;
    font-size: 12px;
    line-height: 1.7;
    vertical-align: middle;
}

body.support-community-ui main .cs-content .notice-table .notice-accordion-item > .notice-accordion-header {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

body.support-community-ui main .cs-content .notice-table .notice-accordion-item:hover > td {
    background: #fff9f6;
}

body.support-community-ui main .cs-content .list-group {
    gap: 0;
    padding: 0;
    border-radius: 0;
}

body.support-community-ui main .cs-content .list-group-item {
    min-width: 0;
    margin: 0 !important;
    padding: 20px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.support-community-ui main .cs-content .list-group-item:first-child {
    padding-top: 3px !important;
}

body.support-community-ui main .cs-content .list-group-item > div {
    min-width: 0;
}

body.support-community-ui main .cs-content .news-item-pc > .flex-grow-1 {
    padding: 2px 0 !important;
}

body.support-community-ui main .cs-content .news-item-pc img {
    width: 154px !important;
    height: 100px !important;
    object-fit: cover;
    border-radius: 7px !important;
}

body.support-community-ui main .cs-content .list-group-item b {
    color: #333 !important;
    font-size: 15px !important;
    line-height: 1.65;
    font-weight: 600;
}

body.support-community-ui main .cs-content .list-group-item p {
    min-height: 0 !important;
    margin-top: 7px !important;
    color: #888 !important;
    font-size: 12px !important;
    line-height: 1.8;
}

body.support-community-ui main .cs-content .list-group-item .multi-ellipsis {
    -webkit-line-clamp: 2;
}

body.support-community-ui main .cs-content .media-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-top: 3px;
}

body.support-community-ui main .cs-content .blog-filter-badge {
    gap: 6px;
    margin: 0 0 20px !important;
}

body.support-community-ui main .cs-content .filter-btn {
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #fff;
    color: #777;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
}

body.support-community-ui main .cs-content .filter-btn.active {
    border-color: #ff3900;
    background: #ff3900;
    color: #fff;
}

body.support-community-ui main .cs-content .notice-title-box {
    padding: 0 0 18px !important;
    border: 0;
    border-bottom: 1px solid #e7e9ed !important;
}

body.support-community-ui main .cs-content .notice-title-header {
    display: block;
}

body.support-community-ui main .cs-content .title-header {
    padding: 0 0 18px;
    border-bottom: 1px solid #e7e9ed;
}

body.support-community-ui main .cs-content .notice-title-text,
body.support-community-ui main .cs-content .title-text {
    margin: 0;
    color: #252525;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

body.support-community-ui main .cs-content .notice-title-meta {
    margin: 9px 0 0;
    padding: 0;
    color: #999;
    font-size: 11px !important;
    line-height: 1.7;
    transform: none;
}

body.support-community-ui main .cs-content .notice-content-box {
    padding: 23px 0 !important;
    border: 0;
    background: #fff;
    color: #555;
    line-height: 1.95;
}

body.support-community-ui main .cs-content .content-text {
    margin: 20px 0 26px;
    padding: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

body.support-community-ui main .cs-content .notice-content-box img,
body.support-community-ui main .cs-content .notice-content-box video,
body.support-community-ui main .cs-content .notice-content-box iframe,
body.support-community-ui main .cs-content .content-text img,
body.support-community-ui main .cs-content .content-text video,
body.support-community-ui main .cs-content .content-text iframe {
    max-width: 100%;
}

body.support-community-ui main .cs-content .quote-box {
    width: 100%;
    margin: 22px 0;
    padding: 15px 18px;
    border-left: 3px solid #ff3900;
    border-radius: 0 6px 6px 0;
    background: #fff7f2;
    color: #805d4d;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
}

body.support-community-ui main .cs-content .quote-box::before,
body.support-community-ui main .cs-content .quote-box::after {
    content: none;
}

body.support-community-ui main .cs-content .video-box {
    width: 100%;
    margin: 20px 0;
    padding: 0;
}

body.support-community-ui main .cs-content .video-box iframe {
    max-width: 100%;
}

body.support-community-ui main .cs-content .button-wrapper {
    padding: 12px 0 20px;
}

body.support-community-ui main .cs-content .button-wrapper > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: 11px 18px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.7;
}

body.support-community-ui main .cs-content .notice-nav {
    margin-top: 22px;
    padding-top: 0 !important;
    border-top: 1px solid #e7e9ed;
}

body.support-community-ui main .cs-content .notice-prev,
body.support-community-ui main .cs-content .notice-next {
    gap: 10px;
    padding: 15px 0;
    border-color: #edf0f2;
}

body.support-community-ui main .cs-content .notice-nav em {
    flex: 0 0 70px;
    width: 70px;
    color: #999;
    font-size: 11px;
    text-align: left;
}

body.support-community-ui main .cs-content .notice-nav a {
    min-width: 0;
    padding: 0;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

body.support-community-ui main .cs-content .notice-listbtn {
    width: 140px;
    min-height: 44px;
    margin: 24px auto 0;
    padding: 10px 14px;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
}

body.support-community-ui main .cs-content .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 0;
    padding: 0;
}

body.support-community-ui main .cs-content .pager .pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

body.support-community-ui main .cs-content .pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid #e5e8eb;
    border-radius: 6px;
    background-color: #fff;
    color: #777;
    font-size: 12px;
    line-height: 1;
    text-indent: 0;
}

body.support-community-ui main .cs-content .pager a.current {
    border-color: #ff3900;
    background: #ff3900;
    color: #fff;
    font-weight: 700;
}

body.support-community-ui main .cs-content #reportForm,
body.support-community-ui main .cs-content #withdrawForm {
    max-width: 600px;
    margin-top: 22px;
    line-height: 1.8 !important;
}

body.support-community-ui main .cs-content #reportForm textarea {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-height: 210px;
    padding: 13px;
    border: 1px solid #dfe3e7;
    border-radius: 7px;
    background: #fafbfc;
    color: #444;
    font: inherit;
    resize: vertical;
}

body.support-community-ui main .cs-content #reportForm textarea:focus {
    border-color: #ff8b6b;
    outline: 2px solid #ff390015;
}

body.support-community-ui main .cs-content #reportForm .btn-send,
body.support-community-ui main .cs-content #withdrawForm .btn-send {
    min-width: 130px;
    min-height: 44px;
    height: auto !important;
    padding: 11px 24px !important;
    border: 1px solid #ff3900;
    border-radius: 6px;
    background: #ff3900;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
}

body.support-community-ui main .cs-content #withdrawForm input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ff3900;
}

body.support-community-ui main .cs-content #withdrawForm label {
    margin: 0;
    line-height: 1.8;
}

body.support-community-ui main .cs-content button:focus-visible,
body.support-community-ui main .cs-content a:focus-visible {
    outline: 2px solid #ff3900;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    body.support-community-ui main .cs-layout {
        display: block;
        min-height: 66vh;
        padding: 17px 10px 28px;
    }

    body.support-community-ui main .cs-content {
        padding: 21px 15px 24px !important;
        border-radius: 9px;
    }

    body.support-community-ui main .cs-content .page-title {
        margin-bottom: 20px;
        padding-left: 9px;
        font-size: 20px;
    }

    body.support-community-ui main .cs-content .notice-table {
        font-size: 12px;
    }

    body.support-community-ui main .cs-content .notice-table > thead > tr > th {
        padding: 10px 5px;
        font-size: 11px;
    }

    body.support-community-ui main .cs-content .notice-table .notice-accordion-item > td {
        padding: 16px 6px !important;
        font-size: 11px;
    }

    body.support-community-ui main .cs-content .notice-table .notice-accordion-item > .notice-accordion-header {
        font-size: 13px;
    }

    body.support-community-ui main .cs-content .list-group-item {
        padding: 17px 0 !important;
    }

    body.support-community-ui main .cs-content .news-item-mobile {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    body.support-community-ui main .cs-content .news-item-mobile > .w-100 {
        flex: 0 0 84px;
        width: 84px !important;
        margin: 0 !important;
    }

    body.support-community-ui main .cs-content .news-item-mobile > .w-100 img {
        width: 84px !important;
        height: 72px !important;
        border-radius: 6px !important;
        object-fit: cover;
    }

    body.support-community-ui main .cs-content .news-item-mobile > div:last-child {
        flex: 1 1 0;
    }

    body.support-community-ui main .cs-content .list-group-item b {
        font-size: 13px !important;
        line-height: 1.6;
    }

    body.support-community-ui main .cs-content .list-group-item p {
        margin-top: 5px !important;
        font-size: 11px !important;
        line-height: 1.7;
    }

    body.support-community-ui main .cs-content .media-icon {
        width: 29px;
        height: 29px;
        margin-right: 11px !important;
    }

    body.support-community-ui main .cs-content .blog-filter-badge {
        gap: 5px;
    }

    body.support-community-ui main .cs-content .filter-btn {
        min-height: 37px;
        padding: 8px 9px;
        font-size: 11px;
    }

    body.support-community-ui main .cs-content .notice-title-text,
    body.support-community-ui main .cs-content .title-text {
        font-size: 20px !important;
        line-height: 1.6;
    }

    body.support-community-ui main .cs-content .notice-content-box {
        padding: 20px 0 !important;
        font-size: 13px !important;
    }

    body.support-community-ui main .cs-content .content-text,
    body.support-community-ui main .cs-content .quote-box {
        font-size: 13px;
    }

    body.support-community-ui main .cs-content .notice-nav em {
        flex-basis: 59px;
        width: 59px;
    }

    body.support-community-ui main .cs-content .notice-nav a {
        font-size: 11px;
    }

    body.support-community-ui main .cs-content .pager {
        gap: 4px;
    }

    body.support-community-ui main .cs-content .pager .pages {
        gap: 4px;
    }

    body.support-community-ui main .cs-content .pager a {
        min-width: 29px;
        height: 32px;
        padding: 0 7px;
        font-size: 11px;
    }
}

/* PC white content background; remove only the mobile support footer's outer gap. */

body.support-community-ui:not(.mobile-support-ui) main {
    background: #fff;
}

body.support-community-ui.mobile-support-ui #footer.footer--mobile {
    margin-top: 0;
}

/* Match the density of other site lists without touching detail articles. */

body.support-community-ui:not(.mobile-support-ui) main #board_list .notice-table .notice-accordion-item > td {
    padding: 8px 10px !important;
}

body.support-community-ui:not(.mobile-support-ui) main #board_list .list-group-item,
body.support-community-ui:not(.mobile-support-ui) main #board_list .list-group-item:first-child {
    padding: 10px 0 !important;
}

body.support-community-ui:not(.mobile-support-ui) main #board_list .news-item-pc img {
    width: 108px !important;
    height: 70px !important;
}

body.support-community-ui:not(.mobile-support-ui) main #board_list .list-group-item p {
    margin-top: 4px !important;
}

body.support-community-ui.mobile-support-ui main #board_list .ms-table-link {
    min-height: 44px;
    padding: 10px 24px 10px 0;
}

body.support-community-ui.mobile-support-ui main #board_list .ms-card-link {
    gap: 11px;
    padding: 11px 0;
}

body.support-community-ui.mobile-support-ui main #board_list .news-item-mobile .ms-card-link > .w-100 {
    flex-basis: 76px;
    width: 76px !important;
}

body.support-community-ui.mobile-support-ui main #board_list .news-item-mobile .ms-card-link > .w-100 img {
    width: 76px !important;
    height: 64px !important;
}

body.support-community-ui.mobile-support-ui main #board_list .list-group-item p {
    margin-top: 4px !important;
}

/* Keep the PC navigation card at the list-page size on detail pages too. */

body.support-community-ui:not(.mobile-support-ui) main .customer-center {
    flex-basis: 160px;
    width: 160px;
    padding: 12px 8px;
    border-radius: 8px;
}

body.support-community-ui:not(.mobile-support-ui) main .customer-title {
    margin: 0 6px 9px;
    padding-bottom: 9px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: normal;
}

body.support-community-ui:not(.mobile-support-ui) main .customer-center #customerSupportTabs {
    gap: 2px;
    padding: 0;
}

body.support-community-ui:not(.mobile-support-ui) main .customer-center .nav-link {
    min-height: 32px;
    padding: 3px 8px;
    font-size: 13px !important;
    line-height: 25px;
    letter-spacing: normal;
}

/* Customer-center table lists: title, author, date and nested labels share 12px. */

body.support-community-ui:not(.mobile-support-ui) main #board_list .notice-table th,
body.support-community-ui:not(.mobile-support-ui) main #board_list .notice-table td,
body.support-community-ui:not(.mobile-support-ui) main #board_list .notice-table th *,
body.support-community-ui:not(.mobile-support-ui) main #board_list .notice-table td * {
    font-size: 12px !important;
}

/* Keep PC customer/community list and detail panels on the same page grid. */

body.support-community-ui:not(.mobile-support-ui) main .cs-layout {
    gap: 18px;
    padding: 18px 20px 28px;
}

body.support-community-ui:not(.mobile-support-ui) main .cs-content {
    padding: 16px 18px 18px !important;
    border-radius: 8px;
}

/* Align the PC navigation card with the adjacent content card. */

body.support-community-ui:not(.mobile-support-ui) main .customer-center {
    margin-top: 0;
}

/* Style the original PC customer heading before and after detail enhancement. */

body.support-community-ui:not(.mobile-support-ui) main .cs-content #customerSupportTabsContent {
    margin-top: 0 !important;
}

body.support-community-ui:not(.mobile-support-ui) main #customerSupportTabsContent .notice-title-box {
    padding: 8px 0 14px !important;
    border-bottom: 0 !important;
    vertical-align: top;
}

body.support-community-ui:not(.mobile-support-ui) main #customerSupportTabsContent .notice-title-box .notice-title-header {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    transition: none;
}

body.support-community-ui:not(.mobile-support-ui) main #customerSupportTabsContent .notice-title-box .notice-title-text {
    display: block;
    margin: 0;
    padding: 0;
    color: #252525;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.3px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    transition: none;
}

body.support-community-ui:not(.mobile-support-ui) main #customerSupportTabsContent .notice-table > tbody > tr:nth-child(2) > td {
    padding: 0 0 18px;
    border-bottom: 1px solid #e7e9ed;
    color: #888;
    font-size: 12px;
    line-height: 1.6;
}