/* 주문 수집 — 화면 모양은 shopmoa 를 그대로 따른다.
 *
 * 사장님이 shopmoa 로 일해 왔다. 같은 자리에 같은 버튼이 있어야 헤매지 않는다.
 * 치수·색은 shopmoa 화면의 스타일에서 잰 값이다 (16px = 1rem):
 *   본문 폭 380px(좌우 여백 20px 포함 420px) · 빨강 #de0500 · 남색 #0f00a1 · 선 #eee/#dfdfdf
 *   목록 글자 12px · 상품명 14px 굵게 · 작은 검정 버튼 24px · 탭 고르기 40px
 * 로고와 이름은 우리 것이다 — 남의 상표를 쓰지 않는다.
 */

:root {
  --red: #de0500;
  --navy: #0f00a1;
  --line: #eeeeee;
  --line2: #dfdfdf;
  --gray: #808080;
  --text: #606060;
  --bar: #b6b6b6;
}

* { box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; }
html, body { min-height: 100%; }
body { color: #000; background: #fff; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
[hidden] { display: none !important; }

.wrap { position: relative; min-height: 100vh; padding-bottom: 40px; }   /* 바닥줄 자리 */
.col { width: 100%; max-width: 420px; margin: 0 auto; padding: 0 20px; }

/* ---------- 머리줄 ---------- */
.hd { position: relative; height: 60px; background: #fff; }
.hd .l, .hd .r { position: absolute; top: 0; height: 60px; padding: 0 20px; display: flex;
                 align-items: center; cursor: pointer; z-index: 2; }
.hd .l { left: 0; }
.hd .r { right: 0; }
.hd .l svg, .hd .r svg { width: 24px; height: 24px; }
.hd .c { height: 60px; display: flex; align-items: center; justify-content: center; }
.hd .title { font-size: 22px; font-weight: 700; }

.logo { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 800;
        letter-spacing: -0.5px; color: #2b2b2b; }
.logo .mk { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center;
            justify-content: center; background: linear-gradient(135deg, #ff2445, #de0500); }
.logo .mk svg { width: 17px; height: 17px; }
.mock-tag { margin-left: 6px; font-size: 10px; font-weight: 700; color: #fff; background: #ff8a00;
            padding: 1px 5px; vertical-align: middle; }

/* ---------- 첫 화면 ---------- */
.main { border-top: 1px solid var(--line); padding-bottom: 10px; }
.notice { border-bottom: 1px solid var(--line); text-align: center; }
.notice .in { display: inline-block; width: 100%; max-width: 420px; padding: 0 20px; font-size: 12px;
              height: 30px; line-height: 30px; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.notice .in.warn { color: var(--red); }
.gbar { height: 5px; background: var(--line); margin-top: 10px; }

.sec { display: flex; align-items: center; padding: 10px 0; }
.sec .t { font-size: 18px; font-weight: 700; line-height: 30px; }
.sec .small { margin-left: 8px; font-size: 10px; line-height: 1.3; color: #000; }
.sec .sp { flex: 1; }

.btn-k { display: inline-block; height: 30px; line-height: 30px; padding: 0 10px; background: #000;
         color: #fff; font-size: 14px; white-space: nowrap; }
.btn-k .plus { font-size: 20px; font-weight: 700; vertical-align: middle; margin-right: 6px; line-height: 1; }
.btn-k:disabled { opacity: .5; cursor: default; }
.btn-k.sm { height: 24px; line-height: 24px; font-size: 10px; }

.sales { border: 1px solid var(--line); padding: 10px 0; }
.sales .top { display: flex; justify-content: space-between; padding: 0 40px 5px; }
.sales .k { font-size: 10px; }
.sales .v { text-align: right; }
.sales .v b { color: var(--red); font-size: 28px; font-weight: 700; }
.sales .v span { font-size: 14px; }
.sales .note { color: var(--red); font-size: 12px; text-align: center; padding-top: 5px; }

.grid6 { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid6 td { border: 1px solid var(--line); padding: 14px 0 10px; text-align: center; cursor: pointer; }
.grid6 td:active { background: #fafafa; }
.grid6 .ic { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.grid6 .ic svg { width: 36px; height: 36px; }
.grid6 .ic span { font-size: 10px; margin-top: 2px; }
.grid6 .num { font-size: 22px; color: var(--red); font-weight: 700; }
.grid6 .unit { font-size: 14px; }

.shoptbl-w { overflow: auto; }
.shoptbl { font-size: 10px; border-collapse: collapse; min-width: 100%; white-space: nowrap; }
.shoptbl th { padding: 4px; background: #f9f9f9; border: 1px solid var(--line); font-weight: 400; }
.shoptbl td { border: 1px solid var(--line); text-align: center; padding: 4px 0; vertical-align: middle; }
.shoptbl td:first-child { text-align: left; padding: 4px; }
.shoptbl td.red { color: var(--red); font-weight: 700; }
.shoptbl tr.fail { background: rgba(255, 0, 0, .2); color: var(--red); }
.shoptbl .nm { text-decoration: underline; vertical-align: middle; cursor: pointer; }
.shoptbl .go { cursor: pointer; font-size: 14px; padding: 0 6px; }

.dlv { display: flex; justify-content: space-between; }
.dlv a { width: 48%; padding: 10px 0; font-size: 12px; background: #000; color: #fff; text-align: center;
         line-height: 1.4; }

/* ---------- 바닥줄 ---------- */
.ft { position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background: var(--line);
      padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.ft .l { color: #b5b5b5; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.ft .l .mk { width: 16px; height: 16px; border-radius: 4px; background: #c9c9c9; display: inline-block; }
.ft .r { font-size: 10px; color: #b5b5b5; }

/* ---------- 몰 아이콘 (글자 배지 — 몰 로고 그림은 쓰지 않는다) ---------- */
.mi { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
      font-size: 11px; font-weight: 900; color: #fff; vertical-align: middle; margin-right: 5px;
      flex: none; line-height: 1; letter-spacing: -0.5px; }
.mi-naver { background: #03c75a; }
.mi-11st { background: linear-gradient(135deg, #ff4b3a, #ff0038); font-size: 9px; }
.mi-gmarket { background: #fff; color: #00a650; border: 2px solid #00a650; font-size: 12px; }
.mi-auction { background: #e60012; font-size: 11px; }
.mi-coupang { background: radial-gradient(circle, #ff5a3c 30%, #c8102e 100%); border-radius: 50%; font-size: 9px; }
.mi-lotteon { background: #e60012; border-radius: 50%; font-size: 8px; }
.mi-interpark { background: #fff; color: #e60012; border: 2px solid #e60012; border-radius: 50%; font-size: 10px; }
.shoptbl .mi { width: 18px; height: 18px; }

/* ---------- 주문 목록 ---------- */
.tband { background: var(--line); padding: 5px 20px; }
.tband select { display: block; width: 100%; max-width: 380px; margin: 0 auto; height: 40px; padding: 0 6px;
                border: 1px solid var(--line2); background: #fff; font-size: 14px; }
.obar { border-bottom: 1px solid var(--line); }
.obar .in { max-width: 420px; margin: 0 auto; padding: 5px 20px; display: flex; align-items: center; gap: 10px; }
.obar .sum { font-size: 10px; color: var(--gray); line-height: 20px; }
.obar .filter { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px;
                cursor: pointer; line-height: 20px; }
.obar .filter svg { width: 16px; height: 16px; }
.obar .filter.on { color: var(--red); }
.obar .sp { flex: 1; }
.obar .sort { font-size: 12px; color: var(--gray); cursor: pointer; line-height: 20px; }
.obar .sort.on { color: #000; font-weight: 700; }
.obar .sort.on::before { content: "^"; display: inline-block; margin-right: 3px; font-weight: 400; }

.acts { border-bottom: 1px solid var(--line); }
.acts .in { max-width: 420px; margin: 0 auto; padding: 5px 20px; padding-right: 0; display: flex;
            align-items: center; flex-wrap: wrap; row-gap: 5px; }
.acts .btn-k { margin-left: 10px; }

.olist .row { border-bottom: 1px solid var(--line); }
.olist .card { max-width: 420px; margin: 0 auto; padding: 10px 20px; display: flex; }
.olist .ck { width: 24px; flex: none; }
.olist .ct { flex: 1; min-width: 0; padding-left: 10px; word-break: break-all; }
.olist .ln { line-height: 1.45; font-size: 0; }
.olist .ln > * { font-size: 12px; vertical-align: middle; }
.olist .ln.pad { padding-top: 5px; }
.olist .ln.addr { padding: 4px 0; }
.o-shop { font-weight: 700; }
.o-prod { font-size: 14px !important; color: var(--navy); font-weight: 700; text-decoration: underline; }
.o-red { color: var(--red); font-weight: 700; }
.o-blue { color: var(--navy); font-weight: 700; }
.o-b { font-weight: 700; }
.o-tx { color: var(--text); }
.o-lb { font-weight: 700; padding-right: 4px; }
.o-nm { font-size: 14px !important; }
.o-bar { padding: 0 4px; color: var(--bar); }
.o-inv { font-weight: 700; text-decoration: underline; }
.o-claim { color: var(--red); font-weight: 700; }

.olist select.cs { display: block; width: 100%; height: 30px; border: 1px solid var(--line2); background: #fff;
                   margin: 5px 0; padding: 0 6px; font-size: 12px; }
.olist .flex { display: flex; gap: 5px; }
.olist .flex input { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--line2); padding: 0 10px;
                     font-size: 12px; }
.olist .flex .btn-k { flex: none; }

/* 문의 — shopmoa 처럼 카드 안에서 바로 답한다 */
.olist .qbox { margin-top: 6px; padding: 10px; border: 1px solid var(--line2); font-size: 12px !important;
               white-space: pre-wrap; display: block; }
.olist .qlb { display: block; font-size: 12px; font-weight: 700; margin-top: 8px; }
.olist textarea.ans { display: block; width: 100%; height: 100px; margin-top: 4px; padding: 8px;
                      border: 1px solid var(--line2); font-size: 12px; resize: vertical; }
.olist .anscnt { display: block; text-align: right; font-size: 10px !important; color: var(--gray); }
.olist .btn-full { display: block; width: 100%; margin-top: 5px; height: 30px; line-height: 30px; }

.olist .empty { text-align: center; padding: 60px 0; color: var(--bar); font-size: 12px; font-weight: 700; }
.more { text-align: center; padding: 10px; border-bottom: 1px solid var(--line); }
.more a { font-size: 12px; color: var(--navy); text-decoration: underline; cursor: pointer; }

/* ---------- 체크박스 (빨간 네모) ---------- */
.cb { position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle;
      cursor: pointer; flex: none; }
.cb input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.cb i { position: absolute; inset: 0; border: 1px solid var(--line2); background: #fff; }
.cb i::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px;
               border: solid var(--line2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cb input:checked + i { background: var(--red); border-color: var(--red); }
.cb input:checked + i::after { border-color: #fff; }

/* ---------- 팝업 (shopmoa 의 필터·엑셀 다운/업로드 모양) ---------- */
.pop { position: fixed; inset: 0; z-index: 100; display: flex; padding: 20px; background: rgba(0, 0, 0, .5); }
.pop .box { margin: auto; width: 100%; max-width: 380px; max-height: calc(100vh - 40px); background: #fff;
            display: flex; flex-direction: column; }
.pop .ttl { flex: none; position: relative; padding: 20px; border-bottom: 1px solid var(--line);
            font-size: 16px; font-weight: 700; text-align: center; }
.pop .x { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; font-size: 24px;
          font-weight: 900; line-height: 32px; }
.pop .body { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
.pop .foot { flex: none; display: flex; }
.pop .foot button { flex: 1; height: 50px; font-size: 18px; font-weight: 700; }
.pop .foot .g { background: var(--line); color: #000; }
.pop .foot .r { background: var(--red); color: #fff; }
.pop .foot button:disabled { opacity: .6; cursor: default; }
.pop .fld { margin-bottom: 15px; }
.pop .fl { display: block; font-size: 12px; margin-bottom: 4px; }
.pop select.sel, .pop input.inp { display: block; width: 100%; height: 40px; border: 1px solid var(--line2);
                                  padding: 0 10px; font-size: 14px; background: #fff; }
.pop .hint { font-size: 11px; color: var(--gray); line-height: 1.5; }
.pop .log { margin-top: 10px; font-size: 11px; white-space: pre-wrap; background: #f9f9f9;
            border: 1px solid var(--line); padding: 8px; max-height: 180px; overflow: auto; }
.pop .lnk { font-size: 12px; color: var(--navy); text-decoration: underline; cursor: pointer; }

/* 필터: 샵 체크 목록 */
.chk-row { display: flex; align-items: center; gap: 5px; height: 34px; font-size: 13px; cursor: pointer; }
.chk-row .cb { margin-right: 4px; }

/* 엑셀 다운 */
.chips { flex: none; border-bottom: 1px solid var(--line); padding: 10px; white-space: nowrap; overflow-x: auto;
         text-align: left; font-size: 0; min-height: 41px; }
.chip { display: inline-flex; align-items: center; border: 1px solid #000; border-radius: 10px; padding: 0 4px;
        margin-left: 4px; font-size: 10px; line-height: 20px; cursor: pointer; }
.chip:first-child { margin-left: 0; }
.chip.on { background: #000; color: #fff; }
.chip .del { margin-left: 8px; font-weight: 900; }
.xhead { flex: none; display: flex; border-bottom: 1px solid #000; font-size: 12px; font-weight: 700; }
.xhead div { width: 50%; padding: 10px 0; text-align: center; }
.xcols { flex: 1; min-height: 160px; overflow: auto; display: flex; border-bottom: 1px solid #000; }
.xcols > div { width: 50%; padding: 6px 0; }
.xi { display: flex; align-items: center; height: 26px; font-size: 12px; padding: 0 10px; cursor: pointer; }
.xi .nm { flex: 1; text-align: left; }
.xcols .out .xi { justify-content: center; }
.xi .mv { width: 20px; height: 20px; font-size: 12px; color: #333; }
.xi .mv:disabled { color: #ccc; }
.xi.req .nm::after { content: "(제외불가)"; }
.xname { flex: none; padding: 10px 20px; }
.xname .fl { font-size: 12px; margin-bottom: 4px; display: block; }
.xname input { display: block; width: 100%; height: 40px; border: 1px solid var(--line2); padding: 0 10px; font-size: 14px; }

/* ---------- 왼쪽 메뉴 ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5); }
.drawer .pane { position: absolute; left: 0; top: 0; bottom: 0; width: 280px; max-width: 85vw; background: #fff;
                display: flex; flex-direction: column; overflow: auto; }
.drawer .brand { flex: none; height: 160px; background: linear-gradient(135deg, #ff2445, #e3001b);
                 color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
                 gap: 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.drawer .brand .mk { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: flex;
                     align-items: center; justify-content: center; }
.drawer .brand .mk svg { width: 38px; height: 38px; }
.drawer .item { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px;
                border-bottom: 1px solid var(--line); font-size: 15px; }
.drawer .item svg { width: 20px; height: 20px; flex: none; }
.drawer .sp { flex: 1; }
.drawer .out { flex: none; background: var(--line); text-align: center; padding: 8px 20px; font-size: 12px;
               color: #888; }

/* ---------- 설정 ---------- */
.set { border-top: 1px solid var(--line); }
.set .row { border-bottom: 1px solid var(--line); }
.set .in { max-width: 420px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 10px;
           cursor: default; }
.set .in.link { cursor: pointer; }
.set .t { font-size: 15px; font-weight: 500; }
.set .s { font-size: 10px; color: #444; margin-top: 2px; }
.set .s a { text-decoration: underline; }
.set .sp { flex: 1; }
.set .chev { width: 18px; height: 18px; flex: none; }
.set select { height: 30px; border: 1px solid var(--line2); padding: 0 6px; background: #fff; font-size: 13px; }
.tog { position: relative; width: 48px; height: 24px; border-radius: 12px; background: #ddd; cursor: pointer; flex: none; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
              background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.tog.on { background: var(--red); }
.tog.on::after { left: 26px; }
.tog.busy { opacity: .5; }

/* 등록 마켓 / 택배사 목록 */
.lst .row { border-bottom: 1px solid var(--line); }
.lst .in { max-width: 420px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 8px;
           font-size: 14px; }
.lst .in.pick { cursor: pointer; }
.lst .sp { flex: 1; }
.lst .st { font-size: 11px; font-weight: 700; }
.lst .st.ok { color: var(--navy); }
.lst .st.no { color: var(--red); }
.lst .sub { font-size: 11px; color: var(--gray); }
.lst .pickmark { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2); flex: none;
                 position: relative; }
.lst .pickmark.on { border: 6px solid var(--red); }
.guide { max-width: 420px; margin: 0 auto; padding: 14px 20px; font-size: 12px; color: #444; line-height: 1.6; }

/* ---------- 알림 ---------- */
#toast { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); width: max-content;
         max-width: min(380px, calc(100vw - 40px)); background: #222; color: #fff; padding: 11px 16px;
         font-size: 13px; line-height: 1.5; white-space: pre-wrap; z-index: 200; display: none; }
#toast.err { background: var(--red); }
.loading { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .35); display: flex; }
.loading::after { content: ""; margin: auto; width: 44px; height: 44px; border-radius: 50%;
                  border: 4px solid rgba(255, 255, 255, .35); border-top-color: #fff;
                  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 로그인 ---------- */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
         padding: 20px; }
.login .mark { width: 104px; height: 104px; border-radius: 26px; display: flex; align-items: center;
               justify-content: center; background: linear-gradient(135deg, #ff2445, #de0500); }
.login .mark svg { width: 60px; height: 60px; }
.login .word { margin-top: 22px; font-size: 40px; font-weight: 800; letter-spacing: -1.5px; color: #2b2b2b; }
.login form { width: 100%; max-width: 340px; margin-top: 50px; }
.login input[type=password] { display: block; width: 100%; height: 50px; border: 1px solid var(--line2);
                              padding: 0 10px; font-size: 14px; }
.login .btn-r { display: block; width: 100%; height: 50px; margin-top: 14px; background: var(--red); color: #fff;
                font-size: 18px; font-weight: 700; }
.login .err { width: 100%; max-width: 340px; margin-top: 16px; color: var(--red); font-size: 13px; text-align: center; }
.login .ftl { position: fixed; bottom: 14px; font-size: 10px; color: var(--bar); }