/* 테마 ② 아침빵집 — Variant 시안 이식(B-10). 출처: design/variant/bakery/v1-2026-09-26.html (2026-09-26).
   시안 값 그대로: 크림 #F8F4E6 · 첫 화면 바탕 #EAE3D2 · 먹 #242220 · 흐린 글 #7A7571 · 주황 #E4863B · 연주황 #FDF2E9 · 푸터 #242220, Pretendard 800/700/600. 라운드 8·16·24, 알약 버튼. 대비: 흐린 글/크림 4.1 · 주황/흰 2.7(시안 그대로, 보고). */
:root {
  --bg: #F8F4E6;
  --surface: #FFFFFF;
  --ink: #242220;
  --ink-2: #66615C; /* 2026-09-29 taste-skill: 시안 #7A7571(크림 위 4.0:1) → 5.3:1 */
  --ink-3: #66615C;
  --line: #EAE3D2;
  --accent: #E4863B;
  --accent-ink: #231F1C; /* 2026-09-29 taste-skill: 주황 위 흰 글 2.7:1 → 먹 글 6.1:1 */
  --accent-text: #A9520F; /* 주황을 글자로 쓸 때(시각·배지) — 크림 위 5.0:1 */
  --accent-soft: #FDF2E9;
  --band: #FDF2E9;
  --hero-bg: #EAE3D2;
  --hero-ink: #242220;
  --header-bg: rgba(248, 244, 230, 0.95);
  --dark: #242220;
  --font-display: var(--font-sans);
  --display-weight: 800;
  --display-tracking: -0.02em;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 3vw, 2.5rem);
  --step-4: clamp(2.25rem, 4vw, 3.5rem);
  --radius: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --measure: none;
  --container: 1152px; /* 시안 container 1200 - 좌우 24 */
  --gutter: 20px;
  --shadow: none;
  /* 찢은 종이 가장자리(시안 .torn-edge) — 첫 화면 아래는 크림, 푸터 위는 먹 */
  --torn-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L0,20 Q4,12 12,22 T25,18 T38,24 T52,15 T65,22 T78,16 T88,25 T100,18 L100,30 Z' fill='%23F8F4E6'/%3E%3C/svg%3E");
  --torn-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L0,20 Q4,12 12,22 T25,18 T38,24 T52,15 T65,22 T78,16 T88,25 T100,18 L100,30 Z' fill='%23242220'/%3E%3C/svg%3E");
}
@media (min-width: 900px) { :root { --gutter: 24px; } }

/* ---------- 바탕 · 글 ---------- */
html[data-theme="cafe-bakery"] body { line-height: 1.6; }
html[data-theme="cafe-bakery"] h1, html[data-theme="cafe-bakery"] h2, html[data-theme="cafe-bakery"] h3, html[data-theme="cafe-bakery"] h4 { line-height: 1.3; text-wrap: initial; }
html[data-theme="cafe-bakery"] p { color: var(--ink-2); }
html[data-theme="cafe-bakery"] .prose p { color: var(--ink); } /* 처리방침·감사 페이지 본문은 시안 밖 — 읽기 대비 유지 */
html[data-theme="cafe-bakery"] .section { padding-block: 3rem; border-top: 0; }
html[data-theme="cafe-bakery"] .section-head { display: block; text-align: center; margin-bottom: 3rem; }
html[data-theme="cafe-bakery"] .section-head h2 { font-size: var(--step-3); }
html[data-theme="cafe-bakery"] .section-head p { margin-top: .5rem; color: var(--ink-2); }
@media (min-width: 900px) { html[data-theme="cafe-bakery"] .section { padding-block: 5rem; } }

