/* Hallmark · v2.0.0 · redesign: full (/) + restyle (site) · theme: brand — (주)인서비스원 로고 주황 #F2672E · genre: modern-minimal · signature: 허가·등록 증서를 첫 화면 오른쪽에 · deal: manual (Node 없음) · copy: verbatim (h1·본문 문장 유지, 화살표만 제거) · 2026-10-26 design-preview */
/* critique: 내용은 정직하고 강했지만 모양이 템플릿이었다 — 등폭 머리말·세 가지 강조색·같은 상자의 반복을 걷어내고, 로고 주황 하나와 먹색으로 B2B 계약 상대의 단단함을 만든다 */
/* waive 44b·58: h1·리드 문장은 검색 유입 문구라 대표 승인 없이 줄이지 않는다 */

/* ── 토큰: site.css 의 변수만 덮어 전체 페이지에 반영한다 ── */
:root{
  --brand:#F2672E;        /* 로고 원색 — 장식선·어두운 바탕 강조 전용 (흰 바탕 대비 3.1) */
  --brand-ink:#B8430F;    /* 버튼·링크 (흰 바탕 5.5 / 회백 4.9) */
  --brand-ink-d:#9A380C;
  --brand-tint:#FBEDE5;

  --ink:#1C2024;
  --ink-70:#4D5560;
  --ink-50:#646B75;
  --ink-20:#C9CED4;
  --paper:#FFFFFF;
  --paper-2:#F6F3EF;
  --line:#E3DED7;

  --blue:var(--brand-ink);      /* 링크·구조선 → 주황 하나로 */
  --blue-d:var(--brand-ink-d);
  --go:var(--brand-ink);        /* 견적 CTA → 같은 주황 (주 버튼 한 가지) */
  --go-d:var(--brand-ink-d);
  --mark:var(--brand);

  --r:6px;
  --wrap:1160px;
  --fs-h1:clamp(30px,3.6vw,46px);
  --fs-h2:clamp(23px,2.6vw,31px);
}

html,body{overflow-x:clip}
::selection{background:var(--brand);color:var(--paper)}
a{text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brand-ink-d)}
:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px}

h1,h2,h3{font-weight:700}
h1{letter-spacing:-.035em;line-height:1.24}
h2{letter-spacing:-.03em}

/* ── 머리말(eyebrow) 제거: 제목이 스스로 말한다 ── */
.s-head .eyebrow,.hero .eyebrow{display:none}

/* 등폭 글꼴은 숫자·데이터에만. 라벨은 본문 글꼴로, 자간 없이 */
.answer .tag,.card .code,.nx-s,.nx-now,.rel-head,.staff-eyebrow,.sw-l,.fmap p,.cert .kind,.modal-head .eyebrow{
  font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px;font-weight:600}
.num,.tel,.cert .no,.fab-tel .fab-lb,footer .biz,table.t td.num,.sla-b table.t td.v{
  font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}

