/* 다우오피스 DO 디자인 시스템 — 컴포넌트 CSS (2026-10-27, 손으로 작성)
 * 피그마 DO-DDS 컴포넌트와 1:1. 색·여백·모서리는 ds-tokens-do.css 변수만 쓴다.
 * 반응형: 미디어쿼리 없이도 clamp()·min()·flex-wrap 으로 모바일이 자동 대응되게 만들었다.
 *         미디어쿼리는 "좌우 → 위아래" 같은 구조 변화에만 쓴다 (DO 운영 기준 768px).
 * 글자 크기는 ds-text.css 의 .ds-text-* 가 이미 clamp 라 여기서는 안 건드린다. */

/* ── 레이아웃 ─────────────────────────────────────────── */
.ds-container { width: 100%; max-width: var(--ds-layout-container); margin: 0 auto; padding-left: var(--ds-layout-gutter); padding-right: var(--ds-layout-gutter); box-sizing: border-box; }
/* .ds-section 은 2026-11-02 부터 ds-layout.css(HR·DO 공통)가 정의 — PC var(--ds-space-section) · 959 이하 space-3xl. 값은 DO 2단계(여백 결정)에서 조정 */

/* ── 버튼 (DO/Button) ─────────────────────────────────── */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  border: 0; border-radius: var(--ds-radius-pill); font-family: var(--ds-font-family); font-weight: 600; letter-spacing: -0.04em; line-height: 1.5;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, opacity .2s; }
/* 크기 — 운영 실측: 헤더 40 · 폼 제출 50 · 히어로 66. 모바일은 한 단계 작게 (clamp 로 자동) */
.ds-btn--s { min-height: var(--ds-height-3xl); padding: 0 20px; font-size: 16px; }                                   /* 40 */
.ds-btn--m { min-height: clamp(44px, 3.5vw, 50px); padding: 0 clamp(24px, 2.2vw, 32px); font-size: clamp(16px, 1.25vw, 18px); }
.ds-btn--l { min-height: clamp(50px, 4.6vw, 66px); padding: 0 clamp(24px, 2.5vw, 36px); font-size: clamp(16px, 1.4vw, 20px); }
.ds-btn--block { display: flex; width: 100%; }                                                                        /* 모바일 폼 제출용 */
/* 모양 */
.ds-btn--dark { background: var(--ds-button-bg-primary); color: var(--ds-button-text-primary); }
.ds-btn--dark:hover { background: var(--ds-button-bg-primary-hover); }
.ds-btn--gradient { background: var(--ds-gradient-main); color: var(--ds-basic-text-on-bg); }
.ds-btn--gradient:hover { opacity: .9; }
.ds-btn--gradient-line { background: var(--ds-basic-bg-base); position: relative; isolation: isolate; }
.ds-btn--gradient-line::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--ds-gradient-main);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; }
.ds-btn--gradient-line > span { background: var(--ds-gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ds-btn--gradient-line:hover { background: var(--ds-button-bg-line-hover); }
.ds-btn--line { background: var(--ds-basic-bg-base); color: var(--ds-basic-text-level2); box-shadow: inset 0 0 0 1px var(--ds-basic-border-level5); }
.ds-btn--line:hover { background: var(--ds-button-bg-line-hover); }
/* 어두운 배경 위 line 버튼 — DO/Button Style=Gradient Line Dark (2026-11-03 예외 변형, 운영 brandstory 엔터프라이즈 띠 기준)
   테두리 3px = DO/Gradient/Border-Dark-Button. 배경·그라데이션은 맞는 변수가 없어 값 그대로 */
.ds-btn--gradient-line-dark { border: 3px solid transparent; color: var(--ds-basic-text-on-bg);
  background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, linear-gradient(40deg, #da8fff 10%, #237fff 100%) border-box; }
.ds-btn--gradient-line-dark:hover { background: linear-gradient(#333, #333) padding-box, linear-gradient(40deg, #da8fff 10%, #237fff 100%) border-box; }
.ds-btn__icon { display: inline-flex; flex: none; width: 1.2em; height: 1.2em; }
.ds-btn__icon > img, .ds-btn__icon > svg { width: 100%; height: 100%; }

/* ── 텍스트 링크 「자세히 보기 >」 (DO/Text Link Type=More-R · More-R-L) ── */
/* 운영 .btn_link 실측: Regular · #888 · 화살표 ic_arrow.svg 20px. #888 은 맞는 변수가 없어 값 그대로 (2026-11-03) */
.ds-link-more { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.04em; color: #888; text-decoration: none; }
.ds-link-more--l { font-size: clamp(16px, 1.5vw, 18px); }
.ds-link-more > img { flex: none; width: 20px; height: 20px; }

/* ── 리드폼 (DO/Lead/*) ───────────────────────────────── */
.ds-lead { width: min(500px, 100%); margin: 0 auto; box-sizing: border-box; }                                         /* 폼 폭 500 → 모바일 100% */
.ds-lead__head { text-align: center; padding-top: clamp(40px, 4.9vw, 70px); }
.ds-lead__head .ds-lead__desc { margin-top: 10px; color: var(--ds-basic-text-disabled); }
.ds-lead__eyebrow { display: inline-block; padding: 6px 16px; border-radius: var(--ds-radius-pill); background: var(--ds-accent-bg-level3); color: var(--ds-accent-text-level1); font-weight: 700; font-size: 16px; }
.ds-lead__row { margin-top: 16px; position: relative; }
.ds-lead__group { margin-top: var(--ds-space-l); }
/* 입력칸 — 운영 .com_ipt_floating 과 같은 치수 */
.ds-field { position: relative; }
.ds-field__input { display: block; width: 100%; height: 48px; padding: 16px; box-sizing: border-box;
  border: 1px solid var(--ds-basic-border-level5); border-radius: var(--ds-radius-2xs); background: var(--ds-basic-bg-base);
  color: var(--ds-basic-text-level2); font: 400 16px/1.5 var(--ds-font-family); }
.ds-field__input:focus { outline: none; border-color: var(--ds-primary-border-level1); }
.ds-field__input.is-error { border-color: var(--ds-status-error-level1); }
textarea.ds-field__input { height: 106px; resize: vertical; }
.ds-field__label { position: absolute; left: 16px; top: 12px; pointer-events: none; color: var(--ds-field-text-placeholder); font-size: 16px; transition: .2s ease all; }
.ds-field__input:focus ~ .ds-field__label, .ds-field__input:not(:placeholder-shown) ~ .ds-field__label { top: 4px; font-size: 12px; }
.ds-field--required .ds-field__label::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 2px; vertical-align: top; border-radius: 50%; background: var(--ds-accent-bg-level1); }
/* 질문 제목 + 칩 */
.ds-lead__question { display: flex; align-items: center; gap: var(--ds-space-m); flex-wrap: wrap; font-weight: 500; font-size: 16px; color: var(--ds-basic-text-level2); }
.ds-lead__question.is-required::after { content: ""; order: -1; } /* 자리 보존 */
.ds-lead__question .ds-chip { padding: 2px 8px; border-radius: var(--ds-radius-2xs); background: var(--ds-basic-bg-level2); color: var(--ds-basic-text-level4); font-size: 12px; font-weight: 500; }
/* 라디오 — 운영 .com_radio (20px, 선택 시 파랑 링) */
.ds-radio-group { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 16px; }
.ds-radio { display: inline-flex; align-items: center; gap: var(--ds-space-xs); cursor: pointer; font-size: 16px; color: var(--ds-basic-text-level2); }
.ds-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-radio__mark { width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; background: var(--ds-basic-bg-base); border: 1px solid var(--ds-basic-border-level5); transition: .2s; }
.ds-radio input:checked ~ .ds-radio__mark { border: 6px solid var(--ds-accent-bg-level1); }
/* 동의 줄 — 운영 .wrap_terms .com_ck.bk */
.ds-agree { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; color: var(--ds-basic-text-level2); line-height: 30px; }
.ds-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-agree__mark { width: 20px; height: 20px; border-radius: 50%; background: var(--ds-basic-border-level5); flex: none; }
.ds-agree input:checked ~ .ds-agree__mark { background: var(--ds-primary-bg-level1); }
.ds-agree__more { margin-left: auto; color: var(--ds-basic-text-disabled); }
.ds-lead__terms { margin-top: 28px; }
/* 제출 */
.ds-lead__submit { margin-top: clamp(40px, 4.2vw, 60px); text-align: center; }

/* ── 좌우 배너형 리드페이지 ─────────────────────────────── */
.ds-lead-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 80px); align-items: start; }
.ds-lead-cols .ds-lead { margin: 0; width: 100%; }
.ds-lead-card { padding: clamp(24px, 3.3vw, 48px); border-radius: var(--ds-radius-xl); background: var(--ds-basic-bg-level2); }

/* ── 구조가 바뀌는 곳만 미디어쿼리 (DO 운영 768px) ───────── */
@media (max-width: 768px) {
  .ds-lead-cols { grid-template-columns: minmax(0, 1fr); }      /* 좌우 → 위아래 */
  .ds-lead__submit .ds-btn { display: flex; width: 100%; }      /* 제출 버튼 꽉 차게 */
  .ds-radio-group { flex-direction: column; gap: 12px; }        /* 라디오 세로로 */
}