/* ── 한글 줄바꿈 (전역) ──────────────────────────────────────────────────────
   기본값(break-word 계열)은 한글을 **글자 단위로** 끊는다 — 「이미 만들기 시작 / 한 굿즈」처럼
   한 글자가 다음 줄로 넘어가 읽기가 끊긴다. `keep-all` 은 단어(어절) 단위로만 끊는다.
   ⚠️ 긴 영문·URL·주문번호가 칸을 넘칠 수 있어 그건 anywhere 로 따로 풀어준다. */
[class^="myds-"], [class^="myds-"] *{ word-break:keep-all; overflow-wrap:break-word }
.myds-mono, .myds-ono, .myds-addr{ word-break:break-all }

/* ───────────────────────────────────────────────────────────────────────────
   my-ds.css — 「마이」 관련 화면의 CSS.

   🚫 정본은 `_mock/final-my.html`(「확정본 — 마이」 · 프레임 9개) **하나뿐이다.**
      `_mock/my.html` 은 **옛 목업이다 — 보지 말 것.** 아래 주석의 프레임 번호는 확정본 기준이다
      (⑩ 설정 ⑪ 번호 변경 ⑫ 알림은 확정본에 없는 화면이라 뒤 번호를 이어 쓴다).

   왜 별도 파일인가
     twenty-studio-home.html 은 6천 줄이 넘고 여러 세션이 동시에 고친다.
     그 파일에 스킨 블록이 20겹 쌓여 있어 「뒤에 썼으니 이긴다」가 성립하지 않는다.
     그래서 새 화면은 이 파일에서만 만들고, 홈 파일에는 <link> 한 줄만 붙인다.

   규칙
     · 새로 만드는 것은 전부 `.myds-…` 접두사. 옛 규칙과 이름이 겹치지 않는다.
     · 기존 화면(#pgMy)을 고치는 몇 줄만 ID 선택자 + !important 로 옛 규칙을 이긴다.
     · 색은 TOKENS.md 변수명으로 쓴다. 표에 없는 hex 는 아래 「토큰에 없는 색」에 모았다.

   짝: my-ds.js (화면을 그리는 함수) · my-ds-test.html (혼자 열리는 시험 페이지)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 토큰에 없는 색 ─────────────────────────────────────────────────────────
   목업이 쓴 hex 중 TOKENS.md 표에 없는 것들이다. 가까운 토큰에 끼워 맞추지 않고
   그대로 두고 여기 모았다(끼워 맞추면 디자인 의도가 조용히 바뀐다).
     #4A4453  보조 버튼 글자      (--tgray500 #6E677A 보다 진하다)
     #723B13  쿠폰·경고 카드 제목  (tyellow 계열 위 글자 — 표에 없음)
     #8A5A16  쿠폰·경고 카드 설명 · 「결제 대기」 배지 글자
     #F5FFFD  안 읽은 알림 줄 배경 (--tmint50 #E8FEFA 보다 연하다)
     #3D3846  취소·환불 안내 상자 제목 (--ink #000 보다 흐리다 — 끝난 일이라서)
   ------------------------------------------------------------------------- */
:root{
  --myds-ink-mute:#3D3846;
  --myds-ink-sub:#4A4453;
  --myds-warn-ink:#723B13;
  --myds-warn-ink2:#8A5A16;
  --myds-unread:#F5FFFD;
  --myds-barbg:rgba(255,255,255,.9);
  --myds-dim:rgba(0,0,0,.4);
}

/* ── 새 화면을 앱 안에 앉히는 자리 ──────────────────────────────────────────
   새 화면은 홈 파일의 `.app`(max-width 440) 안에 `.page.myds-page` 로 들어간다.
   목업의 안쪽 단계 화면은 상단바가 화면 끝까지 붙으므로 `.app` 의 좌우 여백을 끈다.
   그리고 이 화면들은 **자기 상단바를 갖고 있다** — 앱 공용 `.appbar` 는 겹치니 숨긴다.
   ⚠️ 그래서 이 화면들을 홈 파일 DEEP_PAGES 에 넣어도 되고 안 넣어도 된다:
      넣으면 탭바가 사라지고(원하는 모양), 안 넣으면 아래 규칙이 탭바를 대신 숨긴다. */
body:has(.myds-page.on) .app{padding:0 !important}
body:has(.myds-page.on) .appbar{display:none !important}
body:has(.myds-page.on) .tabs{display:none !important}
body:has(.myds-page.on) > header,
body:has(.myds-page.on) .app > header{display:none !important}

.myds-page{background:#fff;color:var(--ink);
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
  letter-spacing:-0.01em}
.myds-page.on{display:flex !important;flex-direction:column;min-height:100vh;padding:0 !important}
.myds-page *{box-sizing:border-box}
/* 하단 CTA 바가 있는 화면은 그만큼 본문 끝을 비워 둔다(목업 86px) */
.myds-page.has-bar .myds-body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}

/* ── 상단바 (목업 ⑤~⑫ 공통) ───────────────────────────────────────────────
   높이 48 = 12+24+12. 스크롤해도 남아 있어야 뒤로 갈 길이 사라지지 않는다. */
/* 🚨 `padding-top` 에 safe-area 를 더하지 않는다 (2026-08-14 혜림님 「알림 페이지 상단에
   마진 이상하게 많이 들어가있어」). 이 화면들은 **앱바 아래에 열리는 화면**이라 노치를
   이미 앱바가 피해 줬다 — 여기서 또 더하면 그만큼 두 번 밀린다(아이폰에서 47px).
   ⚠️ 이 화면이 화면 맨 위를 직접 쓰게 바뀌면 그때 다시 더해야 한다. */
