글씨크기 조정

frontend/components/pop/PopProductionPanel.tsx

@@ -124,17 +124,17 @@ export function PopProductionPanel({
       return (
         <div className="pop-step-form-section">
           <h4 className="pop-step-form-title">점검 항목</h4>
-          <div style={{ display: "flex", flexDirection: "column", gap: "var(--spacing-sm)" }}>
-            <label style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)" }}>
-              <input type="checkbox" disabled={isCompleted} />
+          <div className="pop-checkbox-list">
+            <label className="pop-checkbox-label">
+              <input type="checkbox" className="pop-checkbox" disabled={isCompleted} />
               <span>장비 상태 확인</span>
             </label>
-            <label style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)" }}>
-              <input type="checkbox" disabled={isCompleted} />
+            <label className="pop-checkbox-label">
+              <input type="checkbox" className="pop-checkbox" disabled={isCompleted} />
               <span>안전 장비 착용</span>
             </label>
-            <label style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)" }}>
-              <input type="checkbox" disabled={isCompleted} />
+            <label className="pop-checkbox-label">
+              <input type="checkbox" className="pop-checkbox" disabled={isCompleted} />
               <span>작업 환경 확인</span>
             </label>
           </div>
@@ -177,14 +177,12 @@ export function PopProductionPanel({
             <span className="pop-badge pop-badge-primary">{workOrder.processName}</span>
           </div>
           <div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-md)" }}>
-            <div style={{ fontSize: "var(--text-xs)", color: "rgb(var(--text-muted))" }}>
-              <span>{formatDate(currentDateTime)}</span>
-              <span style={{ marginLeft: "var(--spacing-sm)", color: "rgb(var(--neon-cyan))", fontWeight: 700 }}>
-                {formatTime(currentDateTime)}
-              </span>
+            <div className="pop-panel-datetime">
+              <span className="pop-panel-date">{formatDate(currentDateTime)}</span>
+              <span className="pop-panel-time">{formatTime(currentDateTime)}</span>
             </div>
             <button className="pop-icon-btn" onClick={onClose}>
-              <X size={16} />
+              <X size={20} />
             </button>
           </div>
         </div>

frontend/components/pop/styles.css

@@ -142,9 +142,10 @@
     line-height: 1.5;
     color: rgb(var(--text-primary));
     background: rgb(var(--bg-deepest));
-    min-height: 100vh;
-    min-height: 100dvh;
+    height: 100vh;
+    height: 100dvh;
     overflow-x: hidden;
+    overflow-y: auto;
     -webkit-font-smoothing: antialiased;
     position: relative;
 }
@@ -197,8 +198,7 @@
 .pop-app {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
-    min-height: 100dvh;
+    min-height: 100%;
     padding: var(--spacing-sm);
     padding-bottom: calc(60px + var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
 }
@@ -209,7 +209,9 @@
     border: 1px solid rgb(var(--border));
     border-radius: var(--radius-lg);
     margin-bottom: var(--spacing-sm);
-    position: relative;
+    position: sticky;
+    top: 0;
+    z-index: 100;
     overflow: hidden;
 }
 
