/*
 * ip-review.css — 시시브랜드 해외상표 검토요청 위저드 스타일
 * ccbrand 토큰 전용 (hex·인라인 금지, --c-* 변수만 사용)
 * 한국 CSS: word-break:keep-all, 360px/768px/1024px 기준
 */

/* ══════════════════════════════════════════════════════════
   리셋 공통
═══════════════════════════════════════════════════════════ */
.ir-page *,
.ir-page *::before,
.ir-page *::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   페이지 래퍼
═══════════════════════════════════════════════════════════ */
.ir-page {
  padding: 28px 28px 48px;
  max-width: 1100px;
  word-break: keep-all;
}

.ir-page-header {
  margin-bottom: 28px;
}

.ir-page-header__title {
  font-family: var(--f-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
}

.ir-page-header__sub {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--c-mute);
}

/* ══════════════════════════════════════════════════════════
   x-wizard-stepper
═══════════════════════════════════════════════════════════ */
.wiz-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.wiz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 72px;
}

.wiz-step__bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wiz-step__label {
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}

/* 완료 */
.wiz-step--done .wiz-step__bubble {
  background: var(--c-ok);
  color: var(--c-paper);
  border: 2px solid var(--c-ok);
}
.wiz-step--done .wiz-step__label { color: var(--c-ok); }

/* 현재 */
.wiz-step--current .wiz-step__bubble {
  background: var(--c-brand);
  color: var(--c-brand-on);
  border: 2px solid var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}
.wiz-step--current .wiz-step__label { color: var(--c-brand); font-weight: 700; }

/* 미래 */
.wiz-step--future .wiz-step__bubble {
  background: var(--c-paper);
  color: var(--c-mute);
  border: 2px solid var(--c-line);
}
.wiz-step--future .wiz-step__label { color: var(--c-mute); }

.wiz-step__connector {
  flex: 1;
  height: 2px;
  background: var(--c-line-soft);
  min-width: 20px;
  align-self: flex-start;
  margin-top: 15px;
  transition: background 0.2s;
}
.wiz-step__connector--done {
  background: var(--c-ok);
}

/* ══════════════════════════════════════════════════════════
   위저드 셸 (콘텐츠 + 견적 패널 2열)
═══════════════════════════════════════════════════════════ */
.ir-wizard-shell {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.ir-wizard-content {
  flex: 1;
  min-width: 0;
}

.ir-quote-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  display: none; /* STEP1에서 hidden, JS가 STEP2부터 표시 */
}
.ir-quote-sidebar--visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════
   스텝 공통
═══════════════════════════════════════════════════════════ */
.ir-step { animation: ir-fadeIn 0.22s ease; }

@keyframes ir-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ir-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 6px;
}

.ir-step__sub {
  font-size: 0.875rem;
  color: var(--c-mute);
  margin-bottom: 24px;
}

.ir-section-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ir-section-label__hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-mute);
}

.ir-step-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════
   버튼 공통
═══════════════════════════════════════════════════════════ */
.ir-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, opacity 0.18s;
  text-decoration: none;
  line-height: 1.4;
}

.ir-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ir-btn--primary {
  background: var(--c-brand);
  color: var(--c-brand-on);
}
.ir-btn--primary:not(:disabled):hover { background: var(--c-brand-strong); }

.ir-btn--brand {
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  border: 1px solid var(--c-brand-line);
}
.ir-btn--brand:not(:disabled):hover { background: var(--c-brand-tint); }

.ir-btn--ghost {
  background: transparent;
  color: var(--c-mute);
  border: 1px solid var(--c-line);
}
.ir-btn--ghost:not(:disabled):hover {
  background: var(--c-paper-2);
  color: var(--c-ink);
}

.ir-btn--submit {
  background: var(--c-accent);
  color: var(--c-accent-on);
  padding: 12px 32px;
  font-size: 1rem;
}
.ir-btn--submit:not(:disabled):hover { background: var(--c-accent-strong); }

