@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ============================================================
   iMANIFEST — Color tokens
   Brand green + calm logistics slate neutrals.
   Light theme only — the sole theme in the final product.
   ============================================================ */

:root {
    /* --- Base palette: brand green --- */
    --green-050: #edf7ea;
    --green-100: #d6eece;
    --green-300: #70c95c;
    --green-400: #53bc3d;
    --green-500: #43b02a; /* brand green 500 — primary (mark, dark-UI accent). Renewed 2026 */
    --green-600: #2a8813; /* brand green — deeper shade (light-UI accent; AA 4.5:1 on white) */
    --green-700: #267215;
    --green-800: #1c5310;
    /* --- Wordmark red (legacy 'i' dot in the logo artwork; not a UI accent) --- */
    --mark-red: #ed1c24;
    /* --- Base palette: slate neutrals --- */
    --slate-950: #101214;
    --slate-900: #16181a;
    --slate-850: #1a1d20;
    --slate-800: #24282c;
    --slate-700: #3a3f44;
    --slate-600: #585e64;
    --slate-500: #6f767c;
    --slate-400: #8a9096;
    --slate-300: #aab0b6;
    --slate-200: #e2e5e8;
    --slate-100: #eef0f2;
    --slate-050: #f7f8f9;
    --white: #ffffff;
    /* --- Status hues --- */
    --info-500: #3454d1;
    --info-soft: rgba(52,84,209,0.10);
    --success-500: var(--green-600);
    --success-soft: color-mix(in srgb, var(--green-600) 10%, transparent);
    --warning-500: #b7791f;
    --warning-soft: rgba(183,121,31,0.12);
    --danger-500: #cf2c26;
    --danger-soft: rgba(207,44,38,0.10);
    /* ===== Semantic aliases — LIGHT theme ===== */
    --brand: var(--green-600);
    --brand-hover: var(--green-700);
    --brand-active: var(--green-800);
    --brand-contrast: var(--white);
    --brand-soft: color-mix(in srgb, var(--green-600) 10%, transparent);
    --brand-soft-hover: color-mix(in srgb, var(--green-600) 18%, transparent);
    --brand-border: color-mix(in srgb, var(--green-600) 32%, transparent);
    --brand-solid: var(--green-500);
    /* page background: layered logistics gradient */
    --surface-page-0: var(--slate-050);
    --surface-page-1: var(--slate-100);
    --surface-page-2: var(--slate-200);
    --surface-tint: rgba(20,22,24,0.045);
    --surface-solid: var(--white);
    --surface-raised: var(--white);
    --surface-sunken: var(--slate-100);
    --surface-glass: rgba(255,255,255,0.70);
    --surface-hover: rgba(15,17,19,0.045);
    --surface-inset: rgba(15,17,19,0.03);
    --surface-field: rgba(255,255,255,0.85);
    --text-hi: var(--slate-900);
    --text-mid: var(--slate-600);
    --text-lo: var(--slate-400);
    --text-on-brand: var(--white);
    --border-subtle: rgba(15,17,19,0.09);
    --border-strong: rgba(15,17,19,0.16);
    --border-glass: rgba(15,17,19,0.08);
    --divider: rgba(15,17,19,0.09);
    /* region code chips — brand-green scheme (US / KR text badges) */
    --flag-usa-bg: var(--green-050);
    --flag-usa-text: var(--green-600);
    --flag-usa-border: transparent;
    --flag-kor-bg: var(--green-050);
    --flag-kor-text: var(--green-600);
    --flag-kor-border: transparent;
    /* logo artwork variant to use in this theme */
    --logo-variant-light: block; /* @kind other */
    --logo-variant-dark: none; /* @kind other */
}

/* ============================================================
   iMANIFEST — Typography tokens
   Every UI string is Inter. The logo is artwork, never typeset.
   Wide tracking on uppercase labels gives the calm, systematic
   filing-console tone.
   ============================================================ */

:root {
    /* families */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Inter', ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* tabular data uses Inter w/ tabular-nums */
    /* type scale (px) */
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 14px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 40px;
    /* weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    /* line heights */
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    /* letter spacing */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.14em;
    --tracking-widest: 0.24em;
    /* ---- Semantic roles ---- */
    --type-display-size: var(--text-4xl);
    --type-display-weight: var(--weight-semibold);
    --type-display-leading: var(--leading-tight);
    --type-display-tracking: var(--tracking-tight);
    --type-title-size: var(--text-2xl);
    --type-title-weight: var(--weight-semibold);
    --type-heading-size: var(--text-lg);
    --type-heading-weight: var(--weight-semibold);
    --type-body-size: var(--text-md);
    --type-body-weight: var(--weight-regular);
    --type-body-leading: var(--leading-normal);
    --type-label-size: var(--text-sm);
    --type-label-weight: var(--weight-semibold);
    /* uppercase eyebrow / system tags — the brand's signature label style */
    --type-eyebrow-size: var(--text-xs);
    --type-eyebrow-weight: var(--weight-semibold);
    --type-eyebrow-tracking: var(--tracking-widest);
    --type-caption-size: var(--text-xs);
    --type-caption-weight: var(--weight-regular);
}

