과금 페이지 스타일

src/main/resources/static/sass/pages/_commission.scss

@@ -0,0 +1,297 @@
+// Commission Pages Styles
+// 수수료 관리 및 청구서 출력 페이지 스타일
+
+@import '../abstracts/variables';
+@import '../abstracts/mixins';
+
+// ==================== Commission Management Page ====================
+
+.wrap {
+  max-width: 1400px;
+  margin: 0 auto;
+  background: $white;
+  padding: $spacing-lg;
+  border-radius: $border-radius-md;
+  box-shadow: $shadow-md;
+}
+
+.searchInfo {
+  display: inline-block;
+  margin-right: $spacing-sm;
+  margin-bottom: $spacing-md;
+}
+
+.searchBox {
+  background: $gray-bg;
+  padding: $spacing-lg;
+  border-radius: $border-radius-md;
+  margin-bottom: $spacing-lg;
+
+  &.row-two {
+    display: flex;
+    align-items: center;
+    gap: $spacing-lg;
+    flex-wrap: wrap;
+  }
+
+  label {
+    font-weight: $font-weight-medium;
+    color: $text-gray;
+    min-width: 80px;
+  }
+
+  .form-control {
+    padding: 6px 12px;
+    border: 1px solid $border-gray;
+    border-radius: $border-radius-sm;
+    font-size: $font-size-sm;
+  }
+}
+
+.form-inline {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.btnBox {
+  margin-left: auto;
+}
+
+.voffset3 {
+  margin-top: 30px;
+}
+
+.color_red {
+  color: $accent-orange;
+}
+
+.color_blue {
+  color: $primary-blue;
+}
+
+.color_darkRed {
+  color: #8b0000;
+}
+
+// Table Styles
+.table-responsive {
+  overflow-x: auto;
+  margin-top: $spacing-3xl;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+
+  th {
+    background: $gray-bg;
+    font-weight: $font-weight-medium;
+    color: $text-dark;
+    padding: $spacing-md;
+    text-align: center;
+    border: 1px solid $border-gray;
+  }
+
+  td {
+    padding: $spacing-md;
+    text-align: center;
+    border: 1px solid $border-gray;
+  }
+}
+
+.table-bordered {
+  border: 1px solid $border-gray;
+
+  th,
+  td {
+    border: 1px solid $border-gray;
+  }
+}
+
+.border-type {
+  border: 2px solid $border-gray;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.bg-warning {
+  background-color: #fff3cd !important;
+}
+
+// Icon
+.glyphicon-search::before {
+  content: "🔍";
+}
+
+// ==================== Commission Print Page ====================
+
+.info-table {
+  border-top: 10px solid $text-gray;
+  width: 100%;
+  border-bottom: 2px solid $text-dark;
+  margin-bottom: $spacing-2xl;
+
+  th {
+    text-align: left;
+    padding: $spacing-md $spacing-lg;
+    font-weight: $font-weight-semibold;
+    background: none;
+    border: none;
+  }
+
+  td {
+    padding: $spacing-md $spacing-lg;
+    border: none;
+  }
+}
+
+.commission-table {
+  width: 100%;
+  margin-top: $spacing-2xl;
+
+  th,
+  td {
+    border: 1px solid #999 !important;
+    padding: $spacing-md $spacing-lg;
+  }
+
+  td {
+    text-align: right;
+  }
+}
+
+.bg_ygreen {
+  background-color: aquamarine;
+  text-align: center;
+}
+
+.bg_skyBlue {
+  background-color: skyblue;
+  text-align: center;
+}
+
+.bg_yellow {
+  background-color: yellow;
+  text-align: center;
+}
+
+// Print-specific styles
+@media print {
+  body {
+    padding: 0;
+    background: $white;
+  }
+
+  .searchBox,
+  .searchInfo,
+  #printButton,
+  #backButton,
+  #printBtn {
+    display: none !important;
+  }
+
+  @page {
+    size: auto;
+    margin: 0 -0cm;
+  }
+
+  html {
+    margin: 0 0cm;
+  }
+}
+
+// Responsive Design
+@media screen and (max-width: $breakpoint-md) {
+  .wrap {
+    padding: $spacing-md;
+  }
+
+  .searchBox {
+    padding: $spacing-md;
+
+    &.row-two {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: $spacing-md;
+    }
+  }
+
+  .form-inline {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+
+    label {
+      min-width: auto;
+    }
+
+    .form-control {
+      width: 100%;
+    }
+  }
+
+  .btnBox {
+    margin-left: 0;
+    width: 100%;
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  .table-responsive {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+// Commission Print Page Specific
+.commission-print-page {
+  font-size: 12px;
+
+  body {
+    width: 600px;
+    margin: 90px;
+  }
+
+  table {
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 5px 10px;
+    }
+
+    tr {
+      font-size: 12px;
+    }
+  }
+
+  h1 {
+    text-align: center;
+
+    img {
+      width: 300px;
+    }
+  }
+
+  h2 {
+    margin-top: $spacing-2xl;
+  }
+
+  p {
+    line-height: 1.6;
+  }
+}