/* 매장 유지보수 접수 시스템(폰 화면)의 스타일입니다.

   이 파일은 오피스 app/static/app.css를 가져오지 않고 자기 팔레트를 따로 갖습니다.
   app.css는 `body{overflow:hidden}`에 사이드바가 있는 100vh 데스크톱 셸이라 폰 화면에
   그대로 못 씁니다(오피스 표가 화면을 꽉 채우는 모양도 폰에는 맞지 않습니다).

   :root의 팔레트 값은 app.css의 같은 이름 변수 값을 그대로 다시 적은 것입니다. 같은
   값을 두 파일에 적는 것은 보통 피해야 할 일이지만, 여기서는 잘 돌고 있는 오피스
   CSS를 건드리지 않으려고(공통 파일로 빼면 app.css를 갈라야 하고 그 파일에 걸린 시험이
   전부 흔들립니다) 일부러 그렇게 둡니다. 대신 tests/test_contrast.py의
   test_store_palette_matches_app_palette_for_shared_variable_names가 두 팔레트가
   어긋나면 잡아냅니다 — 이 파일에 없는 변수(사이드바·표 머리·막대그래프 등, 접수
   목록·상세 화면에서만 쓰는 것)는 빼도 되지만, 있는 변수는 값이 같아야 합니다. */

@font-face {
  font-family: "Pretendard Variable";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-text: #1A1A1A;
  --color-text-muted: #5F6368;
  --color-bg: #F5F6F8;
  --color-card: #FFFFFF;
  /* 컨트롤(입력칸·고르는 칸·누름 칸)의 테두리입니다. 칸 안이 흰색이라 배경과 1.04:1이라
     테두리가 거기 컨트롤이 있다고 말하는 유일한 신호인데, --color-border-soft는 흰 칸에
     대해 1.49:1이라 사실상 보이지 않았습니다. */
  --color-border: #767676;
  /* 목록 줄 사이·카드 안 칸막이처럼 컨트롤이 아닌 구분선에만 씁니다. */
  --color-border-soft: #D0D4DA;
  --color-focus: #0B57D0;
  --color-error: #B3261E;
  --color-danger: #B3261E;
  --color-primary: #111111;
  --color-primary-text: #FFFFFF;
}

/* 치수입니다. 색이 아니라 길이라서 팔레트와 블록을 나눠 둡니다 — 위 블록은 "색은 첫
   `:root` 안에만"을 지키는 자리라 길이를 섞지 않습니다
   (tests/test_contrast.py::test_no_color_literal_lives_outside_the_root_block). */
:root {
  /* `.store-bottom-bar`가 위아래로 두는 여백입니다. 아래쪽은 여기에 안전 영역을
     더해 씁니다 — 한 선언 안에 같은 숫자를 두 번 적던 자리라 이름을 붙였습니다.
     이 값은 고정 바 높이(73px)에 두 번 들어가고, 그 높이가 다시
     `scroll-margin-bottom`에 들어갑니다. */
  --store-bottom-bar-padding-y: 12px;
}

* {
  box-sizing: border-box;
}

/* 넓은 화면에서 `.store-shell`의 `min-height: 100%`가 기댈 자리입니다. 퍼센트 높이는
   부모의 높이가 정해져 있어야 풀리므로, 이 두 줄이 없으면 짧은 화면에서 흰 기둥이
   내용 높이에서 끊깁니다. 긴 화면 쪽은 `min-height`라 여기에 묶이지 않습니다. */
html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic",
    "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  /* 폰 폭(390px 기준)에서 가로 스크롤이 생기지 않게 합니다. 무언가 폭을 넘겨도 옆으로
     끌리지 않고 그 자리에서 잘립니다. */
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* `hidden`은 표시 규칙보다 약해서 뒤에 오는 `display` 선언에 덮입니다(오피스
   app.css에 있던 것과 같은 문제). store.js가 작업 항목이나 "사진 추가" 칸에
   `.hidden = true`를 걸어도 각각 `.store-category-option`·`.store-photo-add`의
   `display: flex`가 이겨 계속 보였던 자리라 여기서 확실히 눌러 둡니다. */
[hidden] {
  display: none !important;
}

.store-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* --- 하위 화면 머리(← 뒤로, 가운데 제목) ------------------------------------ */

.store-subheader {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 8px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border-soft);
}

.store-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 24px;
  color: var(--color-text);
  text-decoration: none;
}

