/* Project stylesheet.
   Written once. The generator never rewrites this file, so edit it freely.

   This file loads after tokens.css, utilities.css, common.css and layout.css.
   Do not constrain or pad body here: sections own their backgrounds at full
   viewport width, then put their readable content in a child .inner.

   <section class="sub-section">
       <div class="inner">...</div>
   </section>
*/

/* A harmless baseline for project-owned navigation. The shared header's
   class-based rules remain the stronger, component-specific layer. */
nav ul {
    display: flex;
    gap: var(--space-md);
    padding: 0;
    list-style: none;
}

a {
    color: var(--color-primary);
}

/* ===========================================================================
   Shared header
   Site-wide on purpose: the lockup is the same on every screen. layout.css
   sizes the icon at 2.8rem by default; the design's lockup is 51x36.46.
   =========================================================================== */
.site-header .inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header__logo-icon {
    width: 5.1rem;
}

/* ===========================================================================
   home.php
   Scoped to #home-wrap so no other screen is affected. The shell owns only
   this frame; each section below paints edge to edge and its child .inner
   restores the readable width. No negative margins.
   =========================================================================== */

#home-wrap {
    padding-top: 0;
}

#home-wrap .home-hero,
#home-wrap .home-menu,
#home-wrap .home-faq {
    display: block;
}

/* ---- hero ----------------------------------------------------------------
   The design overlaps the illustration with the text column: the headline is
   305px wide and the artwork starts at x=238. Both live in the same grid cell
   so the headline keeps its full measure and the art overlays the bottom
   right. No absolute positioning and no negative margins.
   -------------------------------------------------------------------------- */
#home-wrap .home-hero {
    /* The artwork is a sibling of .inner and shares its grid cell, so it can
       overflow the bottom gutter the way the design does. The single column is
       capped and centred exactly like .inner, so on wide screens the artwork
       tracks the readable column instead of flying out to the viewport edge.
       The section itself stays full-bleed, so the background still spans. */
    display: grid;
    grid-template-columns: min(100%, var(--inner-max-width));
    justify-content: center;
    background: var(--color-primary-soft);
}

#home-wrap .home-hero > .inner {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* The design frame declares gap:46px but resolves to 32px, because
       space-between distributes inside its fixed 136px height. 32px is the
       real spacing, expressed on the same 250-375 curve the generator uses
       for gaps (min = max * 250/375, no floor). */
    row-gap: clamp(21.3333px, calc(0px + 8.5333vw), 32px);
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}

#home-wrap .home-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--figma-primary-600);
}

/* Marker-pen highlight behind the text. Painted as a background band on the
   inline run so it follows the text and wraps with it. 17px band on a 22px
   face in the design. */
#home-wrap .home-hero__mark {
    background-image: linear-gradient(
        rgba(103, 202, 213, 0.25),
        rgba(103, 202, 213, 0.25)
    );
    background-repeat: no-repeat;
    background-size: 100% 0.78em;
    background-position: 0 0.42em;
}

#home-wrap .home-hero__cta {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    /* No gap: the design's spacing between label and arrow comes from the
       icon's own padding inside its 24px box, not from the flex row. */
    padding: var(--padding-xs) var(--padding-xs) var(--padding-xs) var(--padding-md);
    background: var(--color-primary);
    color: var(--color-text-invert);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-tight);
    text-decoration: none;
}

#home-wrap .home-hero__cta-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
}

/* Spans both rows in the same column as the text, pinned bottom right. */
/* Design box: 8px in from the banner's right edge, 2.5px from its bottom.
   Positive margins only, no absolute positioning. */
#home-wrap .home-hero__art {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: end;
    margin-right: 8px;
    margin-bottom: 2.5px;
    width: min(117px, 34vw);
    aspect-ratio: 1 / 1;
    filter: drop-shadow(var(--shadow-hero-image));
    pointer-events: none;
}

/* ---- menu cards ---------------------------------------------------------- */
#home-wrap .home-menu {
    background: var(--color-bg);
}

#home-wrap .home-menu > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}

#home-wrap .home-cards,
#home-wrap .home-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

#home-wrap .home-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

#home-wrap .home-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

#home-wrap .home-card,
#home-wrap .home-row {
    display: flex;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--color-text);
}

#home-wrap .home-card {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-sm);
    height: 100%;
    padding: var(--padding-sm);
    background: var(--figma-primary-200);
}

#home-wrap .home-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

#home-wrap .home-card__title,
#home-wrap .home-row__title {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#home-wrap .home-card__desc,
#home-wrap .home-row__desc {
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

#home-wrap .home-card__art {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    max-width: 100%;
}

#home-wrap .home-row {
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--padding-sm);
    background: var(--figma-primary-300);
}

/* ---- faq ----------------------------------------------------------------- */
#home-wrap .home-faq {
    background: var(--color-bg);
}

