/* ══════════════════════════════════════════════════════════════════
   아틸라 · at-account.css — 로그인 · 회원가입 · 인트로 (2026-10-16 전면 개편)
   로고 = 크림색 천 위에 수놓은 남색·고금색 문장 패치.
     바탕   : 크림 리넨 (at-bg.js hero) — 비네트·스캔라인 없음
     카드   : 남색 배지 판 + 고금색 테 + 안쪽 바느질 점선 + 흐림 없는 그림자
     버튼   : 고금색 단색 + 먹선 테두리, 누르면 그림자만큼 툭 들어간다
     움직임 : 매끈한 감속 대신 steps() 로 끊어서 (만화 모션)
   각 화면 CSS(login.css / register.css / Intro.css) 다음에 읽는다.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --at-navy:   #1b2a4a;
    --at-navy-2: #15213a;
    --at-ink:    #0b1222;
    --at-gold:   #c9a45c;
    --at-gold-2: #e0c487;
    --at-gold-d: #9c7a37;
    --at-ivory:  #f3ebdd;
    --at-linen:  #efe7d6;
    --at-stitch: rgba(224,196,135,0.6);
    --at-red:    #a8322d;
}

html, body { background: var(--at-linen) !important; }
/* 새 배경 캔버스는 불투명한 천이라 내용 층을 그 위로 올린다 (옛 코드비는 비쳐서 안 드러났다) */
#bg-canvas { z-index: 0 !important; }
.wrapper { position: relative; z-index: 2; }

/* 옛 사이버 장식 걷기 */
.scanlines, .vignette, .in-scanlines, .in-vignette,
.c-tl, .c-tr, .c-bl, .c-br, .card-topline,
.LOGIN-halo, .REG-halo, .load-orbit, .load-ring-wrap::before { display: none !important; }

/* ── 배지 카드 ── */
.LOGIN-card, .REG-card {
    background: var(--at-navy) !important;
    border: 3px solid var(--at-gold) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 0 4px var(--at-navy), 7px 9px 0 4px var(--at-ink) !important;
    outline: 1.5px dashed var(--at-stitch);
    outline-offset: -11px;
    animation: atStampIn .36s steps(4, end) .1s both !important;
}
@keyframes atStampIn {               /* 툭 박히는 패치: 크게 → 작게 눌림 → 제자리 */
    0%   { opacity: 0; transform: scale(1.12) rotate(-1.5deg); }
    50%  { opacity: 1; transform: scale(.97)  rotate(.6deg); }
    100% { opacity: 1; transform: none; }
}

.LOGIN-logo-img, .REG-logo-img {
    filter: none !important;
    animation: atBoil 1.2s steps(2, end) infinite !important;   /* 둥실 뜨기 대신 두 장 번갈아 떨기 */
}
.LOGIN-brand { margin-bottom: 26px !important; }               /* 옛 마법진 자리 비움 */
.LOGIN-logo-img { width: 230px !important; }
.LOGIN-logo-main-text, .REG-logo-main-text,
.field-label, .reg-section-label, .lang-title {
    font-family: Noto Serif KR, serif !important;
    color: var(--at-gold-2) !important;
    letter-spacing: .5px;
}

/* ── 입력칸 — 상아색 천 띠 위에 남색 글씨 ── */
.LOGIN-field .form-control, .REG-card .inputbox, .REG-card .select,
.REG-card input[type=text], .REG-card input[type=password], .REG-card input[type=email], .REG-card input[type=tel] {
    background: var(--at-ivory) !important;
    color: var(--at-navy) !important;
    border: 2px solid var(--at-ink) !important;
    border-radius: 6px !important;
    box-shadow: inset 2px 2px 0 rgba(27,42,74,.10) !important;
    font-weight: 500;
}
.LOGIN-field .form-control::placeholder, .REG-card input::placeholder { color: #8c7f68 !important; }
.LOGIN-field .form-control:focus, .REG-card input:focus, .REG-card .select:focus {
    border-color: var(--at-gold) !important;
    box-shadow: inset 2px 2px 0 rgba(27,42,74,.10), 0 0 0 3px var(--at-gold-d) !important;
}
.input-icon i { color: var(--at-navy) !important; opacity: .7; }
.REG-card #D_SponsorName[readonly], .REG-card .select:disabled { background: var(--at-linen) !important; color: #6b604d !important; }

/* ── 버튼 — 고금색 단색, 먹선, 딱딱한 그림자 ── */
#btn_Apply, .REG-card #btn_Apply {
    background: var(--at-gold) !important;
    color: var(--at-ink) !important;
    border: 2px solid var(--at-ink) !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0 var(--at-ink) !important;
    font-family: Noto Serif KR, serif !important;
    font-weight: 900 !important;
    letter-spacing: 6px !important;
    transition: transform .08s steps(2, end), box-shadow .08s steps(2, end) !important;
}
#btn_Apply:hover { background: var(--at-gold-2) !important; }
#btn_Apply:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--at-ink) !important; }
#btn_Apply::before, #btn_Apply::after { display: none !important; }

