/* 테마 ⑦ 다움 인테리어 — Variant 시안 이식(B-10). 출처: design/variant/daum/v1-2026-09-26.html (2026-09-26).
   레이아웃·서체는 시안 값 그대로: 시스템 산세리프(Apple SD Gothic Neo·Pretendard) 제목 300, 라운드 4(버튼)·0, 1200 컨테이너(좌우 1.5rem).
   색은 2026-09-26 승민 지시로 바꿈(8곳이 전부 베이지로 겹쳐서, 인테리어 earth·minimal): 콘크리트 바탕 #ECEDEB · 면 #E1E3E0 · 차콜 먹 #262A2B · 보조 #5B6163 · 숲 초록 #1F4D3A(버튼·강조 견적·하단 바 — 고채도는 이 하나) · 선 rgba(38,42,43,.15) · 첫 화면 스크림 차콜.
   대비: 먹/바탕 12.3 · 보조/바탕 5.4(면 위 4.9) · 밝은 글/초록 8.8 · 초록/바탕 8.2 · 푸터 60% 약 6:1. */
:root {
  --bg: #ECEDEB;
  --surface: #E1E3E0;
  --ink: #262A2B;
  --ink-2: #5B6163;
  --ink-3: #5B6163;
  --line: rgba(38, 42, 43, 0.15);
  --accent: #1F4D3A;
  --accent-ink: #F4F5F3;
  --accent-soft: #E1E3E0;
  --hero-bg: #2F3436;
  --hero-ink: #ffffff;
  --header-bg: rgba(236, 237, 235, 0.9);
  --band: #E1E3E0;
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", "Pretendard", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --display-weight: 300;
  --display-tracking: -0.02em;
  --radius: 4px;
  --radius-lg: 0;
  --measure: none;
  --container: 1200px; /* 시안 .container: max-width 1200 + 안쪽 좌우 1.5rem */
  --gutter: 1.5rem;
  --sec-pad: 4rem;
  --head-gap: 3rem;
  --shadow: none;
}
@media (min-width: 769px) { :root { --sec-pad: 6rem; --head-gap: 4rem; } }

/* ---------- 바탕 · 글 ---------- */
html[data-theme="interior-daum"] { scroll-padding-top: 4.5rem; }
html[data-theme="interior-daum"] body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--ink); }
html[data-theme="interior-daum"] h1, html[data-theme="interior-daum"] h2, html[data-theme="interior-daum"] h3, html[data-theme="interior-daum"] h4 { text-wrap: initial; line-height: 1.5; }
html[data-theme="interior-daum"] :focus-visible { outline-color: var(--ink); }
html[data-theme="interior-daum"] .container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); }

/* 버튼: 라운드 4, .75rem 1.5rem, .875rem 500. 먹 바탕 + 밝은 글(hover 강조색) · 투명 + 흰 글 40% 흰 테두리 */
html[data-theme="interior-daum"] .btn {
  min-height: auto; padding: .75rem 1.5rem; border: 0; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink); font-size: .875rem; font-weight: 500; line-height: 1.5;
  transition: background .2s, color .2s;
}
html[data-theme="interior-daum"] .btn:hover { background: var(--ink); opacity: 1; }
html[data-theme="interior-daum"] .btn:active { transform: none; }
html[data-theme="interior-daum"] .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
html[data-theme="interior-daum"] .btn.ghost:hover { background: var(--surface); }

