/* sdm-gs-styles.css — 상표 지정상품 검색 도구 */
/* 네임스페이스: sdm-gs- (Divi 테마 충돌 방지) */

/* ── CSS 변수 ─────────────────────────────────────────── */
.sdm-gs-wrap {
  --gs-navy:   #1a1a2e;
  --gs-gold:   #ffba60;
  --gs-teal:   #2a9d8f;
  --gs-teal-light: #e8f5f3;
  --gs-bg:     #f8f9fa;
  --gs-white:  #ffffff;
  --gs-border: #e0e0e0;
  --gs-text:   #333333;
  --gs-text-light: #666666;
  --gs-mono:   'JetBrains Mono', 'Consolas', monospace;
  --gs-font:   'Noto Sans KR', system-ui, sans-serif;
  --gs-radius: 8px;
  --gs-shadow: 0 2px 8px rgba(0,0,0,0.08);
  --cls-h: 165; /* 류 색상 기본값 (teal) — 그룹 외부 요소 fallback */

  font-family: var(--gs-font);
  color: var(--gs-text);
  background: var(--gs-bg);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 48px;
  box-sizing: border-box;
}
.sdm-gs-wrap *, .sdm-gs-wrap *::before, .sdm-gs-wrap *::after {
  box-sizing: border-box;
}

/* ── 헤더 ─────────────────────────────────────────────── */
.sdm-gs-header { margin: 32px 0 20px; }
.sdm-gs-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gs-navy);
  margin: 0 0 8px;
}
.sdm-gs-desc {
  font-size: 0.9rem;
  color: var(--gs-text-light);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ── 검색창 ───────────────────────────────────────────── */
.sdm-gs-search-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gs-bg);
  padding: 12px 0;
  margin-bottom: 4px;
}
.sdm-gs-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.sdm-gs-search-icon {
  position: absolute;
  left: 14px;
  font-size: 1.1rem;
  color: var(--gs-text-light);
  pointer-events: none;
}
#sdm-gs-input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border: 2px solid var(--gs-border);
  border-radius: var(--gs-radius);
  font-size: 1rem;
  font-family: var(--gs-font);
  background: var(--gs-white);
  transition: border-color 0.2s;
  outline: none;
}
#sdm-gs-input:focus { border-color: var(--gs-teal); }
#sdm-gs-input::placeholder { color: #aaa; }
.sdm-gs-clear-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--gs-text-light);
  padding: 4px 8px;
  display: none;
  line-height: 1;
}
.sdm-gs-clear-btn.visible { display: block; }

/* ── 섹션 공통 ────────────────────────────────────────── */
/* h1과 동일한 위상: "키워드로 직접 검색하기 / 류별 직접 검색 / 자주 출원되는 업종" 3개 섹션 제목 통일 */
.sdm-gs-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gs-navy);
  margin: 28px 0 14px;
}
/* 자주 출원되는 업종 — 위 섹션과 여유 간격 */
#sdm-gs-browse-section > .sdm-gs-section-title:last-of-type,
#sdm-gs-browse-section > div.sdm-gs-section-title + .sdm-gs-section-title {
  margin-top: 40px;
}
.sdm-gs-preset-title-gap { margin-top: 36px; }

/* ── 류 브라우저 그리드 ───────────────────────────────── */
/* 한 줄에 10개씩 균등 정렬 — 아래위 네모 높이 일치 */
.sdm-gs-class-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}
.sdm-gs-class-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--gs-font);
  font-size: 0.74rem;
  color: var(--gs-text);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.2;
  gap: 2px;
  white-space: normal;
  overflow: hidden;
  min-width: 0;
}
.sdm-gs-class-btn:hover {
  border-color: var(--gs-teal);
  background: var(--gs-teal-light);
}
.sdm-gs-class-btn.active {
  border-color: var(--gs-teal);
  background: var(--gs-teal);
  color: var(--gs-white);
  font-weight: 600;
}
.sdm-gs-class-btn .cls-num   { font-size: 0.72rem; font-weight: 700; color: inherit; }
.sdm-gs-class-btn .cls-short { font-size: 0.68rem; color: #888; }
.sdm-gs-class-btn.active .cls-short { color: rgba(255,255,255,0.85); }

/* ── 류 패널 (클릭 시 펼침, 고정 높이 스크롤) ────────── */
/* 가로폭 70%로 축소: 마우스 휠 스크롤 시 좌우 여백에서 페이지 스크롤 가능하도록 */
.sdm-gs-class-panel {
  display: none;
  background: var(--gs-white);
  border: 1.5px solid var(--gs-teal);
  border-radius: var(--gs-radius);
  padding: 12px 12px 0;
  margin: 6px auto 14px;
  max-width: 70%;
  max-height: 420px;
  overflow: hidden;
  flex-direction: column;
}
.sdm-gs-class-panel.visible { display: flex; }
.sdm-gs-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.sdm-gs-panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gs-navy);
}
.sdm-gs-panel-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* 스크롤 가능한 목록 래퍼 */
.sdm-gs-panel-scroll {
  overflow-y: auto;
  flex: 1;
  border: 1px solid var(--gs-border);
  border-radius: 4px;
  margin-bottom: 10px;
}

/* ── 전체보기 패널 (고객용 #class-XX 직접 링크 진입) ─────── */
/* ── 전체보기 패널 (고객용 #class-XX 직접 링크) ─────────── */
.sdm-gs-class-panel.full-view {
  max-height: 80vh;
  padding: 0;
}
.sdm-gs-class-panel.full-view .sdm-gs-panel-header {
  padding: 10px 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--gs-border);
}
.sdm-gs-class-panel.full-view .sdm-gs-panel-scroll {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* 검색 필터 바 */
.sdm-gs-full-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
  background: var(--gs-bg);
  border-bottom: 1px solid var(--gs-border);
}
.sdm-gs-full-filter {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--gs-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: var(--gs-font);
  outline: none;
  background: var(--gs-white);
}
.sdm-gs-full-filter:focus { border-color: var(--gs-teal); }
.sdm-gs-full-filter-count {
  font-size: 0.78rem;
  color: var(--gs-teal);
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

/* 섹션 레이블 (★ 자주 선택 / 전체 상품) */
.sdm-gs-full-sec-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gs-navy);
  border-bottom: 1px solid var(--gs-border);
  background: inherit;
}
.sdm-gs-full-count {
  font-weight: 400;
  color: var(--gs-text-light);
}

