/* 이거 사기야? — 신뢰감 있는 라이트, 큰 글씨(어르신도) */
:root{
  --ink:#1a1d24; --sub:#586074; --faint:#8a92a4; --line:#e3e7ee; --bg:#f5f7fb; --panel:#ffffff;
  --danger:#e03131; --warn:#f08c00; --caution:#f2b807; --safe:#2f9e44; --blue:#3b6fe0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); background:var(--bg); padding-bottom:44px;}
.wrap{max-width:560px; margin:0 auto; padding:0 16px;}

.top{text-align:center; padding:40px 0 4px;}
.top h1{font-size:32px; font-weight:900; margin:0; letter-spacing:-1px;}
.top .tg{color:var(--sub); font-size:15px; margin-top:8px; line-height:1.7;}
.top .tg b{color:var(--ink)}
.counter{display:inline-block; margin-top:12px; font-size:12.5px; color:var(--sub); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 14px;}
.counter b{color:var(--danger)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; margin-top:18px; box-shadow:0 2px 14px rgba(26,29,36,.05);}
textarea{width:100%; min-height:120px; font:inherit; font-size:16px; background:#fbfcfe; border:2px solid var(--line); color:var(--ink); border-radius:14px; padding:14px; resize:vertical; outline:none; line-height:1.6;}
textarea:focus{border-color:var(--blue)}
.tools{display:flex; gap:10px; margin-top:12px;}
.tools button{flex:1; font:inherit; font-size:15px; font-weight:700; border-radius:14px; padding:14px; cursor:pointer; border:0;}
.tools .shot{background:#eef3ff; color:var(--blue); border:1.5px solid #cdddff;}
.tools .go{background:var(--blue); color:#fff;}
.tools .go:disabled{opacity:.5}
#file{display:none}
.note{color:var(--faint); font-size:12.5px; text-align:center; margin-top:12px; line-height:1.7;}
.egs{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; justify-content:center;}
.eg{font-size:12px; color:var(--sub); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer;}
.eg:hover{border-color:var(--blue)}

#loading{text-align:center; color:var(--sub); font-size:15px; padding:34px 0; line-height:1.9;}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}

/* 신호등 결과 */
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.result{margin-top:18px; animation:pop .4s;}
.light{border-radius:20px; padding:26px 20px; text-align:center; color:#fff;}
.light.danger{background:linear-gradient(160deg,#f03e3e,#c92a2a)}
.light.warn{background:linear-gradient(160deg,#f59f00,#e8590c)}
.light.caution{background:linear-gradient(160deg,#f2c200,#e0a800);color:#3a2e00}
.light.safe{background:linear-gradient(160deg,#37b24d,#2b8a3e)}
.light .icon{font-size:56px; line-height:1}
.light .lv{font-size:15px; font-weight:800; letter-spacing:3px; margin-top:8px; opacity:.9}
.light .vd{font-size:24px; font-weight:900; margin-top:6px; line-height:1.4;}
.light .tc{display:inline-block; margin-top:10px; font-size:13px; background:rgba(255,255,255,.22); border-radius:999px; padding:5px 14px;}
.light.caution .tc{background:rgba(0,0,0,.12)}

.sec{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-top:12px;}
.sec .h{font-weight:900; font-size:14.5px; margin-bottom:9px;}
.flag{display:flex; gap:9px; font-size:14.5px; line-height:1.75; padding:7px 0; border-bottom:1px dashed var(--line);}
.flag:last-child{border-bottom:0}
.flag .fi{flex:0 0 auto;color:var(--danger)}
.why{font-size:14.5px; line-height:1.9; color:var(--sub);}
.act{display:flex; gap:9px; font-size:15px; line-height:1.7; padding:9px 0; border-bottom:1px dashed var(--line); align-items:flex-start;}
.act:last-child{border-bottom:0}
.act .an{flex:0 0 24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.report-n{margin-top:12px; background:#fff5f5; border:1px solid #ffc9c9; border-radius:14px; padding:13px 16px; font-size:13.5px; line-height:1.9; color:#c92a2a;}
.report-n b{color:#a51111}
.extracted{background:#fbfcfe; border:1px solid var(--line); border-radius:12px; padding:11px 14px; font-size:13px; color:var(--sub); line-height:1.7; margin-top:12px; white-space:pre-wrap; word-break:break-all;}
.extracted .h{color:var(--faint); font-size:11.5px; font-weight:800; margin-bottom:5px;}

.actions{display:flex; gap:9px; margin-top:14px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:15px; font-weight:800; padding:14px; border-radius:14px; border:1px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--blue); border-color:var(--blue); color:#fff;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}
.disclaimer{margin-top:14px; color:var(--faint); font-size:11.5px; text-align:center; line-height:1.7;}
.foot{margin-top:32px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.9;}
.hidden{display:none}
a{color:var(--blue)}