/* =========================================================
   MYSTIC FLOW RECORDS
   MYSTIC SKY V1
   Desktop + Mobile
   ========================================================= */

.mf-records {
  --mf-record-ink: #44364f;
  --mf-record-muted: #82748b;
  --mf-record-line: rgba(122, 95, 145, 0.14);
  --mf-record-purple: #8f72b4;
  --mf-record-pink: #d893a9;
  --mf-record-mint: #98caba;
  --mf-record-cream: #fffaf1;

  width: min(100% - 32px, 1040px);
  margin: 0 auto;
  padding:
    34px
    0
    calc(
      var(--bottom-navigation-height, 76px)
      + 52px
      + env(safe-area-inset-bottom)
    );
  color: var(--mf-record-ink);
}

.mf-records__hero {
  padding: 18px 8px 28px;
  text-align: center;
}

.mf-records__eyebrow,
.mf-section-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #9a7db6;
}

.mf-records__hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.mf-records__hero h1 span {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75em;
  color: #b28ac4;
  animation:
    mf-record-twinkle
    2.8s
    ease-in-out
    infinite;
}

.mf-records__hero p {
  max-width: 520px;
  margin: 13px auto 0;
  color: var(--mf-record-muted);
  line-height: 1.7;
}

.mf-sky-card {
  position: relative;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(166, 139, 185, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 250, 243, 0.98),
      rgba(247, 241, 255, 0.96)
    );
  box-shadow:
    0 20px 50px rgba(92, 68, 111, 0.09);
}

.mf-sky-card__top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.mf-sky-card__top h2,
.mf-record-stream__head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.mf-month-nav {
  display: flex;
  gap: 7px;
}

.mf-month-nav button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(139, 106, 164, 0.14);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  color: #765d88;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.mf-month-nav button:disabled {
  opacity: 0.28;
  cursor: default;
}

.mf-mystic-sky {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(184, 145, 211, 0.27),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #37304f 0%,
      #514166 50%,
      #6a536f 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09);
}

.mf-mystic-sky::before,
.mf-mystic-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mf-mystic-sky::before {
  opacity: 0.72;
  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.72) 0 1px,
      transparent 1.4px
    );
  background-size: 38px 38px;
  background-position: 8px 12px;
}

.mf-mystic-sky::after {
  background:
    linear-gradient(
      to top,
      rgba(255, 224, 220, 0.1),
      transparent 45%
    );
}

.mf-mystic-sky__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.33;
  pointer-events: none;
}

.mf-mystic-sky__glow--one {
  width: 180px;
  height: 180px;
  top: 38px;
  left: 8%;
  background: #d19ac8;
}

.mf-mystic-sky__glow--two {
  width: 210px;
  height: 210px;
  right: 4%;
  bottom: -60px;
  background: #9dbed0;
}

.mf-mystic-sky__stars {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.mf-sky-star {
  position: absolute;
  display: grid;
  width: var(--star-size, 28px);
  height: var(--star-size, 28px);
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: #fff6dd;
  text-shadow:
    0 0 7px rgba(255,246,221,.9),
    0 0 18px rgba(223,184,233,.78);
  cursor: pointer;
  animation:
    mf-record-star-float
    var(--star-speed, 3.4s)
    ease-in-out
    infinite;
  animation-delay:
    var(--star-delay, 0s);
}

.mf-sky-star::before {
  content: "✦";
  font-size: var(--star-font, 21px);
}

.mf-sky-star:nth-child(3n + 2) {
  color: #f8d7e1;
}

.mf-sky-star:nth-child(3n + 3) {
  color: #d8eee7;
}

.mf-mystic-sky__empty {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 28px;
  color: rgba(255,255,255,.86);
  text-align: center;
}

.mf-mystic-sky__empty strong {
  margin-bottom: 7px;
  font-size: 1.05rem;
}

.mf-mystic-sky__empty span {
  color: rgba(255,255,255,.65);
  font-size: 0.9rem;
  line-height: 1.6;
}

.mf-mystic-sky__empty[hidden] {
  display: none;
}

.mf-sky-card__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 3px 1px;
}

.mf-sky-card__caption strong {
  color: #745987;
}

.mf-sky-card__caption span {
  color: #94889c;
  font-size: 0.82rem;
}

.mf-month-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 34px;
}

