/* =========================================================
   Samsung SSD Warranty Check
   · 수정일  : 2025-05-21
   · 담당자  : 김준수
   · 설명    : Header·본문·Footer 공통 레이아웃 및 UI 컴포넌트
   ========================================================= */

/* ---------- 1) 폰트 선언 -------------------------------- */

                       /* SamsungOne 로컬 호스팅으로 교체하려면 주석 해제
@font-face {
  font-family: 'SamsungOne';
  src: url('fonts/SamsungOneKorean.ttf') format('truetype');
  font-display: swap; 
}
 */

/*  ※ 삼성원 사용이 어려울 때 Pretendard cdn으로 교체하려면 주석 해제
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
*/

@font-face{
  font-family:'Pretendard';
  font-weight:400;
  src:local('Pretendard Regular'),
      url('fonts/Pretendard-Regular.woff2') format('woff2');
  font-display:swap;            /* 로딩 지연 시 시스템 글꼴로 먼저 표시 */
}
@font-face{
  font-family:'Pretendard';
  font-weight:700;
  src:local('Pretendard Bold'),
      url('fonts/Pretendard-ExtraBold.woff2') format('woff2');
  font-display:swap;
}


/* ---------- 2) 디자인 토큰 ------------------------------ */
:root {
  /* 색상 */
  --color-primary: #1428a0;
  --color-black  : #000;
  --color-white  : #fff;
  --color-gray-50: #fafafa;
  --color-gray-100:#f5f5f5;
  --color-gray-300:#d1d1d1;
  --color-gray-500:#666;
  /* 여백·모서리 */
  --radius: .25rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 2rem;
}

/* ---------- 3) 리셋 ------------------------------------- */
*   { box-sizing: border-box; margin:0; padding:0; }
html { font-size: 16px; }
body {
  font-family: 'Pretendard','Noto Sans KR',Arial,sans-serif;          /* Pretendard 적용 */
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.6;
}

/* =========================================================
   A. HEADER
   ========================================================= */
.header {
  /* 삼성 블루 → 네이비 그라데이션 */
  background: linear-gradient(90deg,#1428a0 0%,#0d1b6e 100%);
}
.header-inner {
  max-width: 1080px;
  margin: auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;           /* 로고·제목 수직 중앙 */
  justify-content: space-between;
  gap: 1rem;
}
.logo img { height: 40px; display:block; }
.header h1 {
  margin: 0; line-height: 1;
  font-size: 2rem; font-weight: 700; color: #fff;
}

/* =========================================================
   B. MAIN LAYOUT (container, section, headings)
   ========================================================= */
.container { max-width:1080px; margin:auto; padding:var(--space-4) var(--space-3); }
section + section { margin-top: var(--space-4); }
h2 { font-size:1.25rem; font-weight:700; margin-bottom:var(--space-2); }
.small { font-size:.875rem; color:var(--color-gray-500); }
.holiday { color:#d60000; }

/* =========================================================
   C. TABLE ? 무상 A/S 보증기간
   ========================================================= */
.warranty-table-wrapper { overflow-x:auto; }  /* 모바일 스크롤 */
.warranty-table {
  width:100%; border-collapse:collapse; font-size:.95rem;
}
.warranty-table th,
.warranty-table td {
  border:1px solid var(--color-gray-300);
  padding:var(--space-2) var(--space-3);
  text-align:left;
}
.warranty-table th { background:var(--color-gray-100); }
.warranty-table tbody tr:nth-child(even) { background:var(--color-gray-50); }

/* =========================================================
   D. FORM ? Serial Number 입력
   ========================================================= */
.inputs {
  display:flex; flex-wrap:wrap;
  gap:var(--space-2); margin-bottom:var(--space-3);
}
.inputs input[type=text]{
  flex: 1 1 180px; min-width:140px;
  padding:.6rem .75rem;
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius);
  background:var(--color-gray-50);
  font-size:1rem;
  transition:border-color .2s,background .2s;
}
.inputs input[type=text]:focus,
.inputs input[type=text].onInput{
  border-color:var(--color-primary);
  background:#fff; outline:none;
}
.serial-check form + .warranty-table-wrapper{
  margin-top: var(--space-3);   /* 조회 버튼과 결과값 사이 간격 = 1rem (토큰값) */
}

/* ---------------------------------------------------------
   버튼 공통
--------------------------------------------------------- */
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;height:44px;
  padding:0 var(--space-3);
  border:none;border-radius:var(--radius);
  font-size:1rem;font-weight:700;cursor:pointer;
  transition:background .2s;
}
.btn-primary{ background:var(--color-black); color:#fff; }
.btn-primary:hover{ background:#222; }
.btn-secondary{
  background:var(--color-gray-100); color:var(--color-black); margin-left:var(--space-2);
}
.btn-secondary:hover{ background:var(--color-gray-300); }

/* =========================================================
   E. ETC ? Lists / Links
   ========================================================= */
.service-info ul,
.center-hours ul { list-style:disc; padding-left:var(--space-3); }
.software { margin-top:var(--space-2); }

/* =========================================================
   F. FOOTER
   ========================================================= */
.footer {
  background: var(--color-gray-100);  /* 전체 폭 배경 */
  border-top:1px solid var(--color-gray-300);
  font-size:.875rem; color:var(--color-gray-500);
}
.footer-inner{
  max-width:1080px; margin:auto;
  padding:var(--space-4) var(--space-3);
}