/*
 * kotul-ui-component CSS 변수 기본값 (docs/spec.md 7장)
 *
 * 컴포넌트가 쓰는 모든 변수와 기본값을 여기에 모은다.
 * 사이트는 이 파일을 불러 쓰거나, 자기 테마에서 같은 변수를 덮어쓴다.
 * 이름은 --kot-분류-이름. 글꼴은 내장하지 않는다 (기본값 inherit).
 * 값은 각 컴포넌트 CSS의 기본값과 같아야 한다 (tokens.unit.test.ts가 확인한다).
 *
 * 변수는 컴포넌트를 옮길 때 하나씩 더한다.
 */
:root {
  /* 공통 색 (결정 0010)
     --kot-color-accent는 상징색(면·장식). --kot-color-accent-text(글자용 강조색: 링크·포커스 표시·목록 머리 기호)는
     --kot-color-accent를 따라가는 변수라 여기서 값을 정하지 않는다. 상징색이 밝은 사이트는 글자용만 진한 색으로 정한다. */
  --kot-color-accent: #255ec8;
  /* 오류 색 (kot-guru 등, 결정 0022). 상징색을 따라가지 않는다. 다크 모드에서는 사이트·테마가 밝은 값으로 바꾼다 (어두운 바탕 위 대비) */
  --kot-color-danger: #a45139;

  /* 고정폭 글꼴 (kot-guru의 빨간 줄, 결정 0022). 글꼴을 내장하지 않고 범용 이름만 부른다 */
  --kot-font-mono: monospace, monospace; /* 두 번: monospace 하나만 쓰면 브라우저가 글자를 13px로 줄인다 */

  /* 상자 공통 모양 (kot-section-box, kot-note-box, kot-foldable-box). 상자 하나만 바꾸려면 그 태그에 건다. */
  --kot-box-border-width: 1px;
  --kot-box-radius: 16px;
  --kot-box-padding: 16px;
  --kot-box-margin: 8px 0;
  --kot-box-gap: 8px;
  --kot-box-heading-font: inherit;
  --kot-box-heading-size: 20px;
  --kot-box-heading-weight: bold;

  /* 손그림 틀 (상자 공통, 결정 0008). 그림은 사이트 테마가 절대 경로로 넣는다 (docs/theming.md).
     --kot-box-frame-color (선 색)는 그 상자의 테두리 색을 따라가는 변수라 여기서 값을 정하지 않는다.
     --kot-box-frame-edge-length (변 그림 길이)는 --kot-box-frame-corner-size를 따라가는 변수라 여기서 값을 정하지 않는다.
     --kot-box-frame-edge-length-block (세로 변 그림 길이)은 --kot-box-frame-edge-length를 따라가는 변수라 여기서 값을 정하지 않는다. */
  --kot-box-frame-corner-tl: none;
  --kot-box-frame-corner-tr: none;
  --kot-box-frame-corner-bl: none;
  --kot-box-frame-corner-br: none;
  --kot-box-frame-edge-top: none;
  --kot-box-frame-edge-bottom: none;
  --kot-box-frame-edge-left: none;
  --kot-box-frame-edge-right: none;
  --kot-box-frame-corner-size: 0px;
  --kot-box-frame-inset: 0px;

  /* kot-section-box */
  --kot-section-box-bg: rgb(255 255 255 / 0.1);
  --kot-section-box-border-color: #888888;
  --kot-section-box-color: inherit;
  --kot-section-box-heading-color: inherit;

  /* kot-note-box */
  --kot-note-box-bg: #fffce7;
  --kot-note-box-border-color: #8c8766;
  --kot-note-box-color: #9c6340;
  --kot-note-box-heading-color: #de6c26;

  /* 빗금·지우개 (공통, 결정 0008). 지금은 kot-foldable-box 제목줄이 쓴다.
     --kot-eraser-color (지우개 색)는 그 자리의 바탕색을 따라가는 변수라 여기서 값을 정하지 않는다. */
  --kot-hatch-image: none;
  --kot-hatch-color: currentColor;
  --kot-hatch-size: 96px;
  --kot-eraser-width: 2px;

  /* kot-foldable-box
     --kot-foldable-box-bg (틀·제목줄 색)는 accent를 따라가는 변수라 여기서 값을 정하지 않는다 (spec 7장).
     정하지 않으면 그 자리의 --kot-color-accent를 쓴다. 이 상자만 다른 색으로 하려면 사이트가 직접 정한다. */
  --kot-foldable-box-head-color: #ffffff;
  --kot-foldable-box-body-bg: #ffffff;
  --kot-foldable-box-body-color: inherit;
  --kot-foldable-box-inset: 4px;
  /* --kot-foldable-box-head-padding (제목줄 여백)은 --kot-foldable-box-inset을 따라가는 변수라 여기서 값을 정하지 않는다. */
  /* 화살표 그림: 펼쳐짐(아래 꺾쇠) / 접힘(오른쪽 꺾쇠). none이면 화살표 없음. */
  --kot-foldable-box-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --kot-foldable-box-arrow-folded-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L6.5 5L3.5 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");

  /* 못 쓰는 상태 (공통, 결정 0012): 틀·빗금·글자를 모두 이만큼 연하게 */
  --kot-disabled-opacity: 0.4;

  /* kot-button (결정 0012)
     따라가는 변수라 값을 정하지 않는 것: --kot-button-emphasis-bg(→ --kot-color-accent), --kot-button-focus-color(→ --kot-color-accent-text → accent),
     --kot-button-frame-color(→ --kot-button-border-color), --kot-button-frame-edge-length(→ corner-size), --kot-button-frame-edge-length-block(→ edge-length).
     상징색이 밝은 사이트는 --kot-button-emphasis-color를 진하게 정한다. */
  --kot-button-padding: 0.5em 1.25em;
  --kot-button-min-block-size: 2.75em;
  --kot-button-font: inherit;
  --kot-button-font-size: inherit;
  --kot-button-font-weight: bold;
  --kot-button-color: inherit;
  --kot-button-bg: transparent;
  --kot-button-border-width: 1px;
  --kot-button-border-color: #888888;
  --kot-button-radius: 6px;
  --kot-button-emphasis-color: #ffffff;
  --kot-button-pressed-shade: rgb(0 0 0 / 0.12);
  --kot-button-hatch-inset: 6px;
  --kot-button-frame-corner-tl: none;
  --kot-button-frame-corner-tr: none;
  --kot-button-frame-corner-bl: none;
  --kot-button-frame-corner-br: none;
  --kot-button-frame-edge-top: none;
  --kot-button-frame-edge-bottom: none;
  --kot-button-frame-edge-left: none;
  --kot-button-frame-edge-right: none;
  --kot-button-frame-corner-size: 0px;
  --kot-button-frame-inset: 0px;

  /* kot-dialog (결정 0013). 상자 공통 변수(--kot-box-*)와 손그림 틀 변수(--kot-box-frame-*)도 그대로 쓴다.
     --kot-box-frame-color의 기본은 --kot-dialog-border-color를 따라간다. */
  --kot-dialog-width: 32rem;
  --kot-dialog-bg: #ffffff;
  --kot-dialog-color: inherit;
  --kot-dialog-border-color: #888888;
  --kot-dialog-heading-color: inherit;
  --kot-dialog-backdrop: rgb(0 0 0 / 0.4);
  --kot-dialog-button-gap: 8px;
  --kot-dialog-duration: 240ms;
  --kot-dialog-pop-scale: 1.1;
  --kot-dialog-pop-peak: 0.75;

  /* kot-tag (결정 0014)
     따라가는 변수라 값을 정하지 않는 것: --kot-tag-bg(속 색 → --kot-color-accent), --kot-tag-pressed-bg(눌린 속 색 → --kot-tag-bg를 12% 진하게),
     --kot-tag-focus-color(→ --kot-color-accent-text → accent), --kot-tag-frame-color(→ --kot-tag-border-color),
     --kot-tag-frame-middle-width(→ --kot-tag-block-size).
     상징색이 밝은 사이트는 --kot-tag-color를 진하게 정한다. */
  --kot-tag-color: #ffffff;
  --kot-tag-font: inherit;
  --kot-tag-font-size: inherit;
  --kot-tag-font-weight: normal;
  --kot-tag-block-size: 2em;
  --kot-tag-padding-inline: 0.5em;
  --kot-tag-border-width: 1px;
  --kot-tag-border-color: #888888;
  --kot-tag-radius: 0.25em;
  --kot-tag-frame-start: none;
  --kot-tag-frame-middle: none;
  --kot-tag-frame-end: none;
  --kot-tag-fill-start: none;
  --kot-tag-fill-middle: none;
  --kot-tag-fill-end: none;
  --kot-tag-frame-start-width: 0px;
  --kot-tag-frame-end-width: 0px;

  /* kot-text-field (결정 0016)
     따라가는 변수라 값을 정하지 않는 것: --kot-text-field-focus-color(→ --kot-color-accent-text → accent),
     --kot-text-field-frame-color(→ --kot-text-field-border-color), --kot-text-field-frame-middle-width(→ --kot-text-field-block-size).
     글자는 --kot-text-field-font-size를 작게 넣어도 16px 이상이다. */
  --kot-text-field-bg: transparent;
  --kot-text-field-invalid-bg: #fdeceb;
  --kot-text-field-autofill-bg: #e8f0fe;
  --kot-text-field-color: inherit;
  --kot-text-field-font: inherit;
  --kot-text-field-font-size: 1em;
  --kot-text-field-block-size: 2.75em;
  --kot-text-field-padding-inline: 0.5em;
  --kot-text-field-gap: 0.25em;
  --kot-text-field-border-width: 1px;
  --kot-text-field-border-color: #888888;
  --kot-text-field-radius: 0.375em;
  --kot-text-field-frame-start: none;
  --kot-text-field-frame-middle: none;
  --kot-text-field-frame-end: none;
  --kot-text-field-fill-start: none;
  --kot-text-field-fill-middle: none;
  --kot-text-field-fill-end: none;
  --kot-text-field-frame-start-width: 0px;
  --kot-text-field-frame-end-width: 0px;
  --kot-text-field-step-up-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M3 12 10 4l7 8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kot-text-field-step-down-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M3 4l7 8 7-8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kot-text-field-step-inline-size: 1.25em;
  --kot-text-field-step-block-size: 1em;

  /* kot-tag-input (결정 0024)
     따라가는 변수라 값을 정하지 않는 것: --kot-tag-input-focus-color(→ --kot-color-accent-text → accent),
     --kot-tag-input-flash-color(→ focus-color), --kot-tag-input-active-bg(→ 상징색 12%), --kot-tag-input-error-color(→ --kot-color-danger).
     칩은 kot-tag 변수, 입력칸은 kot-text-field 변수를 그대로 쓴다. */
  --kot-tag-input-gap: 0.5em;
  --kot-tag-input-remove-color: inherit;
  --kot-tag-input-popup-bg: #ffffff;
  --kot-tag-input-popup-color: inherit;
  --kot-tag-input-popup-border-color: #888888;
  --kot-tag-input-popup-radius: 0.375em;
  --kot-tag-input-popup-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  --kot-tag-input-popup-max-block-size: 18em;

  /* kot-note-layer (결정 0023)
     따라가는 변수라 값을 정하지 않는 것: --kot-note-layer-active-color(→ --kot-color-accent),
     --kot-note-layer-handle-color·--kot-note-layer-draft-color(→ --kot-note-layer-color), --kot-note-layer-active-item-bg(→ 쪽지 색 35%).
     쪽지 색은 상징색과 따로 둔다 (그림 위 노란 쪽지). */
  --kot-note-layer-color: #f3e4a6;
  --kot-note-layer-fill-amount: 25%;
  --kot-note-layer-border-width: 2px;
  --kot-note-layer-shadow: 0 0 0 1px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(0 0 0 / 0.55);
  --kot-note-layer-view-opacity: 0.6;
  --kot-note-layer-number-color: #2b2b2b;
  --kot-note-layer-number-font-size: 0.75rem;
  --kot-note-layer-handle-size: 10px;

  /* kot-ribbon
     따라가는 변수라 값을 정하지 않는 것: --kot-ribbon-bg(→ --kot-color-accent), --kot-ribbon-frame-color(→ --kot-ribbon-border-color),
     --kot-ribbon-frame-middle-width(→ --kot-ribbon-block-size). 빗금·지우개는 위의 공통 변수. */
  --kot-ribbon-color: #ffffff;
  --kot-ribbon-block-size: 2.75em;
  --kot-ribbon-padding-inline: 1em;
  --kot-ribbon-gap: 1em;
  --kot-ribbon-row-gap: 0.5em;
  --kot-ribbon-border-width: 0px;
  --kot-ribbon-border-color: #888888;
  --kot-ribbon-radius: 999px;
  --kot-ribbon-frame-start: none;
  --kot-ribbon-frame-middle: none;
  --kot-ribbon-frame-end: none;
  --kot-ribbon-fill-start: none;
  --kot-ribbon-fill-middle: none;
  --kot-ribbon-fill-end: none;
  --kot-ribbon-frame-start-width: 0px;
  --kot-ribbon-frame-end-width: 0px;

  /* kot-reactions
     따라가는 변수라 값을 정하지 않는 것: --kot-reactions-pressed-bg(→ --kot-color-accent), --kot-reactions-active-bg(→ 눌린 속 색 40%),
     --kot-reactions-pressed-button-bg(→ 상징색 20%), --kot-reactions-focus-color(→ --kot-color-accent-text),
     --kot-reactions-icon-<반응>-pressed(→ -icon-<반응>), --kot-reactions-fill-<반응>-pressed(→ -fill-<반응>). */
  --kot-reactions-gap: 0.5em;
  --kot-reactions-icon-size: 0px;
  --kot-reactions-emoji-size: 1.25rem;
  --kot-reactions-color: currentColor;
  --kot-reactions-pressed-color: #ffffff;
  --kot-reactions-count-font-size: 1rem;
  --kot-reactions-count-color: inherit;
  --kot-reactions-error-color: inherit;
  --kot-reactions-icon-like: none;
  --kot-reactions-fill-like: none;
  --kot-reactions-icon-love: none;
  --kot-reactions-fill-love: none;
  --kot-reactions-icon-angry: none;
  --kot-reactions-fill-angry: none;
  --kot-reactions-icon-meh: none;
  --kot-reactions-fill-meh: none;
  --kot-reactions-icon-thinking: none;
  --kot-reactions-fill-thinking: none;
  --kot-reactions-icon-sad: none;
  --kot-reactions-fill-sad: none;

  /* kot-download-item (상자 공통 --kot-box-*와 손그림 틀 --kot-box-frame-*도 쓴다)
     따라가는 변수라 값을 정하지 않는 것: 틀 선 색 --kot-box-frame-color(→ --kot-download-item-border-color) */
  --kot-download-item-bg: transparent;
  --kot-download-item-color: inherit;
  --kot-download-item-border-color: #aaaaaa;
  --kot-download-item-gap: 12px;
  --kot-download-item-files-gap: 8px;
  --kot-download-item-size-color: inherit;
  --kot-download-item-size-font-size: 0.875em;

  /* kot-pagination (칸은 kot-button 변수도 따른다) */
  --kot-pagination-gap: 4px;
  --kot-pagination-narrow-gap: 2px;
  --kot-pagination-narrow-button-padding: 0.5em 0.25em;
  --kot-pagination-justify: center;
  --kot-pagination-button-padding: 0.5em 0.75em;
  --kot-pagination-button-min-size: 44px;
  --kot-pagination-more-color: inherit;

  /* kot-tabs · kot-tab-nav (같은 변수. 빗금·지우개는 위의 공통 변수)
     따라가는 변수라 값을 정하지 않는 것: --kot-tabs-selected-bar-color(→ --kot-color-accent-text), --kot-tabs-focus-color(→ --kot-color-accent-text),
     지우개 색 --kot-eraser-color(→ --kot-tabs-bg), --kot-tabs-folder-frame-color(→ --kot-tabs-line-color),
     --kot-tabs-folder-frame-edge-length(→ -corner-size), --kot-tabs-folder-frame-edge-length-block(→ -edge-length) */
  --kot-tabs-gap: 4px;
  --kot-tabs-padding: 0.5em 1em;
  --kot-tabs-color: inherit;
  --kot-tabs-selected-color: inherit;
  --kot-tabs-selected-weight: bold;
  --kot-tabs-bg: transparent;
  --kot-tabs-line-color: #aaaaaa;
  --kot-tabs-line-width: 1px;
  --kot-tabs-line-image: none;
  --kot-tabs-line-length: 64px;
  --kot-tabs-line-height: 0px;
  --kot-tabs-line-offset: 0px;
  --kot-tabs-panel-padding: 16px 0;
  --kot-tabs-folder-color: #666666;
  --kot-tabs-folder-bg: #ffffff;
  --kot-tabs-folder-border-width: 1px;
  --kot-tabs-folder-radius: 8px;
  --kot-tabs-folder-frame-corner-tl: none;
  --kot-tabs-folder-frame-corner-tr: none;
  --kot-tabs-folder-frame-edge-top: none;
  --kot-tabs-folder-frame-edge-left: none;
  --kot-tabs-folder-frame-edge-right: none;
  --kot-tabs-folder-frame-corner-size: 0px;
  --kot-tabs-folder-cover-inset: 0px;
  --kot-tabs-folder-cover-depth: 1px;

  /* kot-guru (결정 0022)
     따라가는 변수라 값을 정하지 않는 것: --kot-guru-color(→ --kot-color-danger), --kot-guru-font(→ --kot-font-mono),
     --kot-guru-focus-color(→ --kot-color-accent-text), --kot-guru-frame-edge-length(→ -corner-size),
     --kot-guru-frame-edge-length-block(→ -edge-length) */
  --kot-guru-text-color: inherit;
  --kot-guru-bg: transparent;
  --kot-guru-border-width: 2px;
  --kot-guru-border-style: dashed;
  --kot-guru-radius: 0px;
  --kot-guru-padding: 1.25em 1.5em;
  --kot-guru-inline-padding: 0.75em 1em;
  --kot-guru-margin: 16px 0;
  --kot-guru-gap: 0.75em;
  --kot-guru-weight: bold;
  --kot-guru-font-size: 1em;
  --kot-guru-frame-corner-tl: none;
  --kot-guru-frame-corner-tr: none;
  --kot-guru-frame-corner-bl: none;
  --kot-guru-frame-corner-br: none;
  --kot-guru-frame-edge-top: none;
  --kot-guru-frame-edge-bottom: none;
  --kot-guru-frame-edge-left: none;
  --kot-guru-frame-edge-right: none;
  --kot-guru-frame-corner-size: 0px;
  --kot-guru-frame-inset: 0px;
  --kot-guru-tape-image: none;
  --kot-guru-tape-fill: none;
  --kot-guru-tape-color: transparent;
  --kot-guru-tape-line-color: currentColor;
  --kot-guru-tape-width: 0px;
  --kot-guru-tape-height: 0px;
  --kot-guru-tape-x: 50%;
  --kot-guru-tape-y: 0px;
  --kot-guru-tape-1-image: none;
  --kot-guru-tape-1-fill: none;
  --kot-guru-tape-1-width: 0px;
  --kot-guru-tape-1-height: 0px;
  --kot-guru-tape-1-x: 50%;
  --kot-guru-tape-1-y: 0px;
  --kot-guru-tape-2-image: none;
  --kot-guru-tape-2-fill: none;
  --kot-guru-tape-2-width: 0px;
  --kot-guru-tape-2-height: 0px;
  --kot-guru-tape-2-x: 50%;
  --kot-guru-tape-2-y: 0px;
  --kot-guru-tape-3-image: none;
  --kot-guru-tape-3-fill: none;
  --kot-guru-tape-3-width: 0px;
  --kot-guru-tape-3-height: 0px;
  --kot-guru-tape-3-x: 50%;
  --kot-guru-tape-3-y: 0px;
  --kot-guru-tape-rotate: 0deg;
  --kot-guru-tape-clip: none;
  --kot-guru-copy-font-size: 0.875em;
  --kot-guru-copy-border: 1px solid;
  --kot-guru-copy-radius: 4px;
  --kot-guru-copy-min-size: 44px;

  /* kot-card-image */
  --kot-card-image-bg: transparent;
  --kot-card-image-border-width: 1px;
  --kot-card-image-border-color: #aaaaaa;
  --kot-card-image-radius: 6px;
  --kot-card-image-shadow: 3px 2px 3px 0 rgb(122 122 122 / 0.75);
  --kot-card-image-margin: 8px;
  --kot-card-image-thumb-size: 280px;
  --kot-card-image-thumb-padding: 8px;
  --kot-card-image-thumb-bg: #ffffff;
  --kot-card-image-thumb-border-color: #cccccc;
  --kot-card-image-heading-color: #2f2f2f;
  --kot-card-image-heading-font: inherit;
  --kot-card-image-heading-size: inherit;
  --kot-card-image-heading-weight: bold;
}

/*
 * 변수가 아닌 규칙은 이것 하나다 (결정 0013).
 * 자바스크립트가 꺼지면 컴포넌트 CSS는 불리지 않고 이 파일만 남는다. 그때 대화상자는 열 방법이 없으므로,
 * 서버가 그린 대화상자 내용이 페이지 중간에 글로 드러나지 않게 숨긴다.
 * open을 붙인 대화상자(예: 페이지가 열릴 때 보여 줄 "저장되었습니다")는 숨기지 않아 본문 속 글처럼 읽힌다.
 * 컴포넌트가 정의되면(:defined) 이 규칙은 더 이상 맞지 않는다.
 */
kot-dialog:not(:defined):not([open]) {
  display: none;
}