/* sonjamiraa 팝업·첫 화면 배너 — 2026-11-10 이하나 대리 「2. 팝업배너 3. 메인 홈화면」(#ai_noflik_work ts 1794292438.905069) · H1110-45.
   칸은 functions.php 「sonjamiraa 팝업·첫 화면 배너」 절이 낸다. 팝업 꼴 = 11/5 가안 v2(이하나 대리 「괜찮네요」).
   글꼴 = 제목 Cosmetic(브랜드 제목 글꼴) · 나머지 본문 글꼴(11/9 stv 님 「고정폭 걷음」과 맞춤). 색 = 테마의 #111·#463863·#555·크림 #fffcf3(Gaya 띠 · stv 11/10 B안). */
.nf-sj__t { margin: 0; font-family: "Cosmetic", serif; font-weight: 400; line-height: 1.1; color: #111; }
.nf-sj__k { margin: 6px 0 0; font-family: var(--font-body-family, "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #463863; }
.nf-sj__l { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #555; }
.nf-sj__go { display: block; margin-top: 18px; padding: 14px; border-radius: 999px; background: #111; color: #fff !important; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; }

/* 팝업 */
.nf-sj-pop { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(17, 17, 17, .55); }
.nf-sj-pop[hidden] { display: none; }
.nf-sj-pop__card { display: flex; flex-direction: column; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
.nf-sj-pop__ph { position: relative; flex: 1 1 auto; min-height: 0; background: #f5f5f5; }
.nf-sj-pop__ph img { display: block; width: 100%; height: 100%; max-height: 550px; object-fit: cover; object-position: 50% 30%; }
.nf-sj-pop__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .55); color: #fff; font: 300 26px/1 Helvetica, Arial, sans-serif; letter-spacing: 0; text-indent: 0; display: grid; place-items: center; cursor: pointer; }
.nf-sj-pop__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nf-sj-pop__b { padding: 20px 22px 22px; }
.nf-sj-pop .nf-sj__t { font-size: 30px; }
@media (max-width: 767px) { .nf-sj-pop .nf-sj__t { font-size: 26px; } .nf-sj-pop__ph img { max-height: 46dvh; } }

/* 첫 화면 4번 코디룩 sonjamiraa 판 — 쿠폰 글을 사진 위에 얹는다(stv 11/10 14:00 「Don't look good with coupon and image separate」) · beranda.php 'sj'.
   폰은 4번 머리(링크 글)가 숨어 있어(style.css 1217) 이 글이 폰에서 sonjamiraa 를 알리는 자리다. */
.nf-look__go { position: relative; }
.nf-look__cp { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 20px 18px; background: linear-gradient(to top, rgba(17, 17, 17, .55), rgba(17, 17, 17, 0)); color: #fff; pointer-events: none; }
.nf-look__cp b { display: block; font-family: "Cosmetic", serif; font-weight: 400; font-size: 26px; line-height: 1.1; }
.nf-look__cp span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 749px) { .nf-look__cp { padding: 48px 20px 16px; } .nf-look__cp b { font-size: 24px; } }   /* 폰은 사진 링크 칸이 이미 화면 폭(0~390 실측)이라 옆을 늘리지 않는다 */
