/* v2 앱 셸 — 화면 바깥(문서·본문 기본값)만 담당한다.
 *
 * 화면 안쪽은 전부 아트보드의 인라인 스타일이 그린다. 이 파일에 컴포넌트
 * 클래스를 만들지 않는다 — 만드는 순간 시안 대신 그 클래스가 정본이 된다.
 *
 * 아래 전역 규칙은 캔버스 <helmet> 의 것을 그대로 옮긴 것이다. 아트보드
 * 마크업이 이 값을 전제로 그려져 있어서(특히 b/strong 600, a 색·밑줄 없음)
 * 빠지면 이식한 화면이 시안과 다르게 보인다.
 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 캔버스 <helmet> 전역 규칙 그대로. 다만 a 의 색은 상속으로 둔다 — 시안은 링크
   자리도 span 으로 그리고 색을 인라인으로 지정해 뒀다. */
a { color: inherit; text-decoration: none; }

/* 시안은 버튼·입력칸도 span 으로 그려 놨다. a/button/input/label 로 바꿔도 그림이
   달라지지 않게 브라우저 기본값을 span 과 같게 맞춘다. 이 규칙이 없으면 버튼에
   기본 패딩(1px 6px)·테두리·글꼴이 붙어 시안과 어긋난다 —
   tests/test_v2_transplant.py 가 그 차이를 잡는다. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: var(--placeholder); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
b, strong { font-weight: 600; }

/* 한글 줄바꿈 — 단어 중간에서 끊지 않는다(랜딩 정본과 같은 규칙) */
p, h1, h2, h3 { word-break: keep-all; }

/* 이식한 아트보드가 앉는 자리. 프레임의 고정폭(375/1440)은 벗겼고,
   나머지 선언(padding·gap·color…)은 화면의 인라인 style 로 따라와 있다. */
.screen {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
}

/* 모바일 템플릿을 데스크톱에서 볼 때는 480px 중앙 정렬 —
   캔버스 메모: "조회 4단계·온보딩 1단계는 데스크톱에서 모바일 레이아웃을
   480px 폭으로 가운데 정렬". ?_d=mobile 검수도 이 폭으로 본다. */
body.v2-mobile .screen { max-width: 480px; }

/* PC 아트보드는 1440 고정 설계다. 더 넓은 화면에서는 가운데 정렬만 한다. */
body.v2-pc .screen { max-width: 1440px; }

/* 시안에 PC 아트보드가 없는 화면(조회 입력·온보딩 3장·로그인·가입·요금제)의
   PC 판. 모바일은 화면 전체를 쓰고 CTA 를 바닥에 붙이는 게 맞지만, PC 에서
   그러면 카드가 뷰포트 높이만큼 늘어나고 버튼만 저 아래 떨어진다.
   PC 는 카드 높이 = 내용 높이이고, 카드를 세로 가운데에 둔다. */
.pcpage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;            /* 카드 상하 여백 최소 80 */
  box-sizing: border-box;
  background: var(--page-flat);
}
.pcpage > .pccard {
  width: 480px;
  max-width: 100%;
  min-height: 0;                 /* 100vh 를 여기서만 푼다 */
  background: var(--surface);
  border-radius: 16px;
  padding: 40px 32px;
}

/* PC 콘솔의 태블릿 폭 배치 — 사장님 결정 2026-10-08(QA A1): PC 화면 태블릿 배치 허용.
 *
 * 서버는 브라우저 종류로만 PC·폰을 가른다(app/v2/device.py). iPad 사파리는
 * 기본이 '데스크톱 사이트'라 PC 화면을 받는데, PC 화면은 사이드바 248 과 카드
 * 칸 수가 고정이라 768px 에서 `키워드 포함` 이 폭 11px 로 세로로 서고 표 열이
 * 카드 밖으로 잘렸다. 폭이 1,100px 보다 좁을 때만 아래를 건다 — 그 위(1440 시안
 * 폭 포함)에서는 한 줄도 안 걸린다.
 *
 * 새 컴포넌트 클래스를 만들지 않는다(이 파일 맨 위 원칙). 시안이 인라인으로 박아
 * 둔 배치 값을 **그 값 그대로** 집어 덮는다 — 1,100px 이상에서는 시안이 정본이다.
 *   · 카드 격자(2·3열) → 한 줄에 하나
 *   · KPI 4장 → 2장씩
 *   · 넓은 표 → 카드 안에서 가로로 민다(열을 자르지 않는다)
 *   · 사이드바 248 → 208
 */
