[v-cloak] {
    display: none;
}

.pb-page {
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 16px 80px;
    box-sizing: border-box;
}

.pb-breadcrumb {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
}

.pb-breadcrumb a {
    color: var(--color-text-muted, #888);
    text-decoration: none;
}

.pb-breadcrumb a:hover {
    color: var(--color-primary, #ff6f91);
    text-decoration: underline;
}

.pb-breadcrumb--bottom {
    margin-top: 20px;
    margin-bottom: 0;
    justify-content: center;
}

.pb-header {
    margin-bottom: 24px;
}

/* v14: プロンプトのヒントページへの導線。index.phpの「みんなが作ったキャラ」
   タブと同じ考え方（AIサイトらしい常時グラデーション）で目立たせている。 */
.pb-hints-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
    border-radius: var(--radius-card, 12px);
    padding: 16px 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ff7eb3, #7b5cf0 60%, var(--color-primary-dark, #049c43));
    background-size: 160% 160%;
    animation: pb-hints-banner-shift 5s ease-in-out infinite;
    box-shadow: 0 3px 10px rgba(123, 92, 240, 0.3);
}

.pb-hints-banner__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.pb-hints-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pb-hints-banner__text strong {
    font-size: 1rem;
}

.pb-hints-banner__text span {
    font-size: 0.8rem;
    opacity: 0.92;
}

.pb-hints-banner__arrow {
    font-size: 1.3rem;
    flex-shrink: 0;
}

@keyframes pb-hints-banner-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-hints-banner {
        animation: none;
    }
}

