/* personal-info.css — 마이페이지 개인정보 섹션 (pi-*) */

/* ── 섹션 ────────────────────────────────────────────────── */

.pi-section {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "title  title"
        "fields avatar";
    column-gap: 1.25rem;
    padding-bottom: 0.5rem;
}

.pi-section > h2 {
    grid-area: title;
}

/* min-width 기본값(auto)이면 긴 이메일이 이 칸을 min-content 까지 밀어 올려
   1fr 이 무의미해지고 아바타 칸이 화면 밖으로 나간다 (260804-2 사용자 보고). */
.pi-fields {
    grid-area: fields;
    min-width: 0;
}

/* 아바타: 우측 컬럼 전체 너비를 정사각형 원으로 채움 */
.pi-avatar {
    grid-area: avatar;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 2px solid #e8f0fb;
    box-shadow: 0 2px 8px rgba(56, 84, 126, 0.1);
    display: block;
    align-self: start;
}

/* ── 이름 + 역할 인라인 배치 ─────────────────────────────── */

.pi-name-role-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pi-pen {
    font-size: 0.7rem;
    color: #b0c0d8;
    flex-shrink: 0;
    transition: color 0.15s;
}

.pi-editable:hover .pi-pen {
    color: var(--color-primary);
}

.pi-role {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── 인라인 편집 폼 ──────────────────────────────────────── */

.pi-edit-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.pi-input {
    flex: 1;
    min-width: 0;
    max-width: 18rem;
    min-height: 36px;
    padding: 0.48rem 0.75rem;
    border: 1px solid #cfd9e9;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1f2f46;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pi-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.pi-date-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 1 auto;
}

.pi-date-part {
    flex: 0 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pi-date-year {
    width: 4.8rem;
}

.pi-date-month,
.pi-date-day {
    width: 3.35rem;
}

.pi-date-separator {
    color: #7a8ba4;
    font-weight: 700;
    line-height: 1;
}

.pi-save-btn,
.pi-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 36px;
    padding: 0 0.82rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1;
}

.pi-save-btn i,
.pi-cancel-btn i,
.pi-save-btn .pi-btn-label,
.pi-cancel-btn .pi-btn-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.pi-save-btn {
    background: #eef6ff;
    border-color: #c3d8f3;
    color: #2b4f7d;
}

.pi-save-btn:hover {
    background: #e3f0ff;
    border-color: #aacbef;
    color: #234575;
}

.pi-cancel-btn {
    background: #f8fbff;
    border-color: #d3dce9;
    color: #556b87;
}

.pi-cancel-btn:hover {
    background: #f1f6fd;
    border-color: #c4d2e5;
    color: #3e5577;
}

/* ── 필드 목록 ───────────────────────────────────────────── */

.pi-fields {
    margin: 0;
    padding: 0;
}

.pi-field {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: baseline;
    gap: 0.75rem 1.25rem;
    padding: 0.82rem 0;
    border-top: 1px solid #edf1f8;
}

.pi-fields .pi-field:first-child {
    border-top: none;
    padding-top: 0;
}

.pi-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #627087;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin: 0;
}

.pi-field-value {
    font-size: 0.93rem;
    color: #1f2f46;
    margin: 0;
    line-height: 1.6;
}

.pi-editable {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 6px;
    font-size: 0.93rem;
    color: #1f2f46;
    transition: background 0.15s;
    line-height: 1.5;
}

.pi-editable:hover {
    background: #f0f5ff;
}

/* ── 다크모드 ─────────────────────────────────────────────── */

.mypage-body[data-theme="dark"] .pi-avatar {
    border-color: #2a2a2a;
    box-shadow: none;
}

.mypage-body[data-theme="dark"] .pi-editable:hover {
    background: #1d1d1d;
}

.mypage-body[data-theme="dark"] .pi-pen {
    color: #4a5a70;
}

.mypage-body[data-theme="dark"] .pi-editable:hover .pi-pen {
    color: #7aa3d4;
}

.mypage-body[data-theme="dark"] .pi-field {
    border-top-color: #2a2a2a;
}

.mypage-body[data-theme="dark"] .pi-fields .pi-field:first-child {
    border-top: none;
}

.mypage-body[data-theme="dark"] .pi-field-label {
    color: #c2c8d0;
}

.mypage-body[data-theme="dark"] .pi-field-value,
.mypage-body[data-theme="dark"] .pi-editable {
    color: #edf0f3;
}

.mypage-body[data-theme="dark"] .pi-input {
    background: #1d1d1d;
    border-color: #303030;
    color: #e5e9ee;
}

.mypage-body[data-theme="dark"] .pi-input:focus {
    border-color: #5a7aaa;
    box-shadow: 0 0 0 3px rgba(90, 122, 170, 0.2);
}

.mypage-body[data-theme="dark"] .pi-date-separator {
    color: #9aa6b5;
}

.mypage-body[data-theme="dark"] .pi-save-btn {
    background: #242a33;
    border-color: #3a4351;
    color: #dde6f3;
}

.mypage-body[data-theme="dark"] .pi-save-btn:hover {
    background: #2a313d;
    border-color: #4a5668;
    color: #edf3fb;
}

