/* ============================================================
   ARIFE 유리 테마 v600  (2026-08-04)

   모션 전이에서 맞춘 벌을 페이지 공용으로 뺀 것.
     바탕 = 중간 회색 · 판 = 밝은 회색 유리 · 단추 = 슬레이트 블루 유리

   붙이는 곳: 홈 · 마켓 · 기업 라이선스 · AI 스튜디오 ·
             AI 이미지 · 미디어아트 · 뎁스맵 · 모션 전이
   (영화 제작소는 제외 — 아직 손대지 않은 화면이다)

   나브는 CSS 만으로는 못 잡는다. 로그인한 뒤에야 자바스크립트로
   끼워지는 스타일이 !important 로 덮기 때문이다.
   그쪽은 arife-glass-v600.js 가 직접 박는다.
   ============================================================ */
body.a-glass{
  --g-grey:191,191,191;          /* 판 */
  --g-blue:117,150,190;          /* 단추 */
  --g-ink:#14202e;
  --g-dim:#3b424e;
  --g-edge:rgba(255,255,255,.95);
  --g-line:rgba(225,234,246,.68);
  --g-shade:rgba(28,58,108,.5);

}
/* 바탕·판·단추는 '우리가 다시 지은 화면'에만 건다.
   아직 안 고친 페이지에 바탕까지 바꾸면 그 페이지 디자인이 통째로 깨진다(실측). */
body.a-glass-page{
  background:
    radial-gradient(70% 46% at 10% 6%,hsl(214 14% 68% / .85),transparent 62%),
    radial-gradient(64% 44% at 92% 10%,hsl(200 13% 70% / .8),transparent 60%),
    radial-gradient(58% 44% at 62% 98%,hsl(220 12% 66% / .78),transparent 64%),
    linear-gradient(180deg,#e7edf6,#d9e2ef 58%,#ccd8e8)!important;
  color:var(--g-ink);
}
body.a-glass-page::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 2px,transparent 2px 9px);
  opacity:.5;
}

/* ── 위쪽 띠 ─────────────────────────────────────────────
   모양(모서리·간격)은 여기서 잡는다. 색은 JS 가 박는다. */
html body.a-glass .site-nav{
  border-radius:0;
}
html body.a-glass .site-nav .nav-links{
  border-radius:999px!important;
  padding:5px!important;
  gap:3px!important;
}
html body.a-glass .site-nav .nav-links>a{
  border-radius:999px!important;
  border:1px solid transparent!important;
  padding:0 13px!important;
  min-height:32px!important;
  display:inline-flex!important;align-items:center!important;
  font-weight:800!important;
}
html body.a-glass .site-nav .nav-links>a::after{content:none!important}
html body.a-glass .site-nav .nav-pill,
html body.a-glass .site-nav .button,
html body.a-glass .site-nav [class*="credit"],
html body.a-glass .site-nav [class*="role"],
html body.a-glass .site-nav .top-role-trigger{
  border-radius:999px!important;
}
html body.a-glass .site-nav .nav-avatar-button,
html body.a-glass .site-nav .nav-avatar-button img{border-radius:50%!important}

/* ── 판 · 단추 공용 벌 ───────────────────────────────────
   페이지마다 쓰는 클래스가 달라서, 흔한 것들을 한꺼번에 잡는다. */
body.a-glass-page .card,
body.a-glass-page .panel,
body.a-glass-page .a-card,
body.a-glass-page .ws-card,
body.a-glass-page .glass,
body.a-glass-page .arife-glass-panel,
body.a-glass-page section.card{
  background:
    linear-gradient(180deg,rgba(227,235,246,.58),rgba(255,255,255,.12) 48%,rgba(234,241,250,.38)),
    rgba(var(--g-grey),.72)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5)!important;
  border:1px solid var(--g-line)!important;
  color:var(--g-ink)!important;
  box-shadow:
    0 18px 34px -16px var(--g-shade),
    inset 0 1.5px 0 var(--g-edge),
    inset 0 -1px 0 rgba(227,235,246,.58)!important;
}

