/* 테마 ① 온도 커피 — Variant 시안 이식(B-10). 출처: design/variant/ondo/v1-2026-09-26.html (2026-09-26).
   시안 값 그대로: 종이 #f4f2ee · 먹 #322e2a · 흐린 글 #6b635a · 선 #e2dfd8 · 액자 흰색, Nanum Myeongjo 400/700 + Nanum Pen Script(손글씨 한 줄). 대비: 먹/종이 12.0 · 흐린 글/종이 5.3. */
/* 2026-09-27 승민 검수: 나눔명조가 본문·작은 글에서 가독성이 떨어져 교체 — 본문 Pretendard, 제목만 Noto Serif KR(명조 분위기 유지), 손글씨 한 줄은 그대로 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600&family=Nanum+Pen+Script&display=swap');
:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --ink: #322e2a;
  --ink-2: #6b635a;
  --ink-3: #6b635a;
  --line: #e2dfd8;
  --accent: #322e2a;
  --accent-ink: #f4f2ee;
  --accent-soft: #e2dfd8;
  --band: #ffffff;
  --hero-bg: #f4f2ee;
  --hero-ink: #322e2a;
  --header-bg: rgba(244, 242, 238, 0.95);
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --font-display: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  --font-script: 'Nanum Pen Script', cursive;
  --display-weight: 400;
  --display-tracking: 0;
  --step--1: 0.85rem;
  --step-0: 1rem;
  --step-1: 1.1rem;
  --step-2: 1.25rem;
  --step-3: 1.5rem;
  --step-4: 2.5rem;
  --radius: 0;
  --radius-lg: 0;
  --measure: none;
  --container: 936px; /* 시안 container 1000 - 좌우 2rem */
  --gutter: 20px;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); /* 시안 --photo-shadow */
  --photo-padding: 12px;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }

/* ---------- 바탕 · 글 ---------- */
html[data-theme="cafe-ondo"] body {
  line-height: 1.6;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}
html[data-theme="cafe-ondo"] h1, html[data-theme="cafe-ondo"] h2, html[data-theme="cafe-ondo"] h3 { line-height: 1.6; text-wrap: initial; }
html[data-theme="cafe-ondo"] .label-mono { font-family: inherit; font-size: .85rem; color: var(--ink-2); }

/* 버튼: 먹색 1px 테두리, 투명, 각지게. 호버 시 반전 */
html[data-theme="cafe-ondo"] .btn,
html[data-theme="cafe-ondo"] .hero.hero--showcase .btn,
html[data-theme="cafe-ondo"] .hero.hero--showcase .btn.ghost {
  min-height: auto; padding: .6rem 1.5rem; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font-weight: 400; font-size: .9rem; transition: all .2s ease;
}
html[data-theme="cafe-ondo"] .btn:hover, html[data-theme="cafe-ondo"] .hero.hero--showcase .btn:hover { background: var(--ink); color: var(--bg); opacity: 1; }

/* 배지: 테두리만, 흐린 글. 품절은 시안의 분홍 */
html[data-theme="cafe-ondo"] .badge { font-size: .75rem; border: 1px solid var(--line); padding: .1rem .4rem; border-radius: 2px; margin-left: .5rem; background: transparent; color: var(--ink-2); font-weight: 400; }
html[data-theme="cafe-ondo"] .badge.soldout { color: #c6a39b; border-color: #c6a39b; }

/* ---------- 공지 · 헤더 ---------- */
html[data-theme="cafe-ondo"] .notice { background: var(--ink); color: var(--bg); font-size: .85rem; letter-spacing: .05em; padding: .5rem 1rem; }
html[data-theme="cafe-ondo"] .site-header {
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  background: var(--header-bg); backdrop-filter: blur(5px); border-bottom: 1px solid var(--line);
}
html[data-theme="cafe-ondo"] .site-header .row { width: 100%; min-height: auto; padding-block: 1.25rem; justify-content: center; }
html[data-theme="cafe-ondo"] .site-header .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
html[data-theme="cafe-ondo"] .site-header nav { gap: 2rem; font-size: .9rem; }
html[data-theme="cafe-ondo"] .site-header nav a { color: var(--ink); }
html[data-theme="cafe-ondo"] .site-header nav a:hover { opacity: .6; }
html[data-theme="cafe-ondo"] .site-header .btn.header-cta { padding: .2rem .8rem; border-radius: 20px; font-size: .9rem; }
html[data-theme="cafe-ondo"] .site-header .btn.header-cta:hover { background: transparent; color: var(--ink); }
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] .site-header .row { padding-block: 2rem; justify-content: space-between; }
}