.myds-top{position:sticky;top:0;z-index:5;flex:none;display:flex;align-items:center;gap:8px;
  padding:12px 20px;
  background:#fff;border-bottom:0}
/* 뒤로가기 아이콘을 화면 20px 에 맞춘다 — 44px 탭 영역의 좌우 여백만큼 당긴다
   (굿즈 화면 `.top .back` 과 같은 처리) */
.myds-top [data-myds=back]{margin-left:-10px}
/* 아이콘은 24px 인데 탭 영역은 44px 이어야 한다(TOKENS.md).
   ⚠️ box-sizing:border-box 라 width 24 + padding 10 으로 잡으면 아이콘이 4px 로 찌그러진다.
      그래서 버튼을 44 로 두고 음수 margin 으로 줄 높이를 원래대로 되돌린다. */
.myds-top .myds-back{flex:none;width:44px;height:44px;padding:0;border:0;background:none;
  color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;
  margin:-10px -12px -10px -10px}
.myds-top .myds-back svg{width:24px;height:24px;display:block}
.myds-top h3{flex:1;min-width:0;margin:0;font-size:var(--fs-title);line-height:var(--lh-title);
  font-weight:700;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myds-top h3.grow{flex:1}
/* 글자만 있는 보조 버튼(「모두 읽음」·「배송지 수정」·「모두 보기」).
   ⚠️ .myds-top 안으로 한정하지 않는다 — 「모두 보기」는 마이 탭 제목 줄에 붙어서,
      한정하면 브라우저 기본 버튼 모양(회색 테두리)이 그대로 보인다. */
.myds-act{flex:none;border:0;background:none;padding:8px 0;margin:-8px 0;
  font-family:inherit;font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--tgray500);cursor:pointer}
.myds-act:active{opacity:.6}
.myds-top .myds-icbtn{flex:none;width:44px;height:44px;padding:0;margin:-10px;border:0;
  background:none;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}
.myds-top .myds-icbtn svg{width:24px;height:24px;display:block}

/* 본문 — 화면마다 padding 이 다르다(목록형은 0, 카드형은 16/20) */
.myds-body{flex:1;min-height:0;display:flex;flex-direction:column}
.myds-body.pad{gap:16px;padding:16px 20px}
.myds-body.pad20{gap:20px;padding:20px}
.myds-body.list{gap:8px;padding:12px 20px}
.myds-body.plain{padding:8px 0}

/* ── 하단 CTA 바 ───────────────────────────────────────────────────────────
   화면 끝까지 깔고 내용만 본문 폭(440)으로 좁힌다 — 앱바·탭바와 같은 규칙. */
.myds-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--myds-barbg);backdrop-filter:blur(24px);
  border-top:1px solid var(--tgray100);
  padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
.myds-bar .in{max-width:440px;margin:0 auto;display:flex;gap:8px}

/* ── 버튼 ──────────────────────────────────────────────────────────────────
   주 버튼 56 · 보조 48. 탭 가능한 것은 최소 44px(TOKENS.md). */
/* ⚠️ flex:1 을 여기 두면 안 된다 — 세로 flex(주문 카드) 안에서 flex-basis 가 0 이 되어
      height:48px 을 무시하고 26px 짜리로 납작해진다. 늘리는 것은 바·다이얼로그 안에서만. */
.myds-btn{flex:none;width:100%;height:56px;border:0;border-radius:16px;background:var(--tmint600);
  color:#fff;font-family:inherit;font-size:var(--fs-title);line-height:var(--lh-title);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.myds-bar .in > .myds-btn,.myds-dlg .row > .myds-btn{flex:1;width:auto}
.myds-btn:active{background:var(--tmint700)}
.myds-btn svg{width:20px;height:20px}
.myds-btn.ghost{background:#fff;border:1px solid var(--tgray100);color:var(--tgray500);
  font-size:var(--fs-body);line-height:var(--lh-body)}
.myds-btn.ghost:active{background:var(--tgray50)}
.myds-btn.ghost.w110{flex:none;width:110px}
.myds-btn.neutral{background:var(--tgray50);color:var(--myds-ink-sub);
  font-size:var(--fs-body);line-height:var(--lh-body)}
.myds-btn.danger{background:var(--tred500);color:#fff}
/* 카드 안 버튼 — 확정본 ① 은 44px · radius 12 다(바의 주 버튼 56/16 과 구분된다) */
.myds-btn.sub{height:44px;border-radius:12px;font-size:var(--fs-body);line-height:var(--lh-body)}
.myds-btn[disabled],.myds-btn.off{background:var(--tgray100);color:var(--tgray600);cursor:default}
.myds-btn[disabled]:active,.myds-btn.off:active{background:var(--tgray100)}
/* 위험하지 않지만 눈에 안 띄어야 하는 행동(주문 취소하기·나중에 할게요)
   🚨 2026-08-18 혜림님 「주문 취소 버튼 너무 잘 안 눌린다」 — 44px 이었다. 최소치는 넘겼지만
      이 화면의 **다른 버튼은 전부 56px**(하단 바·다이얼로그)이라 유일하게 작았고,
      배경이 없어 어디를 눌러야 하는지도 안 보여서 글자를 정확히 겨냥하게 됐다.
      높이를 56 으로 맞추고 배경을 아주 옅게 깔아 「누를 수 있는 자리」를 보이게 한다. */
.myds-link{flex:none;width:100%;min-height:56px;border:0;background:var(--tgray50);
  border-radius:16px;margin-top:4px;padding:0;
  font-family:inherit;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tgray500);
  display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center}

/* ── 상태 배지 ─────────────────────────────────────────────────────────────
   12px 은 보조 정보 전용이라는 규칙에 맞는 자리다(주문번호·날짜·배지). */
.myds-badge{flex:none;margin-left:auto;font-size:var(--fs-cap);line-height:var(--lh-cap);
  font-weight:700;border-radius:9999px;padding:2px 8px;
  color:var(--tgray500);background:var(--tgray50)}
.myds-badge.wait{color:var(--myds-warn-ink2);background:var(--tyellow50)}
.myds-badge.paid{color:var(--tmint900);background:var(--tmint50)}
.myds-badge.ship{color:var(--tgreen600);background:var(--tgreen50)}
.myds-badge.done{color:var(--tgray500);background:var(--tgray50)}
.myds-badge.cancel{color:var(--tgray500);background:var(--tgray50)}

/* 주문번호 — 숫자를 세로로 맞추려고 고정폭 글꼴을 쓴다(홈 파일 .ocard .no 와 같다) */
.myds-no{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600);
  font-family:ui-monospace,Menlo,monospace}

