/* 마이페이지 전용 판.
 *
 * ── 왜 `app.css` 에 안 넣나 ──
 * 이 저장소는 세션이 여럿 붙어 같은 `app.css` 를 동시에 고친다. 실제로 한 시간 안에
 * 규칙이 두 번 되감긴 적이 있다 — 남이 자기 워크트리 기준으로 올리면 내 줄만 사라진다.
 * 마이페이지는 `/my.html` 한 장만 쓰는 화면이라, **자기 판을 따로 들면** 그 사고를
 * 통째로 피한다. 토큰(색·굵기)은 `app.css` 것을 그대로 쓴다 — 여기서 다시 정하지 않는다.
 *
 * ── 간격 ──
 * 눈대중으로 12·13·16 을 섞지 않는다. **4의 배수 한 벌**만 쓰고 이름을 붙였다.
 * 카드 사이·카드 안·글줄 사이가 각각 어느 값인지 정해져 있어야, 화면을 늘려도
 * 리듬이 안 무너진다.
 */

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

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

.mypg-head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 56px;
  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;
  flex: none;
}

.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 section > h2:first-child { margin-top: 0; }
.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); }
.mypg-body .card:last-child { margin-bottom: 0; }

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

/* — 프로필 — */

.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(135deg, var(--y), #ffd977);
  color: #4a3700;
  font-size: 21px;
  font-weight: 800;
}
.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(--sub);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* 본인 확인이 몇 칸 남았나. **숫자와 막대를 같이** 둔다 —
   막대만 두면 「거의 다 됐다」로 보이고 뭐가 남았는지는 안 보인다. */
.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(--sub); font-variant-numeric: tabular-nums; }
.mypg-prog .bar {
  height: 6px; margin: var(--s2) 0 0;
  border-radius: 999px; background: var(--dim-bg); overflow: hidden;
}
.mypg-prog .bar i {
  display: block; height: 100%;
  border-radius: 999px; background: var(--y);
  transition: width 0.3s ease;
}
.mypg-prog .bar.done i { background: var(--green); }
.mypg-prog .rest { margin: var(--s2) 0 0; font-size: 11.5px; color: var(--sub); line-height: 1.6; }

/* — 내 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(--y);
}
.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(--y);
  transition: width 1s linear;
}
.mypg-qr .err { color: #ffb4b4; font-size: 12.5px; line-height: 1.7; }

/* — 내 정보 목록 — */

.mypg-list { padding: 0; overflow: hidden; }
.mypg-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--pad);
  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); }

/* 왼쪽 표식. 사진 칸은 낸 사진이 그 자리에 들어간다 —
   목록에서 「무엇을 냈는지」가 글자가 아니라 그림으로 보인다. */
.mypg-row .ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 13px;
  background: var(--soft);
  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-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-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; }

/* — 나가는 문 — */

.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-join { max-width: 420px; margin: var(--s6) auto 0; }

/* — PC — 두 기둥 — */

@media (min-width: 900px) {
  .mypg-head { height: 64px; padding: 0 var(--s5); }
  .mypg-body { padding: var(--s6) var(--s5) 72px; }
  .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);
  }
  .mypg-out { max-width: 220px; }
  .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; }
}