/* 선택 바 (패널 하단 고정) */
.sdm-gs-full-sel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--gs-teal);
  color: var(--gs-white);
  flex-shrink: 0;
  border-top: 2px solid rgba(255,255,255,0.25);
}
.sdm-gs-full-sel-info {
  font-size: 0.88rem;
  font-weight: 600;
}
/* 선택 바 안 버튼 색상 반전 */
.sdm-gs-full-sel-bar .sdm-gs-btn-teal {
  background: var(--gs-white);
  color: var(--gs-teal);
}
.sdm-gs-full-sel-bar .sdm-gs-btn-teal:hover { background: #e0f5f2; }
.sdm-gs-full-sel-bar .sdm-gs-btn-outline {
  background: transparent;
  color: var(--gs-white);
  border-color: rgba(255,255,255,0.7);
}
.sdm-gs-full-sel-bar .sdm-gs-btn-outline:hover { background: rgba(255,255,255,0.15); }
.sdm-gs-full-sel-bar .sdm-gs-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.4);
}
.sdm-gs-full-sel-bar .sdm-gs-btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* 인기 섹션 배경 */
.sdm-gs-full-popular-sec {
  background: var(--gs-teal-light);
  border-bottom: 2px solid #b8deda;
}
.sdm-gs-full-popular-sec .sdm-gs-full-sec-label { color: #1a5c54; }

/* 전체 섹션 배경 */
.sdm-gs-full-all-sec { background: var(--gs-white); }

/* ── 3열 컴팩트 그리드 ─────────────────────────────────── */
.sdm-gs-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* 컴팩트 아이템 — 코드 숨김, 패딩 축소 */
.sdm-gs-full-grid .sdm-gs-item {
  grid-template-columns: 16px 1fr;
  padding: 5px 8px;
  border-bottom: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  align-items: center;
  min-width: 0;
}
.sdm-gs-full-grid .sdm-gs-item:hover { background: #f5f5f5; }
.sdm-gs-full-grid .sdm-gs-item.selected {
  background: hsl(var(--cls-h), 45%, 93%);
}
.sdm-gs-full-grid .sdm-gs-item .sdm-gs-item-kr {
  font-size: 0.79rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.sdm-gs-full-grid .sdm-gs-item-popular .sdm-gs-item-kr { font-weight: 600; }
/* 인기 별 아이콘 */
.sdm-gs-popular-star {
  color: var(--gs-teal);
  font-size: 0.6rem;
  vertical-align: middle;
  margin-left: 2px;
}

/* 반응형 */
@media (max-width: 767px) {
  .sdm-gs-full-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .sdm-gs-full-grid { grid-template-columns: 1fr; }
}

/* ── 업종 카드 선택 결과 영역 ─────────────────────────── */
/* 가로폭 70% — class-panel, results와 동일 정책 */
.sdm-gs-preset-results {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.sdm-gs-preset-results:not(:empty) {
  margin-top: 32px;
}

/* ── 업종 카드 프리셋 ─────────────────────────────────── */
.sdm-gs-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.sdm-gs-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  background: var(--gs-white);
  border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius);
  cursor: pointer;
  font-family: var(--gs-font);
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  gap: 4px;
}
.sdm-gs-preset-card:hover {
  border-color: var(--gs-gold);
  background: #fff8ee;
  transform: translateY(-1px);
}
.sdm-gs-preset-card.active {
  border-color: var(--gs-gold);
  background: #fff3d9;
}
.sdm-gs-preset-card .preset-icon { font-size: 1.6rem; }
.sdm-gs-preset-card .preset-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gs-navy);
  word-break: keep-all;
}

/* ── 검색 결과 ────────────────────────────────────────── */
/* 가로폭 70% — 마우스 휠 좌우 여백에서 페이지 스크롤 가능하도록 */
.sdm-gs-results {
  margin: 8px auto 0;
  max-width: 70%;
}
.sdm-gs-results-header {
  font-size: 0.88rem;
  color: var(--gs-text-light);
  margin-bottom: 10px;
}
.sdm-gs-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.sdm-gs-chip {
  padding: 4px 10px;
  background: var(--gs-white);
  border: 1.5px solid var(--gs-border);
  border-radius: 20px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.sdm-gs-chip:hover {
  border-color: var(--gs-teal);
  background: var(--gs-teal-light);
  color: var(--gs-teal);
}
.sdm-gs-chip.active {
  border-color: var(--gs-teal);
  background: var(--gs-teal);
  color: var(--gs-white);
  font-weight: 600;
}

/* ── 류별 색상 (황금각 분배: 137.5° 간격) ──────────────── */
/* H[n] = (137.508 × (n-1)) % 360 → 인접한 류끼리 최대 색상 차이 */
.sdm-gs-group[data-cls="01"] { --cls-h: 0;   }
.sdm-gs-group[data-cls="02"] { --cls-h: 137; }
.sdm-gs-group[data-cls="03"] { --cls-h: 275; }
.sdm-gs-group[data-cls="04"] { --cls-h: 52;  }
.sdm-gs-group[data-cls="05"] { --cls-h: 190; }
.sdm-gs-group[data-cls="06"] { --cls-h: 327; }
.sdm-gs-group[data-cls="07"] { --cls-h: 105; }
.sdm-gs-group[data-cls="08"] { --cls-h: 242; }
.sdm-gs-group[data-cls="09"] { --cls-h: 20;  }
.sdm-gs-group[data-cls="10"] { --cls-h: 157; }
.sdm-gs-group[data-cls="11"] { --cls-h: 295; }
.sdm-gs-group[data-cls="12"] { --cls-h: 72;  }
.sdm-gs-group[data-cls="13"] { --cls-h: 210; }
.sdm-gs-group[data-cls="14"] { --cls-h: 347; }
.sdm-gs-group[data-cls="15"] { --cls-h: 125; }
.sdm-gs-group[data-cls="16"] { --cls-h: 262; }
.sdm-gs-group[data-cls="17"] { --cls-h: 40;  }
.sdm-gs-group[data-cls="18"] { --cls-h: 177; }
.sdm-gs-group[data-cls="19"] { --cls-h: 315; }
.sdm-gs-group[data-cls="20"] { --cls-h: 92;  }
.sdm-gs-group[data-cls="21"] { --cls-h: 230; }
.sdm-gs-group[data-cls="22"] { --cls-h: 7;   }
.sdm-gs-group[data-cls="23"] { --cls-h: 145; }
.sdm-gs-group[data-cls="24"] { --cls-h: 282; }
.sdm-gs-group[data-cls="25"] { --cls-h: 60;  }
.sdm-gs-group[data-cls="26"] { --cls-h: 197; }
.sdm-gs-group[data-cls="27"] { --cls-h: 335; }
.sdm-gs-group[data-cls="28"] { --cls-h: 112; }
.sdm-gs-group[data-cls="29"] { --cls-h: 250; }
.sdm-gs-group[data-cls="30"] { --cls-h: 27;  }
.sdm-gs-group[data-cls="31"] { --cls-h: 165; }
.sdm-gs-group[data-cls="32"] { --cls-h: 302; }
.sdm-gs-group[data-cls="33"] { --cls-h: 80;  }
.sdm-gs-group[data-cls="34"] { --cls-h: 217; }
.sdm-gs-group[data-cls="35"] { --cls-h: 355; }
.sdm-gs-group[data-cls="36"] { --cls-h: 132; }
.sdm-gs-group[data-cls="37"] { --cls-h: 270; }
.sdm-gs-group[data-cls="38"] { --cls-h: 47;  }
.sdm-gs-group[data-cls="39"] { --cls-h: 185; }
.sdm-gs-group[data-cls="40"] { --cls-h: 322; }
.sdm-gs-group[data-cls="41"] { --cls-h: 100; }
.sdm-gs-group[data-cls="42"] { --cls-h: 237; }
.sdm-gs-group[data-cls="43"] { --cls-h: 200; }
.sdm-gs-group[data-cls="44"] { --cls-h: 152; }
.sdm-gs-group[data-cls="45"] { --cls-h: 290; }

/* ── 그룹 (류별) ──────────────────────────────────────── */
.sdm-gs-group {
  margin-bottom: 20px;
  border: 1.5px solid hsl(var(--cls-h), 38%, 78%);
  border-radius: var(--gs-radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.sdm-gs-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: hsl(var(--cls-h), 50%, 93%);
  border-bottom: 1.5px solid hsl(var(--cls-h), 38%, 78%);
  padding: 9px 14px;
  flex-wrap: wrap;
  gap: 6px;
}
.sdm-gs-group-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: hsl(var(--cls-h), 55%, 22%);
}
/* 그룹 확장 시 overflow:hidden 해제 — sticky 헤더가 작동하려면 조상에 overflow:hidden 없어야 함 */
.sdm-gs-group--expanded {
  overflow: visible;
}
/* overflow:hidden 해제로 사라진 모서리 클리핑을 헤더에 직접 적용 */
.sdm-gs-group--expanded > .sdm-gs-group-header {
  position: sticky;
  top: 70px;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,0.13);
  border-radius: var(--gs-radius) var(--gs-radius) 0 0;
}

