/* 홈 첫 화면(crystal 외 모드) — templates/_home_hero.html, static/js/home-hero/ */
.hh {
    --hh-bg: #F6F7F9;
    --hh-ink: #0F1A2B;
    --hh-muted: #4F5B6E;
    --hh-line: rgba(15, 26, 43, 0.14);
    --hh-accent: #0062D6;
    --hh-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 640px;
    min-height: max(640px, 100svh);
    padding: var(--header-height) 0 150px;
    overflow: hidden;
    background: var(--hh-bg);
    color: var(--hh-ink);
    word-break: keep-all;
}

.hh--cct { --hh-bg: #E9EDF2; }
.hh--kinetic { --hh-bg: #F6F6F3; --hh-accent: #9A5B00; }
.hh--aurora { --hh-bg: #F7F7F5; --hh-accent: #0F1A2B; }

.hh-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.hh-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.hh-copy {
    width: min(620px, 52%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.hh-eyebrow {
    font-family: var(--hh-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hh-accent) !important;
}

.hh h1 {
    margin: 0;
    font-size: clamp(40px, 4.3vw, 62px);
    line-height: 1.14;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--hh-ink);
}

.hh-copy p {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--hh-muted);
}

.hh-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hh--kinetic .hh-buttons .btn-primary,
.hh--aurora .hh-buttons .btn-primary {
    background: var(--hh-ink);
    border-color: var(--hh-ink);
}

.hh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hh-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(15, 26, 43, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--hh-ink);
    font-family: var(--hh-mono);
    font-size: 14px;
    text-decoration: none;
}

.hh-chips a:hover { border-color: var(--hh-accent); color: var(--hh-accent); }

.hh-steps {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 32px;
    list-style: none;
}

.hh-steps li {
    flex: 1 1 0;
    padding-top: 12px;
    border-top: 2px solid var(--hh-line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--hh-muted);
    transition: border-color 0.5s ease;
}

.hh-steps strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--hh-ink);
}

.hh-steps strong span {
    margin-right: 8px;
    font-family: var(--hh-mono);
    font-size: 13px;
    color: var(--hh-muted);
    transition: color 0.5s ease;
}

.hh-steps li.is-on { border-color: var(--hh-accent); }
.hh-steps li.is-on strong span { color: var(--hh-accent); }

/* 오로라 모드의 유리 카드 묶음 — 위치·배율은 core.js가 시안 좌표(800,166)에 맞춘다 */
.hh-bento {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 560px;
    height: 390px;
    transform-origin: 0 0;
}

.hh-bento-inner { position: relative; width: 100%; height: 100%; }

.hh-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.46);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 44px rgba(15, 26, 43, 0.08);
    color: var(--hh-ink);
}

.hh-card--pkg { left: 0; top: 0; width: 330px; height: 250px; padding: 26px; gap: 0; }
.hh-card--cct { left: 346px; top: 0; width: 214px; height: 117px; }
.hh-card--ship { left: 346px; top: 133px; width: 214px; height: 117px; }
.hh-card--docs { left: 0; top: 266px; width: 272px; height: 124px; }
.hh-card--unit { left: 288px; top: 266px; width: 272px; height: 124px; }

.hh-card-k {
    font-family: var(--hh-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--hh-muted) !important;
}

.hh-card-code {
    margin-top: 12px;
    font-family: var(--hh-mono);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hh-card-dim { margin-top: 8px; font-family: var(--hh-mono); font-size: 14px; color: var(--hh-muted) !important; }
.hh-card-big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.hh-card-v { font-size: 18px; font-weight: 700; }
.hh-card--pkg .hh-card-v { font-size: 15px; font-weight: 600; }
.hh-card-s { font-size: 13px; color: var(--hh-muted) !important; }
.hh-card-foot { margin-top: auto; }

.hh-card a {
    color: var(--hh-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hh-card-led {
    position: absolute;
    right: 26px;
    bottom: 26px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 26, 43, 0.18);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 0 34px rgba(255, 184, 72, 0.55);
}

.hh-card-led i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #FFF6D8 0%, #F7CD55 60%, #E3A82A 100%);
}

.hh-cct { position: relative; display: block; height: 34px; }
.hh-cct .hh-card-big { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.8s ease; }
.hh-cct .hh-card-big.is-on { opacity: 1; }

/* 모바일: 위쪽 띠에 모션, 그 아래 문구 */
@media (max-width: 899px) {
    .hh {
        --hh-band: min(84vw, 44svh);
        display: block;
        min-height: 0;
        padding: calc(var(--header-height) + var(--hh-band)) 0 36px;
    }

    .hh-canvas {
        top: var(--header-height);
        bottom: auto;
        height: var(--hh-band);
    }

    .hh-inner { padding: 0 20px; }
    .hh-copy { width: auto; gap: 16px; }
    .hh h1 { font-size: 34px; }
    .hh-copy p { font-size: 15px; }
    .hh-bento,
    .hh-steps { display: none; }
}