diff --git a/css/popup.css b/css/popup.css index 9f6546f..2f649c5 100644 --- a/css/popup.css +++ b/css/popup.css @@ -46,6 +46,11 @@ overflow-x: hidden; animation: popupSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 9999; + scrollbar-width: none; +} + +.popup-container::-webkit-scrollbar { + display: none; } @keyframes popupSlideIn { @@ -195,6 +200,96 @@ margin-top: 4px; } +/* 변경사항 카드 */ +.change-card { + background: linear-gradient(135deg, #fffbf5 0%, #fff8f0 100%); + border-radius: 14px; + padding: 1rem 1.25rem; + margin-bottom: 0.75rem; + border: 1px solid rgba(255, 136, 0, 0.12); + transition: all 0.3s ease; +} + +.change-card:hover { + border-color: rgba(255, 136, 0, 0.3); + box-shadow: 0 4px 16px rgba(255, 136, 0, 0.08); + transform: translateY(-2px); +} + +.change-card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.change-card-title { + font-size: 0.95rem; + font-weight: 700; + color: #1a1a2e; + display: flex; + align-items: center; + gap: 6px; +} + +.change-card-title i { + color: var(--primary-color, #ff8800); + font-size: 0.85rem; +} + +.change-badge { + padding: 3px 10px; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 700; + color: white; + letter-spacing: 0.02em; + flex-shrink: 0; +} + +.badge-end { + background: linear-gradient(135deg, #6b7280, #4b5563); +} + +.badge-new { + background: linear-gradient(135deg, #22c55e, #16a34a); +} + +.badge-change { + background: linear-gradient(135deg, #f59e0b, #d97706); +} + +.change-description { + font-size: 0.85rem; + color: #555; + line-height: 1.6; + margin: 0; +} + +.change-description strong { + color: var(--primary-color, #ff8800); + font-weight: 700; +} + +.change-price { + display: flex; + align-items: baseline; + gap: 6px; + margin-bottom: 0.5rem; +} + +.change-price-amount { + font-size: 1.15rem; + font-weight: 800; + color: #ff6600; +} + +.change-price-unit { + font-size: 0.8rem; + color: #888; + font-weight: 500; +} + /* 공지사항 */ .popup-notice { background: rgba(255, 136, 0, 0.06); @@ -445,6 +540,32 @@ color: rgba(255, 255, 255, 0.8); } +[data-theme="dark"] .change-card { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.08); +} + +[data-theme="dark"] .change-card:hover { + border-color: rgba(255, 136, 0, 0.3); + box-shadow: 0 4px 16px rgba(255, 136, 0, 0.1); +} + +[data-theme="dark"] .change-card-title { + color: rgba(255, 255, 255, 0.9); +} + +[data-theme="dark"] .change-description { + color: rgba(255, 255, 255, 0.55); +} + +[data-theme="dark"] .change-price-amount { + color: #ff9933; +} + +[data-theme="dark"] .change-price-unit { + color: rgba(255, 255, 255, 0.4); +} + /* ======================================== 모바일 반응형 ======================================== */ diff --git a/index.html b/index.html index 4f42c90..dfa978e 100644 --- a/index.html +++ b/index.html @@ -190,54 +190,59 @@ height="0" width="0" style="display:none;visibility:hidden"> - -