PONT
  --brand-green: #0f8a63;
  --brand-green-deep: #0b6f53;
  --brand-green-soft: #eefcf6;
  --brand-mint: #d9f7ea;
  --card-border: #dbe7e3;
  --text-strong: #17324a;
  --text-soft: #617589;
  --surface-glow: 0 20px 40px rgba(15, 88, 69, 0.08);
}

:root {
  --brand-green: #0f8a63;
  --brand-green-deep: #0b6f53;
  --brand-green-soft: #eefcf6;
  --brand-mint: #d9f7ea;
  --card-border: #dbe7e3;
  --text-strong: #17324a;
  --text-soft: #617589;
  --surface-glow: 0 20px 40px rgba(15, 88, 69, 0.08);
}

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(186, 244, 220, 0.75) 0, transparent 28%),
    radial-gradient(circle at 100% 12%, rgba(255, 241, 210, 0.62) 0, transparent 24%),
    linear-gradient(180deg, #f6fbff 0%, #eef5fb 100%);
}

.wrap {
  gap: 20px;
}

.card {
  border-radius: 24px;
  border: 1px solid rgba(212, 225, 234, 0.92);
  box-shadow: 0 16px 34px rgba(30, 41, 59, 0.06);
}

.hero-card {
  min-height: 300px;
  border-radius: 28px;
  padding: 28px;
  background:
    linear-gradient(90deg, rgba(8, 44, 34, 0.10) 0%, rgba(8, 44, 34, 0.04) 46%, rgba(8, 44, 34, 0.02) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 38%),
    url('./banner.png') center center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(8, 44, 34, 0.12);
}

.title-row {
  justify-content: flex-end;
}

.support-text {
  background: rgba(10, 94, 70, 0.82);
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 14px 30px rgba(10, 94, 70, 0.18);
}

.tool-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,252,255,0.96)),
    linear-gradient(135deg, rgba(226, 250, 241, 0.50), rgba(255,255,255,0.00));
  border: 1px solid rgba(214, 230, 225, 0.95);
}

.tool-topbar {
  margin-bottom: 18px;
}

.section-title {
  color: var(--text-strong);
  font-size: 1.14rem;
}

.section-sub {
  color: var(--text-soft);
}

.keyword-panel {
  border: 1px solid rgba(209, 224, 234, 0.92);
  border-radius: 22px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #ffffff, #fbfeff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

body {
    margin: 0;
    color: var(--text);
    background: radial-gradient(circle at 12% 18%, #d9f7ea 0%, transparent 42%), radial-gradient(circle at 92% 8%, #ffe7d4 0%, transparent 34%), var(--bg);
    font-family: "Noto Sans KR", "Malgun Gothic", "Segoe UI Variable Display", sans-serif;
}

button,
textarea,
select,
input {
  font-family: inherit;
}


label {
  color: #365067;
}

textarea,
select,
input[type='text'] {
  border-color: #cfe0ea;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fcfeff);
}

textarea:focus,
select:focus,
input[type='text']:focus {
  border-color: #7fd6b8;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.11);
}

.action-strip {
  gap: 10px;
}

button {
  border-radius: 16px;
  background: linear-gradient(180deg, #14a77b, #0f8a63);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 138, 99, 0.18);
}

button:hover {
  background: linear-gradient(180deg, #129a70, #0b6f53);
}

button:disabled {
  background: linear-gradient(180deg, #b8c5d3, #9baaba);
}

.status,
#learnSummary {
  border-radius: 16px;
}

.sort-card {
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
}

.metrics {
  gap: 12px;
}

.metric {
  border-radius: 20px;
  border: 1px solid rgba(212, 225, 234, 0.92);
  box-shadow: var(--surface-glow);
}

.results-card {
  padding: 14px 16px;
}

.sort-recent-row {
  align-items: center;
  grid-template-columns: 124px minmax(0, 1fr);
}

.sort-compact select {
  width: 120px;
  min-width: 120px;
  border-radius: 14px;
}

.recent-inline {
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(193, 230, 255, 0.52), rgba(184, 246, 222, 0.66), rgba(226, 232, 240, 0.50)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.recent-search-title {
  color: #2f556c;
  letter-spacing: -0.01em;
}

.recent-search-clear {
  margin-left: auto;
}

.recent-search-list {
  min-height: 20px;
}

.recent-search-chip {
  color: var(--brand-green);
  font-weight: 700;
}

.recent-search-chip:hover {
  color: var(--brand-green-deep);
}

.table-wrap {
  border-radius: 20px;
  border: 1px solid rgba(214, 230, 225, 0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
}

.check-head,
.check-cell {
  width: 42px;
  min-width: 42px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.check-head input,
.result-select-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
  cursor: pointer;
}

th {
  background: linear-gradient(180deg, #f4fcf8, #edf8f4);
  color: #436173;
}

tr:hover td {
  background: rgba(247, 252, 250, 0.65);
}

.result-link,
.page-link,
.snippet-cell {
  transition: background-color .22s ease, box-shadow .22s ease, transform .18s ease, color .22s ease;
}

.result-link:hover,
.result-link:focus-visible,
.page-link:hover,
.page-link:focus-visible,
.snippet-cell:hover,
.snippet-cell:focus-within {
  background: linear-gradient(180deg, rgba(241, 255, 248, 0.96), rgba(224, 250, 237, 0.92));
  box-shadow: inset 0 0 0 1px rgba(129, 220, 181, 0.92), 0 0 0 3px rgba(191, 246, 218, 0.40), 0 12px 24px rgba(16, 185, 129, 0.10);
  color: #085f46 !important;
}

@media (max-width: 920px) {
  body {
    padding: 12px;
  }

  .hero-card {
    min-height: 220px;
    padding: 20px;
    background:
      linear-gradient(90deg, rgba(8, 44, 34, 0.08) 0%, rgba(8, 44, 34, 0.03) 46%, rgba(8, 44, 34, 0.02) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 38%),
      url('./BB.jpg') center center / cover no-repeat;
    background-color: #0b4d2f;
  }

  .support-text {
    display: none;
  }

  .sort-recent-row {
    grid-template-columns: 1fr;
  }

  .keyword-panel {
    padding: 14px;
  }
}

.recent-inline, .recent-search-card {
  display: none !important;
}