/* ============================================================
   iMANIFEST — Spacing, radii, elevation, motion
   ============================================================ */

:root {
    /* spacing scale (4px base) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 14px;
    --space-5: 18px;
    --space-6: 24px;
    --space-7: 30px;
    --space-8: 36px;
    --space-9: 44px;
    --space-10: 60px;
    --space-11: 80px;
    /* corner radii */
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 14px; /* default card / row radius */
    --radius-xl: 20px; /* panel radius */
    --radius-pill: 999px;
    /* borders */
    --border-width: 1px;
    --border-width-strong: 1.5px;
    /* elevation — soft, long, low-opacity (calm/premium) */
    --shadow-xs: 0 1px 2px rgba(15,17,19,0.06);
    --shadow-sm: 0 4px 12px -4px rgba(15,17,19,0.10);
    --shadow-md: 0 12px 30px -12px rgba(15,17,19,0.16);
    --shadow-panel: 0 24px 60px -20px rgba(15,17,19,0.16);
    --shadow-focus: 0 0 0 3px var(--brand-soft);
    /* glass blur (used on floating panels over the page gradient) */
    --blur-panel: 22px;
    /* motion */
    --ease-standard: cubic-bezier(0.4,0,0.2,1); /* @kind other */
    --ease-out: cubic-bezier(0.16,1,0.3,1); /* @kind other */
    --dur-fast: 0.15s; /* @kind other */
    --dur-mid: 0.3s; /* @kind other */
    /* composed helpers */
    --page-gradient: radial-gradient(1200px 700px at 78% 8%, var(--surface-tint), transparent 60%), linear-gradient(120deg, var(--surface-page-0) 0%, var(--surface-page-1) 45%, var(--surface-page-2) 100%);
}


:root {
    --chip-border: var(--green-500);
    --chip-symbol: var(--green-600);
    --chip-hover-fill: var(--brand-soft);
    --tagline-color: var(--text-mid);
    --tagline-shadow: 0 1px 2px rgba(255,255,255,0.6), 0 0 1px rgba(0,0,0,0.4);
    --footer-shadow: 0 1px 2px rgba(255,255,255,0.6), 0 0 1px rgba(0,0,0,0.4);
}


* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-hi);
    min-height: 100vh;
    background: var(--page-gradient);
    position: relative;
    overflow-x: hidden;
    transition: color var(--dur-mid) var(--ease-standard)
}

a {
    color: var(--brand)
}

    a:hover {
        color: var(--brand-hover)
    }
/* ===== Variant B — Fluent Immersive ===== */
body {
    background: var(--sg-body-bg,#cddde8) !important
}

#sg-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: none;
    will-change: opacity,filter
}

    #sg-bg.sg-fadein {
        transition: opacity 0.8s cubic-bezier(0.33,0,0.2,1)
    }

    #sg-bg.sg-visible {
        opacity: 1
    }

@keyframes sg-entry-surge {
    0% {
        filter: blur(14px) brightness(1.02) saturate(1.0)
    }

    55% {
        filter: blur(3px) brightness(1.05) saturate(1.06)
    }

    100% {
        filter: blur(0) brightness(1.0) saturate(1.0)
    }
}

#sg-bg.sg-entry {
    animation: sg-entry-surge 2.1s cubic-bezier(0.22,0,0.12,1) forwards
}

@media(prefers-reduced-motion:reduce) {
    #sg-bg {
        transition: none !important
    }

        #sg-bg.sg-entry {
            animation: none
        }
}

#sg-bg canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    transform-origin: 50% 50%;
    transform: scale(1.07);
    animation: sgDrift 88s ease-in-out infinite
}

@keyframes sgDrift {
    0% {
        transform: scale(1.07) translate3d(0,0,0)
    }

    34% {
        transform: scale(1.11) translate3d(-1.1%,-1.5%,0)
    }

    67% {
        transform: scale(1.09) translate3d(1.2%,-0.6%,0)
    }

    100% {
        transform: scale(1.07) translate3d(0,0,0)
    }
}

@media(prefers-reduced-motion:reduce) {
    #sg-bg canvas {
        animation: none !important
    }
}

.bgrain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='bn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23bn)' opacity='0.03'/%3E%3C/svg%3E")
}

.hero-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #7B8288;
    margin: 0 0 6px
}

.hero-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-hi)
}

.hero-sub {
    margin: 0;
    font-size: var(--text-md);
    color: var(--text-mid);
    max-width: none;
    line-height: 1.5
}

.sec {
    margin-top: 22px
}

.sec + .sec {
    margin-top: 22px;
    padding-top: 8px
}

.sec-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 6px
}

.sec-head .site-badge {
    transform: translateY(1px)
}

