/* MERGE CONTRACT 20261007: pair this file with feature-shortcuts.js and the
 * complete #homepage-feature-shortcuts[data-feature-shortcuts] markup. Keep
 * all 34 cards in DOM order, the heading ID, real feature links and controls.
 * The supplied HeroCarousel's measured filmstrip becomes
 * icon/title/description cards here; the clipped filmstrip area owns wheel
 * scrolling, including card gaps. Leaving that area releases it immediately.
 * C BLUE FOCUS: stepped side cards overlap behind the blue center. Large
 * center icon sits in a white badge above its top edge; no visible numbers.
 * LOOP REVISION: JS positions the same34 nodes in circular slots. Keep the
 * recycling rule below so the offscreen end card never flies across the stage.
 * A subtle .65px /1.35px side blur clears as a card moves into the center.
 * Without JavaScript, and for reduced motion, every feature remains a grid.
 */
[data-feature-shortcuts] {
  --shortcuts-blue:#146eeb;
  --shortcuts-ink:#123764;
  --shortcuts-muted:#647995;
  --shortcuts-line:#dce7f7;
  --shortcuts-ease:cubic-bezier(.22,.8,.2,1);
  position:relative;
  width:100%;
  min-height:min(80svh,720px);
  margin:0 auto;
  padding:clamp(64px,6vw,100px) 0 70px;
  color:var(--shortcuts-ink);
  background:#fff;
  scroll-margin-top:110px;
  overflow:clip;
}
[data-feature-shortcuts] *,
[data-feature-shortcuts] *::before,
[data-feature-shortcuts] *::after { box-sizing:border-box; }
[data-feature-shortcuts] h2,
[data-feature-shortcuts] h3,
[data-feature-shortcuts] p { margin:0; }
[data-feature-shortcuts] button,
[data-feature-shortcuts] a { font:inherit; }
[data-feature-shortcuts] button { cursor:pointer; }
[data-feature-shortcuts] .feature-shortcuts-heading {
  width:min(1200px,calc(100% - 80px));
  margin:0 auto 44px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
}
/* MERGE20261007 ICON-ABOVE: the supplied logo + magnifier sits above the
 * heading, centered. Keep it separate from the34 numbered feature icons.
 * Restore the preceding C CSS/JS movement; do not reintroduce WAAPI overrides. */
