/* 공통 스타일 — eirenes.com 톤(Pretendard · 흑백 미니멀) 반영 */
:root {
  --bg: #ffffff;
  --bg-soft: #f9f9f9;
  --card: #ffffff;
  --ink: #1b1b1b;       /* 본문 텍스트 */
  --ink-strong: #000000;
  --muted: #999999;     /* 보조 텍스트 */
  --muted-2: #555555;
  --line: #e0e0e0;
  --line-soft: #ebebeb;
  --accent: #000000;    /* 포인트 = 블랙 (eirenes 모노톤) */
  --ok: #1b1b1b;
  --radius: 2px;
  --shadow: none;
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: clip;              /* 좌우 넘침만 차단(스크롤 컨테이너 미생성 → 세로 스크롤 정상) */
  overscroll-behavior: none;     /* 상하·좌우 바운싱(러버밴드) + 당겨서 새로고침 차단 */
}

body {
  margin: 0;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 100px;
}

header.site {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
header.site .brand {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--ink-strong);
  font-weight: 600;
  text-transform: uppercase;
}
header.site h1 {
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
header.site p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 16px;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 18px 0 7px;
  color: var(--ink-strong);
  text-transform: uppercase;
}
label:first-of-type { margin-top: 0; }
.hint { font-weight: 400; color: var(--muted); font-size: 11px; text-transform: none; letter-spacing: 0; }

input[type="text"],
input[type="tel"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #c2c2c2; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink-strong);
}
textarea { resize: vertical; min-height: 60px; }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.row > div { flex: 1; min-width: 140px; }
/* 입력창 옆에 놓인 버튼은 입력창과 동일한 높이로 정렬 */
.row > div > button,
.row > div > .btn { width: 100%; height: 100%; white-space: nowrap; }

