feat: 초기 프로젝트 설정 및 룰.md 파일 추가

web-ui/css/main-layout.css

@@ -0,0 +1,160 @@
+/* ✅ /css/main-layout.css - 공통 레이아웃 스타일 */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
+  background-color: #f5f5f5;
+}
+
+/* 메인 레이아웃 구조 */
+.main-layout {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+#navbar-container {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.content-wrapper {
+  display: flex;
+  flex: 1;
+}
+
+#sidebar-container {
+  flex-shrink: 0;
+}
+
+#content-container,
+#sections-container,
+#admin-sections,
+#user-sections {
+  flex: 1;
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* 카드 스타일 */
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+}
+
+/* 섹션 스타일 */
+section {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+}
+
+section h2 {
+  font-size: 18px;
+  margin: 0 0 16px 0;
+  color: #333;
+  border-bottom: 2px solid #1976d2;
+  padding-bottom: 8px;
+}
+
+section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+section li {
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+section li:last-child {
+  border-bottom: none;
+}
+
+section a {
+  color: #1976d2;
+  text-decoration: none;
+  display: block;
+  padding: 4px 0;
+  transition: all 0.3s;
+}
+
+section a:hover {
+  color: #0d47a1;
+  padding-left: 8px;
+}
+
+/* 로딩 상태 */
+.loading {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+}
+
+.loading::after {
+  content: '.';
+  animation: dots 1.5s steps(3, end) infinite;
+}
+
+@keyframes dots {
+  0%, 20% { content: '.'; }
+  40% { content: '..'; }
+  60%, 100% { content: '...'; }
+}
+
+/* 에러 상태 */
+.error-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #d32f2f;
+}
+
+.error-state button {
+  margin-top: 16px;
+  padding: 8px 24px;
+  background: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.error-state button:hover {
+  background: #1565c0;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 1024px) {
+  #content-container,
+  #sections-container {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column;
+  }
+  
+  #sidebar-container {
+    order: -1;
+  }
+  
+  section h2 {
+    font-size: 16px;
+  }
+}