/* §36-2 해외 사이트 3곳(11-05 사장님 "어바웃어스는 해외에서도 압도적입니다 · 걸프 us jp 사이트 간지나게")
   옆 구간(§33 am-reach)과 같은 바탕·제목 결: 바탕 #02090a · 제목 56/330/1.08(아이덴티티 덮어쓰기는 .rch-t 로 같이 받음) · 폭 1260
   가운데 창이 크고 앞으로 · 양옆 창은 ±14° 돌려 뒤로(원근 1800) · 창 = 주소창 34 + 첫 화면 그림 16:10
   움직임(JS 가 .is-in 한 번 · .is-vis 화면 안): 차례로 떠오름(0 · .12 · .24초) → 주소 글자 쳐짐 → 그림 16초 천천히 다가옴(왕복) + 빛 한 줄 7초
   화면 밖·멈춤 단추·모션 줄이기·JS 없음 = 첫 그림 그대로(창은 다 보임) */
.hb.hb-abroad { position: relative; padding: 96px 0 104px; background: #101b1b; color: #fff; overflow: hidden; }   /* 옆 구간(everywhere·global·languages) 실제 바탕 #101b1b · 여백 96 과 맞춤 */
.abr-wrap { width: min(1260px, calc(100% - 2 * var(--am-gutter, 40px))); margin: 0 auto; }
.abr-t { margin: 0 0 64px; font-family: var(--font); font-size: 56px; font-weight: 330; line-height: 1.08; letter-spacing: -.03em; color: #fff; word-break: keep-all; text-wrap: balance; }
.abr-t > span { display: block; }
.abr-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr) minmax(0, 1fr); column-gap: 28px; row-gap: 48px; align-items: start; perspective: 1800px; }
.abr-stage::before { content: ""; position: absolute; left: 50%; top: 30%; width: 64%; height: 80%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 174, 122, .24), rgba(47, 174, 122, 0)); }
.abr-card { position: relative; z-index: 1; min-width: 0; margin: 0; }
.abr-c1, .abr-c3 { margin-top: 40px; }
.abr-win { position: relative; border-radius: 12px; overflow: hidden; background: #0d1a1c; isolation: isolate;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .07);
  transform: rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)); transform-origin: var(--to, 50% 50%);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease; }