/* 버튼: 주황 알약(primary) · 흰 알약(secondary). 14px 32px, 1.125rem 700 */
html[data-theme="cafe-bakery"] .btn {
  min-height: auto; padding: 14px 32px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1.125rem; white-space: nowrap;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
html[data-theme="cafe-bakery"] .btn:hover { transform: translateY(-2px); opacity: .9; }
html[data-theme="cafe-bakery"] .btn.ghost { background: var(--surface); color: var(--ink); }
html[data-theme="cafe-bakery"] .btn.ghost:hover { background: var(--accent-soft); opacity: 1; }

/* 배지(시안 .tag): 연주황 바탕 + 주황 글, 라운드 8. 품절은 회색 */
html[data-theme="cafe-bakery"] .badge { padding: 4px 10px; border-radius: var(--radius); font-size: .75rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); }
html[data-theme="cafe-bakery"] .badge.soldout { background: #F0F0F0; color: #999; }

/* ---------- 공지 · 헤더 ---------- */
html[data-theme="cafe-bakery"] .notice { background: var(--dark); color: var(--bg); }
html[data-theme="cafe-bakery"] .site-header { background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 0; }
html[data-theme="cafe-bakery"] .site-header .row { min-height: auto; padding-block: 16px; }
html[data-theme="cafe-bakery"] .site-header .logo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 800; color: var(--ink); }
/* 시안의 주황 네모 아이콘(빵 기호) — 디자인 요소라 CSS content */
html[data-theme="cafe-bakery"] .site-header .logo::before { content: ""; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 1.2rem; letter-spacing: 0; }
html[data-theme="cafe-bakery"] .site-header nav { gap: 24px; font-size: 1rem; }
html[data-theme="cafe-bakery"] .site-header nav a { font-weight: 600; color: var(--ink); transition: color .2s; }
html[data-theme="cafe-bakery"] .site-header nav a:hover { color: var(--accent); }
html[data-theme="cafe-bakery"] .site-header .btn.header-cta { padding: 8px 20px; font-size: .875rem; }

