@charset "utf-8";

/* 5종 리액션(추천확장) */
.reco-react-wrap { text-align:center; }
.reco-react { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.reco-react-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding:.45rem .75rem;
  line-height:1;
}
.reco-react-btn .reco-emoji { font-size:1.05rem; }
.reco-react-btn .reco-label { font-size:.9rem; }
.reco-react-btn .reco-count {
  font-size:.9rem;
  margin-left:.15rem;
  font-weight:600;
}
.reco-react-btn.is-active {
  border-color:rgba(0,0,0,.35);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}

.reco-react.is-loading .reco-react-btn { pointer-events:none; }
.reco-react-btn:focus, .reco-react-btn:focus-visible { outline:none; }


/* 댓글 리액션 */
.reco-react-comment{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.reco-react.is-loading{pointer-events:none}
.reco-react-btn.is-active{font-weight:700}
.reco-react-btn:focus,.reco-react-btn:focus-visible{outline:none;box-shadow:none}


/* Reaction - common */
.reco-react { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.reco-react .reco-react-btn.is-active { border-color: currentColor; font-weight: 600; }
.reco-react.is-loading { pointer-events:none; }

/* Comment reaction folding */
.reco-react-comment { justify-content:flex-end; }
.reco-react-comment .reco-react-summary { display:flex; gap:8px; align-items:center; justify-content:flex-end; width:100%; }
.reco-react-comment .reco-react-sum { font-size: 12px; opacity: .9; }
.reco-react-comment .reco-cmt-toggle { border:0; background:transparent; padding:2px 6px; font-size: 14px; }
.reco-react-comment .reco-react-box { display:none; gap:8px; align-items:center; justify-content:flex-end; width:100%; }
.reco-react-comment.is-open .reco-react-box { display:flex; }
.reco-react-comment.is-open .reco-react-summary { display:none; }
.reco-react-comment .reco-cmt-close { border:0; background:transparent; padding:2px 6px; font-size: 18px; line-height:1; opacity:.7; }
.reco-react-comment .reco-react-total-wrap { font-size:12px; opacity:.8; margin-left:4px; }

/* iOS focus outline */
.reco-react button:focus, .reco-react button:focus-visible { outline:none; }



/* ================================
   Reco React UI tweak: label under emoji + mobile short labels
   ================================ */
.reco-react-wrap { text-align:center; }
.reco-react { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.reco-react-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0 !important;
  background:transparent !important;
  padding:8px 10px;
}
.reco-react-btn .reco-emoji{ font-size:28px; line-height:1; }
.reco-react-btn .reco-text{ display:flex; gap:6px; font-size:14px; line-height:1.2; align-items:baseline; }
.reco-react-btn .reco-count, .reco-react-btn .reco-react-count{ font-weight:600; }

/* keep focus clean */
.reco-react-btn:focus,
.reco-react-btn:active,
.reco-react-btn:focus-visible{ outline:none !important; box-shadow:none !important; }
.reco-react-btn{ -webkit-tap-highlight-color: transparent; }

/* Comment: align similar */
.reco-react-comment{ margin-top:10px; }
.reco-react-comment .reco-react{ justify-content:flex-start; gap:14px; }
.reco-react-comment .reco-react-btn{ padding:6px 8px; }
.reco-react-comment .reco-react-btn .reco-emoji{ font-size:22px; }
.reco-react-comment .reco-react-btn .reco-text{ font-size:12px; gap:4px; }

@media (max-width: 575.98px){
  .reco-react { gap:14px; }
  .reco-react-btn .reco-emoji{ font-size:24px; }
  .reco-react-btn .reco-text{ font-size:12px; gap:4px; }
}


/* ================================
   Comment size fix (smaller than post)
   ================================ */
.reco-react-comment .reco-react{
  gap:10px;
}
.reco-react-comment .reco-react-btn{
  padding:4px 6px;
}
.reco-react-comment .reco-react-btn .reco-emoji{
  font-size:18px !important;
}
.reco-react-comment .reco-react-btn .reco-text{
  font-size:11px !important;
  gap:3px;
}
.reco-react-comment .reco-react-total{
  font-size:11px !important;
  margin-top:6px !important;
}


/* ================================
   Comment toggle UI (mobile collapse) - JS toggles .is-open on .reco-react-comment
   ================================ */
.reco-react-comment .reco-react-summary{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
}
.reco-react-comment .reco-cmt-toggle{
  border:0;
  background:transparent;
  padding:4px 6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.reco-react-comment .reco-react-box{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.reco-react-comment .reco-cmt-close{
  border:0;
  background:transparent;
  padding:0 6px;
  font-size:18px;
  line-height:1;
}

@media (max-width: 575.98px){
  .reco-react-comment .reco-react-box{ display:none; }
  .reco-react-comment.is-open .reco-react-box{ display:flex; }
}


/* ================================
   v6: Reliable comment toggle
   - Desktop: default OPEN, toggle collapses/expands
   - Mobile: default CLOSED, toggle opens/closes
   Classes:
     .is-collapsed (desktop hide)
     .is-open (mobile show)
   ================================ */
.reco-react-comment .reco-react-summary{
  display:flex;
  align-items:center;
  gap:10px;
}
.reco-react-comment .reco-cmt-toggle{
  border:0;
  background:transparent;
  padding:4px 6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
/* total text alignment (less left) */
.reco-react-comment .reco-react-total{
  margin-left:auto;
  text-align:right;
  white-space:nowrap;
}

.reco-react-comment .reco-react-box{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
/* desktop collapse */
.reco-react-comment.is-collapsed .reco-react-box{ display:none; }

/* mobile default closed */
@media (max-width: 575.98px){
  .reco-react-comment .reco-react-total{
    margin-left:0;
    text-align:left;
  }
  .reco-react-comment .reco-react-box{ display:none; }
  .reco-react-comment.is-open .reco-react-box{ display:flex; }
  /* if someone toggled collapsed on desktop then resized, is-open wins */
  .reco-react-comment.is-open.is-collapsed .reco-react-box{ display:flex; }
}


/* ================================
   v7: total text under reactions (centered)
   ================================ */
.reco-react-comment .reco-react-total-line{
  text-align:center;
}


/* ================================
   v8: Comment toggle unified (mobile + PC)
   - Default CLOSED on all sizes
   - Open when .is-open is present
   ================================ */
.reco-react-comment .reco-react-box{ display:none !important; }
.reco-react-comment.is-open .reco-react-box{ display:flex !important; }


/* ================================
   v9: Comment toggle/total positioning (centered)
   ================================ */
.reco-react-comment{
  width:100%;
}
/* Center the summary (😊 리액션 버튼) */
.reco-react-comment .reco-react-summary{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 6px 0 4px;
}
/* Center reaction buttons when opened */
.reco-react-comment .reco-react-box{
  width:100%;
  justify-content:center;
}

/* Make the toggle look compact */
.reco-react-comment .reco-cmt-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Center the "총 n명이 반응했습니다" line under the reactions */
.reco-react-comment .reco-react-total-line{
  width:100%;
  text-align:center;
  margin-top:6px;
}


/* ================================
   v10: Comment UI right aligned + tight total spacing
   ================================ */

/* Align toggle to right */
.reco-react-comment .reco-react-summary{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin: 4px 0 2px;
}

/* Align reaction buttons to right */
.reco-react-comment .reco-react-box{
  width:100%;
  justify-content:flex-end;
}

/* Tight spacing for total text */
.reco-react-comment .reco-react-total-line{
  width:100%;
  text-align:right;
  margin-top:2px;
  margin-bottom:2px;
  font-size:12px;
}

/* ================================
   List badge (😊 + count)
   ================================ */
.reco-list-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
}
.reco-list-badge .reco-emoji{ font-size:14px; line-height:1; }