/* 우리 사이 — 다크 로맨틱 + 핑크 */
:root{
  --bg:#181119; --panel:#221826; --line:#3a2c3e; --ink:#f4ecf2; --sub:#b9a9be; --faint:#8a7a8f;
  --pink:#ff6a97; --pink-d:#e64f80; --blue:#7aa2ff; --mint:#4fd1a5; --amber:#ffb454;
}
*{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:70px;}
.wrap{max-width:640px; margin:0 auto; padding:0 18px;}

.top{text-align:center; padding:46px 0 4px;}
.top h1{font-size:36px; font-weight:900; margin:0; letter-spacing:-1px;}
.top .tag{color:var(--sub); font-size:14.5px; margin:8px 0 0; line-height:1.8;}
.top .tag b{color:var(--ink)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:18px;}
textarea{width:100%; min-height:130px; background:#150f16; border:1.5px solid var(--line); color:var(--ink); border-radius:12px; padding:13px; font:inherit; font-size:14px; line-height:1.6; resize:vertical;}
textarea:focus{outline:none; border-color:var(--pink);}
.how{color:var(--faint); font-size:12.5px; margin:10px 2px 0; line-height:1.8;}
.how b{color:var(--sub)}
.rel{display:flex; gap:8px; margin-top:12px;}
.rel button{flex:1; font:inherit; font-size:13.5px; background:#150f16; border:1.5px solid var(--line); color:var(--sub); border-radius:10px; padding:10px; cursor:pointer;}
.rel button.on{border-color:var(--pink); color:var(--pink); font-weight:700;}
.go{width:100%; margin-top:14px; font:inherit; font-size:16px; font-weight:800; color:#fff; background:linear-gradient(135deg,#ff6a97,#ff4f7f); border:0; border-radius:12px; padding:15px; cursor:pointer;}
.go:disabled{opacity:.5}
.priv{color:var(--faint); font-size:12px; text-align:center; margin-top:12px; line-height:1.7;}
.priv b{color:var(--sub)}

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

@keyframes pop{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
#result{animation:pop .4s;}
.temp{text-align:center; margin-top:8px;}
.temp .big{font-size:56px; font-weight:900; line-height:1.1;}
.temp .rt{font-size:20px; font-weight:800; margin-top:2px;}
.temp .sub{color:var(--faint); font-size:13px; margin-top:2px;}

.scale{margin:20px 0 6px;}
.scale .lab{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;}
.scale .la{color:var(--pink); font-weight:800;} .scale .lb{color:var(--blue); font-weight:800;}
.track{height:26px; border-radius:14px; background:#150f16; overflow:hidden; display:flex;}
.fill-a{height:100%; background:linear-gradient(90deg,#ff6a97,#ff9bb8); display:flex; align-items:center; justify-content:flex-start; padding-left:10px; font-size:12px; font-weight:800; color:#fff;}
.balance{text-align:center; color:var(--ink); font-size:14.5px; margin-top:10px; line-height:1.7;}

.persons{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
@media(max-width:520px){.persons{grid-template-columns:1fr}}
.person{border:1px solid var(--line); border-radius:12px; padding:13px 14px;}
.person .pn{font-weight:800; font-size:15px;}
.person.a .pn{color:var(--pink)} .person.b .pn{color:var(--blue)}
.person .pd{color:var(--sub); font-size:13px; line-height:1.7; margin-top:6px;}
.metrics{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;}
.metric{font-size:11px; background:#150f16; border:1px solid var(--line); border-radius:6px; padding:3px 7px; color:var(--faint);}
.metric b{color:var(--ink)}

.sechead{font-weight:900; font-size:14px; margin:20px 0 7px;}
.sig li{font-size:14px; line-height:1.85;}
.green .sechead{color:var(--mint)} .red .sechead{color:var(--pink)}
.verdict{background:#150f16; border:1px solid var(--line); border-radius:12px; padding:15px; font-size:14.5px; line-height:1.9; margin-top:8px;}

.actions{display:flex; gap:10px; margin-top:18px;}
.actions a,.actions button{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:14.5px; font-weight:700; padding:13px; border-radius:12px; border:1px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--pink); border-color:var(--pink); color:#fff;}
.foot{margin-top:40px; text-align:center; color:var(--faint); font-size:12px; line-height:1.9;}
.hidden{display:none}