/*
 * MY and account-entry form layer: form sections (left title + description), journal month wave
 * and the transient field-guide rhythm. Base controls live in common.css;
 * page structure (heading + surface) lives in my.css.
 * Rules: docs/ui/form-system.md, docs/ui/page-layout-and-buttons.md
 */

/* x-my.form-section: the MY hook on the common form-section root. */
.my-form-section { display: grid; min-width: 0; gap: var(--space-3); }
.my-form-section > .form-section__heading { align-items: flex-end; }
.my-form-section > .form-section__body { position: relative; display: grid; min-width: 0; }
.my-form-section > .form-section__body > :is(.alert, .auth-verification__status) { margin-top: 0; }
/* 최상위 그룹 제목(docs/ui/design-style.md 3절, 2026-10-29 사용자 확정): 가운데 물결 대신 왼쪽 제목 + 짧은 설명(description slot).
   넓은 화면(64rem 이상)은 왼쪽 열에 제목·설명, 오른쪽 열에 입력을 둔다. 필드 라벨·값·오류는 그대로 왼쪽 정렬이다.
   제목과 첫 내용 사이는 --my-signature-gap이다. */
.my-form-section.form-section--signature { gap: var(--my-signature-gap); }
:is(.my-content, .auth-main) .form-section--signature > .form-section__heading { align-items: flex-start; }
:is(.my-content, .auth-main) .form-section--signature > .form-section__heading > .heading-accent { flex: 1 1 auto; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
:is(.my-content, .auth-main) .heading-accent::after { content: none; }
.form-section__desc { flex: 1 1 100%; order: 3; max-width: 40rem; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
@media (min-width: 64rem) {
    .my-content .my-form-section.form-section--signature { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; column-gap: var(--space-10); }
    .my-content .my-form-section.form-section--signature > * { grid-column: 2; }
    .my-content .my-form-section.form-section--signature > .form-section__heading { grid-row: 1 / span 4; grid-column: 1; flex-direction: column; gap: var(--space-2); }
    .my-content .my-form-section.form-section--signature > .form-section__heading > .form-section__actions { order: 4; }
}

/* 타임라인 월 제목은 왼쪽 물결을 둔다(날짜 축의 표시). */
.my-content .my-journal-month__heading::after {
    display: block;
    width: 3rem;
    height: .75rem;
    margin: var(--space-2) 0 0;
    background: var(--color-brand);
    content: '';
    -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat;
    mask: var(--wave-mask) center / 100% 100% no-repeat;
}