/* ── ⑤ 주문 목록 ───────────────────────────────────────────────────────────*/
.myds-chips{flex:none;display:flex;gap:8px;padding:12px 20px 0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.myds-chips::-webkit-scrollbar{display:none}
.myds-chip{flex:none;height:36px;padding:0 14px;border-radius:9999px;
  border:1px solid var(--tgray100);background:#fff;color:var(--myds-ink-sub);
  font-family:inherit;font-size:var(--fs-body);line-height:var(--lh-body);
  display:flex;align-items:center;white-space:nowrap;cursor:pointer}
.myds-chip.on{background:#000;border-color:#000;color:#fff}

/* 마이 탭 요약 목록(#myList) — 카드 사이 간격. 홈 파일의 빈 div 라 자기 규칙이 없고,
   옛 `.ocard` 는 margin-bottom:10px 을 스스로 갖고 있었다. 그걸 여기로 옮긴다. */
#myList{display:flex;flex-direction:column;gap:10px}

/* 주문 카드 — 눌러서 상세로 간다. 목업 ⑤. 마이 탭 요약에서도 같은 카드를 쓴다. */
.myds-ocard{flex:none;width:100%;text-align:left;border:1px solid var(--tgray100);
  border-radius:16px;padding:12px;background:#fff;font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;cursor:pointer}
.myds-ocard:active{background:var(--tgray50)}
.myds-ohead{display:flex;align-items:center;gap:8px}
.myds-orow{display:flex;gap:12px;align-items:center}
.myds-oth{flex:none;width:48px;height:48px;border-radius:8px;background:var(--tgray50);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.myds-oth img{width:100%;height:100%;object-fit:cover}
.myds-obd{flex:1;min-width:0}
.myds-obd b{display:block;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myds-obd span{display:block;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}
/* 정가 취소선 + 「N원 아꼈어요」 — 목록 카드의 부제 줄(⑤)과 요약 카드의 금액 아래(①) 둘 다 */
.myds-obd s{color:var(--tgray600)}
.myds-obd em,.myds-oamt em{font-style:normal;font-weight:700;color:var(--tgreen600)}
.myds-oamt{flex:none;text-align:right;font-size:var(--fs-body);line-height:var(--lh-body)}
.myds-oamt b{display:block;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.myds-oamt>span{display:block;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600);
  font-weight:400}
.myds-caret{flex:none;width:16px;height:16px;color:var(--tgray300)}
.myds-caret svg{width:16px;height:16px;display:block}
/* 취소된 주문 — 그림은 흐리게, 이름은 회색으로 「끝난 것」임을 보여준다 */
.myds-ocard.off .myds-oth{opacity:.5}
.myds-ocard.off .myds-obd b{color:var(--tgray500)}

/* ── ⑥⑦ 주문 상세 ─────────────────────────────────────────────────────────*/
/* 진행 단계 — 점과 선. 지난 단계는 초록, 앞으로 올 단계는 회색. */
.myds-steps{flex:none;display:flex;align-items:center;gap:4px}
.myds-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.myds-step i{width:12px;height:12px;border-radius:9999px;background:var(--tgray100);display:block}
.myds-step span{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray300);
  white-space:nowrap}
.myds-step.done i{background:var(--tgreen600)}
.myds-step.done span{color:var(--tgreen600)}
.myds-step.now span{font-weight:700}
.myds-steps hr{flex:none;width:24px;height:2px;border:0;margin:0;background:var(--tgray100);
  align-self:flex-start;margin-top:5px}
.myds-steps hr.done{background:var(--tgreen600)}

/* 카드 한 장 (주문한 굿즈 · 결제 내역 · 배송지) */
.myds-sec{flex:none;border:1px solid var(--tgray100);border-radius:16px;padding:12px;
  display:flex;flex-direction:column;gap:12px}
.myds-sec.tight{padding:16px;gap:8px}
.myds-sec.addr{padding:16px;gap:4px}
.myds-sec h4{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;
  display:flex;align-items:center;gap:8px}
.myds-sec h4 .myds-act{margin-left:auto}
.myds-sec p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tgray500)}

/* 주문한 굿즈 한 줄 */
.myds-item{display:flex;gap:12px;align-items:center}
.myds-item .r{flex:none;text-align:right}
.myds-item .r b{display:block;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.myds-item .r b.free{color:var(--tgreen600)}
.myds-item .r s{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}

/* 결제 내역 — 줄 순서는 명세 §8-6 이 정본이다(상품 금액 → 쿠폰 → 20% → 배송비 → 결제 금액) */
.myds-sumrow{display:flex;font-size:var(--fs-body);line-height:var(--lh-body)}
.myds-sumrow>span:first-child{flex:1;color:var(--tgray500)}
.myds-sumrow .cut{color:var(--tgreen600)}
.myds-total{display:flex;align-items:baseline;border-top:1px solid var(--tgray100);padding-top:8px}
.myds-total>span{flex:1;font-size:var(--fs-body);color:var(--tgray500)}
.myds-total b{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:700}
.myds-cap{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}

/* 안내 상자 — 회색(정보) · 노랑(결제 대기) · 초록(완료 토스트) */
.myds-info{flex:none;display:flex;gap:8px;background:var(--tgray50);border-radius:8px;padding:12px}
.myds-info svg{flex:none;width:20px;height:20px;color:var(--tgray600)}
.myds-info .tx{flex:1;min-width:0;font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--tgray500)}
.myds-info .tx b{display:block;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.myds-info .tx span{display:block;font-size:var(--fs-cap);line-height:var(--lh-cap)}
.myds-info.warn{gap:12px;background:var(--tyellow50);border-radius:16px}
.myds-info.warn svg{color:var(--tyellow500)}
.myds-info.warn .tx{color:var(--myds-warn-ink2)}
.myds-info.warn .tx b{color:var(--myds-warn-ink)}
.myds-info.warn .tx span{color:var(--myds-warn-ink2)}
.myds-info.ok{gap:12px;align-items:center;background:var(--tgreen600);border-radius:16px;
  padding:12px 16px}
.myds-info.ok svg{width:20px;height:20px;color:#fff}
.myds-info.ok .tx{color:#fff}
/* 취소·환불 안내(⑨) — 노란 경고와 같은 크기(radius 16 · gap 12)에 회색. 끝난 일이라 조용하다. */
.myds-info.mute{gap:12px;background:var(--tgray50);border-radius:16px}
.myds-info.mute svg{color:var(--tgray600)}
.myds-info.mute .tx{color:var(--tgray500)}
.myds-info.mute .tx b{color:var(--myds-ink-mute)}
/* ④ 인증 완료 초록 줄 — 마이 탭 맨 위. 탭 화면이라 아래 여백을 스스로 갖는다. */
.myds-mytoast{margin-bottom:16px}

/* ── ⑧ 주문 취소 확인 Dialog ───────────────────────────────────────────────
   되돌릴 수 없는 행동이라 확인 버튼만 danger 다. 어두운 막을 눌러도 닫히지 않는다
   (실수로 닫히면 「취소했는지」가 애매해진다 — 버튼으로만 닫는다). */
.myds-dim{position:fixed;inset:0;z-index:90;background:var(--myds-dim);
  display:none;align-items:center;justify-content:center;padding:20px}
.myds-dim.on{display:flex}
/* 다이얼로그 — 되돌릴 수 없는 행동을 묻는 자리라 **가운데 정렬**로 시선을 모은다(2026-08-14) */
.myds-dlg{width:100%;max-width:400px;background:#fff;border-radius:24px;padding:24px;
  display:flex;flex-direction:column;gap:8px;text-align:center}
.myds-dlg h4{margin:0;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:700}
/* 본문은 14px **검정**이다 — 회색으로 두면 「읽지 않아도 되는 안내」로 보이는데,
   여기 적힌 것(환불에 1~3영업일 · 쿠폰 반환)은 반드시 읽어야 하는 내용이다. */
.myds-dlg p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:#000}
.myds-dlg .row{display:flex;gap:8px;margin-top:8px}
/* 취소 사유 한 줄 (2026-08-20). 다이얼로그는 가운데 정렬인데 **이 라벨만 왼쪽**으로 둔다 —
   입력칸이 왼쪽 정렬이라 가운데 라벨과 어긋나 보인다. 안내 문구라 12px 회색이 맞다
   (위 `p` 와 달리 안 읽어도 취소는 된다). */
.myds-dlg .myds-why{display:flex;flex-direction:column;gap:6px;margin-top:8px;text-align:left}
.myds-dlg .myds-why>span{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}
.myds-dlg .myds-why .myds-inp{height:48px;box-sizing:border-box}

/* ── ⑩ 설정 ───────────────────────────────────────────────────────────────*/
.myds-glabel{flex:none;padding:8px 20px;font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--tgray600)}
.myds-row{flex:none;width:100%;min-height:56px;padding:0 20px;border:0;background:none;
  font-family:inherit;text-align:left;color:var(--ink);
  display:flex;align-items:center;gap:8px;cursor:pointer}
.myds-row.plain{cursor:default}
.myds-row:active:not(.plain){background:var(--tgray50)}
.myds-row>.t{flex:1;min-width:0;font-size:var(--fs-title);line-height:var(--lh-title)}
.myds-row>.t2{flex:1;min-width:0}
.myds-row>.t2 span{display:block;font-size:var(--fs-title);line-height:var(--lh-title)}
.myds-row>.t2 em{display:block;font-style:normal;font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--tgray600)}
.myds-row>.val{flex:none;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tgray600)}
.myds-row.quiet>.t{color:var(--tgray500)}
.myds-row.small>.t{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tgray600)}
.myds-gap{flex:none;height:8px;background:var(--tgray50);margin:8px 0}
/* 스위치 — 48×28. 켜짐은 primary 색으로, 꺼짐은 선 색으로 */
.myds-sw{flex:none;width:48px;height:28px;border:0;border-radius:9999px;background:var(--tgray100);
  padding:2px;display:flex;align-items:center;justify-content:flex-start;cursor:pointer}
.myds-sw i{width:24px;height:24px;border-radius:9999px;background:#fff;display:block}
.myds-sw.on{background:var(--tmint600);justify-content:flex-end}

/* ── ⑪ 번호 변경 · ⑨ 프로필 수정에서 쓰는 입력 모양 ────────────────────────*/
.myds-field{flex:none;display:flex;flex-direction:column;gap:8px}
.myds-lab{display:flex;align-items:baseline}
.myds-lab>span:first-child{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.myds-lab>.r{margin-left:auto;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}
.myds-lab>.r.err{font-weight:700;color:var(--tred500)}
.myds-inp{width:100%;height:56px;border:1px solid var(--tgray100);border-radius:16px;padding:0 16px;
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff}
.myds-inp::placeholder{color:var(--tgray300)}
.myds-inp:focus{outline:0;border-color:var(--tmint600)}
.myds-inp.bad{border-color:var(--tred500)}
.myds-inp.ro{background:var(--tgray50);color:var(--tgray500)}
.myds-inprow{display:flex;gap:8px}
.myds-inprow .myds-btn{flex:none;width:88px;height:56px;font-size:var(--fs-body);
  line-height:var(--lh-body)}
.myds-hint{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}
.myds-err{display:flex;gap:6px;align-items:center;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--tred500)}
.myds-err svg{flex:none;width:16px;height:16px}
/* 지금 번호 상자 */
.myds-now{flex:none;background:var(--tgray50);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:4px}
.myds-now span{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--tgray600)}
.myds-now b{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:700}

/* ── ⑫ 알림 목록 ───────────────────────────────────────────────────────────*/
.myds-nrow{flex:none;width:100%;border:0;background:none;font-family:inherit;text-align:left;
  color:var(--ink);display:flex;gap:12px;padding:12px 20px;cursor:pointer}
.myds-nrow.unread{background:var(--myds-unread)}
.myds-nrow:active{background:var(--tgray50)}
.myds-nth{flex:none;width:44px;height:44px;border-radius:12px;background:var(--tgray50);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--tgray100)}
.myds-nth img{width:100%;height:100%;object-fit:cover}
.myds-nth svg{width:20px;height:20px;color:var(--tgray500)}
.myds-ntx{flex:1;min-width:0}
.myds-ntx>span{display:block;font-size:var(--fs-body);line-height:var(--lh-body)}
.myds-ntx>em{display:block;font-style:normal;font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--tgray600)}
.myds-ndot{flex:none;width:8px;height:8px;border-radius:9999px;background:var(--tmint600);
  margin-top:6px}

