/* Same tokens, typography and linked rows as the approved salon pages. */
.salon-directory { overflow: clip; padding-bottom: clamp(64px, 7vw, 100px); }
.directory-head { position: relative; isolation: isolate; text-align: center; padding: clamp(48px, 6vw, 80px) 20px 40px; }
.directory-head::before { content: ''; position: absolute; z-index: -1; width: min(75vw, 980px); height: 320px; top: -215px; right: -15%; border: 28px solid rgba(224, 144, 167, .10); border-radius: 50%; transform: rotate(-16deg); pointer-events: none; }
.directory-head .sec-en { font-family: "Caveat", cursive; color: var(--accent); text-transform: none; letter-spacing: .04em; }
.directory-head h1 { margin-top: 8px; font-size: var(--fz-heading); line-height: 1.5; font-weight: 400; }
.directory-lead { margin-top: 24px; font-size: 16px; line-height: 1.8; color: var(--ink-note); }
.directory-sp-break { display: none; }
.directory-nav { padding: 0 var(--pad-x) 32px; }
.directory-nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; list-style: none; max-width: 1100px; margin: 0 auto; padding: 0; }
.directory-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 56px; padding: 12px 4px; font-size: 14px; color: var(--ink); border-bottom: 1px solid rgba(51, 51, 51, .20); }
.directory-nav a span { color: var(--accent); }
.directory-nav a:hover { color: var(--accent); }
.directory-nav a:focus-visible { outline: 2px solid var(--booking-fill); outline-offset: 4px; }
.directory-area { padding: 48px var(--pad-x) 24px; scroll-margin-top: calc(var(--header-h) + 24px); }
.directory-inner { max-width: 1100px; margin-inline: auto; }
.directory-area-head { display: flex; align-items: baseline; gap: 20px; }
.directory-area-head h2 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; line-height: 1.5; }
.directory-area-head > span { color: var(--ink-note); font-size: 13px; white-space: nowrap; }
.directory-stores { margin-top: 24px; }
.directory-stores .nearby-card { scroll-margin-top: calc(var(--header-h) + 24px); }
.directory-stores .nearby-card:target { background: var(--tint-pink); outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.directory-all { margin: 48px auto 0; text-align: center; }
.directory-all .btn { min-width: 260px; }
@media (max-width: 767px) {
  .directory-head { padding-block: 36px 32px; }
  .directory-lead { font-size: 15px; margin-top: 18px; }
  .directory-sp-break { display: block; }
  .directory-nav { padding-bottom: 12px; }
  .directory-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .directory-nav a { font-size: 13px; min-height: 52px; }
  .directory-area { padding-block: 40px 12px; }
  .directory-area-head { gap: 14px; }
  .directory-area-head h2 { font-size: 24px; }
  .directory-stores { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }