/* =========================================================
   spamcall. — 전화 교환대(switchboard) / 착신 화면 톤앤매너
   ========================================================= */

:root{
  --bg:            #0D1826;
  --bg-raised:     #142337;
  --bg-panel:      #17283F;
  --line:          #24374F;
  --line-soft:     #1C2E45;

  --text:          #E9EFF7;
  --text-dim:      #93A6BE;
  --text-faint:    #5E7089;

  --signal-safe:   #35D68E;
  --signal-safe-bg: rgba(53,214,142,.12);
  --signal-warn:   #FFB020;
  --signal-warn-bg: rgba(255,176,32,.12);
  --signal-danger: #FF5C5C;
  --signal-danger-bg: rgba(255,92,92,.14);

  --accent:        #4FC3F7;
  --accent-2:      #FFB020;

  --font-display:  'Space Grotesk', 'IBM Plex Sans KR', sans-serif;
  --font-body:     'IBM Plex Sans KR', sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  --radius:        14px;
  --radius-sm:     8px;

  --maxw:          1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(79,195,247,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,176,32,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

::selection{ background:var(--accent); color:#04121C; }

/* subtle CRT scanline texture over whole page, very faint — signal/monitor motif */
.scanline{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.012) 0px,
    rgba(255,255,255,.012) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(13,24,38,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.logo{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-weight:700; font-size:19px;
  letter-spacing:-0.02em;
  text-decoration:none;
  color:var(--text);
}
.logo-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--signal-danger);
  box-shadow:0 0 0 3px var(--signal-danger-bg);
  animation:pulse 2.4s ease-in-out infinite;
}
.logo-period{ color:var(--accent-2); }
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}
.topbar-meta{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-dim);
}
.topbar-meta span{ color:var(--text); font-weight:600; }

/* ---------------- hero ---------------- */
.hero{ padding:76px 0 40px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 18px;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px, 5.4vw, 56px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 18px;
}
.hero-sub{
  font-size:16.5px;
  color:var(--text-dim);
  max-width:520px;
  margin:0 0 36px;
}

.search-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 8px 8px 20px;
  max-width:560px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-box:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(79,195,247,.12), 0 20px 40px -20px rgba(0,0,0,.5);
}
.search-box-icon{
  font-size:18px;
  color:var(--text-faint);
  transform:rotate(-8deg);
}
#searchInput{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:19px;
  letter-spacing:.02em;
  padding:12px 0;
}
#searchInput::placeholder{ color:var(--text-faint); }
.search-box-btn{
  flex-shrink:0;
  border:none;
  background:var(--accent);
  color:#04121C;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  padding:13px 24px;
  border-radius:calc(var(--radius) - 6px);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.search-box-btn:hover{ background:#71D2FA; }
.search-box-btn:active{ transform:scale(.97); }

.autocomplete{
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  z-index:30;
  box-shadow:0 16px 32px -12px rgba(0,0,0,.55);
}
.autocomplete button{
  display:flex; justify-content:space-between; align-items:center;
  width:100%;
  padding:11px 16px;
  background:none; border:none;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:14px;
  text-align:left;
  cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.autocomplete button:last-child{ border-bottom:none; }
.autocomplete button:hover{ background:var(--bg-panel); }
.autocomplete button .ac-tag{
  font-family:var(--font-body);
  font-size:11.5px;
  color:var(--text-faint);
}

.quick-chips{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:22px;
}
.quick-chips-label{
  font-size:12.5px; color:var(--text-faint); margin-right:4px;
}
.chip{
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text-dim);
  background:var(--bg-panel);
  cursor:pointer;
}
.chip:hover{ border-color:var(--accent); color:var(--text); }

/* ---------------- stats ---------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  margin:16px auto 0;
}
.stat-card{
  background:var(--bg-raised);
  padding:26px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.stat-num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:26px;
  color:var(--text);
}
.stat-label{
  font-size:12.5px;
  color:var(--text-faint);
}

/* ---------------- result: call screen ---------------- */
.result-section{
  margin-top:56px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:start;
}

.call-screen{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #101E30, #0B1621);
  padding:36px 24px 28px;
  text-align:center;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.call-screen-glow{
  position:absolute; inset:-40% -40% auto -40%;
  height:60%;
  border-radius:50%;
  filter:blur(60px);
  opacity:.35;
  background:var(--signal-danger);
  transition:background .3s ease;
}
.call-screen-label{
  position:relative;
  margin:0 0 22px;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.call-screen-number{
  position:relative;
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:600;
  margin:0 0 12px;
  word-break:break-all;
}
.call-screen-tag{
  position:relative;
  display:inline-block;
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  background:var(--signal-danger-bg);
  color:var(--signal-danger);
  margin:0 0 30px;
}
.call-screen-buttons{
  position:relative;
  display:flex; justify-content:center; gap:36px;
}
.call-btn{
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  color:var(--text-faint);
  border:1px solid var(--line);
  opacity:.5;
}
.call-btn-decline{ color:#ffb3b3; }
.call-btn-accept{ color:#b3ffd4; }

.result-detail{ min-width:0; }
.result-summary{
  font-size:16.5px;
  line-height:1.6;
  margin-bottom:20px;
}
.result-summary b{ color:var(--text); }
.result-summary .hl-danger{ color:var(--signal-danger); }
.result-summary .hl-safe{ color:var(--signal-safe); }

.result-breakdown{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:32px;
}
.breakdown-chip{
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  color:var(--text-dim);
}
.breakdown-chip b{ color:var(--text); }

.result-list-title{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--text-dim);
  margin:0 0 14px;
}
.result-list{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line-soft);
}
.result-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
}
.result-list .r-date{
  font-family:var(--font-mono);
  color:var(--text-faint);
  font-size:12.5px;
  min-width:88px;
}
.result-list .r-type{
  font-size:11.5px;
  font-weight:600;
  padding:3px 9px;
  border-radius:999px;
  background:var(--signal-warn-bg);
  color:var(--signal-warn);
  flex-shrink:0;
}
.result-list .r-desc{
  color:var(--text-dim);
  flex:1;
  min-width:180px;
}
.result-list .r-views{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-faint);
  margin-left:auto;
}
.result-list a.r-link{
  font-size:12px;
  color:var(--accent);
  text-decoration:none;
  white-space:nowrap;
}
.result-list a.r-link:hover{ text-decoration:underline; }

.result-empty{
  padding:40px 0;
  color:var(--text-dim);
}
.result-empty b{ color:var(--signal-safe); }

/* ---------------- about ---------------- */
.about{ margin:96px auto 60px; }
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,3.4vw,34px);
  line-height:1.18;
  letter-spacing:-0.02em;
  margin:0 0 18px;
}
.section-body{
  color:var(--text-dim);
  font-size:15.5px;
  line-height:1.7;
  max-width:440px;
}

