/* 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: #4a6da7;
}

.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: #4a6da7;
    box-shadow: 0 0 0 3px rgba(74, 109, 167, 0.14);
}

.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;
    }
}