/* ⑮ 수상 — 검정 사진 배경 + 초록 띠 (시안 y 13694~14735, 높이 1041 = 사진 886 + 띠 155)
   PC: 1920 기준 무대에 시안 좌표 그대로. 트로피는 띠 위로 올라온다(z-index).
   휴대폰: 제목 → 배지 3개 → 트로피 → 기사 띠 순서로 한 줄. */
.s15 {
  --s15-gold: #dbc87b;
  --s15-band-out: #02311d;
  --s15-band-in: #005633;
  --s15-cap: #adaba8;
  background: #020202;
  color: var(--c-white);
  container-type: inline-size;
}
.s15-stage {
  --u: min(1px, calc(100cqw / 1920));
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(1041 * var(--u));
  margin: 0 auto;
}
.s15-photo { position: absolute; inset: 0 0 auto 0; height: calc(886 * var(--u)); background: #050505 url(../assets/s15/bg.jpg) center top / 100% 100% no-repeat; }

/* 폭죽(금색 종이 조각)이 떨어지는 모션 — 조각은 s15.js 가 만든다 */
.s15-confetti { position: absolute; z-index: 1; inset: 0 0 auto 0; height: calc(886 * var(--u)); overflow: hidden; pointer-events: none; }
.s15-cf { position: absolute; top: -40px; width: var(--w, 10px); height: var(--h, 22px); border-radius: 2px; background: linear-gradient(135deg, #fff1b8 0%, #d8ad4c 45%, #8a6420 100%); opacity: .9; animation: s15-fall var(--d, 7s) linear var(--delay, 0s) infinite; }
@keyframes s15-fall {
  0% { transform: translate(0, -40px) rotate(0deg) rotateX(0deg); }
  50% { transform: translate(var(--sway, 30px), calc(460 * var(--u))) rotate(200deg) rotateX(180deg); }
  100% { transform: translate(0, calc(940 * var(--u))) rotate(400deg) rotateX(360deg); }
}

.s15-brand { position: absolute; z-index: 2; left: 0; right: 0; top: calc(134 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 700; letter-spacing: -0.04em; text-align: center; }
.s15-title { position: absolute; z-index: 2; left: 0; right: 0; top: calc(170 * var(--u)); font-size: calc(66 * var(--u)); line-height: calc(75 * var(--u)); letter-spacing: -0.05em; text-align: center; text-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.6); }
.s15-gold { color: var(--s15-gold); }

/* GPBA 배지 3개 */
.s15-awards { list-style: none; margin: 0; padding: 0; }
.s15-award { position: absolute; z-index: 2; top: calc(348 * var(--u)); width: calc(176 * var(--u)); text-align: center; }
.s15-award:nth-child(1) { left: calc(651 * var(--u)); }
.s15-award:nth-child(2) { left: calc(873 * var(--u)); }
.s15-award:nth-child(3) { left: calc(1093 * var(--u)); }
.s15-award img { width: 100%; height: auto; filter: drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.6)); }
.s15-award p { margin-top: calc(11 * var(--u)); margin-inline: calc(-30 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: var(--s15-cap); letter-spacing: -0.05em; }
.js .s15-award:nth-child(2).in { animation-delay: .15s; }
.js .s15-award:nth-child(3).in { animation-delay: .3s; }

/* 트로피 · 월계수 · 흐린 '3년연속수상' */
.s15-podium { position: absolute; inset: 0; pointer-events: none; }
.s15-big {
  position: absolute; z-index: 1; left: 0; right: 0; top: calc(697 * var(--u));
  font-size: calc(200 * var(--u)); line-height: 1; letter-spacing: -0.06em; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,214,120,.05) 0%, rgba(250,205,100,.38) 45%, rgba(255,214,110,.72) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s15-laurel { position: absolute; z-index: 1; top: calc(676 * var(--u)); width: calc(124 * var(--u)); height: auto; }
.s15-laurel--l { left: calc(240 * var(--u)); }
.s15-laurel--r { left: calc(1571 * var(--u)); }
.s15-trophy { position: absolute; z-index: 4; left: calc(770 * var(--u)); top: calc(586 * var(--u)); width: calc(390 * var(--u)); height: calc(456 * var(--u)); }
.s15-trophy img { width: 100%; height: 100%; filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.45)); }
/* 빛 반짝: 트로피 모양 안에서만 빛줄기가 지나가고, 테두리에 별빛이 깜빡인다 */
.s15-shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,250,225,.75) 50%, rgba(255,255,255,0) 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url(../assets/s15/trophy.webp) center / 100% 100% no-repeat; mask: url(../assets/s15/trophy.webp) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  animation: s15-shine 3.6s ease-in-out 1s infinite;
}
@keyframes s15-shine { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
.s15-flare { position: absolute; left: calc(84 * var(--u)); top: calc(-4 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); background: radial-gradient(circle, #fff 0 10%, rgba(255,246,200,.85) 18%, rgba(255,230,150,0) 60%); clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%); animation: s15-twinkle 2.4s ease-in-out infinite; }
.s15-flare--2 { left: calc(300 * var(--u)); top: calc(150 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); animation-delay: 1.2s; }
@keyframes s15-twinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .25; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

/* 초록 띠 + 기사 롤링 */
.s15-band { position: absolute; z-index: 3; top: calc(886 * var(--u)); left: 50%; width: 100cqw; height: calc(155 * var(--u)); transform: translateX(-50%); background: var(--s15-band-out); }
.s15-band-in { position: relative; width: calc(1440 * var(--u)); height: 100%; margin: 0 auto; background: var(--s15-band-in); }
.s15-arrow { position: absolute; top: 50%; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin-top: calc(-23 * var(--u)); padding: 0; border: 0; background: none; color: var(--c-white); cursor: pointer; display: grid; place-items: center; }
.s15-arrow svg { width: 100%; height: auto; }
.s15-arrow--prev { left: calc(40 * var(--u)); }
.s15-arrow--next { left: calc(1353 * var(--u)); }
.s15-arrow:focus-visible, .s15-more:focus-visible { outline: 3px solid var(--s15-gold); outline-offset: 3px; }
.s15-news { position: absolute; left: calc(193 * var(--u)); top: 0; width: calc(560 * var(--u)); height: 100%; overflow: hidden; }
.s15-news-list { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
.s15-news-item {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-size: calc(22 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 500; letter-spacing: -0.05em;
  transform: translateY(100%); opacity: 0; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s;
}
.s15-news-item.is-on { transform: none; opacity: 1; }
.s15-news-item.is-out { transform: translateY(-100%); opacity: 0; }
.s15-more {
  position: absolute; left: calc(945 * var(--u)); top: calc(45 * var(--u)); width: calc(301 * var(--u)); height: calc(60 * var(--u));
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(42 * var(--u)) 0 calc(46 * var(--u));
  border-radius: calc(12 * var(--u)); background: #000; color: var(--c-white); text-decoration: none;
  font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: -0.04em;
  transition: background .2s;
}
.s15-more svg { width: calc(11 * var(--u)); height: auto; }
.s15-more:hover { background: #1b1b1b; }

/* 검토 표시(.review [data-note])가 position 을 relative 로 바꾸지 않도록 */
.s15 .s15-title, .s15 .s15-award, .s15 .s15-more { position: absolute; }

/* ---------- 휴대폰 · 태블릿(1279px 이하): 한 줄로 쌓기 ---------- */
@media (max-width: 1279px) {
  .s15-stage { --u: 1px; width: auto; height: auto; padding: 60px 16px 0; display: flex; flex-direction: column; align-items: center; }
  .s15-photo { height: 640px; background-size: cover; background-position: center top; }
  .s15-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 50%, #020202 100%); }
  .s15-confetti { height: 640px; }
  .s15-brand, .s15-title { position: relative; inset: auto; }
  .s15-brand { font-size: 15px; line-height: 1.5; }
  .s15-title { margin-top: 6px; font-size: clamp(28px, 8.4vw, 42px); line-height: 1.22; }
  .s15-awards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 420px; margin-top: 26px; }
  .s15-award { position: static; width: auto; }
  .s15-award img { width: min(100%, 112px); margin: 0 auto; }
  .s15-award p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
  .s15-podium { position: relative; inset: auto; width: 100%; height: 300px; margin-top: 14px; }
  .s15-big { top: auto; bottom: 0; font-size: clamp(44px, 15vw, 96px); }
  .s15-laurel { top: auto; bottom: 0; width: 70px; }
  .s15-laurel--l { left: 2%; }
  .s15-laurel--r { left: auto; right: 2%; }
  .s15-trophy { left: 50%; top: auto; bottom: 0; width: 210px; height: auto; aspect-ratio: 390 / 456; transform: translateX(-50%); }
  .s15-band { position: relative; top: auto; left: auto; width: calc(100% + 32px); height: auto; margin: 0 -16px; transform: none; }
  .s15-band-in { width: auto; height: auto; padding: 18px 16px 20px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px 6px; }
  .s15-arrow { position: static; width: 40px; height: 40px; margin: 0; }
  .s15-arrow--prev { grid-column: 1; grid-row: 1; }
  .s15-arrow--next { grid-column: 3; grid-row: 1; }
  .s15-news { position: relative; left: auto; grid-column: 2; grid-row: 1; width: auto; height: 76px; }
  .s15-news-item { justify-content: center; text-align: center; font-size: 15px; line-height: 1.45; }
  .s15-more { position: relative; left: auto; top: auto; grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 320px; height: 50px; margin: 6px auto 0; padding: 0 22px 0 26px; border-radius: 10px; font-size: 16px; }
  .s15-more svg { width: 10px; }
  .s15 .s15-title, .s15 .s15-more { position: relative; }
  .s15 .s15-award { position: static; }
  .s15 .s15-award:nth-child(n) { left: auto; top: auto; }
  .review .s15 .s15-award[data-note] { position: relative; }
}

/* ---------- 태블릿·작은 노트북(769~1279px): 휴대폰 순서 그대로, 크기에 상한을 두고 가운데 정렬 ---------- */
@media (min-width: 769px) and (max-width: 1279px) {
  .s15-stage { padding-top: 80px; }
  /* 넓은 폭에서 사진 양옆(지운 자국·손)이 드러나지 않게 가운데만 남기고 옆은 어둡게,
     트로피 위 지운 자국도 덜 보이게 아래쪽을 조금 더 일찍 어둡게 */
  .s15-photo::after { background:
    linear-gradient(90deg, #020202 calc(50% - 430px), rgba(2,2,2,0) calc(50% - 220px), rgba(2,2,2,0) calc(50% + 220px), #020202 calc(50% + 430px)),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.2) 45%, rgba(2,2,2,.8) 75%, #020202 100%); }
  .s15-brand { font-size: 17px; }
  .s15-title { margin-top: 8px; font-size: 46px; }
  .s15-awards { max-width: 620px; gap: 20px; margin-top: 34px; }
  .s15-award img { width: min(100%, 150px); }
  .s15-award p { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .s15-podium { max-width: 800px; height: 320px; margin-top: 14px; }
  .s15-big { font-size: 104px; }
  .s15-laurel { width: 76px; }
  .s15-laurel--l { left: calc(50% - 380px); }
  .s15-laurel--r { right: calc(50% - 380px); }
  .s15-trophy { width: 250px; }
  .s15-band-in { width: min(800px, calc(100% - 80px)); margin: 0 auto; padding: 22px 24px 24px; grid-template-columns: 48px 1fr 48px; gap: 10px 12px; }
  .s15-arrow { width: 46px; height: 46px; }
  .s15-news { height: 64px; }
  .s15-news-item { font-size: 18px; }
  .s15-more { max-width: 340px; height: 54px; margin-top: 8px; font-size: 17px; }
}