/* =============================================================================
 * 좁은 화면 — 작은 노트북과 휴대폰 (기획 지시 2026-09-02)
 * -----------------------------------------------------------------------------
 * 캐스티는 여태 넓은 화면 하나만 보고 만들어졌다. 사이드바가 220px 를 고정으로
 * 가져가고 본문은 남는 자리를 쓰는 구조라, 375px 짜리 휴대폰에서는 본문에
 * 155px 밖에 안 남아 화면이 가로로 밀려 나갔다(실측 2026-09-02).
 *
 * 여기서 하는 일은 넷이다.
 *   1. 사이드바를 아이콘 폭으로 줄인다. 메뉴를 없애지 않는다 — 라벨만 접고
 *      아이콘은 전부 그 자리에 남는다. 무엇이 있는지는 계속 보인다.
 *   2. 여백과 두 칸 그리드를 좁은 폭에 맞춰 한 칸으로 흘린다.
 *   3. 표는 자기 칸 안에서 가로로 스크롤한다. 표 하나 때문에 화면 전체가
 *      옆으로 밀리는 것을 막는다.
 *   4. 한 줄로 고정돼 있던 회사 정보와 화면명을 줄바꿈·말줄임으로 푼다.
 *
 * ⚠ 이 시트는 base.html 의 head 블록 뒤에 실려 모든 화면(layout·login·legal)에서
 *    맨 마지막 스타일시트다. 다른 시트가 같은 선택자를 이미 갖고 있어, 순서가
 *    앞이면 덮지 못한다. 새 규칙을 더할 때 이 시트를 다른 자리로 옮기지 않는다.
 *
 * F-8 (2026-09-10) — 브레이크포인트가 app.css·billing.css·legal.css·footer.css·
 * tour.css·login.css 6개 파일에 흩어져 있어 이 파일만 보면 720·640·960·1280 을
 * 놓쳤다. 전부 여기로 모았다 — 선택자·값은 바꾸지 않았고, 블록마다 원래 파일을
 * 주석으로 남겼다. 순서는 캐스케이드가 정한다: min-width 블록을 오름차순으로 먼저
 * (720 → 960 → 1280), 그 뒤에 901~1450 구간 블록, 그리고 max-width 블록을 내림차순으로 (1100 → 900 →
 * 720 → 640 → 560). 폭이 겹치는 두 블록(예: 푸터 min-720 과 max-900, 로그인
 * min-960 과 min-1280)은 뒤에 오는 쪽이 이기므로 이 순서를 바꾸면 안 된다. prefers-reduced-motion 은 반응형이 아니라 옮기지 않았다
 * (login.css·tour.css 에 그대로 남아 있다).
 * ========================================================================== */

/* ─── 720px 이상 — 실험실 2단 상수 표는 칸이 넓을 때만 두 칸을 걸친다(출처: app.css)
   720px 위에서만 두 칸을 걸친다 — 좁은 화면은 그리드 한 칸이 이미 240px보다
   좁아서, 무조건 span 2를 걸면 나머지 카드까지 억지로 반 칸에 눌려 잘린다
   (화면 검수, 480px 모바일에서 실측). 좁은 화면은 어차피 한 칸(전체 폭)이라
   span이 없어도 표가 카드 전체 폭을 그대로 쓴다. */
@media (min-width: 720px) {
  .lab-const-item.is-wide { grid-column: span 2; }
}

/* ─── 720px 이상 — 푸터 대표자명 | 주소 한 줄로(캐스티 유일 기존 브레이크포인트,
   위 .lab-const-item.is-wide 720px 와 통일, 출처: footer.css) */
@media (min-width: 720px) {
  .site-footer-row-rep { flex-direction: row; align-items: center; gap: 6px; }
  .site-footer-row-rep .site-footer-item:first-child { white-space: nowrap; }
  .site-footer-divider-rep { display: block; }
}

/* ─── 960px 이상 — 로그인 화면 2단 그리드(시각 패널 + 폼) 진입점(출처: login.css) */
@media (min-width: 960px) {
  .login-shell {
    display: grid;
    /* 반반으로 나눈다. 한쪽만 fr 을 주면 그쪽이 남는 폭을 전부 먹어 1440 에서
       62 대 38 이 되고, 두 패널 내용은 각자 제 칸 가운데에 있는데 경계선이
       치우쳐 화면 전체가 기울어 보인다(기획 지적 2026-09-08). 화면이 넓어질수록
       벌어지는 것도 같은 이유다.
       반반이면 남는 폭을 양쪽이 똑같이 나눠 가져 경계선이 늘 한가운데 선다 —
       넓은 화면에서 여백이 늘어도 좌우가 같아서 의도된 여백으로 읽힌다.
       안쪽 내용은 각자 상한(.login-visual-inner · .login-main-inner)이 잡아
       주므로 폼이 칸을 따라 넓어지지는 않는다. */
    grid-template-columns: minmax(360px, 1fr) minmax(480px, 1fr);
    min-height: 100vh;
  }

  .login-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 48px;
    background-color: var(--surface-1);
    background-image: radial-gradient(circle at 18% 12%, var(--b-12), transparent 55%);
    border-right: 1px solid var(--w-08);
  }

  .login-visual-inner { max-width: 440px; margin: 0 auto; width: 100%; }

  .login-main { padding: 48px 40px; }
}