.mypage-body[data-theme="dark"] .pi-cancel-btn {
    background: #20242b;
    border-color: #353d49;
    color: #cad3e0;
}

.mypage-body[data-theme="dark"] .pi-cancel-btn:hover {
    background: #272d37;
    border-color: #465364;
    color: #e6ecf6;
}

/* ── 반응형 ──────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* 좁은 화면에서 100px 아바타 칸은 필드 값을 지나치게 좁힌다.
       아바타를 제목 아래 가운데로 올리고 필드는 폭을 다 쓰게 한다. */
    .pi-section {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "avatar"
            "fields";
        row-gap: 0.9rem;
    }

    .pi-avatar {
        width: 84px;
        justify-self: center;
    }

    .pi-field {
        grid-template-columns: 5.5rem 1fr;
        gap: 0.5rem 0.75rem;
    }

    .pi-input {
        max-width: 100%;
    }

    .pi-date-input-group {
        flex-wrap: nowrap;
    }

    .pi-date-year {
        width: 4.4rem;
    }

    .pi-date-month,
    .pi-date-day {
        width: 3rem;
    }
}

/* ── 회원 구분 (PLAN 260930-Y W2, 원장 261015 미리보기 승인) ─────────────────
   상태 배지는 계정 보안 항목과 동일한 .as-badge 를 쓴다. 반려·취소만 .as-badge 에 색이 없어 여기서 둔다. */
.mv-value { display: flex; flex-direction: column; gap: 4px; }
.mv-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mv-meta { font-size: .8rem; color: var(--ui-soft); }
.mv-note { font-size: .8rem; color: var(--as-warn-text, #b07a14); }
.mv-reason { font-size: .8rem; color: var(--ui-muted); line-height: 1.5; }
.mv-reason b { font-weight: 600; color: var(--ui-danger); }
.as-badge.mv-badge-danger { background: color-mix(in srgb, var(--ui-danger) 14%, transparent); color: var(--ui-danger); }
.as-badge.mv-badge-neutral { background: var(--ui-surface-2); color: var(--ui-soft); }
/* 단추가 없는 상태(대기·승인)에는 .pi-edit-btn 의 display 규칙이 hidden 을 이기지 않게 한다 */
.pi-edit-btn#memberTypeAction[hidden] { display: none; }

/* 제출 창: 사본 끌어 놓기·붙여 넣기 영역과 파일 행, 서류 수집 동의 */
.ui-modal .mv-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 112px; padding: 16px;
    border-radius: 10px; text-align: center; cursor: pointer; color: var(--ui-muted); font-size: .82rem;
    border: 1.5px dashed var(--ui-border-2); transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.ui-modal .mv-drop svg { width: 24px; height: 24px; color: var(--ui-soft); }
.ui-modal .mv-drop .act { font-size: .78rem; font-weight: 600; color: var(--color-primary); padding: 3px 9px; border-radius: 6px; }
.ui-modal .mv-drop .act:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ui-modal .mv-drop.over { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, transparent); transform: scale(1.01); }
.ui-modal .mv-drop:focus-visible { outline: 2px solid var(--color-primary); }
.ui-modal .mv-file { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--ui-surface-2); }
.ui-modal .mv-file img, .ui-modal .mv-file .pdf { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: color-mix(in srgb, var(--ui-text) 8%, transparent); display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: var(--ui-soft); }
.ui-modal .mv-file .meta { flex: 1; min-width: 0; font-size: .82rem; color: var(--ui-text); }
.ui-modal .mv-file .meta b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-modal .mv-file .meta small { display: block; color: var(--ui-soft); margin-top: 2px; }
.ui-modal .mv-file button.mv-remove.mv-remove { border: 0; background: transparent; font: inherit; font-size: .78rem; font-weight: 600; color: color-mix(in srgb, var(--ui-text) 70%, transparent); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.ui-modal .mv-file button.mv-remove.mv-remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ui-modal .mv-consent { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--ui-surface-2); cursor: pointer; }
.ui-modal .mv-consent input { margin: 3px 0 0; accent-color: var(--color-primary); flex-shrink: 0; }
.ui-modal .mv-consent b { display: block; font-size: .82rem; font-weight: 600; color: var(--ui-text); }
.ui-modal .mv-consent span { display: block; font-size: .76rem; line-height: 1.55; color: var(--ui-muted); margin-top: 3px; }
.ui-modal .mv-fixed { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: var(--ui-surface-2); font-size: .86rem; color: var(--ui-text); }
.ui-modal .mv-fixed small { color: var(--ui-soft); font-size: .78rem; }
.ui-modal .mv-select-wrap { position: relative; }
.ui-modal .mv-select-wrap .ui-drop { left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 220px; overflow: auto; }
.ui-modal .ui-segment.mv-seg { display: inline-flex; }
/* display:flex 규칙이 hidden 속성을 이기지 않게 한다 */
.ui-modal .mv-drop[hidden], .ui-modal .mv-file[hidden], .ui-modal .mv-file [hidden], .ui-modal [data-for][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-modal .mv-drop { transition: none; } }