/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    min-width: 1200px;
    height: 100%;

    overflow: hidden;

    background: #d9dad5;
    color: #171918;

    font-family: "Pretendard", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}


/* =========================
   COMMON HEADER
========================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100%;
    height: 90px;

    background: rgba(255, 255, 255, 0.08);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 1200px;
    height: 100%;

    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    display: block;

    width: 120px;
    height: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 42px;
}

.nav a {
    position: relative;

    color: rgba(255, 255, 255, 0.85);

    font-size: 15px;
    line-height: 1;
    font-weight: 600;

    transition: color 0.2s ease;
}

.nav a:hover,
.nav a.is-active {
    color: #fff;
}

.nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -9px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right center;

    transition: transform 0.25s ease;
}

.nav a:hover::after,
.nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* =========================
   CONTACT PAGE
========================= */

.contact-page {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    padding-top: 90px;

    overflow: hidden;
    perspective: 1800px;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(255, 255, 255, 0.28),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(69, 91, 84, 0.24),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #5f6a66 0%,
            #7d8782 48%,
            #a4a39b 100%
        );
}

.contact-page::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    pointer-events: none;
}


/* =========================
   PAGE LABEL
========================= */

.page-label {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 760px;
    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.14em;
}


/* =========================
   CARD STAGE
========================= */

.card-stage {
    position: relative;
    z-index: 2;

    width: 760px;
    height: 422px;
}

.business-card {
    position: relative;

    width: 100%;
    height: 100%;

    outline: none;

    transform-style: preserve-3d;

    transition:
        transform 0.8s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}

.business-card.is-flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 38px 42px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 8px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow:
        0 28px 70px
        rgba(48, 55, 52, 0.18);
}

.card-face::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.13;

    background-image:
        linear-gradient(
            105deg,
            transparent 0 46%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 54%
        );

    pointer-events: none;
}


/* =========================
   CARD FRONT
========================= */

.card-front {
    background:
        linear-gradient(
            135deg,
            #68736e,
            #929991
        );

    color: #fff;
    cursor: pointer;
}

.card-front:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 8px;
}

.front-top,
.front-bottom,
.back-top,
.back-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.front-top img {
    display: block;

    width: 110px;
    height: auto;
}

.front-top span,
.front-bottom {
    color: rgba(255, 255, 255, 0.62);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.card-front h1 {
    position: relative;
    z-index: 2;

    font-size: 38px;
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -0.058em;
}


/* =========================
   CARD BACK
========================= */

.card-back {
    background:
        linear-gradient(
            135deg,
            #f3f2ed,
            #dfe2dc
        );

    color: #171918;

    transform: rotateY(180deg);
}

.back-top > p {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.back-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.available {
    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(23, 25, 24, 0.5);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.available i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #6f8a78;

    box-shadow:
        0 0 12px
        rgba(111, 138, 120, 0.5);
}

.back-actions button {
    position: relative;
    z-index: 3;

    color: rgba(23, 25, 24, 0.5);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;

    transition: color 0.2s ease;
}

.back-actions button:hover {
    color: #171918;
}

.back-contact {
    position: relative;
    z-index: 3;
}

.back-contact > p {
    color: rgba(23, 25, 24, 0.58);

    font-size: 16px;
}


/* =========================
   EMAIL BUTTON
========================= */

.email-link {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: auto;
    margin-top: 24px;
    padding: 13px 18px;

    border:
        1px solid
        rgba(23, 25, 24, 0.32);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.32);

    color: #171918;

    font-size: 15px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.02em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.email-link > span {
    font-size: 14px;

    transition:
        transform 0.2s ease;
}

.email-link:hover {
    background:
        rgba(255, 255, 255, 0.72);

    transform: translateY(-2px);
}

.email-link:hover > span {
    transform:
        translate(3px, -3px);
}

.back-bottom {
    color: rgba(23, 25, 24, 0.4);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
}


/* =========================
   PAGE NOTE
========================= */

.page-note {
    position: relative;
    z-index: 2;

    width: 760px;
    margin-top: 18px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 11px;
    text-align: right;
}


/* =========================
   MOTION
========================= */

.reveal {
    opacity: 0;
    transform: translateY(22px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================
   FOCUS
========================= */

button:focus-visible,
a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {
    .business-card,
    .reveal,
    .email-link,
    .email-link > span,
    .nav a::after {
        transition-duration: 0.01ms;
    }
}