/*
 * event-funeral.css
 * 설명: 행사등록(Event Funeral) 페이지 전용 스타일 파일
 * 주요 목적 및 섹션 안내:
 *  - .event-funeral-page  : 페이지 전반 레이아웃 컨테이너(세로 스택, 가로 스크롤 허용)
 *  - .event-funeral-layout: 상단 3열(왼쪽 메인, 가운데, 오른쪽) 그리드 정의 및 전체 높이 지정
 *  - .event-bottom-area   : 하단의 별도 영역(예: 행사물품관리) 위치 조정용 그리드
 *  - .event-item-groupbox : 하단 물품관리 그룹박스 스타일(테두리/배경/패딩)
 *  - .event-funeral-left/.middle/.right : 각 컬럼 박스(내부 높이, 여백, box-sizing)
 *  - .event-middle-groupbox 등 : 그룹박스 공통 스타일(테두리/배경/패딩)
 *  - .event-middle-row, .event-funeral-row 등 : 각 행의 grid-template-columns로 라벨/입력 칸 구성
 *  - .list-table-scroll, .event-sub-grid : 물품관리 테이블의 높이/스크롤/헤더 스타일링
 *
 * 사용 지침(유의사항):
 *  - 상단 전체 너비/높이(.event-funeral-layout, .event-funeral-left/.middle/.right)를 변경하면
 *    내부 모든 그리드와 그룹박스 배치에 영향이 있으므로 동기화 필요
 *  - 특정 입력 칼럼 너비만 바꾸려면 해당 .event-middle-row에 추가 클래스를 부여하여
 *    그 클래스만 grid-template-columns를 오버라이드하는 방식을 권장
 *  - 그룹박스 높이를 고정하려면 .event-*-groupbox에 min-height/height, 내부 테이블은
 *    .list-table-scroll의 max-height로 스크롤 처리하세요
 */

.event-funeral-page,
.event-happy-page {
    display: flex;
    flex-direction: column;
    gap: 0.31rem;
    overflow-x: auto;
}

.event-funeral-layout,
.event-happy-layout {
    display: grid;
    grid-template-columns: 69.2rem 20.2rem 20.2rem;   /* 3개영역 사이즈*/
    gap: 0.31rem;
    height: 39.2rem;
    min-height: 39.2rem;
    width: 115.42rem;
    min-width: 115.42rem;
}

/* 하단의 행사물품관리 영역: 탭이 아닌 별도 그룹박스로 표시, 상단에서 약간 아래로 위치 */
.event-bottom-area {
    display: grid;
    grid-template-columns: 69.2rem 20.2rem 20.2rem; /* 부모 레이아웃과 동일한 컬럼 정의 */
    gap: 0.31rem;
    margin-top: 2rem; /* 살짝 더 아래로 이동 */
}

.event-item-groupbox {
    grid-column: 1 / 4; /* 왼쪽 끝에서 시작해 오른쪽 끝까지 확장 */
    width: auto;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px;
    display: grid;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.event-item-groupbox-title {
    color: #334155;
    font-weight: 700;
    font-size: 12px;
    background: #edf5ff;
    border: 1px solid #d6e4f5;
    border-radius: 4px;
    padding: 4px 8px;
}

.event-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.31rem;
}

.event-item-groupbox .list-table-scroll {
    max-height: 12rem; /* 물품관리 영역 높이 제한 */
    overflow: auto;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
}

.event-funeral-left,
.event-funeral-middle,
.event-funeral-right,
.event-happy-left,
.event-happy-middle,
.event-happy-right {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    padding: 0.31rem;
    box-sizing: border-box;
}

.event-funeral-left,
.event-happy-left {    /* 외곽박스*/
    height: 41.6rem;
    min-height: 41.6rem;
}

.event-funeral-middle,
.event-happy-middle {
    height: 41.6rem;
    min-height: 41.6rem;
    margin-left: 0.1rem;
}

.event-funeral-right,
.event-happy-right {
    height: 41.6rem;
    min-height: 41.6rem;
}

.event-middle-groupbox {
    border: 1px solid #dbe3ef;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.12rem 0.2rem;
    display: grid;
    gap: 0.2rem;
}

