/* ==========================================================================
   sd-ui.css — 공통 컴포넌트 토스풍 오버라이드 (Part 2-A: 버튼·입력폼)
   로드: head.sub.php add_stylesheet 마지막 (default/common/style.css 뒤)
   원칙: 마크업 무수정. 색·라운드·타이포·모션만 교체. 크기·레이아웃 최소 개입.
   근거: _handoff/TDS_SPEC.md
   ========================================================================== */

/* ---------- 버튼 공통 ---------- */
.btn_submit,
.btn_cancel,
a.btn_cancel,
button.btn_cancel,
.btn_confirm,
a.btn01, button.btn01,
a.btn02, button.btn02,
a.btn_b01, button.btn_b01,
a.btn_b02, button.btn_b02,
a.btn_b03, button.btn_b03,
a.btn_b04, button.btn_b04,
.btn_frmline {
  font-family: inherit;
  font-weight: var(--sd-weight-semibold);
  /* 원래 border 있던 버튼은 투명 1px로 유지해 크기 변화 방지 */
  border-color: transparent;
  border-radius: var(--sd-radius-m);
  transition: var(--sd-transition-bg);
  cursor: pointer;
  text-decoration: none;
}

/* 주 액션 (제출·확인) — fill primary */
.btn_submit,
.btn_confirm {
  background: var(--sd-primary);
  color: #fff;
}
.btn_submit:hover,
.btn_submit:focus,
.btn_confirm:hover {
  background: var(--sd-primary-hover);
  color: #fff;
}
.btn_submit:active,
.btn_confirm:active {
  background: var(--sd-primary-active);
}

/* 취소·보조 — grey weak */
.btn_cancel,
a.btn_cancel,
button.btn_cancel,
a.btn01,
button.btn01,
a.btn_b01,
button.btn_b01 {
  background: var(--sd-grey100);
  color: var(--sd-text-sub);
}
.btn_cancel:hover,
a.btn_cancel:hover,
button.btn_cancel:hover,
a.btn01:hover, a.btn01:focus,
button.btn01:hover,
a.btn_b01:hover,
button.btn_b01:hover {
  background: var(--sd-grey200);
  color: var(--sd-text-body);
}

/* 진한 보조 — dark */
a.btn02, button.btn02,
a.btn_b02, button.btn_b02 {
  background: var(--sd-grey800);
  color: #fff;
}
a.btn02:hover, .btn02:hover, button.btn02:hover,
a.btn_b02:hover, button.btn_b02:hover {
  background: var(--sd-grey900);
  color: #fff;
}

/* 연한 액센트 — weak blue (폼 인라인 버튼 등) */
.btn_frmline,
a.btn_b03, button.btn_b03 {
  background: var(--sd-primary-weak);
  color: var(--sd-primary);
}
.btn_frmline:hover,
a.btn_b03:hover, button.btn_b03:hover {
  background: var(--sd-blue100);
  color: var(--sd-primary-active);
}

/* 위험 (삭제 계열) */
a.btn_b04, button.btn_b04 {
  background: var(--sd-danger-weak);
  color: var(--sd-danger);
}
a.btn_b04:hover, button.btn_b04:hover {
  background: var(--sd-red100);
  color: var(--sd-red700);
}

/* 키보드 포커스 링 */
.btn_submit:focus-visible,
.btn_cancel:focus-visible,
.btn_confirm:focus-visible,
.btn01:focus-visible,
.btn02:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sd-blue300);
}

/* ---------- 입력폼 ---------- */
.frm_input,
textarea,
select {
  font-family: inherit;
  background: #fff;
  color: var(--sd-text-title);
  border: 1px solid transparent;
  border-radius: var(--sd-radius-m);
  box-shadow: var(--sd-input-border);
  padding: 8px 12px;
  transition: box-shadow 0.15s ease, background 0.2s ease;
}
.frm_input::placeholder,
textarea::placeholder {
  color: var(--sd-text-disabled);
}
.frm_input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: var(--sd-focus-ring);
}
.frm_input:disabled,
.frm_input[readonly],
textarea:disabled,
select:disabled {
  background: var(--sd-grey100);
  color: var(--sd-text-weak);
  box-shadow: inset 0 0 0 1px var(--sd-grey-op100);
}