.sdm-gs-group-count { font-size: 0.78rem; color: hsl(var(--cls-h), 42%, 40%); }
.sdm-gs-group-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sdm-gs-collapse-btn {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border: 1.5px solid hsl(var(--cls-h), 45%, 55%);
  border-radius: 4px;
  background: hsl(var(--cls-h), 45%, 98%);
  color: hsl(var(--cls-h), 55%, 25%);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.6;
}
.sdm-gs-collapse-btn:hover {
  background: hsl(var(--cls-h), 45%, 85%);
  border-color: hsl(var(--cls-h), 55%, 40%);
}

/* ── 상품 목록 ────────────────────────────────────────── */
.sdm-gs-item-list {
  background: var(--gs-white);
  border-top: none;
  border-radius: 0;
}
/* 패널 내 목록은 border 없음 (스크롤 래퍼가 감쌈) */
.sdm-gs-panel-scroll .sdm-gs-item-list {
  border: none;
  border-radius: 0;
}
/* 류 패널 내부 상품 행 간격 축소 — 한눈에 더 많이 보이도록 */
.sdm-gs-panel-scroll .sdm-gs-item {
  padding-top: 2px;
  padding-bottom: 2px;
}
.sdm-gs-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: start;
  padding: 5px 10px;
  border-bottom: 1px solid #f0f0f0;
  gap: 6px;
  transition: background 0.1s;
  cursor: pointer;
}
.sdm-gs-item:last-child { border-bottom: none; }
.sdm-gs-item:hover { background: #fafafa; }
.sdm-gs-item.selected { background: hsl(var(--cls-h), 45%, 93%); }
.sdm-gs-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gs-teal);
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}
.sdm-gs-item-info { min-width: 0; }
.sdm-gs-item-kr {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gs-text);
  word-break: keep-all;
}
.sdm-gs-item-en {
  font-size: 0.68rem;
  color: var(--gs-text-light);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdm-gs-item-code {
  font-family: var(--gs-mono);
  font-size: 0.65rem;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 3px;
  transition: background 0.15s;
  text-align: right;
  flex-shrink: 0;
}
.sdm-gs-item-code:hover {
  background: #f0f0f0;
  color: var(--gs-teal);
}

/* 인기 상품 구분선 */
.sdm-gs-popular-divider {
  font-size: 0.65rem;
  color: hsl(var(--cls-h), 55%, 28%);
  font-weight: 600;
  padding: 4px 10px 3px;
  background: hsl(var(--cls-h), 45%, 90%);
  border-bottom: 1px solid hsl(var(--cls-h), 35%, 78%);
  border-top: 1px solid hsl(var(--cls-h), 35%, 78%);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sdm-gs-more-divider {
  font-size: 0.65rem;
  color: hsl(var(--cls-h), 48%, 30%);
  font-weight: 600;
  padding: 5px 10px 4px;
  border-bottom: 1px solid hsl(var(--cls-h), 30%, 82%);
  border-top: 1.5px solid hsl(var(--cls-h), 30%, 82%);
  background: hsl(var(--cls-h), 38%, 96%);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 기타 그룹 내 중첩 그룹 간격 */
#sdm-gs-rest-groups .sdm-gs-group {
  margin: 8px;
}

/* 자주 등록 뱃지 */
.sdm-gs-popular-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: hsl(var(--cls-h), 55%, 25%);
  background: hsl(var(--cls-h), 45%, 90%);
  border: 1px solid hsl(var(--cls-h), 38%, 72%);
  border-radius: 10px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.sdm-gs-item-popular .sdm-gs-item-kr {
  font-weight: 600;
}

/* 더보기 버튼 — 스크롤 박스 안에서 작동 */
.sdm-gs-show-more {
  display: block;
  width: 100%;
  padding: 9px 7px;
  background: #fafafa;
  border: none;
  border-top: 1px solid var(--gs-border);
  color: var(--gs-teal);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--gs-font);
  transition: background 0.15s;
}
.sdm-gs-show-more:hover { background: var(--gs-teal-light); }

/* ── 버튼 공통 ────────────────────────────────────────── */
.sdm-gs-btn {
  padding: 7px 14px;
  border-radius: 6px;
  border: none;
  font-size: 0.82rem;
  font-family: var(--gs-font);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-weight: 500;
}
.sdm-gs-btn-teal {
  background: var(--gs-teal);
  color: var(--gs-white);
}
.sdm-gs-btn-teal:hover { background: #228c80; }
.sdm-gs-btn-outline {
  background: var(--gs-white);
  color: var(--gs-teal);
  border: 1.5px solid var(--gs-teal);
}
.sdm-gs-btn-outline:hover { background: var(--gs-teal-light); }
.sdm-gs-btn-ghost {
  background: none;
  color: var(--gs-text-light);
  border: 1.5px solid var(--gs-border);
}
.sdm-gs-btn-ghost:hover { background: #f0f0f0; }

/* ── 선택 패널 (인라인 — document flow) ──────────────── */
.sdm-gs-selection-panel {
  position: relative;
  background: var(--gs-white);
  border: 2px solid var(--gs-teal);
  border-radius: var(--gs-radius);
  box-shadow: 0 2px 12px rgba(42,157,143,0.18);
  margin: 10px 0 16px;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.sdm-gs-selection-panel.visible { display: flex; }
.sdm-gs-sel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--gs-teal);
  color: var(--gs-white);
  gap: 8px;
}
.sdm-gs-sel-title { font-size: 0.88rem; font-weight: 700; }
.sdm-gs-sel-toggle-btn {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--gs-white);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--gs-font);
  white-space: nowrap;
}
.sdm-gs-sel-toggle-btn:hover { background: rgba(255,255,255,0.35); }
.sdm-gs-sel-body {
  overflow-y: auto;
  padding: 8px 14px;
  max-height: 220px;
  display: none;
}
.sdm-gs-sel-body.open { display: block; }
.sdm-gs-sel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px;
  font-size: 0.85rem;
}
.sdm-gs-sel-item:last-child { border-bottom: none; }
.sdm-gs-sel-item-text { flex: 1; min-width: 0; }
.sdm-gs-sel-item-cls  { font-size: 0.75rem; color: var(--gs-text-light); }
.sdm-gs-sel-item-code { font-family: var(--gs-mono); font-size: 0.72rem; color: #888; }
.sdm-gs-sel-remove {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  flex-shrink: 0;
}
.sdm-gs-sel-remove:hover { color: #e53e3e; }
.sdm-gs-sel-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--gs-border);
  flex-wrap: wrap;
}