#home-wrap .home-faq > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-xl);
}

#home-wrap .home-faq__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#home-wrap .home-faq__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#home-wrap .home-faq__desc {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

#home-wrap .home-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* common.css owns the open/close mechanics and the chevron rotation; only the
   paint below belongs to this project. */
#home-wrap .home-faq__item {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

#home-wrap .home-faq__q {
    gap: var(--space-4);
    padding: var(--padding-sm);
    background: var(--color-primary-soft);
}

#home-wrap .home-faq__item.is-open .home-faq__q {
    border-bottom: var(--size-hairline) solid var(--figma-gray-100);
}

#home-wrap .home-faq__badge {
    flex: 0 0 auto;
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

#home-wrap .home-faq__q .home-faq__text {
    flex: 1 1 auto;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#home-wrap .home-faq__chevron {
    display: inline-flex;
    color: var(--color-text);
}

/* The paint sits on a child of .accordion__panel-inner, never on that element
   itself: common.css uses it to animate the panel open, and turning it into a
   flex container collapses the measured height to zero. */
#home-wrap .home-faq__a {
    display: flex;
    gap: var(--space-4);
    padding: var(--padding-xs);
    background: var(--color-bg);
    border: var(--size-hairline) solid var(--color-primary-soft);
    border-top: 0;
}

#home-wrap .home-faq__a .home-faq__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Placeholders hold the illustration boxes until the artwork is supplied, so
   the layout is already correct and nothing requests a missing file. */
#home-wrap [data-art-pending] {
    /* a <span> placeholder must still take its box outside flex/grid contexts */
    display: block;
    background: var(--figma-primary-100);
    border: 1px dashed var(--figma-primary-400);
    border-radius: var(--radius-xs);
}

/* ===========================================================================
   splash / index.php
   The generated entry shell supplies #splash-entry. The logo is the shared
   brand lockup, scaled proportionally from the supplied 375px composition.
   =========================================================================== */
#splash-entry .splash-screen {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    background: var(--color-bg);
}

#splash-entry .splash-screen > .inner {
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    width: 100%;
    max-width: none;
    padding: 0;
}

#splash-entry .splash-screen__brand {
    display: block;
    width: min(50.4vw, 18.9rem);
    height: auto;
}

/* ===========================================================================
   policy.php
   The supplied design is a 375px mobile composition. Sections stay full width
   and each owns its readable .inner; sizes reuse the existing fluid tokens.
   =========================================================================== */
#policy-wrap {
    padding-top: 0;
    padding-bottom: 0;
    background: var(--color-bg);
}

#policy-wrap .inner {
    max-width: 76rem;
}

#policy-wrap .policy-banner > .inner {
    padding-left: 0;
    padding-right: 0;
}

#policy-wrap .policy-banner img {
    display: block;
    width: 100%;
    height: auto;
}

#policy-wrap .policy-intro > .inner,
#policy-wrap .policy-section > .inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}

#policy-wrap .policy-intro > .inner {
    gap: var(--space-xs);
}

#policy-wrap .policy-intro h1,
#policy-wrap .policy-heading,
#policy-wrap .policy-subheading,
#policy-wrap .policy-intro p,
#policy-wrap .policy-detail p,
#policy-wrap .policy-check__copy p {
    margin: 0;
}

#policy-wrap .policy-intro h1,
#policy-wrap .policy-heading {
    font-family: var(--font-display);
    font-size: var(--fs-page-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

#policy-wrap .policy-intro h1 {
    color: var(--color-text);
}

#policy-wrap .policy-intro p,
#policy-wrap .policy-detail p,
#policy-wrap .policy-check__copy p {
    font-size: var(--fs-label);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#policy-wrap .policy-intro strong {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

#policy-wrap .policy-heading {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-primary);
}

#policy-wrap .policy-heading img {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
}

#policy-wrap .policy-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

#policy-wrap .policy-table th,
#policy-wrap .policy-table td {
    padding: var(--padding-xs);
    text-align: left;
    vertical-align: middle;
    border: var(--size-hairline) solid var(--color-line);
}

#policy-wrap .policy-table th {
    width: 32%;
    font-weight: var(--fw-semibold);
    color: var(--color-text-invert);
    background: var(--color-primary);
}

#policy-wrap .policy-table td {
    font-weight: var(--fw-medium);
    color: var(--color-text);
    background: var(--color-bg);
}

#policy-wrap .policy-table small {
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    color: var(--color-text-sub);
}

#policy-wrap .policy-support > .inner,
#policy-wrap .policy-conditions > .inner {
    gap: var(--space-md);
}

