.ll-reactions {
    box-sizing: border-box;
      width: 100%;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      padding:30px;
      border-bottom:1px solid #eee;
}

.ll-rx-chips{ text-align: center; }
.ll-rx-hint{ margin-bottom:12px; color:var(--darkgray); font-size: var(--text-small); }

.ll-rx-chipwrap{ max-width:560px; maring: 0 auto; display:flex; gap:20px; justify-content:space-between;}

.ll-rx-chipwrap .is-readonly {
  cursor:default;
}

.is-readonly:hover .emoji {
  animation: none !important;
}

.ll-rx-chip{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; cursor:pointer;
}
.ll-rx-chips[data-locked="1"] .ll-rx-chip { cursor: default; pointer-events: none; }

.ll-rx-chip .circle{
  width:72px; height:72px; border-radius:999px; position:relative;
  background: var(--shadow); display:grid; place-items:center;
  transition:border-color .2s ease, box-shadow .2s ease;
  border:2px solid transparent;
  overflow:hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ll-rx-chip .emoji{ font-size:32px; position:relative; z-index:2; }
.ll-rx-chip .fill{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  border-bottom-left-radius:999px; border-bottom-right-radius:999px;
  z-index:1; transition: height .25s ease;
  background:#e5e7eb;
}

.ll-rx-chip .label{ font-size:var(--text-small); color:var(--ink); margin-top:4px; }
.ll-rx-chip .val{ font-size:var(--text-tiny); color:var(--gray); line-height: 1;}

.ll-rx-chip.is-selected .circle{
  border-color: var(--llred);
  box-shadow:0 0 0 2px rgba(231,106,106,0.15);
}

/* preset */
.ll-rx-chip .fill.fill-like{   background:#ffe5ef; }
.ll-rx-chip .fill.fill-best{   background:#FEF1AE; }
.ll-rx-chip .fill.fill-wow{    background:#DEF2ED; }
.ll-rx-chip .fill.fill-learn{ background:#DEEEF7; }
.ll-rx-chip .fill.fill-useful{    background:#EBEAFA; }

@media (max-width: 480px){
  .ll-rx-chipwrap{ gap:14px; justify-content:space-between; }
  .ll-rx-chip .circle{ width:64px; height:64px; }
  .ll-rx-chip .emoji{ font-size:28px; }
}

/* Admin debug panel */
.ll-rx-debug{
  margin-top:12px; padding:10px; border:1px dashed #e5e7eb; border-radius:8px;
}
.ll-rx-debug > summary{ cursor:pointer; font-weight:600; }

/* Modal (safelist) */
.llrx-modal[aria-hidden="true"]{ display:none !important; }
.llrx-modal{ position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; }
.llrx-header {display: flex; justify-content: space-between;}
.llrx-backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.45); }
.llrx-dialog{ position:relative; background:var(--paper); border-radius:10px; padding:20px 16px; width:min(420px, calc(100% - 32px)); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.llrx-title{ margin:0 0 6px; }
.llrx-desc{ margin:0 0 14px; }
.llrx-actions{ display:flex; gap:8px; justify-content:center; }
.llrx-modal-open{ overflow:hidden; }


/* ===== Mobile-first responsive tweaks ===== */

/* 1) 칩 래퍼: 플렉스 → 반응형 그리드로 전환 (자동 줄바꿈 + 균등 배치) */
.ll-rx-chipwrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 14px;
}

/* 2) 칩 터치 타깃/간격 개선 */
.ll-rx-chip {
  padding: 6px 2px;
  /* 터치 여백 */
  min-width: 0;
  /* 라벨 줄바꿈 허용 */
  -webkit-tap-highlight-color: transparent;
}

.ll-rx-chip .circle {
  width: 64px;
  height: 64px;
  /* 기본(모바일) 크기 */
}

.ll-rx-chip .emoji {
  font-size: 28px;
}

.ll-rx-chip .label {
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 긴 단어도 줄바꿈 */
}


/* 3) 초소형(≤360px) 단말 최적화: 2열 고정 */
@media (max-width: 360px) {
  .ll-rx-chipwrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ll-rx-chip .circle {
    width: 56px;
    height: 56px;
  }

  .ll-rx-chip .emoji {
    font-size: 24px;
  }

  .ll-rx-chip .label {
    font-size: 12px;
  }

  .ll-rx-hint {
    font-size: 13px;
  }
}

/* 4) 소형(361–480px): 3열 */
@media (min-width:361px) and (max-width: 480px) {
  .ll-rx-chipwrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 5) 중간(481–768px): 4열, 요소 조금 키우기 */
@media (min-width:481px) and (max-width: 768px) {
  .ll-rx-chipwrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .ll-rx-chip .circle {
    width: 68px;
    height: 68px;
  }

  .ll-rx-chip .emoji {
    font-size: 30px;
  }
}

/* 6) 데스크톱(≥769px): 5열, 큰 아이콘 */
@media (min-width:769px) {
  .ll-rx-chipwrap {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .ll-rx-chip .circle {
    width: 72px;
    height: 72px;
  }

  .ll-rx-chip .emoji {
    font-size: 32px;
  }

  .ll-rx-chip .label {
    font-size: 14px;
  }

}

/* 7) 모달 모바일 적합도 (여백/세이프에어리어) */
.llrx-dialog {
  max-width: 420px;
  width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
}

/* 8) Safari에서 원형 하단 채움 잘리거나 삐져나오는 문제 보강 */
.ll-rx-chip .circle {
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(circle, #000 99%, #000 100%);
}

/* 9) 관리자 디버그 패널: 모바일에서는 기본 접기 또는 숨김(선택) */
@media (max-width: 480px) {
  .ll-rx-debug {
    font-size: 12px;
  }

  /* 필요 시 완전 숨김
  .ll-rx-debug{ display:none; }
  */
}

/* ===== Always 5 in a row ===== */
.ll-rx-chipwrap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 항상 5칩 한 줄 */
  gap: 20px;
  align-items: start;
}

/* 칩/아이콘/텍스트가 화면폭에 맞춰 유연하게 축소되도록 clamp 사용 */
.ll-rx-chip {
  min-width: 0;
  /* 라벨 줄바꿈 허용 */
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

.ll-rx-chip .circle {
  width: clamp(38px, 12vw, 72px);
  height: clamp(38px, 12vw, 72px);
}

.ll-rx-chip .emoji {
  font-size: clamp(20px, 5vw, 32px);
}

.ll-rx-chip .label {
  font-size: var(--text-tiny);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 원형 내부 fill가 튀어나오는 사파리 이슈 보강 */
.ll-rx-chip .circle {
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(circle, #000 99%, #000 100%);
}

/* 잠금 시 커서/클릭 차단 유지 */
.ll-rx-chips[data-locked="1"] .ll-rx-chip {
  cursor: default;
  pointer-events: none;
}


.ll-rx-chip:hover .emoji {
  animation: ll-float 0.35s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes ll-float {
  0% {
    transform: translateY(0);
  }


  25% {
    transform: translateY(-1px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(4px);
  }

  100% {
    transform: translateY(0);
  }
}