@charset "UTF-8";

/* ============================================================
 * 단계형 팝업 (위저드) — 새 백링크 생성
 *   왼쪽 단계 목록 · 오른쪽 입력 · 아래 이전/다음. (traffic-booster 광고 시작하기 팝업과 같은 구조)
 *   색·글꼴 토큰은 main.css 에서 온다. 여기서 새 색을 만들지 않는다.
 * ========================================================= */

/* ---------- 덮개 ---------- */
.wz-dim {
    position: fixed; inset: 0; z-index: 1500;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(16, 18, 21, .45);
}
.wz-dim.is-open { display: flex; }

/* 팝업이 떠 있는 동안 뒤쪽이 스크롤되면 안 된다 */
body.wz-locked { overflow: hidden; }

/* ---------- 창 ---------- */
.wz {
    position: relative;
    width: 100%; max-width: 960px; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--bg);
    border-radius: 20px;
    box-shadow: var(--shadow-float);
    overflow: hidden;
    animation: ui-pop .2s ease;
}

.wz-head { position: relative; padding: 28px 36px 20px; }
.wz-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.wz-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.wz-close {
    position: absolute; top: 24px; right: 26px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: transparent; color: var(--muted); font-size: 18px; cursor: pointer;
}
.wz-close:hover { background: var(--bg-soft2); color: var(--ink); }

/* ---------- 본문: 왼쪽 단계 / 오른쪽 폼 ---------- */
.wz-body {
    display: grid;
    /* minmax(0, 1fr) — 긴 주소가 오른쪽 칸을 밀어 팝업 밖으로 넘기지 않게 */
    grid-template-columns: 264px minmax(0, 1fr);
    border-top: 1px solid var(--line);
    min-height: 0;
}

.wz-side {
    display: flex; flex-direction: column;
    padding: 20px 16px 18px;
    border-right: 1px solid var(--line);
    background: var(--bg-soft);
}

.wz-steps { display: flex; flex-direction: column; gap: 2px; user-select: none; }

.wz-step {
    position: relative;
    display: flex; gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
}
.wz-step.is-on { background: var(--bg); box-shadow: 0 1px 3px rgba(31, 36, 42, .08); }
/* 단계 사이를 잇는 선 */
.wz-step::after {
    content: ""; position: absolute;
    left: 27px; top: 44px; width: 1px; height: calc(100% - 30px);
    background: var(--line-strong);
}
.wz-step:last-child::after { display: none; }

.wz-step__no {
    position: relative; z-index: 1; flex: none;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-soft2); color: var(--muted);
    font-size: 12px; font-weight: 700;
}
.wz-step.is-on .wz-step__no { background: var(--blue); color: #fff; }
.wz-step.is-done .wz-step__no { background: var(--blue-soft); color: var(--blue); font-size: 13px; }

.wz-step__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.wz-step.is-on .wz-step__name { color: var(--blue); }
.wz-step.is-done .wz-step__name { color: var(--ink); }
.wz-step__desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--faint); }

/* 지나온 단계는 눌러서 돌아갈 수 있다. 눌리는 줄 모르면 없는 기능이다. */
.wz-step.is-clickable { cursor: pointer; }
.wz-step.is-clickable:hover { background: var(--bg-soft2); }

/* 단계 목록 아래 — 지금까지 고른 것 요약 */
.wz-picked {
    margin-top: auto; padding: 14px 14px 4px;
    border-top: 1px dashed var(--line-strong);
    font-size: 12.5px; color: var(--muted);
}
.wz-picked__row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.wz-picked__row b { color: var(--ink); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 오른쪽 폼 ---------- */
.wz-pane { display: flex; flex-direction: column; min-height: 0; }
.wz-scroll {
    flex: none;
    /* 높이를 고정한다 — 단계마다 내용 길이가 달라 창 크기가 들썩이면 버튼 위치가 매번 바뀐다 */
    height: min(540px, calc(100vh - 290px));
    padding: 26px 32px 28px;
    overflow-y: auto;
}

/* 얇은 스크롤바 — 기본 스크롤바(위아래 화살표)는 이 창에서 너무 무겁다 */
.wz-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.wz-scroll::-webkit-scrollbar { width: 8px; }
.wz-scroll::-webkit-scrollbar-track { background: transparent; }
.wz-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--bg); }
.wz-scroll::-webkit-scrollbar-button { display: none; height: 0; }