/* ── 빈 상태 ───────────────────────────────────────────────────────────────*/
.myds-empty{flex:none;margin:24px 20px;padding:24px;border-radius:16px;background:var(--tgray50);
  text-align:center;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tgray500)}
.myds-empty b{display:block;margin-bottom:4px;color:var(--ink)}

/* ── ①④ 마이 탭 손보기 (기존 화면 · CSS 만) ────────────────────────────────
   #pgMy 마크업은 그대로 두고 모양만 목업에 맞춘다. 홈 파일에 옛 규칙이 있어
   ID 선택자로 특이성을 올리고, 값이 겹치는 줄만 !important 를 쓴다. */
#pgMy .phead{align-items:center}
#pgMy .phead h2{font-size:var(--fs-title) !important;line-height:var(--lh-title) !important}
/* 제목 오른쪽 톱니·종 — my-ds.js 의 mountMyHeadActions() 가 넣는다 */
#pgMy .phead .myds-head-acts{margin-left:auto;display:flex;align-items:center;gap:4px}
/* 🚨 홈 파일 맨 뒤 「뒤로 가기 머리줄」 블록이 `body .page > .phead button` 에
      **뒤로가기 화살표 mask** 를 `!important` 로 씌운다 — 그대로 두면 톱니가 「‹」로 보인다
      (2026-08-14 화면에서 확인). 순서로는 못 이긴다(그 블록이 my-ds.css 보다 뒤에 있다) —
      id 선택자로 특이성을 이겨 되돌린다. mask 를 지우고 안의 svg 를 다시 보이게 한다.
      크기는 확정본과 같은 24px 로 둔다(final-my.html:23 · 같은 머리줄의 ← 도 24px 이다). */