.check {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.check input { width: auto; accent-color: #000; }

button, .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, background 0.15s;
  text-decoration: none;
  text-align: center;
}
button:hover, .btn:hover { opacity: 0.82; }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.ghost {
  background: #fff; color: var(--ink-strong);
  border: 1px solid var(--line);
}
button.ghost:hover { opacity: 1; border-color: var(--ink-strong); }
.btn-block { width: 100%; }

.msg { padding: 13px 15px; border-radius: var(--radius); margin: 16px 0; font-size: 14px; border: 1px solid var(--line); }
.msg.ok { background: var(--bg-soft); color: var(--ink-strong); border-color: var(--line); }
.msg.err { background: #fff; color: #d23f31; border-color: #f0c9c4; }

/* 단계 진행 바 — 세로선은 border 대신 ::before로 그려 첫 점~마지막 점 중심까지만 잇는다
   (기존 border 방식은 last-child를 transparent 처리해 마지막 단계(발송완료) 점 위 구간이 끊겼음) */
.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
  position: relative;
  padding: 16px 14px 16px 40px;
  margin-left: 9px;
}
.steps li::before {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.steps li:first-child::before { top: 28px; }               /* 첫 점 중심(y≈28.5px)부터 */
.steps li:last-child::before { bottom: auto; height: 28px; } /* 마지막 점 중심까지 */
.steps li .dot {
  /* 세로선 가로 중앙 + 라벨 첫 줄 텍스트 세로 중앙 정렬
     (top 고정값: 라벨이 2줄로 감싸져도 첫 줄 기준 유지 — padding 16px + 줄높이 24.75px/2 - 점 13px/2) */
  position: absolute; left: -7px; top: 22px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
}
.steps li.done .dot { background: var(--ink-strong); border-color: var(--ink-strong); }
.steps li.current .dot { background: var(--ink-strong); border-color: var(--ink-strong); box-shadow: 0 0 0 4px rgba(0,0,0,0.08); }
.steps li.done::before, .steps li.done + li::before { background: var(--ink-strong); }
.steps li .s-label { font-weight: 600; color: var(--ink-strong); }
.steps li.upcoming .s-label { color: var(--muted); font-weight: 500; }
.badge-current { display:inline-block; margin-left:8px; font-size:10px; background:var(--ink-strong); color:#fff; padding:2px 9px; border-radius:20px; vertical-align:middle; letter-spacing:0.05em; }

/* 어드민 카드 */
.order-card { border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:14px; background:#fff; }
.order-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.code { font-family: ui-monospace, "SFMono-Regular", monospace; font-weight:700; color:var(--ink-strong); font-size:16px; letter-spacing:0.05em; }
.meta { font-size:12px; color:var(--muted); }
.tags span { display:inline-block; font-size:11px; background:var(--bg-soft); color:var(--muted-2); padding:4px 11px; border-radius:20px; margin:4px 4px 0 0; border:1px solid var(--line-soft); }
.status-pill { font-size:12px; font-weight:700; padding:6px 13px; border-radius:20px; background:var(--ink-strong); color:#fff; white-space:nowrap; letter-spacing:0.02em; }
.status-pill.done { background:#fff; color:var(--ink-strong); border:1px solid var(--ink-strong); }
.kv { font-size:14px; margin:4px 0; color:var(--ink); }
.kv b { color:var(--muted); font-weight:600; display:inline-block; min-width:64px; font-size:12px; }
.actions { margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.center { text-align:center; }
.mt { margin-top:20px; }
a.navlink { color:var(--ink-strong); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
a.navlink:hover { color:var(--muted-2); }
.foot { text-align:center; color:var(--muted); font-size:11px; margin-top:40px; letter-spacing:0.05em; text-transform:uppercase; }

/* ===== DESIGN YOUR SHOES 위저드 (기존 톤 유지) ===== */
.wrap.wizard { max-width: 880px; }

header.site .hero { margin-top: 26px; }
header.site .hero img {
  max-height: 230px; width: auto; max-width: 100%;
  object-fit: contain; border-radius: var(--radius);
}

/* 진행 표시 */
.wizard-steps {
  list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 22px;
  justify-content: space-between; flex-wrap: wrap;
}
.wizard-steps li {
  flex: 1; min-width: 60px; text-align: center; position: relative;
  font-size: 11px; color: var(--muted); letter-spacing: 0.02em;
}
.wizard-steps li .n {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 12px; font-weight: 600; position: relative; z-index: 1;
}
.wizard-steps li .t { display: block; font-weight: 500; }
.wizard-steps li::before {
  content: ''; position: absolute; top: 13px; left: -50%; width: 100%;
  height: 1px; background: var(--line); z-index: 0;
}
.wizard-steps li:first-child::before { display: none; }
.wizard-steps li.current .n { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,0.06); }
.wizard-steps li.current .t { color: var(--ink-strong); font-weight: 700; }
.wizard-steps li.done .n { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.wizard-steps li.done::before, .wizard-steps li.current::before { background: var(--ink-strong); }
.wizard-steps li.done .t { color: var(--muted-2); }

.step-card { min-height: 320px; }
.step-intro { margin-bottom: 22px; }
.step-intro h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-strong); }
.step-intro p { margin: 0; color: var(--muted); font-size: 13px; }

/* 완성 미리보기 */
.done-preview { text-align: center; }
.done-img { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: center; }
.done-img img { max-width: 100%; max-height: 460px; object-fit: contain; border-radius: 6px; }
.done-cap { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--ink-strong); letter-spacing: 0.01em; }
.done-none { padding: 56px 20px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: 15px; line-height: 1.7; }
.done-none span { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--ink-strong); font-size: 14px; }

/* 이미지 선택 그리드 */
.pick-grid { display: grid; gap: 14px; }
.pick-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pick-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pick-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) {
  .pick-grid.cols-3, .pick-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
.pick {
  display: flex; flex-direction: column; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s, transform .1s;
  color: var(--ink);
}
.pick:hover { border-color: var(--muted-2); opacity: 1; }
.pick.selected { border-color: var(--ink-strong); box-shadow: 0 0 0 2px var(--ink-strong) inset; }
.pick-img { height: 132px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; padding: 8px; }
.pick-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pick-label { font-size: 17px; font-weight: 700; color: var(--ink-strong); letter-spacing: 0.01em; }

/* 칩 선택 그리드 (사이즈/옵션) */
.chip-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-grid.size .chip { min-width: 64px; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit;
}
.chip:hover { border-color: var(--muted-2); opacity: 1; }
.chip.selected { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.opt-group { margin-bottom: 20px; }
.opt-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-strong); margin-bottom: 10px; }

/* A/B 모드 토글 */
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.mode b { font-size: 14px; color: var(--ink-strong); font-weight: 700; }
.mode span { font-size: 12px; color: var(--muted); font-weight: 400; }
.mode:hover { border-color: var(--muted-2); opacity: 1; }
.mode.selected { border-color: var(--ink-strong); box-shadow: 0 0 0 2px var(--ink-strong) inset; }

/* 주문 요약 */
.summary { margin-top: 24px; padding: 18px 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.summary-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-strong); margin-bottom: 12px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.summary-row:last-child { border-bottom: none; }
.summary-row span { color: var(--muted); }
.summary-row b { color: var(--ink-strong); font-weight: 600; }

/* 위저드 네비게이션 */
.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.wizard-nav button { min-width: 110px; }
.wizard-progress { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }