/*
 * V3 컴포넌트. Figma `Tokenpost V3 - Library` 의 스펙 시트가 정본이다.
 * 캔버스의 컴포넌트 인스턴스는 구버전일 수 있으니 스펙을 우선한다.
 */

/* ── button ──────────────────────────────────────────────── */
/* radius 는 8(--radius-md)이다. 4 가 아니다 */
.v3_btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--btn-gap);
  height:var(--btn-h); padding:var(--btn-padding-y) var(--btn-padding-x-md);
  border:var(--btn-border-w) solid transparent; border-radius:var(--btn-radius);
  background:var(--interactive-default); color:var(--text-inverse);
  font-size:14px; font-weight:500; line-height:1.5; letter-spacing:-0.35px;
  white-space:nowrap;
}
.v3_btn:hover{background:var(--interactive-hover);}
.v3_btn:active{background:var(--interactive-pressed);}
.v3_btn:focus-visible{outline:var(--btn-focus-ring-w) solid var(--border-focus);outline-offset:var(--btn-focus-ring-offset);}
.v3_btn:disabled{opacity:var(--btn-loading-opacity);}

.v3_btn.is_ghost{background:transparent;color:var(--text-primary);border-color:var(--border-default);}
.v3_btn.is_ghost:hover{background:var(--interactive-ghost-hover);}
.v3_btn.is_text{background:transparent;color:var(--text-secondary);padding-left:0;padding-right:0;}
.v3_btn.is_text:hover{background:transparent;color:var(--text-primary);}

.v3_btn.is_xs{height:var(--btn-h-xs);padding-left:var(--btn-padding-x-xs);padding-right:var(--btn-padding-x-xs);}
.v3_btn.is_sm{height:var(--btn-h-sm);padding-left:var(--btn-padding-x-sm);padding-right:var(--btn-padding-x-sm);}
.v3_btn.is_lg{height:var(--btn-h-xl);padding-left:var(--btn-padding-x-lg);padding-right:var(--btn-padding-x-lg);}
.v3_btn.is_block{width:100%;}

/* ── input / select ──────────────────────────────────────── */
.v3_input,.v3_select{
  width:100%; height:var(--input-h);
  padding:var(--input-padding-y) var(--input-padding-x);
  border:var(--input-border-w) solid var(--input-border-default);
  border-radius:var(--input-radius);
  background:var(--input-bg); color:var(--input-text);
  font-size:14px; line-height:1.5; letter-spacing:-0.35px;
}
.v3_input::placeholder{color:var(--input-text-placeholder);}
.v3_input:focus,.v3_select:focus{outline:none;border-color:var(--input-border-focus);}
.v3_input:disabled,.v3_select:disabled{background:var(--input-bg-disabled);color:var(--input-text-disabled);}
.v3_input.is_error{border-color:var(--input-border-error);}
.v3_input_message{margin-top:var(--input-label-gap);color:var(--input-message-error);}

.v3_field{display:flex;flex-direction:column;gap:var(--input-label-gap);}
.v3_field_label{color:var(--input-label);}

/* ── tab (pill) ──────────────────────────────────────────── */
/*
 * 높이 39 고정. on/off 는 **색으로만** 가른다 — 글자 굵기는 같다.
 * radius 는 8 이다. 999(알약 칩)가 아니다.
 * 모바일에서는 권장 터치 타깃 44 를 맞추려고 높이를 늘린다.
 */
.v3_tablist{
  display:flex; gap:var(--sp-2);
  overflow-x:auto; scrollbar-width:none;
  padding:var(--sp-1) 0;
}
.v3_tablist::-webkit-scrollbar{display:none;}

.v3_tab{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:39px; padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--input-bg);
  font-size:14px; font-weight:700; line-height:1.5; letter-spacing:-0.35px;
  color:var(--gray-06);
}
.v3_tab[aria-selected="true"]{
  background:var(--gray-09); border-color:var(--gray-09); color:var(--white);
}
@media (max-width:767px){
  .v3_tab{height:44px;}
}

/* ── chip (알약) ─────────────────────────────────────────── */
/* 탭과 혼동하지 않는다 — 여럿을 나열해 고르는 것이 아니라 단순 링크·키워드다 */
.v3_chip{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  height:36px; padding:0 15px;
  border:1px solid var(--border-default); border-radius:var(--radius-full);
  background:var(--surface-default); color:var(--text-secondary);
  font-size:14px; font-weight:500; line-height:1.5; letter-spacing:-0.35px;
}
.v3_chip:hover{background:var(--interactive-ghost-hover);color:var(--text-primary);}

/* ── card ────────────────────────────────────────────────── */
.v3_card{
  background:var(--surface-default);
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:var(--sp-5);
}

/* 썸네일 — 비율을 고정해 뜰 때 본문이 밀리지 않게 한다 */
.v3_thumb{
  display:block; width:100%; aspect-ratio:16 / 9;
  background:var(--placeholder-bg); border-radius:var(--radius-md);
  overflow:hidden;
}
.v3_thumb img{width:100%;height:100%;object-fit:cover;}

