/* ══ 기회담 동적 움직임 + 상담창 (2026-09-21) ═══════════════════════════════════
   근거: 그린에너지스퀘어 20. skill — site-structure-kit·bunyang motion-spec(42px 등장·
   IntersectionObserver 토글 리빌·.12s 단계·cubic-bezier(.19,1,.22,1)), soft/taste-skill
   (spring 이징 cubic-bezier(.16,1,.3,1)·hover 1.02/active .98·화살표 밀림·상시 미세 부유),
   b2b-corp-site(정보 탐색 사이트엔 인트로 없음·장식층 pointer-events:none·터치 44px).
   규칙: transform·opacity 만 움직인다. 새 색은 쓰지 않는다(황토 토큰만).
   ════════════════════════════════════════════════════════════════════════════ */

:root{
 --mo-out:cubic-bezier(.19,1,.22,1);     /* 등장·확장 — 확 나오고 길게 감속 */
 --mo-spring:cubic-bezier(.16,1,.3,1);   /* 호버·누름 — 물성 있는 스프링 */
 --mo-y:42px;                            /* 이 장르의 기본 이동거리 */
 --mo-shadow:rgba(148,88,11,.14);        /* 황토로 물들인 그림자 */
}

/* ── 1. 스크롤 리빌 ─────────────────────────────────────────────────────────
   화면에 들어오면 .on, 나가면 다시 초기 상태(unobserve 하지 않는다). */
.rv{opacity:0;transform:translate3d(0,var(--mo-y),0);
 transition:opacity .9s var(--mo-out),transform 1.1s var(--mo-out);
 transition-delay:calc(var(--i,0) * .12s);will-change:opacity,transform}
.rv.rv-x{transform:translate3d(calc(var(--mo-y) * -1),0,0)}  /* 안쪽(왼쪽)에서 들어온다 — 오른쪽 가장자리 요소가 화면 밖으로 나가지 않게 */
.rv.rv-scale{transform:scale(.95)}
.rv.rv-fast{--mo-y:24px;transition-duration:.6s,.75s;transition-delay:calc(var(--i,0) * .06s)}
.rv.on{opacity:1;transform:none}
/* 리빌 끝난 뒤에는 GPU 힌트를 걷어 카드 hover 그림자가 깨끗하게 그려지게 한다 */
.rv.on.rv-settled{will-change:auto}

/* ── 2. 히어로 등장 시퀀스 ─────────────────────────────────────────────────
   배경 scale(1.1)→1 · 제목 42px 상승 · 부제 지연 · 아이는 옆에서. 인트로 스플래시는 없다. */
html[data-palette] .discovery-hero{position:relative;overflow:hidden}
html[data-palette] .discovery-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(60% 80% at 82% 50%,rgba(148,88,11,.10),transparent 70%);
 opacity:0;transform:scale(1.1);transition:opacity 1.4s var(--mo-out),transform 1.8s var(--mo-out)}
html[data-palette] .discovery-hero.is-on::before{opacity:1;transform:none}
html[data-palette] .discovery-hero .eyebrow,
html[data-palette] .discovery-hero h1,
html[data-palette] .discovery-hero .discovery-copy>p{
 opacity:0;transform:translate3d(0,var(--mo-y),0);
 transition:opacity .9s var(--mo-out),transform 1.2s var(--mo-out)}
html[data-palette] .discovery-hero .discovery-art{
 opacity:0;transform:translate3d(var(--mo-y),0,0) scale(.94);
 transition:opacity 1s var(--mo-out),transform 1.4s var(--mo-out)}
html[data-palette] .discovery-hero.is-on .eyebrow{opacity:1;transform:none;transition-delay:.05s}
html[data-palette] .discovery-hero.is-on h1{opacity:1;transform:none;transition-delay:.18s}
html[data-palette] .discovery-hero.is-on .discovery-copy>p{opacity:1;transform:none;transition-delay:.42s}
html[data-palette] .discovery-hero.is-on .discovery-art{opacity:1;transform:none;transition-delay:.3s}
/* 부엉이는 등장 후 6초 주기로 살짝 떠 있다(상시 미세 부유). 별은 이미지 안에 있어 함께 움직인다. */
@keyframes mo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
html[data-palette] .discovery-hero.is-on .brand-owl{animation:mo-float 6s ease-in-out 1.6s infinite}

/* ── 3. 숫자 세기 ───────────────────────────────────────────────────────────
   통계 4칸의 숫자가 0에서 올라온다. 자릿수가 바뀌어도 폭이 흔들리지 않게 tabular. */
