/* Additional floating embers around the brazier. */
.ember-three { right: 12%; top: 58%; animation: ember 4.7s .4s infinite; }
.ember-four  { right: 27%; top: 43%; animation: ember 3.8s 1.8s infinite; }
.ember-five  { right: 45%; top: 61%; animation: ember 5.4s .8s infinite; }
.ember-six   { right: 7%;  top: 78%; animation: ember 4.2s 2.4s infinite; }
.ember-seven { right: 33%; top: 84%; animation: ember 5.8s 1.3s infinite; }
.ember-eight { right: 51%; top: 35%; animation: ember 4.9s 3s infinite; }
.ember-nine  { right: 16%; top: 88%; animation: ember 3.6s 1.1s infinite; }
.ember-ten   { right: 41%; top: 52%; animation: ember 5.1s 2.1s infinite; }

.ember-three,
.ember-six,
.ember-nine { width: 3px; height: 3px; }

.ember-four,
.ember-seven { width: 5px; height: 5px; box-shadow: 0 0 17px #ff4d00; }

.ember-eight,
.ember-ten { background: #ffd27a; }

@media (max-width: 800px) {
  .ember-eight,
  .ember-nine,
  .ember-ten { display: none; }
}

/* Story visual: retain the logo while giving it a richer charcoal-table setting. */
.story-mark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(14, 11, 8, .28), rgba(14, 11, 8, .05)),
    url("assets/gaon-story-ci-real.webp") center / cover no-repeat;
  border-color: rgba(217, 163, 62, .28);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .48);
}

.story-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 47%, rgba(20, 12, 8, .06) 0 22%, rgba(10, 7, 5, .5) 72%);
}

.story-mark::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(217, 163, 62, .2);
  pointer-events: none;
}

.story-mark img {
  display: none;
}

@media (max-width: 800px) {
  .story-mark { background-position: center; }
  .story-mark::after { inset: 12px; }
}

/* Make footer actions visibly interactive. */
.footer-contact a[href^="https://map.naver.com"],
.footer-contact a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 0 4px;
  border-bottom: 1px solid rgba(217, 163, 62, .55);
  color: #e8dfd2;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.footer-contact a[href^="https://map.naver.com"]::after { content: "지도 보기 ↗"; }
.footer-contact a[href^="tel:"]::after { content: "전화 걸기 ☎"; }

.footer-contact a[href^="https://map.naver.com"]::after,
.footer-contact a[href^="tel:"]::after {
  color: var(--gold);
  font: 600 10px Arial, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}

.footer-contact a[href^="https://map.naver.com"]:hover,
.footer-contact a[href^="tel:"]:hover {
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-contact a[href^="https://map.naver.com"]:focus-visible,
.footer-contact a[href^="tel:"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}