/* =============================================================================
   TBM 쪽 (a안 바탕) · 2026-10-22 3판 · 실사 + 실제 부품 모션그래픽
   토대: cm-toss.css · min.css · v-a.css. 여기는 이 쪽에만 있는 것.
     1. .tb-scene  섹션 무대(1024px 이상 = 가로 무대, 조각은 --x · --y · --w(%) / 1023px 아래 = 폭 560 상한 세로 무대, --mx · --my · --mw)
     2. .tb-ph     실사 사진 칸(처음부터 보인다. 움직이는 것은 부품뿐)
     3. .tb-card · .tb-bar · .tb-phone · .tb-go · .tb-fly   개편안 · 실앱 실캡처 부품 틀(흰 면 + 테두리 + 푸른 기 그림자)
     4. .tb-ring · .tb-tag   보라 테(강조할 줄 하나) · 흰 알약 꼬리표(상태 2~7자 · 화면 읽기에서는 숨김)
     5. .tb-credit · .tb-stores   사진 출처 한 줄 · 스토어 배지
   움직임은 tbm.js. head 의 한 줄 스크립트가 <html class="tb-js"> 를 붙이고(4초 안에 엔진이 안 뜨면 뗀다),
   장면이 시작하기 전 부품은 숨겨 둔다. 스크립트가 없거나 실패하면 마크업 그대로가 끝 장면이다(.tb-tr = 지나가는 조각은 숨김).
   ============================================================================= */

.tb-sec { padding-block: clamp(48px, 6vw, 80px); }

/* ---- 1. 무대 ------------------------------------------------------------------ */
.tb-scene { position: relative; max-width: 1120px; margin: clamp(24px, 3vw, 40px) auto 0; aspect-ratio: var(--ar, 16 / 9); }
.min-hero .tb-scene { margin-top: 28px; text-align: left; }
.tb-scene > * {
  position: absolute; margin: 0; box-sizing: border-box;
  left: calc(var(--x, 0) * 1%); top: calc(var(--y, 0) * 1%); width: calc(var(--w, 20) * 1%);
}