.type-legend{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
}
.type-legend li{
  background:var(--bg-raised);
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px;
  font-size:13.5px;
}
.type-legend .tl-name{ display:flex; align-items:center; gap:10px; color:var(--text); }
.type-legend .tl-dot{ width:8px; height:8px; border-radius:50%; }
.type-legend .tl-count{
  font-family:var(--font-mono);
  color:var(--text-faint);
  font-size:12.5px;
}

/* ---------------- footer ---------------- */
.footer{
  border-top:1px solid var(--line-soft);
  padding:36px 0 60px;
  margin-top:40px;
}
.footer-inner p{
  color:var(--text-faint);
  font-size:12.5px;
  line-height:1.7;
  max-width:640px;
  margin:0 0 10px;
}
.footer-copy{ font-family:var(--font-mono); }

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .result-section{ grid-template-columns:1fr; }
  .call-screen{ max-width:280px; margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .hero{ padding:52px 0 32px; }
  .search-box{ flex-wrap:wrap; padding:14px; }
  #searchInput{ width:100%; order:1; padding:6px 0; }
  .search-box-icon{ order:0; }
  .search-box-btn{ order:2; width:100%; margin-top:6px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .logo-dot{ animation:none; }
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------------- report CTA + FAB ---------------- */
.report-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:20px;
  background:none;
  border:1px solid var(--line);
  color:var(--text-dim);
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.report-cta:hover{ border-color:var(--accent-2); color:var(--text); }
.report-cta-icon{ color:var(--accent-2); font-weight:700; }

.fab-report{
  position:fixed; right:22px; bottom:22px; z-index:45;
  width:54px; height:54px; border-radius:50%;
  background:var(--accent-2);
  color:#241705;
  border:none;
  font-size:26px; font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 14px 30px -8px rgba(255,176,32,.55);
  transition:transform .15s ease;
}
.fab-report:hover{ transform:scale(1.06); }
.fab-report:active{ transform:scale(.96); }

/* ---------------- report modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(6,12,20,.72);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  position:relative;
  width:100%; max-width:440px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px 28px 28px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}
.modal-close{
  position:absolute; top:18px; right:18px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-panel);
  color:var(--text-dim);
  font-size:14px;
  cursor:pointer;
}
.modal-close:hover{ color:var(--text); border-color:var(--accent); }
.modal-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.01em;
  margin:0 0 8px;
}
.modal-sub{
  font-size:13.5px;
  color:var(--text-faint);
  margin:0 0 24px;
}

.field{ display:block; margin-bottom:16px; }
.field span{
  display:block;
  font-size:12.5px;
  color:var(--text-dim);
  margin-bottom:7px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:14.5px;
  padding:11px 13px;
  outline:none;
  resize:vertical;
}
.field select{ font-family:var(--font-body); }
.field textarea{ font-family:var(--font-body); font-size:13.5px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,195,247,.14);
}

.hp-field{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.modal-error{
  font-size:13px;
  color:var(--signal-danger);
  background:var(--signal-danger-bg);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin:0 0 16px;
}
.modal-success{
  font-size:13px;
  color:var(--signal-safe);
  background:var(--signal-safe-bg);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin:0 0 16px;
}

.modal-submit{
  width:100%;
  border:none;
  background:var(--accent-2);
  color:#241705;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  padding:14px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}
.modal-submit:hover{ filter:brightness(1.08); }
.modal-submit:active{ transform:scale(.98); }
.modal-submit:disabled{ opacity:.55; cursor:not-allowed; }

@media (max-width:520px){
  .fab-report{ right:16px; bottom:16px; }
}