.store-subheader-title {
  flex: 1 1 auto;
  margin: 0;
  padding-right: 44px; /* 뒤로 버튼 폭만큼 오른쪽을 비워 제목을 가운데로 맞춥니다. */
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

/* --- 본문 ------------------------------------------------------------------ */

.store-content {
  flex: 1 1 auto;
  /* 아래쪽은 고정 바(.store-bottom-bar)와 하단 탭에 가려지지 않을 만큼 비워 둡니다.
     탭이 없는 화면에서는 `--store-tabbar-height`가 0이라 예전과 같습니다. */
  padding: 16px 16px
    calc(96px + var(--store-tabbar-height, 0px) + var(--store-bottom-inset, env(safe-area-inset-bottom, 0px)));
}

/* 탭이 실제로 있는 화면에서만 그 높이를 알립니다. 값 하나로 본문 여백과 고정 바 위치가
   함께 따라가므로, 탭 높이를 고칠 때 세 곳을 따로 고치지 않아도 됩니다.

   `--store-bottom-inset`은 고정 버튼 바가 아래에 둘 여백입니다. 탭이 있으면 탭이 이미
   안전 영역을 품고 있으므로 0이고, 탭이 없으면(로그인·첫 로그인 강제 변경) 버튼 바가
   직접 홈 인디케이터를 피해야 하므로 그만큼 둡니다. 매장이 가장 먼저 보는 두 화면이
   그 "탭 없는" 쪽이라, 이걸 빠뜨리면 첫인상이 바로 깨집니다. */
.store-shell--tabs {
  --store-tabbar-height: calc(56px + env(safe-area-inset-bottom, 0px));
  --store-bottom-inset: 0px;
}

/* 화면 아래는 고정 바 둘이 늘 덮습니다 — `.store-bottom-bar` 73px와
   `.store-tabbar` 56px, 합쳐 129px입니다. 브라우저는 초점 받은 요소를 스크롤 영역
   안으로 넣을 뿐, `position: fixed`가 그 자리를 덮었는지는 보지 않습니다 — 위
   `.store-content`의 아래 여백은 문서 끝만 지킵니다. 그래서 Tab을 눌러도 초점이 바
   뒤로 들어가 아무것도 안 움직인 것처럼 보이다가, 한 번 더 누르면 두 칸이
   건너뛰어집니다(2.4.11). 129px에 8px을 더해 초점 테두리까지 들어가게 합니다.

   ★ 137px은 이 파일의 다른 규칙 넷에서 나온 값입니다.

       .store-bottom-bar  위아래 여백 12px 두 번 + 윗 테두리 1px
       .store-submit      min-height 48px                          } 합쳐 73px
       .store-tab         min-height 56px
       :focus-visible     2px 테두리 + 2px 간격, 위아래 양쪽          } 8px

   CSS는 남의 규칙에 적힌 길이를 읽지 못하므로 이 덧셈을 `calc()`로 이을 수 없습니다.
   손으로 적은 숫자라, 바 높이가 바뀌면 여기가 조용히 어긋나 접근성 고침이 소리 없이
   죽습니다. `tests/test_store_assets.py`가 그 넷을 다시 더해 이 값과 맞춰 봅니다.
   고칠 곳은 이 한 줄입니다 — 예전에는 같은 숫자를 두 군데에 따로 적어 두었습니다.

   `--store-tabbar-height`로 셈하지 않는 이유는 따로 있습니다. `scroll-margin-bottom`은
   넉넉해서 손해 볼 것이 없고(탭이 없는 화면에서 56px 더 스크롤할 뿐입니다), 변수로 적으면
   탭이 없는 화면에서 되레 73px만 비워 초점이 다시 가려집니다.

   묶어서 주는 이유는 이 속성이 스크롤해 들어오는 요소 자신에게 있어야 하기 때문입니다 —
   줄을 감싼 `<li>`(`.store-list-item`)에만 두면 정작 초점을 받는 `<a>`는 그대로 바
   뒤로 들어갑니다. 그렇다고 `<li>`를 빼면 줄 테두리가 바에 물려 어느 줄에 서 있는지
   알아보기 어렵습니다. 그래서 둘 다 세우되 값은 한 번만 적습니다. */
.store-content a,
.store-content button,
.store-content input,
.store-content select,
.store-content textarea,
.store-content summary,
.store-content [tabindex],
.store-list-item {
  scroll-margin-bottom: 137px;
}

.store-error {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-error);
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-error);
  font-size: 16px;
}

/* --- 카드와 입력칸 ----------------------------------------------------------- */

.store-card {
  background: var(--color-card);
  border-radius: 12px;
  padding: 4px 12px;
}

.store-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--color-bg);
  border-radius: 10px;
}

.store-field-label {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: 14px;
  white-space: nowrap;
}

.store-field-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: right;
  font: inherit;
  /* iOS 사파리는 입력칸 글자가 16px보다 작으면 탭할 때 화면을 확대하고 그 뒤로 돌아오지
     않습니다. 본문과 같은 16px로 둡니다. */
  font-size: 16px;
  padding: 4px 0;
}

.store-field-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* 안내가 이름 아래에 늘 보이게 세로로 쌓는 변종입니다. placeholder에 안내를 넣으면
   첫 글자를 치는 순간 사라져서, 적는 사람이 무엇을 적어야 하는지 모릅니다. */
.store-field-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px;
}

/* 흐린 글씨(--color-text-muted)로 두지 않습니다 — 14px 회색은 사용자가 "흰색 바탕에
   회색 글씨여서 읽기 힘들다"고 짚은 바로 그 모양입니다. */
.store-field-hint {
  font-size: 14px;
  color: var(--color-text);
}

.store-field-stacked .store-field-input,
.store-field-stacked .store-detail-input {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
  min-height: 44px;
}

/* --- 하단 고정 버튼 ---------------------------------------------------------- */