[data-feature-shortcuts] .feature-shortcuts-heading-icon {
  display:block;
  flex:0 0 auto;
  width:132px;
  height:132px;
  object-fit:contain;
}
[data-feature-shortcuts] .feature-shortcuts-heading h2 { min-width:0; width:100%; }
[data-feature-shortcuts] .feature-shortcuts-eyebrow {
  display:block;
  margin-bottom:15px;
  color:var(--shortcuts-blue);
  font-size:16px;
  font-weight:700;
  letter-spacing:.14em;
}
[data-feature-shortcuts] .feature-shortcuts-heading h2 {
  font-family:var(--hero-font,sans-serif);
  font-size:clamp(60px,6vw,96px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.045em;
  word-break:keep-all;
}
[data-feature-shortcuts] .feature-shortcuts-description {
  margin-top:17px;
  color:var(--shortcuts-muted);
  font-size:20px;
  line-height:1.7;
  word-break:keep-all;
}
[data-feature-shortcuts] .feature-shortcuts-stage {
  position:relative;
  width:min(1680px,100%);
  margin:0 auto;
  padding:4px 40px;
  overflow:visible;
  touch-action:pan-y pinch-zoom;
  outline-offset:-4px;
}
[data-feature-shortcuts] .feature-shortcuts-track {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  width:100%;
}
[data-feature-shortcuts] .feature-shortcut-card {
  position:relative;
  min-width:0;
  min-height:260px;
  margin:0;
  border:1px solid var(--shortcuts-line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
[data-feature-shortcuts] .feature-shortcut-focus {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  height:100%;
  min-height:260px;
  padding:28px;
  border:0;
  border-radius:inherit;
  color:inherit;
  background:none;
  text-align:left;
  appearance:none;
}
[data-feature-shortcuts] .feature-shortcut-card.has-feature-link .feature-shortcut-focus,
[data-feature-shortcuts] .feature-shortcut-card:has(.feature-shortcut-link) .feature-shortcut-focus { padding-bottom:78px; }
[data-feature-shortcuts] .feature-shortcut-title-row {
  display:flex;
  align-items:flex-start;
  flex:0 0 auto;
  gap:14px;
  width:100%;
  min-width:0;
}
[data-feature-shortcuts] .feature-shortcut-icon-badge { display:block; flex:0 0 auto; }
[data-feature-shortcuts] .feature-shortcut-icon {
  display:block;
  flex:0 0 auto;
  width:46px;
  height:46px;
  object-fit:contain;
  pointer-events:none;
}
[data-feature-shortcuts] .feature-shortcut-focus h3 {
  flex:1 1 auto;
  min-width:0;
  font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:27px;
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.045em;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
[data-feature-shortcuts] .feature-shortcut-focus p {
  margin-top:18px;
  color:var(--shortcuts-muted);
  font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:-.015em;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
[data-feature-shortcuts] .feature-shortcut-badge {
  display:inline-block;
  flex:0 0 auto;
  align-self:flex-start;
  margin-top:12px;
  padding:4px 8px;
  border-radius:5px;
  color:var(--shortcuts-blue);
  background:#e8f1ff;
  font-family:Arial,"Apple SD Gothic Neo",sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
}
[data-feature-shortcuts] .feature-shortcut-link {
  position:absolute;
  bottom:26px;
  left:28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:calc(100% - 48px);
  color:var(--shortcuts-blue);
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
}
[data-feature-shortcuts] .feature-shortcut-link:hover { text-decoration:underline; text-underline-offset:4px; }
[data-feature-shortcuts] .feature-shortcuts-controls {
  display:none;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:min(600px,calc(100% - 48px));
  margin:20px auto 0;
}
[data-feature-shortcuts] .feature-shortcuts-prev,
[data-feature-shortcuts] .feature-shortcuts-next {
  display:grid;
  place-items:center;
  flex:0 0 52px;
  width:52px;
  height:52px;
  padding:12px;
  border:1px solid #c8daf2;
  border-radius:50%;
  color:var(--shortcuts-blue);
  background:#fff;
  font-size:24px;
  line-height:1;
  transition:background 180ms ease,opacity 180ms ease;
}
[data-feature-shortcuts] .feature-shortcuts-prev svg,
[data-feature-shortcuts] .feature-shortcuts-next svg { display:block; width:24px; height:24px; }
[data-feature-shortcuts] .feature-shortcuts-prev:hover,
[data-feature-shortcuts] .feature-shortcuts-next:hover { background:#edf4ff; }
[data-feature-shortcuts] .feature-shortcuts-prev:disabled,
[data-feature-shortcuts] .feature-shortcuts-next:disabled { opacity:.35; cursor:default; }
[data-feature-shortcuts] .feature-shortcuts-progress { position:relative; flex:0 1 210px; min-width:144px; }
[data-feature-shortcuts] [data-feature-count] {
  display:block;
  margin-bottom:10px;
  color:var(--shortcuts-muted);
  font-family:Arial,"Apple SD Gothic Neo",sans-serif;
  font-size:15px;
  line-height:1;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
[data-feature-shortcuts] [data-feature-count].feature-shortcuts-count-visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}
[data-feature-shortcuts] .feature-shortcuts-rail { position:relative; height:3px; overflow:hidden; background:#e0eafa; }
[data-feature-shortcuts] [data-feature-rail] {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  background:var(--shortcuts-blue);
  transition:transform 700ms var(--shortcuts-ease);
}
[data-feature-shortcuts] .feature-shortcuts-hint {
  margin:20px 24px 0;
  color:#7a8da8;
  font-family:Arial,"Apple SD Gothic Neo",sans-serif;
  font-size:16px;
  line-height:1.6;
  text-align:center;
  word-break:keep-all;
}
[data-feature-shortcuts] button:focus-visible,
[data-feature-shortcuts] a:focus-visible,
[data-feature-shortcuts] .feature-shortcuts-stage:focus-visible { outline:3px solid #72adff; outline-offset:3px; }
[data-feature-shortcuts] .feature-shortcut-focus:focus-visible { outline-offset:-5px; }

/* C BLUE FOCUS 20261007. This is the selected C appearance, not a new
 * carousel. The 44px stage bleed protects the badge while the same wheel area
 * stays clipped horizontally and excludes moving cards from scroll anchoring.
 * Match these --shortcut-* variables with layout() in feature-shortcuts.js. */
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcuts-stage {
  height:var(--shortcuts-stage-height,542px);
  padding:0;
  overflow:hidden;
  overflow-anchor:none;
  cursor:grab;
  user-select:none;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 700ms var(--shortcuts-ease),transform 700ms var(--shortcuts-ease);
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcuts-heading {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 620ms var(--shortcuts-ease),transform 620ms var(--shortcuts-ease);
}
[data-feature-shortcuts].is-shortcuts-ready.is-shortcuts-revealed .feature-shortcuts-heading,
[data-feature-shortcuts].is-shortcuts-ready.is-shortcuts-revealed .feature-shortcuts-stage { opacity:1; transform:none; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcuts-track {
  display:block;
  position:relative;
  width:var(--shortcuts-track-width,100%);
  height:100%;
  transform:translate3d(var(--shortcuts-track-x,0px),0,0);
  transition:transform 700ms var(--shortcuts-ease);
  will-change:transform;
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card {
  position:absolute;
  top:0;
  left:0;
  z-index:var(--shortcut-z,1);
  width:var(--shortcut-width,300px);
  height:var(--shortcut-height,340px);
  min-height:0;
  border-radius:24px;
  border-color:#c4d6ef;
  overflow:visible;
  opacity:var(--shortcut-opacity,0);
  pointer-events:var(--shortcut-events,none);
  transform:translate3d(var(--shortcut-x,0px),var(--shortcut-y,165px),0);
  filter:blur(var(--shortcut-blur,0px));
  transition:transform 700ms var(--shortcuts-ease),width 700ms var(--shortcuts-ease),height 700ms var(--shortcuts-ease),filter 700ms var(--shortcuts-ease),opacity 700ms var(--shortcuts-ease),border-color 500ms ease,background 500ms ease;
}
[data-feature-shortcuts] .feature-shortcut-card.is-shortcut-recycling { transition:none!important; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-focus {
  min-height:0;
  padding:var(--shortcut-top,112px) var(--shortcut-right,30px) 30px var(--shortcut-left,30px);
  cursor:inherit;
  transition:padding 700ms var(--shortcuts-ease),color 500ms ease;
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.has-feature-link .feature-shortcut-focus { padding-bottom:var(--shortcut-link-space,66px); }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-title-row { display:block; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-icon-badge {
  position:absolute;
  top:var(--shortcut-icon-top,28px);
  left:var(--shortcut-left,30px);
  display:grid;
  place-items:center;
  width:var(--shortcut-icon-size,66px);
  height:var(--shortcut-icon-size,66px);
  padding:0;
  border:2px solid transparent;
  border-radius:28px;
  background:transparent;
  transition:top 700ms var(--shortcuts-ease),left 700ms var(--shortcuts-ease),width 700ms var(--shortcuts-ease),height 700ms var(--shortcuts-ease),padding 700ms var(--shortcuts-ease),background 500ms ease,border-color 500ms ease;
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-icon { width:100%; height:100%; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-focus h3 {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:var(--shortcut-title-size,30px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.055em;
  transition:font-size 700ms var(--shortcuts-ease);
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-focus p {
  display:-webkit-box;
  flex:0 1 auto;
  min-height:0;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  margin-top:var(--shortcut-copy-gap,22px);
  font-size:var(--shortcut-copy-size,18px);
  line-height:1.6;
  transition:font-size 700ms var(--shortcuts-ease),color 500ms ease;
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-neighbor { background:#f4f8fe; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-active {
  border-color:var(--shortcuts-blue);
  background:var(--shortcuts-blue);
  color:#fff;
}
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-active .feature-shortcut-icon-badge { padding:6px; border-color:var(--shortcuts-blue); background:#fff; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-active h3 { display:block; overflow:visible; font-family:var(--hero-font,sans-serif); font-weight:400; line-height:1.08; -webkit-line-clamp:unset; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-active p { display:block; flex:0 0 auto; overflow:visible; color:#e1eeff; line-height:1.55; -webkit-line-clamp:unset; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-link { bottom:32px; left:var(--shortcut-left,30px); font-size:var(--shortcut-link-size,16px); transition:left 700ms var(--shortcuts-ease),font-size 700ms var(--shortcuts-ease),color 500ms ease; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-active .feature-shortcut-link { color:#fff; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcut-card.is-active .feature-shortcut-badge { color:#fff; background:#3485f0; }
[data-feature-shortcuts].is-shortcuts-ready:not(.is-shortcuts-static) .feature-shortcuts-controls { display:flex; }
[data-feature-shortcuts].is-shortcuts-dragging .feature-shortcuts-stage { cursor:grabbing!important; }
[data-feature-shortcuts].is-shortcuts-dragging .feature-shortcuts-track,
[data-feature-shortcuts].is-shortcuts-dragging .feature-shortcut-card,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcuts-track,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-card,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-focus,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-focus h3,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-focus p,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-title-row,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-icon-badge,
[data-feature-shortcuts].is-shortcuts-resizing .feature-shortcut-link { transition:none!important; }

/* MERGE20261007 SPRING FLOW. Keep the previous C endpoint CSS above for
 * measurement/static fallback. The live spring paints fixed text planes,
 * one icon and one card surface from the SAME fractional focus, not multiple
 * CSS clocks. Do not add font-size/width transitions to these painted planes.
 * The original button and optional official link remain the only hit targets. */
[data-feature-shortcuts] .feature-shortcut-paint { display:none; }
[data-feature-shortcuts].is-shortcuts-measuring .feature-shortcuts-track,
[data-feature-shortcuts].is-shortcuts-measuring .feature-shortcut-card,
[data-feature-shortcuts].is-shortcuts-measuring .feature-shortcut-card * { transition:none!important; }
[data-feature-shortcuts].is-shortcuts-measuring .feature-shortcuts-track { transform:none!important; }
[data-feature-shortcuts].is-shortcuts-spring:not(.is-shortcuts-static) .feature-shortcuts-track {
  width:100%; transform:none; transition:none; will-change:auto;
}
[data-feature-shortcuts].is-shortcuts-spring:not(.is-shortcuts-static) .feature-shortcut-card {
  width:var(--motion-width,350px); height:490px;
  transform:translate3d(var(--motion-x,0px),var(--motion-y,44px),0);
  border:0!important; background:transparent!important; color:inherit;
  opacity:var(--motion-opacity,0); z-index:var(--motion-z,1);
  filter:blur(var(--motion-blur,0px)); pointer-events:var(--motion-events,none);
  transition:none; will-change:transform;
}
[data-feature-shortcuts].is-shortcuts-spring:not(.is-shortcuts-static) .feature-shortcut-card > .feature-shortcut-focus {
  position:absolute; top:0; left:0; width:var(--motion-hit-width,350px); height:var(--motion-hit-height,490px); opacity:0;
  padding:0; transition:none;
}
[data-feature-shortcuts].is-shortcuts-spring:not(.is-shortcuts-static) .feature-shortcut-card > .feature-shortcut-link {
  opacity:0; left:var(--motion-link-x,30px); top:var(--motion-link-y,431px); bottom:auto;
  width:var(--motion-link-w,auto); height:var(--motion-link-h,auto); max-width:none;
  font-size:var(--motion-link-font,19px);
  transition:none; z-index:2;
}
[data-feature-shortcuts].is-shortcuts-spring:not(.is-shortcuts-static) .feature-shortcut-paint {
  display:block; position:absolute; inset:0; pointer-events:none; overflow:visible;
}
[data-feature-shortcuts] .feature-shortcut-surface {
  position:absolute; inset:0; border:1px solid #c4d6ef; border-radius:24px;
  transform-origin:0 0; background:#fff;
}
[data-feature-shortcuts] .feature-shortcut-painted-icon {
  position:absolute; left:0; top:0; display:grid; place-items:center;
  border:2px solid transparent; border-radius:28px; box-sizing:border-box;
  transform-origin:0 0;
}
[data-feature-shortcuts] .feature-shortcut-painted-icon img { display:block; width:100%; height:100%; object-fit:contain; }
[data-feature-shortcuts] .feature-shortcut-text-plane { position:absolute; inset:0; pointer-events:none; }
[data-feature-shortcuts] .feature-shortcut-frozen-text { pointer-events:none; }
[data-feature-shortcuts].is-shortcuts-spring .feature-shortcut-card:has(:focus-visible) .feature-shortcut-surface { outline:3px solid #72adff; outline-offset:3px; }

@media(max-width:767px) {
  [data-feature-shortcuts] { min-height:0; padding:64px 0 56px; scroll-margin-top:88px; }
  [data-feature-shortcuts] .feature-shortcuts-heading { width:calc(100% - 40px); margin-bottom:24px; gap:12px; }
  [data-feature-shortcuts] .feature-shortcuts-heading-icon { width:84px; height:84px; }
  [data-feature-shortcuts] .feature-shortcuts-heading h2 { font-size:clamp(38px,9.3vw,54px); }
  [data-feature-shortcuts] .feature-shortcuts-stage { padding:4px 20px; }
  [data-feature-shortcuts] .feature-shortcuts-track { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
  /* Keep both arrow hit areas clear of the fixed back-to-top button. */
  [data-feature-shortcuts] .feature-shortcuts-controls { width:168px; margin-top:14px; gap:12px; }
  [data-feature-shortcuts] .feature-shortcuts-progress { flex:0 0 40px; min-width:40px; }
  [data-feature-shortcuts] .feature-shortcuts-hint { margin-top:17px; }
}
@media(max-width:360px) {
  [data-feature-shortcuts] .feature-shortcuts-heading { gap:10px; }
  [data-feature-shortcuts] .feature-shortcuts-heading-icon { width:84px; height:84px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-feature-shortcuts] *,
  [data-feature-shortcuts] *::before,
  [data-feature-shortcuts] *::after { transition:none!important; animation:none!important; }
  [data-feature-shortcuts] .feature-shortcuts-heading,
  [data-feature-shortcuts] .feature-shortcuts-stage { opacity:1!important; transform:none!important; }
}