/* 테마 · 결 인테리어 (홈페이지형 3페이지) — Variant 시안 이식(B-10).
   출처: design/variant/gyeol/b-home.html · b-page-cases.html · b-page-quote.html (2026-09-27 승민 선택: B안).
   시안 값 그대로: 바탕 #f6f4f0(종이 결 4%) · 면 #ebe7e0 · 먹 #2a201c · 세이지 #7F8A7E(버튼·진행 띠·상담 띠, 결 8%) · 선 먹 12% ·
   제목 Noto Serif KR 400 · 본문 Pretendard 15px/1.5 · 모서리 0 · 폰 기준 한 줄 흐름, 넓은 화면에서도 글은 800px 가운데.
   2026-09-27 승민 비교(F1~F8) 후 F1·F3·F4·F5·F6·F8은 개선안, F2(세이지 색)·F7(시공 사례 페이지 칩·메타)은 시안 그대로.
   대비: 흰 글/세이지 3.7:1(버튼 14px) — 시안 그대로 옮김, 기준 4.5:1 미달이라 승민 확인 대기(tests의 대비 제외 목록). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600&display=swap');
:root {
  --bg: #f6f4f0;
  --surface: #ebe7e0;
  --ink: #2a201c;
  --ink-2: rgba(42, 32, 28, 0.7);
  --ink-3: rgba(42, 32, 28, 0.74); /* 2026-09-29 taste-skill: 60%(3.9~4.1:1) → AA */
  --line: rgba(42, 32, 28, 0.12);
  --accent: #66715F; /* 2026-09-29 taste-skill: 시안 세이지 #7F8A7E(흰 글 3.7:1) → 5.1:1 */
  --accent-ink: #ffffff;
  --accent-soft: #ebe7e0;
  --hero-bg: #66715F;
  --hero-ink: #ffffff;
  --header-bg: #f6f4f0;
  --band: #66715F;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Noto Serif KR', serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --radius: 0;
  --radius-lg: 0;
  --container: 800px;
  --gutter: 24px;
  --shadow: none;
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
html[data-theme="interior-gyeol"] body { font-size: 15px; line-height: 1.5; position: relative; }
/* 종이 결: 바탕 전체 4% multiply */
html[data-theme="interior-gyeol"] body::before { content: ""; position: fixed; inset: 0; background-image: var(--noise); opacity: .04; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
html[data-theme="interior-gyeol"] main, html[data-theme="interior-gyeol"] .site-header, html[data-theme="interior-gyeol"] .footer { position: relative; z-index: 1; }
html[data-theme="interior-gyeol"] .container { width: auto; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
html[data-theme="interior-gyeol"] .section + .section { border-top: 0; }
html[data-theme="interior-gyeol"] .section { padding-block: 64px; }
html[data-theme="interior-gyeol"] .section-head { margin-bottom: 32px; }
html[data-theme="interior-gyeol"] .section-head h2 { font-size: clamp(24px, 3.4vw, 30px); } /* 시안 22px → 2026-09-27 승민 비교 후 개선안(F3) */

/* 버튼: 모서리 0, 12px 20px, 14px 500. 세이지 바탕 / 투명 + 선 */
html[data-theme="interior-gyeol"] .btn { min-height: auto; padding: 12px 20px; border: 0; border-radius: 0; background: var(--accent); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.5; }
html[data-theme="interior-gyeol"] .btn:hover { opacity: 1; background: #6E786D; }
html[data-theme="interior-gyeol"] .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
html[data-theme="interior-gyeol"] .btn.ghost:hover { background: rgba(0,0,0,.05); }

/* 헤더: 16px 24px, 아래 선, 상호 세리프 18 600 · 넓은 화면에서 메뉴 14px 70% · 작은 세이지 버튼 */
html[data-theme="interior-gyeol"] .site-header { background: var(--bg); border-bottom: 1px solid var(--line); z-index: 100; }
html[data-theme="interior-gyeol"] .site-header .container { max-width: none; padding-inline: 24px; }
html[data-theme="interior-gyeol"] .site-header .row { min-height: 0; padding-block: 16px; }
html[data-theme="interior-gyeol"] .site-header .logo { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
html[data-theme="interior-gyeol"] .site-header nav { gap: 32px; font-size: 14px; }
html[data-theme="interior-gyeol"] .site-header nav a { color: rgba(42,32,28,.7); transition: color .2s; }
html[data-theme="interior-gyeol"] .site-header nav a:hover, html[data-theme="interior-gyeol"] .site-header nav a[aria-current="page"] { color: var(--ink); }
html[data-theme="interior-gyeol"] .site-header .header-cta { display: inline-flex; padding: 8px 16px; font-size: 13px; }
@media (max-width: 767px) { html[data-theme="interior-gyeol"] .site-header nav { gap: 20px; } } /* 시안은 폰에서 메뉴를 숨겼지만 서브 페이지로 갈 길이 없어 둘째 줄로 둔다(버그 수정, 승민 보고) */
@media (min-width: 768px) { html[data-theme="interior-gyeol"] .site-header nav { display: flex; } }

/* 첫 화면(stacked): 사진 60vh(최소 400) + 오후 햇빛 겹침, 넓은 화면은 1200 가운데 70vh. 글 48px 24px, 제목 28px/1.3 */
html[data-theme="interior-gyeol"] .hero--stacked .hero__media { position: relative; max-width: 1200px; margin-inline: auto; background: #e5e1d9; }
html[data-theme="interior-gyeol"] .hero--stacked .hero__media img { height: 60vh; min-height: 400px; }
html[data-theme="interior-gyeol"] .hero--stacked .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 230, 200, 0) 40%, rgba(255, 210, 150, 0.3) 100%); pointer-events: none; }
@media (min-width: 768px) { html[data-theme="interior-gyeol"] .hero--stacked .hero__media img { height: 70vh; } }
html[data-theme="interior-gyeol"] .hero__body { padding-block: 48px; gap: 0; }
html[data-theme="interior-gyeol"] .hero h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.25; letter-spacing: -0.03em; margin-bottom: 20px; }
/* 상호 줄: 시안은 제목과 같은 28px 세리프 → 승민 비교 후 개선안(F1) — 제목 위 작은 글줄 */
html[data-theme="interior-gyeol"] .hero .hero__eyebrow { font-family: var(--font-sans); font-size: 15px; line-height: 1.3; letter-spacing: 0; color: rgba(42,32,28,.72); margin: 0 0 12px; font-weight: 400; }
html[data-theme="interior-gyeol"] .hero__sub { font-size: 17px; line-height: 1.6; color: rgba(42,32,28,.8); max-width: none; margin-bottom: 32px; }
html[data-theme="interior-gyeol"] .hero__cta { gap: 8px; margin: 0; flex-wrap: nowrap; }
html[data-theme="interior-gyeol"] .hero__cta .btn { flex: 1; }
html[data-theme="interior-gyeol"] .hero__cta .btn.ghost { order: -1; }
html[data-theme="interior-gyeol"] .hero .hours-now { display: none; }
/* 사실 띠(F1 개선안): 15px 먹색 — 시안 13px 자간 .05em 70%, 위아래 선, 면 색, 가운데 */
html[data-theme="interior-gyeol"] .hero__stats { max-width: 800px; margin-inline: auto; padding: 20px 24px; font-size: 15px; letter-spacing: 0; color: var(--ink); background: var(--surface); border-block: 1px solid var(--line); }
html[data-theme="interior-gyeol"] .hero__stats-sep { white-space: pre; }

/* 시공 사례 목록: 사진 4:3 전체 폭(넓은 화면 800), 제목 세리프 18, 메타 13px 60%, 전체 보기 가운데 밑줄 */
html[data-theme="interior-gyeol"] .cases .container { padding-inline: 0; }
html[data-theme="interior-gyeol"] .cases .section-head, html[data-theme="interior-gyeol"] .cases__filters, html[data-theme="interior-gyeol"] .case__info { padding-inline: 24px; }
html[data-theme="interior-gyeol"] .cases__list { gap: 48px; }
html[data-theme="interior-gyeol"] .case img { background: #e5e1d9; margin-bottom: 16px; }
html[data-theme="interior-gyeol"] .case h3 { font-size: 18px; margin-bottom: 4px; }
html[data-theme="interior-gyeol"] .case__meta { font-size: 13px; color: var(--ink-3); } /* 2026-09-29: 60% → 74% */
html[data-theme="interior-gyeol"] .cases__more { padding: 32px 24px 0; }
/* 메인 사례 목록(F3 개선안): 넓은 화면 3열 1200px, 제목 20 · 메타 14px 72%. 시공 사례 페이지(grid)는 시안 그대로(F7) */
html[data-theme="interior-gyeol"] .cases--list .case h3 { font-size: 20px; }
html[data-theme="interior-gyeol"] .cases--list .case__meta { font-size: 14px; color: rgba(42,32,28,.72); }
html[data-theme="interior-gyeol"] .section.cases .cases__more { display: flex; justify-content: center; max-width: none; } /* 버그 수정: p의 65ch 제한 때문에 가운데가 아니었음 */
@media (min-width: 900px) {
  html[data-theme="interior-gyeol"] .cases--list .container { max-width: 1200px; }
  html[data-theme="interior-gyeol"] .cases--list .cases__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-inline: 24px; }
  html[data-theme="interior-gyeol"] .cases--list .case__info { padding-inline: 0; }
}
html[data-theme="interior-gyeol"] .cases__more a { font-family: var(--font-display); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
/* 칩: 6px 14px 13px, 투명 + 선, 고르면 먹 바탕 · 폰에선 한 줄 가로 스크롤 */
html[data-theme="interior-gyeol"] .cases__filters { gap: 8px; margin-bottom: 32px; }
html[data-theme="interior-gyeol"] .cases__row { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
html[data-theme="interior-gyeol"] .chip { flex: none; padding: 6px 14px; font-size: 13px; background: transparent; color: rgba(42,32,28,.7); border: 1px solid var(--line); border-radius: 0; }
html[data-theme="interior-gyeol"] .cases__row input:checked + .chip { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 진행 순서: 세이지 띠(결 8% overlay), 흰 글, 번호 세리프 24 80% | 제목 16, 줄마다 흰 20% 선 */
html[data-theme="interior-gyeol"] .process { position: relative; background: var(--accent); color: #fff; max-width: 800px; margin-inline: auto; }
html[data-theme="interior-gyeol"] .process::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .08; mix-blend-mode: overlay; pointer-events: none; }
html[data-theme="interior-gyeol"] .process .section-head h2 { color: #fff; }
html[data-theme="interior-gyeol"] .process .steps { display: flex; flex-direction: column; gap: 24px; }
html[data-theme="interior-gyeol"] .process .steps li { display: grid; grid-template-columns: 40px 1fr; align-items: start; column-gap: 16px; row-gap: 4px; padding: 0 0 24px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); border-radius: 0; }
html[data-theme="interior-gyeol"] .steps li:last-child { border-bottom: 0; padding-bottom: 0; }
html[data-theme="interior-gyeol"] .steps .label-mono { font-family: var(--font-display); font-size: 24px; line-height: 1; color: #fff; opacity: .8; }
html[data-theme="interior-gyeol"] .steps h3 { font-family: var(--font-sans); font-size: 16px; font-weight: 400; padding-top: 2px; letter-spacing: 0; }
html[data-theme="interior-gyeol"] .process .steps h3 { color: #fff; }
html[data-theme="interior-gyeol"] .process .steps p { grid-column: 2; color: rgba(255,255,255,.8); font-size: 14px; }

/* 후기: 면 색 상자 32px, 왼쪽 세이지 3px 막대, 글 15, 작성자 13 오른쪽 */
html[data-theme="interior-gyeol"] .reviews { padding-block: 64px; }
html[data-theme="interior-gyeol"] .reviews__list { gap: 24px; max-width: none; }
html[data-theme="interior-gyeol"] .review { position: relative; padding: 32px; border: 0; background: var(--surface); }
html[data-theme="interior-gyeol"] .review:first-child { padding-top: 32px; }
html[data-theme="interior-gyeol"] .review::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); }
html[data-theme="interior-gyeol"] .reviews .review p, html[data-theme="interior-gyeol"] .reviews .review:first-child p { font-size: 15px; line-height: 1.6; }
html[data-theme="interior-gyeol"] .review footer { font-size: 14px; color: rgba(42,32,28,.72); text-align: right; }
html[data-theme="interior-gyeol"] .review footer::before { content: ""; display: inline-block; width: 1rem; height: 1px; margin-right: .5rem; vertical-align: middle; background: currentColor; }

/* 상담 띠: 세이지(결 8%) 가운데, 글 세리프 18/1.4, 흰 선 버튼 · inline: 글 | 버튼 */
html[data-theme="interior-gyeol"] .cta { position: relative; padding-block: 64px; }
html[data-theme="interior-gyeol"] .cta--band { max-width: 800px; margin-inline: auto; background: var(--accent); color: #fff; }
html[data-theme="interior-gyeol"] .cta--band::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .08; mix-blend-mode: overlay; pointer-events: none; }
html[data-theme="interior-gyeol"] .cta__inner { gap: 32px; position: relative; }
html[data-theme="interior-gyeol"] .cta__text { font-family: var(--font-display); font-size: 18px; line-height: 1.4; max-width: none; }
html[data-theme="interior-gyeol"] .cta--band .btn { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; }
html[data-theme="interior-gyeol"] .cta--inline { border-top: 1px solid var(--line); }
html[data-theme="interior-gyeol"] .cta--inline .cta__text { font-size: 16px; }

/* 서브 페이지 제목: 48px 24px 32px, 제목 28, 부제 14~15px 70% */
html[data-theme="interior-gyeol"] .page-head { padding-block: 48px 32px; }
html[data-theme="interior-gyeol"] .page-head h1 { font-size: clamp(30px, 4.6vw, 40px); margin-bottom: 8px; } /* F4 개선안: 본문 제목보다 크게 */
html[data-theme="interior-gyeol"] .page-head p { font-size: 16px; line-height: 1.6; color: rgba(42,32,28,.7); margin-top: 0; }
html[data-theme="interior-gyeol"] .page-head + .section { padding-top: 0; }
html[data-theme="interior-gyeol"] .section.intro .intro__text h2 { font-size: clamp(24px, 3.4vw, 30px); }

/* 비용 표(F5 개선안): 이름 16 굵게 · 가격 22 세리프 위아래, 칸 폭 고정(260 | 항목), 항목 15px */
html[data-theme="interior-gyeol"] .section.pricing .plan { padding-block: 24px; }
html[data-theme="interior-gyeol"] .section.pricing .plan__head { display: grid; grid-template-columns: 1fr; gap: 4px; }
html[data-theme="interior-gyeol"] .section.pricing .plan__head h3 { font-size: 16px; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
html[data-theme="interior-gyeol"] .section.pricing .plan__price { font-size: 22px; font-weight: 400; }
html[data-theme="interior-gyeol"] .section.pricing .plan__items { font-size: 15px; color: rgba(42,32,28,.8); }
@media (min-width: 720px) { html[data-theme="interior-gyeol"] .section.pricing .plan { grid-template-columns: 260px 1fr; } }

/* 견적 상담 폼: 라벨 13 600 60%, 칸 14px 면 색·선·모서리 0, 선택 칸 2열(고르면 세이지), 보내기 전체 폭 16px 600 */
html[data-theme="interior-gyeol"] .contact .form { max-width: none; gap: 24px; }
html[data-theme="interior-gyeol"] .form label > span, html[data-theme="interior-gyeol"] .form__choice legend { font-size: 14px; font-weight: 600; color: var(--ink); } /* F6 개선안 */
html[data-theme="interior-gyeol"] .form input:not([type=checkbox]):not([type=radio]), html[data-theme="interior-gyeol"] .form textarea { padding: 14px; min-height: 0; border: 1px solid var(--line); border-radius: 0; background: var(--surface); font-size: 15px; }
html[data-theme="interior-gyeol"] .choice span { padding: 12px; font-size: 15px; font-weight: 400; background: var(--surface); border-radius: 0; }
html[data-theme="interior-gyeol"] .choice input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-theme="interior-gyeol"] .consent { background: transparent; border: 0; padding: 0; }
html[data-theme="interior-gyeol"] .form > .btn { width: 100%; padding: 16px; font-size: 16px; font-weight: 600; }
/* 옆 상자: 가격 안내는 면 색 48px 24px(위 선) · 순서는 44px 네모 번호(세이지 선) · 연락 줄 13px */
html[data-theme="interior-gyeol"] .contact--aside .container { padding-inline: 0; }
html[data-theme="interior-gyeol"] .contact--aside .form, html[data-theme="interior-gyeol"] .contact--aside .section-head { padding-inline: 24px; }
html[data-theme="interior-gyeol"] .contact__aside { gap: 0; margin-top: 48px; }
html[data-theme="interior-gyeol"] .aside__box { padding: 48px 24px; border-top: 1px solid var(--line); }
html[data-theme="interior-gyeol"] .aside__steps { background: transparent; }
html[data-theme="interior-gyeol"] .aside__box h3 { font-size: 18px; margin-bottom: 8px; }
html[data-theme="interior-gyeol"] .aside__note { font-size: 14px; color: rgba(42,32,28,.72); margin-bottom: 32px; }
html[data-theme="interior-gyeol"] .aside__prices dl div { padding: 16px 0; font-size: 15px; }
html[data-theme="interior-gyeol"] .aside__prices dl div:last-child { border-bottom: 0; }
html[data-theme="interior-gyeol"] .aside__prices dt { font-weight: 500; }
html[data-theme="interior-gyeol"] .aside__prices dd { margin: 0; font-family: var(--font-display); }
html[data-theme="interior-gyeol"] .aside__steps ol { margin-top: 32px; gap: 24px; }
html[data-theme="interior-gyeol"] .aside__num { min-width: 44px; height: 44px; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-display); font-size: 16px; }
html[data-theme="interior-gyeol"] .aside__steps strong { display: block; font-weight: 600; margin-bottom: 2px; }
html[data-theme="interior-gyeol"] .aside__steps p { font-size: 14px; color: rgba(42,32,28,.72); }
html[data-theme="interior-gyeol"] .aside__lines { padding: 32px 24px 64px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }

/* 푸터: 면 색, 48px 24px, 12px 60% / 상호 세리프 16 */
html[data-theme="interior-gyeol"] .footer { background: var(--surface); border-top: 1px solid var(--line); padding: 48px 0; font-size: 13px; line-height: 1.8; color: rgba(42,32,28,.72); } /* F8 개선안: 시안 12px 60% */
html[data-theme="interior-gyeol"] .footer__brand strong { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
html[data-theme="interior-gyeol"] .footer__brand p { display: none; }
html[data-theme="interior-gyeol"] .example-note { position: relative; z-index: 1; }


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

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="interior-gyeol"] .hero--stacked .hero__media::after { animation: gy-sun 9s ease-in-out infinite alternate; }
  html[data-theme="interior-gyeol"] .hero--stacked .hero__media { overflow: hidden; }
  @supports (animation-timeline: view()) {
    html[data-theme="interior-gyeol"] .hero--stacked .hero__media img { animation: gy-pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    html[data-theme="interior-gyeol"] .case { animation-name: gy-curtain; }
  }
}
@keyframes gy-sun { from { opacity: .55; transform: translateX(-6%); } to { opacity: 1; transform: translateX(6%); } }
@keyframes gy-pan { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.12) translateY(4%); } }
@keyframes gy-curtain { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(30px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }


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

/* ---------- 2026-09-29 연출 3차 — 승민 "오후 사진관·결 인테리어는 더 동적이고 애니메이션틱하게, 연출 많이(디자인 감각이 중요한 사이트)" ----------
   이야기: 미닫이문이 열리며 거실이 보이고 → 블라인드 사이로 햇살 줄이 천천히 지나가고 → 제목이 한 줄씩 올라온다.
   스크롤: 맨 위 세이지 진행선(공정률) · 제목 밑 세이지 선이 그어짐 · 시공 사례는 한 칸씩 차례로 커튼 + 사진이 깊이 있게 · 진행 순서 띠는 가운데서 펼쳐지고
   번호가 넘어가듯 · 구분선이 그어짐 · 후기 막대가 자람 · 상담 띠에 햇살이 한 번 지나감 · 버튼에 빛이 스침.
   규칙은 같음: CSS만, transform·opacity·clip-path, 모션 줄이기면 전부 없음(움직임을 위해 바꾼 선·색도 이 안에서만). */
@media (prefers-reduced-motion: no-preference) {
  /* 미닫이문: 가운데에서 양옆으로 열림 */
  html[data-theme="interior-gyeol"] .hero--stacked .hero__media { animation: gy-doors 1.5s cubic-bezier(.7, 0, .2, 1) backwards; }
  /* 블라인드 햇살 줄: 사진 위로 천천히 지나감(오후 햇빛 겹침 아래) */
  html[data-theme="interior-gyeol"] .hero--stacked .hero__media::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: -30%; width: 160%; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; filter: blur(6px);
    background: repeating-linear-gradient(105deg, rgba(255, 244, 228, 0) 0 46px, rgba(255, 244, 228, .55) 46px 74px);
    animation: gy-blinds 14s ease-in-out 1.2s infinite alternate backwards; }
  /* 제목: 한 줄씩 아래에서 올라오며 드러남 */
  html[data-theme="interior-gyeol"] .hero .hero__body > h1 { animation: none; }
  html[data-theme="interior-gyeol"] .hero h1 .hero__line { display: inline-block; animation: gy-rise 1s cubic-bezier(.2, .9, .2, 1) .9s backwards; }
  html[data-theme="interior-gyeol"] .hero h1 .hero__line:nth-of-type(2) { animation-delay: 1.08s; }
  html[data-theme="interior-gyeol"] .hero .hero__body > :nth-child(1) { animation-delay: .7s; }
  html[data-theme="interior-gyeol"] .hero .hero__body > :nth-child(3) { animation-delay: 1.3s; }
  html[data-theme="interior-gyeol"] .hero .hero__body > :nth-child(4) { animation-delay: 1.45s; }
  /* 사실 띠: 항목이 차례로 */
  html[data-theme="interior-gyeol"] .hero__stats > * { display: inline-block; animation: gy-in .8s cubic-bezier(.34, 1.3, .64, 1) 1.6s backwards; }
  html[data-theme="interior-gyeol"] .hero__stats > :nth-child(3) { animation-delay: 1.72s; }
  html[data-theme="interior-gyeol"] .hero__stats > :nth-child(5) { animation-delay: 1.84s; }
  /* 맨 위 세이지 진행선 */
  html[data-theme="interior-gyeol"] body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
  /* 버튼: 누를 때 들어감 + 올리면 빛이 스침 */
  html[data-theme="interior-gyeol"] .btn { position: relative; overflow: hidden; transition: background-color .2s, transform .2s; }
  html[data-theme="interior-gyeol"] .btn:active { transform: scale(.97); }
  html[data-theme="interior-gyeol"] .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: translateX(-150%); }
  html[data-theme="interior-gyeol"] .btn:hover::after { transition: transform .7s ease; transform: translateX(300%); }
  /* 사례 사진: 올리면 천천히 가까이 */
  html[data-theme="interior-gyeol"] .case img { transition: scale 1.2s cubic-bezier(.2, .8, .2, 1); }
  html[data-theme="interior-gyeol"] .case:hover img { scale: 1.05; }
  /* 서브 페이지 제목 */
  html[data-theme="interior-gyeol"] .page-head h1 { animation: gy-rise 1s cubic-bezier(.2, .9, .2, 1) .1s backwards; }
  html[data-theme="interior-gyeol"] .page-head p { animation: gy-in .9s ease-out .4s backwards; }

  @supports (animation-timeline: view()) {
    html[data-theme="interior-gyeol"] body::after { animation: gy-progress linear both; }
    html[data-theme="interior-gyeol"] body::after { animation-timeline: scroll(root); }
    /* 제목 밑 세이지 선 */
    html[data-theme="interior-gyeol"] .section-head h2::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 14px; background: var(--accent); transform-origin: left; animation: gy-draw linear both; }
    html[data-theme="interior-gyeol"] .section-head h2::after { animation-timeline: view(); animation-range: entry 60% cover 40%; }
    html[data-theme="interior-gyeol"] .process .section-head h2::after, html[data-theme="interior-gyeol"] .cta--band .section-head h2::after { background: #fff; }
    /* 시공 사례: 세 칸이 차례로 커튼, 사진은 크게 → 제자리, 글은 뒤따라 */
    html[data-theme="interior-gyeol"] .cases__list .case:nth-child(3n+2) { animation-range: entry 10% entry 90%; }
    html[data-theme="interior-gyeol"] .cases__list .case:nth-child(3n) { animation-range: entry 20% entry 100%; }
    html[data-theme="interior-gyeol"] .case img { animation: gy-deep linear both; }
    html[data-theme="interior-gyeol"] .case img { animation-timeline: view(); animation-range: entry 0% cover 60%; }
    html[data-theme="interior-gyeol"] .case__info { animation: gy-up linear both; }
    html[data-theme="interior-gyeol"] .case__info { animation-timeline: view(); animation-range: entry 20% entry 100%; }
    /* 진행 순서 띠: 가운데서 양옆으로 펼쳐짐 · 번호는 넘어가듯 · 구분선은 그어짐 */
    html[data-theme="interior-gyeol"] .process { animation: gy-band linear both; }
    html[data-theme="interior-gyeol"] .process { animation-timeline: view(); animation-range: entry 0% entry 70%; }
    html[data-theme="interior-gyeol"] .process .steps li { position: relative; border-bottom-color: transparent; }
    html[data-theme="interior-gyeol"] .process .steps li:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.2); transform-origin: left; animation: gy-draw linear both; }
    html[data-theme="interior-gyeol"] .process .steps li:not(:last-child)::after { animation-timeline: view(); animation-range: entry 60% cover 50%; }
    html[data-theme="interior-gyeol"] .process .steps .label-mono { display: inline-block; animation: gy-flipnum linear both; }
    html[data-theme="interior-gyeol"] .process .steps .label-mono { animation-timeline: view(); animation-range: entry 20% cover 30%; }
    /* 후기: 세이지 막대가 위에서 자람 */
    html[data-theme="interior-gyeol"] .review::before { transform-origin: top; animation: gy-grow linear both; }
    html[data-theme="interior-gyeol"] .review::before { animation-timeline: view(); animation-range: entry 20% cover 45%; }
    /* 상담 띠: 가운데서 펼쳐지고 햇살이 한 번 지나감 */
    html[data-theme="interior-gyeol"] .cta--band { overflow: clip; animation: gy-band linear both; }
    html[data-theme="interior-gyeol"] .cta--band { animation-timeline: view(); animation-range: entry 0% entry 80%; }
    html[data-theme="interior-gyeol"] .cta--band::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,244,228,.22), rgba(255,255,255,0)); animation: gy-sweep linear both; }
    html[data-theme="interior-gyeol"] .cta--band::after { animation-timeline: view(); animation-range: cover 10% cover 80%; }
    /* 비용 표: 줄이 옆에서 밀려 들어옴 */
    html[data-theme="interior-gyeol"] .section.pricing .plan { animation-name: gy-slide; }
    html[data-theme="interior-gyeol"] .section.pricing .plan__price { display: inline-block; }
  }
}
@keyframes gy-doors { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes gy-blinds { from { opacity: .35; transform: translateX(-8%); } to { opacity: .9; transform: translateX(8%); } }
@keyframes gy-rise { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(55%); } to { opacity: 1; clip-path: inset(0 0 -15% 0); transform: none; } }
@keyframes gy-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gy-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gy-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gy-deep { from { transform: scale(1.3) translateY(6%); } to { transform: none; } }
@keyframes gy-band { from { clip-path: inset(0 14% 0 14%); } to { clip-path: inset(0 0 0 0); } }
@keyframes gy-flipnum { from { opacity: 0; transform: perspective(300px) rotateX(90deg); } 70% { opacity: 1; transform: perspective(300px) rotateX(-12deg); } to { opacity: .8; transform: none; } }
@keyframes gy-sweep { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@keyframes gy-slide { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }