/* ════════════════════════════════════════════
   진주컴퓨터 · 조립·수리 이용 절차 섹션
   모든 클래스 sx- 접두사 / font-family 요소별 직접 지정
   ════════════════════════════════════════════ */

/* 폰트 — 설치된 글꼴 우선, 없으면 CDN */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@font-face { font-family:'Gmarket Sans'; font-weight:700; font-display:swap;
  src:local('Gmarket Sans Bold'), local('GmarketSansBold'),
      url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); }
@font-face { font-family:'Gmarket Sans'; font-weight:500; font-display:swap;
  src:local('Gmarket Sans Medium'), local('GmarketSansMedium'),
      url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); }

/* ════ 기본 ════ */
.sx-wrap * { box-sizing:border-box; }
.sx-wrap { color:var(--body); word-break:keep-all; overflow-wrap:break-word; overflow-x:clip;
  /* jinjucom.kr 색상 */
  --brand:#0073DD; --brand-deep:#005FB8; --brand-soft:#E6F1FC;
  --paper:#F4F6F9; --dark:#123A6B; --ink:#3F3F3F; --body:#4A4F57; --muted:#8B919B; }
.sx-wrap img { max-width:100%; }
.sx-container { max-width:1120px; margin:0 auto; padding:0 clamp(24px,7vw,150px); }
/* 히어로 외 모든 섹션: 내용 폭 = 단계 박스 폭(780px), 글 시작선도 박스 왼쪽 끝에 맞춤 */
.sx-sec .sx-container, .sx-cta .sx-container { max-width:calc(780px + 2 * clamp(24px,7vw,150px)); }
.sx-sec { padding:clamp(88px,10vw,132px) 0; }
.sx-sec.paper { background:var(--paper); }
.sx-sec.white { background:#fff; }
.sx-sec.dark  { background:var(--dark); }
.sx-sec h2 { font-family:'Gmarket Sans','Pretendard','Noto Sans KR',sans-serif; font-weight:700;
  font-size:clamp(31px,3.9vw,50px); line-height:1.26; letter-spacing:-0.03em;
  margin:0 0 18px; color:var(--ink); word-break:keep-all; }
.sx-sec h2 .k { color:var(--brand); }
.sx-sec.dark h2 { color:#fff; }
.sx-sec.dark h2 .k { color:#8CC8FF; }
.sx-lead { font-family:'Pretendard','Noto Sans KR',sans-serif;
  font-size:clamp(18px,1.9vw,21px); line-height:1.8; color:var(--body);
  margin:0 0 clamp(44px,5vw,64px); word-break:keep-all; }
.sx-sec.dark .sx-lead { color:rgba(255,255,255,0.72); }
.sx-lead strong { font-family:'Pretendard',sans-serif; font-weight:700; color:var(--ink); }

/* 작은 라벨 */
.sx-tag { display:inline-block; font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:14px; letter-spacing:0.16em; color:var(--brand); margin-bottom:14px; }
.sx-tag::before { content:""; display:inline-block; width:22px; height:2px;
  background:var(--brand); vertical-align:0.28em; margin-right:10px; }
.sx-sec.dark .sx-tag { color:#8CC8FF; }
.sx-sec.dark .sx-tag::before { background:#8CC8FF; }

/* 제목 + 캐릭터 2단 머리 */
.sx-head { display:grid; grid-template-columns:1fr auto; gap:clamp(20px,4vw,56px); align-items:end;
  margin-bottom:clamp(40px,4.6vw,60px); }
.sx-head .sx-lead { margin-bottom:0; }
.sx-head-pic { width:clamp(150px,19vw,230px); }
.sx-head-pic img { width:100%; height:auto; display:block; }

/* 캐릭터(왼쪽) + 글(오른쪽) — 캐릭터 높이는 히어로 캐릭터와 같게 */
.sx-intro { display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(30px,4vw,60px); align-items:center;
  margin-bottom:clamp(40px,4.6vw,60px); }
.sx-intro .sx-lead { margin-bottom:0; }
.sx-intro-pic img { width:100%; height:auto; display:block; }

/* ════ A 히어로 (숫자 바 없음) ════ */
.sx-hero { background:#fff; padding:clamp(72px,8vw,108px) 0 clamp(64px,7vw,96px); }
.sx-hero-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(30px,4vw,60px); align-items:stretch; }
.sx-hero h1 { font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:clamp(34px,4.3vw,56px); line-height:1.24; letter-spacing:-0.04em;
  margin:0 0 24px; color:var(--ink); word-break:keep-all; }
.sx-hero h1 .k { color:var(--brand); }
.sx-hero-sub { font-family:'Pretendard',sans-serif; font-size:clamp(19px,2vw,23px);
  line-height:1.72; color:var(--body); margin:0; word-break:keep-all; }
.sx-hero-sub strong { font-family:'Pretendard',sans-serif; color:var(--ink); font-weight:700; }
/* 캐릭터 높이 = 왼쪽 글 전체 높이 */
.sx-hero-shot { position:relative; min-height:280px; }
.sx-hero-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; }

/* ════ B 대화형 ════ */
.sx-talk { max-width:none; }
.sx-turn { display:flex; gap:14px; margin-bottom:clamp(22px,2.6vw,32px); align-items:flex-end; }
.sx-turn.me { flex-direction:row-reverse; }
/* 말풍선 옆 동그라미 */
.sx-who { flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Pretendard','Noto Sans KR',sans-serif; font-weight:600; font-size:12px;
  line-height:1.2; letter-spacing:-0.01em; white-space:nowrap; }
.sx-turn.you .sx-who { background:#E3E8EF; color:var(--body); }
.sx-turn.me .sx-who { background:var(--brand); color:#fff; }
.sx-bubble { position:relative; max-width:min(80%,580px); border-radius:20px;
  padding:clamp(20px,2.3vw,26px) clamp(22px,2.5vw,30px); word-break:keep-all; }
.sx-turn.you .sx-bubble { background:#fff; border-bottom-left-radius:6px;
  box-shadow:0 18px 44px -34px rgba(0,0,0,0.4); }
.sx-turn.me .sx-bubble { background:var(--brand-deep); border-bottom-right-radius:6px; }
.sx-turn.you .sx-bubble b { display:block; font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:clamp(19px,2.1vw,24px); line-height:1.5; color:var(--ink); letter-spacing:-0.02em; }
.sx-turn.me .sx-bubble p { font-family:'Pretendard',sans-serif; margin:0;
  font-size:18.5px; line-height:1.8; color:#fff; }
.sx-turn.me .sx-bubble p strong { font-family:'Pretendard',sans-serif; color:#fff; font-weight:700;
  background:linear-gradient(transparent 62%, rgba(255,255,255,0.3) 62%); }

/* ════ 세로 단계 카드 (카드 안은 글 | 그림 가로 배치) ════ */
.sx-flow { margin:0 0 clamp(56px,6vw,80px); display:flex; flex-direction:column; align-items:stretch; }
.sx-flow-card { --sx-ch:clamp(200px,17.5vw,250px);
  display:grid; grid-template-columns:1fr clamp(150px,24vw,260px); gap:clamp(16px,3vw,36px);
  align-items:stretch; background:var(--brand-soft); border-radius:26px;
  padding:0 clamp(24px,3.6vw,48px); min-height:calc(var(--sx-ch) + 30px); }
.sx-sec.paper .sx-flow-card { background:#fff; box-shadow:0 22px 50px -38px rgba(0,0,0,0.42); }
.sx-flow-step { display:inline-block; font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:14px; letter-spacing:0.08em; color:#fff; background:var(--brand);
  border-radius:999px; padding:7px 16px 6px; margin-bottom:16px; }
.sx-flow-txt h3 { font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:clamp(22px,2.5vw,29px); line-height:1.36; letter-spacing:-0.03em;
  margin:0 0 12px; color:var(--ink); word-break:keep-all; }
.sx-flow-txt p { font-family:'Pretendard',sans-serif; margin:0; font-size:clamp(17px,1.7vw,19px);
  line-height:1.75; color:var(--body); word-break:keep-all; }
.sx-flow-txt { align-self:center; padding:clamp(24px,3.2vw,38px) 0; }
/* 모든 단계 캐릭터 같은 높이, 그림 칸 가운데 정렬 */
.sx-flow-pic { display:flex; align-items:center; justify-content:center; }
.sx-flow-pic img { height:var(--sx-ch); width:auto; max-width:100%; object-fit:contain; display:block; }
.sx-flow-arrow { align-self:center; position:relative; z-index:2; width:38px; height:38px; margin:-10px 0;
  border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -8px rgba(0,115,221,0.65); }
.sx-flow-arrow svg { width:21px; height:21px; }

/* ════ 보증 카드 (검정 섹션) ════ */
.sx-sec h2 + .sx-warr { margin-top:clamp(40px,4.6vw,56px); }
.sx-warr { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,24px); }
.sx-warr-card { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  border-radius:22px; padding:clamp(30px,3.4vw,42px); }
.sx-warr-card .who { display:inline-block; font-family:'Pretendard',sans-serif; font-size:15px;
  font-weight:700; color:#fff; background:var(--brand); border-radius:999px; padding:6px 16px;
  margin-bottom:22px; }
.sx-warr-card .big { display:block; font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:clamp(28px,3vw,40px); line-height:1.15; color:#8CC8FF; white-space:nowrap; letter-spacing:-0.035em;
  margin-bottom:14px; }
.sx-warr-card p { font-family:'Pretendard',sans-serif; margin:0; font-size:18.5px;
  line-height:1.8; color:rgba(255,255,255,0.8); word-break:keep-all; }
.sx-warr-card p strong { font-family:'Pretendard',sans-serif; color:#fff; font-weight:700; }

/* ════ F 사진 밴드 ════ */
.sx-band-one { border-radius:26px; overflow:hidden; aspect-ratio:21/9;
  box-shadow:0 34px 70px -40px rgba(0,0,0,0.4); }
.sx-band-one img { width:100%; height:100%; object-fit:cover; display:block; }
.sx-band-cap { font-family:'Pretendard',sans-serif; margin:18px 0 0;
  font-size:16.5px; color:var(--muted); word-break:keep-all; }

/* ════ H CTA ════ */
.sx-cta { background:var(--brand); padding:clamp(80px,9vw,120px) 0; text-align:center; }
.sx-cta-pic { width:clamp(170px,20vw,230px); margin:0 auto 26px; }
.sx-cta-pic img { width:100%; height:auto; display:block; }
.sx-cta h2 { font-family:'Gmarket Sans','Pretendard',sans-serif; font-weight:700;
  font-size:clamp(29px,3.7vw,48px); line-height:1.28; margin:0 0 18px; color:#fff;
  letter-spacing:-0.03em; word-break:keep-all; }
.sx-cta p { font-family:'Pretendard',sans-serif; font-size:clamp(18px,1.9vw,20px);
  line-height:1.75; color:rgba(255,255,255,0.9); margin:0 0 clamp(36px,4.2vw,50px); word-break:keep-all; }
.sx-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.sx-btns .b1 { display:inline-flex; align-items:center; gap:10px; background:#fff;
  color:var(--brand); font-family:'Pretendard',sans-serif; font-size:19px; font-weight:700;
  padding:19px 34px; border-radius:999px; text-decoration:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.35); transition:transform .22s; }
/* 두 버튼 같은 크기 */
.sx-btns .b1, .sx-btns .b2 { width:min(100%,270px); height:64px; justify-content:center; padding:0 24px;
  border:1.5px solid transparent; box-sizing:border-box; line-height:1.2; }
.sx-btns .b1 { border-color:#fff; }
.sx-btns .b2 { border-color:rgba(255,255,255,0.5); }
.sx-btns .b1:hover { transform:translateY(-2px); }
.sx-btns .b2 { display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.14); color:#fff; font-family:'Pretendard',sans-serif;
  font-size:19px; font-weight:600; padding:19px 32px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,0.5); text-decoration:none; transition:background .22s; }
.sx-btns .b2:hover { background:rgba(255,255,255,0.24); }
.sx-btns svg { width:20px; height:20px; flex:0 0 auto; }

/* ════ 반응형 ════ */
@media (max-width:820px) {
  .sx-hero-grid { grid-template-columns:1fr; gap:24px; }
  .sx-hero-shot { order:-1; }
  .sx-hero-shot { min-height:0; display:flex; justify-content:center; }
  .sx-hero-shot img { position:static; width:min(70%,280px); height:auto; }
  .sx-intro { grid-template-columns:1fr; gap:24px; }
  .sx-intro-pic { display:flex; justify-content:center; }
  .sx-intro-pic img { height:auto; width:min(80%,320px); max-width:100%; }
  .sx-head { grid-template-columns:1fr; }
  .sx-head-pic { width:150px; order:-1; }
  .sx-warr { grid-template-columns:1fr; }
  .sx-band-one { aspect-ratio:3/2; }
    .sx-who { width:42px; height:42px; font-size:11px; }
  .sx-bubble { max-width:calc(100% - 56px); }
  .sx-flow-card { --sx-ch:150px; grid-template-columns:1fr 120px; padding:0 18px 0 22px; gap:12px; border-radius:22px; min-height:180px; }
  .sx-flow-step { font-size:12.5px; padding:6px 13px 5px; margin-bottom:12px; }
  .sx-flow-txt h3 { font-size:20px; }
  .sx-flow-txt p { font-size:16.5px; }
}