#pgMy .phead .myds-head-acts button{width:24px !important;height:24px !important;
  border:0 !important;padding:0 !important;
  background:none !important;background-color:transparent !important;
  -webkit-mask:none !important;mask:none !important;
  font-size:inherit !important;color:#000 !important;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative}
#pgMy .phead .myds-head-acts button svg{width:24px;height:24px;display:block}
#pgMy .phead .myds-head-acts .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;
  border-radius:9999px;background:var(--tmint600);display:none}
#pgMy .phead .myds-head-acts .dot.on{display:block}

/* 「내 주문」 제목은 여기서 손대지 않는다 (2026-08-14 확인).
   홈 파일 맨 뒤 「섹션 제목 (Figma Title)」 블록이 `#pgMy .albumhead` 를 18/28 Bold 검정 ·
   개수는 민트 14/20 으로 **!important 로** 정해 두었다. 그 블록이 my-ds.css 보다 뒤에 있어
   같은 특이성이면 그쪽이 이긴다 — 여기서 16px 로 되돌리면 화면은 그대로인데 규칙만 둘이 된다.
   확정본은 16/24 인데 그 블록은 18/28 이다. 어느 쪽이 정본인지는 사람이 정할 일이라
   _mock/배선-패치-마이.md 「사람이 정해야 하는 것」에 적어 두었다. */

/* 프로필 줄 — 확정본은 카드가 아니라 그냥 한 줄이다(테두리·여백 없음).
   사진 56px · 「프로필 수정」은 민트 글자에서 회색 pill 버튼으로 */
#pgMy .mehead{border:0 !important;background:none !important;padding:0 !important;
  margin-bottom:16px}
#pgMy .mehead .av{width:56px !important;height:56px !important}
#pgMy .mehead .nm{font-size:var(--fs-title) !important;line-height:var(--lh-title) !important}
#pgMy .mehead .edit{height:36px;padding:0 12px;border-radius:12px;
  background:var(--tgray50);color:var(--myds-ink-sub) !important;
  display:flex;align-items:center;font-size:var(--fs-body) !important;font-weight:700}