.store-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* 하단 탭 위에 얹습니다. `bottom: 0`으로 두면 탭을 통째로 덮어 가려 버립니다 —
     로그인 화면처럼 탭이 없는 곳에서는 `--store-tabbar-height`가 0이라 그대로 바닥에
     붙습니다. */
  bottom: var(--store-tabbar-height, 0px);
  /* 탭이 없는 화면에서는 이 바가 바닥에 붙으므로 안전 영역을 직접 피해야 합니다. */
  padding: var(--store-bottom-bar-padding-y) 16px
    calc(var(--store-bottom-bar-padding-y) + var(--store-bottom-inset, env(safe-area-inset-bottom, 0px)));
  /* 탭이 Dynamic Type 등으로 한 줄을 넘겨 변수보다 높아져도 버튼이 가려지지 않게 위에 둡니다. */
  z-index: 2;
  background: var(--color-card);
  border-top: 1px solid var(--color-border-soft);
}

.store-submit {
  /* `<a>`로도 쓰므로 밑줄을 끕니다 — 버튼처럼 보여야 하는 자리입니다. */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* --- 로그아웃(사내 계정이라 회원탈퇴·개인정보처리방침은 두지 않습니다) --------- */

/* 로그아웃은 상단 바에만 있습니다. 예전에는 비밀번호 화면 본문 아래에도 글자 단추가
   하나 더 있어서 한 화면에 로그아웃이 둘이었습니다. 그 단추를 지우면서, 그것을 가운데
   세우던 여백(`text-align`·`margin: 24px 0 0`)과 상단 바에서 그 여백을 되돌리던
   규칙도 함께 없앴습니다 — 되돌릴 것이 없어졌습니다. */
.store-logout-form {
  margin: 0;
}

/* 상단 바와 하단 탭입니다. 로그인 화면에는 둘 다 나오지 않습니다 — 아직 어느 매장인지
   모르고, 갈 곳도 없습니다. */
.store-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border-soft);
}

.store-topbar-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.store-topbar-store {
  /* 이름표는 왼쪽에 두고, 매장 이름과 로그아웃은 한 덩어리로 오른쪽에 붙입니다. */
  margin-left: auto;
  font-size: 14px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 손끝으로 누르는 단추는 44px입니다(2.5.5). 아이콘 자체는 20px이지만 누를 자리를
     넓혀 둡니다. */
  width: 44px;
  /* `height`가 아니라 `min-height`입니다 — 크기를 지키는 시험이 보는 속성이고,
     아이콘이 20px뿐이라 결과는 같습니다(상단 바가 `align-items: center`라 늘어나지도
     않습니다). 예전에는 비밀번호 화면의 글자 단추(`.store-link-button`)가 그 시험을
     받고 있었는데, 그 단추를 지우면서 실제로 누르는 자리가 여기 하나만 남았습니다. */
  min-height: 44px;
  /* 44px 자리가 바 오른쪽 여백까지 먹어 아이콘이 안쪽으로 밀려 보이지 않게 조금
     되돌립니다. 여백을 다 되돌리면(-12px) 초점 테두리의 오른쪽 변이 화면 끝에 딱
     붙어 잘려 보입니다 — 2px 테두리와 2px 간격이 들어갈 자리를 남깁니다. */
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.store-tabbar {
  display: flex;
  /* 화면을 넘길 만큼 내용이 길어도 탭은 늘 바닥에 붙어 있어야 합니다. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* 구분선을 `border-top` 대신 안쪽 그림자로 긋습니다. 테두리는 레이아웃 높이를
     1px 더해서 `--store-tabbar-height`(56px)가 실제 높이(57px)보다 작아지고, 그만큼
     위에 얹힌 고정 버튼 바가 탭의 테두리를 덮습니다. 그림자는 높이를 차지하지 않으므로
     변수가 실제 높이와 정확히 같아집니다. */
  box-shadow: inset 0 1px 0 0 var(--color-border-soft);
  background: var(--color-card);
  /* 아이폰 홈 인디케이터가 탭을 가리지 않게 그만큼 아래를 띄웁니다. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.store-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: 16px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.store-tab.is-active {
  color: var(--color-text);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

.store-form {
  display: block;
}

.store-empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-muted);
}

/* --- 목록 화면(제목 줄, 조건 막대, 상태 칩, 접수 줄, 쪽 나누기) --------------- */

.store-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 16px;
}

.store-list-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.store-list-all {
  flex: 0 0 auto;
  /* 글자만 있으면 누를 수 있는 높이가 글자 높이(약 18px)뿐입니다. 폰에서 손가락으로
     누르는 자리라 44px을 채웁니다. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
}

.store-filter-form {
  margin: 0 0 16px;
}

.store-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

/* 다른 칸들과 같은 짜임입니다 — 왼쪽에 이름, 오른쪽에 값. 예전에는 이름이 값 위에
   얹힌 세로 짜임이었고, 두 칸이 한 줄에 나란히 서느라 날짜 칸이 138px밖에 못 받았습니다
   (날짜를 다 보여 주려면 16px 글자로 171px이 듭니다). 안드로이드 크롬은 값이 비면
   칸에 글자를 하나도 그리지 않아, 매장 눈에는 키 큰 빈 상자 둘에 꺾쇠만 구석에 떠 있는
   고장난 화면으로 보였습니다(사용자 지적).

   이름을 줄 왼쪽에 세우면 값이 비어 있어도 칸이 무엇인지 늘 보입니다. 한 줄에 하나씩
   두어(list.html) 날짜가 잘리지 않을 만큼 폭도 받습니다. */
.store-filter-date {
  /* 줄을 혼자 씁니다 — 내용 너비로 두면 오른쪽에 빈자리가 남아 다른 줄과 어긋납니다. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.store-filter-date .store-field-label {
  /* 값은 오른쪽 끝에 붙습니다 — `.store-field`의 값 칸과 같은 자리입니다. */
  margin-right: auto;
}

.store-filter-date input {
  /* 폭은 날짜가 실제로 차지하는 만큼입니다. 늘려 잡으면 달력 아이콘만 저 멀리
     오른쪽에 떨어져, 고치려던 "구석에 뜬 꺾쇠"가 그대로 돌아옵니다. */
  flex: 0 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  /* iOS 사파리 확대 방지 — .store-field-input과 같은 이유입니다. */
  font-size: 16px;
  padding: 0;
}

/* 네이티브 달력 아이콘입니다. 기본값은 작고 흐려서, 값이 빈 칸에서는 무엇에 붙은
   표시인지 알아볼 수 없었습니다. 손끝이 닿는 단추로 읽히게 키우고 또렷하게 둡니다. */
.store-filter-date input::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  margin: 0 0 0 6px;
  padding: 0;
  opacity: 1;
  cursor: pointer;
}

.store-filter-category {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

.store-filter-search {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.store-filter-q {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

/* 칩 여덟 개를 넉 줄씩 두 줄로 세웁니다(결정 기록 0037).

   375px에서 쓸 수 있는 폭은 343px입니다. 한 줄에 넷이면 4×65 + 3×8 = 284px이라
   들어가고, 여덟이면 576px이 필요해 들어가지 않습니다 — 옆으로 밀게 두었던 까닭이
   그것입니다. 사용자가 미는 것을 보고 스크롤은 없는 쪽이 낫다고 했습니다.

   `1fr` 넷이라 칸 너비가 모두 같고 두 줄의 세로줄이 맞습니다. flex로 접으면 줄마다
   칩 개수와 너비가 내용에 따라 달라져 두 줄이 어긋납니다.

   옆으로 미는 상자가 아니므로 초점 테두리를 지키려고 사방을 비워 둘 일도 없습니다 —
   그 여백과 그것을 되돌리던 음수 바깥 여백, 스냅 자리, 감춰 둔 스크롤막대가 전부
   스크롤 상자에 딸린 것이라 함께 걷었습니다. */
.store-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}

.store-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* 한 칸이 약 80px입니다. 건수가 세 자리가 되어도(`신청(128)`) 글자가 칸을 넘지
     않도록 좌우 여백을 12px에서 줄였습니다. */
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}

.store-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
}

.store-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `scroll-margin-bottom`은 여기 없습니다 — 위 묶음 규칙이 이 선택자까지 함께 받습니다.
   숫자를 한 군데에만 두려고 그렇게 묶었습니다. */
.store-list-item {
  border-bottom: 1px solid var(--color-border-soft);
}

.store-list-item:last-child {
  border-bottom: none;
}

.store-list-link {
  display: block;
  padding: 12px 4px;
  color: inherit;
  text-decoration: none;
}

.store-list-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}