@@ -227,8 +229,8 @@
 .pop-top-bar {
     display: flex;
     align-items: center;
-    padding: var(--spacing-sm) var(--spacing-md);
-    gap: var(--spacing-md);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    gap: var(--spacing-sm);
 }
 
 .pop-top-bar.row-1 {
@@ -243,8 +245,8 @@
 .pop-datetime {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
-    font-size: var(--text-xs);
+    gap: var(--spacing-xs);
+    font-size: var(--text-2xs);
 }
 
 .pop-date {
@@ -254,7 +256,7 @@
 .pop-time {
     color: rgb(var(--neon-cyan));
     font-weight: 700;
-    font-size: var(--text-sm);
+    font-size: var(--text-xs);
 }
 
 /* 생산유형 버튼 */
@@ -264,12 +266,12 @@
 }
 
 .pop-type-btn {
-    padding: var(--spacing-xs) var(--spacing-md);
+    padding: 4px var(--spacing-sm);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgb(var(--border));
     border-radius: var(--radius-md);
     color: rgb(var(--text-muted));
-    font-size: var(--text-xs);
+    font-size: var(--text-2xs);
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-fast);
@@ -291,12 +293,13 @@
 .pop-filter-btn {
     display: flex;
     align-items: center;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-sm) var(--spacing-md);
+    gap: 2px;
+    padding: 4px var(--spacing-sm);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgb(var(--border));
     border-radius: var(--radius-md);
     color: rgb(var(--text-secondary));
+    font-size: var(--text-2xs);
     font-size: var(--text-xs);
     font-weight: 500;
     cursor: pointer;
@@ -343,6 +346,9 @@
     border-radius: var(--radius-lg);
     overflow: hidden;
     margin-bottom: var(--spacing-sm);
+    position: sticky;
+    top: 90px;
+    z-index: 99;
 }
 
 .pop-status-tab {
@@ -395,7 +401,7 @@
 /* ==================== 메인 콘텐츠 ==================== */
 .pop-main-content {
     flex: 1;
-    overflow-y: auto;
+    min-height: 0;
 }
 
 .pop-work-list {
@@ -675,6 +681,7 @@
     align-items: center;
     gap: 4px;
     padding: 4px 8px;
+    font-size: var(--text-2xs);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgb(var(--border));
     border-radius: var(--radius-sm);
@@ -851,10 +858,10 @@
     align-items: center;
     justify-content: center;
     gap: var(--spacing-sm);
-    padding: var(--spacing-sm) var(--spacing-lg);
+    padding: var(--spacing-md) var(--spacing-lg);
     border: 1px solid transparent;
     border-radius: var(--radius-md);
-    font-size: var(--text-xs);
+    font-size: var(--text-sm);
     font-weight: 600;
     cursor: pointer;
     transition: all var(--transition-fast);
@@ -1105,8 +1112,9 @@
     top: 0;
     right: 0;
     bottom: 0;
+    left: 0;
     width: 100%;
-    max-width: 600px;
+    max-width: none;
     background: rgb(var(--bg-primary));
     display: flex;
     flex-direction: column;
@@ -1133,11 +1141,29 @@
 }
 
 .pop-slide-panel-title {
-    font-size: var(--text-lg);
+    font-size: var(--text-xl);
     font-weight: 700;
     color: rgb(var(--text-primary));
 }
 
+/* 슬라이드 패널 날짜/시간 */
+.pop-panel-datetime {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.pop-panel-date {
+    font-size: var(--text-sm);
+    color: rgb(var(--text-muted));
+}
+
+.pop-panel-time {
+    font-size: var(--text-base);
+    font-weight: 700;
+    color: rgb(var(--neon-cyan));
+}
+
 .pop-badge {
     padding: 2px 8px;
     border-radius: var(--radius-full);
@@ -1174,7 +1200,7 @@
 
 .pop-work-steps-header {
     padding: var(--spacing-md);
-    font-size: var(--text-xs);
+    font-size: var(--text-sm);
     font-weight: 600;
     color: rgb(var(--text-muted));
     border-bottom: 1px solid rgb(var(--border));
@@ -1239,7 +1265,7 @@
 }
 
 .pop-work-step-name {
-    font-size: var(--text-xs);
+    font-size: var(--text-sm);
     font-weight: 500;
     color: rgb(var(--text-primary));
     white-space: nowrap;
@@ -1248,13 +1274,13 @@
 }
 
 .pop-work-step-time {
-    font-size: var(--text-2xs);
+    font-size: var(--text-xs);
     color: rgb(var(--text-muted));
 }
 
 .pop-work-step-status {
-    font-size: var(--text-2xs);
-    padding: 2px 6px;
+    font-size: var(--text-xs);
+    padding: 3px 8px;
     border-radius: var(--radius-sm);
 }
 
@@ -1288,14 +1314,14 @@
 }
 
 .pop-step-title {
-    font-size: var(--text-lg);
+    font-size: var(--text-xl);
     font-weight: 700;
     color: rgb(var(--text-primary));
     margin-bottom: var(--spacing-xs);
 }
 
 .pop-step-description {
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
     color: rgb(var(--text-muted));
 }
 
@@ -1311,20 +1337,20 @@
     align-items: center;
     justify-content: center;
     gap: var(--spacing-sm);
-    padding: var(--spacing-md);
+    padding: var(--spacing-md) var(--spacing-lg);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgb(var(--border));
     border-radius: var(--radius-md);
     color: rgb(var(--text-secondary));
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-fast);
 }
 
 .pop-time-control-btn svg {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
 }
 
 .pop-time-control-btn:hover:not(:disabled) {
@@ -1358,7 +1384,7 @@
 }
 
 .pop-step-form-title {
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
     font-weight: 600;
     color: rgb(var(--text-primary));
     margin-bottom: var(--spacing-md);
@@ -1374,20 +1400,53 @@
 
 .pop-form-label {
     display: block;
-    font-size: var(--text-xs);
+    font-size: var(--text-sm);
     font-weight: 500;
     color: rgb(var(--text-secondary));
     margin-bottom: var(--spacing-xs);
 }
 
+/* 체크박스 리스트 */
+.pop-checkbox-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.pop-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: var(--text-base);
+    color: rgb(var(--text-primary));
+    cursor: pointer;
+}
+
+.pop-checkbox {
+    width: 20px;
+    height: 20px;
+    accent-color: rgb(var(--neon-cyan));
+    cursor: pointer;
+}
+
+.pop-checkbox:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.pop-checkbox-label:has(.pop-checkbox:disabled) {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 .pop-input {
     width: 100%;
-    padding: var(--spacing-sm) var(--spacing-md);
+    padding: var(--spacing-md);
     background: rgba(var(--bg-tertiary), 0.5);
     border: 1px solid rgb(var(--border));
     border-radius: var(--radius-md);
     color: rgb(var(--text-primary));
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
     transition: all var(--transition-fast);
 }
 
@@ -1441,12 +1500,12 @@
 }
 
 .pop-work-order-info-item .label {
-    font-size: var(--text-2xs);
+    font-size: var(--text-xs);
     color: rgb(var(--text-muted));
 }
 
 .pop-work-order-info-item .value {
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
     font-weight: 500;
     color: rgb(var(--text-primary));
 }