.event-middle-groupbox-title {
    color: #0b3ba7;
    font-weight: 700;
    padding-left: 0.1rem;
}

.event-middle-row {
    display: grid;
    grid-template-columns: 6.6rem 11.7rem;    /* 라벨 , 컬럼 */
    gap: 0.2rem;
    align-items: center;
    min-height: 1.69rem;
}

/* summary-amount: 외주총액 관련 핵심 합계 표시(공제총액, 실외주총액)
   - 글자를 굵게 하고 배경을 연하게 하여 시각적 강조를 제공
   - 입력은 readonly 상태로 렌더되며 num 클래스와 함께 사용됩니다 */
.summary-amount {
    font-weight: 700;
    background: #f8fafc; /* 연한 하늘색 계열 배경 */
}

/* 공제총액: 굵은 파란색 텍스트 */
.deduction-total-text {
    color: #2563eb;
}

/* 실외주총액: 굵은 빨간색 텍스트 */
.ftamt-total-text {
    color: #dc2626;
}

/* deduction-row: 수의부터 꽃장식(공제 항목)까지의 입력 컬럼 레이아웃을 별도로 조정
   - checkbox + 금액 입력 칸으로 구성되어 있음
   - 여기서 두번째 값(6rem)을 조정하면 금액 입력 칸 폭이 변경됩니다 */
.deduction-row .event-reception-inline {
    grid-template-columns: 1.9rem 9.7rem 1.9rem auto; /* 체크박스, 금액입력(6rem), 버튼, 잔여 */
}

.event-middle-row label {
    color: #111827;
    font-weight: 400;
    white-space: nowrap;
    text-align: right;
    padding-right: 0.2rem;
}

.event-middle-row input {
    width: 100%;
    min-width: 0;
    height: 1.62rem;
    border: 1px solid #5d5d5d;
    border-radius: 0;
    padding: 0 0.31rem;
    background: #ffffff;
    line-height: 1.2;
}

.event-middle-row .num {
    text-align: right;
}

.event-middle-row-paykbn .event-pay-inline {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.2rem;
    align-items: center;
    width: 100%;
}

.event-middle-row-paykbn .event-pay-kbn {
    width: 100%;
    min-width: 0;
    height: 1.62rem;
    border: 1px solid #5d5d5d;
    border-radius: 0;
    padding: 0 0.31rem;
    background: #ffffff;
    line-height: 1.2;
}

.event-middle-row-paykbn .event-pay-amt {
    width: 100%;
    min-width: 0;
}

.event-funeral-form,
.event-happy-form {
    display: grid;
    gap: 0.23rem;
    width: 69.8rem;
}

.event-funeral-row {
    display: grid;
    grid-template-columns: 6rem 16rem 4.2rem 16rem 4.2rem 16rem;
    gap: 0.31rem;
    align-items: center;
    min-height: 1.69rem;
}

.event-funeral-row-topdate {
    grid-template-columns: 6rem 16rem;
}