/* ══════════════════════════════════════════════════════════
   STEP1: x-review-method-card
═══════════════════════════════════════════════════════════ */
.ir-method-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 4px;
}

.rmc-card {
  background: var(--c-paper);
  border: 2px solid var(--c-line-soft);
  border-radius: 14px;
  padding: 24px 20px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  outline: none;
}

.rmc-card:hover {
  border-color: var(--c-brand-line);
  box-shadow: var(--sh-md);
}

.rmc-card:focus-visible {
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}

.rmc-card--selected {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
  box-shadow: var(--sh-brand);
}

.rmc-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.rmc-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-ink);
}

.rmc-card__sub {
  font-size: 0.82rem;
  color: var(--c-mute);
}

.rmc-card__feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rmc-card__feats li {
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rmc-card--selected .rmc-card__feats li { color: var(--c-brand-strong); }

.rmc-card__ai-badge { margin-top: 4px; }

.rmc-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.74rem; font-weight: 600; }
.rmc-badge--warn {
  background: var(--c-warn-soft);
  color: var(--c-warn-strong);
  border: 1px solid var(--c-warn-line);
}

.rmc-card__meta {
  font-size: 0.75rem;
  color: var(--c-mute);
  padding-top: 8px;
  border-top: 1px solid var(--c-line-soft);
}

.rmc-card__check {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--c-line);
  transition: color 0.18s;
}
.rmc-card--selected .rmc-card__check { color: var(--c-brand); }

/* ══════════════════════════════════════════════════════════
   STEP2: x-review-option-card
═══════════════════════════════════════════════════════════ */
.ir-option-section { margin-bottom: 28px; }

.ir-option-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.roc-card {
  background: var(--c-paper);
  border: 2px solid var(--c-line-soft);
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  outline: none;
}

.roc-card:hover { border-color: var(--c-brand-line); box-shadow: var(--sh-md); }
.roc-card:focus-visible { box-shadow: 0 0 0 3px var(--c-brand-tint); }
.roc-card--selected {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
}

.roc-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roc-card__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-ink);
  flex: 1;
}

.roc-card__price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-brand-strong);
}
.roc-card--selected .roc-card__price { color: var(--c-brand); }

.roc-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
}
.roc-badge--ok    { background: var(--c-ok-soft);   color: var(--c-ok); }
.roc-badge--brand { background: var(--c-brand-soft); color: var(--c-brand-strong); border: 1px solid var(--c-brand-line); }
.roc-badge--plum  { background: var(--c-plum-soft);  color: var(--c-plum); border: 1px solid var(--c-plum-line); }

.roc-card__desc {
  font-size: 0.8rem;
  color: var(--c-mute);
  line-height: 1.5;
}

.roc-card__feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.roc-card__feats li {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}

.roc-card__meta {
  font-size: 0.72rem;
  color: var(--c-mute);
  padding-top: 8px;
  border-top: 1px solid var(--c-line-soft);
}

.roc-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--c-line);
  transition: color 0.18s;
}
.roc-card--selected .roc-card__check { color: var(--c-brand); }

/* ══════════════════════════════════════════════════════════
   STEP2: x-review-country-picker
═══════════════════════════════════════════════════════════ */
.ir-country-section { margin-bottom: 4px; }

.rcp-wrap { position: relative; }

.rcp-search-wrap {
  position: relative;
  margin-bottom: 16px;
}

.rcp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-mute);
  pointer-events: none;
}

.rcp-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-ink);
  background: var(--c-paper);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.rcp-search-input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}

.rcp-autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  box-shadow: var(--sh-md);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
}

.rcp-autocomplete-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
}
.rcp-autocomplete-item:hover { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.rcp-autocomplete-item-code { font-size: 0.75rem; color: var(--c-mute); font-weight: 600; }

.rcp-ai-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-line);
  border-radius: 8px;
  color: var(--c-warn-strong);
  font-size: 0.82rem;
  margin-bottom: 14px;
  line-height: 1.5;
}

