/* [생성일] 2026-08-14
   [경위] 서브페이지 4장(회사소개·시공사례·간판종류·제작문의) 전용 스타일.
          공통 토큰·헤더·푸터·플로팅은 style.css를 그대로 쓰고, 여기에는 서브페이지 요소만 담는다.
   [변경이력]
     - 2026-08-14: 최초 생성 */

/* 현재 보고 있는 메뉴 표시 */
.hdr nav a.on{color:var(--lit)}

/* ══ 페이지 머리 배너 (메인 히어로보다 낮게) ══ */
.phead{position:relative;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--line)}
.phead .bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.phead::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,18,32,.72),rgba(11,18,32,.94))}
.phead .w{position:relative;z-index:2;padding:clamp(52px,7vw,88px) 22px clamp(44px,6vw,72px)}
.phead h1{font-size:clamp(28px,4.4vw,46px);font-weight:900;letter-spacing:-.05em;line-height:1.2;margin-top:12px}
.phead h1 em{font-style:normal;color:var(--lit);text-shadow:0 0 22px rgba(53,176,255,.45)}
.phead p{margin-top:14px;color:var(--tx2);font-size:clamp(14.5px,1.5vw,16.5px);max-width:640px}

/* 빵부스러기 */
.crumb{font-family:var(--m);font-size:11.5px;letter-spacing:.1em;color:var(--tx3)}
.crumb a:hover{color:var(--lit)}

/* ══ 약속 3가지 — 전원이 들어오는 세 가지 약속 (2026-08-14 리디자인) ══
   약속 세 개는 간판 일의 실제 순서다: 상담·디자인 → 제작·시공 → 달고 난 뒤.
   손님 불만 인용은 전부 "불이 꺼진 순간"의 이야기이므로 어둡게 두고,
   웰컴싸인의 약속 제목만 히어로와 같은 문법으로 점등시킨다.
   전선(레일)이 세 단계를 잇고, 섹션이 보이면 전원이 왼쪽부터 흐른다.
   카드 상자는 일부러 뺐다 — 페이지의 다른 섹션이 전부 상자라서, 여기만 연다. */
.vows-hero{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden}
.vows-hero .w{padding-top:clamp(64px,7vw,96px);padding-bottom:clamp(64px,7vw,96px)}
.vows-hero .lead{max-width:560px}

/* 레일 + 세 단계 */
.vh-wrap{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.5vw,52px);margin-top:46px}
/* 전선 — 바닥선과, 그 위를 흐르는 전류 */
.vh-wrap::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;
  background:var(--line)}
.vh-wrap::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--lit));
  box-shadow:0 0 14px rgba(53,176,255,.5);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.4,0,.2,1) .1s}
.vows-hero.on .vh-wrap::after{transform:scaleX(1)}

.vh{position:relative}
/* 접점(LED 모듈) — 전류가 지나가면 켜진다 */
.vh-node{position:relative;z-index:2;display:block;width:14px;height:14px;border-radius:50%;
  background:#0E1728;border:2px solid #35465F;box-sizing:border-box;
  transition:border-color .25s,background .25s,box-shadow .25s}
.vows-hero.on .vh:nth-child(1) .vh-node{transition-delay:.15s}
.vows-hero.on .vh:nth-child(2) .vh-node{transition-delay:.75s}
.vows-hero.on .vh:nth-child(3) .vh-node{transition-delay:1.35s}
.vows-hero.on .vh-node{background:var(--lit);border-color:var(--lit);
  box-shadow:0 0 10px rgba(127,216,255,.8),0 0 26px rgba(30,130,255,.45)}

/* 단계 이름 — 번호 대신 실제 일의 순서 */
.vh-stage{display:block;margin-top:16px;font-family:var(--m);font-size:11.5px;
  letter-spacing:.18em;color:var(--tx3)}

/* 손님 불만 — 꺼진 채로 둔다 */
.vh-q{margin:18px 0 0;font-size:14px;color:var(--tx3);line-height:1.65}

