/*
  ed2_buttons.css
  - 전 페이지 버튼을 편집창(editor_v2)의 ed2-btn 계열과 같은 규칙으로 통일
  - HTML 수정 없이, 기존 클래스(.btn, .wd-btn, .rv-write-btn 등)를 selector로 매핑
*/

@layer components {

/* Base button (editor_v2's ed2-btn spec) */
:where(
  .ed2-btn, .btn,
  .wd-btn, .wd-icon-btn, .wd-more-btn,
  .rv-write-btn, .rv-submit,
  .wd-eval-btn, .wd-mini-btn,
  .wd-fav-btn, .wd-vote-btn,
  /* overflow menu items should look/behave like buttons */
  .wd-overflow-item
){
  appearance:none;
  border:1px solid var(--ed2-line);
  background:var(--ed2-card);
  color:var(--ed2-text);
  height:40px;
  padding:0 14px;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* NOTE
  - icon-only / circle buttons (댓글 👍👎, 리뷰 👍👎 등)은 ed2_icon_buttons.css에서 통합 관리한다.
  - 페이지별 CSS에서 .comment-vote / .rv-vote 등 스킨을 직접 정의하지 않는다.
*/

:where(
  .ed2-btn, .btn,
  .wd-btn, .wd-icon-btn, .wd-more-btn,
  .rv-write-btn, .rv-submit,
  .wd-eval-btn, .wd-mini-btn,
  .wd-fav-btn, .wd-vote-btn,
  .wd-overflow-item
):hover{
  border-color:#D1D5DB;
}

:where(
  .ed2-btn, .btn,
  .wd-btn, .wd-icon-btn, .wd-more-btn,
  .rv-write-btn, .rv-submit,
  .wd-eval-btn, .wd-mini-btn,
  .wd-fav-btn, .wd-vote-btn,
  .wd-overflow-item
):focus-visible{
  outline:none;
  border-color:rgba(107,196,184,.65);
  box-shadow:0 0 0 4px rgba(107,196,184,.18);
}

/* Optional: active/toggle state (class-based) */
:where(.btn, .wd-btn, .wd-icon-btn, .wd-overflow-item).is-active{
  border-color:rgba(107,196,184,.65);
  box-shadow:0 0 0 4px rgba(107,196,184,.12);
  background: color-mix(in srgb, var(--ed2-mint) 6%, var(--ed2-card));
}

/* Disabled state (class-based for <a>/<span>, attribute-based for <button>) */
:where(
  .ed2-btn, .btn,
  .wd-btn, .wd-icon-btn, .wd-more-btn,
  .rv-write-btn, .rv-submit,
  .wd-eval-btn, .wd-mini-btn,
  .wd-fav-btn, .wd-vote-btn,
  .wd-overflow-item
).is-disabled,
:where(
  .ed2-btn, .btn,
  .wd-btn, .wd-icon-btn, .wd-more-btn,
  .rv-write-btn, .rv-submit,
  .wd-eval-btn, .wd-mini-btn,
  .wd-fav-btn, .wd-vote-btn,
  .wd-overflow-item
)[disabled]{
  opacity:.55;
  pointer-events:none;
  cursor: default;
}

/* Primary mapping */
:where(.ed2-btn--primary, .btn-primary, .wd-btn.primary, .wd-eval-btn.primary, .rv-submit, .rv-write-btn, .wd-vote-up){
  background:var(--ed2-mint);
  border-color:transparent;
  color:#fff;
}
:where(.ed2-btn--primary, .btn-primary, .wd-btn.primary, .wd-eval-btn.primary, .rv-submit, .rv-write-btn, .wd-vote-up):hover{
  background:var(--ed2-mint-2);
}

/* Ghost / outline mapping */
:where(.ed2-btn--ghost, .btn-ghost, .btn-secondary, .wd-btn-outline, .wd-more-btn, .wd-vote-down){
  background:transparent;
}

/* Link button (keep minimal) */
:where(.btn-link){
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  padding:0 8px;
  height:auto;
}

/* Danger mapping */
:where(.btn-danger, .wd-icon-btn.danger, .wd-btn.danger, .wd-overflow-item.danger){
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  color:#991b1b;
}
:where(.btn-danger, .wd-icon-btn.danger, .wd-btn.danger, .wd-overflow-item.danger):hover{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.45);
}

/* Icon button sizing support (existing class) */
.btn-icon{
  width:44px;
  padding:0;
  justify-content:center;
}

/* wd-icon-btn icon-only square sizing (overflow ⋯, icon-only actions) */
:where(.wd-icon-btn.icon-only){
  width:40px;
  padding:0;
}

/* Default SVG sizing inside icon buttons */
:where(.wd-icon-btn svg){
  width:18px;
  height:18px;
  display:block;
}


/* Small button support */
.btn-sm{ height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn.mini, .btn-mini{ height:32px; padding:0 10px; font-size:12px; border-radius:10px; }


/* =========================================================
   SNS badge buttons (actor/detail/list shared)
   - "앱 아이콘" 느낌: 브랜드 배경 + 흰색 glyph + hover lift
   - 사용: class="wd-icon-btn icon-only sns-badge sns-twitter" 등
========================================================= */
.wd-icon-btn.sns-badge{
  width:36px;
  height:36px;
  padding:0;
  border:none;
  border-radius:10px;
  color:#fff;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.wd-icon-btn.sns-badge:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow: var(--shadow-md);
  filter: saturate(1.05);
}

.wd-icon-btn.sns-badge:active{
  transform: translateY(0) scale(0.98);
}

.wd-icon-btn.sns-badge svg{
  width:18px;
  height:18px;
  display:block;
}

/* Platform colors */
.wd-icon-btn.sns-twitter{ background:#1DA1F2; }        /* Twitter/X */
.wd-icon-btn.sns-instagram{ 
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}
.wd-icon-btn.sns-naver{ background:#03C75A; }
.wd-icon-btn.sns-line{ background:#06C755; }
.wd-icon-btn.sns-kakao{ background:#FEE500; color:#191600; } /* KakaoTalk */
.wd-icon-btn.sns-official{ background:#4B5563; }      /* site */
.wd-icon-btn.sns-fanza{ background:#7C3AED; }         /* FANZA */

}