/*
 * goods-search.css — 시시브랜드 상표상품 고시명칭 서치 페이지 스타일 (Phase 1 mock-up)
 * ccbrand 토큰 전용 (hex·인라인 금지, --c-* 변수만 사용)
 * 한국 CSS: word-break:keep-all, 360px/768px/1024px/1440px 기준
 * 클래스 prefix: gds- (goods-search 페이지 전용)
 * 버튼: box-shadow:var(--btn-shadow-raised) 필수 (feedback_ccbrand_front_buttons_must_be_3d)
 */

.gds-page *,
.gds-page *::before,
.gds-page *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   페이지 래퍼
═══════════════════════════════════════════════════════════ */
.gds-page {
  width: 100%;
  min-height: 100vh;
  word-break: keep-all;
  overflow-wrap: break-word;
  background: #F8F9FA;
}

.gds-page-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  background: var(--c-paper);
}

/* ═══════════════════════════════════════════════════════════
   페이지 헤더
═══════════════════════════════════════════════════════════ */
.gds-page-header {
  margin-bottom: 20px;
}

.gds-page-header__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.gds-page-header__sub {
  font-size: 0.88rem;
  color: var(--c-mute);
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   안내 배너 A(경고) / B(신뢰)
═══════════════════════════════════════════════════════════ */
.gds-notice {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.gds-notice__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gds-notice__icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.gds-notice__title {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.gds-notice__body {
  font-size: 0.8rem;
  line-height: 1.65;
}

.gds-notice--warn {
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-line);
  border-left: 4px solid var(--c-warn);
}

.gds-notice--warn .gds-notice__title,
.gds-notice--warn .gds-notice__body {
  color: var(--c-warn-strong);
}

.gds-notice--trust {
  background: var(--c-teal-soft);
  border: 1px solid var(--c-teal-line);
  border-left: 4px solid var(--c-teal);
  margin-bottom: 28px;
}

.gds-notice--trust .gds-notice__body {
  color: var(--c-teal-strong);
}

/* ═══════════════════════════════════════════════════════════
   탭
═══════════════════════════════════════════════════════════ */
.gds-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--c-line-soft);
  margin-bottom: 24px;
}

.gds-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 18px;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.gds-tab:hover {
  color: var(--c-ink-soft);
}

.gds-tab--active {
  color: var(--c-teal-strong);
  border-bottom-color: var(--c-teal);
}

.gds-panel {
  padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   탭별 기능설명 배너(1차, 2026-07-18) — 기획 05 §1.
   기존 상단 경고(.gds-notice--warn, amber)·신뢰(.gds-notice--trust, teal) 배너와 톤 구분 —
   정보성(브랜드 소프트 blue) 배경. 데스크톱 3열 / 모바일(≤768px) 세로 스택.
═══════════════════════════════════════════════════════════ */
.gds-info-banner {
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-line);
  border-left: 4px solid var(--c-brand);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.gds-info-banner[hidden] {
  display: none;
}

.gds-info-banner__mode[hidden] {
  display: none;
}

.gds-info-banner__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 20px;
}

.gds-info-banner__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gds-info-banner__label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brand-strong);
}

.gds-info-banner__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.gds-info-banner__text strong {
  color: var(--c-brand-strong);
  font-weight: 800;
}

.gds-info-price {
  font-family: var(--f-mono);
  font-weight: 800;
}

.gds-info-banner__footer {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--c-brand-line);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--c-mute);
}

.gds-info-banner__footer strong {
  color: var(--c-brand-strong);
  font-weight: 700;
}

@media (max-width: 768px) {
  .gds-info-banner__cols {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   탭1 — 직접 검색 폼
═══════════════════════════════════════════════════════════ */
.gds-direct-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.gds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.gds-field--full {
  flex: 1 1 100%;
  min-width: 100%;
}

.gds-field__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-ink-soft);
}

.gds-select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════════
   국가 선택 커스텀 드롭다운 (국기+ISO코드, select2/tom-select 미사용)
═══════════════════════════════════════════════════════════ */
.gds-country-select {
  position: relative;
}

.gds-country-select__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-width: 168px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.gds-country-select__trigger:hover {
  border-color: var(--c-teal-line);
}

.gds-country-select__trigger[aria-expanded="true"] {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px var(--c-teal-tint);
}

.gds-country-select__flag-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
}

.gds-country-select__flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--c-line-soft);
}

.gds-country-select__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background: var(--c-teal-soft);
  color: var(--c-teal-strong);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gds-country-select__name {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gds-country-select__code {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-mute);
}

.gds-country-select__chevron {
  flex-shrink: 0;
  color: var(--c-mute);
  transition: transform 0.15s;
}

.gds-country-select__trigger[aria-expanded="true"] .gds-country-select__chevron {
  transform: rotate(180deg);
}

.gds-country-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--c-paper);
  border: 1.5px solid var(--c-teal-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gds-country-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-line-soft);
  transition: background 0.12s;
  white-space: nowrap;
}

.gds-country-select__option:last-child {
  border-bottom: none;
}

.gds-country-select__option:hover:not(.gds-country-select__option--disabled) {
  background: var(--c-teal-soft);
}

.gds-country-select__option[aria-selected="true"] {
  background: var(--c-teal-tint);
}

.gds-country-select__option--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* 출발국/대상국 상호 배타 — display:flex 지정 요소라 [hidden] 단독으로 미적용되어 가드 필요 */
.gds-country-select__option[hidden] {
  display: none !important;
}

.gds-country-select__soon {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--c-mute);
  background: var(--c-paper-2);
  border-radius: 999px;
  padding: 2px 8px;
}

.gds-direct-form__arrow {
  font-size: 18px;
  color: var(--c-teal);
  font-weight: 700;
  padding-bottom: 10px;
}