/* ── 35류 파생 토글 ───────────────────────────────────── */
.sdm-gs-derived-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff8ee;
  border: 1px solid #ffd080;
  border-radius: var(--gs-radius);
  margin: 8px 0;
  font-size: 0.83rem;
  cursor: pointer;
}
.sdm-gs-derived-toggle input[type="checkbox"] {
  accent-color: var(--gs-gold);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── 0건 안내 ────────────────────────────────────────── */
.sdm-gs-empty {
  padding: 32px;
  text-align: center;
  color: var(--gs-text-light);
  font-size: 0.9rem;
}
.sdm-gs-suggest {
  margin-top: 8px;
  font-size: 0.85rem;
}
.sdm-gs-suggest a {
  color: var(--gs-teal);
  cursor: pointer;
  text-decoration: underline;
}

/* ── 토스트 ───────────────────────────────────────────── */
.sdm-gs-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gs-white);
  color: var(--gs-navy);
  border: 2px solid var(--gs-teal);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 9px 20px;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.sdm-gs-toast.show { opacity: 1; }

/* ── 로딩 스켈레톤 ────────────────────────────────────── */
.sdm-gs-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: sdm-shimmer 1.2s infinite;
  border-radius: 4px;
  height: 14px;
  margin: 6px 0;
}
@keyframes sdm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sdm-gs-loading {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── FAQ 아코디언 ─────────────────────────────────────── */
.sdm-gs-faq {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--gs-border);
}
.sdm-gs-faq h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gs-navy);
  margin: 0 0 16px;
}
.sdm-gs-faq-item {
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.sdm-gs-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gs-navy);
  background: var(--gs-white);
  gap: 8px;
}
.sdm-gs-faq-q:hover { background: #fafafa; }
.sdm-gs-faq-arrow { font-size: 0.8rem; transition: transform 0.2s; flex-shrink: 0; }
.sdm-gs-faq-item.open .sdm-gs-faq-arrow { transform: rotate(180deg); }
.sdm-gs-faq-a {
  display: none;
  padding: 0 16px 14px;
  font-size: 0.875rem;
  color: var(--gs-text);
  line-height: 1.7;
  background: var(--gs-white);
  border-top: 1px solid var(--gs-border);
}
.sdm-gs-faq-item.open .sdm-gs-faq-a { display: block; }

/* ── 검색 결과 내 선택 현황 슬롯 ──────────────────────── */
.sdm-gs-sel-slot-box {
  background: var(--gs-white);
  border: 2px solid var(--gs-teal);
  border-radius: var(--gs-radius);
  box-shadow: 0 2px 12px rgba(42,157,143,0.18);
  margin-bottom: 14px;
  overflow: hidden;
}
.sdm-gs-sel-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--gs-teal);
  color: var(--gs-white);
}
.sdm-gs-sel-slot-header .sdm-gs-sel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gs-white);
}
.sdm-gs-sel-actions-inline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sdm-gs-btn-sm {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
}
/* 인라인 버튼 — teal 배경 위에 대비 색상 */
.sdm-gs-sel-slot-header .sdm-gs-btn-teal {
  background: var(--gs-white);
  color: var(--gs-teal);
}
.sdm-gs-sel-slot-header .sdm-gs-btn-teal:hover { background: #e0f5f2; }
.sdm-gs-sel-slot-header .sdm-gs-btn-outline {
  background: transparent;
  color: var(--gs-white);
  border-color: rgba(255,255,255,0.7);
}
.sdm-gs-sel-slot-header .sdm-gs-btn-outline:hover { background: rgba(255,255,255,0.15); }
.sdm-gs-sel-slot-header .sdm-gs-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.4);
}
.sdm-gs-sel-slot-header .sdm-gs-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.sdm-gs-sel-slot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--gs-white);
}
.sdm-gs-sel-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gs-teal-light);
  border: 1px solid var(--gs-teal);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 0.8rem;
  color: var(--gs-navy);
  font-weight: 500;
}
.sdm-gs-sel-tag-remove {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
  line-height: 1;
}
.sdm-gs-sel-tag-remove:hover { color: #e53e3e; }

/* ── 푸터 ─────────────────────────────────────────────── */
.sdm-gs-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--gs-border);
  font-size: 0.78rem;
  color: var(--gs-text-light);
  line-height: 1.8;
}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .sdm-gs-header h1 { font-size: 1.4rem; }
  .sdm-gs-section-title { font-size: 1.4rem; }
  /* 모바일에서는 70% 축소 원복 — 좁은 화면에서는 전체 폭 사용 */
  .sdm-gs-results,
  .sdm-gs-preset-results,
  .sdm-gs-class-panel { max-width: 100%; }
  .sdm-gs-class-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sdm-gs-class-btn { padding: 8px 4px 6px; }
  .sdm-gs-class-btn .cls-icon { font-size: 1.1rem; }
  .sdm-gs-preset-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sdm-gs-preset-card { padding: 10px 4px; }
  .sdm-gs-preset-card .preset-icon { font-size: 1.3rem; }
  .sdm-gs-preset-card .preset-label { font-size: 0.7rem; }
  .sdm-gs-item { grid-template-columns: 20px 1fr auto; padding: 8px 10px; }
  .sdm-gs-item-en { display: none; }
  .sdm-gs-selection-panel { width: 100%; }
}
@media (max-width: 480px) {
  .sdm-gs-class-grid { grid-template-columns: repeat(3, 1fr); }
  .sdm-gs-preset-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sdm-gs-class-grid { grid-template-columns: repeat(5, 1fr); }
  .sdm-gs-preset-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── ★ 표시 안내 배지 ───────────────────────────── */
.sdm-gs-star-info {
  padding: 8px 12px;
  background: #fffaf0;
  border-left: 3px solid #e6b800;
  font-size: 13px;
  margin: 0 0 12px;
  border-radius: 4px;
}
.sdm-gs-star-info a {
  color: #1F2A44;
  font-weight: 600;
  text-decoration: underline;
}

/* ── 면책/안내 박스 ───────────────────────────── */
.sdm-gs-disclaimer {
  margin: 8px 0 16px;
  padding: 8px 12px;
  background: #f8f8f8;
  border-left: 3px solid #1F2A44;
  border-radius: 4px;
  font-size: 13px;
}
.sdm-gs-disclaimer summary {
  cursor: pointer;
  font-weight: 600;
  color: #1F2A44;
}
.sdm-gs-disclaimer p {
  margin: 8px 0 0;
  line-height: 1.6;
}
.sdm-gs-disclaimer a {
  color: #1F2A44;
  text-decoration: underline;
}
.sdm-gs-footer-disclaimer {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px;
}

/* ── 류별 10개 초과 경고 ────────────────────────── */
.sdm-gs-warn {
  padding: 10px 12px;
  background: #fff4e5;
  border-left: 3px solid #e67e22;
  border-radius: 4px;
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.6;
}
.sdm-gs-warn strong { color: #b54708; }
.sdm-gs-warn-classes { font-weight: 700; }

/* ==========================================================
   Patch 9.1 — 닫기 버튼 가시성 개선 (2026-04-18)
   대상: #sdm-gs-close-panel (류별 상품 리스트 박스 우상단 닫기)
   변경: ghost(투명) → solid Navy 배경 + White 텍스트
   근거: 색상 대비 부족으로 사용자가 닫기 버튼 미발견 이슈
         → WCAG AAA 대비율(13.5:1) 확보
   유지: 위치·크기·padding·font·JS 동작 모두 현재대로
   ========================================================== */
#sdm-gs-close-panel {
  background-color: #1F2A44 !important;
  color: #ffffff !important;
  border-color: #1F2A44 !important;
}

#sdm-gs-close-panel:hover,
#sdm-gs-close-panel:focus {
  background-color: #2C3A5B !important;
  border-color: #2C3A5B !important;
  color: #ffffff !important;
}

