/* 테마 · 오후 사진관 (홈페이지형 4페이지) — Variant 시안 이식(B-10).
   출처: design/variant/ohu/home.html(page-home · page-gallery · page-booking 한 파일, 2026-09-27 승민 결 C 매거진). 한 파일의 세 화면을 실제 페이지로 나눴다.
   시안 값 그대로: 바탕 #050505 · 글 흰색 · 강조 빨강 #FF2A2A(제목 밑줄·번호·메뉴 밑줄) · 선 흰 20% / 10% · 모서리 0 · Pretendard ·
   12칸 세로 격자선(흰 10%, 30%) 고정 · 사진은 흑백(대비 1.1, 밝기 .8), 마우스를 올리면 컬러 · 헤더 위→아래 흐려지는 검정 + 블러 8px.
   첫 화면 상호 clamp(6rem, 15vw, 16rem) / 0.85. 테스트 예외: backdrop-filter·그라데이션(시안 헤더) — tests 제외 목록. */
@import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap');
:root {
  --bg: #050505;
  --surface: #0b0b0b;
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.6);
  --line: rgba(255, 255, 255, 0.2);
  --accent: #FF2A2A;
  --accent-ink: #050505;
  --accent-soft: #111111;
  --hero-bg: #050505;
  --hero-ink: #ffffff;
  --header-bg: rgba(5, 5, 5, .95);
  --band: #050505;
  --display-weight: 700;
  --display-tracking: -0.04em;
  --radius: 0;
  --radius-lg: 0;
  --container: 1360px;
  --gutter: 20px;
}
html[data-theme="studio-ohu"] { color-scheme: dark; }
html[data-theme="studio-ohu"] body { background: var(--bg); color: var(--ink); }
/* 12칸 세로 격자선: 바탕에 고정(폰 4칸) */
html[data-theme="studio-ohu"] body::before { content: ""; position: fixed; inset: 0 20px; pointer-events: none; z-index: 0; opacity: .3;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 25%); border-right: 1px solid rgba(255,255,255,.1); }
@media (min-width: 900px) { html[data-theme="studio-ohu"] body::before { inset: 0 40px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px calc(100% / 12)); } }
html[data-theme="studio-ohu"] main, html[data-theme="studio-ohu"] .footer { position: relative; z-index: 1; }
@media (min-width: 900px) { html[data-theme="studio-ohu"] { --gutter: 40px; } }
html[data-theme="studio-ohu"] .section + .section { border-top: 1px solid rgba(255,255,255,.1); }
html[data-theme="studio-ohu"] .section { padding-block: 72px; }
html[data-theme="studio-ohu"] .section-head { padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
html[data-theme="studio-ohu"] .section-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; }
html[data-theme="studio-ohu"] .section-more { color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
html[data-theme="studio-ohu"] .section-more::after { content: ""; display: inline-block; width: 1.5rem; height: 1px; margin-left: .5rem; vertical-align: middle; background: currentColor; } /* 2026-09-29: 화살표 글리프(AI 티) → 선 */

/* 헤더: 위에서 아래로 흐려지는 검정 + 블러, 로고 17 700, 메뉴 13 · 현재 메뉴 빨간 밑줄, 흰 선 버튼 */
html[data-theme="studio-ohu"] .site-header { position: sticky; background: linear-gradient(to bottom, rgba(5,5,5,.95) 0%, rgba(5,5,5,0) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1); }
html[data-theme="studio-ohu"] .site-header .row { min-height: 72px; }
html[data-theme="studio-ohu"] .site-header .logo { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
html[data-theme="studio-ohu"] .site-header nav { gap: 28px; font-size: 13px; }
html[data-theme="studio-ohu"] .site-header nav a { position: relative; color: var(--ink-2); }
html[data-theme="studio-ohu"] .site-header nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--accent); transition: width .3s ease; }
html[data-theme="studio-ohu"] .site-header nav a:hover::after, html[data-theme="studio-ohu"] .site-header nav a[aria-current="page"]::after { width: 100%; }
html[data-theme="studio-ohu"] .site-header nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
html[data-theme="studio-ohu"] .site-header .header-cta { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 10px 20px; font-size: 13px; }