.gds-search-input-wrap {
  display: flex;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.gds-search-input {
  flex: 1;
  height: 52px;
  padding: 0 16px;
  border: none;
  outline: none;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  color: var(--c-ink);
  background: var(--c-paper);
}

.gds-search-input::placeholder {
  color: var(--c-mute);
}

.gds-search-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 0;
  background: var(--c-teal);
  color: var(--c-paper);
  font-family: var(--f-sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--btn-shadow-raised);
  transition: background 0.15s, box-shadow 0.18s, transform 0.1s;
  flex-shrink: 0;
}

.gds-search-cta:hover {
  background: var(--c-teal-strong);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.gds-search-cta:active {
  box-shadow: var(--btn-shadow-pressed);
  transform: translateY(0);
}

.gds-search-field {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   자동완성 드롭다운 (탭1, P2 실배선 — GET /goods-search/api/autocomplete)
═══════════════════════════════════════════════════════════ */
.gds-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-paper);
  border: 1.5px solid var(--c-teal-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 90;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gds-ac-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-line-soft);
  transition: background 0.12s;
}

.gds-ac-option:last-child {
  border-bottom: none;
}

.gds-ac-option:hover,
.gds-ac-option--active {
  background: var(--c-teal-soft);
}

.gds-ac-option__name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  color: var(--c-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gds-ac-option__meta {
  flex-shrink: 0;
  font-size: 0.74rem;
  color: var(--c-mute);
  font-family: var(--f-mono);
}

.gds-search-cta:disabled {
  background: var(--c-line);
  color: var(--c-mute);
  cursor: not-allowed;
  box-shadow: none;
}

.gds-search-cta:disabled:hover {
  background: var(--c-line);
  box-shadow: none;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   분류(NC) 다중 선택 체크박스 그리드 (2026-07-14 정정)
   tm-search.css STEP NC(.tms-nc-*, offset 2650~) 동일 UX 이식 — gds- 스코프, 톤만 teal 계열로 교체.
   여러 인스턴스(직접검색 gdsNc* / AI확장검색 gdsAiNc*) 동시 배치 — 그리드 컨테이너 스코프라 클래스 공유 무방.
═══════════════════════════════════════════════════════════ */
.gds-nc-block {
  margin-top: -4px;
  margin-bottom: 16px;
}

.gds-nc-sub {
  font-size: 0.78rem;
  color: var(--c-mute);
  margin: 4px 0 10px;
}

.gds-nc-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.gds-nc-ctrl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 6px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  box-shadow: var(--btn-shadow-raised);
}

.gds-nc-ctrl__btn--all {
  border: 1.5px solid var(--c-teal-line);
  background: var(--c-teal-soft);
  color: var(--c-teal-strong);
}
.gds-nc-ctrl__btn--all:hover {
  background: var(--c-teal);
  color: var(--c-paper);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.gds-nc-ctrl__btn--all:active {
  box-shadow: var(--btn-shadow-pressed);
  transform: translateY(0);
}

.gds-nc-ctrl__btn--clear {
  border: 1.5px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-mute);
}
.gds-nc-ctrl__btn--clear:hover {
  border-color: var(--c-danger-line);
  color: var(--c-danger);
  background: var(--c-danger-soft);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.gds-nc-ctrl__btn--clear:active {
  box-shadow: var(--btn-shadow-pressed);
  transform: translateY(0);
}

.gds-nc-ctrl__hint {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--c-teal-strong);
}

.gds-nc-grid {
  display: grid;
  grid-template-columns: repeat(23, 1fr);
  gap: 4px;
}

.gds-nc-box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  border: 1.5px solid var(--c-line-soft);
  background: var(--c-paper);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
  outline: none;
  padding: 0;
}

.gds-nc-box:hover {
  border-color: var(--c-teal-line);
  background: var(--c-teal-soft);
}

.gds-nc-box--selected {
  border-color: var(--c-teal) !important;
  background: var(--c-teal-soft) !important;
  box-shadow: 0 0 0 2px var(--c-teal-tint) !important;
}

.gds-nc-box__check {
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--c-teal-strong);
  opacity: 0;
  position: absolute;
  top: 2px;
  right: 2px;
  line-height: 1;
  pointer-events: none;
}

.gds-nc-box--selected .gds-nc-box__check {
  opacity: 1;
}

.gds-nc-box__num {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  line-height: 1;
  white-space: nowrap;
}

.gds-nc-box--selected .gds-nc-box__num {
  color: var(--c-teal-strong);
  font-weight: 700;
}

/* 검증 안내 — 검색어/분류 둘 다 미선택 시 노출 */
.gds-search-guard-hint {
  font-size: 0.78rem;
  color: var(--c-warn-strong);
  margin: 8px 0 16px;
}

.gds-search-guard-hint[hidden] {
  display: none;
}

.gds-login-hint {
  font-size: 0.82rem;
  color: var(--c-mute);
  margin: 0 0 16px;
}

.gds-login-hint a {
  color: var(--c-teal-strong);
  font-weight: 700;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   결과 목록 (탭1 mock)
═══════════════════════════════════════════════════════════ */
.gds-result-list {
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-paper);
}

.gds-result-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 0.86rem;
}

.gds-result-row:last-child {
  border-bottom: none;
}

.gds-tier-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.gds-tier-badge--1 {
  background: var(--c-teal-tint);
  color: var(--c-teal-strong);
}

.gds-tier-badge--2 {
  background: var(--c-brand-tint);
  color: var(--c-brand-strong);
}

.gds-tier-badge--3 {
  background: var(--c-plum-tint);
  color: var(--c-plum-strong);
}

.gds-result-row__name {
  flex: 1;
  font-weight: 700;
  color: var(--c-ink);
}

.gds-result-row__arrow {
  color: var(--c-mute);
  font-weight: 400;
  margin: 0 4px;
}

.gds-result-row__code {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--c-teal-strong);
  background: var(--c-teal-soft);
  border-radius: 999px;
  padding: 2px 9px;
}

.gds-result-row__class {
  flex-shrink: 0;
  color: var(--c-mute);
  font-size: 0.78rem;
}

