/* salon.ayo.pe.kr — 미용실·네일샵 독자 스킨 (2026-09-27 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **살롱 거울대 × 예약 수첩**. 미용실에서 가장 오래 보는 것은 조명이 둘러싼 거울이고,
 * 가장 먼저 받는 것은 시술 메뉴판과 예약 카드다. 그 셋으로 화면을 짠다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-salon 아래로 가둔다 — 다른 사이트에 새지 않는다.
 *
 *   헤더   : 아치형 거울 틀 + 전구 조명 점(가운데 정렬 상호) · 탭은 가는 금선 밑줄
 *   요약표 : 시술 메뉴판 — 항목과 값 사이 점선 리더
 *   질답   : 상담 카드 — 이탤릭 세리프 번호(01·02…), 금색 가는 선
 *   목록   : 예약 수첩 — 왼쪽 시간 칸(번호) + 가로 줄
 *   허브   : 향수병 라벨처럼 아래가 둥근 카드
 *   글꼴   : 제목 Diphylleia · 본문 Gowun Batang
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 */

body.site-salon {
  --fg: #2a2224;
  --fg-soft: #5b4d50;
  --muted: #8f7d80;
  --line: #ead9d5;
  --line-soft: #f3e7e3;
  --bg: #fffaf8;
  --bg-soft: #f8ece8;
  --accent: #a4506a;          /* 로즈 립 */
  --accent-strong: #823a52;
  --accent-soft: #f7e1e6;
  --accent-wash: #fdf2f3;
  --accent-line: #e8bcc7;
  --gold: #b8904f;
  --gold-soft: #e9d6b0;
  --ink: #3a2c30;
  --radius: 4px;
  --wrap: 860px;
  --serif-h: "Diphylleia", "Gowun Batang", serif;
  background: #fbf3f0;
  background-image: linear-gradient(180deg, #f6e4e0 0, #fbf3f0 420px);
  background-repeat: no-repeat;
  font-family: "Gowun Batang", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  font-size: 16.5px;
}
body.site-salon a { color: var(--accent); }

body.site-salon main,
body.site-salon .site-foot,
body.site-salon .ad-top,
body.site-salon .top-search { max-width: var(--wrap); }

/* ── 헤더: 거울대 ───────────────────────────────────────────────────── */
body.site-salon .site-head {
  position: relative;
  max-width: var(--wrap);
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 18px auto 0;
  padding: 34px 20px 16px;
  row-gap: 22px;
  border: 0;
  text-align: center;
}
/* 아치형 거울 — 금테 + 은은한 반사광 */
body.site-salon .site-head::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: min(460px, calc(100% - 32px));
  height: 106px;
  transform: translateX(-50%);
  border: 2px solid var(--gold);
  border-bottom: 0;
  border-radius: 240px 240px 0 0;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 44%, transparent 52%),
    linear-gradient(180deg, #fff 0, #f9eeea 100%);
  box-shadow: inset 0 0 0 5px #fbf3f0, inset 0 0 0 6px var(--gold-soft);
  pointer-events: none;
}
/* 거울 조명 — 전구 점 한 줄 */
body.site-salon .site-head::after {
  content: "";
  position: absolute;
  left: 50%; top: 114px;
  width: min(520px, calc(100% - 16px));
  height: 10px;
  transform: translateX(-50%);
  background: radial-gradient(circle, #fff6d8 0 3px, #f0cf85 3.5px 4.5px, transparent 5px) 0 0 / 26px 10px repeat-x;
  filter: drop-shadow(0 0 3px rgba(240, 207, 133, .8));
  pointer-events: none;
}
body.site-salon .brand {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-family: var(--serif-h);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
}
body.site-salon .brand a { color: var(--ink); }
body.site-salon .brand a:hover { color: var(--accent); text-decoration: none; }
body.site-salon .brand::after {
  content: "BEAUTY · HAIR · NAIL";
  display: block;
  margin-top: 6px;
  font-family: "Gowun Batang", serif;
  font-size: 10.5px;
  letter-spacing: 4px;
  color: var(--gold);
}
body.site-salon .site-head nav {
  position: relative;
  z-index: 1;
  justify-content: center;
  gap: 2px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gold-soft);
  width: 100%;
}
body.site-salon .site-head nav a {
  padding: 4px 2px;
  border-radius: 0;
  background: none;
  color: var(--fg-soft);
  font-size: 15px;
  letter-spacing: .5px;
  border-bottom: 1.5px solid transparent;
}
body.site-salon .site-head nav a.on,
body.site-salon .site-head nav a:hover {
  background: none;
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* 검색창: 예약 카드 입력줄 */
body.site-salon .site-search input[type="search"] {
  border: 0;
  border-bottom: 1.5px solid var(--gold);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
}
body.site-salon .site-search input[type="search"]:focus { outline: 0; border-bottom-color: var(--accent); }
body.site-salon .site-search button {
  border-radius: 999px;
  padding: 0 22px;
  background: var(--ink);
  font-family: inherit;
  letter-spacing: 1px;
}
body.site-salon .site-search button:hover { background: var(--accent); }

/* ── 경로·제목 ─────────────────────────────────────────────────────── */
body.site-salon .crumb { font-size: 13px; letter-spacing: .3px; }
body.site-salon .crumb a { color: var(--muted); }
body.site-salon .crumb a::after { content: "  /"; color: var(--gold-soft); }
body.site-salon .crumb span { color: var(--accent); }

body.site-salon h1 {
  font-family: var(--serif-h);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
  margin: 18px 0 20px;
}
body.site-salon h1::after {
  content: "";
  display: block;
  width: 56px; height: 1px;
  margin-top: 14px;
  background: var(--gold);
  box-shadow: 64px 0 0 var(--gold-soft);
}
body.site-salon .lead { margin: 0 0 22px; color: var(--fg-soft); }
body.site-salon .data-date { margin: -6px 0 18px; font-style: italic; color: var(--muted); }

/* ── 요약표: 시술 메뉴판 ────────────────────────────────────────────── */
body.site-salon .summary {
  border: 1px solid var(--gold);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--gold-soft);
  font-size: 15.5px;
  margin: 8px 5px 24px;
  width: calc(100% - 10px);
}
body.site-salon .summary tr:has(> td:empty) { display: none; }
body.site-salon .summary tr + tr th,
body.site-salon .summary tr + tr td { border-top: 0; }
body.site-salon .summary th {
  position: relative;
  width: 130px;
  padding: 12px 8px 12px 20px;
  background: transparent;
  color: var(--fg-soft);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .5px;
  background-image: radial-gradient(circle, var(--gold) 1px, transparent 1.3px);
  background-size: 6px 6px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 15px);
}
body.site-salon .summary th::before { content: ""; }
body.site-salon .summary td { padding: 12px 20px 12px 10px; font-weight: 700; color: var(--ink); }
body.site-salon .summary td a { color: var(--accent); }

