/* 테마 ④ 살롱 리프 — Variant 시안 이식(B-10). 출처: design/variant/leaf/v1-2026-09-26.html (2026-09-26).
   레이아웃·서체는 시안 값 그대로: Noto Serif KR(제목) + Pretendard(본문) + Jost(영문 라벨·버튼) + Bodoni Moda(가격·Q.) + Caveat(손글씨). 1200 컨테이너, 알약 버튼.
   색은 2026-09-26 승민 지시로 바꿈(8곳이 전부 베이지로 겹쳐서, 미용실 pastel·skin): 블러시 바탕 #F6ECE8 · 흰 #FFFFFF · 자두 먹 #3B1F2B · 보조 글 #6B4A55 · 흐린 글 #7E5F69 · 더스티 로즈 #E3B5B3(버튼, 호버 #CB9A9B) · 버건디 띠 #5A2A3C(공지·예약 안내) · 로즈 #A8506A(손글씨·추천 배지·Q.) · 선 #E6D3CE · 푸터 글 #C8A0AC.
   대비: 먹/바탕 12.8 · 보조/바탕 6.6 · 흐린/바탕 4.9 · 먹/로즈 버튼 8.1 · 흰/로즈 배지 5.2 · 바탕/버건디 9.9 · 푸터 글/자두 6.4. (변수 이름 --brown·--orange는 이전 팔레트 이름 그대로, 값만 바뀜) */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Caveat:wght@400;500&family=Noto+Serif+KR:wght@300;400;600;700&family=Jost:wght@400;500;600&display=swap');
:root {
  --bg: #F6ECE8;
  --surface: #FFFFFF;
  --ink: #3B1F2B;
  --ink-2: #6B4A55;
  --ink-3: #6B4A55;
  --muted: #7E5F69;
  --line: #E6D3CE;
  --line-dark: #3B1F2B;
  --accent: #E3B5B3;
  --accent-hover: #CB9A9B;
  --accent-ink: #3B1F2B;
  --accent-soft: #EFD2CF;
  --brown: #5A2A3C;
  --orange: #A8506A;
  --footer-ink: #C8A0AC;
  --band: #FFFFFF;
  --hero-bg: transparent;
  --hero-ink: #3B1F2B;
  --header-bg: rgba(246, 236, 232, 0.95);
  --font-serif: 'Noto Serif KR', serif;
  --font-en: 'Bodoni Moda', serif;
  --font-jost: 'Jost', sans-serif;
  --font-script: 'Caveat', cursive;
  --font-display: var(--font-serif);
  --display-weight: 700;
  --display-tracking: 0;
  --step--1: 0.95rem;
  --step-0: 1rem;
  --step-1: 1.1rem;
  --radius: 0;
  --radius-lg: 0;
  --measure: none;
  --container: 1168px; /* 시안 container 1200 - 좌우 1rem(폰) / 2rem(768+) */
  --gutter: 16px;
  --shadow: none;
}
@media (min-width: 768px) { :root { --gutter: 32px; --container: 1136px; } }

/* ---------- 바탕 · 글 ---------- */
html[data-theme="beauty-leaf"] body { line-height: 1.6; }
html[data-theme="beauty-leaf"] h1, html[data-theme="beauty-leaf"] h2, html[data-theme="beauty-leaf"] h3, html[data-theme="beauty-leaf"] h4 { line-height: 1.2; text-wrap: initial; }
html[data-theme="beauty-leaf"] .prose p, html[data-theme="beauty-leaf"] .prose li { color: var(--ink-2); } /* 처리방침·감사 페이지는 시안 밖 */