/* 필수·오류 표시(기존 .required 관례 유지, 좌측 라인 금지 규칙 준수) */
.frm_input.required:focus,
textarea.required:focus {
  box-shadow: var(--sd-focus-ring);
}

/* ==========================================================================
   Part 2-B: 페이지네이션 · 표 · 카드/배지 유틸
   ========================================================================== */

/* ---------- 페이지네이션 ---------- */
.pg_page,
.pg_current {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sd-radius-m);
  color: var(--sd-text-weak);
  font-weight: var(--sd-weight-medium);
  transition: var(--sd-transition-bg);
}
.pg a:focus,
.pg a:hover {
  background: var(--sd-grey100);
  color: var(--sd-text-body);
  text-decoration: none;
  border-radius: var(--sd-radius-m);
}
.pg_current {
  background: var(--sd-primary-weak);
  color: var(--sd-primary);
  font-weight: var(--sd-weight-bold);
}
.pg_start, .pg_prev, .pg_next, .pg_end {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sd-radius-m);
}
.pg_start:hover, .pg_prev:hover, .pg_next:hover, .pg_end:hover {
  background: var(--sd-grey100);
  border-color: transparent;
}

/* ---------- 표 (목록형 tbl_head01 · 폼형 tbl_frm01) ---------- */
.tbl_head01 th {
  background: var(--sd-grey50);
  color: var(--sd-text-weak);
  font-weight: var(--sd-weight-medium);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--sd-divider);
}
.tbl_head01 td {
  color: var(--sd-text-body);
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--sd-grey100);
}
.tbl_frm01 th {
  background: var(--sd-grey50);
  color: var(--sd-text-sub);
  font-weight: var(--sd-weight-medium);
  border-left: 0;
  border-right: 0;
  border-color: var(--sd-divider);
}
.tbl_frm01 td {
  border-left: 0;
  border-right: 0;
  border-color: var(--sd-grey100);
  color: var(--sd-text-body);
}

/* ---------- 재사용 유틸: 카드 ---------- */
/* 새 마크업/개별 페이지에서 class로 사용. 기존 마크업엔 영향 없음 */
.sd-card {
  background: var(--sd-bg-layered);
  border-radius: var(--sd-radius-xl);
  box-shadow: var(--sd-shadow-s);
  padding: var(--sd-space-6);
}
.sd-card--flat {
  background: var(--sd-grey100);
  border-radius: var(--sd-radius-xl);
  box-shadow: none;
  padding: var(--sd-space-6);
}
.sd-notice {
  border: 0;
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-6);
  line-height: 1.7;
  color: var(--sd-text-body);
  word-break: keep-all;
}
.sd-notice--warn    { background: var(--sd-yellow50); }
.sd-notice--info    { background: var(--sd-grey100); }
.sd-notice--success { background: var(--sd-green50); }
.sd-notice--danger  { background: var(--sd-danger-weak); }

/* ---------- 재사용 유틸: 필형 배지 ---------- */
.sd-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--sd-radius-pill);
  font-size: var(--sd-t7-size);
  font-weight: var(--sd-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.sd-badge--blue   { background: var(--sd-blue50);   color: var(--sd-blue600); }
.sd-badge--grey   { background: var(--sd-grey100);  color: var(--sd-text-sub); }
.sd-badge--green  { background: var(--sd-green50);  color: var(--sd-green700); }
.sd-badge--yellow { background: var(--sd-yellow100);color: var(--sd-yellow900); }
.sd-badge--red    { background: var(--sd-red50);    color: var(--sd-red600); }

/* ==========================================================================
   Part 2-C: 헤더 GNB · 푸터
   ========================================================================== */

/* GNB 상위 링크: 살짝 무게감 (크기·간격 불변) */
#header .gnb > ul > li > a {
  font-weight: var(--sd-weight-medium);
}

/* GNB 드롭다운: 반투명 글래스 → 토스식 화이트 카드 */
#header .gnb > ul > li ul {
  background: #fff;
  border: 0;
  border-radius: var(--sd-radius-l);
  box-shadow: var(--sd-shadow-m);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 8px;
}
#header .gnb > ul > li ul li a {
  color: var(--sd-text-body);
  border-radius: var(--sd-radius-m);
  transition: var(--sd-transition-bg);
}
#header .gnb > ul > li ul li a:hover {
  background: var(--sd-grey100);
  color: var(--sd-text-title);
}
#header .gnb > ul > li ul li ~ li a {
  border-top: 0;
}

