/* BP-L2: 원본 tokens.css / styles.css 의 기반값을 공통 영역에만 격리한다.
   stage-shell.css는 5176 원본 그대로 유지한다. */
.stage-shell, .stage-skip-link {
  --paper: #f7f6fc; --night: #141a3a; --night-deep: #0c1030;
  --lavender-white: #f4f1ff; --star-cyan: #7ee0ff; --dark-muted: #b9bce0;
  --cyan-ink: #06222c; --action: #7ee0ff; --action-ink: #06222c;
  --focus-ring: #7ee0ff; --line: color-mix(in srgb, #f4f1ff 18%, transparent);
  --ink: #f4f1ff; --accent-soft: color-mix(in srgb, #7ee0ff 10%, #141a3a);
  --font-sans: "Interop", -apple-system, BlinkMacSystemFont, sans-serif;
  --ease-panel: cubic-bezier(0.2, 0.7, 0.2, 1);
  --page-gutter: clamp(20px, 4.45vw, 64px); --content-width: 1280px;
  font-size: 15px; line-height: 1.65; letter-spacing: normal;
  font-variant-numeric: tabular-nums; font-synthesis: none;
}
.stage-shell a { color: inherit; text-decoration: none; }
.stage-shell p { margin: 0; }
.stage-shell button { cursor: pointer; }
.stage-shell .brand { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; }
.stage-shell .brand.brand img.brand-logo { width: 132px; height: 38.5px; object-fit: contain; display: block; }
.stage-shell .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stage-shell a[aria-current="page"], .stage-shell .stage-nav-group[data-current="true"] .stage-nav-trigger { color: var(--star-cyan); text-decoration: none; } /* 도경 10/12: 밑줄 없이 색으로만 */
/* 44px 터치 영역만 보완 — 원본 색/글자/모서리 값은 유지. */
.stage-shell .stage-studio-entry, .stage-shell .stage-footer-studio,
.stage-shell .stage-footer nav a, .stage-shell .stage-footer-bottom a,
.stage-footer.stage-shell nav a, .stage-shell .stage-mobile-bottom-links a,
.stage-shell .stage-desktop-nav > a { min-height: 44px; display: inline-flex; align-items: center; } /* 관제탑 10/12: 너비 44 강제 빼서 5176과 같은 간격 */
.stage-placeholder-page { background: #f7f6fc; min-height: 100svh; display: flex; flex-direction: column; }
.stage-placeholder { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 100px clamp(20px, 4.45vw, 64px); }
.stage-placeholder h1 { margin: 0 0 16px; font-size: clamp(32px, 4vw, 48px); }
.stage-placeholder p { margin: 0; color: #5a5f80; }

/* 관제탑 10/12: '.stage-shell a { color: inherit }'가 버튼 글자를 흰색으로 덮던 것 — 5176처럼 어두운 글자 */
.stage-shell a.stage-button-primary { color: var(--action-ink, rgb(6, 34, 44)); }

/* 도경 10/12: 바닥 사업자 정보(#70 대표 확정, 전화번호는 받으면 추가) · 쿠키 설정 */
.stage-shell .stage-footer-biz { max-width: var(--content-width); margin: 0 auto; padding: 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-style: normal; font-size: 13px; line-height: 1.7; color: var(--dark-muted); }
.stage-shell .stage-footer-biz span { white-space: nowrap; }
.stage-shell .stage-footer-cookie { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .stage-shell .stage-footer-biz span { white-space: normal; } }

/* 도경 10/12: 위 메뉴 · 바닥 · 하위 메뉴 창 바탕을 요금 구역과 같은 #060D19로. 하위 메뉴는 아이콘 없이 작게, 지금 페이지 · 마우스는 색으로만 */
.stage-shell.stage-header, html body.landing-overlay #stage-header.is-past-hero { background: #060D19; border-bottom-color: rgb(255 255 255 / 8%); }
.stage-shell.stage-footer, html body .stage-mobile-sheet { background: #060D19; }
.stage-shell .stage-dropdown-wrap { left: -18px; width: 232px; padding-top: 12px; }
.stage-shell .stage-dropdown { padding: 8px; border-radius: 16px; background: #060D19; border-color: rgb(255 255 255 / 12%); box-shadow: 0 16px 40px rgb(0 0 0 / 40%); }
.stage-shell .stage-dropdown-item { gap: 0; min-height: 44px; padding: 12px 14px; border-radius: 10px; }
.stage-shell .stage-dropdown-item:hover, .stage-shell .stage-dropdown-item:focus-visible { background: none; color: var(--star-cyan); }
.stage-shell .stage-dropdown-item:focus-visible { outline: 2px solid var(--star-cyan); outline-offset: -2px; }
.stage-shell .stage-dropdown-item strong { font-size: 15px; }
.stage-shell .stage-dropdown-item[aria-current="page"] strong { color: var(--star-cyan); }
.stage-shell .stage-dropdown-item > span > span { margin-top: 2px; }
.stage-shell .stage-soon { border: 0; border-radius: 0; padding: 0; font-size: 12px; font-weight: 500; color: var(--dark-muted); } /* 알약 금지 — 글로만 */
/* 도경 10/12: 주요기능 메뉴 맨 아래 '파트너 안내' — 기능 셋과 1px 선으로만 나눔 */
.stage-shell .stage-dropdown-item[href$="partners.html"] { position: relative; margin-top: 9px; }
.stage-shell .stage-dropdown-item[href$="partners.html"]::before { content: ""; position: absolute; left: 14px; right: 14px; top: -5px; height: 1px; background: rgba(255, 255, 255, .1); }

/* 도경 10/12: 페이지 넘김 — 이지샘 방식(partials.js 맨 아래와 짝).
   들어올 때: 어두운 덮개가 걷히고(0.55초) · 위 메뉴가 위에서 내려오고 · 하위 페이지 큰 제목이 가림막 안에서 올라오고 · 나머지 글이 뒤따라 떠오름.
   나갈 때: 덮개가 0.32초 동안 다시 덮임. 메인 첫 화면 · 왜 알마인가요는 제 등장 움직임이 있어 제목은 건드리지 않음. */
@media (prefers-reduced-motion: no-preference) {
  html::after { content: ""; position: fixed; inset: 0; z-index: 9999; background: #060D19; opacity: 0; pointer-events: none; animation: pt-uncover .55s cubic-bezier(.4, 0, .2, 1) .08s backwards; }
  html.pt-leave::after { opacity: 1; animation: pt-cover .32s cubic-bezier(.4, 0, .2, 1); }
  #stage-header { animation: pt-head .75s cubic-bezier(.2, .8, .2, 1) .12s backwards; }
  body.page-shell main h1, body.pricing-page main h1 { animation: pt-rise .9s cubic-bezier(.2, .8, .2, 1) .22s backwards; }
  body.page-shell main h1 ~ *, body.pricing-page main h1 ~ * { animation: pt-follow .7s cubic-bezier(.2, .8, .2, 1) .48s backwards; }
}
@keyframes pt-uncover { from { opacity: 1; } to { opacity: 0; } }
@keyframes pt-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-head { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes pt-rise { from { transform: translateY(100%); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0); } }
@keyframes pt-follow { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* 최초 진입과 스크롤 재진입에서 같은 등장 애니메이션을 사용한다. */
.motion-replay-away { animation:none !important; }

/* Screen-reader descriptions apply throughout every page, not only the shell. */
.sr-only,.page-sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;
  pointer-events:none!important;
}

/* 도경 관제탑 10/14: 출시판에서 더한 긴 결제 대행 안내(바닥 마지막 칸)만 줄바꿈 — 짧은 항목은 그대로 한 줄. 900~1250px 가로 넘침 막음 */
.stage-shell .stage-footer-biz span:last-child { white-space: normal; flex-basis: 100%; max-width: 60em; }