/* ============================================================
   베일리온 그룹웨어 홈페이지 시안 — styles.css
   디자인 토큰은 02_디자인_스타일가이드.md 와 1:1 대응
   ============================================================ */

:root{
  /* Brand — 지정 팔레트 (Accent Indigo + Dark Neutral) */
  --c-primary:#5A5AF5; --c-primary-dark:#4646E0; --c-primary-deep:#3B3BC2; --c-primary-50:#ECECFE;
  --c-accent:#3B3BC2;
  --grad:linear-gradient(120deg,#ECECFE 0%,#4646E0 100%);      /* 시그니처 그라디언트: Indigo 50 → Indigo 600 (장식용) */
  --grad-btn:linear-gradient(120deg,#5A5AF5 0%,#4646E0 100%);  /* 흰 글씨용 진한 그라디언트: 버튼·CTA·솔리드 */
  --grad-soft:linear-gradient(120deg,#ECECFE 0%,#F4F6FA 100%);
  /* Neutral */
  --ink-900:#212424; --ink-800:#2C2F2F;
  --g-900:#212424; --g-700:#4A4D4D; --g-500:#898A89;
  --g-300:#CBD0D4; --g-200:#E2E5EA; --g-100:#F4F6FA; --g-50:#F8F9FB; --white:#fff;
  /* 🔴 아래 네 개는 **쓰이고 있는데 정의가 없었다**(2026-08-17 추가).
     CSS 는 모르는 변수를 만나면 그 선언 전체를 무효로 만들 뿐 **에러를 내지 않는다** —
     `color:var(--g-400)` 이 통째로 사라지고 부모 색을 상속하므로 화면은 "그럭저럭" 보인다.
     그래서 공지 날짜·카드 본문·챗봇 말풍선이 전부 본문색으로 렌더되고 있었고 아무도 몰랐다.
     ⚠️ **색상 스케일대로 채우면 안 된다.** --g-400 을 300~500 사이 값(#ABADAF)으로 넣으면
        흰 배경 대비가 8.54:1 → **2.25:1** 로 떨어져 지금보다 나빠진다(미정의 상태가 오히려 나았다).
        그래서 '본문(--g-700)보다 옅되 WCAG AA(4.5:1)는 넘는' 값을 골랐다. 괄호 안이 실측 대비다. */
  --g-400:#6B6E70;   /* 5.14:1 — 날짜·메타 등 덜 중요한 글 */
  --g-600:#5A5D5D;   /* 6.65:1 — 카드 본문 */
  --g-800:#363838;   /* 11.8:1 — 버튼 라벨·챗봇 답변 */
  --c-text-muted:var(--g-400);   /* 법무·안내 페이지의 시행일·캡션이 쓰던 이름 */
  /* Radius */
  --r-btn:12px; --r-card:16px; --r-lg:20px; --r-pill:999px;
  /* Shadow */
  --sh-sm:0 1px 2px rgba(16,22,45,.06);
  --sh-md:0 8px 24px rgba(16,22,45,.08);
  --sh-lg:0 24px 60px rgba(16,22,45,.14);
  --sh-glow:0 12px 40px rgba(90,90,245,.32);
  /* Layout */
  --maxw:1200px; --sec:clamp(64px,10vw,128px);
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--g-700);line-height:1.7;letter-spacing:-0.8px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:break-word;
  /* 화면 가장자리 깊이감: 스크롤해도 고정된 은은한 브랜드 틴트 글로우(코너 2곳) */
  background:
    radial-gradient(720px 560px at -6% -8%, var(--c-primary-50) 0%, transparent 55%),
    radial-gradient(720px 560px at 106% 108%, var(--c-primary-50) 0%, transparent 55%),
    var(--white);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* Layout helpers */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:var(--sec) 0}
.center{text-align:center}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-primary);margin-bottom:14px;
}
.section-title{font-size:clamp(26px,4vw,34px);font-weight:800;color:var(--g-900);letter-spacing:-.02em;line-height:1.25}
/* 타이틀 키워드 강조: 항상 온전한 색으로 표시(스크롤 채움 효과에서 제외됨) */
.tw{background:var(--grad-btn);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 어두운 배경(AI 밴드)에서는 밝은 보라 그라데이션으로 대비 확보 */
.ai-band .tw{background:linear-gradient(100deg,#C7C7FF,#8F8FF9);-webkit-background-clip:text;background-clip:text}
/* 스크롤 채움 타이틀: site.js가 타이틀 전체의 클립 그라데이션 위치를 스크롤 진행률에 따라 갱신 */
.fill-t{-webkit-background-clip:text;background-clip:text;color:transparent}
.section-lead{font-size:18px;color:var(--g-500);margin-top:16px;max-width:640px}
.center .section-lead{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--r-btn);font-weight:700;font-size:16px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap;
}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:var(--sh-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(90,90,245,.42)}
.btn-secondary{background:#fff;color:var(--g-900);border:1px solid var(--g-300)}
.btn-secondary:hover{border-color:var(--c-primary);color:var(--c-primary)}
.btn-ghost{color:var(--g-700);height:40px;padding:0 14px}
.btn-ghost:hover{color:var(--c-primary)}
.btn-sm{height:40px;font-size:15px;padding:0 18px}
.btn-white{background:#fff;color:var(--c-primary)}
.btn-white:hover{transform:translateY(-2px)}
.btn-block{width:100%}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--c-primary-50);color:var(--c-primary);font-size:12px;font-weight:700}
.badge-solid{background:rgba(90,90,245,.14);color:var(--c-primary-deep)}

/* ============ 히어로 인트로 (첫 진입 시 전체 화면 텍스트 인트로, 홈 전용) ============ */
.intro-overlay{position:fixed;inset:0;z-index:500;overflow:hidden}
.intro-panel{
  position:absolute;left:0;width:100%;height:50%;background-size:100vw 100vh;
  background-image:
    radial-gradient(900px 700px at 26% 20%, rgba(90,90,245,.35) 0%, transparent 60%),
    radial-gradient(900px 700px at 82% 88%, rgba(90,90,245,.22) 0%, transparent 60%),
    linear-gradient(var(--ink-900),var(--ink-900));
  transition:transform .26s cubic-bezier(.85,0,.15,1);
}
.intro-panel-top{top:0;background-position:0 0}
.intro-panel-bottom{bottom:0;background-position:0 -50vh}
.intro-panel-top.split{transform:translateY(-100%)}
.intro-panel-bottom.split{transform:translateY(100%)}

.intro-stage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}
/* 🔴 **줄바꿈을 허용한다**(2026-08-13 사용자 신고 — 모바일 첫 진입에서 문구가 좌우로 잘림).
   예전엔 `flex-wrap:nowrap` 이라 세 마디가 무조건 한 줄이었다. 폰트는 이미 clamp 최솟값(32px)이라
   더 줄지 않고, `.intro-overlay{overflow:hidden}` 이 넘친 부분을 **양쪽에서 잘라** 먹었다
   (실측: 뷰포트 375px 에 필요 폭 429px → 54px 초과. 가운데 정렬이라 양끝이 동시에 잘린다).
   폰트를 더 줄이는 대신 **접히게** 두는 편이 낫다 — 문구가 길어져도 다시 안 깨진다.
   ⚠️ 접혀도 등장 연출은 그대로다. 마스크(.intro-mask)가 **단어마다** overflow:hidden 이라
      줄이 나뉘어도 각 단어가 제 마스크 안에서 올라온다. */
.intro-words{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.18em clamp(22px,4.2vw,52px);   /* 세로 간격은 글자 크기에 비례(줄 사이가 뜨지 않게) */
  max-width:100%;padding:0 16px;box-sizing:border-box;
  transition:transform .17s cubic-bezier(.6,0,.75,.35),opacity .17s cubic-bezier(.6,0,.75,.35);
}
.intro-words.collapse{transform:scaleY(.04);opacity:0}
/* 각 단어를 overflow:hidden 마스크로 감싸고, 아래에서 위로 스르륵 올라오게 */
.intro-mask{display:inline-block;overflow:hidden}
.intro-word{
  display:inline-block;font-size:clamp(27px,6vw,76px);font-weight:900;color:#fff;letter-spacing:-.02em;
  white-space:nowrap;
  transform:translateY(112%);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.intro-word.in{transform:translateY(0)}

.intro-line{
  position:absolute;left:50%;top:50%;width:100vw;height:3px;background:#fff;border-radius:2px;
  box-shadow:0 0 22px rgba(255,255,255,.9),0 0 60px rgba(139,139,255,.55);
  transform:translate(-50%,-50%) scaleX(.18);opacity:0;
  transition:opacity .14s ease,transform .24s cubic-bezier(.8,0,.2,1);
}
.intro-line.show{opacity:1}
.intro-line.grow{transform:translate(-50%,-50%) scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .intro-panel,.intro-words,.intro-word,.intro-line{
    transition:none!important;transform:none!important;translate:none!important;scale:none!important;
  }
}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;transition:background .2s,box-shadow .2s}
.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);box-shadow:var(--sh-sm);border-bottom:1px solid var(--g-100)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--g-900);letter-spacing:-.02em}
.logo .mark{width:30px;height:30px;border-radius:9px;background:#fff;box-shadow:var(--sh-md);display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 14px;border-radius:8px;font-weight:600;color:var(--g-700);font-size:15px}
.nav-links a:hover{color:var(--c-primary);background:var(--c-primary-50)}
/* 고객 지원 드롭다운 */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-t{display:flex;align-items:center;gap:4px}
.nav-drop .caret{font-size:10px;transition:transform .2s}
.nav-drop:hover .caret,.nav-drop:focus-within .caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:0;min-width:184px;background:#fff;border:1px solid var(--g-100);border-radius:12px;box-shadow:var(--sh-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:120}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(4px)}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--g-700)}
.nav-drop-menu a:hover{background:var(--c-primary-50);color:var(--c-primary)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;width:44px;height:44px;border-radius:10px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--g-900);margin:4px auto;border-radius:2px}