#policy-wrap .policy-detail,
#policy-wrap .policy-condition-group,
#policy-wrap .policy-check__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#policy-wrap .policy-subheading {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--padding-xs);
    border-bottom: var(--size-hairline) solid var(--color-line-strong);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#policy-wrap .policy-subheading::before {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-primary);
}

#policy-wrap .policy-detail ul {
    margin: 0;
    padding-left: var(--padding-lg);
    font-size: var(--fs-label);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#policy-wrap .policy-note {
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    color: var(--color-text-sub);
}

#policy-wrap .policy-condition-group + .policy-condition-group {
    margin-top: var(--space-xs);
}

#policy-wrap .policy-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

#policy-wrap .policy-steps li {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    font-size: var(--fs-label);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#policy-wrap .policy-steps strong {
    font-size: var(--fs-body);
    color: var(--color-primary);
}

#policy-wrap .policy-check > .inner {
    padding-bottom: calc(var(--padding-xl) + var(--safe-bottom));
}

#policy-wrap .policy-check__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: var(--padding-md);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-align: center;
    text-decoration: none;
    color: var(--color-text-invert);
}

@media (max-width: 320px) {
    #policy-wrap .policy-table {
        font-size: var(--fs-caption);
    }

    #policy-wrap .policy-table th {
        width: 36%;
    }

    #policy-wrap .policy-steps li {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

/* ===========================================================================
   diag.php — step 1 / birthdate
   The step layout is scoped to the diagnosis screen. Native selects keep the
   platform list, keyboard controls and accessibility semantics intact.
   =========================================================================== */
#diag-wrap {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height) - var(--safe-top));
    min-height: calc(100dvh - var(--header-height) - var(--safe-top));
    padding-top: 0;
    padding-bottom: 0;
    background: var(--color-bg);
}

#diag-wrap.wrap:last-child {
    padding-bottom: 0;
}

#diag-wrap .diag-step {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

#diag-wrap .diag-step > .inner,
#diag-wrap .diag-actions > .inner {
    max-width: 76rem;
}

#diag-wrap .diag-step > .inner {
    display: flex;
    flex-direction: column;
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}

#diag-wrap .diag-step__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-lg);
    min-height: 0;
}

#diag-wrap .diag-step__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#diag-wrap .diag-step__intro h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-page-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

#diag-wrap .diag-step__intro p {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

#diag-wrap .diag-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#diag-wrap .diag-date__field {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xs);
    min-width: 0;
}

#diag-wrap .diag-date__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

#diag-wrap .diag-custom-select {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

#diag-wrap .diag-custom-select__trigger {
    display: block;
    width: 100%;
    height: 4.5rem;
    padding: var(--padding-2) 4.2rem var(--padding-2) var(--padding-md);
    border: var(--size-hairline) solid var(--color-line-input);
    border-radius: var(--radius-md);
    outline: 0;
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: var(--fs-title);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing-standard),
        box-shadow var(--duration-fast) var(--easing-standard);
}

#diag-wrap .diag-custom-select:not(.has-value) .diag-custom-select__trigger {
    color: var(--color-text-mute);
}

#diag-wrap .diag-custom-select__trigger:focus-visible {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

/* Real chevron glyph (points down closed, flips to point up while open),
   not a CSS border-corner approximation. */
#diag-wrap .diag-custom-select__chevron {
    position: absolute;
    top: 50%;
    right: var(--padding-md);
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform var(--duration-fast) var(--easing-standard);
}

#diag-wrap .diag-custom-select__chevron img {
    width: 100%;
    height: 100%;
}

#diag-wrap .diag-custom-select.is-open .diag-custom-select__chevron {
    transform: translateY(-50%) rotate(180deg);
}

#diag-wrap .diag-custom-select__panel {
    position: fixed;
    z-index: var(--z-overlay);
    width: var(--diag-select-popup-width, auto);
    height: var(--diag-select-popup-height, 35.2rem);
    overflow: hidden;
    border: var(--size-hairline) solid var(--color-line-input);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-dropdown);
}

#diag-wrap .diag-custom-select__panel[hidden] {
    display: none;
}

#diag-wrap .diag-custom-select__options {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-color: var(--color-text-sub) transparent;
    scrollbar-width: auto;
}

#diag-wrap .diag-custom-select__options::-webkit-scrollbar {
    width: 1.2rem;
}

#diag-wrap .diag-custom-select__options::-webkit-scrollbar-thumb {
    border: 0.3rem solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-text-sub);
    background-clip: padding-box;
}

#diag-wrap .diag-custom-select__options li {
    height: 3.5rem;
}

#diag-wrap .diag-custom-select__options li[hidden] {
    display: none;
}

#diag-wrap .diag-custom-select__options li + li {
    border-top: var(--size-hairline) solid var(--color-line-input);
}

#diag-wrap .diag-custom-select__options [data-diag-option] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--padding-2) var(--padding-md);
    border: 0;
    background: var(--color-bg);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
}

