@font-face {
    font-family: "SUIT Public";
    src: url("/assets/fonts/SUIT-Public.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "SUIT Variable";
    src: url("/assets/fonts/SUIT-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --surface-canvas: #f8faff;
    --surface-primary: #ffffff;
    --surface-subtle: #f5f8fd;
    --surface-accent: #eff6ff;
    --surface-accent-strong: #dbeafe;
    --surface-app-bar: rgb(248 250 255 / 94%);
    --surface-bottom-navigation: #fff;
    --surface-overlay: rgb(15 31 61 / 36%);
    --help-surface-warm: #fff7cf;
    --help-border-warm: #f0d66f;
    --help-surface-cool: #e5f5ff;
    --help-border-cool: #b8dcf1;
    --help-surface-contact: #dcecff;
    --help-surface-brand: #f5f7fa;
    --text-on-accent: #ffffff;
    --text-primary: #0f1f3d;
    --text-secondary: #52627c;
    --text-muted: #66748a;
    --border-default: #dce6f5;
    --border-strong: #b9cff2;
    --accent-primary: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-pressed: #1e40af;
    --focus-ring: #2563eb;
    --success-surface: #eefbf5;
    --success-text: #147a55;
    --success-border: #bfe8d6;
    --danger-text: #c43d4d;
    --shadow-prompt: 0 18px 50px rgb(37 99 235 / 10%), 0 2px 8px rgb(15 31 61 / 5%);
    --shadow-bottom-navigation: 0 -8px 24px rgb(15 31 61 / 6%);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --text-display: clamp(2.25rem, 5vw, 3.5rem);
    --text-display-mobile: 2.25rem;
    --text-tool-display: clamp(1.75rem, 3vw, 2.5rem);
    --text-tool-section-title: clamp(1.25rem, 2vw, 1.5rem);
    --text-h2: clamp(1.5rem, 3vw, 2rem);
    --text-h3: 1.0625rem;
    --text-brand: 1.375rem;
    --text-form-title: clamp(1.25rem, 3vw, 1.625rem);
    --text-step-number: 1.25rem;
    --text-body-lg: clamp(1rem, 2vw, 1.1875rem);
    --text-body: 1rem;
    --text-body-sm: 0.875rem;
    --text-caption: 0.8125rem;
    --font-primary: "SUIT Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --font-public: "SUIT Public", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --weight-navigation: 650;
    --weight-emphasis: 750;
    --weight-bold: 800;
    --line-height-heading: 1.25;
    --line-height-body: 1.6;
    --line-height-relaxed: 1.75;
    --tracking-brand: -0.035em;
    --tracking-form-title: -0.025em;
    --tracking-display: -0.055em;
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-pill: 999px;
    --border-width: 1px;
    --border-width-strong: 2px;
    --focus-width: 3px;
    --size-icon-small: 1rem;
    --size-icon-default: 1.25rem;
    --size-icon-large: 1.5rem;
    --size-icon-navigation-mobile: 1.0625rem;
    --size-brand-mark: 2.5rem;
    --size-brand-mark-mobile: 2.25rem;
    --control-navigation-height: 3rem;
    --control-navigation-height-mobile: 2.75rem;
    --control-bottom-navigation-item-height: 3rem;
    --control-label-height: 2.75rem;
    --control-tool-label-height: 2rem;
    --control-suggestion-height: 4.75rem;
    --control-tool-card-min-height: 13rem;
    --control-home-card-min-height: 10rem;
    --control-textarea-min-height: 8.75rem;
    --control-textarea-max-height: 17.5rem;
    --control-primary-height: 3.5rem;
    --control-bottom-navigation-height: 4.5rem;
    --control-field-height: 3rem;
    --control-blog-textarea-min-height: 6.5rem;
    --control-blog-result-min-height: 36rem;
    --control-comment-textarea-min-height: 11rem;
    --control-comment-dropzone-min-height: 10rem;
    --control-comment-preview-thumb: 4rem;
    --control-comment-preview-thumb-mobile: 3.5rem;
    --control-image-dropzone-min-height: 12rem;
    --control-image-preview-thumb: 5rem;
    --control-image-preview-thumb-mobile: 4rem;
    --control-image-size-option-height: 6.5rem;
    --control-image-result-min-height: 40rem;
    --control-image-result-body-min-height: 32rem;
    --control-menu-textarea-min-height: 6.5rem;
    --control-mypage-tab-height: 2.75rem;
    --control-mypage-textarea-min-height: 8rem;
    --control-mypage-list-min-height: 4.5rem;
    --control-mypage-badge-height: 2rem;
    --control-mypage-badge-min-width: 3.25rem;
    --size-mypage-work-thumbnail: 4rem;
    --size-mypage-work-thumbnail-mobile: 3.5rem;
    --size-mypage-profile-photo: 7rem;
    --size-mypage-profile-photo-mobile: 6.5rem;
    --control-chat-compact-height: 2.75rem;
    --control-chat-textarea-min-height: 3.5rem;
    --control-chat-send-min-width: 5.5rem;
    --control-chat-preview-size: 4.5rem;
    --size-chat-progress-dot: 0.5rem;
    --control-hidden-input-size: 1px;
    --size-menu-shape-short: 0.75rem;
    --size-menu-shape-long: 1.125rem;
    --size-menu-shape-square: 0.9375rem;
    --layout-sidebar-width: 14.5rem;
    --layout-content-max: 60rem;
    --layout-home-max: 72rem;
    --layout-copy-max: 42rem;
    --layout-guide-heading-max: 40rem;
    --layout-guide-hero-panel-min: 18rem;
    --layout-guide-hero-panel-max: 24rem;
    --layout-guide-prompt-panel-min: 18rem;
    --layout-guide-prompt-panel-max: 28rem;
    --layout-tool-heading-max: 52rem;
    --layout-showcase-max: 65rem;
    --layout-showcase-copy-max: 46rem;
    --layout-suggestion-min: 16.25rem;
    --layout-step-min: 13.125rem;
    --layout-showcase-item-min: 15.625rem;
    --layout-signup-max: 72rem;
    --layout-signup-form: 30rem;
    --layout-blog-workspace-max: 72rem;
    --layout-blog-input-min: 24rem;
    --layout-blog-result-min: 30rem;
    --layout-blog-copy-max: 42rem;
    --layout-image-input-min: 24rem;
    --layout-image-result-min: 30rem;
    --layout-image-output-max: 36rem;
    --layout-image-output-portrait-max: 26rem;
    --layout-menu-output-max-height: 46rem;
    --layout-mypage-max: 64rem;
    --layout-mypage-card-min: 18rem;
    --layout-mypage-profile-form-max: 30rem;
    --layout-mypage-tab-min: 8rem;
    --layout-mypage-filter-max: 22rem;
    --layout-mypage-heading-column: 14rem;
    --layout-mypage-image-max-height: 48rem;
    --layout-chat-max: 90rem;
    --layout-chat-history: 17.5rem;
    --layout-chat-settings: 15rem;
    --layout-chat-message-max: 46rem;
    --layout-chat-message-width: 88%;
    --layout-chat-message-width-mobile: 94%;
    --layout-chat-image-max-width: 22rem;
    --layout-chat-image-max-height: 20rem;
    --layout-chat-settings-select-min: 12rem;
    --layout-chat-settings-select-max: 18rem;
    --layout-chat-settings-max-height-tablet: 20rem;
    --layout-chat-drawer-width: 88vw;
    --layout-chat-viewport-offset: 7.5rem;
    --layout-chat-viewport-offset-tablet: 7rem;
    --layout-chat-viewport-offset-mobile: 8.5rem;
    --layout-account-name-max: 8rem;
    --layout-account-name-mobile-max: 5rem;
    --text-bottom-navigation: 0.6875rem;
    --scroll-offset-section: 8rem;
    --viewport-min-width: 20rem;
    --breakpoint-brand-compact: 26.25rem;
    --breakpoint-auth-stack: 21.25rem;
    --breakpoint-header-wide: 40rem;
    --breakpoint-content-roomy: 45rem;
    --breakpoint-desktop-shell: 60rem;
    --layer-sticky: 20;
    --layer-chat-drawer: 40;
    --layer-skip-link: 100;
    --optical-icon-offset: 2px;
    --hover-lift: -2px;
    --press-scale: 0.995;
    --duration-micro: 160ms;
    --duration-reveal: 520ms;
    --duration-stagger: 80ms;
    --duration-loader-spin: 800ms;
    --duration-chat-progress: 1.2s;
    --duration-chat-progress-delay: 160ms;
    --opacity-disabled: 0.55;
    --opacity-progress-muted: 0.35;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-reveal-distance: 1rem;
    --motion-chat-message-distance: 0.375rem;
    --motion-chat-progress-distance: 0.25rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--surface-canvas);
    font-family: var(--font-primary);
    scroll-behavior: smooth;
}

html.public-document {
    font-family: var(--font-public);
}

body {
    min-width: var(--viewport-min-width);
    min-height: 100dvh;
    margin: 0;
    background: var(--surface-canvas);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.public-page {
    font-family: var(--font-public);
}

a {
    color: inherit;
}

button,
textarea {
    color: inherit;
    font: inherit;
}

button {
    border: 0;
}

h1,
h2,
h3,
p,
ol {
    margin: 0;
}

h1,
h2,
h3 {
    line-height: var(--line-height-heading);
    text-wrap: balance;
    word-break: keep-all;
}

p {
    word-break: keep-all;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.skip-link {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: var(--layer-skip-link);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-small);
    background: var(--text-primary);
    color: var(--text-on-accent);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transform: translateY(-200%);
    white-space: nowrap;
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-width);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}