@charset "utf-8";

/* news.html */
.news {padding-bottom: 60px;}
.news-list {display: flex; flex-direction: column; gap: 40px;}
.news-list .news-thumb {position: relative; width: 100%; aspect-ratio: 350 / 180; border-radius: 12px; overflow: hidden; margin-bottom: 16px;}
.news-list .news-thumb img {width: 100%; height: 100%; object-fit: cover;}
.news-list .news-thumb .news-pin {position: absolute; top: 12px; right: 12px; z-index: 2;}
.news-list .news-title {font-size: 18px; font-weight: 700; line-height: 1.3; color: #1E1E1E; margin-bottom: 4px;}
.news-list .news-date {display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: #787878;}

.pagination {display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 50px;}
.page-numbers {display: flex; align-items: center; gap: 6px;}
.page-num,
.page-btn {font-size: 14px; font-weight: 600; line-height: 1.3; color: #444; text-decoration: none;}
.page-btn.is-disabled {color: #ccc; pointer-events: none;}
.page-num {display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid #F1F1F1; background: #fff;}
.page-num.is-active {background: #00AEEF; color: #fff; border-color: #00AEEF;}
.page-dot {padding: 0 10px; font-size: 13px; font-weight: 600; color: #444;}

/* news-view.html */
.news-view {padding-top: 0; padding-bottom: 60px;}
.news-view .news-hero {margin-bottom: 30px;}
.news-view .news-hero .inner {padding: 0;}
.news-view .news-hero img {width: 100%;}
.news-view .news-body {padding-bottom: 60px; border-bottom: 1px solid #eee;}
.news-view .news-title {font-size: 24px; font-weight: 700; line-height: 1.3; color: #1E1E1E; margin-bottom: 10px;}
.news-view .news-date {display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: #787878; margin-bottom: 30px;}
.news-view .news-content {font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; color: #1B1C1E;}

.news-nav {display: flex; justify-content: space-between; align-items: center; padding-top: 20px;}
.news-nav-left {display: flex; gap: 4px;}
.news-nav a {font-size: 14px; font-weight: 600; line-height: 1.3; color: #666; border-radius: 8px; border: 1px solid #ccc; padding: 6px 12px;}
.news-nav-left a.is-disabled {color: #ccc; pointer-events: none;}
.news-nav-right a {display: flex; align-items: center; gap: 6px;}

/* mypage.html */
.wrap--mypage {background: rgba(235, 248, 255, 1);}
.wrap--mypage .app-header {background: rgba(235, 248, 255, 1);}
.mypage {padding-top: 0;}
.mypage-point {margin: 65px 0 36px;}
.mypage-point .point-card {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-radius: 100px; background: #FFF; box-shadow: 0 0 10px 0 rgba(9, 146, 223, 0.10);} 
.mypage-point .point-card:after {content: ''; width: 101px; height: 70px; position: absolute; top: -69px; right: 22px; background: url('/assets/images/sub/mypage-point-character-2af7a37fb599c47f51a973436dbce6db.png') no-repeat 50% 100%;}
.mypage-point .point-card .point-label {display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: #222;}
.mypage-point .point-card .point-value {font-size: 14px; font-weight: 400; line-height: 1.3; color: #222; gap: 0;}
.mypage-point .point-card .point-value strong {font-size: 16px; font-weight: 700; color: #00AEEF; margin-right: 4px;}

.mypage-history {margin-bottom: 40px;}
.mypage-history .history-list {border-radius: 12px; background: #FFF; box-shadow: 0 0 10px 0 rgba(9, 146, 223, 0.10); padding: 6px 0;}
.mypage-history .history-item {display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;}
.mypage-history .history-item:not(:last-child) {border-bottom: 1px solid #eee;}
.mypage-history .history-empty {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; padding: 30px 16px; text-align: center;}
.mypage-history .history-title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; margin-bottom: 2px;}
.mypage-history .history-date {display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: #999 ;}
.mypage-history .history-point {font-size: 16px; font-weight: 600; line-height: 1.3; color: #00AEEF; text-align: right;}

.mypage-info {margin-bottom: 40px;}
.mypage-info .info-list {border-radius: 12px; background: #FFF; box-shadow: 0 0 10px 0 rgba(9, 146, 223, 0.10); padding: 6px 0;}
.mypage-info .info-item {position: relative; padding: 15px 70px 15px 16px;}
.mypage-info .info-item:not(:last-child) {border-bottom: 1px solid #eee;}
.mypage-info .info-content {display: flex; align-items: center;}
.mypage-info .info-label {max-width: 80px; width: 100%; font-size: 14px; font-weight: 500; line-height: 1.3; color: #999;}
.mypage-info .info-value {width: 1%; flex: 1 1 auto; font-size: 16px; font-weight: 400; line-height: 1.3; color: #222; word-break: break-all;}
.mypage-info .info-item a {position: absolute; top: 50%; right: 14px; transform: translateY(-50%);}

.mypage-settings {padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #D6E3E9;}
.mypage-settings .setting-list {display: flex; flex-direction: column; gap: 24px;}
.mypage-settings .setting-item {display: flex; justify-content: space-between; align-items: center;}
.mypage-settings .setting-title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #000;}
.mypage-settings a.setting-title {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);}
.switch {position: relative; display: block; width: 52px; height: 32px;  border-radius: 999px; background: #ccc; cursor: pointer; transition: .3s;}
.switch::after {content: ''; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15)); transition: .3s;}
#alarm:checked + .switch {background: linear-gradient(130deg, #00ADEE 0%, #00ADEE 18%, #AED230 100%);}
#alarm:checked + .switch::after {transform: translateX(20px);}

.mypage-account {display: flex; flex-direction: column; gap: 24px;}
.mypage-account button {display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: #000; text-align: left;}
.mypage-account .btn-withdraw {color: #F2564B;}

.check-wrap {display: flex; justify-content: center; gap: 8px; cursor: pointer; margin-bottom: 24px;}
.check-wrap input {display: none;}
.check-icon svg circle {fill: #ccc; transition: .2s;}
.check-wrap input:checked + .check-icon svg circle {fill: #00AEEF;}
.check-wrap .check-text {font-size: 14px; font-weight: 500; line-height: 1.3; color: #4B4B4B; text-align: left; text-decoration-line: underline; text-underline-offset: 3px;}

/* point-history.html */
.point-history {position: relative; padding-top: 0;}
.filter-tab {position: sticky; padding: 20px 0 10px; top: 60px; background: #fff; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px;}
.filter-tab button, .filter-tab a {font-size: 14px; line-height: 1.3; color: #999; padding: 6px 12px; border-radius: 100px; border: 1px solid #999; background: #fff; text-decoration: none; display: inline-block; cursor: pointer;}
.filter-tab button.is-active, .filter-tab a.is-active {border: 1px solid #000; background: #222; color: #fff;}

.point-history .history-item {display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee;}
.point-history .history-empty {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; text-align: center; padding: 30px 0;}
.point-history .history-title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; margin-bottom: 2px;}
.point-history .history-date {display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: #999 ;}
.point-history .history-point {font-size: 16px; font-weight: 600; line-height: 1.3; color: #00AEEF; text-align: right;}
.point-history .btn-more--expand {margin-top: 20px;}