.gds-result-row__tier {
  flex-shrink: 0;
  color: var(--c-mute);
  font-size: 0.78rem;
  min-width: 68px;
  text-align: right;
}

.gds-result-row__score {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-teal-strong);
  min-width: 42px;
  text-align: right;
}

.gds-result-row--empty {
  justify-content: center;
  color: var(--c-mute);
  font-style: italic;
}

.gds-result-row__empty-text {
  font-size: 0.84rem;
}

/* 비로그인 검색 실행(401) — 결과 영역 로그인 유도 카드 */
.gds-login-gate {
  text-align: center;
  padding: 28px 20px;
  border: 1px dashed var(--c-teal-line);
  border-radius: 10px;
  background: var(--c-teal-soft);
}

.gds-login-gate__text {
  font-size: 0.86rem;
  color: var(--c-teal-strong);
  margin: 0 0 14px;
}

.gds-login-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--c-teal);
  color: var(--c-paper);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: var(--btn-shadow-raised);
  transition: background 0.15s, box-shadow 0.18s, transform 0.1s;
}

.gds-login-gate__btn:hover {
  background: var(--c-teal-strong);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.gds-login-gate__btn:active {
  box-shadow: var(--btn-shadow-pressed);
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   browse 모드 결과 행 (분류만 선택 — 출발국 목록 + 대상국 매칭 요약)
═══════════════════════════════════════════════════════════ */
.gds-browse-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 0.86rem;
}

.gds-browse-row:last-child {
  border-bottom: none;
}

.gds-browse-row__source {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gds-browse-row__name {
  font-weight: 700;
  color: var(--c-ink);
}

.gds-browse-row__matches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gds-browse-match {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  padding: 3px 10px;
}

.gds-browse-match em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-teal-strong);
}

.gds-browse-row__no-match {
  font-size: 0.78rem;
  color: var(--c-mute);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   US 템플릿/namely 확장 (2026-07-16 신설, cross 모드 + to=US 전용)
   us_templates=출원 템플릿(정확 대응)·결과 리스트 위 / us_namely=namely 구체형 하위상품·결과 리스트 아래.
   응답에 키 자체 없으면(JP 등) JS 가 DOM 자체에 삽입하지 않음 — hidden 토글이 아닌 실제 노드 부재.
═══════════════════════════════════════════════════════════ */
.gds-us-template-box {
  border: 1px solid var(--c-accent-line);
  border-radius: 10px;
  background: var(--c-accent-soft);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.gds-us-template-box__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.gds-us-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  background: var(--c-accent-tint);
  color: var(--c-accent-strong);
}

.gds-us-template-box__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--c-ink);
}

.gds-us-template-box__hint {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--c-accent-strong);
  word-break: keep-all;
}

.gds-us-template-box__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gds-us-template__item {
  border: 1px solid var(--c-accent-line);
  border-radius: 8px;
  background: var(--c-paper);
  padding: 10px 12px;
}

.gds-us-template__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gds-us-template__name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--c-ink);
  font-size: 0.86rem;
  word-break: keep-all;
}

.gds-us-template__slot {
  background: var(--c-accent-tint);
  color: var(--c-accent-strong);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 800;
}

.gds-us-template__class {
  flex-shrink: 0;
  color: var(--c-mute);
  font-size: 0.78rem;
}

.gds-us-template__example {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--c-mute);
  word-break: keep-all;
}

.gds-us-namely-section {
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  background: var(--c-paper-2);
  padding: 16px 18px;
  margin-top: 14px;
}

.gds-us-namely-section__title {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--c-ink);
}

.gds-us-namely-section__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gds-us-namely-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 0.84rem;
}

.gds-us-namely-row:last-child {
  border-bottom: none;
}

.gds-us-namely-row__name {
  flex: 1;
  min-width: 0;
  word-break: keep-all;
}

.gds-us-namely-row__head {
  color: var(--c-mute);
}

.gds-us-namely-row__tail {
  color: var(--c-ink);
  font-weight: 800;
}

.gds-us-namely-row__class {
  flex-shrink: 0;
  color: var(--c-mute);
  font-size: 0.78rem;
}

.gds-us-namely-section__more {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--c-mute);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   페이지네이션 (cross/browse 공용)
═══════════════════════════════════════════════════════════ */
.gds-result-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.gds-pagination__summary {
  font-size: 0.78rem;
  color: var(--c-mute);
}

.gds-pagination__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.gds-page-btn {
  appearance: none;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--c-line-soft);
  border-radius: 6px;
  background: var(--c-paper);
  color: var(--c-ink-soft);
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.gds-page-btn:hover:not(:disabled) {
  border-color: var(--c-teal-line);
  background: var(--c-teal-soft);
}

.gds-page-btn--active {
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: var(--c-paper);
  cursor: default;
}

.gds-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gds-page-ellipsis {
  color: var(--c-mute);
  font-size: 0.8rem;
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════
   탭1-b — AI 확장검색 (신설, 2026-07-14)
   폼 요소는 직접검색 탭과 동일 클래스 재사용(.gds-search-input/.gds-search-cta 등) —
   이 섹션은 AI탭 고유 요소(추가정보 접힘·결과 3단·생성카드·게이트)만 정의.
═══════════════════════════════════════════════════════════ */
.gds-ai-extra {
  margin-bottom: 16px;
}

.gds-ai-extra__summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-teal-strong);
  padding: 6px 0;
  list-style: none;
}

.gds-ai-extra__summary::-webkit-details-marker {
  display: none;
}

.gds-ai-extra__summary::before {
  content: '▸ ';
}

.gds-ai-extra[open] .gds-ai-extra__summary::before {
  content: '▾ ';
}

.gds-ai-extra .gds-textarea {
  margin-top: 8px;
}