#diag-wrap .diag-custom-select__options [data-diag-option]:hover,
#diag-wrap .diag-custom-select__options [data-diag-option]:focus-visible,
#diag-wrap .diag-custom-select__options [data-diag-option][aria-selected="true"] {
    outline: 0;
    background: var(--color-primary-soft);
}

#diag-wrap .diag-custom-select__options [data-diag-option][hidden] {
    display: none;
}

#diag-wrap .diag-date__unit {
    flex: 0 0 auto;
    padding-bottom: 1.1rem;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Placement only; the alert's own look is the shared .app-alert primitive. */
#diag-wrap .diag-alert {
    margin-top: auto;
}

#diag-wrap .diag-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    flex: 0 0 auto;
    border-top: var(--size-hairline) solid var(--color-line);
    background: var(--color-bg);
    box-shadow: var(--shadow-bottom-bar);
}

#diag-wrap .diag-actions > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--padding-md);
    padding-bottom: calc(var(--padding-lg) + var(--safe-bottom));
}

#diag-wrap .diag-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

#diag-wrap .diag-progress li {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-align: center;
    letter-spacing: var(--ls-tight);
    color: var(--color-line-input);
}

#diag-wrap .diag-progress li.is-current {
    color: var(--color-primary);
}

#diag-wrap .diag-progress i {
    display: block;
    width: 100%;
    height: 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--color-line);
}

#diag-wrap .diag-progress li.is-current i {
    background: var(--color-primary);
}

#diag-wrap .diag-actions__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 6rem;
    padding: var(--padding-md);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    font-family: var(--font-base);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-align: center;
    color: var(--color-text-invert);
    cursor: pointer;
}

#diag-wrap .diag-actions__next:focus-visible {
    outline: 0.2rem solid var(--color-primary-strong);
    outline-offset: 0.2rem;
}

#diag-wrap .diag-actions__next:disabled {
    background: var(--figma-gray-300);
    color: var(--color-text-mute);
    cursor: default;
}

@media (max-width: 320px) {
    #diag-wrap .diag-date__pair {
        gap: var(--space-xs);
    }

    #diag-wrap .diag-date__field {
        gap: var(--space-4);
    }

    #diag-wrap .diag-custom-select__trigger {
        padding-right: 3.2rem;
        padding-left: var(--padding-sm);
    }

    #diag-wrap .diag-custom-select__chevron {
        right: var(--padding-sm);
    }
}

/* ===========================================================================
   Reusable form primitives — fixed CTA, staged progress and single choice.
   Screen-specific geometry stays under the page scope below.
   =========================================================================== */
.app-form-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.app-form-intro__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-page-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

