약관 스타일 추가
This commit is contained in:
현성필
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user