/* 장면 내부 효과는 재생 시계에 맞춰 탐색하므로 정지·복귀 시 틀어지지 않습니다. */
.showcase .scene .featured-lead,.showcase .scene .staff-row i,.showcase .scene .event-a,.showcase .scene .phone-reserve,.showcase .scene .watermark,.showcase .scene .answer { animation-play-state: paused !important; animation-delay: var(--scene-elapsed, 0ms) !important; }
.logo-dot { animation-iteration-count: 1; animation-fill-mode: both; }
.scene.scene-enter { animation-duration: 550ms; }
.scene[hidden] { display: none !important; }
.scene-select, .play-toggle, .menu-toggle { min-height: 44px; }
.form-status { min-height: 1.5em; }
@media (max-width: 719px) {
  .scene-select { min-height: 44px; }
  .screen-stage { min-height: 380px; }
  .demo-heading h4,.conversation > h4 { font-size: 16px; }
  .demo-overline,.panel-label,.booking-sync,.question-bubble,.answer p,.reference-card p,.phone-class p { font-size: 12px; }
}

/* 작은 화면에서도 각 영역의 보조 제목을 확대 없이 읽을 수 있도록 합니다. */
.eyebrow, .hero .eyebrow { font-size: 14px; line-height: 1.5; color: #5f5a52; }
.hero .eyebrow { font-size: 15px; }
.hero .eyebrow .tiny-dot { width: 6px; height: 6px; }
@media (max-width: 719px) {
  .eyebrow, .hero .eyebrow { font-size: 14px; letter-spacing: 0; }
}

/* 실제 방문자가 읽는 설명과 조작 문구의 최소 크기를 높입니다. */
.desktop-nav, .heading-note, .showcase-caption p, .approach-description,
.method-foot, .process-grid p, .ownership p, .contact-description,
.contact-next p, .field label, .field-error, .preview-note, .form-status,
.footer-inner > span, .footer-inner .prototype-label, .scroll-cue,
.quiet-button, .hero-example, .example-label, .preview-tag { font-size: 14px; line-height: 1.6; }
.field input, .field textarea, .field input::placeholder, .field textarea::placeholder { font-size: 16px; }
.field label > span, .section-number, .step-num, .method-label > span,
.scene-counter, .scene-select > span { font-size: 12px; }
.scene-select, .play-toggle, .method-label h3 { font-size: 14px; }
.showcase-caption p { max-width: 48em; }

/* 예시 화면은 실제 제품 축소본이므로 부가 장식보다 핵심 정보를 우선합니다. */
.demo-brand, .demo-overline, .panel-label, .kanban-col h5,
.lead-card > b, .lead-card > p, .staff-row b, .booking-sync,
.viewer-toolbar, .file-list > div:not(.viewer-file-note),
.document-paper > p, .document-paper h5, .question-bubble,
.answer b, .answer p, .reference-card > b { font-size: 12px; }
.lead-tag, .lead-owner, .performance > p, .report-note, .schedule-days,
.class-event small, .class-event b, .class-event > span,
.phone-head > span, .phone-head > p, .phone-date, .phone-class > p,
.phone-reserve, .paper-category, .answer-steps span, .reference-card > p,
.reference-card > em { font-size: 11px; }
@media (max-width: 719px) {
  .hero-description, .showcase-caption p, .approach-description,
  .process-grid p, .ownership p, .contact-description, .contact-next p,
  .preview-note, .form-status, .footer-inner > span,
  .footer-inner .prototype-label, .method-foot { font-size: 14px; line-height: 1.6; }
  .hero .primary-button, .submit-button, .method-label h3 { font-size: 14px; }
  .showcase-controls { align-items: flex-end; flex-wrap: wrap; }
  .scene-selectors { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
  .scene-select, .scene-select:nth-child(1), .scene-select:nth-child(4) { font-size: 14px; padding: 9px 0 12px; }
  .scene-select:nth-child(1):after, .scene-select:nth-child(4):after { content: none; }
  .scene-select > span { display: inline; font-size: 12px; margin-right: 6px; }
  .play-toggle { width: auto; min-width: 110px; height: 44px; padding: 0 12px; font-size: 14px; }
  .play-text { display: inline; }
  .example-label, .hero-example, .preview-tag { font-size: 12px; }
  .demo-brand, .demo-overline, .pipeline .panel-label, .performance .panel-label,
  .kanban-col h5, .lead-card > b, .lead-card > p, .staff-row b,
  .booking-sync, .viewer-toolbar, .file-list > div:not(.viewer-file-note),
  .document-paper > p, .document-paper h5, .question-bubble,
  .answer b, .answer p, .references .panel-label, .reference-card > b { font-size: 11px; }
  .lead-tag, .lead-owner, .schedule-days, .class-event small, .class-event b,
  .class-event > span, .phone-head > span, .phone-date, .phone-class > p,
  .phone-reserve, .paper-category, .answer-steps span, .reference-card > em { font-size: 10px; }
  .screen-stage { height: 500px; }
  .class-event > span { line-height: 1.2; }
}


/* 2026-11-08 브라우징 재검수: 확대된 글자의 잘림과 공개 문구 대비를 보정합니다. */
/* 보험 화면은 핵심 고객 카드에 집중하고 잘리던 중복 예시·주석은 생략합니다. */
.insurance-scene .faint-card,
.insurance-scene .pipeline-link,
.insurance-scene .demo-bottom-note { display: none; }
.sports-scene .phone { height: 430px; }

/* 밝은 배경은 유지하면서 읽어야 하는 문구의 명암 대비를 높입니다. */
.quiet-button, .scroll-cue { color: #62594c; }
.showcase-caption p, .scene-select { color: #6d6457; }
.scene-select.active { color: #ae3e1d; }
.method-foot, .ownership p, .footer-inner > span,
.footer-inner .prototype-label { color: #71624f; }
.field label > span { color: #786a56; }
.field input::placeholder, .field textarea::placeholder { color: #786a56; }

@media (min-width: 720px) and (max-width: 1199px) {
  .screen-stage { height: 560px; }
}
@media (max-width: 719px) {
  .screen-stage { height: 560px; }
  .sports-window { height: 320px; }
  .sports-scene .phone { height: 270px; bottom: 5px; }
  .sports-scene .phone-class-art { height: 8px; }
  .sports-scene .phone-head { padding-top: 10px; }
  .sports-scene .phone-date { padding-top: 2px; padding-bottom: 2px; }
  .sports-scene .phone-reserve { line-height: 1.4; }
  .sports-scene .schedule-main { padding-top: 12px; padding-bottom: 12px; }
  /* 다섯 칸을 세 칸으로 줄여 수업명이 잘리지 않게 합니다. */
  .sports-scene .schedule-days { grid-template-columns: repeat(3, 1fr); }
  .sports-scene .schedule-days > b:nth-child(n+4) { display: none; }
  .sports-scene .schedule-grid {
    height: 150px;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 36px, #eae4da 37px, transparent 38px),
      repeating-linear-gradient(to right, transparent 0, transparent calc(33.333% - 1px), #eee8df calc(33.333% - 1px), #eee8df 33.333%);
  }
  .sports-scene .class-event { width: calc(33.333% - 7px); padding: 7px 5px; height: 85px; }
  .sports-scene .event-a { left: calc(66.666% + 2px); top: 7px; }
  .sports-scene .event-b { left: 2px; top: 28px; }
  .sports-scene .event-c { left: calc(33.333% + 2px); top: 54px; }
  .sports-scene .event-d, .sports-scene .event-e { display: none; }
  .sports-scene .class-event b { line-height: 1.5; }
  /* 앱에 가려지던 상태는 무대 왼쪽의 짧은 문구로 읽히게 합니다. */
  .sports-scene .booking-sync { display: none; }
  .sports-scene:after { bottom: 45px; max-width: calc(100% - 172px); }
  .sports-scene.booking-complete:after { content: '예약 완료,\A센터 일정에 반영'; }
}

/* 첫 화면의 세 이야기는 같은 크기의 무대에서 자연스럽게 이어집니다. */
.hero-visual { position:absolute; inset:0; display:flex; align-items:center; }
.hero-visual[hidden] { display:none; }
.hero-visual-first .hero-window { width:104%; }
.hero-changing .hero-copy > .eyebrow,.hero-changing .hero-copy > h1,.hero-changing .hero-copy > .hero-description { animation:hero-copy-enter .65s ease both; }
.hero-changing .hero-visual:not([hidden]) { animation:hero-visual-enter .75s ease both; }
@keyframes hero-copy-enter { from { opacity:.15; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-visual-enter { from { opacity:.15; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.hero-system-card { position:relative; width:100%; min-height:370px; background:#fffdfa; border:1px solid #ded8cd; border-radius:15px; box-shadow:0 30px 65px -24px #9c775b42; overflow:hidden; transform:rotate(-2deg); }
.hero-system-bar { height:52px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ece6dc; color:#81796c; font-size:12px; }
.understand-content,.support-content { padding:clamp(24px,3vw,42px); }
.understand-content > small,.support-content > small { font-size:11px; letter-spacing:.12em; color:#a2775d; }
.understand-content h3,.support-content h3 { margin:10px 0 24px; font-size:clamp(24px,2.2vw,32px); line-height:1.35; letter-spacing:-.04em; }
.understand-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.understand-inputs span,.support-items span { padding:13px 8px; border:1px solid #eaded0; border-radius:9px; background:#fbf5ee; color:#6e655c; text-align:center; font-size:13px; }
.understand-connector { height:45px; display:flex; justify-content:space-around; padding:0 12%; }
.understand-connector span { border-left:1px dashed #d2946d; height:100%; }
.understand-result { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid #e4bda2; border-radius:10px; background:#fff2e8; }
.understand-result > span,.support-update > span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#e77a45; color:#fff; font-size:23px; }
.understand-result div { display:grid; gap:5px; flex:1; }
.understand-result b,.support-dashboard b { font-size:15px; }
.understand-result small,.support-update small { color:#786d60; font-size:12px; }
.understand-result i { color:#c34b24; font-style:normal; }
.hero-card-caption { position:absolute; right:5%; bottom:3%; color:#81776a; font-size:12px; }
.support-dashboard { display:grid; grid-template-columns:1.5fr 1fr; gap:12px; }
.support-dashboard > div { min-width:0; padding:18px; border:1px solid #eee2d6; background:#f9f4ed; border-radius:10px; }
.support-dashboard > div:first-child { display:grid; gap:8px; }
.support-dashboard > div:first-child > span { font-size:12px; color:#8d8377; }
.support-bars { display:flex; gap:8px; align-items:end; height:46px; }
.support-bars i { flex:1; height:45%; background:#e5b392; border-radius:3px 3px 0 0; }
.support-bars i:nth-child(2) { height:60%; }.support-bars i:nth-child(3) { height:55%; }.support-bars i:nth-child(4) { height:78%; }.support-bars i:nth-child(5) { height:95%; background:#d67040; }
.support-update { display:grid; gap:7px; align-content:center; }
.support-update > span { width:29px; height:29px; font-size:17px; }
.support-items { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.support-items span { font-size:12px; padding:10px 5px; }
.hero-controls { display:flex; align-items:center; gap:22px; }
.hero-selectors { display:flex; align-items:center; gap:5px; }
.hero-select { border:0; background:transparent; color:#81796f; min-width:40px; min-height:44px; padding:6px; font:500 12px 'DM Sans',sans-serif; }
.hero-select.active { color:#c34b24; font-weight:700; text-decoration:underline; text-underline-offset:6px; }
@media(max-width:719px) {
  .hero-visual-first .hero-window { width:100%; }
  .hero-system-card { min-height:0; width:100%; transform:rotate(-1deg); }
  .hero-system-bar { height:38px; padding:0 12px; font-size:10px; }
  .understand-content,.support-content { padding:18px; }
  .understand-content h3,.support-content h3 { font-size:21px; margin:8px 0 14px; }
  .understand-inputs { gap:5px; }.understand-inputs span { font-size:11px; padding:9px 2px; }
  .understand-connector { height:25px; }
  .understand-result { padding:10px; gap:9px; }.understand-result b,.support-dashboard b { font-size:12px; }.understand-result small,.support-update small { font-size:10px; }
  .support-dashboard > div { padding:10px; }.support-items span { font-size:10px; padding:7px 2px; }.support-bars { height:28px; }
  .hero-card-caption { bottom:-2%; font-size:10px; }.hero-controls { gap:8px; }.hero-select { min-width:36px; }
}
@media(prefers-reduced-motion:reduce) { .hero-changing .hero-copy > *, .hero-changing .hero-visual:not([hidden]) { animation:none; } }

/* 연결과 개선을 부드럽게 강조하며, 일시정지 시 다른 첫 화면 모션과 함께 멈춥니다. */
.understand-inputs span, .support-items span { animation:hero-step-pulse 8s ease-in-out infinite; }
.understand-inputs span:nth-child(2), .support-items span:nth-child(2) { animation-delay:.5s; }
.understand-inputs span:nth-child(3), .support-items span:nth-child(3) { animation-delay:1s; }
.understand-result, .support-update { animation:hero-result-pulse 8s ease-in-out infinite; }
.support-bars i { transform-origin:bottom; animation:hero-bar-pulse 8s ease-in-out infinite; }
.support-bars i:nth-child(2) { animation-delay:.2s; }.support-bars i:nth-child(3) { animation-delay:.4s; }.support-bars i:nth-child(4) { animation-delay:.6s; }.support-bars i:nth-child(5) { animation-delay:.8s; }
@keyframes hero-step-pulse { 0%,100% { transform:translateY(0); } 35%,55% { transform:translateY(-4px); border-color:#d9a782; } }
@keyframes hero-result-pulse { 0%,100% { box-shadow:0 0 0 transparent; } 45%,65% { box-shadow:0 5px 22px #d18d6330; } }
@keyframes hero-bar-pulse { 0%,100% { transform:scaleY(.82); } 45%,70% { transform:scaleY(1); } }

/* 더 빠른 전환과 절제된 반응으로 페이지 전체에 리듬을 더합니다. */
.hero-changing .hero-copy > .eyebrow { animation-duration:.42s; }
.hero-changing .hero-copy > h1 { animation-duration:.5s; }
.hero-changing .hero-copy > .hero-description { animation-duration:.55s; }
.hero-changing .hero-visual:not([hidden]) { animation-duration:.55s; }
.understand-inputs span, .support-items span, .understand-result,
.support-update, .support-bars i { animation-duration:1.5s; }
.showcase .scene .featured-lead, .showcase .scene .staff-row i,
.showcase .scene .event-a, .showcase .scene .phone-reserve,
.showcase .scene .watermark, .showcase .scene .answer { animation-duration:1.5s; }
.scene.scene-enter { animation-duration:400ms; }
.reveal.has-appeared { animation-duration:.5s; }
.process-grid li.reveal.has-appeared:nth-child(2),
.process-grid li.reveal.has-appeared:nth-child(5) { animation-delay:.06s; }
.process-grid li.reveal.has-appeared:nth-child(3),
.process-grid li.reveal.has-appeared:nth-child(6) { animation-delay:.12s; }
.method-art > * { transition-duration:.42s; transition-timing-function:cubic-bezier(.2,.7,.2,1); }
.primary-button > span, .nav-contact > span, .back-top { transition:transform .2s ease; }
.scene-select, .hero-select, .play-toggle, .quiet-button { transition:color .2s ease, background-color .2s ease; }
.field input, .field textarea { transition:border-color .2s ease, box-shadow .2s ease; }
.field input:focus, .field textarea:focus { border-color:#c34b24; box-shadow:0 0 0 3px #c34b241a; }
@media (hover:hover) and (pointer:fine) {
  .primary-button:hover > span, .nav-contact:hover > span { transform:translate(4px,-4px); }
  .scene-select:hover, .hero-select:hover, .quiet-button:hover { color:#c34b24; }
  .back-top:hover { transform:translateY(-4px); }
  .process-grid li { transition:transform .22s ease, border-color .22s ease; }
  .process-grid li:hover { transform:translateY(-5px); border-color:#c34b24; }
  .method-step:hover .method-art > * { translate:0 -5px; }
}
@media (prefers-reduced-motion:reduce) {
  .method-step:hover .method-art > * { translate:none; }
  .process-grid li:hover, .back-top:hover { transform:none; }
}

/* 로고의 레드와 오렌지를 주요 동작과 핵심 포인트에 사용합니다. */
:root {
  --brand-red: #b8391e;
  --brand-orange: #cb4c1e;
  --brand-gradient: linear-gradient(115deg, var(--brand-red), var(--brand-orange));
}
.primary-button, .nav-contact {
  color: #fff;
  background: var(--brand-gradient);
  border-color: transparent;
  box-shadow: 0 6px 18px #b8391e24;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.primary-button:hover, .nav-contact:hover {
  color: #fff;
  background: var(--brand-gradient);
  filter: brightness(.9);
  box-shadow: 0 9px 22px #b8391e38;
}
.desktop-nav > .nav-contact:hover { color: #fff; }
.hero h1 span, .accent-text, .section-number, .step-num,
.hero-select.active, .scene-select.active { color: var(--brand-red); }
.section-number { border-color: #c34419aa; }
.tiny-dot, .logo-dot { background-color: #c34419; }
.scene-select.active i { background-color: var(--brand-red); }
.field input:focus, .field textarea:focus { border-color: var(--brand-red); }

/* 주요 행동 버튼은 알약 형태로 통일합니다. */
.primary-button, .nav-contact { border-radius: 999px; }
.primary-button, .nav-contact, .submit-button { font-size: 14px; font-weight: 500; }

/* 첫 화면 보조 문구를 제목보다 차분하게, 한층 선명하게 보여줍니다. */
.hero-description, .heading-note, .showcase-caption p, .approach-description,
.process-grid p, .ownership p, .contact-description, .contact-next p {
  color: #5d5850;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
}
@media (max-width: 719px) {
  .hero-description, .heading-note, .showcase-caption p, .approach-description,
  .process-grid p, .ownership p, .contact-description, .contact-next p { font-size: 15px; }
}

/* 제작 단계의 각 그림이 연결·설계·구현·개선의 흐름을 보여줍니다. */
@media (prefers-reduced-motion: no-preference) {
  .method-visual.is-visible .is-current .flow-center img { animation: method-breathe 2.8s ease-in-out infinite; }
  .method-visual.is-visible .is-current .flow-node { animation: method-node 2.8s ease-in-out infinite; }
  .method-visual.is-visible .is-current .flow-node:nth-child(2) { animation-delay:.2s; }
  .method-visual.is-visible .is-current .flow-node:nth-child(3) { animation-delay:.4s; }
  .method-visual.is-visible .is-current .flow-node:nth-child(4) { animation-delay:.6s; }
  .method-visual.is-visible .is-current .wire-window i,
  .method-visual.is-visible .is-current .wire-window b { animation: method-wire 3s ease-in-out infinite; }
  .method-visual.is-visible .is-current .wire-window i:nth-child(2) { animation-delay:.2s; }
  .method-visual.is-visible .is-current .wire-window i:nth-child(3) { animation-delay:.4s; }
  .method-visual.is-visible .is-current .wire-window b { animation-delay:.6s; }
  .method-visual.is-visible .is-current .build-bars b { transform-origin:bottom; animation: method-grow 2.6s ease-in-out infinite; }
  .method-visual.is-visible .is-current .build-bars b:nth-child(2) { animation-delay:.15s; }
  .method-visual.is-visible .is-current .build-bars b:nth-child(3) { animation-delay:.3s; }
  .method-visual.is-visible .is-current .build-bars b:nth-child(4) { animation-delay:.45s; }
  .method-visual.is-visible .is-current .improve-ring > span { animation: method-arrow 2.8s ease-in-out infinite; }
  .method-visual.is-visible .is-current .improve-dot { animation: method-breathe 2.8s ease-in-out infinite; }
}
@keyframes method-breathe { 0%,100% { scale:1; } 50% { scale:1.12; } }
@keyframes method-node { 0%,100% { background-color:#fcf5eb; box-shadow:0 0 0 0 #c3441900; } 50% { background-color:#f5dfce; box-shadow:0 0 0 4px #c3441914; } }
@keyframes method-wire { 0%,100% { background-color:transparent; } 50% { background-color:#f5dfce; } }
@keyframes method-grow { 0%,100% { transform:scaleY(.72); } 50% { transform:scaleY(1); } }
@keyframes method-arrow { 0%,100% { translate:0 0; } 50% { translate:5px -5px; } }

/* 제작 방식의 단계 번호는 최소 13px로 표시합니다. */
.method-label > span { font-size: 13px; }

/* 진행 과정의 자산·운영 안내는 모바일에서도 보이도록 합니다. */
@media (max-width: 719px) {
  .process .heading-note { display: block; margin-top: 18px; }
}

/* 브랜드의 흐름과 연결감을 드러내는 확장 모션. */
@media (prefers-reduced-motion: no-preference) {
  .hero-changing .hero-copy > .eyebrow { animation: vivid-copy .38s ease both; }
  .hero-changing .hero-copy > h1 { animation: vivid-copy .48s cubic-bezier(.16,.8,.2,1) both; }
  .hero-changing .hero-copy > .hero-description { animation: vivid-copy .55s .04s ease both; }
  .hero-changing .hero-visual:not([hidden]) { animation: vivid-visual .55s cubic-bezier(.16,.8,.2,1) both; }
  .hero .orbit { animation: orbit-glow 3.6s ease-in-out infinite; }
  .hero .orbit-two { animation-delay: -1.8s; }
  .hero-art::before {
    content: ''; position: absolute; inset: 10% 4%; border-radius: 50%;
    background: radial-gradient(ellipse, #efb6953b, transparent 68%);
    pointer-events: none; animation: ambient-glow 4s ease-in-out infinite;
  }
  .hero.is-paused .hero-art::before { animation-play-state: paused; }
  .scene.scene-enter { animation: vivid-scene .45s cubic-bezier(.16,.8,.2,1) both; }
  .screen-stage::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, #fff9 48%, transparent 66%);
    opacity: .32; transform: translateX(-100%); animation: stage-sweep 5s ease-in-out infinite;
  }
  .showcase.is-idle .screen-stage::after, body.page-hidden .screen-stage::after { animation-play-state: paused; }
  .method-visual.is-visible .method-line > span { box-shadow: 0 0 9px #d25329a0; }
  .method-visual.is-visible .is-current .method-art { animation: method-aura 3s ease-in-out infinite; }
  .process-grid li.reveal.has-appeared { animation-name: vivid-reveal; }
  .process-grid li .step-num { transition: color .2s ease, transform .25s ease; display: inline-block; }
  .contact-orbit { animation: contact-breathe 7s ease-in-out infinite; }
  @media (hover:hover) and (pointer:fine) {
    .process-grid li:hover .step-num { color: #b8391e; transform: translateX(5px); }
    .method-step:hover .method-art { filter: saturate(1.35); }
    .primary-button:hover, .nav-contact:hover { transform: translateY(-3px); }
  }
}
@keyframes vivid-copy { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes vivid-visual { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes vivid-scene { from { opacity:.15; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes vivid-reveal { from { opacity:.35; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes orbit-glow { 0%,100% { opacity:.65; scale:1; } 50% { opacity:1; scale:1.035; } }
@keyframes ambient-glow { 0%,100% { opacity:.35; scale:.94; } 50% { opacity:.8; scale:1.06; } }
@keyframes stage-sweep { 0%,25% { transform:translateX(-100%); } 70%,100% { transform:translateX(100%); } }
@keyframes method-aura { 0%,100% { filter:saturate(1); } 50% { filter:saturate(1.4); } }
@keyframes contact-breathe { 0%,100% { opacity:.32; scale:1; } 50% { opacity:.55; scale:1.035; } }

/* 모바일에서는 핵심 전환을 유지하고 넓은 장식 움직임은 줄입니다. */
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .hero-art::before, .screen-stage::after { animation: none; opacity: .2; }
  .hero .orbit, .contact-orbit, .method-visual.is-visible .is-current .method-art { animation: none; }
  .hero-changing .hero-copy > .eyebrow,
  .hero-changing .hero-copy > h1,
  .hero-changing .hero-copy > .hero-description { animation-name: mobile-copy-enter; }
  .hero-changing .hero-visual:not([hidden]) { animation-name: mobile-visual-enter; }
  .scene.scene-enter { animation-name: mobile-visual-enter; }
}

/* 모바일은 영역명 → 제목 → 설명 → 주요 화면의 간격을 일관되게 유지합니다. */
@media (max-width: 719px) {
  .hero .eyebrow, .section-heading .eyebrow,
  .approach-top .eyebrow, .contact-copy .eyebrow { margin-bottom: 22px; }
  .hero-description, .approach-description, .contact-description,
  .process .heading-note { margin-top: 20px; }
  .hero-inner { row-gap: 32px; }
  .hero-art { margin-top: 0; }
  .section-heading { margin-bottom: 32px; }
  .showcase-caption { margin-bottom: 32px; }
  .method-visual { margin-top: 32px; }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}
@keyframes mobile-copy-enter { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes mobile-visual-enter { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* 장면을 교체하기 전에 이전 문구와 화면이 함께 부드럽게 물러납니다. */
@media (prefers-reduced-motion: no-preference) {
  .hero.hero-leaving .hero-copy > .eyebrow,
  .hero.hero-leaving .hero-copy > h1,
  .hero.hero-leaving .hero-copy > .hero-description { animation: hero-exit-copy .32s ease-in both; }
  .hero.hero-leaving .hero-visual:not([hidden]) { animation: hero-exit-visual .32s ease-in both; }
  .hero.hero-leaving.is-paused .hero-copy > *,
  .hero.hero-leaving.is-paused .hero-visual { animation-play-state: paused; }
}
@keyframes hero-exit-copy { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-10px); } }
@keyframes hero-exit-visual { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(-8px) scale(.985); } }
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .hero.hero-leaving .hero-visual:not([hidden]) { animation-name: hero-exit-copy; }
}

/* 연결과 성장을 더 선명하게 표현하는 브랜드 모션. */
@media (prefers-reduced-motion: no-preference) {
  .hero .orbit { animation: orbit-glow 3.6s ease-in-out infinite, orbit-turn 12s linear infinite; }
  .hero .orbit-two { animation: orbit-glow 3.6s -1.8s ease-in-out infinite, orbit-turn-reverse 15s linear infinite; }
  .hero-art::before {
    background: radial-gradient(ellipse, #ee8a563d 0%, #f7d2b92e 45%, transparent 72%);
    animation-duration: 2.8s;
  }
  .hero-changing .hero-copy > h1 { animation: vivid-copy .48s cubic-bezier(.16,.8,.2,1) both, headline-glow .9s ease-out both; }
  .hero-changing .hero-visual:not([hidden]) { animation: vivid-visual .55s cubic-bezier(.16,.8,.2,1) both, visual-glow 1s ease-out both; }
  .hero.hero-leaving .hero-copy > h1 { animation: hero-exit-copy .32s ease-in both; }
  .hero.hero-leaving .hero-visual:not([hidden]) { animation: hero-exit-visual .32s ease-in both; }
  .screen-stage::after {
    z-index: 2; opacity: .24;
    background: linear-gradient(110deg, transparent 30%, #fff9 48%, transparent 66%);
    animation-duration: 2.8s;
  }
  .scene.scene-enter { animation: vivid-scene .45s cubic-bezier(.16,.8,.2,1) both, visual-glow .8s ease-out both; }
  .method-line > span { position:relative; }
  .method-visual.is-visible .method-line > span::after {
    content:''; position:absolute; right:-5px; top:-4px; width:9px; height:9px;
    border-radius:50%; background:#d45b2e; box-shadow:0 0 0 5px #e9783d25, 0 0 18px #d45b2e;
    animation: signal-pulse 1.5s ease-in-out infinite;
  }
  .method-visual.is-visible .is-current .method-art { animation: method-aura 2.4s ease-in-out infinite, method-lift 3s ease-in-out infinite; }
  .process-grid li.reveal.has-appeared { animation: vivid-reveal .6s cubic-bezier(.16,.8,.2,1) both; }
  .process-grid li.reveal.has-appeared:nth-child(2), .process-grid li.reveal.has-appeared:nth-child(5) { animation-delay:.1s; }
  .process-grid li.reveal.has-appeared:nth-child(3), .process-grid li.reveal.has-appeared:nth-child(6) { animation-delay:.2s; }
  .primary-button, .nav-contact { background-size: 200% 100%; transition: background-position .35s ease, transform .25s ease, box-shadow .25s ease, filter .2s ease; }
  @media (hover:hover) and (pointer:fine) {
    .primary-button:hover, .nav-contact:hover { background-position: 100% 0; transform: translateY(-4px); box-shadow: 0 12px 28px #b8391e50; }
    .process-grid li:hover { border-color:#c34419; box-shadow:0 -3px 0 -1px #c34419; transform:translateY(-7px); }
    .method-step:hover .method-art { filter:saturate(1.5); }
  }
}
@keyframes orbit-turn { to { rotate:360deg; } }
@keyframes orbit-turn-reverse { to { rotate:-360deg; } }
@keyframes headline-glow { 0% { filter:blur(2px); } 55%,100% { filter:blur(0); } }
@keyframes visual-glow { 0% { filter:brightness(1.18); } 100% { filter:brightness(1); } }
@keyframes signal-pulse { 0%,100% { scale:.85; opacity:.65; } 50% { scale:1.2; opacity:1; } }
@keyframes method-lift { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .hero .orbit, .hero .orbit-two, .hero-art::before, .screen-stage::after,
  .method-visual.is-visible .is-current .method-art { animation:none; }
  .hero-changing .hero-copy > h1 { animation: mobile-copy-enter .48s ease both; }
  .hero-changing .hero-visual:not([hidden]), .scene.scene-enter { animation: mobile-visual-enter .45s ease both; }
  .hero.hero-leaving .hero-copy > h1, .hero.hero-leaving .hero-visual:not([hidden]) { animation: hero-exit-copy .32s ease-in both; }
}

/* 문의 연동: 본문과 디자인은 유지하고 상태·입력 안내를 명확히 표시합니다. */
.contact-honeypot { display:none; }
.contact-notice { margin:0 0 18px; color:#63564b; font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.form-status { font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.field-error { font-size:13px; }
.submit-button:disabled { opacity:.65; cursor:default; transform:none; }
.field input[readonly], .field textarea[readonly] { background:#f6f3ee; }
@media (max-width: 719px) {
  .answer > div { min-width:0; }
  .answer-steps { flex-wrap:wrap; }
}

/* A compact return-to-top control, below the header and outside desktop copy. */
.scroll-top {
  position:fixed; right:calc(24px + env(safe-area-inset-right, 0px));
  bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:40;
  display:grid; place-items:center; width:48px; height:48px; padding:0;
  border:1px solid #d9b29d; border-radius:50%; background:#fffefc; color:#b8391e;
  box-shadow:0 4px 18px #6b3d2524; font-size:25px; line-height:1;
  transition:background .2s, box-shadow .2s;
}
.scroll-top[hidden] { display:none; }
.scroll-top:hover { background:#faeadd; box-shadow:0 5px 20px #6b3d2538; }
.scroll-top:focus-visible { outline:3px solid #b8391e; outline-offset:4px; }
@media (max-width:719px) {
  .scroll-top { right:calc(14px + env(safe-area-inset-right, 0px)); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); width:44px; height:44px; font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { .scroll-top { transition:none; } }

/* The workflow now drifts on a slow clock, not the page's scroll position. */
.method-line > span { width:100%; transition:none; }
@media (prefers-reduced-motion:no-preference) {
  .method-visual.is-visible .is-current .method-art {
    animation:method-aura 8s ease-in-out infinite, method-lift 10s ease-in-out infinite;
  }
  .method-visual.is-visible .method-step:nth-child(2) .method-art { animation-delay:-2s,-3s; }
  .method-visual.is-visible .method-step:nth-child(3) .method-art { animation-delay:-4s,-6s; }
  .method-visual.is-visible .method-step:nth-child(4) .method-art { animation-delay:-6s,-9s; }
  .method-visual.is-visible .is-current .flow-center img,
  .method-visual.is-visible .is-current .flow-node,
  .method-visual.is-visible .is-current .wire-window i,
  .method-visual.is-visible .is-current .wire-window b,
  .method-visual.is-visible .is-current .build-bars b,
  .method-visual.is-visible .is-current .improve-ring > span,
  .method-visual.is-visible .is-current .improve-dot { animation-duration:6.5s; }
  .method-visual.is-visible .method-line > span::after {
    left:0; right:auto; animation:method-signal-drift 13s linear infinite;
  }
}
@keyframes method-signal-drift {
  0% { left:0; opacity:0; }
  8% { opacity:.85; }
  92% { opacity:.85; }
  100% { left:100%; opacity:0; }
}
@media (max-width:719px) and (prefers-reduced-motion:no-preference) {
  .method-visual.is-visible .is-current .method-art { animation:none; }
}

/* Local review chrome only; never inserted in live delivery mode. */
.preview-environment {
  position:fixed; left:calc(12px + env(safe-area-inset-left, 0px));
  bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:60;
  max-width:calc(100vw - 84px); padding:7px 11px; border-radius:6px;
  background:#292823; color:#fff; box-shadow:0 2px 10px #0002;
  font-size:12px; line-height:1.5; pointer-events:none;
}
/* Reserve space outside the footer for local-only review chrome. */
body:has(> .preview-environment) { padding-bottom:48px; }