@media (max-width: 1099.98px) {
  body.v2-pc .con-side { width: 208px !important; }
  body.v2-pc .con-main [style*="grid-template-columns:1fr 1fr"],
  body.v2-pc .con-main [style*="grid-template-columns:1.32fr 1fr"],
  body.v2-pc .con-main [style*="grid-template-columns:1.5fr 1fr"],
  body.v2-pc .con-main [style*="grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* 매장 안 키워드 추가(A9) — 추천 칸 + 오른쪽 320 칸. 768 에서 추천 칸이 188 로
   * 눌려 검색어 이름이 폭 0 으로 사라지고 `추천 검색어` 가 한 글자씩 섰다
   * (QA 재검증 A9). 좁으면 두 칸을 위아래로 쌓는다. */
  body.v2-pc .con-main [style*="grid-template-columns:minmax(0, 1fr) 320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.v2-pc .con-main [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.v2-pc .con-main div:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 매장 목록 표 — 숫자 칸(키워드·상승·하락·최고)은 칸 사이 여백이 0 이라, 좁아지면
   * 머리가 `키워드상승하락최고` 로 붙고 `▼0` 뒤에 `8위` 가 붙어 `▼08위` 로 읽혔다
   * (QA A1 재검증 2차). 칸 사이를 띄우고, 그래도 모자라면 표를 줄이지 않고 카드
   * 안에서 옆으로 민다(위 규칙). */
  body.v2-pc .con-main table:has(tr.srow) { min-width: 720px; }
  body.v2-pc .con-main table:has(tr.srow) th + th,
  body.v2-pc .con-main table:has(tr.srow) td + td {
    padding-left: 12px !important;
  }
  /* 입력 줄(앱 안 순위 조회 · 동네 상권분석) — 칸 너비(260·200·150)가 고정이라
   * 좁아지면 `순위 조회` 버튼이 카드 밖으로 밀려 잘리고, 버튼·`최근:` 글자가
   * 한 글자씩 세로로 섰다(QA A1 재검증). 줄을 넘기게 하고, 버튼·칩은 줄지 않게,
   * 안내 글은 제 줄 안에서만 접히게 한다. */
  body.v2-pc .con-main [style*="gap:8px; align-items:center; margin:11px 15px"] {
    flex-wrap: wrap !important;
  }
  body.v2-pc .con-main [style*="gap:8px; align-items:center; margin:11px 15px"] button,
  body.v2-pc .con-main [style*="gap:8px; align-items:center; margin:11px 15px"] a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  body.v2-pc .con-main [style*="gap:8px; align-items:center; margin:11px 15px"] > span {
    flex-shrink: 0 !important;
    max-width: 100%;
  }
}

/* 고정폭이 넘치는 표만 가로로 스크롤한다(I10 — 화면 자체는 가로 스크롤 0). */
.xscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 매장 카드 접기(폰 c1) — <details> 가 한다. 스크립트 없이 접힌다.
   전에는 카드 전체가 리포트 링크라 **닫을 방법이 없었다**(사장님 지적). */
.st-card > summary { list-style: none; cursor: pointer; }
.st-card > summary::-webkit-details-marker { display: none; }
.st-chev { transition: transform .15s ease; flex: 0 0 auto; }
.st-card[open] > summary .st-chev { transform: rotate(180deg); }