#sdm-gs-close-panel:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: 2px;
}


/* ==========================================================================
   Patch 11 — Hero Section + Star Banner (2026-04-18)
   Design source: redesign.html (Claude Design, decoded)
   Scope: self-contained .sdm-gs-hero-* / .sdm-gs-star-banner-* namespace
   Vars:  scoped to containers — no :root leakage into Divi theme
   ========================================================================== */

/* Scoped CSS variables (do not leak) */
.sdm-gs-hero,
.sdm-gs-star-banner {
  --sdm-hero-bg-base:        #222222;
  --sdm-hero-bg-surface:     #2c2c2c;
  --sdm-hero-fg1:            #ffffff;
  --sdm-hero-fg2:            rgba(255, 255, 255, 0.85);
  --sdm-hero-fg3:            rgba(255, 255, 255, 0.65);
  --sdm-hero-gold:           #ffba60;
  --sdm-hero-gold-soft:      rgba(255, 186, 96, 0.12);
  --sdm-hero-gold-border:    rgba(255, 186, 96, 0.40);
  --sdm-hero-border-subtle:  rgba(255, 255, 255, 0.08);
  --sdm-hero-border-default: rgba(255, 255, 255, 0.14);
  --sdm-hero-font-body:      'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sdm-hero-font-display:   'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --sdm-hero-font-mono:      'JetBrains Mono', 'SF Mono', Monaco, Menlo, monospace;
  --sdm-hero-ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --sdm-hero-dur-base:       220ms;
  --sdm-hero-radius-card:    14px;
  --sdm-hero-radius-badge:   20px;
  --sdm-hero-radius-pill:    9999px;
}

