/* 마이페이지 전용 판.
 *
 * ── 왜 `app.css` 에 안 넣나 ──
 * 이 저장소는 세션이 여럿 붙어 같은 `app.css` 를 동시에 고친다. 실제로 한 시간 안에
 * 규칙이 두 번 되감긴 적이 있다 — 남이 자기 워크트리 기준으로 올리면 내 줄만 사라진다.
 * 마이페이지는 `/my.html` 한 장만 쓰는 화면이라, **자기 판을 따로 들면** 그 사고를
 * 통째로 피한다. 토큰(색·굵기)은 `app.css` 것을 그대로 쓴다 — 여기서 다시 정하지 않는다.
 *
 * ── 간격 ──
 * 눈대중으로 12·13·16 을 섞지 않는다. **4의 배수 한 벌**만 쓰고 이름을 붙였다.
 * 카드 사이·카드 안·글줄 사이가 각각 어느 값인지 정해져 있어야, 화면을 늘려도
 * 리듬이 안 무너진다.
 *
 * ── 2026-09-07 전면 손질 — 무엇이 문제였나 ──
 *   ① **폰에서 3,200px 를 아무 표지 없이 굴렸다.** 지갑이 1,500px 아래에 있었고,
 *      거기 뭐가 있는지 모른 채 손가락으로 찾아야 했다 → 구역 알약 줄(`.mypg-nav`).
 *   ② **끝난 일이 화면을 계속 먹었다.** 본인 확인 6/6 인 사람에게도 초록 막대가
 *      첫 화면의 1/8 을 차지했다 → 끝나면 한 줄로 접는다(`.mypg-prog.ok`).
 *   ③ **예약이 없을 때 250px 검은 판에 한 문장만 떴다** → 낮은 줄로 접는다(`.lean`).
 *   ④ **PC 에서 「동의 내역」한 줄이 1,050px 였다.** 라벨과 값 사이를 눈이 900px
 *      건너야 했다 → 꼬리 구역에 폭 상한(`.mypg-tail`).
 *   ⑤ **위계가 없었다.** 82,000P 와 「매장에 넘어가지 않는 것」이 같은 무게의 흰
 *      카드였다 → 맨 위 한 장만 **검정**으로 세운다(신원). 나머지는 테두리로 가른다.
 *   ⑥ **24K 색이 두 자리에만 있었다.** 검정·흰색·골드가 이 서비스의 색인데 화면은
 *      회색 웹이었다 → 히어로·알약·초점 테두리에 금색이 돈다.
 *
 * ── 색은 여기서 새로 정하지 않는다 ──
 * `--night`·`--y`·`--line` 은 전부 `app.css` 것이다. 이 파일이 더하는 것은
 * **그림자와 테두리 한 벌**뿐이고, 그건 이 화면에만 필요해서다(지도 위 카드는
 * 지도가 배경이라 테두리가 없어도 갈리지만, 이 화면은 회색 바탕에 흰 카드다).
 */

.mypg {
  /* 간격 한 벌 — 이 화면의 모든 여백은 여기서 나온다. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --gap: 12px;            /* 카드와 카드 사이 */
  --pad: 16px;            /* 카드 안쪽 */
  --r: 18px;              /* 카드 모서리 — app.css 의 .card 와 같은 값 */

  /* 카드를 바탕에서 떼어 놓는 한 벌. 회색 바탕(#f4f4f5)에 흰 카드라 **테두리가
     없으면 경계가 안 보인다** — 표가 카드 안에 든 것인지 그냥 나열된 것인지
     구분이 안 됐다. 그림자는 아주 얕게만 준다(들어 올리는 것이 아니라 가르는 것). */
  --edge: #e8e8ec;
  --lift: 0 1px 2px rgba(17, 18, 20, 0.04), 0 6px 20px rgba(17, 18, 20, 0.035);

  /* 머리(56) + 알약 줄(48) — 눌러서 구역으로 뛸 때 제목이 그 밑에 안 깔리게
     `scroll-margin-top` 이 이 값을 쓴다. 한 곳에서 정해야 셋이 안 어긋난다. */
  --headh: 56px;
  --navh: 52px;

  background: var(--bg);
  min-height: 100%;
}

/* — 머리 — 화면을 굴려도 「어디 있나」와 「나가는 문」이 늘 보인다. */

