/* ------------------------------------------------------------
   엔터시스템 · 4화면 구조 (소개 / 도입 업종 / 절차와 지원 / 질문과 상담)
   검정 바탕, 마젠타 포인트. 글 대신 아이콘과 도식으로 설명.
   입력이 필요한 자리는 .todo 로 표시
   ------------------------------------------------------------ */
:root {
  --black: #000;
  --panel: #101012;
  --card: #161618;
  --line: #262628;
  --white: #fff;
  --gray: #9a9a9a;
  --gray-2: #cfcfcf;
  --magenta: #c2187a;
  --magenta-light: #ff3fa4;
  --ink: #15151a;
  --ink-2: #4a4a52;

  --font: "Wanted Sans Variable", "Wanted Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --t-fine: .8125rem;
  --t-body: 1.0625rem;
  --t-lead: 1.2rem;
  --t-h3: 1.25rem;
  --t-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-display: clamp(2.1rem, 1.2rem + 3.1vw, 3.5rem);
  --wrap: 75rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --nav-h: 4.25rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* 누르는 요소: 탭 지연 없이 바로 반응, 길게 눌러도 글자가 선택되지 않음 */
.btn, .nav__menu a, .nav__toggle, .nav__logo, .pager__dot, .way, .blog, .more, .footer__top, .faq summary, .biz li { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html { font-size: clamp(16px, 8.76px + 0.517vw, 22px); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
/* 데스크톱: 화면이 높으면 높이에도 맞춰 키움 (한 페이지 = 약 45rem 이 화면 높이의 90%) */
@media (min-width: 901px) { html { font-size: clamp(16px, max(8.76px + 0.517vw, 2vh), 26px); } }
body { margin: 0; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); overscroll-behavior-y: none; background: var(--black); color: var(--white); font-family: var(--font); font-size: var(--t-body); line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
figure { margin: 0; }
img { max-width: 100%; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 본문 바로가기: 키보드(Tab)로 이동할 때만 보임. 마우스 클릭·터치로는 나타나지 않음 */
.skip { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 100; padding: 0.5rem 0.875rem; background: var(--magenta); color: #fff; border-radius: 0.375rem; transform: translateY(calc(-100% - 1rem)); }
.skip:focus-visible { transform: none; }
:focus-visible { outline: 0.1875rem solid var(--magenta-light); outline-offset: 0.1875rem; }

/* 입력 필요 자리 */
.todo { color: var(--gray); border: 1.5px dashed #444; border-radius: 0.5rem; padding: 2px 0.625rem; font-weight: 500; }

/* 첫 화면 배지 */
.badge { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.125rem 0 0; padding: 0.5rem 0.875rem 0.5rem 0.75rem; border: 1px solid rgba(255,63,164,.45); border-radius: 999px; background: rgba(194,24,122,.14); font-size: .9375rem; font-weight: 600; }
.badge .ic { width: 1.125rem; height: 1.125rem; }
@media (max-width: 900px) { .badge { margin-top: 0.75rem; font-size: .875rem; } }

/* 필수 항목 표시 */
.req { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--magenta-light); vertical-align: 1px; }

/* 오른쪽 점 표시기 */
.pager { position: fixed; right: max(0.875rem, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 0.375rem; }
.pager__dot { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; text-decoration: none; }
.pager__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #555; transition: background .2s, transform .2s; }
.pager__dot.is-active::before { background: var(--magenta-light); transform: scale(1.4); }
.pager__label { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 0.375rem; background: var(--card); border: 1px solid var(--line); color: #fff; font-size: var(--t-fine); font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.pager__dot:focus-visible .pager__label { opacity: 1; }
@media (max-width: 900px) { :root { --gutter: clamp(1.25rem, 5vw, 3rem); } .pager { right: env(safe-area-inset-right, 0px); gap: 2px; } .pager__dot { width: 1.5rem; height: 1.5rem; } .pager__dot::before { width: 0.375rem; height: 0.375rem; } .pager__label { display: none; } }

/* 아이콘 */
.ic { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--magenta-light); }
.ic--lg { width: 2.5rem; height: 2.5rem; stroke-width: 1.6; }

/* 타이포 */
.display { font-size: var(--t-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.03em; max-width: 24ch; margin-bottom: clamp(1rem, 3vh, 1.75rem); }
.h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--gray-2); max-width: 40ch; margin-top: 1.375rem; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.625rem; font: inherit; font-weight: 700; text-decoration: none; border-radius: 0.5rem; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--magenta); color: #fff; }
.btn--wide { width: 100%; }

/* 내비게이션 */
.nav { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: rgba(0,0,0,.94); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 1.5rem; }
.nav__logo { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }
.nav__logo svg { width: auto; height: 1.75rem; }
@font-face { font-family: "EnterBox Wordmark"; src: url(data:font/woff2;base64,d09GMgABAAAAAAPUABAAAAAABpgAAAN9AAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbdBwqBmAAVBEICoYchSkBNgIkAxgLDgAEIAUGByAXJBgOGwAFUZTtySrAzwTTbR7S6HRCtNblVBSD6pmXkP0ofDce+t+PdmfeX5WoAmkTbsktiTdCEY2WqiVOp2tUaez///P8bgq9Ru9WX1I6UtoRlFXPSZYf8nLgFQzYgIMEbB6Ex0vAuOT5v5ze0eDbPKbIgZ7ZfbzRnpbNKdgLKC4LaFLfm0BZHFkBceqJ2nkNx1dpstX5IQTaASFFXEKrCfNyw6Ydu3HnTly7gFPBH2Ps7JkrF1hAeJXUhmZpAJ4Ji6WCVqgHICTuxQgEVgh5rnXKDOaZe5yuckk+ZSRv5Upge75OHJUd7xkb4bl2HtiyWaR1rzJ1yxaWAZSd6QMCYjAeACMKEhP6FQFbWQO0a5Yq6xxw8uWLp5m9zSMfqV/U9bW2LDP9JUQvBlHL1t4I2lcixgObmIEqzxf5Vr/rYGRZwZ6X7OLtaWFEvc7olRuEaC9B4l3wwuYj2jijjNlsKgA/wMnqq1eR168FzstZ/8Kn3WCU64Fc5a7VqWN9bn8zo7h8TXNgnGhOuZFoqJ2oRuGiY0UDsBpcHLGpLNuBRxu2IOUxhlEwUME7Xpz/6Daj3HlMtJdhzYRozQyjtI8naKOwcteWUQCjJJwRUeI6s4ejJ6KksPHiaMsZdcRPWWCUG4qVFgCNkLkhGSv34trSlDJ+PEreb39obagrOCd4Y2FNaWrG/zW1RXO95VWLJcew293slHi+kudGC2gBx+XTAp5P42HWmuJNSJbS0pNrvfEpqVJ8Um16WpIkJaQsidgdGbUjIjwQFanCLvGSKDyslfwmi1xX18GKbyhOFlTKQ5WXXzmJNGzvqJVli8nPizwUBK9Jr5dIeRaTXCrt+AWfx3yKEm6k93ikY53z8jPjnsxLiJ/7JC5zfkGniihOCiHGbCYSE7BvJz2BYoBWcBbHbnpMxGN0IHhJWNRb9Jd2o9VYLaJDwqcbPf+c7nee5V+5nf+gobCY0P9h0WFNdLuI2+gOoddqJR9smx0yL8iOzeSRlbM/5vaKR5EeZT4k4w6KAdzldoWiTPkEVyh3lo00LotC9CEHQCB5+KTq3LGu0r8Wygd4Xbr6G+D133K+zkKu4Ut+FholCMrO/2MA1T/GEuH+VY2539Y4IS1OccRyrXldTA6YF2j0E4LdYNYGKoxsVDZUVzbvj27x53Y+XFvWa/xmMPE59pUP7hgMzqpuSQQAAAA=) format("woff2"); font-display: block; }
/* 회사명: 동글 Bold, Box는 로고 큐브의 빨간 타일과 같은 색 (OFL 글꼴, 다섯 글자만 포함) */
.wordmark { font-family: "EnterBox Wordmark", var(--font); font-weight: 400; letter-spacing: 0; }
.wordmark b { font-weight: 400; color: #e3141f; }
.nav__logo .wordmark { font-size: 1.875rem; line-height: 1; transform: translateY(0.125rem); }
.nav__menu { display: flex; align-items: center; gap: 1.75rem; }
.nav__menu a { text-decoration: none; font-weight: 500; color: var(--gray-2); transition: color 150ms ease, box-shadow 150ms ease; }
.nav__menu a.is-active { color: #fff; box-shadow: inset 0 -2px 0 var(--magenta-light); }
.nav__ext { color: var(--gray); font-size: .9375rem; }
.nav__ext::after { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-left: 0.4375rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.nav__ext--first { margin-left: 0.5rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.nav__toggle { display: none; width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer; position: relative; }
.nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after { content: ""; position: absolute; left: 0.625rem; width: 1.5rem; height: 2px; background: #fff; transition: transform .2s, top .2s; }
.nav__toggle-bar { top: 1.3125rem; }
.nav__toggle-bar::before { left: 0; top: -8px; }
.nav__toggle-bar::after { left: 0; top: 0.5rem; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #000; border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1.25rem; opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease-out, transform 180ms var(--ease-out), display 180ms allow-discrete; }
  .nav__menu.is-open { display: flex; opacity: 1; transform: none; }
  @starting-style { .nav__menu.is-open { opacity: 0; transform: translateY(-4px); } }
  .nav__menu a { padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
  .nav__menu a.is-active { box-shadow: inset 0.1875rem 0 0 var(--magenta-light); padding-left: 0.75rem; }
  .nav__ext--first { margin: 0; padding-left: 0; border-left: 0; }
}

/* 한 화면에 한 페이지 (페이지 이동은 스크립트가 휠·스와이프를 받아 처리) */
.page { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; }

/* 섹션 공통 */
.section { padding: clamp(2rem, 4vh, 3.5rem) 0; }
.section--panel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--panel + .section--panel { border-top: 0; }

/* 1. 소개 */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #050507; }
.hero__bg { position: absolute; top: 0; bottom: 0; left: 10%; width: 100%; height: 100%; object-fit: cover; object-position: left center; z-index: -2; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(5,5,7,.96) 0%, rgba(5,5,7,.9) 34%, rgba(5,5,7,.45) 52%, rgba(5,5,7,0) 70%),
  linear-gradient(0deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.55) 24%, rgba(5,5,7,0) 48%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(1.5rem, 5vh, 4rem) 0 clamp(1rem, 3vh, 2rem); }
.hero__copy { max-width: 43.75rem; }
.hero .flow__node { background: rgba(22,22,24,.82); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); }
@media (max-width: 900px) {
  .hero__bg { left: 0; object-position: 66% 20%; }
  .hero__shade { background:
    linear-gradient(0deg, rgba(5,5,7,.97) 0%, rgba(5,5,7,.9) 40%, rgba(5,5,7,.3) 62%, rgba(5,5,7,0) 78%),
    linear-gradient(180deg, rgba(5,5,7,.95) 0%, rgba(5,5,7,.8) 20%, rgba(5,5,7,.25) 36%, rgba(5,5,7,0) 46%); }
  .hero.page { align-content: space-between; }
}

/* 도식: 엔터시스템 → 셋톱박스 → 객실 TV */
.flow { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 2.75rem; padding: 0 0 clamp(1.5rem, 4vh, 3rem); }
.flow__node { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.125rem 1.375rem; display: grid; align-content: start; gap: 0.5rem; }
.flow__node strong { font-size: 1.0625rem; }
.flow__node > span { color: var(--gray); font-size: .9375rem; }
.flow__node .ic--lg { margin-bottom: 0.375rem; }
.flow__node:not(:last-child)::after { content: ""; position: absolute; right: -28px; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -6px; border-top: 2px solid var(--magenta-light); border-right: 2px solid var(--magenta-light); transform: rotate(45deg); }
.icons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.125rem; margin-top: 0.375rem; }
.icons li { display: flex; align-items: center; gap: 0.625rem; font-size: .9375rem; color: var(--gray-2); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 2.25rem; }
  .flow__node:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -24px; margin: 0 0 0 -6px; transform: rotate(135deg); }
}
@media (max-width: 480px) { .icons { grid-template-columns: 1fr; } }

/* 2. 도입 업종: 왼쪽 업종 목록, 오른쪽 전면 매장 사진 (자동 전환) */
.fit { position: relative; isolation: isolate; overflow: hidden; background: #050507; }
.fit__media { position: absolute; top: 0; bottom: 0; left: 30%; width: 70%; z-index: -2; }
.fit__media .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 800ms ease; }
.fit__media .slide.is-active { opacity: 1; }
.fit__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, #050507 0%, rgba(5,5,7,.9) 14%, rgba(5,5,7,.35) 38%, rgba(5,5,7,0) 60%),
  linear-gradient(0deg, rgba(5,5,7,.7) 0%, rgba(5,5,7,0) 30%); }
.fit__in { padding: clamp(1.25rem, 3vh, 2.5rem) 0; }
.fit__copy { max-width: 28.75rem; }
.fit__sub { margin: -16px 0 1rem; color: var(--gray); font-size: 1rem; }
.biz { display: grid; gap: 0.25rem; position: relative; }
.biz li { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 0.875rem; align-items: center; padding: 0.5rem 0.875rem; border-radius: 0.75rem; transition: opacity 300ms ease; opacity: .5; }
.biz li.is-active { opacity: 1; }
.biz li:not(.biz__hl) { cursor: pointer; }
.biz li:focus-visible { outline: 2px solid var(--magenta-light); outline-offset: 2px; }
.biz li.biz__hl { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; padding: 0; display: block; opacity: 1; pointer-events: none; border-radius: 0.75rem; background: rgba(22,22,24,.85); border: 1px solid rgba(255,63,164,.45); transition: transform 320ms var(--ease-in-out); will-change: transform; }
.biz .ic { grid-row: 1 / 3; width: 1.75rem; height: 1.75rem; }
.biz strong { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.2; }
.biz span { color: var(--gray); font-size: .9375rem; }
.fit__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin: 1rem 0 0; font-size: .9375rem; color: var(--gray-2); }
.fit__need { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem 0.375rem 0.625rem; border: 1px solid var(--line); border-radius: 999px; }
.fit__need .ic { width: 1.125rem; height: 1.125rem; }
.fit__links .more { margin-left: auto; }
.fit__links .todo { font-size: var(--t-fine); margin-left: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .biz li.biz__hl { transition: none; } }
@media (max-width: 900px) {
  .fit.page { align-content: start; }
  .fit__media { position: relative; left: 0; width: 100%; height: 29svh; min-height: 11.25rem; z-index: 0; }
  .fit__shade { background: linear-gradient(0deg, #050507 0%, rgba(5,5,7,.2) 30%, rgba(5,5,7,0) 60%); }
  .fit__in { padding: 0.375rem 0 1rem; }
  .fit__copy { max-width: none; }
  .fit__sub { margin: -8px 0 0.75rem; font-size: .9375rem; }
  .biz { gap: 0.25rem; }
  .biz li { padding: 0.375rem 0.75rem; column-gap: 0.75rem; }
  .biz .ic { width: 1.375rem; height: 1.375rem; }
  .biz strong { font-size: 1.0625rem; }
  .biz span { font-size: .8125rem; }
  .fit__links { margin-top: 0.875rem; font-size: .875rem; }
  .fit__links .more { margin-left: 0; }
}

/* 블로그 링크 */
.blog { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-top: clamp(1rem, 3vh, 1.75rem); padding: 1.125rem 3.5rem 1.125rem 1.375rem; background: var(--card); border: 1.5px solid var(--line); border-radius: 0.75rem; text-decoration: none; color: #fff; position: relative; transition: border-color .15s, transform 160ms var(--ease-out); }
.blog:active { transform: scale(0.98); }
.blog__label { color: var(--gray); font-size: .9375rem; }
.blog strong { font-weight: 700; }
.blog .todo { font-size: var(--t-fine); }
.blog::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 0.625rem; height: 0.625rem; margin-top: -5px; border-top: 2px solid var(--magenta-light); border-right: 2px solid var(--magenta-light); transform: rotate(45deg); }

/* 3. 서비스: 왼쪽 손님·프런트 목록, 오른쪽 TV 홈 화면 그림 */
.svc__in { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 13fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.svc__group + .svc__group { margin-top: clamp(1.125rem, 3vh, 1.875rem); }
.svc__h { margin: 0 0 0.625rem; font-size: 1rem; font-weight: 700; color: var(--gray-2); }
.ott { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ott li { display: flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.ott img { display: block; width: auto; height: 1.3125rem; }
.ott img[height="16"] { height: 1rem; }
/* OTT 상표색: 손님이 보는 것 알약과 회전 카드 상표에 같이 씀 (로고는 흰색) */
.ott .ott--netflix, .pcard__brand.ott--netflix { background: #e50914; border-color: transparent; }
.ott .ott--youtube, .pcard__brand.ott--youtube { background: #ff0000; border-color: transparent; }
.ott .ott--disney, .pcard__brand.ott--disney { background: #0e2fa6; border-color: transparent; }
.ott .ott--tving, .pcard__brand.ott--tving { background: #ff153c; border-color: transparent; }
.ott .ott--wavve, .pcard__brand.ott--wavve { background: #0050ff; border-color: transparent; }
.ott .ott--watcha, .pcard__brand.ott--watcha { background: #ff0558; border-color: transparent; }
.ott .ott--appletv, .pcard__brand.ott--appletv { background: #000; border-color: rgba(255,255,255,.4); }
.ott .ott--filemong, .pcard__brand.ott--filemong { background: #1c1c22; border-color: rgba(255,255,255,.22); }
.svc__note { margin: 0.75rem 0 0; color: var(--gray); font-size: .9375rem; }
.front { display: grid; gap: 0.625rem; }
.front li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; }
.front .ic { grid-row: 1 / 3; }
.front strong { font-size: 1rem; line-height: 1.3; }
.front span { color: var(--gray); font-size: var(--t-fine); }

/* 오른쪽 위: OTT 대표작 카드 12장이 원통처럼 끊김 없이 돌아감 (한 바퀴 36초, 3초마다 한 장이 앞을 지남). 카드는 항상 정면을 봄 */
.orbit { position: relative; height: calc(var(--card-h) + 1.75rem); overflow: hidden; perspective: 75rem; perspective-origin: 50% 50%; --card: min(16.25rem, 20vw); --card-h: calc(var(--card) * 9 / 16); --radius: calc((var(--card) + 1rem) * 2.45); --spin: 42s; }
.orbit__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--radius))) rotateY(0deg); animation: orbit-spin var(--spin) linear infinite; }
@keyframes orbit-spin {
  from { transform: translateZ(calc(-1 * var(--radius))) rotateY(0deg); }
  to { transform: translateZ(calc(-1 * var(--radius))) rotateY(-360deg); }
}
.pcard { position: absolute; left: calc(var(--card) / -2); top: calc(var(--card-h) / -2); width: var(--card); height: var(--card-h); margin: 0; background: #0c0d13; border: 1px solid rgba(255,255,255,.18); border-radius: 0.875rem; overflow: hidden; box-shadow: 0 1rem 1.75rem rgba(0,0,0,.55); --angle: calc(var(--i, 0) * 360deg / 14); transform: rotateY(var(--angle)) translateZ(var(--radius)) rotateY(calc(-1 * var(--angle))); animation: pcturn var(--spin) linear infinite, pcfade var(--spin) linear infinite; animation-delay: 0s, calc(var(--i, 0) * var(--spin) / 14 - var(--spin)); }
@keyframes pcturn {   /* 링이 -360도 도는 동안 카드는 +360도 되돌아 항상 정면 */
  from { transform: rotateY(var(--angle)) translateZ(var(--radius)) rotateY(calc(-1 * var(--angle))); }
  to { transform: rotateY(var(--angle)) translateZ(var(--radius)) rotateY(calc(360deg - var(--angle))); }
}
@keyframes pcfade {   /* 앞을 지나는 동안 밝고, 옆·뒤로 갈수록 흐려짐 */
  0%, 6% { opacity: 1; }
  14%, 86% { opacity: .5; }
  94%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .orbit { --spin: 84s; } }
.orbit.is-idle .orbit__ring, .orbit.is-idle .pcard { animation-play-state: paused; }
.pcard__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__brand { position: absolute; top: 0.625rem; left: 0.625rem; display: flex; align-items: center; height: 1.75rem; padding: 0 0.625rem; border-radius: 999px; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.14); }
.pcard__brand img { display: block; height: 0.875rem; width: auto; }
.pcard figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 2.25rem 0.875rem 0.75rem; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,0) 100%); }
.pcard small { font-size: .6875rem; letter-spacing: .06em; font-weight: 700; color: var(--magenta-light); }
.pcard b { font-size: clamp(1rem, calc(var(--card) * .065), 1.5rem); line-height: 1.25; }
.orbit__credit { margin: 0.5rem 0 0; text-align: center; color: var(--gray); font-size: .75rem; line-height: 1.5; }

/* 오른쪽 아래: 프런트가 받는 요청 3가지, 작은 정사각형 상자 */
.tiles { --tile: 9.5rem; list-style: none; margin: 0.875rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, var(--tile)); gap: 0.75rem; justify-content: center; }
.tile { aspect-ratio: 1; display: flex; flex-direction: column; padding: 0.875rem; background: var(--card); border: 1px solid var(--line); border-radius: 0.875rem; }
.tile__screen { container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 0.5rem; background: #0a0a0e; border: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.scr { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; padding: 4.5cqw; gap: 3.5cqw; color: #ddd; line-height: 1.2; }
.scr__bar { display: flex; gap: 4cqw; align-items: baseline; color: #777; font-size: 4.25cqw; white-space: nowrap; }
.scr__bar i { font-style: normal; }
.scr__bar i.is-on { color: #fff; font-weight: 700; box-shadow: 0 1px 0 var(--magenta-light); }
.scr__bar s { margin-left: auto; text-decoration: none; }
.scr__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; }
.scr__grid--6 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.scr__item { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-items: center; gap: 0.75cqw; padding: 1.5cqw 1.5cqw 2cqw; background: #18181d; border-radius: 3cqw; min-height: 0; min-width: 0; text-align: center; }
.scr__item img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 2cqw; }
.tile .scr__item b { display: block; max-width: 100%; margin: 0; padding: 0; font-size: 3.75cqw; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.scr__item em { font-style: normal; font-size: 3.5cqw; color: #9a9a9a; }
.tile .scr__grid--6 .scr__item b { font-size: 3.25cqw; }
.scr__grid--6 .scr__item em { display: none; }
.scr--chat { align-items: center; text-align: center; }
.scr--chat .scr__bar { align-self: stretch; }
.scr__qr { flex: 1; min-height: 0; display: grid; place-items: center; }
.scr__qr svg { box-sizing: border-box; height: 100%; width: auto; aspect-ratio: 1; padding: 2cqw; background: #fff; border-radius: 2cqw; }
.scr--chat em { font-style: normal; font-size: 4cqw; color: #bbb; }
.tile b { display: block; margin-top: auto; padding-top: 0.5rem; font-size: clamp(1rem, calc(var(--tile) * .105), 1.4rem); line-height: 1.3; }
.tile span { display: block; margin-top: 0.25rem; color: var(--gray); font-size: clamp(var(--t-fine), calc(var(--tile) * .08), 1.0625rem); line-height: 1.4; word-break: keep-all; }

/* 오른쪽 열: 데스크톱에서는 왼쪽 글과 상관없이 페이지 높이를 다 쓰고, 그 안에서 열 너비·높이에 맞춰 카드와 상자를 키움 */
.svc__visual { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
@media (min-width: 901px) {
  .svc.page { align-content: stretch; }
  .svc__in { align-items: stretch; }
  .svc__copy { align-self: center; }
  @supports (width: 1cqw) {
    .svc__visual { container-type: size; --cardw: min(calc((100cqw / 0.97 - 1rem) / 2), calc((100cqh - 5.5rem) / 1.42), 30rem); --cardh: clamp(calc(var(--cardw) * 9 / 16), calc(100cqh - 7.25rem - (2 * var(--cardw) - 0.5rem) / 3), calc(var(--cardw) * 3 / 4)); }   /* 높이가 남으면 카드가 16:9 에서 4:3 까지 높아짐 */
    .orbit { --card: var(--cardw); --card-h: var(--cardh); }
    .tiles { --tile: calc((2 * var(--cardw) - 0.5rem) / 3); }
  }
}
@media (max-width: 900px) {
  .svc.page { align-content: start; }   /* 가운데 띄우지 않고 위에 붙임 */
  .svc__in { grid-template-columns: 1fr; gap: 0.875rem; }
  .svc__visual { order: -1; }
  .orbit { --card: min(9.75rem, calc((100vw - 2 * var(--gutter) - 1rem) / 2)); }
  .orbit__credit-more { display: none; }
  .front span { display: none; }
  .front li { grid-template-columns: auto 1fr; }
  .front .ic { grid-row: auto; }
  .pcard { border-radius: 0.625rem; }
  .pcard__brand { top: 0.375rem; left: 0.375rem; height: 1.375rem; padding: 0 0.5rem; }
  .pcard__brand img { height: 0.6875rem; }
  .pcard figcaption { padding: 1.25rem 0.5rem 0.4375rem; }
  .pcard small { font-size: .5625rem; }
  .pcard b { font-size: .75rem; }
  .orbit__credit { margin-top: 0.25rem; font-size: .6875rem; }
  .tiles { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.5rem; }
  .tile { aspect-ratio: auto; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.75rem; align-content: center; padding: 0.5rem 0.625rem 0.5rem 0.5rem; border-radius: 0.625rem; }
  .tile__screen { grid-row: 1 / 3; }
  .tile b { margin-top: 0; padding-top: 0; align-self: end; }
  .tile span { align-self: start; }
  .tile b { font-size: .8125rem; }
  .tile span { font-size: .6875rem; }
  .svc__group + .svc__group { margin-top: 0.875rem; }
  .svc__h { margin-bottom: 0.5rem; font-size: .9375rem; }
  .ott { gap: 0.375rem; }
  .ott li { min-height: 2.125rem; padding: 0 0.75rem; }
  .ott img { zoom: .85; }
  .svc__note { margin-top: 0.5rem; font-size: .8125rem; }
  .front { gap: 0.375rem; }
  .front .ic { width: 1.25rem; height: 1.25rem; }
  .front strong { font-size: .9375rem; }
  .front span { font-size: .75rem; }
}

/* 4페이지 위쪽: 설치 후 지원 세 가지 */
.after { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.875rem; }
.after li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); }
.after .ic { grid-row: 1 / 3; }
.after strong { font-size: .9375rem; line-height: 1.3; }
.after span { color: var(--gray); font-size: var(--t-fine); justify-self: start; }
@media (max-width: 520px) { .after li { grid-template-columns: 1fr; row-gap: 2px; padding: 0.625rem 0.625rem; } .after .ic { grid-row: auto; } }
.contact__more { margin: 0.625rem 0 0; font-size: .9375rem; }
.contact__more .todo { font-size: var(--t-fine); margin-left: 0.25rem; }
@media (min-width: 821px) { .contact__copy:has(.faq details[open]) .contact__more { display: none; } .contact__copy:has(.faq details[open]) .h2 { margin-bottom: 0.5rem; } .contact__copy:has(.faq details[open]) .after { margin-bottom: 0.5rem; } }

/* 4. 질문과 상담 */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 0.375rem 2rem 0.375rem 0; font-weight: 600; font-size: 1rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 0.5625rem; height: 0.5625rem; border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: -0.125rem 0 0.625rem; color: var(--gray-2); font-size: .9375rem; max-width: 60ch; }
.contact__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.875rem; }
@media (max-width: 480px) { .contact__ways { grid-template-columns: 1fr; } }
.way { display: grid; gap: 2px; padding: 0.875rem 1.125rem; text-decoration: none; background: var(--card); border: 1.5px solid var(--line); border-radius: 0.625rem; transition: border-color .15s, transform 160ms var(--ease-out); }
.way:active { transform: scale(0.98); }
.way__label { font-size: var(--t-fine); color: var(--gray); font-weight: 600; }
.way__value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; justify-self: start; }
.way__hint { font-size: var(--t-fine); color: var(--gray); }
.way--kakao { background: #fee500; border-color: #fee500; color: #191919; }
.way--kakao .way__label, .way--kakao .way__hint { color: #5c5400; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }

.form { background: var(--card); border: 1px solid var(--line); border-radius: 0.875rem; padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: 0.875rem; position: relative; }
.form__title { margin-bottom: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.form__lead { margin: -8px 0 0; color: var(--gray); font-size: .9375rem; }
.form__row { display: grid; gap: 0.375rem; }
.form__row--2 { grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__row--2 > div { display: grid; gap: 0.375rem; }
.form label { font-weight: 600; font-size: .9375rem; color: var(--gray-2); }
.form input, .form select, .form textarea { width: 100%; font: inherit; color: #fff; padding: 0.625rem 0.875rem; border: 1.5px solid #333; border-radius: 0.5rem; background: #000; transition: border-color .15s; }
.form select { color-scheme: dark; }
.form select option { color: #fff; background: #161618; }
.form select option[value=""] { color: #9a9a9a; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--magenta-light); }
.form textarea { resize: vertical; min-height: 4.5rem; }
.form .is-invalid { border-color: var(--magenta-light); }
.agree { display: flex; gap: 0.625rem; align-items: flex-start; font-size: .9375rem; color: var(--gray); }
.agree input { margin-top: 0.3125rem; accent-color: var(--magenta); width: 1.125rem; height: 1.125rem; }
.agree.is-invalid { color: var(--magenta-light); }
.agree.is-invalid input { outline: 2px solid var(--magenta-light); outline-offset: 2px; }
.btn.is-wait { opacity: .5; }
.form:has(.form__error:not([hidden])) .form__lead { display: none; }
.form__error { word-break: keep-all; }
.form__error { margin: 0; color: var(--magenta-light); font-weight: 600; font-size: .9375rem; }
.form__done { position: absolute; inset: 0; border-radius: 0.875rem; background: var(--card); display: grid; place-content: center; text-align: center; padding: 2rem; gap: 0.375rem; opacity: 1; transform: none; transition: opacity 200ms ease-out, transform 200ms var(--ease-out); }
@starting-style { .form__done:not([hidden]) { opacity: 0; transform: scale(0.97); } }
.form__done strong { font-size: 1.375rem; }
.form__done p { margin: 0; color: var(--gray); }
.form__done[hidden] { display: none; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .form__row--2 { grid-template-columns: 1fr; } }

/* 푸터 */
.footer { border-top: 1px solid var(--line); color: var(--gray); font-size: .9rem; }
.footer__in { display: flex; justify-content: space-between; gap: 2rem; padding: 3rem 0 1.75rem; flex-wrap: wrap; }
.footer__logo { display: flex; align-items: center; gap: 0.625rem; color: #fff; font-size: 1.875rem; line-height: 1; margin: 0 0 0.875rem; }
.footer__logo svg { width: auto; height: 1.75rem; flex: none; }
.footer__logo .wordmark { transform: translateY(0.125rem); }
.footer__info { display: grid; gap: 0.375rem; overflow: hidden; font-style: normal; font-size: .875rem; line-height: 1.6; color: #9a9a9a; }
.footer__info p { margin: 0 0 0 -1.25em; display: flex; flex-wrap: wrap; align-items: center; }
.footer__info p > *::before { content: "·"; display: inline-block; width: 1.25em; text-align: center; color: #5a5a5a; font-weight: 400; }
.footer__info b { color: #fff; font-weight: 700; }
.footer__info a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.footer__info .ic { width: 0.875em; height: 0.875em; margin-left: 0.2em; color: currentColor; stroke-width: 2; }
.footer__info .footer__privacy { color: #fff; font-weight: 700; }
.footer__privacy span { text-decoration: underline; text-underline-offset: 0.2em; }
.footer__bottom { display: flex; justify-content: flex-end; gap: 1.25rem; align-items: center; padding: 1.125rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: var(--t-fine); }
.footer__bottom p { margin: 0; max-width: 70ch; }
.footer__top { text-decoration: none; color: #fff; white-space: nowrap; border: 1px solid #333; border-radius: 999px; padding: 0.5rem 0.875rem; }
@media (max-width: 700px) { .footer__bottom { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------------
   휴대폰: 각 페이지가 한 화면에 들어가야 스냅이 걸리므로 압축 배치
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .section { padding: 1.25rem 0 1.5rem; }
  .h2 { margin-bottom: 0.875rem; font-size: clamp(1.5rem, 6vw, 2rem); }
  .display { font-size: clamp(1.7rem, 7.2vw, 2.4rem); }
  .lead { margin-top: 0.625rem; font-size: 1.0625rem; }
  .hero__in { gap: 0.875rem; padding: 1.125rem 0 0.75rem; }
  .hero__photo img { max-height: 24svh; }
  .flow { gap: 1.5rem; padding: 0 0 1.25rem; }
  .flow__node { grid-template-columns: auto 1fr; column-gap: 0.875rem; row-gap: 2px; align-items: center; padding: 0.75rem 1rem; }
  .flow__node .ic--lg { width: 1.75rem; height: 1.75rem; grid-row: 1 / 3; margin: 0; }
  .flow__node strong { font-size: 1rem; }
  .flow__node > span { font-size: .875rem; }
  .flow__node--wide { grid-template-columns: 1fr; }
  .icons { grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; margin-top: 0.25rem; }
  .icons li { font-size: .875rem; gap: 0.5rem; }
  .icons .ic { width: 1.25rem; height: 1.25rem; }
  .flow__node:not(:last-child)::after { bottom: -18px; width: 0.625rem; height: 0.625rem; margin-left: -5px; }

  .blog { margin-top: 1.125rem; padding: 0.875rem 3rem 0.875rem 1.125rem; gap: 0.375rem 0.75rem; }

  .after { gap: 0.5rem; margin-bottom: 0.75rem; }
  .after li { padding: 0.625rem 0.75rem; column-gap: 0.625rem; }
  .after strong { font-size: .875rem; }
  .contact__more { margin-top: 0.625rem; font-size: .875rem; }

  .faq summary { padding: 0.625rem 1.75rem 0.625rem 0; font-size: .9375rem; }
  .contact { gap: 1.25rem; }
  .contact__ways { margin-top: 1rem; }
  .way { padding: 0.75rem 0.875rem; }
  .way__value { font-size: 1.125rem; }
  .form { padding: 1.125rem; gap: 0.75rem; }
}
@media (max-width: 480px) {
  .icons { grid-template-columns: 1fr 1fr; }
  .contact__ways { grid-template-columns: 1fr 1fr; }
  .form__row--2 { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
}
@media (max-width: 340px) {
  .icons, .contact__ways, .form__row--2 { grid-template-columns: 1fr; }
}
/* 휴대폰 4페이지: 질문 묶음과 상담 폼을 각각 멈춤 지점으로 */
@media (max-width: 900px) {
  .faq summary { padding: 0.625rem 1.75rem 0.625rem 0; min-height: 2.75rem; display: flex; align-items: center; }
  .form__lead { display: none; }
  .form textarea { min-height: 3.5rem; }
}

.more { color: var(--magenta-light); font-weight: 600; text-decoration: none; }
/* hover 효과는 마우스 기기에서만 (터치 기기는 탭이 hover 로 남는 문제 방지) */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #a8126a; }
  .nav__menu a:hover { color: #fff; }
  .way:hover { border-color: #fff; }
  .way--kakao:hover { border-color: #191919; }
  .blog:hover { border-color: var(--magenta-light); }
  .more:hover { text-decoration: underline; }
  .pager__dot:hover::before { background: #aaa; }
  .pager__dot:hover .pager__label { opacity: 1; }
  .footer__info a:hover { color: var(--magenta-light); }
}