/* ---- 2. 실사 ------------------------------------------------------------------ */
.tb-ph { height: calc(var(--h, 100) * 1%); overflow: hidden; border-radius: 28px; box-shadow: var(--cm-shadow-2); }
.tb-ph > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---- 3. 부품 틀 ---------------------------------------------------------------- */
.tb-card { overflow: hidden; background: #fff; border: 1px solid var(--cm-line-2); border-radius: 18px; box-shadow: var(--cm-shadow-3); }
.tb-card > img, .tb-card > picture, .tb-card > picture > img { display: block; width: 100%; height: auto; }
.tb-card--pad { padding: 4px 2px 0; }
.tb-card--dash { padding: 6px 8px 4px; border-radius: 20px; }
.tb-rows { padding: 4px 18px 0; }
.tb-rows > img { display: block; width: 100%; height: auto; }
.tb-bar { display: block; height: auto; border-radius: 12px; box-shadow: var(--cm-shadow-2); }
.tb-bar--soft { border-radius: 14px; }
.tb-go { display: block; height: auto; border-radius: 14px; box-shadow: var(--cm-shadow-2); }
.tb-phone { overflow: hidden; background: #fff; border: 1px solid var(--cm-line-2); border-radius: 26px; box-shadow: var(--cm-shadow-3); }
.tb-phone > img { display: block; width: 100%; height: auto; }
/* 날아오는 앱 카드 = 실앱 카드 테 바깥을 잘라 낸 그림(p-app-card-t). 둥근 끝은 그림 속 테(가로 18/544 · 세로 18/180)에 맞춘다 */
.tb-fly { display: block; height: auto; border-radius: 3.3% / 10%; box-shadow: 0 16px 40px rgba(23, 60, 140, 0.22); z-index: 3; }

/* 일지 문서 창(10-26 · 대표 '일지에 이미지가; 보고서가 아니잖아'): 개편안 TBM 교육일지 한 장을 창에 넣고, 대본이 안쪽(…__in)을 위로 밀어 ③ · ⑥ 을 보인다 */
.tb-doc { height: calc(var(--h, 100) * 1%); }
.tb-doc__in { position: relative; }
.tb-doc__in > img { display: block; width: 100%; height: auto; }
.tb-doc__head { position: absolute; z-index: 2; top: 0; left: 0; display: block; width: 100%; height: auto; background: #fff; border-bottom: 1px solid var(--cm-line-2); }   /* 일지 제목 줄(같은 문서 위 줄)을 창 위에 고정 · 내려가도 'TBM 교육일지'로 읽히게 */

/* 한 화면 바뀜(10-26 · 대표 '카드가 나눠져 있으니까 헷갈리지'): 같은 크기 화면 두 장을 겹쳐 두고, 대본이 뒷장(…__b)을 위에서부터 드러낸다 */
.tb-flip > .tb-flip__b { position: absolute; top: 0; left: 0; width: 100%; }

/* ---- 4. 보라 테 · 꼬리표 ----------------------------------------------------------- */
/* 부품 안에서 강조할 줄 하나에만 두른다. 위치는 부품 상자에 대한 % (--rx · --ry · --rw · --rh) */
.tb-ring {
  position: absolute; display: block; pointer-events: none;
  left: calc(var(--rx) * 1%); top: calc(var(--ry) * 1%); width: calc(var(--rw) * 1%); height: calc(var(--rh) * 1%);
  border: 2px solid var(--cm-brand); border-radius: 10px; box-shadow: 0 0 0 4px rgba(76, 0, 255, 0.1);
}
.tb-ring--tap { border-radius: 14px; }
.tb-tag {
  display: inline-flex; align-items: center; gap: 6px; width: auto !important; height: 38px; padding: 0 16px; z-index: 4;
  background: #fff; border-radius: 999px; box-shadow: 0 10px 28px rgba(23, 60, 140, 0.18);
  color: var(--cm-ink); font: 700 14px/1 var(--min-font-body); letter-spacing: -0.01em; white-space: nowrap;
}
/* 체크는 '끝났다'는 뜻의 꼬리표 둘(일지에서 채움 · 바로 기록)에만. 장식 점은 10-22 점검에서 뺐다 */
.tb-chk { flex: none; width: 14px; height: 14px; margin-left: -2px; fill: none; stroke: var(--cm-brand); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
/* 보내는 길 꼬리표: 보라 원 안에 꽉 찬 흰 아이콘(얇은 선 아이콘이 작고 초라해 보인다는 대표 지적 10-22 '아이콘 옹졸한 것') */
.tb-tag--way { height: 52px; gap: 10px; padding: 0 20px 0 8px; font-size: 17px; color: var(--cm-ink); box-shadow: 0 12px 32px rgba(23, 60, 140, 0.2); }
.tb-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cm-brand); }
.tb-ico > svg { width: 20px; height: 20px; fill: #fff; }
.tb-ico .s { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 5. 출처 · 스토어 ------------------------------------------------------------ */
.tb-credit { max-width: 1120px; margin: 14px auto 0; color: var(--cm-ink-4); font-size: 12px; line-height: 1.5; text-align: right; }
.tb-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tb-stores { display: flex; justify-content: center; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.tb-stores > li { margin: 0; padding: 0; }
.tb-stores a { display: block; border-radius: 8px; transition: transform var(--cm-t-press) var(--cm-ease-out); }
.tb-stores a:active { transform: scale(0.97); }
.tb-stores img { display: block; height: 40px; width: auto; }

/* ---- 움직임 전 상태 ---------------------------------------------------------------- */
.tb-tr { visibility: hidden; }                       /* 지나가는 조각(일지 올리기 칸 · 읽는 중): 스크립트 없으면 안 보임 */
.tb-js .tb-tr { visibility: visible; }
.tb-js .tb-h,
.tb-js .tb-scene [data-k]:not([data-k="ph"]):not([data-k$="Img"]) { opacity: 0; }   /* 장면 시작 전(엔진이 대본을 붙이기 전 포함). 사진 · 그림 자체(…Img)는 숨기지 않는다 */

/* ---- 세로 무대(태블릿 · 휴대폰) ------------------------------------------------------- */
@media (max-width: 1023px) {
  .tb-scene { max-width: 560px; aspect-ratio: var(--mar, 3 / 4); }
  .tb-scene > * { left: calc(var(--mx, var(--x)) * 1%); top: calc(var(--my, var(--y)) * 1%); width: calc(var(--mw, var(--w)) * 1%); }
  .tb-scene [data-m="0"] { display: none; }
  .tb-ring[style*="--mrx"] { left: calc(var(--mrx) * 1%); top: calc(var(--mry) * 1%); width: calc(var(--mrw) * 1%); height: calc(var(--mrh) * 1%); }   /* 휴대폰 판 그림이 다를 때 */
  .tb-ph { height: calc(var(--mh, var(--h)) * 1%); border-radius: 22px; }
  .tb-doc { height: calc(var(--mh, var(--h)) * 1%); }
  .tb-card { border-radius: 14px; }
  .tb-phone { border-radius: 20px; }
  .tb-credit { max-width: 560px; text-align: left; }
}
@media (max-width: 600px) {
  .tb-ph { border-radius: 18px; }
  .tb-tag { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; }
  .tb-chk { width: 12px; height: 12px; }
  .tb-tag--way { height: 40px; gap: 8px; padding: 0 14px 0 6px; font-size: 14px; }
  .tb-ico { width: 28px; height: 28px; }
  .tb-ico > svg { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .tb-tag--way { height: 36px; font-size: 13px; }
  .tb-ico { width: 24px; height: 24px; }
}

/* ---- 설정 존중 --------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .tb-card, .tb-phone, .tb-ph { border: 1px solid var(--cm-grey-500); box-shadow: none; }
  .tb-tag { box-shadow: 0 0 0 1px var(--cm-ink); }
}