.mypg-head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--headh);
  padding: 0 var(--s3);
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.86);
  /* 카드가 밑으로 지나갈 때 글자끼리 겹쳐 보이지 않게. 안 되는 브라우저는
     위의 불투명도 0.86 만으로도 읽힌다 — 흐림은 있으면 좋은 것이지 조건이 아니다. */
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.mypg-head .back {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-left: -4px;
  border-radius: 12px;
  color: var(--ink);
  flex: none;
}
.mypg-head .back:hover { background: var(--soft); }
.mypg-head .back:active { background: var(--dim-bg); }
.mypg-head .back svg { width: 20px; height: 20px; }
.mypg-head h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.4px;
  flex: 1;
  min-width: 0;
}
/* 회원번호는 **오른쪽 끝에 작게.** 문의할 때 부르는 값이라 늘 보여야 하는데,
   제목만큼 커지면 화면이 「번호」에 대한 것처럼 읽힌다. 알약을 씌운 것은
   숫자가 제목 옆에 그냥 붙어 있으면 **제목의 일부로 읽히기** 때문이다. */
.mypg-head .no {
  font-size: 11.5px;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  flex: none;
}
.mypg-head .no:not(:empty) {
  padding: 4px var(--s2);
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.mypg-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s4) var(--s3) 56px;
}

/* 구역 제목. 카드보다 **위쪽 여백을 크게** 준다 — 앞 구역의 끝과 붙으면
   그 카드가 이 제목에 딸린 것처럼 읽힌다. */
