/* =========================================================
   DS Seoul — Component primitives
   Requires colors_and_type.css
   ========================================================= */

/* ---------- SMOOTH SCROLL + STICKY NAV 보정 ---------- */
html {
  scroll-behavior: smooth;
}
/* 앵커 타겟 섹션 — sticky nav(48px) 높이만큼 위로 여유 */
section[id] {
  scroll-margin-top: 64px;
}

/* ---------- BUTTONS (Apple 2-pattern) ---------- */

/* Primary: gold fill, 8px radius, 8/15 padding, 17px */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 15px;
  border: 0;
  border-radius: var(--ds-r-btn);
  background: var(--ds-gold);
  color: var(--ds-black);
  font-family: var(--ds-font-text), var(--ds-font-kr);
  font-size: 17px; font-weight: 400; letter-spacing: -0.374px; line-height: 1.29;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
  text-decoration: none;
}
.ds-btn:hover { background: var(--ds-gold-bright); }
.ds-btn:active { transform: scale(0.98); }
.ds-btn:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 3px; }

/* Pill link — transparent, gold border+text, 980px radius, hover underline */
.ds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: transparent;
  color: var(--ds-gold);
  border: 1px solid var(--ds-gold);
  border-radius: var(--ds-r-pill);
  font-family: var(--ds-font-text), var(--ds-font-kr);
  font-size: 17px; letter-spacing: -0.374px; font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease;
}
.ds-pill:hover { background: rgba(201,169,97,0.08); text-decoration: underline; }

.ds-pill--dark  { color: var(--ds-gold-bright); border-color: var(--ds-gold-bright); }
.ds-pill--dark:hover { background: rgba(224,193,118,0.1); }

/* Trust chip — small gold pill used in hero trust strip */
.ds-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: var(--ds-r-pill);
  border: 1px solid var(--ds-gold);
  color: var(--ds-gold-bright);
  font-family: var(--ds-font-kr);
  font-size: 13px; font-weight: 500; letter-spacing: -0.02em;
  background: transparent;
  white-space: nowrap;
}

/* Gold pill badge — "베스트셀러", "정부지원 70%" */
.ds-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-gold);
  color: var(--ds-black);
  font-family: var(--ds-font-kr);
  font-size: 12px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.ds-badge--ghost {
  background: transparent;
  border: 1px solid var(--ds-gold);
  color: var(--ds-gold);
}

/* ---------- CARDS ---------- */

.ds-card {
  background: var(--ds-white);
  border-radius: var(--ds-r-card);
  padding: 32px;
  box-shadow: var(--ds-shadow);
}
.ds-card--flat    { box-shadow: none; }
.ds-card--dark    { background: #141416; color: var(--ds-fg-dark); box-shadow: none; }

/* Spec card — big number top, small label bottom */
.ds-spec-card {
  background: var(--ds-white);
  border-radius: var(--ds-r-card);
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.ds-spec-card--dark { background: #141416; color: var(--ds-fg-dark); }
.ds-spec-card .ds-spec-num { color: inherit; }
.ds-spec-card .ds-label { color: var(--ds-fg-label-light); }
.ds-spec-card--dark .ds-label { color: var(--ds-fg-label-dark); }

/* Model price card — 자부담 prominent */
.ds-price-card {
  background: var(--ds-white);
  border-radius: var(--ds-r-card);
  padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.ds-price-card--dark { background: #141416; color: var(--ds-fg-dark); }

/* ---------- GLASS NAV ---------- */

.ds-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--ds-nav-h);
  background: var(--ds-glass-bg);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  color: var(--ds-fg-dark);
  display: flex; align-items: center;
}
.ds-nav__inner {
  max-width: var(--ds-container-wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.ds-nav__inner > a { white-space: nowrap; }
.ds-nav__links {
  display: flex; gap: 24px;
}
.ds-nav__links a {
  color: rgba(255,255,255,0.88);
  font-family: var(--ds-font-kr);
  font-size: 13px; font-weight: 400;
  text-decoration: none;
  transition: color .18s ease;
  white-space: nowrap;
}
.ds-nav__links a:hover { color: var(--ds-white); }

/* ---------- FORM ---------- */

.ds-field {
  display: flex; flex-direction: column; gap: 6px;
}
.ds-field__label {
  font-family: var(--ds-font-kr);
  font-size: 13px;
  color: var(--ds-fg-label-dark);
  letter-spacing: -0.02em;
}
.ds-input, .ds-select, .ds-textarea {
  appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ds-hairline-dark);
  border-radius: var(--ds-r-btn);
  color: var(--ds-fg-dark);
  padding: 12px 14px;
  font-family: var(--ds-font-kr);
  font-size: 15px; line-height: 1.4; letter-spacing: -0.02em;
  outline: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color: var(--ds-gold);
  background: rgba(255,255,255,0.1);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: rgba(255,255,255,0.4); }

/* select 드롭다운 화살표 (어두운 테마) */
.ds-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' stroke='%23C9A961' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* select option은 OS 네이티브 렌더링 - 어두운 배경+밝은 텍스트로 통일
   (브라우저 호환성: Chrome/Edge/Firefox 데스크탑은 적용됨, Safari/iOS는 OS 기본 사용) */
.ds-select option {
  background-color: #1a1a1a;
  color: #f3f1ec;
  padding: 8px;
}
.ds-select option:checked,
.ds-select option:hover {
  background-color: #C9A961;
  color: #0a0a0a;
}

.ds-input--light, .ds-select--light, .ds-textarea--light {
  background: var(--ds-white);
  border-color: var(--ds-hairline-light);
  color: var(--ds-fg-light);
}
.ds-select--light option {
  background-color: #ffffff;
  color: #0a0a0a;
}

/* ---------- SIZE / MODEL PICKER PILL BUTTONS ---------- */

.ds-pick {
  padding: 10px 20px;
  border-radius: var(--ds-r-pill);
  background: transparent;
  border: 1px solid var(--ds-hairline-light);
  color: var(--ds-fg-light);
  font-family: var(--ds-font-kr);
  font-size: 15px; font-weight: 500; letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ds-pick:hover { border-color: var(--ds-gold-dark); color: var(--ds-gold-dark); }
.ds-pick--active {
  background: var(--ds-black);
  color: var(--ds-gold-bright);
  border-color: var(--ds-black);
}

/* ---------- COMPARISON TABLE ---------- */

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-kr);
}
.ds-table th, .ds-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ds-hairline-dark);
  font-size: 15px;
  letter-spacing: -0.02em;
}
.ds-table thead th {
  font-weight: 500;
  color: rgba(255,255,255,0.56);
  font-size: 13px;
  border-bottom-color: rgba(255,255,255,0.2);
}
.ds-table .ds-model { font-weight: 600; }
.ds-table .ds-self-pay { color: var(--ds-gold-bright); font-weight: 600; }

/* ---------- SECTION PADDING ---------- */

.ds-section {
  padding: var(--ds-s-9) 22px;
}
.ds-section__inner {
  width: 100%;
  max-width: var(--ds-container);
  margin: 0 auto;
  box-sizing: border-box;
}
/* inline style wrapper (ModelStrip 등)도 full-width */
.ds-field-black > div:first-child,
.ds-field-light > div:first-child {
  width: 100%;
  box-sizing: border-box;
}
.ds-section--wide .ds-section__inner { max-width: var(--ds-container-wide); }

/* ---------- FLOATING ELEMENTS ---------- */

.ds-float-desktop {
  position: fixed; right: 24px; bottom: 24px;
  padding: 12px 22px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-gold);
  color: var(--ds-black);
  font-family: var(--ds-font-kr); font-size: 15px; font-weight: 600;
  box-shadow: var(--ds-shadow);
  text-decoration: none;
  z-index: 50;
  white-space: nowrap;
}
.ds-float-kakao {
  position: fixed; right: 24px; bottom: 84px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ds-kakao);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ds-shadow);
  z-index: 50;
  color: #3a1f1f; font-weight: 700; font-size: 13px;
}

