:root {
    --ham-ink: #5f4426;
    --ham-blue: #234f88;
    --ham-blue-dark: #16396b;
    --ham-gold: #e4ad32;
    --ham-cream: #fffaf0;
    --ham-paper: #fffdf8;
    --ham-border: #e8d7b1;
    --ham-muted: #7d6b56;
    --ham-danger: #a5463d;
    --ham-success: #327056;
}

* { box-sizing: border-box; }

body.profile-only-body {
    min-height: 100vh;
    margin: 0;
    color: var(--ham-ink);
    background:
        linear-gradient(90deg, rgba(228, 173, 50, .055) 50%, transparent 50%) 0 0 / 12px 12px,
        var(--ham-cream);
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.profile-only-header {
    border-top: 6px solid var(--ham-blue-dark);
    border-bottom: 1px solid var(--ham-border);
    background: rgba(255, 253, 248, .96);
}

.profile-only-header__inner {
    width: min(920px, calc(100% - 32px));
    min-height: 76px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.profile-only-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ham-ink);
    text-decoration: none;
}

.profile-only-brand img {
    border: 1px solid var(--ham-border);
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.profile-only-brand strong,
.profile-only-brand small { display: block; }
.profile-only-brand strong { font-size: 1.05rem; letter-spacing: .04em; }
.profile-only-brand small { margin-top: 2px; color: var(--ham-muted); font-size: .75rem; }

.profile-only-nav { display: flex; align-items: center; gap: 8px; }
.profile-only-nav a {
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--ham-blue-dark);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}
.profile-only-nav a:hover { background: #edf4ff; }

.profile-only-main {
    width: min(820px, calc(100% - 32px));
    min-height: calc(100vh - 154px);
    margin: 0 auto;
    padding: 42px 0 56px;
}

.profile-page-heading { margin-bottom: 24px; text-align: center; }
.profile-page-heading h1 { margin: 0 0 8px; color: var(--ham-ink); font-size: clamp(1.5rem, 4vw, 2rem); }
.profile-page-heading p { margin: 0; color: var(--ham-muted); font-size: .92rem; }

.profile-grid {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: 20px;
}

.profile-card {
    border: 1px solid var(--ham-border);
    border-radius: 10px;
    background: var(--ham-paper);
    box-shadow: 0 8px 24px rgba(95, 68, 38, .06);
    overflow: hidden;
}
.profile-card__header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--ham-border);
    background: #fff5cf;
}
.profile-card__header h2 { margin: 0; font-size: 1rem; color: var(--ham-ink); }
.profile-card__body { padding: 22px; }

.profile-avatar {
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    border: 4px solid #fff;
    border-radius: 18px;
    outline: 1px solid var(--ham-border);
    object-fit: cover;
    background: #fff;
}

.profile-id { margin: 14px 0 0; color: var(--ham-muted); text-align: center; font-size: .8rem; }
.profile-help { margin: 8px 0 0; color: var(--ham-muted); font-size: .78rem; line-height: 1.65; }
.profile-field { margin-bottom: 20px; }
.profile-field:last-child { margin-bottom: 0; }
.profile-field label { display: block; margin-bottom: 7px; font-weight: 700; }
.profile-field input,
.profile-field textarea {
    width: 100%;
    border: 1px solid #ccb98f;
    border-radius: 7px;
    background: #fff;
    color: var(--ham-ink);
}
.profile-field textarea { min-height: 150px; resize: vertical; }
.profile-counter { margin-top: 6px; color: var(--ham-muted); text-align: right; font-size: .75rem; }

.profile-button {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(#326fb8, var(--ham-blue));
    color: #fff;
    font-weight: 700;
}
.profile-button:hover { background: var(--ham-blue-dark); }
.profile-button:disabled { opacity: .55; cursor: wait; }
.profile-button--gold { background: linear-gradient(#efb94a, #d99025); }
.profile-button--gold:hover { background: #c77e1d; }

.profile-file {
    width: 100%;
    padding: 9px;
    border: 1px solid #ccb98f;
    border-radius: 7px;
    background: #fff;
    color: var(--ham-ink);
}

.profile-notice {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 8px;
    background: #fff;
    font-size: .9rem;
}
.profile-notice--success { color: var(--ham-success); border-color: #afd0be; background: #f3fbf7; }
.profile-notice--error { color: var(--ham-danger); border-color: #e4b6ae; background: #fff6f4; }

.profile-status-message { min-height: 24px; margin-top: 10px; font-size: .85rem; }
.profile-status-message.is-success { color: var(--ham-success); }
.profile-status-message.is-error { color: var(--ham-danger); }

.profile-create { max-width: 560px; margin: 0 auto; }
.profile-only-footer {
    min-height: 72px;
    padding: 20px 16px;
    border-top: 1px solid var(--ham-border);
    background: var(--ham-paper);
    color: var(--ham-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-size: .8rem;
}
.profile-only-footer a { color: var(--ham-blue); }

@media (max-width: 680px) {
    .profile-only-header__inner { width: min(100% - 24px, 920px); min-height: 68px; }
    .profile-only-brand small { display: none; }
    .profile-only-nav { gap: 0; }
    .profile-only-nav a { padding: 8px; font-size: .78rem; }
    .profile-only-main { width: min(100% - 24px, 820px); padding: 28px 0 42px; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-card__body { padding: 18px; }
    .profile-only-footer { flex-direction: column; gap: 6px; }
}