/* 로딩 스피너 — #gdsAiResults 안 .gds-result-row--empty 재사용 렌더에 인라인 삽입(별도 박스 없음) */
.gds-ai-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-teal);
  border-radius: 50%;
  animation: gds-ai-spin 0.8s linear infinite;
}

@keyframes gds-ai-spin {
  to { transform: rotate(360deg); }
}

.gds-ai-results {
  word-break: keep-all;
}

.gds-ai-unavailable-banner {
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-line);
  border-left: 4px solid var(--c-warn);
  color: var(--c-warn-strong);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.gds-ai-section {
  margin-bottom: 20px;
}

.gds-ai-section-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 8px;
}

/* 정식 고시명칭 — 최상위 신뢰 등급 시각 강조(2026-07-14 사용자 지시). teal 계열(플랫폼 대표색) + 좌측 강조바 */
.gds-ai-section-title--primary {
  color: var(--c-teal-strong);
  font-size: 0.98rem;
  font-weight: 800;
  padding-left: 10px;
  border-left: 3px solid var(--c-teal);
}

.gds-ai-section-hint {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--c-mute);
}

/* 섹션 내 안내 문구(0건 등) — 정식 고시명칭 0건은 경고톤으로 명시 노출(생략 금지) */
.gds-ai-section-empty {
  font-size: 0.84rem;
  color: var(--c-mute);
  padding: 4px 0 4px 10px;
}

.gds-ai-section-empty--warn {
  color: var(--c-warn-strong);
  font-weight: 700;
}

/* 정식 고시명칭 항목 상품명 — 빨간 강조(2026-07-14 사용자 지시, direct 섹션 전용. similar/직접검색 탭 불변) */
.gds-ai-direct-name {
  color: var(--c-danger);
}

.gds-badge-ai-similar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--c-brand-tint);
  color: var(--c-brand-strong);
  white-space: nowrap;
}

.gds-ai-matched-via {
  padding: 0 16px 10px 16px;
  margin-top: -14px;
  font-size: 0.74rem;
  color: var(--c-mute);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line-soft);
}

.gds-ai-matched-via:last-child {
  border-bottom: none;
}

/* AI 자동생성(미고시) 카드 — 경고톤 */
.gds-ai-generated-card {
  border: 1px solid var(--c-warn-line);
  border-left: 4px solid var(--c-warn);
  border-radius: 10px;
  background: var(--c-warn-soft);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.gds-ai-generated-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.gds-badge-ai-generated {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--c-warn);
  color: var(--c-paper);
  white-space: nowrap;
}

.gds-ai-generated-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 8px;
}

.gds-ai-generated-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.gds-ai-generated-chip {
  font-size: 0.74rem;
  color: var(--c-ink-soft);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  padding: 2px 10px;
}

.gds-ai-generated-note {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  margin-bottom: 8px;
}

.gds-ai-generated-warning {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--c-warn-strong);
}

/* §3-b needs_detail — 상품 설명 입력 카드 */
.gds-ai-detail-card {
  border: 1px dashed var(--c-teal-line);
  border-radius: 10px;
  background: var(--c-teal-soft);
  padding: 16px;
  margin-top: 8px;
}

.gds-ai-detail-card__message {
  font-size: 0.86rem;
  color: var(--c-teal-strong);
  margin: 0 0 10px;
}

.gds-ai-detail-card .gds-textarea {
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════
   탭2 — AI 멀티 고시명칭 검수
═══════════════════════════════════════════════════════════ */
.gds-review-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

.gds-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  resize: vertical;
}

.gds-textarea::placeholder {
  color: var(--c-mute);
}

.gds-point-estimate {
  font-size: 0.86rem;
  color: var(--c-ink-soft);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.gds-point-estimate strong {
  color: var(--c-teal-strong);
}

/* 탭2(AI 멀티 고시명칭 검수, 2026-07-18) — "(결제 연동 예정 — 현재 무료)" 소형 안내, 본문과 톤 구분 */
.gds-point-estimate__note {
  color: var(--c-mute);
  font-size: 0.78rem;
  margin-left: 4px;
}

.gds-review-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: none;
  border-radius: 8px;
  background: var(--c-teal);
  color: var(--c-paper);
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--btn-shadow-raised);
  transition: background 0.15s, box-shadow 0.18s, transform 0.1s;
  margin-bottom: 20px;
}

.gds-review-cta:hover {
  background: var(--c-teal-strong);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.gds-review-cta:active {
  box-shadow: var(--btn-shadow-pressed);
  transform: translateY(0);
}

.gds-progress {
  margin-bottom: 20px;
}

.gds-progress__bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--c-line-soft);
  overflow: hidden;
  margin-bottom: 8px;
}

.gds-progress__fill {
  height: 100%;
  background: var(--c-teal);
  border-radius: 999px;
  transition: width 0.3s;
}

.gds-progress__label {
  font-size: 0.8rem;
  color: var(--c-mute);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   결과 테이블 (탭2 mock)
═══════════════════════════════════════════════════════════ */
.gds-result-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.84rem;
}

.gds-result-table thead th {
  background: var(--c-paper-2);
  color: var(--c-mute);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  white-space: nowrap;
}

.gds-result-table tbody tr {
  border-bottom: 1px solid var(--c-line-soft);
}

.gds-result-table tbody tr:last-child {
  border-bottom: none;
}

.gds-result-table td {
  padding: 11px 12px;
  color: var(--c-ink-soft);
  vertical-align: middle;
}

.gds-result-table__code {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-teal-strong);
  background: var(--c-teal-soft);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
}

.gds-verdict-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.gds-verdict-badge--listed {
  background: var(--c-ok-soft);
  color: var(--c-ok);
}

