/* 이모티콘 팝업(모바일) 전용 컴포넌트 — 팝업을 여는 5개 부모 화면에서만 로드한다 */
@layer ua, reset, vendor, legacy, token, layout, component, variant, utility;

@layer component {
  .qz-emo-m {
    --qz-emo-surface: #212121;
    --qz-emo-surface-sub: #1b1b1b;
    --qz-emo-card: #2e2e2e;
    --qz-emo-card-hover: #383838;
    --qz-emo-border: #444444;
    --qz-emo-border-soft: #383838;
    --qz-emo-text: #ffffff;
    --qz-emo-text-sub: #aaaaaa;
    --qz-emo-text-muted: #999999;
    --qz-emo-accent: #ff9200;
    --qz-emo-accent-text: #ffb03a;
    --qz-emo-on-accent: #1a1a1a;
    --qz-emo-tab-active: #2e2e2e;
    --qz-emo-shadow: rgba(0, 0, 0, .5);
    --qz-emo-dim: rgba(0, 0, 0, .55);
    --qz-emo-border-strong: #767676;
    --qz-emo-fill-soft: #333333;

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--qz-emo-surface);
    color: var(--qz-emo-text);
    font-weight: 400;
    letter-spacing: normal;
  }
  body.light-theme .qz-emo-m {
    --qz-emo-surface: #ffffff;
    --qz-emo-surface-sub: #f0f1f4;
    --qz-emo-card: #f7f8fa;
    --qz-emo-card-hover: #eef0f3;
    --qz-emo-border: #e4e5e9;
    --qz-emo-border-soft: #eceef1;
    --qz-emo-text: #1a1a1a;
    --qz-emo-text-sub: #555555;
    --qz-emo-text-muted: #6a6c72;
    --qz-emo-accent: #ff9200;
    --qz-emo-accent-text: #a85800;
    --qz-emo-on-accent: #1a1a1a;
    --qz-emo-tab-active: #ffffff;
    --qz-emo-shadow: rgba(0, 0, 0, .12);
    --qz-emo-dim: rgba(0, 0, 0, .35);
    --qz-emo-border-strong: #808289;
    --qz-emo-fill-soft: #eef0f3;
  }

  :where(.qz-emo-m) ul,
  :where(.qz-emo-m) ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  :where(.qz-emo-m) li {
    list-style: none;
  }
  :where(.qz-emo-m) a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
  }
  :where(.qz-emo-m) img {
    border: 0;
    vertical-align: top;
  }
  :where(.qz-emo-m) button {
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    font-weight: 400;
    cursor: pointer;
  }
  :where(.qz-emo-m) input {
    font-weight: 400;
    color: var(--qz-emo-text);
  }
  :where(.qz-emo-m) i,
  :where(.qz-emo-m) em {
    color: inherit;
    font-style: normal;
  }
  /* common.css @layer reset 의 `a:focus{outline:1px dotted}` 를 끈다. 키보드 포커스 링은 아래 :focus-visible 이 담당한다 */
  .qz-emo-m a:focus,
  .qz-emo-m button:focus,
  .qz-emo-m input:focus {
    outline: none;
  }
  .qz-emo-m a:focus-visible,
  .qz-emo-m button:focus-visible,
  .qz-emo-m input:focus-visible {
    outline: 2px solid var(--qz-emo-accent);
    outline-offset: 2px;
  }

  /* 헤더 */
  .qz-emo-m .qz-emo-m__head {
    flex: none;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-m__head-logo {
    width: 20px;
    height: 20px;
    display: inline-flex;
  }
  .qz-emo-m .qz-emo-m__head-logo img {
    width: 100%;
    height: 100%;
  }
  .qz-emo-m .qz-emo-m__head-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--qz-emo-text);
  }
  .qz-emo-m .qz-emo-m__head-close {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qz-emo-text-sub);
  }
  .qz-emo-m .qz-emo-m__head-close::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--qz-emo-text-sub);
    -webkit-mask-image: url(../../images/common/ic_close_w.svg);
    mask-image: url(../../images/common/ic_close_w.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* 본문 */
  .qz-emo-m .qz-emo-m__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* 탭 세그먼트 */
  .qz-emo-m .qz-emo-tabs {
    flex: none;
    display: flex;
    gap: 4px;
    background: var(--qz-emo-surface-sub);
    padding: 4px;
    border-radius: 10px;
    margin: 10px 12px;
  }
  .qz-emo-m .qz-emo-tabs__btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    background: transparent;
    color: var(--qz-emo-text-sub);
    font-weight: 700;
    font-size: 13px;
    transition: background-color 120ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qz-emo-m .qz-emo-tabs__btn.is-active {
    background: var(--qz-emo-tab-active);
    color: var(--qz-emo-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  }

  /* light-theme.css 의 unlayered `body.light-theme a` 가 레이어를 무시하고 이기므로,
     색은 앵커가 아닌 안쪽 span 에 준다 */
  .qz-emo-m .qz-emo-tabs__btn span { color: var(--qz-emo-text-sub); }
  .qz-emo-m .qz-emo-tabs__btn.is-active span { color: var(--qz-emo-text); }

  .qz-emo-m .qz-emo-index {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .qz-emo-m .qz-emo-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    position: relative;
  }
  .qz-emo-m .qz-emo-panel.is-active {
    display: flex;
  }

  /* 팩 가로 스크롤 */
  .qz-emo-m .qz-emo-packs {
    flex: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--qz-emo-surface-sub);
    border-bottom: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-packs::-webkit-scrollbar {
    display: none;
  }
  .qz-emo-m .qz-emo-packs__item {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: var(--qz-emo-card);
    border: 1px solid var(--qz-emo-border-soft);
    overflow: hidden;
  }
  .qz-emo-m .qz-emo-packs__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .qz-emo-m .qz-emo-packs__item.is-active {
    border-color: var(--qz-emo-accent);
  }

  /* 이모티콘 타일 그리드 */
  .qz-emo-m .qz-emo-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 14px;
    align-content: start;
    scrollbar-width: none;
  }
  .qz-emo-m .qz-emo-grid::-webkit-scrollbar {
    display: none;
  }
  .qz-emo-m .qz-emo-grid > li {
    min-width: 0;
  }
  .qz-emo-m .qz-emo-grid__cell {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 10px;
    background: var(--qz-emo-card);
    border: 1px solid transparent;
    transition: transform 120ms ease;
  }
  .qz-emo-m .qz-emo-grid__cell:hover {
    background: var(--qz-emo-card-hover);
  }
  .qz-emo-m .qz-emo-grid__cell.is-selected {
    border-color: var(--qz-emo-accent);
    box-shadow: inset 0 0 0 2px var(--qz-emo-accent);
  }
  .qz-emo-m .qz-emo-grid__cell.is-selected::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: url(../../images/common/ic_check_circle_active.svg) no-repeat center;
    background-size: contain;
  }
  .qz-emo-m .qz-emo-grid__cell:active {
    transform: scale(.96);
  }
  .qz-emo-m .qz-emo-grid__cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 카테고리 칩 */
  .qz-emo-m .qz-emo-chips {
    flex: none;
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--qz-emo-surface-sub);
    border-bottom: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-chips::-webkit-scrollbar {
    display: none;
  }
  .qz-emo-m .qz-emo-chips__item {
    flex: none;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--qz-emo-surface-sub);
    color: var(--qz-emo-text-sub);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .qz-emo-m .qz-emo-chips__item.is-active {
    background: var(--qz-emo-accent);
    color: var(--qz-emo-on-accent);
  }

  /* 카드 그리드(선물용 상품 카드) */
  .qz-emo-m .qz-emo-cards {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px 14px;
    align-content: start;
    align-items: stretch;
    scrollbar-width: none;
  }
  .qz-emo-m .qz-emo-cards::-webkit-scrollbar {
    display: none;
  }
  .qz-emo-m .qz-emo-cards > li {
    min-width: 0;
  }
  .qz-emo-m .qz-emo-card {
    display: block;
    background: var(--qz-emo-card);
    border: 1px solid var(--qz-emo-border-soft);
    border-radius: 12px;
    padding: 14px 10px 12px;
    text-align: center;
  }
  .qz-emo-m .qz-emo-card:active {
    background: var(--qz-emo-card-hover);
  }
  .qz-emo-m .qz-emo-card__img {
    height: 78px;
    display: block;
    width: 100%;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .qz-emo-m .qz-emo-card__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .qz-emo-m .qz-emo-card__name {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--qz-emo-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qz-emo-m .qz-emo-card__desc {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--qz-emo-text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qz-emo-m .qz-emo-card__price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--qz-emo-accent-text);
  }
  .qz-emo-m .qz-emo-card__price::before {
    content: "P";
    font-weight: 800;
  }

  /* 상세 히어로 */
  .qz-emo-m .qz-emo-hero {
    flex: none;
    text-align: center;
    padding: 20px 12px 12px;
    background: var(--qz-emo-surface-sub);
    border-bottom: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-hero__img {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    background: var(--qz-emo-surface);
    border: 1px solid var(--qz-emo-border-soft);
    border-radius: 16px;
    box-sizing: border-box;
    padding: 8px;
  }
  .qz-emo-m .qz-emo-hero__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .qz-emo-m .qz-emo-hero__name {
    font-size: 16px;
    font-weight: 800;
    color: var(--qz-emo-text);
  }
  .qz-emo-m .qz-emo-hero__meta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--qz-emo-text-muted);
  }

  /* 섹션 래퍼 */
  .qz-emo-m .qz-emo-section {
    padding: 14px 12px 0;
  }

  .qz-emo-m .qz-emo-section:last-child {
    padding-bottom: 14px;
  }

  .qz-emo-m .qz-emo-section__title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--qz-emo-text-muted);
    letter-spacing: .02em;
  }

  /* 상세 미리보기 타일 */
  .qz-emo-m .qz-emo-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    background: var(--qz-emo-surface-sub);
    border-radius: 12px;
  }
  .qz-emo-m .qz-emo-tiles > li {
    min-width: 0;
  }
  .qz-emo-m .qz-emo-tiles__item {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--qz-emo-surface);
    border: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-tiles__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 상세/선물 화면 셸 레이아웃 */
  .qz-emo-m .qz-emo-detail,
  .qz-emo-m .qz-emo-gift {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--qz-emo-surface);
  }
  .qz-emo-m .qz-emo-detail__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .qz-emo-m .qz-emo-detail__scroll::-webkit-scrollbar {
    display: none;
  }

  /* 안내 블록 */
  .qz-emo-m .qz-emo-info {
    background: var(--qz-emo-surface-sub);
    border-radius: 12px;
    padding: 4px 12px;
  }
  .qz-emo-m .qz-emo-info__row {
    padding: 12px 0;
    border-top: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-info__row:first-child {
    border-top: 0;
  }
  .qz-emo-m .qz-emo-info__title {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--qz-emo-text);
  }
  .qz-emo-m .qz-emo-info__text {
    font-size: 12px;
    font-weight: 400;
    color: var(--qz-emo-text-sub);
    line-height: 1.6;
    word-break: break-word;
  }

  /* 하단 액션 바 */
  .qz-emo-m .qz-emo-actions {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 12px 12px 14px;
    border-top: 1px solid var(--qz-emo-border-soft);
    background: var(--qz-emo-surface);
    box-shadow: 0 -4px 12px var(--qz-emo-shadow);
  }

  .qz-emo-m .qz-emo-buybar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--qz-emo-border-soft);
    background: var(--qz-emo-surface);
    box-shadow: 0 -4px 12px var(--qz-emo-shadow);
  }
  .qz-emo-m .qz-emo-buybar__price {
    flex: 1;
    font-size: 14px;
    font-weight: 800;
    color: var(--qz-emo-accent-text);
  }

  /* 버튼 */
  .qz-emo-m .qz-emo-btn {
    height: 44px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--qz-emo-text);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    transition: background-color 120ms ease;
  }
  .qz-emo-m .qz-emo-btn--block {
    width: 100%;
  }
  .qz-emo-m .qz-emo-btn--primary {
    background: var(--qz-emo-accent);
    color: var(--qz-emo-on-accent);
  }
  .qz-emo-m .qz-emo-btn--primary:active {
    background: var(--qz-emo-accent-text);
  }
  .qz-emo-m .qz-emo-btn--ghost {
    background: var(--qz-emo-surface-sub);
    color: var(--qz-emo-text-sub);
    border: 1px solid var(--qz-emo-border);
  }
  .qz-emo-m .qz-emo-btn--ghost:active {
    background: var(--qz-emo-card-hover);
  }

  /* 확인 레이어 */
  .qz-emo-m .qz-emo-confirm {
    display: none;
    position: absolute;
    inset: 0;
  }
  .qz-emo-m .qz-emo-confirm.is-open {
    display: block;
  }
  .qz-emo-m .qz-emo-confirm__dim {
    position: absolute;
    inset: 0;
    background: var(--qz-emo-dim);
  }
  .qz-emo-m .qz-emo-confirm__box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 320px;
    background: var(--qz-emo-surface);
    border: 1px solid var(--qz-emo-border);
    border-radius: 12px;
    padding: 20px;
  }
  .qz-emo-m .qz-emo-confirm__text {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--qz-emo-text);
  }
  .qz-emo-m .qz-emo-confirm__text strong {
    color: var(--qz-emo-accent-text);
    font-weight: 800;
  }
  .qz-emo-m .qz-emo-confirm__btns {
    display: flex;
    gap: 8px;
    margin-top: 28px;
  }
  .qz-emo-m .qz-emo-confirm__btns .qz-emo-btn {
    flex: 1;
  }

  /* 선물 검색 바 */
  .qz-emo-m .qz-emo-search {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--qz-emo-border-soft);
    background: var(--qz-emo-surface);
  }
  .qz-emo-m .qz-emo-search__back,
  .qz-emo-m .qz-emo-search__btn {
    flex: none;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--qz-emo-fill-soft);
    color: var(--qz-emo-text-sub);
    font-size: 12px;
    font-weight: 700;
  }
  .qz-emo-m .qz-emo-search__back::after {
    content: "←";
  }
  .qz-emo-m .qz-emo-search__btn {
    padding: 0 12px;
    width: auto;
  }
  .qz-emo-m .qz-emo-search__btn::after {
    content: "검색";
  }
  .qz-emo-m .qz-emo-search__input {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    border: 0;
    /* light-theme.css 의 unlayered `body.light-theme input[type=text]` 가 border-color 를 덮으므로 inset shadow 로 그린다 */
    box-shadow: inset 0 0 0 1px var(--qz-emo-border-strong);
    background: var(--qz-emo-surface-sub);
    color: var(--qz-emo-text);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 400;
  }
  .qz-emo-m .qz-emo-search__input:focus {
    box-shadow: inset 0 0 0 1px var(--qz-emo-accent);
  }
  .qz-emo-m .qz-emo-search__input::placeholder {
    color: var(--qz-emo-text-muted);
  }

  /* 선물 대상 사용자 목록 */
  .qz-emo-m .qz-emo-users {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .qz-emo-m .qz-emo-users::-webkit-scrollbar {
    display: none;
  }
  .qz-emo-m .qz-emo-users__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--qz-emo-border-soft);
    transition: background-color 120ms ease;
  }
  .qz-emo-m .qz-emo-users__item:hover {
    background: var(--qz-emo-card-hover);
  }
  .qz-emo-m .qz-emo-users__thumb {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--qz-emo-card);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qz-emo-m .qz-emo-users__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .qz-emo-m .qz-emo-users__nick {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--qz-emo-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qz-emo-m .qz-emo-users__badge {
    width: 15px;
    height: 15px;
    flex: none;
  }
  .qz-emo-m .qz-emo-users__send {
    flex: none;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--qz-emo-fill-soft);
    font-size: 12px;
    font-weight: 700;
    color: var(--qz-emo-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 페이지네이션 */
  .qz-emo-m .qz-emo-pager {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--qz-emo-border-soft);
  }
  .qz-emo-m .qz-emo-pager .paging-wrap,
  .qz-emo-m .qz-emo-pager .paging-area,
  .qz-emo-m .qz-emo-pager ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .qz-emo-m .qz-emo-pager a:hover {
    background: var(--qz-emo-surface-sub);
  }
  .qz-emo-m .qz-emo-pager a {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--qz-emo-text-sub);
  }
  .qz-emo-m .qz-emo-pager li a.active {
    background: var(--qz-emo-accent);
    color: var(--qz-emo-on-accent);
  }
  .qz-emo-m .qz-emo-pager .page-jump {
    min-width: auto;
    padding: 0 10px;
    color: var(--qz-emo-text-sub);
  }

  /* 빈 상태 */
  .qz-emo-m .qz-emo-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 12px;
    text-align: center;
    margin: 14px;
    background: var(--qz-emo-surface-sub);
    border-radius: 12px;
  }

  @media (prefers-reduced-motion: reduce) {
    .qz-emo-m * {
      transition: none;
      animation: none;
    }
  }

  /* 스택이 쌓였을 때(상세·선물) 닫기 버튼이 뒤로 아이콘으로 바뀐다. JS 가 .is-back 을 토글한다.
     크기 24px 은 X(18 viewBox·stroke 1 → 16px 렌더 = 0.89px)와 선 굵기를 맞추기 위한 값 —
     ic_button_back 은 30 viewBox·stroke 1 이라 24px 에서 0.80px 이 된다 */
  .qz-emo-m .qz-emo-m__head-close.is-back::before {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url(../../images/common/ic_button_back.svg);
    mask-image: url(../../images/common/ic_button_back.svg);
  }
}