.content_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px;

    padding: 20px 0 100px;
}

.content_aside {
    flex-shrink: 0;
    width: 320px;
    /* 320px 화면에서는 좌우 여백(20px×2) 때문에 320px 를 다 쓸 수 없다.
       flex-shrink:0 이라 그대로 40px 삐져나가던 것을 막는다. */
    max-width: 100%;

    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: 15px;

    & > [class^="content_aside__"] {
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #E5E5E5;
    }

    & > .content_aside__banner {
        border: 0;
        border-radius: 0;
    }
}

.content_aside__banner {
    & img {
        width: 100%;
    }
}

.content_aside__head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 10px 16px;
    padding: 0 3px 8px;
    border-bottom: 1px solid #E5E5E5;

    font-size: 20px;
    font-weight: 700;

    & .icon {
        font-size: 40px;
        margin-right: 8px;
    }

    & .badge {
        margin-left: 4px;
    }

    & * {
        font-family: var(--font-family-title);
    }
}

.content_aside__body {
    padding: 0 10px 10px;
}
.content_aside__report { 
    & ul {
        counter-reset: item;

        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 5px;

        & li {
            height: 40px;
            background-color: #F3F5F7;
            border-radius: 5px;
            padding: 0 16px;

            font-size: 14px;
            font-weight: 700;
    
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 4px;
            
            & p {
                font-size: 14px;
                color: #666;
            }

            & span {
                margin-left: auto;
                color: #333;
                font-size: 16px;
            }
        }
    }

    & .btn {
        margin-top: 12px;
        height: 30px;

        background-color: #F3F5F7;
        color: #666;

        font-size: 14px;
        font-weight: 700;
    }
}
.content_aside__rank { 
    & ol {
        padding: 0 8px;
        counter-reset: item;

        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 5px;

        & li {
            counter-increment: item;

            font-size: 14px;
            font-weight: 700;
    
            display: flex;
            justify-content: flex-start;
            align-items: center;
    
            height: 26px;
    
            &:before {
                content: counter(item);
                color: var(--primary-dark);
                width: 28px;
            }

            &:nth-child(3) ~ li {
                &:before {
                    color: var(--black);
                }
            }

            & span {
                color: #999;
                margin-left: auto;
            }
        }
    }

    & .btn {
        margin-top: 12px;
        height: 30px;
        
        background-color: #F3F5F7;
        color: #666;

        font-size: 14px;
        font-weight: 700;
    }
}

.content_aside__guide { 
    & ol {
        counter-reset: item;

        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 5px;

        & li {
            counter-increment: item;
        }

        & a {
            font-size: 14px;
            font-weight: 700;

            display: flex;
            justify-content: flex-start;
            align-items: center;

            height: 45px;
            padding: 6px 15px;
            border:1px solid #E5E5E5;
            border-radius: 5px;

            &:before {
                content: counter(item, decimal-leading-zero);
                width: 28px;
                color: var(--primary-dark);
            }

            &:after {
                content: "";
                width: 10px;
                height: 10px;
                margin-left: auto;

                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                background-image: url(../img/icon/arrow_link.svg);
            }
        }
    }
}

/* .preview는 비교 화면용이므로 실제 적용 시 제외해도 됩니다. */
.preview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    padding: 24px;
}

