/* ===================================================================
   view.css — 페이지(뷰) 공통 스타일 (견적서 양식 수정 / 견적서 입력 등)
   =================================================================== */

/* 페이지 상단 툴바 */
.quote-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.quote-toolbar h2 { font-size: 18px; color: var(--color-dark); }
.toolbar-btns { display: flex; gap: 8px; }

/* 버튼 */
.btn-save { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
            font-size: 14px; font-weight: 700; color: var(--color-white);
            background: var(--color-primary); border: none; border-radius: 6px; cursor: pointer; }
.btn-save:hover { background: rgba(37, 99, 235, 0.85); }
.btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
               font-size: 14px; font-weight: 700; color: var(--color-dark);
               background: var(--color-white); border: 1px solid rgba(30, 41, 59, 0.35);
               border-radius: 6px; cursor: pointer; }
.btn-outline:hover { background: rgba(30, 41, 59, 0.06); }
.btn-blue { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
            font-size: 14px; font-weight: 700; color: var(--color-white);
            background: var(--color-primary); border: none; border-radius: 6px; cursor: pointer; }
.btn-blue:hover { background: rgba(37, 99, 235, 0.85); }
.btn-blue:disabled { opacity: 0.6; cursor: default; }
.btn-dark { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
            font-size: 14px; font-weight: 700; color: var(--color-white);
            background: var(--color-dark); border: none; border-radius: 6px; cursor: pointer; }
.btn-dark:hover { background: rgba(30, 41, 59, 0.85); }

/* pdfme Designer 영역 (견적서 양식 수정) */
#pdfmeDesigner { width: 100%; height: calc(100vh - 150px); min-height: 500px;
                 border: 1px solid rgba(30, 41, 59, 0.1); overflow: hidden; }

/* 입력 영역 : 견적서 문서 느낌의 카드 (견적서 입력) */
.input-card { max-width: 1000px; margin: 0 auto 16px; padding: 28px 36px;
              background: var(--color-white); border: 1px solid rgba(30, 41, 59, 0.15);
              border-radius: 8px; box-shadow: 0 1px 5px rgba(30, 41, 59, 0.08); }
.input-card h3 { font-size: 15px; color: var(--color-dark); margin-bottom: 18px;
                 padding-bottom: 8px; border-bottom: 2px solid var(--color-primary); }

/* 비어있는 단독 텍스트 필드용 행 */
.field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.field-row > label { width: 130px; flex-shrink: 0;
                     font-size: 13px; font-weight: 700; color: var(--color-dark); }
.field-row input[type=text], .field-row input[type=date] {
    flex: 1; padding: 8px 12px; font-size: 13px; color: var(--color-dark);
    border: 1px solid rgba(30, 41, 59, 0.25); border-radius: 6px;
    font-family: inherit; }
.field-row input:focus { outline: none; border-color: var(--color-primary); }
.field-row input[type=date] { cursor: pointer; }
.field-row input[readonly] { background: rgba(30, 41, 59, 0.05); font-weight: 700; }

/* 양식의 표를 그대로 옮긴 문서형 표 : 채워진 칸은 고정, 빈 칸만 입력 */
.doc-table { border-collapse: collapse; margin: 0 auto 16px; width: 100%; }
.doc-table th { border: 1px solid rgba(30, 41, 59, 0.55); height: 38px; padding: 8px 10px;
                background: rgba(30, 41, 59, 0.09); font-size: 13px; font-weight: 700;
                color: var(--color-dark); }
.doc-table td { border: 1px solid rgba(30, 41, 59, 0.55); min-width: 60px; height: 38px; padding: 0; }
.doc-table td.fixed { background: rgba(30, 41, 59, 0.05); padding: 8px 10px; text-align: center;
                      font-size: 13px; font-weight: 700; color: var(--color-dark); }
.doc-table td.editable input { width: 100%; height: 100%; box-sizing: border-box;
                               border: none; background: rgba(37, 99, 235, 0.04);
                               padding: 8px 10px; font-size: 13px; color: var(--color-dark); }
.doc-table td.editable input:focus { outline: 2px solid var(--color-primary); outline-offset: -2px;
                                     background: var(--color-white); }

/* 행 추가/삭제 (품목 표 / 문구 표) */
.doc-table td.row-del { border: none; min-width: 0; width: 28px; padding: 0 4px; text-align: center; }
.btn-del-row { border: none; background: transparent; font-size: 15px; line-height: 1;
               color: rgba(30, 41, 59, 0.45); cursor: pointer; }
