@charset "utf-8";

/*
font-family: 'Paperlogy'; font-weight:100;  Thin
font-family: 'Paperlogy'; font-weight:200;  ExLight
font-family: 'Paperlogy'; font-weight:300;  Light
font-family: 'Paperlogy'; font-weight:400;  Regular
font-family: 'Paperlogy'; font-weight:500;  Medium
font-family: 'Paperlogy'; font-weight:600;  SemiBold
font-family: 'Paperlogy'; font-weight:700;  Bold
font-family: 'Paperlogy'; font-weight:800;  ExBold
font-family: 'Paperlogy'; font-weight:900;  Black
*/


/* **** Common Reset **** */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'GmarketSansTTF';
    box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    word-break: break-all;
}

li, p, span, strong, a {
    color: inherit;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    overflow-x: hidden;
}

body.hide {
    overflow: hidden;
}

input, select, img {
    vertical-align: middle;
}

img {
    border: 0;
    max-width: 100%;
    max-height: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table caption {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    display: block !important;
    width: 0px !important;
    height: 0px !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

button, input, optgroup, select, textarea {
    margin: 0;
    padding: 0;
    border: 1px solid;
    box-sizing: border-box;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    vertical-align: middle
}

button, input, select {
    display: inline-block
}

button, input {
    overflow: visible
}

input[type=search], input[type=text] {
    -webkit-border-radius: 0;
    -webkit-appearance: none
}

input[type=search] {
    outline-offset: -2px;
    -webkit-appearance: none
}

input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

input[type=file] {
    border: none
}

input[type=file]::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    border: 1px solid #bbb;
    background: #e0e0e0;
    box-shadow: none
}

input[type=checkbox], input[type=radio] {
    padding: 0;
    border: none
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    overflow: visible;
    border-color: transparent;
    background-color: transparent;
    cursor: pointer
}

textarea {
    display: block;
    overflow: auto;
    resize: vertical
}

input[disabled] {
    background-color: #ebebeb
}

select:disabled {
    background-color: #ebebeb
}

select {
    border: 0;
    position: relative;
    /*background: url(../img/selecticon.png) no-repeat right 10px center;*/
    padding: 0 30px 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

[hidden] {
    display: none !important
}

.clear {
    clear: both;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.blind {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    display: inline-block !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

a {
    display: inline-block;
    text-decoration: none;
}

.inner {
    width: 1400px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    line-height: 1.2;
}

.header .inner {
    position: relative;
    gap: 25px;
    height: 110px;
    display: flex;
    align-items: center;
}

.header .inner h1 {
    max-width: calc(100% - 100px);
}

.header .inner p {
    font-size: 28px;
    font-weight: 500;
    color: #3f3f3f;
}

.notice-area {
    background: #f5fcfe;
}

.notice-area .inner {
    padding: 20px 0;
}

.notice-area .textarea {
    padding: 140px 0 0 120px;
    height: 500px;
    background: url(../img/notice-area_bg.png) no-repeat center center;
}

.notice-area .textarea > p {
    font-family: 'jalnan';
    color: #fff;
    font-size: 55px;
    width: 50%;
    margin: 0;
    text-align: left;
    line-height: 1.4;
}
.inner-p{
    font-size:20px; display: block; text-align: center; width: 80%;
}

.notice-area .textarea > span {
    line-height: 30px;
    position: relative;
    max-width: 545px;
    margin-top: 20px;
    display: block;
    padding-left: 25px;
    font-size: 18px;
    color: #fdff30;
    font-family: 'S-CoreDream';
    font-weight: 300;
}

.notice-area .textarea > span > span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
}

.notice-area .textarea > span > b {
    display: inline-block;
    position: relative;
    font-family: 'S-CoreDream';
    font-weight: 300;
    font-size: 18px;
}

.notice-area .textarea > span > b:after {
    content: '';
    background: #fdff30;
    width: 3px;
    height: 3px;
    top: -1px;
    left: calc(50% - 1px);
    position: absolute;
}

.info-aera {
    background: #fafafa;
    padding: 87px 0 20px;
}

.info-aera .inner {
    padding: 55px 0 85px;
}

.info-aera .tabarea {
    position: relative;
    margin-bottom: 20px;
}

.info-aera .tabarea:after {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #e5e5e5;
}

.info-aera .tabarea > p {
    position: relative;
    z-index: 5;
    border-radius: 31px;
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 61px;
    background: #dcdcdc;
}

.info-aera .tabarea a {
    font-size: 22px;
    text-align: center;
    height: 61px;
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 23px;
}

.info-aera .tabarea a.on {
    text-align: left;
    justify-content: flex-start;
    border-radius: 31px 0 31px 31px;
    color: #fff;
    background: #0055a7 url(../img/w_icon04.png) no-repeat right 25px center;
}

.info-aera .tabarea a:last-child.on {
    border-radius: 31px 31px 31px 0;
}

.info-aera .text {
    margin-top: 90px;
    text-align: center;
    font-size: 32px;
    color: #1c1c1c;
    font-weight: 700;
}

.info-aera .img {
    padding: 50px 20px;
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 25px;
    width: 890px;
    max-width: 100%;
    margin: 40px auto 65px;
    text-align: center;
}

.info-aera .r_button > a {
    color: #fff;
    margin: 0 auto;
    width: 250px;
    border-radius: 30px;
    background: #f23b3b;
    height: 60px;
    text-align: center;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menubtn {
    display: none;
    position: absolute;
    right: 10px;
    top: 30px;
}

.blackwin {
    display: none;
    z-index: 444;
    position: fixed;
    width: 100%;
    background: #000;
    opacity: 0.5;
    height: calc(100% - 70px);
    left: 0;
    top: 100px;
}

.mobile-menu {
    display: none;
    padding-top: 20px;
    width: 50%;
    top: 100px;
    right: 0;
    z-index: 555;
    height: calc(100% - 70px);
    position: fixed;
    background: #f2f6fc;
}

.mobile-menu.active, .blackwin.active {
    display: block;
}

.mobile-menu p {
    position: relative;
    height: 0;
}

.mobile-menu p > a {
    position: absolute;
    top: -10px;
    left: -30px;
}

.mobile-menu ul {
    padding: 0 20px;
}

.mobile-menu ul a {
    padding: 10px;
    align-items: center;
    gap: 10px;
    display: flex;
    height: 60px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.mobile-menu ul a.on {
    border-radius: 20px;
    color: #fff;
    background: #0055a7 url(../img/w_icon04.png) no-repeat right 25px center;
}

.mobile-menu ul a.on > span {
    display: none;
}

.mobile-menu ul a span {
    margin-top: -5px;
}

.footer {
    border-top: 1px solid #e6e6e6;
}

.footer .inner {
    padding: 50px 0;
}

.footer .inner p {
    text-align: center;
    font-size: 19px;
    color: #3f3f3f;
    font-family: 'Paperlogy';
    font-weight: 400;
}

@media screen and (max-width: 1024px) {
    .header .inner {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
    }

    .notice-area .textarea {
        padding: 40px 20px !important; /* 위아래 40, 좌우 20으로 균형 조절 */
        height: auto !important;       /* 고정 높이 제거 (텍스트 양에 따라 늘어남) */
        background-image: none !important; /* 배경 이미지가 글자를 가린다면 제거 혹은 조정 */
        background-color: #0055a7 !important; /* 배경색으로 대체 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;            /* 모바일은 중앙 정렬이 가독성에 좋음 */
        border-radius: 25px;
    }

    .notice-area .textarea > p {
        font-size: 28px !important;    /* 폰트 사이즈 축소 */
        line-height: 1.3;
        margin-bottom: 15px;
        word-break: keep-all;          /* 단어 단위 줄바꿈으로 가독성 향상 */
        width: 100%;
        text-align: left;
    }

    .notice-area .textarea > span {
        max-width: 100% !important;
        padding-left: 0 !important;    /* 과도한 왼쪽 여백 제거 */
        font-size: 15px !important;
        /*line-height: 1.5 !important;*/
        margin: 0 auto;                /* 중앙 정렬 */
        word-break: break-all;         /* 긴 URL 주소 때문에 자동 줄바꿈 허용 */
    }

    /* ※ 기호 위치 조정 */
    .notice-area .textarea > span > span {
        position: static !important;   /* absolute 해제하여 흐름에 맞게 배치 */
        display: inline-block;
        margin-right: 5px;
    }

    .info-aera {
        padding: 0;
        margin: 10px;
    }

    .menubtn {
        display: block;
    }

    .header .inner {
        height: 150px;
        gap: 20px;
    }

    .info-aera .tabarea {
        /*display: none;*/
    }
    .info-aera .tabarea a{
        font-size: 13px;
    }

    .info-aera .text {
        margin-top: 0;
    }
}
.report-list-table { width: 100%; table-layout: fixed; border-top: 2px solid #0055a7; border-collapse: collapse; }
.report-list-table th { background: #f8f9fa; padding: 12px 5px; border-bottom: 1px solid #ddd; font-weight: 600; }
.report-list-table td { padding: 15px 5px; border-bottom: 1px solid #ddd; text-align: center; vertical-align: middle; }

/* [Web] 날짜 3줄 정렬 스타일 */
.date-container { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.date-container .year-txt { font-size: 11px; color: #888; display: block; }
.date-container .day-txt { font-size: 14px; font-weight: 700; color: #222; display: block; }
.date-container .time-txt { font-size: 11px; color: #666; display: block; }


/* 상태별 배지 색상 */
.status-badge.blue { background-color: #0055a7; color: #fff; }   /* 수거완료 */
.status-badge.red { background-color: #f23b3b; color: #fff; }    /* 처리불가 */
.status-badge.orange { background-color: #ff9800; color: #fff; } /* 신고취소 */
.status-badge.gray { background-color: #888888; color: #fff; }   /* 진행중 */

.status-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {

    .info-aera .col-sm-6 {
        flex: 0 0 100% !important;
    }

    .header .inner p {
        font-size: 17px;
    }

    .notice-area .textarea > p {
        font-size: 30px;
        text-align: center;
    }

    .inner-p{
        font-size:20px; display: block; text-align: center; width: 100%;
    }

    .report-info-box {
        max-width: 90%; /* 양옆 여백 확보 */
        padding: 15px;
        margin: 15px auto;
    }

    .info-item {
        flex-direction: column; /* 모바일은 세로로 쌓기 */
        align-items: center; /* 세로로 쌓았을 때도 중앙 정렬 */
        text-align: center;
        gap: 2px;
    }

    .info-item .label::after {
        display: none; /* 세로 배치 시 콜론 숨김 */
    }

    .info-aera .text {
        display: none !important;
    }

    .info-aera .inner {
        padding: 0;
    }

    .info-aera .img, .report-info-box {
        margin: 15px 0 15px 0 !important;
    }

    .footer .inner p {
        font-size: 12px;
    }

    .notice-area .textarea > span {
        font-size: 16px;
        text-align: left;
    }

    .info-aera .mt-2.border {
        width: 290px !important;
        height: 250px !important;
    }

    .header .inner {
        position: relative;
        padding: 15px 20px;
    }

    /* p태그만 독립적으로 가로 꽉 차게 중앙 정렬 */
    .header .inner p {
        display: block;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-top: 15px;

        background-color: #f8f9fa;
        color: #222;
        font-size: 14px;
        font-weight: 700;
        text-align: center;

        padding: 12px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;

        letter-spacing: -0.5px;
        word-break: keep-all;
    }

    #logo {
        display: inline-block;
    }

    .menubtn {
        position: absolute;
        right: 20px;
        top: 30px;
    }

    /* 테이블 헤더 숨기기 */
    .report-list-table thead {
        display: none;
    }

    /* 테이블 행을 카드 형태로 변경 */
    .report-list-table,
    .report-list-table tbody,
    .report-list-table tr,
    .report-list-table td {
        display: block;
        width: 100% !important;
    }

    .report-list-table tr {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        padding: 10px;
    }

    .report-list-table td {
        text-align: left !important;
        padding: 8px 10px 8px 100px !important; /* 라벨 공간 확보 */
        position: relative;
        border: none !important;
        font-size: 14px;
        min-height: 35px;
    }

    /* 이미지와 똑같이 왼쪽 라벨 생성 (연번, 신고일시 등) */
    .report-list-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 80px;
        font-weight: 700;
        color: #333;
    }



    .address-cell br {
        display: none;
    }
	/* 1. 테이블 구조 해제 */
	.report-list-table thead { display: none !important; } /* 헤더 완전 숨김 */
	.report-list-table,
	.report-list-table tbody,
	.report-list-table tr,
	.report-list-table td { display: block !important; width: 100% !important; }

	/* 2. 각 행을 카드 형태로 전환 */
	.report-list-table tr {
		margin-bottom: 15px !important;
		border: 1px solid #ddd !important;
		border-radius: 12px !important;
		background: #fff !important;
		padding: 10px 15px !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.03);
	}

	/* 3. 셀 레이아웃 (항목명 : 데이터) 수평 배치 */
	.report-list-table td {
		display: flex !important;
		text-align: left !important;
		border-bottom: 1px solid #f0f0f0 !important;
		align-items: center; /* 세로 중앙 정렬 */
		min-height: auto !important;
	}
	.report-list-table td:last-child { border-bottom: none !important; }

	/* 4. 모바일 왼쪽 라벨 (data-label) */
	.report-list-table td::before {
		content: attr(data-label);
		flex: 0 0 90px !important; /* 라벨 너비 고정 */
		font-weight: 700 !important;
		color: #333 !important;
		font-size: 14px !important;
		margin-right: 10px;
	}

	/* 5. ⭐ 날짜 컨테이너 모바일에서 1줄로 강제 해제 */
	.date-container {
		flex-direction: row !important; /* 가로로 변경 */
		display: inline-flex !important;
		gap: 5px !important;
		align-items: center !important;
	}

	.date-container .year-txt,
	.date-container .day-txt,
	.date-container .time-txt {
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #555 !important;
		display: inline !important;
	}
	.date-container .year-txt::after { content: "."; } /* 연도 뒤 마침표 */

	/* 6. 배지 및 기타 요소 모바일 최적화 */
	.status-badge {
		width: auto !important;
		max-width: none !important;
		min-width: 100px;
		padding: 5px 7px !important;
		height: auto !important;
		font-size: 14px !important;
		margin: 0 !important;
	}

	.address-cell { justify-content: flex-start; }


}


/* 1. 두 개의 업로드 영역(세트)을 좌우로 배치 */
.info-aera .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px;
    margin: 0 !important;
}

.info-aera .col-sm-6 {
    flex: 1 !important; /* 좌우 50%씩 차지 */
    min-width: 300px; /* 모바일에서 깨지지 않는 최소 너비 */
    padding: 0 !important;
}

.input-group-file {
    display: flex !important;
    flex-direction: row !important; /* 강제 가로 정렬 */
    align-items: stretch !important;
    width: 100% !important;
}

.input-group-file label,
.input-group-file input[type="text"],
.input-group-file .btn-outline-default {
    height: 40px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap; /* 글자 줄바꿈 방지 */
}

/* 촬영/업로드 버튼 */
.input-group-file label {
    flex: 0 0 auto;
    padding: 0 15px;
    border-radius: 4px 0 0 4px !important; /* 왼쪽 모서리만 둥글게 */
}

/* 파일명 입력창 (중앙에서 나머지 공간 다 차지) */
.input-group-file input[type="text"] {
    flex: 1 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}

/* 삭제 버튼 */
.input-group-file .btn-outline-default {
    flex: 0 0 auto;
    padding: 0 15px;
    border: 1px solid #ccc !important;
    border-radius: 0 4px 4px 0 !important; /* 오른쪽 모서리만 둥글게 */
    background: #fff;
    color: #333;
}

/* 3. 미리보기 이미지 박스 */
.info-aera .mt-2.border {
    width: 160px;
    height: 120px;
}


.table-write td {
    vertical-align: middle !important; /* 세로 중앙 */
}

/* 2. 이미지 박스(미리보기) 설정 */
.info-aera .mt-2.border {
    width: 360px; /* 기존보다 사이즈 확대 */
    height: 290px; /* 4:3 비율로 보기 좋게 확대 */
    margin: 15px auto 0 !important; /* 상단 여백 15px, 좌우 auto로 중앙 정렬 */
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important; /* 조금 더 부드러운 곡선 */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. 이미지 자체 스타일 */
.info-aera .mt-2.border img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 5px;
}

/* 4. 사진 촬영 안내 문구도 중앙 정렬 (선택사항) */
.info-aera td > p.text-red {
    text-align: center !important;
    margin-top: 15px !important;
}

.report-info-box {
    padding: 25px 20px;
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 25px;
    width: 890px;
    max-width: 100%;
    margin: 40px auto 65px;
    text-align: center;
}

.info-item {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 15px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item .label {
    font-weight: 700;
    color: #0055a7;
    flex-shrink: 0;
}

.info-item .label::after {
    content: ":";
    margin-left: 4px;
}

.info-item .desc {
    color: #444;
    word-break: keep-all;
}
/* PC용 문구 숨김 처리 (모바일) */
@media screen and (max-width: 1024px) {
    .header .inner p.pc-title-text {
        display: none !important;
    }

    .header .inner {
        height: 100px !important; /* 헤더 높이를 줄여서 컴팩트하게 */
        justify-content: center;
    }
}

/* 새로운 통합 타이틀 바 스타일 */
.mobile-top-bar {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-top-bar {
        display: block;
        background: linear-gradient(to right, #0055a7, #004586); /* 세련된 그라데이션 */
        padding: 12px 0;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    }

    .mobile-top-bar .inner {
        display: flex;
        justify-content: space-between; /* 시스템명과 페이지명을 양끝으로 */
        align-items: center;
        padding: 0 15px;
    }

    /* 왼쪽: 시스템 이름 (작게) */
    .mobile-top-bar .system-name {
        color: rgba(255,255,255,0.8);
        font-size: 16px;
        font-weight: 400;
    }

    /* 오른쪽: 현재 메뉴 이름 (강조) */
    .mobile-top-bar .page-name {
        color: rgba(255,255,255,0.8);
        font-size: 16px;
        font-weight: 400;
    }

    .mobile-top-bar .page-name::before {
        content: "|";
        margin-right: 8px;
        color: rgba(255,255,255,0.3);
    }
}
@media screen and (max-width: 1024px) {
    /* 1. 탭 영역: 패딩 최소화 */
    .info-aera .tabarea {
        padding: 0 2px; /* 여백을 더 줄여서 박스 너비 확보 */
    }

    .info-aera .tabarea > p {
        border-radius: 8px;
        height: 45px;
        width: 100%;
        display: flex;
    }

    /* 2. 각 버튼: 글자 간격(letter-spacing) 조절이 핵심 */
    .info-aera .tabarea a {
        font-size: 12px;       /* 13px에서 12px로 살짝만 더 축소 */
        letter-spacing: -1px;  /* 글자 사이 간격을 좁혀서 한 줄 유지 */
        height: 45px;
        width: calc(100% / 3);
        padding: 0 !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        word-break: keep-all;
        white-space: nowrap;   /* 강제로 줄바꿈 금지 */
    }

    /* 3. 활성화된 버튼 */
    .info-aera .tabarea a.on {
        background-color: #0055a7 !important;
        background-image: none !important;
        border-radius: 8px 0 8px 8px;
        color: #fff;
        gap: 4px; /* 아이콘과 글자 사이 간격을 최소화 */
    }

    /* 4. 아이콘: 마진과 크기 미세 조정 */
    .info-aera .tabarea a.on::before {
        content: '';
        display: inline-block;
        width: 14px;  /* 16px에서 14px로 축소 */
        height: 14px;
        background: url(../img/w_icon04.png) no-repeat center center;
        background-size: contain;
        flex-shrink: 0;
        margin:0 6px 0 6px; /* margin: 6px 대신 필요한 오른쪽 여백만 줌 */
    }

    .info-aera .tabarea a:last-child.on {
        border-radius: 8px 8px 8px 0;
    }
}