html[data-palette] .trust-strip li b{font-variant-numeric:tabular-nums}

/* ── 4. 호버·누름 물성 ──────────────────────────────────────────────────────
   커서가 있는 기기에서만 호버를 건다. 터치는 .is-pressed 로 누름만 표현한다. */
html[data-palette] .notice-card{
 transition:transform .5s var(--mo-spring),box-shadow .5s var(--mo-spring),border-color .3s}
html[data-palette] .rail-card{transition:transform .5s var(--mo-spring),box-shadow .5s var(--mo-spring)}
html[data-palette] .categories .category{transition:transform .45s var(--mo-spring),background .3s,border-color .3s,box-shadow .45s var(--mo-spring)}
html[data-palette] .categories .category .cat-icon{transition:transform .45s var(--mo-spring),background .3s,color .3s}
html[data-palette] a.primary,
html[data-palette] .search button,
html[data-palette] .filter-row .pill,
html[data-palette] #reset,
html[data-palette] .audience-switch a,
html[data-palette] .side-nav a,
html[data-palette] .save-button{transition:transform .4s var(--mo-spring),background .3s,color .3s,border-color .3s,box-shadow .4s var(--mo-spring)}
html[data-palette] a.primary svg,html[data-palette] .support-send svg,html[data-palette] .search button svg{transition:transform .4s var(--mo-spring)}

@media(hover:hover){
 html[data-palette] .notice-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px var(--mo-shadow),0 2px 6px rgba(44,38,25,.06)}
 html[data-palette] .rail-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px -16px var(--mo-shadow)}
 html[data-palette] .categories .category:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px var(--mo-shadow);border-color:var(--warm-main)}
 html[data-palette] .categories .category:hover .cat-icon{transform:scale(1.06);background:var(--warm-main);color:#fff}
 html[data-palette] a.primary:hover,html[data-palette] .search button:hover{transform:scale(1.02)}
 html[data-palette] a.primary:hover svg,html[data-palette] .search button:hover svg{transform:translateX(3px)}
 html[data-palette] .filter-row .pill:hover,html[data-palette] #reset:hover,html[data-palette] .audience-switch a:hover{transform:translateY(-1px)}
 html[data-palette] .side-nav a:hover{transform:translateX(3px)}
 html[data-palette] .save-button:hover{transform:scale(1.08)}
}
html[data-palette] a.primary:active,html[data-palette] .search button:active,
html[data-palette] .filter-row .pill:active,html[data-palette] #reset:active,
html[data-palette] .categories .category:active,html[data-palette] .audience-switch a:active,
html[data-palette] .is-pressed{transform:scale(.98)!important;transition-duration:.12s}
html[data-palette] .notice-card:active{transform:translateY(-1px) scale(.995)}

/* 관심 저장을 누르면 북마크가 한 번 튄다 */
@keyframes mo-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
html[data-palette] .save-button.saved svg{animation:mo-pop .45s var(--mo-spring)}

/* ── 5. 토스트 ──────────────────────────────────────────────────────────────── */
@keyframes mo-toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
#toast:not(:empty){animation:mo-toast .45s var(--mo-out)}

/* ── 6. 상담 버튼 — 우측 하단 ───────────────────────────────────────────────
   사용자 요청: 채팅은 우측 하단. 2차 보완의 왼쪽 배치·본문 끝 배치를 이 파일이 대체한다.
   좁은 화면에서는 원형 아이콘 버튼으로 줄여 글을 덮는 면적을 106×44 → 52×52 로 줄이고
   하단 고정 메뉴 위에 띄운다. */
html[data-palette] .support-launcher,
html[data-palette] body[data-route] .support-launcher{
 position:fixed;left:auto;right:max(24px,calc((100vw - 1440px)/2 + 24px));bottom:24px;
 margin:0;width:auto;height:52px;padding:0 20px 0 16px;gap:9px;
 display:inline-flex;align-items:center;justify-content:center;
 background:var(--warm-deep);color:#fff;border-radius:999px;
 box-shadow:0 14px 34px -12px rgba(122,73,9,.55),0 2px 6px rgba(44,38,25,.10);
 transform:translateY(24px) scale(.6);opacity:0;
 transition:transform .7s var(--mo-spring),opacity .5s var(--mo-out),box-shadow .4s var(--mo-spring),background .3s}