.rcp-switch-btn {
  background: none;
  border: none;
  color: var(--c-brand-strong);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 0.82rem;
  text-decoration: underline;
}

.rcp-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-mute);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rcp-section-label--etc { margin-top: 14px; }

.rcp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.rcp-item {
  background: var(--c-paper);
  border: 1.5px solid var(--c-line-soft);
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  outline: none;
  text-align: center;
}

.rcp-item:hover:not(:disabled) {
  border-color: var(--c-brand-line);
  background: var(--c-brand-soft);
}

.rcp-item:focus-visible { box-shadow: 0 0 0 3px var(--c-brand-tint); }

.rcp-item--selected {
  background: var(--c-brand-soft);
  border-color: var(--c-brand);
}

.rcp-item--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.rcp-item-flag {
  width: 28px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
  display: block;
  flex-shrink: 0;
}

.rcp-item-code {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-mute);
  background: var(--c-paper-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.rcp-item--selected .rcp-item-code { background: var(--c-brand-tint); color: var(--c-brand-strong); }

.rcp-item-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.rcp-item--selected .rcp-item-name { color: var(--c-brand-strong); }

.rcp-item-check {
  position: absolute;
  top: 4px;
  right: 4px;
  color: var(--c-brand);
  opacity: 0;
  transition: opacity 0.15s;
}
.rcp-item--selected .rcp-item-check { opacity: 1; }

.rcp-item-na-tip {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.rcp-item--disabled:hover .rcp-item-na-tip { opacity: 1; }

.rcp-chips-wrap {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-line);
  border-radius: 8px;
}

.rcp-chips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rcp-chips-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-brand-strong);
}

.rcp-chips-count {
  display: inline-block;
  background: var(--c-brand);
  color: var(--c-brand-on);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  margin: 0 2px;
}

.rcp-chips-clear {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--c-mute);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.rcp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rcp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c-brand);
  color: var(--c-brand-on);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.rcp-chip-remove {
  background: none;
  border: none;
  color: var(--c-brand-on);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.rcp-chip-remove:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   STEP3: 상표 정보 입력 영역
═══════════════════════════════════════════════════════════ */
.ir-auto-fill-card {
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.ir-auto-fill-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-brand-strong);
  margin-bottom: 10px;
}

.ir-auto-fill-card__row {
  display: flex;
  gap: 10px;
}

.ir-auto-fill-card__hint {
  font-size: 0.78rem;
  color: var(--c-mute);
  margin-top: 8px;
}

.ir-field-group {
  margin-bottom: 20px;
}

.ir-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-bottom: 8px;
}

.ir-required {
  color: var(--c-danger);
  margin-left: 2px;
}

.ir-optional {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--c-mute);
  margin-left: 4px;
}

.ir-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-ink);
  background: var(--c-paper);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.ir-input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}

.ir-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-ink);
  background: var(--c-paper);
  outline: none;
  resize: vertical;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ir-textarea:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}

.ir-field-hint {
  font-size: 0.78rem;
  color: var(--c-mute);
  margin-top: 5px;
}

/* ══════════════════════════════════════════════════════════
   x-image-dropzone
═══════════════════════════════════════════════════════════ */
.idz-wrap { display: flex; flex-direction: column; gap: 8px; }

.idz-dropzone {
  border: 2px dashed var(--c-line);
  border-radius: 12px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  position: relative;
  overflow: hidden;
  outline: none;
}

.idz-dropzone:hover { border-color: var(--c-brand-line); background: var(--c-brand-soft); }
.idz-dropzone:focus-visible { box-shadow: 0 0 0 3px var(--c-brand-tint); }
.idz-dropzone.idz-over { border-color: var(--c-brand); background: var(--c-brand-tint); }

.idz-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.idz-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  pointer-events: none;
}

.idz-idle-icon { color: var(--c-mute); }

.idz-idle-text {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  text-align: center;
}

.idz-idle-link { color: var(--c-brand); font-weight: 600; }

