/* ============================================================
   ARIFE 휴대폰에서 읽기 편하게 v1610

   왜 (390px 실측 2026-08-07 — 처음으로 휴대폰 폭을 재 봤다)
     지금까지 본 건 전부 데스크톱이었다. 390px(아이폰 기본 폭)로
     재 보니 세 가지가 걸렸다.

     ① 글씨가 작다
        기업 라이선스   .ent-spec-v4000 span        9px   × 30개
                        .enterprise-preview__top    9px   × 10개
        마켓            .mk-meta-v3700 span         9px   × 18개
                        .market-seller span         9.5px × 6개
                        칩 안 .mk-con-chip em       8.5px × 4개
        첫 화면         .path-index-v302            10px
        9px 한글은 화면에 코를 대야 읽힌다. 데스크톱에서는 '작고 단정한
        꼬리표'였는데 휴대폰에서는 그냥 안 보이는 글자가 된다.

     ② 누를 칸이 좁다
        바닥글 링크 9개가 전부 높이 33px, '문의'는 폭 24px.
        엄지 끝이 닿는 넓이는 보통 44px 로 본다. 33px 은 두세 번
        빗나가고, 빗나가면 옆 링크가 눌린다.

     ③ 약관 쪽 정책 막대가 화면 밖으로 나간다
        .trust-links-v310 은 폭 295px 자리에 604px 짜리 4칸을 넣고
        옆으로 밀어 보게 해 뒀다. 밀린다는 표시가 없어서 '03 취소·환불'
        '04 고객지원' 두 개는 있는 줄도 모르고 지나간다.
        휴대폰에서는 2×2 로 접어 넷 다 보이게 한다.

   원칙
     - 글씨는 키우되 칸을 넘기지 않는다. 꼬리표 칸들은 이미 유연한
       상자(flex·grid) 안이라 1~3px 커져도 줄만 늘어난다.
     - 데스크톱은 하나도 안 건드린다. 전부 @media(max-width:700px) 안이다.
     - 색·모양은 그대로 둔다. 크기만 만진다.
   ============================================================ */