.store-list-receipt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-list-urgency {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-text);
}

.store-list-urgency.is-urgent {
  color: var(--color-error);
  font-weight: 700;
}

.store-list-status {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-text);
}

.store-list-title-text {
  margin: 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.store-list-line2 {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}

.store-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 16px 0 0;
}

.store-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 16px;
}

.store-page-link.is-current {
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
}

.store-page-link.is-disabled {
  color: var(--color-text-muted);
}

.store-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  color: var(--color-text-muted);
}

/* --- 상세 화면(내가 낸 내용·처리 과정·시설팀 칸) ------------------------------ */

.store-detail-section {
  margin: 0 0 16px;
}

.store-detail-heading {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.store-kv {
  margin: 0;
}

.store-kv-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.store-kv-row:last-child {
  border-bottom: none;
}

.store-kv-row dt {
  flex: 0 0 auto;
  width: 88px;
  color: var(--color-text);
  font-size: 14px;
}

.store-kv-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-text);
}

.store-kv-row--wide {
  flex-direction: column;
  gap: 4px;
}

.store-kv-row--wide dt {
  width: auto;
}

.store-kv-multiline {
  white-space: pre-wrap;
  word-break: break-word;
}

.store-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-timeline-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 14px;
}

.store-timeline-item:last-child {
  border-bottom: none;
}

.store-timeline-time {
  flex: 0 0 auto;
  color: var(--color-text);
}

.store-timeline-status {
  flex: 1 1 auto;
  color: var(--color-text);
  font-weight: 700;
}

/* 완료 사진 묶음의 작은 제목입니다. 시설팀 칸 안에서 "이건 고쳐 놓은 사진"임을
   가르는 유일한 표시라, 위의 항목 이름들과 같은 무게로 둡니다. */
.store-photo-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-text);
}

