/* 하이세모 section (hisemo-section.js) — charcoal, faint grid, typed title. */
.hs-layer {
  position: fixed; inset: 0; z-index: 6; overflow: hidden; visibility: hidden;
  background: #343434; color: #fff; pointer-events: none;
  font-family: 'Pretendard', sans-serif; letter-spacing: -.03em; will-change: transform, opacity;
}
.hs-layer[data-visible] { visibility: visible; }
.hs-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 160px 160px; background-position: center center;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%);
}
.hs-title {
  position: absolute; left: 50%; top: calc(50% + var(--hs-pan, 0px)); margin: 0; transform-origin: 50% 50%;
  font-size: clamp(18px, min(6vw, 6.1vh), 64px); /* 다른 큰 제목(styles.css --hero-font-size)과 같은 식 */ font-weight: 600; line-height: 1.3; letter-spacing: -.03em;
  text-align: center; white-space: nowrap;
}
.hs-line { display: block; }
.hs-ch { position: relative; color: rgba(255, 255, 255, .12); transition: color 120ms; }
.hs-ch.is-typed { color: #fff; }
.hs-ch.is-accent.is-typed { color: #b98cff; }
.hs-ch.is-caret::after, .hs-title.is-caret-start .hs-ch[data-i="0"]::before {
  content: ''; position: absolute; top: .12em; bottom: .02em; width: .06em; border-radius: 2px;
  background: #9b5cff; animation: hs-caret 1s steps(2) infinite;
}
.hs-ch.is-caret::after { right: -.06em; }
.hs-title.is-caret-start .hs-ch[data-i="0"]::before { left: -.08em; }
@keyframes hs-caret { 0% { opacity: 1; } 100% { opacity: 0; } }
.hs-float {
  position: absolute; left: calc(50% - min(40vw, 640px)); top: calc(50% - 20px); width: 170px; height: 118px;
  border-radius: 14px; background: linear-gradient(150deg, #4a4a4a, #3c3c3c); border: 1px solid rgba(255, 255, 255, .1);
  display: grid; place-items: center; font-size: 12px; color: rgba(255, 255, 255, .55); opacity: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
.hs-sub {
  position: absolute; left: 50%; top: 0; margin: var(--hs-pan, 0px) 0 0; width: max-content;
  font-size: 18px; font-weight: 300; line-height: 1.6; text-align: center; color: rgba(255, 255, 255, .68); opacity: 0;
}
/* Reference screens: 3 × 2, loosely scattered, no captions. */
.hs-cards { position: absolute; left: 50%; top: 0; width: 1320px; height: 1000px; margin-top: var(--hs-pan, 0px); transform: translateX(-50%); }
.hs-screen {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 25 / 24;
  border-radius: 10px; overflow: hidden; opacity: 0;
  background: #3e3e3e; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
}
.hs-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .9s ease;
}
.hs-screen img.is-on { opacity: 1; }
@media (max-width: 760px) { .hs-layer { display: none; } }

.hs-title, .hs-sub, .hs-cta, .hs-cards { filter: opacity(var(--hs-content, 1)); }
.hs-cta {
  position: absolute; left: 50%; top: 0; margin: var(--hs-pan, 0px) 0 0; opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 20px; border-radius: 22px;
  background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap;
  backdrop-filter: blur(8px); transition: background 180ms;
}
.hs-cta svg { width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: #f2f4f6; color: #191f28; }
.hs-cta[data-active] { pointer-events: auto; }
.hs-cta:hover { background: rgba(255, 255, 255, .18); }

/* Shared scrolling sky (same gradient as .map-sky-fill in styles.css). */
.hs-sky {
  position: absolute; left: 0; top: 0; width: 100%; height: 600vh; will-change: transform;
  transform: translateY(var(--sky-y, 0px));
  background: linear-gradient(180deg,
    #343434 0%, #343434 13%, #2b2b38 20%, #1e1f38 27%, #151832 34%,
    #1b2046 41%, #283061 48%, #3d4277 55%, #5b5a8c 62%, #7f78a3 68%,
    #a198bd 72.5%, #c4bbd9 77%, #e4ddf2 80.5%, #f8f6fc 83.33%, #f3eefc 92%, #ebe1fc 100%);
}