/* ---- Hero ---- */
.sdm-gs-hero {
  padding: 88px 40px 64px;
  background:
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(255,186,96,0.09), transparent 60%),
    radial-gradient(ellipse 55% 40% at 8% 90%, rgba(45,158,143,0.05), transparent 60%),
    var(--sdm-hero-bg-base);
  border-bottom: 1px solid var(--sdm-hero-border-subtle);
  font-family: var(--sdm-hero-font-body);
  color: var(--sdm-hero-fg2);
  line-height: 1.65;
}
.sdm-gs-hero-inner { max-width: 1200px; margin: 0 auto; }
.sdm-gs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}
@media (max-width: 900px) {
  .sdm-gs-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
.sdm-gs-hero-kicker {
  display: inline-block;
  color: var(--sdm-hero-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--sdm-hero-radius-badge);
  background: var(--sdm-hero-gold-soft);
  border: 1px solid var(--sdm-hero-gold-border);
  margin-bottom: 24px;
  font-family: var(--sdm-hero-font-body);
}
.sdm-gs-hero h1 {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--sdm-hero-fg1);
  margin: 0 0 22px;
  font-family: var(--sdm-hero-font-display);
}
.sdm-gs-hero h1 em {
  color: var(--sdm-hero-gold);
  font-style: normal;
}
.sdm-gs-hero-lede {
  color: var(--sdm-hero-fg2);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 500;
  max-width: 560px;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.sdm-gs-hero-lede strong {
  color: var(--sdm-hero-fg1);
  font-weight: 700;
}
.sdm-gs-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sdm-gs-hero-pill {
  background: transparent;
  color: var(--sdm-hero-fg1);
  border: 1px solid var(--sdm-hero-border-default);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--sdm-hero-radius-pill);
  cursor: pointer;
  transition: all var(--sdm-hero-dur-base) var(--sdm-hero-ease-out);
  font-family: inherit;
}
.sdm-gs-hero-pill:hover {
  border-color: var(--sdm-hero-gold);
  color: var(--sdm-hero-gold);
}
.sdm-gs-hero-pill:focus-visible {
  outline: 2px solid var(--sdm-hero-gold);
  outline-offset: 2px;
}
.sdm-gs-hero-pill-dot {
  color: var(--sdm-hero-gold);
  margin-right: 6px;
}
.sdm-gs-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--sdm-hero-border-subtle);
  border: 1px solid var(--sdm-hero-border-subtle);
  border-radius: var(--sdm-hero-radius-card);
  overflow: hidden;
}
.sdm-gs-hero-stat {
  background: var(--sdm-hero-bg-surface);
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sdm-gs-hero-stat__key {
  color: var(--sdm-hero-fg3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-family: var(--sdm-hero-font-mono);
}
.sdm-gs-hero-stat__val {
  color: var(--sdm-hero-gold);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  font-family: var(--sdm-hero-font-display);
  white-space: nowrap;
}
.sdm-gs-hero-stat__val sup {
  font-size: 20px;
  vertical-align: top;
  margin-left: 4px;
  color: var(--sdm-hero-gold);
  letter-spacing: normal;
}
.sdm-gs-hero-stat__desc {
  color: var(--sdm-hero-fg2);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 8px;
}
.sdm-gs-hero-stat--full {
  grid-column: span 2;
}
.sdm-gs-hero-stat--full .sdm-gs-hero-stat__val {
  font-size: 38px;
}
@media (max-width: 640px) {
  .sdm-gs-hero { padding: 56px 20px 40px; }
  .sdm-gs-hero h1 { font-size: 38px; }
}

/* ---- Star Banner ---- */
.sdm-gs-star-banner {
  max-width: 1200px;
  margin: 36px auto 0;
  padding: 0 40px;
  font-family: var(--sdm-hero-font-body);
}
.sdm-gs-star-banner-inner {
  background: linear-gradient(135deg, #1e1a14 0%, #26201a 55%, #2a2215 100%);
  border: 1px solid var(--sdm-hero-gold-border);
  border-radius: var(--sdm-hero-radius-card);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
@media (max-width: 820px) {
  .sdm-gs-star-banner-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 24px;
  }
}
.sdm-gs-star-banner-glyph {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sdm-hero-gold-soft);
  border: 1px solid var(--sdm-hero-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sdm-hero-gold);
  font-size: 30px;
  box-shadow: 0 0 24px rgba(255, 186, 96, 0.12) inset;
}
.sdm-gs-star-banner h3 {
  color: var(--sdm-hero-fg1);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  font-family: var(--sdm-hero-font-display);
}
.sdm-gs-star-banner h3 em {
  color: var(--sdm-hero-gold);
  font-style: normal;
}
.sdm-gs-star-banner p {
  color: var(--sdm-hero-fg2);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
  max-width: 640px;
}
.sdm-gs-star-banner-meta {
  color: var(--sdm-hero-fg3);
  font-family: var(--sdm-hero-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.7;
}
@media (max-width: 820px) {
  .sdm-gs-star-banner-meta { text-align: left; }
}
.sdm-gs-star-banner-meta b {
  color: var(--sdm-hero-gold);
  font-weight: 700;
}
/* ==================== /Patch 11 ==================== */


/* ==========================================================================
   Patch 11.1 — Hero Hotfix (2026-04-18)
     (a) scroll-margin-top: Hero 버튼 스크롤 시 섹션 제목 가림 방지
     (b) Hero 버튼 "키워드 검색"의 focus 전 smooth scroll
     (c) disclaimer 박스 폰트 크기 증대
     (d) 모바일 hero-stat 1열 전환 (45류 잘림 해결)
   ========================================================================== */

/* (a) 스크롤 타깃에 상단 여백을 확보하여 섹션 제목이 가려지지 않게 함.
   각 섹션의 section-title 높이(약 60-70px) + 여유 50px 를 감안 */
#sdm-gs-input,
#sdm-gs-class-grid,
#sdm-gs-preset-grid {
  scroll-margin-top: 120px;
}

/* (c) disclaimer 박스 폰트 크기 오버라이드 */
.sdm-gs-disclaimer {
  font-size: 14.5px;
  line-height: 1.7;
}
.sdm-gs-disclaimer summary {
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.sdm-gs-disclaimer p {
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 10px;
}
.sdm-gs-disclaimer p:last-child {
  margin-bottom: 0;
}

/* (d) 모바일 640px 이하에서 hero-stats 1열 전환 */
@media (max-width: 640px) {
  .sdm-gs-hero-stats {
    grid-template-columns: 1fr;
  }
  .sdm-gs-hero-stat--full {
    grid-column: span 1;
  }
  .sdm-gs-hero-stat__val {
    font-size: 44px;
  }
  .sdm-gs-hero-stat--full .sdm-gs-hero-stat__val {
    font-size: 30px;
  }
}
/* ==================== /Patch 11.1 ==================== */


/* ==========================================================================
   Patch 11.3 — Hero 버튼 가시성 강화 (2026-04-18)
     - 기본: Gold 테두리 + 은은한 Gold 틴트 배경 + White 텍스트 + Gold 글리프
     - Hover/Focus: Gold 채움 + 다크 텍스트 + 살짝 상승(translateY)
     - Active: 눌림 효과 (살짝 내려앉음)
     - 접근성: focus-visible 에 outline, disabled 상태 대비 확보
   (Patch 11 의 .sdm-gs-hero-pill 기본 규칙을 덮어쓰되, 기존 블록은 유지)
   ========================================================================== */

.sdm-gs-hero-pill {
  /* 기본 상태 상향 */
  background: var(--sdm-hero-gold-soft);
  color: var(--sdm-hero-fg1);
  border: 1px solid var(--sdm-hero-gold-border);
  font-weight: 600;
  padding: 10px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  will-change: transform, background-color;
}

.sdm-gs-hero-pill:hover {
  background: var(--sdm-hero-gold);
  color: #1a1205;
  border-color: var(--sdm-hero-gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255, 186, 96, 0.24);
}

.sdm-gs-hero-pill:hover .sdm-gs-hero-pill-dot {
  color: #1a1205;
}

.sdm-gs-hero-pill:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 186, 96, 0.18);
}

.sdm-gs-hero-pill:focus-visible {
  outline: 2px solid var(--sdm-hero-gold);
  outline-offset: 3px;
}

/* Reduced motion 대응 — transform 제거 */
@media (prefers-reduced-motion: reduce) {
  .sdm-gs-hero-pill,
  .sdm-gs-hero-pill:hover,
  .sdm-gs-hero-pill:active {
    transform: none;
    transition: background-color var(--sdm-hero-dur-base) var(--sdm-hero-ease-out),
                color var(--sdm-hero-dur-base) var(--sdm-hero-ease-out),
                border-color var(--sdm-hero-dur-base) var(--sdm-hero-ease-out);
  }
}
/* ==================== /Patch 11.3 ==================== */


/* ==================== Patch 12 Stage 3-A — Floating Cart Panel (CSS only) ==================== */
/* 네임스페이스: .sdm-gs-cart-* (기존 .sdm-gs-sel-* 과 무충돌)                                    */
/* 활성화 조건: Stage 3-C에서 DOM 삽입 + .sdm-gs-layout-with-cart 래퍼 부착 시 반응형 그리드 적용  */
/* Stage 3-A 종료 시점: DOM 미변경이므로 페이지 시각 결과 완전 동일                                */

/* [1] 스코프 격리 변수 및 reset */
.sdm-gs-cart-shell {
  --cart-navy: #0f1e3d;
  --cart-navy-soft: #1a2d5a;
  --cart-gold: #c9a44c;
  --cart-gold-soft: rgba(201, 164, 76, 0.12);
  --cart-teal: #2a9d8f;
  --cart-teal-dark: #238277;
  --cart-white: #ffffff;
  --cart-gray-50: #f6f7f9;
  --cart-gray-100: #e9ecef;
  --cart-gray-200: #d6dae1;
  --cart-gray-500: #6b7280;
  --cart-gray-700: #374151;
  --cart-warn-bg: #fff4e5;
  --cart-warn-border: #f59e0b;
  --cart-warn-text: #92400e;
  --cart-shadow-desktop: 0 4px 16px rgba(15, 30, 61, 0.08), 0 1px 3px rgba(15, 30, 61, 0.04);
  --cart-shadow-mobile: 0 -8px 24px rgba(15, 30, 61, 0.14), 0 -1px 3px rgba(15, 30, 61, 0.06);
  --cart-radius: 10px;
  --cart-transition: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--cart-gray-700);
  background: var(--cart-white);
  border-radius: var(--cart-radius);
  box-sizing: border-box;
}
.sdm-gs-cart-shell *,
.sdm-gs-cart-shell *::before,
.sdm-gs-cart-shell *::after { box-sizing: border-box; }