.gds-verdict-badge--ai-matched {
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

.gds-verdict-badge--recommended {
  background: var(--c-warn-soft);
  color: var(--c-warn-strong);
}

/* 비고시 — 확인 필요(2026-07-15, 탭4) — 빨간/경고톤(danger 토큰, warn 계열과 구분) */
.gds-verdict-badge--nongazette {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* ═══════════════════════════════════════════════════════════
   탭4 — AI 출원번호 고시명칭 검수 (신설, 2026-07-15)
   1단계 마크 카드(류 분포 체크박스) + 2단계 검수 리스트(행 클릭 아코디언).
   가능한 곳은 gds-result-row/gds-verdict-badge/gds-ai-* 등 기존 클래스 재사용, 이 섹션은 고유 요소만 정의.
═══════════════════════════════════════════════════════════ */
.gds-appno-mark-card {
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  background: var(--c-paper);
  padding: 16px;
  margin-bottom: 12px;
}

.gds-appno-mark-head {
  margin-bottom: 6px;
}

.gds-appno-mark-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--c-ink);
}

.gds-appno-mark-meta {
  font-size: 0.8rem;
  color: var(--c-mute);
  margin-bottom: 2px;
}

.gds-appno-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.gds-appno-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}

.gds-appno-class-chip input[type="checkbox"] {
  accent-color: var(--c-teal);
  cursor: pointer;
}

/* 검수 결과 영역(2단계) — 대상국 셀렉트 + 리스트 */
.gds-appno-review-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-soft);
}

.gds-appno-review-row {
  border-bottom: 1px solid var(--c-line-soft);
}

.gds-appno-review-row:last-child {
  border-bottom: none;
}

/* 2026-07-17 CSS Grid 재구성 — 소스명 길이·뱃지 텍스트 길이·+N칩 유무와 무관하게 모든 행의 동일 컬럼이
   세로로 정렬되도록 고정 트랙 부여(기존 flex-wrap 은 콘텐츠량에 따라 줄바꿈 지점이 행마다 달라져 컬럼이
   어긋났음 — 10.png 사용자 리포트). 트랙 순서: 순번(1) / 소스명(2,1fr,말줄임) / 류(3) / 출발국기(4) /
   판정뱃지(5) / 유사군코드(6) / 대상국기(7) / 대상블록(8,→+명칭,고정 시작점) / 대상류(9) / 점수(10) / 상태뱃지(11).
   각 트랙은 해당 행에 표시할 요소가 없어도(예: KR 행의 유사군코드) 빈 채로 폭을 유지 — 그래서 다른 행과 정렬됨. */
.gds-appno-review-row__main {
  display: grid;
  grid-template-columns:
    28px
    minmax(90px, 1.15fr)
    36px
    22px
    118px
    minmax(50px, max-content)
    22px
    minmax(72px, 1fr)
    36px
    44px
    minmax(64px, auto);
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s;
}

.gds-appno-review-row__main:hover {
  background: var(--c-paper-2);
}

.gds-appno-review-row__seq {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-mute);
  text-align: right;
}

.gds-appno-review-row__name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--c-ink);
}

/* 고정 트랙 배치 유틸(2026-07-17) — 기존 공용 클래스(gds-result-row__*, gds-verdict-badge 등, 다른 탭에서도
   재사용됨)는 그대로 두고, 이 행 컨텍스트에서만 grid-column 을 얹는 보조 클래스를 함께 붙임(스타일 변경 없음). */
.gds-appno-col-srcclass    { grid-column: 3;  grid-row: 1; }
.gds-appno-col-srcflag     { grid-column: 4;  grid-row: 1; }
.gds-appno-col-verdict     { grid-column: 5;  grid-row: 1; }

/* 유사군코드 칩(2026-07-17 수리) — .gds-result-row__code 는 탭1 콤마 병기("2501, 2502, ...")와
   공유하는 기존 공용 클래스라 base 에는 nowrap 을 넣지 않음(그쪽은 줄바꿈 허용 의도). 탭5(이 컬럼)는
   단일 코드만 오므로 이 위치 전용 클래스에서만 nowrap 강제 + 트랙 자체도 max-content 로 넓혀(위 46px 고정폭이
   "0306" 4자리+패딩보다 좁아 .gds-page 전역 overflow-wrap:break-word 상속으로 "030"+"6" 줄바꿈되던 버그) 재발 방지. */
