/* =================================================================
   aitrade.kr  —  XAUUSD 자동매매 실전 운용 (Light Premium Theme)
   Base: 웜 화이트 + 딥 네이비 텍스트 + 골드 액센트
   뷰어(.viewer~)는 어두운 라이트박스 그대로 유지
   ================================================================= */

:root{
  /* 라이트 테마 */
  --bg:        #f6f7f9;     /* 페이지 베이스 */
  --bg-alt:    #eef1f5;     /* 교차 섹션 배경 */
  --surface:   #ffffff;     /* 카드 */
  --line:      #e3e7ee;     /* 보더 */
  --line-soft: #eef1f5;

  --navy:      #0f1f3d;     /* 메인 텍스트/구조색 */
  --navy-2:    #233453;
  --ink:       #1b2738;     /* 본문 */
  --ink-soft:  #5b6677;     /* 보조 */
  --ink-dim:   #8b95a4;     /* 흐린 */

  --gold:      #b8893a;
  --gold-2:    #caa24a;
  --gold-soft: #f3e9d4;
  --gold-grad: linear-gradient(135deg,#caa24a 0%,#b8893a 60%,#9a6f2c 100%);

  --up:        #1f9d6b;     /* 긍정 */
  --down:      #c2503e;     /* 주의 */

  --maxw:      1200px;
  --radius:    16px;
  --radius-sm: 12px;
  --shadow:    0 18px 40px -22px rgba(15,31,61,.28);
  --shadow-sm: 0 8px 20px -14px rgba(15,31,61,.25);
  --ease:      cubic-bezier(.16,.84,.36,1);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

em{ font-style:normal; background:var(--gold-grad);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
strong{ color:var(--navy); font-weight:700; }

/* 공통 내부 폭 */
.topbar__inner,.hero__inner,.sec__inner,.finale__inner,.legal__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px;
}

/* =================================================================
   상단 고정 바
   ================================================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.topbar.is-scrolled{
  border-bottom-color:var(--line);
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 20px -16px rgba(15,31,61,.4);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between; height:66px;
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand__mark{
  width:11px; height:11px; border-radius:3px;
  background:var(--gold-grad);
  box-shadow:0 0 12px rgba(202,162,74,.5);
  transform:rotate(45deg);
}
.brand__name{
  font-size:20px; font-weight:800; letter-spacing:.04em; color:var(--navy);
}
.brand__sub{
  font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--ink-dim);
}
.topbar__cta{ display:flex; gap:10px; align-items:center; }

/* =================================================================
   버튼 (CTA)
   ================================================================= */
.btn{
  --bd:var(--line);
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:999px;
  font-family:var(--font); font-size:15px; font-weight:700;
  letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  border:1px solid var(--bd); background:var(--surface);
  color:var(--navy);
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--gold-2);
  box-shadow:0 10px 24px -14px rgba(184,137,58,.6); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* 채워진 골드 강조 */
.btn--primary{
  background:var(--gold-grad); border-color:transparent;
  color:#fff; font-weight:800;
  box-shadow:0 10px 24px -10px rgba(184,137,58,.55);
}
.btn--primary:hover{ box-shadow:0 16px 32px -10px rgba(184,137,58,.65); color:#fff; }

/* 데이터 버튼은 네이비 아웃라인으로 구분감 */
.btn--data{ color:var(--navy); }

/* 아이콘 */
.btn__ico{ width:16px; height:16px; flex:none; }
.btn[data-icon="chat"]  .btn__ico{ -webkit-mask:var(--ico-chat) center/contain no-repeat; mask:var(--ico-chat) center/contain no-repeat; background:currentColor; }
.btn[data-icon="chart"] .btn__ico{ -webkit-mask:var(--ico-chart) center/contain no-repeat; mask:var(--ico-chart) center/contain no-repeat; background:currentColor; }
.btn[data-icon="apply"] .btn__ico{ -webkit-mask:var(--ico-apply) center/contain no-repeat; mask:var(--ico-apply) center/contain no-repeat; background:currentColor; }
:root{
  --ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3C6.5 3 2 6.6 2 11c0 2.5 1.4 4.7 3.6 6.1L5 21l4.2-2.2c.9.2 1.8.3 2.8.3 5.5 0 10-3.6 10-8s-4.5-8-10-8z'/%3E%3C/svg%3E");
  --ico-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20h16v2H4zM6 12h3v6H6zm5-6h3v12h-3zm5 3h3v9h-3z'/%3E%3C/svg%3E");
  --ico-apply:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v6c0 5 3.4 9.4 8 10 4.6-.6 8-5 8-10V6l-8-4zm-1 13-3-3 1.4-1.4L11 12.2l4.6-4.6L17 9l-6 6z'/%3E%3C/svg%3E");
}

/* =================================================================
   히어로
   ================================================================= */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 50% -10%, #ffffff 0%, var(--bg) 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero__bg{ position:absolute; inset:auto 0 0 0; height:60%; opacity:.5; pointer-events:none; }
.hero__chart{ width:100%; height:100%; }
.hero__inner{ position:relative; text-align:center; padding:84px 24px 72px; }
.hero__eyebrow{
  margin:0 0 18px; font-size:12px; font-weight:800;
  letter-spacing:.3em; color:var(--gold);
}
.hero__title{
  margin:0 auto; max-width:20ch;
  font-size:clamp(28px,5.4vw,52px); font-weight:800; line-height:1.25;
  letter-spacing:-.025em; color:var(--navy);
}
.hero__lead{
  margin:24px auto 0; max-width:62ch;
  color:var(--ink-soft); font-size:clamp(15px,2.3vw,18px);
}
.hero__stats{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin:36px auto 0; max-width:760px; padding:0; list-style:none;
}
.stat{
  flex:1 1 200px; padding:18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.stat__k{ display:block; font-size:13px; color:var(--gold); font-weight:800; letter-spacing:.02em; }
.stat__v{ display:block; margin-top:5px; font-size:15px; color:var(--navy); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:38px; }

/* =================================================================
   섹션 공통
   ================================================================= */
.sec{ padding:72px 0; }
.sec--alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.sec__head{ text-align:center; max-width:760px; margin:0 auto 44px; }
.sec__tag{
  display:inline-block; margin-bottom:14px; padding:6px 14px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--gold);
  background:var(--gold-soft); border:1px solid rgba(184,137,58,.25);
}
.sec__title{
  margin:0; font-size:clamp(24px,4vw,38px); font-weight:800;
  line-height:1.3; letter-spacing:-.025em; color:var(--navy);
}
.sec__sub{ margin:18px auto 0; max-width:60ch; color:var(--ink-soft);
  font-size:clamp(15px,2.2vw,17px); }
.sec__note{
  margin:40px auto 0; max-width:72ch; text-align:center;
  color:var(--ink-soft); font-size:clamp(15px,2.2vw,17px); line-height:1.85;
}

/* 그리드 */
.grid{ display:grid; gap:20px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }

/* =================================================================
   카드 (이유)
   ================================================================= */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(184,137,58,.35); }
.card__ico{
  width:52px; height:52px; border-radius:14px; margin-bottom:18px;
  background:var(--gold-soft); position:relative;
  border:1px solid rgba(184,137,58,.2);
}
.card__ico::after{
  content:""; position:absolute; inset:0; margin:14px;
  background:var(--gold-grad); -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.card__ico[data-ico="time"]::after{ -webkit-mask-image:var(--ic-time); mask-image:var(--ic-time); }
.card__ico[data-ico="heart"]::after{ -webkit-mask-image:var(--ic-heart); mask-image:var(--ic-heart); }
.card__ico[data-ico="rule"]::after{ -webkit-mask-image:var(--ic-rule); mask-image:var(--ic-rule); }
.card__title{ margin:0 0 8px; font-size:19px; font-weight:800; color:var(--navy); }
.card__text{ margin:0; color:var(--ink-soft); font-size:15px; }
:root{
  --ic-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm1-13h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E");
  --ic-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.5-4.6-10-9.3C.5 8.2 2 5 5.3 5c2 0 3.4 1.2 4.7 2.8C11.3 6.2 12.7 5 14.7 5 18 5 19.5 8.2 22 11.7 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  --ic-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* =================================================================
   인용구
   ================================================================= */
.quote{
  position:relative; margin:0 auto 44px; max-width:880px; text-align:center;
  padding:36px 32px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.quote::before{
  content:"“"; position:absolute; top:-6px; left:24px;
  font-size:64px; line-height:1; color:var(--gold-2); opacity:.6; font-family:Georgia,serif;
}
.sec .quote:last-child{ margin-top:44px; margin-bottom:0; }
.quote__text{ margin:0; font-size:clamp(19px,3vw,26px); font-weight:800;
  color:var(--navy); line-height:1.45; letter-spacing:-.02em; }
.quote__by{ margin:14px 0 0; color:var(--ink-soft); font-size:15px; }

/* =================================================================
   목표 (goal)
   ================================================================= */
.goal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.goal::before{ content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--gold-grad); }
.goal__num{ display:block; font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--gold); }
.goal__title{ margin:8px 0 6px; font-size:20px; font-weight:800; color:var(--navy); }
.goal__text{ margin:0; color:var(--ink-soft); font-size:15px; }

/* =================================================================
   적합 대상 (fit)
   ================================================================= */
.fit{ list-style:none; padding:0; margin:0; display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr); }
.fit__item{
  position:relative; padding:20px 22px 20px 56px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:16px; color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), border-color .25s;
}
.fit__item:hover{ transform:translateY(-2px); border-color:rgba(184,137,58,.35); }
.fit__item::before{
  content:""; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  background:var(--gold-grad) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* =================================================================
   실전 데이터: 좋은날/불리한날 + 배너
   ================================================================= */
.duo{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
.duo__col{
  padding:26px; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.duo__col::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; }
.duo__col--up::before{ background:var(--up); }
.duo__col--down::before{ background:var(--down); }
.duo__label{ display:inline-block; font-weight:800; font-size:16px; margin-bottom:8px; }
.duo__col--up .duo__label{ color:var(--up); }
.duo__col--down .duo__label{ color:var(--down); }
.duo__text{ margin:0; color:var(--ink-soft); font-size:15px; }

.banner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-top:36px; padding:24px 28px; border-radius:var(--radius);
  background:linear-gradient(135deg,#13233f 0%,#1d3056 100%);
  border:1px solid rgba(202,162,74,.35);
  box-shadow:0 16px 36px -20px rgba(15,31,61,.6);
}
.banner__txt{ font-size:clamp(16px,2.6vw,19px); color:#dfe6f1; }
.banner__txt strong{ color:#fff; }
.banner .btn{ background:var(--gold-grad); color:#fff; border-color:transparent; }

/* =================================================================
   핵심 구조 (flow)
   ================================================================= */
.flow{ list-style:none; padding:0; margin:0; display:grid; gap:16px;
  grid-template-columns:repeat(2,1fr); }
.flow__step{
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 24px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), border-color .25s;
}
.flow__step:hover{ transform:translateY(-3px); border-color:rgba(184,137,58,.35); }
.flow__num{
  flex:none; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px; color:#fff; background:var(--gold-grad);
  box-shadow:0 6px 14px -8px rgba(184,137,58,.7);
}
.flow__body h3{ margin:2px 0 5px; font-size:17px; font-weight:800; color:var(--navy); }
.flow__body p{ margin:0; font-size:14.5px; color:var(--ink-soft); }

/* =================================================================
   강조 가치 (value)
   ================================================================= */
.value{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm); position:relative;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.value:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(184,137,58,.35); }
.value__no{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  font-size:18px; font-weight:800; color:var(--gold);
  background:var(--gold-soft); border:1px solid rgba(184,137,58,.25);
}
.value__title{ margin:0 0 10px; font-size:19px; font-weight:800; color:var(--navy); }
.value__text{ margin:0; color:var(--ink-soft); font-size:15px; }

/* =================================================================
   하단 CTA (finale)
   ================================================================= */
.finale{
  position:relative; text-align:center; overflow:hidden;
  background:linear-gradient(135deg,#0f1f3d 0%,#1a2c4e 100%);
  color:#fff; border-top:1px solid var(--line);
}
.finale__inner{ padding:80px 24px; }
.finale__title{
  margin:0 auto; max-width:24ch; font-weight:800;
  font-size:clamp(24px,4.4vw,40px); line-height:1.3; letter-spacing:-.02em; color:#fff;
}
.finale__title em{ background:linear-gradient(135deg,#f3d98a,#caa24a);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.finale__lead{ margin:20px auto 0; max-width:62ch; color:#c4cdda;
  font-size:clamp(15px,2.3vw,17px); }
.finale__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
.finale .btn{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }
.finale .btn:hover{ border-color:var(--gold-2); }
.finale .btn--primary{ background:var(--gold-grad); border-color:transparent; color:#fff; }

/* =================================================================
   면책 조항
   ================================================================= */
.legal{ background:var(--bg); }
.legal__inner{ padding:46px 24px 120px; text-align:center; }
.legal__title{ margin:0 0 14px; font-size:14px; font-weight:800; letter-spacing:.04em; color:var(--gold); }
.legal__body{ margin:0 auto; max-width:780px; font-size:13px; line-height:1.9; color:var(--ink-dim); }
.legal__copy{ margin:22px 0 0; font-size:12px; color:var(--ink-dim); letter-spacing:.06em; }

/* =================================================================
   모바일 하단 도크
   ================================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; gap:8px; padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(15,31,61,.5);
}
.dock .btn{ flex:1; justify-content:center; padding:12px 4px; font-size:12.5px;
  gap:4px; white-space:normal; line-height:1.25; text-align:center; }
.dock .btn .btn__ico{ display:none; }
.dock .btn .btn__txt{ font-size:12.5px; }

/* =================================================================
   실전 데이터 뷰어 (라이트박스) — 어두운 테마 그대로 유지
   ================================================================= */
.viewer{
  position:fixed; inset:0; z-index:100;
  background:rgba(4,4,7,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease);
}
.viewer.is-open{ opacity:1; visibility:visible; }

.viewer__topbar{
  position:relative; z-index:3; flex:none;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 16px; padding-top:env(safe-area-inset-top);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.viewer__title{ font-weight:700; color:#f3d98a; letter-spacing:.02em; }
.viewer__count{ font-size:13px; color:#b7b2a6; font-variant-numeric:tabular-nums; }
.viewer__close{
  margin-left:auto; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#f4f1e9; font-size:26px; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.viewer__close:hover{ border-color:#caa24a; color:#caa24a; }

.viewer__track{
  position:relative; z-index:1; flex:1; display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none;
}
.viewer__track::-webkit-scrollbar{ display:none; }
.viewer__track.is-locked{ overflow:hidden; touch-action:none; scroll-snap-type:none; }
.vslide{
  flex:0 0 100%; width:100%; min-width:100%; height:100%;
  scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.vslide img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; user-select:none; -webkit-user-drag:none; will-change:transform;
}
.viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:rgba(12,12,20,.7);
  color:#f4f1e9; font-size:30px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s,color .2s,background .2s;
}
.viewer__nav:hover{ border-color:#caa24a; color:#caa24a; }
.viewer__nav--prev{ left:18px; }
.viewer__nav--next{ right:18px; }
.viewer__nav[disabled]{ opacity:.25; pointer-events:none; }

.viewer__dots{
  position:absolute; left:0; right:0; bottom:46px; z-index:3;
  display:flex; gap:7px; justify-content:center; flex-wrap:wrap;
  padding:0 16px; pointer-events:none;
}
.viewer__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25);
  transition:background .2s,width .2s; }
.viewer__dots i.on{ width:20px; border-radius:4px; background:#caa24a; }

.viewer__hint{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  margin:0; text-align:center; font-size:12px; color:#8b95a4;
  transition:opacity .4s; pointer-events:none;
}
.viewer__hint.is-hidden{ opacity:0; }

/* =================================================================
   스크롤 등장 애니메이션
   ================================================================= */
.reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms); }
.reveal.is-in{ opacity:1; transform:none; }

/* =================================================================
   반응형
   ================================================================= */
@media (max-width:900px){
  .grid--3{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .duo{ grid-template-columns:1fr; }
  .fit{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .topbar__cta{ display:none; }
  .dock{ display:flex; }
  .legal__inner{ padding-bottom:100px; }
  .hero__inner{ padding:60px 24px 56px; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .sec{ padding:56px 0; }
  .viewer__nav{ display:none; }
  .banner{ flex-direction:column; align-items:stretch; text-align:center; }
  .banner .btn{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}