/* ── 헤더 ── */
header[role=banner]{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px)}
header .wrap{min-height:72px}
.logo img{height:36px}
header nav a{color:var(--ink-70)}
header nav a[aria-current=page],header .dd:has(.dd-menu a[aria-current=page]) .dd-top{box-shadow:inset 0 -2px 0 var(--brand)}
header nav a.nav-quote{background:var(--brand-ink);color:#fff}
header nav a.nav-quote:hover{background:var(--brand-ink-d);color:#fff}
.tel{font-weight:700;border-color:var(--line)}
.tel:hover{border-color:var(--ink)}

/* ── 버튼: 주 버튼 한 가지(주황), 보조는 먹색 선 ── */
.btn{border-radius:var(--r);transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.btn-main{background:var(--brand-ink)}
.btn-main:hover{background:var(--brand-ink-d)}
.btn-line{border-color:var(--ink-20)}
.btn-line:hover{background:var(--ink);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* ── 히어로: 왼쪽 약속, 오른쪽 허가 증서 ── */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--line);background:var(--paper)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{max-width:20ch;overflow-wrap:break-word;min-width:0}
.hero .lede{max-width:44ch}
.hero-certs{border-top:3px solid var(--brand);background:var(--paper-2);padding:22px 26px 18px;border-radius:0 0 var(--r) var(--r)}
.hero-certs h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.hero-certs .certs{display:block;list-style:none;margin:0;padding:0}
.hero-certs .cert{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;position:static}
.hero-certs .cert:first-child{border-top:0}
.hero-certs .kind{font-size:13px;font-weight:600;color:var(--ink-70);margin:0}
.hero-certs .no{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hero-certs .org{font-size:13px;color:var(--ink-50);margin:0}
.hero-certs .more{margin:12px 0 0;font-size:13px}
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-certs .no{font-size:17px}
}

/* ── 즉답 블록: 왼쪽 색띠 상자 → 위 선 한 줄 ── */
.answer{border:0;border-top:1px solid var(--ink);border-radius:0;background:none;padding:22px 0 0;margin:0 0 var(--sp-4);display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);column-gap:32px}
.answer .tag{color:var(--ink);font-size:15px;font-weight:700;margin:0;grid-row:span 2}
.answer p{max-width:68ch}
@media(max-width:760px){.answer{grid-template-columns:minmax(0,1fr)}.answer .tag{margin-bottom:8px}}

/* ── 허가 섹션(본문): 증서는 히어로로 옮기고, 남은 설명은 조용히 ── */
.cert::after{display:none}
.cert{border-radius:var(--r)}
.certs-note{color:var(--ink-70)}

/* ── 카드 반복 → 위 선으로 나눈 목록 ── */
.cards{gap:28px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{border:0;border-top:2px solid var(--ink);border-radius:0;background:none;padding:18px 0 0;transition:border-color .16s ease}
.card:hover{border-top-color:var(--brand)}
.card .code{color:var(--brand-ink);margin-bottom:6px}
.card b{font-size:19px;font-weight:700}
.card p{font-size:15px}
.card em{color:var(--brand-ink)}
.case-inquiry{gap:4px}
.case-inquiry-button{border:0;background:none;padding:6px 0;color:var(--brand-ink);font-size:14px}
.case-inquiry-button:hover{text-decoration:underline}

/* ── 다음 단계·관련 글 ── */
.nx{border-top:1px solid var(--ink)}
.nx-now{background:none;color:var(--ink);padding:0;margin-right:8px}
.nx-c{border:0;border-top:2px solid var(--ink);border-radius:0;background:none;padding:16px 0 0}
.nx-c:hover{background:none;border-top-color:var(--brand)}
.nx-s{color:var(--brand-ink)}
.nx-c em{color:var(--brand-ink)}
.rel{border-top:1px solid var(--ink)}
.rel-item{border-radius:0}

/* ── 섹션 바탕 ── */
section.alt{background:var(--paper-2);border-color:var(--line)}
.faq summary::after{font-family:var(--sans);color:var(--brand-ink)}

/* ── 마무리 띠: 먹색 위 로고 주황 한 줄 ── */
.cta{background:var(--ink);border-top:4px solid var(--brand)}
.cta p{color:#C9CED4}
.cta .btn-line{border-color:#5A626D}

/* ── 하단 고정 버튼 ── */
.fab-btn{background:var(--brand-ink);box-shadow:0 8px 22px rgba(184,67,15,.28)}
.fab-btn:hover{background:var(--brand-ink-d)}
.fab-check{border-color:var(--line);color:var(--ink)}
.fab-check:hover,.fab-check:focus-visible{border-color:var(--ink);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .btn,.card{transition:none}
  .btn:active{transform:none}
}

/* 서비스 다섯 개는 넓은 화면에서 한 줄로 (지게차가 혼자 아랫줄에 떨어지지 않게) */
#services .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}

/* 본문 현장 사진 (지게차 페이지 등, 2026-10-26) */
.page-photo{margin:0 0 var(--sp-4);max-width:880px}
.page-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--paper-2)}
.page-photo figcaption{margin-top:8px;font-size:14px;color:var(--ink-70)}

/* 서비스 사진 (대표 제공 앨범, 고객사 표시·식별 가능한 얼굴 없는 사진만, 2026-10-26) */
.card-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin:0 0 14px;background:var(--paper-2)}
.cards .card:has(.card-img){border-top:0;padding-top:0}
.cards .card:has(.card-img) b{padding-top:12px;border-top:2px solid var(--ink);transition:border-color .16s ease}
.cards .card:has(.card-img):hover b{border-top-color:var(--brand)}
@media (prefers-reduced-motion:reduce){.cards .card:has(.card-img) b{transition:none}}