/* 브랜드 슬롯: 이 서비스만의 로고 값과 심볼 움직임. 다른 서비스로 갈아입힐 때 이 파일과 assets/brand/ 다섯 파일만 바꾼다(docs/13_rebrand.md).
   Rails 에서는 install 때 한 번 놓이고, 그 뒤 install.sh update 는 이 파일과 brand/ 그림을 덮어쓰지 않는다(앱 소유).
   index.css 의 맨 끝에 와서 components.css 의 .brand 기본값을 덮는다. 토큰(색)은 tokens.css, 강조색은 tools/tokens 생성기.

   예시 브랜드: Acme(가상). 심볼 64x64 정사각(symbol.svg), 글자 로고 비율 5439:1469(wordmark.svg). */

/* ── 로고 비율·글자 로고 ── 그림을 바꾸면 aspect-ratio 두 값과 글자 높이(--brand-h 의 몇 배)만 맞춘다 */
.brand__symbol{aspect-ratio:1}
.brand__word{height:calc(var(--brand-h) * .54);aspect-ratio:5439 / 1469;
  -webkit-mask:url("/assets/ds/brand/wordmark-d35ed478.svg") center / contain no-repeat;mask:url("/assets/ds/brand/wordmark-d35ed478.svg") center / contain no-repeat}

/* ── 움직이는 심볼 .brand-mark ── Rails brand_mark_svg(variant:, size:). 정적 HTML 은 symbol.svg 를 인라인으로 넣고 그림 조각마다
   class="brand-mark__part" style="--i:0,1,2…" 를 붙인다(docs/04 '브랜드 심볼 움직임'). 조각 순서대로 차례로 움직이므로 어떤 로고로 바꿔도 따라온다.
   변형: 없음(멈춤) · --animated(처음 한 번 조각이 차례로 들어온 뒤 천천히 떠 있기, --grounded 면 떠 있지 않음) · --loop(불러오는 중 반복)
         · --hover(감싼 a·button·label·summary·.card·[data-mark-host] 에 올리거나 초점이 오면 한 번)
   크기: --sm 24 · --md 40 · --lg 56 · --xl 88. 없으면 칸 폭을 채운다. .brand 안에서는 --brand-h 를 따른다.
   움직임은 화면에서, 동작 줄이기가 꺼져 있을 때만 정의한다. 화면 밖이면 fx.js 가 [data-fx-idle] 을 붙여 멈춘다([data-mark-anim] 이 붙은 심볼). */
.brand-mark{display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible}
.brand-mark .brand-mark__part{transform-box:fill-box;transform-origin:50% 50%}
.brand-mark:is(.brand-mark--sm,.brand-mark--md,.brand-mark--lg,.brand-mark--xl){flex:none;width:var(--mark-h);height:var(--mark-h)}
.brand-mark--sm{--mark-h:24px}
.brand-mark--md{--mark-h:40px}
.brand-mark--lg{--mark-h:56px}
.brand-mark--xl{--mark-h:88px}
.brand > .brand-mark{flex:none;width:var(--brand-h);height:var(--brand-h)}
@media screen and (prefers-reduced-motion:no-preference){
  /* 등장: 조각이 차례로 아래에서 작게 들어와 자리를 잡는다. 그다음 천천히 떠 있다 */
  .brand-mark--animated{animation:brand-mark-float calc(var(--d-7) * 7) var(--ease-inout) calc(var(--d-7) * 2) infinite}
  .brand-mark--animated.brand-mark--grounded{animation:none}
  .brand-mark--animated .brand-mark__part{animation:brand-mark-in var(--d-6) var(--ease-spring) calc(var(--d-1) + var(--i, 0) * var(--d-2)) both}
  /* 반복(불러오는 중): 조각이 차례로 숨 쉬듯 줄었다 돌아온다 */
  .brand-mark--loop .brand-mark__part{animation:brand-mark-pulse calc(var(--d-7) * 2.4) var(--ease-inout) calc(var(--i, 0) * var(--d-2)) infinite both}
  /* 올리기·초점·JS 의 data-mark-play: 한 번 튕긴다 */
  @media (hover:hover){
    :is(a,button,label,summary,.card,[data-mark-host]):hover .brand-mark--hover .brand-mark__part,
    .brand-mark--hover:hover .brand-mark__part{animation:brand-mark-pop var(--d-6) var(--ease-spring) calc(var(--i, 0) * var(--d-1)) 1 both}
  }
  :is(a,button,summary,[tabindex]):focus-visible .brand-mark--hover .brand-mark__part,
  :is(.card,[data-mark-host]):focus-within .brand-mark--hover .brand-mark__part,
  .brand-mark--hover[data-mark-play] .brand-mark__part{animation:brand-mark-pop var(--d-6) var(--ease-spring) calc(var(--i, 0) * var(--d-1)) 1 both}
  /* 화면 밖(fx.js)이면 멈춘다 */
  .brand-mark[data-fx-idle],.brand-mark[data-fx-idle] .brand-mark__part{animation-play-state:paused}
}
@keyframes brand-mark-in{from{opacity:0;transform:translateY(18%) scale(.6)}to{opacity:1;transform:none}}
@keyframes brand-mark-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@keyframes brand-mark-pulse{0%,100%{opacity:1;transform:none}45%{opacity:.5;transform:scale(.84)}}
@keyframes brand-mark-pop{0%{transform:none}35%{transform:scale(.82) rotate(-6deg)}70%{transform:scale(1.06)}100%{transform:none}}

/* ── KITDI 로고 움직임(브랜드 슬롯) ── 로고 SVG 의 강조 조각: .kl-slash(K 의 파란 사선) · .kl-dot(i 의 정사각 점)
   올리면 사선이 앞으로, 점이 위로 살짝. 처음 조립(.logo--assemble)일 때는 사선이 미끄러져 들어오고 점이 떨어진다. */
.kl-slash,.kl-dot{transform-box:fill-box;transform-origin:50% 50%;transition:transform var(--d-4) var(--ease-spring)}
@media (hover:hover){
  a:hover > .logo .kl-slash{transform:translateX(6%)}
  a:hover > .logo .kl-dot{transform:translateY(-14%)}
}
@media (prefers-reduced-motion:no-preference){
  .logo--assemble .logo__mark > .kl-slash{animation:kl-slash var(--d-7) var(--ease-out) 260ms both}
  .logo--assemble .logo__mark > .kl-dot{animation:kl-drop var(--d-6) var(--ease-spring) 520ms both}
}
@keyframes kl-slash{from{opacity:0;transform:translate(-60%,40%)}to{opacity:1;transform:none}}
@keyframes kl-drop{from{opacity:0;transform:translateY(-160%)}to{opacity:1;transform:none}}