* {
    margin: 0;
    padding: 0;
    font-family: "Consolas", "D2Coding", "Malgun Gothic", sans-serif;
    box-sizing: border-box;
}

body {
    width: 210mm; /* A4 가로 너비 */
    margin: 0 auto;
    background: rgb(248, 248, 248);
}

@media screen and (max-width: 210mm) {
    body {
        width: 100%;
    }
}

.page-wrap {
    background: #fff;
}

/* 섹션은 기본 숨김. render.js 가 노출할 섹션만 display:block 으로 켠다 */
.page {
    display: none;
    width: 100%;
    padding: 20px;
    page-break-after: always;
}

.line {
    width: 100%;
    height: 1px;
    background: #ccc;
    margin: 20px 0;
}

/* text */
b {
    color: rgb(72, 17, 145);
}

.title {
    font-size: 22px;
    margin: 20px 0;
}

.introduce {
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 20px;
    padding: 20px 0;
}

ul,
li {
    list-style: none;
    position: relative;
}

li {
    word-break: break-all;
    font-size: 12px;
    line-height: 18px;
}

ul.bootstrap-list {
    padding-left: 0;
}

ul.bootstrap-list > li {
    padding-left: 1rem;
    margin-bottom: 0.5em;
}

ul.bootstrap-list > li:before {
    content: ">";
    position: absolute;
    left: 0;
    width: 0.75em;
    height: 0.75em;
}

/* 경력 사항 카드 */
.company-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.company-level,
.company-date {
    font-size: 12px;
    color: rgb(104, 104, 104);
    margin-bottom: 5px;
}

.company-level {
    margin-bottom: 0;
}

.company-work {
    font-size: 11px;
    margin-bottom: 5px;
}

.company-tag,
.project-tag {
    margin-top: 7px;
    font-size: 12px;
    color: rgb(18, 117, 134);
    font-weight: bold;
}

.section-career .container {
    display: flex;
    height: auto;
}

/* 로고가 가로로 긴 워드마크라 정사각형 대신 가로형 박스 */
.section-career .left-space {
    flex-basis: 120px;
    padding: 10px;
    width: 110px;
    height: 70px;
    border-radius: 7px;
    border: 1px solid rgb(228, 228, 228);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 비율 유지하며 박스 안에 맞춤 (로고마다 크기/비율이 다름) */
.section-career .left-space img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.section-career .left-space .logo-fallback {
    font-size: 11px;
    font-weight: bold;
    color: #888;
    text-align: center;
    word-break: keep-all;
}

.section-career .right-spaces {
    display: flex;
    flex-direction: column;
    flex-basis: calc(100% - 120px);
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.section-career .right-space {
    flex-grow: 1;
    padding: 10px;
}

.section-career .right-space:nth-of-type(1) {
    padding-bottom: 0;
}

/* 프로젝트 */
.pl10 {
    padding-left: 10px;
}

.w50 {
    width: 50%;
}

.portfolio-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    padding: 15px 0 20px 0;
    margin-bottom: 10px;
}

.portfolio-wrap > div {
    flex: 0 0 40%;
}

.portfolio-wrap > div:last-child {
    flex: 0 0 60%;
}

/* 스크린샷이 없는 프로젝트는 설명이 전체 폭을 사용 */
.portfolio-wrap > div:only-child {
    flex: 0 0 100%;
}

.project-title-wrap {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.project-title {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 3px;
}

.project-date {
    color: #888;
    font-size: 12px;
}

.project-name {
    position: absolute;
    right: 0;
    bottom: 0;
    font-style: italic;
    font-size: 11px;
    color: #1a10a5;
}

.project-desc {
    font-size: 12px;
    line-height: 19px;
    padding: 7px 0 12px 0;
}

/* 슬라이더 */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider {
    position: relative;
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 0 0 100%;
    text-align: center;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 7px;
    border: 1px solid rgb(228, 228, 228);
}

.prev-button,
.next-button {
    position: absolute;
    top: 25px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 100%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.prev-button:hover,
.next-button:hover {
    background-color: #333;
    color: #fff;
}

.prev-button {
    left: 10px;
}

.next-button {
    right: 10px;
}

/* 기간 별 상세 경력 */
.career-period {
    margin-bottom: 15px;
}

.career-period-date {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 25px;
}

.career-period-list {
    margin: 10px 0;
}

.career-period-list li {
    font-size: 13px;
    text-indent: 10px;
    margin-bottom: 10px;
}

@media print {
    body {
        width: 210mm;
        background: #fff;
    }

    .line {
        display: none;
    }

    .prev-button,
    .next-button {
        display: none;
    }

    /* 항목이 페이지 경계에서 잘리지 않도록 */
    .portfolio-wrap,
    .career-period,
    .section-career .container {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}