@@ -1634,9 +1693,9 @@
 
 /* 헤더 인라인 테마 토글 버튼 */
 .pop-theme-toggle-inline {
-    width: 32px;
-    height: 32px;
-    margin-left: var(--spacing-sm);
+    width: 26px;
+    height: 26px;
+    margin-left: var(--spacing-xs);
     border-radius: var(--radius-md);
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgb(var(--border));
@@ -1656,8 +1715,8 @@
 }
 
 .pop-theme-toggle-inline svg {
-    width: 18px;
-    height: 18px;
+    width: 14px;
+    height: 14px;
 }
 
 /* ==================== 아이콘 버튼 ==================== */
@@ -1722,7 +1781,144 @@
     }
     
     .pop-slide-panel-content {
-        max-width: 100%;
+        max-width: none;
+        left: 0;
+    }
+}
+
+/* 태블릿 이상 (768px+) - 폰트 크기 증가 */
+@media (min-width: 768px) {
+    /* 상태 탭 sticky 위치 조정 */
+    .pop-status-tabs {
+        top: 100px;
+    }
+    
+    /* 헤더 */
+    .pop-top-bar {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+        gap: var(--spacing-md);
+    }
+    
+    .pop-datetime {
+        font-size: var(--text-xs);
+    }
+    
+    .pop-time {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-type-btn {
+        font-size: var(--text-xs);
+        padding: var(--spacing-xs) var(--spacing-md);
+    }
+    
+    .pop-filter-btn {
+        font-size: var(--text-xs);
+        padding: var(--spacing-xs) var(--spacing-md);
+    }
+    
+    .pop-theme-toggle-inline {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .pop-theme-toggle-inline svg {
+        width: 16px;
+        height: 16px;
+    }
+    
+    .pop-equipment-name,
+    .pop-process-name {
+        font-size: var(--text-sm);
+    }
+    
+    /* 상태 탭 */
+    .pop-status-tab-label {
+        font-size: var(--text-base);
+    }
+    
+    .pop-status-tab-count {
+        font-size: var(--text-xl);
+    }
+    
+    .pop-status-tab-detail {
+        font-size: var(--text-sm);
+    }
+    
+    /* 작업 카드 */
+    .pop-work-card-id {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-card-item {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-card-spec {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-card-info-item .label {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-card-info-item .value {
+        font-size: var(--text-base);
+    }
+    
+    /* 작업 카드 내부 - 태블릿 */
+    .pop-work-number {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-status {
+        font-size: var(--text-xs);
+        padding: 3px 10px;
+    }
+    
+    .pop-work-info-label {
+        font-size: var(--text-xs);
+    }
+    
+    .pop-work-info-value {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-process-bar-label,
+    .pop-process-bar-count {
+        font-size: var(--text-xs);
+    }
+    
+    .pop-process-chip {
+        font-size: var(--text-xs);
+        padding: 5px 10px;
+    }
+    
+    .pop-progress-text,
+    .pop-progress-percent {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-btn-sm {
+        font-size: var(--text-xs);
+        padding: var(--spacing-xs) var(--spacing-md);
+    }
+    
+    /* 공정 타임라인 */
+    .pop-process-step-label {
+        font-size: var(--text-sm);
+    }
+    
+    /* 하단 네비게이션 */
+    .pop-nav-btn {
+        font-size: var(--text-base);
+    }
+    
+    /* 배지 */
+    .pop-badge {
+        font-size: var(--text-sm);
+        padding: 4px 10px;
     }
 }
 
@@ -1734,6 +1930,11 @@
         padding-bottom: calc(64px + var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
     }
     
+    /* 상태 탭 sticky 위치 조정 - 데스크톱 */
+    .pop-status-tabs {
+        top: 110px;
+    }
+    
     .pop-work-list {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
@@ -1741,11 +1942,217 @@
     }
     
     .pop-slide-panel-content {
-        max-width: 700px;
+        max-width: none;
+        left: 0;
     }
     
     .pop-work-steps-sidebar {
-        width: 240px;
+        width: 280px;
+    }
+    
+    /* 데스크톱 (1024px+) - 폰트 크기 더 증가 */
+    
+    /* 헤더 */
+    .pop-top-bar {
+        font-size: var(--text-base);
+        padding: var(--spacing-sm) var(--spacing-lg);
+    }
+    
+    .pop-datetime {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-time {
+        font-size: var(--text-base);
+    }
+    
+    .pop-type-btn {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .pop-filter-btn {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .pop-theme-toggle-inline {
+        width: 36px;
+        height: 36px;
+    }
+    
+    .pop-theme-toggle-inline svg {
+        width: 18px;
+        height: 18px;
+    }
+    
+    .pop-equipment-name,
+    .pop-process-name {
+        font-size: var(--text-base);
+    }
+    
+    /* 상태 탭 */
+    .pop-status-tab-label {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-status-tab-count {
+        font-size: var(--text-2xl);
+    }
+    
+    .pop-status-tab-detail {
+        font-size: var(--text-base);
+    }
+    
+    /* 작업 카드 */
+    .pop-work-card-id {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-card-item {
+        font-size: var(--text-xl);
+    }
+    
+    .pop-work-card-spec {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-card-info-item .label {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-card-info-item .value {
+        font-size: var(--text-lg);
+    }
+    
+    /* 작업 카드 내부 - 데스크톱 */
+    .pop-work-number {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-status {
+        font-size: var(--text-sm);
+        padding: 4px 12px;
+    }
+    
+    .pop-work-info-label {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-info-value {
+        font-size: var(--text-base);
+    }
+    
+    .pop-process-bar-label,
+    .pop-process-bar-count {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-process-chip {
+        font-size: var(--text-sm);
+        padding: 6px 12px;
+    }
+    
+    .pop-progress-text,
+    .pop-progress-percent {
+        font-size: var(--text-base);
+    }
+    
+    .pop-btn-sm {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    /* 공정 타임라인 */
+    .pop-process-step-label {
+        font-size: var(--text-base);
+    }
+    
+    /* 하단 네비게이션 */
+    .pop-nav-btn {
+        font-size: var(--text-lg);
+    }
+    
+    /* 배지 */
+    .pop-badge {
+        font-size: var(--text-base);
+        padding: 5px 12px;
+    }
+    
+    /* 슬라이드 패널 - 데스크톱 */
+    .pop-slide-panel-title {
+        font-size: var(--text-2xl);
+    }
+    
+    .pop-panel-date {
+        font-size: var(--text-base);
+    }
+    
+    .pop-panel-time {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-steps-header {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-step-name {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-step-time {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-step-status {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-step-title {
+        font-size: var(--text-2xl);
+    }
+    
+    .pop-step-description {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-step-form-title {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-form-label {
+        font-size: var(--text-base);
+    }
+    
+    .pop-checkbox-label {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-checkbox {
+        width: 24px;
+        height: 24px;
+    }
+    
+    .pop-input {
+        font-size: var(--text-lg);
+        padding: var(--spacing-md) var(--spacing-lg);
+    }
+    
+    .pop-work-order-info-item .label {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-order-info-item .value {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-btn {
+        font-size: var(--text-base);
+        padding: var(--spacing-md) var(--spacing-xl);
+    }
+    
+    .pop-time-control-btn {
+        font-size: var(--text-lg);
     }
 }