.site-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 38px;
    height: 22px;
    padding: 3px 10px 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg,#FCFDFD 0%,#EFF1F3 100%);
    border: 1px solid #D2D7DC;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1.5px rgba(16,24,32,.055);
    color: #4B5257;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.sec-label {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-hi);
    white-space: nowrap
}

.sec-rule {
    flex: 1;
    height: 1px;
    border: 0;
    background: var(--border-subtle);
    margin: 0 0 0 4px
}

.sec-desc {
    margin: 0 0 12px;
    font-size: var(--text-md);
    color: var(--text-mid);
    line-height: 1.5
}

.modgrid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,296px));
    gap: 10px;
    justify-content: start
}

.modgrid--pair {
    grid-template-columns: repeat(3,minmax(0,296px));
    gap: 10px;
    margin-top: 10px;
    justify-content: start
}

@media (max-width:900px) {
    .modgrid, .modgrid--pair {
        grid-template-columns: repeat(2,minmax(0,296px))
    }
}

@media (max-width:620px) {
    .modgrid, .modgrid--pair {
        grid-template-columns: minmax(0,1fr)
    }
}

.mc-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s var(--ease-out)
}

    .mc-icon svg {
        width: 100%;
        height: 100%;
        display: block
    }

.mc-body {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .mc-body img {
        display: block !important;
        height: 18px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important
    }

.mc-desc {
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mc-arrow {
    display: none !important
}

.mcB {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 296px;
    box-sizing: border-box;
    padding: 9px 12px 9px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color .2s ease,box-shadow .2s ease,transform .2s ease,border-color .2s ease
}

    .mcB:hover {
        transform: translateY(-2px);
        background-color: var(--mc-tint);
        border-color: color-mix(in srgb,var(--mc-accent) 20%,var(--border-subtle));
        box-shadow: 0 4px 12px rgba(0,0,0,0.08)
    }

        .mcB:hover .mc-icon {
            transform: scale(1.05)
        }

    .mcB:focus-visible {
        outline: 2px solid var(--mc-accent);
        outline-offset: 2px
    }

.login-lockup > span:first-child {
    min-width: 0
}

.login-lockup img {
    max-width: 100%;
    object-fit: contain
}

@media (max-width:620px) {
    .login-main {
        padding: 32px 20px 28px !important
    }
}

.login-symbol {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto
}

    .login-symbol svg {
        width: 100%;
        height: 100%;
        display: block
    }

.site-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    padding: 0 48px 16px
}

#sg-seam {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--sg-body-bg) 22%,transparent) 55%,color-mix(in srgb,var(--sg-body-bg) 52%,transparent) 100%)
}

#sg-blobs {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden
}

    #sg-blobs .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(88px);
        will-change: transform,opacity
    }

    #sg-blobs .b1 {
        width: 88vw;
        height: 88vw;
        left: -26vw;
        bottom: -42vw;
        background: radial-gradient(circle at 50% 50%,var(--blob-1),transparent 70%);
        mix-blend-mode: multiply;
        opacity: .42;
        animation: blobDrift1 46s ease-in-out infinite
    }

    #sg-blobs .b2 {
        width: 76vw;
        height: 76vw;
        right: -24vw;
        bottom: -16vw;
        background: radial-gradient(circle at 50% 50%,var(--blob-2),transparent 70%);
        mix-blend-mode: multiply;
        opacity: .38;
        animation: blobDrift2 61s ease-in-out infinite
    }

    #sg-blobs .b3 {
        width: 70vw;
        height: 70vw;
        left: 14vw;
        bottom: -36vw;
        background: radial-gradient(circle at 50% 50%,var(--blob-3),transparent 70%);
        mix-blend-mode: screen;
        opacity: .5;
        animation: blobDrift3 37s ease-in-out infinite
    }

@keyframes blobDrift1 {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    34% {
        transform: translate3d(7vw,-8vh,0) scale(1.1)
    }

    67% {
        transform: translate3d(-4vw,-15vh,0) scale(1.03)
    }

    100% {
        transform: translate3d(0,0,0) scale(1)
    }
}

@keyframes blobDrift2 {
    0% {
        transform: translate3d(0,0,0) scale(1.04)
    }

    34% {
        transform: translate3d(-9vw,-11vh,0) scale(.94)
    }

    67% {
        transform: translate3d(-3vw,-3vh,0) scale(1.08)
    }

    100% {
        transform: translate3d(0,0,0) scale(1.04)
    }
}

@keyframes blobDrift3 {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    34% {
        transform: translate3d(6vw,-16vh,0) scale(1.13)
    }

    67% {
        transform: translate3d(-8vw,-7vh,0) scale(1.02)
    }

    100% {
        transform: translate3d(0,0,0) scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {
    #sg-blobs .blob {
        animation: none !important
    }
}

@media (max-width:600px) {
    .hero-title {
        font-size: 26px
    }
}