/* =========================================================================
   JNC Holdings — Buttons (deep variant system)
   Requires colors_and_type.css + semantic-roles.css + jnc-components.css(.jbtn base).
   이 파일은 기존 `.jbtn` 베이스를 확장한다(파괴 없음). 추가하는 축:
     · 강조 단계(emphasis) — primary > secondary > tonal > tertiary > ghost > link
       (M3 5\ub2e8\uacc4 filled/tonal/outlined/text + Carbon variants \uace8\uaca9 \ucc28\uc6a9,
        m3.material.io/components/all-buttons / carbondesignsystem.com/components/button)
     · \ud06c\uae30 xs~xl (Carbon 7\ub2e8\uacc4 \uc911 \uc81c\ud488\uc6a9 5\ub2e8\uacc4\ub85c \uc555\ucd95)
     · \uc0c1\ud0dc/\uc218\uc2dd \u2014 loading \u00b7 fluid(\uc804\ud3ed) \u00b7 toggle(aria-pressed) \u00b7 \uc544\uc774\ucf58 \uc704\uce58
     · icon-button \ud328\ubc00\ub9ac \u00b7 split button \u00b7 button group \u00b7 fluid \ubc84\ud2bc-\uc14b
   \uc778\uc9c0\uadfc\uac70: \uac15\uc870\ub294 \ud76c\uc18c\ud558\uac8c(\uaddc\uce59 1.6 Von Restorff) \u2014 \ud55c \ud654\uba74 primary 1\uac1c \uc6d0\uce59
   (Carbon: one primary per page). \uac15\uc870 \uc0ac\ub2e4\ub9ac\ub85c \uc2dc\uc120\uc744 \uc720\ub3c4(\uaddc\uce59 1.4).
   ========================================================================= */

/* ---------- size: add XS (dense), keep sm/md/lg/xl from base ---------- */
.jbtn.xs { height: var(--control-h-xs); font-size: 13px; padding: 0 10px; gap: 6px; }
.jbtn.icon-only.sm { width: var(--control-h-sm); padding: 0; }
.jbtn.icon-only.xs { width: var(--control-h-xs); padding: 0; }
.jbtn.icon-only.xl { width: var(--control-h-xl); padding: 0; }

/* ---------- icon placement -------------------------------------------
   base now CENTERS content. `.lead` = icon before label (M3 leading icon),
   `.spread` (in base) = trailing icon pushed to the edge (Carbon).            */
.jbtn.lead    { flex-direction: row-reverse; }
.jbtn.center  { justify-content: center; }   /* legacy alias — base already centers */
.jbtn .ico svg { width: var(--icon-sm); height: var(--icon-sm); }
.jbtn.xs .ico svg, .jbtn.sm .ico svg { width: var(--icon-xs); height: var(--icon-xs); }
.jbtn.lg .ico svg, .jbtn.xl .ico svg { width: var(--icon-md); height: var(--icon-md); }

/* ---------- NEW emphasis tiers ---------------------------------------- */
/* TONAL — the missing middle ground (M3 filled-tonal): brand tint fill,
   saturated-brand text. More emphasis than outline, calmer than filled. */
.jbtn.tonal { background: var(--brand-container); color: var(--on-brand-container); }
.jbtn.tonal:hover  { background: var(--brand-soft); }
.jbtn.tonal:active { background: var(--brand-container-pressed); }

/* LINK — lowest-emphasis text action, inline-friendly (M3 text button) */
.jbtn.link {
  background: transparent; color: var(--link); padding-left: 4px; padding-right: 4px; gap: 6px;
  height: auto; min-height: 0;
}
.jbtn.link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.18em; background: transparent; }

/* DANGER family — Carbon danger / danger-tertiary / danger-ghost.
   Always --error (UI danger), NEVER market --negative (규칙 4.2). */
.jbtn.danger-tertiary { background: transparent; color: var(--error); border-color: var(--error); }
.jbtn.danger-tertiary:hover { background: var(--error); color: var(--on-error); }
.jbtn.danger-ghost { background: transparent; color: var(--error); }
.jbtn.danger-ghost:hover { background: var(--error-soft); }

/* ---------- width behavior (Carbon fluid) ----------------------------- */
.jbtn.fluid, .jbtn.block { width: 100%; }
.jbtn.fluid.spread, .jbtn.block.spread { justify-content: space-between; }

/* ---------- toggle button (aria-pressed) ------------------------------ */
.jbtn.toggle { background: var(--surface); color: var(--fg2); border-color: var(--border-strong); }
.jbtn.toggle:hover { color: var(--fg1); border-color: var(--brand); }
.jbtn.toggle[aria-pressed="true"] { background: var(--state-selected); color: var(--on-state-selected); border-color: var(--state-selected); }

/* ---------- loading state (keeps footprint; swaps content) ------------ */
.jbtn.loading { position: relative; color: transparent !important; pointer-events: none; }
.jbtn.loading > * { visibility: hidden; }
.jbtn.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid currentColor; border-radius: var(--r-pill); visibility: visible;
  border-top-color: transparent; animation: jspin .7s linear infinite;
  color: var(--brand-contrast);
}
.jbtn.tonal.loading::after, .jbtn.ghost.loading::after, .jbtn.tertiary.loading::after, .jbtn.link.loading::after { color: var(--brand); }