.gds-appno-col-simcode {
  grid-column: 6;
  grid-row: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.gds-appno-col-tgtflag     { grid-column: 7;  grid-row: 1; }

.gds-appno-col-targetblock {
  grid-column: 8;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gds-appno-col-tgtclass { grid-column: 9;  grid-row: 1; }
.gds-appno-col-score    { grid-column: 10; grid-row: 1; }

.gds-appno-col-status {
  grid-column: 11;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

/* 대상 블록(#gdsAppnoAiCheck{seq})을 감싸는 래퍼 — display:contents 로 자기 자신은 그리드에서 사라지고
   자식(gds-appno-col-targetblock/tgtclass/score, 풋라인)이 곧바로 .gds-appno-review-row__main 그리드의
   자식으로 배치됨. 자동 AI 확인 큐가 이 id 하나로 innerHTML만 교체해도 컬럼 정렬이 그대로 유지되는 핵심. */
.gds-appno-ai-check-group {
  display: contents;
}

/* "AI 확인" 뱃지 슬롯(#gdsAppnoAiBadge{seq}, 상태 컬럼 안) — 비어있으면(:empty) 완전히 접혀 불필요한 gap 없음.
   AI 확인 완료 시 JS 가 innerHTML 을 채우면 :empty 매칭이 해제되며 자동으로 다시 노출(라이브 재평가). */
.gds-appno-ai-badge-slot:empty {
  display: none;
}

/* 소스명/대상명 아래 2번째 grid row 풋라인 — 다른 컬럼을 밀지 않고 해당 컬럼 아래로만 붙음.
   기본(수식자 없음)=소스명 컬럼(2, inlineRec/legacyRec), --target=대상 블록 컬럼(8, 직번역). */
.gds-appno-review-row__footline {
  grid-column: 2;
  grid-row: 2;
}

.gds-appno-review-row__footline--target {
  grid-column: 8;
}

/* 직번역 풋라인 겹침 수리(2026-07-18, 사용자 스크린샷 지적, 13.png) — .gds-ai-matched-via 는 원래
   AI 확장검색 3단 리스트(.gds-result-row 플렉스 흐름)에서 상위 행과 이어붙이기 위해
   margin-top:-14px + 흰 배경(padding-bottom 포함)을 쓰는 트릭인데, 이 그리드 컨텍스트(부모가
   .gds-appno-review-row__footline, grid-row:2)에서는 그 음수 margin 이 grid-row:1(대상 명칭) 위로
   끌어올려 흰 배경이 명칭 텍스트를 덮어버림(탭3 §buildRowHtml/탭5 §renderReviewRowsHtml 공용 클래스 조합,
   양쪽 다 영향). 무력화 — 이 조합에서만 트릭 되돌리고 grid-row 2 배치가 그대로 자연스러운 둘째 줄로 보이게 함. */
.gds-appno-review-row__footline.gds-ai-matched-via {
  margin-top: 0;
  padding: 2px 0 0;
  background: transparent;
  border-bottom: none;
}

.gds-appno-recommendation {
  font-size: 0.78rem;
  color: var(--c-mute);
}

/* gazette 행 인라인 추천(상품명 옆, 완전일치 아닐 때만) — 2026-07-15 사용자 지시 */
.gds-appno-inline-rec {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--c-ok);
}

/* target_match 없음(gazette 행 전용, 2026-07-15 추가) — 회색 소형. non_gazette 는 기존 빨간 뱃지로 충분(중복 없음) */
.gds-appno-target-none {
  font-size: 0.78rem;
  color: var(--c-mute);
}

/* 아코디언 하위 영역 — 들여쓰기 + 배경 구분(2026-07-15 사용자 지시: "하위 영역 디자인") */
.gds-appno-review-row__accordion {
  margin: 0 16px 14px 40px;
  padding: 14px 16px;
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
}

.gds-appno-truncated-note {
  font-size: 0.78rem;
  color: var(--c-mute);
  text-align: center;
  padding: 12px 0;
}

/* ═══════════════════════════════════════════════════════════
   target_match=null 행 자동 AI 확인 — 동시 2개 큐, 행별 소형 진행 표시 + "AI 확인" 인라인 뱃지.
   gds-ai-progress__dots 축소형(별도 카드 없이 인라인) — DB 직접매칭(gds-result-row__*)과 톤 구분.
   2026-07-17: "대기"(gds-appno-ai-check-waiting, 회색 정지 점) 상태 추가 — 큐에 등록됐지만 아직 fetch
   시작 전, 또는 fetch 는 끝났지만 순차 노출 버퍼상 앞 행이 아직 안 끝나 화면 공개를 대기 중인 경우 공통 사용.
   "진행"(gds-appno-ai-check-loading, 아래) 은 동시성 슬롯을 실제로 점유해 fetch 중인 행에만 표시(펄스 애니메이션).
═══════════════════════════════════════════════════════════ */
.gds-appno-ai-check-waiting {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gds-appno-ai-check-waiting-dots {
  display: inline-flex;
  gap: 3px;
}

.gds-appno-ai-check-waiting-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-mute);
  opacity: 0.45;
}

.gds-appno-ai-check-waiting-text {
  font-size: 0.72rem;
  color: var(--c-mute);
}

.gds-appno-ai-check-loading {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.gds-appno-ai-check-loading span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-teal);
  opacity: 0.25;
  animation: gds-ai-progress-pulse 1.2s ease-in-out infinite;
}

.gds-appno-ai-check-loading span:nth-child(2) {
  animation-delay: 0.2s;
}

.gds-appno-ai-check-loading span:nth-child(3) {
  animation-delay: 0.4s;
}

.gds-appno-ai-check-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--c-teal-strong);
  background: var(--c-teal-soft);
  border: 1px solid var(--c-teal-line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* 국기 공용(2026-07-16 탭4 국지 신설 → 2026-07-17 전역 승격) — 전역 flagHtmlForCode() 산출 img/span 클래스.
   렌더 자체는 국가 셀렉트가 이미 쓰는 gds-country-select__flag/__badge 그대로 재사용(신규 크기 규칙 없음).
   flex-shrink:0 — 행 최상위(.gds-result-row/.gds-appno-review-row__main 등) flex 형제로 놓일 때 찌그러짐 방지.
   vertical-align:middle — .gds-result-row__name 처럼 텍스트 안(inline)에 삽입될 때 베이스라인 정렬.
   margin-right:4px — 두 경우 모두 뒤이은 명칭 텍스트와 소형 여백(행 높이 영향 없음, 기존 톤 동일). */
.gds-row-flag {
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 4px;
}

/* 1:N 대응 미리보기 칩(2026-07-16, match_total>=2 행 전용) — 대상국 대응 명칭(targetMatchHtml) 바깥의
   형제 요소. teal outline 소형 필 — 행 높이(padding 12px 16px)에 영향 없도록 기존 뱃지류와 동일 사이즈. */
.gds-appno-match-more-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-teal-strong);
  background: transparent;
  border: 1px solid var(--c-teal-line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  cursor: pointer;
}

.gds-appno-match-more-chip:hover {
  background: var(--c-teal-soft);
}

/* ═══════════════════════════════════════════════════════════
   AI 진행 인디케이터(2026-07-15) — 스피너+펄스점+문구+indeterminate 진행바. CSS 애니메이션만(JS 타이머 없음).
   AI 확장검색 탭 로딩 + 출원번호 아코디언 2차 로드 공용(gdsAiProgressHtml).
═══════════════════════════════════════════════════════════ */
.gds-ai-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  background: var(--c-teal-soft);
  border: 1px solid var(--c-teal-line);
  border-radius: 10px;
  text-align: center;
}

.gds-ai-progress__visual {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gds-ai-progress__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--c-teal-tint);
  border-top-color: var(--c-teal);
  border-radius: 50%;
  animation: gds-ai-spin 0.8s linear infinite;
}

