/* ══════════════════════════════════════════════════════════════
   ARIFE 모바일 보정 v100 — 2026-08-24
   실제 휴대폰(안드로이드·카카오 인앱 브라우저, 화면 폭 약 390px)에서
   확인된 겹침·쏠림·글자 깨짐을 잡는다. 데스크톱 화면은 건드리지 않는다.
   구조는 그대로 두고 좁은 화면에서만 자리를 다시 잡는다.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {

  /* ── 1. 가로로 밀려나는 것을 막는다 ─────────────────────────
     한 군데라도 화면보다 넓으면 페이지 전체가 좌우로 흔들린다. */
  html:not(#_a), body:not(#_a) { max-width: 100% !important; overflow-x: hidden !important; }

  /* ── 2. 프로필(아바타) 메뉴가 화면 왼쪽 밖으로 나가던 것 ──────
     메뉴는 아바타 단추에 매달려 있었다. 그 단추가 화면 가운데쯤에
     있어서, 316px 짜리 메뉴가 왼쪽으로 뻗다가 화면 밖으로 53px 잘렸다
     (실측: x = -53). 좁은 화면에서는 단추가 아니라 화면에 맞춘다. */
  html body:not(#_a):not(#_b) .nav-avatar-menu {
    position: fixed !important;
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 92px) !important;
    max-height: calc(100dvh - 92px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 3. 기업 라이선스 상품 팝업 ────────────────────────────
     'RIGHTS VERIFIED' 배지가 글자 위에 겹쳐 앉아 있었다
     (실측: 배지 x=236~354, 이용범위 글자 x=34~257). 배지를 위로 올리고
     설명 묶음은 한 줄에 하나씩 쌓는다. */
  /* 이 배지는 아이디 다섯 겹(:not(#nope)…:not(#____))으로 bottom:14px 이 박혀 있다
     (arife-enterprise-license.css:880). 좁은 화면에서는 그 자리가 바로 글자 위였다
     (실측: 배지 x=236~354 / 이용범위 글자 x=34~257 — 겹침). 여섯 겹으로 되받아
     왼쪽 위로 올린다. 오른쪽 위는 닫기(×) 단추 자리라 비워 둔다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-request-preview__visual > span {
    position: absolute !important;
    top: 10px !important; left: 10px !important;
    right: auto !important; bottom: auto !important;
    z-index: 6 !important;
  }
  /* 제목이 썸네일 띠 위에 얹히면 글자가 묻힌다. 아래로 깔개를 깔아 읽히게 한다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .ent-overlay-card-v4300 {
    background: linear-gradient(180deg, rgba(6,12,22,0), rgba(6,12,22,.82) 26%, rgba(6,12,22,.94)) !important;
    padding-top: 24px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .ent-overlay-card-v4300 h2 { font-size: 17px !important; line-height: 1.3 !important; }

  /* ── 4. 거래 데스크 팝업(판매자·기업 등록) ──────────────────
     팝업이 94vw 에 테두리·여백까지 먹어서 안쪽 화면 폭이 355px 로
     줄고, 그 안의 글씨가 제 모바일 규칙을 못 받아 단추 글자가
     '기업 판매자 등록 완 / 료' 로 잘렸다. 좁은 화면에서는 거의
     전체 화면으로 열어 안쪽에 폭을 온전히 내준다. */
  html body:not(#_a):not(#_b) .dk-pop {
    width: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: auto !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  html body:not(#_a):not(#_b) .dk-pop header { padding: 12px 14px !important; }

  /* ── 5. 단추 안에서 낱말이 두 동강 나는 것 ───────────────────
     '등록 완 / 료' 처럼 낱말 가운데가 끊기면 다 만든 화면도 부서져
     보인다. 줄은 넘기되 낱말은 지키게 한다. */
  html body:not(#_a):not(#_b) button,
  html body:not(#_a):not(#_b) .button,
  html body:not(#_a):not(#_b) a.button {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

/* ── 2026-08-24 (2차) — 좁은 화면 팝업 훑기 ─────────────────────────── */
@media (max-width: 680px) {

  /* 마켓 계약 팝업: 두 칸짜리 표가 한쪽 칸에만 몰려 글자가 네 줄로 접혔다.
     arife-market-clean-v120.css 가 아이디 다섯 겹으로 두 칸을 못박아 두어
     여섯 겹으로 되받아 한 칸으로 편다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .contract-modal .contract-summary {
    grid-template-columns: 1fr !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .contract-modal .contract-summary > * {
    grid-column: 1 / -1 !important;
  }

  /* 라벨 자간이 0.1em 이라 한글이 흩어져 보였다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .contract-modal .contract-summary small,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .contract-modal .contract-summary dt {
    letter-spacing: .01em !important;
  }

  /* 닫기(×)가 스크롤과 함께 화면 위로 사라져 팝업을 못 닫았다.
     제목줄을 붙박이로 두어 항상 손에 닿게 한다.
     (.contract-panel 의 backdrop-filter 가 fixed 를 가둬서 sticky 로 푼다) */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .contract-modal .contract-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 14 !important;
    background: #fff !important;
    margin: 0 -16px 6px !important;
    padding: 10px 16px 8px !important;
    box-shadow: 0 10px 14px -14px rgba(4, 12, 22, .5) !important;
  }
}

@media (max-width: 680px) {
  /* 검수 센터: 목록이 760px 로 못박혀 카드가 화면 밖으로 밀려 옆으로 끌어야 했다.
     좁은 화면에서는 가로 스크롤을 걷어내고 세로로 쌓는다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .admin-list {
    min-width: 0 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .mg-scroll-v2400 {
    overflow-x: visible !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.admin-card-head, .admin-card-meta, .admin-card-actions) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (max-width: 680px) {
  /* 기업 라이선스 팝업의 영상 자리가 새까맣게 비어 보이던 것.
     미디어파사드용 영상이 1600×240 처럼 가로로 아주 길어서, 정사각에 가까운
     칸에 넣으면 위아래가 전부 검은 띠였다. 칸 높이를 영상에 맞추고,
     제목·가격 카드는 영상 위가 아니라 아래로 내린다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-request-preview__visual {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: hidden !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-request-preview__visual > :is(video, img) {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .ent-overlay-card-v4300 {
    position: static !important;
    inset: auto !important;
    padding: 14px !important;
    background: rgba(6, 12, 22, .94) !important;
  }
}

@media (max-width: 680px) {
  /* 판매자 등록·상품 등록 같은 절차 화면. 바깥 여백이 세 겹으로 겹쳐
     380px 화면에서 글자가 들어갈 자리가 226px 밖에 남지 않았고,
     제목이 43px 이라 "판매자 / 정보를 / 등록하고," 처럼 낱말마다 줄이 바뀌었다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .flow-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .flow-head {
    padding: 22px 16px 18px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .flow-head h1 {
    font-size: clamp(23px, 7vw, 31px) !important;
    line-height: 1.24 !important;
  }
}

@media (max-width: 680px) {
  /* 같은 절차 화면의 안쪽 카드들 — 여백을 줄이고, 뒤에 깔린 장식 덩어리가
     본문 글자를 흐리게 덮던 것을 옅게 낮춘다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.flow-visual, .flow-form) {
    padding: 22px 16px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .flow-visual h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .flow-sculpture {
    opacity: .34 !important;
  }
}

/* ══ 2026-08-24 (3차) — 폰에서는 창이 아니라 화면 ═══════════════════
   떠 있는 창은 손가락으로 쓰기 나쁘다. 좁은 화면에서는 팝업을
   화면 가득 채운 "넘어간 페이지"로 바꾸고, 맨 위에 [← 뒤로]를 둔다. */
@media (max-width: 680px) {

  /* 뒤에 깔리던 어둑한 막 — 페이지가 되었으니 필요 없다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.contract-backdrop, .license-modal__backdrop, .unified-modal-backdrop,
        .ws-modal-backdrop, .image-modal-backdrop, .dk-pop-back, .stb-veil, .ez-pop-back) {
    display: none !important;
  }

  /* 팝업 바깥틀 — 화면을 꽉 채운다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.contract-modal, .license-modal, .market-preview-modal, .enterprise-media-modal,
        .image-modal, .unified-library-modal, .unified-result-modal, .unified-model-modal,
        .ws-modal, .stb-sheet, .mo-pop, .dp-pop, .ez-pop) {
    position: fixed !important;
    inset: 0 !important;
    /* 가운데 맞추려고 걸어 둔 translate(-50%,-50%) 를 풀어 준다.
       안 풀면 화면 밖(-195,-422)으로 나가 앉는다(실측 2026-08-24). */
    transform: none !important;
    width: auto !important;
    max-width: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #eef3fa !important;
    z-index: 4000 !important;
  }

  /* 안쪽 판 — 폭을 온전히 내주고, 스스로 굴러가게 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.contract-dialog, .license-modal__dialog, .enterprise-media-modal__dialog,
        .ws-modal-dialog, .unified-modal-dialog, .market-preview-dialog) {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* 맨 위 [← 뒤로] 줄 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(120, 150, 190, .26) !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-back {
    flex: none !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(120, 150, 190, .38) !important;
    border-radius: 11px !important;
    background: #f3f7fd !important;
    color: #17324f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #4a5b70 !important;
    font-size: 13px !important;
  }

  /* 원래의 × 는 그대로 둔다. [← 뒤로] 가 붙지 않는 경우가 있어도
     닫을 길이 사라지면 안 되기 때문이다. */

  /* 뒤 페이지 굴림 잠금은 걷어냈다.
     html 에 overflow:hidden 을 걸면 안드로이드 크롬이 굴린 자리를 0 으로
     되돌려 버려서, 판을 여닫을 때마다 화면이 위로 튕겼다(폰 실측 2026-08-24).
     판 자체가 fixed·inset:0 로 화면을 덮고 overscroll-behavior:contain 이
     걸려 있으므로 잠글 까닭이 없다. */
}

@media (max-width: 680px) {
  /* ☰ 차림표 — 알약 모양 띠가 아니라 화면을 채운 고르는 판으로.
     지금까지는 판 높이가 68px 로 굳어 있어서 항목들이 판 밖으로 흘러
     뒤의 글자와 겹쳐 읽히지 않았다(폰 실측). */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .nav-links.open {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 10px 12px calc(24px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .nav-links.open > a {
    width: auto !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  /* 기업 라이선스 팝업 뒤에 떠 있던 장식 구슬 — 글자를 덮어 가렸다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-preview__orb {
    display: none !important;
  }

  /* 굴릴 때 깜박이던 것 — 카드마다 잡아 두던 그림 층과 3차원 기울기,
     손가락 화면에서는 쓰이지도 않으면서 매 프레임 다시 그리게 만들었다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.market-card, .market-art, .market-orbit, .enterprise-license-card) {
    will-change: auto !important;
    transform-style: flat !important;
    perspective: none !important;
    filter: none !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .market-card.is-reveal-pending {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (max-width: 680px) {
  /* 눌러서 펼쳐지던 차림표들도 페이지로 — 프로필 · 역할 바꾸기 · 작업 공간.
     지금까지는 반투명한 카드로 떠 있어 뒤 글자가 비쳐 보였다(폰 실측). */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.nav-avatar-menu, .top-role-menu, .nav-workspace-menu) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: auto !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f2f6fc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 4000 !important;
  }
  /* 판 안쪽 줄들은 손가락에 맞게 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.nav-avatar-menu, .top-role-menu, .nav-workspace-menu) :is(a, button) {
    min-height: 48px !important;
  }
  /* 이 판들은 안쪽 [← 뒤로] 줄이 화면 폭을 온전히 쓰게 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.nav-avatar-menu, .top-role-menu, .nav-workspace-menu) > .amp-bar {
    margin: 0 0 8px !important;
  }

  /* 팝업을 닫는 ✕ — 폭이 28~38px 이라 손가락 끝이 자꾸 빗나갔다.
     일괄 44px 규칙은 높이만 올리므로(폭은 글자 폭 그대로) 여기서 폭까지 세운다.
     실측 2026-08-25: .unified-modal-close-v216 38x44, 서랍 머리 ✕ 28x44. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.unified-modal-close-v216, .contract-close, .license-modal-close,
        .enterprise-media-modal__close, .mo-pop-close, .dp-pop-close, .dp-pop-x,
        .ez-pop-x, .ez-pop-back, .stb-sheet-x,
        [class*="modal-close"], [class*="preview-close"]) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ══ 굴릴 때 깜박이던 것 ═══════════════════════════════════════════
   2026-08-24 — 흐림(backdrop-filter)을 통째로 껐다가 되돌렸다.
   마켓의 ▶미리보기 단추처럼 "배경은 투명하고 흐림만으로 그려지던"
   유리 조각들이 통째로 사라졌기 때문이다(폰 실측). 흐림은 그 자체가
   그림인 곳이 있어서 일괄로 끄면 안 된다.

   대신 층을 미리 잡아 두는 will-change 만 걷어낸다. 나브와 차림표의
   흐림은 유리 칠 스크립트가 좁은 화면에서 불투명색으로 갈아입히므로
   거기서 이미 사라진다. */
@media (max-width: 680px) {
  html:not(#_a):not(#_b):not(#_c) * {
    will-change: auto !important;
  }
}

/* ══ 폰의 맨 윗줄 — 셋만 남긴다 ════════════════════════════════════
   [←]  ARIFE  [◯프로필]

   .site-nav 는 flex 가 아니라 grid(96px 92px 152px) 다. 뒤로 단추를
   그냥 넣었더니 넷째 칸이 되어 ☰·크레딧·마이페이지가 둘째 줄로 밀려
   본문 위에 떠 버렸다(폰 실측 2026-08-24).

   그래서 칸을 새로 짜고, ☰ 와 마이페이지 단추는 감춘다.
   ☰ 안의 길들은 스크립트가 프로필 차림표 안으로 옮겨 넣는다. */
@media (max-width: 680px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto 46px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  /* 뒤로 — 첫째 칸 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-navback {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(150, 175, 205, .5) !important;
    border-radius: 13px !important;
    background: #e3ecf8 !important;
    color: #17324f !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  /* 이름 — 가운데 칸 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  /* 크레딧과 프로필 — 셋째·넷째 칸. .nav-actions 는 자리를 잡아 주는
     껍데기라 격자에 펼쳐 두고, 그 안의 크레딧·프로필만 남긴다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav .nav-actions {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  /* 크레딧 — 어느 페이지에서나 같은 자리, 로고 오른쪽 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav .nav-credit-chip {
    display: inline-flex !important;
    align-items: center !important;
    flex: none !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* ☰ 와 마이페이지 단추 — 프로필 안으로 들어갔으니 윗줄에서는 뺀다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav .menu-button,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav .nav-actions > :is(a, button):not(.nav-avatar-button):not(.nav-credit-chip):not(.nav-avatar):not(.amp-navback) {
    display: none !important;
  }

  /* 첫 화면처럼 뒤로가 없는 곳은 이름을 왼쪽에 그대로 둔다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav:not(:has(.amp-navback)) {
    grid-template-columns: minmax(0, 1fr) auto 46px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav:not(:has(.amp-navback)) .brand {
    grid-column: 1 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav:not(:has(.amp-navback)) .nav-actions {
    grid-column: 2 / 4 !important;
  }

  /* 굴림막대 — 폰에서는 어디에도 두지 않는다. 손가락으로 끌 일이 없고,
     칸 안쪽 막대까지 나오면 테두리를 먹어 글자가 잘렸다(폰 실측). */
  html:not(#_a):not(#_b),
  html:not(#_a):not(#_b) body,
  html:not(#_a):not(#_b) body * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html:not(#_a):not(#_b)::-webkit-scrollbar,
  html:not(#_a):not(#_b) body::-webkit-scrollbar,
  html:not(#_a):not(#_b) body *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

@media (max-width: 680px) {
  /* 프로필 차림표 맨 앞에 옮겨 붙인 ☰ 의 길들 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-folded {
    display: block !important;
    padding: 4px 12px 10px !important;
    border-bottom: 1px solid rgba(150, 175, 205, .3) !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-folded-head {
    padding: 8px 2px 6px !important;
    color: #5a6b80 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }

  /* 2026-08-27 — 누를 수 있는 제목(「AI 영화 제작소」)만 따로.
     .amp-folded > a 규칙이 48px 짜리 메뉴 칸으로 그리려 들기 때문에
     제목 모양은 지키면서 손가락 크기만 확보한다. 「›」 로 눌리는 것임을 알린다.
     아이디 여섯 겹 — 위의 다섯 겹 칸 규칙을 이긴다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    .amp-folded > a.amp-folded-head.is-link {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 10px 2px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: #3f5f96 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    .amp-folded > a.amp-folded-head.is-link::after {
    content: '\203A';
    font-size: 14px !important;
    opacity: .7 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-folded > a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    margin: 0 0 4px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(150, 175, 205, .28) !important;
    border-radius: 12px !important;
    background: #e9f0fa !important;
    color: #17324f !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-folded > a.is-here {
    border-color: rgba(40, 100, 200, .55) !important;
    background: #d8e6fa !important;
  }
}

/* ══ 폰에서는 없어도 되는 조작들 ═══════════════════════════════════
   칸 크기 손잡이, 목록/격자 바꾸기 — 넓은 화면에서 여러 열로 볼 때나
   뜻이 있는 것들이다. 한 열뿐인 폰에서는 자리만 차지하고 손이 걸린다.
   웹(넓은 화면)은 그대로 둔다. */
@media (max-width: 680px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.ws-view-tools, .ws-view-size, .ws-view-switch) {
    display: none !important;
  }

  /* 마켓 카드의 [미리보기] — 배경도 글자색도 투명하고 글자 크기가 0 이라
     화면에 아무것도 그려지지 않았다. 내 이번 손질 이전부터 그랬다(실측:
     이 파일을 통째로 꺼도 똑같이 안 보인다). 폰에서는 눈에 보이는
     알약으로 세워 카드 아래쪽에 둔다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .market-preview-trigger {
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    border-radius: 999px !important;
    background: rgba(9, 16, 26, .72) !important;
    color: #eef4ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    overflow: visible !important;
    z-index: 5 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .market-preview-trigger > span {
    font-size: 12px !important;
    color: #eef4ff !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .market-preview-trigger > b {
    display: inline !important;
    font-size: 13px !important;
    color: #eef4ff !important;
  }
}

/* ══ 테두리 밖으로 나가던 것들 ═════════════════════════════════════
   좁은 화면에서 판 안의 알약·글자가 칸 밖으로 삐져나와 잘렸다.
   (생성 모델 고르개의 타원, 세기 판의 숫자, 화면비·해상도 줄 …) */
@media (max-width: 680px) {
  /* 모델 고르개 — 이름들을 타원 안에 억지로 앉혀 좌우가 잘렸다.
     타원을 풀고 줄바꿈되는 알약 묶음으로 편다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.unified-model-modal, .motion-model-dialog) [class*="brand"],
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.unified-model-modal, .motion-model-dialog) [class*="family"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 10px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.unified-model-modal, .motion-model-dialog) :is([class*="brand"], [class*="family"]) > * {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* 판 안의 줄들이 오른쪽으로 넘치던 것 — 가로로는 넘치지 않게 묶는다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.unified-model-modal, .motion-model-dialog, .ws-modal, .image-modal) :is(section, article, div, ul, ol) {
    max-width: 100% !important;
  }
}

@media (max-width: 680px) {
  /* 프로필 화면의 구매·판매·운영 묶음 — 마이페이지 한 줄이면 콘솔로도
     내 계정으로도 한 번에 가므로, 폰에서는 겹쳐 두지 않는다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .nav-avatar-links {
    display: none !important;
  }

  /* 모델 고르개의 타원 — #unified-model-families 는 알약(999px)이라
     이름들이 여러 줄로 접히면 큰 타원이 되어 네 귀퉁이가 잘렸다
     (Wan→"an", Gemini→"mini"). 네모난 판으로 펴고 줄바꿈을 허락한다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(#unified-model-families, #image-model-families) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 8px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(#unified-model-families, #image-model-families) button {
    flex: none !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* 모델 한 줄 한 줄 — 규격 딱지가 이름 위에 겹쳐 앉아 둘 다 읽기 어려웠다.
     위에서 아래로 흐르게 풀어 준다. */
  /* 모델 줄들이 담긴 칸이 격자로 세 줄 높이를 똑같이 못박아 두어(125.9px씩)
     규격 딱지가 카드 아래로 잘렸다. 폰에서는 격자를 풀고 내용만큼 자라게 한다.
     (앞서 overflow:hidden 을 걸었더니 잘림이 더 심해졌다 — 걷어냈다) */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-options {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    height: auto !important;
    max-height: none !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option {
    display: block !important;
    position: relative !important;   /* "선택됨" 딱지가 이 칸을 기준으로 앉게 */
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    overflow: visible !important;
  }
  /* 그 딱지는 아래로 9px 삐져나와 있었다 — 오른쪽 위로 올린다 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option::after {
    top: 10px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-option > * {
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .unified-model-specs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 8px 0 0 !important;
  }
}

/* ══ 스튜디오 조작을 [설정] 하나로 ═════════════════════════════════
   AI 영상·모션 전이·스타일 전이·미디어아트의 알약들이 폰에서 두세 줄로
   접히며 서로 밀쳤다. 하나로 접어 두고, 누르면 전체 화면 목록을 연다. */
@media (max-width: 680px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-tucked {
    display: none !important;
  }

  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-settings-open {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(150, 175, 205, .5) !important;
    border-radius: 999px !important;
    background: #e3ecf8 !important;
    color: #17324f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* 설정 화면 자체 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-settings {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #f2f6fc !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-settings[hidden] {
    display: none !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-set-list {
    padding: 10px 12px calc(28px + env(safe-area-inset-bottom)) !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-set-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 0 8px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(150, 175, 205, .3) !important;
    border-radius: 14px !important;
    background: #e9f0fa !important;
    color: #17324f !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-set-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-set-go {
    flex: none !important;
    color: #6a7d94 !important;
    font-size: 20px !important;
  }

  /* 설정 화면도 마찬가지 — 굴림 잠금 없음(위 까닭과 같다) */
}

@media (max-width: 680px) {
  /* 기업 계약 센터가 오른쪽으로 밀려 있던 것.
     .enterprise-shell 의 34px 안쪽 여백보다 안의 판이 넓어서
     오른쪽으로 삐져나갔다(왼쪽 47px · 오른쪽 25px, 실측). */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-license-console {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px !important;
  }

  /* 초광폭 영상 위의 [⛶ 크게 보기] */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .amp-bigview {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 7 !important;
    min-height: 44px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 999px !important;
    background: rgba(9, 16, 26, .74) !important;
    color: #eef4ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
}

/* ══ 판 안쪽으로 더 들어갔을 때 어긋나던 것들 ═════════════════════ */
@media (max-width: 680px) {
  /* 설정 팝업들을 전체 화면으로 펴면서 안쪽 여백을 0 으로 만들었더니,
     원래 그 여백에 기대던 제목과 알약들이 테두리에 딱 붙어 잘렸다
     ("예시 문장" 이 왼쪽으로 잘려 나감 — 폰 실측 2026-08-24). */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.stb-sheet, .mo-pop, .dp-pop, .ez-pop) {
    padding: 0 14px calc(26px + env(safe-area-inset-bottom)) !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.stb-sheet, .mo-pop, .dp-pop, .ez-pop) > .amp-bar {
    margin: 0 -14px 6px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.stb-sheet, .mo-pop, .dp-pop, .ez-pop) > * {
    max-width: 100% !important;
  }

  /* 판이 열려 있는 동안에는 맨 윗줄을 감춘다.
     판에는 자기 [← 뒤로] 가 있는데 나브가 그 위를 덮고 있었다. */
  html.amp-open body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav {
    display: none !important;
  }

  /* 미디어아트의 "여기에 결과가 나옵니다" 칸.
     안내 글이 든 상자(172×117)가 그 칸(312×88)보다 커서 overflow:hidden 에
     잘려 나갔고, 바깥 방(.mc-room)은 571px 를 차지하고도 비어 있었다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .mc-room {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 14px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .mc-wall {
    height: auto !important;
    min-height: 0 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .mc-screen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 132px !important;
    overflow: visible !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .mc-empty {
    width: auto !important;
    max-width: 100% !important;
    padding: 14px !important;
    text-align: center !important;
  }
}

@media (max-width: 680px) {
  /* 수동 제작의 "내 보관함" 서랍.
     닫힌 자리를 translateX(268px) 로 잡아 두는데 폰에서는 서랍 폭이 380px 라
     148px 가 화면에 걸쳐 남았고, 열면 x=232~612 로 오른쪽 밖에 나가 앉아
     닫기(✕)가 x=570 — 손이 닿지 않았다(실측 2026-08-24).
     폰에서는 화면 전체를 쓰고, 닫힐 때는 완전히 밖으로 내보낸다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-lib {
    width: 100% !important;
    max-width: 100% !important;
    transform: translateX(101%) !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-app.lib-open .fg-lib {
    transform: none !important;
  }

  /* 서랍을 여는 손잡이(「내 보관함」 세로 딱지)가 왼쪽 가장자리에 떨어져
     있던 것. 원래 오른쪽에 붙어 있어야 하는데, 유리 테마의 포괄 규칙
     (arife-glass-pages-v600.css 의 "모든 단추는 position:relative")이
     더 센 자리를 차지해 흐름 속으로 떨어졌다. 제 손질 이전부터 그랬다.
     원래 자리로 되돌린다. */
  /* 손잡이는 폰에서 가로로 눕힌 알약으로. 세로 글씨(내/보/관/함)는
     넓은 화면의 가장자리 딱지용 모양이라 손가락 화면에서는 낯설다.
     오른쪽 아래, 아래 요약줄 위에 앉힌다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-libtab {
    position: absolute !important;
    writing-mode: horizontal-tb !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
    bottom: 120px !important;
    transform: none !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    border-right: 1px solid rgba(255, 255, 255, .92) !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    z-index: 12 !important;
  }

  /* 「아직 씬이 없습니다」 안내 칸이 위쪽 조작 막대와 겹치던 것.
     막대는 알약이 줄바꿈되며 길어지는데(글자 크기를 키우면 더), 안내 칸은
     화면 한가운데에 고정이라 글자가 큰 폰에서 서로 밟았다.
     안내 칸을 아래쪽에 붙여 막대와 아주 떨어뜨린다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-blank {
    top: auto !important;
    bottom: 176px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(332px, calc(100% - 28px)) !important;
  }

  /* 서랍이 열려 있는 동안에는 「내 보관함」 알약을 감춘다.
     열린 서랍 위에 그대로 떠서 목록을 가렸다(실측: y755 에 겹침).
     닫기는 서랍 머리의 ✕ 가 맡는다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-app.lib-open .fg-libtab {
    display: none !important;
  }

  /* 가장자리에 붙은 실낱 손잡이(14px)는 폰에서 지운다.
     닫혀 있을 때는 화면 오른쪽 끝에서 2px 만 걸치고, 열리면 왼쪽 −6px 로
     밀려나 잡을 수가 없었다. 여는 일은 알약이, 닫는 일은 ✕ 가 한다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-libgrip {
    display: none !important;
  }

  /* 위 조작 막대의 낱글자 단추(− + ?)가 폭 33~34px 이었다.
     높이는 일괄 규칙이 44 로 올렸지만 폭은 그대로여서 여전히 좁다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-bar > button,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .fg-lib > header button {
    min-width: 44px !important;
  }
}

@media (max-width: 680px) {
  /* AI 블렌더 머리말의 로고 줄 — 한 줄로 못박혀(nowrap) 있어서
     ARIFE 로고가 오른쪽으로 91px 잘려 나갔다(실측 2026-08-24). */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .rr-logos {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .rr-logos > * {
    flex: none !important;
    max-width: 100% !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .rr-arife {
    width: auto !important;
    height: auto !important;
    max-height: 26px !important;
  }
}

@media (max-width: 680px) {
  /* 약관·환불 정책의 목차. 한 줄로 늘어놓고 옆으로 굴리게 해 두어
     폰에서는 3번 항목부터 화면 밖(x=300~673)에 있었다. 법으로 알려야 하는
     내용의 목차라 눈에 다 보이는 편이 낫다 — 줄바꿈으로 편다. */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .trust-policy-index-v310 > div {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 7px !important;
    overflow-x: visible !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .trust-policy-index-v310 > div > a {
    flex: none !important;
    max-width: 100% !important;
  }
}

/* ══ 손가락에 안 맞던 단추들 ═══════════════════════════════════════
   2026-08-25 실측 — 마이페이지의 조작 단추들이 36~40px 이었다.
   손끝이 닿는 넓이는 보통 44px 이라, 가장자리를 누르면 빗나간다.
   "가끔 안 눌린다"의 정체가 이것이었다. 세로로 쌓인 단추들이라
   키워도 줄이 밀리지 않는다. 넓은 화면은 그대로 둔다. */
@media (max-width: 680px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.dk-seg button, .dk-dl, .dk-ext, .dk-act, .enterprise-rail-nav-v305 a) {
    min-height: 44px !important;
  }
  /* 역할 바꾸기 세 칸은 글자도 같이 키워 눌러야 할 곳이 분명해지게 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .dk-seg button {
    padding: 0 10px !important;
    font-size: 13.5px !important;
  }
  /* 프로필 동그라미(40px)는 건드리지 않는다.
     폭만 44 로 늘어나고 높이는 다른 규칙에 막혀 타원이 됐다(실측).
     구석에 홀로 있어 옆 단추와 헷갈릴 일이 없으므로 그대로 둔다. */
}

/* ══ 손가락에 맞는 크기를 기본으로 ═════════════════════════════════
   2026-08-25 — 화면마다 34~40px 짜리 단추가 흩어져 있었다(마켓 갈래,
   요금 규칙 링크, 스튜디오 알약, 영화 제작소 조작…). 하나씩 세기보다
   기준을 한 번에 세운다.

   문장 속 링크(「이용약관」처럼 글 사이에 낀 것)는 display:inline 이라
   min-height 가 애초에 먹지 않는다 — 그래서 줄이 깨지지 않는다.
   이건 우연이 아니라 이 규칙을 이렇게 쓴 까닭이다.

   아이디 다섯 겹으로 둔다. 앞서 따로 손본 자리들은 여섯 겹이라
   그대로 살아남는다. */
@media (max-width: 680px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e)
    :is(button, a[href], [role="button"], summary):not(.nav-avatar-button):not(.nav-avatar) {
    min-height: 44px !important;
  }
}

/* ══ 폰 맨 윗줄 v110 — 2026-08-29 ═══════════════════════════════════
   두 가지를 고친다.

   ① 로그아웃이면 윗줄에 아무것도 없었다.
      폰 윗줄은 [←] ARIFE [◯프로필] 셋만 남기는 규칙인데, 로그인 전에는
      프로필 동그라미가 아예 없다. 그런데 「로그인·시작하기」는 위 규칙이
      감추고 ☰ 도 감추므로, **첫 화면에 로그인할 길이 한 군데도 없었다**
      (폰 실측: .nav-actions 폭 0px, 로그인 display:none).
      프로필이 없을 때만 「로그인」을 되살린다. 「시작하기」는 그대로 둔다
      — 첫 화면 한가운데에 「제작 시작」이 이미 크게 있다.

      ★ 되살리는 규칙이 감추는 규칙보다 반드시 세야 한다. 감추는 쪽이
      아이디 여섯 겹 + 클래스 여섯이라, 이쪽은 클래스를 일곱으로 맞췄다.
      아이디 수가 같을 때는 클래스 수가 이긴다(앞서 .pricing-tag 에서
      똑같이 데었다).

   ② 로고는 늘 맨 위 가운데.
      지금까지는 뒤로 단추가 있는 화면에서만 가운데였고, 첫 화면에서는
      왼쪽에 붙어 있었다.

      ★ 격자 칸을 반드시 풀어야 한다(grid-area:auto). 격자의 자식이
      absolute 가 되면 담는 상자가 **그 칸**이라, 칸을 지정한 채 두면
      칸 안에서 가운데를 잡아 화면 기준으로는 32px 씩 밀린다(실측:
      뒤로 단추가 있을 때 중심 220 — 크레딧 칩과 겹쳤다). */
@media (max-width: 680px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav{ position:relative !important; }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav .brand{
    position:absolute !important;
    grid-area:auto !important; grid-column:auto !important; grid-row:auto !important;
    left:0 !important; right:0 !important; top:50% !important;
    transform:translateY(-50%) !important;
    width:fit-content !important; margin:0 auto !important; padding:0 !important;
    justify-self:auto !important; justify-content:center !important;
    z-index:2 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .site-nav:not(:has(.nav-avatar-button)) .nav-actions > a.nav-pill:not(.primary):not(.nav-credit-chip):not(.nav-avatar):not(.amp-navback){
    display:inline-flex !important; align-items:center !important; flex:none !important;
    min-height:38px !important; padding:0 14px !important; border-radius:999px !important;
    font-size:13.5px !important; font-weight:700 !important; white-space:nowrap !important;
  }
}

/* ══ 마이페이지 차림표를 폰에서 알약으로 ════════════════════════════
   2026-09-04 390px 실측 — 「마켓↗ · 기업 라이선스↗ · 구매·라이선스 / 맞춤 제작 의뢰」가
   테두리 없는 글자로 흩어져 줄마다 간격이 달라 배치가 어긋나 보였다.
   각 항목을 알약으로 그려 눌리는 곳이 보이게 하고, 줄은 넘치면 접는다. */
@media (max-width: 900px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-nav-v305 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-nav-v305 a {
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(110, 140, 185, .38) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-nav-v305 a.active {
    border-color: #3b74d6 !important;
    background: linear-gradient(180deg, #4f8ae6, #2f66c9) !important;
    color: #fff !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-nav-v305 a i {
    display: inline !important;
    font-style: normal !important;
    line-height: 1 !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-v305 .dk-group {
    margin: 12px 0 6px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-v305 .dk-seg-now {
    margin-bottom: 10px !important;
  }
}

/* 2026-09-04 사장님 폰 실측 — 알약 차림표가 왼쪽으로 쏠려 보였다. 폰에서는 가운데 정렬이
   제일 안정적이라는 지시. 역할 안내문·묶음 이름도 같이 가운데로. */
@media (max-width: 900px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-nav-v305 {
    justify-content: center !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-v305 .dk-seg-now,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-v305 .dk-group {
    text-align: center !important;
    justify-content: center !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .enterprise-rail-v305 .dk-seg {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ══ 폰에서는 단추·알약 줄을 가운데로 ═══════════════════════════════
   2026-09-04 사장님 폰 실측 — "전체 페이지가 다 왼쪽으로 쏠려 있다. 폰에서는
   가운데 정렬이 제일 안정적이다." 데스크톱에서 왼쪽 정렬이던 단추 줄·알약 줄·
   카드 안 링크·바닥글 링크를 폰(≤760px)에서만 가운데로 모은다.
   입력 폼 안의 단추, 도구 화면의 조작 줄, 옆으로 미는 탭 줄은 건드리지 않는다. */
@media (max-width: 760px) {
  /* 가로 줄로 늘어선 단추·알약 묶음 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.market-hero-links-v1223, .market-hero-notes-v1223, .market-hero-actions,
        .enterprise-actions, .enterprise-hero-notes,
        .pricing-fit nav, .pricing-controls, .pricing-cycle,
        .tpi-docs-v320, .sup-actions-v3100, .trust-links-v310,
        footer .footer-links, .footer .footer-links, .footer-legal-links,
        .landing-actions-v302, .mk-filters-v3700, .market-filters, .enterprise-filterbar) {
    justify-content: center !important;
    text-align: center !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .pricing-controls {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .pricing-controls > div {
    margin: 0 auto !important;
  }
  /* 카드 안에 홀로 있는 링크·단추 (홈 제작 흐름 카드, 마켓/기업 카드, 수익 구조 카드) */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.path-action-v302, .policy-link-v302, .card-link, .enterprise-button.is-primary[href*="reg-company"]) {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.landing-path-card-v302, .policy-lane) {
    text-align: center !important;
    align-items: center !important;
  }
  /* 바닥글 — 상호·주소 정보도 가운데 */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(footer .footer-biz, .footer .footer-biz, footer .footer-brand, footer .footer-top, footer .footer-note) {
    justify-content: center !important;
    text-align: center !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) footer .footer-biz span {
    display: inline-block !important;
    margin: 0 6px 4px !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) footer img,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) footer .footer-logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* 단추가 가운데로 오면 그 위 제목·설명도 같이 가운데여야 줄이 맞는다 (마켓·기업 라이선스·요금 첫 화면) */
@media (max-width: 760px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.market-hero-main, .enterprise-hero-copy, .pricing-hero > div, .pricing-fit > header > div, .pricing-controls > div) {
    text-align: center !important;
    align-items: center !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f)
    :is(.market-hero-main, .enterprise-hero-copy) > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* 바닥글 로고(a.brand)와 소개 문단도 가운데 */
@media (max-width: 760px) {
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) footer .brand,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) footer .footer-about {
    justify-content: center !important;
    text-align: center !important;
  }
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) footer .brand {
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}