@charset "utf-8";

/* ============================================================
   component.css — Astra · 브라우저 기본값 방어

   우리가 만든 재사용 UI(.btn-* 포함)는 ui.css 에 있다.
   여기는 부모 테마가 새어 들어오는 것만 막는다. 시안이 바뀌어도 건드릴 일이 없다.
   ============================================================ */


/* 버튼 색상 토큰 — ui.css 의 .btn-* 도 이 값을 쓴다 */
:root {
  --one-btn-txt: var(--one-txt-color);   /* 무스타일 버튼(토글·아이콘)의 기본 글자색 */
  --one-btn-on-fill: #fff;               /* 색이 채워진 버튼 위의 글자색 */
}


/* ============================
   버튼 기본값 재정의

   Astra 가 맨 button 태그와 '전역 > 버튼' 설정값을 뿌리므로 무력화한다.
   선택자 목록은 Astra 가 쓰는 범위와 동일하게 맞췄다.
   → 클래스 없는 버튼은 무스타일, 폼 전송 버튼만 기본 외형 유지
============================ */

button,
.ast-button,
.ast-custom-button,
input#submit,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  color: var(--one-btn-txt);
}

button:hover,
button:focus,
button:active,
.ast-button:hover,
.ast-button:focus,
.ast-custom-button:hover,
.ast-custom-button:focus,
input#submit:hover,
input#submit:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: none;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--one-btn-txt);
}

/* 폼 전송 버튼 — 플러그인 출력물이 무스타일로 남지 않도록 기본 외형 부여.
   :where() 라 상세도가 0 이므로 .btn-* 를 붙이면 언제나 그쪽이 이긴다 */
:where(
  input[type="submit"],
  button[type="submit"],
  form button:not([type])
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 2em;
  border-radius: 50em;
  background-color: var(--main-color);
  color: var(--one-btn-on-fill);
  font-size: var(--one-body);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

:where(
  input[type="submit"],
  button[type="submit"],
  form button:not([type])
):hover {
  background-color: var(--sub-color03);
  color: var(--one-btn-on-fill);
}


/* ============================
   링크 hover 색상 되돌리기

   Astra 가 `a:hover, a:focus { color }` 를 뿌린다.
   (class-astra-dynamic-css.php — 커스터마이저 '링크 hover 색상')
   상세도 0,1,1 이라 마크업의 색상 유틸리티(0,1,0)를 덮는다.

   자손 링크는 common.css 의 `.txt-wrap a`(0,2,1)가 이미 막는다.
   블록 전체를 <a> 로 감싼 경우(.cta-box 등)만 여기서 되돌린다.
============================ */

a.m-color:hover,      a.m-color:focus      { color: var(--main-color); }
a.sb-color:hover,     a.sb-color:focus     { color: var(--sub-color01); }
a.sb02-color:hover,   a.sb02-color:focus   { color: var(--sub-color02); }
a.sb03-color:hover,   a.sb03-color:focus   { color: var(--sub-color03); }
a.sb04-color:hover,   a.sb04-color:focus   { color: var(--sub-color04); }
a.gray-color:hover,   a.gray-color:focus   { color: var(--gray-color01); }
a.gray-color02:hover, a.gray-color02:focus { color: var(--gray-color02); }
a.w-color:hover,      a.w-color:focus      { color: var(--white-color); }


/* ============================
   이미지 드래그 방지

   브라우저는 img 를 기본으로 드래그 가능하게 둔다 — 끌면 고스트가 따라다니고
   새 탭·바탕화면으로 떨어진다. 배경 이미지(.bg-cv)는 원래 드래그되지 않는다.

   -webkit-touch-callout 은 iOS 롱탭 저장 메뉴를 막는다.
   우클릭 저장은 CSS 로 막지 못한다 (child-theme-manual.md 12장)
============================ */

img,
svg,
video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}