.store-photo-heading {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

/* --- 신청 화면(요청유형·작업유형 모달·제목·내용·사진) -------------------------- */

.store-error-list {
  margin: 0;
  padding-left: 20px;
}

/* 칸 바로 아래에 붙는 오류 한 줄입니다. 위 요약(.store-error)과 같은 말을 하지만,
   이쪽은 `aria-describedby`로 그 칸에 이어져 있어 낭독기가 칸에 닿을 때 함께 읽습니다.
   `<label>` 밖에 서는 자리라 칸 폭에 맞춰 들여 둡니다. */
.store-field-error {
  display: block;
  margin: -4px 0 8px;
  padding: 0 12px;
  color: var(--color-error);
  font-size: 14px;
}

.store-urgency-field {
  justify-content: space-between;
}

/* 질문이 길어 375px에서 라디오까지 한 줄에 다 들어가지 않습니다. 이름 줄의 기본값
   (`white-space: nowrap`, `flex: 0 0 auto`)을 그대로 두면 밀려난 `아니요`가 글자마다
   줄을 바꿔 세로로 쏟아집니다 — 실제로 그렇게 보였습니다. 줄이 모자라면 질문 쪽이
   접히고, 고르는 글자는 붙어 있게 합니다. */
.store-urgency-field .store-field-label {
  flex: 0 1 auto;
  white-space: normal;
}

.store-radio-group {
  display: flex;
  gap: 16px;
}

.store-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 44px;
  color: var(--color-text);
  font-size: 16px;
}

.store-radio input {
  width: 20px;
  height: 20px;
}

/* 이웃한 칸들과 같은 줄로 섭니다 — `.store-field`가 왼쪽 이름표와 오른쪽 값을
   맡고, 여기서는 단추라서 달라지는 것만 지웁니다(기본 테두리·기본 배경·가운데 정렬).

   줄처럼 생긴 것이 눌러서 창을 여는 자리라는 사실은 눈에 보여야 합니다. 오른쪽
   꺾쇠가 "여기 무언가 열린다"고 말하고, 누르는 동안과 창이 열려 있는 동안 바탕이
   바뀌어 눌렸다는 것을 알립니다. */
.store-category-trigger {
  width: 100%;
  border: none;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: left;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

/* 고른 값(또는 자리 글자)입니다. 이웃한 `.store-field-input`과 같이 오른쪽에 붙습니다. */
.store-category-value {
  flex: 1 1 auto;
  /* 긴 항목 이름(`소모품/사이니지`)이 꺾쇠를 밀어내지 않게 줄어들 수 있게 둡니다. */
  min-width: 0;
  text-align: right;
  font-size: 16px;
}

.store-category-trigger.is-placeholder .store-category-value {
  color: var(--color-text-muted);
}

.store-category-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
}

/* 손끝이 닿는 동안과 창이 열려 있는 동안입니다. 마우스가 없는 기기에서 `:hover`가
   눌린 채로 굳는 일이 있어 포인터가 있는 기기에만 겁니다. */
.store-category-trigger:active,
.store-category-trigger[aria-expanded="true"] {
  background: var(--color-border-soft);
}

@media (hover: hover) {
  .store-category-trigger:hover {
    background: var(--color-border-soft);
  }
}

/* `store-boot.js`가 <html>에 찍어 두는 표시입니다. 서버가 펼쳐서 내려보낸 인라인 창을
   store.js가 닫을 때까지만 감춥니다 — 그 사이에 창이 한 번 번쩍이던 자리입니다(사용자
   지적). 표시가 붙는 길은 스크립트뿐이라, 자바스크립트가 없는 매장에는 이 규칙이 아예
   걸리지 않고 창이 처음부터 펼쳐진 채로 남습니다.

   `[open]`까지 짚는 이유는 아래 `.store-category-dialog[open]`이 같은 특이도라서입니다 —
   짚지 않으면 순서에 기대게 되고, 규칙을 옮기는 날 조용히 뒤집힙니다. */
.store-js-pending .store-category-dialog[open] {
  display: none;
}

/* <dialog>는 open만 있으면(자바스크립트 없이도) 화면에 보이고, showModal()로 열리면
   같은 모양이 ::backdrop과 함께 진짜 모달이 됩니다 — 생김새는 이 규칙 하나로 둘 다
   감당하고, 자리잡기만 아래에서 갈라 둡니다.

   UA 기본값은 position: absolute; inset: 0; margin: auto다(가운데 뜨는 그 모양).
   자바스크립트가 없으면 showModal()로 :modal이 될 일이 없어 <dialog open>이 이
   기본값 그대로 남는데, 이 문서에는 위치 기준이 되는 조상이 하나도 없어 absolute가
   뷰포트 맨 위에서 시작해 제목·내용·사진 칸을 덮어 버린다(무자바스크립트 원칙이
   지키려는 바로 그 사고). 그래서 정적 흐름을 여기 기본값으로 두고, 진짜 모달만
   아래에서 원래 자리잡기로 되돌린다.

   :not(:modal)로 이 둘을 한 규칙에 합치지 않는 이유: :not()은 관대하지 않아서 모르는
   의사 클래스 하나가 선택자 전체를 무효로 만들고 규칙이 통째로 버려진다. <dialog>는
   알면서 :modal은 모르는 브라우저(크롬 37~104, 파이어폭스 98~102)에서 그 규칙이
   사라지면, 자바스크립트를 끈 매장이 덮임 버그를 그대로 다시 만난다. 이렇게 갈라 두면
   모르는 브라우저는 아래 규칙만 버리고 안전한 쪽(정적 흐름)에 남는다.

   공짜는 아니다. 그 브라우저들에서는 이제 반대로 :modal 규칙이 버려지므로, 자바스크립트가
   켜져 있어도 모달이 가운데가 아니라 문서 흐름 안에 그려진다. 보기에는 못하지만 쓸 수는
   있다 — 폼을 덮어 제목 칸에 아예 닿지 못하던 예전 버그와 맞바꾼 것이고, 그 맞바꿈을
   택한 것이다. 요즘 브라우저에서는 둘 다 제대로 돈다(375x812에서 가운데 정렬 확인함). */