html[data-palette] .support-launcher.is-in,
html[data-palette] body[data-route] .support-launcher.is-in{transform:none;opacity:1}
html[data-palette] .support-launcher svg{width:19px;height:19px;transition:transform .4s var(--mo-spring)}
html[data-palette] .support-launcher span{font-weight:700;font-size:13.5px;letter-spacing:-.2px}
/* 도착 뒤 한 번, 그리고 12초마다 한 번 링이 퍼진다. 종을 흔드는 것은 커서를 올렸을 때뿐이다. */
html[data-palette] .support-launcher::after{content:"";position:absolute;inset:0;border-radius:inherit;
 border:2px solid var(--warm-main);opacity:0;pointer-events:none;transform:scale(1)}
@keyframes mo-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
html[data-palette] .support-launcher.is-in:not([aria-expanded="true"])::after{animation:mo-ring 2.2s var(--mo-out) 1.2s infinite;animation-delay:1.2s;animation-duration:12s}
@keyframes mo-bell{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@media(hover:hover){
 html[data-palette] .support-launcher:hover{transform:scale(1.04);box-shadow:0 18px 40px -12px rgba(122,73,9,.6),0 2px 6px rgba(44,38,25,.10)}
 html[data-palette] .support-launcher:hover svg{animation:mo-bell .7s var(--mo-spring)}
}
html[data-palette] .support-launcher:active{transform:scale(.97)}
html[data-palette] .support-launcher[aria-expanded="true"]{background:var(--warm-main)}
html[data-palette] .support-launcher[aria-expanded="true"] svg{transform:rotate(-12deg) scale(.9)}

@media(max-width:899px){
 html[data-palette] .support-launcher,
 html[data-palette] body[data-route] .support-launcher{
  right:14px;bottom:calc(60px + 14px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;padding:0;border-radius:50%}
 html[data-palette] .support-launcher span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-palette] .support-launcher svg{width:22px;height:22px}
}

/* ── 7. 상담창 ───────────────────────────────────────────────────────────────
   버튼 바로 위, 우측 하단. 황토 헤더·흰 본문. 말풍선은 본사=흰 바탕 왼쪽, 나=황토 오른쪽. */
html[data-palette] .support-panel{
 position:fixed;left:auto;right:max(24px,calc((100vw - 1440px)/2 + 24px));bottom:88px;
 width:min(384px,calc(100vw - 28px));max-height:min(680px,calc(100dvh - 112px));
 display:flex;flex-direction:column;overflow:hidden;
 background:#fff;border:1px solid var(--warm-line);border-radius:20px;color:var(--warm-ink);
 box-shadow:0 32px 80px -24px rgba(122,73,9,.35),0 6px 18px rgba(44,38,25,.08);
 transform-origin:100% 100%}
html[data-palette] .support-panel[hidden]{display:none}
@keyframes mo-panel-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mo-panel-out{to{opacity:0;transform:translateY(12px) scale(.97)}}
html[data-palette] .support-panel:not([hidden]){animation:mo-panel-in .5s var(--mo-spring)}
html[data-palette] .support-panel.is-closing{animation:mo-panel-out .22s ease-in forwards;pointer-events:none}

html[data-palette] .support-panel>header{
 flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;
 background:var(--warm-soft);border-bottom:1px solid var(--warm-line)}
html[data-palette] .support-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
 background:var(--warm-deep);color:#fff;flex:0 0 auto}
html[data-palette] .support-mark svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
html[data-palette] .support-panel h2{font-size:15.5px;font-weight:700;letter-spacing:-.3px;margin:0;line-height:1.3}
html[data-palette] .support-panel>header p{margin:3px 0 0;font-size:12.5px;color:var(--warm-sub);display:flex;align-items:center;gap:6px}
html[data-palette] .support-panel>header p::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warm-main);
 box-shadow:0 0 0 3px rgba(148,88,11,.18)}
html[data-palette] .support-close{margin-left:auto;align-self:center;width:36px;height:36px;min-width:36px;min-height:36px;
 border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;color:var(--warm-sub);background:transparent;
 transition:background .3s,transform .4s var(--mo-spring),color .3s}