.event-funeral-row-maininfo {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-member-groupbox {
    border: 1px solid #dbe3ef;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.12rem 0.2rem;
    display: grid;
    gap: 0.23rem;
    width: calc(100% - 1.6rem);
}

.event-member-groupbox-title {
    color: #0b3ba7;
    font-weight: 700;
    padding-left: 0.1rem;
}

.event-reception-groupbox {
    border: 1px solid #dbe3ef;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.12rem 0.2rem;
    display: grid;
    gap: 0.23rem;
    width: 100%;
    width: calc(100% - 1.6rem);
}

.event-reception-groupbox-title {
    color: #0b3ba7;
    font-weight: 700;
    padding-left: 0.1rem;
}

.event-misc-groupbox {
    border: 1px solid #dbe3ef;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.12rem 0.2rem;
    display: grid;
    gap: 0.23rem;
    width: 100%;
    width: calc(100% - 1.6rem);
}

.event-misc-groupbox-title {
    color: #0b3ba7;
    font-weight: 700;
    padding-left: 0.1rem;
}

.event-funeral-row-membermeta-onecol {
    grid-template-columns: 6rem 100rem;
}
.event-funeral-row-membermeta {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-membermeta-detail {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-membermeta-phone {
    grid-template-columns: 6rem 16rem 6rem 16rem;
}

.event-funeral-row-membermeta-staff {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-membermeta-org {
    grid-template-columns: 6rem 16rem 0rem 6rem 16rem;
}

.event-member-with-help {
    display: grid;
    grid-template-columns: 7.5rem 1.9rem 6.36rem;
    gap: 0.12rem;
    width: 16rem;
}

.event-mainsearch-inline {
    display: grid;
    grid-template-columns: 13.94rem 1.9rem;
    gap: 0.16rem;
    width: 16rem;
}

.event-search-inline {
    display: grid;
    grid-template-columns: 13.94rem 1.9rem;
    gap: 0.16rem;
    width: 16rem;
}


.event-funeral-row-subinfo {
    grid-template-columns: 6rem 16rem;
}

.event-funeral-row-datesms {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-vendorlead {
    grid-template-columns: 6rem 16rem 6rem 16rem;
}

.event-funeral-row-startsms,
.event-funeral-row-endlunar {
    grid-template-columns: 6rem 16rem 0rem 6rem 16rem;
}

.event-funeral-row-timepair {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-locationgrave {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-time-inline {
    display: grid;
    grid-template-columns: 8.64rem 2.56rem auto 2.56rem auto;
    gap: 0.06rem;
    width: 16rem;
    justify-content: start;
    align-items: center;
}

.event-time-inline .event-time-date,
.event-time-inline .event-time-part {
    width: 100%;
}

.event-time-inline .event-time-part {
    padding: 0 0.05rem;
    height: 1.75rem;
    line-height: 1.9;
}

.event-time-inline .event-time-suffix {
    text-align: left;
    line-height: 1.75rem;
    white-space: nowrap;
    padding-left: 0.02rem;
}

.event-reception-inline {
    display: grid;
    /* 체크 / 코드입력(넓게) / 버튼(다른 서치 버튼과 동일: 1.9rem) / 이름(유연) */
    grid-template-columns: 1.9rem 10rem 1.9rem auto;
    gap: 0.12rem;
    width: 16rem;
}

.event-funeral-row-codeteam {
    grid-template-columns: 6rem 16rem 1.9rem 6rem 16rem 1.9rem;
}

.event-funeral-row-dispatch {
    grid-template-columns: 6rem 16rem 1.9rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-contact,
.event-funeral-row-deceased,
.event-funeral-row-relationcause {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-cause,
.event-funeral-row-vendor {
    grid-template-columns: 6rem 16rem 1.9rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-locationgrave {
    grid-template-columns: 6rem 16rem 6rem 16rem 6rem 16rem;
}

.event-funeral-row-address {
    grid-template-columns: 6rem 16rem 1.9rem 6rem 16rem;
}

.event-funeral-spacer {
    display: inline-block;
    width: 1.9rem;
    height: 1.62rem;
}

.event-funeral-row-membermeta-phone .event-funeral-spacer,
.event-funeral-row-membermeta-org .event-funeral-spacer,
.event-funeral-row-maininfo .event-funeral-spacer,
.event-funeral-row-vendorlead .event-funeral-spacer,
.event-funeral-row-locationgrave .event-funeral-spacer,
.event-funeral-row-timepair .event-funeral-spacer {
    width: 0;
}

.event-funeral-row label {
    color: #111827;
    font-weight: 400;
    white-space: nowrap;
    text-align: right;
    padding-right: 0.38rem;
    line-height: 1.2;
    align-self: center;
}

.event-funeral-row label.cash-kbn-label {
    font-size: 0.88em;
}

.event-funeral-row input,
.event-funeral-row select {
    width: 100%;
    min-width: 0;
    height: 1.62rem;
    border: 1px solid #5d5d5d;
    border-radius: 0;
    padding: 0 0.31rem;
    background: #ffffff;
    line-height: 1.2;
    align-self: center;
}

.event-funeral-row .num {
    text-align: right;
}

.event-funeral-row .grow {
    grid-column: span 5;
}

.event-funeral-row .memo-extend {
    width: calc(100% + 43px);
    max-width: none;
}

.event-funeral-row .w60 {
    width: 2.4rem;
}

.event-funeral-row .w80 {
    width: 3.68rem;
}

.event-funeral-row .w120 {
    width: 5.76rem;
}

.event-funeral-right {
    display: grid;
    grid-template-rows: repeat(4, auto);
    gap: 0.31rem;
}

.event-side-box {
    border: 1px solid #dbe3ef;
    background: #ffffff;
    padding: 0.31rem;
    min-height: 5.7rem;
}

.event-side-box h4 {
    color: #0b3ba7;
    font-weight: 700;
    margin-bottom: 0.31rem;
}

.event-side-box > div {
    line-height: 1.35;
}

.event-bottom-tab-box {
    border: 1px solid #dbe3ef;
    background: #ffffff;
    margin-top: 0.31rem;
}

.event-tab-header {
    display: flex;
    gap: 0.08rem;
    border-bottom: 1px solid #a8adb4;
    background: #c7c7c7;
    padding: 0.08rem 0.08rem 0;
}

.event-tab-header button {
    height: 1.54rem;
    min-width: 6.46rem;
    border: 1px solid #7f8590;
    border-bottom: 0;
    border-radius: 0.31rem 0.31rem 0 0;
    background: #efefef;
    padding: 0 0.54rem;
}

.event-tab-header button.active {
    background: #808000;
    color: #ffffff;
    font-weight: 700;
}

.event-tab-panel {
    padding: 0.15rem;
    background: #ffffff;
}

.event-tab-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.15rem;
    margin-bottom: 0;
}

.event-tab-toolbar button {
    height: 26px;
    min-width: 3.08rem;
    border: 1px solid #c9d5e4;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #334155;
    font-size: 12px;
    cursor: pointer;
}

.event-sub-grid {
    width: 100%;
    min-width: 100%;
    background: #ffffff;
    border-collapse: collapse;
    font-size: 11px;
}

.event-sub-grid th {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #dbe3ef;
    padding: 4px 6px;
    font-weight: 700;
    white-space: nowrap;
}

.event-sub-grid td {
    border: 1px solid #dbe3ef;
    padding: 2px 4px;
    white-space: nowrap;
}

.event-sub-grid tbody tr:hover td {
    background: #f8fafc;
}

.event-sub-grid td input,
.event-sub-grid td select {
    width: 100%;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 3px 7px;
    background: #ffffff;
    font-size: 12px;
    box-sizing: border-box;
}

/* 숫자 컬럼(수량·단가·금액·원가) 우측 정렬 */
.event-sub-grid th.num {
    text-align: right;
}
.event-sub-grid td input.num {
    text-align: right;
}

.event-sub-grid tr.selected td {
    background: #e0f2fe;
}

/* 물품 그리드 각 컬럼 너비 지정 (colgroup 기준) */
.event-sub-grid col.col-item-hakbn  { width: 10rem; }  /* 물품: select 드롭다운 */
.event-sub-grid col.col-item-hacode { width: 16rem; }
    
.event-sub-grid col.col-item-hacnt   { width: 8rem;  }  /* 수량 */
.event-sub-grid col.col-item-hacost  { width: 8rem;  }  /* 단가 */
.event-sub-grid col.col-item-haamt   { width: 8rem;  }  /* 금액 */
.event-sub-grid col.col-item-hwonka  { width: 8rem;  }  /* 원가 */
.event-sub-grid col.col-item-remark  { width: 58rem; }  /* 적요: 다른 컬럼 대비 3배 이상 */

.event-funeral-message {
    border: 1px solid #93c5fd;
    background: #eff6ff;
    padding: 0.23rem 0.46rem;
    color: #1e3a8a;
}

.event-funeral-page .help-btn {
    height: 1.62rem;
    min-width: 1.0rem; /* 버튼 폭 축소 */
    padding: 0 0.25rem;
    border: 1px solid #7f8590;
    border-radius: 0;
    background: #efefef;
}

/* event-reception-inline 내부의 서치 버튼을 다른 서치 버튼과 동일한 너비로 보정 */
.event-reception-inline .help-btn {
    min-width: 1.9rem !important;
    padding: 0 0.25rem;
}