/* ---------- 첫 화면: 글 | 사진 콜라주(가로 2:1 한 장 + 정사각 두 장), 아래 찢은 가장자리 ---------- */
html[data-theme="cafe-bakery"] .hero.hero--collage {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
  padding: 3rem var(--gutter) calc(3rem + 30px); background: var(--hero-bg); color: var(--hero-ink);
}
html[data-theme="cafe-bakery"] .hero.hero--collage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: var(--torn-cream) repeat-x; background-size: 100px 30px; z-index: 3; pointer-events: none; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__body { order: 1; width: auto; max-width: 500px; margin: 0; padding: 0; gap: 0; }
html[data-theme="cafe-bakery"] .hero.hero--collage h1 { font-size: var(--step-4); line-height: 1.2; margin-bottom: 16px; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__sub { font-size: 1.125rem; color: var(--ink); max-width: none; margin-bottom: 24px; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__cta { flex-direction: column; gap: 8px; margin: 0 0 24px; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__cta .btn { width: 100%; }
/* 시안 .hero-meta: 주황 점 + 굵은 작은 글 */
html[data-theme="cafe-bakery"] .hero.hero--collage .hours-now { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--ink); }
html[data-theme="cafe-bakery"] .hero.hero--collage .hours-now::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage { order: 2; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 8px; padding: 0; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage img { border-radius: var(--radius-lg); background: #E6E0D4; transform: none; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage .c1 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 2 / 1; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage .c2, html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage .c3 { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  html[data-theme="cafe-bakery"] .hero.hero--collage {
    grid-template-columns: 1fr 1fr; gap: 80px; padding: 80px max(var(--gutter), calc((100% - var(--container)) / 2)) calc(48px + 30px);
  }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__cta { flex-direction: row; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__cta .btn { width: auto; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage { padding: 0; }
}

/* ---------- 빵 나오는 시간: 가운데 제목, 흰 카드 행(주황 시각 | 품목) ---------- */
html[data-theme="cafe-bakery"] .section.schedule { padding-block: 3rem; }
html[data-theme="cafe-bakery"] .schedule .timeline { max-width: 800px; margin-inline: auto; gap: 16px; }
html[data-theme="cafe-bakery"] .schedule .timeline li { grid-template-columns: 1fr; gap: 4px; padding: 16px; border: 0; background: var(--surface); border-radius: var(--radius-lg); align-items: center; transition: transform .2s; }
html[data-theme="cafe-bakery"] .schedule .timeline li:hover { transform: translateX(4px); }
html[data-theme="cafe-bakery"] .schedule .timeline time { font-size: 1.5rem; font-weight: 800; color: var(--accent-text); letter-spacing: var(--display-tracking); }
html[data-theme="cafe-bakery"] .schedule .timeline div { gap: 0; }
html[data-theme="cafe-bakery"] .schedule .timeline strong { font-size: 1.25rem; font-weight: 800; line-height: 1.3; letter-spacing: var(--display-tracking); margin-bottom: 4px; }
html[data-theme="cafe-bakery"] .schedule .timeline span { font-size: .875rem; color: var(--ink-2); }
@media (min-width: 900px) {
  html[data-theme="cafe-bakery"] .section.schedule { padding-block: 5rem; }
  html[data-theme="cafe-bakery"] .schedule .timeline li { grid-template-columns: 100px 1fr; gap: 16px; padding: 24px 48px; }
  html[data-theme="cafe-bakery"] .schedule .timeline time { font-size: 1.75rem; }
}

/* ---------- 우리 빵: 분류 제목(2px 밑줄) + 흰 카드 격자 ---------- */
html[data-theme="cafe-bakery"] .menu .section-head { margin-bottom: 48px; }
html[data-theme="cafe-bakery"] .menu .section-head h2 { margin-bottom: 8px; }
html[data-theme="cafe-bakery"] .menu .section-head p { margin-top: 0; }
html[data-theme="cafe-bakery"] .menu .cards { gap: 48px; }
html[data-theme="cafe-bakery"] .menu .cards__title { font-size: 1.5rem; padding-bottom: 4px; margin-bottom: 16px; }
html[data-theme="cafe-bakery"] .menu .cards__grid { gap: 24px; }
html[data-theme="cafe-bakery"] .menu .mcard { padding: 24px; border: 0; gap: 0; }
html[data-theme="cafe-bakery"] .menu .mcard__head { margin-bottom: 8px; }
html[data-theme="cafe-bakery"] .menu .mcard__name { font-size: 1.25rem; gap: 8px; }
html[data-theme="cafe-bakery"] .menu .mcard__name .badge { order: -1; margin: 0; } /* 시안은 배지가 이름 앞 */
html[data-theme="cafe-bakery"] .menu .mcard__price { font-weight: 800; color: var(--ink); }
html[data-theme="cafe-bakery"] .menu .mcard__desc { font-size: 1rem; }
html[data-theme="cafe-bakery"] .menu .sold-out .mcard__name, html[data-theme="cafe-bakery"] .menu .sold-out .mcard__price { color: var(--ink); }
@media (min-width: 900px) { html[data-theme="cafe-bakery"] .menu .cards__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

/* ---------- 가게 풍경: 흰 바탕, 4:3 사진 3열 ---------- */
html[data-theme="cafe-bakery"] .section.gallery { background: var(--surface); padding-block: 3rem; }
html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list { grid-template-columns: 1fr; gap: 16px; }
html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li { aspect-ratio: 4 / 3; }
html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list img { border-radius: var(--radius-lg); background: #E6E0D4; }
@media (min-width: 900px) {
  html[data-theme="cafe-bakery"] .section.gallery { padding-block: 5rem; }
  html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---------- 소개+후기 흰 상자 | 오시는 길 흰 상자 (시안 .info-split) ---------- */
html[data-theme="cafe-bakery"] .section.intro, html[data-theme="cafe-bakery"] .section.reviews, html[data-theme="cafe-bakery"] .section.location { padding-block: 0; }
html[data-theme="cafe-bakery"] .section.intro { padding-top: 3rem; }
html[data-theme="cafe-bakery"] .section.reviews { padding-bottom: 24px; }
html[data-theme="cafe-bakery"] .section.location { padding-bottom: 3rem; }
html[data-theme="cafe-bakery"] .intro .container, html[data-theme="cafe-bakery"] .reviews .container, html[data-theme="cafe-bakery"] .location .container { background: var(--surface); padding: 24px; }
html[data-theme="cafe-bakery"] .intro .container { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: 0; display: flow-root; } /* 마지막 문단 여백이 상자 밖으로 새지 않게 */
html[data-theme="cafe-bakery"] .reviews .container { border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding-top: 32px; }
html[data-theme="cafe-bakery"] .location .container { border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  html[data-theme="cafe-bakery"] main { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 552px) minmax(0, 552px) minmax(var(--gutter), 1fr); column-gap: 48px; grid-auto-flow: row dense; }
  html[data-theme="cafe-bakery"] main > * { grid-column: 1 / -1; }
  /* 2026-09-26 승민 검수: 후기가 5개로 늘어 왼쪽 상자만 길어지고 오른쪽이 비어 보여서 — 소개 | 오시는 길 같은 높이 한 줄, 그 아래 후기 상자를 두 칸 폭으로 */
  html[data-theme="cafe-bakery"] main > .intro { grid-column: 2; }
  html[data-theme="cafe-bakery"] main > .reviews { grid-column: 2 / 4; }
  html[data-theme="cafe-bakery"] main > .location { grid-column: 3; }
  html[data-theme="cafe-bakery"] .section.intro, html[data-theme="cafe-bakery"] .section.location { display: flex; flex-direction: column; padding-top: 5rem; }
  html[data-theme="cafe-bakery"] .section.intro > .container, html[data-theme="cafe-bakery"] .section.location > .container { flex: 1; }
  html[data-theme="cafe-bakery"] .section.reviews { padding-top: 48px; padding-bottom: 5rem; }
  html[data-theme="cafe-bakery"] .section.location { padding-bottom: 0; }
  html[data-theme="cafe-bakery"] .intro .container, html[data-theme="cafe-bakery"] .reviews .container, html[data-theme="cafe-bakery"] .location .container { width: 100%; padding: 48px; border-radius: var(--radius-lg); }
  html[data-theme="cafe-bakery"] .intro .container { padding-bottom: 32px; }
  html[data-theme="cafe-bakery"] .reviews .reviews__list { grid-template-columns: 1fr 1fr; }
  html[data-theme="cafe-bakery"] .reviews .review:first-child:nth-last-child(odd) { grid-column: 1 / -1; } /* 홀수 개면 첫 후기를 두 칸 폭으로 — 빈칸 없이 */
}
/* 소개: 시안은 상자 제목이 "아침빵집 소개"(JSON eyebrow) 하나 — 제목(h2)은 화면에서 숨기고 접근성용으로만 둔다(보고) */
html[data-theme="cafe-bakery"] .intro .intro__grid { display: flow-root; } /* block이면 위 flow-root를 덮어 마지막 문단 여백이 새서 폰에서 소개|후기 상자 사이에 띠가 생긴다 */
html[data-theme="cafe-bakery"] .intro .intro__media { display: none; } /* 시안 소개 상자에는 사진이 없다(보고) */
html[data-theme="cafe-bakery"] .intro .intro__text { display: block; }
html[data-theme="cafe-bakery"] .intro .eyebrow { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: var(--display-tracking); line-height: 1.3; color: var(--ink); margin-bottom: 24px; }
html[data-theme="cafe-bakery"] .intro .intro__text h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-theme="cafe-bakery"] .intro .intro__text p { color: var(--ink); margin: 0 0 16px; }
/* 후기: 작은 제목(시안 h4) + 크림 카드, 이탤릭 따옴표, 오른쪽 작성자 */
html[data-theme="cafe-bakery"] .reviews .section-head { text-align: left; margin-bottom: 16px; }
html[data-theme="cafe-bakery"] .reviews .section-head h2 { font-size: 1rem; font-weight: 800; }
html[data-theme="cafe-bakery"] .reviews .section-head p { font-size: .75rem; margin-top: .25rem; }
html[data-theme="cafe-bakery"] .reviews .reviews__list { max-width: none; gap: 16px; }
html[data-theme="cafe-bakery"] .reviews .review { gap: 4px; padding: 16px; border: 0; background: var(--bg); border-radius: var(--radius-md); }
html[data-theme="cafe-bakery"] .section.reviews .reviews__list .review p { font-size: 1rem; font-style: italic; color: var(--ink-2); }
html[data-theme="cafe-bakery"] .reviews .review p::before, html[data-theme="cafe-bakery"] .reviews .review p::after { content: '"'; }
html[data-theme="cafe-bakery"] .reviews .review footer { font-size: .75rem; font-weight: 700; text-align: right; color: var(--ink); }
/* 2026-09-29 taste-skill: 작성자 앞 em dash(AI 티) 삭제 */
/* 오시는 길: 제목 1.5rem + 주황 점 목록(주소 · 교통 · 주차 · 영업시간 요약) + 테두리 알약 버튼. 표·지도 자리는 시안에 없음 */
html[data-theme="cafe-bakery"] .location .loc__grid { display: block; }
html[data-theme="cafe-bakery"] .location .loc__info { display: block; }
html[data-theme="cafe-bakery"] .location .section-head { text-align: left; margin-bottom: 24px; }
html[data-theme="cafe-bakery"] .location .section-head h2 { font-size: 1.5rem; }
html[data-theme="cafe-bakery"] .section.location .loc__addr { display: block; position: relative; padding-left: 16px; font-size: 1rem; color: var(--ink); }
html[data-theme="cafe-bakery"] .section.location .loc__addr::before, html[data-theme="cafe-bakery"] .section.location .loc__addr > .small::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
html[data-theme="cafe-bakery"] .section.location .loc__addr > strong { display: inline; font-size: 1rem; font-weight: 400; }
html[data-theme="cafe-bakery"] .section.location .loc__addr > span:not(.small) { display: inline; }
html[data-theme="cafe-bakery"] .section.location .loc__addr > span:not(.small)::before { content: " · "; }
html[data-theme="cafe-bakery"] .section.location .loc__addr > .small { display: block; position: relative; margin-top: 8px; font-size: 1rem; color: var(--ink); font-weight: 400; }
html[data-theme="cafe-bakery"] .section.location .loc__addr > .small::before { left: -16px; }
html[data-theme="cafe-bakery"] .location .loc__hours { display: block; }
html[data-theme="cafe-bakery"] .location .loc__hours .hours-now, html[data-theme="cafe-bakery"] .location table, html[data-theme="cafe-bakery"] .location .loc__map { display: none; }
html[data-theme="cafe-bakery"] .section.location .loc__summary { font-size: 1rem; color: var(--ink); padding-left: 16px; position: relative; margin-top: 8px; }
html[data-theme="cafe-bakery"] .location .loc__summary::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
html[data-theme="cafe-bakery"] .location .loc__cta { gap: 8px; margin-top: 24px; }
html[data-theme="cafe-bakery"] .location .loc__cta .btn, html[data-theme="cafe-bakery"] .location .loc__cta .btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 8px 16px; font-size: .875rem; font-weight: 700; }

/* ---------- 식빵 예약·문의: 연주황 바탕, 가운데 흰 상자 600px ---------- */
html[data-theme="cafe-bakery"] .section.contact { background: var(--accent-soft); padding-block: 3rem; }
html[data-theme="cafe-bakery"] .contact .contact__grid { display: block; }
html[data-theme="cafe-bakery"] .contact .section-head p { display: none; } /* 시안에 없는 안내 문장 */
html[data-theme="cafe-bakery"] .contact .form { max-width: 600px; margin-inline: auto; background: var(--surface); padding: 24px; border-radius: var(--radius-lg); gap: 24px; }
html[data-theme="cafe-bakery"] .contact .form label { gap: 4px; font-size: .875rem; font-weight: 700; color: var(--ink); }
html[data-theme="cafe-bakery"] .contact .form input:not([type=checkbox]), html[data-theme="cafe-bakery"] .contact .form textarea { min-height: auto; padding: 16px; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--bg); font-size: 1rem; }
html[data-theme="cafe-bakery"] .contact .form input:focus, html[data-theme="cafe-bakery"] .contact .form textarea:focus { border-color: var(--accent); }
html[data-theme="cafe-bakery"] .contact .form textarea { min-height: 120px; }
html[data-theme="cafe-bakery"] .contact .consent { background: var(--bg); border: 0; border-radius: var(--radius-md); font-size: .875rem; }
html[data-theme="cafe-bakery"] .contact .form > .btn { width: 100%; margin-top: -8px; }
@media (min-width: 900px) {
  html[data-theme="cafe-bakery"] .section.contact { padding-block: 5rem; }
  html[data-theme="cafe-bakery"] .contact .form { padding: 48px; }
}

/* ---------- 푸터: 먹색, 위에 찢은 가장자리, 가운데 정렬 ---------- */
html[data-theme="cafe-bakery"] .footer { position: relative; background: var(--dark); color: rgba(255, 255, 255, .7); text-align: center; padding: 48px 0 80px; margin-top: 15px; border-top: 0; font-size: .875rem; }
html[data-theme="cafe-bakery"] .footer::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 30px; background: var(--torn-dark) repeat-x; background-size: 100px 30px; pointer-events: none; }
html[data-theme="cafe-bakery"] .footer .footer__grid { gap: 16px; justify-items: center; }
html[data-theme="cafe-bakery"] .footer .footer__brand strong { display: block; color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: var(--display-tracking); }
html[data-theme="cafe-bakery"] .footer .footer__brand p { color: rgba(255, 255, 255, .7); }
html[data-theme="cafe-bakery"] .footer .footer__links { justify-content: center; gap: 16px; }
html[data-theme="cafe-bakery"] .footer .footer__links a:hover { color: #fff; }
html[data-theme="cafe-bakery"] .footer .footer__biz, html[data-theme="cafe-bakery"] .footer .footer__copy { color: rgba(255, 255, 255, .7); }
html[data-theme="cafe-bakery"] .example-note { border-top: 0; background: var(--dark); color: rgba(255, 255, 255, .7); }
html[data-theme="cafe-bakery"] .mobile-bar { background: var(--surface); }


/* ---------- 2026-09-29 taste-skill 병합(유지형) + 연출 — 승민 "콘셉트는 그대로, 유니크하고 이쁘게" ----------
   다이얼: VARIANCE 5 · MOTION 5 · DENSITY 4. 이야기 하나: "아침에 빵이 부풀어 나온다".
   · 로고: 이모지 → 식빵 모양 그림(세 봉우리 윗면)
   · 첫 화면: 사진 세 장이 반죽처럼 살짝 부풀며 차례로 · 제목·버튼 떠오름(한 번)
   · 빵 나오는 시간: 스크롤하면 행이 오븐에서 나오듯 차례로 밀려 나오고 시각 숫자가 커진다
   · 우리 빵·가게 풍경: 들어오면 떠오름, 사진은 살짝 당겨졌다가 제자리 · 마우스 올리면 사진 확대
   전부 transform·opacity, 스크롤 이벤트 없음(CSS 스크롤 타임라인, 안 되는 브라우저는 그냥 다 보임). 모션 줄이기면 움직임 없음. */
html[data-theme="cafe-bakery"] .site-header .logo::before {
  -webkit-mask: none; mask: none;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 25V15.5a4 4 0 0 1 1.2-7.8 4.4 4.4 0 0 1 7.8-2 4.4 4.4 0 0 1 7.8 2A4 4 0 0 1 25 15.5V25z' fill='%23231F1C'/%3E%3C/svg%3E") center / 22px no-repeat;
}
html[data-theme="cafe-bakery"] .menu .badge.soldout { color: var(--ink-2); background: var(--bg); } /* 품절 배지 #999/#F0F0F0 2.5:1 → 5.3:1 */
html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li { overflow: hidden; border-radius: var(--radius-lg); }
html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li:hover img { transform: scale(1.04); } }

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage img { animation: bk-proof 1.1s cubic-bezier(.16, 1, .3, 1) backwards; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage .c1 { animation-delay: .1s; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage .c2 { animation-delay: .3s; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage .c3 { animation-delay: .45s; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__body > * { animation: bk-up .8s cubic-bezier(.16, 1, .3, 1) backwards; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__body > :nth-child(2) { animation-delay: .12s; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__body > :nth-child(3) { animation-delay: .24s; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__body > :nth-child(n+4) { animation-delay: .36s; }
  @supports (animation-timeline: view()) {
    html[data-theme="cafe-bakery"] .schedule .timeline li { animation: bk-oven linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    html[data-theme="cafe-bakery"] .schedule .timeline time { display: inline-block; transform-origin: left center; animation: bk-tick linear both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
    html[data-theme="cafe-bakery"] .menu .mcard, html[data-theme="cafe-bakery"] .menu .cards__title, html[data-theme="cafe-bakery"] .section-head { animation: bk-up linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li { animation: bk-up linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li img { animation: bk-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes bk-proof { from { opacity: 0; transform: translateY(18px) scale(.94); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } to { opacity: 1; transform: none; } }
@keyframes bk-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bk-oven { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes bk-tick { from { transform: scale(.82); } to { transform: none; } }
@keyframes bk-settle { from { transform: scale(1.12); } to { transform: none; } }

/* ---------- 2026-09-29 연출 2차 — 승민 "애니메이팅한 느낌이 더 있었으면" ----------
   · 첫 화면: 식빵 사진 위로 김이 천천히 피어오름(계속, 아주 옅게)
   · 첫 화면 아래 띠: 빵 나오는 시각이 가로로 흘러감(계속) — 시간표로 이어지는 입구
   · 빵 나오는 시간: 행이 더 멀리서 밀려 나오고, 시각 숫자가 톡 튀어나옴
   · 우리 빵: 카드가 줄마다 차례로 톡 · 가게 풍경: 칸마다 속도가 달라 겹겹이 움직임(시차)
   모션 줄이기면 전부 멈춘 모습. */
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage { position: relative; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage::before,
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none; opacity: 0;
  width: 90px; height: 140px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  filter: blur(6px);
}
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage::before { left: 38%; top: 2%; }
html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage::after { left: 58%; top: 6%; width: 70px; height: 120px; }
html[data-theme="cafe-bakery"] .section.schedule { position: relative; overflow: hidden; }
html[data-theme="cafe-bakery"] .section.schedule::before {
  content: "07:30  \00B7  09:00  \00B7  11:00  \00B7  14:00  \00B7  16:30  \00B7  07:30  \00B7  09:00  \00B7  11:00  \00B7  14:00  \00B7  16:30  \00B7  07:30  \00B7  09:00  \00B7  11:00  \00B7  14:00  \00B7  16:30  \00B7  " / "";
  display: inline-block; white-space: pre; margin: -1.5rem 0 3rem; font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(169, 82, 15, .35);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage::before { animation: bk-steam 5.5s ease-in-out 1.2s infinite; }
  html[data-theme="cafe-bakery"] .hero.hero--collage .hero__collage::after { animation: bk-steam 6.5s ease-in-out 2.8s infinite; }
  html[data-theme="cafe-bakery"] .section.schedule::before { animation: bk-marquee 28s linear infinite; }
  html[data-theme="cafe-bakery"] .schedule .timeline li:hover { transform: translateX(6px); }
  @supports (animation-timeline: view()) {
    html[data-theme="cafe-bakery"] .schedule .timeline li { animation-name: bk-oven2; }
    html[data-theme="cafe-bakery"] .schedule .timeline time { animation-name: bk-pop; animation-range: entry 40% cover 40%; }
    html[data-theme="cafe-bakery"] .menu .mcard { animation-name: bk-card; }
    html[data-theme="cafe-bakery"] .menu .mcard:nth-child(2) { animation-range: entry 10% entry 90%; }
    html[data-theme="cafe-bakery"] .menu .mcard:nth-child(3) { animation-range: entry 20% entry 100%; }
    html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li:nth-child(3n+2) { animation: bk-drift-a linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li:nth-child(3n+1), html[data-theme="cafe-bakery"] .section.gallery.gallery--grid .gallery__list li:nth-child(3n) { animation: bk-drift-b linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes bk-steam { 0% { opacity: 0; transform: translateY(20px) scale(.8); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.3) rotate(6deg); } }
@keyframes bk-marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes bk-oven2 { from { opacity: 0; transform: translateX(-80px) rotate(-1.5deg); } 70% { opacity: 1; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes bk-pop { from { transform: scale(.5); } 70% { transform: scale(1.12); } to { transform: none; } }
@keyframes bk-card { from { opacity: 0; transform: translateY(40px) scale(.94); } 70% { opacity: 1; transform: translateY(-4px) scale(1.01); } to { opacity: 1; transform: none; } }
@keyframes bk-drift-a { from { transform: translateY(60px); } to { transform: translateY(-60px); } }
@keyframes bk-drift-b { from { transform: translateY(20px); } to { transform: translateY(-20px); } }