.content_aside__user {
    width: 320px;
    max-width: 100%;
    /* grid 자식의 min-width:auto 는 안쪽 콘텐츠 폭을 하한으로 잡아 max-width 를 이긴다.
       320px 화면에서 이 패널만 40px 삐져나가던 원인. */
    min-width: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

.content_aside__user *,
.content_aside__user *::before,
.content_aside__user *::after {
    box-sizing: border-box;
}

.content_aside__user a {
    color: #666;
    text-decoration: none;
}

.content_aside__user button,
.content_aside__user input {
    font: inherit;
}

.content_aside__user button {
    cursor: pointer;
    color: #000;
}

.content_aside__user :focus-visible {
    outline: 2px solid #007f77;
    outline-offset: 3px;
}


/************ 로그인 **********/
    .user_panel {
        
    }

    .user_login {
        padding: 30px 20px 26px;
    }

    .user_login__fields {
        display: grid;
        gap: 6px;
    }

    .user_login__field {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 40px;
        padding: 0 16px;
        background: #f3f4f6;
        border-radius: 11px;
    }

    .user_login__field .icon {
        font-size: 14px;
    }

    .user_login__field input {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111;
    }

    .user_login__field input::placeholder {
        color: #767676;
    }

    .user_login .btn_primary {
        width: 100%;
        height: 40px;
        margin-top: 10px;
        border: 0;
        border-radius: 10px;
        background: #00dfcb;
        color: #051c19;
        font-weight: 700 !important;
    }

    .user_login__options,
    .user_login__options nav,
    .user_login__remember {
        display: flex;
        align-items: center;
    }

    .user_login__options {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
        margin-top: 11px;
        color: #666;
        font-size: 11px;
    }

    .user_login__options nav {
        gap: 6px;
    }

    .user_login__remember {
        gap: 3px;
    }

    .user_login__remember input {
        width: 11px;
        height: 11px;
        margin: 0;
        accent-color: #00a89c;
    }

    .user_login__options .user_login__signup {
        color: var(--primary-dark);
        font-weight: 700;
    }

    .user_profile {
        padding: 21px 19px 17px;
    }

    .user_profile__header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .user_profile__avatar {
        position: relative;
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #ebecef;
    }

    .user_profile__avatar img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .user_profile__edit {
        position: absolute;
        right: 0;
        bottom: 0;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        padding: 4px;
        border: 1px solid #d5d5d5;
        border-radius: 50%;
        background: #fff;
        color: #111;
    }

    .user_profile__edit::after {
        position: absolute;
        inset: -4px;
        content: "";
    }

    .user_profile__edit svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

    .user_profile__name {
        flex: 1;
        min-width: 0;
        margin: 3px 0 0;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .user_profile__name span {
        font-size: 12px;
        font-weight: 400;
    }

    .user_profile__logout {
        padding: 3px 10px;
        border: 1px solid #c3c3c3;
        border-radius: 5px;
        background: #fff;
        color: #222;
        white-space: nowrap;
        font-size: 12px !important;
    }

    .user_profile__intro {
        margin: 11px 2px;
        color: #727272;
        font-size: 11px;
    }

    .user_profile__points {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 40px;
        margin: 0;
        padding: 7px 15px;
        border-radius: 11px;
        background: #f3f4f6;
    }

    .user_profile__points dt {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 700;
    }

    .user_profile__points .icon {
        font-size: 24px;
    }

    .user_profile__points dd {
        margin: 0;
        font-size: 18px;
    }

    .user_profile__unit {
        font-size: 12px;
    }

    .user_profile__level {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
    }

    .user_profile__level label {
        margin-right: 6px;
        color: #727272;
        font-size: 11px;
    }

    .user_profile__level progress {
        flex: 1;
        width: 0;
        height: 6px;
        overflow: hidden;
        border: 0;
        border-radius: 10px;
        background: #f3f4f6;
        appearance: none;
    }

    .user_profile__level progress::-webkit-progress-bar {
        border-radius: 10px;
        background: #f3f4f6;
    }

    .user_profile__level progress::-webkit-progress-value {
        border-radius: 10px;
        background: #00a99c;
    }

    .user_profile__level progress::-moz-progress-bar {
        border-radius: 10px;
        background: #00a99c;
    }

    .user_profile__level > span {
        color: #00877e;
        font-weight: 700;
    }

    .user_menu {
        padding: 10px 7px 9px;
        border-top: 1px solid #e2e2e2;
    }

    .user_menu ul {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .user_menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 0 2px;
        font-size: 12px;
        font-weight: 700;
        color:#333;
    }

    .user_menu .icon {
        font-size: 30px;
    }
/************ 로그인 end **********/


/************ 게시글 위젯 **********/
    .widget_preview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 496px), 496px));
        align-items: start;
        gap: 24px;
        padding: 24px;
    }

    .post_widget {
        box-sizing: border-box;
        width: 100%;
        padding: 28px 25px;
        border: 1px solid #E5E5E5;
        border-radius: 11px;
        background: #fff;
        color: #111;

        font-size: 13px;
        line-height: 1.5;
        box-shadow: 0 1px 5px rgba(51, 51, 51, 0.05);
    }

    .post_widget *,
    .post_widget *::before,
    .post_widget *::after {
        box-sizing: border-box;
    }

    .post_widget .visually_hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .post_widget a {
        color: inherit;
        text-decoration: none;
    }

    .post_widget a:focus-visible {
        outline: 2px solid #00877e;
        outline-offset: 3px;
        border-radius: 3px;
    }

    .post_widget__header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        margin-bottom: 14px;
    }

    .post_widget__header a {
        font-size: 14px;
        font-weight: 700;
    }

    .post_widget__title {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        letter-spacing: -1px;
        line-height: 26px;
        
        font-size: 18px;
        font-weight: 700;
        font-family: var(--font-family-title);
    }

    .post_widget__icon {
        font-size: 17px;
        letter-spacing: 0;
    }

    .post_widget__live {
        margin-left: 5px;
        padding: 0 9px;
        border-radius: 5px;
        background: #000;
        color: #00e5d2;
        font-size: 14px;
        line-height: 23px;
        letter-spacing: 0;
    }

    .post_widget__actions {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-left: auto;
        white-space: nowrap;
    }

    .post_widget__today {
        color: #008e85;
        font-size: 14px;
        letter-spacing: -0.5px;
    }
    .post_widget__today,
    .post_widget__today * {
        font-weight: 600;
        font-family: var(--font-family-title);
    }
    .post_widget__today b {
        text-decoration: underline;
        text-underline-position: unset;
    }

    .post_widget__more {
        font-size: 12px;
        font-weight: 700;
    }

    /* grid 자식도 기본 min-width:auto 라 안쪽 말줄임(text-overflow)이 동작하지 않는다.
       360px 화면에서 항목이 351px 로 부풀어 제목·날짜가 잘려 나가던 원인. */
    .post_widget__item {
        min-width: 0;
    }

    .post_widget__list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .post_widget__link {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        min-height: 26px;

        font-size: 14px;
    }

    .post_widget__badge {
        flex-shrink: 0;
        padding: 3px 7px;
        border-radius: 5px;
        background: #f0f0f0;
        color: #687575;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        white-space: nowrap;
    }

    .post_widget__subject {
        display: flex;
        align-items: baseline;
        flex: 1;
        gap: 6px;
        min-width: 0;
        color: #333;
    }

    .post_widget__text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
    }

    .post_widget__link:hover .post_widget__text {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .post_widget__comments {
        flex-shrink: 0;
        color: #fa570b;
        font-weight: 700;
    }

    .post_widget__meta {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        min-width: 47px;
        margin-left: auto;
        color: #999;
        white-space: nowrap;

        span {
            min-width: 2em;
            text-align: right;
        }
    }

    .post_widget__meta .icon  {
        font-size: 15px;
    }

    .post_widget_verification {
        border-color: #00a89d;
    }

    .post_widget_verification .post_widget__badge {
        background: #d9fbf7;
        color: #009d94;
    }

    .post_widget_popular .post_widget__badge {
        width: 23px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #00a49b;
        font-size: 14px;
    }

    .post_widget_report {
        border-color: #FA1717;
    }

    .post_widget_report .post_widget__badge {
        background: rgba(255, 31, 31, 0.1);
        color: #FA1717;
    }

    .post_widget_report .post_widget__live {
        color: #FA1717;
    }

    .post_widget_report .post_widget__today {
        color: #FA1717;
    }
/************ 게시글 위젯 end **********/


/************ 공지사항 ***********/
.notice_preview {
    padding: 24px;
}

.notice {
    display: flex;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    min-height: 60px;
    padding: 5px 24px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    box-shadow: 0 1px 5px rgba(51, 51, 51, 0.05);
}

.notice *,
.notice *::before,
.notice *::after {
    box-sizing: border-box;
}

.notice [hidden] {
    display: none;
}

.notice .visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.notice__title {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-family-title);
    letter-spacing: -0.7px;
}

.notice__speaker {
    width: 20px;
    height: 22px;
    color: #00dfc5;
}

.notice__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.notice__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice__item {
    height: 32px;
}

.notice__link {
    display: block;
    overflow: hidden;
    padding: 5px 3px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 22px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notice__controls {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

.notice__arrows {
    display: grid;
}

.notice__controls button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #111;
    font: inherit;
    cursor: pointer;
}

.notice__controls button:hover {
    background: #edf9f7;
}

.notice__controls svg {
    width: 8px;
    height: 6px;
}

.notice__controls .notice__pause {
    color: #666;
    font-size: 12px;
}

.notice__more {
    flex-shrink: 0;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.notice :focus-visible {
    outline: 2px solid #00877e;
    outline-offset: 2px;
}

.notice__link:focus-visible {
    outline-offset: -2px;
}

.notice[data-direction="next"] .notice__item:not([hidden]) {
    animation: notice_up 300ms ease-out;
}

.notice[data-direction="previous"] .notice__item:not([hidden]) {
    animation: notice_down 300ms ease-out;
}

@keyframes notice_up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes notice_down {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/************ 공지사항 end ***********/

/************ 카테고리 ***********/
.category_list {
    background-color: #fff;
    padding: 30px 20px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(51, 51, 51, 0.05);

    ul {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }

    li {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;

        b {
            display: block;
            font-size: 16px;
            color: #000;
            margin-bottom: 6px;
        }

    }

    .cate_icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background-color: #F3F5F7;
        margin: 0 auto 15px;
    }
}
/************ 카테고리 end ***********/

/************ 업체 ***********/
.partners_guide {
    ul {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        gap: 10px;
    }

    li {
        flex: 1;
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #E5E5E5;
        padding: 20px 25px;
        box-shadow: 0 1px 5px rgba(51, 51, 51, 0.05);

        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 18px;

        b {
            display: block;
            font-size: 18px;
            font-family: var(--font-family-title);
            margin-bottom: 8px;
            color: #000;
        }
        p {
            font-size: 14px;
            line-height: 1.5;
        }
    }

    .partners_guide__icon {
        width: 80px;
    }
}

.partners_guide__tip {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    padding: 15px;
    box-shadow: 0 1px 5px rgba(51, 51, 51, 0.05);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;

    font-size: 14px;
}
/************ 업체 end ***********/

/************ 검색 ***********/
.search_widget {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;

    margin-bottom: 10px;
}
.search_widget__bar {
    flex: 1;
    position: relative;
    height: 60px;
    padding: 25px;
    padding-right: 60px;
    background-color: #fff;
    border:1px solid #00A39B;
    border-radius: 10px;
    gap: 15px;
    overflow: hidden;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    & > .icon {
        flex-shrink: 0;
        font-size: 22px;
        filter: brightness(0);
    }

    input {
        flex: 1;
        border: 0;

        &::placeholder {
            color: rgba(0, 0, 0, 0.2);
        }
    }

    button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0;
        top: 0;
        height: 100%;
        width: 60px;
        background-color: #0CEFD3;
        border: 0;
        border-left: 1px solid #00A39B;
        font-size: 27px;
    }
}

.search_widget__filter {
    flex-shrink: 0;
    background-color: #fff;
    border:1px solid #E5E5E5;
    border-radius: 10px;
    padding: 17px 12px;
    box-shadow: 0 1px 5px rgba(51, 51, 51, 0.05);

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;

    & > p {
        flex-shrink: 0;
        font-size: 14px;
        font-weight: 700;
        color: #000;
    }
    ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    a {
        font-size: 14px;
        color: #000;
        border: 1px solid #A1D4D2;
        border-radius: 30px;;
        padding: 5px 8px;
    }
}

/************ 검색 // ***********/

/* faq */
/* 미리보기 레이아웃. 실제 적용 시 faq section과 아래 공통 스타일을 사용하세요. */
.faq_preview {
    padding: 24px;
}

.faq {
    width: 100%;
    max-width: 1000px;
    color: #111;
    font-family: Arial, "Malgun Gothic", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.faq *,
.faq *::before,
.faq *::after {
    box-sizing: border-box;
}

.faq .visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.faq__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq__item {
    min-width: 0;
    border: 1px solid #d8d8d8;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 5px #0000000d;
}

.faq__question {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;
    list-style: none;
    cursor: pointer;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::marker {
    content: "";
}

.faq__question:focus-visible {
    outline: 2px solid #00877e;
    outline-offset: -3px;
}

.faq__badge {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #00dfcb;
    color: #001b17;
    font-size: 14px;
    letter-spacing: 0;
}

.faq__question_text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

.faq__arrow {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faq__details[open] > .faq__question .faq__arrow {
    transform: rotate(180deg);
}

.faq__body {
    padding: 5px 48px 30px;
}

.faq__answer {
    max-width: 100%;
    margin: 0;
    color: #333;
    font: inherit;
    line-height: 2;
    letter-spacing: -0.35px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: normal;
    tab-size: 4;
}

.faq__answer b {
    font-weight: 700;
}

.faq__answer_heading {
    font-size: 18px;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
/* faq end */

.content_area {
    flex-grow: 1;
    /* flex 자식의 기본값 min-width:auto 는 내용물(히어로 배너)보다 좁아지지 못하게 막는다.
       그래서 1200~1279px 구간에서 본문이 컨테이너를 89px 넘겨 가로스크롤이 생겼다.
       (mobile.css 에는 1199px 이하에만 min-width:0 이 있었다) */
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
}
.main_banner {
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(51, 51, 51, 0.2);
}
.main_banner__content {
    position: absolute;
    inset: 0;
    padding: 50px;

    & h1 {
        color: #000;
        font-size: 42px;
        font-weight: 400;
        font-family: var(--font-family-sub);
        line-height: 52px;
        letter-spacing: -0.05em;
        margin-bottom: 18px;;

        span {
            font-family: var(--font-family-sub);
            letter-spacing: -0.05em;
        }
    }
    & p {
        font-size: 15px;
        color: #666;
        line-height: 1.5;
    }

    & .btn_area {
        margin-top: 18px;
    }

    & .btn {
        height: 40px;
        font-size: 15px;
        font-weight: 700;
        padding: 0 20px;

        & .icon {
            font-size: 22px;
        }
    }
}

.content_section {

}
.content_section__item_group {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
}

.content_section__head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}
.content_section__head_title {
    flex-grow: 1;

    & h2 {
        border-left: 4px solid var(--primary);
        padding-left: 8px;
        font-size: 20px;
        font-weight: 700;
        font-family: var(--font-family-title);
        color: #000;
    }

    & p {
        margin-top: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #555;
    }
}
.content_section__head__more {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 16px;
    font-weight: 800;
    color: #000;
}


/* ─────────────────────────────────────────────────────────
   사이드 텔레그램 상담 (이미지 → 텍스트로 교체)
   ───────────────────────────────────────────────────────── */
.content_aside__tg {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #E9F4FD;
	transition: background .18s, transform .18s;
}
.content_aside__tg:hover { background: #DCEDFB; transform: translateY(-1px); }

.content_aside__tg .tg_ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #229ED9;
	color: #fff;
}
.content_aside__tg .tg_ico svg { width: 22px; height: 22px; }

.content_aside__tg .tg_txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.content_aside__tg .tg_txt em {
	font-style: normal;
	font-size: 12.5px;
	color: #5A7E96;
	letter-spacing: -0.02em;
}
.content_aside__tg .tg_txt b {
	font-family: var(--font-family-title), var(--font-family);
	font-size: 21px;
	font-weight: 700;
	color: #1B2B36;
	line-height: 1.15;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════
   FAQ — 질문→핵심답변 아코디언
   ══════════════════════════════════════════════════════════ */
.faq__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.faq__item { list-style: none; }
.faq__item[hidden] { display: none; }

.faq__details {
	background: #fff;
	border: 1px solid #E8EEF3;
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.faq__details:hover { border-color: #B6EDE6; }
.faq__details[open] { border-color: #9FE6DD; background: #FBFEFE; }

/* 질문 */
.faq__question {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 18px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }

.faq__badge {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--primary);
	color: #07443F;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -.02em;
}
.faq__question_text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-size: 15.5px;
	font-weight: 600;
	color: #1D2A34;
	letter-spacing: -.015em;
	line-height: 1.5;
	word-break: keep-all;
}
.faq__details[open] .faq__question_text { color: #00776F; }

.faq__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #9AAAB8;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease, stroke .18s ease;
}
.faq__details[open] .faq__arrow { transform: rotate(180deg); stroke: #00A39B; }

/* 답변 — grid 트릭으로 높이 전환 */
.faq__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .2s ease;
}
.faq__details[open] .faq__body,
.faq__details.is-opening .faq__body { grid-template-rows: 1fr; }
.faq__details.is-closing .faq__body { grid-template-rows: 0fr; }
.faq__body_in { min-height: 0; overflow: hidden; }

.faq__answer {
	margin: 0;
	padding: 2px 18px 17px 55px;
	font-size: 14.5px;
	line-height: 1.8;
	color: #4A5C6A;
	letter-spacing: -.01em;
	word-break: keep-all;
	white-space: normal;
}
.faq__answer a {
	color: #00857F;
	font-weight: 700;
	border-bottom: 1px solid rgba(0, 163, 155, .35);
}
.faq__answer a:hover { color: #00A39B; border-bottom-color: #00A39B; }

/* 전체보기 / 접기 */
.faq__more {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
}
.faq__more img { transition: transform .2s ease; }
.faq__more[aria-expanded="true"] img { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.faq__body, .faq__arrow, .faq__more img { transition: none; }
}

/* ── 보존된 장문 안내 ── */
.guide_doc {
	background: #fff;
	border: 1px solid #E8EEF3;
	border-radius: 12px;
	padding: 24px 26px;
}
.guide_doc__title {
	margin: 0 0 12px;
	padding-left: 11px;
	border-left: 3px solid var(--primary);
	font-size: 17px;
	font-weight: 700;
	color: #16212B;
	letter-spacing: -.02em;
	line-height: 1.4;
}
.guide_doc__title + .guide_doc__body { margin-bottom: 26px; }
.guide_doc__body {
	margin: 0;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.85;
	color: #4A5C6A;
	white-space: pre-wrap;
	word-break: keep-all;
	letter-spacing: -.01em;
}
.guide_doc__body:last-child { margin-bottom: 0; }
.guide_doc__body b { color: #1D2A34; font-weight: 700; }
.guide_doc__body .faq__answer_heading {
	display: block;
	margin: 20px 0 6px;
	font-size: 15.5px;
	color: #00776F;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
	.faq__list { gap: 7px; }
	.faq__question { gap: 9px; padding: 13px 14px; }
	.faq__badge { width: 23px; height: 23px; font-size: 11px; }
	.faq__question_text { font-size: 14.5px; }
	.faq__arrow { width: 18px; height: 18px; }
	.faq__answer { padding: 2px 14px 15px 46px; font-size: 13.5px; line-height: 1.75; }
	.guide_doc { padding: 18px 16px; border-radius: 10px; }
	.guide_doc__title { font-size: 15.5px; }
	.guide_doc__body { font-size: 13.5px; }
}
@media (max-width: 480px) {
	.faq__answer { padding-left: 14px; }
}

/* ─────────────────────────────────────────────────────────
   보증업체 운영 안내 — 문단 구조 (pre 제거 후)
   ───────────────────────────────────────────────────────── */
.guide_doc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: transparent;
	border: 0;
	padding: 0;
}
.guide_doc__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;            /* 카드 안 제목으로 이동 */
}
.guide_doc__body {
	position: relative;
	white-space: normal;        /* 이전 pre-wrap 잔재 해제 : 태그 사이 줄바꿈이 공백으로 보이던 문제 */
	font-family: inherit;
	padding: 24px 28px;
	background: #fff;
	border: 1px solid #E8EEF3;
	border-radius: 12px;
}
/* 제목을 카드 상단에 붙여 출력 */
.guide_doc__title + .guide_doc__body { margin-top: 0; }
.guide_doc__title {
	font-size: 16.5px;
	font-weight: 700;
	color: #16212B;
	letter-spacing: -.02em;
	line-height: 1.45;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 6px 0 -2px;
}
.guide_doc__title::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 15px;
	border-radius: 2px;
	background: var(--primary);
}

.guide_doc__p {
	margin: 0 0 11px;
	font-size: 14.5px;
	line-height: 1.85;
	color: #4A5C6A;
	letter-spacing: -.01em;
	word-break: keep-all;
}
.guide_doc__p:last-child { margin-bottom: 0; }
.guide_doc__p b { color: #1D2A34; font-weight: 700; }

.guide_doc__sub {
	margin: 22px 0 10px;
	padding-top: 18px;
	border-top: 1px solid #EDF2F6;
	font-size: 15.5px;
	font-weight: 700;
	color: #00776F;
	letter-spacing: -.02em;
	line-height: 1.5;
	word-break: keep-all;
}
.guide_doc__body > .guide_doc__sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* 다크 */
[data-theme="dark"] .guide_doc { background: transparent; border: 0; }
[data-theme="dark"] .guide_doc__body { background: var(--d-surface); border-color: var(--d-line); }
[data-theme="dark"] .guide_doc__title { color: var(--d-tx); }
[data-theme="dark"] .guide_doc__p { color: var(--d-tx2); }
[data-theme="dark"] .guide_doc__p b { color: var(--d-tx); }
[data-theme="dark"] .guide_doc__sub { color: var(--d-mint); border-top-color: var(--d-line); }

@media (max-width: 768px) {
	.guide_doc__body { padding: 18px 16px; border-radius: 10px; }
	.guide_doc__title { font-size: 15px; }
	.guide_doc__p { font-size: 13.5px; line-height: 1.8; }
	.guide_doc__sub { font-size: 14.5px; margin-top: 18px; padding-top: 15px; }
}

/* ─────────────────────────────────────────────────────────
   다크모드 가독성 보정
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] .content_aside__report .content_aside__body li,
[data-theme="dark"] .content_aside__rank .content_aside__body li {
	background: var(--d-surface2);
}
[data-theme="dark"] .content_aside__report .content_aside__body li span,
[data-theme="dark"] .content_aside__rank .content_aside__body li span {
	color: var(--d-tx);
	font-weight: 700;
}
[data-theme="dark"] .content_aside__report .content_aside__body li p,
[data-theme="dark"] .content_aside__rank .content_aside__body li p { color: var(--d-tx2); }
[data-theme="dark"] .notice__title,
[data-theme="dark"] .notice_widget p,
[data-theme="dark"] .notice_widget a { color: var(--d-tx2); }
[data-theme="dark"] .notice_widget .notice__title { color: var(--d-tx); }

/************ 메인 배너 + 검색 통합 (main_banner--hero) **********
   예전에는 배너와 검색 박스가 따로 떠 있어서 위아래로 공간을 두 번 먹었다.
   검색·인기검색어를 배너 안으로 넣고, 이미지는 배경 레이어로 깔아
   내용 높이에 맞춰 배너가 늘어나도록 바꾼다. */
.main_banner--hero {
    border-radius: 14px;
}
.main_banner--hero > picture {
    position: absolute;
    inset: 0;
    display: block;
}
.main_banner--hero > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}
.main_banner--hero .main_banner__content {
    position: relative;
    inset: auto;
    z-index: 2;
    box-sizing: border-box;
    /* 일러스트(스쿠터)가 우측 54% 지점부터 시작한다. 글이 겹치지 않게 묶는다 */
    max-width: 56%;
    padding: 34px 40px 32px;
}
.main_banner--hero .main_banner__content h1 {
    font-size: 33px;
    line-height: 42px;
    margin-bottom: 12px;
}
.main_banner--hero .main_banner__content > p {
    font-size: 15px;
    color: #555;
}

/* 배너 안으로 들어온 검색 묶음 */
.main_banner--hero .search_widget {
    display: block;
    margin: 16px 0 0;
}
.main_banner--hero .search_widget__bar {
    width: 100%;
    height: 52px;
    padding: 0 7px 0 18px;
    border-radius: 999px;
    border-color: #00A39B;
    box-shadow: 0 6px 22px -14px rgba(0, 63, 59, .55);
    gap: 12px;
}
.main_banner--hero .search_widget__bar > .icon {
    font-size: 20px;
    filter: none;
    opacity: .55;
}
.main_banner--hero .search_widget__bar input {
    font-size: 15px;
    background: transparent;
}
.main_banner--hero .search_widget__bar button {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-left: 1px solid #CFEDEA;
    border-radius: 999px;
    background: #0B8F85;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .16s;
}
.main_banner--hero .search_widget__bar button:hover { filter: brightness(1.1); }

/* 인기검색어 : 별도 카드 -> 칩 한 줄 */
.main_banner--hero .search_widget__filter {
    flex-shrink: 1;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.main_banner--hero .search_widget__filter > p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px 0 0;
    color: #1B2A33;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.main_banner--hero .search_widget__filter .hot { font-size: 15px; line-height: 1; }
.main_banner--hero .search_widget__filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.main_banner--hero .search_widget__filter li { margin: 0; }
.main_banner--hero .search_widget__filter a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border: 1px solid #D5E2E4;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: #3C4E5C;
    font-size: 13.5px;
    font-weight: 600;
    transition: all .15s;
}
.main_banner--hero .search_widget__filter a:hover {
    border-color: #0CEFD3;
    background: #fff;
    color: #00857F;
}

.main_banner--hero .btn_area { margin-top: 18px; }
.main_banner--hero .btn_area .btn { height: 46px; padding: 0 24px; border-radius: 10px; }

@media (max-width: 1199px) {  /* 히어로는 PC 레이아웃이 끝나는 1199px 부터 축소 — 1024 로 두면 1025~1199 에서 제목이 어색하게 끊긴다 */
    .main_banner--hero .main_banner__content { max-width: 74%; padding: 34px 32px; }
    .main_banner--hero .main_banner__content h1 { font-size: 31px; line-height: 40px; }
}
@media (max-width: 768px) {
    .main_banner--hero > picture img { object-position: 78% center; }
    .main_banner--hero .main_banner__content {
        max-width: 100%;
        padding: 26px 20px;
        background: rgba(255, 255, 255, .82);
    }
    .main_banner--hero .main_banner__content h1 { font-size: 25px; line-height: 34px; }
    .main_banner--hero .search_widget__bar { height: 50px; padding-left: 16px; }
    .main_banner--hero .search_widget__bar button { height: 38px; padding: 0 18px; font-size: 14px; }
    .main_banner--hero .btn_area .btn { height: 42px; padding: 0 16px; font-size: 14px; }
}

/* ─────────────────────────────────────────────
   히어로 : 누적 먹튀 제보 / 누적 피해금액
   (기존 "실시간 검색어" 칩 자리)
   ───────────────────────────────────────────── */
.search_widget__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.search_widget__stats .sws-item {
	display: flex;
	align-items: baseline;
	gap: 9px;
	min-width: 0;
	padding: 9px 16px;
	border: 1px solid #D5E9E6;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(0, 92, 87, .06);
	transition: border-color .15s, background .15s, transform .15s;
}
.search_widget__stats .sws-item:hover {
	border-color: #16C2AE;
	background: #fff;
	transform: translateY(-1px);
}
.search_widget__stats .sws-k {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #5A7180;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.search_widget__stats .sws-v {
	font-size: 19px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.035em;
	color: #00756F;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.search_widget__stats .sws-v em {
	margin-left: 2px;
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	color: #5A7180;
}
.search_widget__stats .sws-item.red .sws-v { color: #D8453B; }

@media (max-width: 640px) {
	.search_widget__stats { gap: 6px; }
	.search_widget__stats .sws-item { flex: 1 1 100%; justify-content: space-between; padding: 9px 14px; }
	.search_widget__stats .sws-v { font-size: 17px; }
}

/* ─────────────────────────────────────────────
   먹튀의민족은 어떤 곳인가요? (브랜드 설명)
   ───────────────────────────────────────────── */
.mm-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 26px;
	align-items: center;
	padding: 26px 28px;
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(51, 51, 51, .05);
}
.mm-about__tx h2 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -.035em;
	color: #14212B;
}
.mm-about__tx p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: #5A7180;
}
.mm-about__tx p b { color: #14212B; font-weight: 700; }
.mm-about__sm {
	margin-top: 9px !important;
	padding-left: 11px;
	border-left: 3px solid #16C2AE;
	font-size: 13px !important;
	color: #93A6B2 !important;
}
.mm-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-about__grid a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 100%;
	padding: 15px 16px;
	border: 1px solid #E4EBEF;
	border-radius: 11px;
	background: #FBFDFD;
	transition: border-color .15s, background .15s, transform .15s;
}
.mm-about__grid a:hover {
	border-color: #16C2AE;
	background: #F2FAF8;
	transform: translateY(-1px);
}
.mm-about__grid b { font-size: 14.5px; font-weight: 800; letter-spacing: -.025em; color: #14212B; }
.mm-about__grid span { font-size: 12.5px; line-height: 1.55; color: #93A6B2; }

@media (max-width: 1024px) {
	.mm-about { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 20px; }
}
@media (max-width: 480px) {
	.mm-about__grid { grid-template-columns: minmax(0, 1fr); }
	.mm-about__tx h2 { font-size: 19px; }
}