.idz-idle-hint { font-size: 0.75rem; color: var(--c-mute); }

.idz-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  width: 100%;
}

.idz-preview-img {
  max-width: 160px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--c-line-soft);
}

.idz-preview-actions {
  display: flex;
  gap: 8px;
  pointer-events: all;
  position: relative;
  z-index: 2;
}

.idz-btn-change, .idz-btn-remove {
  padding: 5px 14px;
  border-radius: 6px;
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: background 0.15s;
}

.idz-btn-change {
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  border-color: var(--c-brand-line);
}
.idz-btn-change:hover { background: var(--c-brand-tint); }

.idz-btn-remove {
  background: var(--c-danger-soft);
  color: var(--c-danger-strong);
  border-color: var(--c-danger-line);
}
.idz-btn-remove:hover { background: var(--c-danger-line); }

.idz-preview-name {
  font-size: 0.78rem;
  color: var(--c-mute);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idz-drag-over {
  position: absolute;
  inset: 0;
  background: var(--c-brand-soft);
  border: 2px dashed var(--c-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.idz-drag-over-text { font-size: 1rem; font-weight: 700; color: var(--c-brand); }

.idz-error {
  font-size: 0.82rem;
  color: var(--c-danger);
  padding: 6px 10px;
  background: var(--c-danger-soft);
  border-radius: 6px;
  border: 1px solid var(--c-danger-line);
}

.idz-library-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 7px 14px;
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: var(--c-mute);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  width: fit-content;
}
.idz-library-btn:hover { background: var(--c-paper-2); color: var(--c-ink-soft); }

/* ══════════════════════════════════════════════════════════
   x-nice-class-picker
═══════════════════════════════════════════════════════════ */
.ncp-wrap { display: flex; flex-direction: column; gap: 12px; }

.ncp-ai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ncp-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--c-plum-soft);
  border: 1px solid var(--c-plum-line);
  border-radius: 8px;
  color: var(--c-plum);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  outline: none;
}
.ncp-ai-toggle:hover,
.ncp-ai-toggle--open { background: var(--c-plum-tint); }

.ncp-ai-toggle-arrow { transition: transform 0.2s; }
.ncp-ai-toggle--open .ncp-ai-toggle-arrow { transform: rotate(180deg); }

.ncp-ai-hint {
  font-size: 0.78rem;
  color: var(--c-mute);
}

.ncp-ai-panel {
  background: var(--c-plum-soft);
  border: 1px solid var(--c-plum-line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: ir-fadeIn 0.18s ease;
}

.ncp-ai-input-row {
  display: flex;
  gap: 10px;
}

.ncp-ai-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--c-plum-line);
  border-radius: 7px;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-ink);
  background: var(--c-paper);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ncp-ai-input:focus {
  border-color: var(--c-plum);
  box-shadow: 0 0 0 3px var(--c-plum-tint);
}

.ncp-ai-search-btn {
  padding: 9px 18px;
  background: var(--c-plum);
  color: var(--c-paper);
  border: none;
  border-radius: 7px;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ncp-ai-search-btn:hover { background: var(--c-plum-strong); }

.ncp-ai-results { min-height: 40px; }

.ncp-ai-placeholder {
  font-size: 0.82rem;
  color: var(--c-mute);
  text-align: center;
  padding: 8px;
}

.ncp-count-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--c-mute);
}

.ncp-count-label { font-weight: 600; color: var(--c-ink-soft); }

.ncp-count-badge {
  display: inline-block;
  background: var(--c-brand);
  color: var(--c-brand-on);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}

.ncp-count-hint { font-size: 0.75rem; }

.ncp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ncp-item {
  background: var(--c-paper);
  border: 1.5px solid var(--c-line-soft);
  border-radius: 10px;
  padding: 12px 12px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  outline: none;
}

.ncp-item:hover { border-color: var(--c-brand-line); background: var(--c-brand-soft); }
.ncp-item:focus-visible { box-shadow: 0 0 0 3px var(--c-brand-tint); }

