:root { --ink:#f2ede3; --sea:#0f1b2d; --sea-2:#16273f; --bronze:#c8a253; --dim:#9aa7b8; color-scheme: dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--sea); color:var(--ink);
  font:16px/1.7 -apple-system,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",sans-serif; word-break:keep-all; }
main { max-width:34rem; margin:0 auto; padding:2rem 1.25rem 4rem; }

.portrait { display:block; width:100%; max-width:22rem; margin:0 auto 1.5rem; border-radius:.5rem; }
.eyebrow { color:var(--bronze); font-size:.8rem; letter-spacing:.08em; margin:0; }
h1 { font-size:2.4rem; margin:.25rem 0 .4rem; }
.lede { color:var(--dim); font-size:1.05rem; margin:0; }

section { margin-top:2.5rem; }
h2 { font-size:.8rem; letter-spacing:.08em; color:var(--bronze); font-weight:600; margin:0 0 .6rem; }

.traits { list-style:none; padding:0; margin:0; }
.traits li { padding:.55rem 0 .55rem 1rem; border-left:2px solid #2c4260; margin-bottom:.4rem; }

.item { font-size:1.15rem; margin:0 0 .3rem; }
.item-why { color:var(--dim); margin:0; }

.pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:26rem) { .pair { grid-template-columns:1fr; } }
.god-link { display:block; padding:.9rem 1rem; border:1px solid #2c4260; border-radius:.5rem;
  background:var(--sea-2); text-decoration:none; color:var(--ink); }
.god-link:hover { border-color:var(--bronze); }
.god-link strong { display:block; font-size:1.05rem; }
.god-link span { display:block; color:var(--dim); font-size:.82rem; line-height:1.5; margin-top:.15rem; }

.actions { display:flex; gap:1.25rem; align-items:center; margin-top:3rem; }
.primary { padding:.85rem 1.9rem; border:0; border-radius:999px; background:var(--bronze);
  color:#17120a; font:inherit; font-weight:700; cursor:pointer; }
.again { color:var(--bronze); }
#toast { color:var(--dim); font-size:.9rem; }

.log { color:var(--dim); }
.hint { color:var(--dim); font-size:.88rem; margin:0 0 .6rem; }
.vs-form { display:flex; gap:.5rem; }
.vs-form input { flex:1; min-width:0; padding:.7rem .9rem; border-radius:.5rem;
  border:1px solid #2c4260; background:var(--sea-2); color:var(--ink); font:inherit; }
.ghost { padding:.7rem 1.1rem; border-radius:.5rem; border:1px solid var(--bronze);
  background:none; color:var(--bronze); font:inherit; cursor:pointer; white-space:nowrap; }
.vs-head { font-size:1.2rem; margin:1.3rem 0 .3rem; }
#vs-out .traits b { display:block; color:var(--bronze); font-size:.78rem;
  letter-spacing:.06em; margin-bottom:.15rem; font-weight:600; }
section p { margin:0 0 .8rem; }
section p:last-child { margin-bottom:0; }

footer { max-width:34rem; margin:0 auto; padding:2rem 1.25rem 3rem;
  border-top:1px solid #23364e; display:flex; flex-wrap:wrap; gap:1.1rem;
  font-size:.85rem; }
footer a { color:var(--dim, #9aa7b8); }
footer span { color:#5d6b7d; }
.sub { font-size:.9rem; margin-top:1.4rem; }
.sub a { color:var(--dim, #9aa7b8); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:26rem) { .grid { grid-template-columns:1fr; } }