/* PROFILE_FRAME_FRONTEND_V1 */
/* PROFILE_FRAME_VISUAL_FIX_V2 */

.profile-frame-wrap{
  --profile-frame-color:#38bdf8;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  overflow:visible;
  isolation:isolate;
}

.profile-frame-wrap > img,
.profile-frame-wrap > .ranking-avatar,
.profile-frame-wrap > .profile-avatar-large,
.profile-frame-wrap > .profile-frame-preview-avatar,
.profile-frame-wrap > .profile-frame-option-avatar,
.profile-frame-wrap > .profile-frame-apply-avatar{
  position:relative;
  z-index:2;
}

.profile-frame-wrap::before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:3;
  border:3px solid var(--profile-frame-color);
  border-radius:999px;
  pointer-events:none;
  box-shadow:
    0 0 7px color-mix(in srgb,var(--profile-frame-color) 80%,transparent),
    0 0 16px color-mix(in srgb,var(--profile-frame-color) 48%,transparent);
}

.profile-frame-color::before{
  border-width:3px;
}

.profile-frame-sparkle::before{
  border-width:3px;
  box-shadow:
    0 0 8px var(--profile-frame-color),
    0 0 21px color-mix(in srgb,var(--profile-frame-color) 62%,transparent);
}

.profile-frame-orbital::before{
  inset:0;
  border:0;
  border-radius:999px;
  background:none;
  box-shadow:
    0 0 0 3px var(--profile-frame-color),
    0 0 22px var(--profile-frame-color);
}

.profile-frame-live::before{
  border-color:#ef4444;
  box-shadow:
    0 0 8px rgba(239,68,68,.88),
    0 0 18px rgba(239,68,68,.55);
}

.profile-frame-pixel::before{
  inset:0;
  border:0;
  border-radius:12px;
  clip-path:none;
  background:none;
  box-shadow:
    0 0 0 3px var(--profile-frame-color),
    4px 4px 0 rgba(139,92,246,.9);
}

.profile-frame-pixel > img,
.profile-frame-pixel > .ranking-avatar,
.profile-frame-pixel > .profile-avatar-large,
.profile-frame-pixel > .profile-frame-preview-avatar,
.profile-frame-pixel > .profile-frame-option-avatar,
.profile-frame-pixel > .profile-frame-apply-avatar{
  border-radius:12px!important;
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.24);
}

.profile-frame-royal::before{
  inset:0;
  border:0;
  border-radius:999px;
  background:none;
  box-shadow:
    0 0 0 3px #f8e7a3,
    0 0 0 7px rgba(250,204,21,.25),
    0 0 24px rgba(250,204,21,.75),
    0 0 42px rgba(244,114,182,.25);
}

.profile-frame-royal::after{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:0;
  border-radius:999px;
  background:
    conic-gradient(
      from 0deg,
      rgba(250,204,21,0),
      rgba(250,204,21,.55),
      rgba(255,255,255,0),
      rgba(244,114,182,.32),
      rgba(250,204,21,0)
    );
  filter:blur(6px);
  animation:profileFrameOrbit 4.2s linear infinite;
  pointer-events:none;
}

.profile-frame-spark{
  position:absolute;
  z-index:5;
  color:#fff3b0;
  text-shadow:
    0 0 5px var(--profile-frame-color),
    0 0 10px var(--profile-frame-color);
  pointer-events:none;
  animation:profileFrameSparkle 1.45s ease-in-out infinite;
}

.profile-frame-spark-a{
  top:-12px;
  left:-10px;
}

.profile-frame-spark-b{
  right:-13px;
  bottom:-10px;
  animation-delay:.55s;
}

.profile-frame-orbit{
  position:absolute;
  inset:-5px;
  z-index:5;
  border:2px dashed var(--profile-frame-color);
  border-radius:999px;
  filter:drop-shadow(0 0 8px var(--profile-frame-color));
  pointer-events:none;
  animation:profileFrameOrbit 6s linear infinite;
}


