@charset "utf-8";

/* ************************************** *
 * 선물함
 * ************************************** */

/* ─── 알림 배너 ─── */
.gft__notify-banner-wp { }
.gft__notify-banner { max-width: 1024px; width:100%; margin: 1.2rem auto 0; padding: 18px 24px; background: linear-gradient(135deg, rgba(5,188,190,0.1) 0%, rgba(5,188,190,0.04) 50%, transparent 100%); border: 1px solid rgba(5,188,190,0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 0 20px rgba(5,188,190,0.06); }
.gft__notify-banner .gft__notify-text { font-size: 0.9rem; color: var(--color-text-title); font-weight: var(--font-weight-medium); }
.gft__notify-banner .gft__notify-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 16px; border: 1px solid var(--color-border-default); border-radius: 50px; background: transparent; color: var(--color-text-describe); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; transition: all 0.2s; }
.gft__notify-banner .icon-bell { font-size: 0; }
.gft__notify-banner .gft__notify-btn[data-on] { border-color: #05bcbe; color: #05bcbe; background: rgba(5,188,190,0.06); font-weight: 700; }

.gft__section { max-width: 1024px; width:100%; margin: 0 auto; padding: 1rem 0 0; }
.gft__section + .gft__section { padding-top: 1rem; }
.gft__section .gft__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.2%; list-style: none; padding: 0; margin: 0; }
.gft__section .gft__item { min-width: 0; display: flex; flex-direction: column; }
.gft__section .gft__link { display: flex; flex-direction: column; flex: 1; }
.gft__section .gft__card { position: relative; aspect-ratio: 3/4; width: 100%; }
.gft__section .gft__thumbnail { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; overflow: hidden; background: var(--color-bg-box); z-index: 0; }
.gft__section .gft__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 뱃지 */
.gft__section .gft__badges { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; flex-direction: row; gap: 4px; align-items: flex-start;}
.gft__section .gft__badge { background: rgba(0,0,0,0.82); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.gft__section .gft__badge em { display: inline; font-style: normal; background: linear-gradient(90deg, #33f9c2 0%, #4D9EFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gft__section .gft__grade-badge { background: #87AAC5; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.gft__section .gft__grade-badge em { display: inline; font-style: normal; color: #fff; }
/* 정보 오버레이 */
.gft__section .gft__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 15px 15px; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%); border-radius: 0 0 8px 8px; }
.gft__section .gft__hook { font-size: 0.95rem; font-weight: 800; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; text-shadow: 0 1px 6px rgba(0,0,0,0.55); letter-spacing: -0.01em; }
.gft__section .gft__hook-em { font-style: normal; color: #4dffcf; }
.gft__section .gft__expire-text { font-size: 0.7rem; color: rgba(255,255,255,0.72); margin-top: 3px; }
.gft__section .gft__expire-text--schedule { color: rgba(255,255,255,0.72); }
/* 선물받기 버튼 */
.gft__section .gft__free-btn { display: block; width: 100%; margin-top: 8px; padding: 10px 0 11px; border: 1px solid #05bcbe; border-radius: 6px; background: transparent; color: #05bcbe; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; font-family: inherit; transition: all 0.2s; box-shadow: 0 0 10px rgba(5,188,190,0.1); letter-spacing: 0.03em; }
.gft__section .gft__free-btn:hover { background: rgba(5,188,190,0.08); box-shadow: 0 0 16px rgba(5,188,190,0.32); }
/* 내일 선물 중앙 배지 */
.gft__section .gft__dim-badge { display: none; }

/* ─── 오늘 선물 ─── */
/* .gft__section--usable .gft__thumbnail { box-shadow: 0 6px 24px rgba(0,0,0,0.5); } */
.gft__section--usable .gft__img { filter: brightness(1.06) saturate(1.1); transition: transform 0.35s ease; }
.gft__section--usable .gft__img:hover { transform: scale(1.05); }

/* ─── 내일 선물 ─── */
.gft__section--expected .gft__img { filter: saturate(0.7); }
.gft__section--expected .gft__thumbnail::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.6); z-index: 2; }
.gft__section--expected .gft__expire-text--schedule { color: #05bcbe; font-weight: 600; }
.gft__section--expected .gft__dim-badge { display: inline-flex; align-items: center; gap: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(5,188,190,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 50px; white-space: nowrap; letter-spacing: 0.02em; border: 1px solid rgba(5,188,190,0.38); }
.gft__section--expected .gft__dim-badge::before { content: ''; display: block; flex-shrink: 0; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.75)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 7 12'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 빈 선물쨩*/
.empty-box {width: 100%;  max-width: 1024px;   padding: 0;   margin: 1.5rem auto 0.5rem;   position: relative;}
.empty-box > img { width: 250px; margin: 0 auto; image-rendering: -webkit-optimize-contrast; }
.empty-box > p { text-align: center; margin: 10px 0; line-height: 1.4; }

.serial-wrapper {gap:1.5rem;}
.section__header{position:relative; z-index:1;}
.section__body{position:relative;}
.section__title{height:2.5rem; padding:0; margin:0 auto 5px;}
.section__title > a{font-size:var(--font-size-lg); color:var(--color-text-title); font-family:var(--font-family-default); display:flex; align-items:center; height:100%;}
.section__title > a > img{height:25px;}
.section__title img{height:25px;}
.section__subtitle{font-size:var(--font-size-xs); color:var(--color-text-describe); font-family:var(--font-family-default); font-weight:var(--font-weight-regular); margin-left:5px;}

/* ─── Light mode 대응 ─── */
[data-bs-theme="light"] .gft__notify-banner { background: rgba(5,188,190,0.09); border-color: rgba(5,188,190,0.35); box-shadow: 0 0 20px rgba(5,188,190,0.12); } 
[data-bs-theme="light"] .gft__notify-banner .gft__notify-btn { border-color: rgba(0,0,0,0.18); color: var(--color-text-describe); } /*260226 수정*/
[data-bs-theme="light"] .gft__notify-banner .gft__notify-btn[data-on] { color:#05bcbe; border-color: #05bcbe; background: rgba(5,188,190,0.06); --bell-clr: #05bcbe; } /*260226 추가*/
[data-bs-theme="light"] .gft__notify-banner .icon-bell { color: var(--bell-clr, currentColor); } /*260226 추가*/
[data-bs-theme="light"] .gft__section .gft__grade-badge { background: #4d85a8; } 
[data-bs-theme="light"] .gft__section .gft__free-btn { box-shadow: 0 0 14px rgba(5,188,190,0.2); } 

/* ************************************** *
 * TABLET PC VER
 * ************************************** */
@media (min-width: 768px) and (max-width:1023px) {
  .gft__notify-banner-wp { padding: 0 15px; }
  .gft__section { padding-left: 15px; padding-right: 15px; }
  .gft__section .gft__list { grid-template-columns: repeat(3, 1fr); }
}

/* ************************************** *
 * MOBILE VER
 * ************************************** */
@media (min-width: 0) and (max-width:767px) {
  .gft__notify-banner-wp { padding: 0 10px; }
  .gft__notify-banner { padding: 14px 16px; }
  .gft__notify-banner .gft__notify-text { font-size: 0.82rem; }
  .gft__section { padding-left: 10px; padding-right: 10px; }
  .gft__section .gft__badges { flex-direction: column; gap: 3px; }
  .gft__section .gft__badge, .gft__section .gft__grade-badge { font-size: 10px; padding: 2px 6px; }
  .gft__section .gft__list { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 3%; }

  .section {margin: 0 10px; }
  .empty-box > img {width: 30%;  margin: 0 auto;  image-rendering: auto;    }
}