.abr-c1 { --ry: 14deg; --tz: -40px; --to: 100% 50%; }
.abr-c3 { --ry: -14deg; --tz: -40px; --to: 0% 50%; }
.abr-card:hover .abr-win { --ry: 0deg; --tz: 24px; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(47, 174, 122, .45); }
.abr-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #16201f; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.abr-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; flex: none; }
.abr-bar > i:nth-child(2) { background: #febc2e; }
.abr-bar > i:nth-child(3) { background: #28c840; }
.abr-url { display: flex; align-items: center; gap: 7px; height: 22px; margin: 0 auto; padding: 0 12px; max-width: 76%; border-radius: 999px; background: rgba(255, 255, 255, .07);
  font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9d3d0; overflow: hidden; }
.abr-lock { position: relative; width: 8px; height: 6px; margin-top: 3px; border-radius: 1.5px; background: #8fa29c; flex: none; }
.abr-lock::before { content: ""; position: absolute; left: 1.5px; bottom: 5px; width: 3px; height: 4px; border: 1.2px solid #8fa29c; border-bottom: 0; border-radius: 3px 3px 0 0; }
.abr-dom { display: inline-block; overflow: hidden; white-space: nowrap; width: calc(var(--n) * 1ch); }
.abr-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d1a1c; }
.abr-view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 32%; }
.abr-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 62%); }
.abr-k { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; font-size: 13px; font-weight: 500; line-height: 1; color: #9fb0ab; }
.abr-k > span { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font-size: 12.5px; font-weight: 600; color: #fff; }
.abr-k > em { font-style: normal; }
.abr-h { margin: 12px 0 0; font-size: 20px; font-weight: 450; line-height: 26px; letter-spacing: -.005em; }
.abr-h a { color: #fff; text-decoration: none; white-space: nowrap; }
.abr-nw { white-space: nowrap; }
.abr-h a i { margin-left: 6px; font-style: normal; color: #2fae7a; }
.abr-h a:hover, .abr-h a:focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.abr-p { margin: 8px 0 0; max-width: 30em; font-size: 14px; font-weight: 420; line-height: 19.2px; color: #9797a2; text-wrap: pretty; word-break: keep-all; }

/* 움직임 — html.anim(스크립트 켜짐·모션 허용) 일 때만 숨겼다 보여 줌 */
html.anim .hb-abroad .abr-card { transition: opacity .9s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1); }
html.anim .hb-abroad .abr-c2 { transition-delay: .12s; }
html.anim .hb-abroad .abr-c3 { transition-delay: .24s; }
html.anim .hb-abroad:not(.is-in) .abr-card { opacity: 0; transform: translateY(56px); }
html.anim .hb-abroad:not(.is-in) .abr-dom { width: 0; }
html.anim .hb-abroad.is-in .abr-dom { animation: abr-type 1.1s steps(var(--n)) .7s both; }
html.anim .hb-abroad.is-in .abr-c2 .abr-dom { animation-delay: .82s; }
html.anim .hb-abroad.is-in .abr-c3 .abr-dom { animation-delay: .94s; }
@keyframes abr-type { from { width: 0; } to { width: calc(var(--n) * 1ch); } }
html.anim .hb-abroad .abr-view img { animation: abr-drift 16s ease-in-out infinite alternate; animation-play-state: paused; }
html.anim .hb-abroad .abr-c2 .abr-view img { animation-delay: -5.3s; }
html.anim .hb-abroad .abr-c3 .abr-view img { animation-delay: -10.6s; }
@keyframes abr-drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.07) translateY(-2%); } }
html.anim .hb-abroad .abr-view::after { animation: abr-sheen 7s ease-in-out infinite; animation-play-state: paused; }
html.anim .hb-abroad .abr-c2 .abr-view::after { animation-delay: -2.3s; }
html.anim .hb-abroad .abr-c3 .abr-view::after { animation-delay: -4.6s; }
@keyframes abr-sheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
html.anim .hb-abroad.is-vis .abr-view img, html.anim .hb-abroad.is-vis .abr-view::after { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .hb-abroad .abr-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hb-abroad .abr-dom { width: calc(var(--n) * 1ch) !important; animation: none !important; }
  .hb-abroad .abr-view img, .hb-abroad .abr-view::after { animation: none !important; }
}

/* 태블릿: 셋이 좁아지면 돌림을 줄임 */
@media (max-width: 1080px) {
  .abr-c1 { --ry: 8deg; --tz: -20px; }
  .abr-c3 { --ry: -8deg; --tz: -20px; }
  .abr-url { font-size: 10.5px; }
}
/* 태블릿(761~940): 셋을 한 줄에 두면 창이 200px 남짓 — 주소가 잘리고 화살표가 떨어짐 → 걸프 창 위 한 줄 · 미국·일본 아래 두 칸 */
@media (min-width: 761px) and (max-width: 940px) {
  .abr-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; perspective: none; }
  .abr-c2 { grid-column: 1 / -1; grid-row: 1; }
  .abr-c1, .abr-c3 { grid-row: 2; margin-top: 0; --ry: 0deg; --tz: 0px; }
  .abr-card:hover .abr-win { --tz: 0px; }
}
/* 폰: 한 줄로 쌓고 돌림 없음 */
@media (max-width: 760px) {
  .hb.hb-abroad { padding: 72px 0 84px; }
  .abr-t { margin-bottom: 40px; font-size: 36px; font-weight: 300; }
  .abr-stage { grid-template-columns: minmax(0, 1fr); row-gap: 44px; perspective: none; }
  .abr-c1, .abr-c3 { margin-top: 0; --ry: 0deg; --tz: 0px; }
  .abr-card:hover .abr-win { --tz: 0px; }
  .abr-k { margin-top: 18px; }
  .abr-h { font-size: 17px; line-height: 22px; }
}