/* ---------- 첫 화면: 글 | 흰 액자 사진 + 손글씨 ---------- */
html[data-theme="cafe-ondo"] .hero.hero--showcase {
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  padding: 2.5rem 0 3.5rem; background: transparent; color: var(--ink); border-bottom: 1px solid var(--line);
}
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__body { order: 1; width: auto; margin: 0; padding: 0; gap: 0; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__body::before { content: "Ondo Coffee Roasters"; order: 0; font-size: 1.1rem; color: var(--ink-2); margin-bottom: 2rem; }
html[data-theme="cafe-ondo"] .hero.hero--showcase h1 { order: 1; font-size: 2.2rem; font-weight: 400; line-height: 1.2; margin-bottom: 1rem; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__sub { order: 2; font-size: .95rem; color: var(--ink); opacity: 1; max-width: none; margin-bottom: 2rem; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__rating { order: 3; font-size: .9rem; color: var(--ink); opacity: 1; gap: .35rem; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__rating .num { font-weight: 400; color: var(--ink); }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hours-now { order: 4; font-size: .9rem; color: var(--ink-2); opacity: 1; margin-bottom: 4rem; font-weight: 400; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__cta { order: 5; gap: 1rem; margin: 0; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media { order: 2; position: relative; padding: var(--photo-padding); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 1.5rem; }
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media img { border-radius: 0; box-shadow: none; background: #e8e5df; }
/* 시안의 손글씨 한 줄 — 디자인 요소라 CSS content로 */
html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media::after {
  content: "going to our song..."; position: absolute; z-index: 10; bottom: -20px; left: 50%;
  font-family: var(--font-script); font-size: 2rem; line-height: 1.2; color: var(--ink); opacity: .85; white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg);
}
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] .hero.hero--showcase { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 8rem 0 4rem; }
  html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__body { padding-right: 2rem; }
  html[data-theme="cafe-ondo"] .hero.hero--showcase h1 { font-size: 2.5rem; }
  html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media { margin-bottom: 0; }
  html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media::after { left: -30px; transform: rotate(-3deg); }
}

/* ---------- 섹션 공통: 위아래 8rem, 아래 1px 선, 가운데 얇은 제목 ---------- */
html[data-theme="cafe-ondo"] .section { padding-block: 4rem; border-top: 0; border-bottom: 1px solid var(--line); }
html[data-theme="cafe-ondo"] .section.location, html[data-theme="cafe-ondo"] .section.contact { border-bottom: 0; }
html[data-theme="cafe-ondo"] .section-head { display: block; text-align: center; margin-bottom: 2.5rem; }
html[data-theme="cafe-ondo"] .section-head h2 { font-size: 1.5rem; font-weight: 400; letter-spacing: .1em; }
html[data-theme="cafe-ondo"] .section-head p { max-width: none; font-size: .9rem; color: var(--ink-2); }
html[data-theme="cafe-ondo"] .menu .section-head p { margin-top: 2.5rem; }
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] .section { padding-block: 8rem; }
  html[data-theme="cafe-ondo"] .section-head { margin-bottom: 4rem; }
  html[data-theme="cafe-ondo"] .menu .section-head p { margin-top: 4rem; }
}

/* ---------- 메뉴판 2단: 시그니처·디저트 | 커피·논커피 ---------- */
html[data-theme="cafe-ondo"] .menu .columns__cat { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; }
html[data-theme="cafe-ondo"] .menu .columns__group { margin-bottom: 2rem; }
html[data-theme="cafe-ondo"] .menu .mrow__name { font-size: 1rem; }
html[data-theme="cafe-ondo"] .menu .mrow__price { font-size: 1rem; font-weight: 400; }
html[data-theme="cafe-ondo"] .menu .mrow__desc { font-size: .85rem; }
html[data-theme="cafe-ondo"] .menu .mrow .label-mono::before { content: "("; }
html[data-theme="cafe-ondo"] .menu .mrow .label-mono::after { content: ")"; }
html[data-theme="cafe-ondo"] .menu .sold-out .mrow__name, html[data-theme="cafe-ondo"] .menu .sold-out .mrow__price { color: var(--ink); text-decoration: none; }
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] .menu .columns { gap: 0 8rem; grid-auto-flow: row dense; } /* 세로는 묶음 margin 2rem만 — 시안은 열마다 독립 흐름 */
  /* 시안 배치: 왼쪽 시그니처→디저트, 오른쪽 커피→논커피 (DOM 순서는 site.json 그대로) */
  html[data-theme="cafe-ondo"] .menu .columns__group:nth-child(1) { grid-column: 1; }
  html[data-theme="cafe-ondo"] .menu .columns__group:nth-child(2), html[data-theme="cafe-ondo"] .menu .columns__group:nth-child(3) { grid-column: 2; }
  html[data-theme="cafe-ondo"] .menu .columns__group:nth-child(4) { grid-column: 1; }
}

