/* 엠블럼 — 양피지·문장 감성 */
:root{
  --ink:#2a2118; --sub:#6d5f48; --faint:#a2937a; --line:#e2d9c5; --bg:#f4efe4; --panel:#fdfbf5;
  --gold:#c9a24a; --gold-d:#a5822f; --deep:#3a2e1c;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); padding-bottom:44px;
  background:
    radial-gradient(circle at 15% 10%, rgba(201,162,74,.08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(201,162,74,.07), transparent 40%),
    var(--bg);}
.wrap{max-width:560px; margin:0 auto; padding:0 16px;}

.top{text-align:center; padding:42px 0 4px;}
.top h1{font-family:"Cinzel",Georgia,serif; font-size:34px; font-weight:900; margin:0; letter-spacing:2px; color:var(--deep);}
.top .tg{color:var(--sub); font-size:14.5px; margin-top:10px; line-height:1.8;}
.top .tg b{color:var(--ink)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; margin-top:20px; box-shadow:0 3px 16px rgba(42,33,24,.06);}
.lbl{font-size:12.5px; font-weight:800; color:var(--sub); margin-bottom:6px;}
input, textarea{width:100%; font:inherit; font-size:15.5px; background:#fffdf8; border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:12px 13px; outline:none;}
input:focus, textarea:focus{border-color:var(--gold)}
textarea{min-height:80px; margin-top:12px; line-height:1.6; resize:vertical;}
.egs{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.eg{font-size:12px; color:var(--sub); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 11px; cursor:pointer;}
.eg:hover{border-color:var(--gold)}
.go{width:100%; margin-top:16px; font-family:"Cinzel",Georgia,serif; font-size:17px; font-weight:700; letter-spacing:1px; color:#3a2e0c; background:linear-gradient(180deg,#e0be62,#c9a24a); border:0; border-radius:12px; padding:15px; cursor:pointer;}
.go:disabled{opacity:.55}
.note{color:var(--faint); font-size:12px; text-align:center; margin-top:12px; line-height:1.7;}

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

/* 결과 */
@keyframes reveal{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
.result{margin-top:20px; text-align:center; animation:reveal .6s;}
.crest{display:inline-block; filter:drop-shadow(0 8px 20px rgba(42,33,24,.25));}
.crest svg{max-width:300px; height:auto;}
.house{font-family:"Cinzel",Georgia,serif; font-size:26px; font-weight:900; margin-top:14px; color:var(--deep); letter-spacing:1px;}
.motto{font-size:16px; color:var(--gold-d); margin-top:6px; font-style:italic;}
.motto .ko{color:var(--sub); font-style:normal; font-size:14px;}
.saga{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:16px; font-size:14.5px; line-height:1.95; text-align:left; color:var(--ink);}
.elems{margin-top:12px; text-align:left;}
.elem{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 14px; margin:7px 0; font-size:13.5px; line-height:1.7;}
.elem b{color:var(--gold-d)}
.actions{display:flex; gap:9px; margin-top:18px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:14px; font-weight:800; padding:13px; border-radius:12px; border:1.5px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--gold); border-color:var(--gold); color:#3a2e0c;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}
.foot{margin-top:36px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.9;}
.hidden{display:none}
a{color:var(--gold-d)}