/* 푸터: 라이트 그레이 기조 정리 */
#footer .lnk {
  border-bottom: 1px solid var(--sd-divider);
}
#footer .lnk > ul > li > a {
  color: var(--sd-text-title);
}
#footer .lnk > ul ul a {
  color: var(--sd-text-weak);
  transition: var(--sd-transition-bg);
}
#footer .lnk > ul ul a:hover {
  color: var(--sd-text-body);
}
#footer .info,
#footer .ft_info {
  color: var(--sd-text-weak);
}

/* ==========================================================================
   Part 3-B: 푸터 토스 리파인 (tail.php 재배치와 세트)
   위계 3단: 링크(semibold) > 회사정보(grey500) > 카피라이트(grey400)
   ========================================================================== */

#footer {
  background: var(--sd-grey50);
  border-top: 1px solid var(--sd-divider);
  font-size: 1.3rem;
  line-height: var(--sd-t7-lh);
  color: var(--sd-text-weak);
}
#footer .ft_info .left {
  padding: 6.4rem 8rem 6.4rem 0;
  white-space: normal; /* 인라인 회사정보 줄바꿈 허용 */
}
#footer .lnk > ul {
  padding: 6.4rem 0 6.4rem 6.4rem;
}

/* 로고: 저채도 서명 톤 */
#footer .f_logo {
  margin-bottom: 2.8rem;
}
#footer .f_logo img {
  filter: grayscale(1);
  opacity: 0.75;
}

/* 링크줄: 14px semibold */
#footer .customer_list {
  gap: 2rem;
  margin-bottom: 2.4rem;
}
#footer .customer_list a {
  font-size: 1.4rem;
  font-weight: var(--sd-weight-semibold);
  color: var(--sd-text-sub);
  transition: var(--sd-transition-bg);
}
#footer .customer_list a:hover {
  color: var(--sd-text-title);
}
/* 개보법 관례: 개인정보처리방침 강조 유지 */
#footer .customer_list a.ft_privacy {
  font-weight: var(--sd-weight-bold);
  color: var(--sd-text-title);
}

/* 회사정보: 최저-1 위계 + 상단 divider */
#footer .ft_biz {
  border-top: 1px solid var(--sd-divider);
  padding-top: 2.4rem;
  margin-bottom: 2.4rem;
  color: var(--sd-grey500);
}
#footer .ft_biz a {
  color: inherit;
}
#footer .add {
  margin-bottom: 0.8rem;
}
/* 세로 7줄 → 인라인 dot 구분 (문구 불변, 배치만) */
#footer .info {
  margin-bottom: 0;
}
#footer .info li {
  display: inline;
}
#footer .info li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sd-grey300);
  vertical-align: middle;
  margin: 0 1rem;
}

/* SNS: 뉴모피즘 제거 → 플랫 회색 원형 */
#sns_link {
  margin: 0 0 2.4rem;
}
#sns_link a {
  width: 3.6rem;
  height: 3.6rem;
  margin-right: 0.8rem;
  background: var(--sd-grey200);
  border: 0;
  box-shadow: none;
  transition: var(--sd-transition-bg);
}
#sns_link a img {
  width: 1.6rem;
  height: 1.6rem;
  filter: invert(1); /* 흰색 SVG → 검정 */
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
#sns_link a:hover {
  background: var(--sd-grey300);
}
#sns_link a:hover img {
  opacity: 0.85;
}

/* 카피라이트: 최저 위계 */
#footer address {
  font-size: 1.2rem;
  font-style: normal;
  color: var(--sd-grey400);
}
#footer address a {
  color: inherit;
}

/* 우측 내비(서브페이지) 위계 보정 */
#footer .lnk > ul > li > a {
  font-size: 1.4rem;
  font-weight: var(--sd-weight-semibold);
  margin-bottom: 1.2rem;
}
#footer .lnk > ul ul a {
  font-size: 1.3rem;
  line-height: 2;
}

@media (max-width: 1024px) {
  #footer .ft_info .left {
    padding: 4.8rem 0;
  }
  #footer .customer_list {
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
  }
  #footer .info li {
    display: block; /* 좁은 화면은 세로 나열 복귀 */
  }
  #footer .info li:not(:last-child)::after {
    content: none;
  }
}