/* assets/css/style.css */


/* ===============================
   Noto Sans KR (Self-hosted)
   =============================== */

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}




/* ====== Base ====== */
:root {
  --bg: #0b0f14;
  --card: #111826;
  --text: #e6eef8;
  --muted: rgba(230, 238, 248, 0.72);
  --border: rgba(230, 238, 248, 0.12);
  --brand: #66d9ff;
  --brand2: #7cffc7;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);

  --radius: 18px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(102,217,255,0.16), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(124,255,199,0.14), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link {
  position: absolute; left: -9999px; top: 10px;
  background: #000; color: #fff; padding: 10px 12px; border-radius: 10px;
}
.skip-link:focus { left: 10px; z-index: 9999; }

/* ====== Header ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11,15,20,0.6);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.brand-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(102,217,255,0.95), rgba(124,255,199,0.95));
  color: rgba(0,0,0,0.9);
  box-shadow: var(--shadow);
}
.brand-text { letter-spacing: -0.02em; }

/* Desktop nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-nav a {
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(230,238,248,0.86);
}
.site-nav a:hover {
  background: rgba(230,238,248,0.07);
  color: var(--text);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: rgba(230,238,248,0.92);
  border-radius: 2px;
}

/* ====== Main ====== */
main { padding: 26px 0 40px; }

.hero {
  padding: 26px 0 8px;
}
.hero h1 {
  margin: 0 0 10px;
  font-size: 38px;
  letter-spacing: -0.03em;
}
.lead { margin: 0 0 18px; color: var(--muted); max-width: 66ch; }

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.card-link {
  display: block;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  box-shadow: var(--shadow);
}
.card-link:hover { transform: translateY(-1px); transition: 140ms ease; }

.section { margin-top: 26px; }
.section-head { margin-bottom: 10px; }
.section-head h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.02em; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.panel {
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.panel h3 { margin: 0 0 10px; font-size: 16px; }

.list { margin: 0; padding-left: 18px; color: rgba(230,238,248,0.88); }
.list li { margin: 6px 0; }

.page-head { padding: 10px 0 6px; }
.page-head h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.03em; }

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}
.pill {
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(230,238,248,0.86);
}
.pill.is-active { outline: 2px solid rgba(102,217,255,0.35); }

.list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.card {
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card-title { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; }
.card-title a:hover { text-decoration: underline; }
.card-meta { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.card-desc { margin: 0; color: rgba(230,238,248,0.85); }

.summary-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.summary-box > div {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(230,238,248,0.10);
  background: rgba(0,0,0,0.10);
  display: grid;
  gap: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  cursor: pointer;
}
.btn.primary {
  background: linear-gradient(135deg, rgba(102,217,255,0.85), rgba(124,255,199,0.85));
  color: rgba(0,0,0,0.9);
  border: none;
  box-shadow: var(--shadow);
}

.faq details {
  border: 1px solid var(--border);
  background: rgba(17,24,38,0.55);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 10px 0;
}
.faq summary { cursor: pointer; font-weight: 650; }

/* ====== Footer ====== */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(11,15,20,0.55);
  margin-top: 40px;
}
.footer-inner {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 20px;
}
.footer-bottom { padding: 0 20px 16px; }


/* policies tabs */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab { padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; text-decoration:none; }
.tab.on { background:rgba(255,255,255,.12); }

/* filter */
.filter-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap:10px; }
.filter-grid input, .filter-grid select { width:100%; }


.badge{display:inline-flex;align-items:center;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);}
.badge-open{background:rgba(34,197,94,.12);}
.badge-closing{background:rgba(245,158,11,.14);}
.badge-upcoming{background:rgba(59,130,246,.14);}
.badge-always{background:rgba(148,163,184,.14);}
.badge-closed{background:rgba(244,63,94,.12);}



/* =======================================================
   Responsive Media Queries (요청: 각 사이즈별 미디어 타입)
   ======================================================= */

/* 1200px 이하: 컨테이너는 그대로, 레이아웃만 단계적으로 축소 */
@media (max-width: 1200px) {
  .hero h1 { font-size: 34px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-box { grid-template-columns: repeat(2, 1fr); }
}

/* 992px 이하: 2열 → 1열로 자연스럽게 */
@media (max-width: 992px) {
  .two-col { grid-template-columns: 1fr; }
  .list-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
}

/* 768px 이하: 모바일 네비게이션 활성화 */
@media (max-width: 768px) {

  .filter-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 12px 20px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(11,15,20,0.92);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { width: 100%; padding: 12px 12px; }

  .hero h1 { font-size: 28px; }
}

/* 576px 이하: 타이포/패딩 최적화 */
@media (max-width: 576px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 24px; }
  .card, .panel { padding: 14px; }
  .summary-box { grid-template-columns: 1fr; }
}