/* ---------- 헤더: 고정, 4rem(폰 3.5rem), 바탕 90% + 블러 8px, 아래 선. 원 표시 + 상호 | 내비 4개 | 작은 먹 버튼 ---------- */
html[data-theme="interior-daum"] .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
html[data-theme="interior-daum"] .site-header .row { min-height: 3.5rem; height: 3.5rem; }
html[data-theme="interior-daum"] .site-header .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; color: var(--ink); }
html[data-theme="interior-daum"] .site-header .logo::before { content: ""; display: block; width: 24px; height: 24px; border: 1.5px solid var(--ink); border-radius: 50%; }
html[data-theme="interior-daum"] .site-header nav { gap: 2.5rem; font-size: .875rem; }
html[data-theme="interior-daum"] .site-header nav a { color: var(--ink-2); transition: color .2s; }
html[data-theme="interior-daum"] .site-header nav a:hover { color: var(--ink); }
/* 시안 내비는 4개(시공 사례·진행 순서·참고 견적·쇼룸)뿐 */
html[data-theme="interior-daum"] .site-header nav a[href="#features"], html[data-theme="interior-daum"] .site-header nav a[href="#reviews"],
html[data-theme="interior-daum"] .site-header nav a[href="#faq"], html[data-theme="interior-daum"] .site-header nav a[href="#contact"] { display: none; }
html[data-theme="interior-daum"] .site-header .btn.header-cta { padding: .5rem 1rem; }
@media (min-width: 769px) {
  html[data-theme="interior-daum"] .site-header .row { min-height: 4rem; height: 4rem; }
  html[data-theme="interior-daum"] .site-header nav { display: flex; }
  html[data-theme="interior-daum"] .site-header .btn.header-cta { display: inline-flex; }
}

