/* ==========================================================================
   좁은 화면 — 공통 번들의 모바일 값

   출처: MC_mobile Content/css/bundle.css (_common / _layout / _style 컴파일)
   두 프로젝트가 같은 컴포넌트를 공유한다. 같은 셀렉터에서 값이 다른
   크기·간격 선언만 옮겼다. 데스크톱 값은 그대로 둔다.

   가져오지 않은 것
     position / height / display / flex / grid / overflow / width
       구조를 바꾸는 속성이라 그대로 옮기면 깨진다.
       (#container 는 PC 에서 relative 여야 absolute 자식이 산다.
        select 의 height 100 퍼센트 값은 부모에 기댄 값이다.)
     이미 따로 손본 영역(.content-ads, 메인 .swiper-visual 등)은 제외했다.

   이 파일은 css/common/* 보다 먼저 로드한다.
   앞서 만든 반응형 규칙이 같은 특이도에서 이기도록 두기 위해서다.
   ========================================================================== */

@media (max-width: 768px) {

    s {
        font-size: 100%;
    }

    .hyphen {
        margin: 15px 0 12px;
    }

    select {
        font-size: 16px;
    }

    .btn_line {
        font-size: 14px;
        padding: 5px 10px;
    }

    .content_title {
        font-size: 24px;
    }

    body .caution {
        padding: 2rem;
    }

    body .caution p {
        line-height: 1.25;
    }

    .content p {
        line-height: 1.25;
    }

    .content h3 span {
        line-height: 1.25;
    }

    .content p span {
        line-height: 1.25;
    }

    .content .section-title {
        margin-bottom: 2rem;
    }

    .content .section-title p {
        font-size: 18px;
    }

    .content .section-steps h5 {
        font-size: 24px;
    }

    .content.trend .image {
        border-radius: 1.5rem;
    }

    .content.trend p:not(.caution p) span {
        line-height: 1.5;
    }

    .content.trend h3 {
        margin-bottom: 2rem;
    }

    .content.trend section {
        padding: 3rem 0;
    }

    .content.trend .section-steps .section-title {
        margin-bottom: 0;
    }

    .content-solution section {
        padding: 6vh 0;
    }

    .content-solution .section-count .wrapper {
        padding: 7rem 2rem;
    }

    .content-solution .section-count .title {
        border-radius: 45px;
        font-size: 24px;
    }

    .content-solution .section-count .count {
        font-size: 75px;
    }

    .content-solution.trend .section-answer .question {
        padding: 1.5rem;
    }

    .content-solution.trend .section-answer .question div {
        padding: 0.5rem 1rem;
    }

    .content-solution.trend .section-answer .solution {
        gap: 0.5rem;
    }

    .content-solution.trend .section-answer .solution img {
        padding-bottom: 5px;
    }

    .content-solution.trend .section-answer .type {
        gap: 1rem;
        padding: 1.5rem;
    }

    .content-solution.trend .section-answer .type h3 {
        font-size: 20px;
    }

    .content-solution.trend .section-answer .type li {
        gap: 1rem;
    }

    .content-solution.trend .section-chart2 .wrapper header .texts {
        gap: 5px;
    }

    .content-solution.trend .section-chart2 li .image {
        border-radius: var(--mc-radius-sm);
    }

    .content-solution.trend .section-free p {
        font-size: 20px;
    }

    .content-solution.trend .section-alarm {
        padding: 2rem 0 0;
    }

    .content-solution.trend .section-alarm h3 {
        gap: 0.5rem;
    }

    .content-solution.trend .section-free2 {
        padding-bottom: 1rem;
    }

    .content-solution.trend .section-free2 button {
        padding: 0.75rem;
        font-size: 16px;
    }

    .content-solution.trend .section-free2 .image {
        margin-left: -6rem;
        margin-bottom: -5.5rem;
    }

    .content-solution.trend .section-free2 .caution {
        padding: 0.5rem;
    }

    .content-solution.trend .section-free2 .caution p::before {
        font-size: 14px;
    }

    .content-function .image img {
        border-radius: var(--mc-radius-sm);
    }

    .content-function.trend .tabs {
        padding: 0.5rem 0;
    }

    .content-function.trend .tabs li {
        font-size: 14px;
    }

    .content-function.trend .lowest-price article:nth-of-type(1) .wrapper .texts {
        padding-top: 20rem;
    }

    .content-function.trend .lowest-price article:nth-of-type(2) .image img {
        border-radius: 2rem;
    }

    .content-function.trend .lowest-price article:nth-of-type(3) .texts {
        padding-top: 30rem;
    }

    .content-function.trend .keyword-trend article:nth-of-type(2) .image {
        padding-top: 0;
    }

    .content-function.trend .keyword-trend article:nth-of-type(5) {
        margin-bottom: 0;
    }

    .content-pricing .section-price .switch {
        font-size: 14px;
        padding: 0.5rem 1.5rem;
    }

    .content-pricing .section-price ul {
        gap: 2rem;
    }

    .content-pricing .section-price li .title {
        padding: 2rem 1rem;
    }

    .content-pricing .section-price li dl {
        padding: 2rem 1rem;
    }

    .content-pricing .section-price li .buttons {
        padding: 1rem;
    }

    .content-pricing .section-event button {
        margin-top: 0;
        font-size: 18px;
    }

    .content-service .caution {
        border-radius: var(--mc-radius-xs);
    }

    .content-service .section-process h5 {
        padding: 0.75rem;
    }

    .content-form .wrapper {
        gap: 3rem;
        padding: 1rem;
        margin-top: 1rem;
    }

    .content-form h1 {
        margin: 6rem 0 0;
    }

    .content-form .inputs input {
        font-size: 16px;
    }

    .content-form .inputs input[type=radio] + label {
        margin-right: 0;
    }

    .content-form section .section-title h3 {
        font-size: 28px;
    }

    .content-form section ul li {
        padding: 1rem 0;
    }

    .content-form .section-agreement ul {
        padding: 0.5rem 0;
    }

    .content-form .section-agreement button {
        padding: 0 0.5rem;
        font-size: 12px;
    }

    .content-form .section-agreement .settings {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .content-form .section-buttons button {
        padding: 1rem;
        font-size: 18px;
    }

    .service_function h4 {
        font-size: 24px;
    }

    .service_fee h4 {
        font-size: 24px;
    }

    .service_function h6 {
        font-size: 16px;
    }

    .service_fee h6 {
        font-size: 16px;
    }

    .service_function .pricing {
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }

    .service_function .advantages {
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }

    .service_fee .pricing {
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }

    .service_fee .advantages {
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }

    .service_function .pricing + .caution {
        margin-top: -2rem;
    }

    .service_function .advantages + .caution {
        margin-top: -2rem;
    }

    .service_fee .pricing + .caution {
        margin-top: -2rem;
    }

    .service_fee .advantages + .caution {
        margin-top: -2rem;
    }

    .service_function .pricing .information {
        padding: 0 1rem;
    }

    .service_function .advantages .information {
        padding: 0 1rem;
        gap: 1rem;
    }

    .service_fee .pricing .information {
        padding: 0 1rem;
    }

    .service_fee .advantages .information {
        padding: 0 1rem;
        gap: 1rem;
    }

    .service_function .pricing > div header {
        padding: 20px 0 0 0;
    }

    .service_function .advantages > div header {
        padding: 20px 0 0 0;
    }

    .service_fee .pricing > div header {
        padding: 20px 0 0 0;
    }

    .service_fee .advantages > div header {
        padding: 20px 0 0 0;
    }

    .service_function .pricing .notice {
        font-size: 18px;
        padding: 1rem 0;
    }

    .service_function .advantages .notice {
        font-size: 18px;
        padding: 1rem 0;
    }

    .service_fee .pricing .notice {
        font-size: 18px;
        padding: 1rem 0;
    }

    .service_fee .advantages .notice {
        font-size: 18px;
        padding: 1rem 0;
    }

    .service_function .pricing h5 {
        font-size: 28px;
    }

    .service_fee .pricing h5 {
        font-size: 28px;
    }

    .content-solution.shopping section .wrapper {
        gap: 2vh 2vw;
    }

    .content-solution.shopping .section-main {
        padding: 0;
    }

    .content-solution.shopping .section-recommand .wrapper {
        gap: 0;
    }

    .content-solution.shopping .section-recommand li strong {
        font-size: 20px;
        margin-top: 0;
    }

    .content-solution.shopping .section-recommand ul {
        gap: 1rem;
    }

    .content-solution.shopping .section-event {
        padding: 6vh 0;
    }

    .content-solution.shopping .section-process li .caution {
        padding: 0.75rem;
        line-height: 1.5;
    }

    /* ---- Content/css/css.css 쪽 차이 ----
       모달 폭은 css/common/modal.css 가 나중에 로드되어 그쪽이 이긴다.
       여기 값은 modal.css 가 닿지 않는 화면(레이아웃 밖 모달)용이다. */

    .modal .popup_alert {
        width: calc(100% - 2rem);
    }

    /* 회원가입 약관 펼침 목록 */
    .btn-dropdown + dl {
        padding: 0 .75rem;
        line-height: 1.25;
        font-size: 12px;
    }

    /* 카드(li)의 좌우 패딩이 16px 인데 이 상자만 12px 이라, 안의 글이
       상자 가장자리에 더 붙어 보였다. 카드와 같은 값으로 맞춘다. */
    .btn-dropdown + dl.active {
        padding: 1rem;
    }

    .toggle-switch label {
        height: 30px;
    }

        .toggle-switch label::before {
            width: 24px;
            height: 24px;
        }
}