/* 署名システム v2 スタイル */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700;900&family=Noto+Sans+JP:wght@300;400;500&display=swap');

.petition-wrap {
    --p-ink:     #1a1208;
    --p-bg:      #f5f0e8;
    --p-bg-dark: #e8e0d0;
    --p-accent:  #8b1a1a;
    --p-gold:    #c9a84c;
    --p-gold-lt: #e8c97a;
    --p-muted:   #7a6e60;
    --p-white:   #ffffff;

    font-family: 'Noto Sans JP', sans-serif;
    color: var(--p-ink);
    background: var(--p-bg);
    border: 1px solid var(--p-bg-dark);
    border-top: 4px solid var(--p-accent);
    padding: 40px;
    margin: 32px 0;
    box-shadow: 0 4px 32px rgba(26,18,8,0.08);
    box-sizing: border-box;
}

.petition-title {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: var(--p-ink) !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
    border: none !important;
}

.petition-desc {
    font-size: 0.9rem;
    color: var(--p-muted);
    margin: 0 0 28px !important;
    line-height: 1.7;
}

/* 進捗 */
.petition-progress {
    background: var(--p-ink);
    color: #fff;
    padding: 24px 28px;
    margin-bottom: 28px;
}
.petition-numbers {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
}
.petition-count {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--p-gold);
    line-height: 1;
}
.petition-unit { font-size: 0.85rem; color: #ccc; }
.petition-target { font-size: 0.75rem; color: #999; margin-left: auto; }
.petition-bar-wrap { height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.petition-bar-fill { height: 100%; background: linear-gradient(90deg, var(--p-gold), var(--p-gold-lt)); border-radius: 2px; transition: width 1.2s cubic-bezier(0.16,1,0.3,1); }

/* フォームエリア */
.petition-form-area {
    background: var(--p-white);
    border: 1px solid var(--p-bg-dark);
    padding: 28px;
    margin-bottom: 24px;
}

.petition-privacy-note {
    background: #fff8e8;
    border-left: 3px solid var(--p-gold);
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--p-muted);
    line-height: 1.7;
    margin: 0 0 20px !important;
}

.petition-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.petition-field { margin-bottom: 16px; }

.petition-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-muted);
    margin-bottom: 5px;
}

.petition-field input[type="text"],
.petition-field input[type="email"],
.petition-field select,
.petition-field textarea {
    width: 100%;
    border: 1px solid var(--p-bg-dark);
    background: var(--p-bg);
    padding: 10px 12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    color: var(--p-ink);
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
}
.petition-field input:focus,
.petition-field select:focus,
.petition-field textarea:focus {
    border-color: var(--p-accent);
    background: var(--p-white);
}
.petition-field textarea { resize: vertical; line-height: 1.7; }

.petition-check-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}
.petition-check-row input[type="checkbox"] {
    width: 15px; height: 15px;
    margin-top: 3px; flex-shrink: 0;
    accent-color: var(--p-accent); cursor: pointer;
}
.petition-check-row label { font-size: 0.8rem; color: var(--p-muted); line-height: 1.6; cursor: pointer; }

.req { color: var(--p-accent); margin-left: 2px; }

.petition-msg.error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-bottom: 14px;
    border-radius: 2px;
}

.petition-submit-btn {
    width: 100%;
    background: linear-gradient(90deg, #00b4ff, #0080ff);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.petition-submit-btn:hover { opacity: 0.88; }
.petition-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 完了 */
.petition-success { text-align: center; padding: 12px 0; }
.petition-seal {
    width: 72px; height: 72px;
    background: var(--p-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff;
    margin: 0 auto 16px;
    animation: sealPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes sealPop {
    from { transform: scale(0) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);      opacity: 1; }
}
.petition-success h3 { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; color: var(--p-ink); margin: 0 0 8px !important; }
.petition-success p  { font-size: 0.85rem; color: var(--p-muted); line-height: 1.8; margin: 0 0 16px !important; }

.petition-share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.p-share-btn {
    padding: 8px 16px;
    border: 1px solid var(--p-bg-dark);
    background: var(--p-bg);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.78rem; color: var(--p-ink);
    cursor: pointer; transition: all 0.2s; border-radius: 0;
}
.p-share-btn:hover { background: var(--p-ink); color: #fff; border-color: var(--p-ink); }

/* 署名者リスト */
.petition-signers-title { font-size: 0.85rem !important; color: var(--p-muted) !important; margin: 0 0 12px !important; }
.petition-signer-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--p-bg-dark); }
.petition-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--p-ink); color: var(--p-gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif JP', serif; font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.petition-signer-name  { font-size: 0.85rem; font-weight: 500; color: var(--p-ink); }
.petition-signer-comment { font-size: 0.78rem; color: var(--p-muted); font-style: italic; margin-top: 3px; line-height: 1.5; }

@media (max-width: 600px) {
    .petition-wrap { padding: 24px 16px; }
    .petition-form-area { padding: 20px 14px; }
    .petition-row-2 { grid-template-columns: 1fr; gap: 0; }
    .petition-count { font-size: 1.8rem; }
    .petition-target { margin-left: 0; width: 100%; }
}