.app-form-intro__subtitle {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

/* Amount field: a numeric input with its unit sitting outside the box, to the
   right. Shared because diag step 3 and every budget step use the same control. */
.app-money-field {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.app-money-field__input {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 6rem;
    padding: var(--padding-md);
    border: var(--size-hairline) solid var(--color-line-input);
    border-radius: var(--radius-md);
    outline: 0;
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: var(--fs-title);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.app-money-field__input::placeholder {
    color: var(--color-text-mute);
    opacity: 1;
}

.app-money-field__input:focus-visible {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

.app-money-field__input:disabled {
    border-color: var(--color-line-strong);
    background: var(--color-bg-disabled);
    color: var(--color-text-mute);
    cursor: not-allowed;
}

.app-money-field__unit {
    flex: 0 0 auto;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Inline validation notice. Shared: diag step 1 and budget step 2 both use it.
   Screens decide where it sits; this only says what it looks like. */
.app-alert {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 5.6rem;
    padding: var(--padding-md);
    border-radius: var(--radius-xs);
    background: var(--color-danger-soft);
    box-shadow: var(--shadow-raised);
    font-size: var(--fs-alert);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-danger);
}

.app-alert[hidden] {
    display: none;
}

/* A self-coloured filled glyph, so the box only needs sizing. */
.app-alert__icon {
    display: inline-flex;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.app-alert__icon img {
    width: 100%;
    height: 100%;
}

.app-fixed-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    border-top: var(--size-hairline) solid var(--color-line);
    background: var(--color-bg);
    box-shadow: var(--shadow-bottom-bar);
}

.app-fixed-cta > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 76rem;
    padding-top: var(--padding-md);
    padding-bottom: calc(var(--padding-lg) + var(--safe-bottom));
}

/* Column count follows the number of <li> a screen writes: diag has four
   steps, budget has three. */
.app-step-progress {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-step-progress li {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-align: center;
    letter-spacing: var(--ls-tight);
    color: var(--color-line-input);
}

.app-step-progress i {
    display: block;
    width: 100%;
    height: 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--color-line);
}

.app-step-progress li.is-current,
.app-step-progress li.is-complete {
    color: var(--color-primary);
}

.app-step-progress li.is-current i,
.app-step-progress li.is-complete i {
    background: var(--color-primary);
}

.app-fixed-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 6rem;
    padding: var(--padding-md);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    font-family: var(--font-base);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-align: center;
    color: var(--color-text-invert);
    cursor: pointer;
}

.app-fixed-cta__button:focus-visible {
    outline: 0.2rem solid var(--color-primary-strong);
    outline-offset: 0.2rem;
}

.app-fixed-cta__button:disabled {
    background: var(--figma-gray-300);
    color: var(--color-text-mute);
    cursor: default;
}

.app-choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    border: 0;
}

.app-choice {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.app-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.app-choice__card {
    display: flex;
    align-items: center;
    min-height: 6rem;
    padding: var(--padding-md);
    border: var(--size-hairline) solid var(--color-line-input);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--easing-standard),
        background-color var(--duration-fast) var(--easing-standard),
        color var(--duration-fast) var(--easing-standard);
}

.app-choice:hover .app-choice__card,
.app-choice__input:focus-visible + .app-choice__card {
    border-color: var(--color-focus);
}

.app-choice__input:focus-visible + .app-choice__card {
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

.app-choice__input:checked + .app-choice__card {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* A card may carry a second line under its label. The design keeps that line
   hidden until its option is picked, so it reads as a caveat about the choice
   just made rather than noise on every row. */
.app-choice__card--stacked {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
}

.app-choice__desc {
    display: none;
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

.app-choice__input:checked + .app-choice__card .app-choice__desc {
    display: block;
    color: var(--color-primary);
}

/* ===========================================================================
   Database guide screens
   Prep and cost share the same reading rhythm; only their content and the
   cost-specific in-section notice cards differ.
   =========================================================================== */
#prep-wrap,
#cost-wrap {
    padding-top: 0;
    padding-bottom: 0;
    background: var(--color-bg);
}

#prep-wrap .inner,
#cost-wrap .inner {
    max-width: 76rem;
}

#prep-wrap .app-guide-banner > .inner,
#cost-wrap .app-guide-banner > .inner {
    padding-right: 0;
    padding-left: 0;
}

#prep-wrap .app-guide-banner img,
#cost-wrap .app-guide-banner img {
    display: block;
    width: 100%;
    height: auto;
}

#prep-wrap .app-guide-steps > .inner,
#cost-wrap .app-guide-steps > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}

#prep-wrap .app-guide-step,
#cost-wrap .app-guide-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#prep-wrap .app-guide-step__heading,
#cost-wrap .app-guide-step__heading {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-page-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

#prep-wrap .app-guide-step__number,
#cost-wrap .app-guide-step__number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    font-family: var(--font-base);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    color: var(--color-text-invert);
}

#prep-wrap .app-guide-step__items,
#cost-wrap .app-guide-step__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding-left: var(--padding-xs);
    list-style: none;
}

#prep-wrap .app-guide-step__items li,
#cost-wrap .app-guide-step__items li {
    position: relative;
    padding-left: var(--padding-xs);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
    white-space: pre-line;
}

#prep-wrap .app-guide-step__items li::before,
#cost-wrap .app-guide-step__items li::before {
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    content: '';
    transform: translateY(-50%);
}

#prep-wrap .app-guide-empty,
#cost-wrap .app-guide-empty {
    margin: 0;
    padding: var(--padding-md);
    border: var(--size-hairline) solid var(--color-line);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

#prep-wrap .app-guide-notice-section > .inner {
    padding-bottom: calc(var(--padding-lg) + var(--safe-bottom));
}

#prep-wrap .app-guide-notice p {
    margin: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

#cost-wrap .cost-steps > .inner {
    padding-bottom: calc(var(--padding-lg) + var(--safe-bottom));
}

#cost-wrap .cost-step__hint {
    margin: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#cost-wrap .cost-notice {
    margin-top: var(--space-sm);
}

/* ===========================================================================
   Reusable result primitives — the result-screen header, the label/value
   card, the "확인해 주세요" panel and the two-button bar pinned at the bottom.
   result.php and budget-result.php both draw from these; neither owns them.
   =========================================================================== */
.app-page-header {
    border-bottom: var(--size-hairline) solid var(--color-line);
    background: var(--color-bg);
}

/* Three columns rather than space-between: the title stays optically centred
   even though only the right cell holds a control. */
.app-page-header > .inner {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
    align-items: center;
    min-height: clamp(6.1rem, calc(2.1rem + 10.6667vw), 8.5rem);
}

