@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Fredoka+One&display=swap');

:root {
  --pink: #dc40e0;
  --white: #ffffff;
  
  --u: calc(min(100vw, 600px) / 1080);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: #fff;
  font-family: 'Chewy', 'Fredoka One', cursive;
  color: #000;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: min(100vw, 600px); margin: 0 auto; }

.header {
  background: var(--pink);
  height: calc(var(--u) * 140);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(0,0,0,.25);
  position: relative;
  z-index: 2;
}
.header a {
  color: #fff;
  text-decoration: none;
  font-family: 'Fredoka One', 'Chewy', cursive;
  font-size: calc(var(--u) * 78);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1);
}

.list { padding: calc(var(--u) * 42) calc(var(--u) * 48) calc(var(--u) * 60); }

.card {
  display: block;
  text-decoration: none;
  border: calc(var(--u) * 20) solid var(--pink);
  background: var(--pink);
  margin-bottom: calc(var(--u) * 46);
}
.card .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 945 / 520;
  object-fit: cover;
  background: #eee;
}
.card .bar {
  background: #fff;
  margin-top: calc(var(--u) * 20);
  height: calc(var(--u) * 78);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 18);
}
.card .name {
  font-family: 'Fredoka One', 'Chewy', cursive;
  color: var(--pink);
  font-size: calc(var(--u) * 52);
  line-height: 1;
}
.card .ico { width: calc(var(--u) * 50); height: calc(var(--u) * 50); flex: none; }

/* ---------- DETAIL ---------- */
.detail { padding: calc(var(--u) * 54) calc(var(--u) * 54) calc(var(--u) * 40); }
.detail .cover { display: block; width: 100%; aspect-ratio: 972 / 545; object-fit: cover; background: #eee; }

.section-title {
  margin-top: calc(var(--u) * 26);
  border-left: calc(var(--u) * 20) solid var(--pink);
  height: calc(var(--u) * 84);
  display: flex;
  align-items: center;
  padding-left: calc(var(--u) * 16);
  font-size: calc(var(--u) * 52);
  letter-spacing: calc(var(--u) * 1);
  text-transform: uppercase;
}

.info {
  margin-top: calc(var(--u) * 46);
  border-left: calc(var(--u) * 20) solid var(--pink);
  padding: calc(var(--u) * 10) 0 calc(var(--u) * 10) calc(var(--u) * 24);
}
.info p {
  font-size: calc(var(--u) * 50);
  line-height: calc(var(--u) * 78);
  white-space: nowrap;
}
.info p:nth-child(even) { padding-left: calc(var(--u) * 4); }
.info p:nth-child(3n) { padding-left: calc(var(--u) * 8); }

.download-box {
  margin-top: calc(var(--u) * 26);
  border: calc(var(--u) * 20) solid var(--pink);
  clip-path: polygon(
    calc(var(--u) * 14) 0, calc(100% - var(--u) * 14) 0, 100% calc(var(--u) * 14),
    100% calc(100% - var(--u) * 14), calc(100% - var(--u) * 14) 100%,
    calc(var(--u) * 14) 100%, 0 calc(100% - var(--u) * 14), 0 calc(var(--u) * 14));
  padding: calc(var(--u) * 12) calc(var(--u) * 100) calc(var(--u) * 40);
  text-align: center;
  background: #fff;
}
.download-box h3 {
  font-size: calc(var(--u) * 50);
  line-height: calc(var(--u) * 70);
  margin-top: calc(var(--u) * 14);
  text-transform: none;
}
.download-box h3.upper { text-transform: uppercase; margin-top: calc(var(--u) * 44); }

.btn {
  display: block;
  margin: calc(var(--u) * 10) auto 0;
  width: 100%;
  height: calc(var(--u) * 128);
  line-height: calc(var(--u) * 128);
  background: var(--pink);
  color: #fff;
  text-decoration: none;
  font-size: calc(var(--u) * 50);
  letter-spacing: calc(var(--u) * 1);
  text-transform: uppercase;
  border-radius: calc(var(--u) * 14);
  text-align: center;
}
.btn:active { opacity: .85; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 48) calc(var(--u) * 70);
}
.pager a, .pager span {
  min-width: calc(var(--u) * 92);
  height: calc(var(--u) * 92);
  padding: 0 calc(var(--u) * 14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', 'Chewy', cursive;
  font-size: calc(var(--u) * 44);
  text-decoration: none;
  border: calc(var(--u) * 8) solid var(--pink);
  color: var(--pink);
  background: #fff;
  border-radius: calc(var(--u) * 14);
}
.pager a.active { background: var(--pink); color: #fff; }
.pager span.off { opacity: .35; }
.pager span.dots { border-color: transparent; min-width: calc(var(--u) * 40); padding: 0; }