@charset "utf-8";

/* ===== 안전장치: 본문 상단 여백 제거 ===== */
#contents > .white-space, #contents .white-space { 
    display: none !important; 
    height: 0 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

/* ===== 전체 컨테이너 overflow 설정 ===== */
#contents { overflow: visible !important; }
body { overflow-x: hidden; overflow-y: auto; }

/* ===== 페이지 타이틀 텍스트 박스 ===== */
.page-title-txtbox { 
    height: 101px; 
    margin-top: 180px; 
}
.page-title-txtbox h2 { 
    width: 465px; 
    font: normal normal bold 35px/55px Pretendard; 
    letter-spacing: 0px; 
    color: #00B5F1; 
    opacity: 1; 
    text-align: left; 
    margin-bottom: 50px; 
}
.page-title-txtbox p { 
    width: 805px; 
    font: normal normal normal 35px/55px Pretendard; 
    letter-spacing: 0px; 
    color: #000000; 
    opacity: 1; 
    text-align: left; 
}

/* ===== 그리드 레이아웃 설정 ===== */
.posco-groups { overflow: visible; }

/* ===== 비활성화된 로고 스타일 ===== */
.posco-groups .logo-grid figure.disabled { 
    cursor: default; 
    pointer-events: none; 
}
.posco-groups .logo-grid figure.disabled:hover { 
    transform: none; 
    box-shadow: none; 
    background: none; 
}
.posco-groups .logo-grid figure.disabled img { }
.posco-groups .logo-grid figure.disabled figcaption { }

/* ===== 데스크탑 그리드 ===== */
.posco-groups .logo-grid[data-grid] { 
    overflow: visible; 
    min-height: fit-content; 
    grid-auto-rows: minmax(180px, auto) !important; 
}
.posco-groups .logo-grid[data-grid][data-open] { 
    padding-bottom: 0px !important; 
}

/* ===== 패널 상태 제어 ===== */
.posco-groups .panel { display: none; }
.posco-groups .panel.is-open { 
    display: block !important; 
    visibility: visible !important; 
    opacity: 1; 
    transition: opacity 0.3s ease; 
    grid-row-end: auto !important; 
    min-height: 300px !important; 
}
.posco-groups .panel-store { display: none; }

/* ===== 패널 디자인 ===== */
.posco-groups .panel.detail-card { 
    grid-column: 1 / -1; 
    position: relative; 
    z-index: 10; 
    width: 100%; 
    box-sizing: border-box; 
    overflow: visible; 
    color: #e6f2fb; 
    background: #004778; 
    border-left: 1px solid #004778; 
    border-right: 1px solid #004778; 
    border-bottom: 1px solid #004778; 
    border-radius: 20px; 
    padding: 65px 70px; 
    box-shadow: 0 4px 16px rgba(0,0,0,.12); 
}

/* ===== 패널 헤더 영역 ===== */
.detail-card .head { 
    display: grid; 
    grid-template-columns: auto 1fr; 
    gap: 20px; 
    align-items: center; 
    margin-bottom: 40px; 
}
.head.head02 { padding-top: 80px; }

/* ===== 기본 폰트 ===== */
.detail-card .corp { 
    font-weight: 900; 
    font-size: 22px; 
    white-space: nowrap; 
}
.detail-card .title { 
    font-weight: 800; 
    font-size: 22px; 
}

/* ===== 헤더 영역 폰트 (35px Bold) ===== */
.detail-card .head .corp, 
.detail-card .head .title, 
.detail-card .head .value { 
    font: normal normal bold 35px/41px Pretendard; 
    letter-spacing: 0px; 
    color: #FFFFFF; 
    opacity: 1; 
    line-height: 1.17; 
}
.detail-card .head .corp { white-space: nowrap; }
.detail-card .head .title { text-align: right; }

/* ===== 패널 콘텐츠 영역 ===== */
.detail-card .rows { 
    display: grid; 
    gap: 14px; 
    width: 100%; 
    overflow: visible; 
}

/* ===== 기본 행 스타일 ===== */
.detail-card .row { 
    display: grid; 
    grid-template-columns: 120px 1fr; 
    gap: 18px; 
    align-items: center; 
    padding: 10px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.3); 
    width: 100%; 
    overflow: visible; 
}

/* ===== 각 행별 특수 스타일 ===== */
.detail-card .row:first-child { 
    border-top: 1px solid rgba(255,255,255,0.8); 
    padding-top: 15px; 
}
.detail-card .row:nth-child(2) { padding-bottom: 15px; }
.detail-card .row:last-child { 
    border-bottom: 0; 
    position: relative; 
    padding-bottom: 20px; 
}

/* ===== 하단 라인 ===== */
.detail-card .row:last-child::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 1px; 
    background: rgba(255,255,255,0.8); 
}

/* ===== 텍스트 영역 개별 조절 ===== */
.detail-card .row:first-child .value { 
    padding-top: 12px; 
    padding-bottom: 16px; 
    line-height: 1.4; 
}
.detail-card .row:nth-child(2) .value { 
    padding-top: 5px; 
    padding-bottom: 16px; 
    line-height: 1.4; 
}

/* ===== 라벨 및 값 텍스트 스타일 ===== */
.detail-card .label { 
    font-weight: 800; 
    color: #e9f5ff; 
}
.detail-card .value { 
    line-height: 1.7; 
    color: #def2ff; 
}

/* ===== 행 영역 라벨/값 (20px) ===== */
.detail-card .row .label { 
    font: normal normal bold 20px/28px Pretendard; 
    letter-spacing: 0px; 
    color: #FFFFFF; 
    opacity: 1; 
    text-align: left; 
}
.detail-card .row .value { 
    font: normal normal normal 20px/28px Pretendard; 
    letter-spacing: 0px; 
    color: #FFFFFF; 
    opacity: 1; 
    text-align: left; 
}