.app-page-header__title {
    grid-column: 2;
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    text-align: center;
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.app-page-header__spacer {
    grid-column: 1;
    grid-row: 1;
    width: 2.4rem;
    height: 2.4rem;
}

.app-page-header__home {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
}

.app-page-header__home img {
    width: 1.6rem;
    height: 1.8rem;
}

.app-page-header__home:focus-visible {
    outline: 0.2rem solid var(--color-focus);
    outline-offset: 0.2rem;
}

/* One card stating one label and its value. The label carries the accent
   colour; a screen that varies the accent per row overrides only the colour. */
.app-data-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, calc(0.5333rem + 2.6667vw), 2.2rem);
    margin: 0;
}

.app-data-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--space-md);
    min-height: clamp(8rem, calc(6.6667rem + 5.3333vw), 10rem);
    padding: var(--padding-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}

.app-data-row dt {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    margin: 0;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

.app-data-row dd {
    min-width: 0;
    margin: 0;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-align: right;
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* --figma-notice-bg on --figma-primary-600, at the 5px corner --radius-xs is
   named for. The icon sits on the title line; the bullets run the full width
   below it. Vertical spacing above the panel is left to the screen. */
.app-notice {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--padding-md) var(--padding-sm);
    border-radius: var(--radius-xs);
    background: var(--figma-notice-bg);
    color: var(--figma-primary-600);
}

.app-notice__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    /* common.css puts every heading on the display face; the notice title is
       Pretendard in the export, like the body copy under it. */
    font-family: var(--font-base);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.app-notice__icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
}

.app-notice__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding-left: var(--padding-md);
    font-size: var(--fs-caption);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

/* The end-of-flow bar: one way back into the flow, one way out of it. Unlike
   .app-fixed-cta this holds two equal links and never a disabled state. */
.app-action-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    border-top: var(--size-hairline) solid var(--color-line);
    background: var(--color-bg);
    box-shadow: var(--shadow-bottom-bar);
}

.app-action-bar > .inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    max-width: 76rem;
    padding-top: var(--padding-md);
    padding-bottom: calc(var(--padding-lg) + var(--safe-bottom));
}

.app-action-bar__secondary,
.app-action-bar__primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: var(--padding-md);
    border-radius: var(--radius-md);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    text-align: center;
    letter-spacing: var(--ls-tight);
    text-decoration: none;
}

.app-action-bar__secondary {
    border: var(--size-hairline) solid var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
}

.app-action-bar__primary {
    border: 0;
    background: var(--color-primary);
    color: var(--color-text-invert);
}

.app-action-bar__secondary:focus-visible {
    outline: 0.2rem solid var(--color-focus);
    outline-offset: 0.2rem;
}

.app-action-bar__primary:focus-visible {
    outline: 0.2rem solid var(--color-primary-strong);
    outline-offset: 0.2rem;
}

/* Below this width a label and its value no longer share a line, and two
   buttons need every pixel between them back. */
@media (max-width: 300px) {
    .app-data-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xs);
    }

    .app-data-row dd {
        text-align: left;
    }

    .app-action-bar > .inner {
        gap: var(--space-xs);
    }
}

/* ===========================================================================
   diag.php — steps 1-2.
   =========================================================================== */
#diag-wrap,
#diag-wrap.wrap:last-child {
    padding-bottom: calc(15rem + var(--safe-bottom));
}

#diag-wrap .diag-step[hidden] {
    display: none;
}

#diag-wrap .app-fixed-cta {
    position: fixed;
}

#diag-wrap .app-fixed-cta > .inner {
    max-width: 76rem;
}

#diag-wrap .app-step-progress li.is-complete {
    color: var(--color-primary);
}

#diag-wrap .app-step-progress li.is-complete i {
    background: var(--color-primary);
}

#diag-wrap .diag-help {
    align-self: flex-start;
}

#diag-wrap .diag-help__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-base);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-mute);
    cursor: pointer;
}

#diag-wrap .diag-help__trigger:focus-visible {
    outline: 0.2rem solid var(--color-focus);
    outline-offset: 0.2rem;
}

#diag-wrap .diag-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

#diag-wrap .diag-help__icon img {
    width: 100%;
    height: 100%;
}

#diag-wrap .diag-help__popover {
    position: fixed;
    z-index: var(--z-overlay);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.4rem;
    column-gap: var(--space-xs);
    width: min(25rem, calc(100vw - (var(--padding-md) * 2)));
    min-height: 13.6rem;
    padding: var(--padding-md);
    border: var(--size-hairline) solid var(--color-line-strong);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
    background: var(--color-bg);
    box-shadow: var(--shadow-raised);
}

#diag-wrap .diag-help__popover[hidden] {
    display: none;
}

#diag-wrap .diag-help__popover h2 {
    grid-column: 1;
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

#diag-wrap .diag-help__popover p {
    grid-column: 1 / -1;
    margin: var(--space-4) 0 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

