/*
 * choku-account.css
 * マイページ（mypage.php：登録・ログイン・マイページ・自分のページを直す）だけで読み込む
 * ボタン・お知らせ・状態の印は choku-diary.css の choku-mp-* を使う
 */

.choku-acc {
    max-width: 640px;
}

.choku-acc-lead {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--choku-ink-sub);
}

/* いたずら対策の見えない欄 */
.choku-acc-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* フォーム */
.choku-acc-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 28px 32px;
    background: #fff;
    border-radius: 16px;
}
.choku-acc-form .choku-mp-btn--main {
    align-self: flex-start;
    min-width: 200px;
}
.choku-acc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.choku-acc-label {
    font-size: 14px;
    font-weight: 700;
}
.choku-acc-field input[type="text"],
.choku-acc-field input[type="email"],
.choku-acc-field input[type="password"],
.choku-acc-inline input[type="email"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--choku-line);
    border-radius: 8px;
    background: #fff;
    font-size: 16px; /* スマホで拡大されない大きさ */
    box-sizing: border-box;
}
.choku-acc-field input:focus,
.choku-acc-inline input:focus {
    outline: 2px solid color-mix(in srgb, var(--choku-key) 40%, transparent);
    border-color: var(--choku-key);
}
.choku-acc-help {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--choku-ink-sub);
}
.choku-acc-slug {
    display: flex;
    align-items: center;
    border: 1px solid var(--choku-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.choku-acc-slug span {
    flex-shrink: 0;
    padding: 0 8px 0 12px;
    font-size: 12px;
    color: var(--choku-ink-sub);
    white-space: nowrap;
}
.choku-acc-slug input[type="text"] {
    border: 0;
    border-radius: 0;
    padding-left: 0;
}
.choku-acc-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}
.choku-acc-agree {
    font-size: 14px;
}
.choku-acc-agree a {
    color: var(--choku-key);
    text-decoration: underline;
}
.choku-acc-sub {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--choku-ink-sub);
}
.choku-acc-sub a {
    color: var(--choku-key);
}

/* 確認メールの送り直し */
.choku-acc-resend {
    margin-top: 28px;
    font-size: 13px;
}
.choku-acc-resend summary {
    cursor: pointer;
    color: var(--choku-ink-sub);
}
.choku-acc-resend form {
    margin-top: 10px;
}
.choku-acc-inline {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* マイページのカード */
.choku-acc-card {
    margin-bottom: 20px;
    padding: 24px 28px;
    background: #fff;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.8;
}
.choku-acc-card p {
    margin: 0 0 8px;
}
.choku-acc-card--quiet {
    background: transparent;
    border: 1px solid var(--choku-line);
}
.choku-acc-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 17px;
}
.choku-acc-card__title::before,
.choku-acc-card__title::after {
    content: none;
}
.choku-acc-url {
    font-size: 12px;
    color: var(--choku-ink-sub);
    word-break: break-all;
}
.choku-acc-missing {
    margin: 12px 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fbf1ee;
    color: #9a4034;
}
.choku-acc-missing ul {
    margin: 4px 0 0 1.2em;
    padding: 0;
}
.choku-acc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.choku-acc-actions form {
    margin: 0;
}

/* 公開の申請（作り手メンバー／DIYメンバーを選んで送る） */
.choku-acc-apply {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--choku-line);
}
.choku-acc-apply .choku-acc-checks {
    margin-bottom: 12px;
}
.choku-acc-apply label:has(input:disabled) {
    opacity: .5;
}

/* 自分のページを直す（ACF の欄） */
.choku-acc-acf .acf-form {
    padding: 8px 8px 28px;
}
.choku-acc-acf .acf-fields > .acf-field {
    border-top-color: var(--choku-line);
}
/* 写真とALTの欄を横並び（ACF の幅50%）にせず、縦に積む。横並びだと「ファイルの選択」がALTの欄にはみ出す */
.choku-acc-acf .acf-fields > .acf-field[data-width] {
    float: none !important;
    clear: both;
    width: 100% !important;
    border-left: 0 !important;
}
.choku-acc-acf .acf-fields > .acf-field[data-width] + .acf-field[data-width] {
    border-top: 0;
    padding-top: 0;
}
.choku-acc-acf input[type="file"] {
    max-width: 100%;
    font-size: 14px;
}
.choku-acc-acf .acf-image-uploader img {
    max-width: 100%;
    height: auto;
}
.choku-acc-acf .acf-form-submit {
    padding: 0 20px;
}
.choku-acc-extra {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 12px 8px;
    border-top: 1px solid var(--choku-line);
}
.choku-acc-cover img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .choku-acc-form,
    .choku-acc-card {
        padding: 20px 18px 24px;
    }
    .choku-acc-slug {
        flex-direction: column;
        align-items: stretch;
    }
    .choku-acc-slug span {
        padding: 6px 12px 0;
    }
    .choku-acc-slug input[type="text"] {
        padding-left: 12px;
    }
}

/* 日記投稿チケットの残り */
.choku-acc-ticket {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--choku-key) 10%, #fff);
    font-size: 13px;
    font-weight: 700;
}

/* マイページのホーム：自分のメンバーページを中に出すので広くする */
.choku-acc--home {
    max-width: 1180px;
}
.choku-acc--home .choku-tsk {
    margin: 8px 0 28px;
}