/* ============================================================
   ARIFE 랜딩 — 소개 영상 카드 v1300 (2026-09-13)
   첫 화면 글 아래에 세로(9:16) 소개 영상을 폰 프레임으로 둔다.
   카드 안에서는 작은 판(540×960)이 돌고, 누르면 원본(1080×1920)을 크게 튼다. 영상에 소리는 없다.
   영상 파일은 저장소(editor2-assets/…/landing/promo-blockout-v11.* — 자막 없는 판)에 두고 여기서 바로 부른다 — 깃에는 넣지 않는다.
   ============================================================ */
.landing-promo-v1300{
  display:flex;
  align-items:center;
  gap:22px;
  width:100%;
  max-width:560px;
  margin-top:34px;
  padding:14px 18px 14px 14px;
  border:1px solid rgba(173,196,235,.22);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(18,27,44,.72),rgba(10,16,28,.58));
  box-shadow:0 18px 44px rgba(3,8,18,.45);
  color:#e6eefb;
  text-align:left;
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.landing-promo-v1300:hover,
.landing-promo-v1300:focus-visible{
  border-color:rgba(168,199,255,.6);
  transform:translateY(-2px);
  box-shadow:0 24px 54px rgba(3,8,18,.55),0 0 0 4px rgba(104,148,229,.12);
  outline:none;
}
.landing-promo-phone-v1300{
  position:relative;
  flex:0 0 auto;
  width:118px;
  aspect-ratio:9/16;
  border-radius:20px;
  padding:5px;
  background:linear-gradient(160deg,#2c3a55,#0f1626);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.45);
}
.landing-promo-phone-v1300 video,
.landing-promo-phone-v1300 img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:15px;
  background:#05080f;
}
.landing-promo-phone-v1300 i{
  position:absolute;
  left:50%;top:9px;
  width:32px;height:5px;
  transform:translateX(-50%);
  border-radius:3px;
  background:rgba(0,0,0,.65);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.landing-promo-phone-v1300 b{
  position:absolute;
  right:-6px;bottom:-6px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#4b82df,#7565d4);
  color:#fff;
  font-size:13px;
  box-shadow:0 0 0 3px rgba(7,11,18,.9),0 8px 18px rgba(75,130,223,.45);
}
.landing-promo-text-v1300{min-width:0;display:flex;flex-direction:column;gap:6px}
.landing-promo-text-v1300 small{
  color:#a8b9d8;
  font:800 11px/1.2 Consolas,monospace;
  letter-spacing:.14em;
}
.landing-promo-text-v1300 strong{
  font-size:clamp(17px,1.4vw,20px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
}
.landing-promo-text-v1300 span{
  color:#b9c7e0;
  font-size:13.5px;
  line-height:1.5;
  word-break:keep-all;
}
.landing-promo-text-v1300 em{
  margin-top:4px;
  font-style:normal;
  color:#cfe0ff;
  font-size:12.5px;
  font-weight:700;
}
/* 2026-09-13 — 화이트 모드에서 「크게 보기 ▶」가 연한 하늘색이라 안 보였다(사장님: "문구가 안보여").
   위 색들은 다크 기준이라, 다크가 아닐 때(data-theme 없음 = 화이트) 글자색을 진하게 덮는다. */
html:not([data-theme="dark"]) .landing-promo-text-v1300 small:not(#_){color:#5b6b85}
html:not([data-theme="dark"]) .landing-promo-text-v1300 span:not(#_){color:#3f4c62}
html:not([data-theme="dark"]) .landing-promo-text-v1300 em:not(#_){color:#2f62ad}
html:not([data-theme="dark"]) .landing-promo-v1300:hover .landing-promo-text-v1300 em:not(#_){color:#1f4d94;text-decoration:underline;text-underline-offset:3px}

/* 크게 보기 */
.landing-promo-modal-v1300{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,6,12,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.landing-promo-dialog-v1300{
  position:relative;
  width:min(calc((100svh - 48px) * 9 / 16),calc(100vw - 48px),560px);
  aspect-ratio:9/16;
  border-radius:22px;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
}
.landing-promo-dialog-v1300 video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* 2026-09-13 — 「크게 보기의 ✕ 가 이상하다」(사장님 제보). 실측: ✕ 가 오른쪽 위가 아니라
   **왼쪽 위 바깥**(708,34 — 판은 718 부터)에, 밝은 유리 알약 모양으로 앉아 있었고 영상까지 38px 아래로 밀렸다.
   원인은 arife-glass-pages-v600.css 의 「모든 단추에 유리 살갗」 규칙 — html body[data-glass-page]… button
   이 !important 로 배경·테두리·글자색을 덮고, 같은 파일이 position:relative 로 바꿔 right/top 이 흐름 위치의
   어긋남이 됐다(.fg-kill 과 똑같은 사고). 그 파일의 비켜 갈 목록에도 넣었지만, 다음에 또 같은 규칙이 생겨도
   버티도록 여기서도 특이도를 올리고 !important 로 못 박는다. 글자 ✕ 대신 SVG 선(굵기 2.2)이라 폰트에 안 흔들린다. */
html body .landing-promo-dialog-v1300 .landing-promo-close-v1300:not(#_){
  position:absolute!important;
  top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;
  z-index:2;
  width:38px!important;height:38px!important;
  margin:0!important;padding:0!important;
  border:1px solid rgba(255,255,255,.18)!important;border-radius:50%!important;
  background:rgba(8,12,20,.62)!important;
  -webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(0,0,0,.45)!important;
  font-size:0;line-height:0;
  cursor:pointer;
  display:grid!important;place-items:center;
  isolation:auto!important;
  transition:background .15s ease,transform .15s ease;
}
html body .landing-promo-dialog-v1300 .landing-promo-close-v1300:not(#_) svg{display:block;width:18px;height:18px}
html body .landing-promo-dialog-v1300 .landing-promo-close-v1300:not(#_):hover,
html body .landing-promo-dialog-v1300 .landing-promo-close-v1300:not(#_):focus-visible{
  background:rgba(8,12,20,.88)!important;transform:scale(1.06);outline:none;
}
html.landing-promo-open-v1300{overflow:hidden}
.landing-promo-modal-v1300[hidden]{display:none}

@media(max-width:900px){
  .landing-promo-v1300{margin-left:auto;margin-right:auto;text-align:left}
}
@media(max-width:620px){
  .landing-promo-v1300{gap:14px;padding:12px;border-radius:18px;margin-top:24px}
  .landing-promo-phone-v1300{width:92px;border-radius:16px}
  .landing-promo-phone-v1300 video,.landing-promo-phone-v1300 img{border-radius:12px}
  .landing-promo-text-v1300 strong{font-size:16px}
  .landing-promo-text-v1300 span{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .landing-promo-v1300,.landing-promo-v1300:hover{transform:none;transition:none}
}