/* =====================================================================
 * contact.css — public /contact page
 * ---------------------------------------------------------------------
 * Hero + two-column form/info layout + dedicated success state.
 *
 * Follows DESIGN.md §8.2 long-form archetype:
 *   - Page-scoped section rhythm tokens (--contact-section-pad-y, etc.)
 *   - Type ramp from DESIGN.md §3.3 (eyebrow 13px literal · 0.16em
 *     uppercase muted · display 800 -0.04em · body 400 1.65 line-height)
 *   - Form field family from §7.5 (10px 12px padding · 10px radius ·
 *     Pretendard 400 13.5px · NEUTRAL focus tokens)
 *   - Submit button uses the unified `primary` variant pill from §7.4
 *     (--global-button-background-color · 999px radius · Pretendard 600)
 *   - Cards use --global-card-background + --global-border-color (§7.7)
 *   - Hairlines via rgba(var(--global-text-color-rgb), 0.06) per §7.9
 *   - Korean text containers carry `word-break: keep-all; overflow-wrap:
 *     anywhere;` per §0 principle 3
 *   - prefers-reduced-motion override per §5.7 quality checklist
 *   - All color flows from tokens; brand stops appear only as ambient
 *     bloom shadows (§6.3 4-quadrant recipe) on the form card, never
 *     as text/border accents (§2 principle 5)
 * ===================================================================== */

.contact-page {
    --contact-section-pad-y: clamp(72px, 12vh, 140px);
    --contact-section-pad-x: clamp(24px, 5vw, 80px);
    --contact-content-max: 1080px;
    --contact-form-radius: 18px;
    --contact-card-radius: 14px;
    --contact-field-radius: 10px;
    --contact-gap: clamp(20px, 3vw, 32px);
    --contact-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --contact-ease-spring: cubic-bezier(0.16, 1,    0.3,  1);

    display: block;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    width: 100%;
    color: var(--global-text-color);
    font-family: 'Pretendard Variable', Pretendard, -apple-system,
                 BlinkMacSystemFont, system-ui, sans-serif;
    word-break: keep-all;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    padding: 0 var(--contact-section-pad-x) clamp(80px, 14vh, 160px);
}

/* Ambient aura — shared vocabulary with auth/profile/stage/about so the
   public marketing pages sit on the same iridescent backdrop instead of a
   flat fill. Decorative only (aria-hidden in markup), pinned behind content
   via z-index:-1 inside the .contact-page stacking context. */
.contact-aura {
    position: absolute;
    inset: -20% -15% auto -15%;
    height: 120%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 48% at 22% 30%, rgba(var(--brand-violet-rgb), 0.18), transparent 70%),
        radial-gradient(34% 42% at 78% 22%, rgba(var(--brand-rose-rgb),   0.14), transparent 72%),
        radial-gradient(40% 46% at 62% 72%, rgba(var(--brand-teal-rgb),   0.14), transparent 70%),
        radial-gradient(36% 40% at 18% 78%, rgba(var(--brand-cognac-rgb), 0.12), transparent 72%);
    filter: blur(78px) saturate(120%);
    opacity: 0.72;
    animation: contact-aura-drift 26s ease-in-out infinite alternate;
}
@keyframes contact-aura-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1)    rotate(0deg); }
    50%  { transform: translate3d( 2%,  1%, 0) scale(1.06) rotate(2deg); }
    100% { transform: translate3d( 3%, -1%, 0) scale(1.03) rotate(-2deg); }
}

.contact-page .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ---------- Hero --------------------------------------------------- */

.contact-hero {
    max-width: var(--contact-content-max);
    margin: 0 auto;
    padding: var(--contact-section-pad-y) 0 clamp(40px, 6vh, 64px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2vh, 22px);
}

/* Eyebrow — DESIGN.md §3.4 exact spec.
   13px literal, never clamp. 500 weight. 0.16em tracking.
   Color = --global-text-muted; never a brand hue. */
.contact-hero-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

/* Orphan-word guard — balance short display/lead text so the final word
   never wraps onto a line by itself. Progressive enhancement: ignored
   where unsupported, and never alters box dimensions. */
.contact-hero-title,
.contact-hero-subtitle,
.contact-form-title,
.contact-success-title {
    text-wrap: balance;
}

/* Section headline — DESIGN.md §3.3 (700 weight · clamp · -0.03em). */
.contact-hero-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--global-text-color);
    max-width: 22ch;
}

