/* #region [ST003 CORE HIERARCHY] - 위계 뼈대 (3-2-1 프로토콜) */

/* 👑 [LEVEL_3] : 최상단 외벽 (The Ultimate Wrapper)
   - 용도: 건물의 외벽. 도메인 전체의 배경색과 넘침(Overflow)을 제어한다.
   - 규칙: 모든 PHP 알맹이 파일의 가장 바깥을 감싸야 함.
*/



/* #region [ST003 CORE HIERARCHY] - 98% 연쇄 위계 뼈대 */






/* #region [ST003 CORE HIERARCHY] - 4단계 절대 복종 연쇄 위계 (무한 확장 패치) */

/* 전역 강제 규약: 박스 사이징 유지 */
.st003-main-wrapper-level-4 *, 
.st003-main-wrapper-level-4 *:before, 
.st003-main-wrapper-level-4 *:after {
    box-sizing: border-box;
    max-width: 100%;
}

/* 🌌 [LEVEL_4] : 시스템 총괄 래퍼 (The Motherboard) */
.st003-main-wrapper-level-4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 🚨 수정: 고정 높이를 최소 높이로 변경하고 넘침 허용 */
    min-height: calc(100vh - 60px); 
    height: auto; 
    overflow: visible; 
    background: #f0f0f0;
}

/* 👑 [LEVEL_3] : 최상단 외벽 (The Canvas) */
.st003-main-wrapper-level-3 {
    display: flex;
    flex-direction: column;
    width: 98%; 
    /* 🚨 수정: % 높이 기반을 버리고 내용물에 따라 늘어나게 설정 */
    height: auto;
    min-height: 100%;
    max-width: 98%;
    /* max-height: 98%; <- 이놈이 무한 확장을 막는 주범이므로 제거 */
    margin: 20px auto; /* 상하 여백 확보 */
    overflow: visible; 
    flex-shrink: 0; 
    background: #c0c0c0;

    /* 📦 [LEVEL_2] : 작업 바닥 (The Inset Paper) */
    .st003-main-container-level-2 {
        display: flex;
        flex-direction: column;
        width: 98%;
        height: auto; /* 🚨 수정: 자동 확장 */
        min-height: 100%;
        max-width: 98%;
        margin: 10px auto;
        /* overflow-y: auto; <- 내부 스크롤 대신 전체 스크롤 사용을 위해 변경 */
        overflow: visible; 
        overflow-x: hidden; 
        flex-shrink: 0;
        background: #ffffff;
        border: 2px inset #808080;

        /* 🧩 [LEVEL_1] : 가구 배치 줄 (The Row) */
        .st003-main-group-level-1 {
            display: flex;
            width: 98%;
            max-width: 98%;
            margin: 0 auto 15px auto;
            gap: 10px;
            flex-shrink: 0; /* 🚨 수정: 높이가 변해도 수축 금지 */
            
            .st003-main-item-column { 
                flex: 1; 
                min-width: 0; 
                width: 98%;
                flex-shrink: 0;
            }
        }
    }
}
/* #endregion */





/* #endregion */









/* #endregion */



/* #region 바둑판 */



   

/* 🏁 ST003 GRID SYSTEM (바둑판 1~5) */
/* 숫자는 가로 분할 개수입니다. */
[class^="st003-main-grid-"] {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.st003-main-grid-1 { grid-template-columns: 1fr; }
.st003-main-grid-2 { grid-template-columns: 1fr 1fr; }
.st003-main-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.st003-main-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.st003-main-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }




/* #endregion */










/* #region 사이드 그리드 */


