From c94ede55aa74eb0aefc1c1343a8768bfc4503ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= <hyunsp@gmail.com>
Date: Mon, 17 Nov 2025 14:23:15 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=BD=EA=B4=80=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/sass/pages/_terms-agreements.scss  | 497 ++++++++++++++++++
 1 file changed, 497 insertions(+)
 create mode 100644 src/main/resources/static/sass/pages/_terms-agreements.scss

diff --git a/src/main/resources/static/sass/pages/_terms-agreements.scss b/src/main/resources/static/sass/pages/_terms-agreements.scss
new file mode 100644
index 0000000..ae50b26
--- /dev/null
+++ b/src/main/resources/static/sass/pages/_terms-agreements.scss
@@ -0,0 +1,497 @@
+// -----------------------------------------------------------------------------
+// Terms and Agreements Page - Modern Design
+// 이용약관 및 개인정보처리방침 페이지
+// -----------------------------------------------------------------------------
+
+// Page Container
+.terms-page {
+  min-height: calc(100vh - 140px);
+  background: $gray-bg;
+  padding: $spacing-3xl $spacing-lg;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-2xl $spacing-md;
+  }
+}
+
+.terms-container {
+  max-width: $container-max-width;
+  margin: 0 auto;
+}
+
+// Page Header
+.terms-header {
+  margin-bottom: $spacing-3xl;
+
+  @media (max-width: $breakpoint-sm) {
+    margin-bottom: $spacing-2xl;
+  }
+
+  .page-title {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-dark;
+    margin-bottom: $spacing-md;
+    background: $gradient-primary;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-2xl;
+    }
+  }
+
+  .page-description {
+    font-size: $font-size-base;
+    color: $text-gray;
+    line-height: $line-height-normal;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-sm;
+    }
+  }
+}
+
+// Terms Content Card
+.terms-content-card {
+  background: $white;
+  border-radius: $border-radius-lg;
+  box-shadow: $shadow-md;
+  overflow: hidden;
+}
+
+// Tab Navigation
+.terms-tabs {
+  display: flex;
+  gap: 0;
+  background: $gray-bg;
+  padding: $spacing-xs;
+  border-bottom: 1px solid $border-gray;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-xs;
+  }
+
+  .tab-link {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-sm;
+    padding: $spacing-md $spacing-lg;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    color: $text-gray;
+    text-decoration: none;
+    background: transparent;
+    border-radius: $border-radius-md;
+    transition: $transition-base;
+    text-align: center;
+
+    @media (max-width: $breakpoint-sm) {
+      padding: $spacing-sm $spacing-md;
+      font-size: $font-size-sm;
+      gap: $spacing-xs;
+    }
+
+    i {
+      font-size: $font-size-md;
+      transition: $transition-base;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $font-size-base;
+      }
+    }
+
+    &:hover {
+      color: $primary-blue;
+      background: rgba($primary-blue, 0.05);
+
+      i {
+        transform: scale(1.1);
+      }
+    }
+
+    &.active {
+      color: $white;
+      background: $primary-blue;
+      box-shadow: $shadow-sm;
+
+      i {
+        color: $white;
+      }
+    }
+  }
+}
+
+// Version Selector
+.terms-selector {
+  padding: $spacing-lg $spacing-2xl;
+  background: $light-bg;
+  border-bottom: 1px solid $border-gray;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-md $spacing-lg;
+  }
+
+  form {
+    max-width: 400px;
+  }
+
+  .custom-select {
+    position: relative;
+    cursor: pointer;
+
+    .select-selected {
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+      padding: $spacing-md $spacing-lg;
+      background: $white;
+      border: 2px solid $border-gray;
+      border-radius: $border-radius-md;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      color: $text-dark;
+      transition: $transition-base;
+      cursor: pointer;
+
+      @media (max-width: $breakpoint-sm) {
+        padding: $spacing-sm $spacing-md;
+        font-size: $font-size-xs;
+      }
+
+      i {
+        &:first-child {
+          color: $primary-blue;
+        }
+
+        &:last-child {
+          margin-left: auto;
+          font-size: $font-size-xs;
+          color: $text-gray;
+          transition: $transition-base;
+        }
+      }
+
+      span {
+        font-weight: $font-weight-semibold;
+        color: $primary-blue;
+      }
+
+      &:hover {
+        border-color: $primary-blue;
+        box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
+      }
+
+      &.select-arrow-active {
+        border-color: $primary-blue;
+
+        i:last-child {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .select-items {
+      position: absolute;
+      top: calc(100% + $spacing-xs);
+      left: 0;
+      right: 0;
+      background: $white;
+      border: 2px solid $primary-blue;
+      border-radius: $border-radius-md;
+      box-shadow: $shadow-lg;
+      max-height: 240px;
+      overflow-y: auto;
+      z-index: $z-index-dropdown;
+      list-style: none;
+      padding: $spacing-xs;
+      margin: 0;
+
+      &.select-hide {
+        display: none;
+      }
+
+      li {
+        padding: $spacing-sm $spacing-md;
+        font-size: $font-size-sm;
+        color: $text-dark;
+        border-radius: $border-radius-sm;
+        cursor: pointer;
+        transition: $transition-base;
+
+        @media (max-width: $breakpoint-sm) {
+          padding: $spacing-xs $spacing-sm;
+          font-size: $font-size-xs;
+        }
+
+        &:hover {
+          background: $light-bg;
+          color: $primary-blue;
+        }
+
+        &.selected {
+          background: $primary-blue;
+          color: $white;
+          font-weight: $font-weight-semibold;
+        }
+      }
+    }
+  }
+}
+
+// Terms Content
+.terms-content {
+  padding: $spacing-3xl $spacing-2xl;
+  min-height: 400px;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-2xl $spacing-lg;
+    min-height: 300px;
+  }
+
+  .content-body {
+    font-size: $font-size-base;
+    color: $text-dark;
+    line-height: $line-height-loose;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-sm;
+    }
+
+    // Content formatting
+    p {
+      margin-bottom: $spacing-md;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: $spacing-xl;
+      margin-bottom: $spacing-md;
+      font-weight: $font-weight-semibold;
+      color: $text-dark;
+      line-height: $line-height-tight;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h1 {
+      font-size: $font-size-2xl;
+      font-weight: $font-weight-bold;
+      padding-bottom: $spacing-md;
+      border-bottom: 2px solid $border-gray;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $font-size-xl;
+      }
+    }
+
+    h2 {
+      font-size: $font-size-xl;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $font-size-lg;
+      }
+    }
+
+    h3 {
+      font-size: $font-size-lg;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $font-size-base;
+      }
+    }
+
+    strong {
+      font-weight: $font-weight-bold;
+      color: $text-dark;
+    }
+
+    em {
+      font-style: italic;
+      color: $text-gray;
+    }
+
+    a {
+      color: $primary-blue;
+      text-decoration: underline;
+      transition: $transition-base;
+
+      &:hover {
+        color: $secondary-blue;
+      }
+    }
+
+    ul, ol {
+      margin: $spacing-md 0;
+      padding-left: $spacing-2xl;
+
+      @media (max-width: $breakpoint-sm) {
+        padding-left: $spacing-lg;
+      }
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    li {
+      margin-bottom: $spacing-sm;
+      line-height: $line-height-normal;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    blockquote {
+      border-left: 4px solid $primary-blue;
+      padding-left: $spacing-lg;
+      margin: $spacing-lg 0;
+      color: $text-gray;
+      font-style: italic;
+      background: $gray-bg;
+      padding: $spacing-md $spacing-lg;
+      border-radius: 0 $border-radius-md $border-radius-md 0;
+
+      @media (max-width: $breakpoint-sm) {
+        padding: $spacing-sm $spacing-md;
+      }
+    }
+
+    code {
+      background: $gray-bg;
+      padding: 2px 6px;
+      border-radius: $border-radius-sm;
+      font-family: $font-family-mono;
+      font-size: 0.9em;
+      color: $primary-blue;
+    }
+
+    pre {
+      background: $gray-bg;
+      border: 1px solid $border-gray;
+      border-radius: $border-radius-md;
+      padding: $spacing-md;
+      overflow-x: auto;
+      margin: $spacing-lg 0;
+
+      @media (max-width: $breakpoint-sm) {
+        padding: $spacing-sm;
+      }
+
+      code {
+        background: transparent;
+        padding: 0;
+        color: $text-dark;
+      }
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: $spacing-lg 0;
+      border: 1px solid $border-gray;
+      border-radius: $border-radius-md;
+      overflow: hidden;
+      font-size: $font-size-sm;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $font-size-xs;
+      }
+
+      th {
+        background: $light-bg;
+        padding: $spacing-sm $spacing-md;
+        text-align: left;
+        font-weight: $font-weight-semibold;
+        color: $text-dark;
+        border-bottom: 2px solid $border-gray;
+
+        @media (max-width: $breakpoint-sm) {
+          padding: $spacing-xs $spacing-sm;
+        }
+      }
+
+      td {
+        padding: $spacing-sm $spacing-md;
+        border-bottom: 1px solid $border-gray;
+        color: $text-dark;
+
+        @media (max-width: $breakpoint-sm) {
+          padding: $spacing-xs $spacing-sm;
+        }
+      }
+
+      tr {
+        &:last-child td {
+          border-bottom: none;
+        }
+
+        &:hover {
+          background: $gray-bg;
+        }
+      }
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid $border-gray;
+      margin: $spacing-2xl 0;
+    }
+
+    // Article/Section numbering
+    .article {
+      margin-top: $spacing-2xl;
+      padding-top: $spacing-lg;
+      border-top: 1px solid $border-gray;
+
+      &:first-child {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: none;
+      }
+    }
+
+    .section-number {
+      display: inline-block;
+      min-width: 30px;
+      color: $primary-blue;
+      font-weight: $font-weight-bold;
+    }
+  }
+}
+
+// Scrollbar styling for select dropdown
+.terms-selector .select-items {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $gray-bg;
+    border-radius: $border-radius-sm;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $primary-blue;
+    border-radius: $border-radius-sm;
+
+    &:hover {
+      background: $secondary-blue;
+    }
+  }
+}