.pb-header h1 {
    font-size: 1.5rem;
    margin: 0 0 4px;
    color: var(--color-text, #333);
}

.pb-header p {
    margin: 0;
    color: var(--color-text-muted, #777);
    font-size: 0.9rem;
}

/* --- 禁止事項の注意書き --- */
.pb-rules-notice {
    background: #fff8e6;
    border: 1px solid #f0d98c;
    border-left: 4px solid #e0a800;
    border-radius: var(--radius-card, 12px);
    padding: 14px 18px;
    margin-bottom: 24px;
}

.pb-rules-notice__title {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #7a5900;
}

.pb-rules-notice__list {
    margin: 0 0 8px;
    padding-left: 1.2em;
    font-size: 0.85rem;
    color: #5c4400;
    line-height: 1.7;
}

.pb-rules-notice__note {
    margin: 0;
    font-size: 0.78rem;
    color: #8a6d00;
}

/* --- プレミアム誘導バナー（非会員・未ログイン時） --- */
.pb-premium-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #eee);
    border-left: 4px solid var(--color-primary, #ff6f91);
    border-radius: var(--radius-card, 12px);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.pb-premium-banner__text {
    font-size: 0.95rem;
    color: var(--color-text, #333);
}

.pb-premium-banner__cta {
    display: inline-block;
    background: var(--color-primary, #ff6f91);
    color: #fff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.pb-premium-banner__cta:hover {
    background: var(--color-primary-dark, #e85c7d);
}

/* --- フォーム本体 --- */
.pb-form {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #eee);
    border-radius: var(--radius-card, 12px);
    padding: 24px;
}

.pb-field {
    margin-bottom: 20px;
}

.pb-field:last-of-type {
    margin-bottom: 0;
}

.pb-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--color-text, #333);
}

.pb-required {
    display: inline-block;
    background: #e04747;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.pb-field__hint {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-text-muted, #999);
    margin-top: 4px;
}

.pb-input,
.pb-textarea {
    width: 100%;
    box-sizing: border-box;
    /* v24: スマホで白いフォームの中の入力欄の境目が見えにくかったため、枠線を濃く・太くした */
    border: 1.5px solid #c3ccd6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text, #1c1c1e);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pb-input:hover:not(:disabled),
.pb-textarea:hover:not(:disabled) {
    border-color: #9fabb8;
}

/* v24: 入力中の欄が分かるよう、サイトの緑で縁取る */
.pb-input:focus,
.pb-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #06c755);
    box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.18);
}

.pb-input:disabled,
.pb-textarea:disabled {
    background: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}

.pb-textarea {
    min-height: 220px;
    resize: vertical;
    line-height: 1.6;
}

.pb-char-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--color-text-muted, #999);
    margin-top: 4px;
}

.pb-char-counter--over {
    color: #e04747;
    font-weight: 600;
}

.pb-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-checkbox-row label {
    margin-bottom: 0;
    font-weight: 500;
}

/* --- 編集モード：ステータス表示 --- */
.pb-status-box {
    margin-bottom: 20px;
}

.pb-status-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.pb-status-badge--draft     { background: #e6e6e6; color: #555; }
.pb-status-badge--pending   { background: #fff3cd; color: #8a6d00; }
.pb-status-badge--published { background: #d9f2e2; color: #1e7a34; }
.pb-status-badge--rejected  { background: #fdecec; color: #b3261e; }

.pb-status-box__reject {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #b3261e;
}

.pb-loading {
    text-align: center;
    color: var(--color-text-muted, #999);
    font-size: 0.85rem;
    padding: 20px 0;
}

.pb-submit-note--warn {
    color: #b3261e;
}

/* --- エラー・成功メッセージ --- */
.pb-message {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.pb-message--error {
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c2c2;
}

.pb-message--success {
    background: #eaf7ee;
    color: #1e7a34;
    border: 1px solid #bfe6c9;
}

.pb-message--inline {
    margin-top: 14px;
    margin-bottom: 0;
}

/* --- 画像アップロード（編集モードのみ） --- */
.pb-image-box {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #eee);
    border-radius: var(--radius-card, 12px);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.pb-image-box__label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--color-text, #333);
}

.pb-image-box__row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pb-image-preview {
    width: 120px;
    height: 160px; /* 3:4の縦長プレビュー */
    border-radius: 10px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pb-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-image-preview__empty {
    font-size: 0.78rem;
    color: var(--color-text-muted, #999);
}

.pb-image-box__controls {
    flex: 1;
    min-width: 200px;
}

.pb-image-upload-btn {
    display: inline-block;
    background: var(--color-primary, #ff6f91);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
}

.pb-image-upload-btn:hover {
    background: var(--color-primary-dark, #e85c7d);
}

.pb-image-upload-btn input[type="file"] {
    display: none;
}

.pb-image-box__hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted, #999);
}

/* --- 公開前チェックリスト（保存ボタンの直前） --- */
.pb-checklist-box {
    background: var(--color-bg, #f7f7f7);
    border: 1px solid var(--color-border, #eee);
    border-radius: var(--radius-card, 12px);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.pb-checklist-box__summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text, #333);
}

.pb-checklist-box__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.pb-checklist-box__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text, #333);
}

.pb-checklist-box__list li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border: 1.5px solid var(--color-text-muted, #999);
    border-radius: 2px;
    box-sizing: border-box;
}

.pb-checklist-box__link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--color-primary, #06c755);
    text-decoration: none;
}

.pb-checklist-box__link:hover {
    text-decoration: underline;
}

/* --- 送信ボタン --- */
.pb-submit {
    display: inline-block;
    border: none;
    background: var(--color-primary, #ff6f91);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 999px;
    cursor: pointer;
}

.pb-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.pb-submit-note {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #999);
}

/* --- レスポンシブ --- */
@media (max-width: 600px) {
    .pb-form {
        padding: 18px;
    }

    /* v24: iOSで入力欄をタップしたときに画面が拡大されないよう、16px以上にする */
    .pb-input,
    .pb-textarea {
        font-size: 16px;
    }

    .pb-premium-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- v23: チャット画面のテーマ（スキン）の選択欄 --- */
.pb-skin-row {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
}

.pb-select {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 440px;
    cursor: pointer;
}

.pb-select:disabled {
    cursor: not-allowed;
}

.pb-skin-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark, #049c43);
    text-decoration: none;
    white-space: nowrap;
}

.pb-skin-link:hover {
    text-decoration: underline;
}

/* --- v24: プロンプト本文の「記載例を見る」 --- */
.pb-prompt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.pb-prompt-head label {
    margin-bottom: 0;
}

.pb-example-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--color-primary, #06c755);
    border-radius: 999px;
    background: rgba(6, 199, 85, 0.08);
    color: var(--color-primary-dark, #049c43);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pb-example-toggle:hover,
.pb-example-toggle--open {
    background: var(--color-primary, #06c755);
    color: #fff;
}

.pb-example-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.3);
}

.pb-example-toggle__chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.pb-example-toggle--open .pb-example-toggle__chevron {
    transform: rotate(180deg);
}

/* 記載例の枠：白い入力欄とはっきり区別できるよう、落ち着いた濃紺の地に明るい文字。
   見出し（【】の行）はサイトの緑を明るくした色 */
.pb-example {
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #1d2433;
    color: #dfe5ee;
    box-shadow: 0 6px 18px -10px rgba(16, 24, 40, 0.45);
    animation: pb-example-in 0.2s ease;
}

@keyframes pb-example-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pb-example__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-example__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8be3b3;
}

.pb-example__sub {
    font-size: 0.75rem;
    color: #9aa6b8;
    line-height: 1.5;
}

.pb-example__body {
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 16px 16px;
    font-size: 0.88rem;
    line-height: 1.75;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    /* 下端を少しぼかして、続きがあることを示す */
    -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
}

.pb-example__body:focus-visible {
    outline: 2px solid #8be3b3;
    outline-offset: -2px;
}

.pb-example__line {
    white-space: pre-wrap;
    word-break: break-word;
}

.pb-example__line--heading {
    margin-top: 2px;
    font-weight: 700;
    color: #8be3b3;
}

.pb-example__line--blank {
    height: 0.6em;
}

@media (prefers-reduced-motion: reduce) {
    .pb-example,
    .pb-example-toggle,
    .pb-example-toggle__chevron {
        animation: none;
        transition: none;
    }
}

/* --- v25: タグ（トップページの「タグで絞り込む」用） --- */
.pb-tags {
    margin-bottom: 20px;
    padding: 16px;
    border: 1.5px solid #c3ccd6;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-margin-top: 16px;
}

.pb-tags__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.pb-tags__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text, #333);
}

.pb-tags__need {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    background: #fff4dc;
    color: #8a5a00;
    font-size: 0.68rem;
    font-weight: 700;
}

.pb-tags__lead {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-text-muted, #777);
}

/* 軸：PCは「名前｜チップ」の横並び、スマホは名前の下にチップ */
.pb-tag-axis {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    padding-top: 10px;
    border-top: 1px solid var(--color-border, #eee);
}

.pb-tag-axis__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text, #333);
}

.pb-tag-axis__rule {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted, #777);
}

.pb-tag-axis__rule--need {
    color: #8a5a00;
}

.pb-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-tag-axis__help,
.pb-tag-axis__msg {
    grid-column: 2;
    margin: -2px 0 0;
    font-size: 0.74rem;
}

.pb-tag-axis__help {
    color: var(--color-text-muted, #777);
}

.pb-tag-axis__msg {
    font-weight: 600;
    color: #b3261e;
}

/* 選択中は「淡い緑＋✓」（トップページの絞り込みと同じ見た目） */
.pb-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 13px;
    border: 1.5px solid #c3ccd6;
    border-radius: 999px;
    background: #fff;
    color: var(--color-text, #1c1c1e);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pb-tag-chip:hover:not(:disabled) {
    border-color: var(--color-primary, #06c755);
}

.pb-tag-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.25);
}

.pb-tag-chip--on,
.pb-tag-chip--on:hover:not(:disabled) {
    background: #e6f8ee;
    border-color: var(--color-primary, #06c755);
    color: #047a37;
}

.pb-tag-chip--on::before {
    content: "✓";
    font-size: 0.78rem;
    font-weight: 900;
}

/* 複数選べる軸で上限に達したとき、残りのチップを薄くする（押すと案内が出る） */
.pb-tag-chip--limit {
    opacity: 0.45;
}

.pb-tag-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pb-tags__status {
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.pb-tags__status--need {
    background: #fff4dc;
    color: #8a5a00;
}

.pb-tags__status--ok {
    background: #eaf7ee;
    color: #1e7a34;
}

@media (max-width: 600px) {
    .pb-tags {
        padding: 14px 12px;
    }

    .pb-tag-axis {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-tag-axis__name {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        padding-top: 0;
    }

    .pb-tag-axis__help,
    .pb-tag-axis__msg {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-tag-chip {
        transition: none;
    }
}

/* --- v25: 編集対象を読み込めなかったときの導線（フォームの代わりに出す） --- */
.pb-load-failed {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.pb-load-failed a {
    color: var(--color-primary-dark, #049c43);
    font-weight: 700;
}