.ncp-item--selected {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
}

.ncp-item-no {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--c-paper-2);
  color: var(--c-mute);
  width: fit-content;
}
.ncp-item--selected .ncp-item-no { background: var(--c-brand-tint); color: var(--c-brand-strong); }

.ncp-item-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-ink);
}
.ncp-item--selected .ncp-item-label { color: var(--c-brand-strong); }

.ncp-item-examples {
  font-size: 0.72rem;
  color: var(--c-mute);
  line-height: 1.4;
}

.ncp-item-check {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--c-brand);
  opacity: 0;
  transition: opacity 0.15s;
}
.ncp-item--selected .ncp-item-check { opacity: 1; }

.ncp-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: 7px;
  padding: 8px 16px;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--c-mute);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  width: fit-content;
}
.ncp-expand-btn:hover { background: var(--c-paper-2); color: var(--c-ink-soft); }

.ncp-goods-section {
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ncp-goods-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-ink-soft);
}

.ncp-goods-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-mute);
  margin-left: 4px;
}

.ncp-goods-list { display: flex; flex-direction: column; gap: 10px; }

.ncp-goods-item { display: flex; flex-direction: column; gap: 5px; }

.ncp-goods-item-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-mute);
}

.ncp-goods-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: 7px;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--c-ink);
  background: var(--c-paper);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ncp-goods-textarea:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}

/* ══════════════════════════════════════════════════════════
   STEP4: 확인·신청
═══════════════════════════════════════════════════════════ */
.ir-summary-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.ir-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
}

.ir-summary-label {
  color: var(--c-mute);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 90px;
}

.ir-summary-value {
  color: var(--c-ink);
  font-weight: 600;
  text-align: right;
}

.ir-summary-divider {
  border: none;
  border-top: 1px solid var(--c-line-soft);
}

.ir-terms-wrap {
  padding: 14px;
  background: var(--c-paper-2);
  border-radius: 8px;
  margin-bottom: 4px;
}

.ir-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  cursor: pointer;
}

.ir-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--c-brand);
  margin-top: 2px;
  flex-shrink: 0;
}

.ir-link {
  color: var(--c-brand);
  text-decoration: underline;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   x-review-quote-panel
═══════════════════════════════════════════════════════════ */
.rqp-wrap {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.rqp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: var(--c-brand);
  color: var(--c-brand-on);
}

.rqp-header-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.85;
  font-family: var(--f-mono);
}

.rqp-header-sub {
  font-size: 0.82rem;
  font-weight: 600;
}

.rqp-paid-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--c-warn-soft);
  color: var(--c-warn-strong);
  font-size: 0.82rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--c-warn-line);
}

.rqp-paid-notice-title { font-weight: 700; margin-bottom: 2px; }
.rqp-paid-notice-desc { color: var(--c-warn-strong); opacity: 0.85; }

.rqp-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rqp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.rqp-row-label { color: var(--c-mute); }
.rqp-row-value { font-weight: 600; color: var(--c-ink); }

.rqp-row--sub .rqp-row-label { font-size: 0.75rem; }
.rqp-row--sub .rqp-row-value { font-size: 0.75rem; }

.rqp-row--deduct .rqp-row-value { color: var(--c-ok); }
.rqp-row--extra .rqp-row-value { color: var(--c-danger); }

.rqp-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.rqp-classes-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 24px;
}

.rqp-class-item {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rqp-class-item-no {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--c-brand-tint);
  color: var(--c-brand-strong);
  padding: 1px 5px;
  border-radius: 4px;
}

.rqp-countries-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 24px;
}

.rqp-country-chip {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--c-paper-2);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line-soft);
  padding: 2px 8px;
  border-radius: 12px;
}

.rqp-empty-hint {
  font-size: 0.75rem;
  color: var(--c-mute);
  font-style: italic;
}

.rqp-divider {
  border: none;
  border-top: 1px solid var(--c-line-soft);
  margin: 2px 0;
}