@media(hover:hover){html[data-palette] .support-close:hover{background:#fff;color:var(--warm-ink);transform:rotate(90deg)}}

/* 본문은 헤더 아래에서만 스크롤한다 */
html[data-palette] #support-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
 padding:0 18px;scrollbar-width:thin}
html[data-palette] .support-intro{padding:18px 0 6px}
html[data-palette] .support-intro b{font-size:15px;letter-spacing:-.2px}
html[data-palette] .support-intro p{font-size:13px;line-height:1.7;color:var(--warm-sub);margin:6px 0 0}

html[data-palette] .support-history{padding:6px 0 4px;max-height:none;overflow:visible}
html[data-palette] .support-history h3{font-size:12px;font-weight:700;color:var(--warm-sub);letter-spacing:.2px;margin:0 0 6px}
html[data-palette] .support-history button{
 display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
 padding:11px 12px;margin:0 0 6px;border:1px solid var(--warm-line);border-radius:12px;background:#fff;
 font-size:13px;color:var(--warm-ink);transition:transform .4s var(--mo-spring),border-color .3s,background .3s}
@media(hover:hover){html[data-palette] .support-history button:hover{transform:translateX(3px);border-color:var(--warm-main);background:var(--warm-bg)}}
html[data-palette] .support-history small{display:block;font-size:12px;color:var(--warm-sub);margin-top:3px}
html[data-palette] .support-history em{font-size:12px;font-style:normal;color:var(--warm-deep);background:var(--warm-soft);
 padding:3px 8px;border-radius:999px;white-space:nowrap}
html[data-palette] .support-pagination{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--warm-sub);padding:2px 0 6px}
html[data-palette] .support-pagination button{min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--warm-line);background:#fff;font-size:12px;color:var(--warm-ink)}
html[data-palette] .support-pagination button:disabled{opacity:.4}
html[data-palette] #support-delete{display:block;margin:0 0 8px;font-size:12px;color:var(--warm-sub);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:6px 0;min-height:32px}

html[data-palette] .support-panel form{padding:6px 0 18px;display:grid;gap:8px}
html[data-palette] .support-panel label{font-size:12.5px;font-weight:700;color:var(--warm-ink);margin-top:4px}
html[data-palette] .support-panel input:not([type=checkbox]),html[data-palette] .support-panel textarea,html[data-palette] .support-panel select{
 width:100%;border:1px solid var(--warm-line);background:var(--warm-bg);border-radius:12px;padding:12px 13px;
 font:14px/1.6 Pretendard,sans-serif;color:var(--warm-ink);transition:border-color .3s,box-shadow .3s,background .3s}
html[data-palette] .support-panel textarea{resize:vertical;min-height:92px}
html[data-palette] .support-panel textarea:focus,html[data-palette] .support-panel select:focus{
 outline:none;border-color:var(--warm-main);background:#fff;box-shadow:0 0 0 3px rgba(148,88,11,.14)}
html[data-palette] .support-panel label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;margin:0}
html[data-palette] .support-panel input[type=checkbox]{width:18px;height:18px;accent-color:var(--warm-main);margin:0}
html[data-palette] .support-note{font-size:12px;line-height:1.65;color:var(--warm-sub);margin:2px 0 0}
html[data-palette] .support-note a{color:var(--warm-deep)}
/* 보내기 — 알약 + 화살표 원 (soft-skill 의 CTA 구조) */
html[data-palette] .support-send{
 margin-top:8px;width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:10px;
 background:var(--warm-deep);color:#fff;border-radius:999px;padding:0 6px 0 18px;font:700 14px Pretendard,sans-serif;
 transition:transform .4s var(--mo-spring),background .3s,box-shadow .4s var(--mo-spring)}
html[data-palette] .support-send svg{width:16px;height:16px;padding:7px;box-sizing:content-box;border-radius:50%;background:rgba(255,255,255,.16);margin-left:auto}
@media(hover:hover){html[data-palette] .support-send:hover{transform:scale(1.02);background:var(--warm-main);box-shadow:0 12px 26px -12px rgba(122,73,9,.6)}
 html[data-palette] .support-send:hover svg{transform:translateX(3px)}}
