@charset "utf-8";

/* ===== 会員ページ エラー表示専用CSS（強化版） ===== */

/* エラーメッセージ表示（上部まとめて表示） */
.c-alert.-error {
    background: #ffeaea;
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.15);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.c-alert.-error .error-header {
    margin-bottom: 1rem;
}

.c-alert.-error .error-header p {
    margin: 0;
    color: #d63384;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
}

.c-alert.-error .error-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: block; /* ブロック表示を強制 */
}

.c-alert.-error .error-list li {
    position: relative;
    padding: 0.8rem 0 0.8rem 2.5rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #ff6b6b;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #721c24;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: block; /* ブロック表示を強制 */
    width: 100%; /* 幅を100%に設定 */
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* テキストの改行を許可 */
}

.c-alert.-error .error-list li:last-child {
    margin-bottom: 0;
}

.c-alert.-error .error-list li:before {
    content: "⚠️";
    position: absolute;
    left: 0.8rem;
    top: 0.8rem;
    font-size: 1.4rem;
    flex-shrink: 0; /* アイコンのサイズを固定 */
}

/* 単一エラーメッセージの場合 */
.c-alert.-error p:only-child {
    margin: 0;
    /* font-size: 1.6rem; */
    line-height: 1.6;
    color: #721c24;
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #ff6b6b;
    position: relative;
    padding-left: 3.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.c-alert.-error p:only-child:before {
    content: "⚠️";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
}

/* 長いエラーメッセージの場合の調整 */
.c-alert.-error .error-list li.long-message {
    padding: 1rem 0 1rem 2.5rem;
    line-height: 1.6;
}

.c-alert.-error .error-list li.long-message:before {
    top: 1rem;
}

/* 複数エラー時の視覚的区切り強化 */
.c-alert.-error .error-list li + li {
    margin-top: 0.8rem;
}

/* エラーメッセージ内のテキスト強調 */
.c-alert.-error .error-list li strong,
.c-alert.-error p strong {
    color: #d63384;
    font-weight: bold;
}

/* 成功メッセージ */
.c-alert.-success {
    background: #eafaf1;
    border: 1px solid #66bb6a;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 3rem;
    color: #2e7d32;
    box-shadow: 0 2px 8px rgba(102, 187, 106, 0.15);
}

.c-alert.-success p {
    margin: 0;
    font-size: 1.6rem;
    text-align: center;
    position: relative;
    padding-left: 3rem;
    line-height: 1.5;
}

.c-alert.-success p:before {
    content: "✅";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
}

/* エラー時のアニメーション */
.c-alert.-error {
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 入力フィールドのエラー表示（強化版・角丸完全保持） ===== */

/* 基本的なエラー入力フィールド - 既存の角丸を完全に保持 */
input.field-error,
textarea.field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    /* 既存の角丸スタイルを強制継承 */
    border-radius: inherit !important;
    transition: all 0.3s ease;
}

/* ログイン画面用 - 6rem角丸を保持 */
.c-login__group.-email input.field-error,
.c-login__group.-pass input.field-error,
.c-login__group.-nickname input.field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 6rem !important; /* ログイン画面の6rem角丸を保持 */
}

/* 投稿画面用 - 3rem角丸を保持 */
.c-post__list input.field-error,
.c-post__list textarea.field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 3rem !important; /* 投稿画面の3rem角丸を保持 */
}

/* セレクトボックスのエラー表示 - 角丸とデザイン完全保持 */
.c-select.field-error {
    position: relative;
    border-radius: inherit;
}

.c-select.field-error select {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: inherit !important;
    transition: all 0.3s ease;
}

/* 投稿画面のセレクトボックス - 3rem角丸を保持 */
.c-post__list .c-select.field-error {
    background-color: var(--c-light);
    border-radius: 3rem !important;
}

.c-post__list .c-select.field-error select {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 3rem !important;
}

/* セレクトボックスの矢印アイコンもエラー色に変更 */
.c-select.field-error::before {
    border-color: #e60012 #e60012 transparent transparent !important;
}

/* ログイン画面のアイコンもエラー色に調整 */
.c-login__group.-email.error::before,
.c-login__group.-pass.error::before,
.c-login__group.-nickname.error::before {
    filter: sepia(1) saturate(5) hue-rotate(320deg) brightness(0.8);
}

/* 数値入力フィールドの特別対応 */
input[type="number"].field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 3rem !important;
}

/* エラー時の軽微なアニメーション（強化版） */
.field-error {
    animation: errorPulse 0.6s ease-in-out;
}

@keyframes errorPulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.02);
    }
    75% {
        transform: scale(1.01);
    }
}

/* フォーカス時のエラー状態の調整（強化版） */
input.field-error:focus,
textarea.field-error:focus,
.c-select.field-error select:focus {
    border-color: #e60012 !important;
    box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.3) !important;
    outline: none;
    animation: focusGlow 0.3s ease-in-out;
}

@keyframes focusGlow {
    0% {
        box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.3);
    }
}

/* プレースホルダーのエラー状態調整 */
input.field-error::placeholder,
textarea.field-error::placeholder {
    color: #d63384;
    opacity: 0.7;
}

