/* =========================================================
   Pilldoc Design System - Legacy bridge

   **이 파일은 한시적입니다.** 기존 CSS 16,697줄과 한 화면에서 공존하는 동안,
   기존 규칙이 컴포넌트를 이기는 지점만 되돌립니다.

   공용 레이아웃 리뉴얼이 끝나고 기존 CSS 를 걷어내면 이 파일을 통째로
   지웁니다. 그때 지울 수 있도록, 여기에는 **되돌리는 규칙만** 둡니다.
   새로운 모양을 여기서 정하지 않습니다. 값은 전부 토큰을 참조합니다.

   남은 충돌은 한 종류입니다.
     기존 CSS 가 요소+속성 선택자를 써서 컴포넌트 클래스를 이긴다 (input[type=...])

   특이도 문제라 "나중에 로드되니까 이긴다"가 성립하지 않습니다.

   ── 지운 항목 ──────────────────────────────────────────────
   예전에는 시맨틱 요소 중화 규칙이 하나 더 있었습니다.

     .pd-root :where(header, footer, aside, nav, section, article) { position: static; ... }

   common.css 가 header { position: fixed; z-index: 1000 } 을 걸어 둬서,
   화면 안에서 <header> 를 쓰면 카드 머리행이 화면 위로 튀어 올랐습니다.
   공용 레이아웃 리뉴얼로 common.css 의 header / footer 블록을 걷어냈고,
   admin.css 와 intro.css 의 같은 규칙은 어느 화면에도 실리지 않아
   이 중화가 더 이상 필요 없습니다. 공지 상세(.pd-root header)가
   중화 규칙 없이도 static 으로 남는 것을 확인하고 지웠습니다.
   ========================================================= */

/* ---------------------------------------------------------
   폼 컨트롤

   module.css 가 input[type="text"] 부터 input[type="url"] 까지 늘어놓고
   height: 36px, width: auto, border-radius: 4px, padding: 0 10px 를 겁니다.
   요소+속성 선택자(0,1,1)라 .pd-input(0,1,0)이 집니다. select 와 textarea 는
   요소 선택자(0,0,1)뿐이라 이 문제가 없습니다.

   요소를 붙여 특이도를 (0,1,1)로 맞춥니다. 같은 값이면 나중에 로드되는
   이 파일이 이깁니다.

   문의 게시판 이관에서 제목 입력이 36px 로 나와 발견했습니다.
   --------------------------------------------------------- */
input.pd-input {
  width: 100%;
  height: var(--pd-control-h);
  line-height: normal;
  font-size: 14px;
  padding-inline: var(--pd-control-px);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  background-color: var(--pd-surface);
}
input.pd-input--sm { height: var(--pd-control-h-sm); font-size: 13px; padding-inline: var(--pd-control-px-sm); }
input.pd-input--lg { height: var(--pd-control-h-lg); font-size: 15px; padding-inline: var(--pd-control-px-lg); }
input.pd-input--error { border-color: var(--pd-danger); }
input.pd-input[disabled] { background-color: var(--pd-surface-muted); border-color: var(--pd-border); }
input.pd-input[readonly] { background-color: var(--pd-surface-sunken); }
/* 비밀번호는 높이를 유지한 채 가림 문자만 키운다(components.css 와 같은 규칙). */
input.pd-input[type="password"] { font-size: 19px; letter-spacing: 0.14em; }
input.pd-input[type="password"]::placeholder { font-size: 14px; letter-spacing: normal; }

/* 입력 그룹 안에서는 좌우 여백을 그룹이 정한다. 위에서 padding 을 다시
   지정했으므로 그룹 규칙도 특이도를 맞춰 준다. */
.pd-input-group--icon-start > input.pd-input {
  padding-inline-start: calc(var(--pd-space-3) + var(--pd-icon) + var(--pd-space-2));
}
.pd-input-group--action-end > input.pd-input {
  padding-inline-end: calc(var(--pd-space-1) + var(--pd-control-h) - var(--pd-space-2) + var(--pd-space-1));
}
.pd-input-group--action-2 > input.pd-input {
  padding-inline-end: calc(var(--pd-space-1) + (var(--pd-control-h) - var(--pd-space-2)) * 2 + var(--pd-space-2));
}