:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1b1f2a;
  --muted:#5b6375;
  --line:#e8eaf2;
  --primary:#5b5ce6;
  --primary2:#7b5cff;
  --good:#1a9f6b;
  --warn:#ff7a00;
  --danger:#ff3b3b;
  --shadow: 0 12px 30px rgba(24, 28, 50, .08);
  --radius:18px;
  --radius2:14px;
  --max:980px;
  --font: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font); color:var(--text); background:var(--bg)}
a{color:inherit}

.univer-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 14px 24px;
}

.hero{
  background: linear-gradient(120deg, rgba(91,92,230,.22), rgba(123,92,255,.12));
  border:1px solid rgba(91,92,230,.15);
  border-radius: var(--radius);
  padding:16px 16px;
  box-shadow: var(--shadow);
}
.hero__inner{display:flex; flex-direction:column; gap:8px}
.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  width:fit-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(91,92,230,.12);
  border:1px solid rgba(91,92,230,.18);
  font-size:13px;
  color:#2b2f55;
}
.hero__title{
  margin:0;
  font-size:20px;
  letter-spacing:-.2px;
}
.hero__desc{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.quick{
  margin:12px 0 0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.quick__item{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px;
  padding:10px 8px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  box-shadow: 0 8px 20px rgba(24,28,50,.05);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
  font-size:12px;
  color:#2b2f55;
}
.quick__item:hover{transform: translateY(-1px); background:#fff}

.card{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.card--inner{
  margin-top:12px;
  background:linear-gradient(180deg, rgba(91,92,230,.05), rgba(255,255,255,1));
}

.card__head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.card__title{
  margin:0;
  font-size:16px;
  display:flex; align-items:center; gap:8px;
}
.card__sub{margin:0; font-size:13px; color:var(--muted); line-height:1.5}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

.mini{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:12px;
  display:flex; gap:10px;
  background:#fff;
}
.mini__icon{
  width:34px;height:34px;border-radius:12px;
  background:rgba(91,92,230,.12);
  border:1px solid rgba(91,92,230,.2);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.mini__title{font-weight:800; font-size:13px; margin-bottom:3px}
.mini__desc{font-size:12px; color:var(--muted); line-height:1.45}

.cta{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.cta__hint{font-size:12px; color:var(--muted)}

.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 20px rgba(24,28,50,.08)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn--primary{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  color:#fff;
  border:1px solid rgba(91,92,230,.35);
}
.btn--ghost{background:#fff}

.quiz{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:12px;
  background:#fff;
}
.quiz__top{display:flex; flex-direction:column; gap:8px}
.progress{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#eef0f8;
  overflow:hidden;
  border:1px solid rgba(91,92,230,.12);
}
.progress__bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  width:0%;
  transition: width .22s ease;
}
.quiz__meta{display:flex; gap:8px; align-items:center; justify-content:space-between}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f5ff;
  border:1px solid rgba(91,92,230,.18);
  color:#2b2f55;
}
.pill--soft{
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
}

.quiz__body{margin-top:10px; display:flex; flex-direction:column; gap:10px}
.qno{
  width:34px;height:34px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(91,92,230,.12);
  border:1px solid rgba(91,92,230,.2);
  font-weight:900;
  color:#2b2f55;
}
.qtext{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.2px;
  line-height:1.35;
}

.choices{display:flex; flex-direction:column; gap:10px}
.choice{
  text-align:left;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:13px;
  line-height:1.4;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.choice:hover{transform: translateY(-1px)}
.choice.is-selected{
  border-color: rgba(91,92,230,.55);
  background: rgba(91,92,230,.08);
}
.choice__meta{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  display:flex; gap:8px; align-items:center;
}
.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(91,92,230,.2);
  background:#fff;
  color:#2b2f55;
}

.quiz__nav{
  margin-top:6px;
  display:flex;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.result-anchor{height:10px}

.result__head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.result__title{margin:0; font-size:16px; display:flex; align-items:center; gap:8px}
.result__sub{margin:0; font-size:13px; color:var(--muted); line-height:1.5}

.empty{
  border:1px dashed rgba(91,92,230,.35);
  background: rgba(91,92,230,.05);
  border-radius: var(--radius2);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.empty__icon{
  width:38px;height:38px;border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(91,92,230,.12);
  border:1px solid rgba(91,92,230,.2);
}
.empty__title{font-weight:900}
.empty__desc{font-size:12px; color:var(--muted); line-height:1.5}

.resultbox.is-hidden{display:none}
.tagline{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
.rtype{
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.3px;
}
.rsummary{
  margin-top:8px;
  font-size:13px;
  color:var(--text);
  line-height:1.55;
}
.resultbox__top{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:12px;
  align-items:start;
}

.scorepanel{
  border:1px solid var(--line);
  background:#fff;
  border-radius: var(--radius2);
  padding:12px;
}
.scorepanel__title{font-size:13px; font-weight:900; margin-bottom:8px}
.scorepanel__bars{display:flex; flex-direction:column; gap:8px}
.sbar{
  display:flex; gap:8px; align-items:center;
  font-size:12px;
  color:var(--muted);
}
.sbar__name{width:84px; color:#2b2f55; font-weight:800}
.sbar__track{
  flex:1;
  height:10px;
  border-radius:999px;
  background:#eef0f8;
  overflow:hidden;
  border:1px solid rgba(91,92,230,.12);
}
.sbar__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  transition: width .25s ease;
}
.sbar__val{width:42px; text-align:right; font-weight:800; color:#2b2f55}
.scorepanel__note{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.45}

.chips{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(91,92,230,.2);
  background: rgba(91,92,230,.06);
  font-size:12px;
  font-weight:800;
  color:#2b2f55;
}
.chip--hot{
  border-color: rgba(255,122,0,.35);
  background: rgba(255,122,0,.08);
  color:#7a3f00;
}

.box{
  border:1px solid var(--line);
  background:#fff;
  border-radius: var(--radius2);
  padding:12px;
}
.box__title{
  font-weight:1000;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.list{margin:0; padding-left:16px}
.list li{margin:6px 0; font-size:13px; line-height:1.5; color:var(--text)}
.list li span.k{color:#2b2f55; font-weight:900}

.callout{
  margin-top:12px;
  border-radius: var(--radius2);
  border:1px solid rgba(26,159,107,.25);
  background: rgba(26,159,107,.06);
  padding:12px;
}
.callout__title{
  font-weight:1000;
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.callout__body{
  font-size:13px;
  line-height:1.55;
}
.callout__body .em{
  color: var(--danger);
  font-weight:1000;
}
.callout__body .ok{
  color: var(--good);
  font-weight:1000;
}

.actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.msgbox{
  margin-top:10px;
  border-radius: var(--radius2);
  border:1px solid rgba(91,92,230,.25);
  background: rgba(91,92,230,.06);
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.msgbox.is-hidden{display:none}
.msgbox__icon{
  width:32px;height:32px;border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(91,92,230,.12);
  border:1px solid rgba(91,92,230,.2);
  flex:0 0 auto;
}
.msgbox__text{
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}
.msgbox__url{
  margin-top:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  color:#2b2f55;
  word-break:break-all;
}

.smallnote{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.guide{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guide__item{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background:#fff;
  padding:12px;
}
.guide__title{font-weight:1000; margin-bottom:6px}
.guide__desc{font-size:13px; color:var(--muted); line-height:1.6}
.hl{
  color:#2b2f55;
  font-weight:1000;
  background: rgba(255,122,0,.10);
  border:1px solid rgba(255,122,0,.18);
  padding:1px 6px;
  border-radius:999px;
}

.footerline{
  margin-top:14px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

/* Loading */
.loading{
  position:fixed;
  inset:0;
  background: rgba(11, 14, 26, .35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:16px;
}
.loading.is-hidden{display:none}
.loading__card{
  width:min(420px, 100%);
  background:#fff;
  border-radius: 18px;
  border:1px solid rgba(91,92,230,.22);
  box-shadow: var(--shadow);
  padding:16px;
  text-align:center;
}
.spinner{
  width:44px; height:44px;
  border-radius:999px;
  border:4px solid #eef0f8;
  border-top-color: var(--primary);
  margin:0 auto 10px;
  animation: spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading__title{font-weight:1000}
.loading__desc{margin-top:6px; font-size:13px; color:var(--muted); line-height:1.5}

/* Icons (inline via CSS mask: lightweight, no 외부 라이브러리) */
.ico{display:inline-block; width:18px; height:18px; background: currentColor; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center; mask-size:contain; color:inherit}
.ico--cap{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm-7 9.2V15c0 1.66 3.13 3 7 3s7-1.34 7-3v-2.8l-7 3.82-7-3.82z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm-7 9.2V15c0 1.66 3.13 3 7 3s7-1.34 7-3v-2.8l-7 3.82-7-3.82z"/></svg>')}
.ico--spark{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2l1.4 5.1L18 9l-4.6 1.9L12 16l-1.4-5.1L6 9l4.6-1.9L12 2zm8 10l.7 2.6L23 16l-2.3 1.4L20 20l-.7-2.6L17 16l2.3-1.4L20 12zM4 12l.7 2.6L7 16l-2.3 1.4L4 20l-.7-2.6L1 16l2.3-1.4L4 12z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2l1.4 5.1L18 9l-4.6 1.9L12 16l-1.4-5.1L6 9l4.6-1.9L12 2zm8 10l.7 2.6L23 16l-2.3 1.4L20 20l-.7-2.6L17 16l2.3-1.4L20 12zM4 12l.7 2.6L7 16l-2.3 1.4L4 20l-.7-2.6L1 16l2.3-1.4L4 12z"/></svg>')}
.ico--check{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6 9 16.2z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6 9 16.2z"/></svg>')}
.ico--chart{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M3 3h2v18H3V3zm16 6h2v12h-2V9zM11 13h2v8h-2v-8zM7 9h2v12H7V9zm8-4h2v16h-2V5z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M3 3h2v18H3V3zm16 6h2v12h-2V9zM11 13h2v8h-2v-8zM7 9h2v12H7V9zm8-4h2v16h-2V5z"/></svg>')}
.ico--info{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M11 17h2v-6h-2v6zm0-8h2V7h-2v2zm1-7C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M11 17h2v-6h-2v6zm0-8h2V7h-2v2zm1-7C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>')}
.ico--bolt{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M11 21h-1l1-7H7l6-11h1l-1 7h4l-6 11z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M11 21h-1l1-7H7l6-11h1l-1 7h4l-6 11z"/></svg>')}
.ico--target{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2a10 10 0 0 0-7.07 17.07A10 10 0 1 0 12 2zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-14a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2a10 10 0 0 0-7.07 17.07A10 10 0 1 0 12 2zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-14a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>')}
.ico--layers{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2 1 7l11 5 9-4.09V17h2V7L12 2zm0 12L1 9v2l11 5 11-5V9l-11 5zm0 4L1 13v2l11 5 11-5v-2l-11 5z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2 1 7l11 5 9-4.09V17h2V7L12 2zm0 12L1 9v2l11 5 11-5V9l-11 5zm0 4L1 13v2l11 5 11-5v-2l-11 5z"/></svg>')}
.ico--shield{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2 4 5v6c0 5.55 3.84 10.74 8 11 4.16-.26 8-5.45 8-11V5l-8-3zm-1 6h2v7h-2V8zm0 8h2v2h-2v-2z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2 4 5v6c0 5.55 3.84 10.74 8 11 4.16-.26 8-5.45 8-11V5l-8-3zm-1 6h2v7h-2V8zm0 8h2v2h-2v-2z"/></svg>')}
.ico--share{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.03-.47-.09-.7l7.02-4.11A2.99 2.99 0 0 0 18 7.91a3 3 0 1 0-3-3c0 .24.04.47.09.7L8.07 9.72A3 3 0 1 0 6 15a2.99 2.99 0 0 0 2.07-.83l7.02 4.11c-.05.21-.09.43-.09.66a3 3 0 1 0 3-2.86z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.03-.47-.09-.7l7.02-4.11A2.99 2.99 0 0 0 18 7.91a3 3 0 1 0-3-3c0 .24.04.47.09.7L8.07 9.72A3 3 0 1 0 6 15a2.99 2.99 0 0 0 2.07-.83l7.02 4.11c-.05.21-.09.43-.09.66a3 3 0 1 0 3-2.86z"/></svg>')}
.ico--play{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>')}
.ico--left{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>')}
.ico--right{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z"/></svg>')}
.ico--refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M17.65 6.35A7.95 7.95 0 0 0 12 4V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 13.65-6.65z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M17.65 6.35A7.95 7.95 0 0 0 12 4V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 13.65-6.65z"/></svg>')}
.ico--star{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 17.27 18.18 21 16.54 13.97 22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 17.27 18.18 21 16.54 13.97 22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>')}
.ico--map{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20.5 3 15 5.1 9 3 3.5 5v16l5.5-2 6 2 5.5-2V3zM9 5.2l6 2.1v13.5l-6-2.1V5.2z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20.5 3 15 5.1 9 3 3.5 5v16l5.5-2 6 2 5.5-2V3zM9 5.2l6 2.1v13.5l-6-2.1V5.2z"/></svg>')}
.ico--book{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M18 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10v-2H8V4h10v16h2V4a2 2 0 0 0-2-2z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M18 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10v-2H8V4h10v16h2V4a2 2 0 0 0-2-2z"/></svg>')}
.ico--brief{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v3H2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm4 4V4h-4v2h4zM2 13h20v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v3H2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm4 4V4h-4v2h4zM2 13h20v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7z"/></svg>')}
.ico--alert{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z"/></svg>')}
.ico--up{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>')}

/* Responsive */
@media (max-width: 820px){
  .grid-2{grid-template-columns:1fr}
  .resultbox__top{grid-template-columns:1fr}
  .quick{grid-template-columns: repeat(2, 1fr)}
}