/* 밀양추모공원 공식 홈페이지 — 공용 스타일
 *
 * 시니어 이용자를 고려해 기본 글자 17px, 줄간격 1.85 를 쓴다.
 * 누르는 요소는 최소 48px 로 잡아 손가락으로 누르기 쉽게 한다.
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

@font-face {
  font-family: "NostalgicPoliceVibe";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/Griun_PolSensibility-Rg.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

:root {
  --navy: #1b2c4f;
  --navy-soft: #2c4573;
  --navy-muted: #7086a8;
  --beige: #f5f2eb;
  --beige-deep: #ebe5da;
  --surface: #ffffff;
  --gold: #c5a880;
  --charcoal: #2c2c2c;
  --charcoal-soft: #5a5a5a;
  --line: #e2ddd2;

  --shadow-soft: 0 2px 10px rgb(27 44 79 / 0.07);
  --shadow-lift: 0 12px 32px rgb(27 44 79 / 0.14);
  --radius: 18px;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  --font-title: "NostalgicPoliceVibe", var(--font-sans);
  --container: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  background: var(--beige);
  /* 한글이 단어 중간에서 끊기지 않게 한다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  line-height: 1.35;
  font-weight: 800;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* ---------------- 공용 조각 ---------------- */

.section { padding: 48px 0; }
@media (min-width: 768px) { .section { padding: 64px 0; } }

.section--beige { background: var(--beige); }
.section--deep { background: var(--beige-deep); }
.section--surface { background: var(--surface); }
.section--navy { background: var(--navy); color: rgb(245 242 235 / 0.78); }
.section--navy h2, .section--navy h3 { color: var(--beige); }

