/* =========================================================
   LAPTOP-REPAIR THEME — "Blueprint Tech" Redesign
   - 설계도(블루프린트) 감성: 네이비 배경 + 얇은 그리드
   - 카드 좌측 라인 포인트, 도형 프레임, 단계(step) UI
   - 가독성 높은 산세리프 + 숫자 모노폰트 믹스
   ========================================================= */

/* Fallback fonts */
@font-face { font-family: 'SYS-Ui';  src: local('Inter'), local('Segoe UI'); font-display: swap; }
@font-face { font-family: 'SYS-Mono';src: local('Consolas'), local('Menlo'); font-display: swap; }

:root{
  --bg:#0E1630;            /* 네이비 블루프린트 */
  --surface:#0F1B3B;       /* 한 톤 밝은 패널 */
  --surface-2:#11214A;     /* 섹션 대비 */
  --paper:#FFFFFF;
  --text:#E8EEFF;          /* 본문 */
  --muted:#93A3C0;         /* 보조 텍스트 */
  --accent:#3EC5FF;        /* 포인트(하늘) */
  --accent2:#35E0A1;       /* 보조 포인트(민트) */
  --danger:#FF5C7A;
  --line:#22407D;          /* 설계도 라인 */
  --radius:14px;
  --shadow:0 14px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(1400px 900px at 70% -10%, #172553 0%, #0E1630 60%),
    #0E1630;
  color:var(--text);
  font-family:'SYS-Ui', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', '맑은 고딕', sans-serif;
  letter-spacing:.2px;
}

/* ---------- Container ---------- */
.container{ width:min(1120px,92%); margin:0 auto }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background: linear-gradient(180deg, rgba(14,22,48,.95), rgba(14,22,48,.70));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent2);
  border:1px dashed rgba(53,224,161,.4);
  padding:6px 10px; border-radius:8px;
}
.site-nav a{
  color:var(--text); margin:0 10px; padding:8px 2px; position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0); transform-origin:left; transition:.2s ease;
}
.site-nav a:hover{ color:var(--accent) }
.site-nav a:hover::after{ transform:scaleX(1) }
.nav-toggle{ display:none } /* 그누보드 토글 버튼 기본은 숨김 (모바일에서만 표시) */

/* ---------- Blueprint Grid BG (optional) ---------- */
.bp-grid{
  position:absolute; inset:0; z-index:0; opacity:.25; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: gridMove 26s linear infinite;
}
@keyframes gridMove{
  from { transform: translateY(0) translateX(0) }
  to   { transform: translateY(28px) translateX(28px) }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:34px 0 14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center }
.hero h1{
  font-size:clamp(30px,5.2vw,52px); line-height:1.08; margin:.2em 0;
  text-shadow:0 2px 0 rgba(255,255,255,.06);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(53,224,161,.12); color:#CFF7EA;
  border:1px solid rgba(53,224,161,.45);
  padding:6px 10px; border-radius:999px; font-weight:800;
}
.badge::before{ content:"●"; color:var(--accent2) }

.hero .kv{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  outline:1px dashed rgba(62,197,255,.35); outline-offset:-6px;
}

/* ---------- Buttons ---------- */
.btn{
  --b1:var(--accent); --b2:var(--accent2);
  border:2px solid var(--b1); color:var(--b1); background:transparent;
  padding:11px 16px; border-radius:10px; font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; transition:all .25s ease; position:relative; overflow:hidden;
}
.btn:hover{ color:var(--b2); border-color:var(--b2); transform:translateY(-2px) }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#06101B; border-color:transparent }
.btn.ghost{ background:transparent }

/* ---------- Info 3 (서비스 하이라이트) ---------- */
.info3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--surface);
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.card .p{ padding:14px }
.card h3{ margin:0 0 6px; color:#DFF4FF }
.card .small{ color:var(--muted) }
.card img{ width:100%; height:160px; object-fit:cover; filter:contrast(110%) saturate(110%) }

/* ---------- Section ---------- */
.section{ padding:38px 0 }
.section h2{ margin:0 0 10px; letter-spacing:.08em; text-transform:uppercase }

/* ---------- Steps (수리 프로세스) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 }
.step{
  background:var(--surface-2); border:1px dashed rgba(62,197,255,.45); border-radius:12px;
  padding:14px;
}
.step .no{
  font-family:'SYS-Mono', monospace; font-weight:900; color:var(--accent2);
  display:inline-block; border:1px solid rgba(53,224,161,.45); padding:2px 8px; border-radius:6px; margin-bottom:8px;
}

/* ---------- Parts Grid (서비스/상품 목록 재사용) ---------- */
.parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.part{
  background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.part:hover{ transform:translateY(-4px); border-color:rgba(62,197,255,.45); box-shadow:0 16px 30px rgba(0,0,0,.45) }
.part img{ width:100%; height:200px; object-fit:cover }
.part .p{ padding:12px }
.part h3{ margin:0 0 6px; color:var(--accent) }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
details{
  background:var(--surface); border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:12px 14px
}
summary{ cursor:pointer; font-weight:800; color:#DDE6FF }
details[open]{ border-color:rgba(53,224,161,.45) }

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(180deg, rgba(14,22,48,.85), rgba(14,22,48,.70));
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:42px;
}
.site-footer .container{ padding:20px 0; color:var(--muted) }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero .wrap{ grid-template-columns:1fr }
}
@media (max-width:900px){
  .info3{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr 1fr }
  .parts{ grid-template-columns:1fr 1fr }
  .faq{ grid-template-columns:1fr }
}
@media (max-width:540px){
  .steps{ grid-template-columns:1fr }
  .parts{ grid-template-columns:1fr }
}