/* エラーグループの背景色調整 */
.c-login__group.error {
    background-color: transparent;
}

/* ===== エラーフィールドの視覚的強調（新規追加） ===== */

/* エラーフィールドの親要素（dt）にもエラー表示 */
.c-post__list dt:has(+ dd .field-error) {
    color: #e60012;
    font-weight: bold;
}

/* 必須マーク（requierd）もエラー色に */
.c-post__list dt:has(+ dd .field-error) .c-post__list-requierd {
    background-color: #e60012;
    color: white;
    animation: requiredBlink 1s ease-in-out infinite alternate;
}

@keyframes requiredBlink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

/* エラーフィールドのスクロール調整 */
.field-error {
    scroll-margin-top: 2rem;
}

/* ===== エラー状態の改善指示（新規追加） ===== */

/* エラーフィールドにホバー時のヒント表示 */
.field-error:hover::after {
    content: attr(data-error-message);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #e60012;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 1.2rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease-in-out forwards;
}

@keyframes tooltipFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* エラーフィールドの矢印（ツールチップ用） */
.field-error:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    border: 6px solid transparent;
    border-top-color: #e60012;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease-in-out forwards;
}

/* モバイル対応（強化版） */
@media screen and (max-width: 750px) {
    .c-alert.-error {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .c-alert.-error .error-list li {
        padding: 0.6rem 0 0.6rem 2rem;
        font-size: 1.4rem;
        line-height: 1.4;
    }

    .c-alert.-error .error-list li:before {
        left: 0.6rem;
        top: 0.6rem;
        font-size: 1.2rem;
    }

    .c-alert.-error .error-header p {
        font-size: 1.5rem;
    }

    .c-alert.-error p:only-child {
        /* font-size: 1.5rem; */
        padding-left: 3rem;
        line-height: 1.5;
    }

    .c-alert.-error p:only-child:before {
        /* font-size: 1.6rem; */
        left: 0.8rem;
    }

    .c-login__group.-email input.field-error,
    .c-login__group.-pass input.field-error,
    .c-login__group.-nickname input.field-error {
        border-width: 1px !important;
        box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.2) !important;
    }

    .c-post__list input.field-error,
    .c-post__list textarea.field-error,
    .c-select.field-error select {
        border-width: 1px !important;
        box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.2) !important;
    }

    /* モバイルではツールチップを無効化 */
    .field-error:hover::after,
    .field-error:hover::before {
        display: none;
    }
}

/* 超小画面対応（強化版） */
@media screen and (max-width: 480px) {
    .c-alert.-error {
        padding: 1rem;
    }

    .c-alert.-error .error-list li {
        padding: 0.5rem 0 0.5rem 1.8rem;
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
        line-height: 1.3;
    }

    .c-alert.-error .error-list li:before {
        left: 0.5rem;
        top: 0.5rem;
        font-size: 1.1rem;
    }

    /* エラーフィールドのスクロールマージン調整 */
    .field-error {
        scroll-margin-top: 1rem;
    }
}

/* ===== 高コントラストモード対応 ===== */
@media (prefers-contrast: high) {
    .c-alert.-error {
        border-width: 2px;
        background: #ffffff;
    }

    .c-alert.-error .error-list li {
        border-left-width: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    input.field-error,
    textarea.field-error,
    .c-select.field-error select {
        border-width: 3px !important;
        background-color: #ffffff !important;
    }
}

/* ===== ダークモード対応（将来用） ===== */
@media (prefers-color-scheme: dark) {
    .c-alert.-error {
        background: #4a1a1a;
        border-color: #ff8a8a;
        color: #ffb3b3;
    }

    .c-alert.-error .error-list li {
        background: #3a1515;
        color: #ffb3b3;
        border-left-color: #ff8a8a;
    }

    .c-alert.-error .error-header p {
        color: #ffb3b3;
    }

    input.field-error,
    textarea.field-error {
        background-color: #4a1a1a !important;
        color: #ffb3b3 !important;
    }
}

/* ===== 入力フィールドのエラー表示（強化版・角丸完全保持） ===== */

/* 基本的なエラー入力フィールド - 既存の角丸を完全に保持 */
input.field-error,
textarea.field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    /* 既存の角丸スタイルを強制継承 */
    border-radius: inherit !important;
    transition: all 0.3s ease;
}

/* ログイン画面用 - 6rem角丸を保持 */
.c-login__group.-email input.field-error,
.c-login__group.-pass input.field-error,
.c-login__group.-nickname input.field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 6rem !important; /* ログイン画面の6rem角丸を保持 */
}

/* 投稿画面用 - 3rem角丸を保持 */
.c-post__list input.field-error,
.c-post__list textarea.field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 3rem !important; /* 投稿画面の3rem角丸を保持 */
}

/* セレクトボックスのエラー表示 - 角丸とデザイン完全保持 */
.c-select.field-error {
    position: relative;
    border-radius: inherit;
}

.c-select.field-error select {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: inherit !important;
    transition: all 0.3s ease;
}

/* 投稿画面のセレクトボックス - 3rem角丸を保持 */
.c-post__list .c-select.field-error {
    background-color: var(--c-light);
    border-radius: 3rem !important;
}