.rqp-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 2px;
  border-top: 2px solid var(--c-line);
  margin-top: 4px;
}

.rqp-total-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-ink);
}

.rqp-total-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-brand);
}

.rqp-handnote {
  font-family: var(--f-hand);
  font-size: 0.95rem;
  color: var(--c-mute);
  text-align: center;
  padding: 12px 16px;
  border-top: 1px dashed var(--c-line-soft);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   STEP5: AI 결과 / 일반 접수 완료
═══════════════════════════════════════════════════════════ */
.ir-ai-result-wrap {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 12px;
  padding: 32px 24px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ir-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--c-mute);
}

.ir-ai-loading__spinner {
  color: var(--c-brand);
  animation: ir-spin 1.2s linear infinite;
}

@keyframes ir-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ir-ai-loading__text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink-soft);
}

.ir-ai-loading__sub { font-size: 0.82rem; }

.ir-ai-result__placeholder {
  text-align: center;
  padding: 24px;
  color: var(--c-mute);
}

.ir-ai-result__placeholder-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-bottom: 6px;
}

.ir-general-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
}

.ir-complete-icon { color: var(--c-ok); }

.ir-complete-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-ink);
}

.ir-complete-sub {
  font-size: 0.875rem;
  color: var(--c-mute);
  line-height: 1.6;
}

.ir-complete-case {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  padding: 8px 20px;
}

/* ══════════════════════════════════════════════════════════
   로그인 필요 모달
═══════════════════════════════════════════════════════════ */
.ir-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* hidden attribute 가 display:flex 에 묻히지 않도록 명시 */
.ir-modal-overlay[hidden] { display: none !important; }

.ir-modal {
  background: var(--c-paper);
  border-radius: 16px;
  padding: 32px 28px 28px;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--sh-md);
  position: relative;
  text-align: center;
}

.ir-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--c-mute);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}
.ir-modal__close:hover { color: var(--c-ink); }

.ir-modal__icon { color: var(--c-brand); }

.ir-modal__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-ink);
}

.ir-modal__desc {
  font-size: 0.875rem;
  color: var(--c-mute);
  line-height: 1.6;
}


.ir-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   반응형
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ir-wizard-shell {
    flex-direction: column;
  }
  .ir-quote-sidebar {
    width: 100%;
    position: static;
  }
  .rqp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
  }
  .rqp-total, .rqp-divider, .rqp-section-label { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .ir-page { padding: 16px 16px 40px; }

  .ir-method-cards {
    grid-template-columns: 1fr;
  }

  .ir-option-cards {
    grid-template-columns: 1fr;
  }

  .rcp-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ncp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wiz-stepper { gap: 0; }
  .wiz-step__label { font-size: 0.65rem; }
  .wiz-step__connector { min-width: 12px; }

  .ir-step-actions { flex-wrap: wrap; }
  .ir-step-actions .ir-btn--submit { width: 100%; justify-content: center; }

  .rqp-body { display: flex; }
}

@media (max-width: 480px) {
  .rcp-grid { grid-template-columns: repeat(3, 1fr); }
  .ncp-grid { grid-template-columns: repeat(2, 1fr); }
  .ir-auto-fill-card__row { flex-direction: column; }

  .wiz-step { min-width: 52px; }
  .wiz-step__label { display: none; }
}

@media (max-width: 360px) {
  .ir-page { padding: 12px 12px 32px; }
  .rcp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   ir-btn Raised 3D — 액션버튼 입체 적용
   ※ disabled 상태에서는 transform/그림자 없이 평평하게.
═══════════════════════════════════════════════════════════ */
.ir-btn {
  box-shadow: var(--btn-shadow-raised);
  transition: background 0.18s, color 0.18s, box-shadow .12s ease, transform .12s ease, opacity 0.18s;
}

.ir-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.ir-btn:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: var(--btn-shadow-pressed);
}

.ir-btn:disabled {
  transform: none;
  box-shadow: none;
}