/* 버튼: 노른자 알약(Jost 500 .95rem) · 먹색 1px 테두리 알약(호버 반전) */
html[data-theme="beauty-leaf"] .btn,
html[data-theme="beauty-leaf"] .hero.hero--split .btn {
  min-height: auto; padding: .8rem 1.5rem; border: 0; border-radius: 99px;
  background: var(--accent); color: var(--ink); font-family: var(--font-jost); font-weight: 500; font-size: .95rem; letter-spacing: .5px; line-height: 1.6;
  transition: background-color .2s ease;
}
html[data-theme="beauty-leaf"] .btn:hover, html[data-theme="beauty-leaf"] .hero.hero--split .btn:hover { background: var(--accent-hover); opacity: 1; }
html[data-theme="beauty-leaf"] .btn:active { transform: none; }
html[data-theme="beauty-leaf"] .btn.ghost,
html[data-theme="beauty-leaf"] .hero.hero--split .btn.ghost {
  border: 1px solid var(--line-dark); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0; transition: all .2s ease;
}
html[data-theme="beauty-leaf"] .btn.ghost:hover, html[data-theme="beauty-leaf"] .hero.hero--split .btn.ghost:hover { background: var(--ink); color: var(--bg); }
html[data-theme="beauty-leaf"] :focus-visible { outline-color: var(--ink); }

/* 배지: .7rem 600, 라운드 4. 인기·시즌 노른자 / 추천 주황 */
html[data-theme="beauty-leaf"] .badge { padding: 2px 6px; border-radius: 4px; font-size: .7rem; font-weight: 600; line-height: 1.6; background: var(--accent); color: var(--ink); }
html[data-theme="beauty-leaf"] .badge[data-badge="추천"] { background: var(--orange); color: var(--surface); }

/* ---------- 공지 · 헤더 ---------- */
html[data-theme="beauty-leaf"] .notice { background: var(--brown); color: var(--bg); font-size: .85rem; font-weight: 300; letter-spacing: .5px; padding: .6rem var(--gutter); }
html[data-theme="beauty-leaf"] .site-header { background: var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
html[data-theme="beauty-leaf"] .site-header .row { min-height: 4rem; height: 4rem; }
html[data-theme="beauty-leaf"] .site-header .logo { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--ink); }
html[data-theme="beauty-leaf"] .site-header nav { display: none; gap: 2rem; font-size: .95rem; font-weight: 500; }
html[data-theme="beauty-leaf"] .site-header nav a { position: relative; padding-bottom: 4px; color: var(--ink); }
html[data-theme="beauty-leaf"] .site-header nav a:hover::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ink); }
/* 시안 내비는 4개(가격·디자이너·사진·오시는 길)뿐 */
html[data-theme="beauty-leaf"] .site-header nav a[href="#features"], html[data-theme="beauty-leaf"] .site-header nav a[href="#reviews"],
html[data-theme="beauty-leaf"] .site-header nav a[href="#faq"], html[data-theme="beauty-leaf"] .site-header nav a[href="#contact"] { display: none; }
html[data-theme="beauty-leaf"] .site-header .btn.header-cta { display: inline-flex; }
@media (min-width: 1024px) { html[data-theme="beauty-leaf"] .site-header nav { display: flex; } }