/* 🧱 ST003 SIDE SYSTEM (사이드 1~5) */
/* 숫자가 커질수록 왼쪽 사이드바(메뉴/정보창)가 넓어집니다. */
[class^="st003-main-side-"] {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.st003-main-side-1 { grid-template-columns: 100px 1fr; } /* 초정밀 네비 */
.st003-main-side-2 { grid-template-columns: 200px 1fr; } /* 표준 사이드 */
.st003-main-side-3 { grid-template-columns: 300px 1fr; } /* 정보형 사이드 */
.st003-main-side-4 { grid-template-columns: 450px 1fr; } /* 대형 정보창 */
.st003-main-side-5 { grid-template-columns: 1fr 1fr; }   /* 사실상 반반(Grid-2와 동일 감성) */







/* #endregion */


























/* #region 버튼 */




/* 🔘 ST003 CLASSIC BUTTON SET (Win95/98 Style) */

/* 공통 기본 규격 */
[class^="st003-main-btn-"] {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    color: #000000;
    cursor: pointer;
    outline: none;
}

/* 클릭 시 음각 효과 (눌리는 느낌) */
[class^="st003-main-btn-"]:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding-top: 7px !important;
    padding-left: 7px !important;
}

/* 사이즈별 정렬 (1:최소 ~ 5:최대) */
.st003-main-btn-1 { padding: 4px 10px; font-size: 11px; }
.st003-main-btn-2 { padding: 6px 15px; font-size: 13px; }
.st003-main-btn-3 { padding: 10px 25px; font-size: 15px; }
.st003-main-btn-4 { padding: 14px 35px; font-size: 18px; }
.st003-main-btn-5 { padding: 20px 50px; font-size: 22px; }



/* #endregion */










/* #region 입력 인풋 */






/* ⌨️ ST003 CLASSIC INPUT SET (Win95 Style) */
[class^="st003-main-input-"], 
[class^="st003-main-area-"] {
    background: #ffffff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    font-family: 'JetBrains Mono', monospace;
    color: #000000;
    outline: none;
    box-sizing: border-box;
}

/* INPUT 사이즈 (단일행) */
.st003-main-input-1 { padding: 2px; font-size: 11px; }
.st003-main-input-2 { padding: 4px; font-size: 13px; }
.st003-main-input-3 { padding: 6px; font-size: 15px; }
.st003-main-input-4 { padding: 8px; font-size: 18px; }
.st003-main-input-5 { padding: 10px; font-size: 22px; }

/* AREA 사이즈 (다중행 - 높이 위주 차등) */
.st003-main-area-1 { height: 60px;  padding: 5px; font-size: 12px; }
.st003-main-area-2 { height: 120px; padding: 5px; font-size: 13px; }
.st003-main-area-3 { height: 250px; padding: 8px; font-size: 14px; }
.st003-main-area-4 { height: 450px; padding: 10px; font-size: 15px; }
.st003-main-area-5 { height: 700px; padding: 12px; font-size: 16px; }






/* #endregion */









/* #region 프레임 */