/* ---------- 사진 4장 액자 ---------- */
html[data-theme="cafe-ondo"] .gallery--frames .gallery__list { gap: 2rem; }

/* ---------- 소개: 가운데 제목(eyebrow) + 글 3 | 사실 상자 2 ---------- */
html[data-theme="cafe-ondo"] .intro__facts { gap: 0; }
html[data-theme="cafe-ondo"] .intro__facts-eyebrow { text-align: center; font-size: 1.5rem; letter-spacing: .1em; color: var(--ink); margin-bottom: 2.5rem; }
html[data-theme="cafe-ondo"] .intro .intro__text { display: block; }
html[data-theme="cafe-ondo"] .intro .intro__text h2 { font-size: 1rem; font-weight: 400; letter-spacing: 0; margin-bottom: 1rem; }
html[data-theme="cafe-ondo"] .intro .intro__text p { color: var(--ink); font-size: 1rem; margin: 0 0 1rem; text-align: left; } /* 폰은 왼쪽 정렬, 데스크톱만 양끝 */
html[data-theme="cafe-ondo"] .intro .intro__links { margin: 2rem 0 0; gap: 1rem; text-align: left; }
html[data-theme="cafe-ondo"] .intro .intro__links a { text-decoration: underline; text-underline-offset: 4px; }
html[data-theme="cafe-ondo"] .intro .intro__box { background: rgba(255, 255, 255, .4); padding: 2rem; gap: 0; }
html[data-theme="cafe-ondo"] .intro .intro__box li { padding: 0 0 1rem; margin-bottom: 1rem; border-top: 0; border-bottom: 1px solid var(--line); font-size: .9rem; gap: 0; }
html[data-theme="cafe-ondo"] .intro .intro__box li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
html[data-theme="cafe-ondo"] .intro .intro__box strong { font-weight: 700; letter-spacing: 0; margin-bottom: .2rem; }
html[data-theme="cafe-ondo"] .intro .intro__box span { font-size: .9rem; color: var(--ink); }
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] .intro__facts-eyebrow { margin-bottom: 4rem; }
  html[data-theme="cafe-ondo"] .intro .intro__facts-grid { gap: 8rem; }
  html[data-theme="cafe-ondo"] .intro .intro__text p { text-align: justify; }
}