/* 인증 카드 — 확정본 마이 ①(final-my.html:33)에서 값을 그대로 옮겼다:
   배경 #E8FEFA(tmint50) · radius 16 · padding 16 · gap 12 ·
   40×40 흰 네모 + 민트 22px 아이콘 · 제목 14/20 700 #04AE90 · 부제 12/16 #04AE90 ·
   버튼 48px radius 16 #07D1AE 흰 글자 14/700. */
/* 경고 톤으로 (2026-08-18 혜림님) — 「인증하지 않으면 데이터가 사라질 수 있어요」인데
   민트(성공·안심)로 칠해져 있어 뜻이 반대로 읽혔다. 위험 배경 토큰을 쓴다. */
#pgMy .authbox{background:var(--tred50) !important;border-radius:16px !important;
  border:1px solid #F8B4B4 !important;
  padding:16px !important;display:flex;flex-direction:column;gap:12px;
  margin:0 0 16px !important}
/* 아이콘 + 두 줄을 한 줄로 (확정본은 이 둘을 gap 12 로 나란히 둔다) */
#pgMy .authbox .authrow{display:flex;gap:12px;align-items:center}
#pgMy .authbox .authic{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center}
#pgMy .authbox .authic svg{width:22px;height:22px;color:var(--tred500);display:block}
#pgMy .authbox .authtx{margin:0 !important;flex:1;min-width:0}
#pgMy .authbox .authtx b{color:#9B1C1C !important;
  font-size:var(--fs-body) !important;line-height:var(--lh-body) !important}
#pgMy .authbox .authtx span{color:#C81E1E !important;
  font-size:var(--fs-cap) !important;line-height:var(--lh-cap) !important}
#pgMy .authbox .orow{gap:8px !important}
/* 실제로 보이는 버튼은 #meClaim 하나다(#meLogin 은 hidden) — 민트가 그쪽에 붙어야 한다.
   전에는 민트가 #meLogin 에만 있어서, 화면의 유일한 버튼이 흰 테두리 버튼으로 보였다. */
#pgMy .authbox .orow button#meClaim,
#pgMy .authbox .orow button#meLogin{
  height:48px !important;border:0 !important;border-radius:16px !important;
  background:var(--tmint600) !important;color:#fff !important;
  font-size:var(--fs-body) !important;line-height:var(--lh-body) !important;font-weight:700}
#pgMy .authbox .orow button#meClaim:active,
#pgMy .authbox .orow button#meLogin:active{background:var(--tmint700) !important}

/* 쿠폰 카드(④) — my-ds.js 의 couponCardHtml() 이 그린다 */
.myds-coupon{flex:none;display:flex;gap:12px;align-items:center;background:var(--tyellow50);
  border-radius:16px;padding:12px;margin:0 0 16px}
.myds-coupon .ic{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center}
.myds-coupon .ic svg{width:22px;height:22px;color:var(--tyellow500)}
.myds-coupon .tx{flex:1;min-width:0}
.myds-coupon .tx b{display:block;font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--myds-warn-ink)}
.myds-coupon .tx span{display:block;font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--myds-warn-ink2)}
.myds-coupon button{flex:none;height:36px;padding:0 12px;border:0;border-radius:12px;
  background:var(--tyellow500);color:#fff;font-family:inherit;font-size:var(--fs-body);
  font-weight:700;cursor:pointer}

/* ── 좁은 화면 (375px) ─────────────────────────────────────────────────────
   가로 스크롤이 생기는 자리는 두 곳이다: 상태 칩 줄(자기 안에서 스크롤한다)과
   진행 단계의 고정폭 선. 375 에서는 선을 줄여 4단계가 한 줄에 들어가게 한다. */
@media (max-width:389px){
  .myds-steps hr{width:12px}
  .myds-body.pad{padding:16px}
  .myds-body.list{padding:12px 16px}
  .myds-top{padding-left:16px;padding-right:16px}
  .myds-bar{padding-left:16px;padding-right:16px}
  .myds-btn.ghost.w110{width:96px}
}

/* 쿠폰으로 무료로 받은 줄 — 장바구니와 같은 모양(2026-08-14).
   노랑 「선물」 배지 + 0원(초록) + 정가 취소선. 사은품이라 수량을 고르는 대상이 아니다. */
