/* =========================================================
   APTMANT 커뮤니티 — 리뉴얼 공통 스타일
   디자인 톤: apartmant.co.kr (주색 #3568E0 · Pretendard · 연블루 · 다크 푸터)
   구조·연출: aptner.com 벤치마킹
   ========================================================= */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  --primary: #3568e0;
  --primary-hover: #2557d1;
  --primary-deep: #16388b;
  --blue-50: #f2f6fe;
  --blue-100: #e5edfc;
  --blue-200: #cbdaf9;
  --blue-300: #a5bff4;
  --sky: #0077cc;
  --teal: #007a93;
  --cyan: #0ea5c6;

  --ink: #111927;
  --gray-800: #1f2a37;
  --gray-700: #384250;
  --gray-600: #4d5761;
  --gray-500: #6c727e;
  --gray-400: #9da4ae;
  --gray-300: #d2d6db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;

  --success: #10b981;
  --success-deep: #059669;
  --warning: #f59e0b;
  --warning-deep: #b45309;
  --danger: #ef4444;
  --danger-deep: #dc2626;

  --hero-grad: linear-gradient(180deg, #f8f9fc 0%, #f1f6ff 55%, #e1ebff 100%);
  --deep-grad: linear-gradient(110deg, #2557d1 0%, #1d47b5 45%, #16388b 100%);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-num: 'Outfit', 'Pretendard Variable', Pretendard, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(17, 25, 39, 0.06);
  --shadow-md: 0 14px 36px -14px rgba(17, 25, 39, 0.18);
  --shadow-lg: 0 32px 70px -24px rgba(17, 25, 39, 0.28);
  --shadow-blue: 0 14px 30px -12px rgba(53, 104, 224, 0.55);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 72px;
  --container: 1200px;
}

/* ---------- 2. 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--blue-200); }
[hidden] { display: none !important; }

svg.ico {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* 그리드 자식이 내용 폭 때문에 칸을 밀어내지 않도록 */
.fs-wrap > *, .row-2 > *, .hw-wrap > *, .tl-wrap > *, .feat-panel > *, .hero-inner > *,
.sub-hero-inner > *, .contact-box > *, .connect > *, .aud-grid > *, .value-grid > * { min-width: 0; }
.section { padding: 120px 0; position: relative; }
/* 목차·#주소로 이동할 때 상단 고정 메뉴에 제목이 가려지지 않도록 */
main section[id] { scroll-margin-top: calc(var(--header-h) - 2px); }
.section.gray { background: var(--gray-50); }
.section.tint { background: var(--blue-50); }
.section.tight { padding: 96px 0; }

/* ---------- 3. 타이포 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 14px;
}
.sec-head { margin-bottom: 56px; position: relative; z-index: 1; }
.sec-head.center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.sec-title {
  font-size: 42px; font-weight: 800; line-height: 1.28; letter-spacing: -0.035em; color: var(--ink);
}
.sec-title .accent, .accent { color: var(--primary); }
.sec-desc { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--gray-500); }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.big-num {
  position: absolute; top: -34px; right: 0; z-index: 0; pointer-events: none;
  font-family: var(--font-num); font-weight: 800; font-size: 180px; line-height: 1;
  color: var(--blue-50); letter-spacing: -0.04em;
}
.section.gray .big-num, .section.tint .big-num { color: #e9effc; }
.num { font-family: var(--font-num); letter-spacing: -0.02em; }

/* ---------- 4. 버튼 · 칩 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: var(--r-md);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.btn svg.ico { width: 18px; height: 18px; stroke-width: 2.1; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(22, 56, 139, 0.25); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-blue); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--gray-800); }
.btn-ghost { background: var(--gray-100); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-200); color: var(--ink); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--gray-200); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-white { background: #fff; color: var(--primary-deep); }
.btn-white:hover { background: var(--blue-50); }
.btn-line-white { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-line-white:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.btn-lg { height: 58px; padding: 0 30px; font-size: 17px; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background 0.18s, color 0.18s, box-shadow 0.2s;
}
.pill-gray { background: var(--gray-100); color: var(--gray-700); }
.pill-gray:hover { background: var(--gray-200); color: var(--ink); }
.pill-primary { background: var(--primary); color: #fff; }
.pill-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-blue); }

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 700; color: var(--primary);
  transition: gap 0.2s var(--ease), color 0.15s;
}
.text-link svg.ico { width: 17px; height: 17px; stroke-width: 2.2; }
.text-link:hover { gap: 10px; color: var(--primary-hover); }

.badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--blue-200);
  font-size: 14.5px; font-weight: 700; color: var(--primary);
  box-shadow: 0 6px 18px -10px rgba(53, 104, 224, 0.45);
}
.badge-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.badge-pill .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-300); }

.tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--gray-700); background: var(--gray-100);
}
.tag.blue { background: var(--blue-100); color: var(--primary); }
.tag.line { background: #fff; border: 1px solid var(--gray-200); }
.tag.dark { background: rgba(17, 25, 39, 0.72); color: #fff; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pill-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--gray-200);
  font-size: 15.5px; font-weight: 600; color: var(--gray-700); white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.2s;
}
.pill-tab svg.ico { width: 18px; height: 18px; }
.pill-tab:hover { border-color: var(--primary); color: var(--primary); }
.pill-tab.active, .pill-tab[aria-selected="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-blue);
}

.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--gray-700); line-height: 1.6; }
.check-list .ck {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
}
.check-list .ck svg.ico { width: 13px; height: 13px; stroke-width: 3; }

/* ---------- 5. 헤더 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--gray-100);
  transition: box-shadow 0.25s;
}
.site-header.scrolled { box-shadow: 0 8px 24px -16px rgba(17, 25, 39, 0.25); }
.hd-inner {
  max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 40px;
}
.hd-logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hd-logo img { height: 30px; width: auto; }
.hd-logo-sub {
  font-size: 15px; font-weight: 700; color: var(--gray-500); padding-left: 12px;
  border-left: 1.5px solid var(--gray-300); line-height: 1.1; letter-spacing: -0.01em;
}
.gnb { flex: 1; display: flex; justify-content: center; }
.gnb-list { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.gnb-list > li { position: static; height: 100%; display: flex; align-items: center; }
.gnb-link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 100%; padding: 0 16px; font-size: 16.5px; font-weight: 700; color: var(--ink);
  transition: color 0.15s;
}
.gnb-link svg.ico { width: 16px; height: 16px; stroke-width: 2.2; transition: transform 0.2s; }
.gnb-link::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2.5px; border-radius: 2px;
  background: var(--primary); transform: scaleX(0); transition: transform 0.25s var(--ease);
}
.gnb-link:hover, .gnb-link.active, .has-mega.open > .gnb-link { color: var(--primary); }
.gnb-link.active::after { transform: scaleX(1); }
.has-mega.open > .gnb-link svg.ico { transform: rotate(180deg); }
.hd-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hd-burger {
  display: none; width: 44px; height: 44px; margin-left: auto; margin-right: -8px;
  align-items: center; justify-content: center; border-radius: 12px; color: var(--ink);
}
.hd-burger svg.ico { width: 26px; height: 26px; stroke-width: 2; }
.hd-burger:hover { background: var(--gray-100); }

/* 메가 메뉴 */
.mega {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: #fff; border-top: 1px solid var(--gray-100);
  box-shadow: 0 30px 50px -30px rgba(17, 25, 39, 0.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.has-mega.open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { max-width: 1200px; margin: 0 auto; padding: 32px 24px 36px; display: grid; grid-template-columns: 260px 1fr; gap: 40px; }
.mega-intro b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.mega-intro p { margin: 8px 0 18px; font-size: 14.5px; color: var(--gray-500); line-height: 1.6; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mega-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s;
}
.mega-item:hover, .mega-item.active { background: var(--blue-50); border-color: var(--blue-100); }
.mega-item b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.mega-item small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }
.mi-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.mi-ico svg.ico { width: 21px; height: 21px; }

/* 모바일 메뉴 */
.m-menu {
  position: fixed; inset: 0; z-index: 1100; background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0.35s;
}
.m-menu.open { transform: translateX(0); visibility: visible; }
.m-menu-head { height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; border-bottom: 1px solid var(--gray-100); }
.m-menu-head img { height: 26px; width: auto; }
.m-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.m-close svg.ico { width: 26px; height: 26px; }
.m-menu-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.m-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 18px 20px; font-size: 18px; font-weight: 700; color: var(--ink); text-align: left;
  border-bottom: 1px solid var(--gray-100);
}
.m-link.active { color: var(--primary); }
.m-link svg.ico { width: 20px; height: 20px; transition: transform 0.25s; color: var(--gray-400); }
.m-link[aria-expanded="true"] svg.ico { transform: rotate(180deg); color: var(--primary); }
.m-sub { background: var(--gray-50); border-bottom: 1px solid var(--gray-100); padding: 6px 0; }
.m-sub a { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 16px; font-weight: 600; color: var(--gray-700); }
.m-sub a.active { color: var(--primary); }
.m-sub a .mi-ico { width: 34px; height: 34px; border-radius: 10px; }
.m-sub a .mi-ico svg.ico { width: 17px; height: 17px; }
.m-menu-foot { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gray-100); }
.m-menu-foot .btn { height: 52px; border-radius: 999px; font-size: 15.5px; }

/* ---------- 6. 메인 히어로 ---------- */
.hero { position: relative; overflow: hidden; background: var(--hero-grad); padding: 88px 0 104px; }
.hero-lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.7; }
.hero-lines svg { width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; }
.hero h1 {
  margin: 24px 0 22px; font-size: 56px; font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; color: var(--ink);
}
.hero-sub { font-size: 19px; line-height: 1.75; color: var(--gray-600); max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-kw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; max-width: 460px; }
.hero-kw a {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--gray-200);
  font-size: 14px; font-weight: 600; color: var(--gray-700);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hero-kw a svg.ico { width: 15px; height: 15px; color: var(--primary); }
.hero-kw a:hover { border-color: var(--primary); color: var(--primary); background: #fff; }
.hero-visual { position: relative; display: flex; justify-content: flex-end; padding-right: 8px; }
.hero-visual::before {
  content: ''; position: absolute; width: 440px; height: 440px; border-radius: 50%; top: 50%; right: -66px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(53, 104, 224, 0.22) 0%, rgba(53, 104, 224, 0.06) 55%, transparent 72%);
}
.float-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 18px; background: #fff;
  box-shadow: 0 18px 40px -18px rgba(17, 25, 39, 0.35); border: 1px solid var(--blue-100);
  animation: chip-float 5.5s ease-in-out infinite;
}
.float-chip .fc-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(145deg, #eaf0fd, #d6e2fb); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.float-chip .fc-ico.green { background: linear-gradient(145deg, #e7f8f1, #cff1e3); color: var(--success-deep); }
.float-chip b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.float-chip small { display: block; font-size: 12px; color: var(--gray-500); white-space: nowrap; }
.float-chip.c1 { top: 13%; left: 0; }
.float-chip.c2 { top: 45%; left: 34px; animation-delay: -1.8s; }
.float-chip.c3 { bottom: 13%; left: 6px; animation-delay: -3.4s; }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- 7. 서브 히어로 · 서브 내비 ---------- */
.sub-hero { position: relative; overflow: hidden; background: #ebf1fd; padding: 64px 0 76px; }
.sub-hero .wm {
  position: absolute; right: -40px; bottom: -70px; width: 520px; opacity: 0.07; pointer-events: none;
  filter: grayscale(0.2);
}
.sub-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 40px; align-items: center; }
.sub-hero-inner.single { grid-template-columns: 1fr; max-width: 820px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--gray-500); margin-bottom: 22px; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; }
.crumb a:hover { color: var(--primary); }
.crumb svg.ico { width: 14px; height: 14px; opacity: 0.6; }
.crumb .cur { color: var(--ink); font-weight: 700; }
.sub-hero h1 { margin: 20px 0 18px; font-size: 45px; font-weight: 800; line-height: 1.26; letter-spacing: -0.04em; }
.sub-hero .desc { font-size: 18px; line-height: 1.75; color: var(--gray-600); max-width: 620px; }
.sub-hero .tag-row { margin-top: 26px; }
.sub-hero .tag-row .tag { background: #fff; border: 1px solid var(--blue-200); color: var(--primary); height: 32px; padding: 0 14px; font-size: 13.5px; }
.sub-hero-visual { display: flex; justify-content: center; position: relative; }

.icon-stage { position: relative; width: 340px; height: 300px; }
.icon-stage .ring { position: absolute; border-radius: 50%; border: 1.5px dashed var(--blue-300); opacity: 0.7; }
.icon-stage .ring.r1 { inset: 30px 40px; }
.icon-stage .ring.r2 { inset: -10px 0; opacity: 0.35; }
.icon-stage .core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 150px; height: 150px; border-radius: 40px;
  background: linear-gradient(150deg, #5d8bf0 0%, #3568e0 45%, #2248b8 100%);
  box-shadow: 0 30px 50px -20px rgba(34, 72, 184, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -10px 20px rgba(10, 30, 90, 0.25);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.icon-stage .core svg.ico { width: 68px; height: 68px; stroke-width: 1.5; }
.icon-stage .sat {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px;
  background: #fff; box-shadow: 0 14px 30px -14px rgba(17, 25, 39, 0.3); font-size: 13.5px; font-weight: 700; color: var(--gray-700);
  animation: chip-float 6s ease-in-out infinite; white-space: nowrap;
}
.icon-stage .sat svg.ico { width: 16px; height: 16px; color: var(--primary); }
.icon-stage .sat.s1 { top: 18px; left: 0; }
.icon-stage .sat.s2 { top: 60px; right: -14px; animation-delay: -2s; }
.icon-stage .sat.s3 { bottom: 22px; left: 20px; animation-delay: -4s; }

.subnav {
  position: sticky; top: var(--header-h); z-index: 800;
  background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--gray-200);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.subnav-inner {
  max-width: var(--container); margin: 0 auto; padding: 12px 24px;
  display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--gray-600); white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.subnav a svg.ico { width: 17px; height: 17px; }
.subnav a:hover { background: var(--gray-100); color: var(--ink); }
.subnav a.active { background: var(--primary); color: #fff; }

/* ---------- 8. 메인: 수치 ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: 34px 28px; text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.2s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.stat-card .st-ico {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px;
  background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center;
}
.stat-label { font-size: 15.5px; font-weight: 600; color: var(--gray-500); }
.stat-value { margin-top: 8px; font-family: var(--font-num); font-size: 50px; font-weight: 800; line-height: 1.1; color: var(--primary); letter-spacing: -0.03em; }
.stat-value small { font-family: var(--font); font-size: 20px; font-weight: 700; color: var(--gray-600); margin-left: 3px; letter-spacing: -0.02em; }

/* ---------- 9. 메인: 대상 분기 ---------- */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aud-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 340px; padding: 40px; border-radius: var(--r-xl);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.aud-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.aud-card.dark { background: var(--deep-grad); color: #fff; }
.aud-card.light { background: #fff; border: 1px solid var(--gray-200); }
.aud-card .kicker {
  align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em;
}
.aud-card.dark .kicker { background: rgba(255, 255, 255, 0.14); color: #dce7ff; }
.aud-card.light .kicker { background: var(--blue-100); color: var(--primary); }
.aud-card h3 { margin-top: 22px; font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.aud-card p { margin-top: 12px; font-size: 16.5px; line-height: 1.7; }
.aud-card.dark p { color: rgba(255, 255, 255, 0.78); }
.aud-card.light p { color: var(--gray-500); }
.aud-card .tag-row { margin-top: 20px; }
.aud-card.dark .tag { background: rgba(255, 255, 255, 0.12); color: #fff; }
.aud-card .aud-link { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16.5px; }
.aud-card.dark .aud-link { color: #fff; }
.aud-card.light .aud-link { color: var(--primary); }
.aud-card .aud-link svg.ico { width: 18px; height: 18px; stroke-width: 2.2; transition: transform 0.25s var(--ease); }
.aud-card:hover .aud-link svg.ico { transform: translateX(5px); }
.aud-card .aud-art {
  position: absolute; right: 28px; bottom: 26px; width: 120px; height: 120px; border-radius: 34px;
  display: flex; align-items: center; justify-content: center; transform: rotate(-8deg);
}
.aud-card.dark .aud-art { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); }
.aud-card.light .aud-art { background: var(--blue-50); color: var(--primary); }
.aud-card .aud-art svg.ico { width: 54px; height: 54px; stroke-width: 1.4; }

/* ---------- 10. 메인: 운영 고민 → 변화 ---------- */
.cmp-table { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-xl); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 210px 1fr 1fr 170px; align-items: center; gap: 24px; padding: 22px 32px; }
.cmp-row + .cmp-row { border-top: 1px solid var(--gray-100); }
.cmp-row.head { background: var(--gray-50); padding-top: 18px; padding-bottom: 18px; font-size: 14.5px; font-weight: 700; color: var(--gray-600); }
.cmp-row.head .lbl-before, .cmp-row.head .lbl-after { display: inline-flex; align-items: center; gap: 10px; }
.cmp-row.head .lbl-after { color: var(--primary); }
.cmp-mark { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; }
.cmp-mark.before { background: #fff; border: 1px solid var(--gray-300); color: var(--gray-500); }
.cmp-mark.after { background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--primary); }
.cmp-topic { display: flex; align-items: center; gap: 14px; }
.cmp-topic .ct-ico {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.cmp-topic small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--gray-400); }
.cmp-topic b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
.cmp-before { font-size: 15.5px; color: var(--gray-500); line-height: 1.6; }
.cmp-after { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.cmp-result { justify-self: end; }
.cmp-result span {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.cmp-result svg.ico { width: 15px; height: 15px; stroke-width: 2.4; }
.cmp-row .m-lbl { display: none; }

/* ---------- 11. 메인: 핵심 기능 선택 ---------- */
.fs-wrap { display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: start; }
.fs-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fs-card {
  position: relative; text-align: left; display: flex; flex-direction: column;
  min-height: 170px; padding: 24px 24px 22px; border-radius: var(--r-lg);
  background: #fff; border: 1.5px solid var(--gray-200);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease), background 0.2s;
}
.fs-card:hover { border-color: var(--blue-300); transform: translateY(-2px); }
.fs-card.active { border-color: var(--primary); background: var(--blue-50); box-shadow: var(--shadow-blue); }
.fs-card .fs-no { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--gray-400); letter-spacing: 0.08em; }
.fs-card.active .fs-no { color: var(--primary); }
.fs-card .fs-name { display: block; margin-top: 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.fs-card .fs-desc { display: block; margin-top: 6px; padding-right: 8px; font-size: 14.5px; color: var(--gray-500); line-height: 1.6; }
.fs-card .fs-ico {
  position: absolute; right: 20px; top: 20px; width: 46px; height: 46px; border-radius: 14px;
  background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.fs-card.active .fs-ico { background: var(--primary); color: #fff; }
.fs-panel {
  position: sticky; top: calc(var(--header-h) + 24px);
  border-radius: var(--r-xl); background: linear-gradient(160deg, #eef3fe 0%, #e2ebfd 100%);
  border: 1px solid var(--blue-100); padding: 28px; overflow: hidden;
}
.fs-view { display: none; }
.fs-view.active { display: block; animation: panel-in 0.45s var(--ease); }
.fs-view-link { display: block; cursor: pointer; }
.fs-stage { height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 20px; }
.fs-stage[data-href] { cursor: pointer; }
.fs-stage[data-href]:hover .preview { filter: drop-shadow(0 18px 30px rgba(53, 104, 224, 0.18)); }
.fs-stage .preview { pointer-events: none; user-select: none; }
.fs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.fs-foot b { font-size: 18px; font-weight: 800; }
.fs-foot small { display: block; font-size: 13.5px; color: var(--gray-500); font-weight: 500; }
.fs-dots { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 12. 메인: 하드웨어 ---------- */
.hw-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hw-copy .check-list { margin-top: 28px; }
.hw-badges { margin-top: 28px; }
.hw-visual {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, #f4f7fe 0%, #e3ebfd 100%); border: 1px solid var(--blue-100);
  aspect-ratio: 1 / 0.86; display: flex; align-items: center; justify-content: center;
}
.hw-visual img { width: 86%; height: auto; mix-blend-mode: multiply; }
.hw-visual .hw-cap {
  position: absolute; left: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 700; color: var(--gray-700);
  box-shadow: var(--shadow-md);
}
.hw-visual .hw-cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }

/* ---------- 13. 메인: 후기 슬라이더 ---------- */
.voice { position: relative; border-radius: var(--r-xl); background: var(--deep-grad); color: #fff; overflow: hidden; }
.voice::after {
  content: ''; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 65%); pointer-events: none;
}
.voice-track { display: flex; transition: transform 0.6s var(--ease); }
.voice-slide { flex: 0 0 100%; padding: 56px 64px 40px; display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: center; }
.voice-quote-mark { font-family: Georgia, serif; font-size: 72px; line-height: 0.6; color: #8fb0ff; height: 34px; }
.voice-slide blockquote { margin-top: 22px; font-size: 25px; font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; }
.voice-person { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.voice-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px;
}
.voice-person b { display: block; font-size: 16.5px; font-weight: 700; }
.voice-person small { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.voice-side { border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: 36px; }
.voice-side .vs-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.voice-side .vs-feature { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.voice-side .vs-feature span {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.voice-side a { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: #cddcff; }
.voice-side a:hover { color: #fff; }
.voice-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 64px 44px; }
.voice-dots { display: flex; gap: 8px; }
.voice-dots button { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transition: width 0.3s var(--ease), background 0.2s; }
.voice-dots button.active { width: 34px; background: #fff; }
.voice-arrows { display: flex; gap: 10px; }
.voice-arrows button {
  width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.voice-arrows button:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- 14. 메인: 도입 단지 마퀴 ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track, .marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-half { display: flex; gap: 20px; padding-right: 20px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.case-mini {
  width: 290px; flex-shrink: 0; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--gray-200);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.case-mini:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.case-art { position: relative; height: 150px; overflow: hidden; }
.case-art svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.case-art .ca-scale {
  position: absolute; top: 14px; left: 14px; z-index: 2; height: 26px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 700; color: var(--gray-700);
}
.art-1 { background: linear-gradient(160deg, #dbe6fd, #b9cdf8); }
.art-2 { background: linear-gradient(160deg, #d8f0f5, #a9dde8); }
.art-3 { background: linear-gradient(160deg, #e2e7fb, #c3cdf4); }
.art-4 { background: linear-gradient(160deg, #dcebff, #aed0f7); }
.art-5 { background: linear-gradient(160deg, #e5ecf8, #c7d4ea); }
.art-6 { background: linear-gradient(160deg, #d9f2ee, #aee0d7); }
.art-7 { background: linear-gradient(160deg, #e8e5fb, #cbc4f3); }
.art-8 { background: linear-gradient(160deg, #dfeafd, #bdd0f6); }
.case-mini-body { padding: 16px 18px 18px; }
.case-mini-body small { font-size: 13px; color: var(--gray-500); font-weight: 600; }
.case-mini-body b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; }
.case-mini-body .tag-row { margin-top: 10px; gap: 6px; }
.case-mini-body .tag { height: 24px; padding: 0 9px; font-size: 12px; }

/* ---------- 15. CTA 밴드 ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--deep-grad); color: #fff; padding: 104px 0; text-align: center; }
.cta-band .wm-text {
  position: absolute; left: 50%; bottom: -48px; transform: translateX(-50%); pointer-events: none;
  font-family: var(--font-num); font-size: 240px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: rgba(255, 255, 255, 0.06); white-space: nowrap;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { font-size: 42px; font-weight: 800; line-height: 1.3; letter-spacing: -0.035em; }
.cta-band p { margin-top: 14px; font-size: 18px; color: rgba(255, 255, 255, 0.8); }
.cta-band .cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.cta-checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.cta-checks span { display: inline-flex; align-items: center; gap: 8px; }
.cta-checks svg.ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); stroke-width: 3; }

/* ---------- 16. 푸터 ---------- */
.site-footer { background: var(--gray-800); color: #aab2bf; padding: 64px 0 40px; font-size: 14.5px; }
.ft-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ft-logo { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.72; }
.ft-slogan { margin-top: 12px; font-size: 14.5px; color: #8c96a5; }
.ft-contact { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.ft-contact li { display: flex; gap: 12px; }
.ft-contact span { width: 64px; color: #7d8796; }
.ft-contact b { color: #e5e9ef; font-weight: 600; }
.ft-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ft-col h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.ft-col a, .ft-col button { display: block; text-align: left; padding: 5px 0; color: #aab2bf; transition: color 0.15s; font-size: 14.5px; }
.ft-col a:hover, .ft-col button:hover { color: #fff; }
.ft-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-top: 28px; }
.ft-legal { display: flex; gap: 20px; }
.ft-legal button { color: #e5e9ef; font-weight: 700; font-size: 14.5px; }
.ft-legal button:hover { text-decoration: underline; }
.ft-company { color: #7d8796; font-size: 13.5px; line-height: 1.8; text-align: right; }

/* ---------- 17. 플로팅 ---------- */
.floating { position: fixed; right: 28px; bottom: 28px; z-index: 850; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 700;
  box-shadow: 0 14px 30px -12px rgba(17, 25, 39, 0.4); transition: transform 0.25s var(--ease), opacity 0.25s, background 0.15s, visibility 0.25s;
}
.fl-btn svg.ico { width: 19px; height: 19px; stroke-width: 2.1; }
.fl-inquiry { background: var(--primary); color: #fff; }
.fl-inquiry:hover { background: var(--primary-hover); }
.fl-top { width: 52px; padding: 0; background: #fff; color: var(--ink); border: 1px solid var(--gray-200); flex-direction: column; gap: 0; font-size: 10px; letter-spacing: 0.08em; }
.fl-top svg.ico { width: 18px; height: 18px; }
.fl-top:hover { color: var(--primary); border-color: var(--primary); }
.fl-top:not(.show) { opacity: 0; visibility: hidden; transform: translateY(10px); }

/* ---------- 18. 모달 · 폼 · 토스트 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1200; background: rgba(12, 18, 32, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity 0.22s, visibility 0.22s;
}
.modal-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.22s, visibility 0s; }
.modal {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid var(--gray-100); }
.modal-head img { height: 22px; width: auto; }
.modal-head .mh-div { width: 1px; height: 16px; background: var(--gray-300); }
.modal-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.modal-close { margin-left: auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gray-500); }
.modal-close:hover { background: var(--gray-100); color: var(--ink); }
.modal-close svg.ico { width: 22px; height: 22px; }
.modal-body { flex: 1; overflow-y: auto; padding: 22px 24px 8px; overscroll-behavior: contain; }
.modal-foot { flex-shrink: 0; padding: 16px 24px 22px; border-top: 1px solid var(--gray-100); display: flex; gap: 10px; }
.modal-form { max-width: 640px; }
.modal-form form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.inq-value { border-radius: 16px; background: var(--blue-50); border: 1px solid var(--blue-100); padding: 16px 18px; margin-bottom: 22px; }
.inq-value b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.inq-value ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.inq-value li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--primary); font-weight: 600; }
.inq-value li svg.ico { width: 15px; height: 15px; stroke-width: 2.6; }

.field { margin-bottom: 18px; }
.field-label, .field > label, .field legend { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.field .req, .field em { color: var(--danger); font-style: normal; }
.field .opt { font-weight: 500; color: var(--gray-400); font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input, .select, .textarea {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 12px;
  background: var(--gray-50); border: 1.5px solid var(--gray-200); font-size: 15.5px; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none;
}
.select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c727e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.textarea { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.12); }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--danger); background: #fff; }
.field.invalid .input:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }
.field-error { display: none; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--danger-deep); align-items: center; gap: 5px; }
.field-error svg.ico { width: 15px; height: 15px; }
.field.invalid .field-error { display: flex; }
.field-meta { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 12.5px; color: var(--gray-400); }

.seg-radio { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--gray-100); border-radius: 14px; padding: 4px; gap: 4px; }
.seg-radio label { position: relative; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span {
  display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 11px;
  font-size: 14.5px; font-weight: 700; color: var(--gray-500); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg-radio input:checked + span { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(17, 25, 39, 0.1); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

.check-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-card { position: relative; cursor: pointer; }
.check-card input { position: absolute; opacity: 0; pointer-events: none; }
.check-card .cc-box {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--gray-200); background: #fff; transition: border-color 0.15s, background 0.15s;
}
.check-card .cc-tick {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; border: 1.5px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center; color: transparent; transition: all 0.15s;
}
.check-card .cc-tick svg.ico { width: 13px; height: 13px; stroke-width: 3.2; }
.check-card b { font-size: 14.5px; font-weight: 700; color: var(--gray-700); }
.check-card:hover .cc-box { border-color: var(--blue-300); }
.check-card input:checked + .cc-box { border-color: var(--primary); background: var(--blue-50); }
.check-card input:checked + .cc-box .cc-tick { background: var(--primary); border-color: var(--primary); color: #fff; }
.check-card input:checked + .cc-box b { color: var(--primary); }
.check-card input:focus-visible + .cc-box { outline: 2px solid var(--primary); outline-offset: 2px; }

.agree-box { border-radius: 14px; background: var(--gray-50); border: 1px solid var(--gray-200); padding: 14px 16px; }
.check-line { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--gray-700); }
.check-line input { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.agree-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.link-btn { font-size: 13.5px; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.field.invalid .agree-box { border-color: var(--danger); background: #fff; }

.modal-done { max-width: 440px; text-align: center; padding: 40px 32px 32px; }
.done-ico {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center;
  animation: pop 0.5s var(--ease);
}
.done-ico svg.ico { width: 34px; height: 34px; stroke-width: 2.6; }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.modal-done h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; }
.modal-done > p { margin-top: 8px; font-size: 15.5px; color: var(--gray-500); line-height: 1.7; }
.done-summary { margin: 22px 0 24px; text-align: left; border-radius: 14px; background: var(--gray-50); border: 1px solid var(--gray-200); padding: 14px 18px; }
.done-summary div { display: flex; gap: 12px; padding: 6px 0; font-size: 14.5px; }
.done-summary div + div { border-top: 1px dashed var(--gray-200); }
.done-summary dt { width: 76px; flex-shrink: 0; color: var(--gray-500); }
.done-summary dd { font-weight: 700; color: var(--ink); }

.modal-doc { max-width: 600px; }
.doc h3 { font-size: 16px; font-weight: 800; margin: 18px 0 8px; }
.doc h3:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--gray-200); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { width: 120px; background: var(--gray-50); color: var(--gray-700); font-weight: 700; }

.toast-wrap { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 1500; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast-wrap.top { top: 24px; bottom: auto; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s var(--ease); pointer-events: none;
}
.toast svg.ico { width: 18px; height: 18px; color: #34d399; stroke-width: 2.6; }
.toast.info svg.ico { color: #8fb0ff; }
.toast.hide { opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 19. 서브 공통: 섹션 행 · 카드 ---------- */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.row-2.flip > :first-child { order: 2; }
.row-2.top { align-items: start; }
.f-num {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--primary);
}
.f-num .n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--primary); color: #fff; font-family: var(--font-num); letter-spacing: 0; font-size: 14px;
}
.f-title { font-size: 34px; font-weight: 800; line-height: 1.32; letter-spacing: -0.035em; }
.f-desc { margin-top: 14px; font-size: 17px; line-height: 1.75; color: var(--gray-600); }
.f-copy .check-list { margin-top: 24px; }
.admin-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 26px;
  border-radius: 16px; background: var(--blue-50); border: 1px solid var(--blue-100); padding: 16px 18px;
  font-size: 15px; line-height: 1.65; color: #23407f;
}
.admin-note > svg.ico { width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
.admin-note b { font-weight: 800; color: var(--primary-deep); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.info-card {
  position: relative; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: 28px 26px; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.2s;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.info-card .ic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.info-card .ic-ico {
  width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.info-card .ic-ico svg.ico { width: 23px; height: 23px; }
.info-card .ic-no { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--gray-300); }
.info-card h3 { font-size: 18.5px; font-weight: 800; letter-spacing: -0.02em; }
.info-card p { margin-top: 8px; font-size: 15px; color: var(--gray-500); line-height: 1.7; }

.flow { display: flex; align-items: stretch; gap: 12px; }
.flow-step {
  flex: 1; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: 28px 22px; text-align: center;
}
.flow-step .fs-i {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.flow-step .fs-i svg.ico { width: 24px; height: 24px; }
.flow-step b { display: block; font-size: 17px; font-weight: 800; }
.flow-step small { display: block; margin-top: 6px; font-size: 14.5px; color: var(--gray-500); line-height: 1.6; }
.flow-arr { display: flex; align-items: center; color: var(--blue-300); }
.flow-arr svg.ico { width: 24px; height: 24px; stroke-width: 2.2; }
.flow-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.flow-result { display: flex; gap: 10px; align-items: flex-start; border-radius: 16px; padding: 16px 18px; font-size: 15px; font-weight: 600; line-height: 1.6; }
.flow-result svg.ico { width: 19px; height: 19px; margin-top: 2px; stroke-width: 2.4; }
.flow-result.ok { background: #ecfbf4; border: 1px solid #bfeedb; color: #047857; }
.flow-result.no { background: #fff4f4; border: 1px solid #fbd0d0; color: #b91c1c; }

.feat-tabs { margin-bottom: 48px; }
.feat-panel { display: none; }
.feat-panel.active { display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: center; animation: panel-in 0.45s var(--ease); }
.stage {
  position: relative; border-radius: var(--r-xl); padding: 40px 24px;
  background: linear-gradient(160deg, #f1f5fe 0%, #e4ecfd 100%); border: 1px solid var(--blue-100);
  display: flex; justify-content: center;
}
.stage.dark { background: linear-gradient(160deg, #1b2740 0%, #0f1a2e 100%); border-color: #1f2d49; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a {
  display: flex; flex-direction: column; gap: 4px; padding: 22px 26px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--gray-200); transition: border-color 0.2s, box-shadow 0.25s;
}
.pager a:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.pager a.next { text-align: right; align-items: flex-end; }
.pager small { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--gray-400); }
.pager small svg.ico { width: 15px; height: 15px; }
.pager b { font-size: 19px; font-weight: 800; }

/* ---------- 20. 서비스 페이지 ---------- */
.photo-banner { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 2; background: #e8edf5; }
.photo-banner img { width: 100%; height: 100%; object-fit: cover; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gray-200); display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card .vc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.value-card .vc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.value-card:hover .vc-img img { transform: scale(1.04); }
.value-card .vc-role {
  position: absolute; top: 16px; left: 16px; height: 30px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 800; color: #fff;
}
.vc-role.r1 { background: var(--primary); }
.vc-role.r2 { background: var(--sky); }
.vc-role.r3 { background: var(--teal); }
.value-card .vc-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.value-card .vc-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--blue-300); }
.value-card h3 { margin-top: 8px; font-size: 21px; font-weight: 800; line-height: 1.4; letter-spacing: -0.03em; }
.value-card p { margin-top: 10px; font-size: 15px; color: var(--gray-500); line-height: 1.7; }
.value-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.value-card li { display: flex; gap: 8px; font-size: 14.5px; color: var(--gray-700); }
.value-card li svg.ico { width: 16px; height: 16px; margin-top: 3px; color: var(--primary); stroke-width: 2.4; }

.tl-wrap { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; }
.tl-list { position: relative; display: flex; flex-direction: column; gap: 6px; padding-left: 30px; }
.tl-list::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 2px; background: var(--gray-200); }
.tl-item {
  position: relative; text-align: left; width: 100%; padding: 18px 22px; border-radius: 18px;
  transition: background 0.25s, box-shadow 0.25s, color 0.25s;
}
.tl-item::before {
  content: ''; position: absolute; left: -27px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gray-300); transition: all 0.25s;
}
.tl-item:hover { background: var(--gray-50); }
.tl-item .tl-time { display: block; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--gray-400); }
.tl-item .tl-time span { font-family: var(--font); font-weight: 600; margin-left: 6px; }
.tl-item .tl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--gray-700); }
.tl-item .tl-tag { display: inline-flex; height: 24px; padding: 0 10px; align-items: center; border-radius: 999px; background: var(--gray-800); color: #fff; font-size: 12px; font-weight: 700; }
.tl-item .tl-bar { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; opacity: 0; }
.tl-item .tl-bar i { display: block; height: 100%; width: 0; background: #fff; }
.tl-item.active { background: linear-gradient(110deg, #4a7bf0, #2557d1); box-shadow: var(--shadow-blue); }
.tl-item.active::before { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px rgba(53, 104, 224, 0.18); }
.tl-item.active .tl-time { color: rgba(255, 255, 255, 0.75); }
.tl-item.active .tl-title { color: #fff; }
.tl-item.active .tl-tag { background: rgba(255, 255, 255, 0.2); }
.tl-item.active .tl-bar { opacity: 1; }
.tl-item.active .tl-bar i { animation: tl-progress var(--tl-dur, 5s) linear forwards; }
.tl-item.paused .tl-bar i { animation-play-state: paused; }
@keyframes tl-progress { to { width: 100%; } }
.tl-screens { position: relative; display: flex; justify-content: center; }
.tl-wrap.flip { grid-template-columns: 480px 1fr; }
.tl-wrap.flip .tl-screens { order: -1; }
.tl-screen { display: none; width: 100%; min-width: 0; }
.tl-screen.active { display: flex; justify-content: center; animation: panel-in 0.45s var(--ease); }

.laptop { width: 100%; max-width: 472px; padding: 0 16px; }
.laptop-screen { background: #0f1a2e; border-radius: 18px 18px 0 0; padding: 10px 10px 0; box-shadow: var(--shadow-lg); }
.laptop-inner { background: #f5f7fb; border-radius: 10px 10px 0 0; height: 300px; overflow: hidden; display: flex; }
.laptop-base { height: 16px; background: linear-gradient(180deg, #d9dee8, #b8c0ce); border-radius: 0 0 16px 16px; margin: 0 -16px; position: relative; }
.laptop-base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 80px; height: 6px; border-radius: 0 0 8px 8px; background: #a7b0bf; }
.lp-side { width: 92px; flex-shrink: 0; background: #fff; border-right: 1px solid #e8ecf2; padding: 12px 8px; }
.lp-side img { height: 11px; width: auto; margin: 0 4px 12px; }
.lp-side span { display: block; padding: 6px 8px; border-radius: 6px; font-size: 9.5px; font-weight: 600; color: var(--gray-500); }
.lp-side span.on { background: var(--blue-50); color: var(--primary); font-weight: 800; }
.lp-main { flex: 1; padding: 14px; min-width: 0; }
.lp-title { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.lp-title small { font-size: 9.5px; font-weight: 600; color: var(--gray-400); }
.lp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.lp-kpi { background: #fff; border: 1px solid #e8ecf2; border-radius: 8px; padding: 8px; }
.lp-kpi small { display: block; font-size: 8.5px; color: var(--gray-400); font-weight: 600; }
.lp-kpi b { font-size: 13px; font-weight: 800; color: var(--ink); font-family: var(--font-num); }
.lp-kpi b.up { color: var(--primary); }
.lp-card { background: #fff; border: 1px solid #e8ecf2; border-radius: 8px; padding: 10px; }
.lp-bars { display: flex; align-items: flex-end; gap: 7px; height: 110px; padding-top: 6px; }
.lp-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #7aa0f2, #3568e0); }
.lp-bars i.light { background: #d5e1fb; }
.lp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 2px; font-size: 10px; color: var(--gray-700); border-bottom: 1px solid #f0f2f6; }
.lp-row:last-child { border-bottom: 0; }
.lp-row b { font-weight: 700; }
.lp-chip { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: 999px; font-size: 8.5px; font-weight: 800; }
.lp-chip.ok { background: #e7f8f1; color: var(--success-deep); }
.lp-chip.warn { background: #fff4e0; color: var(--warning-deep); }
.lp-chip.blue { background: var(--blue-50); color: var(--primary); }
.lp-chip.gray { background: var(--gray-100); color: var(--gray-500); }
.lp-lockers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.lp-lockers i { aspect-ratio: 1; border-radius: 5px; background: #e6ecf7; font-style: normal; font-size: 8px; font-weight: 700; color: var(--gray-500); display: flex; align-items: center; justify-content: center; }
.lp-lockers i.use { background: #cfdcf9; color: var(--primary); }
.lp-lockers i.exp { background: #ffe2c4; color: var(--warning-deep); }
.lp-bays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.lp-bays i { border-radius: 6px; padding: 6px; font-style: normal; font-size: 8.5px; font-weight: 700; background: #eef1f6; color: var(--gray-500); }
.lp-bays i.on { background: #dff5ec; color: var(--success-deep); }
.lp-bays i.fix { background: #ffe6e6; color: var(--danger-deep); }
.lp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-form span { display: block; background: #fff; border: 1px solid #e3e8f0; border-radius: 6px; padding: 6px 8px; font-size: 9px; color: var(--gray-700); }
.lp-form span small { display: block; font-size: 7.5px; color: var(--gray-400); }
.lp-sync { margin-top: 8px; display: flex; gap: 6px; }

.connect { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 20px; align-items: center; }
.cn-col { display: flex; flex-direction: column; gap: 12px; }
.cn-node {
  text-align: left; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px;
  background: #fff; border: 1.5px solid var(--gray-200); transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.cn-node:hover { border-color: var(--blue-300); }
.cn-node.active { border-color: var(--primary); background: var(--blue-50); box-shadow: var(--shadow-blue); }
.cn-node .cn-ico { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; background: var(--gray-100); color: var(--gray-600); display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.cn-node.active .cn-ico { background: var(--primary); color: #fff; }
.cn-node b { display: block; font-size: 16px; font-weight: 800; }
.cn-node small { display: block; font-size: 13px; color: var(--gray-500); }
.cn-core {
  position: relative; border-radius: 28px; padding: 30px 26px; text-align: center; color: #fff; background: var(--deep-grad);
  box-shadow: var(--shadow-lg);
}
.cn-core .cc-logo { height: 22px; width: auto; margin: 0 auto 12px; filter: brightness(0) invert(1); }
.cn-core b { display: block; font-size: 20px; font-weight: 800; }
.cn-core p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }
.cn-core .cn-pulse { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.cn-core .cn-pulse i { width: 8px; height: 8px; border-radius: 50%; background: #9dbaff; animation: pulse-dot 1.4s ease-in-out infinite; }
.cn-core .cn-pulse i:nth-child(2) { animation-delay: 0.2s; }
.cn-core .cn-pulse i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse-dot { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
.cn-detail { margin-top: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--gray-200); padding: 24px 28px; display: flex; gap: 18px; align-items: flex-start; }
.cn-detail .cd-ico { width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.cn-detail b { display: block; font-size: 18px; font-weight: 800; }
.cn-detail p { margin-top: 4px; font-size: 15.5px; color: var(--gray-600); line-height: 1.7; }
.cn-col-label { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--gray-400); margin-bottom: 2px; }

/* ---------- 21. 도입 사례 ---------- */
.case-filter { margin-bottom: 36px; }
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.case-card {
  position: relative; cursor: pointer; text-align: left; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--gray-200);
  display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.2s;
}
.case-card:focus-within { border-color: var(--primary); }
.case-card-body .cc-name { display: block; margin-top: 2px; font-size: 18.5px; font-weight: 800; }
.case-card .cc-more::after { content: ''; position: absolute; inset: 0; }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.case-card .case-art { height: 160px; }
.case-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.case-card-body small { font-size: 13.5px; color: var(--gray-500); font-weight: 600; }
.case-card-body b { display: block; margin-top: 2px; font-size: 18.5px; font-weight: 800; }
.case-card-body p { margin-top: 8px; font-size: 14.5px; color: var(--gray-600); line-height: 1.6; }
.case-card-body .tag-row { margin-top: 14px; gap: 6px; }
.case-card-body .tag { height: 26px; font-size: 12.5px; padding: 0 10px; }
.case-card-body .cc-more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 700; color: var(--primary); }
.case-card-body .cc-more svg.ico { width: 16px; height: 16px; stroke-width: 2.3; }
.case-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--gray-500); border: 1.5px dashed var(--gray-300); border-radius: var(--r-lg); }
.case-count { font-size: 15px; color: var(--gray-500); margin-bottom: 16px; }
.case-count b { color: var(--primary); }

/* ---------- 22. 도입 안내 ---------- */
.stepper { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stepper::before { content: ''; position: absolute; top: 31px; left: 10%; right: 10%; height: 2px; background: var(--gray-200); }
.stepper .st-progress { position: absolute; top: 31px; left: 10%; height: 2px; background: var(--primary); transition: width 0.5s var(--ease); }
.step-btn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 6px; text-align: center; }
.step-btn .st-circle {
  width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 2px solid var(--gray-200); color: var(--gray-400);
  display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease);
}
.step-btn .st-circle svg.ico { width: 26px; height: 26px; }
.step-btn small { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--gray-400); letter-spacing: 0.06em; }
.step-btn b { font-size: 17px; font-weight: 800; color: var(--gray-500); }
.step-btn.done .st-circle { border-color: var(--primary); color: var(--primary); }
.step-btn.active .st-circle { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 8px rgba(53, 104, 224, 0.14); transform: scale(1.06); }
.step-btn.active b { color: var(--ink); }
.step-btn.active small { color: var(--primary); }
.step-btn:hover b { color: var(--ink); }
.step-panel { margin-top: 40px; display: grid; grid-template-columns: 1fr 360px; gap: 40px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-xl); padding: 40px 44px; }
.step-panel .sp-no { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 0.08em; }
.step-panel h3 { margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.step-panel p { margin-top: 10px; font-size: 16.5px; color: var(--gray-600); line-height: 1.75; }
.step-panel .check-list { margin-top: 20px; }
.sp-side { border-radius: 20px; background: var(--blue-50); border: 1px solid var(--blue-100); padding: 24px; display: flex; flex-direction: column; }
.sp-side .sp-label { font-size: 13px; font-weight: 800; color: var(--primary); letter-spacing: 0.1em; }
.sp-side .sp-big { margin-top: 8px; font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; }
.sp-side .sp-note { margin-top: 8px; font-size: 14.5px; color: var(--gray-600); line-height: 1.65; }
.sp-nav { margin-top: auto; padding-top: 24px; display: flex; gap: 8px; }
.sp-nav .btn { flex: 1; }
.step-note { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--gray-500); }
.step-note svg.ico { width: 18px; height: 18px; color: var(--primary); }

.faq-wrap { max-width: 920px; margin: 0 auto; }
.faq-cats { margin-bottom: 28px; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 24px 8px; text-align: left;
  font-size: 18px; font-weight: 700; color: var(--ink); transition: color 0.15s;
}
.faq-q:hover { color: var(--primary); }
.faq-q .q-mark { font-family: var(--font-num); font-size: 20px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.faq-q .q-cat { flex-shrink: 0; display: inline-flex; height: 26px; padding: 0 10px; align-items: center; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); font-size: 12.5px; font-weight: 700; }
.faq-q .q-text { flex: 1; }
.faq-q svg.ico { width: 22px; height: 22px; color: var(--gray-400); transition: transform 0.3s var(--ease), color 0.2s; }
.faq-item.open .faq-q svg.ico { transform: rotate(180deg); color: var(--primary); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0 8px 24px 44px; padding: 18px 22px; border-radius: 16px; background: var(--gray-50); font-size: 16px; color: var(--gray-600); line-height: 1.75; }

.contact-box { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.contact-main { border-radius: var(--r-xl); background: var(--deep-grad); color: #fff; padding: 44px; position: relative; overflow: hidden; }
.contact-main h3 { font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.contact-main p { margin-top: 12px; font-size: 16.5px; color: rgba(255, 255, 255, 0.8); line-height: 1.7; }
.contact-main .cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.contact-main .check-list { margin-top: 24px; }
.contact-main .check-list li { color: rgba(255, 255, 255, 0.9); }
.contact-main .check-list .ck { background: rgba(255, 255, 255, 0.22); }
.contact-side { display: flex; flex-direction: column; gap: 14px; }
.ch-card { display: flex; gap: 16px; align-items: center; border-radius: var(--r-lg); border: 1px solid var(--gray-200); background: #fff; padding: 24px; }
.ch-card .ch-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ch-card small { display: block; font-size: 14px; font-weight: 600; color: var(--gray-500); }
.ch-card b { display: block; font-size: 22px; font-weight: 800; font-family: var(--font-num); letter-spacing: -0.01em; }
.ch-card b.txt { font-family: var(--font); font-size: 18px; }
.ch-card .btn { margin-left: auto; }

/* ---------- 23. 기능 데모 위젯 ---------- */
.phone {
  position: relative; z-index: 1; width: 292px; flex-shrink: 0;
  background: linear-gradient(175deg, #1f2838, #0b111d); border-radius: 46px; padding: 10px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.phone-screen { background: #f4f6fb; border-radius: 37px; overflow: hidden; height: 596px; display: flex; flex-direction: column; position: relative; }
.phone-notch { height: 32px; flex-shrink: 0; background: #fff; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.phone-notch::after { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 999px; background: #0b111d; }
.phone-notch .pn-icons { display: flex; gap: 4px; align-items: center; }
.phone-notch .pn-icons i { display: block; width: 14px; height: 7px; border-radius: 2px; border: 1.5px solid var(--ink); }
.app-head { background: #fff; padding: 8px 18px 12px; flex-shrink: 0; border-bottom: 1px solid #edf0f5; }
.app-head-title { display: flex; align-items: center; justify-content: space-between; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.app-head-title svg.ico { width: 19px; height: 19px; color: var(--gray-600); }
.app-head-sub { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
.app-bell { position: relative; display: inline-flex; }
.app-bell::after { content: ''; position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid #fff; }
.app-body { flex: 1; overflow-y: auto; padding: 12px; scrollbar-width: none; }
.app-body::-webkit-scrollbar { display: none; }
.app-tabbar { flex-shrink: 0; background: #fff; border-top: 1px solid #edf0f5; display: flex; padding: 8px 6px 16px; }
.app-tabbar > * { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: var(--gray-400); }
.app-tabbar svg.ico { width: 19px; height: 19px; }
.app-tabbar .on { color: var(--primary); }
.app-tabbar button:hover { color: var(--gray-600); }
.app-tabbar button.on:hover { color: var(--primary); }
.a-label { font-size: 11px; font-weight: 800; color: var(--gray-500); margin: 12px 4px 8px; letter-spacing: 0.02em; }
.a-label:first-child { margin-top: 2px; }
.a-card { background: #fff; border: 1px solid #edf0f5; border-radius: 14px; padding: 12px 13px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(17, 25, 39, 0.04); }
.a-row { display: flex; align-items: center; gap: 11px; }
.a-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.a-ico svg.ico { width: 18px; height: 18px; }
.a-name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.a-desc { font-size: 10.5px; color: var(--gray-500); margin-top: 1px; }
.a-tag { margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.a-tag.ok { background: #e7f8f1; color: var(--success-deep); }
.a-tag.busy { background: #fff4e0; color: var(--warning-deep); }
.a-tag.full { background: #fdeaea; color: var(--danger-deep); }
.a-tag.blue { background: var(--blue-50); color: var(--primary); }
.a-banner {
  display: flex; gap: 11px; align-items: flex-start; border-radius: 14px; padding: 13px 15px; margin-bottom: 12px; color: #fff;
  background: linear-gradient(120deg, #4a7bf0, #2557d1); box-shadow: 0 8px 18px -10px rgba(37, 87, 209, 0.7);
}
.a-banner svg.ico { width: 18px; height: 18px; margin-top: 1px; }
.a-banner b { display: block; font-size: 13px; }
.a-banner span { font-size: 10.5px; opacity: 0.88; }
.a-cta {
  display: block; width: 100%; margin-top: 10px; padding: 13px; border-radius: 12px; text-align: center;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; transition: background 0.15s;
}
.a-cta:hover { background: var(--primary-hover); }
.a-cta.disabled { background: #d7dce4; color: #fff; cursor: not-allowed; }
.a-list-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; font-size: 12px; border-bottom: 1px solid #f0f2f6; }
.a-list-row:last-child { border-bottom: 0; }
.a-list-row span { color: var(--gray-500); }
.a-list-row b { font-weight: 800; }
.a-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--primary); position: relative; flex-shrink: 0; }
.a-toggle::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.a-push { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, 0.97); border-radius: 16px; padding: 12px 13px; box-shadow: 0 12px 30px -12px rgba(17, 25, 39, 0.35); margin-bottom: 10px; border: 1px solid #edf0f5; }
.a-push .pu-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a-push .pu-ico svg.ico { width: 15px; height: 15px; }
.a-push b { display: block; font-size: 11.5px; font-weight: 800; }
.a-push span { display: block; font-size: 10.5px; color: var(--gray-600); line-height: 1.5; }
.a-push small { display: block; font-size: 9.5px; color: var(--gray-400); margin-top: 2px; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.slot {
  padding: 9px 4px; text-align: center; border-radius: 10px; background: #fff; border: 1px solid var(--gray-200);
  font-size: 11.5px; font-weight: 700; color: var(--gray-600); cursor: pointer; transition: all 0.12s;
}
.slot:hover:not(.off):not(.sel) { border-color: var(--primary); color: var(--primary); }
.slot.sel { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 10px -4px rgba(53, 104, 224, 0.6); }
.slot.off { background: #f1f3f7; border-color: #f1f3f7; color: #c3c9d4; text-decoration: line-through; cursor: not-allowed; }
.date-chips { display: flex; gap: 6px; margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.date-chips::-webkit-scrollbar { display: none; }
.date-chip { flex-shrink: 0; width: 44px; padding: 7px 0 6px; text-align: center; border-radius: 11px; background: #fff; border: 1px solid var(--gray-200); cursor: pointer; transition: all 0.12s; }
.date-chip:hover:not(.sel) { border-color: var(--blue-300); }
.date-chip small { display: block; font-size: 9.5px; font-weight: 700; color: var(--gray-400); }
.date-chip b { font-size: 14px; font-weight: 800; color: var(--ink); }
.date-chip.sel { background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 10px -4px rgba(53, 104, 224, 0.6); }
.date-chip.sel small, .date-chip.sel b { color: #fff; }

.pass-card {
  position: relative; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.13s, background 0.13s;
}
.pass-card:hover { border-color: var(--blue-300); }
.pass-card.sel { border-color: var(--primary); background: var(--blue-50); }
.pass-card.sel::after {
  content: '✓'; position: absolute; top: 12px; right: 13px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pass-type, .pass-name, .pass-desc, .pass-price { display: block; }
.pass-type { font-size: 9.5px; font-weight: 800; color: var(--primary); letter-spacing: 0.06em; }
.pass-name { font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 2px 0 1px; }
.pass-desc { font-size: 10.5px; color: var(--gray-500); margin: 1px 0 3px; }
.pass-price { font-size: 14px; font-weight: 800; color: var(--ink); }
.pass-price s { font-size: 10px; color: var(--gray-400); font-weight: 600; margin-left: 4px; }
.pass-sale { display: inline-block; font-size: 9px; font-weight: 800; color: var(--danger-deep); background: #fdeaea; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }

.seg { display: flex; background: #e9edf3; border-radius: 12px; padding: 3px; margin-bottom: 11px; }
.seg button { flex: 1; padding: 7px 0; border-radius: 9px; font-size: 12px; font-weight: 800; color: var(--gray-500); transition: all 0.15s; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17, 25, 39, 0.12); }
.seg.dark { max-width: 320px; margin: 0 auto 18px; background: rgba(255, 255, 255, 0.08); }
.seg.dark button { color: rgba(232, 237, 245, 0.72); }
.seg.dark button.on { color: var(--ink); }
.seat-legend { display: flex; gap: 12px; margin-bottom: 10px; padding: 0 3px; }
.seat-legend span { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--gray-500); }
.seat-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.seat-legend .lg-free { background: #fff; border: 1.5px solid var(--gray-300); }
.seat-legend .lg-sel { background: var(--primary); }
.seat-legend .lg-used { background: #e4e8ef; }
.seat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seat {
  aspect-ratio: 1; border-radius: 12px; background: #fff; border: 1.5px solid var(--gray-200);
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.12s;
}
.seat b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.seat small { font-size: 8.5px; font-weight: 700; color: var(--gray-400); }
.seat:hover:not(.used):not(.sel) { border-color: var(--primary); }
.seat.sel { background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 10px -4px rgba(53, 104, 224, 0.6); }
.seat.sel b, .seat.sel small { color: #fff; }
.seat.used { background: #eef1f6; border-color: #eef1f6; cursor: not-allowed; }
.seat.used b, .seat.used small { color: #c3c9d4; }

.class-card { background: #fff; border: 1px solid #edf0f5; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(17, 25, 39, 0.04); }
.class-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.class-name { font-size: 13px; font-weight: 800; }
.class-meta { font-size: 10.5px; color: var(--gray-500); margin-top: 2px; }
.class-quota { font-size: 10.5px; font-weight: 700; color: var(--gray-500); margin-top: 6px; }
.class-quota .left { color: var(--primary); }
.class-quota .full-txt { color: var(--danger-deep); }
.class-btn { flex-shrink: 0; padding: 7px 13px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; transition: background 0.15s; }
.class-btn:hover { background: var(--primary-hover); }
.class-btn.done { background: #e7f8f1; color: var(--success-deep); cursor: default; }
.class-btn.wait { background: #fff; color: var(--warning-deep); border: 1px solid #f5c98a; }
.class-btn.wait:hover { background: #fff8ec; }
.class-btn.waiting { background: #fff4e0; color: var(--warning-deep); cursor: default; }
.quota-bar { height: 4px; background: #edf0f5; border-radius: 999px; margin-top: 5px; overflow: hidden; }
.quota-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.4s var(--ease); }

.qty-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 9px 12px; margin-top: 4px; }
.qty-row > span { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.qty-ctrl { display: flex; align-items: center; gap: 12px; }
.qty-btn { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--gray-200); font-size: 15px; font-weight: 800; color: var(--gray-600); display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.qty-btn:hover { border-color: var(--primary); color: var(--primary); }
.qty-val { min-width: 18px; text-align: center; font-size: 13.5px; font-weight: 800; }

/* 골프 관제 */
.bay-panel { width: 100%; max-width: 480px; background: #0b1426; border-radius: 22px; padding: 24px; color: #e8edf5; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.07); }
.bay-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bay-head b { font-size: 15px; font-weight: 800; }
.bay-head b small { display: block; font-size: 11px; font-weight: 600; color: rgba(232, 237, 245, 0.5); margin-top: 2px; }
.bay-all { flex-shrink: 0; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 700; color: #e8edf5; transition: all 0.15s; }
.bay-all:hover { background: rgba(239, 68, 68, 0.22); border-color: rgba(239, 68, 68, 0.45); }
.bay-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 2px 14px; }
.bay-legend span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: rgba(232, 237, 245, 0.6); }
.bay-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bay-legend .bay-count { margin-left: auto; color: #9dbaff; font-weight: 800; }
.bay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bay { text-align: left; border-radius: 12px; padding: 11px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); color: #e8edf5; transition: all 0.15s; }
.bay:hover { border-color: rgba(157, 186, 255, 0.5); }
.bay .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: #64748b; vertical-align: 1px; }
.bay b { font-size: 12.5px; font-weight: 800; }
.bay small { display: block; font-size: 10px; color: rgba(232, 237, 245, 0.5); margin-top: 3px; }
.bay.on { background: rgba(53, 104, 224, 0.18); border-color: rgba(96, 140, 250, 0.5); }
.bay.on .dot { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.85); }
.bay.on small { color: #a8c2ff; }
.bay-note { margin-top: 14px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(232, 237, 245, 0.5); }
.bay-note svg.ico { width: 14px; height: 14px; }

/* 출입 게이트 */
.gate-stage { width: 100%; max-width: 440px; background: #0b1426; border-radius: 22px; padding: 30px 26px; color: #e8edf5; text-align: center; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.07); }
.gate-cred { width: 140px; margin: 0 auto 6px; background: #fff; border-radius: 16px; padding: 11px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.gate-cred-label { margin-top: 7px; font-size: 10.5px; font-weight: 800; color: var(--ink); }
.gate-cred-label small { display: block; font-size: 9px; font-weight: 600; color: var(--gray-400); margin-top: 1px; }
.gate-doors { display: flex; width: 200px; height: 100px; margin: 22px auto 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.gate-door { flex: 1; background: linear-gradient(180deg, #223149, #151f33); transition: transform 0.55s var(--ease); }
.gate-door.l { border-right: 1px solid rgba(255, 255, 255, 0.1); }
.gate-door.r { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.gate.open .gate-door.l { transform: translateX(-94%); }
.gate.open .gate-door.r { transform: translateX(94%); }
.gate.deny { animation: gate-shake 0.4s; }
@keyframes gate-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.gate-status { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12.5px; font-weight: 700; color: rgba(232, 237, 245, 0.75); transition: all 0.2s; }
.gate-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.gate-status.ok { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.gate-status.ok::before { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.85); }
.gate-status.no { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.gate-status.no::before { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.85); }
.gate-btns { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 22px; }
.gate-btn { padding: 11px 17px; border-radius: 11px; font-size: 13px; font-weight: 800; background: var(--primary); color: #fff; transition: background 0.15s; }
.gate-btn:hover { background: var(--primary-hover); }
.gate-btn.ghost { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(232, 237, 245, 0.9); }
.gate-btn.ghost:hover { background: rgba(255, 255, 255, 0.14); }

.auth-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.auth-card { text-align: left; background: #fff; border: 1.5px solid var(--gray-200); border-radius: var(--r-lg); padding: 26px 22px; transition: all 0.2s; }
.auth-card:hover { border-color: var(--blue-300); }
.auth-card.active { border-color: var(--primary); background: var(--blue-50); box-shadow: var(--shadow-blue); }
.auth-card .ac-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--gray-100); color: var(--gray-600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: all 0.2s; }
.auth-card.active .ac-ico { background: var(--primary); color: #fff; }
.auth-card .ac-ico svg.ico { width: 25px; height: 25px; }
.auth-card b { font-size: 18px; font-weight: 800; }
.auth-card p { margin-top: 8px; font-size: 14.5px; color: var(--gray-500); line-height: 1.65; }
.auth-mix { margin-top: 20px; }

/* GX 시간표 */
.tt-panel { width: 100%; max-width: 480px; background: #0b1426; border-radius: 22px; padding: 24px; color: #e8edf5; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.07); }
.tt-head b { font-size: 15px; font-weight: 800; }
.tt-head small { display: block; font-size: 11px; color: rgba(232, 237, 245, 0.5); margin-top: 2px; }
.tt-grid { display: grid; grid-template-columns: 46px repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.tt-day { text-align: center; font-size: 11px; font-weight: 800; color: rgba(232, 237, 245, 0.65); }
.tt-time { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 10px; color: rgba(232, 237, 245, 0.45); font-family: var(--font-num); }
.tt-cell { min-height: 50px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.1); }
.tt-class { min-height: 50px; width: 100%; text-align: left; border-radius: 10px; padding: 7px 9px; background: rgba(53, 104, 224, 0.18); border: 1px solid rgba(96, 140, 250, 0.4); color: #e8edf5; transition: all 0.13s; }
.tt-class:hover { border-color: rgba(157, 186, 255, 0.8); }
.tt-class b { display: block; font-size: 10.5px; font-weight: 800; color: #dbe6ff; line-height: 1.3; }
.tt-class small { font-size: 9.5px; color: rgba(232, 237, 245, 0.55); }
.tt-class.full { background: rgba(239, 68, 68, 0.13); border-color: rgba(252, 165, 165, 0.35); }
.tt-class.full b { color: #fecaca; }
.tt-class.sel { outline: 2px solid #8fb0ff; outline-offset: 1px; }
.tt-detail { margin-top: 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 13px 15px; font-size: 12.5px; line-height: 1.7; color: rgba(232, 237, 245, 0.85); min-height: 66px; }
.tt-detail b { color: #fff; }
.tt-detail .tag-wait { color: #fbbf24; font-weight: 800; }
.tt-actions { display: flex; gap: 8px; margin-top: 10px; }
.tt-actions button { flex: 1; padding: 10px; border-radius: 10px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); color: #e8edf5; transition: background 0.15s; }
.tt-actions button:hover { background: rgba(255, 255, 255, 0.14); }
.tt-actions button.primary { background: var(--primary); border-color: var(--primary); }
.tt-actions button.primary:hover { background: var(--primary-hover); }

/* 키오스크 */
.kiosk { width: 304px; margin: 0 auto; position: relative; z-index: 1; }
.kiosk-frame { background: linear-gradient(175deg, #1f2838, #0b111d); border-radius: 28px; padding: 13px 13px 16px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.kiosk-screen { background: #f4f6fb; border-radius: 16px; height: 486px; overflow: hidden; display: flex; flex-direction: column; }
.kiosk-top { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--ink); color: #fff; }
.kiosk-top b { font-size: 13px; font-weight: 800; }
.kiosk-top small { font-size: 10px; color: rgba(255, 255, 255, 0.55); }
.kiosk-body { flex: 1; padding: 14px; display: flex; flex-direction: column; overflow: hidden; }
.k-step { display: none; flex: 1; flex-direction: column; animation: panel-in 0.3s var(--ease); }
.k-step.on { display: flex; }
.k-title { font-size: 14px; font-weight: 800; margin-bottom: 11px; }
.k-title small { display: block; font-size: 10.5px; font-weight: 600; color: var(--gray-500); margin-top: 2px; }
.kiosk-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kiosk-tile { text-align: center; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 16px 10px 14px; transition: all 0.13s; }
.kiosk-tile:hover { border-color: var(--primary); transform: translateY(-2px); }
.kiosk-tile .ki { width: 42px; height: 42px; margin: 0 auto 9px; border-radius: 12px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.kiosk-tile b { display: block; font-size: 13px; font-weight: 800; }
.kiosk-tile small { font-size: 10px; color: var(--gray-500); }
.k-big-btn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 14px; margin-bottom: 9px; transition: border-color 0.13s; }
.k-big-btn:hover { border-color: var(--primary); }
.k-big-btn .ki { width: 38px; height: 38px; border-radius: 11px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.k-big-btn b { display: block; font-size: 13px; font-weight: 800; }
.k-big-btn small { font-size: 10.5px; color: var(--gray-500); }
.k-back { margin-top: auto; align-self: flex-start; padding: 8px 4px 0; font-size: 11.5px; font-weight: 800; color: var(--gray-500); }
.k-back:hover { color: var(--primary); }
.k-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.k-done .kd-ico { width: 60px; height: 60px; margin-bottom: 14px; border-radius: 50%; background: #e7f8f1; color: var(--success-deep); display: flex; align-items: center; justify-content: center; }
.k-done .kd-ico svg.ico { width: 28px; height: 28px; stroke-width: 2.6; }
.k-done b { font-size: 15px; font-weight: 800; }
.k-done small { margin-top: 4px; font-size: 11.5px; color: var(--gray-500); line-height: 1.6; }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.k-pad button { height: 38px; border-radius: 10px; background: #fff; border: 1.5px solid var(--gray-200); font-size: 14px; font-weight: 800; transition: border-color 0.12s; }
.k-pad button:hover { border-color: var(--primary); }
.k-pin { display: flex; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.k-pin i { width: 34px; height: 42px; border-radius: 10px; background: #fff; border: 1.5px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 18px; font-weight: 800; }
.k-pin i.filled { border-color: var(--primary); color: var(--primary); }
.kiosk-stand { width: 118px; height: 60px; margin: 0 auto; background: linear-gradient(180deg, #1a2332, #0b111d); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.kiosk-base { width: 204px; height: 12px; margin: 0 auto; background: #0b111d; border-radius: 999px; }

/* 미리보기(메인) 축소 */
.preview { transform-origin: center center; }
.preview.scale-85 { transform: scale(0.85); }
.preview.scale-9 { transform: scale(0.9); }

/* ---------- 24. 스크롤 리빌 ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.shown { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ---------- 25. 반응형 ---------- */
@media (max-width: 1200px) {
  .hd-inner { gap: 24px; padding: 0 24px; }
  .gnb-link { padding: 0 12px; }
  .fs-wrap { grid-template-columns: 1fr 420px; }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .float-chip { padding: 9px 14px 9px 9px; }
  .float-chip small { display: none; }
  .float-chip .fc-ico { width: 34px; height: 34px; border-radius: 10px; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .hero-inner { grid-template-columns: 1.25fr 0.75fr; }
  .hero h1 { font-size: 40px; }
  .float-chip { display: none; }
  .stat-card { padding: 30px 18px; }
  .stat-value { font-size: 38px; }
  .stat-value small { font-size: 17px; }
}

@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .gnb, .hd-actions { display: none; }
  .hd-burger { display: inline-flex; }
  .hd-inner { padding: 0 20px; }
  .hd-logo img { height: 26px; }
  .section { padding: 88px 0; }
  .section.tight { padding: 72px 0; }
  .sec-title { font-size: 34px; }
  .sec-desc { font-size: 17px; }
  .big-num { font-size: 120px; top: -20px; }
  .hero { padding: 56px 0 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { text-align: center; }
  .hero-copy .hero-sub { margin: 0 auto; }
  .hero-ctas, .hero-kw { justify-content: center; }
  .hero-kw { margin-left: auto; margin-right: auto; }
  .hero h1 { font-size: 44px; }
  .hero-visual { justify-content: center; padding-right: 0; }
  .hero-visual::before { right: auto; left: 50%; transform: translate(-50%, -50%); }
  .float-chip.c1 { left: calc(50% - 356px); }
  .float-chip.c2 { left: calc(50% - 330px); }
  .float-chip.c3 { left: calc(50% - 350px); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cmp-row { grid-template-columns: 180px 1fr 1fr; }
  .cmp-row .cmp-result { grid-column: 2 / -1; justify-self: start; }
  .cmp-row.head .h-result { display: none; }
  .fs-wrap { grid-template-columns: 1fr; }
  .fs-panel { position: relative; top: 0; }
  .hw-wrap, .row-2, .feat-panel.active, .tl-wrap, .tl-wrap.flip, .contact-box { grid-template-columns: 1fr; gap: 44px; }
  .tl-wrap.flip .tl-screens { order: 0; }
  .row-2.flip > :first-child { order: 0; }
  .voice-slide { grid-template-columns: 1fr; padding: 44px 40px 32px; gap: 28px; }
  .voice-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 22px; }
  .voice-controls { padding: 0 40px 36px; }
  .cta-band h2 { font-size: 34px; }
  .sub-hero { padding: 48px 0 60px; }
  .sub-hero-inner { grid-template-columns: 1fr; }
  .sub-hero h1 { font-size: 38px; }
  .sub-hero-visual { display: none; }
  .subnav { top: var(--header-h); }
  .subnav-inner { justify-content: flex-start; padding: 10px 20px; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .card-grid, .card-grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .auth-grid { grid-template-columns: repeat(2, 1fr); }
  .connect { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .step-panel { grid-template-columns: 1fr; padding: 32px; }
  .ft-top { grid-template-columns: 1fr; }
  .f-title { font-size: 30px; }
  .flow { flex-direction: column; }
  .flow-arr { justify-content: center; transform: rotate(90deg); }
}

@media (max-width: 767px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section.tight { padding: 60px 0; }
  .sec-head { margin-bottom: 40px; }
  .sec-title { font-size: 28px; }
  .sec-desc { font-size: 16px; }
  .eyebrow { font-size: 12px; }
  .big-num { font-size: 88px; top: -14px; }
  .hero h1 { font-size: 34px; }
  .hero-sub { font-size: 16.5px; }
  .hero-ctas .btn { flex: 1; min-width: 150px; }
  .hero-visual::before { width: 320px; height: 320px; }
  .float-chip { display: none; }
  .preview.scale-85 { transform: scale(0.76); }
  .stats-grid { gap: 12px; }
  .stat-card { padding: 22px 10px; }
  .stat-card .st-ico { width: 40px; height: 40px; margin-bottom: 10px; }
  .stat-value { font-size: 29px; }
  .stat-value small { font-size: 13.5px; margin-left: 2px; }
  .stat-label { font-size: 14px; }
  .aud-grid { grid-template-columns: 1fr; gap: 16px; }
  .aud-card { min-height: 0; padding: 30px 26px; }
  .aud-card h3 { font-size: 24px; }
  .aud-card .aud-art { display: none; }
  .cmp-table { background: none; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  .cmp-row.head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; background: #fff; border: 1px solid var(--gray-200); border-radius: 20px; }
  .cmp-row + .cmp-row { border-top: 1px solid var(--gray-200); }
  .cmp-row .cmp-result { grid-column: auto; }
  .cmp-row .m-lbl { display: inline-flex; margin-right: 8px; vertical-align: 1px; }
  .cmp-before, .cmp-after { font-size: 15px; }
  .fs-cards { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 20px 8px; margin: 0 -20px; scrollbar-width: none; }
  .fs-cards::-webkit-scrollbar { display: none; }
  .fs-card { flex: 0 0 78%; scroll-snap-align: center; min-height: 150px; }
  .fs-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 20px; }
  .fs-dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--gray-300); transition: width 0.3s var(--ease), background 0.2s; }
  .fs-dots button.active { width: 26px; background: var(--primary); }
  .fs-panel { padding: 16px; border-radius: 22px; }
  .fs-stage { height: 470px; }
  .fs-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .hw-visual { aspect-ratio: 1 / 0.9; }
  .voice-slide { padding: 34px 24px 24px; }
  .voice-slide blockquote { font-size: 19px; }
  .voice-controls { padding: 0 24px 28px; }
  .voice-arrows button { width: 44px; height: 44px; border-radius: 13px; }
  .case-mini { width: 250px; }
  .cta-band { padding: 76px 0; }
  .cta-band h2 { font-size: 27px; }
  .cta-band p { font-size: 16px; }
  .cta-band .cta-btns .btn { flex: 1; min-width: 150px; }
  .cta-band .wm-text { font-size: 120px; bottom: -22px; }
  .sub-hero h1 { font-size: 30px; }
  .sub-hero .desc { font-size: 16px; }
  .value-grid, .card-grid, .card-grid.c4, .card-grid.c2 { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .auth-card { padding: 20px 16px; }
  .auth-card b { font-size: 16px; }
  .auth-card p { font-size: 13.5px; }
  .feat-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 4px 20px 8px; margin: 0 -20px 32px; scrollbar-width: none; }
  .feat-tabs::-webkit-scrollbar { display: none; }
  .flow-results { grid-template-columns: 1fr; }
  .f-title { font-size: 26px; }
  .f-desc { font-size: 16px; }
  .stage { padding: 28px 12px; }
  .pager { grid-template-columns: 1fr; }
  .pager a.next { text-align: left; align-items: flex-start; }
  .tl-list { padding-left: 24px; }
  .tl-item { padding: 14px 16px; }
  .tl-item::before { left: -21px; }
  .tl-item .tl-title { font-size: 16px; }
  .case-grid { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .stepper::before, .stepper .st-progress { top: 22px; }
  .step-btn .st-circle { width: 44px; height: 44px; }
  .step-btn .st-circle svg.ico { width: 19px; height: 19px; }
  .step-btn b { font-size: 12.5px; }
  .step-btn small { display: none; }
  .step-panel { padding: 26px 20px; margin-top: 28px; }
  .step-panel h3 { font-size: 23px; }
  .faq-q { font-size: 16px; padding: 20px 4px; gap: 10px; }
  .faq-q .q-cat { display: none; }
  .faq-a p { margin: 0 0 20px; font-size: 15px; }
  .contact-main { padding: 32px 24px; }
  .contact-main h3 { font-size: 24px; }
  .ch-card { flex-wrap: wrap; }
  .ch-card .btn { margin-left: 0; width: 100%; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .ft-company { text-align: left; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .seg-radio span { font-size: 13.5px; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  .modal-done { border-radius: 24px 24px 0 0; padding: 36px 24px calc(24px + env(safe-area-inset-bottom)); }
  .floating { right: 16px; bottom: 16px; }
  .fl-btn { width: 52px; padding: 0; }
  .fl-inquiry span { display: none; }
  .fl-top span { display: none; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 30px; }
  .sec-title { font-size: 25px; }
  .check-cards { grid-template-columns: 1fr; }
  .float-chip.c2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   2026-10-06 수정
   수치 단위 · 서비스 소개 버튼 · AS-IS → TO-BE · 기능 가로 막대 · 출입 통제 장비
   ========================================================= */

/* ---------- 수치: '만' 단위 + 서비스 소개 버튼 ---------- */
.stat-value .sv-man { font-family: var(--font); font-size: 0.74em; font-weight: 800; margin-left: 1px; letter-spacing: -0.03em; }
.num-cta { margin-top: 44px; display: flex; justify-content: center; }

/* ---------- 운영 고민 → 변화 (AS-IS → TO-BE) ---------- */
.chg-legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; margin: -18px 0 30px; font-size: 14.5px; font-weight: 700; color: var(--gray-600); }
.chg-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.chg-legend-arrow { display: inline-flex; color: var(--primary); }
.chg-legend-arrow svg.ico { width: 18px; height: 18px; stroke-width: 2.4; }
.chg-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px;
  font-family: var(--font-num); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap;
}
.chg-tag.asis { background: #fff; color: var(--gray-600); border: 1px solid var(--gray-300); }
.chg-tag.tobe { background: var(--primary); color: #fff; }

.chg-list { display: flex; flex-direction: column; gap: 16px; }
.chg-row {
  display: grid; grid-template-columns: 172px minmax(0, 1fr) 76px minmax(0, 1fr); align-items: stretch;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 14px;
  box-shadow: var(--shadow-sm);
}
.chg-row > * { min-width: 0; }
.chg-topic { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; }
.chg-ico {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.chg-topic small { display: block; font-family: var(--font-num); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--gray-400); }
.chg-topic b { display: block; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); }

.chg-asis, .chg-tobe { position: relative; overflow: hidden; border-radius: 14px; padding: 18px 22px 20px; }
.chg-asis { background: var(--gray-100); }
.chg-asis .chg-head { display: block; margin-top: 10px; font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; color: var(--gray-700); }
.chg-asis p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--gray-600); }
/* 문제 제목 위로 빨간 줄이 그어짐 (글자는 그대로 읽힘) */
.chg-strike { position: relative; }
.chg-strike::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; border-radius: 2px;
  background: rgba(220, 38, 38, 0.78); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.55s var(--ease) 1.15s;
}

/* 화살표: 차례로 켜진 뒤 계속 흐름 */
.chg-arrow { display: flex; align-items: center; justify-content: center; gap: 0; }
.chg-arrow i {
  display: block; width: 13px; height: 13px; margin: 0 -1px;
  border-top: 3px solid var(--primary); border-right: 3px solid var(--primary); border-radius: 2px;
  transform: rotate(45deg); opacity: 0.16;
}

/* TO-BE: 회색 자리 → 파란색이 왼쪽부터 채워지며 결과가 등장 */
.chg-tobe { background: #e8ecf2; color: var(--gray-500); transition: color 0.45s ease 0.9s; }
.chg-tobe::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, #4a7bf0 0%, #2f62dc 45%, #1d47b5 100%);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--ease) 0.7s;
}
.chg-tobe::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.chg-tobe > * { position: relative; z-index: 1; }
.chg-tobe .chg-tag.tobe { background: #cfd5df; color: #fff; transition: background 0.4s ease 0.9s, color 0.4s ease 0.9s; }
.chg-tobe .chg-head { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
.chg-check {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: #fff; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}
.chg-check svg.ico { width: 17px; height: 17px; stroke-width: 3; }
.chg-tobe p { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.65; }

.chg-row.shown .chg-strike::after { transform: scaleX(1); }
.chg-row.shown .chg-arrow i { animation: chg-flow 1.8s ease-in-out 0.3s infinite; }
.chg-row.shown .chg-arrow i:nth-child(2) { animation-delay: 0.48s; }
.chg-row.shown .chg-arrow i:nth-child(3) { animation-delay: 0.66s; }
.chg-row.shown .chg-tobe { color: #fff; }
.chg-row.shown .chg-tobe::before { transform: scaleX(1); }
.chg-row.shown .chg-tobe::after { animation: chg-shine 1.1s ease 1.35s 1 both; }
.chg-row.shown .chg-tobe .chg-tag.tobe { background: #fff; color: var(--primary); }
.chg-row.shown .chg-check { transform: scale(1); }
@keyframes chg-flow { 0%, 100% { opacity: 0.16; } 30% { opacity: 1; } 60% { opacity: 0.16; } }
@keyframes chg-shine { from { left: -45%; } to { left: 120%; } }

/* ---------- 핵심 기능: 가로 막대 + 아래 화면 ---------- */
.fs-wrap.fs-bar-layout { display: block; }
.fs-bar-layout .fs-cards {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  background: #fff; border: 1px solid var(--blue-100); border-radius: 22px; padding: 8px;
  box-shadow: var(--shadow-md); overflow: visible; margin: 0;
}
.fs-bar-layout .fs-card {
  min-height: 0; padding: 16px 8px 14px; border: 0; border-radius: 16px; background: transparent; box-shadow: none;
  flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; text-align: center;
}
.fs-bar-layout .fs-card:hover { background: var(--blue-50); transform: none; }
.fs-bar-layout .fs-card .fs-ico { position: static; width: 42px; height: 42px; border-radius: 13px; margin-bottom: 8px; }
.fs-bar-layout .fs-card .fs-no { font-size: 12px; }
.fs-bar-layout .fs-card .fs-name { margin-top: 0; font-size: 16px; line-height: 1.35; }
.fs-bar-layout .fs-card.active { background: var(--primary); border-color: transparent; box-shadow: var(--shadow-blue); }
.fs-bar-layout .fs-card.active .fs-no { color: rgba(255, 255, 255, 0.78); }
.fs-bar-layout .fs-card.active .fs-name { color: #fff; }
.fs-bar-layout .fs-card.active .fs-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.fs-bar-layout .fs-card.active::after {
  content: ''; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: var(--primary);
}
.fs-bar-layout .fs-dots { display: none !important; }
.fs-bar-layout .fs-panel { position: relative; top: auto; margin-top: 30px; padding: 36px 48px; }
.fs-bar-layout .fs-view.active { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.fs-info-no { font-family: var(--font-num); font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: var(--primary); }
.fs-info h3 { margin-top: 8px; font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; color: var(--ink); }
.fs-info p { margin-top: 14px; font-size: 18px; line-height: 1.7; color: var(--gray-600); }
.fs-info .tag-row { margin-top: 20px; }
.fs-info .tag { background: #fff; }
.fs-info .btn { margin-top: 28px; }
.fs-bar-layout .fs-stage { height: 570px; }

/* ---------- 출입 통제 장비 ---------- */
.hw-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.hw-head .sec-desc { margin-top: 0; }
.hw-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 20px; }
.hw-grid > * { min-width: 0; }
.hw-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.2s;
}
.hw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.hw-main { grid-row: span 2; }
.hw-art {
  position: relative; height: 172px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #f4f7fe 0%, #e5edfd 100%); border-bottom: 1px solid var(--blue-100);
}
.hw-main .hw-art { height: 372px; }
.hw-main .hw-body { flex: 1; display: flex; flex-direction: column; }
.hw-flow { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hw-flow li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 12px 4px 11px; border-radius: 12px; background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--gray-700);
}
.hw-flow li + li::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-top: 2px solid var(--blue-300); border-right: 2px solid var(--blue-300); transform: rotate(45deg);
}
.hw-flow .hf-ico { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--primary); border: 1px solid var(--blue-100); display: flex; align-items: center; justify-content: center; }
.hw-flow .hf-ico svg.ico { width: 18px; height: 18px; }
.hw-main.shown .hw-flow li { animation: hw-step 4.8s ease-in-out infinite; }
.hw-main.shown .hw-flow li:nth-child(2) { animation-delay: 1.2s; }
.hw-main.shown .hw-flow li:nth-child(3) { animation-delay: 2.4s; }
.hw-main.shown .hw-flow li:nth-child(4) { animation-delay: 3.6s; }
@keyframes hw-step {
  0%, 30%, 100% { background: var(--gray-50); border-color: var(--gray-200); color: var(--gray-700); }
  8%, 22% { background: var(--blue-50); border-color: var(--blue-300); color: var(--primary); }
}
.hw-photo img { width: 88%; max-width: 520px; height: auto; mix-blend-mode: multiply; }
.hw-live {
  position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--gray-700);
  box-shadow: var(--shadow-md);
}
.hw-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); animation: hw-blink 2s ease-in-out infinite; }
.hw-body { padding: 22px 24px 24px; }
.hw-kicker { font-family: var(--font-num); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--primary); }
.hw-body h3 { margin-top: 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.hw-main .hw-body h3 { font-size: 26px; }
.hw-body p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--gray-600); }
.hw-main .hw-body p { font-size: 16px; }
.hw-body .tag-row { margin-top: 16px; }
.hw-strip {
  margin-top: 20px; display: flex; align-items: center; gap: 18px; padding: 22px 26px;
  border-radius: var(--r-lg); background: var(--blue-50); border: 1px solid var(--blue-100);
}
.hw-strip-ico { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; }
.hw-strip p { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.65; color: var(--gray-700); }
.hw-strip p b { color: var(--ink); }
.hw-links { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* 장비 그림 (화면 안에서 직접 그림) */
.dv-face, .dv-kiosk, .dv-reader, .dv-finger {
  position: relative; z-index: 1;
  background: linear-gradient(170deg, #2a3446 0%, #111927 100%);
  box-shadow: 0 16px 28px -14px rgba(17, 25, 39, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dv-face { width: 76px; height: 104px; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.dv-face-screen {
  position: relative; width: 100%; height: 70px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #234596, #0d1a3a); color: #a9c3ff;
  display: flex; align-items: center; justify-content: center;
}
.dv-face-screen svg.ico { width: 34px; height: 34px; stroke-width: 1.6; }
.dv-scan { position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; border-radius: 2px; background: #6ee7b7; box-shadow: 0 0 8px rgba(110, 231, 183, 0.9); animation: dv-scan 2.2s ease-in-out infinite; }
.dv-face-led { margin-top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.9); }
.dv-pole { position: absolute; bottom: 0; left: 50%; width: 12px; height: 50px; transform: translateX(-50%); border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #c9d0dc, #9aa4b5); }

.dv-reader { width: 72px; height: 94px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dv-reader-win { width: 48px; height: 48px; border-radius: 8px; background: #0d1a3a; color: #a9c3ff; display: flex; align-items: center; justify-content: center; }
.dv-reader-win svg.ico { width: 28px; height: 28px; }
.dv-reader-led { width: 22px; height: 4px; border-radius: 2px; background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.8); }
.dv-nfc { position: absolute; left: calc(50% + 46px); top: 50%; transform: translateY(-50%); color: var(--primary); display: flex; }
.dv-nfc svg.ico { width: 34px; height: 34px; stroke-width: 2; animation: dv-pulse 1.8s ease-in-out infinite; }

.dv-finger { width: 86px; height: 104px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.dv-finger-pad { width: 54px; height: 66px; border-radius: 27px; background: radial-gradient(circle at 50% 45%, #234596, #0d1a3a); color: #a9c3ff; display: flex; align-items: center; justify-content: center; animation: dv-glow 2.4s ease-in-out infinite; }
.dv-finger-pad svg.ico { width: 34px; height: 34px; stroke-width: 1.5; }

@keyframes dv-scan { 0%, 100% { top: 10px; } 50% { top: calc(100% - 12px); } }
@keyframes dv-tile { 0%, 60%, 100% { background: #cbdaf9; } 15%, 35% { background: #3568e0; } }
@keyframes dv-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes dv-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(96, 140, 250, 0); color: #a9c3ff; } 50% { box-shadow: 0 0 18px 3px rgba(96, 140, 250, 0.55); color: #e3ebff; } }
@keyframes hw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- 반응형 ---------- */
@media (max-width: 1200px) {
  .chg-row { grid-template-columns: 150px minmax(0, 1fr) 64px minmax(0, 1fr); }
  .fs-bar-layout .fs-card .fs-name { font-size: 15px; }
}
@media (max-width: 1023px) {
  .chg-row { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 10px 0; }
  .chg-topic { grid-column: 1 / -1; padding: 4px 6px 2px; }
  .fs-bar-layout .fs-card { padding: 14px 4px 12px; }
  .fs-bar-layout .fs-card .fs-ico { width: 38px; height: 38px; margin-bottom: 6px; }
  .fs-bar-layout .fs-card .fs-name { font-size: 14px; }
  .fs-bar-layout .fs-panel { padding: 32px 28px; }
  .fs-bar-layout .fs-view.active { grid-template-columns: 1fr; gap: 8px; }
  .fs-info h3 { font-size: 28px; }
  .fs-info p { font-size: 16.5px; }
  .hw-head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-main { grid-column: 1 / -1; grid-row: auto; }
  .hw-main .hw-art { height: 300px; }
}
@media (max-width: 767px) {
  .num-cta .btn { width: 100%; }
  .chg-legend { margin: -14px 0 24px; font-size: 13.5px; gap: 8px 12px; }
  .chg-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .chg-asis, .chg-tobe { padding: 16px 18px 18px; }
  .chg-asis .chg-head { font-size: 17px; }
  .chg-tobe .chg-head { font-size: 20px; }
  .chg-arrow { flex-direction: column; gap: 0; padding: 0; height: 40px; }
  .chg-arrow i { width: 12px; height: 12px; margin: -2px 0; transform: rotate(135deg); }
  .fs-bar-layout .fs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 18px; overflow: visible; scroll-snap-type: none; }
  .fs-bar-layout .fs-card { flex: none; padding: 12px 4px 10px; border-radius: 13px; scroll-snap-align: none; }
  .fs-bar-layout .fs-card .fs-ico { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 4px; }
  .fs-bar-layout .fs-card .fs-ico svg.ico { width: 18px; height: 18px; }
  .fs-bar-layout .fs-card .fs-no { font-size: 11px; }
  .fs-bar-layout .fs-card .fs-name { font-size: 13.5px; }
  .fs-bar-layout .fs-card.active::after { display: none; }
  .fs-bar-layout .fs-panel { margin-top: 16px; padding: 22px 16px 16px; }
  .fs-info h3 { font-size: 24px; }
  .fs-info p { margin-top: 10px; font-size: 15.5px; }
  .fs-info .btn { margin-top: 20px; width: 100%; }
  .fs-bar-layout .fs-stage { height: 500px; }
  .fs-bar-layout .fs-stage .preview[data-demo="gate"], .fs-bar-layout .fs-stage .preview[data-demo="bay"], .fs-bar-layout .fs-stage .preview[data-demo="timetable"] { transform: scale(0.8); }
  .hw-head { margin-bottom: 32px; }
  .hw-grid { grid-template-columns: 1fr; gap: 14px; }
  .hw-main .hw-art { height: 230px; }
  .hw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-flow li:nth-child(3)::before { display: none; }
  .hw-main .hw-body h3 { font-size: 22px; }
  .hw-strip { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .hw-links { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .chg-strike::after, .chg-tobe::before { transform: scaleX(1); }
  .chg-tobe { color: #fff; }
  .chg-tobe .chg-tag.tobe { background: #fff; color: var(--primary); }
  .chg-check { transform: none; }
  .chg-arrow i { opacity: 1; animation: none !important; }
  .dv-scan, .dv-kiosk-screen i, .dv-nfc svg.ico, .dv-finger-pad, .hw-live i, .hw-flow li { animation: none !important; }
}

/* =========================================================
   2026-10-07 수정 — 서비스 소개
   하루 타임라인(휠 · 스크롤 단계 전환) · 새 앱 화면 · 움직이는 연결 구조
   ========================================================= */

/* ---------- 하루 타임라인: 고정 화면 + 휠 한 번에 한 단계 ---------- */
.tl-section { padding-bottom: 48px; }
.tl-section .sec-head { margin-bottom: 0; }
.tl-scroll { position: relative; overflow-anchor: none; }
.tl-sticky { position: sticky; top: 130px; display: flex; align-items: center; }
.tl-stage { width: 100%; }
.tl-scroll .tl-wrap { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
.tl-scroll .tl-wrap.flip { grid-template-columns: 480px minmax(0, 1fr); }
.tl-scroll .tl-wrap > * { min-width: 0; }
.tl-scroll .tl-item .tl-bar i { animation: none !important; transition: width 0.12s linear; }
.tl-scroll .tl-item.done::before { border-color: var(--primary); background: var(--blue-100); }
.tl-scroll .tl-item.done .tl-time { color: var(--blue-300); }
.tl-scroll .tl-screen.active { animation: tl-screen-in 0.5s var(--ease); }
@keyframes tl-screen-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.tl-progress { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-left: 30px; }
.tl-count { font-family: var(--font-num); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: var(--primary); white-space: nowrap; }
.tl-count span { margin-left: 4px; color: var(--gray-400); font-weight: 700; }
.tl-dots { display: flex; align-items: center; gap: 8px; }
.tl-dots button { width: 10px; height: 10px; border-radius: 999px; background: var(--gray-300); transition: width 0.3s var(--ease), background 0.2s; }
.tl-dots button:hover { background: var(--blue-300); }
.tl-dots button.done { background: var(--blue-300); }
.tl-dots button.active { width: 28px; background: var(--primary); }

/* 새 앱 화면 요소 */
.a-face { background: #fff; border-radius: 16px; border: 1px solid #edf0f5; padding: 18px 16px 16px; text-align: center; }
.a-face-frame {
  position: relative; width: 120px; height: 120px; margin: 0 auto; border-radius: 28px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #eaf1ff, #d6e3fd); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.a-face-frame svg.ico { width: 58px; height: 58px; stroke-width: 1.5; }
.a-face-scan { position: absolute; left: 12px; right: 12px; top: 14px; height: 3px; border-radius: 3px; background: var(--success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.8); animation: a-face-scan 2s ease-in-out infinite; }
@keyframes a-face-scan { 0%, 100% { top: 14px; } 50% { top: calc(100% - 17px); } }
.a-face b { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 800; }
.a-face small { display: block; font-size: 10.5px; color: var(--gray-500); }
.a-cta.ghost { background: #fff; color: var(--gray-600); border: 1.5px solid var(--gray-200); }
.a-cta.ghost:hover { background: #fff; border-color: var(--danger); color: var(--danger-deep); }
.a-note { margin-top: 8px; font-size: 10.5px; color: var(--gray-500); text-align: center; }

/* ---------- 연결 구조: 움직이는 연결도 ---------- */
.connect.cn-live { position: relative; overflow-anchor: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 92px; }
.cn-live > .cn-col, .cn-live > .cn-core { position: relative; z-index: 1; }
.cn-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.cn-path { fill: none; stroke: var(--blue-300); stroke-width: 2.4; stroke-dasharray: 6 7; stroke-linecap: round; animation: cn-dash 1.4s linear infinite; transition: stroke 0.3s, stroke-width 0.3s; }
.cn-path.flow { stroke: var(--primary); stroke-width: 3; stroke-dasharray: none; }
.cn-dot { fill: var(--primary); }
.cn-glow { fill: rgba(53, 104, 224, 0.22); }
@keyframes cn-dash { to { stroke-dashoffset: -24; } }

.cn-live .cn-node { position: relative; transition: border-color 0.2s, box-shadow 0.25s, background 0.2s, transform 0.3s var(--ease); }
.cn-live .cn-node:hover { transform: translateY(-2px); }
.cn-live .cn-ico { position: relative; }
.cn-ping { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--primary); opacity: 0; pointer-events: none; }
.cn-node.tx .cn-ping, .cn-node.rx .cn-ping { animation: cn-ping 0.9s ease-out 2; }
@keyframes cn-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }
.cn-node.tx, .cn-node.rx { border-color: var(--primary); box-shadow: var(--shadow-blue); transform: translateY(-3px); }
.cn-node.tx .cn-ico, .cn-node.rx .cn-ico { background: var(--primary); color: #fff; }
.cn-text { min-width: 0; }
.cn-state {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 9px 2px 8px; border-radius: 999px;
  font-style: normal; font-size: 12px; font-weight: 700; color: var(--success-deep); background: #e7f8f1;
  transition: background 0.25s, color 0.25s;
}
.cn-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: cn-live 1.6s ease-in-out infinite; }
.cn-node.tx .cn-state, .cn-node.rx .cn-state { color: var(--primary); background: var(--blue-100); }
.cn-node.tx .cn-state i, .cn-node.rx .cn-state i { background: var(--primary); }
@keyframes cn-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.cn-live .cn-core { transition: box-shadow 0.3s; }
.cn-core-ring { position: absolute; inset: -10px; border-radius: 36px; border: 2px solid rgba(53, 104, 224, 0.4); opacity: 0; pointer-events: none; }
.cn-core.rx { box-shadow: 0 0 0 6px rgba(53, 104, 224, 0.16), var(--shadow-lg); }
.cn-core.rx .cn-core-ring { animation: cn-core 0.9s ease-out; }
@keyframes cn-core { 0% { opacity: 0.9; transform: scale(0.97); } 100% { opacity: 0; transform: scale(1.08); } }
.cn-feed {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  font-size: 13px; font-weight: 700; color: #e3ebff;
}
.cn-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #6ee7b7; box-shadow: 0 0 8px rgba(110, 231, 183, 0.8); animation: cn-live 1.4s ease-in-out infinite; }
.cn-feed-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cn-detail { align-items: center; }
.cn-detail .cd-text { flex: 1; min-width: 0; }
.cn-detail.swap .cd-text, .cn-detail.swap .cd-ico { animation: panel-in 0.4s var(--ease); }
.cd-flow { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.cd-toggle {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--gray-200); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--gray-600);
  transition: border-color 0.15s, color 0.15s;
}
.cd-toggle:hover { border-color: var(--primary); color: var(--primary); }
.cd-toggle svg.ico { width: 15px; height: 15px; }
.cd-toggle .cd-ic-pause, .cd-toggle .cd-ic-play { display: inline-flex; }
.cd-toggle .cd-ic-play { display: none; }
.cd-toggle.paused { border-color: var(--primary); color: var(--primary); }
.cd-toggle.paused .cd-ic-play { display: inline-flex; }
.cd-toggle.paused .cd-ic-pause { display: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1023px) {
  .tl-scroll .tl-wrap, .tl-scroll .tl-wrap.flip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tl-scroll .tl-wrap.flip .tl-screens { order: 0; }
  .tl-scroll .tl-list { padding-left: 0; }
  .tl-scroll .tl-list::before { display: none; }
  .tl-scroll .tl-item { display: none; }
  .tl-scroll .tl-item.active { display: block; }
  .tl-scroll .tl-item::before { display: none; }
  .tl-sticky { align-items: flex-start; padding-top: 14px; }
  .tl-progress { justify-content: center; padding-left: 0; margin-top: 12px; }
  .connect.cn-live { padding-left: 26px; grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}
@media (max-width: 767px) {
  .tl-scroll .tl-item { padding: 14px 16px 18px; }
  .tl-scroll .tl-item .tl-title { font-size: 16px; }
  .cn-detail { flex-wrap: wrap; }
  .cn-detail .cd-text { flex-basis: calc(100% - 70px); }
  .cd-toggle { margin-left: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-path, .cn-state i, .cn-feed-dot, .a-face-scan { animation: none !important; }
}

/* 처음 열 때 주소의 #위치로는 바로 이동하고, 다 열린 뒤부터 부드럽게 스크롤 */
html { scroll-behavior: auto; }
html.smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.smooth { scroll-behavior: auto; } }

/* =========================================================
   2026-10-07 수정 — 하루 타임라인: 다이얼형
   왼쪽 원판 + 화면, 오른쪽 링 위 단계 아이콘 (현재 단계 = 3시 자리)
   ========================================================= */
.tl-scroll[data-timeline] .tl-sticky { display: block; overflow: hidden; }
.tl-scroll[data-timeline] .tl-stage { height: 100%; }
.dial { position: relative; width: 100%; height: 100%; }
.dial-panel {
  position: absolute; border-radius: 32px; pointer-events: none;
  background: linear-gradient(160deg, #f6f8ff 0%, #e9effd 55%, #dfe8fc 100%);
  border: 1px solid var(--blue-100);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.6), 0 40px 80px -40px rgba(37, 87, 209, 0.4);
}
.dial-ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--blue-200); pointer-events: none; clip-path: inset(0 0 0 50%); }
.dial-screens { position: absolute; z-index: 1; transform: translate(-50%, -50%); }
.dial-screens .tl-screen { display: none; width: auto; }
.dial-screens .tl-screen.active { display: flex; justify-content: center; animation: dial-screen-in 0.55s var(--ease); }
@keyframes dial-screen-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: none; } }

.dial-items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dial-item {
  position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; border-radius: 50%;
  pointer-events: auto; transform-origin: 50% 50%;
  transition: transform 0.75s var(--ease), opacity 0.5s ease, visibility 0.5s;
}
.dial.no-anim .dial-item { transition: none; }
.di-ico {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff;
  background: var(--gray-800); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -12px rgba(17, 25, 39, 0.6); transition: background 0.35s, box-shadow 0.35s;
}
.di-ico svg.ico { width: 28px; height: 28px; stroke-width: 1.6; }
.dial-item:hover .di-ico { background: var(--gray-700); }
.dial-item.active .di-ico { background: var(--primary); box-shadow: 0 0 0 10px rgba(53, 104, 224, 0.14), 0 16px 32px -12px rgba(53, 104, 224, 0.7); }
.dial-item:focus-visible { outline: none; }
.dial-item:focus-visible .di-ico { outline: 3px solid var(--primary); outline-offset: 4px; }
.di-text { position: absolute; left: calc(100% + 20px); top: 50%; transform: translateY(-50%); width: 380px; text-align: left; }
.di-time { display: block; font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--gray-400); transition: color 0.3s; }
.di-time span { margin-left: 6px; font-family: var(--font); font-weight: 600; }
.di-title {
  display: block; margin-top: 2px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em;
  color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s;
}
.di-tag { display: none; margin-top: 10px; height: 26px; padding: 0 11px; border-radius: 999px; align-items: center; background: var(--blue-100); color: var(--primary); font-size: 12.5px; font-weight: 700; }
.dial-item.done .di-time { color: var(--blue-300); }
.dial-item.active .di-time { color: var(--primary); }
.dial-item.active .di-title { font-size: 26px; line-height: 1.3; color: var(--ink); white-space: normal; letter-spacing: -0.03em; }
.dial-item.active .di-tag { display: inline-flex; }
.dial-count { position: absolute; right: 0; bottom: 28px; z-index: 2; font-family: var(--font-num); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: var(--primary); }
.dial-count span { margin-left: 4px; color: var(--gray-400); font-weight: 700; }

/* 좁은 화면: 다이얼 위 · 화면 아래 */
@media (max-width: 1023px) {
  .tl-scroll[data-timeline] .tl-sticky { padding-top: 0; }
  .dial-item { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .di-ico svg.ico { width: 24px; height: 24px; }
  .di-text { left: calc(100% + 14px); width: 460px; max-width: calc(100vw - 150px); }
  .di-title { font-size: 16px; }
  .dial-item.active .di-title { font-size: 20px; }
  .di-tag { margin-top: 6px; height: 24px; font-size: 12px; }
  .dial-count { top: 10px; bottom: auto; font-size: 13px; }
}
@media (max-width: 767px) {
  .dial-item { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .di-ico svg.ico { width: 22px; height: 22px; }
  .di-text { left: calc(100% + 12px); max-width: calc(100vw - 132px); }
  .di-title { font-size: 15px; }
  .dial-item.active .di-title { font-size: 16.5px; line-height: 1.32; }
}
@media (prefers-reduced-motion: reduce) {
  .dial-item { transition: none; }
}


/* =========================================================
   2026-10-07 수정 — 도입 사례: 단지 사진 · 필터 전환(서서히 사라짐 → 아래에서 채움)
   ========================================================= */
.case-art .ca-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.case-art::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(17, 25, 39, 0.16) 0%, rgba(17, 25, 39, 0) 42%); }
.case-card:hover .ca-img, .case-mini:hover .ca-img { transform: scale(1.05); }
.case-art .ca-scale { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(17, 25, 39, 0.16); }
.case-grid { position: relative; align-content: start; grid-auto-rows: max-content; }   /* 높이 애니메이션 중에도 행(카드)이 눌리지 않게 */
.case-card { will-change: transform; backface-visibility: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  .case-art .ca-img { transition: none; }
}

/* =========================================================
   2026-10-07 수정 — 도입 사례 상세 모달 (cmx-*)
   사진 히어로 · 2단 편집(단지 정보 · 도입 기능 | 운영 포인트 · 한마디) · 이전/다음 · 순차 등장
   ========================================================= */
.modal-case { max-width: 860px; overflow: hidden; }
.modal-case .cmx-body { padding: 0; }

/* 닫기: 히어로 위 흰 원형 (modal-close 클래스 병기 → openModal 자동 포커스 유지) */
.modal-case .cmx-close {
  position: absolute; top: 14px; right: 14px; z-index: 6; margin: 0;
  width: 40px; height: 40px; border-radius: 50%; color: var(--ink);
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(17, 25, 39, 0.18); transition: background 0.18s, transform 0.25s var(--ease);
}
.modal-case .cmx-close:hover { background: #fff; color: var(--ink); transform: rotate(90deg); }
.modal-case .cmx-close:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary); }

/* 히어로 */
.cmx-hero { position: relative; height: 300px; overflow: hidden; color: #fff; background: var(--blue-100); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cmx-hero-media { position: absolute; inset: 0; }
.cmx-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cmx-hero-media img.is-first { animation: cmx-settle 1.2s var(--ease) both; }   /* 첫 열림: 1.06 → 1 줌아웃 */
.cmx-hero-media img.is-new { animation: cmx-fade 0.32s ease both; }            /* 이전/다음: 크로스페이드 */
@keyframes cmx-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes cmx-fade { from { opacity: 0; } to { opacity: 1; } }
.cmx-hero-media .case-art { height: 100%; border-radius: 0; }                   /* 사진 없을 때 스카이라인 폴백 */
.cmx-hero-media .case-art .ca-scale { display: none; }
.cmx-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 25, 39, 0.32) 0%, rgba(17, 25, 39, 0) 32%, rgba(17, 25, 39, 0) 46%, rgba(17, 25, 39, 0.78) 100%);
}
.cmx-hero.is-art::after { background: linear-gradient(180deg, rgba(22, 56, 139, 0.15) 0%, rgba(22, 56, 139, 0.86) 100%); }
.cmx-hero-top { position: absolute; top: 16px; left: 20px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.cmx-hero-top .tag.blue { background: rgba(255, 255, 255, 0.92); color: var(--primary); }
.cmx-count {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px;
  font-family: var(--font-num); font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(17, 25, 39, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cmx-count:empty { display: none; }
.cmx-hero-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 72px 24px 28px; transition: opacity 0.18s, transform 0.18s var(--ease); }
.cmx-hero h2 { display: flex; flex-direction: column; gap: 3px; font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 2px 14px rgba(17, 25, 39, 0.35); }
.cmx-hero .cmx-loc { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; opacity: 0.88; }
.cmx-hero .cmx-name { font-size: 30px; line-height: 1.2; }

/* 이전/다음 화살표 */
.cmx-arrow {
  position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(17, 25, 39, 0.18); transition: background 0.18s, transform 0.25s var(--ease), opacity 0.2s;
}
.cmx-arrow.prev { left: 14px; }
.cmx-arrow.next { right: 14px; }
.cmx-arrow:hover { background: #fff; transform: scale(1.08); }
.cmx-arrow:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary); }
.cmx-arrow svg.ico { width: 22px; height: 22px; stroke-width: 2.3; }
.cmx-arrow[disabled] { opacity: 0.35; pointer-events: none; }

/* 본문 2단: 단지 정보 · 도입 기능 | 운영 포인트 · 한마디 */
.cmx-wrap { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px 34px; padding: 28px 32px 16px; transition: opacity 0.18s, transform 0.18s var(--ease); }
.cmx-aside, .cmx-main { min-width: 0; }
.cmx-sec + .cmx-sec { margin-top: 28px; }
.cmx-sec[hidden] { display: none; }
.cmx-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--primary); }
.cmx-label::before { content: ''; flex-shrink: 0; width: 14px; height: 2px; border-radius: 2px; background: var(--primary); }
.cmx-label-meta { margin-left: auto; font-family: var(--font-num); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--gray-400); }
.cmx-label-meta b { font-size: 16px; font-weight: 800; color: var(--primary); }

/* 단지 정보: 점묘 지도 + 지역 핀 · 이름표, 세대 규모 */
.cmx-profile { border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; background: #fff; }
.cmx-map {
  position: relative; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 95% at 28% 18%, #f8faff 0%, #eef3fd 58%, #e5ecfb 100%); border-bottom: 1px solid var(--gray-100);
}
.cmx-map::before {   /* 옅은 격자 */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(rgba(53, 104, 224, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 104, 224, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cmx-map-box { position: relative; height: 160px; aspect-ratio: 120 / 114; }
.cmx-map-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cmx-map-dots { fill: none; stroke: #a7b9de; stroke-width: 2.2; stroke-linecap: round; }
.cmx-pin {
  position: absolute; left: var(--px, 50%); top: var(--py, 50%); z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 2.5px #fff, 0 4px 12px rgba(53, 104, 224, 0.55);
  transition: left 0.55s var(--ease), top 0.55s var(--ease);
}
.cmx-pin::before, .cmx-pin::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(53, 104, 224, 0.5);
  animation: cmx-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.cmx-pin::after { animation-delay: 1.2s; }
@keyframes cmx-ping { from { transform: scale(0.45); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
.cmx-pin-label {   /* 위치는 margin으로 (transform은 등장 애니메이션이 씀) */
  position: absolute; left: var(--px, 50%); top: var(--py, 50%); z-index: 3; margin: -13px 0 0 13px;
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 1px solid var(--gray-200); color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 6px 16px -6px rgba(17, 25, 39, 0.3);
}
.cmx-map-box.pin-left .cmx-pin-label { left: auto; right: calc(100% - var(--px, 50%)); margin: -13px 13px 0 0; }
.cmx-map-box.no-pin .cmx-pin, .cmx-map-box.no-pin .cmx-pin-label { display: none; }
.cmx-specs { margin: 0; padding: 13px 16px 15px; }
.cmx-spec dt { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.cmx-spec dd { margin: 3px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cmx-scale { display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }
.cmx-scale-n { font-family: var(--font-num); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.cmx-scale-u { font-size: 14px; font-weight: 700; color: var(--gray-600); }
.cmx-size {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--primary); font-size: 12px; font-weight: 700;
}
.cmx-size:empty { display: none; }

/* 도입 기능: 6개 기능 중 이 단지가 쓰는 기능 강조(누르면 기능 소개로), 나머지는 흐리게 */
.cmx-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cmx-feat {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-height: 78px; padding: 11px 12px 10px;
  border-radius: 14px; border: 1px dashed var(--gray-300); background: var(--gray-50); color: var(--gray-400); text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease), background 0.2s;
}
.cmx-feat-ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-400); transition: background 0.2s, color 0.2s; }
.cmx-feat-ico svg.ico { width: 16px; height: 16px; stroke-width: 2; }
.cmx-feat-name { font-size: 12.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; word-break: keep-all; }
.cmx-feat-ck { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--primary); color: #fff; }
.cmx-feat-ck svg.ico { width: 11px; height: 11px; stroke-width: 3; }
.cmx-feat.on { border: 1px solid var(--blue-200); background: #fff; color: var(--ink); box-shadow: 0 8px 18px -14px rgba(53, 104, 224, 0.6); cursor: pointer; }
.cmx-feat.on .cmx-feat-ico { background: linear-gradient(140deg, #5a88ee 0%, var(--primary) 100%); color: #fff; }
.cmx-feat.on .cmx-feat-ck { display: flex; }
.cmx-feat.on:hover, .cmx-feat.on.is-hl { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(53, 104, 224, 0.65); }
.cmx-feat.on:hover .cmx-feat-name, .cmx-feat.on.is-hl .cmx-feat-name { color: var(--primary); }
.cmx-feat:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary); }

/* 운영 포인트: 아이콘 · 핵심 문구 강조 · 관련 기능 */
.cmx-points { display: flex; flex-direction: column; gap: 10px; }
.cmx-pt { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 14px 14px; border-radius: 16px; border: 1px solid var(--gray-200); background: #fff; transition: border-color 0.2s, box-shadow 0.25s; }
.cmx-pt-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--primary); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cmx-pt-ico svg.ico { width: 20px; height: 20px; stroke-width: 1.9; }
.cmx-pt-body { flex: 1; min-width: 0; padding-top: 1px; }
.cmx-pt-body p { font-size: 15px; line-height: 1.65; color: var(--gray-600); letter-spacing: -0.015em; word-break: keep-all; }
.cmx-pt-body p b { font-weight: 700; color: var(--ink); }
.cmx-pt-feat {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-top: 8px; padding: 0 9px 0 7px; border-radius: 7px;
  background: var(--gray-100); color: var(--gray-600); font-size: 12px; font-weight: 700; transition: background 0.2s, color 0.2s;
}
.cmx-pt-feat svg.ico { width: 13px; height: 13px; stroke-width: 2.2; }
.cmx-pt:hover { border-color: var(--blue-200); box-shadow: 0 12px 26px -18px rgba(17, 25, 39, 0.4); }
.cmx-pt:hover .cmx-pt-ico { background: var(--primary); border-color: var(--primary); color: #fff; }
.cmx-pt:hover .cmx-pt-feat { background: var(--blue-100); color: var(--primary); }

/* 한마디: 인용 카드 + 발화자 */
.cmx-quote { position: relative; margin: 0; padding: 22px 24px 18px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #f5f8ff 0%, #ecf1fd 100%); border: 1px solid var(--blue-100); }
.cmx-quote::before { content: '\201C'; position: absolute; top: -22px; right: 16px; font-family: Georgia, 'Times New Roman', serif; font-size: 128px; line-height: 1; color: rgba(53, 104, 224, 0.1); pointer-events: none; }
.cmx-quote-text { position: relative; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.75; color: #23407f; letter-spacing: -0.015em; word-break: keep-all; }
.cmx-quote-who { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(53, 104, 224, 0.14); }
.cmx-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--blue-200); color: var(--primary); }
.cmx-avatar svg.ico { width: 18px; height: 18px; }
.cmx-who { display: flex; flex-direction: column; min-width: 0; }
.cmx-who-role { font-size: 14px; font-weight: 800; color: var(--ink); }
.cmx-who-site { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.cmx-who-role:empty + .cmx-who-site { font-size: 13.5px; }

/* 열림 · 전환 연출: .cmx-body.play 토글로 재생 (제목 → 섹션 → 타일 · 포인트 차례로) */
@keyframes cmx-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmx-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.cmx-body.play .cmx-hero h2 > * { animation: cmx-up 0.55s var(--ease) backwards; }
.cmx-body.play .cmx-hero h2 > :nth-child(1) { animation-delay: 0.1s; }
.cmx-body.play .cmx-hero h2 > :nth-child(2) { animation-delay: 0.18s; }
.cmx-body.play .cmx-label, .cmx-body.play .cmx-profile, .cmx-body.play .cmx-quote { animation: cmx-up 0.5s var(--ease) backwards; animation-delay: var(--d, 0.2s); }
.cmx-body.play .cmx-sec-facts .cmx-label { --d: 0.18s; }
.cmx-body.play .cmx-profile { --d: 0.22s; }
.cmx-body.play .cmx-sec-points .cmx-label { --d: 0.24s; }
.cmx-body.play .cmx-sec-feats .cmx-label { --d: 0.32s; }
.cmx-body.play .cmx-sec-quote .cmx-label { --d: 0.5s; }
.cmx-body.play .cmx-quote { --d: 0.54s; }
.cmx-body.play .cmx-pin { animation: cmx-drop 0.6s var(--ease) 0.42s backwards; }
.cmx-body.play .cmx-pin-label { animation: cmx-up 0.5s var(--ease) 0.52s backwards; }
.cmx-body.play .cmx-feat { animation: cmx-up 0.45s var(--ease) backwards; animation-delay: calc(0.36s + var(--i, 0) * 40ms); }
.cmx-body.play .cmx-pt { animation: cmx-up 0.5s var(--ease) backwards; animation-delay: calc(0.3s + var(--i, 0) * 70ms); }
/* 이전/다음: 현재 제목 · 본문이 진행 반대 방향으로 빠짐 (--cmx-dir는 JS가 지정) */
.cmx-body.is-swapping .cmx-hero-txt, .cmx-body.is-swapping .cmx-wrap { opacity: 0; transform: translateX(var(--cmx-dir, -14px)); }

@media (max-height: 760px) {
  .cmx-hero { height: 240px; }
}
@media (max-width: 1023px) {
  .cmx-wrap { grid-template-columns: 240px minmax(0, 1fr); gap: 28px 24px; padding: 24px 24px 12px; }
}

/* 모바일 바텀시트 (기존 .modal 규칙 유지) + 1단 편집 */
@media (max-width: 767px) {
  .modal-case { border-radius: 24px 24px 0 0; }
  .cmx-hero { height: 56vw; min-height: 190px; max-height: 240px; }
  .modal-case .cmx-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .modal-case .cmx-close svg.ico { width: 20px; height: 20px; }
  .cmx-hero-top { top: 14px; left: 16px; }
  .cmx-hero-txt { padding: 0 60px 18px 20px; }
  .cmx-hero .cmx-loc { font-size: 13.5px; }
  .cmx-hero .cmx-name { font-size: 24px; }
  .cmx-arrow { width: 36px; height: 36px; margin-top: -18px; }
  .cmx-arrow.prev { left: 10px; }
  .cmx-arrow.next { right: 10px; }
  .cmx-arrow svg.ico { width: 20px; height: 20px; }
  .cmx-wrap { grid-template-columns: 1fr; gap: 26px; padding: 20px 20px 8px; }
  .cmx-sec + .cmx-sec { margin-top: 24px; }
  .cmx-map { height: 168px; }
  .cmx-map-box { height: 152px; }
  .cmx-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmx-feat { min-height: 74px; padding: 10px 10px 9px; }
  .cmx-feat-ck { top: 8px; right: 8px; }
  .cmx-pt { gap: 12px; padding: 13px 14px 13px 12px; }
  .cmx-pt-ico { width: 36px; height: 36px; border-radius: 11px; }
  .cmx-pt-ico svg.ico { width: 18px; height: 18px; }
  .cmx-pt-body p { font-size: 14.5px; }
  .cmx-quote { padding: 18px 18px 16px; }
  .cmx-quote-text { font-size: 15px; }
  .modal-case .modal-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* 동작 줄이기: 전역 규칙(애니메이션 0.01ms)에 더해 초기 opacity 0 상태를 남기지 않도록 */
@media (prefers-reduced-motion: reduce) {
  .cmx-body.play .cmx-hero h2 > *, .cmx-body.play .cmx-label, .cmx-body.play .cmx-profile, .cmx-body.play .cmx-quote,
  .cmx-body.play .cmx-feat, .cmx-body.play .cmx-pt, .cmx-body.play .cmx-pin, .cmx-body.play .cmx-pin-label,
  .cmx-hero-media img.is-first, .cmx-hero-media img.is-new { animation: none; opacity: 1; transform: none; }
  .cmx-pin::before, .cmx-pin::after { animation: none; opacity: 0; }
  .cmx-hero-txt, .cmx-wrap, .modal-case .cmx-close, .cmx-arrow, .cmx-pin, .cmx-pin-label { transition: none; }
}

/* =========================================================
   2026-10-08 (R4 · HERO) 메인 히어로 — 입주민의 두 창구, 하나의 운영 (.hero.hx)
   앞: 입주민 앱(폰) · 키오스크가 같은 급의 두 창구로 나란히 / 가운데: 같은 이용권
   뒤: 관리사무소 대시보드 / 아래: 이용 현장(출입 게이트 · 골프 타석)
   무대는 660×600 고정 좌표 → --hx-s 로 축소/확대. 키오스크 그림은 사이트 공통 .kiosk (R4 · HERO 블록)
   ========================================================= */
.hero.hx {
  --hx-s: 0.92; --hx-bleed: 0px;
  padding: 32px 0 40px;
  min-height: min(900px, calc(100svh - var(--header-h)));
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, #f7f9fd 0%, #eef4ff 56%, #e6eeff 100%);
  isolation: isolate;
}
.hero.hx > .container { width: 100%; }

/* ---------- 배경: 오로라 · 점 격자 · 원근 바닥 ---------- */
.hx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hx-aura { position: absolute; border-radius: 50%; }
.hx-aura.a1 { width: 820px; height: 820px; right: -200px; top: -260px; background: radial-gradient(closest-side, rgba(53, 104, 224, 0.2), rgba(53, 104, 224, 0)); }
.hx-aura.a2 { width: 620px; height: 620px; left: -240px; bottom: -300px; background: radial-gradient(closest-side, rgba(14, 165, 198, 0.12), rgba(14, 165, 198, 0)); }
.hx-aura.a3 { width: 460px; height: 460px; right: 18%; top: 34%; background: radial-gradient(closest-side, rgba(122, 160, 255, 0.24), rgba(122, 160, 255, 0)); animation: hx-breathe 9s ease-in-out infinite; }
.hx-dots {
  position: absolute; inset: -20px;
  background-image: radial-gradient(rgba(53, 104, 224, 0.17) 1px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 72% 42%, #000 18%, transparent 74%);
  mask-image: radial-gradient(ellipse 62% 58% at 72% 42%, #000 18%, transparent 74%);
}
.hx-floor {
  position: absolute; left: -15%; right: -15%; bottom: -4%; height: 44%;
  background-image: linear-gradient(rgba(53, 104, 224, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 104, 224, 0.13) 1px, transparent 1px);
  background-size: 58px 58px;
  transform: perspective(620px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 68%, transparent 100%);
}
/* 커서 스포트라이트 (PC · 정밀 포인터에서 JS가 위치를 옮김) */
.hx-spot { position: absolute; left: 0; top: 0; width: 600px; height: 600px; opacity: 0; will-change: transform, opacity; }
.hx-spot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(214, 226, 251, 0.3) 48%, transparent); }
.hx-spot::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(53, 104, 224, 0.42) 1.2px, transparent 1.7px); background-size: 26px 26px; background-position: var(--bx, 0) var(--by, 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent); mask-image: radial-gradient(closest-side, #000 15%, transparent);
}
.hx-bg::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }

/* ---------- 레이아웃 ---------- */
.hero.hx .hero-inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 28px; align-items: center; }
.hx-copy { position: relative; z-index: 2; }

/* ---------- 카피 ---------- */
.hx-badge .dot { animation: hx-dot 2.2s ease-out infinite; }
.hero.hx .hx-title { margin: 22px 0 20px; font-size: clamp(40px, 3.9vw, 54px); font-weight: 800; line-height: 1.2; letter-spacing: -0.045em; color: var(--ink); }
.hx-line { display: block; overflow: hidden; padding: 0.04em 0 0.08em; margin: -0.04em 0 -0.08em; }
.hx-line > span { display: inline-block; animation: hx-line 1s var(--ease) backwards; animation-delay: 0.12s; }
.hx-line + .hx-line > span { animation-delay: 0.24s; }
.hx-accent {
  position: relative; color: var(--primary);
  background: linear-gradient(100deg, #2557d1 0%, #3568e0 40%, #6b97ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hx-accent::after {
  content: ''; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.1em; height: 0.2em; z-index: -1;
  border-radius: 0.1em; background: rgba(53, 104, 224, 0.16); transform-origin: left center;
  animation: hx-mark 0.9s var(--ease) 0.85s backwards;
}
.hx-in { animation: hx-rise 0.8s var(--ease) backwards; animation-delay: calc(0.1s + var(--i, 0) * 0.08s); }
/* 주 CTA: 커서를 따라가는 빛(::before, 글자 아래) + 7초마다 지나가는 광택(::after) */
.hx-cta { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(110deg, #3d72ea, #2557d1); box-shadow: 0 14px 30px -14px rgba(53, 104, 224, 0.75); }
.hx-cta:hover { background: linear-gradient(110deg, #2f66e3, #1d47b5); box-shadow: 0 18px 36px -14px rgba(53, 104, 224, 0.85); }
.hx-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.3), transparent 65%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.hx-cta:hover::before { opacity: 1; }
.hx-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; z-index: -1; width: 26%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-18deg) translateX(-140%); pointer-events: none; animation: hx-shine 7s ease-in-out 2.2s infinite; }
.hx-cta .ico { transition: transform 0.3s var(--ease); }
.hx-cta:hover .ico { transform: translateX(4px); }
/* 설명의 '입주민' · '키오스크' · '관리사무소' — 마우스를 올리면 무대의 앱 · 키오스크 · 대시보드가 강조됨 */
.hx-who { font-weight: 700; color: var(--ink); transition: color 0.2s; }
.hx-who:hover { color: var(--primary); }
.hero.hx .hero-kw a { background: rgba(255, 255, 255, 0.82); transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.2s, transform 0.2s var(--ease); }
.hero.hx .hero-kw a:hover, .hero.hx .hero-kw a:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(53, 104, 224, 0.7); }

/* ---------- 무대 ---------- */
.hx-visual { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; }
.hx-fit { position: relative; flex-shrink: 0; width: calc(660px * var(--hx-s)); height: calc(600px * var(--hx-s)); margin-right: calc(var(--hx-bleed) * -1); }
.hx-scaler { position: absolute; left: 0; top: 0; width: 660px; height: 600px; transform-origin: 0 0; scale: var(--hx-s); }
.hx-canvas { position: absolute; inset: 0; transform-origin: 50% 55%; }

/* 관리사무소 대시보드 (뒤 · 가운데) — 아래 양 끝은 두 창구 뒤에 가려지므로 기록은 가운데 칸에 */
.hx-dash {
  position: absolute; left: 160px; top: 6px; width: 360px; height: 240px; z-index: 1; overflow: hidden;
  border-radius: 18px; background: #fff; border: 1px solid #d9e4fa;
  box-shadow: 0 44px 80px -40px rgba(22, 56, 139, 0.5), 0 2px 6px rgba(17, 25, 39, 0.05);
  animation: hx-rise-far 1.1s var(--ease) 0.25s backwards;
  transition: opacity 0.3s, box-shadow 0.3s;
}
.hx-win-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #edf1f7; background: linear-gradient(180deg, #fbfcfe, #f4f7fb); }
.hx-win-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #d6dce6; }
.hx-win-bar > b { margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--gray-700); white-space: nowrap; }
.hx-live, .hx-sumtag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.hx-live { margin-left: auto; background: #e7f8f1; color: var(--success-deep); }
.hx-live > span { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: hx-dot-g 1.8s ease-out infinite; }
.hx-sumtag { margin-left: auto; background: var(--primary); color: #fff; opacity: 0; }
.hx-sumtag + .hx-live { margin-left: 0; }
.hx-sumtag svg.ico { width: 11px; height: 11px; stroke-width: 3; }
.hx-dash.is-sum .hx-sumtag { animation: hx-sumtag 2.4s var(--ease) both; }
.hx-dash-body { padding: 10px 14px 0; }
.hx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hx-kpi { position: relative; height: 54px; padding: 8px 10px; border-radius: 10px; background: #f6f8fd; border: 1px solid #e6ecf7; }
.hx-kpi small { display: block; font-size: 9.5px; font-weight: 700; color: var(--gray-500); }
.hx-kpi b { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.2; white-space: nowrap; }
.hx-kpi b em { font-style: normal; font-family: var(--font); font-size: 10px; font-weight: 700; color: var(--gray-500); margin-left: 1px; }
.hx-kpi[data-kpi="sales"] b { color: var(--primary); }
.hx-delta { position: absolute; top: 7px; right: 8px; font-style: normal; font-family: var(--font-num); font-size: 10px; font-weight: 800; color: var(--primary); background: var(--blue-100); border-radius: 999px; padding: 1px 6px; opacity: 0; }
.hx-kpi.bump { animation: hx-kpi 1.1s var(--ease); }
.hx-kpi.bump .hx-delta { animation: hx-delta 1.8s var(--ease) both; }
.hx-dash.is-sum .hx-kpi { animation: hx-kpi 1.1s var(--ease); }
.hx-dash.is-sum .hx-kpi:nth-child(2) { animation-delay: 0.12s; }
.hx-dash.is-sum .hx-kpi:nth-child(3) { animation-delay: 0.24s; }
.hx-feed-panel { width: 218px; height: 126px; margin: 8px 0 0 50px; overflow: hidden; }
.hx-panel-h { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--gray-700); margin: 0 2px 6px; }
.hx-panel-h small { margin-left: auto; font-size: 9px; font-weight: 800; color: var(--primary); }
.hx-feed { list-style: none; will-change: transform; transition: transform 0.55s var(--ease); }
.hx-row { display: flex; align-items: center; gap: 7px; height: 30px; margin-bottom: 4px; padding: 0 7px; border-radius: 8px; background: #f8fafd; }
.hx-row:first-child { animation: hx-row 1.6s ease-out; }
.hx-row-ico { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: var(--blue-100); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.hx-row.ok .hx-row-ico { background: #dff5ec; color: var(--success-deep); }
.hx-row-ico svg.ico { width: 11px; height: 11px; stroke-width: 2.2; }
.hx-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hx-row-txt b { font-size: 10px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-row-txt small { font-size: 8.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 기록 출처: 앱 · 키오스크 — 같은 목록에 함께 쌓임 */
.hx-src { flex-shrink: 0; height: 17px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; font-style: normal; font-size: 9px; font-weight: 800; background: var(--blue-50); color: var(--primary); box-shadow: inset 0 0 0 1px var(--blue-200); }
.hx-src.k { background: #1f2838; color: #fff; box-shadow: none; }
.hx-src.f { background: #e7f8f1; color: var(--success-deep); box-shadow: none; }
.hx-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(53, 104, 224, 0.1) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(53, 104, 224, 0.1) 52%, transparent 65%); transform: translateX(-110%); }
.hx-dash.is-sum .hx-sweep { animation: hx-sweep 1.3s var(--ease); }
.hx-glare { position: absolute; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); translate: 210px 40px; opacity: 0; transition: opacity 0.4s; }
.hx.is-tilting .hx-glare { opacity: 1; }

/* 두 창구 이름표 */
.hx-tag {
  position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--blue-100);
  box-shadow: 0 12px 26px -16px rgba(22, 56, 139, 0.6); white-space: nowrap; line-height: 1.25;
  animation: hx-pop 0.8s var(--ease) 0.9s backwards; transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hx-tag > span:last-child { display: flex; flex-direction: column; }
.hx-tag b { font-size: 12px; font-weight: 800; color: var(--ink); }
.hx-tag small { font-size: 9.5px; font-weight: 700; color: var(--gray-500); }
.hx-tag-ico { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.hx-tag-ico svg.ico { width: 15px; height: 15px; stroke-width: 2; }
.hx-tag.t-phone { left: 2px; top: 74px; }
.hx-tag.t-kio { right: 0; top: 78px; animation-delay: 1s; }
.hx-tag.t-kio .hx-tag-ico { background: #1f2838; color: #fff; }
.hx-tag.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.14), 0 12px 26px -16px rgba(22, 56, 139, 0.6); }

/* 입주민 앱 (앞 · 왼쪽) */
.hx-phone { position: absolute; left: 0; top: 118px; width: 292px; z-index: 5; transform-origin: 0 0; scale: 0.76; animation: hx-rise 1s var(--ease) 0.4s backwards; transition: opacity 0.3s; }
.hx-phone .phone { box-shadow: 0 60px 90px -34px rgba(17, 25, 39, 0.5), 0 18px 30px -18px rgba(22, 56, 139, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.hx-island {
  position: absolute; top: 18px; left: 50%; z-index: 6; width: 84px; height: 22px; translate: -50% 0;
  display: flex; align-items: center; gap: 7px; padding: 0 12px 0 5px; overflow: hidden; pointer-events: none;
  border-radius: 999px; background: #0b111d; color: #fff;
  transition: width 0.6s var(--ease), height 0.6s var(--ease), box-shadow 0.6s;
}
.hx-island.on { width: 262px; height: 34px; box-shadow: 0 14px 26px -12px rgba(11, 17, 29, 0.6); }
.hx-island > * { opacity: 0; transition: opacity 0.15s; }
.hx-island.on > * { opacity: 1; transition: opacity 0.3s 0.25s; }
.hx-island-ico { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: var(--primary); display: flex; align-items: center; justify-content: center; }
.hx-island-ico.ok { background: var(--success); }
.hx-island-ico.k { background: #fff; color: #1f2838; }
.hx-island-ico svg.ico { width: 13px; height: 13px; stroke-width: 2.4; }
.hx-island-txt { min-width: 0; display: flex; align-items: baseline; gap: 6px; line-height: 1.2; white-space: nowrap; }
.hx-island-txt b { flex-shrink: 0; font-size: 12.5px; font-weight: 800; }
.hx-island-txt small { min-width: 0; font-size: 11px; font-weight: 600; color: #a9b8d6; overflow: hidden; text-overflow: ellipsis; }

/* 키오스크 (앞 · 오른쪽) — 폰과 같은 높이 · 같은 급 */
.hx-kio { position: absolute; left: 447px; top: 122px; width: 213px; z-index: 5; --kz: 0.7; animation: hx-rise 1s var(--ease) 0.5s backwards; transition: opacity 0.3s; }
.hx-kio .kiosk { margin: 0; }

/* 같은 이용권 (가운데) — 두 창구의 선이 꽂히는 이용권 한 장 */
.hx-pass {
  position: absolute; left: 255px; top: 266px; width: 160px; height: 80px; z-index: 4;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: stretch;
  border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #5486f4 0%, #3568e0 46%, #2453c9 100%);
  box-shadow: 0 22px 40px -20px rgba(37, 87, 209, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  animation: hx-pop 0.8s var(--ease) 0.75s backwards; transition: box-shadow 0.3s, opacity 0.3s;
}
.hx-pass-stub { position: relative; display: flex; align-items: center; justify-content: center; border-right: 1.5px dashed rgba(255, 255, 255, 0.45); }
.hx-pass-stub::before, .hx-pass-stub::after { content: ''; position: absolute; right: -6px; width: 11px; height: 11px; border-radius: 50%; background: #edf3ff; }
.hx-pass-stub::before { top: -6px; }
.hx-pass-stub::after { bottom: -6px; }
.hx-pass-stub svg.ico { width: 16px; height: 16px; stroke-width: 2.2; }
.hx-pass-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 10px 8px 9px; }
.hx-pass-body > small { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); }
.hx-pass-name { font-size: 12.5px; line-height: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-pass-src { display: flex; gap: 4px; margin-top: 1px; }
.hx-pass-src i { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 8.5px; font-weight: 800; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.16); transition: background 0.3s, color 0.3s; }
.hx-pass-src i svg.ico { width: 9px; height: 9px; stroke-width: 2.4; }
.hx-pass[data-src="app"] .hx-pass-src i[data-src="app"] { background: #fff; color: var(--primary); }
.hx-pass[data-src="kiosk"] .hx-pass-src i[data-src="kiosk"] { background: #0b111d; color: #fff; }
.hx-pass.is-hit { animation: hx-hit 0.9s var(--ease); }

/* 이용 현장 (가운데 아래) */
.hx-field { position: absolute; left: 226px; top: 362px; width: 218px; height: 226px; z-index: 2; }
.hx-field-h { position: absolute; left: 50%; top: 2px; translate: -50% 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--gray-500); white-space: nowrap; }
.hx-devs { position: absolute; left: 0; top: 22px; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hx-dev {
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 204px; padding: 9px; overflow: hidden;
  border-radius: 15px; background: #fff; border: 1px solid #e0e8f7;
  box-shadow: 0 26px 46px -28px rgba(22, 56, 139, 0.5), 0 1px 3px rgba(17, 25, 39, 0.05);
  animation: hx-pop 0.8s var(--ease) backwards;
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
}
.hx-dev[data-dev="gate"] { animation-delay: 0.8s; }
.hx-dev[data-dev="bay"] { animation-delay: 0.9s; }
.hx-dev-h { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: var(--gray-700); white-space: nowrap; }
.hx-dev-ico { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.hx-dev-ico svg.ico { width: 12px; height: 12px; }
.hx-dev-st { margin-top: auto; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-dev-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--gray-300); transition: background 0.3s; }
.hx-dev.is-act { border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.12), 0 26px 46px -28px rgba(22, 56, 139, 0.55); }
.hx-dev.is-act .hx-dev-st { color: var(--primary); }
.hx-dev.is-act .hx-dev-st::before { background: var(--primary); }
.hx-dev.is-ok { border-color: #a7e3cb; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12), 0 26px 46px -28px rgba(22, 56, 139, 0.55); }
.hx-dev.is-ok .hx-dev-st { color: var(--success-deep); }
.hx-dev.is-ok .hx-dev-st::before { background: var(--success); }

.hx-gate, .hx-bay { position: relative; height: 128px; margin: 9px 0 8px; border-radius: 10px; overflow: hidden; }
/* 게이트 */
.hx-gate { background: linear-gradient(180deg, #f4f7fd, #e5ecf8); }
.hx-gate-scan { position: absolute; left: 50%; top: 12px; width: 34px; height: 34px; margin-left: -17px; border-radius: 10px; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 10px -4px rgba(22, 56, 139, 0.35); transition: color 0.3s; }
.hx-gate-scan svg.ico { width: 19px; height: 19px; }
.hx-gate-scan::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 6px rgba(53, 104, 224, 0.8); opacity: 0; }
.hx-dev[data-dev="gate"][data-state="scan"] .hx-gate-scan::after { opacity: 1; animation: hx-scan 0.9s ease-in-out infinite; }
.hx-dev[data-dev="gate"][data-state="open"] .hx-gate-scan { color: var(--success-deep); }
.hx-gate-post { position: absolute; bottom: 16px; width: 13px; height: 58px; border-radius: 5px 5px 3px 3px; background: linear-gradient(90deg, #c4cfe6, #dde5f3); }
.hx-gate-post.l { left: 10px; }
.hx-gate-post.r { right: 10px; }
.hx-gate-post::before { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 3px; border-radius: 2px; background: var(--gray-300); transition: background 0.25s, box-shadow 0.25s; }
.hx-dev[data-dev="gate"][data-state="scan"] .hx-gate-post::before { background: var(--primary); }
.hx-dev[data-dev="gate"][data-state="open"] .hx-gate-post::before { background: var(--success); box-shadow: 0 0 8px rgba(16, 185, 129, 0.85); }
.hx-gate-flap { position: absolute; bottom: 32px; width: 18px; height: 28px; background: linear-gradient(180deg, rgba(122, 160, 255, 0.6), rgba(53, 104, 224, 0.32)); border: 1px solid rgba(53, 104, 224, 0.45); transition: transform 0.5s var(--ease); }
.hx-gate-flap.l { left: 23px; transform-origin: left center; border-radius: 2px 6px 6px 2px; }
.hx-gate-flap.r { right: 23px; transform-origin: right center; border-radius: 6px 2px 2px 6px; }
.hx-dev[data-dev="gate"][data-state="open"] .hx-gate-flap { transform: scaleX(0.12); }
.hx-gate-floor { position: absolute; left: 8px; right: 8px; bottom: 10px; height: 4px; border-radius: 2px; background: #d2dbec; }
/* 골프 타석 */
.hx-bay { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #111c31; transition: background 0.45s; }
.hx-bay::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, rgba(52, 211, 153, 0), rgba(52, 211, 153, 0.4)); opacity: 0; transition: opacity 0.45s; }
.hx-bay-no { position: relative; z-index: 1; font-size: 34px; font-weight: 800; line-height: 1; color: #3a4a66; transition: color 0.35s, text-shadow 0.35s; }
.hx-bay-pw { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #7c8aa5; font-size: 10px; font-weight: 800; transition: background 0.35s, color 0.35s; }
.hx-bay-pw em { font-style: normal; font-family: var(--font-num); }
.hx-bay-pw svg.ico { width: 11px; height: 11px; stroke-width: 2.2; }
.hx-dev[data-dev="bay"][data-state="rsv"] .hx-bay-no { color: #8fa9e0; }
.hx-dev[data-dev="bay"][data-state="rsv"] .hx-bay-pw { background: rgba(53, 104, 224, 0.3); color: #c3d4ff; }
.hx-dev[data-dev="bay"][data-state="on"] .hx-bay { background: linear-gradient(180deg, #0f2a2e, #0a3a2c); }
.hx-dev[data-dev="bay"][data-state="on"] .hx-bay::after { opacity: 1; }
.hx-dev[data-dev="bay"][data-state="on"] .hx-bay-no { color: #fff; text-shadow: 0 0 18px rgba(52, 211, 153, 0.75); }
.hx-dev[data-dev="bay"][data-state="on"] .hx-bay-pw { background: #34d399; color: #053b2a; }

/* 데이터 흐름 */
.hx-net { position: absolute; left: 0; top: 0; width: 660px; height: 600px; z-index: 3; overflow: visible; pointer-events: none; }
.hx-rails { animation: hx-fade 0.8s ease 1s backwards; }
.hx-rails path { fill: none; stroke: #9fb8f0; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.hx-lives path { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity 0.6s; }
.hx-lives path.on { opacity: 1; transition: opacity 0.1s; }
.hx-ports { animation: hx-fade 0.6s ease 1.2s backwards; }
.hx-ports circle { fill: #fff; stroke: var(--primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.hx-ports circle.ping { animation: hx-port 0.8s var(--ease); }
.hx-pk { opacity: 0; transition: opacity 0.25s; }
.hx-pk.on { opacity: 1; transition: none; }
.hx-pk .h { fill: #fff; stroke: var(--primary); stroke-width: 3; }
.hx-pk .t1 { fill: rgba(53, 104, 224, 0.5); }
.hx-pk .t2 { fill: rgba(53, 104, 224, 0.25); }
.hx-merge { display: none; }

/* 기능 바로가기 · 설명 단어에 마우스를 올리면 해당 무대 요소 강조 */
.hx-canvas[data-focus] .hx-dash, .hx-canvas[data-focus] .hx-phone, .hx-canvas[data-focus] .hx-kio, .hx-canvas[data-focus] .hx-dev, .hx-canvas[data-focus] .hx-pass, .hx-canvas[data-focus] .hx-tag { opacity: 0.4; }
.hx-canvas[data-focus="dash"] .hx-dash, .hx-canvas[data-focus="phone"] .hx-phone, .hx-canvas[data-focus="phone"] .hx-tag.t-phone,
.hx-canvas[data-focus="kiosk"] .hx-kio, .hx-canvas[data-focus="kiosk"] .hx-tag.t-kio,
.hx-canvas[data-focus="gate"] .hx-dev[data-dev="gate"], .hx-canvas[data-focus="bay"] .hx-dev[data-dev="bay"] { opacity: 1; }
.hx-canvas[data-focus="dash"] .hx-dash { box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.18), 0 44px 80px -40px rgba(22, 56, 139, 0.5); }
.hx-canvas[data-focus="gate"] .hx-dev[data-dev="gate"], .hx-canvas[data-focus="bay"] .hx-dev[data-dev="bay"] { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.18), 0 26px 46px -28px rgba(22, 56, 139, 0.55); }

/* ---------- 흐름 단계 컨트롤 ---------- */
.hx-under { position: relative; z-index: 5; width: calc(660px * var(--hx-s)); margin-right: calc(var(--hx-bleed) * -1); margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hx:not(.hx-js) .hx-under { visibility: hidden; }
.hx-story { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--blue-100); box-shadow: 0 16px 36px -22px rgba(22, 56, 139, 0.5); }
.hx-play { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.hx-play:hover { background: var(--primary); }
.hx-play span { display: flex; }
.hx-play svg.ico { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.hx-play .i-play, .hx-play[data-state="paused"] .i-pause { display: none; }
.hx-play[data-state="paused"] .i-play { display: flex; }
.hx-steps { display: flex; gap: 2px; list-style: none; }
.hx-step { position: relative; height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.hx-step .num { font-size: 12px; font-weight: 700; color: var(--gray-500); transition: color 0.2s; }
.hx-step:hover { color: var(--ink); }
.hx-step[aria-current="step"] { background: var(--blue-50); color: var(--primary); }
.hx-step[aria-current="step"] .num, .hx-step.done .num { color: var(--primary); }
.hx-step-bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(53, 104, 224, 0.15); opacity: 0; transition: opacity 0.2s; }
.hx-step-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.hx-step[aria-current="step"] .hx-step-bar { opacity: 1; }
.hx-cap { min-height: 22px; font-size: 14.5px; font-weight: 600; color: var(--gray-600); text-align: center; transition: opacity 0.18s, transform 0.18s; }
.hx-cap.swap { opacity: 0; transform: translateY(4px); }

/* 스크롤 안내 */
.hx-scroll { position: absolute; left: 50%; bottom: 20px; z-index: 3; width: 24px; height: 38px; margin-left: -12px; border-radius: 14px; border: 2px solid var(--blue-300); }
.hx-scroll span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--primary); animation: hx-wheel 1.8s var(--ease) infinite; }

/* 화면 밖 · 탭 숨김: 무한 애니메이션 정지 */
.hx.is-off *, .hx.is-off *::before, .hx.is-off *::after { animation-play-state: paused !important; }

/* ---------- 키프레임 ---------- */
@keyframes hx-line { from { transform: translateY(110%); } }
@keyframes hx-mark { from { transform: scaleX(0); } }
@keyframes hx-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes hx-rise-far { from { opacity: 0; transform: translateY(46px) scale(0.96); } }
@keyframes hx-pop { from { opacity: 0; transform: translateY(24px) scale(0.92); } }
@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes hx-dot { 0% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.45); } 100% { box-shadow: 0 0 0 7px rgba(53, 104, 224, 0); } }
@keyframes hx-dot-g { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 100% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }
@keyframes hx-port { 0% { transform: scale(1); } 35% { transform: scale(2.1); } 100% { transform: scale(1); } }
@keyframes hx-kpi { 0% { border-color: var(--primary); box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.35); } 100% { border-color: #e6ecf7; box-shadow: 0 0 0 9px rgba(53, 104, 224, 0); } }
@keyframes hx-hit { 0% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.5), 0 22px 40px -20px rgba(37, 87, 209, 0.8); transform: scale(1); } 30% { transform: scale(1.06); } 100% { box-shadow: 0 0 0 14px rgba(53, 104, 224, 0), 0 22px 40px -20px rgba(37, 87, 209, 0.8); transform: scale(1); } }
@keyframes hx-delta { 0% { opacity: 0; transform: translateY(5px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hx-row { from { background: var(--blue-100); } to { background: #f8fafd; } }
@keyframes hx-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes hx-sumtag { 0% { opacity: 0; transform: translateY(4px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hx-scan { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }
@keyframes hx-shine { 0%, 76% { transform: skewX(-18deg) translateX(-140%); } 100% { transform: skewX(-18deg) translateX(620%); } }
@keyframes hx-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-flow { to { stroke-dashoffset: -16; } }

/* ---------- 반응형 ---------- */
@media (min-width: 1024px) {
  .hx-canvas { will-change: transform; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero.hx { padding: 24px 0 28px; }
  .hero.hx .hx-title { margin: 16px 0 14px; font-size: clamp(40px, 3.6vw, 50px); }
  .hero.hx .hero-sub { font-size: 17.5px; line-height: 1.7; }
  .hero.hx .hero-ctas { margin-top: 26px; }
  .hero.hx .hero-kw { margin-top: 24px; }
  .hx-under { margin-top: 10px; gap: 6px; }
  .hx-scroll { display: none; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .hero.hx .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .hero.hx .hx-step { padding: 0 9px; font-size: 13.5px; }
  .hero.hx .hx-step-bar { left: 9px; right: 9px; }
  .hx-step .sm-x { display: none; }
}
@media (max-width: 1023px) {
  .hero.hx { min-height: 0; padding: 48px 0 56px; }
  .hero.hx .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero.hx .hx-title { font-size: 44px; }
  .hx-visual { align-items: center; }
  .hx-fit, .hx-under { margin-right: 0; }
  .hx-scroll { display: none; }
  .hx-dots { -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 70%, #000 18%, transparent 74%); mask-image: radial-gradient(ellipse 80% 50% at 50% 70%, #000 18%, transparent 74%); }
  /* 무대(앱 · 키오스크)가 화면에 있는 동안 플로팅 버튼이 키오스크 · 앱 버튼을 가리지 않도록 잠시 숨김 (hero.js가 body.hx-on 토글) */
  .floating { transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s; }
  body.hx-on .floating { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s 0.25s; }
}
@media (max-width: 767px) {
  .hero.hx { padding: 40px 0 48px; }
  .hero.hx .hero-inner { gap: 32px; }
  .hero.hx .hx-title { font-size: 34px; margin: 18px 0 16px; }
  .hx-aura.a3, .hx-floor { display: none; }
  /* 모바일: 고정 무대 대신 세로 흐름 — [앱 | 키오스크] 나란히 → 같은 이용권 → 대시보드 요약 → 이용 현장 */
  .hero.hx { --ps: 0.55; --kzm: 0.5; }
  .hx-fit { width: 100%; height: auto; }
  .hx-scaler { position: static; width: auto; height: auto; scale: none; }
  .hx-canvas {
    position: relative; inset: auto;
    display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 12px;
    grid-template-areas: "tp tk" "ph ki" "mg mg" "ps ps" "da da" "fi fi";
  }
  .hx-tag { position: relative; left: auto; right: auto; top: auto; justify-self: center; margin-bottom: 10px; padding: 5px 10px 5px 5px; }
  .hx-tag.t-phone, .hx-tag.t-kio { left: auto; right: auto; top: auto; }
  .hx-tag.t-phone { grid-area: tp; }
  .hx-tag.t-kio { grid-area: tk; }
  .hx-tag b { font-size: 12.5px; }
  .hx-tag small { font-size: 10px; }
  .hx-phone { grid-area: ph; position: relative; left: auto; top: auto; align-self: end; width: calc(292px * var(--ps)); height: calc(616px * var(--ps)); scale: none; }
  .hx-phone > [data-demo="hero"] { width: 292px; transform: scale(var(--ps)); transform-origin: 0 0; }
  .hx-island { top: calc(18px * var(--ps)); scale: var(--ps); transform-origin: 50% 0; }
  .hx-kio { grid-area: ki; position: relative; left: auto; top: auto; align-self: end; width: auto; --kz: var(--kzm); }
  .hx-net, .hx-glare, .hx-gate, .hx-bay, .hx-field-h { display: none; }
  .hx-merge { display: block; grid-area: mg; width: 100%; height: 34px; overflow: visible; }
  .hx-merge path { fill: none; stroke: #9fb8f0; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: hx-flow 1.2s linear infinite; }
  .hx-pass { grid-area: ps; position: relative; left: auto; top: auto; justify-self: center; width: 220px; height: 84px; }
  .hx-pass-stub::before, .hx-pass-stub::after { background: #edf3ff; }
  .hx-pass-name { font-size: 13.5px; }
  .hx-pass-src i { height: 18px; font-size: 9.5px; }
  .hx-dash { grid-area: da; position: relative; left: auto; top: auto; width: 100%; max-width: 360px; height: auto; justify-self: center; margin-top: 12px; border-radius: 16px; }
  .hx-win-bar { padding-left: 14px; }
  .hx-win-bar > b { font-size: 12px; }
  .hx-dash-body { padding: 10px; }
  .hx-kpi { height: auto; padding: 8px 9px; }
  .hx-kpi b { font-size: 15px; }
  .hx-feed-panel { width: auto; height: auto; margin: 10px 0 0; }
  .hx-feed .hx-row:nth-child(n+2) { display: none; }
  .hx-row { margin-bottom: 0; }
  .hx-field { grid-area: fi; position: relative; left: auto; top: auto; width: 100%; max-width: 360px; height: auto; justify-self: center; margin-top: 8px; }
  .hx-devs { position: relative; top: auto; }
  .hx-dev { height: auto; padding: 10px; border-radius: 14px; }
  .hx-dev-h { font-size: 11.5px; }
  .hx-dev-st { margin-top: 8px; font-size: 11px; }
  .hx-under { width: 100%; margin-top: 16px; }
  .hx-step { padding: 0 10px; font-size: 13px; }
  .hx-step .num { display: none; }
  .hx-step-bar { left: 10px; right: 10px; }
  .hx-cap { font-size: 14px; min-height: 42px; padding: 0 8px; }
}
@media (max-width: 400px) {
  .hero.hx { --ps: 0.5; --kzm: 0.455; }
  .hero.hx .hx-title { font-size: 30px; }
  .hx-tag { padding: 4px 8px 4px 4px; gap: 5px; }
  .hx-tag-ico { width: 22px; height: 22px; }
  .hx-play { width: 36px; height: 36px; }
  .hx-step { height: 36px; padding: 0 9px; font-size: 13px; }
  .hx-step .sm-x { display: none; }
  .hx-dev-h { font-size: 10.5px; gap: 4px; }
  .hx-dev-ico { width: 20px; height: 20px; }
}
@media (max-width: 374px) {
  /* 아주 좁은 화면: 단계 버튼을 2×2로 */
  .hx-story { border-radius: 24px; padding: 6px; }
  .hx-steps { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 2px; }
  .hx-step { height: 34px; justify-content: center; }
}
@media (max-width: 359px) {
  .hx-tag small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-line > span, .hx-accent::after, .hx-in, .hx-dash, .hx-phone, .hx-kio, .hx-dev, .hx-pass, .hx-tag, .hx-rails, .hx-ports { animation: none !important; }
  .hx-aura.a3, .hx-badge .dot, .hx-live > span, .hx-scroll span, .hx-merge path { animation: none !important; }
  .hx-canvas, .hx-copy { transform: none !important; translate: none !important; }
  .hx-feed { transition: none; }
  .hx-cta::after { animation: none !important; display: none; }
  .hx-gate-scan::after, .hx-ports circle.ping, .hx-pass.is-hit { animation: none !important; }
  .hx-spot { display: none; }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .hx-spot { display: none; }
}
@media (min-width: 1024px) {
  /* 우측 하단 플로팅 '도입 문의' 버튼과 겹치지 않도록 단계 컨트롤을 무대 왼쪽에 맞추고 짧게 (PC 전 폭) */
  .hx-under { align-items: flex-start; }
  .hx-cap { text-align: left; padding-left: 8px; }
  .hx-step { padding: 0 11px; }
  .hx-step .num { display: none; }
  .hx-step-bar { left: 11px; right: 11px; }
}

/* =========================================================
   2026-10-07 — 도입 안내: PROCESS 여정 로드맵 · APPROACH 직접 만져 보는 도입 방식
   (jr- : 여정 로드맵 / ap- : 도입 방식)
   ========================================================= */

/* ---------- PROCESS: 여정 로드맵 ---------- */
.jr-section { overflow: hidden; }
.jr-section::before {
  content: ''; position: absolute; left: 50%; top: 210px; width: 1100px; height: 640px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(53, 104, 224, 0.07), rgba(53, 104, 224, 0) 70%); pointer-events: none;
}
.jr-section .sec-head { margin-bottom: 40px; }
.jr {
  --jr-node: 64px; --jr-amp: 28px; --jr-track: 150px;
  --jr-ww: 440; --jr-wh: 340; --jr-z: 1;
  --u: 260ms; --u0: 220ms;
  position: relative;
}

/* 전체 기간: 경로 전체에 한 번만 */
.jr-span { display: flex; align-items: center; gap: 14px; margin: 0 10% 18px; }
.jr-span-line { flex: 1; height: 10px; border: 1.5px solid var(--blue-200); border-bottom: 0; border-radius: 6px 6px 0 0; margin-top: 10px; }
.jr-span-line:first-child { border-right: 0; border-radius: 6px 0 0 0; }
.jr-span-line:last-child { border-left: 0; border-radius: 0 6px 0 0; }
.jr-span-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--blue-100); box-shadow: 0 8px 22px -14px rgba(53, 104, 224, 0.55);
  font-size: 15px; font-weight: 600; color: var(--gray-700); white-space: nowrap;
}
.jr-span-pill svg.ico { width: 18px; height: 18px; color: var(--primary); }
.jr-span-pill b { color: var(--primary); font-weight: 800; }
.jr-span-pill small { font-size: 12.5px; color: var(--gray-400); font-weight: 600; padding-left: 8px; border-left: 1px solid var(--gray-200); }

/* 경로 */
.jr-track { position: relative; height: var(--jr-track); }
.jr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-20px 100% -20px 0); transition: clip-path 1.3s var(--ease); }
.jr.is-on .jr-svg { clip-path: inset(-20px -20px -20px 0); }
.jr-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jr-rail { stroke: #c9d6f0; stroke-width: 3; stroke-dasharray: 0.1 10; }
.jr-ghost { stroke: var(--blue-200); stroke-width: 5; opacity: 0.8; transition: stroke-dashoffset 0.55s var(--ease); }
.jr-glow { stroke: url(#jrGrad); stroke-width: 14; opacity: 0.14; }
.jr-fill { stroke: url(#jrGrad); stroke-width: 4.5; }
.jr-comet {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle, #fff 0 28%, #6f97f0 30% 55%, rgba(53, 104, 224, 0) 72%);
  box-shadow: 0 0 0 6px rgba(53, 104, 224, 0.14), 0 0 22px 6px rgba(53, 104, 224, 0.45);
  opacity: 0; transition: opacity 0.25s; will-change: transform;
}
.jr.is-moving .jr-comet { opacity: 1; }

/* 단계 정거장 */
.jr-nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.jr-node {
  position: absolute; left: 0; top: 0; width: 20%; display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: auto; text-align: center; border-radius: 16px; padding: 0 4px 4px;
  opacity: 0; transform: translateY(14px) scale(0.9);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.jr.is-on .jr-node { opacity: 1; transform: none; }
.jr.is-on .jr-node:nth-child(2) { transition-delay: 0.12s; }
.jr.is-on .jr-node:nth-child(3) { transition-delay: 0.24s; }
.jr.is-on .jr-node:nth-child(4) { transition-delay: 0.36s; }
.jr.is-on .jr-node:nth-child(5) { transition-delay: 0.48s; }
.jr-node:focus-visible { outline-offset: 4px; }
.jr-dot {
  position: relative; width: var(--jr-node); height: var(--jr-node); border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--gray-200); color: var(--gray-400);
  box-shadow: 0 6px 16px -10px rgba(17, 25, 39, 0.3);
  transition: background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.45s var(--ease);
}
.jr-dot svg.ico { width: 40%; height: 40%; stroke-width: 1.9; }
.jr-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; pointer-events: none; }
.jr-ok {
  position: absolute; right: -3px; top: -3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  transform: scale(0); transition: transform 0.4s var(--ease);
}
.jr-ok svg.ico { width: 11px; height: 11px; stroke-width: 3.2; }
.jr-lbl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jr-lbl small { font-family: var(--font-num); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--gray-500); transition: color 0.3s; }
.jr-lbl b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--gray-500); transition: color 0.3s; line-height: 1.35; }
.jr-node:hover .jr-dot { transform: translateY(-3px); border-color: var(--blue-300); color: var(--primary); }
.jr-node:hover .jr-lbl b { color: var(--ink); }
.jr-node.lit .jr-dot { border-color: var(--primary); color: var(--primary); }
.jr-node.lit .jr-ring { animation: jr-burst 0.8s var(--ease); }
.jr-node.done.lit .jr-ok { transform: scale(1); }
.jr-node.active .jr-lbl small { color: var(--primary); }
.jr-node.active .jr-lbl b { color: var(--ink); }
.jr-node.active.lit .jr-dot {
  background: linear-gradient(145deg, #4a7bea, #2557d1); border-color: transparent; color: #fff;
  box-shadow: 0 0 0 8px rgba(53, 104, 224, 0.13), 0 16px 30px -12px rgba(37, 87, 209, 0.75); transform: scale(1.08);
}
.jr-node.active.lit .jr-dot::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(53, 104, 224, 0.35);
  animation: jr-halo 2.4s ease-out infinite;
}
@keyframes jr-burst { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes jr-halo { 0% { opacity: 0.9; transform: scale(0.92); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

/* 단계 무대 */
.jr-stage {
  position: relative; margin-top: 28px; display: grid; touch-action: pan-y;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(22, 56, 139, 0.35);
}
.jr-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); min-width: 0;
  visibility: hidden; opacity: 0; transform: translate3d(var(--jr-out, -36px), 0, 0); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.6s var(--ease), visibility 0s linear 0.4s;
}
.jr-panel.is-active {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.5s ease 0.08s, transform 0.7s var(--ease) 0.04s, visibility 0s;
}
.jr-copy { position: relative; display: flex; flex-direction: column; padding: 36px 34px 32px 44px; min-width: 0; }
.jr-no {
  position: absolute; right: 26px; top: 14px; font-family: var(--font-num); font-weight: 800; font-size: 120px; line-height: 1;
  letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--blue-100); pointer-events: none;
}
.jr-copy .sp-no { position: relative; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 0.08em; }
.jr-copy .sp-no i { font-style: normal; color: var(--gray-300); }
.jr-copy h3 { position: relative; margin-top: 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.3; }
.jr-copy h3:focus { outline: none; }
.jr-copy > p { margin-top: 8px; font-size: 16px; color: var(--gray-600); line-height: 1.7; }
.jr-checks { margin-top: 16px; gap: 9px; }
.jr-checks li { font-size: 15px; }
.jr-decide { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--blue-50); border: 1px solid var(--blue-100); }
.jr-decide .sp-label { font-size: 12.5px; font-weight: 800; color: var(--primary); letter-spacing: 0.06em; }
.jr-decide .sp-big { margin-top: 4px; font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.jr-decide .sp-note { margin-top: 4px; font-size: 14.5px; color: var(--gray-600); line-height: 1.65; }
.jr-copy .sp-nav { margin-top: auto; padding-top: 20px; display: flex; gap: 8px; }
.jr-copy .sp-nav .btn { flex: 1; }

/* 무대 등장 연출: 문구 */
.jr-panel.is-play .jr-copy h3, .jr-panel.is-play .jr-copy > p, .jr-panel.is-play .jr-checks li, .jr-panel.is-play .jr-decide {
  animation: jr-rise 0.6s var(--ease) both;
}
.jr-panel.is-play .jr-copy > p { animation-delay: 0.08s; }
.jr-panel.is-play .jr-checks li:nth-child(1) { animation-delay: 0.16s; }
.jr-panel.is-play .jr-checks li:nth-child(2) { animation-delay: 0.22s; }
.jr-panel.is-play .jr-checks li:nth-child(3) { animation-delay: 0.28s; }
.jr-panel.is-play .jr-decide { animation-delay: 0.34s; }
.jr-panel.is-play .jr-checks .ck { animation: jr-tick 0.5s var(--ease) both; }
.jr-panel.is-play .jr-checks li:nth-child(1) .ck { animation-delay: 0.32s; }
.jr-panel.is-play .jr-checks li:nth-child(2) .ck { animation-delay: 0.4s; }
.jr-panel.is-play .jr-checks li:nth-child(3) .ck { animation-delay: 0.48s; }
@keyframes jr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes jr-tick { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* 장면 영역 */
.jr-scene {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 412px; padding: 26px; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%233568e0' fill-opacity='.18'/%3E%3C/svg%3E") 0 0 / 18px 18px,
    radial-gradient(120% 90% at 85% 10%, #dfe9ff 0%, rgba(223, 233, 255, 0) 60%),
    linear-gradient(160deg, #f4f7ff 0%, #e8f0ff 100%);
  border-left: 1px solid var(--blue-100);
}
.jr-win {
  position: relative; width: calc(var(--jr-ww) * 1px); height: calc(var(--jr-wh) * 1px); zoom: var(--jr-z);
  background: #fff; border-radius: 18px; border: 1px solid #e3e9f5; overflow: hidden;
  box-shadow: 0 2px 4px rgba(17, 25, 39, 0.04), 0 34px 60px -30px rgba(22, 56, 139, 0.45);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  font-size: 12.5px; color: var(--gray-700); text-align: left;
}
.jr-win svg.ico { width: 14px; height: 14px; }
.jr-win-bar { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid #edf0f6; }
.jr-win-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.jr-win-bar b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.jr-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.jr-chip.blue { background: var(--blue-50); color: var(--primary); }
.jr-chip.ok { background: #e7f8f1; color: var(--success-deep); }
.jr-win-body { height: calc(100% - 44px); padding: 14px; overflow: hidden; position: relative; }

/* 장면 연출 공통 (기본 상태 = 최종 상태, is-play일 때만 처음부터 재생) */
.jr-panel.is-play .a-pop { animation: jr-pop 0.55s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
.jr-panel.is-play .a-slide { animation: jr-slide 0.55s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
.jr-panel.is-play .a-drop { animation: jr-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
.jr-panel.is-play .a-stamp { animation: jr-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
.jr-panel.is-play .a-draw { animation: jr-draw 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
@keyframes jr-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes jr-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes jr-drop { from { opacity: 0; transform: translate(-50%, -190%); } to { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes jr-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.7); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes jr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 화면 밖 · 시작 전에는 멈춤 */
.jr:not(.is-on) .jr-panel *, .jr:not(.is-on) .jr-panel *::before, .jr:not(.is-on) .jr-panel *::after,
.jr.is-off .jr-panel *, .jr.is-off .jr-panel *::before, .jr.is-off .jr-panel *::after,
.jr.is-off .jr-node *, .jr.is-off .jr-node *::after { animation-play-state: paused !important; }

/* 장면 1: 상담 대화 */
.jr-talk { display: flex; flex-direction: column; gap: 8px; }
.jr-msg { display: flex; align-items: flex-end; gap: 7px; }
.jr-msg p { max-width: 76%; padding: 8px 11px; line-height: 1.5; border-radius: 14px; }
.jr-msg.in p { background: #f1f4f9; color: var(--gray-800); border-bottom-left-radius: 4px; }
.jr-msg.out { justify-content: flex-end; }
.jr-msg.out p { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.jr-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(145deg, #4a7bea, #2557d1); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jr-av svg.ico { width: 12px; height: 12px; }
.jr-plan { margin-top: 4px; border: 1px solid var(--blue-100); border-radius: 14px; padding: 10px 12px; background: linear-gradient(180deg, #f7faff, #fff); }
.jr-plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.jr-plan-head b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.jr-plan-head span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--primary); }
.jr-plan-head span svg.ico { width: 12px; height: 12px; }
.jr-plan ol { display: flex; flex-direction: column; gap: 5px; }
.jr-plan li { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; border-radius: 8px; background: #fff; border: 1px solid #edf1f8; font-weight: 700; color: var(--gray-700); }
.jr-plan li svg.ico { color: var(--primary); width: 13px; height: 13px; }
.jr-plan .n { width: 17px; height: 17px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-num); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* 장면 2: 현장 실사 도면 */
.jr-survey { display: flex; flex-direction: column; gap: 10px; }
.jr-blue { position: relative; flex: 1; border-radius: 12px; background: #f5f8ff; border: 1px solid #e1e9fa; overflow: hidden; }
.jr-floor { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); overflow: visible; }
.fl-grid path { stroke: #e3eafa; stroke-width: 0.7; fill: none; }
.fl-wall rect { fill: rgba(255, 255, 255, 0.75); stroke: #8fa9e2; stroke-width: 2.2; }
.fl-wall path { fill: none; stroke: #8fa9e2; stroke-width: 2.2; stroke-linecap: round; }
.fl-wall .fl-door { stroke: #f5f8ff; stroke-width: 5; }
.fl-route { fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.fl-route.r2 { stroke: #6f97f0; }
.fl-txt text { font-family: var(--font); font-size: 11px; font-weight: 700; fill: #6a84c0; }
.jr-pin { position: absolute; z-index: 2; display: flex; align-items: center; transform: translate(-50%, -100%); }
.jr-pin > svg.ico {
  box-sizing: content-box; width: 13px; height: 13px; padding: 6px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--primary); color: #fff; box-shadow: 0 6px 14px -6px rgba(37, 87, 209, 0.8);
}
.jr-pin > svg.ico use { transform: rotate(45deg); transform-origin: 12px 12px; }
.jr-pin em {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ink); background: #fff; padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(17, 25, 39, 0.22);
}
.jr-pin.l em { left: auto; right: calc(100% + 6px); }
.jr-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; position: relative; padding-right: 76px; }
.jr-scope > b { font-size: 11.5px; font-weight: 800; color: var(--gray-500); margin-right: 2px; }
.jr-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--blue-50); color: var(--primary); font-size: 11px; font-weight: 800; }
.jr-tag svg.ico { width: 12px; height: 12px; }
.jr-stamp {
  position: absolute; right: 2px; top: 50%; margin-top: -17px; height: 34px; padding: 0 10px; display: flex; align-items: center;
  border: 2px solid var(--primary); border-radius: 8px; color: var(--primary); font-size: 12px; font-weight: 900; letter-spacing: 0.04em;
  transform: rotate(-8deg); background: rgba(255, 255, 255, 0.9);
}

/* 장면 3: 관리자 셋업 */
.jr-admin { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.jr-adm-side { position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 10px; border-right: 1px solid #eef1f6; }
.jr-adm-side::before {
  content: ''; position: absolute; left: 0; right: 10px; top: 0; height: 30px; border-radius: 8px; background: var(--blue-50);
  box-shadow: inset 2px 0 0 var(--primary); transform: translateY(102px);
}
.jr-panel.is-play .jr-adm-side::before { animation: jr-side calc(var(--u) * 5.6) linear both; animation-delay: calc(var(--u0) + var(--u) * 0.3); }
@keyframes jr-side {
  0%, 26% { transform: translateY(0); } 30%, 56% { transform: translateY(34px); }
  60%, 88% { transform: translateY(68px); } 92%, 100% { transform: translateY(102px); }
}
.jr-adm-side li { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; font-size: 11.5px; font-weight: 700; color: var(--gray-600); white-space: nowrap; }
.jr-adm-side li svg.ico { width: 13px; height: 13px; color: var(--gray-400); }
.jr-adm-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jr-adm-blk { border: 1px solid #e8ecf3; border-radius: 10px; padding: 8px 10px; }
.jr-adm-blk .k { display: block; font-size: 10.5px; font-weight: 800; color: var(--gray-500); margin-bottom: 6px; }
.jr-hours { display: flex; gap: 6px; }
.jr-hours span { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; border-radius: 7px; background: #f6f8fc; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.jr-sw { position: relative; width: 24px; height: 14px; border-radius: 999px; background: var(--primary); flex-shrink: 0; }
.jr-sw::after { content: ''; position: absolute; top: 2px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.jr-panel.is-play .a-sw { animation: jr-sw 0.35s ease both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
.jr-panel.is-play .a-sw::after { animation: jr-knob 0.35s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
@keyframes jr-sw { from { background: #d2d6db; } to { background: var(--primary); } }
@keyframes jr-knob { from { transform: translateX(-10px); } to { transform: none; } }
.jr-passes { display: flex; flex-wrap: wrap; gap: 5px; }
.jr-passes i { font-style: normal; height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--blue-50); color: var(--primary); font-size: 10.5px; font-weight: 800; }
.jr-lockers { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.jr-lockers i { height: 13px; border-radius: 3px; background: #cfdcf9; }
.jr-panel.is-play .jr-lockers i { animation: jr-cell 0.4s ease both; animation-delay: calc(var(--u) * 3.7 + var(--u0) + var(--i) * 40ms); }
@keyframes jr-cell { from { background: #eef2f8; transform: scale(0.6); } to { background: #cfdcf9; transform: none; } }
.jr-adm-file { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: #f6f8fc; font-weight: 700; }
.jr-adm-file > svg.ico { color: var(--primary); }
.jr-flip { margin-left: auto; display: grid; }
.jr-flip em { grid-area: 1 / 1; font-style: normal; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.jr-flip em svg.ico { width: 11px; height: 11px; stroke-width: 3; }
.jr-flip .a { background: #fff4e0; color: var(--warning-deep); opacity: 0; }
.jr-flip .b { background: #e7f8f1; color: var(--success-deep); }
.jr-panel.is-play .jr-flip .a { animation: jr-out-a 0.3s ease both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
.jr-panel.is-play .jr-flip .b { animation: jr-in-b 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--d, 0) * var(--u) + var(--u0)); }
@keyframes jr-out-a { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes jr-in-b { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* 장면 4: 시범 운영 · 교육 */
.jr-train { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 12px; }
.jr-class { display: flex; flex-direction: column; gap: 8px; }
.jr-class-scr {
  position: relative; flex: 1; border-radius: 12px; padding: 12px; overflow: hidden;
  background: linear-gradient(150deg, #2557d1, #16388b); color: #fff; display: flex; flex-direction: column; gap: 7px;
}
.jr-class-scr .t { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; margin-bottom: 4px; }
.jr-class-scr i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }
.jr-class-scr .b1 { width: 82%; } .jr-class-scr .b2 { width: 64%; } .jr-class-scr .b3 { width: 46%; background: rgba(157, 186, 255, 0.7); }
.jr-cursor { position: absolute; left: 30%; top: 62%; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25); }
.jr-panel.is-play .jr-cursor { animation: jr-cursor 3.6s ease-in-out calc(var(--u0) + 0.6s) infinite; }
@keyframes jr-cursor { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(60px, -26px); } 60% { transform: translate(28px, 14px); } }
.jr-people { display: flex; gap: 6px; }
.jr-people span { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(17, 25, 39, 0.1); }
.jr-status { display: flex; flex-direction: column; gap: 6px; }
.jr-status li { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid #e8ecf3; font-weight: 700; color: var(--gray-700); }
.jr-status li > svg.ico { color: var(--primary); }
.jr-ready {
  grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; background: #e7f8f1; color: var(--success-deep); font-weight: 800; font-size: 12.5px; transform: none;
}
.jr-panel.is-play .jr-ready.a-stamp { animation-name: jr-ready; }
@keyframes jr-ready { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }

/* 장면 5: 입주민 오픈 */
.jr-open { padding: 0; background: linear-gradient(180deg, #fff, #f5f8ff); }
.jr-notice {
  position: absolute; left: 20px; top: 26px; width: 150px; padding: 12px; border-radius: 10px; background: #fff;
  border: 1px solid #e6ebf4; box-shadow: 0 14px 30px -18px rgba(17, 25, 39, 0.35); transform: rotate(-5deg);
}
.jr-notice .t { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: var(--primary); }
.jr-notice .t svg.ico { width: 12px; height: 12px; }
.jr-notice b { display: block; margin: 5px 0 8px; font-size: 12px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.jr-notice i { display: block; height: 6px; border-radius: 3px; background: #edf1f7; margin-top: 5px; }
.jr-notice i.s { width: 60%; }
.jr-panel.is-play .jr-notice.a-slide { animation-name: jr-notice; }
@keyframes jr-notice { from { opacity: 0; transform: translate(-20px, 10px) rotate(-12deg); } to { opacity: 1; transform: rotate(-5deg); } }
.jr-phone {
  position: absolute; right: 34px; top: 16px; width: 176px; height: 262px; border-radius: 26px; border: 6px solid #0f1a2e;
  background: #f4f6fb; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(17, 25, 39, 0.55);
}
.jr-ph-top { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #fff; font-size: 10.5px; }
.jr-ph-top b { font-weight: 800; color: var(--ink); }
.jr-ph-top svg.ico { width: 13px; height: 13px; color: var(--gray-500); }
.jr-ph-hero {
  margin: 10px 10px 8px; padding: 12px 10px; border-radius: 14px; display: flex; gap: 8px; align-items: center;
  background: linear-gradient(140deg, #4a7bea, #2557d1); color: #fff;
}
.jr-ph-hero > svg.ico { width: 22px; height: 22px; flex-shrink: 0; }
.jr-ph-hero b { display: block; font-size: 11.5px; font-weight: 800; }
.jr-ph-hero small { display: block; font-size: 9.5px; opacity: 0.85; margin-top: 1px; }
.jr-ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px; }
.jr-ph-grid span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px; border-radius: 11px; background: #fff; font-size: 10.5px; font-weight: 700; color: var(--gray-800); box-shadow: 0 1px 3px rgba(17, 25, 39, 0.05); }
.jr-ph-grid span svg.ico { color: var(--primary); width: 15px; height: 15px; }
.jr-mgr {
  position: absolute; left: 22px; bottom: 26px; display: flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--blue-100); box-shadow: 0 14px 30px -18px rgba(37, 87, 209, 0.6);
}
.jr-mgr > svg.ico { box-sizing: content-box; width: 15px; height: 15px; padding: 7px; border-radius: 10px; background: var(--primary); color: #fff; }
.jr-mgr small { display: block; font-size: 10px; color: var(--gray-500); font-weight: 700; }
.jr-mgr b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.jr-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.jr-confetti i { position: absolute; left: 62%; top: 34%; width: 6px; height: 10px; border-radius: 2px; opacity: 0; }
.jr-confetti.go i { animation: jr-conf 1.4s cubic-bezier(0.15, 0.7, 0.35, 1) both; animation-delay: calc(var(--u0) + var(--u) * 1.7 + var(--w, 0ms)); }
@keyframes jr-conf {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

/* ---------- APPROACH: 직접 만져 보는 도입 방식 ---------- */
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ap-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-xl); overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.2s, transform 0.3s var(--ease);
}
.ap-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.ap-stage {
  position: relative; height: 348px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%233568e0' fill-opacity='.15'/%3E%3C/svg%3E") 0 0 / 16px 16px, linear-gradient(170deg, #f6f9ff, #e9f0ff);
  border-bottom: 1px solid var(--blue-100);
}
.ap-body { padding: 24px 26px 28px; }
.ap-body .ic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ap-body .ic-ico { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.ap-body .ic-ico svg.ico { width: 23px; height: 23px; }
.ap-body .ic-no { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--gray-300); }
.ap-body h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.ap-body p { margin-top: 8px; font-size: 15px; color: var(--gray-500); line-height: 1.7; }
.ap-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; }
.ap-foot .btn-sm { height: 40px; padding: 0 14px; font-size: 14px; }

/* 01 단계적 도입 */
.ap-app { background: #fff; border-radius: 16px; border: 1px solid #e3e9f5; padding: 12px; box-shadow: 0 18px 34px -26px rgba(22, 56, 139, 0.5); }
.ap-app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ap-app-head > b { font-size: 13.5px; font-weight: 800; }
.ap-count { display: inline-flex; align-items: baseline; gap: 2px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--blue-50); color: var(--primary); font-size: 12px; font-weight: 800; line-height: 24px; }
.ap-count b { font-size: 14px; }
.ap-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ap-mod {
  position: relative; min-height: 84px; padding: 9px 6px 8px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px dashed var(--gray-300); background: #fff; color: var(--gray-500); text-align: center;
  transition: border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
}
.ap-mod:hover { border-color: var(--blue-300); }
.ap-mod-ico { width: 28px; height: 28px; border-radius: 9px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s; }
.ap-mod-ico svg.ico { width: 15px; height: 15px; }
.ap-mod-name { font-size: 11.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
.ap-mod-st { display: grid; font-size: 10px; font-weight: 800; }
.ap-mod-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 2px; transition: opacity 0.2s, transform 0.3s var(--ease); }
.ap-mod-st svg.ico { width: 10px; height: 10px; stroke-width: 3.2; }
.ap-mod-st .on { opacity: 0; transform: translateY(4px); color: var(--primary); }
.ap-mod-st .off { color: var(--gray-500); }
.ap-mod[aria-pressed="true"] { border-style: solid; border-color: var(--primary); background: var(--blue-50); color: var(--ink); box-shadow: 0 8px 16px -12px rgba(37, 87, 209, 0.7); }
.ap-mod[aria-pressed="true"] .ap-mod-ico { background: var(--primary); color: #fff; }
.ap-mod[aria-pressed="true"] .on { opacity: 1; transform: none; }
.ap-mod[aria-pressed="true"] .off { opacity: 0; transform: translateY(-4px); }
.ap-mod.bump { animation: ap-bump 0.42s var(--ease); }
@keyframes ap-bump { 0% { transform: scale(1); } 35% { transform: scale(0.93); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.ap-meter { margin-top: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ap-meter i { height: 5px; border-radius: 3px; background: var(--gray-200); transition: background 0.35s; transition-delay: calc(var(--i) * 40ms); }
.ap-meter i.on { background: var(--primary); }
.ap-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.ap-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ap-legend i.now { background: var(--primary); }
.ap-legend i.later { margin-left: 6px; border: 1.5px dashed var(--gray-400); }
.ap-card[data-ap="phase"].is-intro .ap-mod { animation: jr-pop 0.5s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 0.15s); }

/* 02 기존 설비 활용 */
.ap-seg { display: flex; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid #e1e8f6; }
.ap-seg button { flex: 1; height: 34px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--gray-500); transition: background 0.25s, color 0.25s, box-shadow 0.25s; white-space: nowrap; }
.ap-seg button:hover { color: var(--ink); }
.ap-seg button[aria-checked="true"] { background: var(--primary); color: #fff; box-shadow: 0 6px 14px -8px rgba(37, 87, 209, 0.9); }
.ap-door { position: relative; flex: 1; min-height: 170px; display: flex; align-items: flex-end; justify-content: center; }
.ap-wall { position: relative; width: 210px; height: 158px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #dfe7f6, #d3ddf1); display: flex; align-items: flex-end; padding-left: 26px; }
.ap-frame { position: relative; width: 104px; height: 138px; border: 5px solid #7d90b6; border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f1f6ff 62%, #dfe8f8 62.5%, #eef3fc 100%); perspective: 420px; }
.ap-frame::before { content: ''; position: absolute; left: 18%; right: 18%; top: 18%; height: 30%; border-radius: 4px; background: linear-gradient(160deg, #e3edff, #f8fbff); border: 1px solid #d6e2f8; }
.ap-glass { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; background: linear-gradient(115deg, rgba(190, 210, 248, 0.96), rgba(150, 180, 238, 0.9) 48%, rgba(204, 220, 252, 0.96)); border: 1.5px solid #8ea6d6; transition: transform 0.7s var(--ease); display: none; overflow: hidden; }
.ap-glass::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 30%; width: 9px; background: rgba(255, 255, 255, 0.55); transform: skewX(-14deg); }
.ap-glass.l { left: 0; } .ap-glass.r { right: 0; }
.ap-leaf { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #ffffff, #e9eef8); border: 1.5px solid #a8b7d4; transform-origin: left center; transition: transform 0.8s var(--ease); display: none; }
.ap-handle { position: absolute; right: 10px; top: 52%; width: 5px; height: 20px; border-radius: 3px; background: #6c7ea3; }
.ap-em { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: #3a4a6b; display: none; z-index: 2; }
.ap-em i { position: absolute; right: 8px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px var(--danger); transition: background 0.3s, box-shadow 0.3s; }
.ap-door[data-type="auto"] .ap-glass { display: block; }
.ap-door[data-type="swing"] .ap-leaf, .ap-door[data-type="em"] .ap-leaf, .ap-door[data-type="em"] .ap-em { display: block; }
.ap-door.is-open[data-type="auto"] .ap-glass.l { transform: translateX(-88%); }
.ap-door.is-open[data-type="auto"] .ap-glass.r { transform: translateX(88%); }
.ap-door.is-open[data-type="swing"] .ap-leaf, .ap-door.is-open[data-type="em"] .ap-leaf { transform: rotateY(-62deg); }
.ap-door.is-ok .ap-em i { background: var(--success); box-shadow: 0 0 6px var(--success); }
.ap-reader {
  position: absolute; left: 146px; top: 46px; width: 30px; height: 50px; border-radius: 8px; background: #16223a; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; box-shadow: 0 10px 18px -10px rgba(17, 25, 39, 0.7);
}
.ap-reader-scr { position: relative; width: 22px; height: 24px; border-radius: 5px; background: #2a4a8f; color: #cfe0ff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ap-reader-scr svg.ico { width: 14px; height: 14px; }
.ap-reader-ok { position: absolute; inset: 0; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; }
.ap-reader-ok svg.ico { stroke-width: 3; }
.ap-led { width: 6px; height: 6px; border-radius: 50%; background: #5b6b8c; transition: background 0.25s, box-shadow 0.25s; }
.ap-door.is-scan .ap-reader-scr { animation: ap-scan-pulse 0.6s ease-in-out infinite alternate; }
.ap-door.is-scan .ap-led { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.ap-door.is-ok .ap-reader-ok { opacity: 1; }
.ap-door.is-ok .ap-led { background: var(--success); box-shadow: 0 0 8px var(--success); }
@keyframes ap-scan-pulse { from { box-shadow: 0 0 0 0 rgba(157, 186, 255, 0.0); } to { box-shadow: 0 0 0 4px rgba(157, 186, 255, 0.6); } }
.ap-spark { position: absolute; left: 160px; top: 70px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: 0; }
.ap-door.is-install .ap-reader { animation: ap-attach 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.ap-door.is-install .ap-spark { animation: ap-spark 0.6s ease-out 0.45s both; }
.ap-door.is-install .ap-spark.s1 { --sx: -26px; --sy: -18px; }
.ap-door.is-install .ap-spark.s2 { --sx: 24px; --sy: -22px; }
.ap-door.is-install .ap-spark.s3 { --sx: 22px; --sy: 20px; }
@keyframes ap-attach { from { opacity: 0; transform: translate(40px, -26px) rotate(14deg); } to { opacity: 1; transform: none; } }
@keyframes ap-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.3); } }
.ap-floor { position: absolute; left: 6%; right: 6%; bottom: 0; height: 2px; border-radius: 2px; background: #b8c6e2; }
.ap-door-st { font-size: 13px; color: var(--gray-600); font-weight: 600; min-width: 0; }
.ap-door-st b { color: var(--ink); font-weight: 800; }

/* 03 섞어 쓰는 인증 */
.ap-term { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 176px; }
.ap-term-body { width: 150px; padding: 12px 12px 10px; border-radius: 22px; background: #16223a; box-shadow: 0 22px 36px -20px rgba(17, 25, 39, 0.7); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ap-term-scr { position: relative; width: 126px; height: 112px; border-radius: 14px; background: linear-gradient(160deg, #f4f7ff, #e3ecff); overflow: hidden; transition: background 0.3s; }
.ap-m { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.45s var(--ease); }
.ap-term[data-mode="face"] .m-face, .ap-term[data-mode="card"] .m-card, .ap-term[data-mode="finger"] .m-finger { opacity: 1; transform: none; }
.m-face > svg.ico { width: 58px; height: 58px; stroke-width: 1.5; }
.ap-fp { display: flex; }
.ap-fp svg.ico { width: 54px; height: 54px; stroke-width: 1.4; }
.ap-card-chip { display: flex; transform: translateY(16px); transition: transform 0.5s var(--ease); }
.ap-card-chip svg.ico { width: 54px; height: 54px; stroke-width: 1.4; }
.ap-waves { position: absolute; top: 14px; left: 50%; margin-left: -10px; opacity: 0; transform: rotate(-90deg); }
.ap-waves svg.ico { width: 20px; height: 20px; }
.ap-scanline { position: absolute; left: 14px; right: 14px; top: 16px; height: 2px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 10px 2px rgba(53, 104, 224, 0.5); opacity: 0; }
.ap-term.is-scan .ap-scanline { opacity: 1; animation: ap-scanline 0.9s ease-in-out infinite alternate; }
.ap-term.is-scan .m-card .ap-card-chip { transform: translateY(-4px); }
.ap-term.is-scan .m-card .ap-waves { animation: ap-waves 0.8s ease-out infinite; }
@keyframes ap-scanline { from { transform: translateY(0); } to { transform: translateY(78px); } }
@keyframes ap-waves { 0% { opacity: 0; transform: rotate(-90deg) translateX(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(-90deg) translateX(8px); } }
.ap-term-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, 0.92); color: #fff; opacity: 0; transform: scale(1.15); transition: opacity 0.25s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ap-term-ok svg.ico { width: 40px; height: 40px; stroke-width: 2.6; }
.ap-term.is-ok .ap-term-ok { opacity: 1; transform: none; }
.ap-term-cap { display: flex; flex-direction: column; align-items: center; color: #fff; line-height: 1.3; }
.ap-term-who { font-size: 12.5px; font-weight: 800; }
.ap-term-how { font-size: 11px; color: #9fb6e8; font-weight: 600; }
.ap-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ap-who button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 12px; background: #fff; border: 1.5px solid #e1e8f6;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.ap-who button:hover { border-color: var(--blue-300); }
.ap-who .w-ico { width: 28px; height: 28px; border-radius: 9px; background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s; }
.ap-who .w-ico svg.ico { width: 15px; height: 15px; }
.ap-who .w-txt { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.ap-who b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.ap-who small { font-size: 10.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.ap-who button[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 10px 18px -12px rgba(37, 87, 209, 0.8); transform: translateY(-2px); }
.ap-who button[aria-checked="true"] .w-ico { background: var(--primary); color: #fff; }
.ap-who button[aria-checked="true"] small { color: var(--primary); }

/* 화면 밖이면 멈춤 */
.ap-card.is-off *, .ap-card.is-off *::before, .ap-card.is-off *::after { animation-play-state: paused !important; }

/* ---------- 반응형 ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .jr-section .sec-head { margin-bottom: 28px; }
  .jr { --jr-node: 58px; --jr-amp: 24px; --jr-track: 138px; }
  .jr-scene { min-height: 390px; }
  .jr-copy { padding: 34px 32px 32px 40px; }
  .jr-copy h3 { font-size: 27px; }
  .jr-decide { margin-top: 18px; }
}
@media (max-width: 1200px) and (min-width: 1024px) {
  .jr-copy { padding: 40px 28px 36px 36px; }
  .ap-stage { padding: 14px; }
  .ap-mod-name { font-size: 11px; }
  .ap-legend { display: none; }
}
@media (max-width: 1023px) {
  .jr { --jr-node: 54px; --jr-amp: 22px; --jr-track: 136px; }
  .jr-lbl b { font-size: 14.5px; }
  .jr-span { margin: 0 4% 16px; }
  .jr-panel { grid-template-columns: 1fr; }
  .jr-scene { order: -1; min-height: 380px; border-left: 0; border-bottom: 1px solid var(--blue-100); }
  .jr-copy { padding: 32px 32px 32px; }
  .jr-no { font-size: 96px; top: 20px; }
  .ap-grid { grid-template-columns: 1fr; gap: 16px; }
  .ap-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ap-stage { border-bottom: 0; border-right: 1px solid var(--blue-100); }
  .ap-body { align-self: center; padding: 28px 30px; }
}
@media (max-width: 767px) {
  .jr { --jr-node: 44px; --jr-amp: 12px; --jr-track: 112px; --jr-ww: 400; --jr-wh: 340; --u: 230ms; }
  .jr-section .sec-head { margin-bottom: 28px; }
  .jr-span { margin: 0 0 14px; gap: 8px; }
  .jr-span-line { display: none; }
  .jr-span-pill { margin: 0 auto; height: auto; min-height: 36px; padding: 6px 14px 6px 10px; font-size: 13.5px; white-space: normal; flex-wrap: wrap; justify-content: center; row-gap: 0; }
  .jr-span-pill small { font-size: 11.5px; }
  .jr-node { gap: 6px; padding: 0 1px; }
  .jr-dot svg.ico { width: 19px; height: 19px; }
  .jr-ok { width: 17px; height: 17px; right: -4px; top: -4px; }
  .jr-ok svg.ico { width: 9px; height: 9px; }
  .jr-lbl small { display: none; }
  .jr-lbl b { font-size: 12px; letter-spacing: -0.04em; }
  .jr-node.active.lit .jr-dot { box-shadow: 0 0 0 5px rgba(53, 104, 224, 0.13), 0 10px 20px -10px rgba(37, 87, 209, 0.75); }
  .jr-node.active.lit .jr-dot::after { inset: -7px; }
  .jr-stage { margin-top: 18px; border-radius: var(--r-lg); }
  .jr-scene { min-height: 0; height: 290px; padding: 14px; }
  .jr-copy { padding: 24px 20px 22px; }
  .jr-no { font-size: 72px; right: 14px; top: 14px; }
  .jr-copy h3 { font-size: 23px; }
  .jr-copy > p { font-size: 15.5px; }
  .jr-checks li { font-size: 15px; }
  .jr-decide .sp-big { font-size: 17px; }
  .jr-admin { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  .jr-adm-side li { font-size: 10.5px; padding: 0 6px; }
  .jr-hours { flex-wrap: wrap; }
  .jr-notice { left: 12px; width: 132px; }
  .jr-phone { right: 14px; }
  .jr-mgr { left: 12px; bottom: 18px; }
  .ap-card { display: flex; }
  .ap-stage { border-right: 0; border-bottom: 1px solid var(--blue-100); min-height: 0; padding: 14px; }
  .ap-body { padding: 22px 22px 24px; }
  .ap-legend { display: none; }
  .ap-foot { flex-wrap: nowrap; }
  .ap-foot .ap-cta { flex: 1; }
  .ap-stage { height: auto; }
}
@media (max-width: 400px) {
  .jr-lbl b { font-size: 11.5px; }
  .ap-mod-name { font-size: 11px; }
  .ap-seg button { font-size: 12.5px; }
}
@media (hover: none) {
  .jr-node:hover .jr-dot { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-svg { clip-path: none; transition: none; }
  .jr-node { opacity: 1; transform: none; }
  .jr-comet, .jr-confetti, .jr-node.active.lit .jr-dot::after { display: none; }
  .jr-panel { transform: none !important; }
  .jr-win { transform: none; }
  .jr-panel *, .jr-panel *::before, .jr-panel *::after, .ap-card *, .ap-card *::before, .ap-card *::after { animation: none !important; }
}

/* 접목: 산출물 카드 확정 표시 — 체크리스트가 끝나면 문서 아이콘이 체크로 바뀜 (기본 = 최종 상태) */
.jr-copy > p, .jr-checks, .jr-decide, .jr-copy .sp-nav { position: relative; }
.jr-decide { padding-right: 52px; }
.jr-decide-ico { position: absolute; right: 16px; top: 14px; width: 24px; height: 24px; color: var(--primary); }
.jr-decide-ico svg.ico { position: absolute; inset: 0; width: 24px; height: 24px; }
.jr-decide-ico svg.ico:first-child { opacity: 0; }
.jr-panel.is-play .jr-decide-ico svg.ico:first-child { animation: jr-doc-out 0.3s ease both; animation-delay: 0.95s; }
.jr-panel.is-play .jr-decide-ico svg.ico:last-child { animation: jr-doc-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.95s; }
.jr-panel.is-play .jr-decide { animation-name: jr-rise, jr-decide-glow; animation-duration: 0.6s, 1.2s; animation-delay: 0.34s, 0.95s; animation-fill-mode: both, none; animation-timing-function: var(--ease), ease-out; }
@keyframes jr-doc-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.6); } }
@keyframes jr-doc-in { 0% { opacity: 0; transform: scale(0.4) rotate(-40deg); } 100% { opacity: 1; transform: none; } }
@keyframes jr-decide-glow { 0% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.35); } 100% { box-shadow: 0 0 0 10px rgba(53, 104, 224, 0); } }
@media (max-width: 767px) { .jr-decide { padding-right: 48px; } .jr-decide-ico { right: 14px; } }

/* =========================================================
   2026-10-07 도입 문의 위저드 (#inquiryModal) — 최종안
   딥블루 진행 레일(단계 · 실시간 접수증 · 도장) + 오른쪽 단계 화면 → 같은 팝업 안 완료 화면
   ========================================================= */
.modal-iq {
  max-width: 940px; height: min(712px, calc(100vh - 48px)); height: min(712px, calc(100dvh - 48px));
  display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden;
}

/* ---------- 왼쪽 레일 (딥블루) ---------- */
.iq-rail {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 22px; min-height: 0;
  padding: 26px 24px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: #fff;
  background: linear-gradient(165deg, #2557d1 0%, #1d47b5 55%, #16388b 100%);
}
.iq-rail-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.iq-rail-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(120% 60% at 15% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 60% at 15% 0%, #000 0%, transparent 72%);
}
.iq-orb {
  position: absolute; top: -150px; right: -160px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 184, 255, 0.5) 0%, rgba(143, 184, 255, 0) 68%);
  animation: iq-drift 16s ease-in-out infinite alternate; animation-play-state: paused;
}
.iq-orb.o2 {
  top: auto; right: auto; bottom: -170px; left: -150px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(14, 165, 198, 0.32) 0%, rgba(14, 165, 198, 0) 68%);
  animation-duration: 19s; animation-direction: alternate-reverse;
}
.modal-backdrop.open .iq-orb { animation-play-state: running; }
@keyframes iq-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-34px, 26px, 0) scale(1.1); } }
.iq-spot {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(240px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, 0.12), transparent 62%);
}
.iq-rail.is-hover .iq-spot { opacity: 1; }
.iq-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.iq-brand img { height: 20px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.iq-brand .mh-div { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.iq-brand h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; color: #fff; }
.iq-lead { margin-top: -12px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.95); }
.iq-lead b { color: #fff; font-weight: 800; box-shadow: inset 0 -0.42em 0 rgba(143, 184, 255, 0.38); }

/* 진행 표시 (PC: 세로) */
.iq-progress { position: relative; }
.iq-track { position: absolute; left: 17px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.iq-fill {
  position: absolute; inset: 0; border-radius: inherit; background: #fff;
  transform-origin: 50% 0; transform: scaleY(var(--p, 0)); transition: transform 0.55s var(--ease);
}
.iq-steps { position: relative; display: flex; flex-direction: column; gap: 2px; }
.iq-step {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 0; border-radius: 12px;
  text-align: left; color: rgba(255, 255, 255, 0.6);
}
.iq-step:disabled { cursor: default; }
.iq-step:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.st-dot {
  position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #2350c2; border: 2px solid rgba(255, 255, 255, 0.32); font-family: var(--font-num); font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.72);
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.3s;
}
.st-dot > * { grid-area: 1 / 1; }
.st-dot .st-n { transition: opacity 0.2s, transform 0.3s var(--ease); }
.st-dot .st-ck { width: 17px; height: 17px; stroke-width: 3; opacity: 0; transform: scale(0.4) rotate(-25deg); transition: opacity 0.2s, transform 0.4s var(--ease); }
.st-dot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none;
}
.st-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.st-txt small { font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.82); transition: color 0.2s; }
.st-txt b { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.72); transition: color 0.2s; }
.iq-step:not(:disabled):not(.is-current):hover .st-txt b { color: #fff; }
.iq-step:not(:disabled):not(.is-current):hover .st-dot { border-color: rgba(255, 255, 255, 0.75); }
.iq-step.is-current .st-dot { background: #fff; border-color: #fff; color: var(--primary); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16), 0 8px 18px -8px rgba(8, 24, 80, 0.6); }
.iq-step.is-current .st-txt small { color: #fff; }
.iq-step.is-current .st-txt b { color: #fff; font-weight: 800; }
.iq-step.is-done .st-dot { background: #4673dc; border-color: rgba(255, 255, 255, 0.6); color: #fff; }   /* 불투명: 진행선이 비치지 않게 */
.iq-step.is-done .st-n { opacity: 0; transform: scale(0.4); }
.iq-step.is-done .st-ck { opacity: 1; transform: none; }
.iq-step.is-done .st-txt b { color: rgba(255, 255, 255, 0.9); }
.modal-iq.is-done .iq-step.is-done .st-dot { background: #fff; border-color: #fff; color: var(--primary); }
.modal-backdrop.open .iq-step.is-current .st-dot::after { animation: iq-pulse 2.2s var(--ease) infinite; }
@keyframes iq-pulse { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
/* 열릴 때 단계가 차례로 등장 */
.modal-backdrop.open .iq-steps li { animation: iq-rise 0.5s var(--ease) both; }
.modal-backdrop.open .iq-steps li:nth-child(2) { animation-delay: 0.05s; }
.modal-backdrop.open .iq-steps li:nth-child(3) { animation-delay: 0.1s; }
.modal-backdrop.open .iq-steps li:nth-child(4) { animation-delay: 0.15s; }
@keyframes iq-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 완료 시 단계 체크가 위에서부터 차례로 */
.modal-iq.is-done .iq-steps li:nth-child(2) .st-dot, .modal-iq.is-done .iq-steps li:nth-child(2) .st-ck, .modal-iq.is-done .iq-steps li:nth-child(2) .st-n { transition-delay: 0.08s; }
.modal-iq.is-done .iq-steps li:nth-child(3) .st-dot, .modal-iq.is-done .iq-steps li:nth-child(3) .st-ck, .modal-iq.is-done .iq-steps li:nth-child(3) .st-n { transition-delay: 0.16s; }
.modal-iq.is-done .iq-steps li:nth-child(4) .st-dot, .modal-iq.is-done .iq-steps li:nth-child(4) .st-ck, .modal-iq.is-done .iq-steps li:nth-child(4) .st-n { transition-delay: 0.24s; }

/* 실시간 접수증 (양옆 펀칭 홈은 mask로 실제로 뚫어 레일 배경이 비침) */
.iq-ticket {
  position: relative; flex-shrink: 0; background: #fff; border-radius: 16px; padding: 14px 18px 12px;
  -webkit-mask: radial-gradient(circle 7px at 0 44px, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 44px, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 44px, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 44px, transparent 98%, #000) right / 51% 100% no-repeat;
}
.tk-head {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; margin-bottom: 6px;
  border-bottom: 1.5px dashed var(--blue-200); font-size: 12.5px; font-weight: 800; color: var(--primary); letter-spacing: 0.02em;
}
.tk-head svg.ico { width: 16px; height: 16px; color: var(--blue-300); }
.iq-ticket dl div { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.45; }
.iq-ticket dt { width: 56px; flex-shrink: 0; color: var(--gray-500); }
.iq-ticket dd {
  flex: 1; min-width: 0; margin: 0 -4px; padding: 0 4px; border-radius: 6px;
  font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iq-ticket dd.empty { color: var(--gray-300); font-weight: 600; }
.tk-stamp {
  position: absolute; right: 12px; top: 10px; padding: 5px 11px; border: 2.5px solid var(--primary); border-radius: 10px;
  background: rgba(255, 255, 255, 0.9); color: var(--primary); font-size: 14px; font-weight: 900; letter-spacing: 0.06em;
  opacity: 0; transform: rotate(-12deg) scale(1.8); pointer-events: none;
}
.tk-head svg.ico { transition: opacity 0.2s; }
.modal-iq.is-done .tk-head svg.ico { opacity: 0; }
.modal-iq.is-done .tk-stamp { animation: tk-stamp 0.55s 0.5s var(--ease) forwards; }
.modal-iq.is-done .iq-ticket { animation: tk-thump 0.45s 0.62s var(--ease); }
@keyframes tk-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(1.8); } 55% { opacity: 1; transform: rotate(-12deg) scale(0.92); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes tk-thump { 0%, 100% { transform: none; } 35% { transform: translateY(2px) scale(0.99); } }

.iq-perks { margin-top: auto; display: grid; gap: 8px; }
.iq-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.78); transition: color 0.3s; }
.iq-perks svg.ico { width: 18px; height: 18px; padding: 3px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; stroke-width: 3; transition: background 0.3s, color 0.3s, transform 0.4s var(--ease); }
/* 문의 유형에 맞는 약속을 강조 (데모 → 데모 시연, 견적 → 비용 · 일정) */
.modal-iq[data-type="demo"] .iq-perks li[data-for="demo"], .modal-iq[data-type="quote"] .iq-perks li[data-for="quote"] { color: #fff; font-weight: 800; }
.modal-iq[data-type="demo"] .iq-perks li[data-for="demo"] svg.ico, .modal-iq[data-type="quote"] .iq-perks li[data-for="quote"] svg.ico { background: #fff; color: var(--primary); transform: scale(1.1); }

/* ---------- 오른쪽 본문 ---------- */
.iq-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.iq-main form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.iq-close { position: absolute; top: 16px; right: 16px; z-index: 3; margin: 0; }
.iq-head { flex-shrink: 0; padding: 26px 76px 12px 32px; }
.iq-count { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary); }
.iq-count b { font-weight: 800; }
.iq-count-bar { width: 44px; height: 4px; border-radius: 4px; background: var(--blue-100); overflow: hidden; }
.iq-count-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0.25); transition: transform 0.5s var(--ease); }
#iqStepTitle { margin-top: 4px; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; outline: none; }
.iq-body { padding: 10px 32px 16px; }
.iq-foot { padding: 16px 32px 22px; align-items: center; }
.iq-foot .iq-next { margin-left: auto; min-width: 190px; }
.iq-foot .iq-done-act { flex: 1; }
.iq-next .iq-next-ico { transition: transform 0.25s var(--ease); }
.iq-next:hover .iq-next-ico { transform: translateX(3px); }
.iq-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: iq-spin 0.7s linear infinite; }
.iq-next.is-loading { pointer-events: none; }
.iq-next.is-loading .iq-spin { display: inline-block; }
.iq-next.is-loading .iq-next-ico { display: none; }
@keyframes iq-spin { to { transform: rotate(360deg); } }

/* 입력 필드: 앞 아이콘 + 통과 체크 */
.modal-iq .field { margin-bottom: 20px; }
.iq-inp { position: relative; }
.iq-inp .iq-inp-ico { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--gray-400); pointer-events: none; transition: color 0.15s; }
.iq-inp:focus-within .iq-inp-ico { color: var(--primary); }
.iq-inp .input { height: 54px; padding-left: 46px; padding-right: 46px; }
.iq-ok {
  position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  display: grid; place-items: center; background: var(--success); color: #fff; transform: scale(0); transition: transform 0.35s var(--ease);
}
.iq-ok svg.ico { width: 13px; height: 13px; stroke-width: 3.4; }
.field.valid .iq-ok { transform: scale(1); }
.field.valid .iq-inp .input:not(:focus) { border-color: #9fdcc4; }

/* 1단계: 문의 유형 카드 */
.iq-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.iq-type { position: relative; cursor: pointer; }
.iq-type input { position: absolute; opacity: 0; pointer-events: none; }
.it-box {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; height: 100%;
  padding: 16px 16px 14px; border-radius: 16px; border: 1.5px solid var(--gray-200); background: #fff;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.it-ico {
  width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center;
  background: var(--gray-100); color: var(--gray-500); transition: background 0.2s, color 0.2s, transform 0.4s var(--ease);
}
.it-ico svg.ico { width: 21px; height: 21px; }
.it-box b { font-size: 15.5px; font-weight: 800; color: var(--gray-800); }
.it-box small { font-size: 12.5px; line-height: 1.45; color: var(--gray-500); }
.it-radio { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gray-300); background: #fff; transition: border-color 0.2s; }
.it-radio::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--primary); transform: scale(0); transition: transform 0.3s var(--ease); }
.iq-type:hover .it-box { border-color: var(--blue-300); transform: translateY(-2px); }
.iq-type input:checked + .it-box { border-color: var(--primary); background: linear-gradient(180deg, #fff 0%, var(--blue-50) 100%); box-shadow: 0 14px 28px -18px rgba(53, 104, 224, 0.7); }
.iq-type input:checked + .it-box .it-ico { background: var(--primary); color: #fff; transform: rotate(-6deg) scale(1.06); }
.iq-type input:checked + .it-box .it-radio { border-color: var(--primary); }
.iq-type input:checked + .it-box .it-radio::after { transform: scale(1); }
.iq-type input:focus-visible + .it-box { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 1단계: 관심 기능 카드 (기존 .check-card 구조 유지) */
/* legend를 일반 블록처럼 (fieldset 테두리 위에 걸치지 않게) → 오른쪽 도구 배치 기준 */
.modal-iq fieldset.field > legend { float: left; width: 100%; }
.modal-iq fieldset.field > legend ~ div { clear: both; }
.iq-feat-field { position: relative; }
.iq-tools { position: absolute; z-index: 1; top: -3px; right: 0; display: flex; align-items: center; gap: 10px; }
.iq-sel-count { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.iq-all { height: 28px; padding: 0 10px; border-radius: 8px; background: var(--gray-100); font-size: 12.5px; font-weight: 700; color: var(--gray-600); transition: background 0.15s, color 0.15s; }
.iq-all:hover, .iq-all[aria-pressed="true"] { background: var(--blue-50); color: var(--primary); }
.modal-iq .check-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-iq .check-card .cc-box { gap: 12px; min-height: 66px; padding: 12px 14px; border-radius: 14px; transition: border-color 0.18s, background 0.18s, transform 0.25s var(--ease), box-shadow 0.25s; }
.modal-iq .check-card:hover .cc-box { transform: translateY(-1px); }
.cc-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--gray-100); color: var(--gray-500); transition: background 0.2s, color 0.2s; }
.cc-ico svg.ico { width: 19px; height: 19px; }
.cc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.cc-txt small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-iq .check-card input:checked + .cc-box { box-shadow: 0 10px 22px -16px rgba(53, 104, 224, 0.7); }
.modal-iq .check-card input:checked + .cc-box .cc-ico { background: var(--primary); color: #fff; }
.modal-iq .check-card input:checked + .cc-box .cc-tick { animation: iq-pop 0.35s var(--ease); }
/* 미리 선택된 관심 기능 카드: 파란 물결 1회 */
.modal-iq .check-card.flash .cc-box { animation: iq-flash 1.3s var(--ease) 0.35s 1; }
@keyframes iq-flash { 0% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.45); } 70% { box-shadow: 0 0 0 10px rgba(53, 104, 224, 0); } 100% { box-shadow: 0 10px 22px -16px rgba(53, 104, 224, 0.7); } }
@keyframes iq-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* 2 · 3단계: 선택 칩 (다시 누르면 선택 해제) */
.iq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iq-chip { position: relative; cursor: pointer; }
.iq-chip input { position: absolute; opacity: 0; pointer-events: none; }
.iq-chip span {
  display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--gray-200); background: #fff; font-size: 14.5px; font-weight: 700; color: var(--gray-600);
  transition: border-color 0.15s, background 0.15s, color 0.15s, padding 0.25s var(--ease);
}
.iq-chip span svg.ico { width: 0; height: 15px; stroke-width: 3; opacity: 0; transition: width 0.25s var(--ease), opacity 0.2s, margin 0.25s var(--ease); }
.iq-chip:hover span { border-color: var(--blue-300); color: var(--ink); }
.iq-chip input:checked + span { border-color: var(--primary); background: var(--primary); color: #fff; padding-left: 13px; }
.iq-chip input:checked + span svg.ico { width: 15px; opacity: 1; margin-right: 5px; }
.iq-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 4단계: 확인 · 동의 */
.iq-review { display: grid; gap: 10px; }
.rv-group { border-radius: 16px; border: 1px solid var(--gray-200); background: var(--gray-50); padding: 12px 16px 8px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.rv-head h4 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
.rv-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-family: var(--font-num); font-size: 12px; font-weight: 700; }
.iq-edit { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--primary); transition: background 0.15s; }
.iq-edit:hover { background: var(--blue-100); }
.iq-edit svg.ico { width: 15px; height: 15px; stroke-width: 2.4; transition: transform 0.2s var(--ease); }
.iq-edit:hover svg.ico { transform: translateX(2px); }
.rv-group dl div { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.5; border-top: 1px dashed var(--gray-200); }
.rv-group dl div:first-child { border-top: 0; }
.rv-group dt { width: 70px; flex-shrink: 0; color: var(--gray-500); }
.rv-group dd { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.rv-group dd.empty { color: var(--gray-400); font-weight: 500; }
.rv-group dd.rv-msg { font-weight: 500; color: var(--gray-700); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-feats span { padding: 1px 10px; border-radius: 999px; border: 1px solid var(--blue-200); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.iq-agree { margin-top: 14px; }
.modal-iq .agree-box { padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--gray-200); background: #fff; transition: border-color 0.2s, background 0.2s; }
.modal-iq .agree-box:has(input:checked) { border-color: var(--primary); background: var(--blue-50); }
.modal-iq .check-line { font-size: 14.5px; }
.modal-iq .check-line .ag-ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; color: var(--gray-400); }
.modal-iq .check-line input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--gray-300);
  background: #fff center / 14px no-repeat; transition: background-color 0.15s, border-color 0.15s;
}
.modal-iq .check-line input:checked {
  background-color: var(--primary); border-color: var(--primary); animation: iq-pop 0.35s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.modal-iq .check-line input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.modal-iq .field.invalid .agree-box { border-color: var(--danger); background: #fff; }

/* ---------- 완료 화면 ---------- */
.iq-done { padding: 10px 0 6px; }
.iq-done:not([hidden]) { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.dn-hero { text-align: center; }
.dn-mark { position: relative; width: 92px; height: 92px; margin: 2px auto 14px; }
.dn-mark svg { width: 100%; height: 100%; overflow: visible; }
.dn-halo { fill: var(--blue-50); transform-origin: 48px 48px; transform: scale(0.6); opacity: 0; }
.dn-ring { fill: none; stroke: var(--blue-200); stroke-width: 3; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; transform: rotate(-90deg); transform-origin: 48px 48px; }
.dn-core { fill: var(--primary); transform-origin: 48px 48px; transform: scale(0); }
.dn-check { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; }
.iq-done.play .dn-halo { animation: dn-halo 0.6s var(--ease) 0.05s forwards; }
.iq-done.play .dn-ring { animation: dn-draw 0.55s var(--ease) 0.12s forwards; }
.iq-done.play .dn-core { animation: dn-core 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.4s forwards; }
.iq-done.play .dn-check { animation: dn-draw 0.4s var(--ease) 0.66s forwards; }
@keyframes dn-halo { to { transform: scale(1); opacity: 1; } }
@keyframes dn-core { to { transform: scale(1); } }
@keyframes dn-draw { to { stroke-dashoffset: 0; } }
.dn-burst { position: absolute; inset: 0; pointer-events: none; }
.dn-burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--primary); opacity: 0; }
.dn-burst i:nth-child(even) { width: 5px; height: 5px; margin: -2.5px; background: #9dbaff; }
.dn-burst i:nth-child(4n+3) { background: var(--cyan); }
.iq-done.play .dn-burst i { animation: dn-burst 0.8s 0.7s var(--ease) both; }
@keyframes dn-burst {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-32px) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-64px) scale(1); }
}
.dn-hero h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; outline: none; }
.dn-hero p { margin-top: 6px; font-size: 15.5px; color: var(--gray-600); }
.dn-hero p b { color: var(--primary); font-weight: 800; }
.iq-done.play .dn-up { animation: iq-rise 0.5s var(--ease) both; }
.iq-done.play .dn-hero h3 { animation-delay: 0.18s; }
.iq-done.play .dn-hero p { animation-delay: 0.26s; }
.iq-done.play .dn-sum { animation-delay: 0.34s; }
.iq-done.play #dnNextTitle { animation-delay: 0.4s; }
.iq-done.play .dn-now { animation-delay: 0.46s; }
.iq-done.play .dn-flow-head { animation-delay: 0.54s; }
.dn-label { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.dn-sum { margin-top: 22px; }
.dn-sum .done-summary { margin: 0; }
.dn-next { margin-top: 22px; }
.dn-now { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; }
.dn-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--gray-200); background: #fff; }
.dn-card.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-blue); }
.dc-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--blue-50); color: var(--primary); }
.dc-ico svg.ico { width: 19px; height: 19px; stroke-width: 2.2; }
.dn-card.on .dc-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.dn-card b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.35; }
.dn-card small { display: block; font-size: 12.5px; color: var(--gray-500); }
.dn-card.on small { color: rgba(255, 255, 255, 0.82); }
.dn-link { position: relative; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--blue-300) 0 5px, transparent 5px 9px); }
.dn-link::after { content: ''; position: absolute; left: 0; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.modal-backdrop.open .iq-done.play .dn-link::after { animation: dn-travel 1.8s 1s var(--ease) infinite; }
@keyframes dn-travel { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
.dn-flow-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 18px 0 12px; }
.dn-flow-head b { font-size: 13.5px; font-weight: 800; }
.dn-flow-head span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gray-500); }
.dn-flow-head svg.ico { width: 14px; height: 14px; }
.dn-flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dn-flow::before { content: ''; position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; background: var(--blue-100); }
.dn-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.df-dot { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--blue-200); color: var(--primary); }
.df-dot svg.ico { width: 18px; height: 18px; }
.dn-flow li:first-child .df-dot { border-color: var(--primary); background: var(--blue-50); box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.1); }
.dn-flow small { font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--primary); }
.dn-flow b { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--gray-800); }
.iq-done.play .dn-flow li { animation: iq-rise 0.5s var(--ease) both; animation-delay: calc(0.6s + var(--i) * 0.07s); }

/* PC에서는 왼쪽 접수증이 '접수 완료' 도장을 받으므로 요약표는 화면 낭독용으로만 둡니다 */
@media (min-width: 1024px) {
  /* 확인 화면: 항목을 2열로 묶어 동의란까지 한 화면에 */
  .rv-group dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .rv-group dl div:nth-child(2) { border-top: 0; }
  .rv-group dl div.rv-wide { grid-column: 1 / -1; border-top: 1px dashed var(--gray-200); }
  .rv-group dl div.rv-wide:first-child { border-top: 0; }
  .dn-sum { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .iq-perks { display: none; }
}

/* ---------- 개인정보 안내 ---------- */
.modal-priv .modal-head { gap: 10px; }
.priv-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); color: var(--primary); }
.priv-ico svg.ico { width: 19px; height: 19px; }
.priv-list { display: grid; gap: 8px; margin: 10px 0 4px; }
.priv-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--gray-50); border: 1px solid var(--gray-200); }
.priv-row dt { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; font-weight: 800; color: var(--gray-800); }
.priv-row dt svg.ico { width: 17px; height: 17px; margin-top: 2px; color: var(--primary); flex-shrink: 0; }
.priv-row dd { font-size: 14px; line-height: 1.7; color: var(--gray-700); }
.priv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.priv-chips + .priv-chips { margin-top: 8px; }
.priv-chips span { padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-200); font-size: 13px; font-weight: 600; color: var(--gray-700); line-height: 1.6; }
.priv-chips .pc-tag { border: 0; background: var(--gray-200); color: var(--gray-600); font-weight: 800; }
.priv-chips .pc-tag.req { background: var(--primary); color: #fff; }
.modal-priv [data-privacy-agree] svg.ico { stroke-width: 2.6; }

/* ---------- 태블릿 · 모바일: 레일이 위쪽 가로 진행 막대로 ---------- */
@media (max-width: 1023px) {
  .modal-iq { max-width: 640px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: min(780px, calc(100vh - 48px)); height: min(780px, calc(100dvh - 48px)); }
  .iq-rail { gap: 12px; padding: 18px 20px 14px; overflow: hidden; }
  .iq-orb, .iq-spot, .iq-ticket, .iq-perks { display: none; }
  .iq-brand { padding-right: 52px; }
  .iq-lead { margin-top: -8px; font-size: 12.5px; }
  .iq-track { left: 12.5%; right: 12.5%; top: 15px; bottom: auto; width: auto; height: 2px; }
  .iq-fill { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .iq-steps { flex-direction: row; gap: 0; }
  .iq-steps li { flex: 1; min-width: 0; }
  .iq-step { flex-direction: column; gap: 6px; padding: 0 2px 2px; text-align: center; }
  .st-dot { width: 32px; height: 32px; font-size: 13px; }
  .st-dot .st-ck { width: 15px; height: 15px; }
  .iq-step.is-current .st-dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); }
  .st-txt { align-items: center; max-width: 100%; }
  .st-txt small { display: none; }
  .st-txt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .iq-main { position: static; }   /* 닫기 버튼을 팝업 오른쪽 위(로고 줄)에 */
  .iq-close { top: 12px; right: 12px; color: #fff; background: rgba(255, 255, 255, 0.14); }
  .iq-close:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
  .iq-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .iq-head { padding: 16px 20px 6px; }
  #iqStepTitle { font-size: 19px; }
  .iq-body { padding: 8px 20px 14px; }
  .iq-foot { padding: 12px 20px 16px; }
}
@media (max-width: 767px) {
  .modal-iq { height: 92vh; height: 92dvh; max-height: none; }
  .iq-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .iq-foot .iq-next { flex: 1; min-width: 0; }
  .iq-foot .iq-prev { padding: 0 18px; }
  .iq-types { gap: 8px; }
  .it-box { align-items: center; text-align: center; padding: 14px 6px 12px; }
  .it-ico { margin-bottom: 4px; }
  .it-box b { font-size: 14.5px; }
  .it-box small { display: none; }
  .it-radio { top: 8px; right: 8px; width: 16px; height: 16px; }
  .it-radio::after { inset: 3px; }
  .modal-iq .check-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modal-iq .check-card .cc-box { min-height: 56px; gap: 10px; padding: 10px 12px; }
  .modal-iq .check-card .cc-tick, .cc-txt small { display: none; }
  .modal-iq .check-card b { font-size: 13.5px; line-height: 1.3; }
  .cc-ico { width: 32px; height: 32px; }
  .cc-ico svg.ico { width: 17px; height: 17px; }
  .iq-tools { top: -1px; }
  .iq-chip span { height: 40px; padding: 0 14px; font-size: 14px; }
  .modal-iq .field-row { gap: 0; }
  .dn-hero h3 { font-size: 21px; }
  .dn-now { grid-template-columns: minmax(0, 1fr); }
  .dn-link { width: 2px; height: 18px; margin: 0 0 0 34px; background: repeating-linear-gradient(180deg, var(--blue-300) 0 4px, transparent 4px 7px); }
  .dn-link::after { left: -2px; top: 0; }
  @keyframes dn-travel { 0% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
  .dn-flow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dn-flow::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .dn-flow li { flex-direction: row; gap: 12px; text-align: left; }
  .df-dot { margin-bottom: 0; flex-shrink: 0; }
  .dn-flow small { width: 56px; flex-shrink: 0; }
  .priv-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-iq *, .modal-iq *::before, .modal-iq *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
  .modal-backdrop.open .iq-step.is-current .st-dot::after, .modal-backdrop.open .iq-done.play .dn-link::after { animation: none; }
  .dn-burst { display: none; }
  .iq-orb { animation: none; }
  .iq-spot { display: none; }
  .modal-iq .check-card.flash .cc-box { animation: none; }
  .dn-halo, .dn-core { transform: none; opacity: 1; animation: none !important; }
  .dn-ring, .dn-check { stroke-dashoffset: 0; animation: none !important; }
}

/* ===== R4 · HERO ===== */
/* ---------- 공통 키오스크 1종 (demos.js DEMO.kiosk) ----------
   세로형 스탠드 키오스크: 화면 위 안면인식 카메라 · 세로 터치 화면 · 태그 패드(그림) · 슬림 기둥 · 받침. (R6에서 기기부 · 화면 규칙 갱신 — 파일 끝 'R6 · K' 블록)
   --kz:1 기준 폭 304 × 높이 668. 모든 치수가 --u(= --kz × 1px)의 배수라 크기만 바뀌고 생김새 · 색 · 비율은 같습니다.
   히어로(.hx-kio) · 장비 카드(.hw-kiosk) · 기능 페이지 체험 · 메인 미리보기가 같은 마크업 · 같은 CSS를 씁니다. */
.kiosk {
  --u: calc(var(--kz, 1) * 1px);
  position: relative; z-index: 1; width: calc(304 * var(--u)); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  font-size: calc(14 * var(--u)); line-height: 1.45; text-align: left;
}
.kiosk svg.ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.kiosk-head {
  position: relative; z-index: 2; width: 100%;
  padding: calc(26 * var(--u)) calc(12 * var(--u)) 0;
  border-radius: calc(30 * var(--u));
  background: linear-gradient(172deg, #2c3649 0%, #1a2334 36%, #0c121e 100%);
  box-shadow: 0 calc(44 * var(--u)) calc(70 * var(--u)) calc(-32 * var(--u)) rgba(17, 25, 39, 0.55), 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-14 * var(--u)) rgba(22, 56, 139, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.kiosk-screen {
  position: relative; height: calc(472 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden;
  display: flex; flex-direction: column; background: #f4f6fb;
  box-shadow: 0 0 0 calc(2 * var(--u)) #04070c;
}
.kiosk-screen::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(128deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 24%); }
.kiosk .kiosk-top { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); background: var(--ink); color: #fff; }
.kiosk .kiosk-top b { font-size: calc(12.5 * var(--u)); font-weight: 800; white-space: nowrap; }
.kiosk .kiosk-top small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(9.5 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.kiosk .kiosk-body { flex: 1; min-height: 0; padding: calc(14 * var(--u)); display: flex; flex-direction: column; overflow: hidden; }

/* 화면 안 */
.kiosk .k-step { display: none; flex: 1; min-height: 0; flex-direction: column; animation: panel-in 0.3s var(--ease); }
.kiosk .k-step.on { display: flex; }
.kiosk .k-title { font-size: calc(14 * var(--u)); font-weight: 800; line-height: 1.4; margin-bottom: calc(11 * var(--u)); }
.kiosk .k-title small { display: block; font-size: calc(10.5 * var(--u)); font-weight: 600; color: var(--gray-500); margin-top: calc(2 * var(--u)); }
.kiosk .kiosk-menu { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)); }
.kiosk .kiosk-tile { position: relative; overflow: hidden; text-align: center; background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); border-radius: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)); transition: border-color 0.13s, transform 0.13s; }
.kiosk .kiosk-tile:hover { border-color: var(--primary); transform: translateY(calc(-2 * var(--u))); }
.kiosk .kiosk-tile .ki { width: calc(42 * var(--u)); height: calc(42 * var(--u)); margin: 0 auto calc(9 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.kiosk .kiosk-tile b { display: block; font-size: calc(13 * var(--u)); font-weight: 800; }
.kiosk .kiosk-tile small { display: block; font-size: calc(10 * var(--u)); color: var(--gray-500); }
.kiosk .k-note { margin-top: auto; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #e9f0fe; font-size: calc(10.5 * var(--u)); line-height: 1.5; color: var(--gray-600); }
.kiosk .k-note b { font-weight: 800; color: var(--primary-deep); }
.kiosk .k-note .ki { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex-shrink: 0; border-radius: calc(9 * var(--u)); background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; }
.kiosk .k-note .ki svg.ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.kiosk .k-big-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(11 * var(--u)); width: 100%; text-align: left; background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); border-radius: calc(14 * var(--u)); padding: calc(14 * var(--u)); margin-bottom: calc(9 * var(--u)); transition: border-color 0.13s; }
.kiosk .k-big-btn:hover { border-color: var(--primary); }
.kiosk .k-big-btn .ki { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kiosk .k-big-btn b { display: block; font-size: calc(13 * var(--u)); font-weight: 800; }
.kiosk .k-big-btn small { display: block; font-size: calc(10.5 * var(--u)); color: var(--gray-500); }
.kiosk .k-back { margin-top: auto; align-self: flex-start; padding: calc(8 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(11.5 * var(--u)); font-weight: 800; color: var(--gray-500); }
.kiosk .k-back:hover { color: var(--primary); }
.kiosk .k-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kiosk .k-done .kd-ico { width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin-bottom: calc(14 * var(--u)); border-radius: 50%; background: #e7f8f1; color: var(--success-deep); display: flex; align-items: center; justify-content: center; }
.kiosk .k-done .kd-ico svg.ico { width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke-width: 2.6; }
.kiosk .k-done b { font-size: calc(15 * var(--u)); font-weight: 800; }
.kiosk .k-done small { margin-top: calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--gray-500); line-height: 1.6; }
.kiosk .k-tagwait .kd-ico { background: #eef3fe; color: var(--primary); animation: k-breathe 1.4s ease-in-out infinite; }
.kiosk .k-tagwait .kd-ico svg.ico { stroke-width: 2.2; }
.kiosk .k-down { margin-top: calc(14 * var(--u)); color: var(--primary); display: flex; animation: k-nudge 1.2s ease-in-out infinite; }
.kiosk .k-down svg.ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 2.4; }
.kiosk .k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.kiosk .k-pad button { height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); font-size: calc(14 * var(--u)); font-weight: 800; transition: border-color 0.12s; }
.kiosk .k-pad button:hover { border-color: var(--primary); }
.kiosk .k-pin { display: flex; justify-content: center; gap: calc(10 * var(--u)); margin: calc(6 * var(--u)) 0 calc(4 * var(--u)); }
.kiosk .k-pin i { width: calc(34 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(18 * var(--u)); font-weight: 800; }
.kiosk .k-pin i.filled { border-color: var(--primary); color: var(--primary); }
.kiosk .k-opt { display: block; width: 100%; text-align: left; padding: calc(10 * var(--u)) calc(14 * var(--u)); margin-bottom: calc(8 * var(--u)); border-width: calc(1.5 * var(--u)); border-radius: calc(13 * var(--u)); overflow: hidden; }
.kiosk .k-opt.sel::after { top: calc(12 * var(--u)); right: calc(13 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(11 * var(--u)); }
.kiosk .k-opt.sel::after { content: '✓' / ''; }   /* 선택 표시는 장식 — 상태는 aria-pressed로 알림 */
.kiosk .k-opt .pass-type { font-size: calc(9.5 * var(--u)); }
.kiosk .k-opt .pass-name { font-size: calc(13.5 * var(--u)); margin: calc(2 * var(--u)) 0 calc(1 * var(--u)); }
.kiosk .k-opt .pass-price { font-size: calc(12.5 * var(--u)); }
.kiosk .k-opt.wait .pass-price { color: var(--warning-deep); }
.kiosk .a-cta { margin-top: calc(10 * var(--u)); padding: calc(13 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
/* 연출: 눌리는 버튼 (히어로 자동 재생) */
.kiosk .k-tap { animation: k-press 0.9s var(--ease) 0.15s both; }
.kiosk .k-tap::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u)); border-radius: 50%; background: rgba(53, 104, 224, 0.32); pointer-events: none; animation: k-ripple 0.9s ease-out 0.15s both; }

/* 아래 기기부: 태그 패드(그림) */
.kiosk-panel { position: relative; display: flex; align-items: center; justify-content: center; height: calc(72 * var(--u)); }
.kiosk-nfc {
  position: relative; width: calc(66 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(13 * var(--u));
  display: flex; align-items: center; justify-content: center; color: #7fa2f5;
  background: linear-gradient(160deg, #1b2740, #0c1426); box-shadow: inset 0 0 0 1px rgba(127, 162, 245, 0.22), inset 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.35);
}
.kiosk-nfc > svg.ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 2; }
.kiosk-neck { position: relative; z-index: 1; width: calc(58 * var(--u)); height: calc(86 * var(--u)); margin-top: calc(-2 * var(--u)); background: linear-gradient(90deg, #0f1724 0%, #2d3749 44%, #1b2433 70%, #101826 100%); }
.kiosk-neck::after { content: ''; position: absolute; left: 50%; top: calc(14 * var(--u)); bottom: calc(14 * var(--u)); width: 1px; background: rgba(255, 255, 255, 0.08); }
.kiosk-foot { position: relative; width: calc(184 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); background: linear-gradient(180deg, #2a3446, #0b111d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.kiosk-foot::after { content: ''; position: absolute; left: 4%; right: 4%; top: 100%; height: calc(16 * var(--u)); margin-top: calc(-6 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(17, 25, 39, 0.32), rgba(17, 25, 39, 0)); z-index: -1; }

/* 미리보기(정지 화면): 기본 크기만 살짝 줄임 — 바깥에서 --kz로 덮어쓸 수 있도록 우선순위 0 */
:where(.preview[data-demo="kiosk"]) { --kz: 0.9; }
/* 좁은 화면: 체험 · 미리보기 키오스크를 화면 폭에 맞게 (히어로 키오스크는 히어로가 직접 정함) */
@media (max-width: 400px) { :where([data-demo="kiosk"]:not([data-kiosk])) { --kz: 0.86; } }
@media (max-width: 340px) { :where([data-demo="kiosk"]:not([data-kiosk])) { --kz: 0.74; } }

@keyframes k-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.3); } 50% { box-shadow: 0 0 0 calc(10 * var(--u)) rgba(53, 104, 224, 0); } }
@keyframes k-nudge { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(calc(5 * var(--u))); opacity: 1; } }
@keyframes k-ring { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes k-press { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.95); border-color: var(--primary); background: var(--blue-50); } 70% { border-color: var(--primary); } }
@keyframes k-ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kiosk .k-step, .kiosk .k-tagwait .kd-ico, .kiosk .k-down, .kiosk .k-tap, .kiosk .k-tap::before { animation: none !important; }
}

/* ---------- 장비 카드(#hardware)의 키오스크: 같은 키오스크를 작게 ---------- */
.hw-art-kiosk .hw-kiosk { --kz: 0.22; position: relative; z-index: 1; margin-top: 4px; }

/* ===== R4 · FEAT ===== */
/* =========================================================
   2026-10-08 주요 기능 고도화 — 기능 상세 공통 시스템(fx-*) + 메인 '6가지 기능'(fxf-*)
   · 두 역할 표시: 입주민(파랑) · 관리사무소/운영사(딥블루)
   · 살아 있는 장면(.fx-scene): 480×400 고정 좌표 → --fx-s 로 칸에 맞춤
   · 동기화(.fx-duo) · 단계 시나리오(.fx-story) · AND MORE(.fx-more) · 이전/다음(.fx-pager)
   ========================================================= */

/* ---------- 0. 두 역할 표시 ---------- */
.fx-who {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
}
.fx-who svg.ico { width: 14px; height: 14px; stroke-width: 2.2; }
.fx-who.res { background: var(--blue-100); color: #2557d1; }
.fx-who.ops { background: var(--primary-deep); color: #fff; }
.fx-who.sm { height: 22px; padding: 0 8px 0 7px; font-size: 11px; gap: 4px; }
.fx-who.sm svg.ico { width: 12px; height: 12px; }

/* ---------- 1. 서브 히어로: 기능별 살아 있는 장면 ---------- */
.sub-hero.fx-hero { padding: 52px 0 60px; background: linear-gradient(180deg, #f6f9fe 0%, #edf3ff 58%, #e4ecfd 100%); }
.fx-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(53, 104, 224, 0.16) 1px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 48% 70% at 76% 46%, #000 12%, transparent 72%);
  mask-image: radial-gradient(ellipse 48% 70% at 76% 46%, #000 12%, transparent 72%);
}
.fx-hero::after {
  content: ''; position: absolute; width: 760px; height: 760px; right: -160px; top: -240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(53, 104, 224, 0.16), rgba(53, 104, 224, 0));
}
.fx-hero .sub-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; }
.fx-hero h1 { margin: 18px 0 16px; }
.fx-hero .desc { max-width: 600px; }
.fx-roles { margin-top: 26px; display: grid; gap: 8px; max-width: 560px; }
.fx-role {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 9px 16px 9px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--blue-100); box-shadow: 0 8px 20px -16px rgba(22, 56, 139, 0.45);
  font-size: 15.5px; font-weight: 700; color: var(--gray-800);
}
.fx-role .fx-who { min-width: 96px; justify-content: center; }
.fx-role .fx-role-arrow { color: var(--blue-300); display: inline-flex; margin-left: auto; }
.fx-role .fx-role-arrow svg.ico { width: 16px; height: 16px; }
.fx-hero-visual { position: relative; min-width: 0; }
.fx-scene-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 36px; }
.fx-scene-cap { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--gray-700); line-height: 1.45; transition: opacity 0.17s, transform 0.17s; }
.fx-scene-cap.swap { opacity: 0; transform: translateY(4px); }

/* 재생 · 일시정지 버튼 (장면 · 단계 · 메인 공통) */
.fx-play {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.2s var(--ease);
}
.fx-play:hover { background: var(--primary); }
.fx-play svg.ico { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.fx-play .i-play { display: none; }
.fx-play[data-state="paused"] .i-play { display: inline-flex; }
.fx-play[data-state="paused"] .i-pause { display: none; }
.fx-play[data-state="paused"] { background: var(--primary); }
.fx-play > span { display: inline-flex; }

/* ---------- 2. 장면 공통 부품 ---------- */
.fx-scene { position: relative; }
.fx-fit { position: relative; width: 100%; aspect-ratio: 480 / 400; --fx-s: 1; }
.fx-canvas { position: absolute; left: 0; top: 0; width: 480px; height: 400px; transform-origin: 0 0; scale: var(--fx-s); }
.fx-canvas > * { position: absolute; }
.fx-snap, .fx-snap * { transition: none !important; }
.fx-halo { left: 40px; top: 40px; width: 400px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); pointer-events: none; }

/* 미니 폰 */
.fx-mph {
  left: 4px; top: 44px; width: 186px; height: 352px; z-index: 3; padding: 7px; border-radius: 32px;
  background: linear-gradient(175deg, #1f2838, #0b111d);
  box-shadow: 0 40px 60px -30px rgba(17, 25, 39, 0.55), 0 12px 24px -16px rgba(22, 56, 139, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fx-mph-scr { position: relative; height: 100%; border-radius: 25px; overflow: hidden; background: #f4f6fb; display: flex; flex-direction: column; }
.fx-mph-notch { height: 24px; flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 9px; font-weight: 700; color: var(--ink); position: relative; }
.fx-mph-notch::after { content: ''; position: absolute; left: 50%; top: 6px; width: 54px; height: 14px; margin-left: -27px; border-radius: 999px; background: #0b111d; }
.fx-mph-notch i { width: 12px; height: 6px; border-radius: 2px; border: 1.3px solid var(--ink); }
.fx-mph-head { flex-shrink: 0; background: #fff; padding: 4px 12px 9px; border-bottom: 1px solid #edf0f5; }
.fx-mph-head b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.fx-mph-head small { display: block; font-size: 9px; font-weight: 600; color: var(--gray-500); }
.fx-mph-body { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.fx-mlabel { font-size: 9px; font-weight: 800; color: var(--gray-500); margin: 2px 2px -2px; }
.fx-mph-push {
  position: absolute; left: 6px; right: 6px; top: 6px; z-index: 4; display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.97); border: 1px solid #e6ebf4;
  box-shadow: 0 16px 30px -12px rgba(17, 25, 39, 0.45);
  transform: translateY(-120%); opacity: 0; transition: transform 0.55s var(--ease), opacity 0.3s;
}
.fx-mph-push.on { transform: none; opacity: 1; }
.fx-push-ico { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.fx-push-ico svg.ico { width: 13px; height: 13px; stroke-width: 2.2; }
.fx-push-ico.ok { background: var(--success); }
.fx-mph-push b { display: block; font-size: 10.5px; font-weight: 800; color: var(--ink); }
.fx-mph-push small { display: block; font-size: 9px; line-height: 1.4; color: var(--gray-600); }

/* 운영 창 (관리사무소 · 운영사 화면) */
.fx-win {
  overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid #d9e4fa;
  box-shadow: 0 34px 60px -34px rgba(22, 56, 139, 0.5), 0 2px 6px rgba(17, 25, 39, 0.05);
}
.fx-win-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid #edf1f7; background: linear-gradient(180deg, #fbfcfe, #f4f7fb); }
.fx-win-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #d6dce6; flex-shrink: 0; }
.fx-win-bar > b { margin-left: 5px; font-size: 11px; font-weight: 800; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-live { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 999px; background: #e7f8f1; color: var(--success-deep); font-size: 9.5px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.fx-live > span { width: 5px; height: 5px; border-radius: 50%; background: var(--success); animation: fx-dot-g 1.8s ease-out infinite; }
@keyframes fx-dot-g { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70%, 100% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } }
.fx-card { border-radius: 16px; background: #fff; border: 1px solid #dfe7f7; box-shadow: 0 24px 44px -30px rgba(22, 56, 139, 0.5); }

/* 시계 칩 */
.fx-clock {
  left: 4px; top: 0; z-index: 4; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 6px; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: 0 14px 26px -14px rgba(11, 17, 29, 0.6);
}
.fx-clock-ico { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; }
.fx-clock-ico svg.ico { width: 13px; height: 13px; stroke-width: 2.2; }
.fx-clock b { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.fx-clock small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.7); }

/* 증가분 · 강조 */
.fx-delta { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--blue-100); color: var(--primary); font-size: 10px; font-weight: 800; opacity: 0; }
.fx-delta.fx-pop { animation: fx-delta 1.9s var(--ease) both; }
@keyframes fx-delta { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 18% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.fx-flash { animation: fx-flash 1.2s var(--ease); }
@keyframes fx-flash { 0% { filter: brightness(1.35); box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.35); } 100% { filter: none; box-shadow: 0 0 0 0 rgba(53, 104, 224, 0); } }

/* 데이터 레일 · 패킷 */
.fx-wires { left: 0; top: 0; width: 480px; height: 400px; z-index: 5; overflow: visible; pointer-events: none; }
.fx-rail { fill: none; stroke: #b8cbf3; stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.fx-node { fill: #fff; stroke: #8fb0f2; stroke-width: 2; }
.fx-live-path { fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linecap: round; opacity: 0; transition: opacity 0.25s; filter: drop-shadow(0 0 4px rgba(53, 104, 224, 0.55)); }
.fx-live-path.on { opacity: 1; }
.fx-pk { opacity: 0; transition: opacity 0.2s; }
.fx-pk.on { opacity: 1; }
.fx-pk .halo { fill: rgba(91, 140, 255, 0.28); }
.fx-pk .h { fill: #fff; stroke: var(--primary); stroke-width: 2.4; }
.fx-pk .t1 { fill: rgba(53, 104, 224, 0.55); }
.fx-pk .t2 { fill: rgba(53, 104, 224, 0.28); }

/* ---------- 장면: 카페 운영 ---------- */
.fx-order { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 12px; background: #fff; border: 1.5px solid var(--primary); }
.fx-order-ico { width: 28px; height: 28px; border-radius: 9px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-order-ico svg.ico { width: 15px; height: 15px; }
.fx-order-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fx-order-txt b { font-size: 11.5px; font-weight: 800; color: var(--ink); }
.fx-order-txt small { font-size: 8.5px; color: var(--gray-500); font-weight: 600; }
.fx-order em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); }
.fx-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.fx-picks span { height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--gray-600); transition: all 0.3s; }
.fx-picks span.sel { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 12px -6px rgba(53, 104, 224, 0.7); }
.fx-paybtn { height: 34px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background 0.3s; }
.fx-paybtn svg.ico { width: 13px; height: 13px; stroke-width: 2.6; }
.fx-paybtn.done { background: #e7f8f1; color: var(--success-deep); animation: fx-press 0.5s var(--ease); }
.fx-paybtn b { font-weight: 800; }
@keyframes fx-press { 0% { transform: scale(0.94); } 100% { transform: none; } }
.fx-track { list-style: none; display: grid; gap: 1px; margin-top: 2px; padding: 4px 8px; border-radius: 12px; background: #fff; border: 1px solid #edf0f5; }
.fx-track li { position: relative; display: flex; align-items: center; gap: 8px; height: 25px; font-size: 10px; font-weight: 700; color: var(--gray-400); transition: color 0.3s; }
.fx-track li i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #d4dae4; background: #fff; transition: all 0.3s; }
.fx-track li.done { color: var(--gray-700); }
.fx-track li.done i { border-color: var(--success); background: var(--success); }
.fx-track li.now { color: var(--primary); }
.fx-track li.now i { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.16); }
.fx-sc-cafe .fx-sc-queue { left: 236px; top: 44px; width: 244px; height: 252px; z-index: 2; }
.fx-sc-qhead { display: grid; grid-template-columns: repeat(3, 72px); gap: 6px; padding: 9px 8px 6px; }
.fx-sc-qhead span { font-size: 10px; font-weight: 800; color: var(--gray-600); white-space: nowrap; }
.fx-sc-qhead em { font-style: normal; margin-left: 2px; color: var(--primary); }
.fx-sc-qbody { position: relative; height: 180px; margin: 0 8px; }
.fx-sc-qlane { position: absolute; top: 0; bottom: 0; width: 72px; border-radius: 10px; background: #f6f8fd; }
.fx-sc-qlane:nth-child(1) { left: 0; } .fx-sc-qlane:nth-child(2) { left: 78px; } .fx-sc-qlane:nth-child(3) { left: 156px; }
.fx-tk {
  position: absolute; left: 0; top: 0; width: 72px; height: 52px; padding: 6px 7px; border-radius: 10px; background: #fff; border: 1px solid #e1e8f5;
  box-shadow: 0 6px 12px -8px rgba(22, 56, 139, 0.4); display: flex; flex-direction: column; line-height: 1.2;
  opacity: 0; transition: transform 0.65s var(--ease), opacity 0.35s, box-shadow 0.3s;
}
.fx-tk.in { opacity: 1; }
.fx-tk.gone { opacity: 0; }
.fx-tk.me { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(53, 104, 224, 0.16), 0 8px 16px -8px rgba(53, 104, 224, 0.55); }
.fx-tk-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.fx-tk-top b { font-size: 9px; font-weight: 700; color: var(--gray-500); }
.fx-tk-top em { font-style: normal; font-size: 7.5px; font-weight: 800; color: var(--primary); background: var(--blue-50); border-radius: 4px; padding: 1px 3px; white-space: nowrap; }
.fx-tk-name { margin-top: 3px; font-size: 10.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fx-tk small { font-size: 8.5px; font-weight: 600; color: var(--gray-500); }
.fx-sc-cafe .fx-sc-sales { left: 236px; top: 306px; width: 244px; height: 90px; z-index: 2; padding: 11px 12px; display: flex; gap: 10px; align-items: flex-end; }
.fx-sc-sales-txt { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.fx-sc-sales-txt small { font-size: 9.5px; font-weight: 700; color: var(--gray-500); }
.fx-sc-sales-txt b { margin-top: auto; font-size: 20px; font-weight: 700; color: var(--primary); line-height: 1.1; }
.fx-sc-sales-txt b em { font-style: normal; font-family: var(--font); font-size: 11px; color: var(--gray-500); margin-left: 1px; }
.fx-sc-sales-txt .fx-delta { position: absolute; right: 0; top: 18px; }
.fx-sc-bars { display: flex; gap: 6px; align-items: flex-end; height: 64px; }
.fx-sc-bars span { width: 20px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.fx-sc-bars i { display: block; width: 12px; border-radius: 4px 4px 0 0; background: var(--primary); transition: height 0.6s var(--ease); max-height: 44px; }
.fx-sc-bars span:not(:first-child) i { background: #9db8f2; }
.fx-sc-bars small { font-size: 7.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }

/* ---------- 3. 입주민 ↔ 운영 화면 동기화 ---------- */
.fx-sync .sec-head { margin-bottom: 44px; }
.fx-duo { display: grid; grid-template-columns: minmax(0, 0.92fr) 104px minmax(0, 1.32fr); align-items: stretch; }
.fx-side { min-width: 0; display: flex; flex-direction: column; }
.fx-side-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 30px; }
.fx-side-h b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.fx-dev {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 34px 20px; min-height: 680px;
  border-radius: var(--r-xl); background: linear-gradient(160deg, #f3f7ff 0%, #e5edfd 100%); border: 1px solid var(--blue-100);
}
.fx-dev-ops { background: linear-gradient(160deg, #eef2fa 0%, #e2e9f7 100%); border-color: #d9e2f2; padding: 30px 26px; }
.fx-dev-ops::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(rgba(22, 56, 139, 0.12) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.fx-pts { margin-top: 18px; display: grid; gap: 10px; }
.fx-pts li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--gray-700); }
.fx-pts li > svg.ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; stroke-width: 3; background: var(--blue-100); color: var(--primary); }
.fx-side-ops .fx-pts li > svg.ico { background: var(--primary-deep); color: #fff; }

/* 가운데 연결 레일 */
.fx-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 44px; }
.fx-link-line { position: relative; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, #a5bff4 0 5px, transparent 5px 10px); }
.fx-link-line::before, .fx-link-line::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid #8fb0f2; }
.fx-link-line::before { left: -4px; } .fx-link-line::after { right: -4px; }
.fx-link-pkw { position: absolute; inset: 0; pointer-events: none; }
.fx-link-pk { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 0 0 6px rgba(91, 140, 255, 0.22); opacity: 0; }
.fx-link.go .fx-link-pkw { animation: fx-pk-x 0.85s cubic-bezier(0.45, 0, 0.55, 1) both; }
.fx-link.go .fx-link-pk { animation: fx-pk-o 0.85s linear both; }
.fx-link.go.rev .fx-link-pkw { animation-name: fx-pk-xr; }
.fx-link.go .fx-link-line { background: repeating-linear-gradient(90deg, var(--primary) 0 5px, transparent 5px 10px); transition: background 0.2s; }
@keyframes fx-pk-x { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes fx-pk-xr { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fx-pk-o { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.fx-link-tag { margin-top: 14px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-200); font-size: 12px; font-weight: 800; color: var(--primary); white-space: nowrap; box-shadow: 0 8px 16px -12px rgba(53, 104, 224, 0.6); }
.fx-link-tag svg.ico { width: 13px; height: 13px; stroke-width: 2.4; }
.fx-link.go .fx-link-tag { animation: fx-tag 0.9s var(--ease); }
@keyframes fx-tag { 40% { transform: scale(1.08); background: var(--primary); color: #fff; } }

/* 반영 기록 한 줄 */
.fx-synclog {
  display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 26px auto 0; padding: 13px 18px; border-radius: 14px;
  background: #fff; border: 1px solid var(--blue-100); box-shadow: var(--shadow-sm); font-size: 14.5px; color: var(--gray-600); line-height: 1.55;
}
.fx-synclog b { color: var(--ink); font-weight: 800; }
.fx-synclog-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16); }
.fx-synclog.fx-flash { animation: fx-logflash 1.4s var(--ease); }
@keyframes fx-logflash { 0% { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.16); } 100% { border-color: var(--blue-100); box-shadow: var(--shadow-sm); } }

/* 운영 화면 공통 */
.fx-board { position: relative; z-index: 1; width: 100%; max-width: 560px; }
.fx-board-win { border-radius: 18px; }
.fx-board-win .fx-win-bar { height: 36px; padding: 0 14px; }
.fx-board-win .fx-win-bar > b { font-size: 12.5px; }
.fx-board-win .fx-live { height: 21px; font-size: 10.5px; padding: 0 9px; }
.fx-bd { padding: 16px 18px 18px; }
.fx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-kpi { position: relative; min-width: 0; padding: 10px 12px; border-radius: 12px; background: #f6f8fd; border: 1px solid #e6ecf7; }
.fx-kpi small { display: block; font-size: 11px; font-weight: 700; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kpi b { display: block; margin-top: 3px; font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.2; white-space: nowrap; }
.fx-kpi b em { font-style: normal; font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--gray-500); margin-left: 2px; }
.fx-kpi.blue b { color: var(--primary); }
.fx-sub-h { display: flex; align-items: baseline; gap: 6px; margin: 16px 2px 8px; font-size: 12.5px; font-weight: 800; color: var(--gray-700); }
.fx-sub-h small { font-size: 11px; font-weight: 600; color: var(--gray-400); }
.fx-hit { animation: fx-hit 1.6s var(--ease); }
@keyframes fx-hit { 0% { box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.45); background-color: var(--blue-50); } 100% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0); } }

/* 카페 운영사 화면 */
.fx-queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-qcol { min-width: 0; border-radius: 12px; background: #f6f8fd; padding: 8px; min-height: 150px; }
.fx-qcol h5 { font-size: 11px; font-weight: 800; color: var(--gray-600); margin: 0 2px 7px; }
.fx-qlist { display: grid; gap: 6px; }
.fx-qtk { position: relative; padding: 8px 9px; border-radius: 10px; background: #fff; border: 1px solid #e1e8f5; display: flex; flex-direction: column; line-height: 1.25; animation: fx-in 0.45s var(--ease); }
.fx-qtk.me { border-color: var(--primary); }
.fx-qtk .fx-tk-top b { font-size: 10.5px; }
.fx-qtk .fx-tk-top em { font-size: 9px; padding: 1px 5px; }
.fx-qtk .fx-tk-name { font-size: 12.5px; }
.fx-qtk small { font-size: 10px; font-weight: 600; color: var(--gray-500); }
.fx-qtk-push { margin-top: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; color: var(--success-deep); }
.fx-qtk-push svg.ico { width: 11px; height: 11px; stroke-width: 2.4; }
@keyframes fx-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.fx-menu { display: grid; gap: 4px; }
.fx-mrow { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px 70px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; font-size: 12px; }
.fx-mrow-n { font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.fx-mrow-bar { height: 8px; border-radius: 999px; background: #edf1f8; overflow: hidden; }
.fx-mrow-bar i { display: block; height: 100%; border-radius: 4px; background: var(--primary); transition: width 0.5s var(--ease); }
.fx-mrow b { font-weight: 700; color: var(--ink); text-align: right; }
.fx-mrow-w { color: var(--gray-500); font-size: 11px; text-align: right; }

/* ---------- 4. 단계 시나리오 ---------- */
.fx-story { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.fx-steps { display: flex; flex-direction: column; gap: 8px; }
.fx-step {
  position: relative; width: 100%; text-align: left; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start;
  padding: 16px 18px 18px; border-radius: 18px; background: #fff; border: 1.5px solid var(--gray-200); overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.fx-step:hover { border-color: var(--blue-300); }
.fx-step-no { width: 40px; height: 40px; border-radius: 12px; background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; transition: background 0.2s, color 0.2s; }
.fx-step-txt { min-width: 0; padding-top: 1px; }
.fx-step-txt b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--gray-700); line-height: 1.35; }
.fx-step-txt small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.6; color: var(--gray-500); }
.fx-step-bar { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 999px; background: transparent; overflow: hidden; }
.fx-step-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--primary); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.fx-step[aria-selected="true"] { border-color: var(--primary); background: #fff; box-shadow: 0 18px 36px -22px rgba(53, 104, 224, 0.6); }
.fx-step[aria-selected="true"] .fx-step-no { background: var(--primary); color: #fff; }
.fx-step[aria-selected="true"] .fx-step-txt b { color: var(--ink); }
.fx-step[aria-selected="true"] .fx-step-bar { background: var(--blue-100); }
.fx-step.done .fx-step-no { background: var(--blue-100); color: var(--primary); }
.fx-frames {
  position: relative; min-height: 420px; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, #f3f7ff 0%, #e5edfd 100%); border: 1px solid var(--blue-100);
}
.fx-frames::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(53, 104, 224, 0.13) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.fx-frame { position: relative; z-index: 1; height: 100%; padding: 30px 30px 74px; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; }
.fx-frame[hidden] { display: none !important; }
.fx-lane { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-lane > .fx-who { align-self: flex-start; }
.fx-lane-arrow { position: relative; height: 2px; margin: 0 8px; background: repeating-linear-gradient(90deg, #8fb0f2 0 5px, transparent 5px 10px); }
.fx-lane-arrow::after { content: ''; position: absolute; right: -2px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid #8fb0f2; border-right: 2px solid #8fb0f2; transform: rotate(45deg); }
.fx-lane-arrow.rev::after { right: auto; left: -2px; transform: rotate(-135deg); }
.fx-lane-arrow i { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(91, 140, 255, 0.22); opacity: 0; }
.fx-frame.is-play .fx-lane-arrow i { animation: fx-lane-pk 1.1s 0.55s cubic-bezier(0.45, 0, 0.55, 1) both; }
.fx-frame.is-play .fx-lane-arrow.rev i { animation-name: fx-lane-pkr; }
@keyframes fx-lane-pk { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fx-lane-pkr { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.fx-frame.is-play .fx-lane.res > :not(.fx-who) { animation: fx-rise 0.6s var(--ease) both; }
.fx-frame.is-play .fx-lane.ops > :not(.fx-who) { animation: fx-rise 0.6s var(--ease) 1.25s both; }
.fx-frame.is-play .fx-lane > :nth-child(3) { animation-delay: 0.15s; }
.fx-frame.is-play .fx-lane.ops > :nth-child(3) { animation-delay: 1.4s; }
.fx-frame.is-play .fx-lane > :nth-child(4) { animation-delay: 0.3s; }
.fx-frame.is-play .fx-lane.ops > :nth-child(4) { animation-delay: 1.55s; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fx-story-ctrl { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.fx-story-count { margin-right: auto; margin-left: 4px; font-size: 14px; font-weight: 700; color: var(--gray-500); }
.fx-story-count b { color: var(--ink); }
.fx-arrow-btn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--gray-200); color: var(--gray-700); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; }
.fx-arrow-btn:hover { border-color: var(--primary); color: var(--primary); }
.fx-arrow-btn svg.ico { width: 17px; height: 17px; stroke-width: 2.2; }
.fx-story-sec .flow-results { margin-top: 16px; }
.fx-story-sec .flow-result { transition: box-shadow 0.4s, transform 0.4s var(--ease); }
.fx-story-sec .flow-result.lit { box-shadow: 0 14px 28px -18px rgba(4, 120, 87, 0.55); transform: translateY(-2px); }
.fx-story-sec .flow-result.no.lit { box-shadow: 0 14px 28px -18px rgba(185, 28, 28, 0.5); }

/* 시나리오 안 화면 조각 */
.fx-ui { border-radius: 16px; background: #fff; border: 1px solid #e1e8f5; box-shadow: 0 18px 36px -26px rgba(22, 56, 139, 0.55); padding: 14px 16px; }
.fx-ui-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.fx-ui-h svg.ico { width: 16px; height: 16px; color: var(--primary); }
.fx-ui-h .fx-tag { margin-left: auto; }
.fx-ui-big { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; }
.fx-ui-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--gray-500); line-height: 1.55; }
.fx-ui-rows { margin-top: 8px; display: grid; }
.fx-ui-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid #f0f2f6; }
.fx-ui-rows > div:last-child { border-bottom: 0; }
.fx-ui-rows span { color: var(--gray-500); }
.fx-ui-rows b { font-weight: 800; color: var(--ink); text-align: right; }
.fx-push { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.98); border: 1px solid #e6ebf4; box-shadow: 0 18px 34px -20px rgba(17, 25, 39, 0.45); }
.fx-push .fx-push-ico { width: 30px; height: 30px; border-radius: 10px; }
.fx-push .fx-push-ico svg.ico { width: 15px; height: 15px; }
.fx-push > div > b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.fx-push > div > span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
.fx-push > div > small { display: block; font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.fx-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--blue-50); color: var(--primary); }
.fx-tag svg.ico { width: 11px; height: 11px; stroke-width: 2.6; }
.fx-tag.ok { background: #e7f8f1; color: var(--success-deep); }
.fx-tag.warn { background: #fff4e0; color: var(--warning-deep); }
.fx-tag.no { background: #fdeaea; color: var(--danger-deep); }
.fx-tag.dark { background: var(--primary-deep); color: #fff; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: #fff; border: 1px solid #e1e8f5; font-size: 13px; font-weight: 700; color: var(--gray-700); }
.fx-chip svg.ico { width: 15px; height: 15px; color: var(--primary); }
.fx-chip.on { border-color: var(--primary); background: var(--blue-50); color: var(--primary); }
.fx-ui-qcols { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-ui-qcols > div { min-height: 84px; border-radius: 10px; background: #f6f8fd; padding: 6px; }
.fx-ui-qcols h6 { font-size: 10.5px; font-weight: 800; color: var(--gray-500); margin: 0 2px 5px; }
.fx-ui-qcols .fx-qtk { animation: none; padding: 6px 7px; }
.fx-ui-qcols .fx-qtk .fx-tk-name { font-size: 11.5px; }
.fx-bars-mini { margin-top: 10px; display: flex; gap: 10px; align-items: flex-end; height: 92px; padding: 0 4px; border-bottom: 1px solid #e6ecf5; }
.fx-bars-mini span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.fx-bars-mini i { display: block; width: 60%; max-width: 22px; border-radius: 4px 4px 0 0; background: #9db8f2; }
.fx-bars-mini span.top i { background: var(--primary); }
.fx-bars-mini b { font-size: 10.5px; font-weight: 700; color: var(--gray-600); }
.fx-bars-mini small { font-size: 10.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; margin-bottom: -20px; }
.fx-frame.is-play .fx-bars-mini i { animation: fx-grow 0.8s var(--ease) 1.4s both; transform-origin: bottom; }
@keyframes fx-grow { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- 5. AND MORE ---------- */
.fx-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fx-more.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-more.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-mcard {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 22px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--gray-200); transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.2s;
}
.fx-mcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.fx-mcard .ic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fx-mcard .ic-ico { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, #eaf0fd, #d9e5fc); color: var(--primary); display: flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s; }
.fx-mcard:hover .ic-ico { background: var(--primary); color: #fff; }
.fx-mcard .ic-ico svg.ico { width: 22px; height: 22px; }
.fx-mcard .ic-no { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--gray-300); }
.fx-mcard h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.fx-mcard p { margin-top: 8px; font-size: 15px; color: var(--gray-500); line-height: 1.7; }
.fx-mini {
  margin-top: auto; padding-top: 18px;
}
.fx-mini-box { position: relative; border-radius: 14px; background: var(--gray-50); border: 1px solid var(--gray-100); padding: 12px 13px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 6px; overflow: hidden; }
.fx-mini-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-600); font-weight: 600; }
.fx-mini-row b { color: var(--ink); font-weight: 800; }
.fx-mini-row .fx-tag { margin-left: auto; }
.fx-mini-row > svg.ico { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.fx-mini-tog { margin-left: auto; position: relative; width: 32px; height: 19px; border-radius: 999px; background: #d4dae4; transition: background 0.3s; flex-shrink: 0; }
.fx-mini-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--ease); }
.fx-mini-tog.on, .fx-mcard:hover .fx-mini-tog.flip { background: var(--primary); }
.fx-mini-tog.on::after, .fx-mcard:hover .fx-mini-tog.flip::after { transform: translateX(13px); }
.fx-mcard:hover .fx-mini-tog.on.flip { background: #d4dae4; }
.fx-mcard:hover .fx-mini-tog.on.flip::after { transform: none; }
.fx-mini-bar { flex: 1; height: 6px; border-radius: 999px; background: #e3e8f1; overflow: hidden; }
.fx-mini-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 0.6s var(--ease); }
.fx-mini-spark { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.fx-mini-spark i { flex: 1; border-radius: 3px 3px 0 0; background: #b9cdf6; transition: height 0.5s var(--ease); }
.fx-mini-spark i.top { background: var(--primary); }
.fx-mcard:hover .fx-mini-spark i { filter: saturate(1.2); }

/* ---------- 6. 이전 · 다음 기능 ---------- */
.fx-pager .fx-pg { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.fx-pager .fx-pg.next { align-items: stretch; text-align: left; }
.fx-pg-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--gray-400); }
.fx-pg.next .fx-pg-dir { align-self: flex-end; }
.fx-pg-dir svg.ico { width: 15px; height: 15px; }
.fx-pg-body { display: flex; align-items: center; gap: 14px; }
.fx-pg.next .fx-pg-body { flex-direction: row-reverse; text-align: right; }
.fx-pg-ico { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.fx-pg-ico svg.ico { width: 24px; height: 24px; }
.fx-pg:hover .fx-pg-ico { background: var(--primary); color: #fff; }
.fx-pg-txt { min-width: 0; display: flex; flex-direction: column; }
.fx-pg-txt small { font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary); }
.fx-pg-txt b { font-size: 19px; font-weight: 800; }
.fx-pg-txt > span { font-size: 14px; color: var(--gray-500); }

/* 화면 밖에서는 반복 애니메이션 정지 */
.fx-off *, .fx-off *::before, .fx-off *::after { animation-play-state: paused !important; }

/* ---------- 7. 반응형 ---------- */
@media (max-width: 1200px) {
  .fx-hero .sub-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; }
  .fx-duo { grid-template-columns: minmax(0, 0.95fr) 84px minmax(0, 1.2fr); }
  .fx-story { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .fx-hero .sub-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .fx-hero-visual { width: 100%; max-width: 520px; margin: 0 auto; }
  .fx-duo { grid-template-columns: 1fr; gap: 0; }
  .fx-link { flex-direction: row; gap: 14px; padding: 18px 0; height: 104px; }
  .fx-link-line { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, #a5bff4 0 5px, transparent 5px 10px); }
  .fx-link.go .fx-link-line { background: repeating-linear-gradient(180deg, var(--primary) 0 5px, transparent 5px 10px); }
  .fx-link-line::before, .fx-link-line::after { left: 50%; margin-left: -4.5px; top: auto; margin-top: 0; }
  .fx-link-line::before { top: -4px; } .fx-link-line::after { bottom: -4px; right: auto; }
  .fx-link-pk { left: 50%; top: 0; margin: -7px 0 0 -7px; }
  .fx-link.go .fx-link-pkw { animation-name: fx-pk-y; }
  .fx-link.go.rev .fx-link-pkw { animation-name: fx-pk-yr; }
  .fx-link-tag { margin-top: 0; }
  .fx-dev { min-height: 0; }
  .fx-story { grid-template-columns: 1fr; gap: 16px; }
  .fx-more, .fx-more.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes fx-pk-y { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes fx-pk-yr { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 767px) {
  .sub-hero.fx-hero { padding: 36px 0 44px; }
  .fx-role { font-size: 14px; padding: 8px 12px 8px 8px; gap: 10px; }
  .fx-role .fx-who { min-width: 84px; }
  .fx-role .fx-role-arrow { display: none; }
  .fx-scene-cap { font-size: 13px; }
  .fx-side-h b { font-size: 16px; }
  .fx-dev { padding: 24px 12px; border-radius: 22px; }
  .fx-dev-ops { padding: 16px 10px; }
  .fx-pts li { font-size: 14.5px; }
  .fx-synclog { font-size: 13.5px; padding: 12px 14px; align-items: flex-start; }
  .fx-synclog-dot { margin-top: 6px; }
  .fx-bd { padding: 12px 12px 14px; }
  .fx-kpi { padding: 8px 9px; }
  .fx-kpi small { font-size: 10px; }
  .fx-kpi b { font-size: 16px; }
  .fx-kpi b em { font-size: 10px; }
  .fx-mrow { grid-template-columns: 62px minmax(0, 1fr) 34px; gap: 8px; font-size: 11.5px; }
  .fx-mrow-w { display: none; }
  .fx-step { padding: 13px 14px 15px; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; border-radius: 16px; }
  .fx-step-no { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .fx-step-txt b { font-size: 15.5px; }
  .fx-step-txt small { display: none; font-size: 13.5px; }
  .fx-step[aria-selected="true"] .fx-step-txt small { display: block; }
  .fx-step-bar { left: 14px; right: 14px; bottom: 7px; }
  .fx-frames { min-height: 0; border-radius: 22px; }
  .fx-frame { grid-template-columns: 1fr; grid-template-rows: auto 40px auto; padding: 20px 14px 70px; }
  .fx-lane-arrow { width: 2px; height: 100%; margin: 0 auto; background: repeating-linear-gradient(180deg, #8fb0f2 0 5px, transparent 5px 10px); }
  .fx-lane-arrow::after { right: auto; left: 50%; top: auto; bottom: -2px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .fx-lane-arrow.rev::after { left: 50%; bottom: auto; top: -2px; transform: rotate(-45deg); }
  .fx-lane-arrow i { left: 50%; top: 0; margin: -5px 0 0 -5px; }
  .fx-frame.is-play .fx-lane-arrow i { animation-name: fx-lane-pky; }
  .fx-frame.is-play .fx-lane-arrow.rev i { animation-name: fx-lane-pkyr; }
  .fx-ui { padding: 12px 13px; }
  .fx-ui-big { font-size: 19px; }
  .fx-story-ctrl { left: 14px; right: 14px; bottom: 14px; }
  .fx-more, .fx-more.c4, .fx-more.c2 { grid-template-columns: 1fr; gap: 14px; }
  .fx-mcard { padding: 22px 20px 20px; }
  .fx-pager .fx-pg.next .fx-pg-body { flex-direction: row; text-align: left; }
  .fx-pg.next .fx-pg-dir { align-self: flex-start; }
}
@keyframes fx-lane-pky { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fx-lane-pkyr { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-link-pk, .fx-lane-arrow i { display: none; }
  .fx-live > span { animation: none; }
}

/* ---------- 카페: 시나리오 · 리포트 · AND MORE 조각 ---------- */
.fx-track-lg { margin-top: 10px; padding: 4px 12px; }
.fx-track-lg li { height: 34px; font-size: 13px; gap: 10px; }
.fx-track-lg li i { width: 11px; height: 11px; }
.fx-settle > div { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; }
.fx-settle em { font-style: normal; font-size: 11.5px; color: var(--gray-400); font-weight: 600; }
.fx-report { min-width: 0; }
.fx-rp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fx-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: #eef1f6; }
.fx-seg button { height: 34px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; font-weight: 800; color: var(--gray-500); transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.fx-seg button:hover { color: var(--ink); }
.fx-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17, 25, 39, 0.14); }
.fx-rp-total { display: inline-flex; align-items: baseline; gap: 6px; }
.fx-rp-total small { font-size: 12px; font-weight: 700; color: var(--gray-500); }
.fx-rp-total b { font-size: 24px; font-weight: 700; color: var(--ink); }
.fx-rp-total em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gray-500); }
.fx-rp-chart { list-style: none; display: flex; align-items: flex-end; gap: 10px; height: 230px; margin-top: 18px; padding: 26px 6px 0; border-bottom: 1px solid #dfe5ef; background: repeating-linear-gradient(180deg, transparent 0 50px, #f1f4f9 50px 51px); }
.fx-rp-chart li { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.fx-rp-chart li i { display: block; width: 62%; max-width: 40px; border-radius: 4px 4px 0 0; background: #9db8f2; transition: height 0.7s var(--ease), background 0.2s; }
.fx-rp-chart li.top i { background: var(--primary); }
.fx-rp-chart li:hover i, .fx-rp-chart li:focus-visible i { background: #2557d1; }
.fx-rp-chart li .v { font-size: 12.5px; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; }
.fx-rp-chart li.top .v, .fx-rp-chart li:hover .v, .fx-rp-chart li:focus-visible .v { opacity: 1; transform: none; }
.fx-rp-chart li:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); border-radius: 8px 8px 0 0; }
.fx-rp-chart li small { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.fx-rp-chart.n4 small { font-size: 12.5px; }
.fx-rp-note { margin-top: 38px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; background: var(--blue-50); font-size: 14px; color: #23407f; line-height: 1.5; }
.fx-rp-note::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.fx-rp-note b { color: var(--primary-deep); font-weight: 800; }
.fx-split { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.fx-split i { display: block; background: var(--primary); }
.fx-split i + i { background: #0ea5c6; }
.fx-key { width: 9px; height: 9px; border-radius: 3px; background: var(--primary); flex-shrink: 0; }
.fx-key.b { background: #0ea5c6; margin-left: 6px; }
.fx-mini-eq { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; font-size: 12px; font-weight: 800; color: var(--primary); }
.fx-mini-eq svg.ico { width: 14px; height: 14px; stroke-width: 2.6; }
@media (max-width: 767px) {
  .fx-rp-chart { height: 190px; gap: 6px; }
  .fx-rp-chart li small { font-size: 11px; }
  .fx-rp-chart.n4 small { font-size: 11.5px; }
  .fx-rp-total b { font-size: 20px; }
  .fx-seg button { padding: 0 13px; font-size: 13px; }
}
.fx-tk-tag { align-self: flex-start; margin-top: 2px; font-style: normal; font-size: 8.5px; font-weight: 800; color: var(--primary); background: var(--blue-50); border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.fx-qtk .fx-tk-tag { font-size: 10px; padding: 1px 5px; }
.fx-rp-chart li i { flex-shrink: 0; }

/* 카페 원격 주문 체험(DEMO.cafe): 메뉴 2열 · 픽업 시간 · 결제 버튼이 스크롤 없이 한 화면에 */
.cafe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cafe-item { text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 10px 11px; border-radius: 13px; background: #fff; border: 1.5px solid var(--gray-200); transition: border-color 0.13s, background 0.13s; position: relative; }
.cafe-item:hover { border-color: var(--blue-300); }
.cafe-item small { font-size: 9.5px; font-weight: 800; color: var(--primary); letter-spacing: 0.04em; }
.cafe-item b { font-size: 13px; font-weight: 800; color: var(--ink); }
.cafe-item span { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.cafe-item.sel { border-color: var(--primary); background: var(--blue-50); }
.cafe-item.sel::after { content: '✓'; position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.date-chip.cafe-when { flex: 1; width: auto; }
.date-chip.cafe-when b { font-size: 12.5px; }

/* 시나리오 화면 조각: 넓은 화면에서 조금 더 크게 */
@media (min-width: 1024px) {
  .fx-frame .fx-ui { padding: 16px 18px; }
  .fx-frame .fx-ui-h { font-size: 14.5px; }
  .fx-frame .fx-ui-rows > div { font-size: 13.5px; padding: 8px 0; }
  .fx-frame .fx-ui-sub { font-size: 13.5px; }
  .fx-frame .fx-push > div > b { font-size: 14px; }
  .fx-frame .fx-push > div > span { font-size: 13px; }
  .fx-frame { gap: 0; }
}

/* 2026-10-08 검토 반영: 한국어 머리 라벨 · 좁은 화면 여백 · 줄바꿈 */
.eyebrow.ko { text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
@media (max-width: 767px) {
  .eyebrow.ko { font-size: 13px; }
  /* 플로팅 [도입 문의] · TOP 버튼과 겹치지 않게: 단계 넘김 버튼은 왼쪽에 모으고 장면 오른쪽 여백을 넓힘 */
  .fx-story-ctrl { justify-content: flex-start; }
  .fx-story-count { margin-right: 6px; }
  .fx-frame { padding-right: 24px; }
}

/* ---------- 장면: 골프 타석 ---------- */
.fx-sc-golf .fx-sc-push {
  left: 214px; top: 0; width: 266px; z-index: 6; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 14px;
  opacity: 0; transform: translateY(-10px) scale(0.97); transition: opacity 0.35s, transform 0.5s var(--ease);
}
.fx-sc-golf .fx-sc-push.on { opacity: 1; transform: none; }
.fx-sc-push b { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink); }
.fx-sc-push small { display: block; font-size: 10px; line-height: 1.45; color: var(--gray-600); }
.fx-bays { left: 0; top: 76px; width: 480px; height: 194px; display: flex; gap: 10px; }
.fx-bay {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 8px 8px 9px; border-radius: 14px;
  background: #fff; border: 1px solid #dfe7f7; box-shadow: 0 18px 30px -24px rgba(22, 56, 139, 0.55); transition: border-color 0.4s, box-shadow 0.4s;
}
.fx-bay-scr {
  position: relative; height: 92px; border-radius: 9px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, #1a2436, #0d1626); color: rgba(255, 255, 255, 0.16); transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}
.fx-bay-scr svg.ico { width: 26px; height: 26px; position: relative; z-index: 1; }
.fx-bay-fair { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s; background:
  radial-gradient(120% 70% at 50% 120%, rgba(91, 214, 150, 0.55) 0 38%, transparent 39%),
  radial-gradient(140% 90% at 50% 130%, rgba(255, 255, 255, 0.12) 0 50%, transparent 51%); }
.fx-bay-mat { position: relative; height: 52px; border-radius: 8px; background: repeating-linear-gradient(90deg, #2c3648 0 6px, #283244 6px 12px); transition: background 0.5s; }
.fx-bay-tee { position: absolute; left: 50%; bottom: 12px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #5d6880; transition: background 0.4s, box-shadow 0.4s; }
.fx-bay-box { position: absolute; right: 6px; top: 6px; width: 14px; height: 18px; border-radius: 4px; background: #3a4558; }
.fx-bay-box::after { content: ''; position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #64748b; transition: background 0.4s, box-shadow 0.4s; }
.fx-bay-lb { display: flex; align-items: center; gap: 5px; padding: 0 2px; }
.fx-bay-lb::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #c3cad6; transition: background 0.4s, box-shadow 0.4s; }
.fx-bay-lb b { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.fx-bay-lb small { margin-left: auto; font-size: 9.5px; font-weight: 800; color: var(--gray-400); white-space: nowrap; }
.fx-bay.on .fx-bay-scr { background: linear-gradient(170deg, #4a7ff0, #1f4cc4); color: #fff; box-shadow: 0 0 22px rgba(91, 140, 255, 0.55); }
.fx-bay.on .fx-bay-fair { opacity: 1; }
.fx-bay.on .fx-bay-mat { background: repeating-linear-gradient(90deg, #37a874 0 6px, #2f9b6a 6px 12px); }
.fx-bay.on .fx-bay-tee { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); }
.fx-bay.on .fx-bay-box::after, .fx-bay.on .fx-bay-lb::before { background: #34d399; box-shadow: 0 0 7px rgba(52, 211, 153, 0.9); }
.fx-bay.on .fx-bay-lb small { color: var(--success-deep); }
.fx-bay.rsv { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.14), 0 18px 30px -24px rgba(22, 56, 139, 0.55); }
.fx-bay.rsv .fx-bay-scr { box-shadow: inset 0 0 0 1.5px rgba(122, 160, 255, 0.7); }
.fx-bay.rsv .fx-bay-lb::before { background: var(--primary); }
.fx-bay.rsv .fx-bay-lb small { color: var(--primary); }
.fx-bay.me.on { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2), 0 24px 40px -24px rgba(16, 185, 129, 0.6); }
.fx-bay.me.on .fx-bay-scr { animation: fx-powerup 0.9s var(--ease); }
@keyframes fx-powerup { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.fx-bay.end .fx-bay-lb small { color: var(--gray-500); }
.fx-bay-cone { position: absolute; left: 8px; right: 8px; top: -40px; height: 46px; pointer-events: none; opacity: 0; transition: opacity 0.6s; background: linear-gradient(180deg, rgba(255, 236, 170, 0), rgba(255, 236, 170, 0.55)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.fx-bay.on .fx-bay-cone { opacity: 1; }
.fx-bay.lock .fx-bay-lb small { color: var(--danger-deep); }
.fx-bay.lock .fx-bay-scr::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.6); animation: fx-lockpulse 1.2s ease-in-out 2; }
@keyframes fx-lockpulse { 50% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.15); } }
.fx-sc-ctl { left: 0; top: 290px; width: 480px; height: 106px; }
.fx-sc-count { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--primary); margin-right: 6px; }
.fx-sc-count + .fx-live { margin-left: 0; }
.fx-sc-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; padding: 9px 10px 6px; }
.fx-sc-cells i { height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-num); font-size: 9.5px; font-weight: 700; color: var(--gray-400); background: #eef1f6; transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.fx-sc-cells i.on { background: #dff5ec; color: var(--success-deep); }
.fx-sc-cells i.rsv { background: var(--blue-50); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.fx-sc-feed { display: flex; align-items: center; gap: 8px; margin: 0 10px; height: 30px; padding: 0 8px; border-radius: 8px; background: #f6f8fd; }
.fx-sc-feed-ico { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: var(--blue-100); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.fx-sc-feed-ico svg.ico { width: 11px; height: 11px; stroke-width: 2.4; }
.fx-sc-feed.ok .fx-sc-feed-ico { background: #dff5ec; color: var(--success-deep); }
.fx-sc-feed b { font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fx-sc-feed small { margin-left: auto; font-size: 9.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.fx-row-in { animation: fx-row-in 0.7s var(--ease); }
@keyframes fx-row-in { 0% { opacity: 0; transform: translateY(-6px); background-color: var(--blue-50); } 100% { opacity: 1; transform: none; } }

/* ---------- 장면: 출입 통제 ---------- */
.fx-methods { left: 0; top: 0; display: flex; gap: 6px; z-index: 3; }
.fx-methods span { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 9px; border-radius: 10px; background: #fff; border: 1px solid #dfe7f7; font-size: 12px; font-weight: 800; color: var(--gray-500); transition: all 0.3s; box-shadow: 0 8px 16px -14px rgba(22, 56, 139, 0.5); }
.fx-methods svg.ico { width: 15px; height: 15px; }
.fx-methods span.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 10px 20px -10px rgba(53, 104, 224, 0.7); }
.fx-gate { left: 0; top: 46px; width: 262px; height: 352px; }
.fx-reader { position: absolute; left: 51px; top: 0; width: 160px; height: 146px; border-radius: 18px; background: linear-gradient(175deg, #1f2838, #0b111d); padding: 8px; box-shadow: 0 26px 40px -24px rgba(11, 17, 29, 0.7); }
.fx-reader::after { content: ''; position: absolute; left: 50%; bottom: -16px; width: 14px; height: 16px; margin-left: -7px; background: #1a2232; }
.fx-reader-scr { height: 100%; border-radius: 12px; background: #0f1a2e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; transition: background 0.4s, box-shadow 0.4s; }
.fx-reader-scr b { font-size: 12.5px; font-weight: 800; color: #fff; }
.fx-reader-scr small { font-size: 9.5px; font-weight: 600; color: rgba(232, 237, 245, 0.6); white-space: nowrap; }
.fx-rd-vis { position: relative; width: 48px; height: 48px; margin-bottom: 3px; border-radius: 14px; background: rgba(91, 140, 255, 0.14); color: #9dbaff; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background 0.3s, color 0.3s; }
.fx-rd-ico { display: none; }
.fx-rd-ico svg.ico { width: 28px; height: 28px; stroke-width: 1.6; }
.fx-rd-vis[data-v="face"] [data-v="face"], .fx-rd-vis[data-v="card"] [data-v="card"], .fx-rd-vis[data-v="finger"] [data-v="finger"] { display: flex; }
.fx-rd-scan { position: absolute; left: 4px; right: 4px; top: 6px; height: 2px; border-radius: 2px; background: #7aa0ff; box-shadow: 0 0 8px #7aa0ff; opacity: 0; }
.fx-gate[data-state="scan"] .fx-rd-scan { opacity: 1; animation: fx-scanline 0.75s ease-in-out infinite alternate; }
@keyframes fx-scanline { from { top: 6px; } to { top: 40px; } }
.fx-gate[data-state="check"] .fx-reader-scr { box-shadow: inset 0 0 0 2px rgba(122, 160, 255, 0.5); }
.fx-gate[data-state="check"] .fx-rd-vis { animation: fx-breath 0.6s ease-in-out infinite alternate; }
@keyframes fx-breath { to { background: rgba(91, 140, 255, 0.3); } }
.fx-gate[data-state="open"] .fx-reader-scr { background: #0c2a22; box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0.6); }
.fx-gate[data-state="open"] .fx-rd-vis { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.fx-gate[data-state="open"] .fx-reader-scr small { color: #6ee7b7; }
.fx-gate[data-state="deny"] .fx-reader-scr { background: #2c1216; box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.6); }
.fx-gate[data-state="deny"] .fx-rd-vis { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.fx-gate[data-state="deny"] .fx-reader-scr small { color: #fca5a5; }
.fx-gw { position: absolute; left: 0; top: 160px; width: 262px; height: 190px; }
.fx-gw-floor { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 56px; border-radius: 50%; background: radial-gradient(closest-side, rgba(53, 104, 224, 0.2), rgba(53, 104, 224, 0)); }
.fx-gw-post { position: absolute; bottom: 30px; width: 48px; height: 128px; border-radius: 12px 12px 6px 6px; background: linear-gradient(90deg, #e9eef8, #fff 45%, #dfe6f3); border: 1px solid #d3dcee; box-shadow: 0 20px 30px -22px rgba(22, 56, 139, 0.6); }
.fx-gw-post.l { left: 30px; } .fx-gw-post.r { right: 30px; }
.fx-gw-post i { position: absolute; left: 50%; top: 14px; width: 22px; height: 5px; margin-left: -11px; border-radius: 3px; background: #c3cad6; transition: background 0.3s, box-shadow 0.3s; }
.fx-gate[data-state="open"] .fx-gw-post i { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.9); }
.fx-gate[data-state="deny"] .fx-gw-post i { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.9); }
.fx-gate[data-state="scan"] .fx-gw-post i, .fx-gate[data-state="check"] .fx-gw-post i { background: #7aa0ff; }
.fx-gw-flap { position: absolute; bottom: 64px; width: 54px; height: 66px; background: linear-gradient(180deg, rgba(186, 210, 255, 0.75), rgba(122, 160, 255, 0.45)); border: 1px solid rgba(53, 104, 224, 0.4); transition: transform 0.55s var(--ease); }
.fx-gw-flap.l { left: 78px; border-radius: 0 10px 10px 0; transform-origin: left center; }
.fx-gw-flap.r { right: 78px; border-radius: 10px 0 0 10px; transform-origin: right center; }
.fx-gate[data-state="open"] .fx-gw-flap { transform: scaleX(0.08); }
.fx-gate[data-state="deny"] .fx-gw-flap.l { animation: fx-deny-l 0.45s; }
.fx-gate[data-state="deny"] .fx-gw-flap.r { animation: fx-deny-r 0.45s; }
@keyframes fx-deny-l { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(2px); } }
@keyframes fx-deny-r { 25%, 75% { transform: translateX(4px); } 50% { transform: translateX(-2px); } }
.fx-gw-walk { position: absolute; left: 50%; bottom: 52px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px) scale(0.6); transition: opacity 0.3s, transform 0.6s var(--ease); }
.fx-gw-walk svg.ico { width: 16px; height: 16px; stroke-width: 2.6; }
.fx-gate[data-state="open"] .fx-gw-walk { opacity: 1; transform: translateY(-30px); transition-delay: 0.2s; }
.fx-sc-log { left: 286px; top: 46px; width: 194px; height: 352px; display: flex; flex-direction: column; }
.fx-sc-rows { list-style: none; margin: 0 10px; display: grid; gap: 5px; }
.fx-sc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 6px 8px; border-radius: 9px; background: #f8fafd; }
.fx-sc-row .num { grid-row: 1 / 3; font-size: 10px; font-weight: 700; color: var(--gray-500); }
.fx-sc-row b { font-size: 10.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sc-row small { grid-column: 2; font-size: 9px; font-weight: 600; color: var(--gray-500); }
.fx-sc-row em { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: #e7f8f1; color: var(--success-deep); }
.fx-sc-row.no { background: #fff6f6; }
.fx-sc-row.no em { background: #fdeaea; color: var(--danger-deep); }
.fx-sc-row.fresh { animation: fx-row-in 0.7s var(--ease); }

/* ---------- 장면: GX ---------- */
.fx-sc-class { left: 0; top: 0; width: 300px; height: 244px; padding: 14px 16px; }
.fx-sc-class-h { display: flex; gap: 10px; align-items: center; }
.fx-sc-class-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-sc-class-ico svg.ico { width: 18px; height: 18px; }
.fx-sc-class-h b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.fx-sc-class-h small { display: block; font-size: 10px; font-weight: 600; color: var(--gray-500); }
.fx-seats { margin-top: 14px; display: grid; grid-template-columns: repeat(6, 36px); gap: 8px 8px; justify-content: space-between; }
.fx-seat { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px dashed #c6d2e6; color: transparent; display: flex; align-items: center; justify-content: center; transition: background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s, opacity 0.35s; }
.fx-seat svg.ico { width: 17px; height: 17px; }
.fx-seat.on { border: 1.5px solid #c9d8f8; background: var(--blue-50); color: var(--primary); }
.fx-seat.pop { animation: fx-seatpop 0.6s var(--ease); }
@keyframes fx-seatpop { 0% { transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { transform: none; } }
.fx-seat.out { border-color: #f5a3a3; background: #fff5f5; color: #f19393; opacity: 0.85; }
.fx-seat.out::after { content: '취소'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; color: var(--danger-deep); white-space: nowrap; }
.fx-seat.promo { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.2); }
.fx-sc-quota { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.fx-sc-quota b { font-size: 22px; font-weight: 700; color: var(--ink); }
.fx-sc-quota em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gray-400); }
.fx-sc-qbar { margin-top: 6px; height: 6px; border-radius: 999px; background: #edf0f5; overflow: hidden; }
.fx-sc-qbar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 0.5s var(--ease), background 0.3s; }
.fx-sc-qbar.full i { background: var(--danger); }
.fx-sc-wait { left: 314px; top: 0; width: 166px; height: 244px; padding: 13px 12px; display: flex; flex-direction: column; }
.fx-sc-wait-h { font-size: 12.5px; font-weight: 800; color: var(--gray-700); }
.fx-sc-wait-h em { font-style: normal; font-family: var(--font-num); color: var(--warning-deep); margin-left: 2px; }
.fx-wlist { margin-top: 10px; display: grid; gap: 7px; }
.fx-witem { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 8px; border-radius: 10px; background: #fff8ec; border: 1px solid #f8deb0; }
.fx-witem.fresh { animation: fx-row-in 0.6s var(--ease); }
.fx-witem-ico { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid #f5c98a; color: var(--warning-deep); display: flex; align-items: center; justify-content: center; }
.fx-witem-ico svg.ico { width: 15px; height: 15px; }
.fx-witem b { font-size: 11.5px; font-weight: 800; color: var(--warning-deep); }
.fx-witem small { font-size: 9.5px; font-weight: 600; color: var(--gray-500); }
.fx-sc-wait-f { margin-top: auto; font-size: 10px; font-weight: 700; color: var(--gray-400); }
.fx-sc-gpush { left: 0; top: 258px; width: 300px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.5s var(--ease); }
.fx-sc-gpush.on { opacity: 1; transform: none; }
.fx-sc-gpush b { display: block; font-size: 12px; font-weight: 800; color: var(--ink); }
.fx-sc-gpush small { display: block; font-size: 10.5px; line-height: 1.5; color: var(--gray-600); }
.fx-sc-roster { left: 318px; top: 258px; width: 162px; height: 138px; }
.fx-sc-roster-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 9px 6px; }
.fx-sc-roster-b span { padding: 7px 9px; border-radius: 10px; background: #f6f8fd; border: 1px solid #e6ecf7; }
.fx-sc-roster-b small { display: block; font-size: 9.5px; font-weight: 700; color: var(--gray-500); }
.fx-sc-roster-b b { font-size: 19px; font-weight: 700; color: var(--ink); }
.fx-sc-roster-f { display: flex; align-items: center; gap: 5px; margin: 2px 10px 0; font-size: 10.5px; font-weight: 800; color: var(--primary); border-radius: 8px; padding: 5px 6px; }
.fx-sc-roster-f svg.ico { width: 12px; height: 12px; stroke-width: 2.4; }
.fx-token { left: 0; top: 0; z-index: 8; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -8px rgba(53, 104, 224, 0.8); opacity: 0; pointer-events: none; }
.fx-token svg.ico { width: 17px; height: 17px; }
.fx-token.on { opacity: 1; }
.fx-token.go { transition: transform 0.85s cubic-bezier(0.5, 0, 0.2, 1); }

/* ---------- 장면: 커뮤니티 이용 ---------- */
.fx-frow { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 11px; background: #fff; border: 1px solid #edf0f5; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; }
.fx-frow-ico { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.fx-frow-ico svg.ico { width: 13px; height: 13px; }
.fx-frow-t { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.fx-frow-t b { font-size: 10.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fx-frow-t small { font-size: 8.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-frow .fx-tag { height: 18px; padding: 0 6px; font-size: 8.5px; font-style: normal; flex-shrink: 0; }
.fx-frow.tap { border-color: var(--primary); background: var(--blue-50); box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.14); }
.fx-sc-community .fx-mph-body { gap: 6px; }
.fx-sc-board { left: 236px; top: 0; width: 244px; height: 250px; }
.fx-sc-kpis { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px; padding: 9px 9px 0; }
.fx-sc-kpis > div { position: relative; padding: 7px 9px; border-radius: 10px; background: #f6f8fd; border: 1px solid #e6ecf7; min-width: 0; }
.fx-sc-kpis small { display: block; font-size: 9px; font-weight: 700; color: var(--gray-500); }
.fx-sc-kpis b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1.25; }
.fx-sc-kpis b.blue { color: var(--primary); }
.fx-sc-kpis b em { font-style: normal; font-family: var(--font); font-size: 9px; color: var(--gray-500); margin-left: 1px; }
.fx-sc-kpis .fx-delta { position: absolute; right: 6px; top: 6px; height: 15px; font-size: 8.5px; padding: 0 5px; }
.fx-sc-tl { padding: 10px 10px 0; }
.fx-sc-tl-h { display: grid; grid-template-columns: 30px repeat(5, 1fr); font-size: 8.5px; font-weight: 700; color: var(--gray-400); margin-bottom: 4px; }
.fx-sc-tl-h i { font-style: normal; }
.fx-sc-tl-r { display: grid; grid-template-columns: 30px 1fr; align-items: center; margin-bottom: 8px; }
.fx-sc-tl-r > span { font-size: 9.5px; font-weight: 700; color: var(--gray-600); }
.fx-sc-tl-c { position: relative; height: 26px; border-radius: 7px; background: repeating-linear-gradient(90deg, #f3f6fb 0 calc(20% - 1px), #e8edf6 calc(20% - 1px) 20%); }
.fx-sc-tl-c i { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; background: #b9cdf6; }
.fx-sc-tl-c i.new { background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); box-shadow: 0 0 0 2px rgba(53, 104, 224, 0.2); }
.fx-sc-tl-c i.new.on { transform: none; }
.fx-sc-feed2 { left: 236px; top: 262px; width: 244px; height: 134px; padding: 10px; }
.fx-sc-feed2-h { font-size: 10.5px; font-weight: 800; color: var(--gray-700); margin: 0 2px 6px; }
.fx-sc-feedrows { list-style: none; display: grid; gap: 4px; }
.fx-sc-frow { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 7px; border-radius: 8px; background: #f8fafd; }
.fx-sc-frow.fresh { animation: fx-row-in 0.7s var(--ease); }
.fx-sc-frow-ico { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: var(--blue-100); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.fx-sc-frow-ico svg.ico { width: 11px; height: 11px; stroke-width: 2.3; }
.fx-sc-frow > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fx-sc-frow b { font-size: 10px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sc-frow small { font-size: 8.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }

/* ---------- 장면: 키오스크 (기기 그림은 공통 키오스크 디자인 그대로 · 칸 크기에 맞춰 축소) ---------- */
.fx-kslot { left: 0; top: 0; width: 184px; height: 332px; z-index: 2; }
.fx-kslot > [data-demo] { pointer-events: none; }
.fx-tap { left: 0; top: 0; z-index: 7; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--primary); background: rgba(53, 104, 224, 0.18); opacity: 0; pointer-events: none; }
.fx-tap.on { animation: fx-tap 1.6s var(--ease) both; }
@keyframes fx-tap { 0% { opacity: 0; scale: 1.6; } 20% { opacity: 1; scale: 1; } 30% { scale: 0.82; } 45% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.fx-persona { left: 0; top: 342px; width: 190px; height: 56px; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 16px 28px -18px rgba(11, 17, 29, 0.7); }
.fx-persona > svg.ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); flex-shrink: 0; }
.fx-persona span { display: flex; flex-direction: column; line-height: 1.35; }
.fx-persona b { font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.fx-ksteps { left: 194px; top: 92px; width: 92px; list-style: none; display: grid; gap: 9px; z-index: 4; }
.fx-ksteps li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px 7px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid #e3e9f5; opacity: 0.55; transition: opacity 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.4s var(--ease); }
.fx-ks-ico { width: 24px; height: 24px; border-radius: 8px; background: #e9eef7; color: var(--gray-500); display: flex; align-items: center; justify-content: center; margin-bottom: 3px; transition: background 0.3s, color 0.3s; }
.fx-ks-ico svg.ico { width: 13px; height: 13px; stroke-width: 2.2; }
.fx-ksteps b { font-size: 10.5px; font-weight: 800; color: var(--gray-700); }
.fx-ksteps small { font-size: 8.5px; font-weight: 600; color: var(--gray-500); line-height: 1.3; }
.fx-ksteps li.on { opacity: 1; background: #fff; box-shadow: 0 12px 20px -16px rgba(22, 56, 139, 0.6); }
.fx-ksteps li.on .fx-ks-ico { background: var(--primary); color: #fff; }
.fx-ksteps li.now { border-color: var(--primary); transform: scale(1.04); box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.14), 0 12px 20px -14px rgba(53, 104, 224, 0.6); }
.fx-sc-app { left: 312px; top: 0; width: 168px; height: 172px; padding: 11px; }
.fx-sc-pass { margin-top: 10px; padding: 11px 12px; border-radius: 13px; background: linear-gradient(140deg, #4a7bf0, #2557d1); color: #fff; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 22px -14px rgba(37, 87, 209, 0.8); }
.fx-sc-pass small { font-size: 9px; font-weight: 800; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.02em; }
.fx-sc-pass b { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.fx-sc-pass .fx-tag { margin-top: 8px; align-self: flex-start; height: 20px; font-size: 9px; background: rgba(255, 255, 255, 0.95); }
.fx-sc-dash { left: 312px; top: 186px; width: 168px; height: 212px; }
.fx-sc-dash-b { position: relative; padding: 10px 11px; }
.fx-sc-dash-b > small { display: block; font-size: 9.5px; font-weight: 700; color: var(--gray-500); }
.fx-sc-dash-b > b { display: block; font-size: 19px; font-weight: 700; color: var(--primary); line-height: 1.25; white-space: nowrap; }
.fx-sc-dash-b > b em { font-style: normal; font-family: var(--font); font-size: 10px; color: var(--gray-500); margin-left: 1px; }
.fx-sc-dash-b > .fx-delta { position: absolute; right: 10px; top: 10px; height: 16px; font-size: 9px; padding: 0 5px; }
.fx-sc-split { margin-top: 10px; height: 10px; }
.fx-sc-split i { transition: flex 0.6s var(--ease); }
.fx-sc-legend { margin-top: 6px; display: flex; gap: 10px; font-size: 9.5px; font-weight: 700; color: var(--gray-600); }
.fx-sc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.fx-sc-legend .fx-key { width: 8px; height: 8px; border-radius: 2px; margin-left: 0; }
.fx-sc-dfeed { margin-top: 10px; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px; background: #f6f8fd; font-size: 9.5px; font-weight: 700; color: var(--gray-700); line-height: 1.35; }
.fx-sc-dfeed > svg.ico { width: 13px; height: 13px; color: var(--primary); flex-shrink: 0; }

/* ---------- 기능 페이지 부품 ---------- */
.feat-panel.fx-tabpanel.active { display: block; }
.fx-panel-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.fx-panel-head .f-num { justify-content: center; }
.fx-panel-head .f-desc { margin-top: 10px; }
.fx-dev-dark { background: linear-gradient(160deg, #18233a 0%, #0c1526 100%); border-color: #1f2d49; }
.fx-dev-dark .gate-stage { box-shadow: none; border-color: rgba(255, 255, 255, 0.1); }
.fx-dev-kiosk { padding: 30px 14px; }
.fx-kpis-2 { grid-template-columns: 1.3fr 1fr; }
.fx-kpis-sm .fx-kpi { padding: 7px 9px; }
.fx-kpis-sm .fx-kpi b { font-size: 17px; }
.fx-kpis-sm { margin-top: 10px; }
.fx-first { margin-top: 0; }
.fx-bd-foot { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f6f8fd; font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.fx-bd-foot > svg.ico { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }
.fx-bd-foot b { color: var(--ink); font-weight: 800; }

/* 운영 화면: 출입 기록 */
.fx-alog { list-style: none; display: grid; gap: 5px; }
.fx-arow { display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f8fafd; font-size: 12px; }
.fx-arow .num { font-size: 11.5px; font-weight: 700; color: var(--gray-500); }
.fx-arow b { font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-arow-m, .fx-arow-p { color: var(--gray-500); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-arow em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #e7f8f1; color: var(--success-deep); }
.fx-arow.no { background: #fff6f6; }
.fx-arow.no .fx-arow-p { color: var(--danger-deep); }
.fx-arow.no em { background: #fdeaea; color: var(--danger-deep); }
.fx-arow.fresh, .fx-prow.fresh { animation: fx-row-in 0.8s var(--ease); }

/* 운영 화면: 예약 현황판 · 배정 도면 */
.fx-rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fx-rv-top > div { flex: 1; min-width: 0; }
.fx-rv-top small { display: block; font-size: 11px; font-weight: 700; color: var(--gray-500); }
.fx-rv-top > div b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.fx-rv-count { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px 8px; border-radius: 10px; background: #f6f8fd; border: 1px solid #e6ecf7; }
.fx-rv-count b { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.fx-rv-count small { font-size: 10px; }
.fx-rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-rv-slot { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1.5px dashed #d5deec; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fx-rv-slot b { font-size: 13px; font-weight: 700; color: var(--gray-600); }
.fx-rv-slot small { font-size: 10.5px; font-weight: 600; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-rv-slot.on { border: 1.5px solid #e1e8f5; background: #f1f4fa; }
.fx-rv-slot.on b { color: var(--gray-700); }
.fx-rv-slot.on small { color: var(--gray-500); }
.fx-rv-slot.me { border: 1.5px solid var(--primary); background: var(--blue-50); }
.fx-rv-slot.me b, .fx-rv-slot.me small { color: var(--primary); }
.fx-map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 12px; background: #f6f8fd; border: 1px solid #e6ecf7; }
.fx-map.locker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fx-map-c { aspect-ratio: 1 / 1.05; border-radius: 9px; background: #fff; border: 1.5px dashed #d5deec; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; min-width: 0; padding: 2px; }
.fx-map-c b { font-size: 13px; font-weight: 700; color: var(--gray-500); }
.fx-map-c small { font-size: 9px; font-weight: 700; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fx-map-c.on { background: #e9eef7; border: 1.5px solid #dbe3f0; }
.fx-map-c.on b { color: var(--gray-700); }
.fx-map-c.me { background: var(--primary); border-color: var(--primary); }
.fx-map-c.me b, .fx-map-c.me small { color: #fff; }
.fx-map.locker .fx-map-c { border-radius: 6px; aspect-ratio: 1 / 1.3; }

/* 운영 화면: 판매 내역 · 강좌 */
.fx-plist { list-style: none; display: grid; gap: 5px; }
.fx-prow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: #f8fafd; min-width: 0; }
.fx-prow-ico { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; background: var(--blue-100); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.fx-prow-ico svg.ico { width: 14px; height: 14px; }
.fx-prow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fx-prow-t b { font-size: 12.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-prow-t small { font-size: 10.5px; font-weight: 600; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-prow > b { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fx-ctab { display: grid; gap: 5px; }
.fx-crow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 40px auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f8fafd; }
.fx-crow-n { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fx-crow-n b { font-size: 12.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-crow-n small { font-size: 10px; font-weight: 600; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-crow-bar { height: 7px; border-radius: 999px; background: #e8edf5; overflow: hidden; }
.fx-crow-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 0.5s var(--ease); }
.fx-crow-bar.full i { background: var(--danger); }
.fx-crow-q { font-size: 12px; font-weight: 700; color: var(--gray-700); text-align: right; }

/* 운영 화면: 키오스크 (입주민 앱 + 대시보드) */
.fx-kboard { display: grid; gap: 14px; }
.fx-chan { margin-top: 12px; }
.fx-chan .fx-split { height: 12px; }
.fx-chan .fx-split i { transition: flex 0.7s var(--ease); }
.fx-chan-l { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 700; color: var(--gray-600); }
.fx-chan-l span { display: inline-flex; align-items: center; gap: 5px; }
.fx-chan-l b { color: var(--ink); font-weight: 700; }
.fx-chan-l .fx-key { margin-left: 0; }

/* 데모 재단장: 골프 관제 · GX 시간표 (밝은 관리자 화면) */
.bay-win { width: 100%; }
.bay-win .bay-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bay-win .bay-count { font-size: 17px; font-weight: 700; color: var(--primary); }
.bay-win .bay-all { background: #fff; border: 1px solid var(--gray-200); color: var(--gray-700); }
.bay-win .bay-all:hover { background: #fff1f1; border-color: #f5a3a3; color: var(--danger-deep); }
.bay-win .bay-legend { margin: 10px 2px 12px; }
.bay-win .bay-legend span { color: var(--gray-500); }
.bay-win .bay-legend .lg { width: 9px; height: 9px; border-radius: 3px; background: #e3e8f0; }
.bay-win .bay-legend .lg.on { background: #34d399; }
.bay-win .bay-legend .lg.rsv { background: var(--blue-50); box-shadow: inset 0 0 0 1.5px var(--primary); }
.bay-win .bay-grid { gap: 7px; }
.bay-win .bay { background: #f6f8fd; border: 1px solid #e3e9f4; color: var(--ink); }
.bay-win .bay:hover { border-color: var(--blue-300); }
.bay-win .bay .dot { background: #c3cad6; }
.bay-win .bay small { color: var(--gray-500); }
.bay-win .bay.on { background: #ecfbf4; border-color: #b3ead2; }
.bay-win .bay.on .dot { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.7); }
.bay-win .bay.on small { color: var(--success-deep); }
.bay-win .bay.rsv { background: var(--blue-50); border-color: var(--primary); }
.bay-win .bay.rsv .dot { background: var(--primary); }
.bay-win .bay.rsv small { color: var(--primary); }
.bay-log { list-style: none; display: grid; gap: 5px; }
.bay-log-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: #f8fafd; font-size: 12px; }
.bay-log-row .num { font-size: 11px; font-weight: 700; color: var(--gray-500); }
.bay-log-row b { font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bay-log-row small { font-size: 10.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.bay-log-row.ok small { color: var(--success-deep); }
.bay-log-row.no small { color: var(--danger-deep); }
.bay-log-row.fresh { animation: fx-row-in 0.8s var(--ease); }
.golf-rule { margin-top: 10px; padding: 4px 12px; }
.golf-rule .a-list-row { padding: 7px 2px; font-size: 11px; }
.tt-win { width: 100%; }
.tt-win .tt-head b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.tt-win .tt-head small { color: var(--gray-500); }
.tt-win .tt-grid { grid-template-columns: 48px repeat(3, minmax(0, 1fr)); gap: 6px; }
.tt-win .tt-day { color: var(--gray-600); }
.tt-win .tt-time { color: var(--gray-400); }
.tt-win .tt-cell { background: #f6f8fd; border: 1px dashed #dbe3ef; }
.tt-win .tt-class { background: var(--blue-50); border: 1px solid #c9d8f8; color: var(--ink); min-height: 54px; }
.tt-win .tt-class:hover { border-color: var(--primary); }
.tt-win .tt-class b { color: var(--ink); font-size: 11.5px; }
.tt-win .tt-class small { color: var(--gray-500); font-size: 10.5px; }
.tt-win .tt-class.full { background: #fff4f4; border-color: #f6c6c6; }
.tt-win .tt-class.full b { color: var(--danger-deep); }
.tt-win .tt-class.sel { outline: 2px solid var(--primary); outline-offset: 1px; }
.tt-win .tt-detail { background: #f6f8fd; border: 1px solid #e6ecf7; color: var(--gray-700); }
.tt-win .tt-detail b { color: var(--ink); }
.tt-win .tt-detail .tag-wait { color: var(--warning-deep); }
.tt-note { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #d8e0ec; font-weight: 800; color: var(--primary); }
.class-btn.pay { background: var(--success); }
.class-btn.pay:hover { background: var(--success-deep); }
.class-card.promo { border-color: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14); }
.gx-push { animation: fx-row-in 0.7s var(--ease); }

/* 키오스크: 창구는 둘, 이용권은 하나 */
.fx-two { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: 980px; margin: 0 auto; }
.fx-two-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--blue-100); box-shadow: var(--shadow-md); }
.fx-two-card .fx-chips { grid-column: 1 / -1; margin-top: 12px; }
.fx-two-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.fx-two-ico svg.ico { width: 27px; height: 27px; }
.fx-two-card.is-kiosk .fx-two-ico { background: var(--ink); color: #fff; }
.fx-two-txt small { display: block; font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary); }
.fx-two-txt b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.fx-two-txt p { font-size: 15px; color: var(--gray-500); }
.fx-two-join { grid-column: 1 / -1; position: relative; height: 34px; margin: -8px 0; }
.fx-two-join i { position: absolute; top: 0; height: 100%; width: 25%; border-bottom: 2px dashed #a5bff4; }
.fx-two-join i:first-child { left: 25%; border-left: 2px dashed #a5bff4; border-bottom-left-radius: 14px; }
.fx-two-join i:last-child { right: 25%; border-right: 2px dashed #a5bff4; border-bottom-right-radius: 14px; }
.fx-two-join::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 2px; height: 14px; margin-left: -1px; background: #a5bff4; }
.fx-two-base { grid-column: 1 / -1; padding: 22px 24px 24px; border-radius: var(--r-xl); background: var(--deep-grad); color: #fff; box-shadow: 0 30px 60px -34px rgba(22, 56, 139, 0.7); }
.fx-two-base-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fx-two-base-h .fx-tag { height: 30px; padding: 0 12px; font-size: 13.5px; background: #fff; color: var(--primary-deep); }
.fx-two-base-h p { font-size: 14px; color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.fx-goods { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-goods li { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); }
.fx-goods-ico { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.fx-goods-ico svg.ico { width: 19px; height: 19px; }
.fx-goods b { font-size: 16px; font-weight: 800; }
.fx-goods small { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

/* 시나리오 조각 (페이지별) */
.fx-pick2 { display: grid; gap: 8px; }
.fx-pick-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid #e1e8f5; color: var(--gray-600); }
.fx-pick-opt > svg.ico { width: 20px; height: 20px; color: var(--primary); grid-row: 1 / 3; }
.fx-pick-opt b { font-size: 14px; font-weight: 800; color: var(--ink); }
.fx-pick-opt small { font-size: 12px; color: var(--gray-500); }
.fx-pick-opt.on { border-color: var(--primary); background: var(--blue-50); }
.fx-pin { display: flex; gap: 6px; margin-top: 4px; }
.fx-pin i { width: 22px; height: 26px; border-radius: 6px; background: #fff; border: 1.5px solid var(--primary); position: relative; }
.fx-pin i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--primary); }
.fx-chips-col { margin-top: 10px; flex-direction: column; align-items: stretch; }
.fx-chips-col .fx-chip { justify-content: flex-start; }
.fx-receipt { position: relative; padding: 16px 18px 20px; border-radius: 6px 6px 0 0; background: #fff; box-shadow: 0 18px 30px -22px rgba(22, 56, 139, 0.55); font-size: 13px; display: grid; gap: 6px; max-width: 280px;
  -webkit-mask: radial-gradient(circle 6px at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x; mask: radial-gradient(circle 6px at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x; }
.fx-receipt b { font-size: 14px; font-weight: 800; text-align: center; padding-bottom: 6px; border-bottom: 1px dashed #d8e0ec; }
.fx-receipt div { display: flex; justify-content: space-between; color: var(--gray-700); font-weight: 600; }
.fx-receipt small { font-size: 11.5px; color: var(--gray-400); text-align: center; padding-top: 4px; border-top: 1px dashed #d8e0ec; }
.fx-minigrid { margin-top: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.fx-minigrid i { aspect-ratio: 1; border-radius: 7px; background: #fff; border: 1.5px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; }
.fx-minigrid i.u { background: #eef1f6; border-color: #eef1f6; }
.fx-minigrid i.s { background: var(--primary); border-color: var(--primary); box-shadow: 0 6px 12px -6px rgba(53, 104, 224, 0.7); }
.fx-power { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #f1f4f9; font-size: 12.5px; font-weight: 700; color: var(--gray-600); }
.fx-power-led { width: 8px; height: 8px; border-radius: 50%; background: #c3cad6; }
.fx-toggles { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx-toggles span { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 10px; background: #f6f8fd; font-size: 13px; font-weight: 700; color: var(--gray-500); }
.fx-toggles span svg.ico { width: 16px; height: 16px; }
.fx-toggles span.on { background: #ecfbf4; color: var(--success-deep); }
.fx-frame.is-play .fx-toggles span.on { animation: fx-toggle-on 0.5s var(--ease) both; }
.fx-frame.is-play .fx-toggles span:nth-child(1) { animation-delay: 1.5s; } .fx-frame.is-play .fx-toggles span:nth-child(2) { animation-delay: 1.7s; }
.fx-frame.is-play .fx-toggles span:nth-child(3) { animation-delay: 1.9s; } .fx-frame.is-play .fx-toggles span:nth-child(4) { animation-delay: 2.1s; }
@keyframes fx-toggle-on { from { background: #f6f8fd; color: var(--gray-400); } to { background: #ecfbf4; color: var(--success-deep); } }
.fx-checks b { display: inline-flex; align-items: center; gap: 5px; }
.fx-checks b svg.ico { width: 15px; height: 15px; color: var(--success); stroke-width: 2.8; }
.fx-red { color: var(--danger-deep) !important; }
.fx-gate-mini { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.fx-gm-gate { grid-row: 1 / 3; position: relative; width: 58px; height: 42px; border-radius: 8px; background: #f1f4f9; display: flex; justify-content: center; gap: 2px; padding: 8px 6px; }
.fx-gm-gate i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, rgba(186, 210, 255, 0.9), rgba(122, 160, 255, 0.6)); transition: transform 0.5s var(--ease); }
.fx-gm-gate i:first-child { transform-origin: left; } .fx-gm-gate i:last-child { transform-origin: right; }
.fx-gate-mini.ok .fx-gm-gate i { transform: scaleX(0.15); }
.fx-gate-mini b { font-size: 15px; font-weight: 800; }
.fx-gate-mini small { font-size: 12.5px; font-weight: 700; }
.fx-gate-mini.ok b, .fx-gate-mini.ok small { color: var(--success-deep); }
.fx-gate-mini.no b, .fx-gate-mini.no small { color: var(--danger-deep); }
.fx-gate-mini.no .fx-gm-gate { background: #fdeeee; }
.fx-seatrow { margin: 10px 0 4px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.fx-seatrow i { aspect-ratio: 1; border-radius: 50%; background: var(--blue-100); }
.fx-seatrow i.out { background: #fff; box-shadow: inset 0 0 0 1.5px #f5a3a3; }
.fx-seatrow i.promo { background: var(--primary); box-shadow: 0 0 0 3px rgba(53, 104, 224, 0.2); }
.fx-pass-card { padding: 16px 18px; border-radius: 16px; background: linear-gradient(140deg, #4a7bf0, #2557d1); color: #fff; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 30px -18px rgba(37, 87, 209, 0.8); max-width: 300px; }
.fx-pass-card small { font-size: 11.5px; font-weight: 800; color: rgba(255, 255, 255, 0.8); }
.fx-pass-card b { font-size: 20px; font-weight: 800; }
.fx-pass-card span { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.92); }

/* AND MORE 조각 (페이지별) */
.fx-mini-steps { display: flex; align-items: center; gap: 6px; }
.fx-mini-steps span { width: 24px; height: 24px; border-radius: 50%; background: #e3e8f1; color: var(--gray-500); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fx-mini-steps span.on { background: var(--primary); color: #fff; }
.fx-mini-steps i { flex: 0 0 18px; height: 2px; background: #cfd8e6; }
.fx-mini-big { margin-left: auto; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; transition: transform 0.35s var(--ease); }
.fx-mcard:hover .fx-mini-big { transform: scale(1.2); }
.fx-mini-dots { display: flex; gap: 5px; }
.fx-mini-dots i { flex: 1; height: 8px; border-radius: 999px; background: #e3e8f1; }
.fx-mini-dots i.on { background: #b9cdf6; }
.fx-avs { display: inline-flex; }
.fx-avs i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--blue-100); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-left: -7px; }
.fx-avs i:first-child { margin-left: 0; }
.fx-avs i svg.ico { width: 13px; height: 13px; }

/* 출입: 인증 수단 카드 · 섞어 쓰기 */
.fx-auth .auth-card { display: flex; flex-direction: column; }
.fx-auth .ac-ico { display: none; }
.fx-auth-vis { position: relative; height: 96px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(160deg, #f1f5fe, #e4ecfd); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--primary); }
.fx-av-frame { position: relative; width: 58px; height: 58px; border-radius: 16px; border: 2px dashed #8fb0f2; display: flex; align-items: center; justify-content: center; }
.fx-av-frame svg.ico { width: 32px; height: 32px; stroke-width: 1.6; }
.fx-av-frame i { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--primary); box-shadow: 0 0 8px rgba(53, 104, 224, 0.8); animation: fx-avscan 1.6s ease-in-out infinite alternate; }
@keyframes fx-avscan { to { top: 46px; } }
.fx-av-card { width: 64px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, #4a7bf0, #2557d1); box-shadow: 0 10px 18px -10px rgba(37, 87, 209, 0.8); animation: fx-avcard 2.2s var(--ease) infinite; }
@keyframes fx-avcard { 0%, 100% { transform: translateX(-14px) rotate(-6deg); } 50% { transform: translateX(6px) rotate(0); } }
.fx-av-waves { position: absolute; right: 26%; top: 50%; width: 30px; height: 40px; margin-top: -20px; }
.fx-av-waves i { position: absolute; top: 50%; left: 0; border: 2px solid #8fb0f2; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); opacity: 0; animation: fx-avwave 2.2s ease-out infinite; }
.fx-av-waves i:nth-child(1) { width: 12px; height: 12px; margin-top: -6px; } .fx-av-waves i:nth-child(2) { width: 22px; height: 22px; margin-top: -11px; margin-left: -5px; animation-delay: 0.2s; } .fx-av-waves i:nth-child(3) { width: 32px; height: 32px; margin-top: -16px; margin-left: -10px; animation-delay: 0.4s; }
@keyframes fx-avwave { 40%, 60% { opacity: 1; } 100% { opacity: 0; } }
.fx-av-fp { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; animation: fx-avfp 2s ease-in-out infinite; }
.fx-av-fp svg.ico { width: 34px; height: 34px; stroke-width: 1.5; }
@keyframes fx-avfp { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 104, 224, 0.35); } 50% { box-shadow: 0 0 0 12px rgba(53, 104, 224, 0); } }
.fx-mix { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 22px auto 0; max-width: 900px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--blue-100); }
.fx-mix-h { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--primary-deep); margin-right: 6px; }
.fx-mix-h svg.ico { width: 18px; height: 18px; color: var(--primary); stroke-width: 2.6; }
.fx-mix-p { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--blue-50); font-size: 14px; font-weight: 800; color: var(--primary); }
.fx-mix-p small { font-size: 12.5px; font-weight: 700; color: var(--gray-500); }
.fx-mix-p svg.ico { width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .fx-goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .fx-panel-head { margin-bottom: 24px; }
  .fx-two { grid-template-columns: 1fr; gap: 12px; }
  .fx-two-card { padding: 20px 18px; grid-template-columns: 48px minmax(0, 1fr); }
  .fx-two-ico { width: 48px; height: 48px; border-radius: 14px; }
  .fx-two-txt b { font-size: 18px; }
  .fx-two-join { height: 20px; margin: -4px 0; }
  .fx-two-join i { display: none; }
  .fx-two-join::after { top: 0; bottom: 0; height: auto; }
  .fx-two-base { padding: 18px 16px; }
  .fx-goods li { padding: 13px; }
  .fx-goods b { font-size: 14.5px; }
  .fx-goods small { font-size: 12px; }
  .fx-arow { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px; font-size: 11.5px; }
  .fx-arow-m { display: none; }
  .fx-arow-p { grid-column: 2; grid-row: 2; font-size: 10.5px; }
  .fx-arow .num { grid-row: 1 / 3; }
  .fx-arow em { grid-column: 3; grid-row: 1 / 3; }
  .fx-rv-top > div b { font-size: 15px; }
  .fx-rv-count { min-width: 50px; padding: 5px 6px; }
  .fx-rv-slot { padding: 7px 8px; }
  .fx-map { padding: 7px; gap: 5px; }
  .fx-map-c small { font-size: 8px; }
  .fx-crow { grid-template-columns: minmax(0, 1fr) 36px auto; }
  .fx-crow-bar { display: none; }
  .fx-mix { padding: 14px; }
  .fx-mix-h { width: 100%; justify-content: center; margin: 0 0 2px; }
  .bay-win .bay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .bay-win .bay { padding: 8px 8px; }
  .bay-win .bay b { font-size: 11.5px; }
  .bay-win .bay small { font-size: 9px; }
  .bay-win .bay-legend { gap: 4px 10px; }
  .tt-win .tt-grid { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); gap: 4px; }
  .tt-win .tt-class { padding: 6px 6px; }
  .tt-win .tt-class b { font-size: 10.5px; }
  .tt-win .tt-class small { font-size: 9.5px; }
  /* 골프 관제 기록: 좁은 폭에서는 '예약 시작 · 자동' 같은 구분을 둘째 줄로 (말줄임 대신 줄바꿈) */
  .bay-log-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 1px; }
  .bay-log-row b { white-space: normal; }
  .bay-log-row small { grid-column: 2; }
  .fx-kpi small { white-space: normal; }
}
@media (max-width: 400px) {
  .bay-win .bay { padding: 7px 6px; }
  .bay-win .bay b { font-size: 11px; white-space: nowrap; }
  .bay-win .bay .dot { width: 6px; height: 6px; margin-right: 3px; }
  .bay-win .bay small { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-av-frame i, .fx-av-card, .fx-av-waves i, .fx-av-fp { animation: none !important; }
  .fx-av-waves i { opacity: 1; }
}

/* ---------- 메인 '6가지 기능' (fxf-*) : 기능을 고르면 그 기능의 살아 있는 장면을 미리 봄 ---------- */
.fx-feats-sec .sec-head { margin-bottom: 44px; }
.fxf-tabs {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px;
  background: #fff; border: 1px solid var(--blue-100); border-radius: 22px; box-shadow: var(--shadow-md);
}
.fxf-ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 16px; background: linear-gradient(150deg, #4a7bf0, #2557d1); box-shadow: var(--shadow-blue); transition: transform 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease); pointer-events: none; }
.fxf-tab { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 20px; border-radius: 16px; text-align: center; transition: background 0.2s; }
.fxf-tab:hover:not(.active) { background: var(--blue-50); }
.fxf-ico { width: 42px; height: 42px; border-radius: 13px; margin-bottom: 6px; background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s; }
.fxf-tab:hover:not(.active) .fxf-ico { color: var(--primary); }
.fxf-no { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--gray-400); transition: color 0.3s; }
.fxf-name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.35; transition: color 0.3s; }
.fxf-tab.active .fxf-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.fxf-tab.active .fxf-no { color: rgba(255, 255, 255, 0.78); }
.fxf-tab.active .fxf-name { color: #fff; }
.fxf-prog { position: absolute; left: 22px; right: 22px; bottom: 9px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.26); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.fxf-prog i { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: left center; transform: scaleX(var(--p, 0)); }
.fxf-tab.active .fxf-prog { opacity: 1; }

.fxf-panel {
  position: relative; margin-top: 24px; padding: 40px 48px 84px; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, #fbfcff 0%, #edf2fe 100%); border: 1px solid var(--blue-100);
  box-shadow: 0 40px 80px -52px rgba(22, 56, 139, 0.5);
}
.fxf-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(53, 104, 224, 0.15) 1px, transparent 1.5px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 46% 70% at 72% 50%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 46% 70% at 72% 50%, #000 15%, transparent 75%);
}
.fxf-view { position: relative; z-index: 1; }
.fxf-view.active { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 52px; align-items: center; }
.fxf-view.fxf-in .fxf-info > * { animation: fx-rise 0.55s var(--ease) both; }
.fxf-view.fxf-in .fxf-info > :nth-child(2) { animation-delay: 0.04s; } .fxf-view.fxf-in .fxf-info > :nth-child(3) { animation-delay: 0.08s; }
.fxf-view.fxf-in .fxf-info > :nth-child(4) { animation-delay: 0.12s; } .fxf-view.fxf-in .fxf-info > :nth-child(5) { animation-delay: 0.16s; } .fxf-view.fxf-in .fxf-info > :nth-child(6) { animation-delay: 0.2s; }
.fxf-view.fxf-in .fxf-stage { animation: fxf-stage-in 0.7s var(--ease) both; }
@keyframes fxf-stage-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.fxf-info { min-width: 0; }
.fxf-info-no { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; color: var(--primary); }
.fxf-info-no i { font-style: normal; color: var(--gray-400); }
.fxf-info h3 { margin-top: 6px; font-size: 36px; font-weight: 800; line-height: 1.25; letter-spacing: -0.035em; color: var(--ink); }
.fxf-value { margin-top: 12px; font-size: 19px; font-weight: 700; line-height: 1.55; letter-spacing: -0.02em; color: var(--gray-700); word-break: keep-all; text-wrap: balance; }
.fxf-roles { margin-top: 22px; display: grid; gap: 8px; }
.fxf-roles li { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--blue-100); font-size: 15px; font-weight: 700; color: var(--gray-800); line-height: 1.45; }
.fxf-roles .fx-who { min-width: 104px; justify-content: center; }
.fxf-cap { margin-top: 16px; display: flex; align-items: flex-start; gap: 10px; min-height: 46px; font-size: 14.5px; font-weight: 600; color: var(--gray-600); line-height: 1.55; }
.fxf-live { flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--font-num); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; }
.fxf-live i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: fx-dot-g 1.8s ease-out infinite; }
[data-fx-cap] { transition: opacity 0.17s, transform 0.17s; }
[data-fx-cap].swap { opacity: 0; transform: translateY(3px); }
.fxf-more { margin-top: 20px; }
.fxf-stage { position: relative; width: 100%; max-width: 560px; justify-self: center; cursor: pointer; }
.fxf-stage .fx-canvas { transition: filter 0.3s; }
.fxf-stage:hover .fx-canvas { filter: drop-shadow(0 22px 34px rgba(53, 104, 224, 0.16)); }
.fxf-ctrl { position: absolute; left: 48px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.fxf-count { font-size: 14px; font-weight: 700; color: var(--gray-500); }
.fxf-count b { color: var(--ink); }

@media (max-width: 1200px) {
  .fxf-name { font-size: 15px; }
  .fxf-panel { padding: 36px 36px 80px; }
  .fxf-ctrl { left: 36px; }
  .fxf-view.active { gap: 36px; }
  .fxf-info h3 { font-size: 32px; }
}
@media (max-width: 1023px) {
  .fxf-tab { padding: 12px 4px 18px; }
  .fxf-ico { width: 38px; height: 38px; margin-bottom: 4px; }
  .fxf-name { font-size: 14px; }
  .fxf-prog { left: 14px; right: 14px; }
  .fxf-panel { padding: 30px 26px 74px; }
  .fxf-view.active { grid-template-columns: 1fr; gap: 26px; }
  .fxf-stage { max-width: 520px; }
  .fxf-ctrl { left: 26px; bottom: 20px; }
}
@media (max-width: 767px) {
  .fxf-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 18px; }
  .fxf-ind { border-radius: 13px; }
  .fxf-tab { padding: 11px 4px 15px; border-radius: 13px; }
  .fxf-ico { width: 34px; height: 34px; border-radius: 11px; }
  .fxf-ico svg.ico { width: 18px; height: 18px; }
  .fxf-no { font-size: 12px; }
  .fxf-name { font-size: 13.5px; }
  .fxf-prog { bottom: 6px; left: 12px; right: 12px; }
  .fxf-panel { margin-top: 14px; padding: 24px 16px 70px; border-radius: 22px; }
  .fxf-info h3 { font-size: 26px; }
  .fxf-value { font-size: 16.5px; }
  .fxf-roles li { font-size: 14px; gap: 10px; }
  .fxf-roles .fx-who { min-width: 88px; }
  .fxf-cap { font-size: 13.5px; }
  .fxf-more { width: 100%; }
  .fxf-ctrl { left: 16px; right: auto; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fxf-ind { transition: none; }
  .fxf-live i { animation: none; }
}

/* ===== R4 · CASES ===== */
/* 주요 도입 사례: 지역으로 찾기(점묘 지도 · 지역 탭 6개 · 시군구 칩) × 운영 조건 AND 필터 · 12개씩 더 보기
   PC(≥1024): 왼쪽 지역 패널 고정(sticky) + 오른쪽 목록 / 768~1023: 위 패널(지도 | 칩) / ≤767: 칩 가로 스크롤 · 지도 접기 */
.cz-layout { display: grid; grid-template-columns: 312px minmax(0, 1fr); grid-template-areas: "tabs tabs" "side main"; gap: 22px 32px; align-items: start; }
.cz-side { grid-area: side; }
.cz-main { grid-area: main; }
.cz-side, .cz-panel, .cz-main { min-width: 0; }
.cz-side { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r-lg); }
.cz-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 18px 18px 20px; box-shadow: 0 18px 40px -30px rgba(17, 25, 39, 0.35); }
.cz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cz-title { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.cz-title-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--primary); }
.cz-title-ico svg.ico { width: 16px; height: 16px; stroke-width: 2.1; }
.cz-map-toggle { display: none; }

/* 지도 */
.cz-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--blue-100); background: radial-gradient(120% 95% at 28% 18%, #f9fbff 0%, #eef3fd 60%, #e6edfb 100%); }
.cz-map::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(53, 104, 224, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 104, 224, 0.06) 1px, transparent 1px); background-size: 22px 22px; }
.cz-mapbox { position: relative; width: 100%; aspect-ratio: 120 / 114; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cz-mapbox.is-pointing { cursor: pointer; }
.cz-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.cz-dots path { fill: none; stroke: #b7c6e6; stroke-linecap: round; transition: stroke 0.3s, opacity 0.35s; }
.cz-inset rect { fill: rgba(255, 255, 255, 0.6); stroke: #c6d2ea; stroke-width: 0.22; }
.cz-inset text { font-family: var(--font); font-size: 2.5px; font-weight: 700; letter-spacing: -0.05px; fill: #8796b6; }
.cz-inset { transition: opacity 0.3s; }
.cz-mapbox[data-sel]:not([data-sel="all"]) .cz-inset { opacity: 0; }
.cz-mapbox[data-sel]:not([data-sel="all"]) .cz-dots path { stroke: #d3dcee; }
.cz-mapbox[data-hover="sudo"] .cz-dots path[data-region="sudo"], .cz-mapbox[data-hover="chungcheong"] .cz-dots path[data-region="chungcheong"],
.cz-mapbox[data-hover="honam"] .cz-dots path[data-region="honam"], .cz-mapbox[data-hover="yeongnam"] .cz-dots path[data-region="yeongnam"],
.cz-mapbox[data-hover="gangjeju"] .cz-dots path[data-region="gangjeju"] { stroke: #97b2ee; }
.cz-mapbox[data-sel="sudo"] .cz-dots path[data-region="sudo"], .cz-mapbox[data-sel="chungcheong"] .cz-dots path[data-region="chungcheong"],
.cz-mapbox[data-sel="honam"] .cz-dots path[data-region="honam"], .cz-mapbox[data-sel="yeongnam"] .cz-dots path[data-region="yeongnam"],
.cz-mapbox[data-sel="gangjeju"] .cz-dots path[data-region="gangjeju"] { stroke: #7d9ff0; }
.cz-pins { position: absolute; inset: 0; pointer-events: none; }
.cz-pin {
  position: absolute; z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(22, 56, 139, 0.4);
  transition: transform 0.25s var(--ease), opacity 0.3s, background 0.2s;
}
.cz-pin.is-dim { background: #8fa3cf; opacity: 0.55; transform: scale(0.78); }
.cz-pin.is-out { opacity: 0.22; }
.cz-pin.is-hover, .cz-pin.is-hot { z-index: 3; opacity: 1; transform: scale(1.5); background: var(--primary-hover); }
.cz-pin.is-on { z-index: 4; opacity: 1; transform: scale(1.4); background: var(--primary); }
.cz-pin.is-on::after, .cz-pin.is-hot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(53, 104, 224, 0.5);
  animation: cz-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes cz-ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
body.no-scroll .cz-pin::after { animation: none; opacity: 0; }
.cz-tip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(17, 25, 39, 0.9); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; pointer-events: none;
  transform: translate(12px, -50%); opacity: 0; transition: opacity 0.15s; box-shadow: 0 8px 18px -8px rgba(17, 25, 39, 0.5);
}
.cz-tip.left { transform: translate(calc(-100% - 12px), -50%); }
.cz-tip.is-pin { transform: none; }   /* 핀 이름표는 JS가 다른 핀을 가리지 않는 자리(px)를 계산 */
.cz-tip.show { opacity: 1; }
.cz-zoomout {
  position: absolute; top: 10px; left: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 11px 0 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--gray-200); box-shadow: 0 4px 12px -6px rgba(17, 25, 39, 0.3);
  font-size: 12.5px; font-weight: 700; color: var(--gray-700); transition: color 0.18s, border-color 0.18s;
}
.cz-zoomout:hover { color: var(--primary); border-color: var(--primary); }
.cz-zoomout svg.ico { width: 14px; height: 14px; stroke-width: 2.3; }

/* 지역 탭(R6): 지도 패널과 목록 위에 걸친 한 줄 — 전체 + 5개 권역, 같은 너비 칸(모바일 3칸 × 2줄), 칸마다 사례 수 */
.cz-regions {
  grid-area: tabs; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 5px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; box-shadow: 0 18px 40px -32px rgba(17, 25, 39, 0.35);
}
.cz-regions, .cz-cities, .cz-chip, .cz-city, .cz-status .case-count { position: relative; }   /* 칩 안 sr-only가 가로 스크롤 줄 밖으로 새어 문서 폭을 늘리지 않게 */
.cz-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 48px; padding: 0 10px; border-radius: 13px; white-space: nowrap;
  background: transparent; border: 1px solid transparent; font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--gray-700);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.2s;
}
.cz-chip .cz-n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-600); font-family: var(--font-num); font-size: 12px; font-weight: 700; transition: background 0.18s, color 0.18s;
}
.cz-chip:hover { background: var(--blue-50); color: var(--primary); }
.cz-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 10px 20px -12px rgba(53, 104, 224, 0.8); }
.cz-chip.active .cz-n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cz-chip.is-zero:not(.active) { color: var(--gray-400); }
.cz-chip.is-zero:not(.active) .cz-n { background: transparent; color: var(--gray-400); }
.cz-chip:focus-visible, .cz-city:focus-visible, .cz-reset:focus-visible, .cz-zoomout:focus-visible, .cz-map-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cz-cities { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gray-200); }
.cz-city {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border-radius: 9px; white-space: nowrap;
  background: var(--gray-50); border: 1px solid var(--gray-200); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--gray-700);
  transition: background 0.18s, color 0.18s, border-color 0.18s; animation: cz-in 0.35s var(--ease) backwards;
}
.cz-city small { font-size: 11.5px; font-weight: 700; color: var(--gray-500); }
.cz-city:hover { border-color: var(--primary); color: var(--primary); }
.cz-city.active { background: var(--blue-50); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.cz-city.active small { color: var(--primary); }
.cz-city.is-zero:not(.active) { color: var(--gray-400); }
.cz-city-grp { display: inline-flex; align-items: center; height: 30px; padding: 0 3px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: -0.01em; color: var(--gray-500); animation: cz-in 0.35s var(--ease) backwards; }
.cz-city-br { flex-basis: 100%; height: 0; }   /* 시도 묶음은 새 줄에서 시작 */
@keyframes cz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 목록: 운영 조건 · 결과 문장 · 카드 · 더 보기 */
.cz-main { min-width: 0; }
.cz-cond { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cz-cond-label { display: none; }
.cz-main .case-filter { margin-bottom: 0; justify-content: flex-start; gap: 7px; }
.cz-main .case-filter .pill-tab { height: 40px; padding: 0 14px; font-size: 14.5px; gap: 6px; }
.cz-main .case-filter .pill-tab svg.ico { width: 16px; height: 16px; }
.cz-main .case-filter .pill-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cz-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 16px; }
.cz-status .case-count { margin: 0; display: flex; align-items: center; flex-wrap: wrap; font-size: 15px; color: var(--gray-600); }
.cz-scope { font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.cz-sep { width: 1px; height: 12px; margin: 0 10px; background: var(--gray-300); }
.cz-status .case-count b { margin-right: 1px; font-family: var(--font-num); font-size: 17px; }
.cz-reset {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--gray-200); font-size: 13.5px; font-weight: 700; color: var(--gray-600); transition: color 0.18s, border-color 0.18s;
}
.cz-reset:hover { color: var(--primary); border-color: var(--primary); }
.cz-reset svg.ico { width: 15px; height: 15px; stroke-width: 2.2; }
.cz-main .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-card .cc-loc svg.ico, .case-mini-body small svg.ico { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; color: var(--primary); stroke-width: 2.2; }
.case-empty p { font-size: 15.5px; font-weight: 600; color: var(--gray-600); }
.case-empty .btn { margin-top: 16px; }
.case-empty .btn svg.ico { width: 16px; height: 16px; }
.cz-more { display: flex; justify-content: center; margin-top: 34px; }
.cz-more-btn { gap: 6px; border-radius: 999px; }
.cz-more-btn b { color: var(--primary); font-family: var(--font-num); }
.cz-more-btn svg.ico { margin-left: 2px; }
.cz-more-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* 안내 문구(목록 아래 · 메인 도입 사례 아래): 기존 .step-note(작은 회색 글씨)에 크기만 카드 본문보다 작게 */
.case-note { margin-top: 26px; font-size: 13.5px; line-height: 1.6; text-align: center; }
#references .case-note { margin-top: 30px; }

/* 메인 마퀴: 카드가 8 → 12장으로 늘어난 만큼 한 바퀴 시간도 늘려 흐르는 속도는 그대로 */
#references .marquee-track { animation-duration: 90s; }

@media (min-width: 1024px) and (max-width: 1199px) {
  .cz-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 20px 24px; }
  .cz-panel { padding: 16px 14px 18px; }
  .cz-chip { font-size: 15px; }
  .cz-main .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* 화면 높이가 낮으면 지도를 줄여 패널이 한 화면에 들어오게 */
  .cz-mapbox { max-width: var(--cz-map-w, max(170px, calc((100vh - var(--header-h) - 400px) * 0.68))); margin: 0 auto; }
  /* 권역을 골라 시군구 칩이 늘어도 패널이 화면 안에 들어오게 JS가 --cz-map-w 를 줄이고, 그래도 넘치면 고정 해제 */
  .cz-side.is-unstuck { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 1199px) {
  .cz-main .case-filter { gap: 5px; }
  .cz-main .case-filter .pill-tab { height: 38px; padding: 0 11px; font-size: 13.5px; }
}
/* 태블릿 · 모바일(≤1023): 지역 탭 → 지역으로 찾기(제목 줄 · [지도] 펼치기 · 시군구 칩) → 목록. 지도는 [지도]를 눌러 펼침 */
@media (max-width: 1023px) {
  .cz-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "side" "main"; gap: 18px; }
  .cz-side { position: static; max-height: none; overflow: visible; }
  .cz-panel { padding: 16px 18px; }
  .cz-chip { gap: 6px; padding: 0 6px; font-size: 14.5px; }
  .cz-head { margin-bottom: 12px; }
  .cz-side:not(.map-open) .cz-head { margin-bottom: 0; }   /* 지도를 접으면 제목 줄 아래 빈칸 없이 (시군구 칩은 위 여백을 따로 가짐) */
  .cz-map-toggle {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px;
    background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--primary); font-size: 13px; font-weight: 700;
  }
  .cz-map-toggle svg.ico { width: 15px; height: 15px; stroke-width: 2.1; }
  .cz-side.map-open .cz-map-toggle { background: var(--primary); border-color: var(--primary); color: #fff; }
  .cz-map { display: none; max-width: 320px; margin: 0 auto 4px; }
  .cz-side.map-open .cz-map { display: block; animation: cz-in 0.35s var(--ease); }
  .cz-main .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cz-layout { gap: 14px; }
  .cz-panel { padding: 14px 16px 14px; }
  .cz-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 16px; }
  .cz-chip { height: 42px; gap: 5px; padding: 0 4px; border-radius: 12px; font-size: 14px; }
  .cz-chip .cz-n { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11.5px; }
  .cz-head { margin-bottom: 10px; }
  .cz-title { font-size: 15.5px; }
  .cz-title-ico { width: 28px; height: 28px; }
  .cz-map { max-width: 290px; }
  .cz-cities { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .cz-cities::-webkit-scrollbar { display: none; }
  .cz-city, .cz-city-grp { flex-shrink: 0; }
  .cz-city-br { display: none; }
  .cz-city-br + .cz-city-grp { margin-left: 6px; }
  .cz-cities { margin-top: 10px; padding-top: 10px; }
  .cz-main .case-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 4px; }
  .cz-main .case-filter::-webkit-scrollbar { display: none; }
  .cz-main .case-filter .pill-tab { flex-shrink: 0; height: 38px; font-size: 14px; }
  .cz-status { align-items: flex-start; }
  .cz-status .case-count { font-size: 14.5px; padding-top: 7px; }
  .cz-main .case-grid { grid-template-columns: 1fr; }
  .cz-more { margin-top: 26px; }
  .cz-more-btn { width: 100%; }
}
@media (max-width: 359px) {
  .cz-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-chip { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-pin, .cz-dots path, .cz-tip { transition: none; }
  .cz-pin::after { animation: none !important; opacity: 0; }
  .cz-city, .cz-city-grp, .cz-side.map-open .cz-map { animation: none; }
}

/* 상세 팝업: 사진을 지나 스크롤하면 위에 단지 이름 띠 — 닫기 버튼 뒤로 본문 글자가 겹쳐 보이지 않게 */
.cmx-mbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 64px; padding: 0 68px 0 24px;
  display: flex; align-items: center; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--gray-200);
  font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity 0.2s, transform 0.25s var(--ease);
}
#caseModal.is-scrolled .cmx-mbar { opacity: 1; transform: none; }
#caseModal.is-scrolled .modal-case .cmx-close { background: var(--gray-100); box-shadow: none; }
@media (max-width: 767px) {
  .cmx-mbar { height: 60px; padding: 0 60px 0 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmx-mbar { transition: none; }
}
/* R7: 도입 사례 첫 화면 설명이 짧아져 모바일에서 끝말('있습니다.')만 다음 줄로 넘어가지 않게 줄 길이를 고르게 */
body[data-page="cases"] .sub-hero .desc { text-wrap: balance; }

/* ===== R4 · R6-T 카페 운영 ===== */
/* 카페 운영 기능 5개: 위 3개 · 아래 2개(넓게) — 태블릿 2열(마지막 1개 전체 폭) · 모바일 1열 */
.fx-more.c5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fx-more.c5 > .fx-mcard { grid-column: span 2; }
.fx-more.c5 > .fx-mcard:nth-child(n+4) { grid-column: span 3; }
/* '업데이트 예정' — 기존 회색 라벨(.tag)을 제목 옆에 */
.fx-mcard h3 .tag { margin-left: 8px; vertical-align: 2px; }
.fx-mini-amt { margin-left: auto; }
/* 카페 장면 폰: 요금 한 줄 */
.fx-picks.one { grid-template-columns: 1fr; }
@media (max-width: 1023px) {
  .fx-more.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-more.c5 > .fx-mcard, .fx-more.c5 > .fx-mcard:nth-child(n+4) { grid-column: auto; }
  .fx-more.c5 > .fx-mcard:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .fx-more.c5 { grid-template-columns: 1fr; }
  .fx-more.c5 > .fx-mcard:last-child { grid-column: auto; }
}

/* ===== R6 · K (히어로 · 키오스크) ===== */
/* 공통 키오스크 기기: 화면 위 안면인식 카메라 (인식 중이면 렌즈 · 표시등이 켜짐) */
.kiosk-cam { position: absolute; top: calc(7 * var(--u)); left: 50%; width: calc(46 * var(--u)); height: calc(13 * var(--u)); margin-left: calc(-23 * var(--u)); border-radius: 999px; background: #04070c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.kiosk-lens { position: absolute; left: 50%; top: 50%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin: calc(-4.5 * var(--u)) 0 0 calc(-4.5 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 34% 32%, #a9c0f5 0 12%, #2b4479 28%, #0d1424 60%, #05080e 100%); box-shadow: 0 0 0 calc(1.5 * var(--u)) #1c2638; transition: box-shadow 0.3s; }
.kiosk-ir { position: absolute; top: 50%; right: calc(7 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin-top: calc(-2 * var(--u)); border-radius: 50%; background: #1d2a44; transition: background 0.3s, box-shadow 0.3s; }
.kiosk[data-k-step="verify"][data-k-v="scan"] .kiosk-lens { box-shadow: 0 0 0 calc(1.5 * var(--u)) #3568e0, 0 0 calc(9 * var(--u)) rgba(91, 140, 255, 0.85); }
.kiosk[data-k-step="verify"][data-k-v="scan"] .kiosk-ir { background: #5b8cff; box-shadow: 0 0 calc(6 * var(--u)) rgba(91, 140, 255, 0.9); animation: k-ring 1.2s ease-in-out infinite; }
.kiosk[data-k-step="verify"][data-k-v="ok"] .kiosk-ir { background: #34d399; box-shadow: 0 0 calc(6 * var(--u)) rgba(52, 211, 153, 0.9); }

/* 화면: 위 이름 띠 · 가운데 한 가지 동작 · 아래 [뒤로] [처음으로] */
.kiosk .kiosk-top { justify-content: center; }
.kiosk .kiosk-body { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
.kiosk .k-title { font-size: calc(16 * var(--u)); line-height: 1.35; margin-bottom: calc(10 * var(--u)); }
.kiosk .k-big, .kiosk .k-row, .kiosk .k-cta, .kiosk .k-alts button, .kiosk .k-pad button, .kiosk .k-nav button { position: relative; overflow: hidden; }
.kiosk .k-big, .kiosk .k-row { background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); transition: border-color 0.13s, transform 0.13s; }
.kiosk .k-big:hover, .kiosk .k-row:hover, .kiosk .k-alts button:hover, .kiosk .k-nav button:not(:disabled):hover { border-color: var(--primary); }
.kiosk img { display: block; max-width: none; }
/* 처음 화면: 큰 사진 버튼 둘 */
.kiosk .k-home { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: calc(10 * var(--u)); }
.kiosk .k-big { display: flex; flex-direction: column; min-height: 0; border-radius: calc(16 * var(--u)); text-align: center; }
.kiosk .k-big img { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
.kiosk .k-big b { flex-shrink: 0; padding: calc(9 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 800; line-height: 1.3; }
.kiosk .k-row em, .kiosk .k-prod em { font-style: normal; font-weight: 800; color: var(--primary); }
/* 카페 메뉴 · 시설 · 이용권 목록: 한 줄에 사진(아이콘) · 이름 · 가격 */
.kiosk .k-list { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.kiosk .k-row { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; min-height: calc(62 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u)); border-radius: calc(14 * var(--u)); text-align: left; }
.kiosk .k-row img { flex-shrink: 0; width: calc(68 * var(--u)); height: calc(51 * var(--u)); border-radius: calc(9 * var(--u)); object-fit: cover; }
.kiosk .k-row b { flex: 1; min-width: 0; font-size: calc(16 * var(--u)); font-weight: 800; }
.kiosk .k-row > svg.ico { flex-shrink: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--gray-400); }
.kiosk .k-pass { padding-left: calc(12 * var(--u)); }
.kiosk .k-pass .ki { flex-shrink: 0; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.kiosk .k-pass em, .kiosk .k-menu em { font-size: calc(15 * var(--u)); white-space: nowrap; }
.kiosk .k-menu b { font-size: calc(15 * var(--u)); }
/* 메뉴 화면 · 구매 확정: 큰 사진 · 이름 · 가격 + 큰 버튼 */
.kiosk .k-prod { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kiosk .k-prod img { width: 100%; height: calc(178 * var(--u)); object-fit: cover; border-radius: calc(14 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.kiosk .k-prod.sm img { height: calc(116 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.kiosk .k-prod small { font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--gray-500); }
.kiosk .k-prod b { font-size: calc(19 * var(--u)); font-weight: 800; line-height: 1.3; }
.kiosk .k-prod em { margin-top: calc(2 * var(--u)); font-size: calc(17 * var(--u)); }
.kiosk .k-line { margin-top: calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; line-height: 1.5; color: var(--gray-600); text-align: center; word-break: keep-all; }
.kiosk .k-cta { flex-shrink: 0; margin-top: auto; width: 100%; padding: calc(13 * var(--u)); border-radius: calc(13 * var(--u)); background: var(--primary); color: #fff; font-size: calc(16 * var(--u)); font-weight: 800; transition: background 0.15s; }
.kiosk .k-cta:hover { background: var(--primary-hover); }
/* 본인확인: 들어가면 바로 안면인식 (인식 중 → 인식 성공) · 아래 작은 버튼 [전화번호] [개인 패스워드] */
.kiosk .k-face { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.kiosk .k-face .k-cam { position: relative; width: calc(128 * var(--u)); height: calc(128 * var(--u)); border-radius: calc(28 * var(--u)); background: #e9f0fe; color: var(--primary); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(53, 104, 224, 0.25); }
.kiosk .k-face .k-cam svg.ico { width: calc(66 * var(--u)); height: calc(66 * var(--u)); stroke-width: 1.6; }
.kiosk .k-scan { position: absolute; left: 12%; right: 12%; top: 14%; height: calc(3 * var(--u)); border-radius: 2px; background: linear-gradient(90deg, rgba(91, 140, 255, 0), #3568e0 50%, rgba(91, 140, 255, 0)); box-shadow: 0 0 calc(10 * var(--u)) rgba(53, 104, 224, 0.7); animation: k-scan 1.1s ease-in-out infinite alternate; }
.kiosk .k-face b { font-size: calc(16 * var(--u)); font-weight: 800; color: var(--primary); }
.kiosk .k-face.ok .k-cam { background: #e7f8f1; color: var(--success-deep); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(16, 185, 129, 0.3); }
.kiosk .k-face.ok .k-cam svg.ico { width: calc(54 * var(--u)); height: calc(54 * var(--u)); stroke-width: 2.6; }
.kiosk .k-face.ok b { color: var(--success-deep); }
.kiosk .k-alts { flex-shrink: 0; display: flex; justify-content: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.kiosk .k-alts button { display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); padding: calc(7 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); font-size: calc(11.5 * var(--u)); font-weight: 800; color: var(--gray-600); white-space: nowrap; transition: border-color 0.13s; }
.kiosk .k-alts svg.ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
/* 번호 입력: [확인]은 4자리를 채우면 켜짐 */
.kiosk .k-pin { margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
.kiosk .k-pad button { height: calc(40 * var(--u)); }
.kiosk .k-pad button.k-ok { background: var(--primary); border-color: var(--primary); color: #fff; }
.kiosk .k-pad button.k-ok:disabled { background: #d7dce4; border-color: #d7dce4; cursor: default; }
/* 완료: 체크 · 주문 완료 / 구매 완료 · 항목 · 한 줄 */
.kiosk .k-done b { font-size: calc(19 * var(--u)); }
.kiosk .k-done small { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; color: var(--ink); }
.kiosk .k-done .k-line { max-width: 92%; }
/* 아래 [뒤로] [처음으로] — 처음 화면에서는 비활성 */
.kiosk .k-nav { flex-shrink: 0; display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid #e3e8f0; }
.kiosk .k-nav button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(11 * var(--u)); background: #fff; border: calc(1.5 * var(--u)) solid var(--gray-200); font-size: calc(13.5 * var(--u)); font-weight: 800; color: var(--ink); transition: border-color 0.13s; }
.kiosk .k-nav svg.ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.kiosk .k-nav button:disabled { background: transparent; border-color: #e3e8f0; color: var(--gray-300); cursor: default; }
@keyframes k-scan { from { top: 14%; } to { top: 84%; } }
@media (prefers-reduced-motion: reduce) {
  .kiosk .k-scan, .kiosk[data-k-step="verify"] .kiosk-ir { animation: none !important; }
  .kiosk .k-scan { top: 49%; }
}
/* 장비 카드(#hardware): 카메라 표시등이 천천히 켜졌다 꺼짐 (안면인식 기본) */
.hw-card.shown .hw-kiosk .kiosk-ir { animation: hw-cam 2.6s ease-in-out infinite; }
@keyframes hw-cam { 0%, 55%, 100% { background: #1d2a44; box-shadow: none; } 70%, 85% { background: #5b8cff; box-shadow: 0 0 calc(6 * var(--u)) rgba(91, 140, 255, 0.9); } }
@media (prefers-reduced-motion: reduce) { .hw-card.shown .hw-kiosk .kiosk-ir { animation: none; } }

/* 히어로 앱 홈: 우리 단지 시설 — 사진 + 이름만 */
.a-fac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-fac { background: #fff; border: 1px solid #edf0f5; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(17, 25, 39, 0.04); }
.a-fac img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.a-fac b { display: block; padding: 8px 10px 9px; font-size: 13px; font-weight: 800; color: var(--ink); }
/* 히어로 연출: 큰 파란 버튼은 눌릴 때 배경을 밝히지 않고 살짝 짙어짐 (글자가 사라지지 않게) */
.kiosk .k-cta.k-tap { animation-name: k-press-cta; }
@keyframes k-press-cta { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.96); background: var(--primary-deep); } }

/* ===== R4 · R7-Y 골프 · GX · 커뮤니티 · 서비스 소개 ===== */
/* '업데이트 예정' — 기존 회색 라벨(.tag)을 작게, 구석에 */
.tag.soon { height: 20px; padding: 0 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fx-step.has-soon .tag.soon { position: absolute; top: 12px; right: 14px; }
.fx-step.has-soon .fx-step-txt b { padding-right: 84px; }
.fx-push.has-soon { position: relative; }
.fx-push.has-soon .tag.soon { position: absolute; top: 10px; right: 10px; }
.fx-push.has-soon > div > b { padding-right: 84px; }
.fx-mcard .ic-top .tag.soon { margin-left: auto; margin-right: 10px; }
.fx-sc-push .tag.soon { position: absolute; top: 8px; right: 9px; height: 16px; padding: 0 6px; font-size: 9px; }
/* 골프 #power 02: 켜지는 장비는 티업기 전원 하나 */
.fx-toggles.one { grid-template-columns: 1fr; }
/* 골프 장면: 티업기 전원만 제어 — 타석 조명(빛 원뿔) · 스크린은 예약과 함께 켜지지 않음 */
.fx-sc-golf .fx-bay.on .fx-bay-cone, .fx-sc-golf .fx-bay.on .fx-bay-fair { opacity: 0; }
.fx-sc-golf .fx-bay.on .fx-bay-scr { background: linear-gradient(170deg, #1a2436, #0d1626); color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.fx-sc-golf .fx-bay.me.on .fx-bay-scr { animation: none; }

/* 서비스 소개 · 입주민의 하루 06:30 — 폰 화면 대신 안면인식기에 얼굴을 찍는 장면
   기존 안면인식기 그림(.dv-face)을 크게 재사용. 화면에 들어오면 스캔 선이 한 번 지나가고(900ms) → 인증 표시(220ms)
   → 결과 카드가 왼쪽부터 마스크로 열림(400ms, cubic-bezier(.16,1,.3,1)). 글로우 · 반복 없음, 동작 줄이기면 완성 상태 */
.frs { position: relative; z-index: 1; width: 292px; height: 616px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.frs-loc { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-100); font-size: 12px; font-weight: 800; color: var(--gray-700); box-shadow: 0 6px 16px -10px rgba(22, 56, 139, 0.35); }
.frs-loc svg.ico { width: 14px; height: 14px; color: var(--primary); }
.frs-dev { position: relative; display: flex; flex-direction: column; align-items: center; }
.frs .dv-face { width: 150px; height: 206px; border-radius: 26px; padding: 14px; margin-bottom: 0; }
.frs .dv-face-screen { height: 136px; border-radius: 14px; color: #6ee7b7; }
.frs .dv-face-screen svg.ico { width: 64px; height: 64px; stroke-width: 1.4; }
.frs .dv-face-led { margin-top: 18px; width: 10px; height: 10px; background: #34d399; box-shadow: none; }
.frs .dv-pole { position: relative; left: auto; bottom: auto; transform: none; width: 20px; height: 84px; }
.frs-scan { position: absolute; left: 12px; right: 12px; top: 12px; height: 2px; border-radius: 2px; background: #6ee7b7; opacity: 0; }
.frs-ok { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; }
.frs .dv-face-screen .frs-ok svg.ico { width: 17px; height: 17px; stroke-width: 3; }
.frs-res { width: 100%; background: #fff; border: 1px solid #e6ebf4; border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 18px 34px -22px rgba(17, 25, 39, 0.4); }
.frs-res-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f2f6; }
.frs-res-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: #e7f8f1; color: var(--success-deep); display: flex; align-items: center; justify-content: center; }
.frs-res-ico svg.ico { width: 17px; height: 17px; }
.frs-res-h b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.frs-res-h small { display: block; font-size: 11.5px; color: var(--gray-500); }
.frs-steps { margin-top: 4px; display: grid; }
.frs-steps li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid #f4f6fa; }
.frs-steps li:last-child { border-bottom: 0; padding-bottom: 2px; }
.frs-steps svg.ico { width: 14px; height: 14px; stroke-width: 2.8; color: var(--success-deep); flex-shrink: 0; }
.frs-steps span { color: var(--gray-500); }
.frs-steps b { margin-left: auto; font-weight: 800; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .tl-scroll.seen .tl-screen.active .frs-scan { animation: frs-scan 1.05s 0.45s both; }
  .tl-scroll.seen .tl-screen.active .frs .dv-face-screen { animation: frs-tint 0.2s cubic-bezier(0.4, 0, 0.2, 1) 1.45s both; }
  .tl-scroll.seen .tl-screen.active .frs .dv-face-led { animation: frs-led 0.2s cubic-bezier(0.4, 0, 0.2, 1) 1.45s both; }
  .tl-scroll.seen .tl-screen.active .frs-ok { animation: frs-ok 0.22s cubic-bezier(0.16, 1, 0.3, 1) 1.45s both; }
  .tl-scroll.seen .tl-screen.active .frs-res { animation: frs-res 0.4s cubic-bezier(0.16, 1, 0.3, 1) 1.62s both; }
}
@keyframes frs-scan {
  0% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  86% { opacity: 1; transform: translateY(110px); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% { opacity: 0; transform: translateY(110px); }
}
@keyframes frs-tint { from { color: #a9c3ff; } to { color: #6ee7b7; } }
@keyframes frs-led { from { background: #64748b; } to { background: #34d399; } }
@keyframes frs-ok { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(71% at 50% 50%); } }
@keyframes frs-res { from { clip-path: inset(0 100% 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }

/* ===== R7 · X (메인 · 출입 통제 · 키오스크 · 도입 안내 · 공통) ===== */
/* 3. 메인 #change 제목: '이렇게 바뀝니다' · 설명 뒷부분이 부드러운 마스크 스윕으로 등장
   · 2026-10-27 붉은 취소선은 뺌(지저분하다는 요청) — 선을 기다리던 지연도 0.38 · 0.46s → 0.08 · 0.16s
   · hero.js 'R7 · 메인 #change 제목 연출'이 is-armed → is-play → is-done 클래스만 바꿈 (한 번만)
   · 숨긴 글자는 투명 글자 + 배경 글자 칠(background-clip: text)로 자리를 그대로 차지 → 레이아웃 흔들림 없음
   · 등장 곡선 cubic-bezier(.16, 1, .3, 1) · 글로우 없음 · 움직임 줄이기면 스크립트가 무장하지 않아 완성 상태 */
.chg-hd .chg-was { position: relative; white-space: nowrap; }
.chg-hd .chg-now { --chg-c: var(--ink); }
.chg-hd .chg-tail { --chg-c: var(--gray-500); }
.chg-hd.is-armed .chg-now, .chg-hd.is-armed .chg-tail {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--chg-c) 0%, var(--chg-c) 46%, transparent 54%, transparent 100%);
  background-size: 220% 100%; background-repeat: no-repeat; background-position: 100% 0;
}
.chg-hd.is-armed.is-play .chg-now { background-position: 0 0; transition: background-position 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s; }
.chg-hd.is-armed.is-play .chg-tail { background-position: 0 0; transition: background-position 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.16s; }

/* 2·7. 메인 #hardware: 안면인식기(주력 · 큰 카드 · 첫 자리) + 스피드게이트 · 키오스크 */
@media (min-width: 1024px) {
  .hw-grid.hw-grid-r7 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.hw-grid-r7 .hw-gate .hw-photo img { width: auto; height: 88%; max-width: 92%; }
.hw-face-art { align-items: flex-end; }
.hw-fd-stage { position: relative; flex-shrink: 0; width: 440px; height: 334px; transform-origin: 50% 100%; }
.hw-fd { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.hw-fd-body {
  position: relative; z-index: 1; width: 150px; padding: 12px 12px 14px; border-radius: 24px;
  background: linear-gradient(170deg, #2a3446 0%, #111927 100%);
  box-shadow: 0 26px 44px -20px rgba(17, 25, 39, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hw-fd-cam { width: 9px; height: 9px; border-radius: 50%; background: #0b1222; box-shadow: inset 0 0 0 2px #3b4860; }
.hw-fd-scr {
  position: relative; width: 100%; height: 150px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #234596, #0d1a3a); color: #a9c3ff;
  display: flex; align-items: center; justify-content: center;
}
.hw-fd-scr svg.ico { width: 66px; height: 66px; stroke-width: 1.3; }
.hw-fd-scan { position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; border-radius: 2px; background: #6ee7b7; }
.hw-face.shown .hw-fd-scan { animation: hw-fd-scan 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
@keyframes hw-fd-scan { to { transform: translateY(120px); } }
.hw-fd-pad { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hw-fd-pad > span {
  height: 50px; border-radius: 12px; background: #0d1a3a; color: #a9c3ff; border: 1px solid rgba(169, 195, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
}
.hw-fd-pad svg.ico { width: 24px; height: 24px; stroke-width: 1.6; }
.hw-fd-pole { width: 18px; height: 66px; margin-top: -2px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #c9d0dc, #9aa4b5); }
.hw-fd-tag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 10px;
  border-radius: 999px; background: #fff; border: 1px solid var(--blue-100); box-shadow: var(--shadow-sm);
  font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.hw-fd-tag svg.ico { width: 16px; height: 16px; color: var(--primary); }
.hw-fd-tag.t-face { left: calc(50% + 92px); top: 74px; }
.hw-fd-tag.t-card { right: calc(50% + 92px); top: 196px; }
.hw-fd-tag.t-fp { left: calc(50% + 92px); top: 196px; }
@media (max-width: 1023px) {
  .hw-fd-stage { transform: scale(0.86); }
}
@media (max-width: 767px) {
  .hw-fd-stage { transform: scale(0.64); }
  .hw-face-art .hw-live { left: 12px; bottom: 12px; padding: 6px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-face.shown .hw-fd-scan { animation: none; }
}

/* 출입 통제: 인증 수단 3가지(얼굴 · 카드 · 지문 — 안면인식기 한 대에서) */
@media (min-width: 768px) {
  .auth-grid.fx-auth-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .auth-grid.fx-auth-3 { grid-template-columns: 1fr; }
}
#methods .sec-desc { text-wrap: balance; }
/* 출입 장면: 인증 수단 칩 3개를 게이트 위 가운데로 · 기록 창은 체류 인원 상자를 뺀 자리 */
.fx-sc-access .fx-methods { width: 262px; justify-content: center; }
.fx-sc-log .fx-sc-rows { margin-top: 10px; }

/* 도입 안내 '입주민 오픈' 앱 메뉴 3개 — 2칸 격자에서 마지막 칸은 가로로 이어 빈칸 없이 */
.jr-open .jr-ph-grid > span:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ===== R8 · C 연락처 — 대표 문의는 휴대폰에서 전화 걸기 · PC에서 복사, 이메일은 눌러서 복사(별도 복사 버튼 없음) ===== */
.ch-card .ch-val { display: block; font-size: 22px; font-weight: 800; font-family: var(--font-num); letter-spacing: -0.01em; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
.ch-card .ch-val.txt { font-family: var(--font); font-size: 18px; }
.ch-card .ch-val:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.ch-card .ch-val:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.ft-contact .ft-val { font: inherit; font-weight: 600; color: #e5e9ef; text-decoration: none; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
.ft-contact .ft-val:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-contact .ft-val:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 767px) { .ch-card { flex-wrap: nowrap; } }   /* 복사 버튼을 아랫줄로 내리던 줄바꿈 해제 — 버튼이 없어져 글이 아이콘 옆에 붙게 */
.ch-card > div { min-width: 0; }
.ch-card .ch-val.txt { overflow-wrap: anywhere; }
@media (max-width: 360px) { .ch-card { padding: 20px; gap: 12px; } .ch-card .ch-ico { width: 44px; height: 44px; } .ch-card .ch-val.txt { font-size: 15px; } }

/* ===== R8 · F 안면인식기 ===== */
/* 메인 #hardware 안면인식기 카드: "단말기 한 대로 얼굴 · 카드 · 지문"을 단말기의 실제 부위에서 보여 줌
   · 단말기 = 화면(카메라) · 카드 리더 · 지문 센서 3구역. 오른쪽 방법 버튼 3개가 각 구역 높이에 맞춰 서고, 지시선(.w-lead)으로 그 부위와 이어짐
   · 크기는 transform 축소 대신 --k 배율로 계산 → 모바일에서도 버튼 글자 · 누름 영역은 실제 크기
   · 상태: .hw-fd-stage[data-way] = face | card | fp | all(움직임 줄이기 · 스크립트 전 정지 장면)
           단계 클래스 is-prop(다가감) · is-read(읽음) · is-ok(이용권 확인) · is-open(문 열림) — widgets.js 'R8 · F 안면인식기 인증 방식 시연'이 바꿈
   · 곡선: 등장 out (.16,1,.3,1) · 이동 glide (.47,.2,.15,1) · 퇴장 exit (.55,.055,.675,.19) · 작은 변화 ui (.4,0,.2,1) · 스윕 smooth (.65,0,.35,1)
   · 글로우 · 반복 맥동 없음. 움직임 줄이기면 전환 없이 세 방법이 모두 드러난 정지 장면 */
.hw-face {
  --k: 1; --dy: 22px; --lead: 58px; --rw: 138px; --bh: 50px; --in: 300px; --fin: 150px;
  --c-out: cubic-bezier(0.16, 1, 0.3, 1); --c-glide: cubic-bezier(0.47, 0.2, 0.15, 1); --c-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --c-ui: cubic-bezier(0.4, 0, 0.2, 1); --c-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --fd-ring: #8eaef6; --fd-read: #6ee7b7; --fd-dash: #b4c7f2;
}
.hw-face-art .hw-fd-stage { align-self: stretch; height: auto; transform: none; width: calc(150px * var(--k) + var(--lead) + var(--rw)); }

/* 단말기 (150 × 287 × --k): 카메라 12 · 화면 29~149 · 카드 리더 159~205 · 지문 센서 229~273 */
.hw-face-art .hw-fd { left: 0; top: var(--dy); bottom: auto; transform: none; display: block; width: calc(150px * var(--k)); height: calc(287px * var(--k)); }
.hw-face-art .hw-fd-body { position: absolute; inset: 0; width: auto; padding: 0; display: block; border-radius: calc(24px * var(--k)); }
.hw-face-art .hw-fd-cam { position: absolute; left: 50%; top: calc(12px * var(--k)); width: calc(9px * var(--k)); height: calc(9px * var(--k)); transform: translateX(-50%); }
.hw-face-art .hw-fd-scr, .hw-face-art .hw-fd-card, .hw-face-art .hw-fd-fp { position: absolute; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.2s var(--c-ui); }
.hw-face-art .hw-fd-scr { display: block; left: calc(12px * var(--k)); top: calc(29px * var(--k)); width: calc(126px * var(--k)); height: calc(120px * var(--k)); border-radius: calc(14px * var(--k)); }
.hw-face-art .hw-fd-card, .hw-face-art .hw-fd-fp {
  display: flex; align-items: center; justify-content: center;
  background: #0d1a3a; color: #a9c3ff; border: 1px solid rgba(169, 195, 255, 0.18);
  transition: outline-color 0.2s var(--c-ui), border-color 0.2s var(--c-ui), color 0.2s var(--c-ui);
}
.hw-face-art .hw-fd-card { left: calc(12px * var(--k)); top: calc(159px * var(--k)); width: calc(126px * var(--k)); height: calc(46px * var(--k)); border-radius: calc(12px * var(--k)); }
.hw-face-art .hw-fd-fp { left: calc(53px * var(--k)); top: calc(229px * var(--k)); width: calc(44px * var(--k)); height: calc(44px * var(--k)); border-radius: calc(13px * var(--k)); }
.hw-face-art .hw-fd-card svg.ico { width: calc(26px * var(--k)); height: calc(26px * var(--k)); stroke-width: 1.7; }
.hw-face-art .hw-fd-fp svg.ico { width: calc(28px * var(--k)); height: calc(28px * var(--k)); stroke-width: 1.5; }
.hw-face-art .hw-fd-pole { position: absolute; left: 50%; top: calc(287px * var(--k) - 2px); width: calc(18px * var(--k)); height: 240px; margin: 0; transform: translateX(-50%); }

/* 얼굴: 카메라 앞에 선 사람(머리 · 어깨)이 화면 아래에서 올라옴 → 조준 모서리 → 스캔선 한 번 */
.hw-fd-who { position: absolute; inset: 0; transform: translateY(101%); transition: transform 0.28s var(--c-exit); }
.hw-fd-who::before, .hw-fd-who::after { content: ''; position: absolute; left: 50%; background: #86a6f0; }
.hw-fd-who::before { top: calc(30px * var(--k)); width: calc(40px * var(--k)); height: calc(40px * var(--k)); margin-left: calc(-20px * var(--k)); border-radius: 50%; }
.hw-fd-who::after { top: calc(78px * var(--k)); width: calc(90px * var(--k)); height: calc(60px * var(--k)); margin-left: calc(-45px * var(--k)); border-radius: calc(45px * var(--k)) calc(45px * var(--k)) 0 0; }
.hw-fd-aim {
  --ac: #e3ebff; --al: calc(15px * var(--k));
  position: absolute; left: 50%; top: calc(20px * var(--k)); width: calc(66px * var(--k)); height: calc(66px * var(--k)); margin-left: calc(-33px * var(--k));
  background:
    linear-gradient(var(--ac), var(--ac)) 0 0 / var(--al) 2px, linear-gradient(var(--ac), var(--ac)) 0 0 / 2px var(--al),
    linear-gradient(var(--ac), var(--ac)) 100% 0 / var(--al) 2px, linear-gradient(var(--ac), var(--ac)) 100% 0 / 2px var(--al),
    linear-gradient(var(--ac), var(--ac)) 0 100% / var(--al) 2px, linear-gradient(var(--ac), var(--ac)) 0 100% / 2px var(--al),
    linear-gradient(var(--ac), var(--ac)) 100% 100% / var(--al) 2px, linear-gradient(var(--ac), var(--ac)) 100% 100% / 2px var(--al);
  background-repeat: no-repeat;
  opacity: 0; transform: scale(1.18); transition: opacity 0.15s var(--c-exit), transform 0.15s var(--c-exit);
}
.hw-fd-sweep { position: absolute; left: calc(26px * var(--k)); right: calc(26px * var(--k)); top: calc(20px * var(--k)); height: 2px; border-radius: 2px; background: var(--fd-read); opacity: 0; }
/* 결과(세 방법 공통): 초록 확인 화면이 아래에서 위로 쓸어 올라오고 체크 획 그리기 */
.hw-fd-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--success); color: #fff; clip-path: inset(100% 0 0 0); transition: clip-path 0.25s var(--c-exit); }
.hw-face-art .hw-fd-ok svg.ico { width: calc(46px * var(--k)); height: calc(46px * var(--k)); stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.15s var(--c-exit); }

/* 카드: 브랜드 없는 흰 RF 카드가 왼쪽 밖에서 들어와 카드 리더에 닿음 */
.hw-fd-rf {
  position: absolute; z-index: 3; left: calc(-30px * var(--k)); top: calc(153px * var(--k)); width: calc(92px * var(--k)); height: calc(58px * var(--k));
  border-radius: calc(7px * var(--k)); background: #fff; border: 1px solid #d3dcee; box-shadow: 0 12px 20px -12px rgba(17, 25, 39, 0.5);
  transform: translateX(calc(-1 * var(--in))) rotate(-8deg); transition: transform 0.3s var(--c-exit);
}
.hw-fd-rf svg.ico { position: absolute; right: calc(8px * var(--k)); top: calc(7px * var(--k)); width: calc(18px * var(--k)); height: calc(18px * var(--k)); color: var(--primary); stroke-width: 2; }
.hw-fd-rf i { position: absolute; left: calc(9px * var(--k)); bottom: calc(10px * var(--k)); width: calc(36px * var(--k)); height: calc(4px * var(--k)); border-radius: 2px; background: #dfe6f3; }
.hw-fd-rf i::before { content: ''; position: absolute; left: 0; bottom: calc(8px * var(--k)); width: calc(22px * var(--k)); height: 100%; border-radius: 2px; background: #dfe6f3; }

/* 지문: 단순한 도형의 손가락(손톱 · 마디 주름)이 왼쪽 아래에서 들어와 지문 센서에 닿음 */
.hw-fd-finger {
  position: absolute; z-index: 3; left: calc(51px * var(--k)); top: calc(236px * var(--k)); width: calc(30px * var(--k)); height: calc(130px * var(--k));
  border-radius: calc(15px * var(--k)) calc(15px * var(--k)) calc(11px * var(--k)) calc(11px * var(--k));
  background: #f0c5a8; box-shadow: 0 12px 20px -12px rgba(17, 25, 39, 0.45);
  transform-origin: 50% 0; transform: translate(calc(-0.42 * var(--fin)), calc(0.9 * var(--fin))) rotate(24deg); transition: transform 0.3s var(--c-exit);
}
.hw-fd-finger i { position: absolute; left: calc(6px * var(--k)); top: calc(5px * var(--k)); width: calc(18px * var(--k)); height: calc(21px * var(--k)); border-radius: calc(9px * var(--k)) calc(9px * var(--k)) calc(6px * var(--k)) calc(6px * var(--k)); background: #f9e0d2; }
.hw-fd-finger::before, .hw-fd-finger::after { content: ''; position: absolute; left: calc(8px * var(--k)); right: calc(8px * var(--k)); height: 2px; border-radius: 1px; background: rgba(176, 110, 80, 0.32); }
.hw-fd-finger::before { top: calc(58px * var(--k)); }
.hw-fd-finger::after { top: calc(65px * var(--k)); }

/* 방법 버튼: 각 부위 높이에 맞춰 세우고, 지시선으로 단말기 부위와 이음 · 선택 테두리 1개가 버튼 사이를 이동 */
.hw-fd-ways { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(150px * var(--k) + var(--lead)); width: var(--rw); }
.hw-face-art .hw-fd-way {
  position: absolute; z-index: 1; left: 0; width: 100%; height: var(--bh); top: calc(var(--dy) + var(--cy) * var(--k) - var(--bh) / 2);
  display: flex; align-items: center; gap: 9px; padding: 0 10px 0 9px; text-align: left;
  background: #fff; border: 1px solid #d9e3f8; border-radius: 14px; box-shadow: 0 8px 16px -12px rgba(17, 25, 39, 0.4);
  transition: border-color 0.2s var(--c-ui), transform 0.15s var(--c-ui);
}
.hw-fd-way[data-way="face"] { --cy: 89px; --reach: 12px; }
.hw-fd-way[data-way="card"] { --cy: 182px; --reach: 12px; }
.hw-fd-way[data-way="fp"] { --cy: 251px; --reach: 53px; }
.hw-face-art .hw-fd-way:hover { border-color: var(--blue-300); }
.hw-face-art .hw-fd-way:active { transform: scale(0.97); }
.hw-fd-way .w-ico { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--primary); transition: background-color 0.2s var(--c-ui), color 0.2s var(--c-ui); }
.hw-fd-way .w-ico svg.ico { width: 18px; height: 18px; }
.hw-fd-way .w-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hw-fd-way b { font-size: 15px; font-weight: 800; color: var(--ink); }
.hw-fd-way small { font-size: 11.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; transition: color 0.2s var(--c-ui); }
.hw-fd-way[aria-pressed="true"] .w-ico { background: var(--primary); color: #fff; }
.hw-fd-way[aria-pressed="true"] small { color: var(--primary); }
.hw-fd-way .w-lead { position: absolute; right: 100%; top: 50%; width: calc(var(--lead) + var(--reach) * var(--k) + 1px); margin-top: -1px; border-top: 2px dashed var(--fd-dash); pointer-events: none; }
.hw-fd-way .w-lead::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.2s var(--c-exit); }
.hw-fd-way .w-lead::after { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--fd-dash); transition: border-color 0.2s var(--c-ui); }
.hw-fd-way[aria-pressed="true"] .w-lead::before { transform: scaleX(1); transition: transform 0.3s var(--c-out); }
.hw-fd-way[aria-pressed="true"] .w-lead::after { border-color: var(--primary); }
.hw-fd-sel {
  position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: var(--bh); border-radius: 14px; border: 2px solid var(--primary);
  box-shadow: 0 10px 20px -12px rgba(37, 87, 209, 0.7); pointer-events: none;
  transform: translateY(calc(var(--dy) + var(--sy, 89px) * var(--k) - var(--bh) / 2)); transition: transform 0.2s var(--c-out), opacity 0.15s var(--c-ui);
}
.hw-fd-stage[data-way="card"] .hw-fd-sel { --sy: 182px; }
.hw-fd-stage[data-way="fp"] .hw-fd-sel { --sy: 251px; }
.hw-fd-stage[data-way="all"] .hw-fd-sel { opacity: 0; }
.hw-face-art .hw-fd-stage[data-way="all"] .hw-fd-way { border-color: var(--primary); }

/* 결과 칩: 이용권 확인 › 문 열림 (세 방법 모두 같은 결과) */
.hw-fd-res {
  position: absolute; z-index: 4; right: 0; top: calc(var(--dy) + 251px * var(--k) + var(--bh) / 2 + 12px);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px;
  background: #fff; box-shadow: var(--shadow-md); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--gray-500); white-space: nowrap;
}
.hw-fd-res > span { display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s var(--c-ui); }
.hw-fd-res svg.ico { width: 15px; height: 15px; stroke-width: 2; color: var(--gray-400); transition: color 0.2s var(--c-ui); }
.hw-fd-res .r-arw { width: 7px; height: 7px; margin-left: -2px; border-top: 2px solid var(--gray-300); border-right: 2px solid var(--gray-300); transform: rotate(45deg); transition: border-color 0.2s var(--c-ui); }

/* 단계별 상태 — 대상 부위 테두리 */
.hw-fd-stage:is([data-way="face"], [data-way="all"]) .hw-fd-scr,
.hw-fd-stage:is([data-way="card"], [data-way="all"]) .hw-fd-card,
.hw-fd-stage:is([data-way="fp"], [data-way="all"]) .hw-fd-fp { outline-color: var(--fd-ring); }
/* 다가감 */
.hw-fd-stage[data-way="face"].is-prop .hw-fd-who, .hw-fd-stage[data-way="all"] .hw-fd-who { transform: none; transition: transform 0.4s var(--c-out); }
.hw-fd-stage[data-way="card"].is-prop .hw-fd-rf, .hw-fd-stage[data-way="all"] .hw-fd-rf { transform: rotate(-8deg); transition: transform 0.45s var(--c-glide); }
.hw-fd-stage[data-way="fp"].is-prop .hw-fd-finger, .hw-fd-stage[data-way="all"] .hw-fd-finger { transform: rotate(24deg); transition: transform 0.45s var(--c-glide); }
/* 읽음 */
.hw-fd-stage[data-way="face"].is-read .hw-fd-aim, .hw-fd-stage[data-way="all"] .hw-fd-aim { opacity: 1; transform: none; transition: opacity 0.2s var(--c-out), transform 0.2s var(--c-out); }
.hw-fd-stage[data-way="face"].is-read .hw-fd-sweep { opacity: 1; transform: translateY(calc(64px * var(--k))); transition: transform 0.65s var(--c-smooth); }
.hw-face-art .hw-fd-stage[data-way="card"].is-read .hw-fd-card, .hw-face-art .hw-fd-stage[data-way="all"] .hw-fd-card,
.hw-face-art .hw-fd-stage[data-way="fp"].is-read .hw-fd-fp, .hw-face-art .hw-fd-stage[data-way="all"] .hw-fd-fp { border-color: var(--fd-read); color: var(--fd-read); }
/* 이용권 확인 → 문 열림 */
.hw-fd-stage.is-ok .hw-fd-ok { clip-path: inset(0); transition: clip-path 0.36s var(--c-out); }
.hw-face-art .hw-fd-stage.is-ok .hw-fd-ok svg.ico { stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s var(--c-out) 0.12s; }
.hw-fd-stage:is(.is-ok, [data-way="all"]) .hw-fd-res .r1, .hw-fd-stage:is(.is-open, [data-way="all"]) .hw-fd-res .r2 { color: var(--ink); }
.hw-fd-stage:is(.is-ok, [data-way="all"]) .hw-fd-res .r1 svg.ico, .hw-fd-stage:is(.is-open, [data-way="all"]) .hw-fd-res .r2 svg.ico { color: var(--success-deep); }
.hw-fd-stage:is(.is-open, [data-way="all"]) .hw-fd-res .r-arw { border-color: var(--success-deep); }

/* 아래 '출입 처리 순서'는 따로 돌던 반복 강조 대신 시연과 같은 박자로 한 칸씩 (스크립트가 .on) */
.hw-main.hw-face.is-fd .hw-flow li { animation: none; transition: background-color 0.2s var(--c-ui), border-color 0.2s var(--c-ui), color 0.2s var(--c-ui); }
.hw-main.hw-face.is-fd .hw-flow li.on { background: var(--blue-50); border-color: var(--blue-300); color: var(--primary); }

@media (max-width: 1023px) {
  .hw-face { --k: 0.82; --dy: 18px; --lead: 56px; --bh: 46px; --fin: 120px; }
}
@media (max-width: 767px) {
  .hw-main.hw-face .hw-art { height: 272px; }
  .hw-face { --k: 0.72; --dy: 16px; --lead: 30px; --rw: 114px; --bh: 42px; --in: 220px; --fin: 130px; }
  .hw-face-art .hw-fd-way { gap: 7px; padding: 0 8px 0 7px; border-radius: 12px; }
  .hw-fd-sel { border-radius: 12px; }
  .hw-fd-way .w-ico { width: 28px; height: 28px; border-radius: 9px; }
  .hw-fd-way .w-ico svg.ico { width: 16px; height: 16px; }
  .hw-fd-way b { font-size: 14px; }
  .hw-fd-way small { font-size: 10.5px; }
  .hw-fd-res { gap: 6px; padding: 6px 10px; font-size: 12px; }
  .hw-fd-res svg.ico { width: 14px; height: 14px; }
}
@media (max-width: 359px) {
  .hw-face { --k: 0.66; --lead: 22px; --rw: 106px; --bh: 40px; }
  .hw-fd-res { gap: 5px; padding: 5px 8px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-face-art *, .hw-face-art *::before, .hw-face-art *::after { transition: none !important; }
}

/* ===== R8 · K 키오스크 흐름 ===== */
/* 2026-10-14 키오스크 흐름 '본인확인 → 선택 → 구매 확정' (demos.js DEMO.kiosk — 히어로 · 메인 미리보기 · 장비 카드 · 키오스크 페이지 공통)
   · 첫 화면 = 본인확인. 정지 상태는 '본인확인 대기'(얼굴 틀 · 안내 한 줄 · 작은 버튼 둘) — 얼굴 틀(버튼)을 누르면 인식 중 → 2초 → 인식 성공
   · 화면이 바뀌면 JS가 새 화면을 진행 방향 쪽 가장자리에서 마스크로 펼침(clip-path 360ms, cubic-bezier(.16,1,.3,1)), 옛 화면은 그 아래(.k-was)에 두었다가 제거
     → 화면마다 다시 올라오던 fade-up(panel-in)은 끔. 같은 화면 안의 상태 변화(대기 → 인식 중 → 성공, 숫자 입력)는 제자리에서만 바뀜
   · 인식 중: 스캔 선이 위 → 아래 → 위 한 번(1s × 2, 글로우 없음), 카메라 표시등은 켜진 채(깜빡임 없음) — 한 순간의 주 동작은 스캔 선 하나
   · 인식 성공: 같은 틀이 초록으로 바뀌고(200ms ui) 체크가 획으로 그려짐(260ms 등장 곡선)
   · 움직임 줄이기: 전환(JS) · 눌림 · 스캔 · 체크 모두 움직임 없이 완성 상태 */
.kiosk .kiosk-body { position: relative; }
.kiosk .k-step { animation: none; }
.kiosk .k-step.on { position: relative; z-index: 1; background: #f4f6fb; }
.kiosk .k-was { position: absolute; z-index: 0; display: flex; flex-direction: column; min-height: 0; pointer-events: none; }
/* 본인확인 얼굴 틀 = 한 버튼 (대기일 때만 눌림 — 인식 중 · 성공일 때는 aria-disabled) */
.kiosk button.k-face { position: relative; width: 100%; padding: 0; border-radius: calc(16 * var(--u)); }
.kiosk button.k-face[aria-disabled="true"] { cursor: default; }
.kiosk .k-face .k-cam { transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.kiosk button.k-face.wait:hover .k-cam { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--primary); }
.kiosk .k-face.wait b { font-weight: 700; color: var(--ink); }
/* 연출에서 얼굴 틀을 누르는 순간: 틀만 살짝 눌리고 틀 안에서 누른 자리가 퍼짐 (다른 버튼과 같은 0.9s · 같은 곡선) */
.kiosk .k-face.k-tap { animation: none; }
.kiosk .k-face.k-tap::before { content: none; }
.kiosk .k-face.k-tap .k-cam { animation: k-press-face 0.9s var(--ease) 0.15s both; }
.kiosk .k-face.k-tap .k-cam::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u)); border-radius: 50%; background: rgba(53, 104, 224, 0.32); pointer-events: none; animation: k-ripple 0.9s ease-out 0.15s both; }
@keyframes k-press-face { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.96); } }
/* 인식 중: 스캔 선 한 번 왕복 후 멈춤(무한 반복 · 글로우 없음) · 표시등은 켜진 채 */
.kiosk .k-scan { box-shadow: none; animation: k-scan 1s cubic-bezier(0.65, 0, 0.35, 1) 2 alternate both; }
.kiosk[data-k-step="verify"][data-k-v="scan"] .kiosk-ir { animation: none; }
/* 인식 성공: 같은 틀이 초록으로 · 체크는 획 그리기 (전화번호 · 패스워드 '확인 완료'도 체크 획 그리기) */
.kiosk button.k-face.ok .k-cam { animation: k-ok-tint 0.2s cubic-bezier(0.4, 0, 0.2, 1) both; }
.kiosk .k-face.ok .k-cam svg.ico { stroke-dasharray: 24; animation: k-ok-draw 0.26s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
@keyframes k-ok-tint { from { background: #e9f0fe; color: var(--primary); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(53, 104, 224, 0.25); } }
@keyframes k-ok-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 48; } }   /* 체크 경로(Lucide)는 오른쪽 위에서 시작 → 끝(왼쪽 짧은 획)부터 드러나게 */
@media (prefers-reduced-motion: reduce) {
  .kiosk .k-face.k-tap .k-cam, .kiosk .k-face.k-tap .k-cam::before, .kiosk button.k-face.ok .k-cam, .kiosk .k-face.ok .k-cam svg.ico { animation: none !important; }
}

/* ===== R8 · H 히어로 크기 ===== */
/* 2026-10-14 요청 "히어로 입주민 앱과 키오스크 화면이 너무 작아서 식별이 안 됨. 더 크게"
   · PC · 태블릿 무대 좌표 660×600 → 728×700 (hero.js layout()이 --hx-w · --hx-h를 읽어 칸 폭 · 첫 화면 높이에 맞춤)
     앱(폰)은 원래 크기 292×616, 키오스크는 같은 높이(--kz .9167 → 279×616, 키오스크 전체 높이 = 672 × --kz)로 키워 무대의 주인공으로
   · 관리사무소 대시보드: 두 기기 위 띠에 제목 · 수치, 실시간 기록은 두 기기 사이로 보임(뒤 층 그대로)
     두 기기 사이(폭 약 157): 같은 이용권(가운데) → 이용 현장(아래, 0.68배)
   · PC: 커진 무대가 히어로 아래 가운데 · 오른쪽 아래까지 차지 → 스크롤 안내 숨김, 무대가 보이는 동안 플로팅 버튼 숨김(모바일과 같은 규칙)
   · 모바일: 두 기기를 한 줄에 더 크게(화면 가장자리와 6px) — 좁으면 키오스크가 폰 뒤로 살짝 겹침(--hx-ov, hero.js: 키오스크 테두리 · 안쪽 여백만 가려 화면 글자는 그대로) */
@media (min-width: 768px) {
  .hero.hx { --hx-w: 728px; --hx-h: 700px; }
  .hx-fit { width: calc(var(--hx-w) * var(--hx-s)); height: calc(var(--hx-h) * var(--hx-s)); }
  .hx-scaler, .hx-net { width: var(--hx-w); height: var(--hx-h); }
  .hx-under { width: calc(var(--hx-w) * var(--hx-s)); }
  /* 두 창구: 위 띠(84) 아래로 같은 높이 616 */
  .hx-phone { top: 84px; scale: 1; }
  .hx-kio { left: auto; right: 0; top: 84px; width: calc(304px * 0.9167); --kz: 0.9167; }
  .hx-tag.t-phone { left: 0; top: 23px; }
  .hx-tag.t-kio { right: 0; top: 23px; }
  /* 관리사무소 대시보드 (뒤 · 가운데 위) */
  .hx-dash { left: 170px; top: 0; width: 400px; height: 224px; }
  .hx-win-bar { height: 28px; }
  .hx-dash-body { padding: 6px 14px 0; }
  .hx-kpis { gap: 9px; }
  .hx-kpi { height: 46px; padding: 6px 10px; }
  .hx-delta { top: 5px; }
  .hx-feed-panel { width: 148px; height: 128px; margin: 10px 0 0 112px; }
  /* 좁은 기록 칸: 한 줄 = [아이콘 | 제목 / 보조 글 · 출처] (줄 높이 30 · 간격 4는 그대로) */
  .hx-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-content: center; padding: 0 6px; }
  .hx-row-ico { grid-row: 1 / 3; }
  .hx-row-txt { display: contents; }
  .hx-row-txt b { grid-column: 2 / 4; }
  .hx-row-txt small { grid-column: 2; align-self: center; }
  .hx-src { grid-column: 3; grid-row: 2; height: 13px; padding: 0 5px; font-size: 8px; }
  /* 같은 이용권 (두 기기 사이 가운데) */
  .hx-pass { left: 310px; top: 360px; width: 120px; height: 76px; grid-template-columns: 26px minmax(0, 1fr); }
  .hx-pass-body { padding: 7px 8px; }
  .hx-pass-name { font-size: 12px; }
  .hx-pass-src i { padding: 0 5px; }
  /* 이용 현장 (두 기기 사이 아래) */
  .hx-field { left: 296px; top: 540px; scale: 0.68; transform-origin: 0 0; }
}
@media (min-width: 1024px) {
  /* 첫 화면(1440×900) 안에 커진 무대 + 단계 컨트롤 */
  .hero.hx { padding: 8px 0; }
  .hero.hx .hx-title { font-size: clamp(40px, 3.2vw, 46px); }
  .hx-under { margin-top: 8px; gap: 4px; }
  .hx-play { width: 36px; height: 36px; }
  .hx-step { height: 36px; }
  .hx-scroll { display: none; }
  /* 플로팅 버튼: 무대가 보이는 동안 숨김 — 다시 나타날 때 감속(--ease) 250ms, 숨을 때 가속 180ms
     메인은 첫 판정(hero.js hx-io) 전에도 숨겨 둠 → 첫 화면에서 보였다 사라지는 깜빡임 없음 */
  .floating { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s; }
  body.hx-on .floating, body[data-page="home"]:not(.hx-io) .floating { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity 0.18s cubic-bezier(0.55, 0.055, 0.675, 0.19), transform 0.18s cubic-bezier(0.55, 0.055, 0.675, 0.19), visibility 0s 0.18s; }
}
@media (min-width: 1201px) {
  .hero.hx .hero-inner { grid-template-columns: minmax(0, 490px) minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .hero.hx .hero-inner { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hx-fit { width: calc(100% + 28px); margin: 0 -14px; }
  .hx-canvas { column-gap: 0; }
  .hx-phone { z-index: 6; }
  .hx-kio, .hx-tag.t-kio { margin-left: calc(var(--hx-ov, -12px) * -1); }
}

/* =========================================================
   2026-10-27 (개선 · HERO SOLO) 메인 히어로 — 스마트폰 한 대 + 실제 앱 화면 (.hero.hx.hx-solo)
   기기 5종(앱 · 키오스크 · 대시보드 · 게이트 · 골프 타석) 무대를 걷어내고 폰 하나만 남김
   폰 폭 --pw: 첫 화면 높이 안에 폰 + 단계 컨트롤이 모두 들어오도록(1440×900 → 300px)
   폰 화면 속 앱은 아래 'HERO APP' 블록
   ========================================================= */
.hero.hx.hx-solo {
  --pw: clamp(220px, calc((100vh - var(--header-h) - 160px) / 2.19), 300px);
  --pw: clamp(220px, calc((100svh - var(--header-h) - 160px) / 2.19), 300px);
}
.hx-solo .hx-visual { align-items: center; }
.hx-solo .hx-under { width: min(100%, 560px); margin-right: 0; align-items: center; }
.hx-solo .hx-cap { text-align: center; padding-left: 0; }   /* PC 규칙(왼쪽 맞춤, 플로팅 버튼 피하기)을 되돌림 — 히어로가 보이는 동안 플로팅 버튼은 숨겨짐 */
.hp-phone {
  position: relative; z-index: 2; width: var(--pw); flex-shrink: 0; padding: 10px; border-radius: 46px;
  background: linear-gradient(175deg, #1f2838, #0b111d);
  box-shadow: 0 60px 90px -34px rgba(17, 25, 39, 0.5), 0 18px 30px -18px rgba(22, 56, 139, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: hx-rise 1s var(--ease) 0.4s backwards;
}
.hp-screen { position: relative; border-radius: 37px; overflow: hidden; background: #fff; }
.hp-view { position: relative; aspect-ratio: 400 / 876; overflow: hidden; background: #fff; }   /* 안에 입주민 앱(.ha, 기준 360×788)이 배율로 들어감 */
@media (max-width: 1023px) {
  .hero.hx.hx-solo { --pw: 280px; }
}
@media (max-width: 767px) {
  .hero.hx.hx-solo { --pw: min(250px, 66vw); }
  .hp-phone { border-radius: 40px; padding: 8px; }
  .hp-screen { border-radius: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-phone { animation: none !important; }
}

/* =========================================================
   2026-10-27 (개선 · DAY AUTO) 서비스 소개 '하루' 다이얼 — 휠 한 칸 구조 → 2.4초 자동 넘김 (.tl-auto, widgets.js)
   무대 높이는 그대로, 화면 고정(스크롤 길이 늘리기)만 없앰 · 오른쪽 아래 '01 / 05' 옆에 일시정지 버튼
   ========================================================= */
.tl-auto .tl-sticky { position: relative; top: auto; }
.tl-auto .dial-count { right: 44px; bottom: 33px; }
.dial-play { position: absolute; right: 0; bottom: 26px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.dial-play:hover { background: var(--primary); }
.dial-play span { display: flex; }
.dial-play svg.ico { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.dial-play .i-play, .dial-play[data-state="paused"] .i-pause { display: none; }
.dial-play[data-state="paused"] .i-play { display: flex; }
@media (max-width: 1023px) {
  .tl-auto .dial-count { top: 15px; bottom: auto; }
  .dial-play { top: 8px; bottom: auto; }
}

/* =========================================================
   2026-10-27 (개선 · HERO APP) 히어로 폰 속 입주민 앱 (.ha, js/hero-app.js)
   실제 앱 캡처를 HTML로 다시 그린 클릭 체험 화면 — 기준 크기 360×788, 폰 화면 폭에 맞춰 --ha-k 배율
   색은 사이트 주색과 별개로 실제 앱 화면을 따름(진한 파랑 버튼 · 회색 바탕 · 초록 '예약 가능')
   화면 전환: 들어오는 화면이 오른쪽(뒤로 가기는 왼쪽)에서 마스크 스윕 · 자동 안내가 누를 자리에는 터치 표시(.ha-touch)
   ========================================================= */
.ha {
  --ha-blue: #0b3fd0; --ha-blue-t: #1846d4; --ha-blue-50: #eef3ff; --ha-blue-100: #dbe5ff;
  --ha-bg: #f4f5f7; --ha-line: #eceef1; --ha-g9: #191f28; --ha-g7: #4e5968; --ha-g5: #8b95a1; --ha-g4: #b0b8c1; --ha-g3: #d1d6db;
  --ha-ok: #0f9d58; --ha-ok-bg: #e7f7ee; --ha-red: #f04452;
  position: absolute; left: 0; top: 0; width: 360px; height: 788px; transform-origin: 0 0; scale: var(--ha-k, 0.78);
  overflow: hidden; background: #fff; color: var(--ha-g9);
  font-family: var(--font); font-size: 14px; line-height: 1.45; letter-spacing: -0.02em; text-align: left;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.ha button { color: inherit; }
.ha .ha-i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ha :focus-visible { outline: 2px solid var(--ha-blue); outline-offset: 2px; }
.ha-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }

/* 머리글 · 본문 · 바닥 버튼 */
.ha-hd { flex-shrink: 0; position: relative; z-index: 3; height: 52px; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; background: #fff; }
.ha-hd > b { text-align: center; font-size: 16.5px; font-weight: 700; }
.ha-hd.float { position: absolute; left: 0; right: 0; top: 0; background: transparent; }
.ha-ib { width: 46px; height: 46px; margin-left: 6px; border-radius: 12px; display: grid; place-items: center; }
.ha-hd .ha-ib:last-child { margin: 0 6px 0 0; justify-self: end; }
.ha-ib:hover { background: var(--ha-bg); }
.ha-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ha-body::-webkit-scrollbar { display: none; }
.ha-body.gray { background: var(--ha-bg); }
.ha-foot { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 16px 16px; background: #fff; box-shadow: 0 -1px 0 var(--ha-line); }
.ha-cta { flex: 1; height: 54px; border-radius: 10px; background: var(--ha-blue); color: #fff !important; font-size: 16.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; transition: background 0.15s; }
.ha-cta:hover { background: #0934b3; }
.ha-cta i { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.45); }
.ha-cta:disabled { background: #bcc8ee; cursor: default; }
.ha-btn-o { width: 108px; height: 54px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--ha-g3); background: #fff; font-size: 15.5px; font-weight: 700; }
.ha-btn-o:disabled { color: var(--ha-g4); cursor: default; }
.ha-btn-b { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 8px; background: var(--ha-blue); color: #fff !important; font-size: 14.5px; font-weight: 700; }

/* 공통 조각 */
.ha-pad { padding: 20px; }
.ha-gap { height: 10px; background: var(--ha-bg); }
.ha-h3 { margin-bottom: 14px; font-size: 16.5px; font-weight: 700; }
.ha-h3.m0 { margin: 0; }
.ha-h4 { margin-bottom: 12px; font-size: 15px; font-weight: 700; }
.ha-price { color: var(--ha-blue-t); font-weight: 800; }
.ha-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ha-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14.5px; }
.ha-kv > span { flex-shrink: 0; color: var(--ha-g5); }
.ha-kv > b { font-weight: 600; text-align: right; }
.ha-kvl .ha-kv { justify-content: flex-start; }
.ha-kvl .ha-kv > span { width: 86px; }
.ha-kvl .ha-kv > b { text-align: left; }
.ha-note { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--ha-bg); font-size: 13px; line-height: 1.6; color: var(--ha-g7); }
.ha-note b { display: block; margin-bottom: 4px; font-size: 13px; }
.ha-note ul { margin-top: 6px; padding-left: 18px; list-style: disc; }
.ha-empty { padding: 30px 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ha-g5); }
.ha-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ha-badge.ok { color: var(--ha-ok); background: var(--ha-ok-bg); }
.ha-badge.gray { color: var(--ha-g5); background: var(--ha-bg); }
.ha-chips, .ha-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ha-pills { padding-bottom: 6px; }
.ha-chip { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ha-g3); background: #fff; font-size: 14px; font-weight: 600; }
.ha-chip em { font-style: normal; font-weight: 700; color: var(--ha-blue-t); }
.ha-chip[aria-pressed="true"] { border-color: var(--ha-blue); background: var(--ha-blue-50); color: var(--ha-blue); }
.ha-pill { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ha-g3); background: #fff; font-size: 14px; font-weight: 700; }
.ha-pill[aria-pressed="true"] { border-color: var(--ha-blue); background: var(--ha-blue); color: #fff; }
.ha-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 16px; border-bottom: 1px solid var(--ha-line); }
.ha-tab { position: relative; height: 50px; font-size: 15.5px; font-weight: 700; color: var(--ha-g4); }
.ha-tab[aria-selected="true"] { color: var(--ha-blue); }
.ha-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ha-blue); }
.ha-step { display: inline-flex; align-items: center; gap: 4px; }
.ha-step button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ha-g3); background: #fff; display: grid; place-items: center; }
.ha-step button .ha-i { width: 16px; height: 16px; }
.ha-step button:disabled { color: var(--ha-g3); cursor: default; }
.ha-step b { min-width: 34px; height: 30px; border-radius: 8px; background: var(--ha-bg); display: grid; place-items: center; font-size: 14px; }

/* 메인 */
.ha-hello { padding: 18px 20px 12px; font-size: 18px; font-weight: 800; }
.ha-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "c d" "e d"; gap: 8px; padding: 0 16px; }
.ha-tile { min-height: 64px; padding: 14px; border-radius: 14px; border: 1px solid var(--ha-line); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; font-size: 15px; font-weight: 700; line-height: 1.35; }
.ha-tile:hover, .ha-fac:hover, .ha-notice button:hover, .ha-ocard:hover { border-color: var(--ha-blue-100); }
.ha-tile em { font-style: normal; color: var(--ha-blue-t); }
.ha-tile.a { grid-area: a; min-height: 86px; align-items: flex-end; }
.ha-tile.b { grid-area: b; min-height: 86px; align-items: flex-end; }
.ha-tile.a > span, .ha-tile.b > span { align-self: flex-start; }
.ha-tile.c { grid-area: c; }
.ha-tile.e { grid-area: e; }
.ha-tile.d { grid-area: d; flex-direction: column; align-items: flex-start; }
.ha-tile.d .ha-ti { align-self: flex-end; margin-top: auto; }
.ha-ti { width: 36px; height: 36px; flex-shrink: 0; }
.ha-card { margin: 12px 16px 0; padding: 16px; border-radius: 14px; border: 1px solid var(--ha-line); background: #fff; }
.ha-card-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ha-card-h b { font-size: 15px; font-weight: 700; }
.ha-card-h small { font-size: 13px; color: var(--ha-g7); }
.ha-card .ha-empty { padding: 26px 0 14px; }
.ha-today { margin-top: 10px; }
.ha-today li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.ha-today li i { width: 3px; height: 16px; border-radius: 2px; background: var(--ha-blue); }
.ha-today li span { flex: 1; font-weight: 600; }
.ha-today li small { color: var(--ha-g5); }
.ha-notice { display: grid; gap: 8px; margin-top: 12px; }
.ha-notice button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; background: var(--ha-bg); text-align: left; font-size: 13.5px; font-weight: 600; }
.ha-notice button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-notice button small { flex-shrink: 0; color: var(--ha-g5); }
.ha-sec { margin-top: 14px; padding: 22px 16px 28px; background: #fff; }
.ha-sec h3 { margin-bottom: 18px; font-size: 17px; font-weight: 800; }
.ha-sec h4 { margin-bottom: 12px; font-size: 14.5px; font-weight: 700; }
.ha-sec .ha-fac-grid + h4 { margin-top: 24px; }
.ha-fac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ha-fac { display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--ha-line); background: #fff; text-align: left; }
.ha-fac-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--ha-bg); }
.ha-fac-img img { width: 100%; height: 100%; object-fit: cover; }
.ha-fac-img .ha-badge { position: absolute; left: 8px; top: 8px; background: #fff; }
.ha-fac-t { display: block; padding: 10px 12px 12px; }
.ha-fac-t b { display: block; font-size: 14.5px; font-weight: 700; }
.ha-fac-t small { display: block; margin-top: 3px; font-size: 12px; color: var(--ha-g5); }
.ha-fac-t em, .ha-info em { margin-right: 4px; font-style: normal; font-weight: 700; color: var(--ha-blue-t); }
.ha-fac-t em.off, .ha-info em.off { color: var(--ha-g5); }

/* 시설 · 카페 상세 */
.ha-hero { aspect-ratio: 360 / 210; overflow: hidden; background: var(--ha-bg); }
.ha-hero img { width: 100%; height: 100%; object-fit: cover; }
.ha-info { padding: 20px 20px 16px; }
.ha-info-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ha-info h2 { font-size: 21px; font-weight: 800; }
.ha-info p { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; color: var(--ha-g7); }
.ha-info p .ha-i { width: 18px; height: 18px; color: var(--ha-g4); }
.ha-plist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ha-line); }
.ha-plist b { display: block; font-size: 15px; font-weight: 700; }
.ha-plist .ha-price { display: block; margin-top: 4px; font-size: 16px; }
.ha-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ha-line); text-align: left; }
.ha-menu button:hover { background: #fafbfc; }
.ha-menu b { font-size: 15px; font-weight: 700; }
.ha-menu .ha-price { display: block; margin-top: 6px; font-size: 15px; }
.ha-menu img { width: 60px; height: 60px; flex-shrink: 0; border-radius: 8px; object-fit: cover; border: 1px solid var(--ha-line); }

/* 예약 · 결제 · 완료 · 내역 */
.ha-rv small { font-size: 13px; color: var(--ha-g5); }
.ha-rv h2 { margin: 4px 0 6px; font-size: 18px; font-weight: 800; }
.ha-rv .ha-price { font-size: 18px; }
.ha-warn { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ha-red); }
.ha-warn .ha-i { width: 16px; height: 16px; }
.ha-apay { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.ha-apay b { font-size: 14.5px; font-weight: 700; }
.ha-input { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ha-line); background: var(--ha-bg); display: flex; align-items: center; justify-content: flex-end; font-weight: 600; }
.ha-btn-s { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ha-line); font-size: 13px; font-weight: 700; color: var(--ha-g4); cursor: default; }
.ha-avail { display: block; margin: 6px 0 14px; text-align: right; font-size: 12.5px; color: var(--ha-g5); }
.ha-sum { padding: 12px 16px; border-radius: 12px; background: var(--ha-bg); }
.ha-sum hr { margin: 8px 0; border: 0; border-top: 1px solid var(--ha-g3); }
.ha-sum .ha-kv.total > span { font-weight: 700; color: var(--ha-g9); }
.ha-sum .ha-kv.total > b { font-size: 17px; font-weight: 800; color: var(--ha-blue-t); }
.ha-done-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 16px; font-weight: 700; }
.ha-done-msg > span { width: 46px; height: 46px; border-radius: 50%; background: var(--ha-blue-100); color: var(--ha-blue); display: grid; place-items: center; }
.ha-done-msg .ha-i { stroke-width: 3; }
.ha-box { padding: 14px 16px; border-radius: 12px; background: var(--ha-bg); }
.ha-btn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ha-btn2 button { height: 50px; border-radius: 10px; border: 1px solid var(--ha-g3); background: #fff; font-size: 15px; font-weight: 700; }
.ha-btn2 .red { color: var(--ha-red); border-color: #fbc5ca; }
.ha-btn2 button:disabled { color: var(--ha-g4); border-color: var(--ha-line); cursor: default; }

/* 옵션 · 장바구니 · 쿠폰 · 주문 내역 */
.ha-prod { height: 240px; display: grid; place-items: center; background: #fff; }
.ha-prod img { width: 180px; height: 180px; border-radius: 16px; object-fit: cover; }
.ha-prod-t { padding-top: 6px; }
.ha-prod-t h2 { margin-bottom: 6px; font-size: 17px; font-weight: 700; }
.ha-prod-t .ha-price { font-size: 18px; }
.ha-opt + .ha-opt { margin-top: 18px; }
.ha-opt h4 { margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.ha-opt h4 small { font-weight: 600; color: var(--ha-g5); }
.ha-item { padding: 16px; border-radius: 12px; border: 1px solid var(--ha-line); }
.ha-item + .ha-item { margin-top: 10px; }
.ha-item-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ha-item-h b { font-size: 15px; font-weight: 700; }
.ha-item-act { display: flex; gap: 6px; }
.ha-item-act button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ha-g3); display: grid; place-items: center; }
.ha-item-act button .ha-i { width: 16px; height: 16px; }
.ha-item-act .del { color: var(--ha-red); border-color: #fbc5ca; }
.ha-item p { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ha-g5); }
.ha-item .ha-price { font-size: 16px; }
.ha-item .ha-row { margin-top: 12px; }
.ha-item p + .ha-row { margin-top: 0; }
.ha-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ha-seg .ha-pill { height: 48px; border-radius: 10px; }
.ha-seg .ha-pill[aria-pressed="true"] { background: var(--ha-blue-50); color: var(--ha-blue); }
.ha-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ha-blue-t); }
.ha-switch[aria-pressed="false"] { color: var(--ha-g5); }
.ha-switch i { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--ha-g3); transition: background 0.2s; }
.ha-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: translate 0.2s var(--ease); }
.ha-switch[aria-pressed="true"] i { background: var(--ha-blue); }
.ha-switch[aria-pressed="true"] i::after { translate: 18px 0; }
.ha-coupon { margin-top: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ha-line); background: #fff; }
.ha-coupon-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ha-g5); }
.ha-coupon-h b { color: var(--ha-blue-t); }
.ha-coupon .tag { height: 24px; padding: 0 8px; border-radius: 6px; background: var(--ha-bg); display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--ha-g7); }
.ha-coupon h5 { margin-top: 10px; font-size: 16px; font-weight: 800; }
.ha-coupon .sub { font-size: 12.5px; color: var(--ha-g5); }
.ha-hint { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: var(--ha-bg); font-size: 12.5px; line-height: 1.55; color: var(--ha-g5); }
.ha-hint .ha-i { width: 18px; height: 18px; margin-top: 1px; color: var(--ha-g7); }
.ha-hint b { display: block; color: var(--ha-g7); }
.ha-orders-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 6px; }
.ha-orders-h button { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.ha-orders-h .ha-month { font-size: 17px; font-weight: 800; }
.ha-month .ha-i { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--ha-g4); color: #fff; stroke-width: 3; }
.ha-orders-h .ha-i { width: 18px; height: 18px; }
.ha-olist { display: grid; gap: 10px; padding: 8px 20px 20px; }
.ha-ocard { width: 100%; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ha-line); background: #fff; text-align: left; }
.ha-ocard small { font-size: 12.5px; color: var(--ha-g5); }
.ha-ocard .ha-badge { justify-self: end; height: 22px; font-size: 11.5px; }
.ha-ocard b { font-size: 15px; font-weight: 700; }
.ha-ocard .p { grid-column: 2; grid-row: 2 / 4; align-self: center; justify-self: end; display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 800; }
.ha-ocard .p .ha-i { width: 18px; height: 18px; color: var(--ha-g4); }

/* 토스트 · 확인 창 · 터치 표시 */
.ha-toast { position: absolute; left: 50%; bottom: 92px; z-index: 9; max-width: 300px; padding: 11px 16px; border-radius: 12px; background: rgba(25, 31, 40, 0.92); color: #fff; font-size: 13.5px; font-weight: 600; text-align: center; opacity: 0; translate: -50% 12px; pointer-events: none; transition: opacity 0.2s, translate 0.25s var(--ease); }
.ha-toast.on { opacity: 1; translate: -50% 0; }
.ha-dim { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(0, 0, 0, 0.4); }
.ha-dlg { width: 290px; padding: 24px 20px 16px; border-radius: 16px; background: #fff; text-align: center; }
.ha-dlg b { font-size: 17px; }
.ha-dlg p { margin-top: 8px; font-size: 13.5px; color: var(--ha-g7); }
.ha-dlg .ha-btn2 { margin-top: 18px; }
.ha-dlg .ha-btn2 .go { border-color: var(--ha-red); background: var(--ha-red); color: #fff; }
.ha-touch { position: absolute; z-index: 10; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(11, 63, 208, 0.7); background: rgba(11, 63, 208, 0.12); pointer-events: none; animation: ha-touch 0.8s var(--ease) both; }
@keyframes ha-touch { 0% { opacity: 0; scale: 1.5; } 35% { opacity: 1; scale: 1; } 65% { opacity: 1; scale: 0.82; } 100% { opacity: 0; scale: 1.05; } }
@media (prefers-reduced-motion: reduce) {
  .ha-touch { animation: none !important; }
  .ha-toast, .ha-switch i, .ha-switch i::after { transition: none; }
}

/* =========================================================
   2026-10-27 (개선 · CONNECT B) 서비스 소개 '하나로' 연결 섹션 — 시안 B (.cb)
   가운데 '하나의 운영 시스템' + 둘레 기기 버튼 5개 + 선마다 무엇이 오가는지 한 줄(늘 보임, 자동 재생 · 상세 패널 없음)
   기기 버튼은 서로 다른 박자로 위아래로 둥둥 떠다님(--t 주기, --d 시작 어긋남) — 마우스를 올리거나 포커스하면 그 버튼은 멈춤
   연결선 끝은 버튼 뒤(가운데)에 숨겨 두어 버튼이 떠다녀도 선이 떨어져 보이지 않음
   960×500 도면 하나를 화면 폭에 맞춰 통째로 줄임: --u = 도면 1px(무대가 960px보다 좁아지면 같은 비율로 작아짐)
   → 버튼 · 라벨 · 가운데 원 사이 간격이 어느 폭에서나 같음 / 좌표는 도면 기준 %(--x, --y)
   900px 미만은 세로 목록(선 · 라벨 대신 버튼 안 한 줄)
   ========================================================= */
.cb { --u: min(1px, 0.104167cqw); container-type: inline-size; position: relative; width: 100%; max-width: 960px; aspect-ratio: 960 / 500; margin: 8px auto 0; }
.cb-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cb-lines path { fill: none; stroke: var(--blue-300); stroke-width: 2; stroke-dasharray: 6 6; }
.cb-core {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: calc(168 * var(--u)); height: calc(168 * var(--u)); transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; border: 2px solid var(--primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); text-align: center;
  box-shadow: 0 0 0 calc(10 * var(--u)) rgba(53, 104, 224, 0.08), var(--shadow-md);
}
.cb-core img { width: calc(83 * var(--u)); height: auto; }
.cb-core b { font-size: calc(19 * var(--u)); font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.cb-nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cb-n { position: absolute; left: var(--x); top: var(--y); width: calc(236 * var(--u)); transform: translate(-50%, -50%); pointer-events: auto; animation: cb-float var(--t, 5.4s) ease-in-out var(--d, 0s) infinite; }
.cb-n:hover, .cb-n:focus-within { animation-play-state: paused; }
@keyframes cb-float { 0%, 100% { translate: 0 calc(-6 * var(--u)); } 50% { translate: 0 calc(6 * var(--u)); } }
.cb-n a {
  display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 16px 34px -20px rgba(17, 25, 39, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cb-n a:hover, .cb-n a:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(53, 104, 224, 0.12), 0 18px 36px -20px rgba(22, 56, 139, 0.5); }
.cb-ico { width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex-shrink: 0; border-radius: calc(12 * var(--u)); background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cb-ico svg.ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.cb-txt { flex: 1; min-width: 0; }
.cb-txt b { display: block; font-size: calc(16 * var(--u)); font-weight: 800; color: var(--ink); }
.cb-txt small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--gray-500); }
.cb-go { width: calc(16 * var(--u)) !important; height: calc(16 * var(--u)) !important; color: var(--gray-400); transition: color 0.2s, transform 0.25s var(--ease); }
.cb-n a:hover .cb-go, .cb-n a:focus-visible .cb-go { color: var(--primary); transform: translateX(3px); }
/* 선 위 한 줄: PC에서는 선 위 라벨(.cb-label)로 보이고, 버튼 안 한 줄(.cb-flow)은 화면 읽기 프로그램용으로만 */
.cb-flow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; font-style: normal; }
.cb-label {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; transform: translate(-50%, -50%);
  padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-100);
  font-size: calc(13 * var(--u)); font-weight: 700; color: var(--primary); white-space: nowrap;
}
@media (max-width: 899px) {
  .cb { --u: 1px; aspect-ratio: auto; max-width: 560px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .cb-lines, .cb-label { display: none; }
  .cb-core { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; flex-direction: row; gap: 14px; padding: 18px; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
  .cb-core b br { display: none; }
  .cb-nodes { position: relative; inset: auto; display: grid; gap: 12px; pointer-events: auto; }
  .cb-n { position: relative; left: auto; top: auto; width: auto; transform: none; animation-name: cb-float-sm; }
  @keyframes cb-float-sm { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }
  .cb-flow { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: var(--blue-50); font-size: 12.5px; font-weight: 700; color: var(--primary); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-n { animation: none; }
}

/* =========================================================
   2026-10-27 (개선 · HERO QR) 히어로 폰 속 앱 — 메인 상단 '운영시설 입장 QR' · '판매시설 결제 QR' 화면
   실제 앱 캡처(커뮤니티 입장 QR · 커뮤니티 결제 QR) 기준: 안내 문구 → 회색 틀 속 QR → 이름, 입장 QR은 아래 '공통 입장 QR' 선택칸
   화면 넘김 연출(ha-in 슬라이드)은 없앰 — hero-app.js paint()
   ========================================================= */
.ha-qrb { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 48px; text-align: center; }
.ha-qr-t { font-size: 16px; font-weight: 500; color: var(--ha-g9); }
.ha-qr { margin-top: 30px; width: 246px; padding: 14px; border-radius: 22px; background: #f1f2f4; border: 1.5px solid #e3e5e8; }
.ha-qr-code { display: block; width: 100%; height: auto; aspect-ratio: 1; padding: 8px; background: #fff; fill: #111; }
.ha-qr-n { margin-top: 32px; font-size: 23px; font-weight: 800; color: var(--ha-g9); }
.ha-qr-foot { padding: 0; }
.ha-qr-kind { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 22px 20px; text-align: left; }
.ha-qr-kind b { display: block; font-size: 16px; font-weight: 700; }
.ha-qr-kind small { display: block; margin-top: 2px; font-size: 13px; color: var(--ha-g5); }
.ha-qr-kind .ha-i { color: var(--ha-g5); }
.ha-qr-kind:hover b { color: var(--ha-blue-t); }

/* =========================================================
   2026-10-27 (개선 · HERO 폰 크게) 메인 히어로 — 폰을 더 크게, 오른쪽 끝으로
   PC(1201px~): 단계 컨트롤을 폰 아래 → 폰 왼쪽 세로 목록으로 옮겨 폰이 첫 화면 높이를 다 씀
     폰 높이 ≈ (--pw - 20px) × 2.19 + 52px(테두리 · 상태 표시줄) → 첫 화면 높이에서 위아래 여백만 빼고 맞춤
     1920×950 → 약 375px · 1440×900 → 약 352px · 최대 400px (폰 속 앱은 360px 기준이라 380px부터 1:1 이상)
   1024~1200px · 태블릿 · 모바일은 지금처럼 폰 아래 컨트롤, 폰만 조금 키움
   ========================================================= */
@media (min-width: 1201px) {
  .hero.hx.hx-solo {
    --pw: clamp(280px, calc((100vh - 172px) / 2.19 + 20px), 400px);   /* 172 = 머리글 72 + 위아래 여백 48 + 테두리 · 상태 표시줄 52 */
    --pw: clamp(280px, calc((100svh - 172px) / 2.19 + 20px), 400px);   /* 172 = 머리글 72 + 위아래 여백 48 + 테두리 · 상태 표시줄 52 */
  }
  .hx-solo .hx-visual { flex-direction: row; align-items: center; justify-content: flex-end; gap: 36px; }
  .hx-solo .hx-under { order: -1; width: 196px; margin: 0; align-items: stretch; gap: 12px; }
  .hx-solo .hx-story { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; border-radius: 22px; }
  .hx-solo .hx-play { align-self: flex-start; width: 34px; height: 34px; margin: 2px 0 2px 6px; }
  .hx-solo .hx-steps { flex-direction: column; gap: 2px; }
  .hx-solo .hx-step { width: 100%; height: 42px; padding: 0 14px; justify-content: flex-start; gap: 0; }
  .hx-solo .hx-step .num, .hx-solo .hx-step .sm-x { display: inline; }
  .hx-solo .hx-step .num { margin-right: 10px; }
  .hx-solo .hx-step .sm-x { white-space: pre; }   /* " · 결제" 앞 공백이 따로 떨어진 글자 묶음에서 사라지지 않게 */
  .hx-solo .hx-step-bar { left: 14px; right: 14px; }
  .hx-solo .hx-cap { min-height: 66px; padding: 0 6px; text-align: left; font-size: 14px; line-height: 1.55; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .hero.hx.hx-solo {
    --pw: clamp(220px, calc((100vh - var(--header-h) - 160px) / 2.19), 340px);
    --pw: clamp(220px, calc((100svh - var(--header-h) - 160px) / 2.19), 340px);
  }
}
@media (max-width: 1023px) {
  .hero.hx.hx-solo { --pw: 320px; }
}
@media (max-width: 767px) {
  .hero.hx.hx-solo { --pw: min(300px, 76vw); }
}

/* =========================================================
   2026-10-27 (개선 · 운영 고민 카드) 메인 #change — 6줄 비교 목록(화면 약 2장) → 카드 6장
   카드마다 처음엔 '도입 전'(AS-IS), 누를 때마다 그 카드만 '도입 후'(TO-BE)로 왼쪽부터 마스크 스윕 · 다시 누르면 되돌아감
   두 면을 같은 칸에 겹쳐(grid-area 1/1) 카드 높이는 두 면 중 긴 쪽 · 오른쪽 위 '도입 전 | 도입 후'가 지금 면을 표시
   위쪽 범례 줄(.chg-legend)과 .chg-list · .chg-row 규칙은 더 이상 쓰지 않음 · 누르기 처리는 hero.js
   도입 전 제목의 붉은 가로선은 뺌(2026-10-27 요청) · [카드로 보기 | 전 · 후 한눈에 비교] 보기 전환 + 비교표(.chg-compare)는 아래
   ========================================================= */
.chg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.chg-cell { display: flex; min-width: 0; }
.chg-card {
  position: relative; flex: 1; min-width: 0; display: grid; text-align: left; cursor: pointer;
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.chg-card:hover { border-color: var(--blue-200); transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(22, 56, 139, 0.45); }
.chg-card:focus-visible { outline: 3px solid rgba(53, 104, 224, 0.45); outline-offset: 3px; }
.chg-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 22px 22px; min-width: 0; }
.chg-face.tobe {
  background: linear-gradient(115deg, #4a7bf0 0%, #2f62dc 45%, #1d47b5 100%); color: #fff;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.55s var(--ease);
}
.chg-card[aria-pressed="true"] .chg-face.tobe { clip-path: inset(0 0 0 0); }
.chg-card-top { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.chg-card .chg-ico { width: 40px; height: 40px; border-radius: 12px; }
.chg-card-t { min-width: 0; }
.chg-card-t small { display: block; font-family: var(--font-num); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--gray-400); }
.chg-card-t b { display: block; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.chg-sw { margin-left: auto; flex-shrink: 0; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--gray-100); }
.chg-sw i { padding: 4px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--gray-400); transition: color 0.2s; }
.chg-face.asis .chg-sw i:first-child { background: #fff; color: var(--gray-700); box-shadow: 0 1px 3px rgba(17, 25, 39, 0.12); }
.chg-card:hover .chg-face.asis .chg-sw i:last-child { color: var(--primary); }
.chg-face .chg-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; }
.chg-face.asis .chg-head { color: var(--gray-700); }
.chg-p { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--gray-600); }
/* 도입 후 면 */
.chg-face.tobe .chg-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.chg-face.tobe .chg-card-t small { color: rgba(255, 255, 255, 0.7); }
.chg-face.tobe .chg-card-t b { color: #fff; }
.chg-face.tobe .chg-sw { background: rgba(255, 255, 255, 0.16); }
.chg-face.tobe .chg-sw i { color: rgba(255, 255, 255, 0.72); }
.chg-face.tobe .chg-sw i:last-child { background: #fff; color: var(--primary); }
.chg-face.tobe .chg-tag.tobe { background: #fff; color: var(--primary); }
.chg-face.tobe .chg-head { font-size: 19px; }
.chg-face.tobe .chg-check { width: 24px; height: 24px; transform: none; transition: none; }
.chg-face.tobe .chg-check svg.ico { width: 14px; height: 14px; }
.chg-face.tobe .chg-p { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
/* 보기 전환: [카드로 보기 | 전 · 후 한눈에 비교] */
.chg-view { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: -12px auto 26px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 10px 24px -18px rgba(22, 56, 139, 0.45); }
.chg-view-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 800; color: var(--gray-500); transition: background 0.2s, color 0.2s; }
.chg-view-btn svg.ico { width: 17px; height: 17px; }
.chg-view-btn:hover { color: var(--ink); }
.chg-view-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* 바뀐 보기가 왼쪽부터 마스크 스윕으로 나타남 */
.chg-sweep { animation: chg-sweep 0.55s var(--ease) both; }
@keyframes chg-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* 비교표: 주제 | 도입 전 | → | 도입 후 */
.chg-cmp-head, .chg-cmp-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; column-gap: 0; }
.chg-cmp-head { padding: 0 14px 10px; font-size: 13px; font-weight: 800; color: var(--gray-500); }
.chg-cmp-head span { display: inline-flex; align-items: center; gap: 8px; }
.chg-cmp-head i { font-style: normal; }
.chg-cmp-head span:nth-child(2) { padding-left: 4px; } .chg-cmp-head span:nth-child(4) { padding-left: 4px; color: var(--primary); }
.chg-cmp-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.chg-cmp-row { padding: 8px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.chg-cmp-topic { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.chg-cmp-topic .chg-ico { width: 38px; height: 38px; border-radius: 11px; }
.chg-cmp-topic small { display: block; font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--gray-400); }
.chg-cmp-topic b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.chg-cmp-was, .chg-cmp-now { min-width: 0; border-radius: 12px; padding: 12px 16px; }
.chg-cmp-was { background: var(--gray-100); }
.chg-cmp-was b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.4; color: var(--gray-700); }
.chg-cmp-now { background: linear-gradient(115deg, #4a7bf0 0%, #2f62dc 45%, #1d47b5 100%); color: #fff; }
.chg-cmp-now b { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; line-height: 1.4; }
.chg-cmp-now .chg-check { width: 20px; height: 20px; transform: none; transition: none; }
.chg-cmp-now .chg-check svg.ico { width: 12px; height: 12px; }
.chg-cmp-was p, .chg-cmp-now p { margin-top: 3px; font-size: 13.5px; line-height: 1.6; }
.chg-cmp-was p { color: var(--gray-600); }
.chg-cmp-now p { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.chg-cmp-arr { display: flex; align-items: center; justify-content: center; color: var(--primary); }
.chg-cmp-arr svg.ico { width: 20px; height: 20px; stroke-width: 2.4; }
/* 좁은 PC(~1279px) · 낮은 화면(~860px): 비교표가 한 화면에 들어오도록 간격 · 설명 글씨를 조금 줄임 */
@media (min-width: 640px) and (max-width: 1279px), (min-width: 640px) and (max-height: 860px) {
  .chg-view { margin-bottom: 20px; }
  .chg-cmp-list { gap: 6px; }
  .chg-cmp-row { padding: 6px; }
  .chg-cmp-head { padding-bottom: 8px; }
  .chg-cmp-was, .chg-cmp-now { padding: 9px 13px; }
  .chg-cmp-was b, .chg-cmp-now b { font-size: 15px; }
  .chg-cmp-was p, .chg-cmp-now p { margin-top: 2px; font-size: 13px; line-height: 1.55; }
}
@media (max-width: 1023px) {
  .chg-cmp-head, .chg-cmp-row { grid-template-columns: 132px minmax(0, 1fr) 30px minmax(0, 1fr); }
  .chg-cmp-topic .chg-ico { display: none; }
}
@media (max-width: 639px) {
  .chg-view { margin-top: -8px; }
  .chg-view-btn { padding: 0 13px; font-size: 13.5px; }
  .chg-cmp-head { display: none; }
  .chg-cmp-row { grid-template-columns: 1fr; row-gap: 6px; padding: 10px; }
  .chg-cmp-topic { padding: 2px 4px 4px; }
  .chg-cmp-topic .chg-ico { display: flex; width: 32px; height: 32px; }
  .chg-cmp-arr { height: 22px; transform: rotate(90deg); }
}
@media (max-width: 1023px) {
  .chg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 639px) {
  .chg-cards { grid-template-columns: 1fr; gap: 12px; }
  .chg-face { padding: 18px 18px 20px; }
  .chg-face .chg-head { font-size: 17px; }
  .chg-face.tobe .chg-head { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .chg-card, .chg-face.tobe { transition: none; }
  .chg-sweep { animation: none !important; }
}

/* =========================================================
   2026-11-02 (섹션 풀페이지) 메인 index — 휠 한 번에 한 섹션 (동작은 js/fullpage.js)
   · PC(가로 1024px 이상 · 높이 560px 이상 · 마우스)에서만 html.fp — <head>의 짧은 스크립트가 처음부터 붙여 배치가 튀지 않음
   · 섹션 [data-fp] 하나 = 화면 하나: 높이 = 화면 높이 − 머리글(--fp-h), 내용은 세로 가운데
     넘치던 섹션(운영 고민 · 주요 기능 · 장비)은 제목 한 줄 · 여백 · 배치를 줄여 1440×900에서 한 화면에 들어오게 함
   · 화면이 더 낮아(노트북 등) 그래도 넘치면 스크립트가 그 섹션 안에 정지 위치를 하나 더 둠(잘리는 내용 없음)
   · 마지막 화면 = 도입 문의 띠 + 푸터 (--fp-ft = 푸터 높이, 스크립트가 넣음)
   · 오른쪽 점 내비(.fp-nav) · 스크롤 막대 숨김(휠 · 키보드 · 점으로 이동) · 태블릿 · 모바일은 지금처럼 일반 스크롤
   ========================================================= */
html.fp {
  --fp-h: calc(100vh - var(--header-h)); --fp-h: calc(100svh - var(--header-h));
  --fp-pad: clamp(20px, calc(var(--fp-h) * 0.045), 56px);
  scrollbar-width: none;
  overflow-anchor: none;   /* 내용이 늘고 줄 때 브라우저가 스크롤을 스스로 옮기지 않게(정지 위치는 스크립트가 맞춤 — 질문을 펼쳤는데 화면이 튀던 문제) */
}
html.fp::-webkit-scrollbar { display: none; }
.fp .hero.hx[data-fp] { min-height: var(--fp-h); }
.fp .section[data-fp] { min-height: var(--fp-h); display: flex; flex-direction: column; justify-content: center; padding: var(--fp-pad) 0; }
.fp .section[data-fp] > .container { width: 100%; }   /* 세로 flex 안에서 좌우 margin:auto 때문에 내용 폭으로 줄어드는 것 방지 */

/* 낮은 화면에서 조금 넘치는 섹션: 내용만 비율 그대로 축소(--fp-z, 스크립트가 계산 · 최소 0.8) — 섹션 배경 · 높이 · 위아래 여백은 그대로 */
/* 배율은 스크립트가 섹션의 자식마다 인라인 zoom으로 넣음(.fp-z · --fp-z는 표시용) — 부모 변수로 물려주면 배율을 바꾼 직후 측정이 어긋남 */

/* 링크 · 키보드로 이동하면 스크립트가 그 섹션에 포커스만 옮김(다음 Tab 시작점) — 섹션 자체에는 테두리를 그리지 않음 */
.fp [data-fp][tabindex="-1"]:focus, .fp main[tabindex="-1"]:focus { outline: none; }

/* 공통 제목: 한 줄 · 조금 작게 */
.fp [data-fp] .sec-head { margin-bottom: clamp(16px, calc(var(--fp-h) * 0.03), 30px); }
.fp [data-fp] .eyebrow { margin-bottom: 8px; }
.fp [data-fp] .sec-title { font-size: clamp(30px, calc(var(--fp-h) * 0.044), 40px); line-height: 1.25; }
.fp [data-fp] .sec-desc { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.fp #chgTitle br, .fp #featTitle br, .fp #hwTitle br { display: none; }

/* 운영 고민 (#change) */
.fp #change .chg-view { margin: 0 auto 14px; }
.fp #change .chg-view-btn { height: 36px; }
.fp #change .chg-cards { gap: 14px; }
.fp #change .chg-face { padding: 16px 20px 18px; }
.fp #change .chg-card-top { margin-bottom: 10px; }
.fp #change .chg-card .chg-ico { width: 36px; height: 36px; border-radius: 11px; }
.fp #change .chg-face .chg-head { margin-top: 8px; font-size: 17px; }
.fp #change .chg-face.tobe .chg-head { font-size: 18px; }
.fp #change .chg-p { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.fp #change .num-cta { margin-top: clamp(14px, calc(var(--fp-h) * 0.026), 28px); }
.fp #change .num-cta .btn-lg { height: 50px; padding: 0 26px; font-size: 16px; }
.fp #change .chg-cmp-list { gap: 6px; }
.fp #change .chg-cmp-row { padding: 6px; }
.fp #change .chg-cmp-head { padding-bottom: 8px; }
.fp #change .chg-cmp-was, .fp #change .chg-cmp-now { padding: 8px 13px; }
.fp #change .chg-cmp-was b, .fp #change .chg-cmp-now b { font-size: 15px; }
.fp #change .chg-cmp-was p, .fp #change .chg-cmp-now p { margin-top: 2px; font-size: 13px; line-height: 1.5; }

/* 주요 기능 (#features): 탭은 아이콘 왼쪽 · 번호와 이름 오른쪽(두 줄) → 탭 줄 높이 약 절반 */
.fp .fx-feats-sec .sec-head { margin-bottom: clamp(16px, calc(var(--fp-h) * 0.026), 28px); }
.fp .fxf-tabs { gap: 4px; padding: 6px; border-radius: 18px; }
.fp .fxf-ind { border-radius: 13px; }
.fp .fxf-tab { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; align-items: center; column-gap: 10px; row-gap: 1px; padding: 9px 8px 13px; border-radius: 13px; text-align: left; }
.fp .fxf-ico { grid-row: 1 / 3; margin: 0; width: 36px; height: 36px; border-radius: 11px; }
.fp .fxf-no { grid-column: 2; grid-row: 1; line-height: 1.2; }
.fp .fxf-name { grid-column: 2; grid-row: 2; font-size: 15px; white-space: nowrap; }
.fp .fxf-prog { left: 16px; right: 16px; bottom: 5px; }
.fp .fxf-panel { margin-top: 12px; padding: clamp(20px, calc(var(--fp-h) * 0.032), 36px) 44px clamp(60px, calc(var(--fp-h) * 0.08), 76px); }
.fp .fxf-ctrl { left: 44px; bottom: clamp(14px, calc(var(--fp-h) * 0.024), 24px); }
.fp .fxf-view.active { gap: 40px; }
.fp .fxf-info h3 { font-size: 30px; }
.fp .fxf-value { margin-top: 8px; font-size: 17px; }
.fp .fxf-roles { margin-top: 16px; }
.fp .fxf-roles li { padding: 7px 12px 7px 7px; font-size: 14.5px; }
.fp .fxf-cap { margin-top: 12px; min-height: 44px; font-size: 14px; }
.fp .fxf-more { margin-top: 12px; }
.fp .fxf-stage { max-width: min(560px, max(420px, calc((var(--fp-h) - 470px) * 1.2))); }   /* 장면 480×400 비율: 폭 = 높이 × 1.2 → 남는 높이에 맞춤 · 최소 420px(왼쪽 설명 칸 높이만큼은 그대로 둬도 화면이 늘지 않음) */
@media (max-width: 1200px) {
  .fp .fxf-ico { display: none; }
  .fp .fxf-tab { grid-template-columns: auto; column-gap: 0; justify-content: center; text-align: center; }
  .fp .fxf-panel { padding-left: 32px; padding-right: 32px; }
  .fp .fxf-ctrl { left: 32px; }
}

/* 장비 (#hardware): 안면인식기 카드 왼쪽 · 스피드게이트 · 키오스크는 오른쪽에 가로형(그림 | 글)으로 */
.fp #hardware .hw-head { margin-bottom: clamp(16px, calc(var(--fp-h) * 0.026), 28px); gap: 40px; }
.fp #hardware .hw-head .sec-desc { margin-top: 0; font-size: 15px; line-height: 1.6; }
.fp #hardware .hw-grid.hw-grid-r7 { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; }
.fp .hw-face { --k: 0.72; --dy: 14px; --bh: 44px; --fin: 120px; --in: 240px; }
.fp #hardware .hw-main .hw-art { height: 262px; }
.fp #hardware .hw-body { padding: 15px 20px 17px; }
.fp #hardware .hw-body h3 { font-size: 19px; }
.fp #hardware .hw-main .hw-body h3 { font-size: 22px; }
.fp #hardware .hw-body p, .fp #hardware .hw-main .hw-body p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; }
.fp #hardware .hw-body .tag-row { margin-top: 10px; }
.fp #hardware .hw-flow { padding-top: 12px; gap: 8px; }
.fp #hardware .hw-flow li { gap: 5px; padding: 8px 4px; font-size: 12px; }
.fp #hardware .hw-flow .hf-ico { width: 28px; height: 28px; border-radius: 9px; }
.fp #hardware .hw-flow .hf-ico svg.ico { width: 16px; height: 16px; }
.fp #hardware .hw-grid-r7 > .hw-card:not(.hw-main) { flex-direction: row; }
.fp #hardware .hw-grid-r7 > .hw-card:not(.hw-main) .hw-art { width: 36%; height: auto; border-bottom: 0; border-right: 1px solid var(--blue-100); }
.fp #hardware .hw-grid-r7 > .hw-card:not(.hw-main) .hw-body { flex: 1; min-width: 0; align-self: center; }
.fp #hardware .hw-grid-r7 .hw-gate .hw-photo img { width: 90%; height: auto; max-width: none; }
.fp #hardware .hw-strip { margin-top: 14px; gap: 16px; padding: 13px 22px; }
.fp #hardware .hw-strip-ico { width: 40px; height: 40px; border-radius: 12px; }
.fp #hardware .hw-strip p { font-size: 14.5px; line-height: 1.6; }
.fp #hardware .hw-links { gap: 2px; }

/* 도입 사례 (#references) */
.fp #references .sec-head-row { margin-bottom: clamp(20px, calc(var(--fp-h) * 0.04), 44px) !important; }

/* 마지막 화면: 도입 문의 띠 + 푸터 */
.fp .cta-band[data-fp] { min-height: calc(var(--fp-h) - var(--fp-ft, 360px)); display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, calc(var(--fp-h) * 0.06), 48px) 0; }
.fp .cta-band[data-fp] > .container { width: 100%; }
/* 푸터가 일반 스크롤 구간에 있는 페이지(도입 안내 — data-fp-free)는 원래 모양 그대로 */
.fp body:not(:has([data-fp-free])) .site-footer { padding: 40px 0 26px; }
.fp body:not(:has([data-fp-free])) .ft-top { padding-bottom: 26px; }
.fp body:not(:has([data-fp-free])) .ft-col h4 { margin-bottom: 10px; }
.fp body:not(:has([data-fp-free])) .ft-col a, .fp body:not(:has([data-fp-free])) .ft-col button { padding: 3px 0; }
.fp body:not(:has([data-fp-free])) .ft-bottom { padding-top: 20px; }

/* 좁은 PC(가로 1359px 이하): 화면 오른쪽 끝의 점 내비 · 떠 있는 버튼이 내용 끝을 덮지 않게
   떠 있는 '도입 문의'는 아이콘 원형(52px, 모바일과 같은 모양 — 머리글의 '도입 문의'가 늘 보임) · 내용 좌우 여백 = 화면 끝에서 최소 84px */
@media (max-width: 1359px) {
  .fp .fl-btn { width: 52px; padding: 0; }
  .fp .fl-inquiry span { display: none; }
  .fp .section[data-fp] > .container { padding-left: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); padding-right: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); }
}

/* 오른쪽 점 내비: 지금 화면 = 파란 점(조금 크게) · 마우스를 올리면 섹션 이름이 오른쪽→왼쪽으로 펼쳐짐(마스크) */
.fp-nav { display: none; }
.fp .fp-nav { display: block; position: fixed; z-index: 880; right: 22px; top: calc(50% + var(--header-h) / 2); transform: translateY(-50%); }
.fp-nav ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fp-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.fp-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(17, 25, 39, 0.22); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); transition: transform 0.3s var(--ease), background-color 0.2s; }   /* 흰 테두리: 사진(도입 사례) 위에서도 보이게 */
.fp-dot:hover::before { background: var(--primary); }
.fp-dot[aria-current="true"]::before { background: var(--primary); transform: scale(1.4); }
.fp-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fp-dot-t {
  position: absolute; right: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  clip-path: inset(0 0 0 100% round 999px); transition: clip-path 0.28s var(--ease); pointer-events: none;
}
.fp-dot:hover .fp-dot-t, .fp-dot:focus-visible .fp-dot-t { clip-path: inset(0 0 0 0 round 999px); }
.fp-nav.is-dark .fp-dot::before { background: rgba(255, 255, 255, 0.42); box-shadow: none; }
.fp-nav.is-dark .fp-dot:hover::before, .fp-nav.is-dark .fp-dot[aria-current="true"]::before { background: #fff; }
.fp-nav.is-dark .fp-dot-t { background: #fff; color: var(--ink); }
.fp-nav.is-dark .fp-dot:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .fp-dot::before, .fp-dot-t { transition: none; }
}

/* =========================================================
   2026-11-02 (섹션 등장 연출) 새 index.html — 섹션에 들어올 때마다 내용이 차례대로 등장
   · <body data-fp-motion>인 페이지만(새 index.html). indexbackup.html은 연출 없는 이전판 그대로
   · fullpage.js가 html.fp-anim(PC 섹션 모드 + 움직임 허용) · 섹션 .fpa-play(들어온 뒤 2.8초 동안)를 붙임
     섹션이 화면에서 완전히 사라지면 빼서, 다시 들어오면 처음부터 다시
   · 움직임 = clip-path 마스크 스윕 + 짧은 이동만(페이드 · 글로우 없음), 곡선 var(--ease) — 사이트 모션 규칙
   · animation-fill-mode: backwards → 지연 동안만 가려진 상태, 끝나면 원래 모습(남는 clip-path · 이동 없음)
     이동은 translate 속성 → 기존 transform(카드 hover 등)과 겹치지 않음
   · 이 페이지 섹션 안의 기존 .reveal(투명도 + 위로 28px 일괄 등장)은 끔 → 같은 요소가 두 번 움직이지 않게
   · 시간표(섹션 이동 0.76초와 겹쳐 섹션이 올라오는 동안 위 → 아래로 차례대로)
     운영 고민: 보기 전환 0.22 → 카드 6장 대각선 물결 0.32~0.59(아래에서 솟아오름) → 각 카드 '도입 후' 면이 살짝 비쳤다 돌아감(누를 수 있다는 힌트) → 버튼 0.78
     장비: 머리글 0.14~0.34 → 안면인식기 0.30 · 스피드게이트 0.46 · 키오스크 0.62(카드) → 단말이 올라옴 0.50 · 인증 방법 버튼이 연결선부터 그어지며 0.80
           · '이용권 확인 → 문 열림' 1.30 · 처리 순서 4칸 0.95~1.25 · 게이트 사진 옆에서 0.62 · 키오스크 아래에서 0.80 → 아래 띠 0.90
     주요 기능 · 도입 사례 · 도입 문의: 머리글 → 탭 줄/사례 띠/버튼 순
   ========================================================= */
.fp-anim [data-fp] .reveal:not(.shown) { opacity: 1; transform: none; transition: none; }   /* .shown 뒤에는 원래 규칙(카드 hover 들뜸 · 전환) 그대로 */
.fp-anim #references { overflow-x: clip; }   /* 사례 띠가 옆에서 들어오는 동안 문서가 가로로 넓어지지 않게 */

@keyframes fpa-rise {        /* 아래에서 솟아오름: 아래 가장자리부터 드러나며 32px 올라옴 */
  from { clip-path: inset(100% calc(var(--fpa-m, 24px) * -1) calc(var(--fpa-m, 24px) * -1) calc(var(--fpa-m, 24px) * -1) round var(--fpa-r, 16px)); translate: 0 32px; }
  to { clip-path: inset(calc(var(--fpa-m, 24px) * -1) round var(--fpa-r, 16px)); translate: 0 0; }   /* --fpa-m: 그림자까지 보이는 여백 */
}
@keyframes fpa-rise-sm {
  from { clip-path: inset(100% -8px -8px -8px round 12px); translate: 0 14px; }
  to { clip-path: inset(-8px -8px -8px -8px round 12px); translate: 0 0; }
}
@keyframes fpa-wipe {        /* 왼쪽 → 오른쪽 스윕 (글줄 · 띠) */
  from { clip-path: inset(-12px 100% -12px -12px); }
  to { clip-path: inset(-12px -12px -12px -12px); }
}
@keyframes fpa-wipe-wide {   /* 그림자까지 넉넉히 */
  from { clip-path: inset(-40px 100% -40px -40px); }
  to { clip-path: inset(-40px -40px -40px -40px); }
}
@keyframes fpa-wipe-up {     /* 아래 → 위 스윕 + 조금 올라옴 (큰 글줄) */
  from { clip-path: inset(100% -12px -12px -12px); translate: 0 18px; }
  to { clip-path: inset(-12px -12px -12px -12px); translate: 0 0; }
}
@keyframes fpa-open {        /* 가운데 → 양옆 (알약 모양 버튼 · 전환 스위치) */
  from { clip-path: inset(-20px 50% -20px 50% round 999px); }
  to { clip-path: inset(-20px -20px -20px -20px round 999px); }
}
@keyframes fpa-reveal-l {    /* 오른쪽 → 왼쪽 스윕 + 옆에서 들어옴 (도입 사례 띠) */
  from { clip-path: inset(-30px -30px -30px 100%); translate: 80px 0; }
  to { clip-path: inset(-30px -30px -30px -30px); translate: 0 0; }
}
@keyframes fpa-slide-y { from { translate: 0 46px; } to { translate: 0 0; } }   /* 그림 칸(overflow:hidden) 안에서 올라옴 */
@keyframes fpa-slide-x { from { translate: 56px 0; } to { translate: 0 0; } }   /* 그림 칸 안에서 옆으로 들어옴 */
@keyframes fpa-peek {        /* '도입 후' 면이 왼쪽에서 12%까지 비쳤다 돌아감 */
  0%, 100% { clip-path: inset(0 100% 0 0); }
  45% { clip-path: inset(0 88% 0 0); }
}
@keyframes fpa-ways {        /* 인증 방법 버튼: 단말 쪽 연결선(왼쪽 바깥 260px)부터 오른쪽으로 그어짐 */
  from { clip-path: inset(-14px calc(100% + 260px) -14px -260px); }
  to { clip-path: inset(-14px -14px -14px -260px); }
}

/* ---- 운영 고민 (#change) ---- 제목 · 설명 뒷부분은 기존 R7 스윕(hero.js가 들어올 때마다 다시) */
.fp-anim #change.fpa-play .chg-hd .eyebrow { animation: fpa-wipe 0.6s var(--ease) 0.12s backwards; }
.fp-anim #change.fpa-play .chg-view { animation: fpa-open 0.7s var(--ease) 0.22s backwards; }
.fp-anim #change .chg-cell:nth-child(1) { --d: 0.32s; }
.fp-anim #change .chg-cell:nth-child(2), .fp-anim #change .chg-cell:nth-child(4) { --d: 0.41s; }
.fp-anim #change .chg-cell:nth-child(3), .fp-anim #change .chg-cell:nth-child(5) { --d: 0.5s; }
.fp-anim #change .chg-cell:nth-child(6) { --d: 0.59s; }
.fp-anim #change.fpa-play .chg-cell { --fpa-r: var(--r-lg); animation: fpa-rise 0.8s var(--ease) var(--d) backwards; }
.fp-anim #change.fpa-play .chg-cards:not(.chg-touched) .chg-card[aria-pressed="false"] .chg-face.tobe { animation: fpa-peek 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d) + 0.8s) 1; }
.fp-anim #change.fpa-play .num-cta { --fpa-r: 999px; --fpa-m: 36px; animation: fpa-rise 0.7s var(--ease) 0.78s backwards; }
/* 비교표 보기 상태로 들어온 경우: 줄마다 왼쪽부터 */
.fp-anim #change.fpa-play .chg-cmp-head { animation: fpa-wipe 0.6s var(--ease) 0.3s backwards; }
.fp-anim #change.fpa-play .chg-cmp-row { animation: fpa-wipe 0.7s var(--ease) calc(0.36s + var(--r, 0) * 0.06s) backwards; }
.fp-anim #change .chg-cmp-row:nth-child(2) { --r: 1; } .fp-anim #change .chg-cmp-row:nth-child(3) { --r: 2; }
.fp-anim #change .chg-cmp-row:nth-child(4) { --r: 3; } .fp-anim #change .chg-cmp-row:nth-child(5) { --r: 4; }
.fp-anim #change .chg-cmp-row:nth-child(6) { --r: 5; }

/* ---- 주요 기능 (#features) ---- */
.fp-anim #features.fpa-play .sec-head .eyebrow { animation: fpa-wipe 0.6s var(--ease) 0.12s backwards; }
.fp-anim #features.fpa-play .sec-head .sec-title { animation: fpa-wipe 0.8s var(--ease) 0.18s backwards; }
.fp-anim #features.fpa-play .sec-head .sec-desc { animation: fpa-wipe 0.8s var(--ease) 0.3s backwards; }
.fp-anim #features.fpa-play .fxf-tabs { animation: fpa-wipe-wide 0.9s var(--ease) 0.38s backwards; }
.fp-anim #features.fpa-play .fxf-panel { --fpa-r: var(--r-xl); --fpa-m: 80px; animation: fpa-rise 0.9s var(--ease) 0.52s backwards; }

/* ---- 장비 (#hardware) ---- */
.fp-anim #hardware.fpa-play .hw-head .eyebrow { animation: fpa-wipe 0.6s var(--ease) 0.14s backwards; }
.fp-anim #hardware.fpa-play .hw-head .sec-title { animation: fpa-wipe 0.8s var(--ease) 0.2s backwards; }
.fp-anim #hardware.fpa-play .hw-head .sec-desc { animation: fpa-wipe 0.8s var(--ease) 0.34s backwards; }
.fp-anim #hardware .hw-face { --d: 0.3s; }
.fp-anim #hardware .hw-gate { --d: 0.46s; }
.fp-anim #hardware .hw-grid > .hw-card:nth-child(3) { --d: 0.62s; }
.fp-anim #hardware.fpa-play .hw-grid > .hw-card { --fpa-r: var(--r-lg); animation: fpa-rise 0.85s var(--ease) var(--d) backwards; }
.fp-anim #hardware.fpa-play .hw-face .hw-fd { animation: fpa-slide-y 0.9s var(--ease) 0.5s backwards; }
.fp-anim #hardware.fpa-play .hw-face .hw-fd-ways { animation: fpa-ways 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.8s backwards; }
.fp-anim #hardware.fpa-play .hw-face .hw-fd-res { animation: fpa-wipe-wide 0.5s var(--ease) 1.3s backwards; }
.fp-anim #hardware .hw-flow li:nth-child(1) { --f: 0.95s; } .fp-anim #hardware .hw-flow li:nth-child(2) { --f: 1.05s; }
.fp-anim #hardware .hw-flow li:nth-child(3) { --f: 1.15s; } .fp-anim #hardware .hw-flow li:nth-child(4) { --f: 1.25s; }
.fp-anim #hardware.fpa-play .hw-flow li { animation: fpa-rise-sm 0.55s var(--ease) var(--f) backwards; }
.fp-anim #hardware.fpa-play .hw-gate .hw-photo img { animation: fpa-slide-x 0.9s var(--ease) 0.62s backwards; }
.fp-anim #hardware.fpa-play .hw-art-kiosk .hw-kiosk { animation: fpa-slide-y 0.9s var(--ease) 0.8s backwards; }
.fp-anim #hardware.fpa-play .hw-strip { animation: fpa-wipe 0.8s var(--ease) 0.9s backwards; }

/* ---- 도입 사례 (#references) ---- */
.fp-anim #references.fpa-play .sec-head-row .eyebrow { animation: fpa-wipe 0.6s var(--ease) 0.12s backwards; }
.fp-anim #references.fpa-play .sec-head-row .sec-title { animation: fpa-wipe 0.8s var(--ease) 0.18s backwards; }
.fp-anim #references.fpa-play .sec-head-row .text-link { animation: fpa-wipe 0.6s var(--ease) 0.42s backwards; }
.fp-anim #references.fpa-play .marquee { animation: fpa-reveal-l 1.1s var(--ease) 0.34s backwards; }
.fp-anim #references.fpa-play .case-note { animation: fpa-wipe 0.6s var(--ease) 0.8s backwards; }

/* ---- 도입 문의 (#contact) ---- */
.fp-anim .cta-band#contact.fpa-play .wm-text { animation: fpa-slide-y 1.4s var(--ease) 0.1s backwards; }
.fp-anim .cta-band#contact.fpa-play h2 { animation: fpa-wipe-up 0.8s var(--ease) 0.2s backwards; }
.fp-anim .cta-band#contact.fpa-play .container > p { animation: fpa-wipe-up 0.7s var(--ease) 0.32s backwards; }
.fp-anim .cta-band#contact.fpa-play .cta-btns { animation: fpa-open 0.7s var(--ease) 0.46s backwards; }
.fp-anim .cta-band#contact .cta-checks > span:nth-child(1) { --d: 0.62s; } .fp-anim .cta-band#contact .cta-checks > span:nth-child(2) { --d: 0.7s; }
.fp-anim .cta-band#contact .cta-checks > span:nth-child(3) { --d: 0.78s; }
.fp-anim .cta-band#contact.fpa-play .cta-checks > span { animation: fpa-wipe 0.5s var(--ease) var(--d) backwards; }

/* =========================================================
   2026-11-02 (서브 페이지 섹션) 서비스 소개 · 도입 안내 · 도입 사례 · 주요 기능 6종 — index처럼 휠 한 번에 한 섹션 + 등장 연출
   · 동작은 js/fullpage.js 그대로(PC · 마우스에서만 html.fp) — 위 '섹션 풀페이지' · '섹션 등장 연출' 블록 공통 규칙 위에 서브 페이지 것만 더함
   · 첫 화면 = 페이지 머리(sub-hero) + 바로 아래 목차 띠(.subnav). 섹션 모드에서는 목차 띠를 머리글 아래에 고정하지 않음
     (페이지 안 이동은 오른쪽 점 내비가 맡음 · 기능 페이지 사이 이동은 머리글 '주요 기능' · 아래 이전/다음 기능)
   · 섹션 뒤에 붙는 요소(목차 띠 · 이전/다음 기능)는 앞 섹션 화면에 함께 → 그 높이(--fp-x, 스크립트가 잼)를 섹션 최소 높이에서 뺌
   · 한 화면에 넘치던 섹션은 제목 한 줄 · 여백 · 기기 틀 높이 등을 줄임. 그래도 넘치면 내용을 비율 그대로 축소(0.74까지)
     그보다 더 줄여야 하면(1440×900의 기능 데모 등) 줄이지 않고 원래 크기로 두 화면에 나눔
     사례 목록 · 자주 묻는 질문은 축소하지 않고 카드 경계에서 한 화면씩(data-fp-snap)
   ========================================================= */
.fp .subnav { position: relative; top: auto; }
.fp .sub-hero[data-fp] { min-height: calc(var(--fp-h) - var(--fp-x, 0px)); display: flex; flex-direction: column; justify-content: center; }
.fp .sub-hero[data-fp]:has(+ .subnav) { --fp-x: 65px; }   /* 첫 화면이 그려질 때의 기본값(스크립트가 실제 높이로 덮어씀) */
.fp .sub-hero[data-fp] > .container { width: 100%; }
.fp .section[data-fp] { min-height: calc(var(--fp-h) - var(--fp-x, 0px)); }
/* 이전/다음 기능: '그 밖의 기능' 화면 아래쪽에 함께 */
.fp .fx-pager-sec { padding: 0 0 var(--fp-bot, var(--fp-pad)); }
.fp .section[data-fp]:has(+ .fx-pager-sec) { --fp-x: calc(152px + var(--fp-pad)); justify-content: flex-start; padding: var(--fp-top, var(--fp-pad)) 0 28px; }   /* 카드 + 이전/다음 기능을 한 덩어리로 가운데(위 · 아래 여백 = 스크립트가 잰 --fp-top · --fp-bot) */
@media (max-width: 1359px) {
  .fp .sub-hero[data-fp] > .container, .fp .fx-pager-sec > .container { padding-left: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); padding-right: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); }
}

/* 제목: 한 줄(줄바꿈 br 숨김) — index 제목은 위 블록 규칙 그대로 */
.fp body:not([data-page="home"]) [data-fp] .sec-title br { display: none; }
.fp body:not([data-page="home"]) [data-fp] .sec-head { max-width: none; }

/* ---- 기능 페이지: 입주민 화면 ↔ 관리사무소 화면 (fx-sync) ---- 기기 틀의 최소 높이(680px)를 풀고 여백을 줄임 */
.fp .fx-sync .sec-head { margin-bottom: clamp(14px, calc(var(--fp-h) * 0.024), 24px); }
.fp .fx-panel-head { margin-bottom: 16px; }
.fp .fx-panel-head .f-desc { margin-top: 6px; }
.fp .feat-tabs { margin-bottom: 14px; }
.fp .fx-side-h { margin-bottom: 10px; }
.fp .fx-dev { min-height: 0; padding: 22px 18px; }
.fp .fx-dev-ops { padding: 22px 24px; }
.fp .fx-link { padding-top: 40px; }
.fp .fx-pts { margin-top: 12px; gap: 6px; }
.fp .fx-pts li { font-size: 14.5px; line-height: 1.55; }
.fp .fx-synclog { margin-top: 14px; }

/* ---- 기능 페이지: 단계 스토리 (fx-story) · 그 밖의 기능 ---- */
.fp .flow-results { margin-top: 12px; }
.fp .fx-more { gap: 16px; }

/* ---- 서비스 소개: 한눈에 보기 ---- 사진 띠를 낮게(가운데 기준으로 잘라 보임) · 카드 사진 낮게 */
.fp #overview .photo-banner { aspect-ratio: auto; height: clamp(160px, calc(var(--fp-h) * 0.26), 300px); }
.fp #overview .photo-banner img { object-position: 50% 42%; }
.fp #overview .row-2 { margin-top: clamp(18px, calc(var(--fp-h) * 0.03), 32px) !important; }
.fp #overview .value-grid { margin-top: clamp(16px, calc(var(--fp-h) * 0.028), 30px) !important; gap: 18px; }
.fp #overview .value-card .vc-img { aspect-ratio: auto; height: clamp(110px, calc(var(--fp-h) * 0.17), 190px); }
.fp #overview .value-card .vc-body { padding: 18px 22px 20px; }
.fp #overview .value-card p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; }
.fp #overview .value-card ul { margin-top: 10px; gap: 4px; }
.fp #overview .value-card li { font-size: 14px; }

/* ---- 서비스 소개: 하루 다이얼 ---- 무대 높이는 widgets.js가 화면에 맞춤 */
.fp .tl-section[data-fp] .sec-head { margin-bottom: clamp(8px, calc(var(--fp-h) * 0.016), 16px); }

/* ---- 도입 안내: 자주 묻는 질문 ---- 줄 높이를 줄임(열린 답이 늘면 질문 경계에서 한 화면씩) */
.fp #faq .faq-cats { margin-bottom: 16px; }
.fp #faq .faq-q { padding: 15px 8px; font-size: 17px; }
.fp #faq .faq-a p { margin-bottom: 14px; padding: 13px 20px; font-size: 15px; line-height: 1.65; }

/* =========================================================
   서브 페이지 등장 연출 (위 '섹션 등장 연출'과 같은 규칙: 마스크 스윕 + 짧은 이동 · 페이드 없음 · 끝나면 원래 모습)
   공통 순서: 머리(눈썹 글 0.12 → 제목 0.18 → 설명 0.30) → 본문 덩어리 0.30~0.70 → 아래 띠 · 버튼
   ========================================================= */
@keyframes fpa-arc { from { clip-path: inset(50% 0 50% 50%); } to { clip-path: inset(0 0 0 50%); } }
@keyframes fpa-iris {        /* 가운데에서 원으로 열림 (다이얼 링 · 연결 구조 가운데) */
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(75% at 50% 50%); }
}
.fp-anim .fx-pager-sec .reveal:not(.shown), .fp-anim .subnav .reveal:not(.shown) { opacity: 1; transform: none; transition: none; }

/* 공통 머리 */
.fp-anim body:not([data-page="home"]) [data-fp].fpa-play .sec-head .eyebrow { animation: fpa-wipe 0.6s var(--ease) 0.12s backwards; }
.fp-anim body:not([data-page="home"]) [data-fp].fpa-play .sec-head .sec-title { animation: fpa-wipe 0.8s var(--ease) 0.18s backwards; }
.fp-anim body:not([data-page="home"]) [data-fp].fpa-play .sec-head .sec-desc { animation: fpa-wipe 0.8s var(--ease) 0.3s backwards; }

/* 페이지 머리 (sub-hero) + 목차 띠 */
.fp-anim .sub-hero.fpa-play .crumb { animation: fpa-wipe 0.6s var(--ease) 0.08s backwards; }
.fp-anim .sub-hero.fpa-play .badge-pill { animation: fpa-open 0.6s var(--ease) 0.14s backwards; }
.fp-anim .sub-hero.fpa-play h1 { animation: fpa-wipe-up 0.8s var(--ease) 0.2s backwards; }
.fp-anim .sub-hero.fpa-play .desc { animation: fpa-wipe 0.8s var(--ease) 0.34s backwards; }
.fp-anim .sub-hero.fpa-play .fx-roles li:nth-child(1) { animation: fpa-wipe-wide 0.7s var(--ease) 0.46s backwards; }
.fp-anim .sub-hero.fpa-play .fx-roles li:nth-child(2) { animation: fpa-wipe-wide 0.7s var(--ease) 0.54s backwards; }
.fp-anim .sub-hero.fpa-play .sub-hero-visual, .fp-anim .sub-hero.fpa-play .fx-hero-visual { --fpa-r: var(--r-xl); --fpa-m: 60px; animation: fpa-rise 0.9s var(--ease) 0.28s backwards; }
.fp-anim .sub-hero.fpa-play + .subnav .subnav-inner { animation: fpa-wipe 0.8s var(--ease) 0.5s backwards; }

/* 기능: 입주민 ↔ 관리사무소 화면 */
.fp-anim .fx-sync.fpa-play .feat-tabs { animation: fpa-wipe-wide 0.8s var(--ease) 0.3s backwards; }
.fp-anim .fx-sync.fpa-play .fx-panel-head { animation: fpa-wipe 0.7s var(--ease) 0.38s backwards; }
.fp-anim [data-fp].fpa-play .fx-side-res .fx-side-h { animation: fpa-wipe 0.6s var(--ease) 0.34s backwards; }
.fp-anim [data-fp].fpa-play .fx-side-res .fx-dev { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.4s backwards; }
.fp-anim [data-fp].fpa-play .fx-link { animation: fpa-wipe 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.66s backwards; }
.fp-anim [data-fp].fpa-play .fx-side-ops .fx-side-h { animation: fpa-wipe 0.6s var(--ease) 0.5s backwards; }
.fp-anim [data-fp].fpa-play .fx-side-ops .fx-dev { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.54s backwards; }
.fp-anim [data-fp].fpa-play .fx-pts li { animation: fpa-wipe 0.5s var(--ease) 0.86s backwards; }
.fp-anim [data-fp].fpa-play .fx-pts li:nth-child(2) { animation-delay: 0.92s; }
.fp-anim [data-fp].fpa-play .fx-pts li:nth-child(3) { animation-delay: 0.98s; }
.fp-anim [data-fp].fpa-play .fx-synclog:not(.fx-flash) { animation: fpa-wipe 0.7s var(--ease) 1.02s backwards; }

/* 기능: 단계 스토리 */
.fp-anim [data-fp].fpa-play .fx-step { animation: fpa-rise-sm 0.6s var(--ease) var(--d, 0.3s) backwards; }
.fp-anim [data-fp] .fx-step:nth-child(2) { --d: 0.37s; } .fp-anim [data-fp] .fx-step:nth-child(3) { --d: 0.44s; }
.fp-anim [data-fp] .fx-step:nth-child(4) { --d: 0.51s; } .fp-anim [data-fp] .fx-step:nth-child(5) { --d: 0.58s; }
.fp-anim [data-fp].fpa-play .fx-frames { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.36s backwards; }
.fp-anim [data-fp].fpa-play .flow-results > * { animation: fpa-wipe 0.7s var(--ease) 0.74s backwards; }
.fp-anim [data-fp].fpa-play .flow-results > *:nth-child(2) { animation-delay: 0.84s; }

/* 기능: 그 밖의 기능 카드 + 이전/다음 기능 */
.fp-anim [data-fp] .fx-mcard { --d: 0.3s; }
.fp-anim [data-fp] .fx-mcard:nth-child(2) { --d: 0.37s; } .fp-anim [data-fp] .fx-mcard:nth-child(3) { --d: 0.44s; }
.fp-anim [data-fp] .fx-mcard:nth-child(4) { --d: 0.51s; } .fp-anim [data-fp] .fx-mcard:nth-child(5) { --d: 0.58s; }
.fp-anim [data-fp] .fx-mcard:nth-child(6) { --d: 0.65s; }
.fp-anim [data-fp].fpa-play .fx-mcard { --fpa-r: var(--r-lg); animation: fpa-rise 0.8s var(--ease) var(--d) backwards; }
.fp-anim [data-fp].fpa-play + .fx-pager-sec .fx-pg { --fpa-r: var(--r-lg); animation: fpa-rise 0.8s var(--ease) 0.62s backwards; }
.fp-anim [data-fp].fpa-play + .fx-pager-sec .fx-pg.next { animation-delay: 0.7s; }

/* 기능: 출입 — 인증 수단 · 현장 장비 / 카페 — 운영 리포트 / 키오스크 — 두 개의 창구 */
.fp-anim [data-fp].fpa-play .auth-card { --fpa-r: var(--r-lg); animation: fpa-rise 0.8s var(--ease) var(--d, 0.3s) backwards; }
.fp-anim [data-fp] .auth-card:nth-child(2) { --d: 0.38s; } .fp-anim [data-fp] .auth-card:nth-child(3) { --d: 0.46s; }
.fp-anim [data-fp].fpa-play .fx-mix { animation: fpa-wipe-wide 0.7s var(--ease) 0.7s backwards; }
.fp-anim [data-fp].fpa-play .f-copy > * { animation: fpa-wipe 0.7s var(--ease) var(--d, 0.12s) backwards; }
.fp-anim [data-fp] .f-copy > :nth-child(2) { --d: 0.18s; } .fp-anim [data-fp] .f-copy > :nth-child(3) { --d: 0.3s; }
.fp-anim [data-fp] .f-copy > :nth-child(4) { --d: 0.4s; } .fp-anim [data-fp] .f-copy > :nth-child(5) { --d: 0.5s; }
.fp-anim [data-fp].fpa-play .hw-visual, .fp-anim [data-fp].fpa-play .fx-report { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.32s backwards; }
.fp-anim [data-fp].fpa-play .fx-two-card { --fpa-r: var(--r-lg); animation: fpa-rise 0.8s var(--ease) 0.32s backwards; }
.fp-anim [data-fp].fpa-play .fx-two-card.is-kiosk { animation-delay: 0.42s; }
.fp-anim [data-fp].fpa-play .fx-two-join { animation: fpa-wipe-up 0.5s var(--ease) 0.56s backwards; }
.fp-anim [data-fp].fpa-play .fx-two-base { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.62s backwards; }

/* 서비스: 한눈에 보기 */
.fp-anim #overview.fpa-play .photo-banner { --fpa-r: var(--r-xl); --fpa-m: 0px; animation: fpa-rise 0.9s var(--ease) 0.1s backwards; }
.fp-anim #overview.fpa-play .row-2 > :first-child { animation: fpa-wipe 0.8s var(--ease) 0.26s backwards; }
.fp-anim #overview.fpa-play .row-2 > :last-child { animation: fpa-wipe 0.8s var(--ease) 0.36s backwards; }
.fp-anim #overview .value-card:nth-child(1) { --d: 0.42s; } .fp-anim #overview .value-card:nth-child(2) { --d: 0.5s; }
.fp-anim #overview .value-card:nth-child(3) { --d: 0.58s; }
.fp-anim #overview.fpa-play .value-card { --fpa-r: var(--r-lg); animation: fpa-rise 0.85s var(--ease) var(--d) backwards; }

/* 서비스: 하루 다이얼 — 화면 판이 솟고 링이 가운데서 열린 뒤 단계 글이 왼쪽부터 */
.fp-anim .tl-section.fpa-play .dial-panel, .fp-anim .tl-section.fpa-play .dial-screens { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.32s backwards; }
.fp-anim .tl-section.fpa-play .dial-ring { animation: fpa-arc 1s var(--ease) 0.4s backwards; }   /* 링은 원래 오른쪽 반원만 보임 → 3시 자리에서 위아래로 열림 */
.fp-anim .tl-section.fpa-play .dial-items { animation: fpa-wipe-wide 0.9s var(--ease) 0.56s backwards; }
.fp-anim .tl-section.fpa-play .dial-count, .fp-anim .tl-section.fpa-play .dial-play { animation: fpa-wipe 0.5s var(--ease) 0.8s backwards; }

/* 서비스: 연결 구조 — 가운데가 열리고 → 선 → 기기 버튼 차례로 */
.fp-anim #connect.fpa-play .cb-core { animation: fpa-iris 0.8s var(--ease) 0.3s backwards; }
.fp-anim #connect.fpa-play .cb-lines { animation: fpa-iris 1.1s var(--ease) 0.42s backwards; }
.fp-anim #connect .cb-n:nth-child(1) > a { --d: 0.56s; } .fp-anim #connect .cb-n:nth-child(2) > a { --d: 0.64s; }
.fp-anim #connect .cb-n:nth-child(3) > a { --d: 0.6s; } .fp-anim #connect .cb-n:nth-child(4) > a { --d: 0.68s; }
.fp-anim #connect .cb-n:nth-child(5) > a { --d: 0.72s; }
.fp-anim #connect.fpa-play .cb-n > a { animation: fpa-rise-sm 0.6s var(--ease) var(--d) backwards; }
.fp-anim #connect.fpa-play .cb-label { animation: fpa-wipe 0.5s var(--ease) 0.9s backwards; }

/* 도입 안내: 절차 · 방식 · 질문 (문의하기부터는 일반 스크롤) */
.fp-anim #process.fpa-play .jr { --fpa-r: var(--r-xl); --fpa-m: 40px; animation: fpa-rise 0.9s var(--ease) 0.3s backwards; }
.fp-anim #approach .ap-card:nth-child(1) { --d: 0.3s; } .fp-anim #approach .ap-card:nth-child(2) { --d: 0.38s; }
.fp-anim #approach .ap-card:nth-child(3) { --d: 0.46s; }
.fp-anim #approach.fpa-play .ap-card { --fpa-r: var(--r-lg); animation: fpa-rise 0.85s var(--ease) var(--d, 0.3s) backwards; }
.fp-anim #faq.fpa-play .faq-cats { animation: fpa-open 0.7s var(--ease) 0.28s backwards; }
.fp-anim #faq.fpa-play .faq-list { animation: fpa-wipe 0.8s var(--ease) 0.36s backwards; }
.fp-anim #faq .faq-item:nth-child(1) { --d: 0.42s; } .fp-anim #faq .faq-item:nth-child(2) { --d: 0.47s; }
.fp-anim #faq .faq-item:nth-child(3) { --d: 0.52s; } .fp-anim #faq .faq-item:nth-child(4) { --d: 0.57s; }
.fp-anim #faq .faq-item:nth-child(5) { --d: 0.62s; } .fp-anim #faq .faq-item:nth-child(6) { --d: 0.67s; }
.fp-anim #faq .faq-item:nth-child(7) { --d: 0.72s; } .fp-anim #faq .faq-item:nth-child(8) { --d: 0.77s; }
.fp-anim #faq .faq-item:nth-child(9) { --d: 0.82s; }
.fp-anim #faq.fpa-play .faq-item:nth-child(-n+9) { animation: fpa-wipe 0.6s var(--ease) var(--d) backwards; }
/* 도입 문의 띠 (서브 페이지 — index의 #contact 규칙과 같은 순서) */
.fp-anim body:not([data-page="home"]) .cta-band.fpa-play .wm-text { animation: fpa-slide-y 1.4s var(--ease) 0.1s backwards; }
.fp-anim body:not([data-page="home"]) .cta-band.fpa-play h2 { animation: fpa-wipe-up 0.8s var(--ease) 0.2s backwards; }
.fp-anim body:not([data-page="home"]) .cta-band.fpa-play .container > p { animation: fpa-wipe-up 0.7s var(--ease) 0.32s backwards; }
.fp-anim body:not([data-page="home"]) .cta-band.fpa-play .cta-btns { animation: fpa-open 0.7s var(--ease) 0.46s backwards; }
.fp-anim body:not([data-page="home"]) .cta-band .cta-checks > span:nth-child(1) { --d: 0.62s; }
.fp-anim body:not([data-page="home"]) .cta-band .cta-checks > span:nth-child(2) { --d: 0.7s; }
.fp-anim body:not([data-page="home"]) .cta-band .cta-checks > span:nth-child(3) { --d: 0.78s; }
.fp-anim body:not([data-page="home"]) .cta-band.fpa-play .cta-checks > span { animation: fpa-wipe 0.5s var(--ease) var(--d) backwards; }

/* =========================================================
   2026-11-02 (왼쪽 목차 .lnb) 서비스 소개 · 주요 기능 6종 · 도입 안내 — 첫 화면을 지나면 화면 왼쪽에 고정되는 목차
   · 섹션 모드(PC · 마우스, html.fp)에서만. 태블릿 · 모바일은 지금처럼 첫 화면 아래 목차 띠만
   · 보임 = js/fullpage.js가 .is-on(첫 화면이 아닐 때) → 화면 왼쪽 밖에서 미끄러져 들어옴(페이드 없음) · 숨을 때는 반대로
   · 지금 위치: 서비스 · 도입 안내 = 지금 섹션 항목(.is-active) / 기능 페이지 = 지금 페이지(aria-current="page") + 커뮤니티 이용의 지금 탭
   · 배경이 어두운 화면(도입 문의 띠 · 푸터)에서는 흰 글씨(.is-dark)
   · 가로 1360px↑: 이름 목록(왼쪽 세로선 + 지금 항목 파란 선) → 본문 · 푸터 내용의 왼쪽 끝을 목록 오른쪽 밖(화면 왼쪽에서 190px)으로
     1359px↓: 짧은 막대만(오른쪽 점 내비와 같은 84px 여백 안) — 마우스를 올리면 이름이 왼쪽 → 오른쪽으로 펼쳐짐(마스크)
   ========================================================= */
.lnb { display: none; }
.fp .lnb {
  display: block; position: fixed; z-index: 880; left: 28px; top: calc(50% + var(--header-h) / 2);
  translate: calc(-100% - 48px) -50%; visibility: hidden;
  transition: translate 0.5s var(--ease), visibility 0s linear 0.5s;
}
.fp .lnb.is-on { translate: 0 -50%; visibility: visible; transition: translate 0.6s var(--ease), visibility 0s; }
.lnb ul { list-style: none; margin: 0; padding: 0; }
.lnb > ul { border-left: 2px solid rgba(17, 25, 39, 0.1); }
.lnb a { position: relative; display: block; padding: 7px 0 7px 16px; color: var(--gray-500); font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; transition: color 0.2s; }
.lnb a::before {   /* 지금 항목 = 세로선 위 파란 선(가운데에서 위아래로 열림) */
  content: ''; position: absolute; left: -2px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--primary);
  clip-path: inset(50% 0 50% 0); transition: clip-path 0.35s var(--ease);
}
.lnb a:hover { color: var(--ink); }
.lnb a.is-active, .lnb a[aria-current="page"] { color: var(--primary); font-weight: 700; }
.lnb a.is-active::before, .lnb a[aria-current="page"]::before { clip-path: inset(0 0 0 0); }
.lnb a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* 커뮤니티 이용의 핵심 기능 4가지: 한 단계 안쪽 · 작은 점 */
.lnb-sub { margin: 1px 0 5px; }
.lnb .lnb-sub a { padding: 4px 0 4px 30px; font-size: 13px; font-weight: 500; }
.lnb .lnb-sub a::before { display: none; }
.lnb .lnb-sub a::after { content: ''; position: absolute; left: 18px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--gray-300); transition: background-color 0.2s; }
.lnb .lnb-sub a.is-active { color: var(--primary); font-weight: 700; }
.lnb .lnb-sub a.is-active::after, .lnb .lnb-sub a:hover::after { background: var(--primary); }
/* 어두운 화면 위 */
.lnb.is-dark > ul { border-left-color: rgba(255, 255, 255, 0.22); }
.lnb.is-dark a { color: rgba(255, 255, 255, 0.68); }
.lnb.is-dark a:hover, .lnb.is-dark a.is-active, .lnb.is-dark a[aria-current="page"], .lnb.is-dark .lnb-sub a.is-active { color: #fff; }
.lnb.is-dark a::before, .lnb.is-dark .lnb-sub a.is-active::after, .lnb.is-dark .lnb-sub a:hover::after { background: #fff; }
.lnb.is-dark .lnb-sub a::after { background: rgba(255, 255, 255, 0.4); }
.lnb.is-dark a:focus-visible { outline-color: #fff; }
/* 본문 · 푸터 내용이 목록 아래로 들어가지 않게 (첫 화면 · 도입 문의 띠는 그대로 — 목록이 없거나 가운데 정렬) */
@media (min-width: 1360px) {
  .fp body:has(.lnb) main > .section > .container, .fp body:has(.lnb) .tl-section .tl-stage,
  .fp body:has(.lnb) .site-footer > .container { padding-left: max(24px, calc(190px - (100vw - 1200px) / 2)); }
}
/* 1359px↓: 짧은 막대 + 마우스를 올리면 이름 */
@media (max-width: 1359px) {
  .fp .lnb { left: 22px; }
  .lnb > ul { border-left: 0; }
  .lnb a, .lnb .lnb-sub a { display: flex; align-items: center; width: 26px; height: 26px; padding: 0; }
  .lnb a::before, .lnb .lnb-sub a::before {
    display: block; position: static; width: 12px; height: 2px; border-radius: 2px; background: rgba(17, 25, 39, 0.26);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);   /* 흰 테두리: 사진 위에서도 보이게(오른쪽 점과 같은 방식) */
    clip-path: none; transition: width 0.3s var(--ease), background-color 0.2s;
  }
  .lnb .lnb-sub a::before { width: 6px; margin-left: 6px; }
  .lnb .lnb-sub a::after { display: none; }
  .lnb a:hover::before { background: var(--primary); }
  .lnb a.is-active::before, .lnb a[aria-current="page"]::before { width: 20px; background: var(--primary); }
  .lnb .lnb-sub a.is-active::before { width: 12px; margin-left: 6px; background: var(--primary); }
  .lnb-l {
    position: absolute; left: calc(100% + 2px); top: 50%; translate: 0 -50%;
    padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap;
    clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 0.28s var(--ease); pointer-events: none;
  }
  .lnb a:hover .lnb-l, .lnb a:focus-visible .lnb-l { clip-path: inset(0 0 0 0 round 999px); }
  .lnb a:focus-visible { outline-offset: 0; border-radius: 50%; }
  .lnb.is-dark a::before, .lnb.is-dark .lnb-sub a::before { background: rgba(255, 255, 255, 0.42); box-shadow: none; }
  .lnb.is-dark a:hover::before, .lnb.is-dark a.is-active::before, .lnb.is-dark a[aria-current="page"]::before, .lnb.is-dark .lnb-sub a.is-active::before { background: #fff; }
  .lnb.is-dark .lnb-l { background: #fff; color: var(--ink); }
  /* 일반 스크롤 구간(도입 안내 문의하기) · 푸터도 섹션처럼 좌우 84px 안쪽(양옆 목차 · 점 내비) */
  .fp .section[data-fp-free] > .container,
  .fp body:has(.lnb) .site-footer > .container { padding-left: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); padding-right: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); }
  .fp body:has(.lnb) .tl-section .tl-stage { padding-left: clamp(24px, calc(84px - (100vw - 1200px) / 2), 84px); }   /* 서비스 '하루' 다이얼 무대(섹션 안쪽에 따로 있는 틀) */
}
@media (prefers-reduced-motion: reduce) {
  .fp .lnb, .fp .lnb.is-on, .lnb a::before, .lnb-l { transition: none; }
}

/* 서비스 소개 · 도입 안내: 왼쪽 목차와 항목이 같은 오른쪽 점 내비는 숨김(2026-11-03 사용자 요청 — 목차에 페이지 안 #항목이 있는 페이지) */
.fp body:has(.lnb a[href^="#"]) .fp-nav { display: none; }

/* =========================================================
   2026-11-03 (넓은 기능 데모 .fx-wide) 골프 #booking · GX #timetable · 카페 #order
   · 한 화면에 제목 → 두 화면 → 체크 목록 → 연결 상태 줄을 세로로 쌓느라 내용이 0.76배까지 줄던 문제(사용자 요청: 화면을 넓게, 작지 않게)
   · 섹션 모드 + 가로 1200px↑: [왼쪽 글 칸: 제목 · 설명 · 입주민 체크 · 운영 체크 · 연결 상태] [입주민 폰] [실시간 반영] [운영 화면]
     틀 폭 1680px까지(왼쪽 목차 · 오른쪽 점 내비 자리는 비움)
   · 묶음(.fx-wide-in[data-fp-zoom])을 js/fullpage.js가 화면 폭(--fp-minw 기준) · 높이에 맞춰 줄이거나, 남으면 --fp-grow배까지 키움
   · 2026-11-03 출입 #simulation(게이트 · 폭 넓음) · 키오스크 #onsite(키오스크 · 키 큼) · 커뮤니티 이용 #core(탭 4개)에도 같은 배치
     입주민 칸 폭(--fxw-res) · 운영 칸 최소 폭(--fxw-ops)은 섹션마다 · 커뮤니티 이용은 탭 2×2와 선택한 기능 제목 · 설명을 글 칸에
   · 이 섹션들은 등장 연출 없음(data-fp-still — 사용자 요청 '너무 정신없다')
   · 1199px↓ · 태블릿 · 모바일은 원래 배치 그대로(.fx-duo · .fx-side는 display: contents로 풀어서 칸에 배치 — 마크업 순서 그대로)
   ========================================================= */
@media (min-width: 1200px) {
  .fp .fx-wide { --fp-minw: 1238; --fp-grow: 1.2; }   /* 최소 폭 = 아래 칸 최소값 합(280 + 44 + 입주민 330 + 64 + 운영 520) */
  .fp #simulation.fx-wide { --fxw-res: 402px; --fxw-ops: 480px; --fp-minw: 1270; }   /* 출입: 게이트 무대 366px + 여백 */
  .fp #onsite.fx-wide { --fxw-res: 340px; --fp-minw: 1248; }                          /* 키오스크 304px + 여백 */
  .fp #core.fx-wide { --fxw-tmin: 340px; --fxw-text: 380px; --fp-minw: 1298; }          /* 커뮤니티 이용: 글이 많아 글 칸을 넓게(줄 수 ↓) */
  .fp body:has(.lnb) main > .fx-wide > .container {
    max-width: 1680px;
    padding-left: clamp(24px, calc(84px - (100vw - 1680px) / 2), 84px); padding-right: clamp(24px, calc(84px - (100vw - 1680px) / 2), 84px);
  }
  .fp .fx-wide-in {
    display: grid; justify-content: center;
    grid-template-columns: minmax(var(--fxw-tmin, 280px), var(--fxw-text, 340px)) 44px var(--fxw-res, 330px) 64px minmax(var(--fxw-ops, 520px), 620px);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "head . resh .    opsh"
      "head . resd link opsd"
      "rpts . resd link opsd"
      "opts . resd link opsd"
      "log  . resd link opsd";
  }
  .fp .fx-wide .fx-duo, .fp .fx-wide .fx-side { display: contents; }
  /* 왼쪽 글 칸 */
  .fp .fx-wide .sec-head { grid-area: head; margin: 0; max-width: none; text-align: left; }
  .fp .fx-wide .sec-head .sec-title { font-size: 30px; line-height: 1.32; }
  .fp .fx-wide .sec-head .sec-desc { margin-top: 12px; font-size: 15.5px; line-height: 1.7; }
  .fp .fx-wide .fx-side-res .fx-pts { grid-area: rpts; margin-top: 28px; }
  .fp .fx-wide .fx-side-ops .fx-pts { grid-area: opts; margin-top: 18px; }
  .fp .fx-wide .fx-pts { gap: 8px; align-content: start; }
  .fp .fx-wide .fx-pts::before {   /* 어느 화면의 내용인지: 그 화면 위 꼬리표와 같은 이름 · 같은 색 */
    content: attr(data-who); justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-bottom: 2px;
    border-radius: 999px; background: var(--blue-100); color: #2557d1; font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
  }
  .fp .fx-wide .fx-side-ops .fx-pts::before { background: var(--primary-deep); color: #fff; }
  .fp .fx-wide .fx-pts li { font-size: 14.5px; line-height: 1.55; }
  .fp .fx-wide .fx-synclog { grid-area: log; align-self: end; max-width: none; margin: 22px 0 0; padding: 11px 14px; font-size: 13.5px; }
  /* 오른쪽 두 화면 */
  .fp .fx-wide .fx-side-res .fx-side-h { grid-area: resh; }
  .fp .fx-wide .fx-side-ops .fx-side-h { grid-area: opsh; }
  .fp .fx-wide .fx-side-res .fx-dev { grid-area: resd; padding: 22px 18px; }
  .fp .fx-wide .fx-side-ops .fx-dev { grid-area: opsd; padding: 22px 20px; }
  .fp .fx-wide .fx-link { grid-area: link; padding-top: 0; position: relative; z-index: 2; }   /* '실시간 반영' 꼬리표가 칸보다 넓어 양옆 화면 테두리에 살짝 걸침 */
  /* 커뮤니티 이용 #core: 글 칸 = 제목 → 탭 2×2 → 선택한 기능(번호 · 제목 · 설명) → 체크 → 연결 상태 */
  .fp .fx-wide-in:has(> [data-tabs]) {
    grid-template-rows: auto auto auto auto auto auto 1fr;
    grid-template-areas:
      "head  . resh .    opsh"
      "head  . resd link opsd"
      "tabs  . resd link opsd"
      "phead . resd link opsd"
      "rpts  . resd link opsd"
      "opts  . resd link opsd"
      "log   . resd link opsd";
  }
  .fp .fx-wide [data-tabs], .fp .fx-wide .feat-panel:not([hidden]) { display: contents; }
  .fp .fx-wide-in.fp-allpanels .feat-panel[hidden] { display: contents !important; }   /* 배율 계산 순간에만(js/fullpage.js): 4개 탭을 같은 칸에 겹쳐 가장 긴 탭 기준 → 탭을 바꿔도 크기 그대로 */
  .fp .fx-wide .feat-tabs { grid-area: tabs; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 0; }
  .fp .fx-wide .feat-tabs .pill-tab { justify-content: center; gap: 6px; height: 38px; padding: 0 10px; font-size: 14px; }
  .fp .fx-wide .feat-tabs .pill-tab svg.ico { width: 16px; height: 16px; }
  .fp .fx-wide .fx-panel-head { grid-area: phead; max-width: none; margin: 22px 0 0; text-align: left; }
  .fp .fx-wide .fx-panel-head .f-num { justify-content: flex-start; margin-bottom: 6px; }
  .fp .fx-wide .fx-panel-head .f-title { font-size: 22px; }
  .fp .fx-wide .fx-panel-head .f-desc { margin-top: 6px; font-size: 15px; line-height: 1.65; }
  .fp .fx-wide-in:has(> [data-tabs]) .fx-side-res .fx-pts { margin-top: 18px; }
  .fp .fx-wide-in:has(> [data-tabs]) .fx-side-ops .fx-pts { margin-top: 14px; }
  .fp .fx-wide-in:has(> [data-tabs]) .fx-synclog { margin-top: 16px; }
}
@media (min-width: 1360px) {   /* 이름 목록형 왼쪽 목차 자리(화면 왼쪽 190px) · 오른쪽 점 내비 자리 */
  .fp body:has(.lnb) main > .fx-wide > .container { padding-left: max(24px, calc(190px - max(0px, (100vw - 1680px) / 2))); padding-right: max(24px, calc(84px - max(0px, (100vw - 1680px) / 2))); }   /* 화면이 1680px보다 좁으면 틀이 화면 끝까지 → 여백 그대로 */
}

/* 커뮤니티 이용 히어로: 오른쪽 장면(폰 · 운영 대시보드 · 실시간 기록) 20% 크게 — 칸 500 → 600px(장면 배율 상한 data-max 1.4) · 2026-11-03 사용자 요청 */
/* 화면 높이 800px↑에서만(더 낮은 화면은 섹션 모드가 히어로 전체를 줄여 글까지 작아지므로 원래 크기) */
@media (min-height: 800px) {
  body[data-page="feature-community"] .fx-hero .sub-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
}
@media (min-height: 800px) and (max-width: 1200px) {
  body[data-page="feature-community"] .fx-hero .sub-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 528px); }
}
@media (max-width: 1023px) {   /* 한 줄 배치(태블릿 · 모바일)는 그대로 한 칸 */
  body[data-page="feature-community"] .fx-hero .sub-hero-inner { grid-template-columns: 1fr; }
  body[data-page="feature-community"] .fx-hero-visual { max-width: 624px; }
}