/* 기능별 버튼 색과 아이콘(2026-10-29, docs/ui/guidelines.md 버튼 절).
 * 사용: class="ui-btn ui-btn--역할". 역할은 primary·pay·secondary·danger·success·copy·download·link·retry·search.
 * 아이콘은 역할 기본값을 쓰고 ui-ico--이름(x·list·check·trash·copy·download·external·refresh·search·card)으로 바꾸거나
 * ui-ico--none 으로 끈다. 버튼 안에 이미 svg·img·i 아이콘이 있으면 덧그리지 않는다.
 * 크기·여백은 각 화면의 버튼 클래스가 정하고 여기서는 색·테두리·아이콘만 정한다.
 * 선택자 앞의 html body, 겹쳐 쓴 .ui-btn, [class*="ui-btn--"] 는 화면별 버튼 규칙(관리자 html.admin-responsive .component-button 등)보다
 * 우선하기 위한 것이다(!important 를 쓰지 않는다). */

.ui-btn--primary { --ui-btn-bg: var(--ui-color-primary); --ui-btn-fg: var(--ui-color-on-primary); --ui-btn-line: var(--ui-color-primary); --ui-btn-hover-bg: var(--ui-color-primary-hover); }
.ui-btn--pay { --ui-btn-bg: var(--ui-btn-pay); --ui-btn-fg: var(--ui-color-on-primary); --ui-btn-line: var(--ui-btn-pay); --ui-ico: var(--ui-ico-card); }
.ui-btn--secondary { --ui-btn-bg: var(--ui-color-background); --ui-btn-fg: var(--ui-btn-neutral-fg); --ui-btn-line: var(--ui-color-border); }
.ui-btn--danger { --ui-btn-bg: var(--ui-color-danger-bg); --ui-btn-fg: var(--ui-color-danger); --ui-btn-line: var(--ui-color-danger-bg); --ui-ico: var(--ui-ico-trash); }
.ui-btn--success { --ui-btn-bg: var(--ui-btn-success-bg); --ui-btn-fg: var(--ui-btn-success-fg); --ui-btn-line: var(--ui-btn-success-bg); --ui-ico: var(--ui-ico-check); }
.ui-btn--copy { --ui-btn-bg: var(--ui-btn-copy-bg); --ui-btn-fg: var(--ui-btn-copy-fg); --ui-btn-line: var(--ui-btn-copy-bg); --ui-ico: var(--ui-ico-copy); }
.ui-btn--download { --ui-btn-bg: var(--ui-btn-download-bg); --ui-btn-fg: var(--ui-btn-download-fg); --ui-btn-line: var(--ui-btn-download-bg); --ui-ico: var(--ui-ico-download); }
.ui-btn--link { --ui-btn-bg: var(--ui-color-primary-soft); --ui-btn-fg: var(--ui-color-primary); --ui-btn-line: var(--ui-color-primary-soft); --ui-ico: var(--ui-ico-external); }
.ui-btn--retry { --ui-btn-bg: var(--ui-btn-retry-bg); --ui-btn-fg: var(--ui-btn-retry-fg); --ui-btn-line: var(--ui-btn-retry-bg); --ui-ico: var(--ui-ico-refresh); }
.ui-btn--search { --ui-btn-bg: var(--ui-color-on-primary); --ui-btn-fg: var(--ui-color-primary); --ui-btn-line: var(--ui-color-border); --ui-ico: var(--ui-ico-search); }

html body .ui-btn.ui-btn[class*="ui-btn--"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--ui-btn-line); background: var(--ui-btn-bg); color: var(--ui-btn-fg);
  text-decoration: none; transition: background-color .15s, border-color .15s, filter .15s;
}
/* 진한 버튼(주요·결제)은 바탕을 진하게, 연한 버튼은 테두리를 글자색으로 바꿔 눌릴 곳을 보여 준다. */
html body .ui-btn.ui-btn[class*="ui-btn--"]:hover { border-color: var(--ui-btn-fg); }
html body .ui-btn.ui-btn.ui-btn--primary:hover { background: var(--ui-btn-hover-bg); border-color: var(--ui-btn-hover-bg); }
html body .ui-btn.ui-btn.ui-btn--pay:hover { border-color: var(--ui-btn-line); filter: brightness(.9); }
html body .ui-btn.ui-btn[class*="ui-btn--"]:disabled, html body .ui-btn.ui-btn[class*="ui-btn--"][aria-disabled="true"] { opacity: .6; cursor: not-allowed; filter: none; }

