djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

약관 스타일 추가

Browse Source
This commit is contained in:
현성필
2025-11-17 14:23:15 +09:00
parent 69a0bd9aa8
commit c94ede55aa
1 changed files with 497 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/pages/_terms-agreements.scss
+497
View File
@@ -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;
}
}
}