/* ===========================================================
   KTST 컨설팅 서비스 페이지 — 공용 스타일
   유해위험방지계획서 / PSM / 자율안전점검 3개 페이지 공용
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#161c2b;
  --ink-soft:#586074;
  --paper:#f3f2ee;
  --surface:#ffffff;
  --line:#dcdad2;
  --line-strong:#c3c0b4;
  --accent:#a8842e;      /* KTST 골드 계열을 어둡게 눌러 텍스트에도 쓸 수 있게 */
  --accent-soft:#f2e9d3;
  --navy:#161f36;         /* KTST 네이비 브랜드 컬러 */
  --safe:#2c6b4c;
  --safe-soft:#e2efe6;
  --alert:#9c3a2b;
  --alert-soft:#f5e2de;
  --shadow:0 1px 2px rgba(22,28,43,.06), 0 10px 28px rgba(22,28,43,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.csvc{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans KR","Noto Sans KR",sans-serif;
  font-size:15.5px;line-height:1.7;letter-spacing:-.01em;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.csvc h1,.csvc h2,.csvc h3{font-family:"Gowun Batang","Noto Serif KR",serif;margin:0;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.csvc a{color:var(--accent)}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}

/* ---------- 상단 고정바 (기존 사이트로 복귀) ---------- */
/* 상단바는 css/backbar.css 공용 스타일을 사용합니다 (여기서 중복 정의하지 않음) */

/* ---------- 히어로 ---------- */
.chero{padding:52px 0 34px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.chero h1{font-size:32px;font-weight:700;margin-top:10px}
.chero p.lede{margin:14px 0 0;color:var(--ink-soft);max-width:64ch;font-size:15px}

/* ---------- OVERVIEW 스탯 배지 ---------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:26px}
.statchip{border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:13px 15px}
.statchip .k{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.statchip .v{font-size:16px;font-weight:700;margin-top:3px}

/* ---------- 섹션 공통 ---------- */
.csec{padding:52px 0;border-bottom:1px solid var(--line)}
.csec:last-of-type{border-bottom:none}
.csec--tint{background:var(--surface)}
.chead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:6px}
.chead h2{font-size:21px}
.chead .basis{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);white-space:nowrap}
.csub{color:var(--ink-soft);font-size:13.5px;margin:6px 0 26px;max-width:68ch}

/* ---------- 이유/체크 리스트 (하이라인 분할, 박스 남발 금지) ---------- */
.reasonlist{display:flex;flex-direction:column}
.reason{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.reason:first-child{border-top:none}
.reason .n{font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:13px;padding-top:1px}
.reason b{display:block;margin-bottom:3px;font-size:14.5px}
.reason p{margin:0;color:var(--ink-soft);font-size:13.5px}

/* ---------- PROCESS steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;counter-reset:st}
.step{background:var(--surface);padding:20px 18px}
.step .stepno{counter-increment:st;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent)}
.step .stepno::before{content:"0" counter(st)}
.step h4{font-family:"IBM Plex Sans KR",sans-serif;font-size:14px;font-weight:700;margin:8px 0 5px}
.step p{margin:0;font-size:12.5px;color:var(--ink-soft)}

/* ---------- 4/6분야 카드 (bento 아님 — 얇은 테두리+좌측 라벨) ---------- */
.domaingrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.domain{background:var(--surface);padding:20px}
.domain .tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:3px;margin-bottom:8px}
.domain h4{font-family:"IBM Plex Sans KR",sans-serif;font-size:14.5px;font-weight:700;margin-bottom:6px}
.domain p{margin:0;font-size:12.8px;color:var(--ink-soft);line-height:1.65}

/* ---------- 표 (판정기준/처벌 등) ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table.ctable{width:100%;border-collapse:collapse;font-size:13px}
.ctable th,.ctable td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ctable thead th{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ctable tbody tr:last-child td{border-bottom:none}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:100px}
.pill.ok{background:var(--safe-soft);color:var(--safe)}
.pill.warn{background:var(--accent-soft);color:var(--accent)}
.pill.bad{background:var(--alert-soft);color:var(--alert)}

/* ---------- 결과물 태그 리스트 ---------- */
.delivlist{display:flex;flex-direction:column}
.deliv{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:13.5px}
.deliv:first-child{border-top:none}
.deliv .when{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:3px 6px;height:fit-content;text-align:center}
.deliv b{display:block;margin-bottom:2px}
.deliv span.d{color:var(--ink-soft)}

/* ---------- 포지셔닝 노트 (자체+협력) ---------- */
.posnote{margin-top:18px;padding:14px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:13px;color:var(--ink)}

/* ---------- 비용 ---------- */
.costbox{border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:26px;box-shadow:var(--shadow)}
.costbox .headline{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.costbox .figure{font-size:15px;font-weight:700;margin-top:6px}

/* ---------- CTA ---------- */
.ccta{border:1px solid var(--navy);border-radius:6px;background:var(--navy);color:#fff;padding:clamp(32px,5vw,52px);text-align:center}
.ccta h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.ccta p{margin:12px auto 0;color:#c7cee0;max-width:52ch;font-size:14px}
.ccta .btnrow{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 20px;border-radius:5px;font-size:13.5px;font-weight:700;text-decoration:none;transition:transform .1s}
.btn:active{transform:scale(.98)}
.btn--gold{background:linear-gradient(135deg,#d9bd7c,var(--accent));color:#241d0c}
.btn--outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}

.cfooter{padding:28px 0 48px;font-size:11.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}

/* ---------- 자가진단 위젯 ---------- */
.checktool{border:1px solid var(--line);border-radius:6px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;margin:32px 0 8px}
.checktool__head{padding:18px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.checktool__head b{font-family:"Gowun Batang",serif;font-size:16px}
.checktool__head span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.checktool__body{display:grid;grid-template-columns:1.1fr .9fr}
@media (max-width:680px){.checktool__body{grid-template-columns:1fr}}
.checktool__inputs{padding:22px 24px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--line)}
@media (max-width:680px){.checktool__inputs{border-right:none;border-bottom:1px solid var(--line)}}
.ctfield label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.ctfield select,.ctfield input[type="number"]{width:100%;padding:9px 10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--paper);color:var(--ink);font:inherit;font-size:13.5px}
.ctcheck{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.ctcheck input{margin-top:3px;accent-color:var(--accent)}
.checktool__result{padding:22px 24px;background:var(--paper);display:flex;flex-direction:column;gap:12px;justify-content:center}
.ctverdict{font-family:"Gowun Batang",serif;font-size:19px;font-weight:700}
.ctverdict.yes{color:var(--alert)}
.ctverdict.no{color:var(--safe)}
.ctverdict.unknown{color:var(--ink-soft)}
.ctdetail{font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.ctnote{font-size:11px;color:var(--ink-soft);border-top:1px dashed var(--line-strong);padding-top:10px}
.checktool__result .btn{align-self:flex-start;margin-top:2px}

/* ---------- FAQ (details/summary, JS 불필요) ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faqitem{border-bottom:1px solid var(--line)}
.faqitem summary{list-style:none;display:flex;align-items:baseline;gap:12px;padding:16px 2px;cursor:pointer;font-size:14.5px;font-weight:600}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::before{content:"Q";flex:none;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:100px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.faqitem[open] summary::before{background:var(--accent);color:#fff}
.faqitem .faqbody{margin:0 0 18px 32px;color:var(--ink-soft);font-size:13.5px;line-height:1.7;max-width:66ch}

/* ---------- 랜딩페이지 전용 (광고 유입, GNB 없음) ---------- */
.lp-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.lp-header__brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.lp-header__brand img{height:24px}
.lp-header__brand b{font-family:"Gowun Batang",serif;font-size:13.5px}
.lp-header__tel{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;color:#fff;background:var(--navy);padding:9px 16px;border-radius:100px;text-decoration:none;white-space:nowrap}

.btn--phone{background:var(--navy);color:#fff}
.btn--line{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}

body.lp{padding-bottom:66px}
.lp-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 -6px 20px rgba(22,28,43,.14)}
.lp-stickybar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:16px;font-weight:700;font-size:14px;text-decoration:none}
.lp-stickybar a:first-child{background:var(--navy);color:#fff}
.lp-stickybar a:last-child{background:var(--accent);color:#fff}

.lp-form{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:24px;box-shadow:var(--shadow)}
.lp-form .field{margin-bottom:14px}
.lp-form label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.lp-form input,.lp-form select,.lp-form textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line-strong);border-radius:5px;font:inherit;font-size:14px;background:#fff;box-sizing:border-box}
.lp-form textarea{min-height:90px;resize:vertical}
.lp-form button{width:100%;padding:14px;border:0;border-radius:6px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.lp-form__msg{margin-top:10px;font-size:12.5px;color:var(--safe);display:none}

@media (max-width:640px){
  .chero h1{font-size:26px}
}