/* 아이콘: 글자색을 따라가는 선 아이콘(SVG 마스크). 이미 아이콘이 든 버튼과 ui-ico--none 은 그리지 않는다. */
html body .ui-btn.ui-btn:is([class*="ui-btn--"], [class*="ui-ico--"]):not(.ui-ico--none, .ui-btn--primary:not([class*="ui-ico--"]), .ui-btn--secondary:not([class*="ui-ico--"])):not(:has(> svg, > img, > i))::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: var(--ui-ico) center / contain no-repeat; mask: var(--ui-ico) center / contain no-repeat;
}
.ui-ico--x { --ui-ico: var(--ui-ico-x); }
.ui-ico--list { --ui-ico: var(--ui-ico-list); }
.ui-ico--check { --ui-ico: var(--ui-ico-check); }
.ui-ico--trash { --ui-ico: var(--ui-ico-trash); }
.ui-ico--copy { --ui-ico: var(--ui-ico-copy); }
.ui-ico--download { --ui-ico: var(--ui-ico-download); }
.ui-ico--external { --ui-ico: var(--ui-ico-external); }
.ui-ico--refresh { --ui-ico: var(--ui-ico-refresh); }
.ui-ico--search { --ui-ico: var(--ui-ico-search); }
.ui-ico--card { --ui-ico: var(--ui-ico-card); }

:root {
  --ui-ico-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
  --ui-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ui-ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
  --ui-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  --ui-ico-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
  --ui-ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
  --ui-ico-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12'/%3E%3C/svg%3E");
  --ui-ico-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6M11 13l9-9M15 4h5v5'/%3E%3C/svg%3E");
  --ui-ico-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-15.5-2M4 5v4h4M4 13a8 8 0 0 0 15.5 2M20 19v-4h-4'/%3E%3C/svg%3E");
  --ui-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
}

/* 공용 클래스를 역할 색에 맞춘다. 화면마다 클래스를 붙이지 않아도 같은 기능은 같은 색이 된다. */
/* 체험 화면의 "개발가이드 보기"(67곳, 새 탭 이동)는 이동 역할이다. */
.sub-area .sub-body .label-button.label-button--outline-primary {
  gap: 6px; background-color: var(--ui-color-primary-soft); border-color: var(--ui-color-primary-soft); color: var(--ui-color-primary);
}
.sub-area .sub-body .label-button.label-button--outline-primary:hover { border-color: var(--ui-color-primary); }
.sub-area .sub-body .label-button.label-button--outline-primary:not(:has(> svg, > img, > i))::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ui-ico-external) center / contain no-repeat; mask: var(--ui-ico-external) center / contain no-repeat;
}
/* 체험 화면 제목 옆·하단 버튼은 api-experience.css 가 뒤에 "↗" 글자를 붙인다. 앞의 이동 아이콘과 겹치므로 끈다. */
.api-experience-page :is(.api-experience-title, .dashboard-bot) .label-button.label-button--outline-primary::after { content: none; }

/* 문의 댓글의 작은 "삭제" 글자 링크는 모양을 유지하고 글자색만 위험 색으로 둔다(휴지통 아이콘은 styles.css 에 있다). */
.comment__option .comment--delete { color: var(--ui-color-danger); }
/* 마이페이지 왼쪽 고정 영역의 "충전하기"는 ui-foundation.css 의 주요 색 규칙보다 우선해야 결제 색이 된다. */
body .my_page .sub-body .left .my-page-sticky .btn-area .my-page-btn.ui-btn--pay { background: var(--ui-btn-pay); color: var(--ui-color-on-primary); }