/* 사용법 영상과 관련해 고객 화면 전체에서 쓰는 것(base.html 이 고객 화면에만 불러온다).
   1) 위 메뉴의 둘러보기 탭(방문자: 소개 | 사용법 영상)과 로그인한 고객의 '사용법 영상' 링크
   2) 각 화면에 접어 두는 사용법 영상 한 줄(_guide_video.html)
   색·글꼴은 style.css 의 기존 변수(--card, --line, --blue-soft, --font-ui …)만 쓴다. 전용 화면(/guide)의 모양은 guide-page.css.
   영상 원본·올리는 법: 압도마케팅/usage_videos/README.md */

/* ── 위 메뉴 ── */
.nav-tabs { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-family: var(--font-ui); }
.nav-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; color: var(--gray); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .16s ease, color .16s ease; }
.nav-tab:hover { color: var(--ink); }
.nav-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-tab.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.nav-tab-play { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); }
.nav-tab-play svg { width: 10px; height: 10px; margin-left: 1px; fill: #fff; }
@media (max-width: 760px) {
  /* 휴대폰: 탭은 상표 줄 아래 한 줄을 다 쓴다 */
  .public-visitor .topnav:has(.nav-tabs) { flex-wrap: wrap; }
  .nav-tabs { order: 3; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 2px 0 0; }
  .nav-tab { height: 40px; }
}
/* 로그인한 고객의 '사용법 영상' 링크는 자리가 넉넉한 화면에서만 보인다(태블릿 세로에서는 뒤로가기·잔여 건수와 자리를 다툰다. 각 화면의 영상 줄에서 전체 목록으로 갈 수 있다) */
@media (max-width: 900px) {
  .nav-right .nav-guide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-tab { transition: none; } }
/* 방문자 탭이 있는 화면(소개·사용법 영상)에서는 위 메뉴의 회원가입을 주 버튼으로 강조한다(사이트의 파란 버튼 색 그대로). */
.topnav:has(.nav-tabs) .nav-right a[href$="/signup"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.topnav:has(.nav-tabs) .nav-right a[href$="/signup"]:hover { border-color: var(--blue-dark); background: var(--blue-dark); color: #fff; }

/* ── 사용법 영상 틀(static/guide-embed.js 가 무대 안에 만든다). 뒤에서 다 그린 틀만 앞으로 나온다 ── */
.ag-frame { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: transparent; visibility: hidden; }
.ag-frame.is-front { z-index: 2; visibility: inherit; }   /* 접힌 상자 안에서는 상자를 따라 숨는다 */
[data-apdo-stage]:fullscreen { width: 100vw; max-width: none; height: 100vh; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; background: #e6ebf2; }
[data-apdo-stage]:-webkit-full-screen { width: 100vw; max-width: none; height: 100vh; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; background: #e6ebf2; }
/* 전체 화면 동안에는 스크롤 막대 자리를 비워 두지 않는다(오른쪽에 15px 띠가 남는다) */
html:has(:fullscreen) { scrollbar-gutter: auto; }
/* 전체 화면을 못 쓰는 기기(아이폰): 무대를 맨 위 층에 올려 화면 가득 키운다(guide-embed.js 의 setMax). 뒤의 화면은 그동안 움직이지 않는다. */
/* (!important: 무대마다 제 화면의 CSS 가 자리·크기를 더 센 규칙으로 정해 두었다. 키운 동안에는 이 규칙이 이겨야 한다.) */
[data-apdo-stage]:popover-open { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; background: #e6ebf2; box-shadow: none !important; overflow: hidden !important; }
html.ag-max, html.ag-max body { overflow: hidden; }
/* 세로로 든 휴대폰: 키운 영상을 옆으로 돌려 화면을 꽉 채운다(휴대폰을 눕혀서 본다. 화면이 따라 돌면 이 규칙은 풀린다). */
@media (orientation: portrait) and (max-width: 600px) {
  [data-apdo-stage]:fullscreen > .ag-frame { inset: auto; left: 50%; top: 50%; width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
  [data-apdo-stage]:-webkit-full-screen > .ag-frame { inset: auto; left: 50%; top: 50%; width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
  [data-apdo-stage]:popover-open > .ag-frame { inset: auto; left: 50%; top: 50%; width: 100vh; width: 100dvh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* ── 화면에 접어 두는 사용법 영상 한 줄(_guide_video.html). 글자 크기는 같은 역할의 접이식 안내(.support-box)와 맞춘다 ── */
.guide-video { margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-family: var(--font-ui); font-size: 14px; line-height: 1.6; overflow: hidden; }
.customer-ui .guide-video { font-size: 17px; }
.guide-video-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%; margin: 0; padding: 16px 20px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; letter-spacing: inherit; text-align: left; cursor: pointer; }
.guide-video-summary::after { content: '펼치기 ▾'; margin-left: auto; color: var(--gray); font-size: .85em; font-weight: 600; white-space: nowrap; }
.guide-video.is-open .guide-video-summary::after { content: '접기 ▴'; }
.guide-video-summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 14px; }
.guide-video-badge { flex: none; padding: 3px 11px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .85em; white-space: nowrap; }
.guide-video-len { color: var(--gray); font-size: .85em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 접힌 동안에도 무대의 크기는 잡혀 있어야 한다(뒤에서 미리 그려 둔다). 그래서 display:none 대신 높이만 0 으로 접는다. */
.guide-video-fold { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s; }
.guide-video.is-open .guide-video-fold { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.guide-video-body { min-height: 0; padding: 0 20px; overflow: hidden; }
.guide-video-body > :last-child { margin-bottom: 16px; }
/* 무대는 영상(밝은 화면으로 그린 장면)과 이어지도록 화면 테마와 상관없이 같은 밝은 색이다 */
/* 낮은 창(작은 노트북)에서도 펼친 영상이 자막·재생 막대까지 한 화면에 들어오게 창 높이에 맞춰 줄인다 */
.guide-video-stage { position: relative; max-width: 960px; max-width: max(320px, min(960px, calc((100dvh - 200px) * 16 / 9))); margin: 0 auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 12px; background: #e6ebf2; overflow: hidden; }
.guide-video-stage.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(49, 130, 246, .22); border-top-color: #3182f6; border-radius: 50%; opacity: 0; animation: ag-spin .8s linear infinite, ag-show 0s linear .45s forwards; }
@keyframes ag-show { to { opacity: 1; } }
.guide-video-error { margin: 10px 0 0; color: var(--red); font-size: .85em; font-weight: 600; text-align: center; }
.guide-video-more { margin: 12px 0 0; text-align: center; font-size: .85em; }
.guide-video-more a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* 가입 카드 안에서는 설명 글과 입력칸 사이에 놓인다 */
.signup-card .guide-video { margin: 0 0 28px; }

@media (max-width: 600px) {
  .guide-video-summary { padding: 14px 16px; }
  .guide-video-body { padding: 0 12px; }
  .guide-video-body > :last-child { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-video-fold, .guide-video.is-open .guide-video-fold { transition: none; }
}

/* ── 누르는 느낌(고객 화면 전체, 2026-10-13 대표님 지시: "뭘 클릭하든 클릭하는 느낌, 올려두면 조금 세련되게") ──
   마우스를 올리면 살짝 떠오르거나 커지고, 누르는 순간 눌려 들어간다. 움직임은 transform 만 쓴다(자리를 밀지 않는다).
   작은 버튼은 커지고(1.04배), 넓은 카드·줄은 떠오른다(2~4px). '동작 줄이기'를 켠 기기에서는 움직이지 않는다.
   색은 건드리지 않는다. 새 버튼을 만들면 아래 목록에 클래스를 더한다. */
@media (prefers-reduced-motion: no-preference) {
  .customer-ui :is(.nav-right a, .nav-logout button, .theme-toggle, .nav-back, .nav-tab, .discord-join, .btn-primary, .ui-secondary, .btn-edit-sm, .btn-cancel-sm, .btn-done-sm, .btn-roster-dl, .btn-bulk-done,
    .action-card, .guide-video, .guide-video-badge, .app-detail > summary, .tracking-summary, .ledger-go, .support-box > summary, .discord-guide > summary, .past-section > summary, .ledger-tab, .seg-item span, .platform-opt span,
    .ia-rail-play, .ia-reel-toggle, .ia-reel-tab, .ia-theater-item, .gp-item, .public-text-link, .kakao-fab-btn) {
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    /* 작은 버튼: 살짝 커진다 */
    .customer-ui :is(.nav-right a, .nav-logout button, .theme-toggle, .nav-back, .discord-join, .ui-secondary, .btn-edit-sm, .btn-cancel-sm, .btn-done-sm, .btn-roster-dl,
      .app-detail > summary, .tracking-summary, .ledger-go, .ledger-tab, .ia-rail-play, .ia-reel-toggle, .public-text-link):hover { transform: translateY(-1px) scale(1.04); }
    .customer-ui .nav-tab:not(.is-active):hover { transform: scale(1.04); }
    /* 넓은 버튼·카드·줄: 떠오르며 그림자가 깊어진다 */
    .customer-ui :is(.btn-primary, .btn-bulk-done):hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--blue) 70%, transparent); }
    .customer-ui .action-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-hover); }
    .customer-ui .guide-video:not(.is-open):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 34%, var(--line)); box-shadow: var(--shadow-hover); }
    .customer-ui .guide-video:not(.is-open):hover .guide-video-badge { transform: scale(1.06); }
    .customer-ui :is(.support-box > summary, .discord-guide > summary, .past-section > summary):hover { transform: translateX(2px); }
    .customer-ui .kakao-fab:hover .kakao-fab-btn { transform: scale(1.08); }
  }
  /* 누르는 순간: 눌려 들어간다(올림 효과보다 뒤에 적어 누를 때 이쪽이 이긴다) */
  .customer-ui :is(.nav-right a, .nav-logout button, .theme-toggle, .nav-back, .nav-tab, .discord-join, .ui-secondary, .btn-edit-sm, .btn-cancel-sm, .btn-done-sm, .btn-roster-dl,
    .app-detail > summary, .tracking-summary, .ledger-go, .ledger-tab, .ia-rail-play, .ia-reel-toggle, .public-text-link):active { transform: scale(.94); transition-duration: .08s; }
  .customer-ui :is(.btn-primary, .btn-bulk-done):active { transform: scale(.975); box-shadow: none; transition-duration: .08s; }
  .customer-ui .action-card:active { transform: scale(.975); transition-duration: .08s; }
  .customer-ui .guide-video:not(.is-open):active { transform: scale(.99); transition-duration: .08s; }
  .customer-ui :is(.ia-theater-item, .gp-item, .ia-reel-tab, .seg-item span, .platform-opt span):active { transform: scale(.97); transition-duration: .08s; }
  .customer-ui .kakao-fab:active .kakao-fab-btn { transform: scale(.92); transition-duration: .08s; }
}