.btn-del-row:hover { color: var(--color-dark); }
.row-add-area { text-align: center; margin: -6px 0 16px; }
.btn-add-row { padding: 6px 16px; font-size: 13px; font-weight: 700; color: var(--color-primary);
               background: var(--color-white); border: 1px dashed var(--color-primary);
               border-radius: 6px; cursor: pointer; }
.btn-add-row:hover { background: rgba(37, 99, 235, 0.06); }

/* 저장/견적서 생성 버튼 영역 */
.make-area { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }

/* 미리보기 팝업(모달) */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000;
                 background: rgba(30, 41, 59, 0.55);
                 align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-dialog { width: min(880px, 94vw); height: 92vh; display: flex; flex-direction: column;
                background: var(--color-white); border-radius: 10px; padding: 16px 20px 20px;
                box-shadow: 0 8px 30px rgba(30, 41, 59, 0.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { font-size: 16px; color: var(--color-dark); }
.modal-head-btns { display: flex; align-items: center; gap: 8px; }
.btn-modal-close { border: none; background: transparent; font-size: 20px; line-height: 1;
                   color: rgba(30, 41, 59, 0.55); cursor: pointer; padding: 4px 8px; }
.btn-modal-close:hover { color: var(--color-dark); }
.modal-dialog iframe { flex: 1; width: 100%;
                       border: 1px solid rgba(30, 41, 59, 0.2); border-radius: 6px; }
/* 작은 모달 (비밀번호 변경 등 폼 팝업) */
.modal-dialog.modal-small { width: min(420px, 92vw); height: auto; }

/* 직인 이미지 업로드 (마이페이지) */
.stamp-box { flex: 1; min-width: 0; }
.stamp-view { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stamp-preview { width: 72px; height: 72px; object-fit: contain;
                 background: var(--color-white); border: 1px solid rgba(30, 41, 59, 0.2);
                 border-radius: 6px; }
.stamp-name { font-size: 13px; color: var(--color-dark); }
.stamp-view input[type=file] { font-size: 13px; color: var(--color-dark); }
.stamp-hint { font-size: 12px; color: rgba(30, 41, 59, 0.5); }
/* 모바일용 pdf.js 캔버스 미리보기 영역 (iframe PDF 미지원 브라우저 대체) */
#pdfViewerBox { display: none; flex: 1; min-height: 0; overflow: auto;
                border: 1px solid rgba(30, 41, 59, 0.2); border-radius: 6px;
                background: rgba(30, 41, 59, 0.06);
                -webkit-overflow-scrolling: touch; }
#pdfViewerBox .pdf-page-canvas { display: block; width: calc(100% - 2px); margin: 1px auto 8px;
                                 box-shadow: 0 1px 4px rgba(30, 41, 59, 0.25); }
#pdfViewerBox .pdf-loading { padding: 24px; text-align: center; color: var(--color-dark); }

/* 저장된 양식이 없을 때 안내 */
.no-template { padding: 40px 20px; text-align: center; color: var(--color-dark);
               border: 1px dashed rgba(30, 41, 59, 0.3); border-radius: 8px; }
.no-template a { color: var(--color-primary); font-weight: 700; }

/* ===== 메인 대시보드 ===== */
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.stat-tile { flex: 1; min-width: 180px; padding: 18px 20px;
             background: var(--color-white); border: 1px solid rgba(30, 41, 59, 0.15);
             border-radius: 8px; box-shadow: 0 1px 5px rgba(30, 41, 59, 0.08); }
.stat-label { margin-bottom: 6px; font-size: 13px; color: rgba(30, 41, 59, 0.6); }
.stat-value { font-size: 28px; font-weight: 700; color: var(--color-dark); }
.stat-unit { margin-left: 4px; font-size: 14px; font-weight: 400; color: rgba(30, 41, 59, 0.6); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card { padding: 18px 20px; min-width: 0;
             background: var(--color-white); border: 1px solid rgba(30, 41, 59, 0.15);
             border-radius: 8px; box-shadow: 0 1px 5px rgba(30, 41, 59, 0.08); }
.dash-card.wide { grid-column: 1 / -1; }
.dash-card h3 { margin-bottom: 12px; font-size: 14px; color: var(--color-dark); }
.dash-sub { margin-left: 6px; font-size: 12px; font-weight: 400; color: rgba(30, 41, 59, 0.5); }
.chart-box { position: relative; height: 240px; }

/* ===== 견적서 목록 ===== */
.list-table { width: 100%; border-collapse: collapse; }
.list-table th { padding: 11px 10px; border-bottom: 2px solid var(--color-dark);
                 font-size: 13px; font-weight: 700; color: var(--color-dark); }
.list-table td { padding: 11px 10px; border-bottom: 1px solid rgba(30, 41, 59, 0.12);
                 font-size: 13px; color: var(--color-dark); text-align: center; }
.list-table th.num, .list-table td.num { text-align: right; }
.list-table .col-check { width: 44px; text-align: center; }
/* 고객명은 넓게(남는 폭 전부) 왼쪽 정렬, 금액·견적일은 고정 폭으로 오른쪽에 모은다 */
.list-table th.col-customer, .list-table td.col-customer { text-align: left; }
.list-table .col-price { width: 160px; }
.list-table .col-date { width: 110px; }
.list-table tbody tr { cursor: pointer; }
.list-table tbody tr:hover { background: rgba(37, 99, 235, 0.05); }
.list-empty { padding: 36px 16px; text-align: center;
              font-size: 14px; color: rgba(30, 41, 59, 0.55); }
/* 목록 하단(페이징 위) 오른쪽 정렬 버튼 영역 */
.list-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.paging { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.paging button { min-width: 34px; padding: 7px 10px; font-size: 13px;
                 color: var(--color-dark); background: var(--color-white);
                 border: 1px solid rgba(30, 41, 59, 0.2); border-radius: 6px; cursor: pointer; }
.paging button:hover { background: rgba(37, 99, 235, 0.06); }
.paging button.cur { color: var(--color-white); background: var(--color-primary);
                     border-color: var(--color-primary); }
.paging button:disabled { opacity: 0.4; cursor: default; }

/* ===== 로그인 화면 (단독 페이지) ===== */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: rgba(30, 41, 59, 0.04); }
.login-card { width: min(400px, 92vw); padding: 40px 36px;
              background: var(--color-white); border: 1px solid rgba(30, 41, 59, 0.12);
              border-radius: 12px; box-shadow: 0 6px 24px rgba(30, 41, 59, 0.12); }
.login-logo { display: block; margin: 0 auto 28px; height: 40px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; margin-bottom: 6px;
                     font-size: 13px; font-weight: 700; color: var(--color-dark); }
.login-field input { width: 100%; padding: 11px 12px; font-size: 14px; color: var(--color-dark);
                     border: 1px solid rgba(30, 41, 59, 0.25); border-radius: 8px; }
.login-field input:focus { outline: none; border-color: var(--color-primary); }
.login-options { display: flex; align-items: center; gap: 6px; margin: 4px 0 18px;
                 font-size: 13px; color: var(--color-dark); cursor: pointer; }
.login-error { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px;
               background: rgba(220, 38, 38, 0.08); color: #dc2626; font-size: 13px; }
.btn-login { width: 100%; padding: 12px; font-size: 15px; font-weight: 700;
             color: var(--color-white); background: var(--color-primary);
             border: none; border-radius: 8px; cursor: pointer; }
.btn-login:hover { background: rgba(37, 99, 235, 0.85); }

/* ===== 모바일 반응형 (768px 이하) ===== */
@media (max-width: 768px) {
    /* 상단 툴바 : 제목과 버튼을 두 줄로 */
    .quote-toolbar { flex-wrap: wrap; gap: 8px; }
    .toolbar-btns { width: 100%; justify-content: flex-end; }

    /* 입력 카드 : 여백 축소, 넓은 표는 카드 안에서만 가로 스크롤 */
    .input-card { padding: 16px 12px; overflow-x: auto; }

    /* 단독 입력 필드 : 라벨을 입력창 위로 (세로 배치) */
    .field-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .field-row > label { width: auto; }
    /* iOS 는 16px 미만 input 포커스 시 화면을 확대하므로 16px 로 */
    .field-row input[type=text], .field-row input[type=date] { font-size: 16px; }

    /* 문서형 표 : 셀 축소 */
    .doc-table th { font-size: 12px; padding: 6px 4px; height: 34px; }
    .doc-table td { min-width: 44px; height: 34px; }
    .doc-table td.fixed { font-size: 12px; padding: 6px 4px; }
    .doc-table td.editable input { font-size: 14px; padding: 6px 4px; }

    /* 하단 버튼(목록으로/저장/생성) : 터치 타깃 확대 (화면 폭을 나눠 가짐) */
    .make-area .btn-blue, .make-area .btn-dark, .make-area .btn-outline {
        flex: 1; justify-content: center; padding: 12px 8px; }

    /* 미리보기 팝업 : 전체 화면 */
    .modal-dialog { width: 100vw; height: 100vh; border-radius: 0; padding: 10px 12px 12px; }

    /* pdfme Designer 영역 */
    #pdfmeDesigner { height: calc(100vh - 170px); }

    /* 메인 대시보드 : 차트 1열 배치 */
    .dash-grid { grid-template-columns: 1fr; }
    .chart-box { height: 200px; }
}