.wz-panel { display: none; }
.wz-panel.is-on { display: block; animation: wz-in .18s ease; }
@keyframes wz-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

.wz-sec + .wz-sec { margin-top: 28px; }
.wz-sec__head { display: flex; align-items: center; gap: 6px; }
.wz-sec__head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.wz-sec__head .opt { font-size: 13px; font-weight: 500; color: var(--faint); }
.wz-sec__desc { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ---------- 안내 박스 ---------- */
.wz-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: 12px;
    background: var(--blue-soft); color: var(--slate);
    font-size: 13px; line-height: 1.6;
}
.wz-note > .ic { margin-top: 2px; color: var(--blue); font-size: 16px; }
.wz-note b { font-weight: 700; color: var(--ink); }
.wz-note a { color: var(--blue); text-decoration: underline; }
.wz-note.is-warn { background: var(--amber-soft); color: #7A5508; }
.wz-note.is-warn > .ic { color: var(--amber); }
.wz-note.is-warn a { color: #7A5508; }

/* ---------- 입력 ---------- */
.wz-label { display: block; margin: 20px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wz-label:first-child { margin-top: 0; }
.wz-input, .wz-textarea, .wz-select {
    width: 100%; height: 52px; padding: 0 18px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg); color: var(--ink); font-size: 14.5px;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.wz-textarea { height: auto; min-height: 150px; padding: 14px 18px; line-height: 1.65; resize: vertical; }
.wz-input::placeholder, .wz-textarea::placeholder { color: var(--faint); }
.wz-input:focus, .wz-textarea:focus, .wz-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 69, 255, .12); }
.wz-input.is-bad { border-color: var(--red); background: #FEF6F6; }
.wz-input.is-bad:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }
.wz-help { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.wz-help.is-bad { color: var(--red); }

.wz-suffix { position: relative; }
.wz-suffix .wz-input { padding-right: 52px; }
.wz-suffix__text { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--muted); pointer-events: none; }

.wz-row { display: flex; gap: 10px; align-items: center; }
.wz-row > * { flex: 1; min-width: 0; }
.wz-row > .wz-row__sep { flex: none; color: var(--muted); font-weight: 600; }

/* ---------- 키워드 태그 입력 ----------
   Enter(또는 쉼표)로 한 개씩 뱃지가 된다. 뱃지에 마우스를 올리면 지우기 단추가 나온다.
   여러 줄을 붙여넣으면 줄마다 하나씩 들어간다. */
.wz-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    min-height: 56px; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg); cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.wz-tags.is-focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 69, 255, .12); }
.wz-tags__input {
    flex: 1; min-width: 160px; height: 34px;
    border: 0; outline: 0; padding: 0 6px;
    background: transparent; color: var(--ink); font-size: 14.5px;
}
.wz-tags__input::placeholder { color: var(--faint); }

.wz-tag {
    position: relative;
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 14px;
    border-radius: 999px;
    background: var(--blue-soft); color: var(--blue-strong);
    font-size: 13.5px; font-weight: 600;
    max-width: 100%;
    transition: padding .15s ease, background .15s;
    animation: wz-tag-in .16s ease;
}
.wz-tag__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-tag__del {
    position: absolute; right: 6px; top: 50%;
    width: 22px; height: 22px; margin-top: -11px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--blue); color: #fff; font-size: 11px;
    opacity: 0; transform: scale(.6);
    transition: opacity .15s, transform .15s;
    cursor: pointer;
}
.wz-tag:hover { padding-right: 34px; background: #E2E7FF; }
.wz-tag:hover .wz-tag__del { opacity: 1; transform: none; }
.wz-tag__del:hover { background: var(--red); }
/* 같은 키워드를 또 넣으면 있던 뱃지가 한 번 흔들린다 — "이미 있어요" */
.wz-tag.is-dup { animation: wz-shake .35s ease; background: var(--amber-soft); color: var(--amber); }
@keyframes wz-tag-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes wz-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.wz-tags-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.wz-tags-meta button { border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.wz-tags-meta button:hover { color: var(--red); }

/* ---------- 선택 카드 (유형) ---------- */
.wz-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wz-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 22px 14px 18px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--bg); cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s;
}
.wz-card:hover { border-color: var(--blue); }
.wz-card.is-on {
    border: 2px solid var(--blue); background: #F7F8FF;
    padding: 21px 13px 17px;    /* 테두리가 1px 두꺼워진 만큼 뺀다 — 눌러도 안 흔들리게 */
}
.wz-card__img { width: 64px; height: 64px; object-fit: contain; opacity: .8; transition: opacity .18s, transform .18s; }
.wz-card:hover .wz-card__img, .wz-card.is-on .wz-card__img { opacity: 1; transform: scale(1.04); }
.wz-card__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.wz-card__desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.wz-card__check {
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px;
    display: none; place-items: center;
    border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px;
}
.wz-card.is-on .wz-card__check { display: grid; }
.wz-card__tag {
    padding: 2px 8px; border-radius: 999px;
    background: var(--mint-soft); color: var(--mint-strong);
    font-size: 11px; font-weight: 700;
}