/* ===== 리스트 스타일 ===== */
.detail-card .value ul { 
    margin: 0; 
    padding-left: 0; 
}
.detail-card .value li { 
    margin: 6px 0; 
}

/* ===== 반응형 디자인 ===== */

/* 960px 이하 - 태블릿 */
@media (max-width: 960px) {
    /* 그리드 높이 조정 */
    .posco-groups .logo-grid[data-grid] { 
        grid-auto-rows: minmax(80px, auto) !important; 
    }
    
    /* 페이지 타이틀 */
    .page-title-txtbox { 
        height: auto; 
        margin-top: 60px; 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        text-align: left; 
    }
    .page-title-txtbox h2 { 
        width: auto; 
        font: normal normal bold 32px/40px Pretendard; 
        letter-spacing: 0px; 
        color: #00B5F1; 
        opacity: 1; 
        text-align: left; 
        margin-bottom: 15px; 
    }
    .page-title-txtbox p { 
        width: auto; 
        font: normal normal normal 28px/40px Pretendard; 
        letter-spacing: 0px; 
        color: #000000; 
        opacity: 1; 
        text-align: left; 
        margin-bottom: 30px; 
    }
    
    /* 패널 디자인 */
    .detail-card { 
        padding: 18px 16px; 
        border-radius: 14px; 
    }
    .detail-card .corp, 
    .detail-card .title { 
        font-size: 20px; 
    }
    .detail-card .head { 
        grid-template-columns: 1fr; 
        gap: 10px; 
        text-align: left; 
        margin-bottom: 20px; 
    }
    .detail-card .head .title { 
        text-align: left !important; 
        margin-top: 5px; 
    }
    .detail-card .row { 
        grid-template-columns: 1fr; 
        gap: 8px; 
    }
    .detail-card .row .label { 
        font-size: 20px; 
        margin-bottom: 5px; 
    }
    .detail-card .row .value { 
        font-size: 20px; 
        line-height: 1.5; 
        padding-left: 0; 
    }
    .detail-card .row .value ul { 
        padding-left: 0; 
        margin: 0; 
    }
    .detail-card .row .value li { 
        margin: 3px 0; 
        padding-left: 0; 
    }
    .detail-card .row:last-child .value ul { 
        padding-left: 0; 
        margin: 0; 
    }
    .detail-card .row:last-child .value li { 
        margin: 4px 0; 
        padding-left: 0; 
        /* text-indent: -12px; 
        padding-left: 12px;  */
    }
}

/* 960px ~ 770px - 중간 태블릿 */
@media (max-width: 960px) and (min-width: 770px) {
    .posco-groups .logo-grid figure img {
        max-width: 100px !important;
        width: 100px !important;
        height: auto !important;
        transition: none !important;
        transform: none !important;
    }
    .posco-groups .logo-grid figure:hover img,
    .posco-groups .logo-grid figure:active img,
    .posco-groups .logo-grid figure:focus img {
        transform: none !important;
        transition: none !important;
        scale: 1 !important;
        max-width: 100px !important;
        width: 100px !important;
    }
}

/* 769px 이하 - 모바일 */
@media (max-width: 769px) {
    /* 그리드 높이 조정 */
    .posco-groups .logo-grid[data-grid] { 
        grid-auto-rows: minmax(48.75px, auto) !important; 
    }
    
    /* 로고 크기 고정 */
    .posco-groups .logo-grid figure img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
        transition: none !important;
        transform: none !important;
    }
    .posco-groups .logo-grid figure:hover img,
    .posco-groups .logo-grid figure:active img,
    .posco-groups .logo-grid figure:focus img {
        transform: none !important;
        transition: none !important;
        scale: 1 !important;
        max-width: 60px !important;
        width: 60px !important;
    }
}

/* 440px 이하 - 초소형 모바일 */
@media (max-width: 440px) {
    .posco-groups .logo-grid { margin-top: 0; }
    
    .page-title-txtbox { margin-top: 54px; }
    .page-title-txtbox h2 { 
        font: normal normal bold 20px/28px Pretendard; 
        margin-bottom: 5px; 
    }
    .page-title-txtbox p { 
        font: normal normal normal 16px/24px Pretendard; 
        margin-bottom: 20px; 
    }
    
    .posco-groups .panel.detail-card { 
        padding: 20px 20px; 
        border-radius: 10px; 
    }
    .posco-groups .panel.detail-card .head { 
        margin-bottom: 15px; 
        gap: 8px; 
    }
    .posco-groups .panel.detail-card .row { 
        gap: 6px; 
        padding: 8px 0; 
    }
    .posco-groups .panel.detail-card .row .label { 
        margin-bottom: 3px; 
    }
    .posco-groups .panel.detail-card .row:first-child .label { 
        margin-bottom: 5px; 
    }
    .posco-groups .panel.detail-card .row:first-child { 
        padding-top: 15px; 
    }
    .posco-groups .panel.detail-card .head .corp, 
    .posco-groups .panel.detail-card .head .title, 
    .posco-groups .panel.detail-card .head .value { 
        font: normal normal bold 20px/24px Pretendard; 
        letter-spacing: 0px; 
        color: #FFFFFF; 
        opacity: 1; 
    }
    .posco-groups .panel.detail-card .row .label { 
        font: normal normal bold 16px/20px Pretendard; 
        letter-spacing: 0px; 
        color: #FFFFFF; 
        opacity: 1; 
        text-align: left; 
    }
    .posco-groups .panel.detail-card .row .value { 
        font: normal normal 300 16px/20px Pretendard; 
        letter-spacing: 0px; 
        color: #FFFFFF; 
        opacity: 1; 
        text-align: left; 
    }
}