/* ---------- 첫 화면: 사진 + 먹색 스크림(위 10% → 아래 80%), 글은 아래 왼쪽. 오른쪽 아래 사진 설명 ---------- */
html[data-theme="interior-daum"] .hero.hero--fullbleed { display: flex; align-items: flex-end; min-height: 560px; padding: 5rem 0 3rem; background-color: var(--hero-bg); color: var(--hero-ink); }
html[data-theme="interior-daum"] .hero--fullbleed .hero__scrim { background: linear-gradient(to bottom, rgba(38, 42, 43, 0.1) 0%, rgba(38, 42, 43, 0.8) 100%); }
html[data-theme="interior-daum"] .hero--fullbleed .hero__caption { /* 시안 .hero-caption — 글은 JSON hero.caption */
  position: absolute; right: 1.5rem; bottom: 1.5rem; margin: 0; font-size: .75rem; color: #fff; opacity: .6;
}
html[data-theme="interior-daum"] .hero--fullbleed .hero__body { display: block; padding-block: 0; }
html[data-theme="interior-daum"] .hero--fullbleed .hero__eyebrow { margin-bottom: 1rem; font-size: .875rem; font-weight: 400; letter-spacing: .05em; color: #fff; opacity: .8; }
html[data-theme="interior-daum"] .hero--fullbleed .hero__eyebrow::after { content: " · DAUM INTERIOR"; } /* 시안 hero-subtitle(대문자 영문 상호) */
html[data-theme="interior-daum"] .hero--fullbleed h1 { max-width: 800px; margin-bottom: 2.5rem; font-size: 2.5rem; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: #fff; }
html[data-theme="interior-daum"] .hero--fullbleed .hero__sub { max-width: 600px; margin-bottom: 2.5rem; font-size: 1.25rem; font-weight: 300; color: #fff; opacity: .9; }
html[data-theme="interior-daum"] .hero--fullbleed .hero__cta { flex-direction: column; gap: 1rem; margin: 0; }
html[data-theme="interior-daum"] .hero--fullbleed .hero__cta .btn { width: 100%; }
html[data-theme="interior-daum"] .hero--fullbleed .btn.on-dark { background: var(--accent); color: var(--accent-ink); border: 0; }
html[data-theme="interior-daum"] .hero--fullbleed .btn.on-dark:hover { background: var(--ink); }
html[data-theme="interior-daum"] .hero--fullbleed .btn.ghost.on-dark { background: transparent; color: var(--bg); border: 1px solid rgba(255, 255, 255, 0.4); }
html[data-theme="interior-daum"] .hero--fullbleed .btn.ghost.on-dark:hover { background: rgba(255, 255, 255, 0.1); }
html[data-theme="interior-daum"] .hero--fullbleed .hours-now { margin-top: 1rem; font-size: .75rem; color: #fff; opacity: .8; }
@media (min-width: 769px) {
  /* 시안 height: 100vh(min 600) — 100vh 금지(A-3)라 폭 비례(1440에서 900) */
  html[data-theme="interior-daum"] .hero.hero--fullbleed { min-height: clamp(600px, 62.5vw, 900px); padding: 0 0 6rem; }
  html[data-theme="interior-daum"] .hero--fullbleed h1 { font-size: 3.5rem; }
  html[data-theme="interior-daum"] .hero--fullbleed .hero__cta { flex-direction: row; }
  html[data-theme="interior-daum"] .hero--fullbleed .hero__cta .btn { width: auto; }
}

/* ---------- 섹션 공통: 위아래 6rem(폰 4rem), 폭 전체 아래 선, 제목 2rem(폰 1.5rem) 300 ---------- */
html[data-theme="interior-daum"] .section,
html[data-theme="interior-daum"] .section.gallery,
html[data-theme="interior-daum"] .section.reviews { padding-block: var(--sec-pad); border-top: 0; border-bottom: 1px solid var(--line); }
html[data-theme="interior-daum"] .section-head { display: block; margin-bottom: var(--head-gap); }
html[data-theme="interior-daum"] .section-head h2 { margin-bottom: .5rem; font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; }
@media (min-width: 769px) { html[data-theme="interior-daum"] .section-head h2 { font-size: 2rem; } }

/* ---------- 시공 사례: 4:3 면색 사진 3열(간격 2.5rem·1.5rem), 아래 왼쪽 이름(alt) ---------- */
html[data-theme="interior-daum"] .gallery.gallery--frames .gallery__list { grid-template-columns: 1fr; gap: 3rem; }
html[data-theme="interior-daum"] .gallery--frames .frame { display: flex; flex-direction: column; gap: 1rem; padding: 0; background: none; box-shadow: none; }
html[data-theme="interior-daum"] .gallery--frames .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; background: var(--surface); }
html[data-theme="interior-daum"] .gallery--frames .frame figcaption { margin: 0; text-align: left; font-style: normal; font-size: 1rem; font-weight: 500; color: var(--ink); }
@media (min-width: 769px) { html[data-theme="interior-daum"] .gallery.gallery--frames .gallery__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; } }

/* ---------- 진행 순서: 5칸, 위 먹색 1px 선(폰은 왼쪽 선 세로), 단계 번호 없음 ---------- */
html[data-theme="interior-daum"] .process .steps { grid-template-columns: 1fr; gap: 2.5rem; }
html[data-theme="interior-daum"] .process .steps li { display: block; padding: 0 0 0 1.5rem; background: none; border: 0; border-left: 1px solid var(--ink); border-radius: 0; }
html[data-theme="interior-daum"] .process .steps .label-mono { display: none; } /* 시안에 단계 번호 없음 */
html[data-theme="interior-daum"] .process .steps h3 { margin-bottom: .5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
html[data-theme="interior-daum"] .process .steps p { font-size: .875rem; color: var(--ink-2); }
@media (min-width: 769px) {
  html[data-theme="interior-daum"] .process .steps { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  html[data-theme="interior-daum"] .process .steps li { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--ink); }
}

/* ---------- 참고 견적: 면색 상자 3칸(간격 2.5rem, 안쪽 2.5rem), 강조 평형은 먹 바탕 ---------- */
html[data-theme="interior-daum"] .pricing .plans { grid-template-columns: 1fr; gap: 2.5rem; border-top: 0; }
html[data-theme="interior-daum"] .pricing .plans .plan { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 2.5rem; background: var(--surface); border: 0; }
html[data-theme="interior-daum"] .pricing .plans .plan.hl { padding-left: 2.5rem; border-left: 0; background: var(--accent); color: var(--accent-ink); }
html[data-theme="interior-daum"] .pricing .plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; }
html[data-theme="interior-daum"] .pricing .plan__head h3 { margin-bottom: .25rem; font-size: .875rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--ink-2); }
html[data-theme="interior-daum"] .pricing .plan__price { margin-bottom: 1.5rem; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.5; }
html[data-theme="interior-daum"] .pricing .plan__items { display: block; flex-grow: 1; margin-bottom: 2.5rem; font-size: .875rem; color: inherit; }
html[data-theme="interior-daum"] .pricing .plan__items li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
html[data-theme="interior-daum"] .pricing .plan__items li::before { content: none; }
html[data-theme="interior-daum"] .pricing .plan.hl h3 { color: rgba(236, 237, 235, 0.7); }
html[data-theme="interior-daum"] .pricing .plan.hl .plan__items li { border-bottom-color: rgba(236, 237, 235, 0.15); }
@media (min-width: 769px) {
  html[data-theme="interior-daum"] .pricing .plans { grid-template-columns: repeat(3, 1fr); }
  html[data-theme="interior-daum"] .pricing .plan__price { font-size: 2rem; }
}

/* ---------- 공사 조건: 2열(간격 4rem), 선 없음 ---------- */
html[data-theme="interior-daum"] .features .grid.cols-3 { grid-template-columns: 1fr; gap: 2.5rem; }
html[data-theme="interior-daum"] .features .feat { gap: .5rem; padding-top: 0; border-top: 0; }
html[data-theme="interior-daum"] .features .feat h3 { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
html[data-theme="interior-daum"] .features .feat p { font-size: .875rem; color: var(--ink-2); }
@media (min-width: 769px) { html[data-theme="interior-daum"] .features .grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }

/* ---------- 시공 후기: 3칸, 본문 300 1.6, 작성자 앞 대시 ---------- */
html[data-theme="interior-daum"] .reviews .section-head p { margin-top: .5rem; font-size: .875rem; }
html[data-theme="interior-daum"] .reviews .section-head p a { color: var(--ink-2); }
html[data-theme="interior-daum"] .reviews .reviews__list { max-width: none; grid-template-columns: 1fr; gap: 2.5rem; }
html[data-theme="interior-daum"] .reviews .review { display: block; padding: 0; border-top: 0; font-size: 1rem; line-height: 1.6; }
html[data-theme="interior-daum"] .reviews .review p, html[data-theme="interior-daum"] .reviews .review:first-child p { margin-bottom: 1rem; font-size: 1rem; font-weight: 300; }
html[data-theme="interior-daum"] .reviews .review footer { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-2); }
html[data-theme="interior-daum"] .reviews .review footer::before { content: ""; width: 1rem; height: 1px; background: currentColor; } /* 2026-09-29: em dash 글자 → 짧은 선 */
@media (min-width: 769px) { html[data-theme="interior-daum"] .reviews .reviews__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 자주 묻는 질문: 최대 800, 아래 선 행, + (펼치면 45도) ---------- */
html[data-theme="interior-daum"] .faq .faq__list { max-width: 800px; }
html[data-theme="interior-daum"] .faq details { border-top: 0; border-bottom: 1px solid var(--line); }
html[data-theme="interior-daum"] .faq summary { align-items: center; padding: 1.5rem 0; font-size: 1rem; font-weight: 500; }
html[data-theme="interior-daum"] .faq summary::after { content: "+"; font-weight: 300; color: var(--ink-2); transition: transform .2s; }
html[data-theme="interior-daum"] .faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
html[data-theme="interior-daum"] .faq details p { padding-bottom: 1.5rem; font-size: .875rem; color: var(--ink-2); }

/* ---------- 쇼룸 오시는 길: 항목 이름(작게, 보조색) 위 · 값 아래, 지도 링크 2개(밑줄 글자) ---------- */
html[data-theme="interior-daum"] .location .loc__list { display: block; }
html[data-theme="interior-daum"] .location .loc__list .section-head { margin-bottom: 3.5rem; } /* 시안: 제목 아래 2rem + 항목 간격 1.5rem */
html[data-theme="interior-daum"] .location .loc__dl { display: block; margin: 0; font-size: 1rem; }
html[data-theme="interior-daum"] .location .loc__dl dt { margin-bottom: .25rem; font-size: .875rem; font-weight: 400; color: var(--ink-2); }
html[data-theme="interior-daum"] .location .loc__dl dd { margin: 0 0 1.5rem; }
html[data-theme="interior-daum"] .location .loc__off { color: inherit; }
html[data-theme="interior-daum"] .location .loc__cta { gap: 1rem; margin-top: 1rem; }
html[data-theme="interior-daum"] .location .loc__cta .btn.ghost { padding: 0; border: 0; background: none; color: var(--ink); font-size: .875rem; font-weight: 400; text-decoration: underline; }
html[data-theme="interior-daum"] .location .loc__cta .btn.ghost:hover { background: none; color: var(--accent); }

/* ---------- 견적 문의: 밑줄 입력칸, 보내기는 왼쪽 먹 버튼 ---------- */
html[data-theme="interior-daum"] .contact .contact__grid { display: block; }
html[data-theme="interior-daum"] .contact .section-head { margin-bottom: 2rem; }
html[data-theme="interior-daum"] .contact .section-head p { display: none; } /* 시안에 없는 안내 문장 */
html[data-theme="interior-daum"] .contact .form { display: flex; flex-direction: column; gap: 1.5rem; max-width: none; }
html[data-theme="interior-daum"] .contact .form > label { display: block; font-weight: 400; }
html[data-theme="interior-daum"] .contact .form > label > span { display: block; font-size: .875rem; color: var(--ink-2); }
html[data-theme="interior-daum"] .contact .form input:not([type=checkbox]), html[data-theme="interior-daum"] .contact .form textarea {
  min-height: auto; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  font-size: 1rem; color: var(--ink); transition: border-color .2s;
}
html[data-theme="interior-daum"] .contact .form input:not([type=checkbox]):focus, html[data-theme="interior-daum"] .contact .form textarea:focus { border-bottom-color: var(--ink); }
html[data-theme="interior-daum"] .contact .form textarea { min-height: 100px; }
html[data-theme="interior-daum"] .contact .consent { padding: 1rem; border: 1px solid var(--line); border-radius: 0; background: transparent; font-size: .875rem; }
html[data-theme="interior-daum"] .contact .form > .btn { align-self: flex-start; margin-top: .5rem; }

/* 시안 .contact-section: 오시는 길 | 견적 문의 한 줄(가운데 6rem), 폭 전체 선 하나. main을 4트랙 격자로 */
@media (min-width: 769px) {
  html[data-theme="interior-daum"] main { display: grid; grid-template-columns: 1fr minmax(0, calc(var(--container) / 2)) minmax(0, calc(var(--container) / 2)) 1fr; }
  html[data-theme="interior-daum"] main > * { grid-column: 1 / -1; min-width: 0; }
  html[data-theme="interior-daum"] main > .location { grid-column: 2; border-bottom: 0; }
  html[data-theme="interior-daum"] main > .contact { grid-column: 3; border-bottom: 0; }
  html[data-theme="interior-daum"] main > .location > .container { width: auto; padding-right: 3rem; }
  html[data-theme="interior-daum"] main > .contact > .container { width: auto; padding-left: 3rem; }
}

/* ---------- 푸터: 먹 바탕, 밝은 글 60% .75rem, 원 표시 + 상호 · 사업자 정보 | 오른쪽 아래 © ---------- */
html[data-theme="interior-daum"] .footer { padding: 3rem 0; border-top: 0; background: var(--ink); color: rgba(236, 237, 235, 0.6); font-size: .75rem; }
html[data-theme="interior-daum"] .footer .footer__grid { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
html[data-theme="interior-daum"] .footer .footer__brand { margin-bottom: 8px; }
html[data-theme="interior-daum"] .footer .footer__brand strong { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
html[data-theme="interior-daum"] .footer .footer__brand strong::before { content: ""; display: block; width: 24px; height: 24px; border: 1.5px solid #fff; border-radius: 50%; }
html[data-theme="interior-daum"] .footer .footer__brand p { display: none; } /* 시안 푸터에 한 줄 소개 없음 */
html[data-theme="interior-daum"] .footer .footer__biz { order: 2; margin: 0; font-size: .75rem; }
html[data-theme="interior-daum"] .footer .footer__links { order: 3; gap: .25rem 12px; }
html[data-theme="interior-daum"] .footer .footer__links a { text-decoration: underline; }
html[data-theme="interior-daum"] .footer .footer__copy { order: 4; margin-top: 1.5rem; font-size: .75rem; color: rgba(236, 237, 235, 0.6); }
@media (min-width: 769px) {
  html[data-theme="interior-daum"] .footer { padding: 4rem 0; }
  html[data-theme="interior-daum"] .footer .footer__grid { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; row-gap: .25rem; }
  html[data-theme="interior-daum"] .footer .footer__brand, html[data-theme="interior-daum"] .footer .footer__biz, html[data-theme="interior-daum"] .footer .footer__links { grid-column: 1; }
  html[data-theme="interior-daum"] .footer .footer__copy { grid-column: 2; grid-row: 1 / 4; align-self: end; margin: 0; }
}
html[data-theme="interior-daum"] .example-note { margin: 0; border-top: 0; color: var(--ink-2); }
html[data-theme="interior-daum"] .mobile-bar { background: var(--bg); border-top-color: var(--line); }
html[data-theme="interior-daum"] .mobile-bar a.primary { background: var(--accent); }
html[data-theme="interior-daum"] .mobile-bar a.primary, html[data-theme="interior-daum"] .mobile-bar a.primary strong { color: var(--bg); }


/* ---------- 2026-09-29 taste-skill 병합(유지형) + 연출 — 승민 "콘셉트는 그대로, 유니크하고 이쁘게" ----------
   다이얼: VARIANCE 5 · MOTION 4 · DENSITY 3. 이야기 하나: "공사가 끝난 집에 불이 들어오고, 공정이 한 줄씩 이어진다".
   · 첫 화면: 거실 사진이 천천히 한 걸음 물러나며(줌 아웃) 자리 잡고, 제목 두 줄이 차례로
   · 시공 사례: 들어오면 떠오르고 사진이 살짝 당겨졌다 제자리 · 마우스 올리면 확대
   · 진행 순서: 단계마다 초록 선이 왼쪽에서 그어지며 다음 단계로 이어짐(상담 → A/S)
   · 참고 견적·조건·후기: 차례로 떠오름. 후기 작성자 앞 em dash → 짧은 선
   전부 transform·opacity, 스크롤 이벤트 없음(CSS 스크롤 타임라인), 모션 줄이기면 움직임 없음. */
html[data-theme="interior-daum"] .hero--fullbleed .hero__media { overflow: hidden; }
html[data-theme="interior-daum"] .gallery--frames .frame { overflow: hidden; }
html[data-theme="interior-daum"] .gallery--frames .frame img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { html[data-theme="interior-daum"] .gallery--frames .frame:hover img { transform: scale(1.03); } }
html[data-theme="interior-daum"] .process .steps li { position: relative; }
html[data-theme="interior-daum"] .process .steps li::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: var(--accent); transform-origin: center top; }
@media (min-width: 769px) {
  html[data-theme="interior-daum"] .process .steps li::before { left: 0; top: -1px; width: 100%; height: 2px; transform-origin: left center; }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="interior-daum"] .hero--fullbleed .hero__media img { animation: dm-settle 2.4s cubic-bezier(.16, 1, .3, 1) backwards; }
  html[data-theme="interior-daum"] .hero--fullbleed .hero__body > :not(h1), html[data-theme="interior-daum"] .hero--fullbleed h1 .hero__line { animation: dm-up 1s cubic-bezier(.16, 1, .3, 1) backwards; }
  html[data-theme="interior-daum"] .hero--fullbleed h1 .hero__line { display: inline-block; }
  html[data-theme="interior-daum"] .hero--fullbleed .hero__body > :nth-child(1) { animation-delay: .3s; }
  html[data-theme="interior-daum"] .hero--fullbleed h1 .hero__line:first-child { animation-delay: .45s; }
  html[data-theme="interior-daum"] .hero--fullbleed h1 .hero__line:last-child { animation-delay: .6s; }
  html[data-theme="interior-daum"] .hero--fullbleed .hero__body > :nth-child(n+3) { animation-delay: .8s; }
  @supports (animation-timeline: view()) {
    html[data-theme="interior-daum"] .section-head, html[data-theme="interior-daum"] .gallery--frames .frame, html[data-theme="interior-daum"] .pricing .plans .plan, html[data-theme="interior-daum"] .features .feat, html[data-theme="interior-daum"] .reviews .review { animation: dm-up linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    html[data-theme="interior-daum"] .gallery--frames .frame img { animation: dm-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    html[data-theme="interior-daum"] .process .steps li::before { animation: dm-draw-y linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
    html[data-theme="interior-daum"] .process .steps li { animation: dm-up linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  @supports (animation-timeline: view()) {
    @media (min-width: 769px) {
      /* 가로 한 줄: 다섯 칸이 같은 높이라 칸마다 범위를 밀어 차례로 이어지게 */
      html[data-theme="interior-daum"] .process .steps { view-timeline: --dm-steps block; }
      html[data-theme="interior-daum"] .process .steps li::before { animation-name: dm-draw-x; animation-timeline: --dm-steps; }
      html[data-theme="interior-daum"] .process .steps li:nth-child(1)::before { animation-range: entry 60% entry 85%; }
      html[data-theme="interior-daum"] .process .steps li:nth-child(2)::before { animation-range: entry 85% cover 30%; }
      html[data-theme="interior-daum"] .process .steps li:nth-child(3)::before { animation-range: cover 30% cover 38%; }
      html[data-theme="interior-daum"] .process .steps li:nth-child(4)::before { animation-range: cover 38% cover 46%; }
      html[data-theme="interior-daum"] .process .steps li:nth-child(5)::before { animation-range: cover 46% cover 54%; }
    }
  }
}
@keyframes dm-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes dm-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes dm-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dm-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- 2026-09-29 연출 2차 — 승민 "애니메이팅한 느낌이 더 있었으면" ----------
   · 첫 화면: 스크롤하면 거실 사진이 글보다 느리게 움직여 깊이감(시차) · 제목 줄이 아래에서 밀려 올라오며 드러남
   · 시공 사례: 사진이 아래에서 위로 걷히듯 드러남(커튼) → 살짝 당겨졌다 제자리
   · 진행 순서: 선이 그어진 뒤 작은 점이 선을 따라 계속 흐름(상담 → A/S)
   · 참고 견적: 강조 칸(32평)이 천천히 떠 있음 */
html[data-theme="interior-daum"] .hero--fullbleed h1 .hero__line { display: inline-block; clip-path: inset(0 0 0 0); } /* 2026-09-30: 폰에서 줄이 두 줄로 접히면 inline 요소의 clip-path가 둘째 줄("리모델링,")을 잘라 안 보이던 버그 → inline-block */
html[data-theme="interior-daum"] .process .steps { position: relative; container-type: inline-size; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="interior-daum"] .hero--fullbleed h1 .hero__line { animation-name: dm-line; animation-duration: 1.1s; }
  html[data-theme="interior-daum"] .pricing .plans .plan.hl { animation: dm-float 5s ease-in-out 1s infinite; }
  @supports (animation-timeline: scroll()) {
    html[data-theme="interior-daum"] .hero--fullbleed .hero__media { animation: dm-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    html[data-theme="interior-daum"] .hero--fullbleed .hero__body { animation: dm-lift linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  }
  @supports (animation-timeline: view()) {
    html[data-theme="interior-daum"] .gallery--frames .frame { animation-name: dm-curtain; animation-range: entry 0% entry 90%; }
  }
  @media (min-width: 769px) {
    html[data-theme="interior-daum"] .process .steps::after {
      content: ""; position: absolute; left: 0; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
      animation: dm-run 4.5s cubic-bezier(.65, 0, .35, 1) 1s infinite;
    }
  }
}
@keyframes dm-line { from { clip-path: inset(0 0 100% 0); transform: translateY(60%); opacity: 0; } to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } }
@keyframes dm-parallax { from { transform: translateY(0); } to { transform: translateY(22%); } }
@keyframes dm-lift { from { transform: none; opacity: 1; } to { transform: translateY(-60px); opacity: .2; } }
@keyframes dm-curtain { from { clip-path: inset(100% 0 0 0); transform: translateY(30px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes dm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes dm-run { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 8px)); opacity: 0; } }