body.a-glass-page .button,
body.a-glass-page .btn,
body.a-glass-page .a-btn,
body.a-glass-page .ws-btn,
body.a-glass-page .nav-pill,
body.a-glass-page .chip,
body.a-glass-page .pill{
  position:relative;isolation:isolate;
  border:1px solid var(--g-line)!important;
  background:
    linear-gradient(180deg,rgba(227,235,246,.6),rgba(255,255,255,.1) 48%,rgba(234,241,250,.38)),
    rgba(var(--g-blue),.32)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6)!important;
  color:#14202e!important;
  box-shadow:
    0 14px 26px -12px var(--g-shade),
    0 3px 6px -3px rgba(28,58,108,.35),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(229,237,248,.5),
    inset -1px 0 0 rgba(229,237,248,.5),
    inset 0 -11px 18px -12px rgba(255,255,255,.9)!important;
}
body.a-glass-page .button::before,
body.a-glass-page .btn::before,
body.a-glass-page .a-btn::before,
body.a-glass-page .ws-btn::before,
body.a-glass-page .nav-pill::before,
body.a-glass-page .chip::before,
body.a-glass-page .pill::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:5%;right:5%;top:1px;height:50%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.12) 70%,rgba(255,255,255,0));
}
body.a-glass-page .button:active,
body.a-glass-page .btn:active,
body.a-glass-page .a-btn:active,
body.a-glass-page .ws-btn:active,
body.a-glass-page .nav-pill:active,
body.a-glass-page .chip:active,
body.a-glass-page .pill:active{
  box-shadow:inset 0 4px 9px rgba(30,60,110,.4),inset 0 -1px 0 rgba(227,235,246,.58)!important;
}
body.a-glass-page .button.primary,
body.a-glass-page .btn.primary,
body.a-glass-page .a-btn.primary,
body.a-glass-page .ws-btn-main,
body.a-glass-page .nav-pill.primary{
  background:
    linear-gradient(180deg,rgba(233,240,249,.42),rgba(255,255,255,.04) 46%,rgba(255,255,255,.16)),
    rgba(28,86,190,.9)!important;
  color:#fff!important;
}

/* 글은 어두운 바탕용으로 쓰여 있다 — 밝은 판 위로 옮긴다 */
body.a-glass-page h1,body.a-glass-page h2,body.a-glass-page h3,
body.a-glass-page h4,body.a-glass-page strong,body.a-glass-page b{color:var(--g-ink)!important}

/* ── 어두운 덮개 위의 글자 v5200 (2026-08-31) ─────────────────
   위 규칙은 b·strong·제목을 **화면 어디에 있든** 어두운 잉크로 칠한다.
   그래서 어두운 가림막 위에 얹힌 글자까지 어두워져 안 읽혔다 —
   실사 VFX 의 「효과를 입히는 중입니다」가 어두운 막 위에서 사라졌다(실측).

   덮개 쪽이 스스로 "여기는 어둡다"고 말할 수 있게 표식을 하나 둔다.
   data-on-dark 가 붙은 가지 안에서는 글자가 그 덮개의 색을 따른다.
   앞으로 어두운 막을 만들 때는 이 표식만 붙이면 된다. */
html body:not(#_o1):not(#_o2):not(#_o3) [data-on-dark] :is(h1,h2,h3,h4,strong,b,p,li,span,em,i){
  color:inherit!important;
}
html body:not(#_o1):not(#_o2):not(#_o3) [data-on-dark] small{
  color:rgba(255,255,255,.78)!important;
}
body.a-glass-page p,body.a-glass-page li,body.a-glass-page small,
body.a-glass-page span:not([class*="credit"]):not([class*="role"]){color:inherit}
body.a-glass-page .muted,body.a-glass-page .dim,body.a-glass-page .sub{color:var(--g-dim)!important}