/* 버튼: 네모, 흰 바탕 검정 글 / 투명 + 흰 선 */
html[data-theme="studio-ohu"] .btn { border-radius: 0; background: #fff; color: #050505; border: 1px solid #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; padding: 16px 32px; }
html[data-theme="studio-ohu"] .btn.ghost { background: transparent; color: #fff; border-color: var(--line); }

/* 첫 화면: 흑백 사진(밝기 .6) 위 거대한 상호, 빨간 선, 설명 | 버튼 오른쪽 */
html[data-theme="studio-ohu"] .hero--fullbleed { min-height: 88vh; align-items: end; }
html[data-theme="studio-ohu"] .hero--fullbleed .hero__media img { filter: grayscale(100%) contrast(1.1) brightness(.45); }
html[data-theme="studio-ohu"] .hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); }
html[data-theme="studio-ohu"] .hero__body { max-width: none; padding-block: 120px 64px; gap: 0; }
html[data-theme="studio-ohu"] .hero--fullbleed h1 { font-family: 'Song Myung', serif; font-size: clamp(3.2rem, 7.6vw, 7rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em; max-width: 3.2em; text-shadow: 0 10px 40px rgba(0,0,0,.5); padding-bottom: 28px; margin-bottom: 28px; border-bottom: 2px solid var(--accent); width: fit-content; } /* 2026-09-27 승민: 시안의 16rem 굵은 고딕 → 크기 줄이고 서체 송명(붓 느낌 명조)으로 */
html[data-theme="studio-ohu"] .hero--fullbleed .hero__sub { max-width: none; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
html[data-theme="studio-ohu"] .hero__lead { display: inline-block; font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: #fff; margin-bottom: 16px; }
html[data-theme="studio-ohu"] .hero__sub br { display: none; }
html[data-theme="studio-ohu"] .hero__sub .hero__lead, html[data-theme="studio-ohu"] .hero__sub .hero__sub-line { display: block; }
html[data-theme="studio-ohu"] .hero__cta { gap: 12px; margin-top: 32px; }
html[data-theme="studio-ohu"] .hero--fullbleed .btn.on-dark { background: #fff; color: #050505; border-color: #fff; }
html[data-theme="studio-ohu"] .hero--fullbleed .btn.ghost.on-dark { background: rgba(5,5,5,.4); color: #fff; border-color: rgba(255,255,255,.5); }
html[data-theme="studio-ohu"] .hero__cta .btn.ghost { order: -1; }
html[data-theme="studio-ohu"] .hero .hours-now { display: none; }
@media (min-width: 900px) {
  html[data-theme="studio-ohu"] .hero__body { grid-template-columns: 1fr auto; column-gap: 40px; align-items: end; }
  html[data-theme="studio-ohu"] .hero__body h1 { grid-column: 1 / -1; }
  html[data-theme="studio-ohu"] .hero__cta { margin-top: 0; }
}

/* 촬영 상품: 네모 선 상자 3칸, 이름 20 700, 항목 13 흐림, 가격 아래 */
html[data-theme="studio-ohu"] .plan-cards { gap: 16px; }
html[data-theme="studio-ohu"] .plan-card { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 32px; min-height: 280px; }
html[data-theme="studio-ohu"] .plan-card h3 { font-size: 20px; font-weight: 700; }
html[data-theme="studio-ohu"] .plan-card .plan__items { font-size: 13px; color: var(--ink-3); gap: 2px; align-content: start; }
html[data-theme="studio-ohu"] .plan-card .plan__price { font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0; }

/* 갤러리 미리보기: 가로로 넘기는 사진 280/400px, 흑백 → 올리면 컬러 */
html[data-theme="studio-ohu"] .gallery--scroll .gallery__list { gap: 16px; scrollbar-width: none; }
html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li { flex: 0 0 280px; aspect-ratio: 4 / 5; }
@media (min-width: 900px) { html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li { flex-basis: 400px; } }
html[data-theme="studio-ohu"] .gallery__list img, html[data-theme="studio-ohu"] .case img { filter: grayscale(100%) contrast(1.1) brightness(.8); transition: filter .5s ease; }
html[data-theme="studio-ohu"] .gallery__list li:hover img, html[data-theme="studio-ohu"] .case:hover img { filter: none; }

/* 예약 순서 | 후기: 넓은 화면에서 한 줄 두 칸 */
html[data-theme="studio-ohu"] .process .section-head h2::before, html[data-theme="studio-ohu"] .reviews .section-head h2::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 14px; vertical-align: middle; background: var(--accent); }
html[data-theme="studio-ohu"] .reviews .section-head h2::before { background: #fff; }
html[data-theme="studio-ohu"] .process .section-head, html[data-theme="studio-ohu"] .reviews .section-head { border-bottom: 0; padding-bottom: 0; }
html[data-theme="studio-ohu"] .process .steps { grid-template-columns: 1fr 1fr; gap: 16px; }
html[data-theme="studio-ohu"] .process .steps li { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 24px; gap: 6px; }
html[data-theme="studio-ohu"] .process .steps .label-mono { font-size: 22px; font-weight: 800; color: var(--accent); }
html[data-theme="studio-ohu"] .process .steps h3 { font-size: 15px; font-weight: 700; }
html[data-theme="studio-ohu"] .process .steps p { font-size: 12px; color: var(--ink-3); }
html[data-theme="studio-ohu"] .reviews__list { max-width: none; gap: 32px; }
html[data-theme="studio-ohu"] .reviews .review { position: relative; padding: 4px 0 4px 24px; border: 0; border-left: 1px solid var(--line); }
html[data-theme="studio-ohu"] .reviews .review p, html[data-theme="studio-ohu"] .reviews .review:first-child p { font-size: 16px; line-height: 1.6; }
html[data-theme="studio-ohu"] .review footer { font-size: 12px; color: var(--ink-3); }
html[data-theme="studio-ohu"] .review footer::before { content: ""; display: inline-block; width: 1rem; height: 1px; margin-right: .5rem; vertical-align: middle; background: currentColor; }
@media (min-width: 900px) {
  html[data-theme="studio-ohu"] main:has(> .process + .reviews) { display: flex; flex-wrap: wrap; }
  html[data-theme="studio-ohu"] main:has(> .process + .reviews) > * { flex: 1 1 100%; }
  html[data-theme="studio-ohu"] main > .process:has(+ .reviews), html[data-theme="studio-ohu"] main > .process + .reviews { flex: 1 1 50%; }
  html[data-theme="studio-ohu"] main > .process + .reviews { border-top: 1px solid rgba(255,255,255,.1); }
}

/* 서브 페이지 제목 */
html[data-theme="studio-ohu"] .page-head { padding-block: 72px 40px; }
html[data-theme="studio-ohu"] .page-head h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -0.04em; }
html[data-theme="studio-ohu"] .page-head .page-head__sub { color: var(--ink-2); white-space: pre-line; font-size: 15px; }

/* 갤러리 페이지: 칩 · 들쭉날쭉 격자(columns) + 캡션 12px */
html[data-theme="studio-ohu"] .cases__row { gap: 8px; }
html[data-theme="studio-ohu"] .chip { background: transparent; color: var(--ink-2); border: 1px solid var(--line); border-radius: 0; padding: 8px 18px; font-size: 13px; }
html[data-theme="studio-ohu"] .cases__row input:checked + .chip { background: #fff; color: #050505; border-color: #fff; }
html[data-theme="studio-ohu"] .cases--grid .cases__list { display: block; columns: 2; column-gap: 16px; }
@media (min-width: 900px) { html[data-theme="studio-ohu"] .cases--grid .cases__list { columns: 3; } }
@media (min-width: 1200px) { html[data-theme="studio-ohu"] .cases--grid .cases__list { columns: 4; } }
html[data-theme="studio-ohu"] .cases--grid .case { break-inside: avoid; margin-bottom: 16px; }
html[data-theme="studio-ohu"] .cases--grid .case img { aspect-ratio: auto; height: auto; }
html[data-theme="studio-ohu"] .section.cases .case h3 { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }

/* 예약: 선택 칸은 네모 선, 고르면 흰 바탕 · 날짜 달력 입력 */
html[data-theme="studio-ohu"] .form label > span, html[data-theme="studio-ohu"] .form__choice legend { font-size: 13px; font-weight: 700; color: #fff; }
html[data-theme="studio-ohu"] .form input:not([type=checkbox]):not([type=radio]), html[data-theme="studio-ohu"] .form textarea { background: transparent; border: 1px solid var(--line); border-radius: 0; color: #fff; color-scheme: dark; }
html[data-theme="studio-ohu"] .choice span { background: transparent; border: 1px solid var(--line); border-radius: 0; color: #fff; }
html[data-theme="studio-ohu"] .choice input:checked + span { background: #fff; color: #050505; border-color: #fff; }
html[data-theme="studio-ohu"] .form__choices { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
html[data-theme="studio-ohu"] .form > .btn { width: 100%; }
html[data-theme="studio-ohu"] .aside__box { background: transparent; border: 1px solid var(--line); }
html[data-theme="studio-ohu"] .aside__plain li { display: block; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
html[data-theme="studio-ohu"] .aside__plain strong { font-weight: 400; color: var(--ink-2); }
html[data-theme="studio-ohu"] .consent { background: transparent; border-color: var(--line); }

/* 오시는 길 · 푸터 */
html[data-theme="studio-ohu"] .footer { background: var(--bg); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
html[data-theme="studio-ohu"] .mobile-bar { background: #050505; border-top: 1px solid var(--line); }


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

html[data-theme="studio-ohu"] .hero--fullbleed .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="studio-ohu"] .hero--fullbleed .hero__media::after { animation: oh-flash .9s ease-out .25s backwards; }
  html[data-theme="studio-ohu"] .hero--fullbleed .hero__media img { animation: oh-develop 2.4s ease-out .4s backwards; }
  @supports (animation-timeline: view()) {
    html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li { animation: oh-film linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    html[data-theme="studio-ohu"] .plan-card { animation-name: oh-pop; }
    html[data-theme="studio-ohu"] .plan-card:nth-child(2) { animation-range: entry 10% entry 90%; }
    html[data-theme="studio-ohu"] .plan-card:nth-child(3) { animation-range: entry 20% entry 100%; }
  }
}
@keyframes oh-flash { from { opacity: 0; } 12% { opacity: .9; } to { opacity: 0; } }
@keyframes oh-develop { from { opacity: .15; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes oh-film { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes oh-pop { from { opacity: 0; transform: translateY(36px) scale(.94); } 70% { opacity: 1; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

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

/* ---------- 2026-09-29 연출 3차 — 승민 "오후 사진관·결 인테리어는 더 동적이고 애니메이션틱하게, 연출 많이(디자인 감각이 중요한 사이트)" ----------
   이야기: 셔터가 열리고(검은 날) → 뷰파인더 초점 틀이 맞춰지고 → 플래시 → 사진이 인화되며 상호가 아래에서 올라온다.
   스크롤: 첫 화면이 카메라에서 멀어지듯 커지며 어두워짐 · 제목은 빨간 선이 그어지며 옆으로 드러남 · 상품 카드는 인화지처럼 뒤집혀 나옴 ·
   사진 띠 위아래 필름 구멍이 스크롤 따라 흐름 · 띠 사진은 화면 가운데를 지날 때 컬러로 현상 · 갤러리 페이지 사진은 과노출 → 인화 · 맨 위 빨간 진행선.
   규칙은 같음: CSS만, transform·opacity·clip-path(+사진 filter), 모션 줄이기면 전부 없음(움직임을 위해 바꾼 선·색도 이 안에서만). */
@media (prefers-reduced-motion: no-preference) {
  /* 셔터 날(위아래 검정)이 가운데서 열림 → 플래시는 열린 직후로 */
  html[data-theme="studio-ohu"] .hero--fullbleed .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #050505; pointer-events: none; clip-path: inset(50% 0 50% 0); animation: oh-shutter 1s cubic-bezier(.7, 0, .2, 1) backwards; }
  html[data-theme="studio-ohu"] .hero--fullbleed .hero__media::after { animation-delay: .75s; }
  html[data-theme="studio-ohu"] .hero--fullbleed .hero__media img { animation-delay: .8s; }
  /* 뷰파인더 초점 틀(모서리 네 개): 크게 → 맞춰짐 → 흐리게 남음 */
  html[data-theme="studio-ohu"] .hero--fullbleed::after { content: ""; position: absolute; inset: 14% 8% 18%; z-index: 1; pointer-events: none; opacity: .45;
    background:
      linear-gradient(#fff, #fff) top left / 32px 2px no-repeat, linear-gradient(#fff, #fff) top left / 2px 32px no-repeat,
      linear-gradient(#fff, #fff) top right / 32px 2px no-repeat, linear-gradient(#fff, #fff) top right / 2px 32px no-repeat,
      linear-gradient(#fff, #fff) bottom left / 32px 2px no-repeat, linear-gradient(#fff, #fff) bottom left / 2px 32px no-repeat,
      linear-gradient(#fff, #fff) bottom right / 32px 2px no-repeat, linear-gradient(#fff, #fff) bottom right / 2px 32px no-repeat;
    animation: oh-focus 1.6s cubic-bezier(.3, 1.4, .5, 1) .5s backwards; }
  /* 상호: 아래에서 올라오며 드러남 + 빨간 밑줄이 그어짐 */
  html[data-theme="studio-ohu"] .hero--fullbleed .hero__body > h1 { position: relative; border-bottom-color: transparent; animation: oh-rise 1.1s cubic-bezier(.2, .9, .2, 1) 1s backwards; }
  html[data-theme="studio-ohu"] .hero--fullbleed h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform-origin: left; animation: oh-draw .9s cubic-bezier(.7, 0, .2, 1) 1.7s backwards; }
  html[data-theme="studio-ohu"] .hero .hero__body > :nth-child(2) { animation-delay: 1.5s; }
  html[data-theme="studio-ohu"] .hero .hero__body > :nth-child(3) { animation-delay: 1.7s; }
  /* 맨 위 빨간 진행선 */
  html[data-theme="studio-ohu"] body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
  /* 버튼·카드 손맛 */
  html[data-theme="studio-ohu"] .btn { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), background-color .25s, color .25s; }
  html[data-theme="studio-ohu"] .btn:hover { transform: translateY(-2px); }
  html[data-theme="studio-ohu"] .btn:active { transform: scale(.97); }
  html[data-theme="studio-ohu"] .plan-card { transition: border-color .3s, translate .3s cubic-bezier(.3, 1.4, .5, 1); }
  html[data-theme="studio-ohu"] .plan-card:hover { border-color: var(--accent); translate: 0 -6px; } /* translate(따로 속성): 나타나는 애니메이션의 transform과 겹치지 않게 */
  /* 서브 페이지 제목: 올라오며 드러남 */
  html[data-theme="studio-ohu"] .page-head h1 { animation: oh-rise 1s cubic-bezier(.2, .9, .2, 1) .1s backwards; }
  html[data-theme="studio-ohu"] .page-head .page-head__sub { animation: oh-in .9s ease-out .45s backwards; }

  @supports (animation-timeline: view()) {
    html[data-theme="studio-ohu"] body::after { animation: oh-progress linear both; }
    html[data-theme="studio-ohu"] body::after { animation-timeline: scroll(root); }
    /* 첫 화면이 스크롤로 빠질 때: 사진은 커지며 어두워지고, 글은 먼저 올라가며 사라짐 */
    html[data-theme="studio-ohu"] .hero--fullbleed .hero__media { animation: oh-away linear both; }
    html[data-theme="studio-ohu"] .hero--fullbleed .hero__media { animation-timeline: view(); animation-range: exit 0% exit 100%; }
    html[data-theme="studio-ohu"] .hero--fullbleed .hero__body { animation: oh-lift linear both; }
    html[data-theme="studio-ohu"] .hero--fullbleed .hero__body { animation-timeline: view(); animation-range: exit 0% exit 80%; }
    /* 섹션 제목: 옆으로 닦이듯 드러남 */
    html[data-theme="studio-ohu"] .section-head h2 { animation: oh-wipe linear both; }
    html[data-theme="studio-ohu"] .section-head h2 { animation-timeline: view(); animation-range: entry 10% entry 100%; }
    html[data-theme="studio-ohu"] .process .section-head h2::before, html[data-theme="studio-ohu"] .reviews .section-head h2::before { transform-origin: left; animation: oh-draw linear both; }
    html[data-theme="studio-ohu"] .process .section-head h2::before, html[data-theme="studio-ohu"] .reviews .section-head h2::before { animation-timeline: view(); animation-range: entry 40% cover 40%; }
    /* 촬영 상품: 인화지가 뒤집혀 나오듯 */
    html[data-theme="studio-ohu"] .plan-cards { perspective: 1200px; }
    html[data-theme="studio-ohu"] .section.pricing { overflow: clip; } /* 뒤집힐 때 카드가 원근으로 커져 폰에서 가로로 넘치지 않게 */
    html[data-theme="studio-ohu"] .plan-card { animation-name: oh-flip; transform-origin: 50% 100%; }
    /* 사진 띠: 필름 구멍이 스크롤 따라 흐름 + 사진은 차례로 흑백 → 컬러 → 흑백 */
    html[data-theme="studio-ohu"] .gallery--scroll { position: relative; overflow: clip; }
    html[data-theme="studio-ohu"] .gallery--scroll::before, html[data-theme="studio-ohu"] .gallery--scroll::after { content: ""; position: absolute; left: -20%; width: 140%; height: 10px; pointer-events: none; opacity: .5;
      background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 14px, transparent 14px 30px); animation: oh-reel linear both; }
    html[data-theme="studio-ohu"] .gallery--scroll::before, html[data-theme="studio-ohu"] .gallery--scroll::after { animation-timeline: view(); animation-range: cover 0% cover 100%; }
    html[data-theme="studio-ohu"] .gallery--scroll::before { top: 24px; }
    html[data-theme="studio-ohu"] .gallery--scroll::after { bottom: 24px; animation-direction: reverse; }
    html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li img { animation: oh-settle linear both, oh-color linear none; }
    html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li img { animation-timeline: view(), view(); animation-range: entry 0% cover 50%, cover 15% cover 85%; }
    html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li:nth-child(2) img { animation-range: entry 0% cover 50%, cover 22% cover 92%; }
    html[data-theme="studio-ohu"] .gallery--scroll .gallery__list li:nth-child(3) img { animation-range: entry 0% cover 50%, cover 29% cover 99%; }
    /* 예약 순서: 빨간 번호가 도장처럼 찍힘 */
    html[data-theme="studio-ohu"] .section.process { overflow: clip; } /* 도장이 크게 찍힐 때 폰에서 가로로 넘치지 않게 */
    html[data-theme="studio-ohu"] .process .steps .label-mono { display: inline-block; animation: oh-stamp linear both; }
    html[data-theme="studio-ohu"] .process .steps .label-mono { animation-timeline: view(); animation-range: entry 30% cover 35%; }
    /* 후기: 왼쪽 선이 위에서 아래로 그어짐 */
    html[data-theme="studio-ohu"] .reviews .review { border-left-color: transparent; }
    html[data-theme="studio-ohu"] .reviews .review::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); transform-origin: top; animation: oh-drop linear both; }
    html[data-theme="studio-ohu"] .reviews .review::before { animation-timeline: view(); animation-range: entry 0% cover 40%; }
    /* 갤러리 페이지: 사진이 과노출에서 인화되며 살짝 기울었다 바로 섬 */
    html[data-theme="studio-ohu"] .cases--grid .case { animation-name: oh-print; }
    html[data-theme="studio-ohu"] .cases--grid .case:nth-child(3n+2) { animation-range: entry 8% entry 90%; }
    html[data-theme="studio-ohu"] .cases--grid .case:nth-child(3n) { animation-range: entry 16% entry 100%; }
    html[data-theme="studio-ohu"] .cases--grid .case img { animation: oh-settle linear both, oh-expose linear none; }
    html[data-theme="studio-ohu"] .cases--grid .case img { animation-timeline: view(), view(); animation-range: entry 0% cover 50%, entry 0% cover 45%; }
  }
}
@keyframes oh-shutter { from { clip-path: inset(0 0 0 0); } 35% { clip-path: inset(0 0 0 0); } to { clip-path: inset(50% 0 50% 0); } }
@keyframes oh-focus { from { opacity: 0; transform: scale(1.3); } 45% { opacity: 1; transform: scale(.96); } 70% { opacity: 1; transform: scale(1); } to { opacity: .45; transform: scale(1); } }
@keyframes oh-rise { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes oh-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes oh-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes oh-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes oh-away { from { transform: none; opacity: 1; } to { transform: scale(1.18) translateY(8%); opacity: .35; } }
@keyframes oh-lift { from { transform: none; opacity: 1; } to { transform: translateY(-30%); opacity: 0; } }
@keyframes oh-wipe { from { clip-path: inset(0 100% -20% 0); transform: translateX(-24px); } to { clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes oh-flip { from { opacity: 0; transform: rotateX(-75deg) translateY(30px); } 70% { opacity: 1; transform: rotateX(8deg); } to { opacity: 1; transform: none; } }
@keyframes oh-reel { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes oh-color { from { filter: grayscale(100%) contrast(1.1) brightness(.8); } 40%, 60% { filter: grayscale(0%) contrast(1.05) brightness(1); } to { filter: grayscale(100%) contrast(1.1) brightness(.8); } }
@keyframes oh-stamp { from { opacity: 0; transform: scale(2.4) rotate(-12deg); } 70% { opacity: 1; transform: scale(.92) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes oh-print { from { opacity: 0; transform: translateY(50px) rotate(-3deg) scale(.96); } 75% { opacity: 1; transform: translateY(-4px) rotate(.6deg); } to { opacity: 1; transform: none; } }
@keyframes oh-expose { from { filter: grayscale(100%) brightness(2.6) contrast(.6); } to { filter: grayscale(100%) contrast(1.1) brightness(.8); } }