/* ========================================
   기본
======================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #F0F0F0;
    color: #333333;

    font-family: "Noto Sans", sans-serif;
}


/* ========================================
   뒤로 가기 버튼
======================================== */

.back-button {
    position: fixed;
    top: 1vw;
    left: 2vw;

    font-family: "Noto Sans", sans-serif;
    font-size: 50px;
    font-weight: 400;

    color: #9FC4E8;
    text-decoration: none;

    z-index: 9999;
}

.back-button:hover {
    opacity: 0.6;
}


/* ========================================
   언어 버튼
======================================== */

.language-buttons {
    position: fixed;

    top: 25px;
    right: 30px;

    display: flex;
    gap: 8px;

    z-index: 1000;
}


/* 각각의 네모 버튼 */

.language-button {
    width: 42px;
    height: 36px;

    padding: 0;

    border: 2px solid #707070;
    background: #ffffff;

    font-family: "Noto Sans", sans-serif;
    font-size: 13px;

    color: #333333;

    cursor: pointer;

    transition: opacity 0.15s ease;
}


/* 마우스를 올렸을 때 */

.language-button:hover {
    opacity: 0.45;
}


/* 선택된 언어 */

.language-button.active {
    font-weight: 600;
}


/* ========================================
   매뉴얼 전체
======================================== */

.manual {
    width: min(90vw, 700px);

    margin: 100px auto 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ========================================
   각각의 설명
======================================== */

.manual-item {
    width: 100%;
    margin-bottom: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ========================================
   이미지
======================================== */

.manual-image {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0 auto 25px;
}


/* ========================================
   설명 글
======================================== */

.manual-text {
    width: 100%;

    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}


/* ========================================
   모바일
======================================== */

@media (max-width: 768px) {

    .language-buttons {
        top: 15px;
        right: 15px;

        gap: 5px;
    }

    .language-button {
        font-size: 13px;
    }

    .manual {
        width: 88vw;

        margin-top: 80px;
    }

    .manual-item {
        margin-bottom: 70px;
    }

    .manual-text {
        font-size: 14px;
        line-height: 1.7;
    }
}