/* =========================================================================
   ICON BUTTON family  —  .jicon-btn  (square; standard/filled/tonal/outlined/danger)
   M3 icon-button styles + toggle [m3.material.io/components/icon-buttons].
   기본은 ghost(standard); \uac15\uc870\uac00 \ud544\uc694\ud560 \ub54c\ub9cc fill/tonal/outline.
   ========================================================================= */
.jicon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--control-h-md); height: var(--control-h-md); padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--fg2);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}
.jicon-btn svg { width: var(--icon-md); height: var(--icon-md); }
.jicon-btn:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jicon-btn:active { background: var(--state-pressed-surface); }
.jicon-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jicon-btn:disabled, .jicon-btn[aria-disabled="true"] { color: var(--state-disabled-content); cursor: not-allowed; pointer-events: none; }
/* sizes */
.jicon-btn.xs { width: var(--control-h-xs); height: var(--control-h-xs); }
.jicon-btn.xs svg { width: var(--icon-sm); height: var(--icon-sm); }
.jicon-btn.sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.jicon-btn.sm svg { width: var(--icon-sm); height: var(--icon-sm); }
.jicon-btn.lg { width: var(--control-h-lg); height: var(--control-h-lg); }
.jicon-btn.lg svg { width: var(--icon-lg); height: var(--icon-lg); }
/* styles */
.jicon-btn.filled  { background: var(--brand); color: var(--on-brand); }
.jicon-btn.filled:hover { background: var(--brand-strong); color: var(--on-brand); }
.jicon-btn.tonal   { background: var(--brand-container); color: var(--on-brand-container); }
.jicon-btn.tonal:hover { background: var(--brand-soft); }
.jicon-btn.outlined { border-color: var(--border-strong); }
.jicon-btn.outlined:hover { border-color: var(--brand); color: var(--brand-stronger); background: transparent; }
.jicon-btn.danger  { color: var(--error); }
.jicon-btn.danger:hover { background: var(--error-soft); color: var(--error); }
/* toggle (M3: outlined when off, filled when on) */
.jicon-btn.toggle[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
@media (pointer: coarse) { .jicon-btn.sm, .jicon-btn.md { min-width: var(--touch-min); min-height: var(--touch-min); } }

/* =========================================================================
   SPLIT BUTTON  —  .jsplit  (primary action + attached menu trigger)
   Carbon combo/menu button anatomy. \uc8fc \uc561\uc158 + \uad6c\ubd84\uc120 + \uce90\ub7ff \ud2b8\ub9ac\uac70.
   ========================================================================= */
.jsplit { display: inline-flex; align-items: stretch; }
.jsplit > .jbtn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.jsplit > .jsplit-trigger {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; cursor: pointer;
  border: 0; border-left: 1px solid rgba(255,255,255,0.28);
  border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm);
  background: var(--brand); color: var(--on-brand);
  transition: background var(--transition-base);
}
.jsplit > .jsplit-trigger:hover { background: var(--brand-strong); }
.jsplit > .jsplit-trigger:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jsplit > .jsplit-trigger svg { width: var(--icon-sm); height: var(--icon-sm); }
/* secondary-styled split */
.jsplit.secondary > .jbtn:first-child, .jsplit.secondary > .jsplit-trigger { background: var(--secondary); color: var(--on-secondary); }
.jsplit.secondary > .jsplit-trigger { border-left-color: rgba(255,255,255,0.22); }

/* =========================================================================
   BUTTON GROUP  —  .jbtn-group  (attached action cluster, single emphasis)
   \uc120\ud0dd\uc6a9 \uc138\uadf8\uba3c\ud2b8(.jsegment)\uc640 \ub2e4\ub984: \uc5ec\ub7ec \ub3c5\ub9bd \uc561\uc158\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ubb36\uc74c.
   ========================================================================= */
.jbtn-group { display: inline-flex; }
.jbtn-group > .jbtn { border-radius: 0; border-color: var(--border-strong); }
.jbtn-group > .jbtn:not(:first-child) { margin-left: -1px; }
.jbtn-group > .jbtn:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.jbtn-group > .jbtn:last-child  { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.jbtn-group > .jbtn:hover, .jbtn-group > .jbtn:focus-visible { position: relative; z-index: 1; }

/* =========================================================================
   FLUID BUTTON SET  —  .jbtn-set  (Carbon modal/footer: bleed, equal width)
   \ub2e4\uc774\uc5bc\ub85c\uadf8\u00b7\ubaa8\ubc14\uc77c \ud478\ud130\uc758 \ub3d9\ub4f1\ud3ed \ubc84\ud2bc \uc30d. primary\ub294 \uc624\ub978\ucabd(\ub9c8\ubc95\uc0ac \uad00\ub840).
   ========================================================================= */
.jbtn-set { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.jbtn-set > .jbtn { border-radius: 0; justify-content: center; height: var(--control-h-xl); }
.jbtn-set > .jbtn:first-child { border-bottom-left-radius: var(--r-sm); }
.jbtn-set > .jbtn:last-child  { border-bottom-right-radius: var(--r-sm); }
/* stack vertically on narrow screens (Carbon: primary on bottom) */
@media (max-width: 480px) {
  .jbtn-set { grid-auto-flow: row; }
  .jbtn-set > .jbtn:first-child { border-radius: 0; }
  .jbtn-set > .jbtn:last-child  { border-radius: 0; }
}