.ds-float-mobile {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: none;
  background: var(--ds-black);
  color: var(--ds-fg-dark);
  z-index: 60;
  border-top: 1px solid var(--ds-hairline-dark);
}
.ds-float-mobile a {
  flex: 1; padding: 14px; text-align: center; color: inherit; text-decoration: none;
  font-family: var(--ds-font-kr); font-size: 15px; font-weight: 500;
  white-space: nowrap;
}
.ds-float-mobile a + a { border-left: 1px solid var(--ds-hairline-dark); color: var(--ds-gold-bright); }
@media (max-width: 640px) {
  .ds-float-mobile { display: flex; }
  .ds-float-desktop { display: none; }
}

/* ===== 모바일 반응형 보강 (2026-04-22) ===== */
@media (max-width: 768px) {
  /* ProductHero: 2열 → 1열 */
  .ds-section .ds-section__inner[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* ModelStrip 4카드 */
  section[class*="ds-field-light"] > div[style*="max-width: 1440px"] > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* ValueStrip/Bundle/UseCases/Trust: 3카드 → 1열 */
  .ds-section__inner > div[style*="repeat(3"],
  div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Calculator 5열 → 세로 스택 */
  .ds-section__inner > div[style*="1fr auto 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ds-section__inner > div[style*="1fr auto 1fr auto 1fr"] > div[style*="font-size: 24px"] {
    display: none;
  }
  /* 섹션 패딩 축소 */
  .ds-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  /* ProductHero 이미지 max-width 줄이기 */
  .ds-section img[src*="product-"] {
    max-width: 280px !important;
  }
  /* ModelStrip compact 썸네일 - 모바일에서 높이 축소 */
  .ds-product-thumb-wrap {
    height: 200px !important;
  }
  /* Hero 폰트 조정 */
  .ds-display, .ds-h1 { font-size: 40px !important; }
  .ds-h2, .ds-h2-kr { font-size: 28px !important; }
  /* ProductDetailModal — 모바일에서 1열 스택 */
  .ds-modal-grid {
    grid-template-columns: 1fr !important;
  }
  .ds-modal-content {
    max-height: 95vh !important;
  }
  .ds-modal-content > div > div:first-child {
    padding: 32px 20px !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .ds-modal-content > div > div:last-child {
    padding: 24px 20px !important;
  }
}

@media (max-width: 480px) {
  /* ModelStrip 매우 작은 화면에서 1열 */
  section[class*="ds-field-light"] > div[style*="max-width: 1440px"] > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}