/* ─── 1280px 이상 — 로그인 2단 그리드, 시각 패널이 더 넓어진 만큼 안쪽 내용도 한 단
   키운다(출처: login.css) */
@media (min-width: 1280px) {
  .login-visual-inner { max-width: 500px; }

  /* 두 칸이 반반이라 경계선은 한가운데인데, 각 칸 안에서 내용이 다시 가운데로
     가면서 경계선 양옆이 비었다 — 바깥 여백보다 가운데 틈이 넓어 보인다
     (기획 지적 2026-09-08). 바깥쪽에 여백을 더해 내용을 경계선 쪽으로 조금
     민다. 좁은 화면은 이 규칙에 안 걸리므로 눌릴 일이 없다. */
  .login-visual { padding-left: 156px; }
  .login-main { padding-right: 100px; }
}

/* ─── 1450px 이하 (범위 901~1450px) — 표가 넓은 관리자 화면 두 곳만 상자를 넘친다 ─────────────
   /admin/apify 의 「API 개요(단가 포함)」 표와 /admin/all-jobs 의 표는 열이 많아
   1450px 언저리까지도 상자(.panel)보다 넓다. 아래 900px 이하 규칙은 이미 .panel 에
   overflow-x:auto 를 줘서 표를 상자 안에서만 옆으로 흐르게 하는데, 그보다 넓은
   이 구간(900~1450px)만 빠져 있어 넘침이 문서 전체로 번졌다 — 본문이 가로로
   밀려 표의 마지막 열(과금 단가)이 화면 밖으로 잘렸다(2026-09-08 stg 자동 측정
   결함 #9, 1024·1280·1425px 에서 재현). 다른 19개 화면은 이 폭에서 넘치지
   않아 영향이 없다. 새 방식을 만들지 않고 아래와 같은 규칙을 폭만 넓혀 잇는다.
   (출처: responsive.css, 원래도 이 파일) */
@media (min-width: 901px) and (max-width: 1450px) {
  .panel { overflow-x: auto; }
}

/* ─── 1100px 이하 — 사이드바를 아이콘 폭으로 ───────────────────────────────
   접기 버튼으로 손수 만들던 상태(.app.is-collapsed)와 같은 모습이다. 새 모습을
   만들지 않고 이미 있는 것을 폭 조건으로도 켠다. 이 폭에서는 접기 버튼 자체를
   감춘다 — 이미 가장 좁은 상태라 눌러도 달라질 것이 없다. (출처: responsive.css) */
@media (max-width: 1100px) {
  .sidebar { width: 64px; padding: 20px 8px; gap: 16px; }
  .side-label,
  .side-badge,
  .side-version,
  .side-foot-value { display: none; }
  .side-logo { padding: 4px 0; }
  .side-logo img { height: 18px; margin: 0 auto; }
  .side-item,
  .side-foot-row { justify-content: center; padding: 10px 0; gap: 0; }
  .side-foot-row.is-collapse { display: none; }
  .side-foot form { width: 100%; }

  .page { padding: 24px 20px 80px; }
  .page.is-wide,
  .page.is-guide { max-width: none; }
}