/* 회원가입 단계 단추 — 다음/가입 = 고금색, 이전/뒤로 = 바느질 점선 */
.step-nav button.btn-primary {
    background: var(--at-gold) !important;
    color: var(--at-ink) !important;
    border: 2px solid var(--at-ink) !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0 var(--at-ink) !important;
    font-family: Noto Serif KR, serif !important;
    font-weight: 900 !important;
    transition: transform .08s steps(2, end) !important;
}
.step-nav button.btn-primary:active { transform: translate(4px, 4px); box-shadow: none !important; }
.step-nav button.btn-primary:disabled {
    background: #6f6553 !important; color: #d8cbb0 !important; box-shadow: 2px 2px 0 var(--at-ink) !important; cursor: not-allowed;
}
.step-nav button:not(.btn-primary) {
    background: transparent !important;
    color: var(--at-ivory) !important;
    border: 1.5px dashed var(--at-stitch) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.terms-all-check {
    background: transparent !important;
    border: 1.5px dashed var(--at-stitch) !important;
    border-radius: 8px !important;
}
.terms-all-check label, .terms-all-check span { color: var(--at-gold-2) !important; font-family: Noto Serif KR, serif !important; }
.step-title { font-family: Noto Serif KR, serif !important; color: var(--at-gold-2) !important; }

#btn_Cancle, .sub-btn {
    background: transparent !important;
    color: var(--at-ivory) !important;
    border: 1.5px dashed var(--at-stitch) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'Noto Sans KR', sans-serif !important;
}
#btn_Cancle:hover, .sub-btn:hover { background: rgba(224,196,135,.12) !important; color: var(--at-gold-2) !important; }

/* 약관 상자 */
.terms-box {
    background: var(--at-ivory) !important;
    color: var(--at-navy) !important;
    border: 2px solid var(--at-ink) !important;
    border-radius: 6px !important;
}
.terms-check, .terms-check label { color: var(--at-ivory) !important; }

/* 오류 — 세균 진홍 */
.has-error .form-control, .has-error .select { border-color: var(--at-red) !important; }
.has-error .help-block, #sp_getMsg { color: #f0b0a6 !important; }

/* ── 아래 띠 — 남색 리본 ── */
.status-bar {
    background: var(--at-navy) !important;
    border-top: 3px solid var(--at-gold) !important;
    height: 30px !important;
}
.status-item { color: var(--at-ivory) !important; font-family: Noto Serif KR, serif !important; letter-spacing: 1px; }
.status-dot { background: var(--at-gold) !important; box-shadow: none !important; animation: none !important; border-radius: 0 !important; transform: rotate(45deg); }

/* ── 언어 선택 창 ── */
.lang-box {
    background: var(--at-navy) !important;
    border: 3px solid var(--at-gold) !important;
    border-radius: 14px !important;
    box-shadow: 6px 6px 0 var(--at-ink) !important;
}
.lang-item { color: var(--at-ivory) !important; border-radius: 6px; }
.lang-item:hover { background: rgba(224,196,135,.14) !important; }
.lang-close { background: var(--at-gold) !important; color: var(--at-ink) !important; border: 2px solid var(--at-ink) !important; }

/* ── 로딩 — 리넨 위에 배지만, 줄은 끊어서 찬다 ── */
.loading-overlay { background: var(--at-linen) !important; }
.load-mark { filter: none !important; animation: atBob .5s steps(2, end) infinite !important; }
.load-bar-wrap { background: rgba(27,42,74,.15) !important; border: 2px solid var(--at-navy) !important; height: 10px !important; border-radius: 0 !important; }
.load-bar { background: var(--at-navy) !important; box-shadow: none !important; animation-timing-function: steps(8, end) !important; }
.load-sub { color: var(--at-navy) !important; font-family: Noto Serif KR, serif !important; letter-spacing: 4px; }
@keyframes atBob { 50% { transform: translateY(-4px) rotate(-2deg); } }

/* ══ 인트로 ══ */
.converge, .core, .flash, .orbit, .seam, .rift { display: none !important; }
.mark { filter: none !important; animation: none !important; }
body.is-revealed .mark { animation: atBadgeDrop .42s steps(5, end) both, atBoil .5s steps(2, end) .6s infinite !important; }
@keyframes atBadgeDrop {               /* 위에서 툭 떨어져 한 번 튀고 박힘 */
    0%   { transform: translateY(-38vh) rotate(-8deg); }
    60%  { transform: translateY(2vh)   rotate(3deg) scale(1.04, .94); }
    80%  { transform: translateY(-1vh)  rotate(-1deg); }
    100% { transform: none; }
}
@keyframes atBoil { 50% { transform: rotate(-.8deg) translateY(-1px); } }   /* 두 장 번갈아 떨기 */
.mark-wrap { transition: opacity .1s steps(1, end) !important; }
body.is-revealed .mark-wrap { transform: translate(-50%, -50%) scale(1) !important; }
.hint {
    color: var(--at-navy) !important;
    font-family: Noto Serif KR, serif !important;
    font-weight: 700;
    letter-spacing: 4px !important;
    text-shadow: none !important;
    animation: atBlink 1s steps(1, end) infinite;
}
@keyframes atBlink { 50% { opacity: .35; } }
/* 문 — 바느질 테두리 남색 천 두 장이 위·아래로 갈라진다 (끊어서) */
.door {
    background: var(--at-navy) !important;
    filter: none !important;
}
.door.top    { border-bottom: 0; box-shadow: none; }
body.is-parting .door.top    { transition: transform .5s steps(6, end) !important; }
body.is-parting .door.bottom { transition: transform .5s steps(6, end) !important; }

@media (prefers-reduced-motion: reduce) {
    .LOGIN-card, .REG-card, .load-mark, body.is-revealed .mark, .hint { animation: none !important; }
}