/* ==========================================================================
   Keystone Tone & Manner — design tokens
   keystonemc.com 의 디자인 언어를 추출한 공통 테마 레이어
   - Canvas : pure black / deep navy
   - Accent : electric yellow #fff033
   - Type   : Cairo (latin display) + Noto Sans KR (korean body)
   - Shape  : 각(角) — border-radius 0, 하단 1~2px 라인만 쓰는 폼
   - Motion : cubic-bezier(.19,1,.22,1) 롱 이징 + 스태거 리빌
   ========================================================================== */

:root {
    /* surface */
    --ks-black:        #000000;
    --ks-navy:         #050530;
    --ks-navy-line:    #1e1e48;
    --ks-white:        #ffffff;

    /* accent */
    --ks-yellow:       #fff033;
    --ks-yellow-deep:  #666014;

    /* text */
    --ks-fg:           #ffffff;
    --ks-fg-muted:     #a3a3a3;
    --ks-line:         #888888;
    --ks-line-soft:    #424242;

    /* status */
    --ks-danger:       #ff4d4d;
    --ks-success:      var(--ks-yellow);

    /* type */
    --ks-font-display: "Cairo", "Noto Sans KR", sans-serif;
    --ks-font-body:    "Noto Sans KR", "Cairo", sans-serif;

    /* motion */
    --ks-ease:         cubic-bezier(0.19, 1, 0.22, 1);
    --ks-ease-wipe:    cubic-bezier(0.4, 0, 0, 1);
}

::-moz-selection { background: var(--ks-yellow); color: #000; }
::selection      { background: var(--ks-yellow); color: #000; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
.ks-display {
    font-family: var(--ks-font-display);
    font-weight: 300;
    letter-spacing: -0.3px;
    line-height: 1;
}
.ks-display strong { font-weight: 700; }
.ks-display .buff  { color: var(--ks-yellow); }

.ks-label {
    display: block;
    font-family: var(--ks-font-display);
    font-weight: 400;
    color: var(--ks-fg-muted);
}

/* --------------------------------------------------------------------------
   Form — 하단 라인만 있는 키스톤식 인풋
   -------------------------------------------------------------------------- */
.ks-input {
    width: 100%;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid var(--ks-line);
    background: transparent;
    font-family: var(--ks-font-display);
    font-weight: 500;
    color: var(--ks-fg);
    caret-color: var(--ks-yellow);
    outline: none;
    transition: border-color 0.3s var(--ks-ease), color 0.3s var(--ks-ease);
    -webkit-appearance: none;
    appearance: none;
}
.ks-input::placeholder { color: var(--ks-line-soft); font-weight: 300; }
.ks-input:focus {
    border-color: var(--ks-yellow);
    color: var(--ks-yellow);
}
/* 크롬 자동완성이 흰 배경을 칠하지 않도록 */
.ks-input:-webkit-autofill,
.ks-input:-webkit-autofill:hover,
.ks-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ks-fg);
    -webkit-box-shadow: 0 0 0 1000px #000 inset;
    transition: background-color 9999s ease-out 0s;
}

/* --------------------------------------------------------------------------
   Button — 각진 옐로 블록
   -------------------------------------------------------------------------- */
.ks-btn {
    display: block;
    position: relative;
    width: 100%;
    border: 0;
    border-radius: 0;
    background-color: var(--ks-white);
    font-family: var(--ks-font-display);
    font-weight: 500;
    color: #000;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s var(--ks-ease), color 0.3s var(--ks-ease);
}
.ks-btn:hover,
.ks-btn:focus-visible { background-color: var(--ks-yellow); outline: none; }
.ks-btn--yellow { background-color: var(--ks-yellow); }
.ks-btn--yellow:hover,
.ks-btn--yellow:focus-visible { background-color: var(--ks-white); }

/* --------------------------------------------------------------------------
   Link — 0% → 100% 로 자라는 옐로 언더라인
   -------------------------------------------------------------------------- */
.ks-link {
    display: inline-block;
    position: relative;
    padding-bottom: 6px;
    color: var(--ks-fg-muted);
    text-decoration: none;
    transition: color 0.3s var(--ks-ease);
}
.ks-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--ks-yellow);
    transition: width 0.6s var(--ks-ease);
}
.ks-link:hover { color: var(--ks-yellow); }
.ks-link:hover::after { width: 100%; }

/* --------------------------------------------------------------------------
   Column wipe — 헤더 내비게이션에서 쓰는 8분할 패널 전개
   -------------------------------------------------------------------------- */
.ks-wipe {
    position: absolute;
    inset: 0;
    font-size: 0;
    pointer-events: none;
}
.ks-wipe__item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 12.5%;
    height: 100%;
    overflow: hidden;
}
.ks-wipe__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 1px solid var(--ks-navy-line);
    background-color: var(--ks-navy);
    transform: scaleX(0);
    transform-origin: center left;
    animation: ks-wipe-in 0.6s var(--ks-ease-wipe) forwards;
}
@keyframes ks-wipe-in { to { transform: scaleX(1); } }

/* 컬럼별 스태거 — 왼쪽에서 오른쪽으로 훑고 지나가는 결 */
.ks-wipe__item:nth-child(1)::after { animation-delay: 0.00s; }
.ks-wipe__item:nth-child(2)::after { animation-delay: 0.04s; }
.ks-wipe__item:nth-child(3)::after { animation-delay: 0.08s; }
.ks-wipe__item:nth-child(4)::after { animation-delay: 0.12s; }
.ks-wipe__item:nth-child(5)::after { animation-delay: 0.16s; }
.ks-wipe__item:nth-child(6)::after { animation-delay: 0.20s; }
.ks-wipe__item:nth-child(7)::after { animation-delay: 0.24s; }
.ks-wipe__item:nth-child(8)::after { animation-delay: 0.28s; }

/* --------------------------------------------------------------------------
   Reveal — 스태거 리빌 (animation-delay 로 순차 등장)
   -------------------------------------------------------------------------- */
.ks-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    animation: ks-reveal-in 0.9s var(--ks-ease) forwards;
}
@keyframes ks-reveal-in {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ks-reveal, .ks-wipe__item::after { animation-duration: 0.01ms; }
    .ks-reveal { opacity: 1; transform: none; }
}