body {
    font-family: var(--company-body-font-family), sans-serif;
    min-width: 380px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Body */
.body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    min-width: 380px;
}

/* Company Title */
.company-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    padding: 40px 10px;
    overflow: hidden;
}

.title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.title-wrapper h1 {
    font-size: 36px;
    line-height: normal;
    letter-spacing: var(--company-title-letter-spacing);
    white-space: nowrap;
    font-weight: normal;
}

.title-underline {
    width: 216px;
    height: 4px;
    position: relative;
    background: none;
}

.title-underline img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Company Description */
.company-desc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    min-width: 380px;
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
    gap: 0;
}

.desc-text {
    flex: 1 1 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    max-width: 700px;
    min-width: 360px;
    padding: 0 10px;
    overflow: hidden;
}

.text-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    max-width: 680px;
    min-width: 340px;
    padding: 10px;
    overflow: hidden;
}

.text-main-copy {
    font-family: var(--company-text-main-font), sans-serif;
    font-size: 14px;
    line-height: 24px;
    min-width: 340px;
    width: 100%;
}

.work-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    max-width: 680px;
    min-width: 360px;
    padding: 20px 0;
}

.work-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 680px;
    min-width: 380px;
    width: 100%;
    padding: 0 10px;
    overflow: hidden;
}

.work-title-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    max-width: 660px;
    min-width: 280px;
    width: 100%;
}

.work-title-header {
    display: flex;
    align-items: center;
    max-width: 660px;
    min-width: 260px;
    width: 100%;
}

.dot-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dot-icon img {
    width: 100%;
    height: 100%;
}

.work-title-header h3,
html[lang="ja"] .work-title-header h2 {
    flex: 1 1 0;
    font-size: var(--company-work-title-font-size);
    line-height: 29px;
    min-width: 260px;
    font-weight: normal;
}

.work-description {
    display: flex;
    align-items: center;
    max-width: 660px;
    min-width: 260px;
    width: 100%;
    padding-left: 10px;
    padding-right: 15px;
    gap: 10px;
    overflow: hidden;
}

.work-description-copy {
    flex: 1 1 0;
    font-family: var(--company-text-main-font), sans-serif;
    font-size: var(--company-work-desc-font-size);
    line-height: 24px;
    max-width: 640px;
    min-width: 260px;
}

.text-main-2 {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    max-width: 680px;
    min-width: 340px;
    padding: 12px;
    overflow: hidden;
}

.text-main-2 .bold-text {
    font-family: var(--company-text-main-font), sans-serif;
    font-weight: 700;
    font-size: var(--company-bold-text-font-size);
    line-height: 24px;
    text-align: center;
    max-width: 600px;
    min-width: 340px;
    width: 100%;
}

.text-main-2 .normal-text {
    font-family: var(--company-text-main-font), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    min-width: 340px;
    width: 100%;
}

.desc-image {
    width: 300px;
    height: 450px;
    position: relative;
}

.desc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 일본어 소개문 */
html[lang="ja"] body,
html[lang="ja"] .body,
html[lang="ja"] .company-desc,
html[lang="ja"] .header-container,
html[lang="ja"] .footer {
    min-width: 0;
}

html[lang="ja"] .desc-text {
    min-width: 0;
    flex-basis: 360px;
}

html[lang="ja"] .studio-introduction {
    width: 100%;
    overflow-wrap: anywhere;
}

html[lang="ja"] .studio-introduction,
html[lang="ja"] .work-list-item,
html[lang="ja"] .work-title-section,
html[lang="ja"] .work-title-header,
html[lang="ja"] .work-title-header h2,
html[lang="ja"] .work-description,
html[lang="ja"] .work-description-copy {
    min-width: 0;
}

html[lang="ja"] .studio-signature {
    padding: 0 20px;
    font-family: var(--company-text-main-font), sans-serif;
    font-size: var(--company-work-desc-font-size);
    line-height: 24px;
}

html[lang="ja"] .studio-signature p:first-child {
    font-weight: 700;
}

@media (max-width: 768px) {
    html[lang="ja"] .desc-text {
        flex-basis: auto;
    }
}


/* Responsive */
@media (max-width: 768px) {
    .title-wrapper h1 {
        font-size: 28px;
        letter-spacing: var(--company-title-letter-spacing-tablet);
    }

    .title-underline {
        width: 80%;
    }

    .company-desc {
        flex-direction: column;
    }

    .desc-text {
        flex: 1 1 auto;
        width: 100%;
    }

    .desc-image {
        width: 100%;
        max-width: 300px;
        margin-top: 20px;
    }

    .work-list-item {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .work-title-header h3,
    html[lang="ja"] .work-title-header h2 {
        font-weight: 700;
    }

    html[lang="ja"] .work-description-copy,
    html[lang="ja"] .studio-signature {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .title-wrapper h1 {
        font-size: 28px;
        letter-spacing: var(--company-title-letter-spacing-mobile);
    }

    .title-underline {
        width: 80%;
    }

    .text-main,
    .text-main-2 {
        min-width: 100%;
    }

    .work-item {
        min-width: 100%;
    }

    .work-title-header h3,
    html[lang="ja"] .work-title-header h2 {
        font-size: var(--company-mobile-work-title-font-size);
    }

    .desc-image {
        height: 400px;
    }
}

/* 중첩된 소개문과 업무 목록의 최소 너비를 함께 해제한다. */
@media (max-width: 768px) {
    body,
    .body,
    .company-desc,
    .desc-text,
    .text-main,
    .text-main-copy,
    .work-item,
    .work-list-item,
    .work-title-section,
    .work-title-header,
    .work-title-header h3,
    .work-description,
    .work-description-copy,
    .text-main-2,
    .text-main-2 .bold-text,
    .text-main-2 .normal-text {
        min-width: 0;
    }

    .company-title,
    .title-wrapper,
    .company-desc,
    .desc-text,
    .text-main,
    .work-list-item,
    .work-description,
    .text-main-2 {
        overflow: visible;
    }

    .title-wrapper {
        max-width: 100%;
    }

    .title-wrapper h1 {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .text-main,
    .text-main-2,
    .work-item {
        flex-basis: 100%;
        width: 100%;
    }

    .desc-image {
        height: auto;
        aspect-ratio: 300 / 450;
    }

    .desc-image img {
        display: block;
        height: auto;
    }
}

.title-wrapper h1,
.work-title-header h2,
.work-title-header h3,
.bold-text {
    text-wrap: balance;
}

.text-main-copy,
.work-description-copy,
.normal-text {
    text-wrap: pretty;
}