@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700&display=swap');

/* --------------------------------------------------
 * Pray Wall - Main Stylesheet
 * -------------------------------------------------- */

/* --- 1. 전체 레이아웃 --- */
.pw-wrap {
    --pw-bg: #2c2a2a;
    --pw-text: #e0e0e0;
    --pw-gold: #d4b978;
    --pw-border: #444;
    --pw-error: #ff8a80;
    --pw-success: #b9f6ca;

    background-color: var(--pw-bg);
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 40 L 40 0 L 80 40 L 40 80 Z M 20 40 L 40 20 L 60 40 L 40 60 Z' stroke='rgba(212, 185, 120, 0.1)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    color: var(--pw-text);
    font-family: 'Nanum Myeongjo', serif;
    padding: 3rem 2.5rem;
    border-radius: 8px;
    max-width: 960px;
    margin: 2rem auto;
    text-align: center;
    border: 1px solid var(--pw-border);
}

.pw-hero h2 {
    font-size: 2rem;
    color: var(--pw-gold);
    margin: 0 0 0.5rem;
}

.pw-sub {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

/* --- 2. 입력 폼 --- */
.pw-form {
    max-width: 500px;
    margin: 0 auto 2rem;
    display: grid;
    gap: 1rem;
}

.pw-color-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.pw-candle-description {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--pw-border);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.pw-candle-description p {
    margin: 0 0 0.5rem 0;
}

.pw-candle-description p:last-child {
    margin-bottom: 0;
}

.pw-candle-description strong {
    color: var(--pw-gold);
}

.pw-color-selector .pw-candle-svg {
    width: 30px;
    height: 60px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 4px;
    transition: border-color 0.2s;
}

.pw-color-selector .pw-candle-svg.selected {
    border-color: var(--pw-gold);
}


.pw-field {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.pw-field label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    opacity: 0.9;
}

.pw-field input,
.pw-field textarea,
.pw-field select {
    background: #333;
    border: 1px solid var(--pw-border);
    color: var(--pw-text);
    padding: 0.6rem;
    border-radius: 4px;
    font-size: 1rem;
}
.pw-field textarea {
    resize: vertical;
}

.pw-field small {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.25rem;
}

.pw-controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.pw-controls select {
    flex-basis: 120px;
}

.pw-btn {
    background-color: var(--pw-gold);
    color: #111;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    flex-grow: 1;
}
.pw-btn:hover, .pw-btn:focus {
    background-color: #e8d1a1;
}
.pw-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

.pw-msg {
    min-height: 1.5rem;
    font-size: 0.875rem;
}
.pw-msg.error { color: var(--pw-error); }
.pw-msg.success { color: var(--pw-success); }


/* --- 3. 기도벽 (촛불 컨테이너) --- */
.pw-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 2.5rem; /* 촛불 사이 간격 확장 */
    padding: 2.5rem 0;
    min-height: 200px;
    border-top: 1px solid var(--pw-border);
    border-bottom: 1px solid var(--pw-border);
}

.pw-candle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: gentleFloat 6s ease-in-out infinite, fadeIn 0.5s ease-out;
    position: relative;
}

.pw-candle-svg {
    width: 40px;
    height: 80px;
    cursor: pointer;
    transition: transform 0.2s;
    filter: drop-shadow(0 0 5px rgba(255, 223, 186, 0.3));
}
.pw-candle:hover .pw-candle-svg {
    transform: scale(1.1);
}

.pw-candle-name {
    font-size: 0.8rem;
    font-weight: bold;
}

.pw-candle-likes {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* 툴팁 */
.pw-candle .pw-tooltip {
    visibility: hidden;
    width: 180px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 50%;
    margin-left: -90px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    line-height: 1.4;
}
.pw-candle:hover .pw-tooltip {
    visibility: visible;
    opacity: 1;
}


/* --- 4. 촛불 SVG 색상 & 애니메이션 --- */
.pw-candle-flame {
    animation: flicker 2.5s ease-in-out infinite;
    transform-origin: center bottom;
}

/* 전례색별 색상 정의 */
.pw-candle--white .pw-candle-body { fill: #f5f5dc; } /* Ivory */
.pw-candle--purple .pw-candle-body { fill: #8e44ad; } /* Deep Purple */
.pw-candle--green .pw-candle-body { fill: #27ae60; } /* Rich Green */
.pw-candle--red .pw-candle-body { fill: #c0392b; } /* Strong Red */
.pw-candle--blue .pw-candle-body { fill: #3498db; } /* Bright Blue */
.pw-candle--gold .pw-candle-body { fill: #f1c40f; } /* Gold */
.pw-candle--black .pw-candle-body { fill: #34495e; } /* Dark Slate */
.pw-candle--orange .pw-candle-body { fill: #e67e22; } /* Carrot Orange */

@keyframes flicker {
    0%, 100% { transform: scaleY(1) rotate(-0.5deg); opacity: 0.95; }
    25%      { transform: scaleY(1.05) rotate(0.5deg); opacity: 1; }
    50%      { transform: scaleY(0.95) rotate(-1deg); opacity: 0.9; }
    75%      { transform: scaleY(1.02) rotate(0.2deg); opacity: 0.98; }
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 5px rgba(255, 223, 186, 0.3));
    }
    50% {
        transform: translateY(-4px);
        filter: drop-shadow(0 0 12px rgba(255, 223, 186, 0.5));
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 5. 하단 --- */
.pw-foot {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}
.pw-link {
    background: none;
    border: none;
    color: var(--pw-gold);
    text-decoration: underline;
    cursor: pointer;
    margin-left: 1rem;
}