.mf-month-summary article {
  display: grid;
  min-height: 124px;
  padding: 18px;
  place-items: center;
  align-content: center;
  border: 1px solid var(--mf-record-line);
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  text-align: center;
  box-shadow:
    0 11px 32px rgba(89, 67, 103, .055);
}

.mf-month-summary article > span {
  margin-bottom: 5px;
  font-size: 1.15rem;
}

.mf-month-summary strong {
  max-width: 100%;
  overflow: hidden;
  color: #644f73;
  font-size: 1.35rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-month-summary small {
  margin-top: 5px;
  color: #94889c;
}

.mf-record-stream {
  margin-top: 8px;
}

.mf-record-stream__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
}

.mf-record-view-link {
  color: #a291aa;
  font-size: 0.78rem;
}

.mf-record-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 12px;
  scrollbar-width: none;
}

.mf-record-filters::-webkit-scrollbar {
  display: none;
}

.mf-record-filters button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(122, 95, 145, .13);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #806f88;
  font-size: 0.84rem;
  cursor: pointer;
}

.mf-record-filters button.is-active {
  border-color: rgba(139, 105, 167, .24);
  background:
    linear-gradient(
      135deg,
      #8f73ad,
      #b182aa
    );
  color: white;
  box-shadow:
    0 7px 18px rgba(132, 95, 154, .18);
}

.mf-record-list {
  display: grid;
  gap: 13px;
}

.mf-record-card {
  overflow: hidden;
  border: 1px solid var(--mf-record-line);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow:
    0 13px 38px rgba(91, 69, 105, .06);
}

.mf-record-card__main {
  padding: 20px 21px 16px;
}

.mf-record-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.mf-record-card__service {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #85679b;
  font-size: 0.79rem;
  font-weight: 800;
}

.mf-record-card__service::before {
  content: "✦";
  font-size: 0.72rem;
}

.mf-record-card__date {
  color: #aa9fac;
  font-size: 0.76rem;
}

.mf-record-card__question {
  margin: 0 0 11px;
  color: #837788;
  font-size: 0.88rem;
  line-height: 1.6;
}

.mf-record-card__headline {
  margin: 0;
  color: #44364f;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.65;
  letter-spacing: -0.022em;
}

.mf-record-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.mf-record-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f6f1f8;
  color: #806e88;
  font-size: 0.74rem;
}

.mf-record-card details {
  border-top: 1px solid rgba(125, 98, 143, .09);
}

.mf-record-card summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;
  color: #816b90;
  font-size: 0.81rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.mf-record-card summary::-webkit-details-marker {
  display: none;
}

.mf-record-card summary::after {
  content: "⌄";
  font-size: 1.1rem;
  transition: transform .2s ease;
}

.mf-record-card details[open] summary::after {
  transform: rotate(180deg);
}

.mf-record-card__detail {
  padding: 1px 21px 20px;
}

.mf-record-card__detail p {
  margin: 0;
  color: #786d7e;
  line-height: 1.7;
}

.mf-record-card__action {
  margin-top: 12px !important;
  padding: 12px 13px;
  border-radius: 14px;
  background: #faf4f8;
  color: #715f7b !important;
}

.mf-record-missions {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.mf-record-missions li {
  padding: 10px 12px;
  border-radius: 13px;
  background: #faf8fb;
  color: #817584;
  font-size: 0.81rem;
  line-height: 1.55;
}

.mf-record-loading,
.mf-record-empty,
.mf-record-login {
  display: grid;
  min-height: 210px;
  padding: 32px 20px;
  place-items: center;
  align-content: center;
  border: 1px dashed rgba(130, 101, 151, .18);
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  text-align: center;
}

.mf-record-loading p,
.mf-record-empty p,
.mf-record-login p {
  max-width: 420px;
  margin: 9px 0 0;
  color: #95899a;
  line-height: 1.65;
}

.mf-record-loading__star {
  color: #9d78b5;
  font-size: 1.5rem;
  animation:
    mf-record-twinkle
    1.5s
    ease-in-out
    infinite;
}

.mf-record-login a {
  margin-top: 16px;
  padding: 10px 17px;
  border-radius: 999px;
  background: #886da5;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

@keyframes mf-record-twinkle {
  0%,
  100% {
    opacity: .52;
    transform: scale(.93);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes mf-record-star-float {
  0%,
  100% {
    margin-top: 0;
    opacity: .76;
  }

  50% {
    margin-top: -5px;
    opacity: 1;
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
  .mf-records {
    width: min(100% - 22px, 520px);
    padding-top: 18px;
    padding-bottom:
      calc(
        var(--bottom-navigation-height, 72px)
        + 34px
        + env(safe-area-inset-bottom)
      );
  }

  .mf-records__hero {
    padding:
      13px
      8px
      22px;
  }

  .mf-records__hero h1 {
    font-size: 1.9rem;
  }

  .mf-records__hero p {
    max-width: 315px;
    font-size: .88rem;
  }

  .mf-sky-card {
    padding: 17px;
    border-radius: 23px;
  }

  .mf-sky-card__top {
    margin-bottom: 13px;
  }

  .mf-sky-card__top h2 {
    font-size: 1.15rem;
  }

  .mf-month-nav button {
    width: 34px;
    height: 34px;
  }

  .mf-mystic-sky {
    min-height: 260px;
    border-radius: 19px;
  }

  .mf-sky-card__caption {
    display: grid;
    gap: 3px;
    padding-top: 12px;
  }

  .mf-sky-card__caption span {
    font-size: .76rem;
  }

  .mf-month-summary {
    gap: 8px;
    margin:
      11px
      0
      27px;
  }

  .mf-month-summary article {
    min-width: 0;
    min-height: 103px;
    padding: 12px 6px;
    border-radius: 16px;
  }

  .mf-month-summary strong {
    font-size: 1.06rem;
  }

  .mf-month-summary small {
    font-size: .69rem;
  }

  .mf-record-stream__head {
    align-items: start;
  }

  .mf-record-view-link {
    display: none;
  }

  .mf-record-card__main {
    padding:
      17px
      17px
      14px;
  }

  .mf-record-card summary {
    padding: 0 17px;
  }

  .mf-record-card__detail {
    padding:
      1px
      17px
      17px;
  }
}

@media (max-width: 390px) {
  .mf-records {
    width: min(100% - 16px, 520px);
  }

  .mf-sky-card {
    padding: 14px;
  }

  .mf-mystic-sky {
    min-height: 235px;
  }

  .mf-month-summary {
    gap: 6px;
  }

  .mf-month-summary article {
    padding:
      11px
      4px;
  }
}


/* RECORDS_MOBILE_SKY_SAFE_V11_START */

/*
 * iOS Safari / 전체 페이지 캡처에서
 * 복합 radial-gradient + blur 레이어가 깨지는 현상 방지.
 * PC는 기존 디자인 유지, 모바일만 안정 렌더링.
 */
@media (max-width: 700px) {

  .mf-mystic-sky {
    position: relative;
    isolation: isolate;
    min-height: 260px;
    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        #3d3454 0%,
        #514267 48%,
        #69516f 100%
      ) !important;

    box-shadow:
      inset 0 0 0 1px
        rgba(255, 255, 255, 0.08),
      0 12px 28px
        rgba(74, 54, 89, 0.08);
  }

  .mf-mystic-sky::before {
    z-index: 0;

    opacity: 0.58;

    background-image:
      radial-gradient(
        circle,
        rgba(255, 255, 255, 0.78) 0 1px,
        transparent 1.2px
      );

    background-size:
      30px 30px;

    background-position:
      6px 8px;
  }

  .mf-mystic-sky::after {
    z-index: 0;

    background:
      linear-gradient(
        180deg,
        rgba(210, 180, 226, 0.035),
        rgba(243, 195, 218, 0.08)
      );
  }

  /*
   * filter: blur()는 iOS full-page capture에서
   * 레이어 합성 오류가 날 수 있어 모바일에서는 제거.
   */
  .mf-mystic-sky__glow {
    filter: none !important;
    opacity: 0.14;
  }

  .mf-mystic-sky__glow--one {
    width: 150px;
    height: 150px;
    top: 18px;
    left: -18px;

    background:
      radial-gradient(
        circle,
        rgba(221, 171, 215, 0.8),
        transparent 70%
      );
  }

  .mf-mystic-sky__glow--two {
    width: 170px;
    height: 170px;
    right: -30px;
    bottom: -35px;

    background:
      radial-gradient(
        circle,
        rgba(159, 194, 211, 0.66),
        transparent 70%
      );
  }

  .mf-mystic-sky__stars {
    z-index: 2;
  }

  .mf-mystic-sky__empty {
    z-index: 3;

    padding:
      24px 25px;
  }

  .mf-mystic-sky__empty strong {
    font-size: 1rem;
  }

  .mf-mystic-sky__empty span {
    max-width: 245px;

    font-size: 0.79rem;
    line-height: 1.65;
  }

  .mf-sky-card__caption {
    padding-top: 14px;
  }

  .mf-sky-card__caption strong {
    font-size: 0.92rem;
  }

  /*
   * 모바일 3개 통계가 너무 작아 보이지 않도록
   * 높이와 숫자 가독성만 살짝 강화.
   */
  .mf-month-summary article {
    min-height: 108px;
  }

  .mf-month-summary article > span {
    font-size: 1.08rem;
  }

  .mf-month-summary strong {
    font-size: 1.12rem;
  }

  .mf-month-summary small {
    line-height: 1.35;
  }
}

@media (max-width: 390px) {

  .mf-mystic-sky {
    min-height: 240px;
  }

  .mf-mystic-sky__empty span {
    max-width: 220px;
  }
}

/* RECORDS_MOBILE_SKY_SAFE_V11_END */

/* RECORDS_MOBILE_SKY_SAFE_V12_START */

/*
 * iOS Safari / 전체 페이지 캡처 안정화 버전.
 * 모바일에서는 gradient / blur / glow 합성을 완전히 제거한다.
 * PC 스타일에는 영향 없음.
 */
@media (max-width: 700px) {

  .mf-mystic-sky {
    position: relative !important;
    isolation: auto !important;

    min-height: 260px !important;

    overflow: hidden !important;

    background: #514267 !important;
    background-color: #514267 !important;
    background-image: none !important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 12px 28px rgba(74,54,89,.08) !important;
  }

  /*
   * 실제 별점 레이어.
   * gradient를 사용하지 않고 box-shadow로만 구성.
   */
  .mf-mystic-sky::before {
    content: "" !important;

    position: absolute !important;
    top: 14px !important;
    left: 14px !important;

    z-index: 0 !important;

    display: block !important;

    width: 1.5px !important;
    height: 1.5px !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.72) !important;
    background-image: none !important;

    opacity: 1 !important;

    box-shadow:
      28px 10px rgba(255,255,255,.56),
      61px 25px rgba(255,255,255,.34),
      92px 8px rgba(255,255,255,.70),
      125px 35px rgba(255,255,255,.42),
      158px 12px rgba(255,255,255,.60),
      194px 31px rgba(255,255,255,.34),
      231px 15px rgba(255,255,255,.68),
      267px 37px rgba(255,255,255,.38),
      302px 11px rgba(255,255,255,.56),

      12px 58px rgba(255,255,255,.40),
      48px 75px rgba(255,255,255,.66),
      84px 53px rgba(255,255,255,.34),
      116px 88px rgba(255,255,255,.52),
      151px 61px rgba(255,255,255,.72),
      187px 81px rgba(255,255,255,.36),
      221px 56px rgba(255,255,255,.56),
      254px 91px rgba(255,255,255,.64),
      290px 66px rgba(255,255,255,.38),
      320px 87px rgba(255,255,255,.58),

      21px 116px rgba(255,255,255,.64),
      58px 137px rgba(255,255,255,.38),
      95px 111px rgba(255,255,255,.54),
      132px 147px rgba(255,255,255,.70),
      167px 120px rgba(255,255,255,.36),
      202px 152px rgba(255,255,255,.56),
      236px 119px rgba(255,255,255,.68),
      274px 143px rgba(255,255,255,.38),
      309px 121px rgba(255,255,255,.58),

      7px 177px rgba(255,255,255,.38),
      44px 199px rgba(255,255,255,.64),
      79px 173px rgba(255,255,255,.50),
      118px 210px rgba(255,255,255,.34),
      154px 181px rgba(255,255,255,.64),
      192px 211px rgba(255,255,255,.44),
      226px 176px rgba(255,255,255,.60),
      261px 207px rgba(255,255,255,.36),
      299px 183px rgba(255,255,255,.68),
      324px 218px rgba(255,255,255,.40) !important;

    pointer-events: none !important;
  }

  /*
   * 기존 gradient overlay 완전 제거
   */
  .mf-mystic-sky::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /*
   * 기존 glow도 모바일에서는 제거
   */
  .mf-mystic-sky__glow {
    display: none !important;
    filter: none !important;
    background: none !important;
  }

  .mf-mystic-sky__stars {
    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;
  }

  .mf-mystic-sky__empty {
    position: absolute !important;
    inset: 0 !important;

    z-index: 3 !important;

    display: grid !important;

    align-content: center !important;
    justify-items: center !important;

    padding: 24px 25px !important;

    background: transparent !important;

    color: rgba(255,255,255,.92) !important;

    text-align: center !important;
  }

  .mf-mystic-sky__empty[hidden] {
    display: none !important;
  }

  .mf-mystic-sky__empty strong {
    color: #fff !important;

    font-size: 1rem !important;
    font-weight: 750 !important;

    text-shadow:
      0 2px 10px rgba(31,22,43,.28);
  }

  .mf-mystic-sky__empty span {
    max-width: 245px !important;

    color: rgba(255,255,255,.70) !important;

    font-size: .79rem !important;
    line-height: 1.65 !important;
  }

  .mf-sky-star {
    z-index: 4 !important;
  }
}

@media (max-width: 390px) {

  .mf-mystic-sky {
    min-height: 240px !important;
  }

  .mf-mystic-sky__empty span {
    max-width: 215px !important;
  }
}

/* RECORDS_MOBILE_SKY_SAFE_V12_END */

/* MYSTIC_RECORD_COLLECTION_V2_START */


/* =========================================================
   Mystic Sky - constellation lines
   ========================================================= */

.mf-mystic-sky__lines {
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.mf-mystic-sky__lines line {
  stroke:
    rgba(
      242,
      220,
      250,
      0.32
    );

  stroke-width: 0.45;

  stroke-linecap: round;

  stroke-dasharray:
    1.2 1.8;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   Card Archive
   ========================================================= */

.mf-card-archive {
  margin:
    0
    0
    34px;

  padding:
    25px;

  border:
    1px solid
    rgba(
      151,
      120,
      170,
      0.15
    );

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        252,
        247,
        0.98
      ),
      rgba(
        249,
        244,
        253,
        0.97
      )
    );

  box-shadow:
    0 16px 42px
    rgba(
      91,
      69,
      105,
      0.06
    );
}


.mf-card-archive__head {
  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap: 16px;
}


.mf-card-archive__head h2 {
  margin: 0;

  color:
    #44364f;

  font-size:
    1.35rem;

  letter-spacing:
    -0.035em;
}


.mf-card-archive__count {
  flex: 0 0 auto;

  color:
    #8666a0;

  font-size:
    1.22rem;
}


.mf-card-progress {
  position: relative;

  height: 8px;

  overflow: hidden;

  margin:
    18px
    0
    9px;

  border-radius:
    999px;

  background:
    rgba(
      142,
      110,
      161,
      0.10
    );
}


.mf-card-progress span {
  display: block;

  width: 0;
  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #9575b8,
      #d49aac
    );

  transition:
    width
    0.55s
    ease;
}


.mf-card-archive__caption {
  margin:
    0
    0
    18px;

  color:
    #978a9c;

  font-size:
    0.81rem;

  line-height:
    1.55;
}


.mf-card-discoveries {
  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(0, 1.12fr);

  gap: 11px;

  margin-bottom:
    14px;
}


.mf-card-discovery,
.mf-repeat-panel {
  min-width: 0;

  border:
    1px solid
    rgba(
      144,
      111,
      167,
      0.12
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.64
    );
}


.mf-card-discovery {
  display: flex;

  align-items:
    center;

  gap: 12px;

  padding:
    15px;
}


.mf-card-discovery[hidden],
.mf-repeat-panel[hidden] {
  display: none;
}


.mf-card-discovery__symbol {
  display: grid;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #f3eafb;

  color:
    #916fb0;

  font-size:
    1.1rem;
}


.mf-card-discovery small,
.mf-repeat-panel small {
  display: block;

  margin-bottom:
    3px;

  color:
    #a093a5;

  font-size:
    0.69rem;
}


.mf-card-discovery strong,
.mf-repeat-panel strong {
  display: block;

  overflow: hidden;

  color:
    #584660;

  font-size:
    0.9rem;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mf-card-discovery p {
  margin:
    4px
    0
    0;

  color:
    #a093a5;

  font-size:
    0.72rem;
}


.mf-repeat-panel {
  padding:
    14px
    15px;
}


.mf-repeat-panel__title {
  display: flex;

  align-items:
    center;

  gap: 9px;

  margin-bottom:
    10px;

  color:
    #906daa;
}


.mf-repeat-list {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.mf-repeat-card {
  display: inline-flex;

  max-width:
    100%;

  align-items:
    center;

  gap: 5px;

  min-height:
    27px;

  padding:
    5px
    9px;

  border-radius:
    999px;

  background:
    #f6f0f8;

  color:
    #765f80;

  font-size:
    0.73rem;
}


.mf-repeat-card strong {
  display: inline;

  overflow: visible;

  color:
    #885fa3;

  font-size:
    inherit;
}


.mf-full-archive {
  overflow: hidden;

  border:
    1px solid
    rgba(
      135,
      103,
      155,
      0.11
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.54
    );
}


.mf-full-archive summary {
  display: flex;

  min-height: 52px;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 12px;

  padding:
    0
    16px;

  color:
    #715d7c;

  font-size:
    0.82rem;

  font-weight:
    750;

  cursor: pointer;

  list-style: none;
}


.mf-full-archive summary::-webkit-details-marker {
  display: none;
}


.mf-full-archive summary::after {
  content: "⌄";

  margin-left:
    4px;

  color:
    #9a83aa;

  font-size:
    1rem;

  transition:
    transform
    0.2s
    ease;
}


.mf-full-archive[open]
summary::after {
  transform:
    rotate(180deg);
}


.mf-full-archive__summary-count {
  margin-left:
    auto;

  color:
    #a395aa;

  font-size:
    0.72rem;

  font-weight:
    600;
}


.mf-card-grid {
  display: grid;

  grid-template-columns:
    repeat(
      13,
      minmax(0, 1fr)
    );

  gap: 6px;

  padding:
    4px
    14px
    16px;
}


.mf-archive-card {
  position: relative;

  display: grid;

  aspect-ratio:
    0.72;

  min-width: 0;

  place-items:
    center;

  align-content:
    center;

  gap: 3px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      130,
      108,
      142,
      0.10
    );

  border-radius:
    9px;

  background:
    #f1edf2;

  color:
    #b9afb9;

  cursor: default;
}


.mf-archive-card.is-seen {
  border-color:
    rgba(
      144,
      105,
      170,
      0.22
    );

  background:
    linear-gradient(
      155deg,
      #fffaf5,
      #eee4f7
    );

  color:
    #755c85;

  box-shadow:
    0 5px 13px
    rgba(
      96,
      72,
      111,
      0.07
    );
}


.mf-archive-card__mark {
  font-size:
    0.78rem;
}


.mf-archive-card.is-seen
.mf-archive-card__mark {
  color:
    #9873b4;
}


.mf-archive-card__number {
  font-size:
    0.59rem;

  font-weight:
    750;
}


.mf-archive-card__repeat {
  position: absolute;

  top: 3px;
  right: 3px;

  display: grid;

  min-width: 15px;
  height: 15px;

  padding:
    0 3px;

  place-items:
    center;

  border-radius:
    999px;

  background:
    #8e6bab;

  color:
    #fff;

  font-size:
    0.52rem;

  font-weight:
    800;
}


/* =========================================================
   Mobile archive
   ========================================================= */

@media (max-width: 700px) {

  .mf-card-archive {
    margin-bottom:
      28px;

    padding:
      18px;

    border-radius:
      22px;
  }


  .mf-card-archive__head h2 {
    font-size:
      1.16rem;
  }


  .mf-card-archive__count {
    font-size:
      1.04rem;
  }


  .mf-card-discoveries {
    grid-template-columns:
      1fr;
  }


  .mf-card-grid {
    grid-template-columns:
      repeat(
        6,
        minmax(0, 1fr)
      );

    gap: 7px;

    padding:
      4px
      12px
      14px;
  }


  .mf-archive-card {
    border-radius:
      8px;
  }


  .mf-archive-card__mark {
    font-size:
      0.85rem;
  }


  .mf-archive-card__number {
    font-size:
      0.61rem;
  }

}


@media (max-width: 390px) {

  .mf-card-archive {
    padding:
      15px;
  }


  .mf-card-grid {
    gap: 5px;

    padding:
      3px
      10px
      12px;
  }

}

/* MYSTIC_RECORD_COLLECTION_V2_END */