.profile-frame-live-badge{
  position:absolute;
  top:-11px;
  right:-17px;
  z-index:7;
  min-width:31px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#ef3340;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.2px;
  box-shadow:
    0 0 7px rgba(239,51,64,.85),
    0 3px 8px rgba(0,0,0,.34);
}

.profile-frame-crown{
  position:absolute;
  top:-22px;
  left:50%;
  z-index:8;
  transform:translateX(-50%);
  color:#facc15;
  font-size:24px;
  line-height:1;
  text-shadow:
    0 0 16px rgba(250,204,21,.95),
    0 0 32px rgba(250,204,21,.65);
  animation:profileFrameRoyalFloat 1.8s ease-in-out infinite;
  pointer-events:none;
}

.profile-frame-royal-stars{
  position:absolute;
  inset:-10px;
  z-index:7;
  pointer-events:none;
}

.profile-frame-royal-stars i{
  position:absolute;
  color:#fde68a;
  font-style:normal;
  font-size:12px;
  text-shadow:0 0 10px rgba(250,204,21,.85);
  animation:profileFrameRoyalSparkle 1.7s ease-in-out infinite;
}

.profile-frame-royal-stars i:nth-child(1){
  top:-4px;
  left:6px;
}

.profile-frame-royal-stars i:nth-child(2){
  top:8px;
  right:-2px;
  animation-delay:.4s;
}

.profile-frame-royal-stars i:nth-child(3){
  bottom:2px;
  left:-4px;
  animation-delay:.9s;
}

.profile-frame-royal-stars i:nth-child(4){
  right:10px;
  bottom:-5px;
  animation-delay:1.2s;
}

@keyframes profileFrameSparkle{
  0%,100%{
    opacity:.45;
    transform:scale(.76) rotate(0deg);
  }
  50%{
    opacity:1;
    transform:scale(1.2) rotate(18deg);
  }
}

@keyframes profileFrameOrbit{
  to{
    transform:rotate(360deg);
  }
}

@keyframes profileFrameRoyalFloat{
  0%,100%{
    transform:translateX(-50%) translateY(0);
  }

  50%{
    transform:translateX(-50%) translateY(-6px);
  }
}