/* [2] 레이아웃 래퍼 (Stage 3-C에서 browse-section을 감쌈) */
.sdm-gs-layout-with-cart { display: block; }

/* [3] 헤더 */
.sdm-gs-cart-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cart-navy);
  color: var(--cart-white);
  border-top-left-radius: var(--cart-radius);
  border-top-right-radius: var(--cart-radius);
}
.sdm-gs-cart-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.sdm-gs-cart-count {
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--cart-gold);
  color: var(--cart-navy);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sdm-gs-cart-warn-badge {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cart-warn-bg);
  color: var(--cart-warn-text);
  font-size: 12px;
  font-weight: 600;
}
.sdm-gs-cart-warn-badge[data-active="true"] { display: inline-flex; }
.sdm-gs-cart-sort-toggle {
  display: none;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: transparent;
  color: var(--cart-white);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.sdm-gs-cart-sort-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.sdm-gs-cart-warn-badge[data-active="true"] + .sdm-gs-cart-sort-toggle { margin-left: 6px; }

/* [4] body + 상품 행 */
.sdm-gs-cart-body {
  flex: 1;
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 4px;
  scrollbar-width: thin;
}
.sdm-gs-cart-body::-webkit-scrollbar { width: 6px; }
.sdm-gs-cart-body::-webkit-scrollbar-thumb { background: var(--cart-gray-200); border-radius: 3px; }

.sdm-gs-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.sdm-gs-cart-item + .sdm-gs-cart-item { margin-top: 2px; }
.sdm-gs-cart-item:hover { background: var(--cart-gray-50); }

.sdm-gs-cart-class {
  flex-shrink: 0;
  min-width: 32px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cart-teal);
  color: var(--cart-white);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sdm-gs-cart-name { flex: 1; word-break: keep-all; overflow-wrap: anywhere; }

.sdm-gs-cart-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cart-gray-500);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.sdm-gs-cart-remove:hover { background: var(--cart-gray-100); color: var(--cart-navy); }
.sdm-gs-cart-remove:focus-visible { outline: 2px solid var(--cart-gold); outline-offset: 2px; }

/* [5] 빈 상태 */
.sdm-gs-cart-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--cart-gray-500);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.sdm-gs-cart-empty-icon { margin-bottom: 8px; font-size: 28px; opacity: 0.4; }
.sdm-gs-cart-shell[data-empty="true"] .sdm-gs-cart-empty { display: flex; }
.sdm-gs-cart-shell[data-empty="true"] .sdm-gs-cart-body { display: none; }
.sdm-gs-cart-shell[data-empty="true"] .sdm-gs-cart-actions { opacity: 0.4; pointer-events: none; }