body.site-salon .btn { border-radius: 999px; font-family: inherit; }
body.site-salon .btn-phone { border-color: var(--ink); color: var(--ink); background: #fff; }
body.site-salon .btn-phone:hover { background: var(--ink); color: #fff; }
body.site-salon .phone-note { font-style: italic; }

/* ── 질답: 상담 카드 ────────────────────────────────────────────────── */
body.site-salon section.qa { counter-reset: sl-q; }
body.site-salon .qa-head {
  font-family: var(--serif-h);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: .5px;
}
body.site-salon .qa-head::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 20%), var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.site-salon .qa-list,
body.site-salon section.qa > .qa-item {
  padding: 8px 28px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 18px 40px -26px rgba(130, 58, 82, .35);
}
body.site-salon section.qa > .qa-item + .qa-item { margin-top: 10px; }
body.site-salon .qa-item {
  counter-increment: sl-q;
  position: relative;
  padding: 20px 0 20px 54px;
  border-bottom: 1px solid var(--line-soft);
}
body.site-salon .qa-item::before {
  content: counter(sl-q, decimal-leading-zero);
  position: absolute;
  left: 0; top: 16px;
  font-family: var(--serif-h);
  font-size: 26px;
  font-style: italic;
  line-height: 1;
  color: var(--gold);
}
body.site-salon .qa-item::after {
  content: "";
  position: absolute;
  left: 0; top: 48px;
  width: 30px; height: 1px;
  background: var(--gold-soft);
}
body.site-salon section.qa > .qa-item { padding: 20px 28px 20px 82px; }
body.site-salon section.qa > .qa-item::before,
body.site-salon section.qa > .qa-item::after { left: 28px; }
body.site-salon .qa-item h2 {
  font-family: var(--serif-h);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0;
  color: var(--ink);
}
body.site-salon .qa-item h2::before { content: none; }
body.site-salon .qa-item p { padding-left: 0; line-height: 1.9; color: var(--fg-soft); }

/* ── 지도 ───────────────────────────────────────────────────────────── */
body.site-salon .mapsec-head { font-family: var(--serif-h); font-size: 20px; color: var(--ink); }
body.site-salon .map-canvas,
body.site-salon .pano-canvas { border-radius: 120px 120px 4px 4px; border: 1px solid var(--gold); }
body.site-salon .map-label { color: var(--gold); letter-spacing: 2px; font-size: 12px; }

/* ── 주변: 같은 골목의 다른 샵 ─────────────────────────────────────── */
body.site-salon .near { border-top: 0; margin-top: 44px; }
body.site-salon .near h2 {
  border-left: 0;
  padding-left: 0;
  font-family: var(--serif-h);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}
body.site-salon .near h2::after {
  content: "";
  display: block;
  width: 40px; height: 1px;
  margin-top: 8px;
  background: var(--gold);
}
body.site-salon .near > .near-block > p { padding-left: 0; }
body.site-salon .near ul { padding-left: 0; }
body.site-salon .near li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
body.site-salon .near li a { font-weight: 700; color: var(--ink); }
body.site-salon .near .more { padding-left: 0; }
body.site-salon .dist {
  background: none;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 400;
}

/* ── 목록: 예약 수첩 ────────────────────────────────────────────────── */
body.site-salon section.list > h2,
body.site-salon section.children > h2,
body.site-salon section.other-sites > h2 {
  font-family: var(--serif-h);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 10px;
}
body.site-salon .place-list {
  counter-reset: sl-row;
  border: 1px solid var(--line);
  background: #fff;
  background-image: linear-gradient(90deg, transparent 62px, var(--accent-line) 62px 63px, transparent 63px);
}
body.site-salon .place-list li:not(.ad-row) {
  counter-increment: sl-row;
  position: relative;
  padding: 13px 16px 13px 78px;
  border-bottom: 1px solid var(--line-soft);
}
body.site-salon .place-list li:not(.ad-row)::before {
  content: counter(sl-row, decimal-leading-zero);
  position: absolute;
  left: 0; top: 12px;
  width: 62px;
  text-align: center;
  font-family: var(--serif-h);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
}
body.site-salon .place-list li.ad-row { background: var(--bg); }
body.site-salon .place-list li > a { color: var(--ink); font-size: 16.5px; }
body.site-salon .place-list li:not(.ad-row):hover { background: var(--accent-wash); }
body.site-salon .cat:empty { display: none; }
body.site-salon .cat {
  background: none;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
}

/* 지역·조건·다른 사이트 링크: 향수병 라벨 */
body.site-salon .region-links { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.site-salon .region-links li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 40px 40px;
  background: #fff;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
body.site-salon .region-links li:hover { border-color: var(--accent); background: var(--accent-wash); }
body.site-salon .region-links li > a { color: var(--ink); font-family: var(--serif-h); font-weight: 400; font-size: 17px; }
body.site-salon .count { font-style: italic; color: var(--gold); }

/* 홈 메뉴: 거울 카드 */
body.site-salon .menu-cards { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
body.site-salon .menu-cards li {
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: 44px 18px 22px;
  border: 1px solid var(--gold);
  border-radius: 120px 120px 6px 6px;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .8) 48%, transparent 56%), linear-gradient(180deg, #fff, #faefeb);
  text-align: center;
}
body.site-salon .menu-cards li::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: -18px 4px 0 -2px var(--gold-soft), 18px 4px 0 -2px var(--gold-soft);
}
body.site-salon .menu-cards li:hover { border-color: var(--accent); }
body.site-salon .menu-cards li > a { font-family: var(--serif-h); font-weight: 400; font-size: 24px; color: var(--ink); }

/* ── 출처·삭제요청·푸터 ─────────────────────────────────────────────── */
body.site-salon .source h2 { font-family: var(--serif-h); font-weight: 400; color: var(--ink); }
body.site-salon .removal {
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}
body.site-salon .removal::before { background: var(--accent-soft); opacity: .5; }
body.site-salon .removal-icon { border-radius: 50%; background: var(--bg-soft); color: var(--accent); font-family: var(--serif-h); }
body.site-salon .removal-title { font-family: var(--serif-h); font-weight: 400; font-size: 18px; color: var(--ink); }
body.site-salon .btn-removal { background: var(--ink); box-shadow: none; border-radius: 999px; }
body.site-salon .btn-removal:hover { background: var(--accent); box-shadow: none; }
body.site-salon .site-foot {
  margin-top: 56px;
  padding: 26px 20px 44px;
  border-top: 1px solid var(--gold);
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
body.site-salon .site-foot a { color: var(--accent); }

/* ── 안내형 404 ─────────────────────────────────────────────────────── */
body.site-salon main.not-found { text-align: center; padding-top: 16px; }
body.site-salon main.not-found h1::after { margin-inline: auto; }
body.site-salon main.not-found .region-links { justify-content: center; }

/* ── 모바일 ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.site-salon { font-size: 16px; }
  body.site-salon .site-head { margin-top: 12px; padding: 30px 16px 12px; }
  body.site-salon .site-head::before { height: 96px; }
  body.site-salon .site-head::after { top: 104px; }
  body.site-salon .brand { font-size: 25px; }
  body.site-salon .site-head nav { gap: 2px 14px; }
  body.site-salon .site-head nav a { font-size: 14px; }
  body.site-salon h1 { font-size: 27px; }
  body.site-salon .summary th { width: 96px; padding-left: 12px; }
  body.site-salon .summary td { padding-right: 12px; }
  body.site-salon .qa-list { padding: 4px 16px; }
  body.site-salon .qa-item { padding-left: 42px; }
  body.site-salon .qa-item::before { font-size: 21px; }
  body.site-salon .qa-item::after { width: 24px; top: 42px; }
  body.site-salon .qa-item h2 { font-size: 17.5px; }
  body.site-salon section.qa > .qa-item { padding: 18px 16px 18px 58px; }
  body.site-salon section.qa > .qa-item::before,
  body.site-salon section.qa > .qa-item::after { left: 16px; }
  body.site-salon .place-list { background-image: linear-gradient(90deg, transparent 44px, var(--accent-line) 44px 45px, transparent 45px); }
  body.site-salon .place-list li:not(.ad-row) { padding-left: 56px; padding-right: 12px; }
  body.site-salon .place-list li:not(.ad-row)::before { width: 44px; font-size: 13px; }
  body.site-salon .region-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site-salon .region-links li { flex-wrap: wrap; min-width: 0; }
  body.site-salon .menu-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.site-salon .menu-cards li { padding: 36px 10px 16px; }
  body.site-salon .menu-cards li > a { font-size: 20px; }
}

/* ── 다크 모드: 저녁 살롱(조명만 켜진 거울) ────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-salon {
    --fg: #f3e6e6;
    --fg-soft: #d2bfc1;
    --muted: #a3898d;
    --line: #463538;
    --line-soft: #3a2c2f;
    --bg: #1f1719;
    --bg-soft: #2a1f22;
    --accent: #e591a9;
    --accent-strong: #f3b1c3;
    --accent-soft: #3e2530;
    --accent-wash: #2b1c22;
    --accent-line: #6d4050;
    --gold: #d6b374;
    --gold-soft: #6b5838;
    --ink: #fbeff0;
    background: #181113;
    background-image: linear-gradient(180deg, #2a1c20 0, #181113 420px);
  }
  body.site-salon .site-head::before {
    background:
      linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .08) 44%, transparent 52%),
      linear-gradient(180deg, #2b2023 0, #1f1719 100%);
    box-shadow: inset 0 0 0 5px #181113, inset 0 0 0 6px var(--gold-soft);
  }
  body.site-salon .summary,
  body.site-salon .qa-list,
  body.site-salon section.qa > .qa-item,
  body.site-salon .place-list,
  body.site-salon .region-links li,
  body.site-salon .removal,
  body.site-salon .btn-phone { background-color: #231a1d; }
  body.site-salon .summary { box-shadow: 0 0 0 4px #181113, 0 0 0 5px var(--gold-soft); }
  body.site-salon .menu-cards li { background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .06) 48%, transparent 56%), linear-gradient(180deg, #2b2023, #1f1719); }
  body.site-salon .site-search button,
  body.site-salon .btn-removal { background: var(--accent); color: #1f1719; }
  body.site-salon .btn-phone:hover { background: var(--ink); color: #1f1719; }
}