/* 🖼️ ST003 CLASSIC FRAME SET (Win95 Style - 구역 나눔) */
/* 숫자가 커질수록 테두리가 두꺼워지거나 안으로 깊게 파입니다. */
[class^="st003-main-frame-"] {
    background: #c0c0c0;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.st003-main-frame-1 { border-width: 1px; padding: 5px; }
.st003-main-frame-2 { border-width: 2px; padding: 10px; }
.st003-main-frame-3 { border-width: 3px; padding: 15px; } /* 표준 컨테이너용 */
.st003-main-frame-4 { border-width: 4px; padding: 20px; border-style: double; }
.st003-main-frame-5 { border-width: 6px; padding: 30px; background: #d0d0d0; }

/* #endregion */








/* #region 레이블 */

/* 🏷️ ST003 CLASSIC LABEL SET (Win95 Style - 상태창/제목) */
/* 숫자가 커질수록 글자가 강조되고 배경이 선명해집니다. */
[class^="st003-main-label-"] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    padding: 2px 6px;
    border: 1px solid #808080;
    background: #e0e0e0;
    color: #000000;
}

.st003-main-label-1 { font-size: 10px; background: #d0d0d0; }
.st003-main-label-2 { font-size: 12px; } /* 표준 라벨 */
.st003-main-label-3 { font-size: 14px; border-width: 2px; }
.st003-main-label-4 { font-size: 18px; background: #000080; color: #ffffff; } /* 윈도우 타이틀바 감성 */
.st003-main-label-5 { font-size: 22px; border-bottom: 3px double #000; }





/* #endregion */











/* #region 네비   */


/* 🧭 ST003 CLASSIC NAV SET (Toolbar Style) */
/* 숫자가 커질수록 메뉴의 높이와 클릭 영역이 넓어집니다. */
[class^="st003-main-nav-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    border: 1px solid #000;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}

/* 마우스 올리면 반전 효과 (고전 스타일) */
[class^="st003-main-nav-"]:hover {
    background: #000080;
    color: #ffffff;
}

.st003-main-nav-1 { height: 24px; font-size: 11px; padding: 0 10px; }
.st003-main-nav-2 { height: 32px; font-size: 13px; padding: 0 15px; } /* 표준 툴바 */
.st003-main-nav-3 { height: 48px; font-size: 15px; padding: 0 20px; }
.st003-main-nav-4 { height: 64px; font-size: 18px; padding: 0 25px; }
.st003-main-nav-5 { height: 80px; font-size: 22px; padding: 0 30px; }


/* #endregion */






/* #region 아이콘  */




/* 📦 ST003 CLASSIC BOX SET (Icon/Media Container) */
/* 숫자가 커질수록 박스 크기가 커지며, 안쪽으로 살짝 파인(Deep Inset) 느낌을 줍니다. */
[class^="st003-main-box-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d0d0d0;
    border: 2px inset #808080; /* 깊은 음각 */
    overflow: hidden;
}

.st003-main-box-1 { width: 32px;  height: 32px; }  /* 아이콘용 */
.st003-main-box-2 { width: 64px;  height: 64px; }  /* 큰 아이콘/프로필 */
.st003-main-box-3 { width: 128px; height: 128px; } /* 썸네일 */
.st003-main-box-4 { width: 256px; height: 256px; } /* 미디어 미리보기 */
.st003-main-box-5 { width: 512px; height: 512px; } /* 대형 캔버스 */



/* #endregion */










/* #region 스크롤바 */


/* 📜 ST003 CLASSIC SCROLL SET (Win95 Style) */
/* 모든 브라우저의 스크롤바를 시스템 규격으로 강제 고정 */
[class^="st003-main-scroll-"]::-webkit-scrollbar { width: 16px; height: 16px; }
[class^="st003-main-scroll-"]::-webkit-scrollbar-track { background: #d0d0d0; border: 1px inset #808080; }
[class^="st003-main-scroll-"]::-webkit-scrollbar-thumb { 
    background: #c0c0c0; 
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
    border-right: 2px solid #808080; border-bottom: 2px solid #808080;
}





/* #endregion */




/* #region 정렬 */



/* 🎯 ST003 CLASSIC ALIGN SET (정렬) */
.st003-main-align-1 { text-align: left; }
.st003-main-align-2 { text-align: center; }
.st003-main-align-3 { text-align: right; }
.st003-main-align-4 { display: flex; justify-content: center; align-items: center; } /* 완전 중앙 */
.st003-main-align-5 { display: flex; justify-content: space-between; } /* 양끝 정렬 */


/* #endregion */




/* #region 여백 */


/* ↔️ ST003 CLASSIC SPACE SET (여백) */
.st003-main-space-1 { margin: 5px; }
.st003-main-space-2 { margin: 10px; }
.st003-main-space-3 { margin: 20px; }
.st003-main-space-4 { padding: 15px; }
.st003-main-space-5 { padding: 30px; }

/* #endregion */












/* #region 사이즈 규격 */



/* 📏 ST003 CLASSIC FULL-SIZE SET (부모 꽉 채우기) */

/* 1. 가로 꽉 채우기 (가장 많이 씀) */
.st003-main-full-w { width: 100% !important; box-sizing: border-box; }

/* 2. 세로 꽉 채우기 */
.st003-main-full-h { height: 100% !important; }

/* 3. 가로세로 전부 꽉 채우기 */
.st003-main-full-all { width: 100% !important; height: 100% !important; flex: 1; }

/* 4. 부모 안에서 남는 공간 다 처먹기 (Flex 자식용) */
.st003-main-flex-fill { flex: 1; display: flex; flex-direction: column; }

/* 5. 내부 정렬까지 꽉 채운 중앙 (아이콘/이미지용) */
.st003-main-full-center { 
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center; 
}

/* #endregion */