/* 귀신상 얼평(ghost_face) — 할로윈 밤 장면 테마 (2026-10-20 재작업)
   ▸ 섹션 전체를 풀블리드 검정(보라 기운) 밤하늘로 깔고 호박 주황·슬라임 초록·뼈색 글자만 쓴다. 공용 얼평 변수(--panel/--chip/--border/--text/--muted)를
     섹션 범위에서 덮어써 공용 마크업(안내 박스·인트로 카피·업로드 존)이 그대로 어두운 테마를 입는다.
   ▸ 장식은 전부 CSS/인라인 SVG(박쥐·거미줄·달·슬라임 드립) — 이미지 파일 없음, 헤드리스 캡처로 검증 가능.
   ▸ 결과 카드(.gh-card)는 face_share_button 이 html2canvas 로 그대로 캡처하므로 글자 투명도 애니메이션은 쓰지 않는다(글로우만 깜빡임). */
#ghost-face-service{
    --panel:#170b22;--chip:rgba(255,138,31,.10);--border:rgba(255,138,31,.32);--text:#fff2d6;--muted:#d2c3ac;--bg:#0b0612;
    --fg-accent:#ff8a1f;--fg-accent2:#ff4d3d;
    --gh-bg:#0b0612;--gh-panel:#170b22;--gh-orange:#ff8a1f;--gh-orange2:#ffb347;--gh-green:#9dff3f;--gh-red:#ff3d3d;--gh-cream:#fff2d6;--gh-text:#f3e8d6;--gh-muted:#d2c3ac;--gh-line:rgba(255,138,31,.35);
    --gh-bat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 22C28 13 22 10 13 12c4-4 4-8 1-11 7 1 13 6 17 13 .5-4 1-6 1-8 0 2 .5 4 1 8 4-7 10-12 17-13-3 3-3 7 1 11-9-2-15 1-19 10z' fill='%23000'/%3E%3C/svg%3E");
    position:relative;color:var(--gh-text);
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 calc(50vw - 50%) 36px;
    background:
        radial-gradient(circle at 86% 120px, rgba(255,214,150,.95) 0 34px, rgba(255,200,120,.35) 36px, transparent 120px),
        radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 28% 7%, #fff7 50%, transparent 51%),
        radial-gradient(1px 1px at 44% 26%, #fff6 50%, transparent 51%), radial-gradient(1.2px 1.2px at 63% 12%, #fff8 50%, transparent 51%),
        radial-gradient(1px 1px at 74% 30%, #fff6 50%, transparent 51%), radial-gradient(1.4px 1.4px at 92% 42%, #fff7 50%, transparent 51%),
        radial-gradient(1px 1px at 8% 48%, #fff5 50%, transparent 51%), radial-gradient(1.2px 1.2px at 52% 58%, #fff6 50%, transparent 51%),
        linear-gradient(180deg,#120722 0,#0b0612 420px,#0a050f 100%);
    overflow:hidden;
}
#ghost-face-service::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
    background:var(--gh-bat) 6% 150px/70px 35px no-repeat, var(--gh-bat) 18% 95px/44px 22px no-repeat, var(--gh-bat) 30% 170px/30px 15px no-repeat,
        var(--gh-bat) 58% 70px/36px 18px no-repeat, var(--gh-bat) 70% 160px/56px 28px no-repeat;
    filter:drop-shadow(0 0 2px #000);mix-blend-mode:normal}
#ghost-face-service::after{content:"";position:absolute;right:0;top:0;width:150px;height:150px;pointer-events:none;opacity:.32;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Cpath d='M120 0L0 0M120 0L0 120M120 0L120 120M120 0L30 120M120 0L0 30M120 0L65 120M120 0L0 65M120 0L95 120M120 0L0 95'/%3E%3Cpath d='M102 0q0 14 18 18M84 0q0 30 36 36M66 0q0 46 54 54M48 0q0 62 72 72M30 0q0 78 90 90M12 0q0 94 108 108'/%3E%3C/g%3E%3C/svg%3E") right top/150px 150px no-repeat}
#ghost-face-service > *{position:relative;z-index:1}

/* ── 히어로 ── */
#ghost-face-service .vd-hero{background:#120722;border-bottom:0}
#ghost-face-service .vd-hero-overlay{background:linear-gradient(110deg,rgba(11,6,18,.96),rgba(26,10,38,.9) 50%,rgba(70,25,5,.78))}
#ghost-face-service .vd-title{color:var(--gh-cream);text-shadow:0 2px 0 #3a0f00}
#ghost-face-service .vd-tag{border-color:rgba(255,138,31,.55);background:rgba(255,138,31,.14);color:var(--gh-orange2)}
#ghost-face-service .vd-desc{color:var(--gh-text);font-size:14px;line-height:1.75;text-align:left;word-break:keep-all}
#ghost-face-service .vd-ad-top{min-height:0}

/* ── 접수 패널: 위쪽에 슬라임 드립 ── */
#ghost-face-service .ai-panel{position:relative;background:var(--gh-panel);border:1px solid var(--gh-line);border-top:0;border-radius:0 0 18px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:visible;padding-top:30px}
#ghost-face-service .ai-panel::before{content:"";position:absolute;left:-1px;right:-1px;top:-2px;height:26px;pointer-events:none;border-radius:4px 4px 0 0;
    background:
        radial-gradient(circle at 9% 100%, var(--gh-orange) 0 9px, transparent 10px) 0 0/100% 100% no-repeat,
        radial-gradient(circle at 23% 100%, var(--gh-orange) 0 6px, transparent 7px) 0 -8px/100% 100% no-repeat,
        radial-gradient(circle at 41% 100%, var(--gh-orange) 0 11px, transparent 12px) 0 2px/100% 100% no-repeat,
        radial-gradient(circle at 57% 100%, var(--gh-orange) 0 7px, transparent 8px) 0 -6px/100% 100% no-repeat,
        radial-gradient(circle at 72% 100%, var(--gh-orange) 0 8px, transparent 9px) 0 -1px/100% 100% no-repeat,
        radial-gradient(circle at 89% 100%, var(--gh-orange) 0 10px, transparent 11px) 0 1px/100% 100% no-repeat,
        linear-gradient(var(--gh-orange),var(--gh-orange)) 0 0/100% 11px no-repeat}
/* 얼평 공용 '← 얼평 테스트 전체보기' 탭(include/face_detail_discovery.php)은 패널 padding 만큼 위로 당겨 모서리에 붙는데, 여기선 드립 띠(26px) 아래로 내린다 */
#ghost-face-service .fd-face-nav{margin-top:2px!important}
#ghost-face-service .fd-face-nav a{border-radius:0 9px 9px 0;background:rgba(157,255,63,.12);color:var(--gh-green);border-color:rgba(157,255,63,.35)}
#ghost-face-service .ai-panel-title{color:var(--gh-orange2);font-weight:900}
#ghost-face-service .ai-panel-title i{color:var(--gh-green)}
#ghost-face-service .gh-season{margin:4px 0 18px;padding:14px 12px 16px;text-align:center;border:1px dashed rgba(157,255,63,.45);border-radius:12px;background:rgba(157,255,63,.06)}
#ghost-face-service .gh-season span{display:inline-block;color:var(--gh-green);font-size:11px;font-weight:900;letter-spacing:3px}
#ghost-face-service .gh-season b{display:block;color:var(--gh-cream);font-family:'Black Han Sans',Pretendard,sans-serif;font-weight:400;font-size:26px;line-height:1.3;margin:6px 0 4px;letter-spacing:-.5px;text-shadow:0 2px 0 #3a0f00,0 0 16px rgba(255,138,31,.35)}
#ghost-face-service .gh-season small{display:block;color:var(--gh-muted);font-size:13px;line-height:1.6}

/* ── 업로드 존 ── */
#ghost-face-service #fu_wrap .fu-zone{background:rgba(11,6,18,.6);border:2px dashed rgba(255,138,31,.55);border-radius:16px}
#ghost-face-service #fu_wrap .fu-zone:hover,#ghost-face-service #fu_wrap .fu-zone.over{border-color:var(--gh-green);background:rgba(157,255,63,.05)}
#ghost-face-service #fu_wrap .fu-title{color:var(--gh-cream);font-size:18px}
#ghost-face-service #fu_wrap .fu-sub,#ghost-face-service #fu_wrap .fu-drop-hint{color:var(--gh-text);font-size:14px}
#ghost-face-service #fu_wrap .fu-meta,#ghost-face-service #fu_wrap .fu-note{color:var(--gh-muted);font-size:12.5px}
#ghost-face-service #fu_wrap .fu-icon{background:linear-gradient(135deg,#ff8a1f,#ff3d3d);box-shadow:0 0 28px rgba(255,138,31,.45)}
#ghost-face-service #fu_wrap .fu-cta{background:linear-gradient(110deg,#ff8a1f,#ff4d3d);color:#1a0a00;font-weight:900;box-shadow:0 6px 0 #6b1d00}
#ghost-face-service #fu_wrap .fu-cta:active{transform:translateY(3px);box-shadow:0 3px 0 #6b1d00}
#ghost-face-service #fu_wrap .fu-again{color:var(--gh-orange2)}
#ghost-face-service #fu_hbar,#ghost-face-service #fu_wrap .fu-hbar{color:var(--gh-text)}
#ghost-face-service #fu_wrap .fu-limit,#ghost-face-service #fu_wrap .fu-hb-box{background:rgba(11,6,18,.7);border-color:var(--gh-line);color:var(--gh-text)}
#ghost-face-service #fu_wrap .fu-err{color:#ffb4b4}
#ghost-face-service #insta_display{scroll-margin-top:16px}
#ghost-face-service .btn_modern{background:linear-gradient(110deg,#ff8a1f,#ff4d3d);color:#1a0a00;font-weight:900;border:0}
#ghost-face-service .btn_outline{border:1px solid rgba(255,138,31,.6);color:var(--gh-cream);background:rgba(255,138,31,.08)}
#ghost-face-service .face-share-btn{background:linear-gradient(110deg,#9dff3f,#5ad11e)!important;color:#0b2a00!important;font-weight:900}

/* ── 인트로 카피·안내 박스 ── */
#ghost-face-service .ai-intro-copy{background:rgba(11,6,18,.55);border:1px solid var(--gh-line)}
#ghost-face-service .copy-headline{color:var(--gh-cream);font-size:20px;line-height:1.4;text-align:left}
#ghost-face-service .copy-headline em{color:var(--gh-orange2);font-family:'Black Han Sans',Pretendard,sans-serif;font-weight:400;font-size:1.15em;letter-spacing:-.3px}
#ghost-face-service .copy-body{color:var(--gh-text);font-size:15px;line-height:1.8;text-align:left;word-break:keep-all}
#ghost-face-service .copy-body b{color:var(--gh-orange2)}
#ghost-face-service .copy-tag{color:var(--gh-green);background:rgba(157,255,63,.08);border-color:rgba(157,255,63,.35)}
#ghost-face-service .vanity_info_box{background:var(--gh-panel);border:1px solid var(--gh-line)}
#ghost-face-service .vanity_info_title{color:var(--gh-orange2);font-weight:900}
#ghost-face-service .vanity_info_title i{color:var(--gh-green)}
#ghost-face-service .vanity_info_desc,#ghost-face-service .vanity_guide_list li{color:var(--gh-text);font-size:14.5px;line-height:1.75;text-align:left;word-break:keep-all}
#ghost-face-service .vanity_guide_list li b{color:var(--gh-cream)}
#ghost-face-service .vanity_guide_list{border-color:var(--gh-line)}
#ghost-face-service .vanity_guide_list i{color:var(--gh-orange)}
#ghost-face-service .vanity_warning{color:var(--gh-muted);border-color:var(--gh-line);font-size:13px;line-height:1.7;text-align:left}

/* ── 결과 카드: B급 수배 전단. 귀신 이름 하나가 주인공 ── */
#ghost-face-service .gh-card{position:relative;overflow:hidden;width:100%;max-width:520px;margin:0 auto;padding:22px 18px 18px;text-align:center;
    color:var(--gh-text);background:#120818;border:3px solid var(--gh-orange);border-radius:14px;box-shadow:0 0 0 6px #120818,0 0 0 7px rgba(255,138,31,.35),0 22px 50px rgba(0,0,0,.6);font-family:inherit}
.gh-card::before{content:"";position:absolute;inset:7px;border:1px dashed rgba(255,138,31,.45);border-radius:9px;pointer-events:none}
.gh-card::after{content:"";position:absolute;right:-2px;top:-2px;width:120px;height:120px;opacity:.28;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M120 0L0 0M120 0L0 120M120 0L120 120M120 0L30 120M120 0L0 30M120 0L65 120M120 0L0 65'/%3E%3Cpath d='M102 0q0 14 18 18M84 0q0 30 36 36M66 0q0 46 54 54M48 0q0 62 72 72M30 0q0 78 90 90'/%3E%3C/g%3E%3C/svg%3E") right top/120px 120px no-repeat}
.gh-card .gh-bats{position:absolute;left:10px;top:58px;width:120px;height:60px;opacity:.75;pointer-events:none;
    background:var(--gh-bat) 0 26px/52px 26px no-repeat,var(--gh-bat) 58px 4px/34px 17px no-repeat,var(--gh-bat) 92px 34px/26px 13px no-repeat;filter:drop-shadow(0 0 3px #ff8a1f55)}
.gh-card .gh-ribbon{position:relative;display:table;margin:0 auto 16px;padding:5px 12px;border:1px solid rgba(157,255,63,.5);border-radius:30px;color:var(--gh-green);font-size:11px;font-weight:900;letter-spacing:2px;background:rgba(157,255,63,.06)}
.gh-card .gh-photo-wrap{position:relative;display:table;margin:6px auto 10px}
.gh-card .gh-photo-frame{position:relative;padding:7px 7px 24px;background:#f5ead6;transform:rotate(-4deg);box-shadow:6px 8px 0 rgba(0,0,0,.55)}
.gh-card .gh-photo-frame img{display:block;width:122px;height:136px;object-fit:cover;background:#b7a7c1;filter:saturate(.85) contrast(1.05)}
.gh-card .gh-photo-caption{position:absolute;left:0;right:0;bottom:5px;font-size:10px;letter-spacing:2px;font-weight:900;color:#5a4030}
.gh-card .gh-stamp{position:absolute;right:-30px;bottom:14px;padding:3px 7px;border:3px double var(--gh-red);border-radius:4px;color:var(--gh-red);font-family:'Black Han Sans',Pretendard,sans-serif;font-size:17px;letter-spacing:1px;background:rgba(255,240,220,.9);transform:rotate(12deg);white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.gh-card .gh-sync{position:absolute;left:-54px;bottom:-22px;width:92px;height:92px;border-radius:50%;border:3px solid var(--gh-green);background:#0b0612;color:var(--gh-green);transform:rotate(-10deg);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 18px rgba(157,255,63,.35),0 6px 14px rgba(0,0,0,.5)}
.gh-card .gh-sync b{font-family:'Black Han Sans',Pretendard,sans-serif;font-weight:400;font-size:30px;letter-spacing:-.5px}
.gh-card .gh-sync small{font-size:10px;font-weight:900;letter-spacing:1px;margin-top:3px}
.gh-card .gh-kind{display:inline-block;margin:14px 0 8px;padding:4px 12px;border-radius:30px;border:1px solid rgba(255,138,31,.5);background:rgba(255,138,31,.1);color:var(--gh-orange2);font-size:12.5px;font-weight:800;letter-spacing:.5px}
.gh-card .gh-kind i{font-style:normal;margin-right:4px}
.gh-card .gh-name-label{display:block;color:var(--gh-muted);font-size:11px;font-weight:800;letter-spacing:3px;margin-bottom:4px}
.gh-card .gh-name{margin:0;padding:0 4px;font-family:'Black Han Sans',Pretendard,sans-serif;font-weight:400;font-size:42px;line-height:1.15;letter-spacing:-1px;color:var(--gh-orange2);word-break:keep-all;overflow-wrap:anywhere;
    text-shadow:0 0 18px rgba(255,138,31,.55),0 3px 0 #5a1c00,0 6px 0 #2a0a00,0 9px 18px rgba(0,0,0,.6);animation:ghGlow 2.6s ease-in-out infinite}
@keyframes ghGlow{0%,100%{text-shadow:0 0 18px rgba(255,138,31,.55),0 3px 0 #5a1c00,0 6px 0 #2a0a00,0 9px 18px rgba(0,0,0,.6)}50%{text-shadow:0 0 30px rgba(255,170,60,.9),0 3px 0 #5a1c00,0 6px 0 #2a0a00,0 9px 18px rgba(0,0,0,.6)}}
@media(prefers-reduced-motion:reduce){.gh-card .gh-name{animation:none}}
.gh-card .gh-rank{margin:10px 6px 0;color:var(--gh-text);font-size:14px;line-height:1.65;word-break:keep-all}
.gh-card .gh-punch{position:relative;margin:18px 4px 0;padding:14px 16px 13px;background:var(--gh-cream);color:#2a1020;border-radius:14px;text-align:left;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.gh-card .gh-punch::after{content:"";position:absolute;left:34px;top:-11px;border:8px solid transparent;border-bottom-color:var(--gh-cream);border-top:0}
.gh-card .gh-punch small{display:block;margin-bottom:4px;font-size:10.5px;font-weight:900;letter-spacing:1px;color:#b4451a}
.gh-card .gh-punch p{margin:0;font-size:16.5px;font-weight:900;line-height:1.55;word-break:keep-all}
.gh-card .gh-divider{height:1px;margin:20px 0 14px;border-top:1px dashed rgba(255,138,31,.45);position:relative}
.gh-card .gh-divider span{position:absolute;left:50%;top:-9px;transform:translateX(-50%);padding:0 10px;background:#120818;color:var(--gh-orange);font-family:'Black Han Sans',Pretendard,sans-serif;font-size:13px;letter-spacing:2px}
.gh-card .gh-rows{text-align:left}
.gh-card .gh-row{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.07);align-items:start}
.gh-card .gh-row:last-child{border-bottom:0}
.gh-card .gh-row strong{font-family:'Black Han Sans',Pretendard,sans-serif;font-weight:400;font-size:15px;color:var(--gh-orange2);line-height:1.5;letter-spacing:-.2px}
.gh-card .gh-row p{margin:0;font-size:14.5px;line-height:1.7;color:var(--gh-text);word-break:keep-all;overflow-wrap:anywhere}
.gh-card .gh-rows.gh-dossier strong{color:var(--gh-green)}
.gh-card .gh-row.gh-quote p{font-size:16px;font-weight:900;color:var(--gh-cream);font-style:italic}
.gh-card .gh-verdict{margin:14px 2px 0;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.04);text-align:left}
.gh-card .gh-verdict small{display:block;margin-bottom:5px;color:var(--gh-orange);font-size:11px;font-weight:900;letter-spacing:2px}
.gh-card .gh-verdict p{margin:0;font-size:14px;line-height:1.75;color:var(--gh-text);word-break:keep-all;white-space:pre-line}
.gh-card .gh-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px dashed rgba(255,138,31,.35);color:var(--gh-muted);font-size:11px;line-height:1.6;text-align:left}
.gh-card .gh-foot b{color:var(--gh-orange2)}
.gh-card .gh-qr{flex:none;padding:4px;background:#fff;border-radius:6px;line-height:0}
.gh-card .gh-qr:empty{display:none}
@media(max-width:480px){
    #ghost-face-service .ai-panel{padding:26px 12px 16px}
    #ghost-face-service .gh-season b{font-size:22px}
    #ghost-face-service .copy-headline{font-size:18px}
    .gh-card{padding:20px 14px 16px}
    .gh-card .gh-name{font-size:36px}
    .gh-card .gh-photo-frame img{width:112px;height:126px}
    .gh-card .gh-sync{width:84px;height:84px;left:-48px}
    .gh-card .gh-bats{top:56px;width:90px;background-size:40px 20px,26px 13px,20px 10px;background-position:0 20px,46px 2px,70px 28px}
    .gh-card .gh-sync b{font-size:27px}
    .gh-card .gh-row{grid-template-columns:66px 1fr}
}
@media(max-width:350px){
    .gh-card .gh-name{font-size:31px}
    .gh-card .gh-photo-frame img{width:98px;height:110px}
    .gh-card .gh-stamp{font-size:14px;right:-22px}
}