.mypg-body h2 {
  margin: var(--s6) var(--s1) var(--s3);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.mypg-body .lead {
  margin: calc(var(--s2) * -1 + 2px) var(--s1) var(--s3);
  font-size: 12px;
  line-height: 1.65;
  color: var(--sub);
}
.mypg-body .card {
  margin-bottom: var(--gap);
  padding: var(--pad);
  border: 1px solid var(--edge);
  box-shadow: var(--lift);
}
.mypg-body .card:last-child { margin-bottom: 0; }
/* 카드 안에 든 카드는 **떠 있으면 안 된다** — 그림자가 두 겹이 되면 어느 것이
   바깥인지 안 보인다. 안쪽은 테두리로만 가른다. */
.mypg-body .card .card { box-shadow: none; border-color: var(--line); }
.mypg-body .card.soft { background: var(--soft); }
/* `.card.night` 는 2026-09-07 저녁 지시로 **흰 판**이 됐다(app.css 의 「흰 판」 규칙).
   테두리도 따라서 흰 카드의 것으로 돌린다 — 검정 위의 `#23232a` 를 남겨 두면
   흰 카드에 검은 테가 둘러진다. */
.mypg-body .card.night { border-color: var(--line); }

/* 눌러서 구역으로 뛸 때 화면이 **흐르며** 간다 — 순간이동하면 어디로 갔는지
   모르고, 사람은 뒤로 가기를 누른다. 이 판은 `/my.html` 에서만 실린다. */
html { scroll-behavior: smooth; }

/* 구역 한 덩어리. **제목·설명·카드가 한 상자에 든다** — 앵커(`id`)가 이 상자에
   붙어야 눌러서 뛰었을 때 제목부터 보인다. 제목만 앵커로 잡으면 설명이 잘린다. */
.mypg-blk { scroll-margin-top: calc(var(--headh) + var(--navh) + env(safe-area-inset-top, 0px) + 8px); }
.mypg-blk:first-child > h2 { margin-top: 0; }

.mypg-grid { display: grid; gap: 0; }

/* — 구역 알약 줄 — 폰에서만 — */

/* **3,200px 를 표지 없이 굴리게 두지 않는다.** 폰에서는 두 기둥이 위아래로 쌓여
   구역이 넷·다섯이 되는데, 그중 가장 자주 보는 지갑이 1,500px 아래에 있었다.
   PC 에서는 안 세운다 — 두 기둥이라 「지금 어느 구역인가」가 성립하지 않고,
   화면에 이미 넷이 다 보인다. */
.mypg-nav {
  position: sticky;
  top: calc(var(--headh) + env(safe-area-inset-top, 0px));
  z-index: 29;
  display: flex;
  gap: 6px;
  height: var(--navh);
  align-items: center;
  margin: 0 calc(var(--s3) * -1) var(--s4);
  padding: 0 var(--s3);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: rgba(244, 244, 245, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.mypg-nav::-webkit-scrollbar { display: none; }
/* 알약 하나가 **40px 은 된다.** 글자에 맞춰 7px 여백만 주면 34px 이 나오는데,
   그건 달리는 지하철에서 엄지로 누르는 크기가 아니다(검사가 34px 을 잡았다). */
.mypg-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
/* 지금 보고 있는 구역. **검정으로 채운다** — 이 서비스에서 「고른 것」은 늘
   검정이다(지도 시간대 알약과 같은 규칙). 테두리만 바꾸면 아무도 못 본다. */
.mypg-nav a.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* — 히어로 — 「지금 누구로 들어와 있나」 — */

/* **이 화면에 검정 판은 이제 없다**(2026-09-07 저녁 지시). 위계는 색이 아니라
   자리와 크기로 준다 — 맨 위 한 장이 가장 크고 나머지가 그 아래로 온다. */
.mypg-top {
  padding: 0;
  border-color: var(--line);
  overflow: hidden;
}
.mypg-who {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--pad);
}
.mypg-who .face {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 18px;
  background: linear-gradient(140deg, #ffdd8d, var(--y));
  color: #4a3700;
  font-size: 21px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(245, 197, 66, 0.18);
}
.mypg-who .txt { min-width: 0; flex: 1; }
.mypg-who .nm {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 17px; font-weight: 700; letter-spacing: -0.4px;
}
.mypg-who .nm b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mypg-who .ml {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--night-sub);
  overflow-wrap: anywhere;
  line-height: 1.5;
}
/* 히어로 위의 꼬리표. `.chip.k` 는 검정 바탕에 흰 글자라 흰 판에서도 읽히지만,
   여기서는 **금색이 「이 사람이 관리자」를 가리키는 자리**라 금색을 지킨다. */
.mypg-top .chip.k { background: var(--y); color: #241a00; }
.mypg-top .chip:not(.k):not(.g):not(.y):not(.r) {
  background: var(--chip-bg);
  color: var(--night-body);
}

/* 본인 확인이 몇 칸 남았나. **숫자와 막대를 같이** 둔다 —
   막대만 두면 「거의 다 됐다」로 보이고 뭐가 남았는지는 안 보인다. */
.mypg-prog {
  padding: var(--s3) var(--pad) var(--pad);
  border-top: 1px solid var(--line);
}
.mypg-prog .top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  font-size: 12.5px;
}
.mypg-prog .top b { font-weight: 700; }
.mypg-prog .top .n2 { color: var(--night-sub); font-variant-numeric: tabular-nums; }
.mypg-prog .bar {
  height: 6px; margin: var(--s2) 0 0;
  border-radius: 999px; background: var(--line); overflow: hidden;
}
.mypg-prog .bar i {
  display: block; height: 100%;
  border-radius: 999px; background: var(--panel-mark);
  transition: width 0.3s ease;
}
.mypg-prog .rest { margin: var(--s2) 0 0; font-size: 11.5px; color: var(--night-sub); line-height: 1.6; }

/* **끝난 일은 접는다.** 6/6 인 사람에게도 초록 막대가 첫 화면의 1/8 을 먹고 있었다 —
   다 한 일을 크게 그려 놓으면 그 밑의 「아직 할 것」이 안 읽힌다. 한 줄만 남긴다.
   숫자(`.n2`)는 그대로 둔다 — 검사도 사람도 「몇 칸 중 몇」으로 이 화면을 읽는다. */
.mypg-prog.ok {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--pad);
}
.mypg-prog.ok .top { flex: 1; font-size: 12.5px; }
.mypg-prog.ok .top b { color: var(--panel-key); }
.mypg-prog.ok .rest { margin: 0; flex: none; }
.mypg-prog.ok .bar { display: none; }
@media (max-width: 400px) {
  /* 좁은 폰에서는 한 줄에 둘이 안 들어간다 — 겹치게 두느니 위아래로 쌓는다. */
  .mypg-prog.ok { display: block; }
  .mypg-prog.ok .rest { margin-top: 4px; }
}

/* — 내 QR — */

.mypg-qr { text-align: center; padding: var(--s5) var(--pad) var(--pad); }
.mypg-qr .lbl {
  font-size: 11.5px; color: var(--night-sub);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.mypg-qr .plate {
  display: inline-grid;
  place-items: center;
  margin: var(--s3) auto var(--s3);
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  min-width: 168px; min-height: 168px;
}
.mypg-qr canvas { display: block; border-radius: 4px; }
/* 아직 QR 이 없을 때. **가짜 QR 을 그리지 않는다** — 줄무늬를 그려 두면
   회원이 입구에서 그걸 내밀고, 안 읽히는 이유를 아무도 모른다. */
.mypg-qr .plate.empty {
  background: var(--night2);
  border: 1px dashed var(--night-line);
  color: var(--night-sub);
  font-size: 12px;
  line-height: 1.7;
  padding: var(--s5);
  max-width: 260px;
  text-align: center;
}
.mypg-qr .short {
  font-size: 30px; font-weight: 800; letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--panel-key);
}
.mypg-qr .cap { margin-top: var(--s1); font-size: 12px; color: var(--night-body); line-height: 1.6; }
.mypg-qr .life {
  height: 4px; margin: var(--s3) auto 0; max-width: 240px;
  border-radius: 999px; background: var(--night-line); overflow: hidden;
}
.mypg-qr .life i {
  display: block; height: 100%; background: var(--panel-mark);
  transition: width 1s linear;
}
.mypg-qr .err { color: var(--panel-red); font-size: 12.5px; line-height: 1.7; }

/* **QR 이 없는 판은 낮게 눕힌다**(`my-qr.js` 가 `lean` 을 붙인다).
   예전에는 예약이 없어도 250px 검은 판이 서고 그 안에 「오늘 예약이 없어요」
   한 문장만 있었다 — 화면에서 가장 큰 덩어리가 **아무것도 아닌 상태**였다.
   덩어리를 줄이면 그 자리가 그대로 아래 구역에 간다. */
.mypg-qr.lean {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--s3);
  align-items: center;
  text-align: left;
  padding: var(--s4);
}
.mypg-qr.lean::before {
  content: '';
  grid-row: 1 / 3;
  width: 44px; height: 44px;
  border-radius: 13px;
  border: 1.5px dashed var(--night-line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9099' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='14' y='3.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='3.5' y='14' width='6.5' height='6.5' rx='1.6'/%3E%3Cpath d='M14 14.5h2.5v2.5H14zM20 14v2M14.5 20.5h6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.mypg-qr.lean .plate.empty {
  display: block;
  margin: 0; padding: 0;
  /* 큰 판이 들고 있던 **최소 크기를 반드시 되돌린다.** `min-height:168px` 하나가
     남으면 눕힌 카드가 그대로 223px 로 서서 「눕혔다」가 화면에서는 아무 일도
     안 한 것이 된다(실제로 한 번 그렇게 났다). */
  min-width: 0; min-height: 0;
  max-width: none;
  border: 0; background: none;
  color: var(--panel-ink);
  font-size: 14px; font-weight: 700; line-height: 1.45;
  text-align: left;
}
.mypg-qr.lean .cap { margin: 0; text-align: left; font-size: 11.5px; }

/* — 지갑 · 등급 — 표를 **타일로** — */

/* 「예상 → 검수 중 → 사용 가능 → 출금 중」은 **상태 넷**이지 목록이 아니다.
   한 줄에 하나씩 늘어놓으면 라벨은 왼쪽 끝, 값은 오른쪽 끝에 붙어(`.kv` 가
   space-between 이다) PC 에서는 그 사이가 400px 가 된다 — 눈이 매번 건너야 한다.
   2×2 로 접으면 라벨과 값이 **위아래로 붙고**, 넷이 한눈에 든다.
   `:has()` 를 쓰는 것은 이 카드를 그리는 곳이 `tabs.js` 라서다 — 그 파일은 지도
   홈의 지갑 탭도 같이 그리므로 **거기에 마이페이지용 클래스를 심지 않는다.** */
.mypg-wallet .card:has(> .kv),
.mypg-grade .card.soft:has(> .kv) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s4);
}
.mypg-wallet .card:has(> .kv) > .kv,
.mypg-grade .card.soft:has(> .kv) > .kv {
  display: block;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
/* 아래 줄에는 밑줄이 없다. `.kv:last-child{border:0}`(app.css)만으로는 **넷째만**
   지워져서 셋째 밑에 줄이 하나 남는다 — 2열이 되면 그 줄은 카드 바닥에 뜬다. */
.mypg-wallet .card:has(> .kv) > .kv:nth-child(n + 3),
.mypg-grade .card.soft:has(> .kv) > .kv:nth-child(n + 3) { border-bottom: 0; }
.mypg-wallet .card:has(> .kv) > .kv > span,
.mypg-grade .card.soft:has(> .kv) > .kv > span {
  display: block;
  font-size: 11.5px;
  color: var(--sub);
}
.mypg-wallet .card:has(> .kv) > .kv > b,
.mypg-grade .card.soft:has(> .kv) > .kv > b {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  letter-spacing: -0.2px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* 지갑 맨 위 카드 — 이 화면에서 **가장 큰 숫자**다(판은 2026-09-07 저녁에 흰색이 됐다).
   출금 단추가 못 눌리는 판(최소 금액 미달·계좌 잠금)에서는 **단추처럼 안 보이게**
   한다 — 금색인데 안 눌리면 고장으로 읽힌다. */
.mypg-wallet .card.night .btn:disabled,
.mypg-wallet .card.night .btn[disabled] {
  background: var(--night-line);
  color: var(--night-body);
  cursor: default;
}

/* — 내 정보 목록 — */

.mypg-list { padding: 0; overflow: hidden; }
.mypg-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--pad);
  min-height: 64px;
  text-align: left;
  border-top: 1px solid var(--line);
}
.mypg-row:first-child { border-top: 0; }
.mypg-row:hover { background: var(--soft); }
.mypg-row:active { background: var(--dim-bg); }
/* 키보드로 훑는 사람에게 **지금 어느 줄인지** 말한다. 마우스로 누른 자국은
   안 남는다(`:focus-visible` 은 키보드에서만 선다). */
