@charset "utf-8";
/* ============================================================
   error_page.css v1.0.0 (2026-09-06, 창B 콘텐츠 검수)
   오류·점검 화면 공통 카드 — 404 / 500(예외) / 400 / 점검
   FEEDBACK_GUIDE §0 토큰 · §5 문구 규칙을 따른다.
   헤더·푸터 없이 크림 배경 + 중앙 흰 카드 1장.
   ⛔ 인라인 스타일 금지 — 이 파일에서만 스타일을 준다.
   ============================================================ */

:root {
  --dzer-green: #3D6041;
  --dzer-green-d: #2F4B33;
  --dzer-ink: #1D271E;
  --dzer-gray: #5F6B62;
  --dzer-cream: #F7F7F4;
  --dzer-line: #DFE5DC;
}

html, body {
  margin: 0;
  padding: 0;
}

body.dzer-body {
  min-height: 100vh;
  background: var(--dzer-cream);
  color: var(--dzer-ink);
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-text-size-adjust: 100%;
}

.dzer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 20px;
}

.dzer-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: 36px 24px 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px -8px rgba(31, 42, 34, .28), 0 1px 2px rgba(31, 42, 34, .08);
  text-align: center;
}

/* 두레 심볼 22px — page_loading.css v2.7 과 같은 마크 */
.dzer-mark {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%2247%22%20height=%2247%22%20viewBox=%220%200%2047%2047%22%3E%3Cdefs%3E%3CclipPath%3E%3Crect%20width=%2232.506%22%20height=%2232.433%22%20fill=%22none%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%20transform=%22translate(-367.804%20-15.803)%22%3E%3Ccircle%20cx=%2223.5%22%20cy=%2223.5%22%20r=%2223.5%22%20transform=%22translate(367.804%2015.803)%22%20fill=%22%233d6041%22/%3E%3Cg%20transform=%22translate(374.83%2022.81)%22%20clip-path=%22url(%23clip-path)%22%3E%3Cpath%20d=%22M9.025,2.343s-6.5,4.111-8.007,10.575c0,0-4.206,11.371,4.478,18.854a3.021,3.021,0,0,0,1.764.977c1.433.041,2-1.468,2.013-2.622a17.564,17.564,0,0,0-.592-3.6,24.517,24.517,0,0,0-.7-2.779c-.4-1.233-1-2.422-1.429-3.656A12,12,0,0,1,6,16.005,30,30,0,0,1,7.321,7.456a13.377,13.377,0,0,1,1.7-3.712s2.284-2.8,0-1.4%22%20transform=%22translate(0%20-0.316)%22%20fill=%22%23fff%22/%3E%3Cpath%20d=%22M33.587,12a21.143,21.143,0,0,0-3.769-6.041,20.7,20.7,0,0,0-5.746-4.734A18.967,18.967,0,0,0,22.3.376a6.726,6.726,0,0,0-.948-.308A2.882,2.882,0,0,0,20.561,0a.276.276,0,0,0,.159.128C24.306,1.859,26.432,5.426,28,8.923c1.717,3.818,3.844,8.635,2.016,12.8a8.243,8.243,0,0,1-2.285,2.945A12.533,12.533,0,0,1,23.58,26.85a10.245,10.245,0,0,1-3.438.366c-3.276-.223-7.275-2.1-8.349-5.441a7.387,7.387,0,0,1,1.873-7.457,6.258,6.258,0,0,1,1.981-1.487,7.594,7.594,0,0,1,6.427.649A4.963,4.963,0,0,1,24.368,19a4.437,4.437,0,0,1-1.849,2.51,2.835,2.835,0,0,1-2.75.257,2.362,2.362,0,0,1-1.21-2.736,2.771,2.771,0,0,1,.889-1.329c.4-.328.922-.584,1.092-1.108.127-.4-.537-.512-.754-.495a3.174,3.174,0,0,0-1.473.6,4.028,4.028,0,0,0-1.523,3.811c.489,2.3,3.389,2.875,5.31,2.15a8.555,8.555,0,0,0,2.134-1.174,10.271,10.271,0,0,0,2.244-2.4,7.222,7.222,0,0,0,.931-1.9,4.267,4.267,0,0,0-1.4-4.5,9.67,9.67,0,0,0-2.7-1.523c-3.786-1.44-9.121.313-11.056,3.937a10.046,10.046,0,0,0-1.077,3.146,11.927,11.927,0,0,0,.966,7.055A9.949,9.949,0,0,0,13.662,27.6a9.27,9.27,0,0,0,5.12,2.413,11.492,11.492,0,0,0,8.674-1.44c2.6-1.766,4.162-4.575,5.311-7.426a27.191,27.191,0,0,0,1.325-4.064A8.272,8.272,0,0,0,33.587,12%22%20transform=%22translate(-1.782%200)%22%20fill=%22%23fff%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.dzer-t {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--dzer-ink);
}

.dzer-d {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--dzer-gray);
}

.dzer-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.dzer-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s cubic-bezier(.2, .8, .2, 1), border-color .12s cubic-bezier(.2, .8, .2, 1);
}

.dzer-btn-p {
  background: var(--dzer-green);
  color: #fff;
}

.dzer-btn-p:hover,
.dzer-btn-p:active,
.dzer-btn-p:focus {
  background: var(--dzer-green-d);
  color: #fff;
}

.dzer-btn-s {
  border: 1px solid var(--dzer-line);
  background: #fff;
  color: var(--dzer-ink);
}

.dzer-btn-s:hover,
.dzer-btn-s:active,
.dzer-btn-s:focus {
  border-color: #C8D2C5;
  color: var(--dzer-ink);
}

/* 개발·점검용 상세(운영에서는 비노출) */
.dzer-detail {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--dzer-line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dzer-gray);
  text-align: left;
  word-break: break-all;
}

@media (max-width: 480px) {
  .dzer {
    padding: 20px;
  }
  .dzer-card {
    max-width: none;
    padding: 32px 20px 24px;
  }
  .dzer-btns {
    flex-direction: column;
  }
  .dzer-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dzer-btn {
    transition: none;
  }
}