/* ============ HERO ============ */
.hero{position:relative;padding:72px 0 0;overflow:hidden;background:radial-gradient(1200px 600px at 70% -10%,#ECECFE 0%,transparent 60%),var(--white)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(30px,4.6vw,47px);font-weight:900;line-height:1.26;letter-spacing:-.03em;color:var(--g-900)}
@media(min-width:961px){.hero h1{white-space:nowrap}}
.hero h1 .grad{background:var(--grad-btn);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:grad-shimmer 6s ease-in-out infinite}

/* ── 히어로 후킹 애니메이션 ──
   인트로가 끝나는 순간(body.intro-done) 카피가 순차 등장하고,
   목업 채팅이 실제 대화가 도착하듯 시간차로 나타남.
   JS 미작동 시(클래스 없음) 모든 요소 정상 노출 → intro-wait 상태에서만 숨김 */
body.intro-wait .hero-copy .badge,body.intro-wait .hero-copy h1,body.intro-wait .hero-copy .sub,
body.intro-wait .hero-copy .hero-cta,body.intro-wait .hero-copy .hero-note,
body.intro-wait .hero-visual .mockup,body.intro-wait .hero-visual .mk-msg,body.intro-wait .hero-visual .mk-float{opacity:0}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes win-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes msg-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
body.intro-done .hero-copy .badge{animation:rise-in .4s cubic-bezier(.2,.7,.2,1) .03s backwards}
body.intro-done .hero-copy h1{animation:rise-in .4s cubic-bezier(.2,.7,.2,1) .10s backwards}
body.intro-done .hero-copy .sub{animation:rise-in .4s cubic-bezier(.2,.7,.2,1) .17s backwards}
body.intro-done .hero-copy .hero-cta{animation:rise-in .4s cubic-bezier(.2,.7,.2,1) .24s backwards}
body.intro-done .hero-copy .hero-note{animation:rise-in .4s cubic-bezier(.2,.7,.2,1) .31s backwards}
/* 목업 창 자체가 먼저 떠오른 뒤, 그 안에서 메시지가 순차 도착 */
body.intro-done .hero-visual .mockup{animation:win-in .42s cubic-bezier(.2,.7,.2,1) .18s backwards}
body.intro-done .hero-visual .mk-msg:nth-child(1){animation:msg-pop .38s cubic-bezier(.34,1.4,.5,1) .62s backwards}
body.intro-done .hero-visual .mk-msg:nth-child(2){animation:msg-pop .38s cubic-bezier(.34,1.4,.5,1) .90s backwards}
body.intro-done .hero-visual .mk-float.ai{animation:msg-pop .4s cubic-bezier(.34,1.5,.5,1) 1.18s backwards,float-pulse 3s 1.6s ease-in-out infinite}
body.intro-done .hero-visual .mk-float.appr{animation:msg-pop .4s cubic-bezier(.34,1.5,.5,1) 1.36s backwards,float-pulse 3s 3.4s ease-in-out infinite}
/* 히어로 목업: 세로를 눌러 가로가 길어 보이는 비율로 */
.hero-visual .mockup-body{min-height:230px}
.hero-visual .mk-chat{gap:8px}
.hero p.sub{font-size:clamp(16px,2vw,19px);color:var(--g-500);margin:22px 0 32px;max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:14px;color:var(--g-500);display:flex;align-items:center;gap:8px}
.hero-note .dot{color:var(--c-primary)}

/* 히어로 제품 목업 뒤 시그니처 그라디언트 배경 패널 */
.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;inset:-22px -16px -28px 10px;background:var(--grad);border-radius:28px;transform:rotate(-2deg);z-index:0;box-shadow:var(--sh-lg)}

/* Product mockup (pure CSS/SVG) */
.mockup{position:relative;z-index:1;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-lg);border:1px solid var(--g-200);overflow:hidden}
.mockup-top{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--g-50);border-bottom:1px solid var(--g-100)}
.mockup-ws{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--g-900);flex-shrink:0;white-space:nowrap}
.mockup-ws-ico{width:18px;height:18px;border-radius:5px;background:var(--grad-btn);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800;flex-shrink:0}
.mockup-chan{font-size:11px;font-weight:700;color:var(--g-500);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px;border-left:1px solid var(--g-200)}
.mockup-top-r{font-size:10px;font-weight:700;color:var(--g-500);flex-shrink:0}
.mockup-body{display:grid;grid-template-columns:26px 118px 1fr;min-height:280px}
.mk-rail{background:#15161c;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:9px}
.mk-rail-ico{font-size:12px;opacity:.5;width:20px;height:20px;display:grid;place-items:center;border-radius:6px}
.mk-rail-ico.on{opacity:1;background:rgba(90,90,245,.35)}
.mk-side{background:var(--ink-900);padding:13px 10px;display:flex;flex-direction:column;gap:14px}
.mk-side-label{font-size:10px;font-weight:700;color:#7d8290;text-transform:uppercase;letter-spacing:.03em;margin-bottom:7px}
.mk-chan{font-size:11px;font-weight:600;color:#c7cad3;padding:6px 8px;border-radius:7px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-chan.on{background:rgba(90,90,245,.35);color:#fff}
.mk-dm{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#c7cad3;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-dm-ico{width:9px;height:9px;border-radius:50%;background:var(--grad-btn);flex-shrink:0}
.mk-main{padding:13px 15px;background:var(--g-50)}
.mk-tabs{display:flex;gap:4px;margin-bottom:11px;flex-wrap:wrap}
.mk-tab{font-size:10px;font-weight:700;color:var(--g-500);padding:6px 9px;border-radius:7px;white-space:nowrap}
.mk-tab.on{background:#fff;color:var(--c-primary-deep);box-shadow:var(--sh-sm)}
.mk-chat{display:flex;flex-direction:column;gap:9px}
.mk-msg{display:flex;gap:8px;align-items:flex-start}
.mk-av{flex:0 0 22px;width:22px;height:22px;border-radius:6px;background:var(--c-primary-50);color:var(--c-primary-deep);display:grid;place-items:center;font-weight:800;font-size:10px}
.mk-bub{background:#fff;border:1px solid var(--g-100);border-radius:10px;padding:7px 9px;flex:1;min-width:0}
.mk-bub b{display:block;font-size:10.5px;color:var(--g-900);margin-bottom:2px}
.mk-bub p{margin:0 0 6px;font-size:10.5px;line-height:1.45;color:var(--g-700)}
.mk-filechip{display:flex;align-items:center;gap:8px;background:var(--g-50);border-radius:8px;padding:7px 9px}
.mk-filechip span{font-size:14px;flex-shrink:0}
.mk-filechip .fn{font-size:10px;font-weight:700;color:var(--g-900)}
.mk-filechip .fm{font-size:9px;color:var(--g-500);margin-top:1px}
.mk-reactions{display:flex;gap:6px;margin-top:8px}
.mk-reaction{display:inline-flex;align-items:center;gap:4px;background:var(--c-primary-50);color:var(--c-primary-deep);font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:20px}
.mk-reaction b{font-weight:800}
.mk-replies{margin-top:7px;font-size:9.5px;font-weight:700;color:var(--c-primary-deep)}
.mockup-input{padding:8px 16px;border-top:1px solid var(--g-100);background:#fff;font-size:10.5px;color:var(--g-400)}
.mk-float{position:absolute;z-index:2;background:#fff;border-radius:12px;box-shadow:var(--sh-lg);border:1px solid var(--g-100);padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--g-900)}
/* 플로팅 배지: 두근두근 하듯 느리게 커졌다 작아지는 펄스 (두 배지는 타이밍 교차) */
@keyframes float-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.mk-float.ai{bottom:-18px;left:-22px;animation:float-pulse 3s ease-in-out infinite}
.mk-float .ai-ico{width:30px;height:30px;border-radius:9px;background:var(--grad-btn);display:grid;place-items:center;color:#fff}
.mk-float.appr{top:-14px;right:-16px;animation:float-pulse 3s ease-in-out infinite;animation-delay:1.5s}
.mk-float .ok{width:26px;height:26px;border-radius:50%;background:rgba(0,196,140,.15);color:var(--c-primary-deep);display:grid;place-items:center}

/* ============ LOGO STRIP ============ */
.logos{padding:40px 0;border-top:1px solid var(--g-100);border-bottom:1px solid var(--g-100)}
.logos p{text-align:center;font-size:14px;color:var(--g-500);margin-bottom:22px}
/* 기업 로고: 왼쪽으로 천천히 롤링되어 흐르는 마퀴 (동일한 세트 2개를 이어붙여 -50% 이동 시 무한 반복) */
.logo-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.logo-track{display:flex;width:max-content;animation:logo-roll 28s linear infinite}
.logo-set{display:flex;align-items:center;gap:64px;padding-right:64px;flex-shrink:0}
.logo-set span{font-size:28px;font-weight:800;color:var(--g-300);letter-spacing:-.02em;white-space:nowrap}
@keyframes logo-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ VALUE PROPS ============ */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.values-3{grid-template-columns:repeat(3,1fr)}
.v-card{background:#fff;border:1px solid var(--g-100);border-radius:var(--r-card);padding:28px;transition:transform .2s,box-shadow .2s}
.v-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.v-ico{width:48px;height:48px;border-radius:12px;background:var(--c-primary-50);display:grid;place-items:center;color:var(--c-primary);margin-bottom:16px}
.v-card h3{font-size:18px;font-weight:700;color:var(--g-900);margin-bottom:8px}
.v-card p{font-size:15px;color:var(--g-500)}

/* ============ 문제 제기 카드 (Why 베일리온 — 무게감 강조) ============ */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.problem-card{position:relative;background:#fff;border:1px solid var(--g-200);border-radius:20px;padding:40px 32px 36px;
  box-shadow:none;transition:transform .25s,box-shadow .25s}
.problem-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(90,90,245,.24)}
.problem-num{position:absolute;top:26px;right:30px;font-size:40px;font-weight:800;color:var(--c-primary-50);letter-spacing:-.02em;line-height:1}
.problem-ico{display:inline-block;font-size:52px;line-height:1.1;margin-bottom:24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.problem-card:hover .problem-ico{transform:scale(1.1) rotate(-4deg)}
.problem-card h3{font-size:22px;font-weight:700;color:var(--g-900);margin-bottom:12px;letter-spacing:-.01em}
.problem-card p{font-size:15.5px;color:var(--g-600);line-height:1.7}

/* ============ 차별점 카드 (아이콘 좌측, 가로형) ============ */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px}
.diff-card{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--g-100);border-radius:18px;padding:30px 32px;transition:transform .25s,box-shadow .25s,border-color .25s}
.diff-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c-primary-50)}
.diff-ico{flex:0 0 60px;width:60px;height:60px;border-radius:16px;background:var(--grad-soft);display:grid;place-items:center;font-size:28px;border:1px solid var(--c-primary-50);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.diff-card:hover .diff-ico{transform:scale(1.1) rotate(4deg)}
.diff-body h3{font-size:19px;font-weight:700;color:var(--g-900);margin-bottom:8px;letter-spacing:-.01em}
.diff-body p{font-size:15px;color:var(--g-600);line-height:1.65}

/* ============ 스택형 스크롤 기능 카드 ============ */
/* Features 섹션 전용 쇼케이스 배경 — 페이지 흰 배경과 흰 카드가 구분되도록 톤 차이를 줌
   (주의: 조상 요소에 overflow:hidden을 걸면 .stack-card의 position:sticky가 깨지므로
   배경은 pseudo-element 없이 section 자체 background로만 적용) */
.features-showcase{background:linear-gradient(180deg,#ECECFE 0%,#DDDCFA 45%,#C9C8F2 100%)}
.features-showcase .section-title{font-size:clamp(30px,4.6vw,44px)}
.stack-head{margin-bottom:40px}
.stack{position:relative;display:flex;flex-direction:column;gap:20px}
.stack-card{position:sticky;background:#fff;border:1.5px solid var(--c-primary-50);border-radius:22px;
  box-shadow:0 14px 34px rgba(90,90,245,.10);overflow:hidden;
  padding:32px 36px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;min-height:380px}
.stack-index{display:inline-flex;align-items:center;font-size:13px;font-weight:800;color:var(--c-primary-deep);
  letter-spacing:.06em;margin-bottom:14px;background:var(--c-primary-50);padding:6px 14px;border-radius:999px}
.stack-copy .badge{margin-bottom:12px}
.stack-copy h3{font-size:clamp(24px,3.2vw,34px);font-weight:900;color:var(--g-900);letter-spacing:-.02em;line-height:1.22;margin:0 0 10px}
.stack-copy p{font-size:15px;color:var(--g-500);line-height:1.6}
.stack-copy ul.checks{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.stack-copy ul.checks li{display:flex;align-items:flex-start;gap:10px;color:var(--g-700);font-weight:500;font-size:14.5px}
/* 파스텔 감싸는 박스 제거(이중 카드 방지) — 레이아웃용 flex만 유지 */
.stack-visual{background:transparent;border:none;padding:0;display:flex;flex-direction:column;justify-content:stretch;align-self:stretch}
/* 모든 카드의 예시 이미지(패널·목업) 크기를 동일하게: stack-visual 높이를 꽉 채움
   파스텔 박스가 사라졌으므로 예시 화면 자체에 또렷한 테두리+그림자로 외곽 카드와 구분 */
.stack-visual > .panel,
.stack-visual > .mockup{width:100%;height:100%;margin:0;display:flex;flex-direction:column;
  border:1px solid var(--g-200);box-shadow:0 14px 34px rgba(16,22,45,.13)}
.stack-visual > .panel .panel-b{flex:1;min-height:0;overflow:auto}
.stack-visual > .mockup .mockup-body{flex:1;min-height:0;overflow:hidden}

/* features.html: 카드 높이를 완전히 통일 (내용 길이와 무관하게 고정)
   grid-template-rows:minmax(0,1fr) — 단일 행을 카드 높이에 정확히 고정해
   내부 예시 이미지(패널·목업)의 height:100%가 모든 카드에서 동일 크기로 해석되게 함 */
#features .stack-card{height:415px;grid-template-rows:minmax(0,1fr)}

/* ============ FEATURE ROWS ============ */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat + .feat{margin-top:96px}
.feat.rev .feat-visual{order:-1}
.feat h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;color:var(--g-900);letter-spacing:-.02em;margin:14px 0 16px;line-height:1.25}
.feat p{font-size:17px;color:var(--g-500)}
.feat ul.checks{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.feat ul.checks li{display:flex;align-items:flex-start;gap:10px;color:var(--g-700);font-weight:500}
.check{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:rgba(90,90,245,.16);color:var(--c-primary-deep);display:grid;place-items:center;margin-top:2px}
.feat-visual{background:var(--grad-soft);border-radius:var(--r-lg);padding:28px;border:1px solid var(--g-100);display:flex;flex-direction:column;justify-content:center}
.feat-visual > .panel{width:100%}
/* 랜딩 Features 섹션: 교차 시각 카드 높이 균일 */
#features .feat-visual{min-height:344px}
.panel{background:#fff;border-radius:14px;box-shadow:var(--sh-md);border:1px solid var(--g-100);overflow:hidden}
.panel-h{padding:14px 16px;border-bottom:1px solid var(--g-100);font-weight:700;color:var(--g-900);font-size:14px;display:flex;justify-content:space-between;align-items:center}
.panel-b{padding:16px}
/* WBS rows */
.wbs-row{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--g-50)}
.wbs-row:last-child{border-bottom:none}
.wbs-name{font-size:13px;color:var(--g-700);font-weight:600}
.wbs-bar{height:8px;border-radius:4px;background:var(--g-100);position:relative;overflow:hidden}
.wbs-bar i{position:absolute;inset:0;width:var(--p,60%);background:var(--grad-btn);border-radius:4px}
/* Chat */
.chat{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .av{flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:var(--c-primary-50);color:var(--c-primary);display:grid;place-items:center;font-weight:800;font-size:13px}
.msg.me{flex-direction:row-reverse}
.msg .bub{background:var(--g-100);border-radius:12px;padding:9px 13px;font-size:13px;color:var(--g-700);max-width:80%}
.msg.me .bub{background:var(--c-primary);color:#fff}
.msg.me .av{background:var(--grad-btn);color:#fff}
/* Approval */
.appr-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--g-50)}
.appr-item:last-child{border:none}
.appr-item .t{font-size:13px;font-weight:600;color:var(--g-900)}
.appr-item .s{font-size:11px;color:var(--g-500)}
.st{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.st.ok{background:rgba(90,90,245,.16);color:var(--c-primary-deep)}
.st.wait{background:#FFF3D6;color:#B5820A}

/* ============ AI BAND (dark) ============ */
.ai-band{background:var(--ink-900);color:#fff;border-radius:0;position:relative;overflow:hidden}
.ai-band::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(90,90,245,.32),transparent 60%);top:-200px;right:-100px;animation:blob-drift 9s ease-in-out infinite}
.ai-band .container{position:relative}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ai-band .eyebrow{color:#B9B9FB}
.ai-band h2{font-size:clamp(26px,4vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.2;color:#fff}
.ai-band p{color:#A7ABB0;font-size:17px;margin-top:16px}
.ai-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ai-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 16px;font-size:14px;color:#DDE0E3}
.ai-demo{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:20px}
.ai-demo .q{background:rgba(255,255,255,.06);border-radius:12px;padding:12px 14px;font-size:14px;color:#CDD0D3;margin-bottom:14px;display:flex;gap:10px;align-items:center}
.ai-demo .a{display:flex;gap:12px}
.ai-demo .a .ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--grad-btn);display:grid;place-items:center}
.ai-demo .a .body{font-size:14px;color:#E9EBED;line-height:1.7}
.ai-demo .a .body .ln{height:9px;border-radius:5px;background:rgba(255,255,255,.14);margin:7px 0}
.ai-demo .a .body .ln.w1{width:92%}.ai-demo .a .body .ln.w2{width:74%}.ai-demo .a .body .ln.w3{width:60%}

/* AI 밴드: 페이지 세로 스크롤로 캐러셀이 옆으로 흐르는 스티키 구간 (데스크톱 전용)
   주의: sticky는 조상 overflow가 non-visible이면 깨지므로 wrap에는 overflow를 주지 않음
   (.ai-band 자신의 overflow:hidden은 자기 stickiness에 영향 없음) */
@media(min-width:961px){
  .ai-scroll-wrap{height:260vh}
  .ai-scroll-wrap .ai-band{position:sticky;top:0;height:100vh;padding:0;display:flex;align-items:center}
  .ai-scroll-wrap .ai-band>.container{width:100%}
  .ai-scroll-wrap .ai-carousel{scroll-snap-type:none;scroll-behavior:auto;overflow-x:hidden}
  /* 아이템 폭 고정 → 좌우 패딩 계산이 안정적(첫·마지막 카드가 정확히 중앙에 오도록) */
  .ai-scroll-wrap .ai-carousel .ai-item{flex:0 0 440px}
  .ai-scroll-wrap .ai-arrow{display:none}
}

/* AI 기능별 가로 캐러셀 */
.ai-head{text-align:center;max-width:720px;margin:0 auto 40px}
.ai-head .section-lead,.ai-head p{color:#A7ABB0;font-size:17px;margin:16px auto 0;max-width:600px}
.ai-carousel-wrap{position:relative}
.ai-carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scroll-padding-left:4px;padding:28px 4px 32px;scrollbar-width:none}
.ai-carousel::-webkit-scrollbar{display:none}
/* 캐러셀 아이템: 카드 위 타이틀(기능명+설명) + 카드 */
.ai-item{flex:0 0 min(440px,84%);scroll-snap-align:start;display:flex;flex-direction:column}
/* 아이콘 대신 브랜드 톤 액센트 바로 깔끔하게 */
.ai-item-head{position:relative;padding-left:15px;margin:0 4px 14px}
.ai-item-head::before{content:"";position:absolute;left:0;top:4px;bottom:5px;width:3px;border-radius:3px;background:var(--grad-btn)}
.ai-item-head b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em}
.ai-item-head span{display:block;font-size:13px;color:#A7ABB0;margin-top:5px;line-height:1.5}
.ai-card{width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;height:310px;overflow:hidden;display:flex;flex-direction:column;
  transform-origin:center;transition:transform .3s cubic-bezier(.34,1.4,.5,1),border-color .3s,background .3s,box-shadow .3s}
/* 카드 하단 채팅 입력창 (목업) */
.ai-cinput{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px}
.ai-cinput input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:10px 15px;font-size:12.5px;color:#E9EBED;font-family:inherit;outline:none}
.ai-cinput input::placeholder{color:#8A8D92}
.ai-cinput button{width:34px;height:34px;border-radius:50%;background:var(--grad-btn);color:#fff;border:none;
  display:grid;place-items:center;font-size:15px;font-weight:700;flex-shrink:0;cursor:default}
.ai-card:hover{transform:scale(1.09) translateY(-6px);border-color:rgba(139,139,255,.65);
  background:rgba(255,255,255,.11);box-shadow:0 26px 60px rgba(0,0,0,.4),0 0 0 1px rgba(139,139,255,.35);z-index:3;position:relative}
/* 카드 내부 채팅 */
.ai-chat{display:flex;flex-direction:column;gap:12px}
.ai-cmsg.me{align-self:flex-end;max-width:82%;background:var(--grad-btn);color:#fff;font-size:13px;font-weight:600;
  padding:10px 14px;border-radius:15px;border-bottom-right-radius:5px}
.ai-cmsg.bot{display:flex;gap:9px;align-self:flex-start;max-width:96%}
.ai-cav{flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:var(--grad-btn);display:grid;place-items:center;font-size:15px}
.ai-cbub{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:15px;border-top-left-radius:5px;
  padding:12px 14px;font-size:12.5px;color:#E9EBED;line-height:1.55}
.ai-cbub b{color:#fff}
.ai-chips-sm{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ai-chips-sm span{font-size:11.5px;font-weight:700;color:#C7C7FF;background:rgba(139,139,255,.16);border-radius:999px;padding:5px 11px}
/* 🔴 `.price-highlight` 와 **같은 결함**이 여기에도 있었다(2026-08-13 함께 수정).
   `<span class="ai-dot"></span>진행 중인 프로젝트 <b>3건</b> — OOO축제 기획 외` 처럼
   문장 가운데 `<b>` 가 들어가면 flex 는 앞뒤 텍스트를 **각각 다른 열**로 만든다.
   390px 실측: "진행 중인 프로젝트"(x=116, 2줄) │ "3건"(x=179) │ "— OOO축제 기획 외"(x=204, 2줄)
   → 가로로 안 읽히고 열마다 세로로 읽힌다. 점은 inline-block 으로 두면 같은 모양이 나온다. */
/* padding+음수 text-indent = 내어쓰기. 접힌 둘째 줄이 점 밑이 아니라 **글자 밑**에 붙는다
   (15px = 점 7px + 간격 8px). */
.ai-line{display:block;line-height:1.5;margin-top:8px;font-size:12.5px;color:#C4C7CB;
  padding-left:15px;text-indent:-15px}
.ai-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;
  display:inline-block;vertical-align:middle;margin-right:8px}
.ai-dot.ok{background:#8B8BFF}.ai-dot.wait{background:#F0B94A}
.ai-file{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border-radius:10px;padding:9px 11px;margin-top:9px}
.ai-file span{font-size:16px}
.ai-file .fn{font-size:12.5px;color:#fff;font-weight:700}
.ai-file .fm{font-size:10.5px;color:#A7ABB0;margin-top:1px}
.ai-cta-hint{margin-top:11px;display:inline-block;background:rgba(139,139,255,.18);color:#C7C7FF;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.ai-carousel-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.ai-arrow{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.ai-arrow:hover{background:rgba(255,255,255,.16)}
.ai-arrow:disabled{opacity:.3;cursor:default}
.ai-dots{display:flex;gap:8px}
.ai-dot-nav{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;padding:0;transition:background .15s,width .15s}
.ai-dot-nav.on{background:var(--grad-btn);width:22px;border-radius:999px}

/* ============ PRICING ============ */
/* 🔴 이 알약 안의 내용은 **한 문장**이다 — flex 로 두면 안 된다(2026-08-13 사용자 신고).
   `display:inline-flex` 는 자식을 flex 항목으로 만드는데, 여기 자식은
   `<span>💰</span>` + 텍스트 + `<b>합리적인 가격</b>` + 텍스트 = **4개**다.
   텍스트 런까지 각자 열이 되어, 데스크톱에서는 폭이 남아 한 줄로 보이지만
   폰에서는 열마다 따로 접혀 **세로로 읽히는 3단 표**가 된다:
       유사한 기능의 타 │ 합리적인 │ 으로
       그룹웨어 대비    │ 가격     │ 제공합니다
   문장은 문장으로 흘러야 하므로 `inline-block` 이다(알약 모양·가운데 정렬은 그대로 유지).
   ⚠️ `gap:9px` 가 사라지므로 이모지 뒤 간격은 `.ph-mark` 의 margin 으로 대신한다.
   ⚠️ 아래 `.subhero .price-highlight` 줄도 **함께** 고쳐야 한다 —
      특이도가 더 높아 여기만 바꾸면 정작 쓰이는 자리(pricing.html subhero)에서 안 먹는다. */
.price-highlight{display:inline-block;text-align:center;line-height:1.55;max-width:100%;
  margin:20px auto 12px;
  background:var(--grad-soft);border:1.5px solid var(--c-primary-50);border-radius:999px;
  padding:11px 22px;font-size:16px;font-weight:600;color:var(--g-800);box-shadow:var(--sh-sm)}
.price-highlight b{color:var(--c-primary-deep);font-weight:900}
.price-highlight .ph-mark{font-size:18px;line-height:1;margin-right:4px;vertical-align:-1px}
.center .price-highlight,.subhero .price-highlight{margin-left:auto;margin-right:auto}
.subhero .price-highlight{display:inline-block}
.price-toggle{display:inline-flex;align-items:center;gap:14px;margin:28px auto 0;background:var(--g-100);border-radius:999px;padding:5px}
.price-toggle button{padding:9px 20px;border-radius:999px;font-weight:700;font-size:14px;color:var(--g-500)}
.price-toggle button.on{background:#fff;color:var(--g-900);box-shadow:var(--sh-sm)}
.save-tag{font-size:12px;color:var(--c-primary-deep);font-weight:700;margin-left:2px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;align-items:start}
.plan{background:#fff;border:1px solid var(--g-200);border-radius:var(--r-card);padding:28px;transition:transform .2s,box-shadow .2s}
.plan:hover{box-shadow:var(--sh-md)}
.plan.pop{background:linear-gradient(180deg,var(--c-primary-50) 0%,#fff 26%);border:2px solid var(--c-primary);box-shadow:var(--sh-lg);position:relative;transform:scale(1.02)}
.plan.pop .badge{animation:badge-float-x 2.2s ease-in-out infinite}
.plan .pname{font-size:17px;font-weight:800;color:var(--g-900)}
.plan .pfor{font-size:13px;color:var(--g-500);margin:4px 0 18px;min-height:38px}
.plan .amt{font-size:34px;font-weight:900;color:var(--g-900);letter-spacing:-.02em;font-feature-settings:"tnum"}
.plan .amt small{font-size:15px;font-weight:600;color:var(--g-500)}
.plan .amt .per-seat{font-size:15px;font-weight:600;color:var(--g-500)}
.plan .per{font-size:13px;color:var(--g-500);margin-bottom:20px}
.plan ul{display:flex;flex-direction:column;gap:11px;margin-top:22px}
.plan ul li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--g-700)}
.plan .mini-check{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:rgba(90,90,245,.16);color:var(--c-primary-deep);display:grid;place-items:center;margin-top:2px}
.plan .btn{margin-top:6px}

/* ============ 요금제 카드 (Free · Premium · Enterprise) ============ */
.pack-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:36px auto 0}
/* 3장 구성(v2 요금제) — 5분할 폭에서는 카드가 과하게 좁아진다 */
.pack-cards.pc3{grid-template-columns:repeat(3,1fr);max-width:900px}
.pcard{background:#fff;border:1px solid var(--g-200);border-radius:var(--r-card);padding:24px 18px;text-align:center;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.pcard:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.pcard.pop{border:2px solid var(--c-primary);box-shadow:var(--sh-lg);position:relative}
.pc-pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%)}
.pc-name{font-size:15px;font-weight:800;color:var(--g-900);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pc-tag{font-size:10.5px;font-weight:700;color:var(--c-primary-deep);background:var(--c-primary-50);border-radius:999px;padding:2px 9px}
.pc-for{font-size:11.5px;color:var(--g-500);margin:8px 0 12px;min-height:20px;line-height:1.4}
.pc-price{font-size:23px;font-weight:900;color:var(--g-900);letter-spacing:-.02em;font-feature-settings:"tnum";line-height:1.15;text-align:center}
.pc-price small{font-size:12px;font-weight:600;color:var(--g-500)}
.pc-per{font-size:12px;color:var(--g-700);margin-top:10px;font-weight:600;line-height:1.5}
.pc-per b{color:var(--c-primary-deep);font-weight:800}
.pc-spec{list-style:none;margin:22px 0 14px;padding-top:14px;border-top:1px dashed var(--g-100);display:flex;flex-direction:column;gap:10px;text-align:left}
.pc-spec li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.pc-spec li span{color:var(--g-500)}
.pc-spec li b{color:var(--g-900);font-weight:800;font-feature-settings:"tnum"}
/* Free 이용 제한: 호버 팝오버 */
.pc-limit-pop{position:relative;display:inline-block;margin:14px 0}
.pc-limit-btn{font-size:11.5px;font-weight:700;color:var(--c-primary-deep);background:var(--c-primary-50);border:1px solid var(--c-primary-100,#dcdcfb);border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .15s}
.pc-limit-btn:hover{background:var(--c-primary-100,#dcdcfb)}
.pc-limit-detail{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);width:280px;background:#fff;border:1px solid var(--g-200);border-radius:10px;box-shadow:var(--sh-md);padding:12px 16px;font-size:11.5px;color:var(--g-700);line-height:1.85;text-align:left;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;z-index:20;pointer-events:none}
.pc-limit-detail b{color:var(--g-900);font-weight:700}
.pc-limit-detail span{white-space:nowrap}
.pc-limit-detail::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff}
.pc-limit-pop:hover .pc-limit-detail,.pc-limit-pop:focus-within .pc-limit-detail{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.pc-feats{list-style:none;margin:22px 0 14px;padding-top:14px;border-top:1px dashed var(--g-100);display:flex;flex-direction:column;gap:10px;text-align:left}
.pc-feats li{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--g-700);line-height:1.4}
.pc-feats .mini-check{flex:0 0 15px;width:15px;height:15px;border-radius:50%;background:rgba(90,90,245,.16);color:var(--c-primary-deep);display:grid;place-items:center;margin-top:1px;font-size:9px}
.pcard .btn{margin-top:auto}
/* 월납/연납 토글: 기본 연납 표시, .pc-monthly 부여 시 월납 표시 */
.pack-cards .pc-mo{display:none}
.pack-cards.pc-monthly .pc-yr{display:none}
.pack-cards.pc-monthly .pc-mo{display:inline}
.calc-note{font-size:12px;color:var(--g-500);text-align:center;margin-top:20px;line-height:1.6}
/* 좌석 계산기 — "인당 얼마 × 몇 명"을 직접 넣어보게 하는 전환 장치 */
.seat-calc{max-width:520px;margin:28px auto 0;background:#fff;border:1px solid var(--g-200);border-radius:var(--r-card);box-shadow:var(--sh-md);padding:22px 24px;text-align:center}
.sc-head{font-size:14px;font-weight:800;color:var(--g-900);margin-bottom:14px}
.sc-row{display:flex;align-items:center;justify-content:center;gap:8px}
.sc-step{width:34px;height:34px;border-radius:9px;border:1px solid var(--g-200);background:#fff;color:var(--g-700);font-size:17px;font-weight:700;cursor:pointer;line-height:1;transition:background .15s,border-color .15s}
.sc-step:hover{background:var(--c-primary-50);border-color:var(--c-primary-100,#dcdcfb);color:var(--c-primary-deep)}
.sc-row input{width:86px;height:38px;text-align:center;font-size:17px;font-weight:800;color:var(--g-900);border:1px solid var(--g-200);border-radius:9px;font-feature-settings:"tnum";-moz-appearance:textfield}
.sc-row input::-webkit-outer-spin-button,.sc-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sc-unit{font-size:13px;font-weight:700;color:var(--g-500)}
.sc-out{margin-top:18px;padding-top:16px;border-top:1px dashed var(--g-100)}
.sc-total{font-size:30px;font-weight:900;color:var(--c-primary-deep);letter-spacing:-.02em;font-feature-settings:"tnum";line-height:1.15}
.sc-total small{font-size:14px;font-weight:600;color:var(--g-500);margin-left:2px}
.sc-sub{font-size:12.5px;color:var(--g-600);margin-top:8px;font-weight:600}
.sc-note{font-size:11.5px;color:var(--g-500);margin-top:12px}

/* 애드온 안내 배너 (카드 밖) */
.addon-banner{max-width:720px;margin:28px auto 0;background:var(--c-primary-50);color:var(--c-primary-deep);border:1px solid var(--c-primary-100,#dcdcfb);border-radius:14px;padding:14px 20px;text-align:center;font-size:13.5px;font-weight:700;line-height:1.5}

/* 접이식 전체 구간표 */
.fulltable{max-width:900px;margin:40px 0 0}
.fulltable>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--c-primary-deep);background:var(--c-primary-50);
  border-radius:999px;padding:11px 22px;margin:0;transition:background .15s}
.fulltable>summary::-webkit-details-marker{display:none}
.fulltable>summary:hover{background:var(--c-primary-100,#dcdcfb)}
.fulltable>summary .chev{transition:transform .2s}
.fulltable[open]>summary .chev{transform:rotate(180deg)}
.fulltable-inner{margin-top:22px;overflow-x:auto}
.rate-table{width:100%;border-collapse:collapse;font-size:13px;font-feature-settings:"tnum";min-width:640px}
.rate-table thead th{background:var(--g-50);color:var(--g-500);font-weight:700;padding:11px 12px;text-align:right;border-bottom:2px solid var(--g-100);white-space:nowrap}
.rate-table thead th:first-child,.rate-table tbody th{text-align:left}
.rate-table tbody th{font-weight:700;color:var(--g-900);padding:11px 12px;white-space:nowrap}
.rate-table tbody td{padding:11px 12px;text-align:right;color:var(--g-700);border-bottom:1px solid var(--g-100);white-space:nowrap}
.rate-table tbody tr:hover td,.rate-table tbody tr:hover th{background:var(--c-primary-50)}
.rate-table tr.free th,.rate-table tr.free td,.rate-table tr.ent th,.rate-table tr.ent td{color:var(--g-500)}
.rate-note{font-size:12.5px;color:var(--g-500);margin-top:14px;line-height:1.7}

/* 공통 기능 배너 */
.common-feats{max-width:900px;margin:0 auto;background:var(--g-50);border:1px solid var(--g-100);border-radius:var(--r-card);padding:26px 30px}
.common-feats h4{font-size:15px;font-weight:800;color:var(--g-900);margin-bottom:6px}
.common-feats p.lead{font-size:13px;color:var(--g-500);margin-bottom:18px}
.common-feats .cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px}
.common-feats .cf-grid li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--g-700);list-style:none}
.common-feats .cf-grid .mini-check{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:rgba(90,90,245,.16);color:var(--c-primary-deep);display:grid;place-items:center;margin-top:1px;font-size:11px}

/* 부가 옵션 + Free 제한 2단 카드 */
.info-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:940px;margin:0 auto;align-items:start}
.info-card{background:#fff;border:1px solid var(--g-200);border-radius:var(--r-card);padding:28px 30px;box-shadow:var(--sh-sm)}
.info-card h4{font-size:16px;font-weight:800;color:var(--g-900);margin-bottom:8px}
.info-card .info-lead{font-size:13px;color:var(--g-500);line-height:1.6;margin-bottom:18px}
.info-card .info-note{font-size:12px;color:var(--g-500);margin-top:12px;line-height:1.6}
.info-card .rate-table{min-width:0}
.free-limits{list-style:none}
.free-limits li{padding:11px 0;border-bottom:1px dashed var(--g-100);display:flex;justify-content:space-between;gap:14px;font-size:13px}
.free-limits li:last-child{border-bottom:none}
.free-limits li span{color:var(--g-500);flex-shrink:0}
.free-limits li b{color:var(--g-900);font-weight:700;text-align:right}

@media(max-width:1100px){
  .pack-cards{grid-template-columns:repeat(3,1fr);max-width:720px;margin-left:auto;margin-right:auto}
}
@media(max-width:820px){
  .common-feats .cf-grid{grid-template-columns:1fr 1fr}
  .info-2col{grid-template-columns:1fr;max-width:480px}
}
@media(max-width:820px){
  .pack-cards.pc3{grid-template-columns:1fr;max-width:400px}
}
@media(max-width:640px){
  .pack-cards{grid-template-columns:1fr;max-width:380px}
  .seat-calc{padding:18px 16px}
}
@media(max-width:520px){
  .common-feats .cf-grid{grid-template-columns:1fr}
}

/* ============ STATS / QUOTE ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat-ico-wrap{position:relative;display:inline-block;margin-bottom:14px}
.stat .stat-ico{display:grid;place-items:center;width:68px;height:68px;border-radius:18px;background:var(--c-primary-50);font-size:32px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.stat:hover .stat-ico{transform:scale(1.1)}
/* 3D 아이콘 버전: 배경 박스 없이 아이콘 자체를 크게, 부드러운 브랜드 톤 그림자 */
.stat .stat-ico.img3d{background:transparent;width:164px;height:164px;border-radius:0}
.stat-ico.img3d img{width:148px;height:148px;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(59,59,194,.18))}
/* 배지: 3D 아이콘과 어울리는 흰 원형 + 브랜드색 스트로크 글리프 (기존 부유 애니메이션 유지) */
.stat-badge{position:absolute;bottom:2px;right:2px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(16,22,45,.18);border:1px solid var(--g-100);animation:badge-float 2.4s ease-in-out infinite}
.stat-badge svg{width:18px;height:18px}
.stat:nth-child(2) .stat-badge{animation-delay:.3s}
.stat:nth-child(3) .stat-badge{animation-delay:.6s}
.stat .lbl{color:var(--g-500);font-size:22px;font-weight:600;margin-top:6px}
.interview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.interview-card{background:#fff;border:1px solid var(--g-200);border-radius:var(--r-card);padding:28px;transition:transform .2s,box-shadow .2s}
.interview-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.interview-photo{width:56px;height:56px;border-radius:50%;background:var(--g-100);color:var(--g-400);font-size:24px;display:grid;place-items:center;margin-bottom:16px}
.interview-card blockquote{font-size:14px;color:var(--g-700);line-height:1.7;font-weight:500;margin-bottom:16px}
.interview-who b{display:block;font-size:14px;color:var(--g-900);font-weight:800}
.interview-who span{font-size:12px;color:var(--g-500);margin-top:2px}
.quote{max-width:760px;margin:104px auto 0;text-align:center;position:relative}
.quote::before{content:"\201C";position:absolute;top:-46px;left:50%;transform:translateX(-50%);
  font-size:120px;line-height:1;color:var(--c-primary-50);font-family:Georgia,serif;z-index:0;pointer-events:none}
.quote blockquote{position:relative;z-index:1;font-size:clamp(18px,2.6vw,24px);font-weight:700;color:var(--g-900);line-height:1.5;letter-spacing:-.01em}
.quote .who{margin-top:18px;color:var(--g-500);font-size:14px}

/* ============ FAQ ============ */
.faq{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--g-200)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 4px;text-align:left;font-size:17px;font-weight:700;color:var(--g-900)}
.faq-q .pm{flex:0 0 24px;color:var(--c-primary);transition:transform .2s;font-size:22px;line-height:1}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 4px 22px;color:var(--g-500);font-size:15px}

/* Q&A 구분감 강화 (질문/답변 형식 FAQ 전용, 공지사항 아코디언과 분리) */
.faq.qa .faq-q{justify-content:flex-start;gap:14px;font-size:16px}
.faq.qa .faq-q .qmark{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:var(--c-primary);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center}
.faq.qa .faq-q .qtext{flex:1}
.faq.qa .faq-q .pm{margin-left:auto}
.faq.qa .faq-a{background:#F3F3FE;border-radius:12px}
.faq.qa .faq-a-inner{display:flex;align-items:flex-start;gap:14px;padding:20px 16px 22px}
.faq.qa .faq-a .amark{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:#fff;border:1.5px solid var(--c-primary-50);color:var(--c-primary-deep);font-size:12.5px;font-weight:800;display:grid;place-items:center}
.faq.qa .faq-a p{padding:0;margin:0;flex:1;color:var(--g-600)}

/* 문의사항 카테고리 탭 + 상태 배지 */
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.cat-tabs button{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--g-500);background:var(--g-50);border:1px solid var(--g-100);transition:background .15s,color .15s,border-color .15s}
.cat-tabs button:hover:not(.on){background:var(--g-100)}
.cat-tabs button.on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.status-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.status-badge.done{background:rgba(0,196,140,.14);color:#0A9A6E}
.status-badge.wait{background:var(--g-100);color:var(--g-500)}
.faq-item[hidden]{display:none}

/* ============ FINAL CTA (풀블리드 밴드 — 전 페이지 공통, 2026-07-14 카드형에서 전환) ============ */
/* 🔴 2026-08-14 배경 사진 제거 — 출처 불명 스톡 이미지였다(EXIF 전량 제거, 구매 증빙 없음).
   원래도 어두운 베일 두 겹(72%/80%)에 덮여 형체가 거의 안 보였으므로, 사진을 빼고
   **그라데이션만으로** 같은 인상을 만든다. 저작권 리스크 0 · 346KB 전송 절감 · 로드 실패 없음. */
.final-band{
  background-color:var(--ink-900); /* 그라데이션 미지원 환경 대비 */
  background-image:
    radial-gradient(120% 92% at 10% -12%, rgba(124,86,246,.58) 0%, rgba(124,86,246,0) 58%),  /* 좌상단 브랜드 광선 */
    radial-gradient(105% 88% at 94% 112%, rgba(90,90,245,.52) 0%, rgba(90,90,245,0) 62%),    /* 우하단 브랜드 광선 */
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),    /* 사진 대신 얹는 결 */
    linear-gradient(160deg, #1B1750 0%, #14113E 54%, #100E30 100%);                          /* 바탕 */
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;text-align:center;position:relative;overflow:hidden}
.final-band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 62%);
  top:-180px;left:-120px;animation:blob-drift 10s ease-in-out infinite reverse;pointer-events:none}
.final-band .container{position:relative;z-index:1}
.final-band h2{font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.2}
.final-band p{font-size:18px;color:rgba(255,255,255,.85);margin:16px 0 0}
.final-band .hero-cta{justify-content:center;margin-top:30px}
.final .hero-cta{justify-content:center}

/* ============ FOOTER ============ */
.footer{background:var(--ink-900);color:#A7ABB0;padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer .logo{color:#fff}
.footer h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:16px}
.footer ul{display:flex;flex-direction:column;gap:10px}
.footer ul a{font-size:14px;color:#8A8D92}
.footer ul a:hover{color:#fff}
.foot-desc{font-size:14px;margin:16px 0;max-width:280px}
/* 전자상거래법 §10 표시사항 — 상호·대표·등록번호·주소·전화·이메일·보호책임자.
   여러 줄이라 예전의 한 줄 space-between 으로는 안 담긴다(줄바꿈이 어긋난다). 좌: 사업자정보 / 우: 저작권. */
.foot-bottom{padding-top:24px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;font-size:13px;color:#6E7175}
.foot-biz{display:flex;flex-direction:column;gap:5px;line-height:1.6}
.foot-biz p{margin:0}
.foot-biz a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-biz a:hover{color:#fff}
.foot-copy{white-space:nowrap}
@media(max-width:640px){.foot-bottom{flex-direction:column;align-items:flex-start}.foot-copy{white-space:normal}}

/* ============ REVEAL ANIM ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ 전 페이지 공통 폴리싱 ============ */
/* 서브페이지 진입 훅: 서브히어로 요소가 순차적으로 떠오름 (모든 하위 페이지 공통) */
.subhero .container > *{animation:rise-in .45s cubic-bezier(.2,.7,.2,1) backwards}
.subhero .container > :nth-child(1){animation-delay:.04s}
.subhero .container > :nth-child(2){animation-delay:.12s}
.subhero .container > :nth-child(3){animation-delay:.20s}
.subhero .container > :nth-child(4){animation-delay:.28s}
.subhero .container > :nth-child(5){animation-delay:.36s}
/* 아이콘 마이크로 인터랙션 통일 (Why/차별점 카드와 같은 톤) */
.v-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.v-card:hover .v-ico{transform:scale(1.12) rotate(-5deg)}
.flow-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.flow-node:hover .flow-ico{transform:scale(1.12)}
.case-card .lg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.case-card:hover .lg{transform:scale(1.1) rotate(-5deg)}
.interview-photo{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.interview-card:hover .interview-photo{transform:scale(1.1)}
.contact-info .ci-item .ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.contact-info .ci-item:hover .ico{transform:scale(1.12) rotate(-4deg)}
/* FAQ 질문 호버 정돈 */
.faq-q{transition:background .15s;border-radius:10px}
.faq-q:hover{background:var(--g-50)}
/* 요금 플랜 카드: 호버 시 살짝 떠오름 */
.plan{transition:transform .2s,box-shadow .2s}
.plan:hover{transform:translateY(-4px)}
.plan.pop:hover{transform:scale(1.02) translateY(-4px)}

/* ============ 스크롤 진행률 바 ============ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--grad-btn);z-index:200;pointer-events:none}

/* 히어로 목업 패럴랙스: transform 트랜지션 없이 스크롤 위치를 그대로 따라가야 떨림이 없음
   (트랜지션이 있으면 프레임마다 새 값으로 보간을 시작해 덜덜 떨림) */
.hero-visual .mockup{will-change:transform}

/* ============ 후킹 애니메이션 (은은하게, 상시 노출되는 요소는 배제) ============ */
@keyframes grad-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cta-glow-pulse{0%,100%{box-shadow:var(--sh-glow)}50%{box-shadow:0 14px 54px rgba(90,90,245,.5)}}
@keyframes badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blob-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-20px) scale(1.08)}}
@keyframes badge-float-x{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}

.cta-pulse{animation:cta-glow-pulse 3s ease-in-out infinite}
.cta-pulse:hover{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-progress{display:none}
  .hero-visual .mockup{transition:none;transform:none!important}
  .hero h1 .grad,.cta-pulse,.stat-badge,.plan.pop .badge,.ai-band::before,.final-band::before,.chatbot-toggle:hover .cb-ico,.mk-float.ai,.mk-float.appr,.logo-track{animation:none}
  body.intro-done .hero-copy .badge,body.intro-done .hero-copy h1,body.intro-done .hero-copy .sub,
  body.intro-done .hero-copy .hero-cta,body.intro-done .hero-copy .hero-note,
  body.intro-done .hero-visual .mockup,body.intro-done .hero-visual .mk-msg,body.intro-done .hero-visual .mk-float{animation:none}
  body.intro-wait .hero-copy .badge,body.intro-wait .hero-copy h1,body.intro-wait .hero-copy .sub,
  body.intro-wait .hero-copy .hero-cta,body.intro-wait .hero-copy .hero-note,
  body.intro-wait .hero-visual .mockup,body.intro-wait .hero-visual .mk-msg,body.intro-wait .hero-visual .mk-float{opacity:1}
  .subhero .container > *{animation:none}
}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  /* 데스크톱 1줄 고정(nowrap) 문구들: 좁은 화면에서는 자연스럽게 줄바꿈
     🔴 `.subhero p` 가 이 명단에 빠져 있었다(2026-08-13). 서브히어로 문단 세 곳이
        인라인 `style="white-space:nowrap"` 인데(features·support-intro·support-contact 각 56행)
        여기서 안 풀려서, 폰에서 **페이지 전체가 축소**됐다 —
        줄바꿈이 금지되면 `max-width:600px` 로도 못 막고 라인박스가 그대로 뚫고 나간다.
        실측: features.html 375px 에서 문서 폭 **716px 고정**(뷰포트를 320 으로 줄여도 716)
        → 브라우저가 페이지를 축소해 본문이 실제의 약 55% 로 보였다.
     ⚠️ 인라인 스타일이라 `!important` 여야 이긴다(이 줄에 이미 있다). */
  .section-lead,.ai-head p,.hero p.sub,.subhero p{white-space:normal!important}
  .hero p.sub br{display:none}
  .hero-grid,.feat,.ai-grid,.plans,.interview-grid,.problem-grid,.diff-grid,.stack-card{grid-template-columns:1fr}
  /* 카드 그리드는 1열로 무너지지 않고 2열 유지(아이콘 카드 다수 → 앱 그리드 느낌). 큰 카드(.values-3)도 태블릿 2열. */
  .values,.values-3{grid-template-columns:repeat(2,1fr)}
  .stack-card{position:static;min-height:0;padding:32px;gap:28px}
  #features .stack-card{height:auto;grid-template-rows:auto}
  .stack{gap:20px}
  .stack-visual{order:-1}
  /* 모바일에서는 예시 이미지가 자연 높이를 갖도록 채움 규칙 해제 */
  .stack-visual > .panel,
  .stack-visual > .mockup{height:auto}
  .values{gap:16px}
  .plans{gap:16px;max-width:440px;margin-left:auto;margin-right:auto}
  .plan.pop{transform:none}
  .feat.rev .feat-visual{order:0}
  #features .feat-visual{min-height:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* 🔴 **AI 칩을 목업 아래로 내린다**(2026-08-13 사용자 신고 — "라인에 살짝 가린다").
     `.mk-float.ai` 는 `bottom:-18px` 라 칩 높이(57px)의 대부분이 목업 안쪽에 걸친다 —
     실측 375px 에서 **38px** 을 덮었고, 그 아래에 있는 것이 목업 하단의 입력바
     (`.mockup-input` — "# 2026 OOO축제 기획 에 메시지 보내기")였다. 화면이 좁을수록 더 가린다.
     `top:100%` 로 두면 칩 높이가 바뀌어도(문구가 두 줄이 되어도) 항상 목업 **바로 아래**에 붙는다.
     ⚠️ `.hero` 는 `overflow:hidden` 이고 목업 바닥이 곧 히어로 바닥이라, 아래 여백을 함께 주지 않으면
        내려간 칩이 그대로 **잘려 사라진다.** 두 선언은 한 세트다. */
  .hero{padding-bottom:104px}
  .mk-float.ai{left:0;top:100%;bottom:auto;margin-top:10px}
}
@media(max-width:640px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    background:#fff;padding:12px 24px;box-shadow:var(--sh-md);gap:2px}
  .nav.open .nav-links a{padding:12px}
  .nav-drop{flex-direction:column;align-items:stretch}
  .nav-drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 12px;min-width:0}
  .nav-drop .caret{display:none}
  .stats,.foot-grid{grid-template-columns:1fr}
  /* 🔴 아이콘 카드(.values)가 화면을 가로로 밀어내던 것(2026-08-13 실측: 320px 뷰포트에서 문서 폭 392px).
     `1fr` 은 `minmax(auto,1fr)` 이라 트랙이 항목의 **min-content 밑으로는 안 줄어든다.**
     .v-card 의 min-content 를 정한 것은 `.btn{white-space:nowrap}` 이 걸린 블록 버튼이다
     ("다운로드 (64bit)" 131.5px + 카드 좌우 패딩 56px = 트랙 189.5px → 24+189.5+16+162.2 = 391.7px).
     ① 트랙 바닥을 0 으로 내리고 ② 버튼 라벨은 접히게 둔다.
     ⚠️ ②의 `height:auto` 는 한 세트다 — 라벨이 두 줄이 되면 `.btn-sm` 의 고정 40px 을 넘어
        흰 글씨가 알약 밖으로 삐져나온다. `min-height` 로 그 40px 을 그대로 유지한다.
     ⚠️ 이 두 줄은 반드시 아래 `.values-3` 규칙 **앞**에 둔다 — 특이도가 같아(0,1,0)
        뒤에 두면 `values values-3` 카드(product·support-manual)가 1열로 못 내려간다. */
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values .btn{white-space:normal;height:auto;min-height:40px}
  /* 아주 좁은 화면: 큰 텍스트 카드(.values-3)는 1열로. 아이콘 카드(.values)는 2열 유지. */
  .values-3{grid-template-columns:1fr}
  .hero-cta .btn{flex:1}
}
/* 아주 좁은 기기(320px — iPhone SE 1세대·폴더블 커버화면).
   2열을 유지하면 카드 콘텐츠 폭이 128−56=72px 밖에 안 남아 "Windows" 가
   **낱말 중간에서 쪼개진다**("Window / s"). 여백만 줄이면 92px 이 되어 들어간다.
   ⚠️ 360px 은 이미 깔끔하므로(실측) 일부러 340px 이하로만 좁혔다 — 잘 되는 구간은 안 건드린다. */
@media(max-width:340px){
  .v-card{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   하위 페이지 공통 컴포넌트
   ============================================================ */

/* Sub-page hero */
.subhero{background:radial-gradient(1000px 460px at 70% -20%,#ECECFE 0%,transparent 60%),var(--white);padding:72px 0 56px;text-align:center}
.subhero h1{font-size:clamp(30px,4.6vw,48px);font-weight:800;color:var(--g-900);letter-spacing:-.03em;line-height:1.15;margin-top:14px}
.subhero p{font-size:18px;color:var(--g-500);margin:18px auto 0;max-width:600px}
.subhero .hero-cta{justify-content:center;margin-top:28px}

/* Concept flow diagram (product.html 전용 — 다른 페이지 미사용) */
.flow{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-top:56px;padding:0 8px}
.flow-line{position:absolute;top:27px;left:56px;right:56px;height:2px;background:linear-gradient(90deg,var(--c-primary-50),var(--c-primary) 12%,var(--c-primary) 88%,var(--c-primary-50));z-index:0}
.flow-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;text-align:center;padding:0 4px}
.flow-ico{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--c-primary);display:grid;place-items:center;font-size:24px;box-shadow:var(--sh-sm);flex-shrink:0}
.flow-label{font-size:13px;font-weight:700;color:var(--g-900);line-height:1.4}
/* 🔴 좁은 화면에서는 **가로로 가다가 아래 줄로 이어진다**(2026-08-13 사용자 지시).
   한때 세로 한 줄로 접었는데 — "일자로 떨어지는게 별로라 가로로 나오고 넘어가는건 아래로" —
   6단계가 세로로 늘어지면 흐름이 아니라 목록으로 읽히고 스크롤만 길어졌다.
   그래서 **줄바꿈되는 격자**로 바꾼다: 3열(2줄) → 더 좁으면 2열(3줄).
   6은 3으로도 2로도 나누어떨어지므로 마지막 줄이 비지 않는다.

   연결선은 관통선 하나(`.flow-line`)로는 여러 줄을 표현할 수 없다 —
   가로 한 줄일 때만 쓰고, 줄바꿈 상태에서는 끈 다음 **노드마다 오른쪽으로 짧게** 잇는다.
   🔴 줄 끝에서는 선을 끊어야 한다(안 끊으면 다음 줄로 가는데 선이 오른쪽 허공을 가리킨다).
      "줄 끝"은 `:nth-child` 로 세는데, 그러려면 노드가 1~6번째여야 한다 —
      그래서 `.flow-line` 을 마크업 **맨 뒤**로 뺐다(absolute 라 보이는 자리는 그대로).
      `flow-timeline-wrap.test.mjs` 가 이 전제(노드 6개·선은 마지막)를 고정한다. */
@media(max-width:820px){
  .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 0;padding:0;margin-top:44px}
  .flow-line{display:none}
  .flow-node{flex:none;width:auto;padding:0 4px}
  /* 아이콘 중심(50%)에서 6px 띄워 출발 → 다음 노드 아이콘 6px 앞에서 멈춘다.
     아이콘 반지름 28 + 여백 6 = 34px. */
  .flow-node::after{content:'';position:absolute;top:27px;
                    left:calc(50% + 34px);right:calc(-50% + 34px);
                    height:2px;background:var(--c-primary);opacity:.45}
  .flow-node:nth-child(3n)::after{content:none}   /* 3열: 3·6번째가 줄 끝 */
}
@media(max-width:560px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow-node:nth-child(3n)::after{content:''}     /* 3열 규칙 해제 */
  .flow-node:nth-child(2n)::after{content:none}   /* 2열: 2·4·6번째가 줄 끝 */
}

/* Before/After 비교 시각자료 (product.html 전용 — 다른 페이지 미사용) */
.split-compare{display:flex;align-items:center;gap:20px;margin-top:48px}
.split-before,.split-after{flex:1;border-radius:var(--r-lg);padding:28px;min-height:180px;display:flex;flex-direction:column;justify-content:center}
.split-before{background:var(--g-50);border:1px solid var(--g-200)}
.split-after{background:var(--grad-soft);border:1.5px solid var(--c-primary)}
.split-label{margin-bottom:18px;text-align:center}
.split-label-main{display:block;font-size:20px;font-weight:800;color:var(--g-900);letter-spacing:-.01em}
.split-label-sub{display:block;font-size:12px;font-weight:600;color:var(--g-500);margin-top:4px}
.split-after .split-label-main{color:var(--c-primary-deep)}
.split-after .split-label-sub{color:var(--c-primary)}
.scatter{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center}
.scatter-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1.5px dashed var(--g-300);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--g-700);font-weight:700;box-shadow:var(--sh-sm);transform:rotate(var(--r,0deg));white-space:nowrap}
.split-arrow{font-size:26px;color:var(--c-primary);flex:0 0 auto;font-weight:800}
.unified-box{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center}
.unified-box span{display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--c-primary-deep);background:#fff;border-radius:10px;padding:10px 14px;box-shadow:var(--sh-sm);white-space:nowrap}
/* 🔴 split-compare 가 아직 **가로 배치인 구간**(821px 이상)의 가로 넘침 처방(2026-08-13).
   원인이 세 겹이다 — flex 항목(.split-before/.split-after)은 `min-width:auto` 라 자기 min-content
   밑으로 못 줄고, 그 min-content 는 안쪽 `.scatter`/`.unified-box` 가 `flex-wrap:nowrap` 이라
   '칩 4개 + gap 한 줄' 로 굳어 있었다(칩마다 white-space:nowrap).
   결과로 문서 폭이 뷰포트와 무관하게 835px 에 못박혀 821px 부근에서 가로 스크롤이 났다.
   ≤820px 에서는 `flex-direction:column` 이 이미 막아 주고 있어 증상이 안 보였을 뿐이다.
   처방은 셋 중 가장 가벼운 하나(칩 줄바꿈)만 푸는 것 — min-content 가 '칩 1개 폭' 으로 떨어진다.
   ⚠️ `min-width:0`·`overflow:hidden` 계열은 쓰지 않았다: 전자는 칩이 안 접혀 넘침이 밖으로 새고,
      후자는 증상만 가린다.
   ⚠️ 아래 `flex-wrap:wrap` 은 원래 820px 블록에 있던 선언을 **옮긴 것**이다(중복 아님).
      960 블록은 ≤820 에서도 매칭되므로 모바일 동작은 그대로다.
      961px 이상은 이 블록 밖이라 base 의 `flex-wrap:nowrap` 이 그대로 산다. */
@media(max-width:960px){
  .scatter,.unified-box{flex-wrap:wrap}
}
@media(max-width:820px){
  .split-compare{flex-direction:column}
  .split-arrow{transform:rotate(90deg)}
}

/* Section tint helper */
.tint{background:var(--g-100)}

/* 섹션 포인트 글로우 — 강조가 필요한 흰 배경 섹션에 브랜드 톤 은은하게 (hero/subhero와 동일한 radial-gradient 기법 재사용) */
.sec-glow{position:relative;overflow:hidden}
.sec-glow::before,.sec-glow::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%}
.sec-glow::before{width:640px;height:640px;background:radial-gradient(circle,var(--c-primary-50) 0%,transparent 62%)}
.sec-glow::after{width:520px;height:520px;background:radial-gradient(circle,var(--c-primary-50) 0%,transparent 62%);opacity:.7}
.sec-glow.tr::before{top:-220px;right:-160px}
.sec-glow.bl::after{bottom:-200px;left:-140px}
/* 스크롤 드리프트: site.js가 섹션 통과 진행률에 따라 --glow-y를 갱신 */
.sec-glow::before{transform:translateY(var(--glow-y,0px))}
.sec-glow::after{transform:translateY(calc(var(--glow-y,0px) * -1))}
.sec-glow>.container{position:relative;z-index:1}

/* Comparison table (pricing) */
.cmp-wrap{overflow-x:auto;border:1px solid var(--g-200);border-radius:var(--r-card);margin-top:16px}
.cmp{width:100%;border-collapse:collapse;min-width:680px;background:#fff}
.cmp th,.cmp td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--g-100);font-size:14px}
.cmp thead th{background:var(--g-50);font-weight:800;color:var(--g-900);font-size:15px;position:sticky;top:0}
.cmp tbody th{text-align:left;font-weight:600;color:var(--g-700)}
.cmp td .yes{color:var(--c-primary-deep);font-weight:800}
.cmp td .no{color:var(--g-300)}
.cmp .grp td{background:var(--g-50);font-weight:800;color:var(--g-900);text-align:left;font-size:13px;letter-spacing:.02em}
.cmp tr:hover td,.cmp tr:hover th{background:var(--c-primary-50)}
.cmp col.hl,.cmp .hl{background:rgba(90,90,245,.05)}

/* Customer case cards */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.support-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case-card{background:#fff;border:1px solid var(--g-200);border-radius:var(--r-card);padding:28px;transition:transform .2s,box-shadow .2s}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.case-card .top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.case-card .lg{width:44px;height:44px;border-radius:12px;background:var(--grad-btn);display:grid;place-items:center;color:#fff;font-weight:800}
.case-card .co{font-weight:800;color:var(--g-900);font-size:15px}
.case-card .in{font-size:12px;color:var(--g-500)}
.case-card blockquote{font-size:15px;color:var(--g-700);line-height:1.7;font-weight:500}
.case-card .metric{margin-top:18px;padding-top:16px;border-top:1px solid var(--g-100);display:flex;gap:20px}
.case-card .metric .m .n{font-size:22px;font-weight:800;color:var(--c-primary-deep)}
.case-card .metric .m .l{font-size:12px;color:var(--g-500)}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info h3{font-size:22px;font-weight:800;color:var(--g-900);margin-bottom:16px;letter-spacing:-.02em}
.contact-info .ci-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--g-100)}
.contact-info .ci-item .ico{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--c-primary-50);color:var(--c-primary-deep);display:grid;place-items:center;font-size:18px}
.contact-info .ci-item b{color:var(--g-900);font-size:15px;display:block;margin-bottom:2px}
.contact-info .ci-item span{color:var(--g-500);font-size:14px}
/* 이메일 항목만 링크(a)다 — 다른 항목의 span 과 같은 크기로 두되 눌리는 것이 보이게 색만 준다. */
.contact-info .ci-item .ci-mail{display:block;color:var(--c-primary);font-size:14px;text-decoration:underline}
.form-card{background:#fff;border:1px solid var(--g-200);border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh-md)}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:700;color:var(--g-900);margin-bottom:8px}
.field label .req{color:#FF5A5F}
.field input,.field select,.field textarea{
  width:100%;height:48px;border:1px solid var(--g-300);border-radius:var(--r-btn);
  padding:0 14px;font-size:15px;font-family:inherit;color:var(--g-900);background:#fff;
  transition:border-color .15s,box-shadow .15s;outline:none;
}
.field textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
/* 브라우저 기본 셀렉트 화살표는 가장자리에 바짝 붙어 어색해 보여서,
   화살표를 없애고 여백을 준 커스텀 셰브런 아이콘으로 교체 */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1L5.5 5.5L10 1' stroke='%236B7080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(90,90,245,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* 문의 폼 동의 고지(2026-08-13) — 개인정보보호법 제15조·제22조는 동의를 받을 때
   ①이용 목적 ②수집 항목 ③보유·이용 기간 ④거부권과 그에 따른 불이익을 **함께** 알리도록 한다.
   체크박스 한 줄만 두면 그 넷 중 셋이 빠진다(챗봇 접수 흐름은 넷을 다 말한다 — 같은 데이터를
   같은 수준으로 고지해야 한다). 🔴 보유기간 숫자는 개인정보처리방침 §3 ·
   RetentionService(INQUIRY_RETENTION_MONTHS)와 같아야 하며 inquiry-retention.test.mjs 가 대조한다. */
.form-consent{font-size:12.5px;line-height:1.75;color:var(--g-500);background:var(--g-50);border:1px solid var(--g-200);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.form-consent ul{margin:0;padding-left:16px}
.form-consent li+li{margin-top:4px}
.form-consent a{color:var(--c-primary);text-decoration:underline}
.form-agree{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--g-500);margin-bottom:20px}
.form-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--c-primary)}

/* features.html AI 섹션: 파스텔 래핑 박스 제거(이중 박스 방지) — 채팅 패널 하나만 또렷하게 */
#ai .feat-visual{background:transparent;border:none;padding:0}
/* 모든 예시 이미지 카드 크기 통일 (고정 높이 + 내용은 상단 정렬) */
#ai .feat-visual > .panel{border:1px solid var(--g-200);box-shadow:0 14px 34px rgba(16,22,45,.10);height:360px;display:flex;flex-direction:column}
/* 채팅은 위, 퀵 태그 박스는 항상 카드 하단에 동일 배치 */
#ai .feat-visual > .panel .panel-b{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
#ai .feat-visual .chat{flex:1;min-height:0}
#ai .feat-visual .chat .bub{background:#fff;border:1px solid var(--g-200)}
#ai .feat-visual .chat .msg.me .bub{background:var(--c-primary);border:none;color:#fff}
#ai .ai-quickchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--g-100);flex-shrink:0}
#ai .ai-quickchips span{font-size:11.5px;font-weight:700;color:var(--g-700);background:#fff;border:1px solid var(--g-200);border-radius:999px;padding:6px 12px}

/* Feature page section list (클릭 없는 장식용 태그) */
.feat-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.feat-nav a,.feat-nav span{padding:9px 18px;border-radius:999px;background:var(--white);border:1px solid var(--g-200);font-weight:700;font-size:14px;color:var(--g-700);cursor:default}

@media(max-width:960px){
  .cases,.contact-grid,.support-menu{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cases{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

/* ============ 챗봇 상담 위젯 (홈페이지 전용) ============ */
.chatbot{position:fixed;right:24px;bottom:24px;z-index:50}
.chatbot-toggle{height:56px;padding:0 22px 0 10px;border-radius:999px;background:linear-gradient(120deg,#ffffff 0%,var(--c-primary-50) 100%);color:var(--c-primary-deep);box-shadow:var(--sh-lg),0 0 0 1px rgba(90,90,245,.12) inset;display:flex;align-items:center;gap:8px;border:none;cursor:pointer}
.chatbot-toggle .cb-ico{width:38px;height:38px;object-fit:contain;flex-shrink:0}
/* AI 아이콘: 마우스 오버 시 한 바퀴만 회전 (재진입할 때마다 다시 1회전) */
@keyframes cb-ico-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.chatbot-toggle:hover .cb-ico{animation:cb-ico-spin .7s ease}
.chatbot-toggle .cb-label{font-size:15px;font-weight:800;white-space:nowrap;color:var(--c-primary-deep)}
.chatbot-panel{position:absolute;bottom:72px;right:0;width:420px;max-height:calc(100vh - 120px);background:#fff;border-radius:22px;
  box-shadow:0 24px 70px rgba(16,22,45,.28),0 0 0 1px rgba(90,90,245,.08);display:none;flex-direction:column;overflow:hidden}
.chatbot-panel.open{display:flex}
/* 헤더: AI 아이콘 + 온라인 상태 */
.chatbot-head{display:flex;align-items:center;gap:12px;padding:18px 20px;background:var(--grad-btn);color:#fff;flex-shrink:0}
.cb-head-ico{width:40px;height:40px;border-radius:13px;background:#fff;display:grid;place-items:center;flex-shrink:0}
.cb-head-ico img{width:30px;height:30px;object-fit:contain}
.cb-head-txt{flex:1;min-width:0}
.chatbot-head b{display:block;font-size:14.5px;font-weight:800}
.chatbot-head span{display:flex;align-items:center;gap:5px;font-size:11px;opacity:.9;margin-top:2px}
.cb-on{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 6px rgba(74,222,128,.9);flex-shrink:0}
.chatbot-close{background:rgba(255,255,255,.18);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:12px;flex-shrink:0;transition:background .15s}
.chatbot-close:hover{background:rgba(255,255,255,.32)}
/* 대화 영역 */
.chatbot-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 18px 22px 20px;display:flex;flex-direction:column;gap:14px;
  min-height:360px;max-height:480px;background:var(--g-50)}
.cb-msg{font-size:13.5px;line-height:1.7;padding:12px 15px;border-radius:16px;max-width:82%;word-break:break-word}
.cb-msg.bot{position:relative;background:#fff;color:var(--g-800);border:1px solid var(--g-200);
  border-top-left-radius:5px;align-self:flex-start;margin-left:32px;box-shadow:var(--sh-sm)}
.cb-msg.bot::before{content:"";position:absolute;left:-32px;top:-1px;width:25px;height:25px;
  background:url("../img/icon3d/AI.png") center/contain no-repeat}
.cb-msg.user{background:var(--grad-btn);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;box-shadow:0 4px 12px rgba(90,90,245,.25)}
/* 타이핑 인디케이터 */
.cb-typing{display:inline-flex;gap:4px;align-items:center;padding:3px 2px}
.cb-typing i{width:6px;height:6px;border-radius:50%;background:var(--g-300);animation:cb-dot 1s ease-in-out infinite}
.cb-typing i:nth-child(2){animation-delay:.15s}
.cb-typing i:nth-child(3){animation-delay:.3s}
@keyframes cb-dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
/* 추천 질문 칩 */
.chatbot-quick{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;flex-shrink:0;background:var(--g-50);border-top:1px solid var(--g-100)}
.chatbot-quick button{font-size:12.5px;font-weight:700;color:var(--c-primary-deep);background:#fff;
  border:1px solid var(--c-primary-50);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .15s,border-color .15s}
.chatbot-quick button:hover{background:var(--c-primary-50);border-color:var(--c-primary)}
/* 답변 아래 이동 버튼(요금 페이지·무료체험·도입 상담 등으로 바로 연결) */
.cb-link-btn{align-self:flex-start;margin-left:32px;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--grad-btn);border-radius:10px;
  padding:9px 14px;box-shadow:0 3px 10px rgba(90,90,245,.28);transition:transform .15s,box-shadow .15s}
.cb-link-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(90,90,245,.35)}
/* 개인정보처리방침처럼 '읽어보는' 링크 — 주행동(등록 버튼)과 경쟁하지 않게 톤을 낮춘다 */
.cb-link-quiet{color:var(--c-primary-deep);background:#fff;border:1px solid var(--c-primary-50);box-shadow:none}
.cb-link-quiet:hover{background:var(--c-primary-50);box-shadow:none}
/* 대화형 문의 접수의 선택지 버튼(유형·팀 규모·건너뛰기·동의) — 말풍선 아래 줄바꿈되며 놓인다 */
.cb-choices{display:flex;flex-wrap:wrap;gap:8px;margin-left:32px;align-self:flex-start;max-width:calc(100% - 32px)}
.cb-choice{font-size:12.5px;font-weight:700;color:var(--c-primary-deep);background:#fff;
  border:1px solid var(--c-primary-50);border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:background .15s,border-color .15s,opacity .15s}
.cb-choice:hover:not(:disabled){background:var(--c-primary-50);border-color:var(--c-primary)}
/* 고른 뒤에는 다시 못 누른다는 것이 보여야 한다(같은 값이 두 번 들어가는 착각을 막는다) */
.cb-choice:disabled{opacity:.45;cursor:default}
.cb-choice-primary{color:#fff;background:var(--grad-btn);border-color:transparent;box-shadow:0 3px 10px rgba(90,90,245,.28)}
.cb-choice-primary:hover:not(:disabled){background:var(--grad-btn);border-color:transparent;transform:translateY(-1px)}
/* 입력창 */
.chatbot-input{display:flex;align-items:center;gap:10px;padding:14px 18px 16px;border-top:1px solid var(--g-100);flex-shrink:0;background:#fff}
.chatbot-input input{flex:1;min-width:0;border:1px solid var(--g-200);border-radius:999px;padding:12px 18px;font-size:13.5px;font-family:inherit;background:var(--g-50);transition:border-color .15s,box-shadow .15s;outline:none}
.chatbot-input input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(90,90,245,.14);background:#fff}
.chatbot-input button{width:44px;height:44px;border-radius:50%;background:var(--grad-btn);color:#fff;border:none;
  font-size:18px;line-height:1;font-weight:700;cursor:pointer;flex-shrink:0;display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(90,90,245,.35);transition:transform .15s}
.chatbot-input button:hover{transform:scale(1.08)}
@media(max-width:480px){
  .chatbot{right:16px;bottom:16px}
  .chatbot-panel{width:calc(100vw - 32px);right:-8px}
}

/* ============ 공지사항 목록 (notice board list) ============ */
.notice-list{border-top:2px solid var(--g-200)}
.notice-list li{border-bottom:1px solid var(--g-100)}
.notice-list a{display:flex;align-items:center;gap:14px;padding:20px 8px;transition:background .15s}
.notice-list a:hover{background:var(--g-50)}
.notice-list .badge{flex:0 0 auto}
.notice-list .nl-title{flex:1;min-width:0;font-size:15.5px;font-weight:600;color:var(--g-900);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-list a:hover .nl-title{color:var(--c-primary-deep)}
.notice-list .nl-date{flex:0 0 auto;font-size:14px;color:var(--g-400)}
.notice-list .nl-arrow{flex:0 0 auto;color:var(--g-300);font-size:15px;transition:transform .15s,color .15s}
.notice-list a:hover .nl-arrow{color:var(--c-primary);transform:translateX(3px)}
@media(max-width:560px){
  .notice-list a{flex-wrap:wrap;gap:8px 10px;padding:16px 6px}
  .notice-list .nl-title{flex:1 0 100%;order:3;white-space:normal}
  .notice-list .nl-arrow{display:none}
}

/* ============ 공지사항 상세 (notice detail) ============ */
.notice-detail-head{background:radial-gradient(1000px 460px at 70% -20%,#ECECFE 0%,transparent 60%),var(--white);padding:40px 0 32px;border-bottom:1px solid var(--g-100)}
.notice-top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.notice-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--g-500);transition:color .15s}
.notice-back:hover{color:var(--c-primary)}
.notice-copy{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--g-700);background:#fff;border:1px solid var(--g-200);border-radius:999px;padding:8px 15px;transition:border-color .15s,color .15s,background .15s}
.notice-copy:hover{border-color:var(--c-primary);color:var(--c-primary-deep)}
.notice-copy .ci{font-size:14px;line-height:1}
.notice-copy.copied{background:var(--c-primary-50);border-color:var(--c-primary-100,#dcdcfb);color:var(--c-primary-deep)}
.notice-meta-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.notice-date{font-size:14px;color:var(--g-400)}
.notice-title{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--g-900);letter-spacing:-.02em;line-height:1.3}
.notice-byline{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13.5px;color:var(--g-500)}
.notice-byline .dot-sep{color:var(--g-300)}
.notice-byline b{color:var(--g-700);font-weight:700}

.notice-body{padding:40px 0 8px;font-size:16px;color:var(--g-700);line-height:1.85}
.notice-body>*+*{margin-top:20px}
.notice-body .lead{font-size:17px;color:var(--g-900);font-weight:600;line-height:1.7}
.notice-body h2{font-size:20px;font-weight:800;color:var(--g-900);letter-spacing:-.01em;margin-top:36px}
.notice-body h2+*{margin-top:14px}
.notice-body h3{font-size:16px;font-weight:800;color:var(--g-900);margin-top:24px}
.notice-body p{color:var(--g-700)}
.notice-body strong,.notice-body b{color:var(--g-900);font-weight:700}
.notice-body a{color:var(--c-primary-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.notice-body ul,.notice-body ol{padding-left:4px;display:flex;flex-direction:column;gap:10px}
.notice-body ul li{position:relative;padding-left:24px;color:var(--g-700)}
.notice-body ul li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--c-primary)}
.notice-body ol{counter-reset:ni;list-style:none}
.notice-body ol li{position:relative;padding-left:32px;counter-increment:ni}
.notice-body ol li::before{content:counter(ni);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--c-primary-50);color:var(--c-primary-deep);font-size:12px;font-weight:800;display:grid;place-items:center}
.notice-body img{border-radius:var(--r-card);border:1px solid var(--g-200);margin-top:24px}

/* 강조 콜아웃 박스 */
.notice-callout{display:flex;gap:14px;background:var(--c-primary-50);border:1px solid var(--c-primary-100,#dcdcfb);border-radius:var(--r-card);padding:18px 20px;font-size:14.5px;line-height:1.7}
.notice-callout .ico{flex:0 0 24px;font-size:20px;line-height:1.3}
.notice-callout b{color:var(--c-primary-deep)}
/* ── 가이드(외부 AI 연결) — 2026-09-16 ─────────────────────────────────────
   기존 `.notice-body` 위에 얹는 최소 세트다. 새 레이아웃을 만들지 않는다.
   🔴 `pre`/`code` 는 이 사이트에 스타일이 없었다 — 명령어를 그냥 넣으면 본문과 구분이 안 되고
      폰에서 긴 한 줄이 페이지를 가로로 밀어낸다(그 결함을 이 저장소가 features.html 에서 겪었다).
      그래서 **가로 스크롤을 자기 안에서** 처리한다. */
.guide-cmd{display:block;background:var(--g-900,#111827);color:#e5e7eb;border-radius:var(--r-card);
  padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.65;
  overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch}
.guide-cmd .c{color:#9ca3af}
.guide-step{display:flex;gap:14px;align-items:flex-start}
.guide-num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--c-primary);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1}
.guide-step-b{flex:1;min-width:0}
/* 🔴 **첫 <b> 만** 제목 줄이다. `b{display:block}` 로 두면 문장 속 강조까지 줄바꿈되어
      '그 자리에서 / 한 번만 / 보이니' 처럼 문장이 토막난다(브라우저로 보고 잡았다). */
.guide-step-b>b:first-child{display:block;color:var(--g-900);margin-bottom:4px}
.guide-step-b b{color:var(--g-900)}
/* 대화 예시 — 무엇을 치면 무엇이 오는지. 말풍선 흉내를 내지 않는다(제품 화면이 아니다). */
.guide-say{border-left:3px solid var(--c-primary);padding:4px 0 4px 16px;color:var(--g-900);font-weight:600}
.guide-got{color:var(--g-700);padding-left:19px;font-size:15px}

/* 첨부파일 */
.notice-attach{margin-top:36px;border-top:1px dashed var(--g-200);padding-top:24px}
.notice-attach h4{font-size:13px;font-weight:800;color:var(--g-500);letter-spacing:.02em;margin-bottom:12px}
.notice-attach a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--g-200);border-radius:var(--r-btn);padding:13px 16px;font-size:14px;color:var(--g-900);font-weight:600;text-decoration:none;transition:border-color .15s,box-shadow .15s;margin-top:8px}
.notice-attach a:hover{border-color:var(--c-primary);box-shadow:var(--sh-sm)}
.notice-attach a .fico{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:var(--c-primary-50);color:var(--c-primary-deep);display:grid;place-items:center;font-size:16px}
.notice-attach a .fsize{margin-left:auto;font-size:12px;color:var(--g-400);font-weight:600}

/* 이전/다음 글 */
.notice-pager{margin-top:44px;border-top:1px solid var(--g-200);border-bottom:1px solid var(--g-200)}
.notice-pager a{display:flex;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid var(--g-100);transition:background .15s}
.notice-pager a:last-child{border-bottom:none}
.notice-pager a:hover{background:var(--g-50)}
.notice-pager .dir{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--g-400);letter-spacing:.02em;min-width:52px}
.notice-pager .t{font-size:14.5px;color:var(--g-700);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-pager a:hover .t{color:var(--c-primary-deep)}
.notice-pager .disabled{opacity:.45;pointer-events:none}

@media(max-width:640px){
  .notice-body{font-size:15px}
  .notice-callout{flex-direction:column;gap:8px}
}


/* ── 다운로드 페이지 보조 요소(홈페이지 구축 시 추가) ── */
.btn.is-disabled{opacity:.5;pointer-events:none;cursor:default}
.dl-alt{display:inline-block;margin-top:10px;font-size:13px;color:var(--c-primary);text-decoration:underline;text-underline-offset:2px}
.dl-alt:hover{color:var(--c-primary-dark)}
/* 스토어 버튼 아래 한 줄 설명 — 왜 스토어가 나은지(서명·자동 업데이트)를 여기서만 말한다.
   🔴 `.v-card p`(0,1,1) 가 `.dl-note`(0,1,0) 를 **이긴다** — 클래스만 쓰면 크기·색이 조용히 안 먹는다
      (실측: 12px 로 적었는데 15px 로 렌더됐다). 카드 안이라는 것을 선택자에 적어 특이도를 맞춘다.
   ⚠️ 12px 는 작은 글씨라 대비를 AA(4.5:1) 위로 둔다 — `--c-text-muted` 는 흰 배경에서 5.14:1.
      (같은 카드의 본문 `p` 는 3.47:1 인데 그건 이 페이지 전역 관례라 여기서 건드리지 않는다.) */
.v-card .dl-note{margin:8px 0 2px;font-size:12px;line-height:1.6;color:var(--c-text-muted)}
/* 보조 링크가 둘이면 카드 폭에서 **줄이 바뀐다**(실측) — 가로 간격이 아니라 세로 간격이 필요하다. */
.dl-alt+.dl-alt{margin-top:6px}

/* 🔴 모바일에서 강제 개행이 화면을 넘기던 것(2026-08-12 사용자 신고).
   히어로 문구의 <br> 는 데스크톱 줄바꿈을 예쁘게 잡으려고 넣은 것인데, 좁은 화면에서는
   그 지점까지 한 줄에 밀어 넣으려다 **가로로 넘친다**. 좁을 땐 자연스럽게 흐르게 둔다.
   ⚠️ 지우지 말 것 — 데스크톱에서는 이 개행이 있어야 문장이 어색하게 안 끊긴다. */
@media (max-width: 640px) {
  .brk-lg { display: none; }
  .hero-copy h1, .hero-copy .sub { overflow-wrap: anywhere; word-break: keep-all; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   문서형 안내 페이지 본문 (이용약관 · 개인정보처리방침 · 계정 삭제 안내)
   2026-08-17 추가 — 다중 에이전트 감사에서 나온 것.

   🔴 왜 필요한가: 40행의 전역 리셋 `*{margin:0;padding:0}` 과 56행 `ul{list-style:none}` 이
      **소재 그대로의 태그를 전부 무력화**한다. 마케팅 페이지는 `.mini-check` 같은 전용 클래스로
      마커를 직접 그리니 문제가 없지만, 안내 페이지는 `<ol>`·`<ul>`·`<h2>`·`<p>` 를 그대로 쓴다.
      그 결과 실측(1280px):
        · 계정 삭제 절차 `<ol>` 의 **번호 1.2.3.4. 가 하나도 안 보였다**
          (list-style-type 은 decimal 인데 padding-left:0 이라 마커가 li 박스 왼쪽 바깥 x<0 에 그려진다)
        · `<ul>` 19개 항목의 불릿이 전부 사라져 절차가 문장 나열로 보였다
        · `<h2>` 5개의 위아래 여백이 0이라 절 제목이 앞 문장에 붙었다
        · 본문 링크가 색도 밑줄도 없어 **일반 텍스트와 구분되지 않았다**
        · 제목이 브라우저 기본값이라 사이트 표준 잉크색(--g-900)·굵기(800)를 못 받았다

   ⚠️ 범위를 `main .container` 로 좁힌 이유: 헤더·푸터의 `.container` 는 `<main>` **밖**이라
      메뉴 목록에 불릿이 생기지 않는다. 마케팅 페이지에는 `<main>` 이 없어 영향이 없다.
      `legal-oss.html` 은 `<main class="oss-wrap">` 라 여기 안 걸린다(자체 인라인 스타일이 있다).
   ⚠️ `legal-terms`·`legal-privacy` 는 생성기가 인라인 style 로 같은 값을 이미 넣는다 —
      인라인이 우선이므로 충돌하지 않고, 인라인이 없는 `account-delete` 만 이 규칙을 받는다.
   ───────────────────────────────────────────────────────────────────────────── */
main .container h1{color:var(--g-900);font-weight:800;letter-spacing:-.02em}
main .container h2{color:var(--g-900);font-weight:800;font-size:20px;margin:32px 0 8px}
main .container h3{color:var(--g-900);font-weight:700;font-size:17px;margin:24px 0 6px}
main .container p{margin:0 0 10px;line-height:1.9}
main .container ul,main .container ol{margin:0 0 10px;padding-left:1.35em}
main .container ul{list-style:disc}
main .container ol{list-style:decimal}
main .container li{margin-bottom:4px;line-height:1.9}
main .container a{color:var(--c-primary);text-decoration:underline}

/* 문의·도입 상담 폼의 법정 동의 고지 — 같은 리셋에 불릿이 지워져 4개 항목이 한 덩어리로 보였다.
   `.form-consent ul`(0,1,1) 이 `ul{list-style:none}`(0,0,1) 보다 특이도가 높아 되살아난다. */
.form-consent ul{list-style:disc}