.mypg-row:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: -2px;
  background: var(--soft);
}

/* 왼쪽 표식. 사진 칸은 낸 사진이 그 자리에 들어간다 —
   목록에서 「무엇을 냈는지」가 글자가 아니라 그림으로 보인다. */
.mypg-row .ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 13px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 17px;
  overflow: hidden;
}
.mypg-row .ic img { width: 100%; height: 100%; object-fit: cover; }
.mypg-row .ic.pdf { font-size: 11px; font-weight: 700; color: var(--sub); }

.mypg-row .mid { flex: 1; min-width: 0; }
.mypg-row .t {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
}
.mypg-row .t .chip { flex: none; }
.mypg-row .d {
  margin-top: 2px;
  font-size: 11.5px; color: var(--sub); line-height: 1.55;
  overflow-wrap: anywhere;
}
.mypg-row .d.bad { color: var(--danger-ink); }
.mypg-row .go { flex: none; color: var(--dim-ink); font-size: 17px; line-height: 1; }
/* 반려된 줄은 **줄 자체가 붉게** 물든다. 꼬리표 하나로는 목록을 훑을 때 안 걸린다 —
   다시 내야 하는 것을 못 보고 지나가면 그 사람은 입구에서 막힌다. */
.mypg-row:has(.d.bad) {
  background: var(--danger-bg);
  box-shadow: inset 3px 0 0 var(--red);
}
.mypg-row:has(.d.bad):hover { background: #ffe2e2; }

.mypg-note {
  margin: calc(var(--gap) * -1 + 2px) var(--s1) var(--gap);
  padding-top: var(--s2);
  font-size: 11.5px; color: var(--sub); line-height: 1.7;
}

/* — 연결 — */

.mypg-body .mypg-linkcard { border: 1.5px solid var(--y); }
.mypg-linkcard .hd { display: flex; align-items: center; gap: var(--s2); }
.mypg-linkcard .hd b { font-size: 14px; }
.mypg-linkcard p { margin: var(--s2) 0 var(--s3); font-size: 12px; color: var(--sub); line-height: 1.7; }
.mypg-code {
  display: flex; gap: var(--s2);
}
.mypg-code input {
  flex: 1; min-width: 0;
  padding: 12px var(--s3);
  border: 1.5px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  background: #fff; color: var(--ink);
}
.mypg-code input:focus { outline: none; border-color: var(--y); }
.mypg-code .btn { width: auto; flex: none; padding: 12px var(--s4); }

/* — 고치는 창 — 폰에서는 아래에서 올라오고 PC 에서는 가운데 뜬다 — */

.msheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 10, 12, 0.5);
  animation: mfade 0.16s ease;
}
@keyframes mfade { from { opacity: 0; } }
@keyframes mrise { from { transform: translateY(16px); } }