.store-category-dialog {
  width: min(100%, 480px);
  max-height: 85vh;
  /* 창 자체는 스크롤하지 않습니다 — 넘치는 쪽은 안의 `.store-category-scroll`이 맡고,
     `선택`·`닫기`는 바닥에 붙어 있어야 합니다(사용자 지적). */
  overflow: hidden;
  border: none;
  border-radius: 16px;
  padding: 20px 16px;
  background: var(--color-card);
  color: var(--color-text);
  position: static;
  margin: 0;
}

/* ★ `[open]`을 반드시 짚습니다. 브라우저 기본 규칙은 `dialog:not([open])`에
   `display: none`인데, 조건 없이 `display: flex`를 주면 그 기본값을 이겨서 닫힌 창이
   늘 화면에 남습니다. */
.store-category-dialog[open] {
  display: flex;
  flex-direction: column;
}

/* 넘치는 쪽입니다. `min-height: 0`이 없으면 flex 항목의 최소 크기가 내용 크기라
   상자가 줄지 않고, 창이 통째로 늘어나 단추가 다시 아래로 밀립니다.
   초점 테두리(2px 테두리 + 2px 간격)가 스크롤 상자 모서리에서 잘리지 않게 4px을
   비우고, 그만큼 좌우로 되돌려 항목이 제목·빨리찾기와 같은 줄에 섭니다. */
.store-category-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
  margin: 0 -4px;
}

/* showModal()로 연 진짜 모달만 UA 기본 자리잡기로 되돌립니다 — 최상위 레이어에
   올라가 있어 inset(UA가 이미 0으로 둡니다)과 margin: auto로 화면 가운데 뜹니다. */
.store-category-dialog:modal {
  position: fixed;
  margin: auto;
}

