/* ===================================================================
   회원 · 주문 UI — deeperkorea 사이드바 / 주문서 / 마이페이지 스킨에서 이식
   (theme.css 다음에 로드)
   =================================================================== */
/* member.css 보충 — theme.css 다음에 로드되는 회원·주문 화면 전용 덧옷. 읽는 화면: product·checkout·order·mypage·login·join (index·page·kakao-callback 은 안 읽음)
   theme.css 토큰(--mut/--mut2/--line/--ink/--tan/--red/--navy/--navy2)을 그대로 쓰므로 단독 로드 불가. 여기 :root 는 네이비·골드 보조색 3개뿐
   구역(파일 안 ===== 구분선): :root 토큰 → 폼(.fm/.fld2/.row2/.chk/.kakao/.divider — 가입·로그인·주문서 공용) → 주문 요약(.sumbox/.sumrow/.sumtot/.oitem) → 결제수단(.pay/.paynote) → 주문 상태(.st wait/paid/ship/done/cancel·.ocard) → 마이페이지(.mycard/.steps/.step/.mylist)
   ★함정: .fm 은 상단 76px 여백(56px 고정 헤더 가정) — checkout.html 은 인라인 style 'body .fm' 으로 56px·좌우 0 으로 덮고 .lgate 여백도 다시 잡는다 / 사이드 드로어·햄버거 사본을 다시 넣지 말 것(09-21 홈과 다른 메뉴가 떴던 사고, 정본은 theme.css) / .st 는 손님용 주문 상태칩 — 판매자센터의 .ost 와 이름·색이 다르다
   전체 지도: CODE_MAP.md */
:root{ --navy0:#0D1033; --gold:#FFD700; --navy-lite:#B8C1E0; }

/* 사이드 드로어(햄버거 메뉴)·햄버거 버튼 스타일은 theme.css 한 곳에만 둔다 (2026-09-21).
   여기 남아 있던 옛 네이비 사본이 member.css 를 읽는 페이지(상품·주문서·마이페이지·로그인…)에서만 theme.css 를 덮어
   홈(브라운)과 다른 메뉴가 떴다. 다시 넣지 말 것. */

/* ===== 폼 (가입 · 로그인 · 주문서 공용) ===== */
.fm{padding:76px 20px 40px}
.fm h1{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.fm .lead{font-size:13.5px;color:var(--mut);line-height:1.65;margin-bottom:22px}
.fm h2{font-size:15px;font-weight:800;margin:26px 0 12px;letter-spacing:-.02em}
.fld2{margin-bottom:14px}
.fld2 label{display:block;font-size:12.5px;font-weight:700;color:var(--mut2);margin-bottom:6px}
.fld2 label .req{color:var(--red)}
.fld2 input,.fld2 select,.fld2 textarea{width:100%;border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:13px 14px;font-size:15px;font-family:inherit;color:var(--ink);outline:none}
.fld2 textarea{min-height:78px;resize:vertical;line-height:1.6}
.fld2 input:focus,.fld2 textarea:focus,.fld2 select:focus{border-color:var(--tan);
  box-shadow:0 0 0 3px rgba(166,113,83,.13)}
.fld2 input.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(196,75,63,.1)}
.fld2 .hint2{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.5}
.row2{display:flex;gap:8px}
.row2 > *{flex:1;min-width:0}
.row2 .grow0{flex:0 0 auto}
.chk{display:flex;align-items:flex-start;gap:9px;padding:9px 0;font-size:13.5px;line-height:1.5;cursor:pointer}
.chk input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--tan)}
.chk a{text-decoration:underline;color:var(--mut2)}
.chk.all{border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:5px;font-weight:800}
.kakao{width:100%;background:#FEE500;color:#191600;border:none;border-radius:12px;
  padding:15px;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}
.kakao:disabled{opacity:.5}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--mut);font-size:12px}
.divider:before,.divider:after{content:'';flex:1;height:1px;background:var(--line)}

/* ===== 주문 요약 (basket 스킨 dp-summary 이식) ===== */
.sumbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-top:8px}
.sumrow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--mut2);padding:6px 0}
.sumrow b{font-weight:700;color:var(--ink)}
.sumdiv{height:1px;background:var(--line);margin:9px 0}
.sumtot{display:flex;justify-content:space-between;align-items:baseline}
.sumtot .l{font-size:15px;font-weight:800}
.sumtot .v{font-size:24px;font-weight:900;letter-spacing:-.04em;color:var(--red)}
.oitem{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.oitem:last-child{border-bottom:none}
.oitem img{width:62px;height:62px;flex:0 0 62px;border-radius:11px;object-fit:cover;background:var(--line)}
.oitem .m{flex:1;min-width:0}
.oitem .n{font-size:13.5px;font-weight:700;line-height:1.4}
.oitem .o{font-size:12px;color:var(--mut);margin-top:3px}
.oitem .p{font-size:14px;font-weight:800;margin-top:5px}

/* 결제수단 */
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay button{flex:1;min-width:96px;border:1.5px solid var(--line);background:#fff;border-radius:12px;
  padding:13px 8px;font-size:13.5px;font-weight:700;color:var(--mut2);cursor:pointer}
.pay button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.pay button:disabled{opacity:.5;background:#F6F1EC;cursor:not-allowed}
.paynote{font-size:12px;color:var(--mut);margin-top:9px;line-height:1.6;
  background:#FFF8E7;border-radius:10px;padding:11px 13px}

/* ===== 주문 상태 ===== */
.st{display:inline-block;font-size:11.5px;font-weight:800;border-radius:7px;padding:4px 9px;
  background:var(--line);color:var(--mut2)}
.st.wait{background:#FFF3D6;color:#8A6D1F}
.st.paid{background:#DCEBFF;color:#1A3E7A}
.st.ship{background:#E2F0E4;color:#25603A}
.st.done{background:var(--ink);color:#fff}
.st.cancel{background:#F3E4E2;color:#8A2F26}

.ocard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:11px}
.ocard .oh{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.ocard .oh .no{font-size:13px;font-weight:800;flex:1}
.ocard .oh .dt{font-size:12px;color:var(--mut)}

/* ===== 마이페이지 ===== */
.mycard{background:linear-gradient(135deg,var(--navy0),var(--navy),var(--navy2));color:#fff;
  border-radius:18px;padding:20px;margin-bottom:14px}
.mycard .hi{font-size:13px;color:var(--navy-lite)}
.mycard .nm{font-size:19px;font-weight:800;margin:4px 0 12px}
.mycard .lvbox{background:rgba(255,215,0,.14);border:1px solid rgba(255,215,0,.4);
  border-radius:12px;padding:11px 13px}
.mycard .lvbox .lv{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.1em}
.mycard .lvbox .nx{font-size:12px;color:var(--navy-lite);margin-top:4px;line-height:1.5}
.steps{display:flex;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 8px;margin-bottom:14px}
.step{flex:1;text-align:center;position:relative}
.step .v{font-size:20px;font-weight:900;color:var(--navy)}
.step .l{font-size:11px;color:var(--mut);margin-top:4px}
.step:not(:last-child):after{content:'\203A';position:absolute;right:-5px;top:5px;
  color:var(--line);font-size:17px}
.mylist{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mylist a{display:flex;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line);
  font-size:14.5px;font-weight:600}
.mylist a:last-child{border-bottom:none}
.mylist a .ar{margin-left:auto;color:var(--mut)}