/* ---------- 가로 선택 줄 (언어 · 판매 경로) ---------- */
.wz-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wz-choice {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg); cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.wz-choice:hover { border-color: var(--blue); }
.wz-choice.is-on { border-color: var(--blue); background: #F7F8FF; box-shadow: inset 0 0 0 1px var(--blue); }
.wz-choice__mark {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--bg-soft2); color: var(--slate);
    font-size: 14px; font-weight: 800;
}
.wz-choice__mark img { width: 40px; height: 40px; }
.wz-choice.is-on .wz-choice__mark { background: var(--blue); color: #fff; }
.wz-choice.is-on .wz-choice__mark.is-img { background: transparent; }
.wz-choice b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.wz-choice small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }

.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip {
    height: 36px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg); color: var(--slate);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.wz-chip:hover { border-color: var(--blue); color: var(--blue); }
.wz-chip.is-on { border-color: var(--blue); background: var(--blue); color: #fff; }

/* ---------- 콘텐츠 지시 ---------- */
.wz-prompt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.wz-prompt-head img { width: 56px; height: 56px; flex: none; }

/* 자주 쓰는 지시 — 누르면 입력칸 끝에 한 줄로 붙는다 */
.wz-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wz-preset {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    border: 1px dashed var(--line-strong); border-radius: 999px;
    background: var(--bg-soft); color: var(--slate);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.wz-preset .ic { font-size: 12px; color: var(--muted); }
.wz-preset:hover { border-color: var(--blue); border-style: solid; color: var(--blue); background: var(--blue-soft); }
.wz-preset:hover .ic { color: var(--blue); }
.wz-preset.is-used { border-style: solid; border-color: var(--blue-line); background: var(--blue-soft); color: var(--blue); }

.wz-count { margin-top: 6px; text-align: right; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* 지시가 GPT 프롬프트에 어떻게 붙는지 보여 주는 칸 */
.wz-preview {
    margin-top: 16px; padding: 14px 16px;
    border-radius: 12px; background: var(--dark); color: #E7EAF0;
    font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wz-preview em { font-style: normal; color: #9AAAFF; }

/* ---------- 빠른 수량 ---------- */
.wz-quick { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wz-quick button {
    height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg-soft); color: var(--slate);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.wz-quick button:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- 최종 확인 ---------- */
.wz-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-summary__item { min-width: 0; padding: 12px 16px; border-radius: 12px; background: var(--bg-soft); }
.wz-summary__item--wide { grid-column: 1 / -1; }
.wz-summary__k { display: block; font-size: 12px; color: var(--muted); }
.wz-summary__v { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.wz-summary__v.is-text { font-size: 13.5px; font-weight: 500; line-height: 1.6; white-space: pre-wrap; }
.wz-summary__v .wz-tag { height: 28px; padding: 0 11px; font-size: 12.5px; margin: 4px 4px 0 0; }
.wz-summary__v .wz-tag:hover { padding-right: 11px; background: var(--blue-soft); }

.wz-total {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding: 18px 20px;
    border-radius: 12px; background: var(--blue-soft);
}
.wz-total span { font-size: 14px; font-weight: 600; color: var(--slate); }
.wz-total b { font-size: 22px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }

/* ---------- 오류 줄 ---------- */
.wz-error {
    display: none; margin-top: 14px; padding: 12px 14px;
    border-radius: 10px; background: var(--red-soft); color: var(--red-strong);
    font-size: 13px; line-height: 1.5;
}
.wz-error.is-on { display: block; }

/* ---------- 완료 ----------
   오른쪽 칸 높이가 고정이라, 짧은 완료 문구를 위에 두면 아래가 텅 빈다. 위아래 가운데에 놓는다. */
.wz-panel[data-panel="done"].is-on { display: flex; align-items: center; justify-content: center; height: 100%; }
.wz-done { padding: 20px; text-align: center; }
.wz-done img { display: block; width: 104px; height: 104px; margin: 0 auto 14px; }
.wz-done__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.wz-done__desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------- 아래 버튼 ---------- */
.wz-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid var(--line);
}
.wz-foot__hint { flex: 1; font-size: 12.5px; color: var(--faint); text-align: right; }
/* '다음'은 늘 오른쪽 끝 — 완료 화면처럼 '이전'이 없거나, 좁은 화면에서 안내 문구가 숨어도 자리가 안 바뀌게 */
#bwNext { margin-left: auto; }
.wz-btn {
    min-width: 96px; height: 46px; padding: 0 22px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 10px;
    font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.wz-btn--ghost { background: var(--bg-soft2); color: var(--slate); }
.wz-btn--ghost:hover:not(:disabled) { background: #E6EAEE; }
.wz-btn--primary { background: var(--blue); color: #fff; }
.wz-btn--primary:hover:not(:disabled) { background: var(--blue-strong); }
.wz-btn--danger { background: var(--red); color: #fff; }
.wz-btn--danger:hover:not(:disabled) { background: #D13438; }
/* 못 누르는 버튼은 보이되 흐리게 둔다. 감추면 다음이 있는 줄 모른다. */
.wz-btn:disabled { opacity: .45; cursor: default; }

/* ---------- 중단 확인 ---------- */
.wz-confirm {
    position: absolute; inset: 0; z-index: 10;
    display: none; align-items: center; justify-content: center;
    padding: 24px; background: rgba(16, 18, 21, .38);
}
.wz-confirm.is-open { display: flex; }
.wz-confirm__box {
    width: 100%; max-width: 380px;
    padding: 26px 24px 20px;
    border-radius: 16px; background: var(--bg); box-shadow: var(--shadow-float);
    text-align: center;
}
.wz-confirm__art { display: block; width: 84px; height: 84px; margin: 0 auto 12px; }
.wz-confirm__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.wz-confirm__desc { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.wz-confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.wz-confirm__actions .wz-btn { min-width: 0; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 860px) {
    .wz-dim { padding: 0; align-items: flex-end; }
    .wz { max-height: 100vh; border-radius: 20px 20px 0 0; }
    .wz-head { padding: 20px 20px 14px; }
    .wz-title { font-size: 20px; }
    .wz-close { top: 16px; right: 14px; }
    .wz-body { grid-template-columns: minmax(0, 1fr); }
    /* 폭이 좁으면 단계 목록을 가로 줄로 눕힌다 */
    .wz-side { flex-direction: row; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
    .wz-side::-webkit-scrollbar { display: none; }
    .wz-steps { flex-direction: row; gap: 6px; }
    .wz-step { padding: 7px 10px; white-space: nowrap; }
    .wz-step::after, .wz-step__desc, .wz-picked { display: none; }
    .wz-scroll { height: auto; min-height: 0; max-height: 62vh; padding: 20px 18px; }
    .wz-panel[data-panel="done"].is-on { height: auto; min-height: 320px; }
    .wz-cards, .wz-choices { grid-template-columns: minmax(0, 1fr); }
    .wz-card { flex-direction: row; text-align: left; padding: 14px 16px; }
    .wz-card.is-on { padding: 13px 15px; }
    .wz-card__img { width: 48px; height: 48px; }
    .wz-summary { grid-template-columns: minmax(0, 1fr); }
    .wz-foot { padding: 12px 18px; }
    .wz-foot__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wz, .wz-panel.is-on, .wz-tag, .wz-tag.is-dup { animation: none; }
}