.store-category-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.store-category-dialog-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.store-quick-filter {
  width: 100%;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

/* 두 칸입니다. 석 칸일 때 칸 하나에 남는 글자 폭은 82.33px였는데(96.33px에서 테두리
   2px과 좌우 여백 12px을 뺀 값), `소모품/사이니지`가 82.99px, `알람타워/DID/POS`가
   99.33px이라 둘은 그대로 접혔고, `소방/화재/안전`도 76.10px로 6px 남기고 겨우 들어가
   폰에 깔린 한글 글꼴이 조금만 넓어도 함께 접혔습니다(사용자 지적 — 운영에서 접힌 것을
   보셨습니다). 두 칸이면 글자 폭이 134.5px이라 열다섯 항목이 모두 한 줄에 섭니다.

   목록은 그만큼 세로로 길어집니다. 창 안에서 스크롤하고 `선택`·`닫기`는 바닥에 붙어
   있으므로(아래 `.store-category-scroll`) 길어진 만큼이 그대로 손해는 아닙니다.

   `1fr`이 아니라 `minmax(0, 1fr)`인 것은 `1fr`의 최솟값이 `auto`(내용 크기)이기
   때문입니다. 글자가 칸보다 넓어지는 순간 칸이 내용만큼 벌어지고, 그 벌어짐이 같은
   줄의 다른 칸까지 밀어냅니다 — 고를 때마다 칸 크기가 조금씩 달라지던 일(사용자 지적)이
   되살아나는 길입니다. 0으로 못박으면 칸 폭은 내용과 무관하게 언제나 같습니다. */
.store-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* 칸 하나가 통째로 단추입니다. 예전에는 작은 동그라미와 글자가 따로 놓여 있어, 그
   동그라미를 정확히 눌러야 고를 수 있어 보였습니다(사용자 지적). 라디오를 칸 전체에
   덮어 두면 어디를 눌러도 그 라디오를 누른 것이 되고, 초점 테두리도 칸 둘레에 그려져
   키보드로 짚은 자리가 그대로 보입니다. */
.store-category-option {
  position: relative;
  display: flex;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  font-size: 13px;
  cursor: pointer;
}

/* 라디오는 칸을 덮되 눈에는 보이지 않습니다. `display: none`으로 감추면 키보드 초점이
   닿지 않고, 아예 빼면 폼이 값을 싣지 못합니다. `inset` 한 줄 대신 네 변을 따로 적는
   것은 이 화면이 오래된 브라우저에서도 그대로 돌아야 하기 때문입니다. */
.store-category-option input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.store-category-option span {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  /* 한글은 기본값(`word-break: normal`)에서 글자와 글자 사이 아무 데서나 접힙니다.
     그래서 `소방/화재/안전`이 `소방/화`와 `재/안전`으로 갈라져 낱말 한가운데가
     끊겼습니다(사용자 지적). `keep-all`은 띄어쓰기와 낱말 경계에서만 접습니다.

     항목 글자는 M-F.M이 쓰는 말이라 고칠 수 없으므로(브리프), 줄바꿈 쪽이 글자에
     맞춰야 하는 자리입니다. 위 두 칸 배치가 열다섯 항목을 모두 한 줄에 세우니
     지금은 접힐 일이 없지만, 글꼴이 바뀌어 한 항목이 넘치더라도 이 선언이 있으면
     낱말 단위로만 갈라집니다. */
  word-break: keep-all;
  /* 칸의 1px 테두리 안쪽에 맞춥니다. */
  border-radius: 7px;
}

/* 고른 칸입니다. `.is-selected`는 store.js가 붙이고, `input:checked`는 자바스크립트가
   없을 때 같은 일을 합니다 — 동그라미를 치웠으므로 둘 중 하나는 반드시 살아 있어야
   무엇을 골랐는지 화면에 남습니다. `:has()`를 쓰지 않는 것도 같은 이유입니다(모르는
   브라우저에서 규칙이 통째로 버려집니다).

   바뀌는 것은 색뿐이고 치수는 하나도 건드리지 않습니다. 예전에는 여기서 글자를
   `font-weight: 700`으로 굵혔는데, 굵은 글자는 같은 말에 더 넓은 자리를 달라고 합니다
   (Pretendard 13px에서 `알람타워/DID/POS`는 99.33px → 101.87px). 칸에 남는 자리가
   빠듯하면 그 2.5px 때문에 글이 한 줄 더 접히고 칸이 세로로 늘어나, 고를 때마다 칸
   크기가 조금씩 달라졌습니다(사용자 지적). 테두리 굵기·여백도 같은 이유로 그대로
   둡니다 — 1px을 2px으로 바꾸면 안쪽이 2px 좁아져 같은 일이 일어납니다.

   굵기를 빌리지 않아도 검은 바탕(`--color-primary`)에 흰 글자면 어느 칸을 골랐는지
   한눈에 보입니다. 이 규칙이 치수를 건드리지 않는지는
   tests/test_store_new_web.py::test_choosing_an_option_changes_paint_not_geometry가
   봅니다. */
.store-category-option.is-selected span,
.store-category-option input:checked + span {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* 창 바닥에 붙습니다 — 스크롤과 상관없이 늘 보여야 하는 자리입니다(사용자 지적). */
.store-category-dialog-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.store-category-select {
  flex: 1 1 0;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.store-category-close {
  flex: 1 1 0;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* 증상 칸은 여러 줄을 적는 자리라 세로로 여유를 둡니다. 예전 `내용` 칸이 갖고 있던
   `display: block`과 자기 몫의 여백·배경은 지웠습니다 — 지금은 `.store-field`와
   `.store-field-stacked`가 그 일을 하고, `display: block`은 세로 쌓기(flex column)를
   덮어써서 이름·안내·입력칸을 한 줄에 뭉쳐 놓았습니다. */
.store-detail-field .store-detail-input {
  min-height: 120px;
}

.store-detail-input {
  display: block;
  width: 100%;
  min-height: 160px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  /* iOS 사파리 확대 방지 — .store-field-input과 같은 이유입니다. */
  font-size: 16px;
  padding: 4px 0;
  resize: vertical;
}

.store-detail-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.store-section-heading {
  margin: 20px 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.store-section-subheading {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.store-photo-section {
  margin-top: 16px;
}

.store-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.store-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
}

.store-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-photo-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-primary-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.store-photo-add {
  aspect-ratio: 1 / 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.store-photo-add-icon {
  font-size: 24px;
  line-height: 1;
}

.store-photo-add-label {
  font-size: 13px;
}

/* 자바스크립트가 안 돌 때 남는 평범한 파일 칸입니다. store.js가 도는 폰에서는
   `hidden`이 걸려 사라지고 위의 타일 UI가 대신합니다 — 그러니 이 모양을 보는 것은
   스크립트가 안 내려온 매장뿐이고, 그때는 화려할 필요 없이 누를 수 있으면 됩니다. */
.store-photo-fallback-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
}

.store-photo-fallback {
  /* iOS 사파리는 입력칸 글자가 16px보다 작으면 탭할 때 화면을 확대하고 돌아오지
     않습니다. 파일 고르기 단추도 같은 칸입니다. */
  font-size: 16px;
  /* 손가락으로 누를 칸입니다 — 44px는 이 화면의 다른 누름 자리와 같은 값입니다. */
  min-height: 44px;
  padding: 10px;
  box-sizing: border-box;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
}

.store-photo-help {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-text);
}


/* 시설팀이 받아도 할 수 없는 항목에 붙는 안내입니다. 고르는 자리(항목 옆)와, 고른
   순간 뜨는 창 두 곳에 같은 문장이 있습니다 — 창은 스크립트가 붙어야 뜨므로 항목 옆이
   본진입니다. */
.store-category-notice {
  /* 항목 칸 안이 아니라 목록 아래 한 줄입니다. 3칸 격자의 칸은 문장을 담기에 너무
     좁아, 안에 넣으면 글자가 세로로 쏟아지고 그 줄이 통째로 부풉니다. */
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-danger);
}

.store-notice-dialog {
  width: min(100%, 360px);
  border: none;
  border-radius: 16px;
  padding: 20px 16px;
  background: var(--color-card);
  color: var(--color-text);
  position: static;
  margin: 0;
}

.store-notice-dialog:modal {
  position: fixed;
  margin: auto;
}

.store-notice-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.store-notice-text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
}

/* 외부 업체 연락처입니다. 폰에서 바로 누르면 전화가 걸리도록 `tel:`로 겁니다 —
   번호를 옮겨 적는 동안 매장은 이미 한 번 지칩니다. */
.store-contact-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.store-contact {
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.store-contact-what {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.store-contact-symptom {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--color-text);
}

.store-contact-call {
  display: inline-block;
  min-height: 44px;
  margin-top: 6px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--color-text);
  color: var(--color-card);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* --- 로그인 화면 머리와 발 --------------------------------------------------- */

.store-login-head {
  margin: 8px 0 20px;
  text-align: center;
}

.store-login-brand {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.store-login-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

/* 들어가지 못해 급한 사람이 유일하게 기대는 자리라, 한 줄이 곧 안내입니다. 누를
   것은 두지 않습니다 — 예전의 `mailto:` 링크는 메일 계정이 안 잡힌 폰에서 눌러도
   아무 일이 일어나지 않았습니다(오류도 안내도 없이). 13px이던 것을 14px로 올립니다:
   덧붙이던 줄에서 이 화면의 유일한 길이 됐습니다. */
.store-login-contact {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

/* --- 넓은 화면: 폰 폭 기둥 + 옆 패널 ------------------------------------------ */

/* 좁은 화면에서는 이 패널이 아예 없는 것처럼 둡니다. 폰에서 자리를 차지하면 안 됩니다. */
.store-aside {
  display: none;
}

/* 이 화면들은 폰용입니다. PC 전체화면에서 끝까지 늘어나면 글줄이 한없이 길어져
   어색합니다. M-F.M도 같은 규칙이었습니다 — 1000px이 넘어가면 앱은 폰 폭으로 서고
   옆에 패널이 섭니다.

   1000px 아래는 건드리지 않습니다. 폰과 태블릿은 지금 그대로가 맞습니다.

   ★ 아래 고정 바 둘(`position: fixed`)은 기둥을 따라가야 합니다. 기둥이 가운데가
     아니라 패널 오른쪽에 서므로, 가운데 정렬이 아니라 같은 셈으로 자리를 잡습니다.
     본문만 옮기고 바는 창을 가로지르면 폰 모양이 아니라 망가진 화면이 됩니다. */
@media (min-width: 1000px) {
  :root {
    --store-column: 430px;
    --store-aside-width: 420px;
    /* 패널과 기둥을 한 덩어리로 보고 가운데 세웁니다. 기둥의 왼쪽 끝은 그 덩어리의
       왼쪽 끝에서 패널 너비만큼 간 자리입니다. */
    --store-column-left: calc(
      50% - (var(--store-column) + var(--store-aside-width)) / 2 + var(--store-aside-width)
    );
  }

  html,
  body {
    /* 기둥 밖으로 보이는 자리입니다. 사진을 깔려면 여기에 `background-image`를 더하면
       됩니다 — 기둥과 패널은 그대로 있습니다. */
    background: var(--color-primary);
  }

  body {
    display: flex;
    justify-content: center;
    /* ★ `stretch`가 아닙니다. `stretch`면 기둥의 높이가 body의 높이, 곧 화면 높이에
       묶입니다 — 접수 화면처럼 화면보다 긴 쪽에서는 흰 기둥이 화면 끝에서 뚝 끊기고
       그 아래로 바탕색이 드러났습니다(사용자 지적: "아래쪽엔 왜 배경이 없어").
       1200x800에서 재어 보면 문서가 1253px인데 기둥은 800px이었습니다.

       `flex-start`로 두면 기둥 높이는 제 내용이 정하고, 짧은 화면에서 바닥까지 채우는
       일은 `.store-shell`의 `min-height: 100%`가 맡습니다 — `html, body`의
       `height: 100%`가 그 퍼센트가 기댈 자리라, 그 규칙은 그대로 둡니다. */
    align-items: flex-start;
  }

  .store-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: var(--store-aside-width);
    /* `stretch`를 풀었으므로 패널은 제 높이를 따로 말해야 합니다. 화면 높이만큼 잡아
       글이 첫 화면 한가운데에 섭니다 — 기둥을 따라 늘리면 긴 화면에서 글이 문서
       한가운데, 곧 접힌 자리 한참 아래로 내려갑니다. */
    height: 100%;
    padding: 0 48px 0 0;
    color: var(--color-primary-text);
  }

  .store-aside-brand {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .store-aside-line {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
  }

  .store-shell {
    width: var(--store-column);
    background: var(--color-card);
  }

  .store-bottom-bar,
  .store-tabbar {
    left: var(--store-column-left);
    width: var(--store-column);
    transform: none;
  }
}