.gds-ai-progress__dots {
  display: inline-flex;
  gap: 4px;
}

.gds-ai-progress__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-teal);
  opacity: 0.25;
  animation: gds-ai-progress-pulse 1.2s ease-in-out infinite;
}

.gds-ai-progress__dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.gds-ai-progress__dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes gds-ai-progress-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.15); }
}

.gds-ai-progress__text {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--c-teal-strong);
}

.gds-ai-progress__bar {
  width: 100%;
  max-width: 220px;
  height: 4px;
  border-radius: 999px;
  background: var(--c-teal-tint);
  overflow: hidden;
}

.gds-ai-progress__bar-fill {
  width: 40%;
  height: 100%;
  background: var(--c-teal);
  border-radius: 999px;
  animation: gds-ai-progress-bar 1.4s ease-in-out infinite;
}

@keyframes gds-ai-progress-bar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(350%); }
}

/* ═══════════════════════════════════════════════════════════
   "AI 비고시명칭 작성 요청" 버튼(2026-07-15) — generated 섹션이 비었을 때만 노출
═══════════════════════════════════════════════════════════ */
.gds-ai-generate-request {
  text-align: center;
  padding: 8px 0;
}

.gds-ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════
   결제형 UX 골격(2026-07-15) — 포인트 뱃지(정보용, 차단 없음) + 20개 단위 더보기/확인 스텝. 실차감 없음(P4 예정).
═══════════════════════════════════════════════════════════ */
.gds-appno-point-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-mute);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.gds-appno-reveal-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
}

.gds-appno-reveal-all-btn {
  appearance: none;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-ink-soft);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.gds-appno-reveal-all-btn:hover {
  border-color: var(--c-teal-line);
  background: var(--c-teal-soft);
}

.gds-appno-confirm-step {
  padding: 16px;
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-line);
  border-radius: 10px;
  text-align: center;
}

.gds-appno-confirm-step__text {
  font-size: 0.84rem;
  color: var(--c-warn-strong);
  margin: 0 0 12px;
}

.gds-appno-confirm-step__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gds-appno-confirm-no {
  appearance: none;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-mute);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
}

.gds-appno-confirm-no:hover {
  border-color: var(--c-danger-line);
  color: var(--c-danger);
  background: var(--c-danger-soft);
}

/* ═══════════════════════════════════════════════════════════
   탭5(해외고시명칭 검색) — 중국(CN) 분류 구분표 정보 패널 (2026-07-17 신설)
   결과 페이징 아래, 국가=CN + 분류 선택 시에만 노출. 류별 아코디언(기본 전부 접힘) + lazy fetch.
   그룹 코드 칩은 기존 .gds-result-row__code 재사용(신규 클래스 아님).
═══════════════════════════════════════════════════════════ */
.gds-class-info {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line-soft);
}

.gds-class-info__item {
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.gds-class-info__item:last-child {
  margin-bottom: 0;
}

.gds-class-info__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--c-paper-2);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-sans);
}

.gds-class-info__header:hover {
  background: var(--c-teal-soft);
}

.gds-class-info__header-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--c-ink);
}

.gds-class-info__header-chevron {
  flex-shrink: 0;
  color: var(--c-mute);
  transition: transform 0.15s;
}

.gds-class-info__item--open .gds-class-info__header-chevron {
  transform: rotate(180deg);
}

.gds-class-info__item--open .gds-class-info__header {
  border-bottom: 1px solid var(--c-line-soft);
}

.gds-class-info__body {
  padding: 14px 16px;
}

.gds-class-info__loading,
.gds-class-info__error {
  font-size: 0.82rem;
  color: var(--c-mute);
  text-align: center;
  padding: 10px 0;
}

.gds-class-info__error {
  color: var(--c-danger);
}

.gds-class-info__notes {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-line);
  border-radius: 6px;
}

.gds-class-info__notes-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-warn-strong);
  margin: 0 0 6px;
}

.gds-class-info__notes-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--c-ink);
  line-height: 1.6;
}

.gds-class-info__group {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line-soft);
}

.gds-class-info__group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gds-class-info__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.gds-class-info__group-part {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--c-mute);
  background: var(--c-paper-2);
  border-radius: 999px;
  padding: 1px 8px;
}

/* 2026-07-17 계약 변경 — meaning 은 군(group) 단위 1회 표시(기존 단락마다 반복되던 제목 제거) */
.gds-class-info__group-meaning {
  font-size: 0.84rem;
  color: var(--c-ink);
  line-height: 1.6;
  margin: 0 0 8px;
}

/* 계약 추가분(캐시 v4, 2026-07-17) — 단락에 귀속 불가한 군 전체 유사/교차검색.
   .gds-class-info__tag(단락 줄과 동일 칩)는 재사용하되, "군 전체" 라벨 + 옅은 배경 줄로
   단락 줄(.gds-class-info__tags, 들여쓰기 18px)과 시각적으로 구분. */
.gds-class-info__group-relations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 6px 10px;
  background: var(--c-paper-2);
  border-radius: 6px;
}

.gds-class-info__group-relations-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-mute);
}

.gds-class-info__para {
  padding: 6px 0 6px 4px;
}

.gds-class-info__para-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.gds-class-info__para-no {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--c-mute);
}

.gds-class-info__para-meaning {
  font-size: 0.84rem;
  color: var(--c-ink);
  line-height: 1.6;
}

.gds-class-info__para-note {
  margin-top: 4px;
  margin-left: 18px;
  font-size: 0.78rem;
  color: var(--c-mute);
  line-height: 1.5;
}

.gds-class-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-left: 18px;
}

.gds-class-info__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
}

.gds-class-info__tag--similar {
  background: var(--c-teal-soft);
  color: var(--c-teal-strong);
}

