@import url("/css/vendor/pretendard.css");
@import url("/css/vendor/paperlogy.css");

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
    color: var(--global-text-color);
    background-color: var(--global-body-background);
}

div,
input,
textarea,
select {
    box-sizing: border-box;
}

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


/* Login/Join 버튼 토글 */
#header-account .mode-login {
    display: flex;
}

#header-account .mode-join {
    display: none;
}

/* Studio CTA — always-on iridescent gradient. Single source of truth
 * is `--brand-iridescent-gradient` + `brand-iridescent-shift` keyframe
 * in common.css (see docs/DESIGN.md §7.4). The selector is
 * kept template-scoped because the marketing header is the only
 * surface that promotes Studio this loud. */
#header-account button#button-header-studio {
    background: var(--brand-iridescent-gradient);
    background-size: 300% 300%;
    color: white;
    border: 1px solid transparent;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    animation: brand-iridescent-shift 20s ease infinite;
}
#header-account button#button-header-studio:hover {
    transform: translateY(-1px);
    opacity: 1;
}
/* On phones, keep the Studio CTA visible — primary brand action — but
 * shrink it to a compact pill so it doesn't crowd the avatar trigger.
 * Same iridescent treatment, just tighter geometry. */
@media (max-width: 640px) {
    #header-account button#button-header-studio {
        height: 30px;
        min-height: 0;
        padding: 0 12px;
        font-size: 12px;
    }
}

body.join-mode #header-account .mode-login {
    display: none;
}

body.join-mode #header-account .mode-join {
    display: flex;
}

#wrapper-contents {
    position: relative;
    float: left;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: calc(var(--header-height) + var(--global-padding)) var(--global-padding) var(--global-padding) var(--global-padding);
    background-color: var(--global-background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#wrapper-footer {
    position: relative;
    float: left;
    width: 100%;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--global-padding);
    margin-top: auto;
    gap: var(--global-gap);
    font-size: 0.8em;
}

#footer-language {
    display: flex;
    align-items: center;
    gap: calc(var(--global-gap) / 2);
}

#footer-language a {
    color: rgba(var(--global-text-color-rgb), 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

#footer-language a:hover {
    color: rgba(var(--global-text-color-rgb), 0.7);
}

#footer-language a.active {
    color: rgba(var(--global-text-color-rgb), .7);
    font-weight: bold;
}

/* Footer legal links — privacy / terms / ai notice */
#footer-legal {
    display: flex;
    align-items: center;
    gap: calc(var(--global-gap) / 2);
    color: rgba(var(--global-text-color-rgb), 0.42);
}
#footer-legal a {
    color: rgba(var(--global-text-color-rgb), 0.55);
    text-decoration: none;
    transition: color 0.2s;
}
#footer-legal a:hover {
    color: rgba(var(--global-text-color-rgb), 0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Tablet — tighten the logo padding when horizontal space gets tighter
   than full desktop, but DO NOT hide header chrome here. Header layout
   (inline nav vs hamburger, Studio CTA visibility) switches at 640px
   so iPad portrait keeps the full desktop header. */
@media (max-width: 768px) {
    #header-logo {
        padding-left: calc(var(--global-padding) / 1.5);
    }
}

/* Mobile — phone-only chrome. Aligned with common.css's 640px breakpoint
   where the inline nav is swapped for the hamburger menu, so the
   Studio CTA disappears at the same moment the mobile menu takes over. */
@media (max-width: 640px) {
    #header-menu {
        display: none;
    }

    #button-header-studio {
        display: none;
    }
}