/* ── modal (v5 Modal · Figma 18726:5571 Web Popup Spec) ─────────
 *
 * 팝업 위에 팝업이 올라간다(MY 코인 설정 → 추가 → 전체 해제). z-index 는 여기서
 * 적지 않는다 — overlay.js 가 연 순서대로 계산한다.
 *
 * 너비는 쓰는 쪽이 style="max-width:…" 로 준다(v5 `width` prop, 기본 600).
 * 모바일도 가운데 창이다(화면 폭 - 32). v5 가 그렇다.
 * 머리·발은 고정이고 **본문만 스크롤**한다 — 목록이 길어도 저장 단추가 사라지면 안 된다.
 */
.v3_modal_dim{
  position:fixed; inset:0; display:none; background:var(--modal-dim);
  animation:v3_overlay_dim .2s ease-out;
}
.v3_modal_dim.is_open{display:block;}

.v3_modal,.v3_confirm{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  display:none; flex-direction:column; overflow:hidden;
  width:calc(100vw - 32px); max-width:600px; max-height:calc(100dvh - 48px);
  border-radius:20px; background:var(--surface-default); box-shadow:var(--elevation-2);
  animation:v3_overlay_pop .2s cubic-bezier(.32,.72,0,1);
}
.v3_modal.is_open,.v3_confirm.is_open{display:flex;}

.v3_modal_head{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) var(--sp-6); border-bottom:1px solid var(--border-default);
}
.v3_modal_heading{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);}
.v3_modal_title{margin:0;font-size:15px;font-weight:700;line-height:1.6;letter-spacing:-0.375px;color:var(--text-primary);}
.v3_modal_desc{margin:0;font-size:13px;line-height:1.5;letter-spacing:-0.325px;color:var(--text-tertiary);}
/* 닫기 × — v5 icons/ui/close.svg 20px, icon-secondary 로 칠한다 */
.v3_modal_close{
  flex:none; width:28px; height:28px; padding:var(--sp-1); border:0; cursor:pointer;
  background:var(--icon-secondary);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M2 18L18 2M18 18L2 2' stroke='black' stroke-width='1.11' stroke-linecap='round' fill='none'/></svg>") center / 20px 20px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M2 18L18 2M18 18L2 2' stroke='black' stroke-width='1.11' stroke-linecap='round' fill='none'/></svg>") center / 20px 20px no-repeat;
}
.v3_modal_body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-5) var(--sp-6);}
.v3_modal_foot{flex:none;padding:var(--sp-4) 28px var(--sp-6);border-top:1px solid var(--border-default);}

/* ── 확인 다이얼로그 (v5 ConfirmDialog · 185:18692, 340×289) ─────
 * 되돌릴 수 없는 동작에만 쓴다. 가운데 정렬 · 스크롤 없음 · 단추 둘.
 */
.v3_confirm{max-width:340px;}
.v3_confirm_top{display:flex;justify-content:flex-end;padding:var(--sp-6) var(--sp-6) 0;}
.v3_confirm_body{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:0 var(--sp-6) var(--sp-6);}
.v3_confirm_text{display:flex;flex-direction:column;align-items:center;}
.v3_confirm_title{margin:0;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-0.45px;color:var(--text-primary);}
.v3_confirm_message{margin:0;padding-top:var(--sp-1);text-align:center;font-size:15px;line-height:1.6;letter-spacing:-0.375px;color:var(--text-secondary);}
.v3_confirm_detail{width:100%;padding:var(--sp-3);border-radius:var(--radius-md);background:var(--surface-muted);}
.v3_confirm_detail p{margin:0;text-align:center;font-size:14px;line-height:1.5;letter-spacing:-0.35px;color:var(--text-secondary);}
.v3_confirm_foot{display:flex;gap:var(--sp-2);padding:0 28px var(--sp-6);}
.v3_confirm_cancel,.v3_confirm_ok{
  flex:1; height:var(--btn-h); padding:0 var(--sp-3); border:0; border-radius:var(--radius-md); cursor:pointer;
  font-size:14px; font-weight:500; letter-spacing:-0.35px;
}
.v3_confirm_cancel{background:var(--surface-inset);color:var(--text-secondary);}
.v3_confirm_ok{background:var(--interactive-default);color:var(--white);}

@keyframes v3_overlay_dim{from{opacity:0}to{opacity:1}}
@keyframes v3_overlay_pop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .v3_modal,.v3_confirm{animation:v3_overlay_dim .12s ease-out;}
}

/* ── pagination ──────────────────────────────────────────── */
.v3_paging{
  display:flex; justify-content:center; align-items:center; gap:var(--sp-1);
  margin:var(--sp-8) 0;
}
.v3_paging a,.v3_paging strong{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 var(--sp-2);
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; line-height:1.5; letter-spacing:-0.35px;
  color:var(--text-secondary);
}
.v3_paging a:hover{background:var(--interactive-ghost-hover);color:var(--text-primary);}
.v3_paging strong{background:var(--gray-09);color:var(--white);}

/* ── 비어 있을 때 ────────────────────────────────────────── */
.v3_empty{
  padding:var(--sp-8) var(--sp-4);
  text-align:center; color:var(--text-tertiary);
}