@import url("./detail.css?v=20260815-8");

.account-page { min-height: 100vh; }

.account-main {
    min-height: calc(100vh - 72px);
    padding: 72px 24px 96px;
}

.account-card {
    width: min(100%, 760px);
    margin: auto;
    padding: 52px 64px 44px;
    border: 1px solid rgba(95, 129, 152, .36);
    background: rgba(250, 246, 235, .88);
    box-shadow: 0 26px 70px rgba(35, 58, 70, .12);
}

.account-card__intro { max-width: 560px; margin: 0 auto 34px; text-align: center; }
.account-card__intro img { width: 128px; margin: 0 auto 14px; filter: drop-shadow(0 8px 7px rgba(35, 58, 70, .13)); }
.account-card__intro h1 { margin: 2px 0 10px; color: var(--ink-deep); font-size: clamp(40px, 7vw, 62px); font-weight: 500; letter-spacing: .1em; }
.account-card__intro > p:last-child { color: #5d6c73; }

.account-tabs {
    display: grid;
    margin-bottom: 28px;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1px solid rgba(95, 129, 152, .34);
}

.account-tabs button {
    position: relative;
    min-height: 52px;
    border: 0;
    background: transparent;
    color: #65747b;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .12em;
}

.account-tabs button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--red);
    content: "";
    transform: scaleX(0);
    transition: transform .22s ease;
}

.account-tabs button.is-active { color: var(--ink-deep); }
.account-tabs button.is-active::after { transform: scaleX(1); }
.account-tabs button:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }

.account-form { display: grid; }
.account-form[hidden] { display: none; }
.account-form label { margin: 15px 0 7px; color: var(--ink-deep); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.account-form input,
.account-form select {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(95, 129, 152, .45);
    border-radius: 0;
    outline: 0;
    background: rgba(255, 253, 247, .86);
    color: var(--ink-deep);
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.account-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#65747b 50%),linear-gradient(135deg,#65747b 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-repeat:no-repeat; background-size:6px 6px,6px 6px; cursor:pointer; }
.account-form input:focus,
.account-form select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(95, 129, 152, .12); }
.account-field-help { margin-top: 6px; color: #78858a; font-size: 12px; }
.password-field { position: relative; }
.password-field input { padding-right: 52px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 8px;
    place-items: center;
    border: 0;
    background: transparent;
    color: #65747b;
    cursor: pointer;
    transform: translateY(-50%);
}
.password-toggle svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--red); }
.password-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.password-toggle[aria-pressed="true"]::after { position: absolute; width: 25px; height: 1.5px; background: currentColor; content: ""; transform: rotate(-43deg); }
.account-loading { padding: 34px; color: #65747b; text-align: center; }

.account-submit {
    min-height: 52px;
    margin-top: 26px;
    padding: 0 22px;
    border: 1px solid var(--ink-deep);
    background: var(--ink-deep);
    color: var(--paper-light);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .13em;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.account-submit:hover { background: transparent; color: var(--ink-deep); transform: translateY(-2px); }
.account-submit:disabled { cursor: wait; opacity: .62; transform: none; }
.account-submit--secondary { min-width: 160px; }
.account-message { min-height: 28px; margin-top: 12px; color: var(--red); font-size: 13px; text-align: center; }
.account-message.is-success { color: #68713f; }

.account-session { padding: 36px; border: 1px solid rgba(95, 129, 152, .34); background: rgba(255, 253, 247, .72); text-align: center; }
.account-session[hidden] { display: none; }
.account-session h2 { margin: 5px 0 12px; color: var(--ink-deep); font-size: clamp(28px, 5vw, 40px); font-weight: 500; }
.account-session > p:not(.eyebrow) { color: #5d6c73; }
.account-status { margin: 24px 0; padding: 18px 20px; border-left: 3px solid var(--ink); background: rgba(95, 129, 152, .07); text-align: left; }
.account-status strong { color: var(--ink-deep); }
.account-status p { margin-top: 5px; color: #65747b; font-size: 14px; }
.account-status--pending { border-left-color: #a9822d; }
.account-status--rejected, .account-status--suspended { border-left-color: var(--red); }
.account-status--approved { border-left-color: #68713f; }
.member-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 24px; background: rgba(95, 129, 152, .22); text-align: left; }
.member-profile > div { padding: 15px 17px; background: rgba(255, 253, 247, .88); }
.member-profile dt { color: #78858a; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.member-profile dd { margin-top: 5px; color: var(--ink-deep); }
.account-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.avatar-settings { margin: 24px 0 4px; padding: 20px; border: 1px solid rgba(95,129,152,.28); background: rgba(95,129,152,.055); text-align: left; }
.avatar-settings[hidden] { display: none; }
.avatar-settings strong { color: var(--ink-deep); }
.avatar-settings > div:first-child p { margin-top: 4px; color: #718087; font-size: 12px; }
.avatar-settings__controls { display: flex; margin-top: 16px; flex-wrap: wrap; align-items: center; gap: 10px; }
.avatar-settings__controls img { width: 64px; height: 64px; border: 2px solid rgba(95,129,152,.28); border-radius: 50%; object-fit: cover; }
.avatar-upload { display: inline-flex; min-height: 42px; padding: 0 15px; align-items: center; border: 1px solid var(--ink-deep); color: var(--ink-deep); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.account-submit--compact { min-height: 42px; margin-top: 0; padding-inline: 15px; font-size: 12px; }
.account-submit--link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.account-submit--link[hidden] { display: none; }

.account-notice {
    display: grid;
    margin-top: 34px;
    padding: 20px 22px;
    grid-template-columns: auto 1fr;
    gap: 18px;
    border-left: 3px solid var(--red);
    background: rgba(179, 60, 55, .055);
    color: #5d6c73;
    font-size: 13px;
}

.account-notice strong { color: var(--red); white-space: nowrap; }

@media (max-width: 620px) {
    .account-main { padding: 34px 12px 72px; }
    .account-card { padding: 38px 22px 30px; }
    .account-card__intro img { width: 108px; }
    .member-profile { grid-template-columns: 1fr; }
    .account-notice { grid-template-columns: 1fr; gap: 6px; }
}