@media (max-width:700px){

  /* ── ① 9~10px 짜리 꼬리표들 ─────────────────────────── */

  /* 기업 라이선스 — 규격칩(16:9 · 4K …), 권리 확인 도장, 아래 분류 */
  html body:not(#nope):not(#_):not(#__):not(#___) .ent-spec-v4000 > span,
  html body:not(#nope):not(#_):not(#__):not(#___) .enterprise-preview__top > span,
  html body:not(#nope):not(#_):not(#__):not(#___) .enterprise-preview__bottom > b{
    font-size:11px!important;
    letter-spacing:.04em!important;
  }

  /* 마켓 — 카드 밑 규격줄과 만든이 이름 */
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-meta-v3700 > span,
  html body:not(#nope):not(#_):not(#__):not(#___) .market-seller > span{
    font-size:11px!important;
    letter-spacing:.03em!important;
  }

  /* 마켓 거르개 칩 — 칩 글씨와 그 안의 작은 보조 글씨 */
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-chip-v3700{ font-size:11.5px!important; }
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-chip-v3700 em{ font-size:11px!important; }

  /* 첫 화면 — 길 안내 카드 번호와 정책 단계 번호 */
  html body:not(#nope):not(#_):not(#__):not(#___) .path-index-v302,
  html body:not(#nope):not(#_):not(#__):not(#___) .policy-step > span{
    font-size:11px!important;
  }

  /* ── ①-2 문장은 11px 로도 모자란다 ──────────────────
     위 것들은 꼬리표(짧은 단어)라 11px 이면 되지만,
     아래 셋은 사람이 줄 따라 읽는 '문장'이다. 12.5px 로 올린다. */
  html body:not(#nope):not(#_):not(#__):not(#___) .enterprise-license-card__rights,
  html body:not(#nope):not(#_):not(#__):not(#___) .enterprise-license-card__meta > span,
  html body:not(#nope):not(#_):not(#__):not(#___) .pricing-includes > li{
    font-size:12.5px!important;
    line-height:1.62!important;
  }

  /* ── ② 누를 칸 넓히기 ─────────────────────────────── */

  /* 바닥글 링크 — 높이 33px → 44px, 좁은 '문의' 도 손가락이 닿게 */
  html body:not(#nope):not(#_):not(#__):not(#___) .footer-links a{
    min-height:44px!important;
    padding-inline:10px!important;
    display:inline-flex!important;
    align-items:center!important;
  }
  /* 바닥글 로고도 누르는 자리다 */
  html body:not(#nope):not(#_):not(#__):not(#___) .footer .brand{
    min-height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
  }

  /* ── ③ 약관·정책 막대를 2×2 로 접는다 ───────────────
     옆으로 미는 대신 넷을 한눈에 보이게 한다. 대신 막대가
     길어지므로 화면에 붙어 따라오지 않게 한다(sticky 해제).
     붙어 있으면 844px 짜리 화면에서 150px 을 계속 잡아먹는다. */
  html body:not(#nope):not(#_):not(#__):not(#___) .trust-rail-v310{
    position:static!important;
    min-height:0!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .trust-links-v310{
    overflow-x:visible!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .trust-link-v310{
    min-height:54px!important;
  }
  /* ── ③-2 조문 색인(01~12)은 계속 옆으로 민다 — 12개라 접으면
     화면 절반을 먹는다. 대신 '오른쪽에 더 있다' 는 표시를 준다.
     위 막대가 안 붙게 됐으니 색인이 대신 차림표 바로 밑에 붙는다. */
  html body:not(#nope):not(#_):not(#__):not(#___) .trust-policy-index-v310{
    position:sticky!important;
    top:56px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .trust-policy-index-v310::after{
    content:"";
    position:absolute;
    top:6px;
    right:0;
    bottom:6px;
    width:34px;
    border-radius:0 10px 10px 0;
    background:linear-gradient(90deg,rgba(226,234,246,0),rgba(226,234,246,.96));
    pointer-events:none;
  }
}

/* ── 덧붙임: 고객지원 탭 안 작은 글씨 ────────────────
   support.html 의 탭 4개 안쪽 번호 글씨가 10.5px 이었다. */
@media (max-width:700px){
  html body:not(#nope):not(#_):not(#__):not(#___) .sup-tab-v3400 b{
    font-size:11px!important;
  }
}

/* ── 덧붙임: 정책 막대를 2×2 로 접으면 오른쪽 '안내' 단추가
   두 줄 높이로 늘어난다. 제 높이만 쓰게 붙잡아 둔다. ── */
@media (max-width:700px){
  html body:not(#nope):not(#_):not(#__):not(#___) button.trust-guide-open-v310{
    align-self:center!important;
    min-height:48px!important;
    height:48px!important;
  }
}

/* ============================================================
   마켓 조건 띠 — 휴대폰에서는 한 줄에 하나씩

   왜 (390px 실측)
     조건 띠는 데스크톱에서 12칸 격자다. 좁은 화면용 규칙이 있긴 한데
     6칸으로만 줄여 놔서 390px 에서는 한 칸이 32px 밖에 안 된다.

       검색칸        폭 177px  → '작품명, 용도, 저' 에서 잘림
       조건 지우기   폭  81px  → '조건 지' / '우기' 두 줄로 갈라짐

     둘 다 첫 화면에서 바로 보이는 자리라 인상이 나쁘다.
     휴대폰에서는 격자를 포기하고 위에서 아래로 하나씩 쌓는다.
   ============================================================ */
@media (max-width:700px){
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-console-v3700{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    padding:14px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-head-v3700,
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-slot-v3700,
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-row-v3700,
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-reset-v3700,
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-group-v3700{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    min-width:0!important;
    width:auto!important;
  }
  /* '조건 지우기' 는 한 줄로 —글자가 갈라지지 않게 폭을 다 준다 */
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-reset-v3700{
    justify-self:stretch!important;
    white-space:nowrap!important;
    min-height:44px!important;
  }
  /* 네 묶음(용도·화면비·길이·가격)도 세로로 */
  html body:not(#nope):not(#_):not(#__):not(#___) .mk-con-row-v3700{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
}

/* ============================================================
   '준비 중' 카드 (v1620)

   원본 파일이 안 붙은 작품은 결제로 갈 수 없다(서버가 막는다).
   그 사실을 카드에서 미리 보이게 한다 — 눌러 본 뒤에 알면 늦다.
   숨기지는 않는다. 판매자가 파일을 붙이면 표시가 저절로 사라진다.
   화면 크기와 무관하므로 미디어쿼리 밖에 둔다.
   ============================================================ */
html body:not(#nope):not(#_):not(#__):not(#___) .market-card.is-unready-v1620 .market-media{
  filter:saturate(.55) opacity(.72);
}
html body:not(#nope):not(#_):not(#__):not(#___) .market-badge-unready-v1620{
  border:1px solid rgba(120,140,170,.5)!important;
  background:rgba(238,243,250,.94)!important;
  color:#4a5870!important;
  font-weight:800!important;
}
html body:not(#nope):not(#_):not(#__):not(#___) .market-card.is-unready-v1620 .market-detail[disabled]{
  opacity:.6!important;
  cursor:not-allowed!important;
  filter:grayscale(.6)!important;
}

/* ============================================================
   v1630 — 좁은 화면에서 위쪽 막대가 옆으로 넘치던 것 (390px 실측 2026-08-14)

   왜
     크레딧 칩이 뜨는 페이지(AI 이미지 등)에서 위쪽 막대 오른쪽 묶음이
     [◈크레딧칩][역할 전환][내 콘솔 열기][내 계정] 넷이 되면서
     390px 화면에서 60px 가 옆으로 삐져나갔다. 다른 페이지는 칩이 없어
     괜찮았고, 화면을 옆으로 밀면 전체가 흔들리는 상태였다.

   어떻게 (주입 실험으로 390px 에서 384px 확인)
     520px 아래에서만 위쪽 막대를 조인다.
     ① 막대 속 여백 16→12px, 칸 사이 14→8px
     ② 로고 96→78px
     ③ 칩 — ◈ 기호를 내리고 숫자만, 속을 얇게 (97px → 약 60px)
     ④ 오른쪽 묶음 간격 6px, 알약 단추 속 10px
     내용은 그대로, 데스크톱은 안 건드린다.
   ============================================================ */
@media (max-width:520px){
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav{
    padding:0 12px!important;
    gap:8px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav .brand img{
    width:78px!important;
    height:auto!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav .nav-actions{
    gap:6px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav .nav-credit-chip{
    padding:0 8px!important;
    min-height:34px!important;
    border-radius:10px!important;
    gap:3px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav .nav-credit-chip i{
    display:none!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav .nav-credit-chip b{
    font-size:12px!important;
  }
  html body:not(#nope):not(#_):not(#__):not(#___) .site-nav .nav-actions .nav-pill{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* 2026-09-04 390px 실측 — 첫 화면 「기업은 라이선스로 빌립/니다」, 이용약관 「약/관」처럼
   제목이 글자 중간에서 꺾였다. 한국어 제목·단추 글자는 어절 단위로만 줄을 바꾼다. */
@media (max-width:760px){
  h1, h2, h3, .hero-title, .section-title, button, .btn, a.button, [class*="btn"], .pricing-card h3, .plan-review-dialog-v308 h2{
    word-break:keep-all; overflow-wrap:anywhere;
  }
}