#diag-wrap .diag-help__close {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin: -0.3rem -0.3rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 3.2rem;
    font-weight: var(--fw-regular);
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
}

#diag-wrap .diag-help__close:focus-visible {
    outline: 0.2rem solid var(--color-focus);
    outline-offset: 0.1rem;
}

/* Reusable selected-value panel and secondary single-choice button. */
.app-summary-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--padding-md);
    border: var(--size-hairline) solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
}

.app-summary-card__label {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.app-summary-card__selection {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

.app-summary-card__check {
    display: inline-flex;
    flex: 0 0 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
}

.app-summary-card__check img {
    width: 100%;
    height: 100%;
}

.app-summary-card__description {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

.app-option-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 6rem;
    padding: var(--padding-md);
    border: var(--size-hairline) solid var(--color-line-input);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing-standard),
        background-color var(--duration-fast) var(--easing-standard),
        color var(--duration-fast) var(--easing-standard);
}

.app-option-button:hover,
.app-option-button:focus-visible {
    border-color: var(--color-focus);
    outline: 0;
}

.app-option-button:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

.app-option-button.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.app-option-button:disabled {
    border-color: var(--color-line-strong);
    background: var(--color-bg-disabled);
    color: var(--color-text-mute);
    cursor: default;
}

/* diag.php — step 3 / income. */
#diag-wrap .diag-income {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#diag-wrap .diag-income__label {
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-sub);
}

#diag-wrap .diag-income__divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-sub);
}

#diag-wrap .diag-income__divider i {
    display: block;
    height: var(--size-hairline);
    background: var(--color-text-mute);
}

#diag-wrap .diag-income__divider span {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

#diag-wrap .diag-income__unknown {
    justify-content: flex-start;
}

/* ===========================================================================
   result.php — diagnostic result.
   Frame and rhythm only: the header, the condition rows, the notice panel and
   the bottom bar all come from the shared result primitives above. What is
   specific here is the pass/caution/fail accent and its three icons.
   =========================================================================== */
#result-wrap {
    min-height: 100vh;
    padding-top: 0;
    background: var(--color-primary-soft);
}

#result-wrap .result-screen {
    min-height: 100vh;
    background: var(--color-primary-soft);
}

/* The bar is fixed, so the column reserves its height (16 + 60 + 24 + 1px
   border) plus a 24px gap — the same reserve budget-result.php uses, since
   both end screens sit above the same bar. */
#result-wrap .result-screen > .inner {
    max-width: 76rem;
    padding-top: clamp(3.2rem, calc(1.8667rem + 5.3333vw), 5.2rem);
    padding-bottom: calc(var(--padding-lg) + 10.1rem + var(--safe-bottom));
}

#result-wrap .result-report {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#result-wrap .result-hero {
    display: flex;
    justify-content: center;
    padding-bottom: clamp(4.6rem, calc(2.9333rem + 6.6667vw), 7.1rem);
}

/* Real Figma-exported artwork (glossy sphere + baked-in glow shadow), not a
   CSS approximation. Each PNG is the design's own 351x190 frame at 2x, so it
   renders at the section's full content width exactly like every other
   351px-design-width row on this page — no extra vw calc needed. */
#result-wrap .result-hero__art {
    display: none;
    width: 100%;
    height: auto;
}

#result-wrap .result-hero[data-result-type="preliminary"] .result-hero__art--pass,
#result-wrap .result-hero[data-result-type="review"] .result-hero__art--review,
#result-wrap .result-hero[data-result-type="ineligible"] .result-hero__art--fail {
    display: block;
}

#result-wrap .result-report__title {
    margin: 0 0 clamp(2.8rem, calc(1.4667rem + 5.3333vw), 4.8rem);
    font-size: clamp(2.4rem, calc(1.7333rem + 2.6667vw), 3.4rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    text-align: center;
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

/* Matches the home page's DIAG-05 state tokens exactly (same green/olive/
   dark-red the design uses everywhere a pass/caution/fail badge appears). */
#result-wrap .result-condition {
    --result-status: var(--color-state-pass);
}

#result-wrap .result-condition.is-review {
    --result-status: var(--color-state-caution);
}

#result-wrap .result-condition.is-fail {
    --result-status: var(--color-state-fail);
}

#result-wrap .result-condition dt {
    color: var(--result-status);
}

/* The real icons are each a self-coloured file (pass/caution/fail ship as
   three separately-tinted assets), so the icon box only needs sizing; the
   label text beside it still reads --result-status for its own colour. */
#result-wrap .result-condition__icon {
    display: inline-flex;
    flex: 0 0 1.8rem;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
}

#result-wrap .result-condition__icon img {
    display: none;
    width: 100%;
    height: 100%;
}