.heading { max-width: 760px; margin: 0 auto; text-align: center; }
.heading__eyebrow {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.heading__title { font-size: 30px; }
@media (min-width: 768px) { .heading__title { font-size: 38px; } }
.heading__desc { margin-top: 18px; font-size: 18px; color: var(--charcoal-soft); }
.section--navy .heading__desc { color: rgb(245 242 235 / 0.8); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--beige-deep);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.badge--navy { background: var(--navy); color: var(--beige); }
.badge--outline { background: transparent; border: 1px solid var(--line); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, filter .2s;
}
.btn--primary { background: var(--navy); color: var(--beige); }
.btn--primary:hover { background: var(--navy-soft); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { filter: brightness(1.06); }
.btn--outline { border-color: rgb(27 44 79 / .25); color: var(--navy); background: transparent; }
.btn--outline:hover { border-color: rgb(27 44 79 / .6); background: var(--surface); }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 18px; }
.btn--block { width: 100%; }

/* ---------------- 헤더 ---------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgb(245 242 235 / 0.96);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px;
}
@media (min-width: 768px) { .header__row { height: 92px; } }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.brand__name { display: block; font-size: 19px; font-weight: 900; color: var(--navy); }
.brand__legal { display: block; font-size: 12px; color: var(--charcoal-soft); }

.nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1140px) { .nav { display: flex; } }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: rgb(27 44 79 / .08); }
.nav__link[aria-current="page"] { background: var(--navy); color: var(--beige); }

.header__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.header__hours { display: none; font-size: 12px; color: var(--charcoal-soft); white-space: nowrap; }
@media (min-width: 1140px) { .header__hours { display: block; } }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
@media (min-width: 1140px) { .menu-toggle { display: none; } }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--beige); }
.mobile-nav.is-open { display: block; }
@media (min-width: 1140px) { .mobile-nav.is-open { display: none; } }
.mobile-nav__link {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.mobile-nav__link[aria-current="page"] { background: var(--navy); color: var(--beige); }

/* 고정 헤더에 본문이 가리지 않도록 */
.main { padding-top: 80px; }
@media (min-width: 768px) { .main { padding-top: 92px; } }

/* ---------------- 푸터 ---------------- */

.footer { background: var(--navy); color: rgb(245 242 235 / .75); padding: 40px 0 112px; }
@media (min-width: 1024px) { .footer { padding-bottom: 40px; } }
.footer a { color: inherit; }
.footer__top {
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 768px) {
  .footer__top { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer__body {
  display: flex; flex-direction: column; gap: 20px;
  margin-top: 32px; padding-top: 32px;
  border-top: 1px solid rgb(245 242 235 / .15);
}
@media (min-width: 768px) {
  .footer__body { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}
.footer__phone { font-size: 21px; font-weight: 900; color: var(--beige); text-decoration: none; }
.footer__meta { margin-top: 6px; font-size: 15px; }
.footer__label { font-weight: 700; color: var(--gold); }
.footer__copy {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgb(245 242 235 / .15);
  font-size: 14px; color: rgb(245 242 235 / .55);
}

/* ---------------- 모바일 하단 퀵바 ---------------- */

.quickbar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgb(245 242 235 / .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgb(30 58 43 / .1);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .quickbar { display: none; } }
.quickbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 64px;
  color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 700;
}

/* ---------------- 첫 화면 ---------------- */

.hero { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 사진이 밝아도 글자가 읽히도록 왼쪽만 어둡게 깔되 색을 입히지 않는다 */
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgb(0 0 0 / .62), rgb(0 0 0 / .30) 55%, transparent);
}
.hero__inner { position: relative; padding: 96px 0; }
.hero__title {
  font-family: var(--font-title);
  font-size: clamp(40px, 9vw, 78px);
  line-height: 1.25;
  color: var(--beige);
  text-shadow: 0 1px 3px rgb(9 17 33 / .6), 0 3px 14px rgb(9 17 33 / .45), 0 6px 34px rgb(9 17 33 / .32);
}
.hero__accent { color: var(--gold); }
.hero__desc {
  margin-top: 28px; max-width: 640px;
  font-size: 18px; color: rgb(245 242 235 / .92);
  text-shadow: 0 1px 3px rgb(9 17 33 / .6), 0 3px 14px rgb(9 17 33 / .45);
}
@media (min-width: 768px) { .hero__desc { font-size: 20px; } }

/* ---------------- 격자 ---------------- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* 핵심 가치 카드 */
.value { padding: 28px; }
.value__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 20px;
  border-radius: 16px; background: var(--navy); color: var(--beige);
}
.value__title { font-size: 20px; }
.value__desc { margin-top: 12px; color: var(--charcoal-soft); }

/* 시설 카드 */
.facility { display: flex; flex-direction: column; overflow: hidden; }
.facility__photo { width: 100%; height: 224px; object-fit: cover; background: var(--navy); }
@media (min-width: 768px) { .facility__photo { height: 256px; } }
.facility__body { display: flex; flex-direction: column; flex: 1; padding: 28px; }
.facility__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.facility__name { font-size: 24px; }
.facility__summary { color: var(--charcoal-soft); }
.facility__features { margin-top: 20px; display: grid; gap: 10px; }
.facility__feature { display: flex; align-items: flex-start; gap: 10px; }
.facility__check { flex: none; margin-top: 6px; width: 16px; height: 16px; color: var(--gold); }
.facility__more { margin-top: auto; padding-top: 28px; }

/* 절차 */
.steps { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step {
  display: flex; flex-direction: column; height: 100%;
  padding: 24px; border-radius: var(--radius);
  border: 1px solid rgb(245 242 235 / .15);
  background: rgb(245 242 235 / .06);
}
.step__no {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 16px;
  border-radius: 50%; background: var(--gold);
  font-size: 18px; font-weight: 900; color: var(--navy);
}
.step__title { font-size: 18px; color: var(--beige); }
.step__desc { margin-top: 10px; color: rgb(245 242 235 / .7); }

/* ---------------- 폼 ---------------- */

.field { display: block; margin-bottom: 20px; }
.field__label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--navy); }
.field__req { margin-left: 4px; color: #c0392b; }
.field__hint { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--charcoal-soft); }
.input, .select, .textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-family: inherit;
  font-size: 17px;
  color: var(--charcoal);
}
.textarea { min-height: 120px; line-height: 1.7; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #c0392b; }
.field__error { margin-top: 6px; font-size: 15px; font-weight: 600; color: #c0392b; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkbox input { width: 22px; height: 22px; margin-top: 4px; accent-color: var(--navy); flex: none; }

.alert { padding: 14px 18px; border-radius: 14px; font-weight: 600; border: 2px solid; }
.alert--ok { border-color: rgb(197 168 128 / .5); background: rgb(197 168 128 / .15); color: var(--navy); }
.alert--error { border-color: rgb(192 57 43 / .4); background: #fdecea; color: #a5281b; }

/* ---------------- 표 ---------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.price-table { width: 100%; min-width: 320px; border-collapse: collapse; text-align: left; }
.price-table th, .price-table td { padding: 14px 12px; white-space: nowrap; }
.price-table thead th {
  background: var(--navy); color: var(--beige);
  font-size: 15px; font-weight: 700; text-align: center;
}
.price-table tbody tr { border-top: 1px solid var(--line); }
.price-table tbody th { font-weight: 700; color: var(--navy); }
.price-table tbody td { text-align: center; font-weight: 700; color: var(--navy); }
.price-table .is-recommended { background: rgb(197 168 128 / .12); }

/* ---------------- 갤러리 ---------------- */

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery--4 { grid-template-columns: repeat(4, 1fr); } }
.gallery__item {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; border-radius: var(--radius);
  overflow: hidden; background: var(--navy); cursor: pointer;
}
.gallery__img { width: 100%; height: 168px; object-fit: cover; }
.gallery__caption {
  position: absolute; inset: auto 0 0 0;
  padding: 32px 16px 12px;
  background: linear-gradient(to top, rgb(0 0 0 / .75), transparent);
  color: var(--beige); font-size: 14px; font-weight: 700; text-align: left;
}

/* 확대 보기 */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgb(0 0 0 / .9);
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-height: 78svh; width: auto; border-radius: var(--radius); object-fit: contain; }
.lightbox__close {
  position: absolute; top: 20px; right: 20px;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: rgb(245 242 235 / .15); color: var(--beige); cursor: pointer;
}

/* 사진 전체보기 창 */
.more-box {
  position: fixed; inset: 0; z-index: 55;
  overflow-y: auto; padding: 16px;
  background: rgb(0 0 0 / .8);
}
.more-box[hidden] { display: none; }
.more-box__panel {
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 24px; border-radius: var(--radius);
  background: var(--beige); box-shadow: var(--shadow-lift);
}
@media (min-width: 768px) { .more-box__panel { padding: 32px; } }
.more-box__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.more-box__close {
  flex: none; width: 56px; height: 56px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--navy); cursor: pointer;
}
.more-box__close:hover { background: rgb(27 44 79 / .1); }

