:root{
  --bg:#0b0f19;
  --card:#121a2a;
  --muted:#93a4c7;
  --text:#eaf0ff;
  --line:rgba(255,255,255,.10);
  --accent:#6ee7ff;
  --accent2:#a78bfa;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo","Noto Sans KR", Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px;      /* ✅ 추가 */
  line-height:1.7;     /* ✅ 1.55 → 1.7로 변경 */
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(167,139,250,.16), transparent 55%),
    var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:26px 18px 60px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand b{font-size:24px}
.brand span{font-size:15px;color:var(--muted)}
.pill{
  font-size:16px;                 /* ✅ 12 → 14 */
  color:var(--text);              /* ✅ 글자 더 선명하게 */
  border:1px solid var(--line);
  padding:10px 14px;              /* ✅ 8 10 → 10 14 */
  border-radius:999px;
  background: rgba(255,255,255,.05);
  white-space:nowrap;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}

.pill:hover{
  background: linear-gradient(90deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
  color:#0b0f19;
  transform: translateY(-1px);
}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:920px){.grid{grid-template-columns:1fr}}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.hero h1{margin:6px 0 8px;font-size:32px}
.hero p{margin:0;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
button{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  padding:14px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  font-size:16px;        /* 🔥 핵심: 글자 크게 */
}
button.primary{
  border:none;
  background: linear-gradient(90deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
  color:#0b0f19;
}
button:disabled{opacity:.55;cursor:not-allowed}
.note{font-size:18px;color:var(--muted);margin-top:10px}

.progress{
  width:100%;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid var(--line);
  margin:14px 0 10px;
}
.bar{height:100%;width:0%;background: linear-gradient(90deg, var(--accent), var(--accent2));}
.qtitle{font-size:20px;margin:6px 0 10px}
.choices{display:grid;gap:10px}
.choice{
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  transition: transform .06s ease, background .2s ease;
}
.choice:hover{transform: translateY(-1px); background: rgba(255,255,255,.05);}

.hidden{display:none}
.side h3{margin:6px 0 10px;font-size:18px}
.side ul{margin:0;padding-left:18px;color:var(--muted)}
.adbox{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  color:var(--muted);
  font-size:12px;
}

.resultTitle{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.resultTitle .emoji{font-size:28px}
.resultTitle h2{margin:0;font-size:22px}
.resultDesc{color:var(--muted);margin:0 0 14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.tag{
  font-size:12px;
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.twoCol{grid-template-columns:1fr}}
.mini h4{margin:0 0 8px;font-size:14px}
.mini li,.mini p{color:var(--muted);font-size:16px}
.mini ul{margin:0;padding-left:18px}
.footer{margin-top:18px;color:var(--muted);font-size:12px}
.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background: rgba(18,26,42,.95);
  border:1px solid var(--line);
  padding:10px 12px;border-radius:12px;
  color:var(--text);
  font-size:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media (max-width:920px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.tcard{
  padding:14px;border-radius:16px;border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  
  display:flex;                /* 🔥 핵심 */
  flex-direction:column;       /* 🔥 세로 정렬 */
  min-height:180px;            /* 🔥 카드 높이 통일 */
}
.tcard b{
  font-size:18px;
  font-weight:800;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tcard span{color:var(--muted);font-size:14px;} /* ✅ 13 → 14 */
.tcard .go{
  margin-top:auto;             /* 🔥 버튼 항상 맨 아래 */
}

.go {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: #0b0f19;
  background: linear-gradient(90deg, #6ee7ff, #a78bfa);
  transition: all 0.2s ease;
}

.go:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.side ol {
  font-size:14px;   /* 🔥 16 → 14 정도로 줄임 */
  line-height:1.6;
}

.side h3 {
  font-size:20px;   /* 제목 크게 */
}

.side ol {
  font-size:14px;   /* 목록 작게 */
}
.side ol {
  padding-left: 0;
  list-style-position: inside;  /* 번호도 안쪽으로 */
  text-align: left;             /* 글자는 왼쪽 */
  display: inline-block;        /* 전체를 가운데 배치 */
}
#pill{ display:none !important; }