/* ---------- 후기: 가운데 600px, 따옴표 이탤릭, 점선 ---------- */
html[data-theme="cafe-ondo"] .reviews .section-head p { margin-top: .5rem; font-size: .85rem; }
html[data-theme="cafe-ondo"] .reviews .reviews__list { max-width: 600px; margin-inline: auto; gap: 0; }
html[data-theme="cafe-ondo"] .reviews .review { gap: .5rem; padding: 0 0 2rem; margin-bottom: 2rem; border-top: 0; border-bottom: 1px dotted var(--line); }
html[data-theme="cafe-ondo"] .reviews .review p { font-size: 1.1rem; font-style: italic; }
html[data-theme="cafe-ondo"] .reviews .review p::before, html[data-theme="cafe-ondo"] .reviews .review p::after { content: '"'; }
html[data-theme="cafe-ondo"] .reviews .review footer { text-align: right; font-size: .85rem; color: var(--ink-2); }

/* ---------- 자주 묻는 질문: 가운데 800px, "Q. " 접두 ---------- */
html[data-theme="cafe-ondo"] .faq .faq__list { max-width: 800px; margin-inline: auto; }
html[data-theme="cafe-ondo"] .faq .faq__item { margin-bottom: 2rem; }
html[data-theme="cafe-ondo"] .faq .faq__q { font-size: 1rem; line-height: 1.6; }
html[data-theme="cafe-ondo"] .faq .faq__q::before { content: "Q. "; }
html[data-theme="cafe-ondo"] .faq .faq__a { font-size: .95rem; padding-left: 1.5rem; }

/* ---------- 오시는 길 | 문의하기: 데스크톱에서 한 줄에 두 칸 ---------- */
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] main { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 468px) minmax(0, 468px) minmax(var(--gutter), 1fr); }
  html[data-theme="cafe-ondo"] main > * { grid-column: 1 / -1; }
  html[data-theme="cafe-ondo"] main > .location { grid-column: 2; padding-right: 4rem; }
  html[data-theme="cafe-ondo"] main > .contact { grid-column: 3; padding-left: 4rem; }
  html[data-theme="cafe-ondo"] .location .container, html[data-theme="cafe-ondo"] .contact .container { width: 100%; }
}
html[data-theme="cafe-ondo"] .location .section-head, html[data-theme="cafe-ondo"] .contact .section-head { text-align: left; margin-bottom: 2.5rem; }
html[data-theme="cafe-ondo"] .location .loc__cols { gap: 0; }
html[data-theme="cafe-ondo"] .location .loc__colgrid { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem 0; font-size: .95rem; align-items: start; }
html[data-theme="cafe-ondo"] .location .loc__col { display: contents; }
html[data-theme="cafe-ondo"] .location .loc__col h3 { grid-column: 1; font-size: .95rem; font-weight: 400; color: var(--ink-2); border: 0; padding: 0; letter-spacing: 0; }
html[data-theme="cafe-ondo"] .location .loc__col > :not(h3) { grid-column: 2; }
html[data-theme="cafe-ondo"] .location .loc__addr { display: block; }
html[data-theme="cafe-ondo"] .location .loc__addr strong { font-weight: 400; font-size: .95rem; }
html[data-theme="cafe-ondo"] .location .loc__addr span::before { content: " · "; }
html[data-theme="cafe-ondo"] .location .hours-now { font-size: .95rem; margin: 0; font-weight: 400; color: var(--ink); }
html[data-theme="cafe-ondo"] .location table { font-size: .95rem; max-width: none; }
html[data-theme="cafe-ondo"] .location th, html[data-theme="cafe-ondo"] .location td { padding: 0; border: 0; }
html[data-theme="cafe-ondo"] .location th { width: 1.6rem; font-weight: 400; }
html[data-theme="cafe-ondo"] .location tr.closed td { color: var(--ink); }
html[data-theme="cafe-ondo"] .location .loc__ways { gap: 0; font-size: .95rem; color: var(--ink); }
html[data-theme="cafe-ondo"] .location .loc__ways .hl { font-weight: 400; }
html[data-theme="cafe-ondo"] .location .loc__cta { order: 10; margin-top: 1rem; gap: .5rem; }
html[data-theme="cafe-ondo"] .location .loc__cta .btn { border: 0; padding: 0; min-height: auto; font-size: 1rem; text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="cafe-ondo"] .location .loc__cta .btn:hover { background: transparent; color: var(--ink); }
html[data-theme="cafe-ondo"] .location .loc__cta .btn + .btn::before { content: "·"; display: inline-block; margin-right: .5rem; }
@media (min-width: 900px) {
  html[data-theme="cafe-ondo"] .location .section-head, html[data-theme="cafe-ondo"] .contact .section-head { margin-bottom: 4rem; }
}

