/* ===================================================
   카드형 테마 CSS — 6종
   =================================================== */

/* 공통 카드 풀 페이지 */
.card-full-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 120px;
    position: relative;
    overflow: hidden;
    font-family: 'Noto Serif KR', 'Batang', Georgia, serif;
}

.cf-body {
    width: 100%;
    max-width: 480px;
    padding: 24px 28px;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.cf-notice {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 6px;
    margin-bottom: 12px;
    margin-top: 8px;
}

.cf-name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.cf-age  { font-size: .875rem; color: #666; margin-bottom: 8px; }
.cf-rip  { font-size: .875rem; color: #555; line-height: 1.8; margin-bottom: 16px; }

.cf-divider {
    width: 60px;
    height: 1px;
    background: #ccc;
    margin: 16px auto;
}

.cf-info {
    list-style: none;
    text-align: left;
    font-size: .875rem;
    line-height: 1.8;
}
.cf-info li {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.cf-label { color: #888; min-width: 60px; flex-shrink: 0; }
.cf-value { flex: 1; color: #222; }

.cf-mourners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 4px;
}
.cf-mourner-item { font-size: .875rem; color: #444; }
.cf-phone { font-size: .8rem; color: #888; margin-left: 4px; }

.cf-message {
    font-size: .875rem;
    color: #555;
    line-height: 1.8;
    margin-top: 16px;
    font-style: italic;
}

.cf-map-btn {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.9);
    border: 1px solid #ccc;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: .875rem;
    color: #333;
    z-index: 10;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* 장식 영역 */
.cf-deco-top, .cf-deco-bottom {
    width: 100%;
    max-width: 480px;
    position: relative;
    flex-shrink: 0;
}

/* ===================================================
   1. 국화형 (chrysanthemum)
   =================================================== */
.card-theme-chrysanthemum {
    background: #FAFAFA;
    color: #222;
}
.card-theme-chrysanthemum .cf-deco-top {
    height: 160px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23888' stroke-width='0.8' opacity='0.5'%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(0 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(20 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(40 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(60 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(80 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(100 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(120 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(140 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(160 100 100)'/%3E%3Ccircle cx='100' cy='100' r='12' stroke='%23888' fill='%23f0f0f0'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat right -20px top -20px / 180px 180px;
}
.card-theme-chrysanthemum .cf-deco-bottom {
    height: 120px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23888' stroke-width='0.8' opacity='0.4'%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(0 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(20 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(40 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(60 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(80 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(100 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(120 100 100)'/%3E%3Ccircle cx='100' cy='100' r='12' stroke='%23888' fill='%23f0f0f0'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat left -20px bottom -20px / 140px 140px;
}
.card-theme-chrysanthemum .cf-notice { color: #333; }
.card-theme-chrysanthemum .cf-divider { background: #999; }

/* ===================================================
   2. 리본형 (ribbon)
   =================================================== */
.card-theme-ribbon {
    background: #FFFFFF;
    color: #222;
}
.card-theme-ribbon .cf-deco-top {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-theme-ribbon .cf-deco-top::before {
    content: '';
    display: block;
    width: 70px;
    height: 90px;
    background:
        radial-gradient(ellipse 30px 45px at 22px 28px, #1a1a1a 98%, transparent 100%),
        radial-gradient(ellipse 30px 45px at 48px 28px, #1a1a1a 98%, transparent 100%),
        linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 100%);
    background-size: 50% 55%, 50% 55%, 4px 40%;
    background-position: 0 0, 50% 0, 46% 50%;
    background-repeat: no-repeat;
    clip-path: polygon(30% 0%, 70% 0%, 85% 30%, 70% 50%, 50% 60%, 30% 50%, 15% 30%);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.card-theme-ribbon .cf-notice { color: #111; font-size: 1.6rem; }
.card-theme-ribbon .cf-deco-bottom { height: 40px; }

/* ===================================================
   3. 기본형 (basic_white)
   =================================================== */
.card-theme-basic_white {
    background: #FFFFFF;
    color: #222;
}
.card-theme-basic_white .cf-deco-top { height: 60px; border-top: 3px double #333; margin-top: 20px; }
.card-theme-basic_white .cf-deco-bottom { height: 40px; border-bottom: 3px double #333; margin-bottom: 20px; }
.card-theme-basic_white .cf-notice { font-size: 1.8rem; color: #111; letter-spacing: 8px; }
.card-theme-basic_white .cf-body { border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

/* ===================================================
   4. 백합형 (lily)
   =================================================== */
.card-theme-lily {
    background: #FDFCFB;
    color: #222;
}
.card-theme-lily::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 200px 300px at 10% 80%, rgba(240,235,228,.9) 0%, transparent 70%),
        radial-gradient(ellipse 150px 200px at 85% 85%, rgba(235,230,225,.8) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.card-theme-lily .cf-deco-top {
    height: 120px;
    background:
        radial-gradient(ellipse 80px 120px at 20% 80%, rgba(200,195,185,.6) 0%, transparent 60%),
        radial-gradient(ellipse 60px 100px at 35% 90%, rgba(220,215,205,.5) 0%, transparent 55%);
    position: relative;
}
.card-theme-lily .cf-deco-bottom {
    height: 100px;
    background:
        radial-gradient(ellipse 90px 130px at 80% 30%, rgba(200,195,185,.5) 0%, transparent 60%);
}
.card-theme-lily .cf-notice { color: #2a2a2a; font-size: 2rem; letter-spacing: 8px; }
.card-theme-lily .cf-body { position: relative; z-index: 1; }

/* ===================================================
   5. 국화2형 (chrysanthemum2)
   =================================================== */
.card-theme-chrysanthemum2 {
    background: #FAFAFA;
    color: #222;
    border: 8px solid #f0f0f0;
}
.card-theme-chrysanthemum2::before {
    content: '';
    position: fixed;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid #ddd;
    pointer-events: none;
    z-index: 5;
}
.card-theme-chrysanthemum2 .cf-deco-top {
    height: 100px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23aaa' stroke-width='0.7' opacity='0.6'%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(0 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(30 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(60 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(90 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(120 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(150 60 60)'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%23f5f5f5' stroke='%23aaa'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat 8px 0 / 100px 100px,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23aaa' stroke-width='0.7' opacity='0.4'%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(0 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(30 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(60 60 60)'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%23f5f5f5' stroke='%23aaa'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat right 8px top / 70px 70px;
}
.card-theme-chrysanthemum2 .cf-deco-bottom {
    height: 80px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23aaa' stroke-width='0.7' opacity='0.5'%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(0 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(30 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(60 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(90 60 60)'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%23f5f5f5' stroke='%23aaa'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat right 20px bottom / 90px 90px;
}
.card-theme-chrysanthemum2 .cf-notice { color: #333; }

/* ===================================================
   6. 하늘형 (sky)
   =================================================== */
.card-theme-sky {
    background: linear-gradient(180deg,
        #c8dff0 0%,
        #d8e9f5 20%,
        #e8f2f8 40%,
        #f2f7fb 60%,
        #fafcfe 80%,
        #ffffff 100%);
    color: #222;
}
.card-theme-sky .cf-deco-top {
    height: 80px;
    background:
        radial-gradient(ellipse 120px 40px at 30% 60%, rgba(255,255,255,.7) 0%, transparent 70%),
        radial-gradient(ellipse 80px 30px at 70% 40%, rgba(255,255,255,.6) 0%, transparent 70%),
        radial-gradient(ellipse 60px 25px at 55% 70%, rgba(255,255,255,.5) 0%, transparent 70%);
}
.card-theme-sky .cf-deco-bottom { height: 40px; }
.card-theme-sky .cf-notice { color: #1a3a5c; font-size: 2rem; letter-spacing: 8px; }
.card-theme-sky .cf-rip { color: #2a4a6c; }
.card-theme-sky .cf-body { background: rgba(255,255,255,.6); border-radius: 12px; backdrop-filter: blur(4px); margin: 0 12px; }
.card-theme-sky .cf-map-btn { background: rgba(200,220,240,.9); border-color: #9bb5cc; }

/* ===================================================
   폰 목업 미리보기 (갤러리)
   =================================================== */
.template-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 12px;
    margin-bottom: 40px;
}
.tpl-item { display: flex; flex-direction: column; gap: 8px; }

.phone-mockup {
    width: 100%;
    aspect-ratio: 9/16;
    background: #e0e0e0;
    border-radius: 16px;
    padding: 8px 5px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15), inset 0 0 0 1px #bbb;
    position: relative;
    overflow: hidden;
}
.phone-mockup::before {
    content: '';
    position: absolute;
    top: 4px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 5px;
    background: #bbb;
    border-radius: 3px;
    z-index: 10;
}
.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Noto Serif KR', Georgia, serif;
    position: relative;
}
/* 미리보기용 축소 버전 */
.phone-screen .card-deco-top {
    width: 100%;
    flex-shrink: 0;
}
.phone-screen .card-main-text {
    padding: 4px 10px;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}
.card-notice-text {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 4px;
    line-height: 1.4;
}
.card-preview-body {
    font-size: .5rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 4px;
}
.card-preview-chief { font-size: .45rem; color: #888; }
.phone-screen .card-deco-bottom { width: 100%; flex-shrink: 0; }

/* 미리보기 테마별 배경 */
.phone-screen.card-theme-chrysanthemum  { background: #FAFAFA; }
.phone-screen.card-theme-chrysanthemum .card-deco-top  { height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23888' stroke-width='0.8' opacity='0.5'%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(0 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(20 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(40 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='8' ry='40' transform='rotate(60 100 100)'/%3E%3Ccircle cx='100' cy='100' r='12' stroke='%23888' fill='%23f0f0f0'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -5px top -5px / 80px 80px; }
.phone-screen.card-theme-ribbon         { background: #FFF; }
.phone-screen.card-theme-ribbon .card-deco-top { height: 50px; display:flex; align-items:center; justify-content:center; }
.phone-screen.card-theme-ribbon .card-deco-top::after { content:'✾'; font-size:1.4rem; color:#111; }
.phone-screen.card-theme-basic_white    { background: #FFF; border-top: 3px double #333; }
.phone-screen.card-theme-basic_white .card-deco-top { height: 20px; }
.phone-screen.card-theme-lily           { background: linear-gradient(180deg, #f5f0eb 0%, #fdfcfb 40%); }
.phone-screen.card-theme-lily .card-deco-top { height: 50px; background: radial-gradient(ellipse 60px 80px at 20% 80%, rgba(200,195,185,.5) 0%, transparent 60%); }
.phone-screen.card-theme-chrysanthemum2 { background: #FAFAFA; border: 3px solid #eee; }
.phone-screen.card-theme-chrysanthemum2 .card-deco-top { height: 45px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23aaa' stroke-width='0.7' opacity='0.6'%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(0 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(30 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='5' ry='25' transform='rotate(60 60 60)'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%23f5f5f5' stroke='%23aaa'/%3E%3C/g%3E%3C/svg%3E") no-repeat 4px 0 / 50px 50px; }
.phone-screen.card-theme-sky            { background: linear-gradient(180deg,#c8dff0,#e8f2f8,#ffffff); }
.phone-screen.card-theme-sky .card-deco-top { height: 30px; background: radial-gradient(ellipse 60px 20px at 40% 60%, rgba(255,255,255,.7) 0%, transparent 70%); }
.phone-screen.card-theme-sky .card-notice-text { color: #1a3a5c; }

.tpl-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tpl-name { font-size: .875rem; font-weight: 600; color: #333; }
.btn-preview {
    font-size: .75rem;
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 12px;
    color: #555;
    background: #f8f8f8;
}
.btn-use-template {
    display: block;
    text-align: center;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 8px;
    font-size: .875rem;
    color: #333;
    font-weight: 500;
    transition: background .15s;
}
.btn-use-template:hover { background: #2C3E50; color: #fff; }

@media (max-width: 480px) {
    .template-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
}