html[data-palette] .support-send:active{transform:scale(.98)}
html[data-palette] .support-send:disabled{opacity:.5;transform:none}
html[data-palette] .support-error{padding:0 18px 10px;color:#9A3B1E;font-size:12.5px;line-height:1.6}
html[data-palette] .support-error:empty{padding:0}

/* 대화 화면 */
html[data-palette] .support-thread-head{display:flex;justify-content:space-between;align-items:center;padding:12px 0 8px;font-size:12.5px;color:var(--warm-sub);
 position:sticky;top:0;background:#fff;z-index:1}
html[data-palette] .support-thread-head button{font-size:12.5px;color:var(--warm-deep);background:var(--warm-soft);border-radius:999px;padding:6px 12px;min-height:32px;
 transition:transform .4s var(--mo-spring),background .3s}
@media(hover:hover){html[data-palette] .support-thread-head button:hover{transform:translateX(-3px)}}
html[data-palette] #support-thread-status{background:var(--warm-bg);border:1px solid var(--warm-line);border-radius:999px;padding:4px 10px;font-size:12px}
html[data-palette] #support-messages{display:flex;flex-direction:column;gap:12px;padding:6px 0 10px;min-height:120px}
@keyframes mo-bubble{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
html[data-palette] .support-message{max-width:86%;align-self:flex-start;animation:mo-bubble .4s var(--mo-spring) both}
html[data-palette] .support-message:nth-child(2){animation-delay:.05s}
html[data-palette] .support-message:nth-child(3){animation-delay:.1s}
html[data-palette] .support-message:nth-child(4){animation-delay:.15s}
html[data-palette] .support-message small{display:block;font-size:11.5px;color:var(--warm-sub);margin:0 0 4px 4px}
html[data-palette] .support-message p{margin:0;font-size:13.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;
 background:#fff;border:1px solid var(--warm-line);color:var(--warm-ink);padding:10px 13px;border-radius:4px 16px 16px 16px;
 box-shadow:0 2px 8px rgba(44,38,25,.05)}
html[data-palette] .support-message.from-me{align-self:flex-end}
html[data-palette] .support-message.from-me small{text-align:right;margin:0 4px 4px 0}
html[data-palette] .support-message.from-me p{background:var(--warm-deep);border-color:var(--warm-deep);color:#fff;border-radius:16px 4px 16px 16px}
html[data-palette] #support-reply{position:sticky;bottom:0;background:#fff;padding-top:10px;border-top:1px solid var(--warm-line);margin-top:4px}
html[data-palette] #support-reply textarea{min-height:64px}

@media(max-width:899px){
 html[data-palette] .support-panel{
  right:12px;left:12px;width:auto;bottom:calc(60px + 14px + 52px + 12px + env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - 60px - 14px - 52px - 12px - 24px - env(safe-area-inset-bottom,0px));border-radius:18px}
 html[data-palette] .support-panel textarea,html[data-palette] .support-panel select{font-size:16px}  /* iOS 확대 방지 */
}

/* ── 8. 움직임을 줄여 달라는 기기 ────────────────────────────────────────────
   자리 이동이 큰 것만 끄고 투명도 변화는 남긴다. */
@media(prefers-reduced-motion:reduce){
 :root{--mo-y:0px}
 .rv,.rv.rv-x,.rv.rv-scale{transform:none;transition-duration:.4s}
 html[data-palette] .discovery-hero .eyebrow,html[data-palette] .discovery-hero h1,
 html[data-palette] .discovery-hero .discovery-copy>p,html[data-palette] .discovery-hero .discovery-art{transform:none}
 html[data-palette] .discovery-hero.is-on .brand-owl{animation:none}
 html[data-palette] .support-launcher{transform:none}
 html[data-palette] .support-launcher.is-in:not([aria-expanded="true"])::after{animation:none}
 html[data-palette] .support-panel:not([hidden]){animation-duration:.2s}
}

/* 연결 실패 상태 — 안내와 다시 연결 버튼 */
html[data-palette] #support-body>p:first-child:not(.support-intro){margin:18px 0 10px;font-size:14px;line-height:1.6;color:var(--warm-ink)}
html[data-palette] .support-retry{
 margin:0 0 14px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--warm-line);
 background:var(--warm-soft);color:var(--warm-deep);font:700 13px Pretendard,sans-serif;
 transition:transform .4s var(--mo-spring),background .3s,border-color .3s}
@media(hover:hover){html[data-palette] .support-retry:hover{transform:scale(1.03);background:#fff;border-color:var(--warm-main)}}
html[data-palette] .support-retry:active{transform:scale(.98)}

/* 내 조건 마법사(모바일)는 하단 고정 메뉴 위에 '다음' 조작 바(54px)가 붙어 있다.
   상담 버튼이 그 오른쪽 끝을 덮지 않도록 조작 바 위로 한 칸 올린다. */
@media(max-width:899px){
 html[data-palette] body[data-route="profile"] .support-launcher{
  bottom:calc(60px + 12px + 54px + 14px + env(safe-area-inset-bottom,0px))}
 html[data-palette] body[data-route="profile"] .support-panel{
  bottom:calc(60px + 12px + 54px + 14px + 52px + 12px + env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - 60px - 12px - 54px - 14px - 52px - 12px - 24px - env(safe-area-inset-bottom,0px))}
}