/* ---------------- 팝업 ---------------- */

.popups { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; }
.popup {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  pointer-events: auto;
}
.popup__img { width: 100%; height: auto; object-fit: contain; }
.popup__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
  background: var(--beige);
}
.popup__btn {
  min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent;
  font-size: 14px; font-weight: 700; color: var(--charcoal-soft); cursor: pointer;
}
.popup__btn--close { color: var(--navy); }
.popup__btn:hover { background: rgb(27 44 79 / .1); color: var(--navy); }

/* ---------------- 접었다 펴는 목록 ---------------- */

.accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.accordion + .accordion { margin-top: 14px; }
.accordion__summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 22px 26px; cursor: pointer; list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__title { flex: 1; font-size: 18px; font-weight: 700; color: var(--navy); }
.accordion__body { padding: 22px 26px; border-top: 1px solid var(--line); color: var(--charcoal-soft); }

/* ---------------- 페이지 이동 ---------------- */

.pagination { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 12px;
  border: 2px solid rgb(27 44 79 / .2); border-radius: 999px;
  font-size: 18px; font-weight: 700; color: var(--navy); text-decoration: none;
}
.pagination a:hover { border-color: rgb(27 44 79 / .5); background: var(--surface); }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: var(--beige); }
.pagination .is-disabled { opacity: .35; }
.pagination .is-gap { border: 0; min-width: auto; }

/* ---------------- 보조 ---------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-14 { margin-top: 56px; }
.text-center { text-align: center; }
.text-soft { color: var(--charcoal-soft); }
.text-gold { color: var(--gold); }
.fw-bold { font-weight: 700; }