.c-post__list .c-select.field-error select {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 3rem !important;
}

/* セレクトボックスの矢印アイコンもエラー色に変更 */
.c-select.field-error::before {
    border-color: #e60012 #e60012 transparent transparent !important;
}

/* ログイン画面のアイコンもエラー色に調整 */
.c-login__group.-email.error::before,
.c-login__group.-pass.error::before,
.c-login__group.-nickname.error::before {
    filter: sepia(1) saturate(5) hue-rotate(320deg) brightness(0.8);
}

/* 数値入力フィールドの特別対応 */
input[type="number"].field-error {
    border: 2px solid #e60012 !important;
    background-color: #ffeaea !important;
    box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2) !important;
    border-radius: 3rem !important;
}

/* エラー時の軽微なアニメーション（強化版） */
.field-error {
    animation: errorPulse 0.6s ease-in-out;
}

@keyframes errorPulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.02);
    }
    75% {
        transform: scale(1.01);
    }
}

/* フォーカス時のエラー状態の調整（強化版） */
input.field-error:focus,
textarea.field-error:focus,
.c-select.field-error select:focus {
    border-color: #e60012 !important;
    box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.3) !important;
    outline: none;
    animation: focusGlow 0.3s ease-in-out;
}

@keyframes focusGlow {
    0% {
        box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.2);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.3);
    }
}

/* プレースホルダーのエラー状態調整 */
input.field-error::placeholder,
textarea.field-error::placeholder {
    color: #d63384;
    opacity: 0.7;
}

/* エラーグループの背景色調整 */
.c-login__group.error {
    background-color: transparent;
}

/* ===== エラーフィールドの視覚的強調（新規追加） ===== */

/* エラーフィールドの親要素（dt）にもエラー表示 */
.c-post__list dt:has(+ dd .field-error) {
    color: #e60012;
    font-weight: bold;
}

/* 必須マーク（requierd）もエラー色に */
.c-post__list dt:has(+ dd .field-error) .c-post__list-requierd {
    background-color: #e60012;
    color: white;
    animation: requiredBlink 1s ease-in-out infinite alternate;
}

@keyframes requiredBlink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

/* エラーフィールドのスクロール調整 */
.field-error {
    scroll-margin-top: 2rem;
}

/* ===== エラー状態の改善指示（新規追加） ===== */

/* エラーフィールドにホバー時のヒント表示 */
.field-error:hover::after {
    content: attr(data-error-message);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #e60012;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 1.2rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease-in-out forwards;
}

@keyframes tooltipFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* エラーフィールドの矢印（ツールチップ用） */
.field-error:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    border: 6px solid transparent;
    border-top-color: #e60012;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease-in-out forwards;
}

/* モバイル対応（強化版） */
@media screen and (max-width: 750px) {
    .c-alert.-error {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .c-alert.-error .error-list li {
        padding: 0.6rem 0 0.6rem 2rem;
        font-size: 1.4rem;
    }

    .c-alert.-error .error-list li:before {
        left: 0.6rem;
        top: 0.6rem;
        font-size: 1.2rem;
    }

    .c-alert.-error .error-header p {
        font-size: 1.5rem;
    }

    .c-alert.-error p:only-child {
        /* font-size: 1.5rem; */
        padding-left: 3rem;
    }

    .c-alert.-error p:only-child:before {
        /* font-size: 1.6rem; */
        left: 0.8rem;
    }

    .c-login__group.-email input.field-error,
    .c-login__group.-pass input.field-error,
    .c-login__group.-nickname input.field-error {
        border-width: 1px !important;
        box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.2) !important;
    }

    .c-post__list input.field-error,
    .c-post__list textarea.field-error,
    .c-select.field-error select {
        border-width: 1px !important;
        box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.2) !important;
    }

    /* モバイルではツールチップを無効化 */
    .field-error:hover::after,
    .field-error:hover::before {
        display: none;
    }
}

/* 超小画面対応（強化版） */
@media screen and (max-width: 480px) {
    .c-alert.-error {
        padding: 1rem;
    }

    .c-alert.-error .error-list li {
        padding: 0.5rem 0 0.5rem 1.8rem;
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }

    /* エラーフィールドのスクロールマージン調整 */
    .field-error {
        scroll-margin-top: 1rem;
    }
}

/* ===== 高コントラストモード対応 ===== */
@media (prefers-contrast: high) {
    .c-alert.-error {
        border-width: 2px;
        background: #ffffff;
    }

    input.field-error,
    textarea.field-error,
    .c-select.field-error select {
        border-width: 3px !important;
        background-color: #ffffff !important;
    }
}

/* ===== ダークモード対応（将来用） ===== */
@media (prefers-color-scheme: dark) {
    .c-alert.-error {
        background: #4a1a1a;
        border-color: #ff8a8a;
        color: #ffb3b3;
    }

    .c-alert.-error .error-list li {
        background: #3a1515;
        color: #ffb3b3;
    }

    input.field-error,
    textarea.field-error {
        background-color: #4a1a1a !important;
        color: #ffb3b3 !important;
    }
}