/*
 * 기본 요소. 바탕·글자색·링크색·목록 머리 기호는 kotul-ui-component 손그림 테마가 맡는다.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  line-height: 1.3;
}

:focus-visible {
  outline: 3px solid var(--kot-color-accent-text);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--kot-color-accent);
  color: var(--site-on-accent);
}

.skip-link:focus {
  top: var(--space-2);
}

.muted {
  color: var(--muted);
  font-size: var(--text-small);
}

.form-error {
  color: var(--kot-color-danger);
  font-weight: bold;
}

.field label {
  display: block;
  margin-bottom: var(--space-1);
}

.field kot-text-field {
  width: 100%;
}

/* 손그림 테두리는 높은 대비 모드에서 끈다 (지시서 7-2장 접근성) */
@media (forced-colors: active) {
  :root {
    --frame-card: none;
    --frame-dialog: none;
  }
}

/*
 * 부품이 살아나기 전(스크립트를 받는 중, 못 받음, JS 꺼짐)에도 입력칸과 버튼이 보이고 쓸 수 있게.
 * Stencil은 살아나기 전의 kot-* 부품을 통째로 visibility:hidden으로 감춘다(태그 이름 선택자라 아래 규칙이 이긴다).
 * 입력·버튼을 감싼 두 부품만은 감추지 않고 평범한 모양을 준다. 살아나면(.hydrated) 부품 모양으로 바뀐다.
 */
kot-text-field:not(.hydrated),
kot-button:not(.hydrated) {
  visibility: visible;
}

kot-text-field:not(.hydrated) {
  display: block;
}

kot-text-field:not(.hydrated) > input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--hd-line, #3a3a3a);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: max(16px, 1em);
}

kot-button:not(.hydrated) > button,
kot-button:not(.hydrated) > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--hd-line, #3a3a3a);
  border-radius: 12px;
  background: var(--hd-paper, #fff);
  color: inherit;
  font: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

kot-button[emphasis]:not(.hydrated) > button,
kot-button[emphasis]:not(.hydrated) > a {
  background: var(--kot-color-accent);
  color: var(--site-on-accent);
}

/* 느린 요청 띠 (js/busy.js, 1.0.2): 0.3초 넘게 걸리는 제출·쪽 이동. 진행 표시 부품이 나오기 전 임시판 */
.busy-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-accent-large) 25%, transparent);
  pointer-events: none;
}

.busy-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: var(--site-accent-large);
  animation: busy-bar-slide 1.2s ease-in-out infinite;
}

.busy-bar[hidden] {
  display: none;
}

@keyframes busy-bar-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .busy-bar::before {
    width: 100%;
    animation: none;
  }
}

button[data-busy-was] {
  cursor: progress;
}