html, h1, h2, h3, h4, h5, h6, form, fieldset, img {
    margin: 0;
    padding: 0;
    border: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
}
h2 {
    font-size: 1.8em;
    font-weight: 600;
    color: #232323;
    margin-bottom: 30px;
}
h3 {
    font-size: 1.4em;
    font-weight: 600;
    color: #1C1C1C;
    margin: 4px 0 20px 0;
}
h4 {
    font-size: 1.2em;
    font-weight: 600;
    color: #1C1C1C;
}
p {
    margin: 0;
    padding: 0;
    word-break: keep-all;
}
.hd_title {
    color: #1C1C1C;
    font-weight: 600;
    font-size: 1.4em;
    margin-bottom: 8px;
}

/* =========================================================
   페이지 헤더 — hd_title + 액션 버튼 묶음을 표준 레이아웃으로.
   .page-header-top 은 title / actions, 이 두 덩어리만 space-between 한다.

   이 파일은 사용자/관리자 공통이라 여기서는 중립적인 기본 모양(제목 줄
   아래 별도 툴바 줄)만 정의한다. 관리자 페이지는 툴바를 .page-header
   안쪽, 제목 줄 바로 아래에 붙여서 헤더와 표가 여백 없이 이어지게
   하는데, 그 변형은 admin 전용 파일(adminpages/page-header.css)에
   있다 — 사용자 페이지에는 영향이 없어야 해서 여기 두지 않는다. */
.page-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 24px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
}
.page-header .hd_title {
    margin-bottom: 0;
}
.page-header-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 제목 줄 아래 전체 폭 툴바(필터/검색/일괄액션 등) — 내부 레이아웃은 각 페이지가
   구성하고, 여기서는 위치와 여백만 담당한다. */
.page-toolbar {
    margin-bottom: 20px;
}

/* 액션 버튼은 몇 개든 하나의 그룹으로 붙어서 오른쪽에 배치된다. */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.page-header-actions .ui-btn {
    flex: 0 0 auto;
}
/* 버튼이 1개뿐이면(:only-of-type) 좁은 화면에서도 폭을 그대로 둔다.
   2개 이상일 때만 세로로 쌓아 각각 전체폭으로 — 탭하기 쉽게. */
@media (max-width: 767.98px) {
    .page-header-actions .ui-btn:not(:only-of-type) {
        width: 100%;
    }
    .page-header .hd_title {
        font-size: 1.2em;
    }
}

/* =========================================================
   검색/필터 패널 — CSS Grid(auto-fit) 우선. 기본값 자체가 좁아지면
   자연스럽게 줄어들고, 992/768px에서만 열 개수를 명시적으로 보정한다.
   ========================================================= */
.search-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 12px;
    padding: 16px 20px;
    background: #fbfcfe;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    margin-bottom: 20px;
}
.search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.search-field label {
    font-size: .78em;
    color: #6b7280;
}
.search-field select,
.search-field input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d9e2ec;
    border-radius: 7px;
    font-size: .85em;
    width: 100%;
    min-width: 0;
    background: #fff;
}
.search-field.search-submit {
    justify-content: flex-end;
}
.search-field.search-submit .ui-btn {
    width: 100%;
}

@media (max-width: 1199.98px) {
    .search-panel {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 991.98px) {
    .search-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767.98px) {
    .search-panel {
        grid-template-columns: 1fr;
    }
}

.box {
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
}

.box .box_hd {
    background: #DFE1E7;
    padding: 28px 36px;
}

.box .box_hd_internal {
    padding: 24px 36px;
}

.accordion .box_hd {
    padding: 12px 36px;
}

.box .box_hd strong {
    font-size: 1.2em;
    margin-right: 10px;
}

.accordion .box_hd strong {
    margin-right: 0;
}

.txt_gray > a, .txt_gray {
    color: #AFAFAF;
}

.grid {
    display: grid;
    gap: 10px;
}

.grid > li, .grid > div, .project_history .box, #internalReviewAccordion .box, #projectList .box{
    box-sizing: border-box;
    overflow: hidden;
}

.internal_review .grid {
    grid-template-columns: 2fr 2fr;
    gap: 20px;
}

.project_dwl .grid {
    grid-template-columns: 3fr 4fr;
    gap: 20px;
}

section {
    width: 100%;
    margin-bottom: 40px;
}

/* 툴팁 */
.custom-tooltip-container {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 첫 줄만 보여주는 변형(2026-10-02) — 글에 줄바꿈(\n)이 있으면 첫 줄 뒤에서
   말줄임(…)하고, 첫 줄이 칸보다 길어도 같은 방식으로 한 줄에서 말줄임한다.
   기본형(nowrap)은 \n을 공백으로 합쳐 "1. 가 2. 나"처럼 이어 붙여 보여준다.

   - 글은 자식 요소(<span>)에 둔다. 그 자식에만 white-space: pre-line을 줘서 \n은 줄바꿈으로
     살리고 연속 공백은 접는다(MDN white-space). 컨테이너 자신은 normal로 두는 이유: pre-line을
     컨테이너에 주면 마크업의 들여쓰기·줄바꿈까지 줄바꿈으로 살아나 첫 줄이 빈 줄이 되어
     …만 보인다(2026-10-02 실제 화면에서 확인).
   - -webkit-line-clamp: 1  → 1줄을 넘으면 마지막 줄 끝에 …을 붙인다. display:-webkit-box와
     -webkit-box-orient:vertical이 짝이다(MDN line-clamp). 접두어 없는 line-clamp는
     MDN상 아직 일부 브라우저만 지원해서 프로젝트 다른 곳(알림 팝업)처럼 접두어 형태를 쓴다.
   - overflow-wrap: anywhere → 공백 없이 긴 한 덩어리 글도 줄바꿈될 수 있어야
     2번째 줄이 생겨 …이 붙는다. 없으면 가로로만 잘리고 …이 안 보인다.

   text-overflow는 가로 넘침에만 동작하므로 이 변형에서는 쓰지 않는다.
   말줄임 여부는 가로가 아니라 세로로 넘쳤는지(scrollHeight)로 판별한다 — js/common/ui/tooltip.js */
.custom-tooltip-container--first-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.custom-tooltip-container--first-line > * {
    white-space: pre-line;
}

.tooltip_custom {
    position: absolute;
    background-color: #ffffff;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 3px 12px 3px rgb(142 142 142 / 41%);
    z-index: 10000;
    width: 400px;
    white-space: pre-wrap;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px);
}

.tooltip_custom.show {
    opacity: 1;
    transform: translateY(0);
}

.tooltip_custom textarea {
    font-size: 14px;
    width: 100%;
    height: auto;
    background: none;
    border: none;
    color: #3e3e3e;
    resize: none;
    outline: none;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

/* 표준 (크롬·파이어폭스 최신) */
.form-control::placeholder {
    color: #8e99a3;
    opacity: 1;
}

/* WebKit: 크롬/사파리/오페라 */
.form-control::-webkit-input-placeholder {
    color: #8e99a3;
    opacity: 1;
}

/* 파이어폭스 */
.form-control::-moz-placeholder {
    color: #8e99a3;
    opacity: 1;
}
.form-control:-moz-placeholder {
    color: #8e99a3;
    opacity: 1;
}

/* IE 10+ */
.form-control:-ms-input-placeholder {
    color: #8e99a3;
}

/* Edge */
.form-control::-ms-input-placeholder {
    color: #8e99a3;
}