/* AttirePicker — 공유 의상 피커 스타일
   정본 설계: DESIGN_20260712_공유의상피커_종합설계.md
   격리 원칙: 전 클래스 .atp- 접두 + --atp-* 변수. 호스트 페이지 토큰이 있으면 컨테이너에서 재정의. */

.atp {
  --atp-bg: #fff;
  --atp-border: #e5e7eb;
  --atp-border-on: #6c4fff;      /* specs v2 포인트 컬러 정합 */
  --atp-text: #1f2937;
  --atp-sub: #6b7280;
  --atp-chip-bg: #f9fafb;
  --atp-on-bg: #f4f1ff;
  --atp-radius: 12px;
  display: block;
  background: var(--atp-bg);
  border: 1px solid var(--atp-border);
  border-radius: var(--atp-radius);
  padding: 14px;
  text-align: left;
}
.atp-hidden { display: none; }

.atp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.atp-title { font-size: 14px; font-weight: 700; color: var(--atp-text); }

.atp-seg { display: inline-flex; border: 1px solid var(--atp-border); border-radius: 999px; overflow: hidden; }
.atp-seg-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; padding: 5px 14px; color: var(--atp-sub);
}
.atp-seg-btn.atp-on { background: var(--atp-text); color: #fff; font-weight: 600; }

.atp-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.atp-cats::-webkit-scrollbar { display: none; }
.atp-cat {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--atp-border); background: var(--atp-chip-bg); color: var(--atp-sub);
}
.atp-cat.atp-on { border-color: var(--atp-text); background: var(--atp-text); color: #fff; font-weight: 600; }

/* 아이템 행 — 모바일: 가로 스크롤 칩 */
.atp-items {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.atp-items::-webkit-scrollbar { display: none; }

.atp-item {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; padding: 10px 4px 8px;
  border: 1.5px solid var(--atp-border); border-radius: 10px;
  background: var(--atp-chip-bg); color: var(--atp-text);
  transition: border-color .15s, background .15s;
}
.atp-item.atp-on { border-color: var(--atp-border-on); background: var(--atp-on-bg); }
.atp-item:focus-visible { outline: 2px solid var(--atp-border-on); outline-offset: 2px; }

.atp-visual {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
}
.atp-visual-original { background: #fff; color: var(--atp-sub); font-size: 15px; font-weight: 700; }
.atp-item.atp-on .atp-visual-original { color: var(--atp-border-on); }
.atp-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 카드형 칩 — 상품컷 썸네일 존재 시 (v1.5). 스와치 칩과 혼재 가능 */
.atp-item.atp-has-thumb { width: 96px; }
.atp-has-thumb .atp-visual { width: 78px; height: 104px; border-radius: 8px; background: #fff; }

.atp-label {
  font-size: 11px; line-height: 1.25; color: var(--atp-text);
  max-width: 72px; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atp-item.atp-on .atp-label { font-weight: 700; }

.atp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.atp-upload {
  appearance: none; border: 1px dashed var(--atp-border); border-radius: 8px;
  background: transparent; color: var(--atp-sub); font-size: 12px;
  padding: 6px 10px; cursor: not-allowed;
}
.atp-upload.atp-upload-on { cursor: pointer; color: var(--atp-text); border-color: var(--atp-sub); }
.atp-upload.atp-upload-on:hover { border-color: var(--atp-border-on); color: var(--atp-border-on); }
.atp-notice { font-size: 11px; color: var(--atp-sub); }

/* 반려 주의 — 밝은 상의·업로드 선택 시 */
.atp-warn {
  margin-top: 8px; font-size: 12px; line-height: 1.45; color: #8a6d1a;
  background: #fdf6e3; border: 1px solid #f0e3bd; border-radius: 8px; padding: 7px 10px;
}
.atp-item { position: relative; }
.atp-badge-warn {
  position: absolute; top: 4px; right: 4px; font-size: 11px; line-height: 1;
  color: #b08514;
}

/* baby recolor 안내 */
.atp-baby-guide {
  margin-top: 8px; font-size: 12px; line-height: 1.45; color: #4a6d8c;
  background: #eef6ff; border: 1px solid #c8ddf0; border-radius: 8px; padding: 7px 10px;
}

/* 타이 토글 행 */
.atp-tie-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 8px 10px;
  background: var(--atp-chip-bg); border: 1px solid var(--atp-border);
  border-radius: 8px;
}
.atp-tie-label { font-size: 12px; font-weight: 600; color: var(--atp-text); white-space: nowrap; }
.atp-tie-toggle {
  appearance: none; width: 36px; height: 20px; border-radius: 10px;
  background: #d1d5db; border: none; cursor: pointer;
  position: relative; transition: background .2s; flex: 0 0 auto;
}
.atp-tie-toggle[data-on="true"] { background: var(--atp-border-on); }
.atp-tie-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.atp-tie-toggle[data-on="true"] .atp-tie-knob { transform: translateX(16px); }
.atp-tie-colors { display: flex; gap: 6px; align-items: center; }
.atp-tie-swatch {
  appearance: none; display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid transparent; border-radius: 999px;
  padding: 3px 8px 3px 4px; cursor: pointer;
  font-size: 11px; color: var(--atp-sub); background: transparent;
  transition: border-color .15s;
}
.atp-tie-swatch.atp-on { border-color: var(--atp-border-on); background: var(--atp-on-bg); color: var(--atp-text); font-weight: 600; }
.atp-tie-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }

.atp-badge-tie {
  position: absolute; bottom: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
}

/* 데스크톱(≥720px): 그리드 전환 */
@media (min-width: 720px) {
  .atp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); overflow: visible; }
  .atp-item { width: auto; }
  .atp-item.atp-has-thumb { width: auto; }
}