/* [6] over-limit 상세 메시지 */
.sdm-gs-cart-warn-msg {
  display: none;
  margin: 8px 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--cart-warn-border);
  background: var(--cart-warn-bg);
  color: var(--cart-warn-text);
  font-size: 12px;
  line-height: 1.6;
  border-radius: 4px;
}
.sdm-gs-cart-warn-msg[data-active="true"] { display: block; }

/* [7] actions 영역 */
.sdm-gs-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--cart-gray-100);
}
.sdm-gs-cart-btn {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.sdm-gs-cart-btn:focus-visible { outline: 2px solid var(--cart-gold); outline-offset: 2px; }
.sdm-gs-cart-btn-primary {
  background: var(--cart-teal);
  color: var(--cart-white);
  border-color: var(--cart-teal);
}
.sdm-gs-cart-btn-primary:hover { background: var(--cart-teal-dark); border-color: var(--cart-teal-dark); }
.sdm-gs-cart-btn-primary:active { transform: translateY(1px); }
.sdm-gs-cart-btn-secondary {
  background: transparent;
  color: var(--cart-navy);
  border-color: var(--cart-gray-200);
}
.sdm-gs-cart-btn-secondary:hover { background: var(--cart-gray-50); border-color: var(--cart-navy-soft); }
/* CR6 (2026-04-21): 전체 선택 해제 버튼을 outlined destructive 스타일로 전환
   - 복사 버튼(.sdm-gs-cart-btn 기본) sizing과 정합: padding 10px 12px, radius 6px, font-size 13px
   - grid-column: 1 / -1 유지 (cart-actions 2-col grid 전체 폭 점유)
   - 호버 시 fill 반전(#dc2626 배경 + 흰 글자), active 시 더 진한 톤(#b91c1c) */
.sdm-gs-cart-btn-clear {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid #dc2626;
  border-radius: 6px;
  background: transparent;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2px;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}
.sdm-gs-cart-btn-clear:hover,
.sdm-gs-cart-btn-clear:focus-visible {
  background: #dc2626;
  color: #ffffff;
}
.sdm-gs-cart-btn-clear:active {
  background: #b91c1c;
  border-color: #b91c1c;
}
.sdm-gs-cart-btn-clear:disabled,
.sdm-gs-cart-btn-clear[aria-disabled="true"] {
  border-color: #d1d5db;
  color: #9ca3af;
  background: transparent;
  cursor: not-allowed;
}

/* [8] 모바일 드래그 핸들 */
.sdm-gs-cart-handle {
  display: none;
  flex-shrink: 0;
  width: 100%;
  height: 20px;
  padding: 6px 0;
  background: var(--cart-navy);
  cursor: grab;
  touch-action: none;
  border-top-left-radius: var(--cart-radius);
  border-top-right-radius: var(--cart-radius);
}
.sdm-gs-cart-handle::after {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 4px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.sdm-gs-cart-handle:active { cursor: grabbing; }

/* Step A-0-fix-CR5: main-col wrapper (grid 자식 overflow 방지) */
.sdm-gs-main-col { min-width: 0; }

/* [9] 데스크탑 (≥1024px) — Step A-0-fix-CR5: 2열 grid + cart sticky */
@media (min-width: 1024px) {
  .sdm-gs-layout-with-cart {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
  }
  .sdm-gs-cart-shell {
    position: sticky;
    top: 90px; /* Divi fixed nav(66px) + 여유 24px */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    z-index: 10;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cart-shadow-desktop);
    border: 1px solid var(--cart-gray-100);
  }
  .sdm-gs-cart-shell[data-empty="true"] { min-height: 280px; }
  .sdm-gs-cart-sort-toggle { display: inline-flex; align-items: center; }
  .sdm-gs-cart-handle { display: none; }
}

/* [10] 모바일 (<1024px) — bottom-sheet */
@media (max-width: 1023px) {
  .sdm-gs-cart-shell {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--cart-shadow-mobile);
    transition: transform var(--cart-transition), max-height var(--cart-transition);
    transform: translateY(calc(100% - 64px));
  }
  .sdm-gs-cart-handle { display: block; }
  .sdm-gs-cart-shell[data-state="hidden"] { transform: translateY(100%); pointer-events: none; }
  .sdm-gs-cart-shell[data-state="collapsed"] {
    transform: translateY(calc(100% - 64px));
    max-height: 64px;
  }
  .sdm-gs-cart-shell[data-state="collapsed"] .sdm-gs-cart-body,
  .sdm-gs-cart-shell[data-state="collapsed"] .sdm-gs-cart-warn-msg,
  .sdm-gs-cart-shell[data-state="collapsed"] .sdm-gs-cart-actions { display: none; }
  .sdm-gs-cart-shell[data-state="collapsed"] .sdm-gs-cart-header { padding-top: 8px; padding-bottom: 8px; }
  .sdm-gs-cart-shell[data-state="half"] {
    transform: translateY(0);
    max-height: 50vh;
  }
  .sdm-gs-cart-shell[data-state="full"] {
    transform: translateY(0);
    max-height: 70vh;
  }
  .sdm-gs-cart-sort-toggle { display: none; }
  .sdm-gs-cart-shell[data-state="half"] .sdm-gs-cart-body,
  .sdm-gs-cart-shell[data-state="full"] .sdm-gs-cart-body {
    max-height: unset;
    flex: 1;
  }
  .sdm-gs-layout-with-cart { padding-bottom: 72px; }
}

/* [11] 접근성 — prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sdm-gs-cart-shell { transition: none; }
  .sdm-gs-cart-btn,
  .sdm-gs-cart-remove,
  .sdm-gs-cart-sort-toggle { transition-duration: 0ms; }
  .sdm-gs-cart-btn-primary:active { transform: none; }
}
/* ==================== /Patch 12 Stage 3-A ==================== */

/* =====================================================================
   CR5-final (2026-04-21): Divi #page-container overflow 우회

   원인: Divi #page-container가 overflow: auto hidden 이어서 sticky의
         nearest scroll container를 가로챔. 실제 스크롤은 body에서 발생하나
         sticky는 #page-container에 바인딩되어 상대 이동 기준점 상실.

   처치: page-id-29515 스코프로 #page-container overflow를 visible로 전환.
         body의 overflow-x: hidden이 가로 오버플로 backstop 유지.

   주의: overflow-y: visible 단독은 브라우저가 auto로 재계산 → 양축 동시 visible 필수.
   ===================================================================== */
body.page-id-29515 #page-container {
  overflow: visible !important;
}