@keyframes profileFrameRoyalSparkle{
  0%,100%{
    opacity:.35;
    transform:scale(.8);
  }

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

.profile-frame-preview-avatar,
.profile-frame-option-avatar,
.profile-frame-apply-avatar{
  border-radius:999px;
  object-fit:cover;
  background:
    radial-gradient(circle at 35% 25%,#f8fafc 0 8%,#94a3b8 32%,#1e293b 100%);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  overflow:hidden;
}

.profile-frame-preview-avatar{
  width:82px;
  height:82px;
  font-size:30px;
}

.profile-frame-option-avatar{
  width:58px;
  height:58px;
  font-size:22px;
}

.profile-frame-apply-avatar{
  width:62px;
  height:62px;
  font-size:23px;
}

.profile-frame-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:19000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
}

.profile-frame-modal-backdrop[hidden]{
  display:none!important;
}

.profile-frame-modal-card{
  width:min(980px,96vw);
  max-height:min(850px,92vh);
  overflow:auto;
  border:1px solid rgba(148,163,184,.22);
  border-radius:24px;
  background:
    linear-gradient(180deg,#151a2a 0%,#0c101d 100%);
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding:24px;
}

.profile-frame-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.profile-frame-modal-head h3{
  margin:0 0 7px;
  color:#f8fafc;
  font-size:24px;
  font-weight:1000;
}

.profile-frame-modal-head p{
  margin:0;
  color:#9da8bd;
  font-size:14px;
  line-height:1.55;
}

.profile-frame-modal-close,
.profile-frame-modal-cancel{
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:11px;
  background:rgba(255,255,255,.045);
  color:#dbe5f5;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

.profile-frame-shop-preview{
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-bottom:20px;
  border:1px solid rgba(148,163,184,.15);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 30%,rgba(56,189,248,.09),transparent 55%),
    rgba(2,6,23,.35);
}

.profile-frame-preview-stage{
  min-width:110px;
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-frame-shop-preview > div:last-child{
  display:flex;
  flex-direction:column;
  gap:7px;
}

/* PROFILE_FRAME_PREVIEW_CROWN_FIX_V1 */
/*
 * 미리보기의 모든 span에 글자 스타일이 적용되면서
 * 왕관과 별까지 작고 회색으로 덮이던 문제를 방지한다.
 */
.profile-frame-shop-preview > div:last-child > span{
  color:#8f9db3;
  font-size:13px;
  font-weight:850;
}

.profile-frame-shop-preview strong{
  color:#f8fafc;
  font-size:18px;
  font-weight:1000;
}

.profile-frame-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 1px 12px;
  margin-bottom:10px;
}

.profile-frame-tab{
  flex:0 0 auto;
  min-height:40px;
  padding:0 15px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#9ba8bc;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

.profile-frame-tab.active{
  border-color:rgba(56,189,248,.62);
  background:rgba(56,189,248,.14);
  color:#e8f8ff;
  box-shadow:0 0 15px rgba(56,189,248,.1);
}

.profile-frame-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.profile-frame-choice{
  min-height:148px;
  padding:17px 10px 13px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  cursor:pointer;
}

.profile-frame-choice[hidden]{
  display:none!important;
}

.profile-frame-option-avatar.fallback{
  color:transparent;
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.24);
}

.profile-frame-choice:hover{
  border-color:rgba(56,189,248,.42);
  background:rgba(56,189,248,.055);
}

.profile-frame-choice.selected{
  border-color:rgba(56,189,248,.85);
  background:rgba(56,189,248,.1);
  box-shadow:
    0 0 0 2px rgba(56,189,248,.12),
    0 12px 25px rgba(0,0,0,.2);
}

.profile-frame-choice.owned{
  border-color:rgba(34,197,94,.35);
}

.profile-frame-choice.view-only{
  border-color:rgba(250,204,21,.42);
  background:
    radial-gradient(circle at 50% 20%,rgba(250,204,21,.08),transparent 60%),
    rgba(255,255,255,.025);
}

.profile-frame-choice strong{
  max-width:100%;
  color:#f4f7ff;
  font-size:13px;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-frame-choice > span:last-child{
  color:#8f9db3;
  font-size:12px;
  font-weight:850;
}

.profile-frame-choice.owned > span:last-child{
  color:#61e58a;
}

.profile-frame-choice.view-only > span:last-child{
  color:#facc15;
}

.profile-frame-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

.profile-frame-purchase{
  min-height:46px;
  min-width:210px;
  padding:0 20px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#38bdf8,#3b82f6);
  color:#fff;
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(59,130,246,.24);
}

.profile-frame-purchase:disabled{
  background:#292e3c;
  color:#7f8a9f;
  box-shadow:none;
  cursor:not-allowed;
}

.profile-frame-apply-modal-card{
  width:min(860px,96vw);
}

.profile-frame-apply-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.profile-frame-apply-choice{
  min-height:154px;
  padding:17px 10px 13px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  cursor:pointer;
}

.profile-frame-apply-choice.selected{
  border-color:rgba(34,197,94,.72);
  background:rgba(34,197,94,.09);
  box-shadow:0 0 0 2px rgba(34,197,94,.1);
}

.profile-frame-apply-choice strong{
  color:#f4f7ff;
  font-size:13px;
  font-weight:950;
}

.profile-frame-apply-choice > span:last-child{
  color:#8f9db3;
  font-size:12px;
  font-weight:850;
}

.profile-frame-apply-choice.selected > span:last-child{
  color:#61e58a;
}

.profile-frame-apply-default{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-frame-wrap.profile-frame-size-myinfo{
  margin:5px;
}

.profile-frame-wrap.profile-frame-size-ranking-normal{
  margin:4px;
}

.profile-frame-wrap.profile-frame-size-ranking-large{
  margin:6px;
}

@media(max-width:760px){
  .profile-frame-modal-backdrop{
    padding:10px;
    align-items:flex-end;
  }

  .profile-frame-modal-card{
    width:100%;
    max-height:90vh;
    padding:16px;
    border-radius:20px 20px 14px 14px;
  }

  .profile-frame-modal-head h3{
    font-size:19px;
  }

  .profile-frame-shop-preview{
    min-height:112px;
    gap:20px;
  }

  .profile-frame-preview-avatar{
    width:68px;
    height:68px;
  }

  .profile-frame-choice-grid,
  .profile-frame-apply-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .profile-frame-choice,
  .profile-frame-apply-choice{
    min-height:132px;
    padding:14px 8px 11px;
  }

  .profile-frame-option-avatar,
  .profile-frame-apply-avatar{
    width:50px;
    height:50px;
  }

  .profile-frame-modal-foot{
    position:sticky;
    bottom:-16px;
    margin:18px -16px -16px;
    padding:12px 16px 16px;
    background:linear-gradient(180deg,rgba(12,16,29,.12),#0c101d 34%);
  }

  .profile-frame-purchase{
    flex:1;
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .profile-frame-spark,
  .profile-frame-orbit,
  .profile-frame-crown,
  .profile-frame-royal::after,
  .profile-frame-royal-stars i{
    animation:none!important;
  }
}

/* PROFILE_FRAME_POLISH_V3 */

/* 상점에서 이미 보유한 프레임은 불이 꺼진 듯 약하게 표시 */
.profile-frame-choice.owned:not(.selected){
  opacity:.66;
  filter:
    saturate(.46)
    brightness(.74);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(0,0,0,.10)
    );
  box-shadow:none;
}

.profile-frame-choice.owned:not(.selected)
.profile-frame-wrap{
  opacity:.78;
}

.profile-frame-choice.owned:not(.selected):hover{
  opacity:.82;
  filter:
    saturate(.66)
    brightness(.86);
}

/* 오비탈의 실선·점선 원을 프로필 이미지 중심에 맞춤 */
.profile-frame-wrap.profile-frame-orbital{
  line-height:0;
  vertical-align:middle;
  border-radius:50%;
}

.profile-frame-wrap.profile-frame-orbital::before{
  inset:-2px!important;
  border-radius:50%!important;
  box-sizing:border-box;
}

.profile-frame-wrap.profile-frame-orbital
.profile-frame-orbit{
  inset:-7px!important;
  border-radius:50%!important;
  box-sizing:border-box;
  transform-origin:50% 50%;
}

/* 적용창 하단: 적용하기 / 기본 프레임 */
.profile-frame-apply-actions{
  align-items:stretch;
}

.profile-frame-apply-actions
.profile-frame-purchase,
.profile-frame-apply-actions
.profile-frame-default-button{
  min-width:180px;
}

.profile-frame-default-button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* 후원랭킹 이용자 프로필 */
.donation-rank-row{
  grid-template-columns:
    44px
    48px
    minmax(0,1fr)
    auto!important;
  align-items:center;
}

.donation-rank-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
}

.donation-rank-avatar
.donation-avatar{
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  object-fit:cover;
}

.profile-frame-wrap.profile-frame-size-donation{
  margin:4px;
}

.profile-frame-wrap.profile-frame-size-donation
.donation-avatar{
  position:relative;
  z-index:2;
}

@media(max-width:680px){
  .donation-rank-row{
    grid-template-columns:
      34px
      42px
      minmax(0,1fr)
      auto!important;
    gap:8px!important;
  }

  .donation-rank-avatar
  .donation-avatar{
    width:34px!important;
    height:34px!important;
  }

  .profile-frame-apply-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .profile-frame-apply-actions
  .profile-frame-purchase,
  .profile-frame-apply-actions
  .profile-frame-default-button{
    min-width:0;
  }
}

/* PROFILE_FRAME_SOURCE_LAYOUT_FIX_V1 */

/*
 * 오비탈 실선과 점선 모두 프로필 이미지의 정확한 중심을 기준으로 둔다.
 * 점선 회전 애니메이션에서 translate가 사라지지 않도록 전용 키프레임을 사용한다.
 */
.profile-frame-wrap.profile-frame-orbital{
  position:relative;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  line-height:0;
  vertical-align:middle;
}

.profile-frame-wrap.profile-frame-orbital::before{
  inset:0!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
}

.profile-frame-wrap.profile-frame-orbital
> .profile-frame-orbit{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:calc(100% + 10px)!important;
  height:calc(100% + 10px)!important;
  margin:0!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  transform-origin:50% 50%!important;
  animation:
    profileFrameOrbitCentered
    6s
    linear
    infinite!important;
}

@keyframes profileFrameOrbitCentered{
  from{
    transform:
      translate(-50%,-50%)
      rotate(0deg);
  }

  to{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }
}

/* 후원랭킹: 순위 | 프로필+이름 | 금액 */
.donation-rank-row{
  grid-template-columns:
    48px
    minmax(0,1fr)
    auto!important;
  align-items:center!important;
}

.donation-rank-number{
  grid-column:1;
}

.donation-rank-user{
  grid-column:2;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.donation-rank-avatar{
  flex:0 0 auto;
  min-width:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.donation-rank-name{
  min-width:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
}

.donation-rank-amount{
  grid-column:3;
  white-space:nowrap;
}

@media(max-width:680px){
  .donation-rank-row{
    grid-template-columns:
      34px
      minmax(0,1fr)
      auto!important;
    gap:8px!important;
  }

  .donation-rank-user{
    gap:8px;
  }

  .donation-rank-avatar{
    min-width:34px;
  }
}

/* PROFILE_FRAME_TRUE_CIRCLE_V2 */

/*
 * 내부 프로필 이미지는 정사각형이어도 inline/flex 래퍼가
 * 주변 레이아웃 높이의 영향을 받으면 프레임 링이 타원처럼 보일 수 있다.
 * 래퍼와 내부 이미지를 같은 단일 그리드 셀에 놓아 정확한 정사각형으로 고정한다.
 */
.profile-frame-wrap{
  display:inline-grid!important;
  grid-template-columns:auto!important;
  grid-template-rows:auto!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  align-self:center!important;
  justify-self:center!important;
  flex:0 0 auto!important;
  width:max-content!important;
  height:max-content!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  line-height:0!important;
  font-size:0!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
  border-radius:50%;
}

.profile-frame-wrap > img,
.profile-frame-wrap > .ranking-avatar,
.profile-frame-wrap > .profile-avatar-large,
.profile-frame-wrap > .profile-frame-preview-avatar,
.profile-frame-wrap > .profile-frame-option-avatar,
.profile-frame-wrap > .profile-frame-apply-avatar,
.profile-frame-wrap > .donation-avatar{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  flex:none!important;
  box-sizing:border-box!important;
  aspect-ratio:1 / 1!important;
  line-height:normal!important;
}

/* 원형 계열 프레임은 가로·세로 반지름을 반드시 동일하게 유지 */
.profile-frame-wrap:not(.profile-frame-pixel)::before{
  border-radius:50%!important;
  box-sizing:border-box!important;
}

/* 기존 오비탈 전용 중앙 정렬과 함께 래퍼 자체도 원형으로 고정 */
.profile-frame-wrap.profile-frame-orbital{
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
}

/* 적용 버튼 3종을 동일한 파란 버튼으로 통일 */
.profile-frame-apply-actions
.profile-frame-purchase,
.title-skin-modal-actions
.title-skin-apply-selected,
.nickname-color-modal-actions
.nickname-color-apply{
  min-height:46px!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:12px!important;
  background:
    linear-gradient(
      135deg,
      #38bdf8,
      #3b82f6
    )!important;
  color:#fff!important;
  box-shadow:
    0 8px 22px
    rgba(59,130,246,.28)!important;
  font-size:15px!important;
  font-weight:1000!important;
  cursor:pointer!important;
}

.profile-frame-apply-actions
.profile-frame-purchase:hover:not(:disabled),
.title-skin-modal-actions
.title-skin-apply-selected:hover:not(:disabled),
.nickname-color-modal-actions
.nickname-color-apply:hover:not(:disabled){
  filter:brightness(1.08)!important;
  transform:translateY(-1px);
}

.profile-frame-apply-actions
.profile-frame-purchase:disabled,
.title-skin-modal-actions
.title-skin-apply-selected:disabled,
.nickname-color-modal-actions
.nickname-color-apply:disabled{
  opacity:.52!important;
  cursor:not-allowed!important;
  transform:none!important;
}

/* PROFILE_FRAME_SPARKLE_EXACT_FINAL_V4 */

/*
 * 전체 프레임 래퍼에 적용된 font-size:0 때문에
 * ✦ 문자가 0px로 상속되던 문제를 복구한다.
 */
.profile-frame-wrap.profile-frame-sparkle
.profile-frame-spark{
  display:block!important;
  width:auto!important;
  height:auto!important;
  font-size:18px!important;
  line-height:1!important;
  z-index:8!important;
  opacity:1;
  transform-origin:50% 50%!important;
}

@media(prefers-reduced-motion:no-preference){
  .profile-frame-wrap.profile-frame-sparkle
  .profile-frame-spark{
    animation:
      profileFrameSparkleExactFinalV4
      1.35s
      ease-in-out
      infinite!important;
  }

  .profile-frame-wrap.profile-frame-sparkle
  .profile-frame-spark-b{
    animation-delay:.5s!important;
  }
}

@keyframes profileFrameSparkleExactFinalV4{
  0%,
  100%{
    opacity:.28;
    transform:
      scale(.68)
      rotate(-12deg);
    filter:brightness(.9);
  }

  50%{
    opacity:1;
    transform:
      scale(1.3)
      rotate(12deg);
    filter:
      brightness(1.35)
      drop-shadow(
        0 0 7px
        var(--profile-frame-color)
      );
  }
}


/* PROFILE_FRAME_DEFAULT_AVATAR_SAFE_V1 */

.profile-frame-shop-preview
.profile-frame-preview-avatar.fallback{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#ffd266!important;
  color:#111827!important;
  border:0!important;
  font-size:38px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:none!important;
}


/* COSMETIC_EXACT_DEFAULT_PROFILE_V1 */

/*
 * 오른쪽 현금 부족 문구 높이 때문에
 * 왼쪽 취소 버튼이 세로로 늘어나지 않도록 고정
 */
.profile-frame-modal-foot{
  align-items:flex-start!important;
}

.profile-frame-modal-foot
> .profile-frame-modal-cancel{
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  align-self:flex-start!important;
  flex:0 0 auto!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/*
 * 픽셀 프레임에서는 기본 프로필도 원형이 아니라
 * 프레임 내부를 채우는 노란 네모 형태로 표시
 */
.profile-frame-pixel
> .profile-frame-preview-avatar.fallback,
.profile-frame-pixel
> .profile-frame-option-avatar.fallback,
.profile-frame-pixel
> .profile-frame-apply-avatar.fallback{
  border-radius:12px!important;
  background:#ffd266!important;
  background-color:#ffd266!important;
  background-image:none!important;
  color:#111827!important;
  box-shadow:none!important;
  clip-path:none!important;
}


/* REAL_DEFAULT_PROFILE_PREVIEW_V1 */

/* 실제 내 정보 기본 프로필을 프레임 중심에 정확히 배치 */
.profile-frame-preview-stage
> .profile-frame-wrap{
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  line-height:0!important;
}

.profile-frame-preview-stage
.profile-avatar-large.fallback{
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:center!important;
  flex:none!important;
  transform:none!important;
  background:#ffd057!important;
  background-color:#ffd057!important;
  background-image:none!important;
  color:#121212!important;
  line-height:1!important;
  box-shadow:none!important;
}

/* 픽셀 프레임에서는 실제 기본 프로필도 노란 네모로 채움 */
.profile-frame-preview-stage
.profile-frame-pixel
> .profile-avatar-large.fallback{
  border-radius:12px!important;
  background:#ffd057!important;
  background-color:#ffd057!important;
  background-image:none!important;
  color:#121212!important;
  box-shadow:none!important;
}

/* PROFILE_FRAME_PREVIEW_CENTER_FIX_V3 */
.profile-frame-preview-avatar,
.profile-frame-preview-media,
.profile-frame-preview-thumb,
.profile-frame-avatar,
.profile-frame-card-avatar,
.profile-frame-option-avatar,
.profile-frame-preview .profile-frame-avatar,
.profile-frame-preview .profile-frame-preview-avatar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.profile-frame-preview-avatar > img,
.profile-frame-preview-avatar img,
.profile-frame-preview-media > img,
.profile-frame-preview-media img,
.profile-frame-preview-thumb > img,
.profile-frame-preview-thumb img,
.profile-frame-avatar > img,
.profile-frame-avatar img,
.profile-frame-card-avatar > img,
.profile-frame-card-avatar img,
.profile-frame-option-avatar > img,
.profile-frame-option-avatar img,
.profile-frame-preview .profile-frame-avatar > img,
.profile-frame-preview .profile-frame-avatar img,
.profile-frame-preview .profile-frame-preview-avatar > img,
.profile-frame-preview .profile-frame-preview-avatar img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate(-50%, -50%) !important;
}

.profile-frame-preview-avatar > .shop-default-avatar,
.profile-frame-preview-avatar > .profile-frame-default-avatar,
.profile-frame-preview-avatar > .profile-default-avatar,
.profile-frame-preview-media > .shop-default-avatar,
.profile-frame-preview-media > .profile-frame-default-avatar,
.profile-frame-preview-media > .profile-default-avatar,
.profile-frame-avatar > .shop-default-avatar,
.profile-frame-avatar > .profile-frame-default-avatar,
.profile-frame-avatar > .profile-default-avatar,
.profile-frame-card-avatar > .shop-default-avatar,
.profile-frame-card-avatar > .profile-frame-default-avatar,
.profile-frame-card-avatar > .profile-default-avatar,
.profile-frame-option-avatar > .shop-default-avatar,
.profile-frame-option-avatar > .profile-frame-default-avatar,
.profile-frame-option-avatar > .profile-default-avatar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}


/* PROFILE_FRAME_EXACT_VISUAL_CENTER_V1 */

/*
 * 구매 팝업 상단 미리보기의 프레임 래퍼를
 * 프로필 크기와 정확히 같은 78x78 박스로 고정한다.
 */
.profile-frame-preview-stage
> .profile-frame-wrap.profile-frame-size-preview{
  width:78px!important;
  height:78px!important;
  min-width:78px!important;
  min-height:78px!important;
  max-width:78px!important;
  max-height:78px!important;

  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;

  margin:0!important;
  padding:0!important;

  line-height:0!important;
  vertical-align:top!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

/*
 * 실제 이미지와 기본 V 프로필 모두 프레임의 직접 자식이다.
 * 현재 시각적으로 약 2px 아래에 있으므로 위로 보정한다.
 */
.profile-frame-preview-stage
> .profile-frame-wrap.profile-frame-size-preview
> .profile-frame-preview-avatar,
.profile-frame-preview-stage
> .profile-frame-wrap.profile-frame-size-preview
> .profile-avatar-large{
  position:relative!important;

  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  inset:auto!important;

  width:78px!important;
  height:78px!important;
  min-width:78px!important;
  min-height:78px!important;
  max-width:78px!important;
  max-height:78px!important;

  margin:0!important;
  padding:0!important;

  align-self:center!important;
  justify-self:center!important;

  object-fit:cover!important;
  object-position:center center!important;

  transform:translateY(-2px)!important;
  box-sizing:border-box!important;
}

/* 기본 프로필 V도 글자까지 중앙 유지 */
.profile-frame-preview-stage
> .profile-frame-wrap.profile-frame-size-preview
> .profile-avatar-large.fallback{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  text-align:center!important;
}

/* 픽셀 프레임은 기존 요청대로 노란 네모 유지 */
.profile-frame-preview-stage
> .profile-frame-wrap.profile-frame-size-preview.profile-frame-pixel
> .profile-avatar-large.fallback,
.profile-frame-preview-stage
> .profile-frame-wrap.profile-frame-size-preview.profile-frame-pixel
> .profile-frame-preview-avatar.fallback{
  border-radius:12px!important;
  background:#ffd057!important;
  background-color:#ffd057!important;
  background-image:none!important;
  color:#121212!important;
}