/* ─── 900px 이하 — 여백·그리드·표·모달 (출처: responsive.css) ───────────────────────── */
@media (max-width: 900px) {
  /* 화면명이 길면 말줄임으로 자른다. 여태 nowrap 고정이라 오른쪽 묶음을 밀어냈다 */
  .topbar { height: auto; min-height: 52px; padding: 8px 14px; gap: 8px; }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-right { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }

  .page { padding: 20px 14px 80px; }
  .panel { padding: 16px; border-radius: 12px; }

  /* 두 칸 그리드는 한 칸으로. 채널은 칸 수를 고정하지 않고 들어가는 만큼 채운다 */
  .cond-grid { grid-template-columns: 1fr; gap: 18px; }
  .opt-grid { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

  /* 표는 자기 칸 안에서만 옆으로 흐른다 — 화면 전체가 밀리지 않는다.
     min-width 는 표가 뭉개지기 시작하는 폭이다. 이보다 좁아지면 스크롤이 생긴다 */
  .panel { overflow-x: auto; }
  .admin-table { min-width: 560px; }

  /* 모달은 화면 폭에서 좌우 12px 씩만 남기고 채운다 */
  .modal,
  .modal.is-wide,
  .modal.is-half,
  .modal.is-narrow,
  .modal.is-notice { max-width: none; width: calc(100vw - 24px); }
  .modal.is-notice { height: auto; max-height: calc(100vh - 80px); }
}

/* ─── 900px 이하 — 푸터(회사 정보·저작권) (기획 지시 2026-09-02, 출처: footer.css)
   회사 정보는 한 줄로 고정(nowrap)돼 있어 좁은 화면에서 그대로 밖으로 나갔다.
   줄바꿈을 허용하고, 오른쪽에 붙어 있던 저작권 줄도 왼쪽으로 맞춘다.
   ⚠ 원래 footer.css 는 이 규칙을 "responsive.css 가 아니라 여기 둔다 — 약관 문서
   화면(legal.html)은 레이아웃을 안 쓰고 이 시트만 부르는데, 푸터는 그 화면에도
   선다"는 이유로 자기 파일에 갖고 있었다. 지금은 legal.html·login.html 모두
   base.html 을 상속하고 base.html 이 이 시트를 모든 페이지에 이미 공통으로
   물린다(2026-09-10 확인) — 그 전제가 없어졌다. */
@media (max-width: 900px) {
  .site-footer-bar { padding: 10px 14px; }
  .site-footer-details { padding: 10px 14px 12px; }
  .site-footer-item { white-space: normal; }
  .site-footer-row-rep .site-footer-item:first-child { white-space: normal; }
  .site-footer-copyright { text-align: left; }
  .site-footer-controls { width: 100%; justify-content: flex-start; }
  .site-footer-dd-panel { right: auto; left: 0; }
}

/* ─── 720px 이하 — 투어 오버레이 라벨·카드(기획 지시 2026-08-31, 출처: tour.css)
   좁은 화면 — 설명이 서로 밀려 겹치기 쉬운 폭이다. 칸을 없애지 않고
   글자와 여백만 줄인다. */
@media (max-width: 720px) {
  .tour-label { max-width: 180px; }
  .tour-label-name { font-size: 13.5px; }
  .tour-label-text { font-size: 12px; }
  .tour-card {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    transform: translateY(10px);
    padding: 13px 14px;
  }
  .is-open .tour-card { transform: none; }
  .tour-card.is-centered { top: auto; bottom: 12px; transform: translateY(10px); }
  .is-open .tour-card.is-centered { transform: none; }
}

/* ─── 640px 이하 — 결제 화면 세 칸·크레딧 분할·비교 줄을 세로로(가로 스크롤 금지,
   출처: billing.css) */
@media (max-width: 640px) {
  .sub-grid { flex-direction: column; gap: 16px; }
  .sub-grid .sub-divider-v, .credit-hero-split .sub-divider-v { display: none; }
  .credit-hero-row { flex-direction: column; align-items: stretch; }
  .credit-hero-cta { width: 100%; }
  .credit-hero-split { flex-direction: column; gap: 10px; }
  .credit-hero-split .sub-divider-v { display: none; }
  .plan-compare { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plan-compare-arrow { display: none; }
}

/* ─── 640px 이하 — 약관 문서 padding·제목 축소(출처: legal.css) */
@media (max-width: 640px) {
  .legal-page { padding: 20px 12px 60px; }
  .legal-doc { padding: 24px 18px; }
  .legal-doc h1 { font-size: 22px; }
  .legal-doc h2 { font-size: 17px; }
}

/* ─── 560px 이하 — 휴대폰 (출처: responsive.css) ─────────────────────────────────────── */
@media (max-width: 560px) {
  .page { padding: 16px 12px 72px; }
  .page.is-history { padding: 16px 12px 72px; }
  .page-title { font-size: 20px; }
  .topbar { padding: 8px 12px; }
  /* 계정 버튼은 아이콘만 남긴다 — 이름은 눌러서 여는 내 계정 창에 그대로 있다 */
  .account-btn { padding: 4px; gap: 0; font-size: 0; }
  .account-btn .avatar { font-size: 12px; }
  .account-btn .caret { display: none; }
  .job-indicator { font-size: 11px; padding: 4px 8px; }
  .credit-badge { font-size: 11px; }
  .panel-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .panel-foot .btn { width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }
}