#result-wrap .result-condition.is-pass [data-result-icon="pass"],
#result-wrap .result-condition.is-review [data-result-icon="review"],
#result-wrap .result-condition.is-fail [data-result-icon="fail"] {
    display: block;
}

#result-wrap .app-notice {
    margin-top: clamp(2.4rem, calc(1.0667rem + 5.3333vw), 4.4rem);
}

@media (max-width: 300px) {
    /* Stacked, the value lines up under the label text rather than under the
       status icon. */
    #result-wrap .result-condition dd {
        padding-left: calc(2.4rem + var(--space-sm));
    }
}

/* ===========================================================================
   budget.php — the three-step calculator.
   Structure mirrors diag.php: a full-height column per step, one visible at a
   time, with the shared fixed CTA pinned below. Everything visual comes from
   the shared primitives; only the frame is scoped here.
   =========================================================================== */
#budget-wrap {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height) - var(--safe-top));
    min-height: calc(100dvh - var(--header-height) - var(--safe-top));
    padding-top: 0;
}

#budget-wrap,
#budget-wrap.wrap:last-child {
    padding-bottom: calc(15rem + var(--safe-bottom));
}

#budget-wrap .budget-step {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

#budget-wrap .budget-step[hidden] {
    display: none;
}

#budget-wrap .budget-step > .inner,
#budget-wrap .budget-actions > .inner {
    max-width: 76rem;
}

#budget-wrap .budget-step > .inner {
    display: flex;
    flex-direction: column;
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}

#budget-wrap .budget-step__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-lg);
    min-height: 0;
}

/* The design leaves a clear run of space between the question and the field. */
#budget-wrap .budget-step__field {
    margin-top: var(--space-md);
}

/* Same placement as the diagnosis flow: the notice sits at the bottom of the
   step, just above the fixed CTA. */
#budget-wrap .budget-alert {
    margin-top: auto;
}

/* ===========================================================================
   budget-result.php — the calculated budget report.
   Values below are the BUDGET-04 export read at its 375px design width: the
   soft field is padded 48/12/24, its four blocks are 24px apart, and every
   type step is a named token rather than a literal.
   =========================================================================== */
#budget-result-wrap {
    min-height: 100vh;
    padding-top: 0;
    background: var(--color-primary-soft);
}

#budget-result-wrap .budget-result-screen {
    min-height: 100vh;
    background: var(--color-primary-soft);
}

/* The design closes with a 24px gap to a bar that is a flex sibling. Here the
   bar is fixed, so that gap is added to its own height (16 + 60 + 24 + 1px
   border) to keep the last row — the ad slot — clear of it. */
#budget-result-wrap .budget-result-screen > .inner {
    max-width: 76rem;
    padding-top: var(--padding-xl);
    padding-bottom: calc(var(--padding-lg) + 10.1rem + var(--safe-bottom));
}

#budget-result-wrap .budget-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

#budget-result-wrap .budget-result__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

/* The export's own 351x203 frame at 2x, carrying the piggy bank and the
   ellipse beneath it in one file, so it spans the content width exactly with
   no extra calc — the same arrangement as the result page's hero. */
#budget-result-wrap .budget-result__art {
    width: 100%;
    height: auto;
}

#budget-result-wrap .budget-result__headlines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* Display face at the 18px step, not the 20px one: the sentence has to hold
   one line at the design width with a five-digit amount in it. */
#budget-result-wrap .budget-result__headline {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    text-align: center;
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

#budget-result-wrap .budget-result__basis {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-align: center;
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

#budget-result-wrap .budget-result__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#budget-result-wrap .budget-result__group-title {
    margin: 0;
    /* Pretendard, not the display face common.css gives headings: only the two
       hero lines above are set in YK Green Forest. */
    font-family: var(--font-base);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

/* The two derived figures share one outlined card. The four rows below only
   echo what was entered, so they stay unoutlined. */
#budget-result-wrap .budget-result__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
    padding: var(--padding-lg) var(--padding-sm);
    border: var(--size-hairline) solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
}

#budget-result-wrap .budget-result__summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--space-4);
}

#budget-result-wrap .budget-result__summary-row dt {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-primary);
}

#budget-result-wrap .budget-result__summary-row dd {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    text-align: right;
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Caption-sized label, no status icon: these rows sit lower and tighter than
   the diagnostic rows the shared primitive is sized for. */
#budget-result-wrap .app-data-list {
    gap: var(--space-xs);
}

#budget-result-wrap .app-data-row {
    min-height: 0;
    gap: var(--space-xs);
    padding: var(--padding-lg) var(--padding-sm);
}

#budget-result-wrap .app-data-row dt {
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
}

#budget-result-wrap .app-data-row dd {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

@media (max-width: 300px) {
    #budget-result-wrap .budget-result__summary-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    #budget-result-wrap .budget-result__summary-row dd {
        text-align: left;
    }
}