/* ---------- 첫 화면: 손글씨 welcome to + 상호(한글 명조 / 영문 Jost) + 설명 + 평점 + 버튼 | 4:5 사진(먹색 1px 테두리) ---------- */
html[data-theme="beauty-leaf"] .hero.hero--split {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
  padding: 3rem var(--gutter) 4rem; background: transparent; color: var(--ink); border-bottom: 1px solid var(--line);
}
html[data-theme="beauty-leaf"] .hero.hero--split .hero__body { order: 1; position: relative; width: auto; margin: 0; padding: 0; gap: 0; }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__body::before {
  content: "welcome to"; font-family: var(--font-script); font-size: 3rem; line-height: .5; color: var(--orange);
  transform: rotate(-5deg); margin: 0 0 1rem -.5rem; /* 시안처럼 칸 전체 폭을 기준으로 돌린다(왼쪽 끝이 제목 쪽으로 내려옴) */
}
html[data-theme="beauty-leaf"] .hero.hero--split h1 { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -1px; margin-bottom: 1.5rem; }
html[data-theme="beauty-leaf"] .hero.hero--split h1 .hero__en { font-family: var(--font-jost); font-size: 4rem; font-weight: 600; }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__sub { font-size: 1.1rem; color: var(--ink-2); opacity: 1; max-width: none; margin-bottom: 2rem; }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__rating { order: 3; gap: .5rem; margin-bottom: 2rem; font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); opacity: 1; }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__rating .num.num { font-weight: 600; color: var(--ink); }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__cta { order: 4; gap: 1rem; margin: 0; }
html[data-theme="beauty-leaf"] .hero.hero--split .hours-now { order: 5; margin-top: 1rem; font-size: .85rem; color: var(--ink-2); opacity: 1; }
html[data-theme="beauty-leaf"] .hero.hero--split .hours-now.open { color: var(--ink); }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__media { order: 2; position: relative; width: 100%; aspect-ratio: 3 / 4; background: #EFDCD7; overflow: hidden; }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-dark); pointer-events: none; }
html[data-theme="beauty-leaf"] .hero.hero--split .hero__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 1024px) {
  html[data-theme="beauty-leaf"] .hero.hero--split { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem max(var(--gutter), calc((100% - var(--container)) / 2)) 6rem; }
  html[data-theme="beauty-leaf"] .hero.hero--split h1 { font-size: 4.5rem; }
  html[data-theme="beauty-leaf"] .hero.hero--split .hero__sub { max-width: 80%; }
  html[data-theme="beauty-leaf"] .hero.hero--split h1 .hero__en { font-size: 5.5rem; }
  html[data-theme="beauty-leaf"] .hero.hero--split .hero__media { aspect-ratio: 4 / 5; }
}