/* 약속 제목 — 점등된다 */
.vh-t{margin:10px 0 0;font-size:clamp(21px,2.2vw,26px);font-weight:900;
  letter-spacing:-.045em;line-height:1.3;color:#1D2B44}
.vows-hero.on .vh:nth-child(1) .vh-t{animation:vhIgnite .95s steps(1,end) .25s both}
.vows-hero.on .vh:nth-child(2) .vh-t{animation:vhIgnite .95s steps(1,end) .85s both}
.vows-hero.on .vh:nth-child(3) .vh-t{animation:vhIgnite .95s steps(1,end) 1.45s both}
@keyframes vhIgnite{
  0%{color:#1D2B44;text-shadow:none}
  14%{color:#EAF7FF;text-shadow:0 0 6px rgba(96,190,255,.85),0 0 20px rgba(30,130,255,.5)}
  26%{color:#22314E;text-shadow:none}
  40%{color:#EAF7FF;text-shadow:0 0 6px rgba(96,190,255,.85),0 0 20px rgba(30,130,255,.5)}
  52%{color:#27395A}
  64%,100%{color:#EAF7FF;text-shadow:0 0 6px rgba(96,190,255,.85),0 0 20px rgba(30,130,255,.5)}
}

.vh-b{margin:16px 0 0;font-size:14.5px;color:var(--tx2);line-height:1.78}
.vh-b b{color:var(--tx)}

/* 모바일 — 전선이 왼쪽 세로 배선으로 바뀐다 */
@media (max-width:1000px){
  .vh-wrap{grid-template-columns:1fr;gap:40px}
  .vh-wrap::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .vh-wrap::after{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto;
    transform:scaleY(0);transform-origin:top center}
  .vows-hero.on .vh-wrap::after{transform:scaleY(1)}
  .vh{padding-left:32px}
  .vh-node{position:absolute;left:0;top:0}
  .vh-stage{margin-top:0}
}

/* 모션 줄이기 — 전부 켜진 상태로 고정 */
@media (prefers-reduced-motion:reduce){
  .vh-wrap::after{transform:none!important;transition:none!important}
  .vh-node{background:var(--lit)!important;border-color:var(--lit)!important;transition:none!important}
  .vh-t{color:#EAF7FF!important;animation:none!important;
    text-shadow:0 0 6px rgba(96,190,255,.85),0 0 20px rgba(30,130,255,.5)}
}

/* ══ 숫자 띠 ══ */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fact{background:var(--bg2);padding:26px 20px;text-align:center}
.fact b{display:block;font-size:clamp(23px,3vw,33px);font-weight:900;letter-spacing:-.04em;
  color:var(--lit);text-shadow:0 0 20px rgba(53,176,255,.35)}
.fact span{display:block;margin-top:8px;font-size:13px;color:var(--tx2)}

/* ══ 사진+글 2단 ══ */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:center;margin-top:44px}
.duo figure{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#111A2C}
.duo figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duo h3{font-size:clamp(20px,2.4vw,27px);font-weight:900;letter-spacing:-.045em;line-height:1.3}
.duo p{margin-top:16px;color:var(--tx2);font-size:15px;line-height:1.78}
.duo p + p{margin-top:12px}

/* ══ 회사 정보 표 ══ */
.biztable{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px}
.biztable th,.biztable td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.biztable th{width:170px;color:var(--tx3);font-weight:600;white-space:nowrap;font-size:13.5px}
.biztable td{color:var(--tx)}

/* ══ 간판 종류 카드 ══ */
.kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:38px}
.kind-card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s,border-color .22s,box-shadow .25s}
.kind-card:hover{transform:translateY(-4px);border-color:#3F587E;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.kind-card .ph{aspect-ratio:16/9;overflow:hidden;background:#111A2C}
.kind-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kind-card:hover .ph img{transform:scale(1.04)}
.kind-card .body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.kind-card h3{font-size:20px;font-weight:800;letter-spacing:-.04em}
.kind-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kind-card .tags span{font-family:var(--m);font-size:11px;padding:5px 10px;border-radius:3px;
  background:#1B2942;border:1px solid #2E3F5C;color:var(--tx2)}
.kind-card p{margin-top:14px;font-size:14px;color:var(--tx2);line-height:1.72}
.kind-card .tip{margin-top:auto;padding-top:16px;font-size:13px;color:var(--tx3);line-height:1.65}
.kind-card .tip b{color:var(--lit);font-weight:700}

/* ══ 최근 시공 목록 (블로그 실적) ══ */
.loglist{margin-top:30px;border-top:1px solid var(--line)}
.logrow{display:grid;grid-template-columns:104px 172px 1fr;gap:16px;align-items:baseline;
  padding:14px 4px;border-bottom:1px solid #1F2B42;font-size:14.5px}
.logrow .d{font-family:var(--m);font-size:12.5px;color:var(--tx3)}
.logrow .a{font-weight:700;color:var(--tx)}
.logrow .k{color:var(--tx2);font-size:13.5px}

/* ══ 문의 폼 ══ */
.formwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);margin-top:40px}
.frm{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:clamp(24px,3vw,34px)}
.frm .row{margin-bottom:18px}
.frm .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frm label{display:block;font-size:13.5px;font-weight:700;color:var(--tx2);margin-bottom:8px}
.frm label i{font-style:normal;color:#FF8A8A;margin-left:3px}
.frm input,.frm select,.frm textarea{width:100%;background:#0E1728;border:1px solid #2E3F5C;
  border-radius:5px;padding:13px 14px;color:var(--tx);font-family:var(--f);font-size:14.5px;
  transition:border-color .18s,box-shadow .18s}
.frm textarea{min-height:132px;resize:vertical;line-height:1.7}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--lit);
  box-shadow:0 0 0 3px rgba(127,216,255,.14)}
.frm input::placeholder,.frm textarea::placeholder{color:#5B7092}
.frm .agree{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--tx2);line-height:1.6}
.frm .agree input{width:auto;margin-top:3px}
.frm .submit{width:100%;margin-top:20px;padding:16px;border:none;border-radius:6px;
  background:var(--blue);color:#fff;font-family:var(--f);font-size:16px;font-weight:800;
  letter-spacing:-.02em;cursor:pointer;transition:transform .18s,box-shadow .25s}
.frm .submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(29,111,224,.4)}
.frm .note{margin-top:14px;font-size:12.5px;color:var(--tx3);line-height:1.65}

/* 문의 사이드 */
.side .box{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px 22px;margin-bottom:16px}
.side .box h3{font-size:16px;font-weight:800;letter-spacing:-.03em}
.side .box .big{display:block;margin-top:12px;font-family:var(--m);font-size:23px;font-weight:700;
  letter-spacing:-.02em;color:var(--lit)}
.side .box p{margin-top:10px;font-size:13.5px;color:var(--tx2);line-height:1.7}
.side .quick{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.side .quick a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
  border-radius:6px;font-weight:800;font-size:15px;transition:transform .18s}
.side .quick a:hover{transform:translateY(-2px)}
.side .quick .k{background:#FEE500;color:#191600}
.side .quick .t{background:#fff;color:#0B1220}
.side .map{aspect-ratio:4/3;border-radius:8px;border:1px dashed #3A4F70;
  background:repeating-linear-gradient(135deg,#16213A,#16213A 10px,#121B2F 10px,#121B2F 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--tx3);font-size:13.5px;text-align:center;padding:20px}
.side .map b{color:var(--tx2);font-size:14.5px}

/* ══ FAQ ══ */
.faq{margin-top:38px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 40px 20px 2px;font-size:16px;font-weight:700;letter-spacing:-.03em;
  cursor:pointer;position:relative;list-style:none;transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--m);font-size:19px;color:var(--tx3);transition:color .2s}
.faq details[open] summary{color:var(--lit)}
.faq details[open] summary::after{content:"−";color:var(--lit)}
.faq summary:hover{color:var(--lit)}
.faq .ans{padding:0 4px 22px;font-size:14.5px;color:var(--tx2);line-height:1.82}

/* ══ 서브페이지 반응형 ══ */
@media (max-width:1000px){
  .vows{grid-template-columns:1fr;gap:14px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr;gap:24px}
  .kinds{grid-template-columns:1fr}
  .formwrap{grid-template-columns:1fr}
}
@media (max-width:620px){
  .logrow{grid-template-columns:1fr;gap:4px;padding:14px 2px}
  .logrow .d{font-size:12px}
  .frm .row2{grid-template-columns:1fr}
  .biztable th{width:104px;font-size:12.5px;padding:12px 10px 12px 0}
  .biztable td{padding:12px 0}
}

/* ══ 문의 폼 추가 요소 (2026-08-14 고객 요청) ══ */
/* 사이즈 알고 있는지 고르는 라디오 */
.frm .wcs-radio{display:flex;flex-wrap:wrap;gap:10px}
.frm .wcs-radio label{display:flex;align-items:center;gap:8px;margin:0;flex:1;min-width:180px;
  padding:13px 15px;background:#0E1728;border:1px solid #2E3F5C;border-radius:5px;
  font-size:14px;font-weight:600;color:var(--tx2);cursor:pointer;transition:border-color .18s,color .18s}
.frm .wcs-radio label:hover{border-color:#4A628C;color:var(--tx)}
.frm .wcs-radio input{width:auto;margin:0;accent-color:var(--blue)}
.frm .wcs-radio input:checked + *,
.frm .wcs-radio label:has(input:checked){border-color:var(--lit);color:var(--tx)}

/* 파일 첨부 */
.frm input[type="file"]{padding:11px 14px;font-size:13.5px;color:var(--tx2);cursor:pointer}
.frm input[type="file"]::file-selector-button{margin-right:12px;padding:8px 14px;border:none;
  border-radius:4px;background:var(--blue);color:#fff;font-family:var(--f);font-size:13px;
  font-weight:700;cursor:pointer}
.frm .hint{margin-top:9px;font-size:12.5px;color:var(--tx3);line-height:1.65}
.frm .hint b{color:var(--tx2)}
.frm .row[hidden]{display:none}

/* "선택" 배지 */
.frm label .opt{margin-left:6px;padding:2px 7px;border-radius:3px;background:#1B2942;
  border:1px solid #2E3F5C;color:var(--tx3);font-size:11px;font-weight:600;letter-spacing:0}

/* (2026-08-14) 강조판 카드(.vows-big) 스타일은 리디자인으로 대체되어 제거했다.
   현재 약속 섹션 스타일은 파일 상단의 ".vows-hero / .vh-*" 블록이 정본이다. */