/* 유리를 못 쓰는 브라우저 — 글자가 안 읽히면 안 된다 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.a-glass-page .card,body.a-glass-page .panel,body.a-glass-page .a-card,
  body.a-glass-page .ws-card,body.a-glass-page .glass{background:#c9ccd2!important}
  body.a-glass-page .button,body.a-glass-page .btn,body.a-glass-page .a-btn,
  body.a-glass-page .ws-btn,body.a-glass-page .nav-pill,body.a-glass-page .chip,
  body.a-glass-page .pill{background:linear-gradient(180deg,#c2cfe0,#a4b6ce)!important}
}

/* 잠긴 메뉴 글자가 밝은 띠 위에서 안 읽혔다 */
html body.a-glass .site-nav .nav-links a{color:#4a5870!important}
html body.a-glass .site-nav .nav-links a.active,
html body.a-glass .site-nav .nav-links a[aria-current="page"]{color:#0d151f!important}

/* ============================================================
   첫 그림부터 밝게 — 새로고침 깜빡임 없애기
     예전에는 자바스크립트가 나브 색을 칠할 때까지(=DOM 다 읽은 뒤)
     어두운 옛 나브가 잠깐 보였다.
     여기서 CSS 로 먼저 칠해 두고, JS 는 나중에 끼어드는
     로그인용 스타일을 되받는 용도로만 남긴다.
     무게(:not(#_):not(#_))는 나중에 끼는 시트와 겨루려고 붙였다.
   ============================================================ */
html body.a-glass .site-nav:not(#_):not(#_){
  background:
    linear-gradient(180deg,rgba(229,237,248,.5),rgba(255,255,255,.08) 52%,rgba(255,255,255,.22)),
    rgba(227,235,246,.58)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6)!important;
  border-bottom:1px solid rgba(227,235,246,.58)!important;
  box-shadow:0 10px 26px -14px rgba(28,58,108,.5),inset 0 1.5px 0 rgba(255,255,255,.9)!important;
}
html body.a-glass .site-nav .nav-links:not(#_):not(#_){
  background:
    linear-gradient(180deg,rgba(229,237,248,.5),rgba(255,255,255,.06) 50%,rgba(255,255,255,.24)),
    rgba(229,237,248,.5)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(227,235,246,.58),0 8px 18px -10px rgba(28,58,108,.45)!important;
}
html body.a-glass .site-nav .nav-links>a:not(#_):not(#_){color:#4a5870!important;background:transparent!important}
html body.a-glass .site-nav .nav-links>a.active:not(#_):not(#_),
html body.a-glass .site-nav .nav-links>a[aria-current="page"]:not(#_):not(#_){
  color:#0d151f!important;
  background:
    linear-gradient(180deg,rgba(234,241,250,.38),rgba(255,255,255,.04) 52%,rgba(255,255,255,.2)),
    rgba(150,190,242,.8)!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:inset 0 3px 8px rgba(16,24,36,.32),inset 0 -1px 0 rgba(227,235,246,.58)!important;
}
html body.a-glass .site-nav .brand:not(#_):not(#_){color:#14202e!important}
html body.a-glass .site-nav .company-logo:not(#_):not(#_){filter:invert(1) brightness(.35)!important}
html body.a-glass .site-nav .menu-button:not(#_):not(#_){color:#14202e!important;background:transparent!important}

/* 자리는 CSS 가 잡는다 — JS 는 색만 만진다.
   높이를 못 박아 두면 글꼴이 늦게 와도 단추가 커졌다 작아지지 않는다(팅김 방지). */
html body.a-glass .site-nav .nav-pill:not(#_):not(#_),
html body.a-glass .site-nav .button:not(#_):not(#_),
html body.a-glass .site-nav .top-role-trigger:not(#_):not(#_){
  min-height:40px!important;
  display:inline-flex!important;align-items:center!important;
  border-radius:999px!important;
}

/* 내용이 짧은 화면에서는 몸통(body) 아래로 어두운 html 이 비쳤다 */
html:has(body.a-glass-page){background:#dbe3ef!important}
html body.a-glass-page{min-height:100vh}

/* 드롭다운 묶음 안의 메뉴 글자도 밝은 띠에 맞춘다 */
html body.a-glass .site-nav .nav-group a:not(#_):not(#_),
html body.a-glass .site-nav .nav-sub a:not(#_):not(#_){color:#4a5870!important}

/* ══════════════════════════════════════════════════════════
   v900 (2026-09-01) — 밝은 화면에서도 어두운 딱지
     위의 `body.a-glass-page b{color:var(--g-ink)}` 와
     `… main article *{color:#1b2430}` 는 글자를 화면 어디에 있든
     어둡게 칠한다. 그런데 아래 딱지들은 밝은 화면에서도 짙은 남색
     판이라, 그 위의 글자까지 어두워져 사라졌다.
       · 결제 완료·실패·대여 완료의 「안전 이용 ↗」 화살표 … 1.35:1
       · 수익 구조의 번호 딱지 01~05 …………………………… 1.43:1
     판이 어두우면 글자는 밝아야 한다. 두 쪽 다 그렇다.
     (2026-09-01 전체 쪽 실측 — 어두운 쪽에는 이런 뒤집힘이 없었다)
     글자만 밝게 하면 모자랐다 — 쪽에 따라 이 딱지의 바탕까지 밝아져
     이번엔 밝은 글자가 밝은 바탕에 묻혔다(맞춤 제작 쪽, 1.26:1).
     그래서 바탕과 글자를 한 쌍으로 붙들어 둔다. 짝을 지어야 어긋나지 않는다.
   ══════════════════════════════════════════════════════════ */
html body:not(#_o1):not(#_o2):not(#_o3):not(#_o4) button.trust-guide-open-v310>b{
  background:linear-gradient(145deg,#465ab8,#252d6d)!important;
  border-color:#7080df!important;
  color:#bdeeff!important;-webkit-text-fill-color:#bdeeff!important;
}
html body:not(#_o1):not(#_o2):not(#_o3):not(#_o4) .money-flow-v2 article>span{
  background:linear-gradient(145deg,#315c91,#34377e)!important;
  border-color:#73a7ff!important;
  color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
}