/* Body — DESIGN.md §3.3 (400 · 1.65 line-height · -0.005em). */
.contact-hero-subtitle {
    margin: 0;
    max-width: 640px;
    font-family: inherit;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

/* ---------- Body layout (form + info) ------------------------------ */

.contact-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--contact-gap);
    max-width: var(--contact-content-max);
    margin: 0 auto;
    align-items: start;
}

/* ---------- Form card --------------------------------------------- */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(24px, 3vw, 36px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--contact-form-radius);
    transition:
        transform 0.6s var(--contact-ease-spring),
        box-shadow 0.6s var(--contact-ease),
        border-color 0.18s var(--contact-ease);
    isolation: isolate;
}

/* Card hover bloom — DESIGN.md §6.3 four-quadrant iridescent recipe.
   The form is the page's most important card, so it gets the full-
   strength bloom. Alphas pulled one step down from the hero pillars
   because the form sits inside a body section, not above one. */
.contact-form:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.04);
    box-shadow:
        -22px -14px 50px -10px rgba(var(--brand-iris-rgb),     0.18),
         22px -14px 50px -10px rgba(var(--brand-mulberry-rgb), 0.16),
         22px  22px 56px -10px rgba(var(--brand-brass-rgb),    0.14),
        -22px  22px 56px -10px rgba(var(--brand-lichen-rgb),   0.18),
          0   28px 56px -24px rgba(var(--global-text-color-rgb), 0.12);
}

/* Card title — DESIGN.md §3.3 (600 · clamp(18,1.8vw,22) · -0.018em). */
.contact-form-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--global-text-color);
}

.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Form label — DESIGN.md §7.5 (Pretendard 500 · 12px · -0.005em · muted). */
.contact-field label {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

.contact-required {
    color: var(--global-error-color);
    margin-left: 2px;
}

/* Input family — DESIGN.md §7.5 boxed v4 style.
   10px 12px padding · 10px radius · 13.5px Pretendard 400 ·
   hairline at rgba(text, 0.14) · neutral focus tokens. */
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field select,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--global-text-color);
    background: var(--global-body-background);
    border: 1px solid rgba(var(--global-text-color-rgb), 0.14);
    border-radius: var(--contact-field-radius);
    transition:
        border-color 0.18s var(--contact-ease),
        box-shadow   0.18s var(--contact-ease);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* Select chevron — DESIGN.md §7.5 inline SVG data URI · right 12px. */
.contact-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2374747a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.contact-field textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.28);
}

/* Neutral focus tokens — DESIGN.md §2.5 / §7.5. Brand color is
   reserved for ambient treatments, never solo accents. */
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--focus-border-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.contact-field input:invalid:not(:placeholder-shown),
.contact-field textarea:invalid:not(:placeholder-shown) {
    /* Only flag invalid AFTER the user has typed — empty required
       fields stay neutral until submit attempt. */
    border-color: var(--global-error-color);
}

/* Field hint / character counter — DESIGN.md §7.5 hint caption
   (Pretendard 400 · 11.5px · muted). */
.contact-field-hint {
    margin: 4px 0 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--global-text-muted);
    text-align: right;
}

.contact-field-hint.is-over {
    color: var(--global-error-color);
    font-weight: 500;
}

/* Honeypot — visually removed but kept in DOM. `display: none`
   is avoided because some scrapers skip non-rendered fields. */
.contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ---------- Consent ----------------------------------------------- */

.contact-consent {
    padding: 14px 16px;
    background: var(--state-hover-bg);
    border: 1px solid rgba(var(--global-text-color-rgb), 0.06);
    border-radius: var(--contact-field-radius);
}

.contact-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
    cursor: pointer;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.contact-consent-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--global-text-color);
    cursor: pointer;
}

/* ---------- Submit (unified primary button) ----------------------- */

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

/* Primary button — DESIGN.md §7.4 unified system, `lg` size + `primary`
   variant. 48px height · 999px pill · Pretendard 600 14px ·
   --global-button-background-color dark fill · Pretendard 600 ·
   `0.18s` transitions on color/border/opacity. */
.contact-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 26px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--global-button-text-color);
    background: var(--global-button-background-color);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition:
        opacity   0.18s var(--contact-ease),
        transform 0.18s var(--contact-ease);
}

.contact-submit:hover:not(:disabled) {
    opacity: 0.85;
    transform: translateY(-1px);
}