/* ---------- 섹션 공통: 위아래 4rem, 영문 라벨 + 명조 제목, 아래 먹색 1px 선 ---------- */
html[data-theme="beauty-leaf"] .section { padding-block: 4rem; border-top: 0; }
html[data-theme="beauty-leaf"] .section-head { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; gap: 0 1rem; margin-bottom: 2rem; align-items: end; }
html[data-theme="beauty-leaf"] .section-head::before { grid-column: 1; grid-row: 1; font-family: var(--font-jost); font-size: .8rem; letter-spacing: 1px; line-height: 1.6; color: var(--ink-2); margin-bottom: .2rem; }
html[data-theme="beauty-leaf"] .section-head::after { content: ""; grid-column: 1 / -1; grid-row: 3; height: 1px; margin-top: .5rem; background: var(--line-dark); }
html[data-theme="beauty-leaf"] .section-head h2 { grid-column: 1; grid-row: 2; font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
html[data-theme="beauty-leaf"] .section-head p { grid-column: 2; grid-row: 2; font-size: .85rem; color: var(--ink-2); }
html[data-theme="beauty-leaf"] .menu .section-head::before { content: "PRICE LIST"; }
html[data-theme="beauty-leaf"] .staff .section-head::before { content: "STYLISTS"; }
html[data-theme="beauty-leaf"] .gallery .section-head::before { content: "GALLERY"; }
html[data-theme="beauty-leaf"] .features .section-head::before { content: "INFORMATION"; }
html[data-theme="beauty-leaf"] .reviews .section-head::before { content: "REVIEWS"; }
html[data-theme="beauty-leaf"] .faq .section-head::before { content: "FAQ"; }
html[data-theme="beauty-leaf"] .location .section-head::before { content: "LOCATION"; }
html[data-theme="beauty-leaf"] .contact .section-head::before { content: "CONTACT"; }

/* ---------- 시술 가격: 흰 안내 상자 + 2단(분류 제목 옆으로 먹색 선, 이름 ··· 가격 점선) ---------- */
html[data-theme="beauty-leaf"] .menu .section-head p { grid-column: 1 / -1; grid-row: 4; max-width: none; margin-top: 2rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: .9rem; }
html[data-theme="beauty-leaf"] .menu .columns { grid-template-columns: 1fr; gap: 4rem; }
html[data-theme="beauty-leaf"] .menu .columns__cat { display: flex; align-items: center; gap: 1rem; padding: 0; margin-bottom: 1.5rem; border: 0; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; }
html[data-theme="beauty-leaf"] .menu .columns__cat::after { content: ""; flex-grow: 1; height: 1px; background: var(--line-dark); }
html[data-theme="beauty-leaf"] .menu .mrow { gap: .2rem; margin-bottom: 1.25rem; }
html[data-theme="beauty-leaf"] .menu .mrow:last-child { margin-bottom: 0; }
html[data-theme="beauty-leaf"] .menu .mrow__head { font-size: 1.05rem; }
html[data-theme="beauty-leaf"] .menu .mrow__name { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
html[data-theme="beauty-leaf"] .menu .mrow__leader { margin: 0 10px; top: -4px; border-bottom: 1px dotted var(--muted); opacity: .5; }
html[data-theme="beauty-leaf"] .menu .mrow__price { font-family: var(--font-en); font-weight: 600; font-size: 1.1rem; }
html[data-theme="beauty-leaf"] .menu .mrow__desc { font-size: .85rem; color: var(--ink-2); line-height: 1.4; padding-right: 4rem; }
@media (min-width: 768px) { html[data-theme="beauty-leaf"] .menu .columns { grid-template-columns: 1fr 1fr; gap: 6rem 4rem; } }

/* ---------- 디자이너: 흰 바탕, 3칸 2px 선, 원형 사진 + 가운데 이름·직함·소개 ---------- */
html[data-theme="beauty-leaf"] .section.staff { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-theme="beauty-leaf"] .staff .grid.cols-3 { grid-template-columns: 1fr; gap: 2rem; }
html[data-theme="beauty-leaf"] .staff .person { display: flex; flex-direction: column; gap: 0; padding: 2rem; background: var(--surface); text-align: center; }
html[data-theme="beauty-leaf"] .staff .person img { width: 100%; max-width: 240px; align-self: center; aspect-ratio: 1; object-fit: cover; margin-bottom: 1.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
html[data-theme="beauty-leaf"] .staff .person h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; margin-bottom: .2rem; }
html[data-theme="beauty-leaf"] .staff .person .label-mono { font-size: .9rem; color: var(--ink-2); margin-bottom: 1rem; }
html[data-theme="beauty-leaf"] .staff .person p { font-size: .95rem; color: var(--ink); max-width: none; }
@media (min-width: 768px) {
  html[data-theme="beauty-leaf"] .staff > .container { width: min(100%, 1200px); }
  html[data-theme="beauty-leaf"] .staff .section-head { margin: 0 2rem 2rem; }
  html[data-theme="beauty-leaf"] .staff .grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
  html[data-theme="beauty-leaf"] .staff .person img { max-width: none; }
}

/* ---------- 시술 사진: 2px 선 격자, 4:5 (폰 2열 · 768+ 3열) ---------- */
html[data-theme="beauty-leaf"] .section.gallery.gallery--grid .gallery__list { gap: 2px; background: var(--line); }
html[data-theme="beauty-leaf"] .gallery--grid .gallery__list li { background: var(--surface); }
html[data-theme="beauty-leaf"] .gallery--grid .gallery__list img { border-radius: 0; }
@media (min-width: 768px) { html[data-theme="beauty-leaf"] .section.gallery.gallery--grid .gallery__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 예약 안내: 갈색 바탕, 2열, 노른자 소제목 ---------- */
html[data-theme="beauty-leaf"] .section.features { background: var(--brown); color: var(--bg); }
html[data-theme="beauty-leaf"] .features .section-head h2, html[data-theme="beauty-leaf"] .features .section-head::before { color: var(--bg); }
html[data-theme="beauty-leaf"] .features .section-head::after { background: rgba(255, 255, 255, .2); }
html[data-theme="beauty-leaf"] .features .grid.cols-3 { grid-template-columns: 1fr; gap: 2rem; }
html[data-theme="beauty-leaf"] .features .feat { display: block; padding: 0; border: 0; }
html[data-theme="beauty-leaf"] .features .feat h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; color: var(--accent); }
html[data-theme="beauty-leaf"] .features .feat p { font-size: .95rem; line-height: 1.5; color: var(--bg); opacity: .9; }
@media (min-width: 768px) { html[data-theme="beauty-leaf"] .features .grid.cols-3 { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- 방문 후기: 흰 상자 3칸, 흐린 노른자 따옴표, 작성자 앞 짧은 선 ---------- */
html[data-theme="beauty-leaf"] .reviews .section-head p a { color: var(--ink-2); }
html[data-theme="beauty-leaf"] .reviews .reviews__list { max-width: none; grid-template-columns: 1fr; gap: 2rem; }
html[data-theme="beauty-leaf"] .reviews .reviews__list .review { position: relative; display: block; padding: 2rem; border: 1px solid var(--line); background: var(--surface); }
html[data-theme="beauty-leaf"] .reviews .review::before { content: "\201C"; position: absolute; top: 1rem; left: 1rem; font-family: var(--font-en); font-size: 4rem; line-height: 1; color: var(--accent); opacity: .3; }
html[data-theme="beauty-leaf"] .reviews .reviews__list .review p { position: relative; z-index: 1; margin: 1.5rem 0 1rem; font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.6; }
html[data-theme="beauty-leaf"] .reviews .review footer { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-2); }
html[data-theme="beauty-leaf"] .reviews .review footer::before { content: ""; width: 20px; height: 1px; background: var(--muted); }
@media (min-width: 768px) { html[data-theme="beauty-leaf"] .reviews .reviews__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 자주 묻는 질문: 펼친 목록, 주황 Q. + 명조 질문, 들여쓴 답 ---------- */
html[data-theme="beauty-leaf"] .section.faq { border-top: 1px solid var(--line); }
html[data-theme="beauty-leaf"] .faq .faq__list { max-width: none; display: flex; flex-direction: column; gap: 1rem; }
html[data-theme="beauty-leaf"] .faq .faq__item { margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
html[data-theme="beauty-leaf"] .faq .faq__q { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.6; margin-bottom: .5rem; }
html[data-theme="beauty-leaf"] .faq .faq__q::before { content: "Q."; font-family: var(--font-en); color: var(--orange); margin-right: .5rem; }
html[data-theme="beauty-leaf"] .faq .faq__a { font-size: .95rem; color: var(--ink-2); padding-left: 1.7rem; max-width: none; }

/* ---------- 오시는 길 | 예약·문의: 흰 바탕 한 띠, 1024+ 2열(간격 6rem) ---------- */
html[data-theme="beauty-leaf"] .section.location, html[data-theme="beauty-leaf"] .section.contact { background: var(--surface); }
html[data-theme="beauty-leaf"] .section.location { border-top: 1px solid var(--line); padding-bottom: 0; }
html[data-theme="beauty-leaf"] .location .loc__list { gap: 0; }
html[data-theme="beauty-leaf"] .location .loc__list .section-head { margin-bottom: 2rem; }
html[data-theme="beauty-leaf"] .location .loc__dl { grid-template-columns: 80px 1fr; gap: 1rem 0; font-size: .95rem; margin-bottom: 1.5rem; }
html[data-theme="beauty-leaf"] .location .loc__dl dd { color: var(--ink); }
html[data-theme="beauty-leaf"] .location .loc__off { color: var(--muted); }
html[data-theme="beauty-leaf"] .location .loc__cta { gap: .5rem; }

html[data-theme="beauty-leaf"] .contact .contact__grid { display: block; }
html[data-theme="beauty-leaf"] .contact .section-head p { display: none; } /* 시안에 없는 안내 문장 */
html[data-theme="beauty-leaf"] .contact .form { max-width: none; gap: 1.5rem; }
html[data-theme="beauty-leaf"] .contact .form label { gap: .2rem; font-size: .9rem; font-weight: 400; }
html[data-theme="beauty-leaf"] .contact .form label > span:first-child { font-family: var(--font-serif); font-size: .9rem; color: var(--ink-2); }
html[data-theme="beauty-leaf"] .contact .form input:not([type=checkbox]), html[data-theme="beauty-leaf"] .contact .form textarea {
  min-height: auto; padding: .5rem 0; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: transparent;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
}
html[data-theme="beauty-leaf"] .contact .form input:not([type=checkbox]):focus, html[data-theme="beauty-leaf"] .contact .form textarea:focus { border-bottom-width: 2px; border-color: var(--line-dark); }
html[data-theme="beauty-leaf"] .contact .form textarea { min-height: 80px; }
html[data-theme="beauty-leaf"] .contact .form input::placeholder { color: transparent; } /* 시안 입력칸은 비어 있음 */
html[data-theme="beauty-leaf"] .contact .consent { padding: 1rem; border: 1px solid var(--line); background: var(--bg); font-size: .85rem; }
html[data-theme="beauty-leaf"] .contact .consent__check span { font-family: var(--font-sans); color: var(--ink); }
html[data-theme="beauty-leaf"] .contact .form__actions { margin-top: 1rem; }
html[data-theme="beauty-leaf"] .contact .contact__phone { font-family: var(--font-en); font-size: 1.2rem; color: var(--ink); }

@media (min-width: 1024px) {
  /* 시안 .bottom-split: 오시는 길 | 문의가 한 띠. main을 4트랙 격자로, 두 섹션은 subgrid로 가운데 1136px 안에 */
  html[data-theme="beauty-leaf"] main { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 568px) minmax(0, 568px) minmax(var(--gutter), 1fr); }
  html[data-theme="beauty-leaf"] main > * { grid-column: 1 / -1; min-width: 0; }
  html[data-theme="beauty-leaf"] main > .location { grid-column: 1 / 3; }
  html[data-theme="beauty-leaf"] main > .contact { grid-column: 3 / 5; border-top: 1px solid var(--line); }
  html[data-theme="beauty-leaf"] main > .location, html[data-theme="beauty-leaf"] main > .contact { display: grid; grid-template-columns: subgrid; padding-block: 4rem; }
  html[data-theme="beauty-leaf"] main > .location > .container { grid-column: 2; width: auto; margin: 0 3rem 0 0; }
  html[data-theme="beauty-leaf"] main > .contact > .container { grid-column: 1; width: auto; margin: 0 0 0 3rem; }
}

/* ---------- 푸터: 먹색, Bodoni 상호, 흐린 사업자 정보, 아래 가는 선 + 링크 | © ---------- */
html[data-theme="beauty-leaf"] .footer { border-top: 0; padding: 4rem 0 2rem; background: var(--ink); color: var(--bg); font-size: .85rem; }
html[data-theme="beauty-leaf"] .footer .footer__grid { grid-template-columns: 1fr; gap: 0; }
html[data-theme="beauty-leaf"] .footer .footer__brand strong { display: block; margin-bottom: 1rem; font-family: var(--font-en); font-size: 1.5rem; font-weight: 400; color: var(--bg); }
html[data-theme="beauty-leaf"] .footer .footer__brand p { display: none; } /* 시안 푸터에 한 줄 소개 없음 */
html[data-theme="beauty-leaf"] .footer .footer__biz { order: 2; margin-bottom: 2rem; color: var(--footer-ink); line-height: 1.8; font-size: .85rem; }
html[data-theme="beauty-leaf"] .footer .footer__links { order: 3; gap: .25rem 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
html[data-theme="beauty-leaf"] .footer .footer__links a { color: var(--footer-ink); }
html[data-theme="beauty-leaf"] .footer .footer__links a:hover { color: var(--bg); }
html[data-theme="beauty-leaf"] .footer .footer__copy { order: 4; margin: 0; padding-top: .5rem; color: var(--footer-ink); font-size: .85rem; }
@media (min-width: 768px) {
  html[data-theme="beauty-leaf"] .footer .footer__grid { grid-template-columns: 1fr auto; }
  html[data-theme="beauty-leaf"] .footer .footer__brand, html[data-theme="beauty-leaf"] .footer .footer__biz { grid-column: 1 / -1; }
  html[data-theme="beauty-leaf"] .footer .footer__copy { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); text-align: right; }
}
html[data-theme="beauty-leaf"] .example-note { margin: 0; border-top: 0; background: var(--ink); color: var(--footer-ink); }
html[data-theme="beauty-leaf"] .mobile-bar { background: var(--surface); border-top-color: var(--line); }
html[data-theme="beauty-leaf"] .mobile-bar a.primary strong { color: var(--ink); }


/* ---------- 2026-09-29 taste-skill 병합 + 연출 — 승민 "지금 강도가 제일 좋아요, 전부 샘플 사이트" ----------
   이야기 하나: "손글씨 인사로 문을 여는 살롱" — welcome to가 써지듯 나타나고, 사진은 층마다 다른 속도로 떠다니고, 가격표 줄이 차례로 채워진다.
   공통: 첫 화면 글이 차례로 톡 떠오름 · 섹션 제목·항목·카드가 들어오면 튀어 오르듯 · 사진은 당겨졌다 제자리.
   전부 CSS(스크롤 타임라인 view(), 안 되는 브라우저는 그냥 보임) · transform·opacity·clip-path · 모션 줄이기면 멈춤. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="beauty-leaf"] .hero .hero__body > * { animation: lf-in .9s cubic-bezier(.34, 1.3, .64, 1) backwards; }
  html[data-theme="beauty-leaf"] .hero .hero__body > :nth-child(2) { animation-delay: .12s; }
  html[data-theme="beauty-leaf"] .hero .hero__body > :nth-child(3) { animation-delay: .24s; }
  html[data-theme="beauty-leaf"] .hero .hero__body > :nth-child(4) { animation-delay: .36s; }
  html[data-theme="beauty-leaf"] .hero .hero__body > :nth-child(n+5) { animation-delay: .48s; }
  @supports (animation-timeline: view()) {
    html[data-theme="beauty-leaf"] .section-head, html[data-theme="beauty-leaf"] .features .feat, html[data-theme="beauty-leaf"] .staff .person, html[data-theme="beauty-leaf"] .reviews .review, html[data-theme="beauty-leaf"] .faq__item, html[data-theme="beauty-leaf"] .loc__block, html[data-theme="beauty-leaf"] .loc__col, html[data-theme="beauty-leaf"] .pricing .plan, html[data-theme="beauty-leaf"] .plan-card, html[data-theme="beauty-leaf"] .menu .mrow, html[data-theme="beauty-leaf"] .columns__cat, html[data-theme="beauty-leaf"] .notices__list li, html[data-theme="beauty-leaf"] .case, html[data-theme="beauty-leaf"] .process .steps li, html[data-theme="beauty-leaf"] .sched__table tbody tr, html[data-theme="beauty-leaf"] .contact .form { animation: lf-up linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    html[data-theme="beauty-leaf"] .gallery img, html[data-theme="beauty-leaf"] .case img { animation: lf-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes lf-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lf-up { from { opacity: 0; transform: translateY(40px) scale(.97); } 70% { opacity: 1; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes lf-settle { from { transform: scale(1.12); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="beauty-leaf"] .hero.hero--split .hero__body::before { animation: lf-write 1.5s cubic-bezier(.65, 0, .35, 1) .2s backwards; }
  @supports (animation-timeline: view()) {
    html[data-theme="beauty-leaf"] .gallery--grid .gallery__list li:nth-child(odd) { animation: lf-drift-a linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    html[data-theme="beauty-leaf"] .gallery--grid .gallery__list li:nth-child(even) { animation: lf-drift-b linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    html[data-theme="beauty-leaf"] .menu .mrow__leader { transform-origin: left center; animation: lf-leader linear both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
  }
}
@keyframes lf-write { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }
@keyframes lf-drift-a { from { transform: translateY(50px); } to { transform: translateY(-50px); } }
@keyframes lf-drift-b { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
@keyframes lf-leader { from { transform: scaleX(0); } to { transform: none; } }

/* 사진이 당겨졌다 제자리로 오는 동안 칸 밖으로 나가 가로 스크롤을 만들지 않게 */
html[data-theme="beauty-leaf"] .gallery__list > li, html[data-theme="beauty-leaf"] .gallery .frame, html[data-theme="beauty-leaf"] .case { overflow: clip; }