.msheet .box {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: 92vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: #fff;
  animation: mrise 0.2s ease;
}
.msheet h3 { margin: 0 var(--s6) var(--s1) 0; font-size: 18px; letter-spacing: -0.5px; }
.msheet .sub { margin: 0 0 var(--s4); font-size: 12.5px; color: var(--sub); line-height: 1.7; }
.msheet .x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 11px;
  color: var(--sub); font-size: 15px;
}
.msheet .x:hover { background: var(--soft); }

.msheet .fld { display: block; margin-bottom: var(--s3); }
.msheet .fld > span { display: block; margin-bottom: 6px; font-size: 12px; color: var(--sub); }
.msheet .fld input, .msheet .fld select {
  width: 100%; padding: 12px var(--s3);
  border: 1.5px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.msheet .fld input:focus, .msheet .fld select:focus { outline: none; border-color: var(--y); }

/* 파일 고르는 칸. 고른 뒤에는 같은 자리가 미리보기로 바뀐다 —
   「골랐나」를 다른 곳에서 확인하게 만들지 않는다. */
.msheet .pick {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  border: 1.5px dashed var(--line); border-radius: 14px;
  cursor: pointer;
}
.msheet .pick:hover { background: var(--soft); }
.msheet .pick.on { border-style: solid; border-color: var(--y); }
.msheet .pick .pv {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex: none;
  border-radius: 13px; background: var(--soft); color: var(--sub);
  overflow: hidden;
}
.msheet .pick .pv img { width: 100%; height: 100%; object-fit: cover; }
.msheet .pick .pv svg { width: 22px; height: 22px; }
.msheet .pick .pt { min-width: 0; }
.msheet .pick .pt b { display: block; font-size: 14px; }
.msheet .pick .pt span {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 지금 낸 것. **원본을 이 화면에 늘 띄워 두지 않는다** — 눌러야 열린다.
   어깨너머로 신분증이 보이는 것을 기본값으로 두지 않으려는 것이다. */
.msheet .have {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  margin-bottom: var(--s3);
  border-radius: 14px; background: var(--soft);
}
.msheet .have .pv {
  width: 56px; height: 56px; flex: none;
  border-radius: 13px; background: var(--dim-bg);
  display: grid; place-items: center; overflow: hidden;
  font-size: 11px; color: var(--sub);
}
.msheet .have .pv img { width: 100%; height: 100%; object-fit: cover; }
.msheet .have .txt { flex: 1; min-width: 0; font-size: 12px; color: var(--sub); line-height: 1.6; }
.msheet .have .txt b { display: block; font-size: 13px; color: var(--ink); }
.msheet .have .open {
  flex: none; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 600;
}

.msheet .row2 { display: flex; gap: var(--s2); margin-top: var(--s4); }
.msheet .row2 .btn { margin: 0; }
.msheet .btn:disabled { opacity: 0.45; cursor: default; }
.msheet .err {
  margin: var(--s3) 0 0;
  font-size: 12.5px; color: var(--danger-ink); line-height: 1.6;
}
.msheet .ok { color: #157a3c; }
.msheet .hint { margin: var(--s3) 0 0; font-size: 11.5px; color: var(--sub); line-height: 1.75; }

/* — 꼬리 — 동의·나가는 문·사업자 표기 — */

/* **한 덩어리로 묶는다.** 셋이 각각 전체 폭을 쓰면 PC 에서 「동의 내역」한 줄이
   1,050px 가 되고, 라벨과 값 사이를 눈이 900px 건넌다. 로그아웃 단추만 220px 로
   왼쪽에 서고 그 밑 설명은 가운데 정렬이라 서로 어긋나기도 했다.
   폭을 재우면 그 셋이 한 묶음으로 읽힌다 — 자주 보는 것이 아니라는 뜻이기도 하다. */
.mypg-tail { margin-top: var(--s8); }

.mypg-consent h2 { margin: 0 0 var(--s1); font-size: 15px; }
.mypg-consent .lead { margin: 0 0 var(--s3); }
.cs-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.cs-row:last-of-type { border-bottom: 0; }
.cs-at { color: var(--sub); font-size: 11.5px; flex: none; font-variant-numeric: tabular-nums; }
.cs-req, .cs-opt {
  font-size: 10.5px; font-weight: 600; padding: 2px 6px;
  border-radius: 6px; margin-left: 4px; vertical-align: 1px;
}
.cs-req { background: var(--chip-bg); color: var(--chip-ink); }
.cs-opt { background: var(--y2); color: #5a4200; }
.cs-tog { cursor: pointer; }
.cs-tog input { width: 20px; height: 20px; flex: none; accent-color: var(--y); }
.cs-quit { margin-top: var(--s3); }

/* 나가는 문. 단추와 그 설명은 **같은 쪽으로 붙인다** — 예전에는 단추가 왼쪽,
   설명이 가운데라 둘이 한 벌로 안 읽혔다. */
.mypg-out { margin-top: var(--s5); }
.mypg-foot {
  margin: var(--s3) var(--s1) 0;
  font-size: 11px; color: var(--sub); text-align: center; line-height: 1.7;
}
.mypg-biz {
  margin: var(--s6) var(--s1) 0;
  font-size: 11px; color: var(--sub); text-align: center; line-height: 1.8;
}
.mypg-biz a { color: var(--sub); text-decoration: underline; }

/* — 가입 안내(회원이 아닌 사람) — */

/* **회원이 아닌 사람이 보는 유일한 마이페이지다.** 전에는 가운데 정렬 문단
   하나가 전부였고, 좁은 폰에서는 그 문단이 낱말 가운데서 끊겼다. 지금은
   「여기 무엇이 들어 있나」를 셋으로 세어 준다. */
.mypg-join { max-width: 440px; margin: var(--s5) auto 0; }

.mypg-gate { padding: var(--s5) var(--s5) var(--s4); }
.mypg-gate .mk {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.4px;
  color: var(--panel-key);
}
.mypg-gate .ttl {
  display: block;
  margin-top: var(--s2);
  font-size: 19px; font-weight: 800; letter-spacing: -0.6px;
}
.mypg-gate .why {
  margin: 6px 0 var(--s4);
  font-size: 12.5px; line-height: 1.7; color: var(--night-body);
}
.mypg-gate .what { margin: 0; padding: 0; list-style: none; }
.mypg-gate .what li {
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s4);
  border-top: 1px solid var(--night-line);
}
/* 금색 점 하나. 이 서비스에서 **금색은 「이것」을 가리키는 색**이다. */
.mypg-gate .what li::before {
  content: '';
  position: absolute;
  left: 0; top: 20px;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--panel-mark);
}
.mypg-gate .what b { display: block; font-size: 13.5px; letter-spacing: -0.2px; }
.mypg-gate .what span {
  display: block; margin-top: 3px;
  font-size: 11.5px; line-height: 1.6; color: var(--night-sub);
}

.mypg-join .btn { margin-top: var(--gap); }
.mypg-already {
  margin: var(--s3) var(--s1) 0;
  font-size: 12px; color: var(--sub); text-align: center; line-height: 1.6;
}

/* 가입 단계. **밟아 가는 칸**이라 번호가 붙고 사이에 화살표가 선다 —
   한 문장으로 적으면 몇 단계인지 안 세어지고 폰에서 낱말이 끊긴다. */
.mypg-steps {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  margin: var(--s4) 0 0; padding: 0;
  list-style: none;
  counter-reset: st;
}
.mypg-steps li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
  font-size: 11.5px; color: var(--sub); white-space: nowrap;
}
.mypg-steps li::before {
  counter-increment: st;
  content: counter(st);
  display: grid; place-items: center;
  width: 15px; height: 15px;
  border-radius: 999px;
  background: var(--y); color: #241a00;
  font-size: 9.5px; font-weight: 800;
}
.mypg-steps li:not(:last-child)::after {
  content: '›';
  margin-left: 3px;
  color: var(--dim-ink);
}

/* 단계 알약 줄과 연결 카드가 **붙어 있으면 한 덩어리로 읽힌다** — 가입 단계
   다섯째가 「내 기록과 잇기」인 것처럼 보인다. 둘은 다른 이야기다. */
.mypg-join .mypg-linkcard { margin-top: var(--s5); }

.mypg-back {
  margin: var(--s5) var(--s1) 0;
  font-size: 11.5px; color: var(--sub); text-align: center; line-height: 1.9;
}
.mypg-back a { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* — PC — 두 기둥 — */

@media (min-width: 900px) {
  .mypg-head { height: 64px; padding: 0 var(--s5); }
  .mypg { --headh: 64px; }
  .mypg-body { padding: var(--s6) var(--s5) 72px; }
  /* 알약 줄은 폰의 것이다 — 두 기둥에서는 「지금 어느 구역인가」가 성립하지 않고,
     구역 넷이 이미 한 화면에 다 보인다. */
  .mypg-nav { display: none; }
  .mypg-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
  }
  /* 프로필은 두 기둥 **위에 걸친다** — 한쪽 기둥에 넣으면 그 기둥만 길어지고,
     「지금 누구로 들어와 있나」가 화면 절반에만 걸린 것처럼 보인다.
     넓은 화면에서는 이름과 진행이 **한 줄에 나란히** 선다 — 위아래로 두면
     진행 막대가 화면 폭만큼 늘어나 「거의 다 됐다」는 인상만 남는다. */
  .mypg-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: stretch;
    margin-bottom: var(--s5);
  }
  .mypg-top .mypg-prog {
    border-top: 0;
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s4) var(--pad);
  }
  /* 다 끝난 판은 오른쪽 칸이 한 줄뿐이라 **위아래로 둔다** — 380px 칸 안에서
     「본인 확인 완료 · 6/6」과 그 설명을 한 줄에 밀어 넣으면 셋 사이가 벌어져
     서로 딴 것처럼 읽힌다. 폰에서 쓰던 가로 배치를 여기서 되돌린다. */
  .mypg-top .mypg-prog.ok { display: block; }
  .mypg-top .mypg-prog.ok .rest { margin-top: var(--s1); }

  /* 꼬리는 **왼쪽에 재운다.** 폭 상한이 없으면 「동의 내역」한 줄이 1,050px 가 되고,
     라벨과 「2026.09.07 동의」 사이를 눈이 900px 건넌다. 680px 로도 아직 519px 이라
     560 까지 좁혔다(검사가 500px 을 선으로 잡고 있다). 좁은 것이 흠이 아니다 —
     자주 보는 자리가 아니라는 뜻이기도 하다. */
  .mypg-tail { max-width: 560px; }
  /* 나가는 문은 단추와 설명이 **한 줄**로 선다. 단추만 220px 로 왼쪽에 두고
     설명을 가운데 정렬하면 둘이 딴 것처럼 읽힌다. */
  .mypg-out { max-width: 220px; margin-top: var(--s5); }
  .mypg-signout { display: flex; align-items: center; gap: var(--s4); }
  .mypg-signout .mypg-out { margin: 0; flex: none; }
  .mypg-signout .mypg-foot { margin: 0; text-align: left; flex: 1; }
  .mypg-biz { text-align: left; margin-left: 0; }

  .msheet { align-items: center; }
  .msheet .box { border-radius: 22px; padding: var(--s6); }
}

