/* AI 얼굴 피로도 분석기 - shortcode styles */
.ffa-wrap *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Pretendard','Noto Sans KR',sans-serif;
}
.ffa-wrap{
    background:#020617;
    color:#ffffff;
    padding:20px;
    border-radius:16px;
}
.ffa-wrap h1,.ffa-wrap h2,.ffa-wrap h3,.ffa-wrap h4,
.ffa-wrap p,.ffa-wrap span,.ffa-wrap strong,.ffa-wrap label,.ffa-wrap td,.ffa-wrap th,.ffa-wrap div{
    color:#ffffff !important;
}
.ffa-hero{
    text-align:center;
    margin-bottom:30px;
    padding:30px 20px;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.08);
}
.ffa-hero h1{
    font-size:42px;
    margin-bottom:15px;
    font-weight:900;
}
.ffa-hero p{font-size:17px;}
.ffa-card{
    background:#0f172a;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:24px;
    margin-top:20px;
}
.ffa-card h2{margin-bottom:10px;}
.ffa-upload{
    border:2px dashed #38bdf8;
    border-radius:20px;
    padding:30px;
    text-align:center;
    background:#020617;
}
.ffa-upload img{
    max-width:100%;
    max-height:400px;
    display:none;
    margin:auto;
    border-radius:16px;
}
.ffa-upload-btn{
    display:inline-block;
    background:#38bdf8;
    color:#000000 !important;
    padding:14px 24px;
    border-radius:14px;
    font-weight:700;
    cursor:pointer;
    margin-top:15px;
}
.ffa-upload-btn:hover{transform:translateY(-2px);}
#ffaFileInput{display:none;}
.ffa-analyze-btn{
    width:100%;
    padding:16px;
    border:none;
    border-radius:16px;
    margin-top:15px;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    background:linear-gradient(135deg,#22d3ee,#a78bfa);
    color:#000000 !important;
}
.ffa-analyze-btn:hover{transform:translateY(-2px);}
.ffa-loading{
    width:100%;
    height:10px;
    background:#1e293b;
    border-radius:999px;
    overflow:hidden;
    margin-top:20px;
    display:none;
}
.ffa-loading span{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#22d3ee,#a78bfa);
    animation:ffaLoading 2s linear forwards;
}
@keyframes ffaLoading{100%{width:100%;}}
.ffa-result-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:20px;
}
.ffa-gauge-card{
    background:#020617;
    padding:25px;
    border-radius:20px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.08);
}
.ffa-circle{
    width:160px;
    height:160px;
    border-radius:50%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:900;
    background:conic-gradient(#22d3ee 0deg,#1e293b 0deg);
    position:relative;
}
.ffa-circle::after{
    content:'';
    position:absolute;
    width:120px;
    height:120px;
    background:#0f172a;
    border-radius:50%;
}
.ffa-circle span{position:relative;z-index:2;}
.ffa-status{
    margin-top:18px;
    padding:18px;
    border-radius:16px;
    background:rgba(56,189,248,0.12);
    border:1px solid rgba(56,189,248,0.2);
}
.ffa-wrap table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
    border:1px solid rgba(255,255,255,0.15);
}
.ffa-wrap thead tr{background:rgba(56,189,248,0.08);}
.ffa-wrap th,.ffa-wrap td{
    padding:18px;
    text-align:left;
    border:1px solid rgba(255,255,255,0.15);
}
.ffa-wrap th{font-weight:700;background:rgba(56,189,248,0.08);}
.ffa-wrap tbody tr{background:#020617;}
.ffa-wrap tbody tr:hover{background:#0b1220;}
.ffa-wrap .survey-item{
    padding:18px;
    border-radius:16px;
    background:#020617;
    margin-bottom:14px;
    border:1px solid rgba(255,255,255,0.08);
}
.ffa-wrap .ox{margin-top:10px;}
.ffa-wrap .ox label{margin-right:20px;cursor:pointer;}
.ffa-tip-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:20px;
}
.ffa-tip{
    background:#020617;
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.08);
}
.ffa-notice{
    margin-top:25px;
    padding:20px;
    border-radius:18px;
    background:rgba(250,204,21,0.1);
    border:1px solid rgba(250,204,21,0.2);
}
@media(max-width:768px){
    .ffa-hero h1{font-size:30px;}
    .ffa-result-grid{grid-template-columns:1fr;}
    .ffa-tip-grid{grid-template-columns:1fr;}
    .ffa-wrap th,.ffa-wrap td{padding:12px;font-size:14px;}
}

/* App install bar */
.ffa-appbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;margin-top:16px;padding:14px 18px;background:#0f172a;border:1px solid rgba(56,189,248,.35);border-radius:16px;font-size:14px}
.ffa-appbar button,.ffa-appbar a{background:#38bdf8;color:#020617 !important;border:0;border-radius:10px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.ffa-appbar a{background:transparent;border:1px solid #38bdf8;color:#38bdf8 !important}
.ffa-ios-hint{margin-top:10px;padding:12px 16px;background:#1e293b;border-radius:12px;font-size:13px;text-align:center}
@media (display-mode: standalone){.ffa-appbar,.ffa-ios-hint{display:none !important}}

/* 테마가 표 셀에 흰 배경을 덮어쓰는 문제 방지 — 셀 배경/글자색 명시 */
.ffa-wrap table,.ffa-wrap thead,.ffa-wrap tbody,.ffa-wrap tr{background:transparent !important;border-color:rgba(255,255,255,0.08) !important;}
.ffa-wrap th{background:#16233a !important;color:#ffffff !important;}
.ffa-wrap td{background:#0b1220 !important;color:#e2e8f0 !important;}
.ffa-wrap tbody tr:hover td{background:#13203a !important;}
.ffa-wrap th,.ffa-wrap td{border-bottom:1px solid rgba(255,255,255,0.08) !important;}

/* 카메라 촬영 */
.ffa-upload video{display:none;max-width:100%;max-height:400px;margin:auto;border-radius:16px;background:#000;transform:scaleX(-1)}
.ffa-photo-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ffa-photo-btns .ffa-upload-btn{margin-top:15px;border:0;font-size:16px;font-family:inherit;line-height:1.2}
.ffa-upload-btn.ffa-shot{background:#22c55e}
.ffa-upload-btn.ffa-secondary{background:#334155;color:#ffffff !important}