.gds-class-info__tag--cross {
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

@media (max-width: 480px) {
  .gds-class-info__para-note,
  .gds-class-info__tags {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   반응형 — 360 / 768 / 1024 / 1440
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .gds-page-inner {
    padding: 24px 20px 48px;
  }

  .gds-nc-grid {
    grid-template-columns: repeat(15, 1fr);
  }
}

@media (max-width: 768px) {
  .gds-direct-form {
    flex-direction: column;
    align-items: stretch;
  }

  .gds-direct-form__arrow {
    align-self: center;
    padding-bottom: 0;
  }

  .gds-search-input-wrap {
    flex-direction: column;
    border-radius: 10px;
  }

  .gds-search-cta {
    height: 48px;
  }

  .gds-country-select__trigger {
    min-width: 0;
    width: 100%;
  }

  .gds-result-row {
    flex-wrap: wrap;
  }

  .gds-result-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .gds-nc-grid {
    grid-template-columns: repeat(10, 1fr);
  }

  /* 탭5 검수 행(2026-07-17) — 좁은 폭에서는 11트랙 그리드 대신 flex-wrap 으로 되돌려 자연스러운 2단 래핑
     허용(사용자 지시: "모바일은 2단 래핑 허용"). display:contents 래퍼는 flex 부모에서도 그대로 동작. */
  .gds-appno-review-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  .gds-appno-review-row__name {
    flex: 1 1 140px;
    min-width: 100px;
  }

  .gds-appno-review-row__footline,
  .gds-appno-review-row__footline--target {
    flex-basis: 100%;
  }

  .gds-appno-col-status {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  /* P3 스위프(2026-07-15) — 기능 탭 5개가 flex no-wrap 자연폭으로 페이지 가로 스크롤 유발.
     .gds-result-table(위 768px 블록)과 동일 패턴 — 탭 행 자체만 스크롤 컨테이너화, 페이지는 고정. */
  .gds-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }

  .gds-tabs::-webkit-scrollbar {
    display: none;
  }

  .gds-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .gds-us-template__row,
  .gds-us-namely-row {
    flex-wrap: wrap;
  }

  .gds-us-namely-row__class {
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .gds-nc-grid {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (max-width: 360px) {
  .gds-page-header__title {
    font-size: 1.25rem;
  }

  .gds-tabs {
    gap: 0;
  }

  .gds-tab {
    padding: 8px 12px;
    font-size: 0.84rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   과금 UI — 보유 자산 표시 바 / 가격 배지 / 차감 확인·부족 안내 모달
   (2026-07-18 P2, ccbrand-frontend) — 기획: docs/sites/ccbrand-ai/04_고시명칭검색_과금_회원자산_기획_2026_07_18.md §3
═══════════════════════════════════════════════════════════ */
.gds-balance-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  background: var(--c-paper-2);
}

.gds-balance-bar__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.gds-balance-bar__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-mute);
}

.gds-balance-bar__value {
  font-size: 0.94rem;
  font-weight: 800;
  font-family: var(--f-mono);
  color: var(--c-teal-strong);
}

.gds-balance-bar__exempt {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-brand);
  background: var(--c-brand-soft);
  white-space: nowrap;
}

.gds-balance-bar__exempt[hidden] {
  display: none;
}

/* 검색 버튼 가격 배지 — "검색(1P)"/"AI 확장검색(2P)" 형태. JS(gdsApplyPriceBadges)가 /api/balance 응답으로 채움. */
.gds-price-badge {
  font-weight: 700;
}

/* 탭4(AI 출원번호 고시명칭 검수) 마크 카드 내 "상품 N건 × 2P = 총 NP" 견적 — .gds-point-estimate 재사용 + 여백만 조정 */
.gds-appno-price-estimate {
  margin: 4px 0 12px;
}

.gds-appno-price-estimate[hidden] {
  display: none;
}

/* ── 차감 확인 / 부족 안내 모달 (공용) ── */
.gds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.gds-modal-overlay[hidden] {
  display: none;
}

.gds-modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-paper);
  border-radius: 16px;
  padding: 26px;
  position: relative;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.4);
  word-break: keep-all;
}

.gds-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--c-paper-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--c-mute);
}

.gds-modal-title {
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 22px 12px 0;
}

.gds-modal-desc {
  font-size: 0.9rem;
  color: var(--c-ink-soft);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* 부족 안내 모달 breakdown(필요 금액/보유 가능액/부족액) — 2026-07-18 정정. 사전 견적(gdsConfirmBilling)
   경로에서만 실데이터로 채워짐(gdsShowInsufficientModal(quote) 참조), 없으면 [hidden]. */
.gds-modal-breakdown {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  background: var(--c-paper-2);
}

.gds-modal-breakdown[hidden] {
  display: none;
}

.gds-modal-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--c-ink-soft);
  padding: 3px 0;
}

.gds-modal-breakdown__row strong {
  color: var(--c-ink);
  font-weight: 700;
}

.gds-modal-breakdown__row--short strong {
  color: var(--c-danger);
}

.gds-modal-notice-list {
  margin: 0 0 20px;
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  line-height: 1.7;
}

.gds-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gds-modal-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--btn-shadow-raised);
  transition: background 0.15s, box-shadow 0.18s, transform 0.1s;
}

.gds-modal-btn:hover {
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.gds-modal-btn:active {
  box-shadow: var(--btn-shadow-pressed);
  transform: translateY(0);
}

.gds-modal-btn--brand {
  background: var(--c-teal);
  color: var(--c-paper);
}

.gds-modal-btn--brand:hover {
  background: var(--c-teal-strong);
}

.gds-modal-btn--ghost {
  background: var(--c-paper-2);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}

@media (max-width: 480px) {
  .gds-balance-bar {
    gap: 8px 14px;
    padding: 10px 12px;
  }

  .gds-balance-bar__exempt {
    margin-left: 0;
    flex-basis: 100%;
  }

  .gds-modal-actions {
    flex-direction: column;
  }

  .gds-modal-btn {
    width: 100%;
  }
}