.myds-gift{
  display:inline-block; margin-left:6px; font-style:normal; vertical-align:1px;
  font-size:12px; line-height:16px; font-weight:700;
  color:#FFA505; background:#FFFCE4; border-radius:8px; padding:2px 8px;
}
/* 취소된 주문의 선물 줄은 회색이다(확정본 ⑨) — 지금 받을 수 있는 것처럼 보이면 안 된다 */
.myds-gift.off{color:var(--tgray600); background:var(--tgray50)}
.myds-item.gift .r .free{color:#0E9F6E}
.myds-item.gift .r s{display:block; font-size:12px; line-height:16px; color:#9A95A2; font-weight:400}

/* ④ 이름 옆 「회원」 배지 */
.myds-member{display:inline-block;margin-left:6px;font-style:normal;vertical-align:2px;
  font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:700;
  color:var(--tmint700);background:var(--tmint50);border-radius:9999px;padding:2px 8px}

/* 아이폰 팝업 차단 안내 + 알림톡 다시 받기 — 결제 버튼 바로 아래(2026-08-14) */
/* 버튼 사이 12px (2026-08-15 혜림님). 위 「결제하기」와의 간격도 같다 */
/* 결제 버튼과의 간격은 카드 flex gap 8px + 여기 margin — 합쳐서 12px 다
   (2026-08-16 혜림님 「버튼 사이 간격 너무 넓어」 — 전에는 12+8=20px 였다). */
.myds-payhelp{flex:none;margin-top:4px;display:flex;flex-direction:column;gap:12px}
.myds-warn{display:flex;gap:6px;align-items:flex-start;background:#FFFCE4;border-radius:12px;padding:10px 12px}
.myds-warn svg{width:16px;height:16px;flex:none;margin-top:2px;color:#FFA505}
.myds-warn .tx{flex:1;font-size:12px;line-height:16px;color:#8A5A16}
.myds-warn .tx b{display:block}
.myds-payhelp .myds-btn.ghost{width:100%;height:44px;border-radius:12px}
/* 앞 아이콘 — 확정본은 16px 회색이다(final-my.html:39). 기본 20px 은 글자보다 커 보인다. */
.myds-payhelp .myds-btn.ghost svg{width:16px;height:16px;color:var(--tgray600)}

/* ── 번호 인증 창(#phAuth)·배송지 수정(#shipEdit)의 입력칸 ────────────────────
   ⚠️ iOS 사파리는 글자가 16px 미만인 입력칸에 손을 대면 화면을 확대하고 **되돌리지 않는다.**
      홈 파일 `.fld input` 은 14px(--fs-body)이라 번호를 넣는 순간 화면이 커진 채로 남는다.
      확정본 ②③ 의 두 칸이 16px 인 이유가 이것이다.
      마크업을 못 고치니(다른 레인) 이 두 화면에만 글자 크기를 올려 둔다.
   ⚠️ 확정본 ②③ 은 이 창을 **바텀시트**로, 두 칸을 **한 번에** 보여준다(지금은 가운데 팝업 +
      번호 → 코드 2단계). 그 모양은 마크업·JS 변경이라 여기서 못 한다 — 배선 패치 문서에 적었다. */
#phAuth .fld input,#shipEdit .fld input,#shipEdit .fld textarea{font-size:16px;line-height:24px}
/* ③ 인증번호 오류 — 칸만 빨강 테두리 + 아래 한 줄. 홈 JS 가 .bad / .err 를 붙이면 이 모양이 된다. */
#phAuth .fld input.bad{border-color:var(--tred500)}
#phAuth .fld .hint.err{color:var(--tred500);font-weight:700}

/* 「1개 무료 적용」 — 장바구니 줄의 .cfree 와 같은 말·같은 색 (2026-08-14).
   쿠폰을 「−3,600원」이라는 뺄셈으로 보여주지 않고 「무료」로 말한다. */
.myds-free{margin:2px 0 6px; font-size:var(--fs-cap,12px); line-height:var(--lh-cap,16px);
  font-weight:700; color:var(--tmint700,#059c84)}

/* ── 주문 상세: 언제 받는지 · 선물 · 송장 (2026-08-18) ─────────────────── */
.myds-eta{ background:var(--tmint50,#eafaf6); border-radius:12px; padding:12px 14px;
  margin:2px 0 14px; font-size:13.5px; line-height:1.7; color:#1b1b1f }
.myds-eta b{ color:#0d9c85 }
.myds-eta span{ display:block; color:var(--tgray500,#6b6675); font-size:12.5px; margin-top:5px }

/* 택배사·송장 한 줄 */
.myds-krow{ display:flex; justify-content:space-between; font-size:14px; padding:5px 0 }
.myds-krow span:first-child{ color:var(--tgray500,#6b6675) }
.myds-krow .num{ font-variant-numeric:tabular-nums; font-weight:600 }
.myds-btn.wfull{ width:100%; margin-top:10px }

/* 트웬티가 드리는 말 + 선물 — 주문 목록과 **분리**해서 보여준다 */
.myds-notice{ border:1px solid #CDEFE7; background:#F6FDFB; border-radius:14px;
  padding:15px 16px; margin-bottom:14px }
.myds-notice h4{ margin:0 0 8px; font-size:14.5px }
.myds-notice p{ margin:0 0 10px; font-size:13.5px; line-height:1.75; color:#3b3945 }
.myds-notice p.cs{ margin:12px 0 0; font-size:12.5px; color:var(--tgray500,#6b6675) }
.myds-notice .gifts{ display:flex; gap:10px; margin-top:12px }
.myds-notice .g{ flex:1; text-align:center; min-width:0 }
.myds-notice .g .tag{ display:inline-block; background:#0d9c85; color:#fff; font-size:10.5px;
  font-weight:700; padding:2px 7px; border-radius:5px; margin-bottom:5px }
.myds-notice .g .th{ width:100%; aspect-ratio:1; border:1px solid var(--tgray100,#e5e2ea);
  border-radius:10px; background:#fff center/78% no-repeat; margin-bottom:6px }
.myds-notice .g .cap{ font-size:11.5px; color:var(--tgray500,#6b6675); line-height:1.4; display:block }
.myds-onote{ font-size:12px; color:#9a95a6; margin-top:8px }

/* 구매자가 남기는 답장 */
.myds-reply{ margin-top:14px; padding-top:12px; border-top:1px solid #DCF1EA }
.myds-reply .emo{ display:flex; gap:6px; margin-bottom:8px }
.myds-reply .e{ flex:1; height:38px; border:1px solid var(--tgray100,#e5e2ea); background:#fff;
  border-radius:10px; font-size:18px; cursor:pointer; padding:0 }
.myds-reply .e.on{ border-color:#0d9c85; background:#EAFAF6 }
.myds-reply .row{ display:flex; gap:8px }
.myds-reply input{ flex:1; min-width:0; height:40px; border:1px solid var(--tgray100,#e5e2ea);
  border-radius:10px; padding:0 12px; font:inherit; font-size:13.5px }
/* 실물 후기는 긴 이야기 — 3줄 textarea, 쓰는 만큼 자란다(JS가 높이를 따라 늘림).
   resize 손잡이는 뺀다 — 자동으로 늘어나는데 손잡이까지 있으면 둘이 싸운다. */
.myds-reply textarea{ flex:1; min-width:0; border:1px solid var(--tgray100,#e5e2ea);
  border-radius:10px; padding:9px 12px; font:inherit; font-size:13.5px; line-height:1.5;
  resize:none; overflow:hidden }
/* 보내기를 칸 아래로 (2026-08-21) — 3줄 칸 옆에 두면 버튼만 붕 뜬다.
   이 카드의 유일한 행동이라 폭을 꽉 채운다(누르기도 쉽다). */
.myds-reply .row.col{ flex-direction:column; align-items:stretch }
.myds-reply .row.col .send{ width:100%; height:42px; margin-top:8px }
.myds-reply .send{ flex:none; height:40px; padding:0 16px; border:0; background:#0d9c85; color:#fff;
  border-radius:10px; font:inherit; font-weight:700; font-size:13.5px; cursor:pointer }
.myds-reply .send:disabled{ background:#c8c4d0 }
.myds-reply.done{ font-size:13px; color:#0d9c85; text-align:center; padding:12px 0 2px }
/* 리뷰 남기기 (배송 완료, 2026-08-21) — 답장 칸을 그대로 쓰되, 섹션 안에서는 위 구분선을 뺀다
   (구분선은 안내 상자와 답장을 가르던 것 — 섹션에는 이미 제목이 있다) */
.myds-revsub{ font-size:12.5px; color:var(--tgray500,#6b6675); margin:2px 0 0 }
.myds-sec .myds-reply{ margin-top:10px; padding-top:0; border-top:0 }

/* 내 캐릭터, 실물로 어때요? (2026-08-21) — 배송 완료의 핵심 행동이라 노란 카드로 세운다
   (쿠폰과 같은 「눈길」 색 — 흰 카드 사이에서 유일하게 색이 있는 자리가 되게) */
.myds-review{ background:#FFF9E9; border-color:#FFE9AE }
.myds-review h4{ gap:8px }
.myds-review .ric{ flex:none; width:30px; height:30px; border-radius:50%; background:#FFB524;
  color:#fff; display:inline-flex; align-items:center; justify-content:center }
.myds-review .ric svg{ width:16px; height:16px }
.myds-review .myds-revsub{ margin-top:-4px }
.myds-review .myds-reply .e{ background:#fff }
.myds-review .myds-reply input, .myds-review .myds-reply textarea{ background:#fff }
.myds-review .padd{ background:#fff }

/* 받아보니 어떠세요? — 사진 붙이기 (2026-08-21) */
.myds-reply .ph{ display:flex; gap:8px; align-items:center; margin-bottom:8px }
.myds-reply .padd{ flex:1; height:38px; border:1px dashed var(--tgray100,#d9d5e0); background:#fff;
  border-radius:10px; font:inherit; font-size:12.5px; font-weight:700; color:var(--tgray700,#4d4857);
  cursor:pointer }
.myds-reply .pthumb{ position:relative; display:block }
.myds-reply .pthumb img{ width:96px; height:96px; object-fit:cover; border-radius:10px;
  border:1px solid var(--tgray100,#e5e2ea); display:block }
.myds-reply .prm{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border:0;
  border-radius:50%; background:#4d4857; color:#fff; font-size:14px; line-height:22px; padding:0;
  cursor:pointer }

/* 송장번호 복사 (2026-08-21) — 번호 옆 작은 버튼 */
.myds-copy{ margin-left:8px; height:24px; padding:0 9px; border:1px solid var(--tgray100,#e5e2ea);
  background:#fff; border-radius:7px; font:inherit; font-size:11.5px; font-weight:700;
  color:#0d9c85; cursor:pointer; vertical-align:1px }
/* 배송 과정 (2026-08-21) — 택배사 조회 결과를 그대로. 최신이 맨 위, 점·세로선으로 잇는다 */
.myds-tsteps{ margin-top:12px; padding-top:12px; border-top:1px solid var(--tgray50,#f1eff5) }
.myds-tsteps .ld{ font-size:12.5px; color:var(--tgray500,#6b6675) }
.myds-tsteps .tstep{ position:relative; padding:0 0 14px 18px }
.myds-tsteps .tstep:last-child{ padding-bottom:0 }
.myds-tsteps .tstep i{ position:absolute; left:0; top:4px; width:9px; height:9px;
  border-radius:50%; background:var(--tgray100,#d9d5e0) }
.myds-tsteps .tstep:not(:last-child):before{ content:''; position:absolute; left:4px; top:15px;
  bottom:-2px; width:1px; background:var(--tgray100,#e5e2ea) }
.myds-tsteps .tstep.now i{ background:#0d9c85; box-shadow:0 0 0 3px #EAFAF6 }
.myds-tsteps .bd b{ font-size:13px }
.myds-tsteps .tstep.now .bd b{ color:#0d9c85 }
.myds-tsteps .bd span{ display:block; font-size:12px; color:var(--tgray500,#6b6675); margin-top:2px }
.myds-tsteps .bd em{ display:block; font-style:normal; font-size:12px; color:var(--tgray700,#4d4857);
  background:var(--tmint50,#eafaf6); border-radius:8px; padding:7px 9px; margin-top:6px }
/* ⚠️ 하단 고정 바(문의하기)가 답장 입력칸을 덮었다 — 본문 여백 86px 은 마지막 **블록**
   기준이라, 안내 블록 안에 든 답장칸이 그만큼 더 내려가면 가려진다. 스크롤로 닿게 여유를 준다. */
.myds-page.has-bar .myds-body{ padding-bottom:calc(150px + env(safe-area-inset-bottom)) }