/* 움직임을 줄이라고 해 둔 기기에서는 창이 튀어오르지 않고, 눌러서 뛸 때도
   화면이 안 흐른다. */
@media (prefers-reduced-motion: reduce) {
  .msheet, .msheet .box { animation: none; }
  .mypg-prog .bar i, .mypg-qr .life i { transition: none; }
  html { scroll-behavior: auto; }
}

/* 사장님이 돌아오는 문(2026-09-08). 처음 가는 문은 가입 창의 파란 「기업 로그인」이고,
   여기는 **이미 회원으로 들어와 있는 사람**을 위한 자리다 — 그 사람은 가입 창을 다시
   볼 일이 없어서, 이 줄이 없으면 주소를 아는 사람만 갈 수 있는 화면이 된다.
   회원에게 거슬리지 않게 꼬리에 작게 두되, 파랑으로 **여기만 다른 사람 몫**임을 말한다
   (가입 창의 `.bizgate` 와 같은 `--biz` 토큰을 쓴다 — 색을 두 곳에 적지 않는다). */
.mypg-gobiz {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sub);
  text-align: center;
}
.mypg-gobiz a { color: var(--biz); font-weight: 700; text-decoration: none; }
.mypg-gobiz a:hover, .mypg-gobiz a:focus-visible { text-decoration: underline; }