.contact-submit:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.contact-submit:active:not(:disabled) {
    transform: translateY(0);
}

.contact-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.contact-submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--global-button-text-color);
    border-radius: 50%;
    animation: contact-spin 0.7s linear infinite;
}

.contact-submit.is-loading .contact-submit-spinner {
    display: inline-block;
}

@keyframes contact-spin {
    to { transform: rotate(360deg); }
}

.contact-form-status {
    margin: 0;
    min-height: 18px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--global-text-muted);
}

.contact-form-status.is-error {
    color: var(--global-error-color);
    font-weight: 500;
}

/* ---------- Info sidebar ----------------------------------------- */

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-info-card {
    padding: 22px 24px;
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--contact-card-radius);
}

/* Info card heading uses the same eyebrow spec as the hero
   (13px · 500 · 0.16em · muted) — repeats DESIGN.md §3.4 verbatim. */
.contact-info-heading {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

.contact-info-text {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.contact-info-hint {
    margin: 6px 0 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--global-text-muted);
}

/* Link uses --global-primary-color (refined indigo per DESIGN.md §2.1),
   NOT the brand iris stop. The brand palette is reserved for ambient
   treatments. */
.contact-info-mail {
    color: var(--global-primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.18s var(--contact-ease);
}

.contact-info-mail:hover {
    opacity: 0.78;
    text-decoration: underline;
}

/* ---------- Success state ---------------------------------------- */

.contact-success[hidden] { display: none; }

.contact-success {
    display: block;
    max-width: 640px;
    margin: clamp(40px, 6vh, 60px) auto 0;
}

.contact-success-card {
    padding: clamp(36px, 6vh, 56px) clamp(22px, 4vw, 36px);
    text-align: center;
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--contact-form-radius);
    /* Iris-tinted ambient lift — DESIGN.md §6.2 card lift recipe. */
    box-shadow:
        0 28px 56px -20px rgba(var(--brand-iris-rgb), 0.18),
        0 16px 40px -16px rgba(var(--global-text-color-rgb), 0.12);
}

.contact-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    font-size: 28px;
    font-weight: 700;
    color: var(--global-button-text-color);
    background: var(--global-success-color);
    border-radius: 50%;
}

.contact-success-title {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.024em;
    color: var(--global-text-color);
}

/* Receives programmatic focus after submit (tabindex="-1") — suppress the
   stray focus ring since it's not keyboard-tabbable, only scripted. */
.contact-success-title:focus {
    outline: none;
}

.contact-success-text {
    margin: 0 auto 24px;
    max-width: 440px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* Success CTA uses the `outline` button variant from §7.4
   (transparent · 1px hairline · text color · neutral hover). */
.contact-success-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    background: transparent;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.16);
    border-radius: 999px;
    text-decoration: none;
    transition:
        background   0.18s var(--contact-ease),
        border-color 0.18s var(--contact-ease);
}

.contact-success-cta:hover {
    background: var(--state-hover-bg);
    border-color: rgba(var(--global-text-color-rgb), 0.32);
}

.contact-success-cta:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* When success is showing, hide the form/info pair. The DOM stays
   intact (no `display: none` on a separate container) so the back-
   button can restore the form state cleanly. */
.contact-page.is-submitted .contact-body { display: none; }

/* ---------- Responsive — DESIGN.md §4.7 single 640px breakpoint - */

@media (max-width: 640px) {
    .contact-page {
        padding: 0 20px clamp(64px, 12vh, 120px);
    }
    .contact-hero {
        padding-top: clamp(56px, 10vh, 96px);
        gap: 14px;
    }
    .contact-body {
        grid-template-columns: 1fr;
    }
    /* Info sidebar drops below the form on mobile. */
    .contact-form { order: 1; }
    .contact-info { order: 2; }
    .contact-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reduced motion — DESIGN.md §5.7 (REQUIRED) ----------- */

@media (prefers-reduced-motion: reduce) {
    .contact-form,
    .contact-submit,
    .contact-success-cta,
    .contact-info-mail,
    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        transition: none;
    }
    .contact-submit-spinner {
        animation: none;
        /* Keep the spinner visible as a static dot — users still need
           a "submitting" affordance. */
        border-top-color: rgba(255, 255, 255, 0.7);
    }
    .contact-form:hover {
        transform: none;
    }
    .contact-aura {
        animation: none;
    }
}