html[data-theme="cafe-ondo"] .contact .contact__grid { display: block; }
html[data-theme="cafe-ondo"] .contact .section-head p { display: none; } /* 시안에 없는 안내 문장 */
html[data-theme="cafe-ondo"] .contact .form { max-width: none; gap: 1rem; }
html[data-theme="cafe-ondo"] .contact .form label { font-weight: 400; font-size: .85rem; color: var(--ink-2); }
html[data-theme="cafe-ondo"] .contact .form input:not([type=checkbox]), html[data-theme="cafe-ondo"] .contact .form textarea { min-height: auto; padding: .8rem; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); }
html[data-theme="cafe-ondo"] .contact .form textarea { min-height: 100px; }
html[data-theme="cafe-ondo"] .contact .form input:focus, html[data-theme="cafe-ondo"] .contact .form textarea:focus { border-color: var(--ink); }
html[data-theme="cafe-ondo"] .contact .consent { border-radius: 0; background: transparent; font-size: .85rem; }
html[data-theme="cafe-ondo"] .contact .consent__check { color: var(--ink); }
html[data-theme="cafe-ondo"] .contact .form > .btn { justify-self: end; }

/* ---------- 푸터: 가운데, 작은 흐린 글 ---------- */
html[data-theme="cafe-ondo"] .footer { text-align: center; padding-block: 4rem; font-size: .8rem; color: var(--ink-2); border-top: 1px solid var(--line); }
html[data-theme="cafe-ondo"] .footer .footer__grid { gap: .3rem; }
html[data-theme="cafe-ondo"] .footer .footer__brand strong { font-size: .8rem; font-weight: 400; color: var(--ink-2); }
html[data-theme="cafe-ondo"] .footer .footer__links { justify-content: center; gap: .3rem 1rem; }
html[data-theme="cafe-ondo"] .footer .footer__copy { margin-top: 1rem; color: var(--ink-2); }
html[data-theme="cafe-ondo"] .example-note { color: var(--ink-2); }
html[data-theme="cafe-ondo"] .mobile-bar { background: var(--bg); }


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

html[data-theme="cafe-ondo"] .menu .mrow__leader { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media { animation: on-drop 1.2s cubic-bezier(.34, 1.4, .64, 1) .2s backwards; }
  html[data-theme="cafe-ondo"] .hero.hero--showcase .hero__media::after { animation: on-write 1.6s cubic-bezier(.65, 0, .35, 1) 1.2s backwards; }
  @supports (animation-timeline: view()) {
    html[data-theme="cafe-ondo"] .gallery--frames .frame { animation: on-drop linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    html[data-theme="cafe-ondo"] .gallery--frames li:nth-child(even) .frame { animation-name: on-drop2; }
    html[data-theme="cafe-ondo"] .menu .mrow__leader { animation: on-leader linear both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
  }
}
@keyframes on-drop { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } 70% { opacity: 1; transform: translateY(4px) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes on-drop2 { from { opacity: 0; transform: translateY(-40px) rotate(5deg); } 70% { opacity: 1; transform: translateY(4px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes on-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes on-leader { from { transform: scaleX(0); } to { transform: none; } }


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