/* =========================================
   [오픽셀 공통 모듈] 연혁 타임라인 (History Timeline) - V4.1 Frontend
========================================= */

.oh-history-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.oh-history-wrapper * {
    box-sizing: border-box;
}

/* =========================================
   1. 공통 요소 & 첨부 이미지 스타일
========================================= */
.oh-history-content-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.oh-history-image-wrap {
    margin-top: 14px;
    width: 100%;
}

.oh-history-img {
    display: block;
    width: 100%;
    max-width: var(--oh-img-max-width, 480px);
    height: auto;
    border-radius: var(--oh-img-radius, 12px);
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* =========================================
   2. [스타일 1] 기본형 (년/월 분리형)
========================================= */
.oh-style-1 .oh-history-year-block { 
    display: flex; 
    align-items: flex-start; 
}

.oh-style-1 .oh-history-left { 
    width: 180px; 
    flex-shrink: 0; 
}

.oh-style-1 .oh-history-year { 
    font-size: var(--oh-year-size, 42px); 
    color: var(--oh-year-color, #111); 
    font-weight: 800; 
    margin: 0; 
    line-height: 1; 
    letter-spacing: -1px; 
}

.oh-style-1 .oh-history-right { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    border-left: var(--oh-line-width, 1px) solid var(--oh-line-color, #e5e5e5); 
    padding-left: 45px; 
    padding-bottom: 60px;
    position: relative; 
}

.oh-style-1 .oh-history-year-block:last-child .oh-history-right {
    padding-bottom: 10px;
}

.oh-style-1 .oh-history-dot { 
    position: absolute; 
    left: calc( var(--oh-line-width, 1px) / -2 ); 
    transform: translateX(-50%);
    top: 6px; 
    width: var(--oh-bullet-size, 10px); 
    height: var(--oh-bullet-size, 10px); 
    background-color: var(--oh-bullet-color, #2a2a4a); 
    border: var(--oh-bullet-border-width, 0px) solid var(--oh-bullet-border-color, transparent); 
    border-radius: 50%; 
    box-sizing: content-box; 
    z-index: 2;
}

.oh-style-1 .oh-history-item { 
    display: flex; 
    align-items: flex-start; 
    position: relative; 
    margin-bottom: 40px; 
}
.oh-style-1 .oh-history-item:last-child { margin-bottom: 0; }

.oh-style-1 .oh-history-month { 
    width: 50px; 
    font-size: var(--oh-month-size, 18px); 
    color: var(--oh-month-color, #cccccc); 
    font-weight: 700; 
    flex-shrink: 0; 
    line-height: 1.4; 
}

.oh-style-1 .oh-history-text { 
    font-size: var(--oh-text-size, 16px); 
    color: var(--oh-text-color, #444); 
    line-height: 1.6; 
}

.oh-style-1 .oh-history-desc {
    font-size: var(--oh-desc-size, 14px);
    color: var(--oh-desc-color, #888);
    margin-top: 4px;
    line-height: 1.5;
}

/* [스타일 1] 왼쪽 배치(align="left") 선택 시 반전 처리 */
.oh-style-1.oh-align-left .oh-history-year-block {
    flex-direction: row-reverse;
}
.oh-style-1.oh-align-left .oh-history-left {
    text-align: right;
}
.oh-style-1.oh-align-left .oh-history-right {
    border-left: none;
    border-right: var(--oh-line-width, 1px) solid var(--oh-line-color, #e5e5e5);
    padding-left: 0;
    padding-right: 45px;
}
.oh-style-1.oh-align-left .oh-history-dot {
    left: auto;
    right: calc( var(--oh-line-width, 1px) / -2 );
    transform: translateX(50%);
}

/* =========================================
   3. [스타일 2] 타이틀 & 설명 스택형 (레퍼런스 디자인)
========================================= */
.oh-style-2 .oh-history-year-block {
    display: flex;
    width: 100%;
}

.oh-style-2 .oh-history-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-left: var(--oh-line-width, 1px) solid var(--oh-line-color, #e5e5e5);
    padding-left: 38px;
    padding-bottom: 48px;
    position: relative;
}

.oh-style-2 .oh-history-year-block:last-child .oh-history-right {
    padding-bottom: 10px;
}

.oh-style-2 .oh-history-dot {
    position: absolute;
    left: calc( var(--oh-line-width, 1px) / -2 );
    transform: translateX(-50%);
    top: 4px;
    width: var(--oh-bullet-size, 10px);
    height: var(--oh-bullet-size, 10px);
    border-radius: 50%;
    box-sizing: content-box;
    z-index: 2;
    background-color: #ffffff;
    border: 2px solid #94a3b8;
}

.oh-style-2 .oh-history-year-block.is-first-year .oh-history-dot {
    background-color: var(--oh-bullet-color, #eb5a46);
    border: var(--oh-bullet-border-width, 0px) solid var(--oh-bullet-border-color, transparent);
    box-shadow: 0 0 0 4px rgba(235, 90, 70, 0.15);
}

.oh-style-2 .oh-history-year-s2 {
    font-size: var(--oh-year-size, 18px);
    color: var(--oh-year-color, #111111);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}

.oh-style-2 .oh-history-year-block.is-first-year .oh-history-year-s2 {
    color: var(--oh-bullet-color, #eb5a46);
}

.oh-style-2 .oh-history-item-s2 {
    margin-bottom: 24px;
}
.oh-style-2 .oh-history-item-s2:last-child {
    margin-bottom: 0;
}

.oh-style-2 .oh-history-title-s2 {
    font-size: var(--oh-text-size, 18px);
    color: var(--oh-text-color, #111111);
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.oh-style-2 .oh-history-desc-s2 {
    font-size: var(--oh-desc-size, 15px);
    color: var(--oh-desc-color, #888888);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

/* [스타일 2] 왼쪽 배치(align="left") 선택 시 */
.oh-style-2.oh-align-left .oh-history-right {
    border-left: none;
    border-right: var(--oh-line-width, 1px) solid var(--oh-line-color, #e5e5e5);
    padding-left: 0;
    padding-right: 38px;
}

.oh-style-2.oh-align-left .oh-history-dot {
    left: auto;
    right: calc( var(--oh-line-width, 1px) / -2 );
    transform: translateX(50%);
}

/* =========================================
   4. 모바일 반응형 처리 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    .oh-style-1 .oh-history-year-block,
    .oh-style-1.oh-align-left .oh-history-year-block { 
        flex-direction: column; 
    }
    .oh-style-1 .oh-history-left,
    .oh-style-1.oh-align-left .oh-history-left { 
        width: 100%; 
        margin-bottom: 20px; 
        padding-left: 30px; 
        text-align: left;
    }
    .oh-style-1 .oh-history-year { 
        font-size: calc(var(--oh-year-size, 42px) * 0.8); 
    }
    .oh-style-1 .oh-history-right,
    .oh-style-1.oh-align-left .oh-history-right {
        border-right: none;
        border-left: var(--oh-line-width, 1px) solid var(--oh-line-color, #e5e5e5);
        padding-right: 0;
        padding-left: 30px;
        padding-bottom: 40px;
    }
    .oh-style-1 .oh-history-dot,
    .oh-style-1.oh-align-left .oh-history-dot { 
        left: calc( var(--oh-line-width, 1px) / -2 ); 
        right: auto;
        transform: translateX(-50%);
        top: 6px; 
    }

    .oh-style-2 .oh-history-right {
        padding-left: 25px;
        padding-bottom: 36px;
    }
    .oh-style-2.oh-align-left .oh-history-right {
        padding-right: 25px;
        padding-bottom: 36px;
    }
    .oh-history-img {
        max-width: 100%;
    }
}