/* VISION-PARTS — components.css
 * 시안 A(draft/index-a.html)의 인라인 CSS 에서 그대로 추출.
 * 규칙을 고치지 말 것. 수정이 필요하면 시안과 픽셀 diff 를 다시 돌릴 것.
 * 로드 순서: core -> components -> home|page
 */

/* ---------- counters ---------- */
.counters{position:relative;z-index:5;margin-top:-96px}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.counter-card{background:rgba(10,24,48,.66);border:1px solid rgba(0,194,255,.2);border-radius:var(--radius);padding:30px 26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(6,13,31,.45);text-align:center;transition:.3s}
.counter-card:hover{transform:translateY(-6px);border-color:rgba(0,194,255,.55)}
.counter-num{font-family:var(--mono);font-size:clamp(30px,3vw,44px);font-weight:800;color:#fff;letter-spacing:-.02em}
.counter-num em{font-style:normal;color:var(--cyan);font-size:.62em;margin-left:2px}
.counter-label{margin-top:8px;color:#9FB3D4;font-size:14.5px;font-weight:600}

/* ---------- about + checklist ---------- */
.about{padding:130px 0 110px}
.about-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.about-txt .sec-desc{margin-bottom:8px}
.about-brand{font-weight:700;color:var(--navy-800)}
.chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:34px}
.chip{display:flex;align-items:center;gap:11px;background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:13px 16px;font-size:15px;font-weight:600;color:#243041;transition:.25s}
.chip:hover{border-color:var(--cyan);background:#EDF9FF;transform:translateX(4px)}
.chip svg{width:19px;height:19px;color:var(--cyan);flex-shrink:0}
.about-visual{position:relative}
.about-visual .main-img{border-radius:24px;box-shadow:var(--shadow-lg);width:100%;height:520px;object-fit:cover}
.about-float{position:absolute;left:-38px;bottom:36px;background:var(--navy-900);color:#fff;border-radius:18px;padding:22px 26px;box-shadow:0 18px 44px rgba(6,13,31,.35);border:1px solid rgba(0,194,255,.25)}
.about-float .num{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--cyan)}
.about-float .txt{font-size:13.5px;color:#AFC2E0;margin-top:3px}

/* ---------- category cards ---------- */
.items{padding:110px 0;background:var(--bg-soft)}
.items-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{position:relative;border-radius:20px;overflow:hidden;height:380px;box-shadow:0 10px 30px rgba(6,13,31,.10);cursor:pointer}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.cat-card:hover img{transform:scale(1.09)}
.cat-card .grad{position:absolute;inset:0;background:linear-gradient(185deg,rgba(6,13,31,.06) 30%,rgba(6,13,31,.62) 62%,rgba(6,13,31,.94) 100%);transition:.4s}
.cat-card:hover .grad{background:linear-gradient(185deg,rgba(11,31,58,.32) 12%,rgba(6,13,31,.78) 55%,rgba(6,13,31,.97) 100%)}
.cat-body{position:absolute;inset:auto 0 0 0;padding:26px 26px 24px;color:#fff}
.cat-no{font-family:var(--mono);font-size:13px;color:var(--cyan);letter-spacing:.2em;font-weight:700}
.cat-title{font-size:22.5px;font-weight:800;margin:7px 0 10px;letter-spacing:-.01em}
.cat-tags{display:flex;flex-wrap:wrap;gap:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .5s ease}
.cat-card:hover .cat-tags{max-height:120px;opacity:1}
.cat-tags span{font-size:12px;background:rgba(0,194,255,.14);border:1px solid rgba(0,194,255,.35);color:#BDEBFF;border-radius:20px;padding:3px 10px;font-weight:600}
.cat-cta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--cyan)}

/* ---------- why us ---------- */
.why{padding:120px 0;background:var(--navy-950);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;background:url("/assets/img/px_dark_board.webp") center/cover no-repeat;opacity:.14}
.why::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,31,.6),rgba(6,13,31,.92))}
.why .container{position:relative;z-index:2}
.why .sec-title{color:#fff}
.why .sec-desc{color:#9FB3D4}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:56px}
.why-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 22px;transition:.3s}
.why-card:hover{background:rgba(0,194,255,.08);border-color:rgba(0,194,255,.45);transform:translateY(-6px)}
.why-ico{width:52px;height:52px;border-radius:14px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 24px rgba(0,150,255,.35)}
.why-ico svg{width:26px;height:26px;color:#fff}
.why-card h3{color:#fff;font-size:17.5px;font-weight:800;margin-bottom:9px;letter-spacing:-.01em}
.why-card p{color:#9FB3D4;font-size:13.8px;line-height:1.65}

/* ---------- process ---------- */
.process{padding:120px 0}
.step-track{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:58px;position:relative}
.step-track::before{content:"";position:absolute;top:34px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));opacity:.25}
.step{position:relative;text-align:center;padding:0 6px}
.step-no{width:68px;height:68px;margin:0 auto;border-radius:50%;background:var(--white);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:21px;font-weight:800;color:var(--navy-800);position:relative;z-index:2;transition:.3s}
.step:hover .step-no{border-color:var(--cyan);background:var(--navy-900);color:var(--cyan);box-shadow:0 0 0 8px rgba(0,194,255,.12)}
.step h3{font-size:16.5px;font-weight:800;margin:18px 0 7px}
.step p{font-size:13.2px;color:var(--gray);line-height:1.6}
.step .note{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--blue);background:#EDF3FF;border:1px solid #D7E4FF;padding:3px 10px;border-radius:20px}

/* ---------- gallery marquee ---------- */
.gallery{padding:110px 0 90px;background:var(--bg-soft);overflow:hidden}
.marquee{display:flex;gap:16px;width:max-content;animation:mq 38s linear infinite;margin-top:14px}
.marquee.rev{animation:mqR 42s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.g-tile{width:250px;height:190px;border-radius:16px;overflow:hidden;flex-shrink:0;box-shadow:0 8px 22px rgba(6,13,31,.10)}
.g-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.g-tile:hover img{transform:scale(1.08)}

/* ---------- brands ---------- */
.brands{padding:110px 0;overflow:hidden}
.brands .sec-head{text-align:center;margin-bottom:48px}
.brands .sec-desc{margin:0 auto}
.b-marquee{display:flex;gap:14px;width:max-content;animation:mq 55s linear infinite}
.b-marquee:hover{animation-play-state:paused}
.b-item{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 26px 13px;flex-shrink:0;min-width:180px;transition:.25s}
.b-item:hover{border-color:var(--cyan);box-shadow:0 10px 26px rgba(0,150,255,.12)}
.b-item img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:.25s}
.b-item:hover img{filter:none;opacity:1}
.b-item span{font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:.04em}

/* ---------- reviews + case ---------- */
.reviews{padding:110px 0;background:var(--bg-soft)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.r-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:.3s}
.r-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(0,194,255,.4)}
.r-stars{color:#FFB800;font-size:15px;letter-spacing:2px}
.r-quote{font-size:16.5px;font-weight:700;margin:14px 0 10px;letter-spacing:-.01em}
.r-body{font-size:14px;color:var(--gray);line-height:1.7}
.r-meta{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.r-avatar{width:40px;height:40px;border-radius:50%;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.r-meta .who{font-size:13.5px;font-weight:700}
.r-meta .item{font-size:12px;color:var(--gray);font-family:var(--mono)}
.case-banner{margin-top:26px;position:relative;border-radius:22px;overflow:hidden;isolation:isolate}
.case-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.case-banner .ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,13,31,.95) 34%,rgba(11,31,58,.72) 66%,rgba(11,31,58,.42));z-index:-1}
.case-inner{padding:52px 56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.case-inner .eyebrow{color:var(--cyan)}
.case-inner h3{font-size:clamp(20px,2.2vw,28px);font-weight:800;margin-top:12px;line-height:1.4}
.case-inner p{color:#B9C9E4;font-size:14.5px;margin-top:10px;max-width:560px}
.case-stat{display:flex;gap:36px;flex-shrink:0}
.case-stat .cs{text-align:center}
.case-stat .n{font-family:var(--mono);font-size:36px;font-weight:800;color:var(--cyan)}
.case-stat .t{font-size:12.5px;color:#9FB3D4;margin-top:4px}

/* ---------- contact ---------- */
.contact{padding:130px 0;background:var(--navy-950);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:url("/assets/img/px_section_macro.webp") center/cover no-repeat;opacity:.12}
.contact::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,31,.82),rgba(6,13,31,.95))}
.contact .container{position:relative;z-index:2}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.contact .sec-title{color:#fff}
.contact .sec-desc{color:#9FB3D4}
.need-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.need-chips span{font-family:var(--mono);font-size:13px;color:#BDEBFF;background:rgba(0,194,255,.1);border:1px solid rgba(0,194,255,.32);padding:7px 15px;border-radius:22px;font-weight:600}
.contact-info{margin-top:42px;display:grid;gap:14px}
.ci{display:flex;align-items:center;gap:14px;color:#D6E3F8;font-size:15px}
.ci svg{width:20px;height:20px;color:var(--cyan);flex-shrink:0}
.ci b{font-family:var(--mono);font-size:17px;color:#fff;letter-spacing:.02em}
.form-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:44px 42px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.form-card h3{color:#fff;font-size:22px;font-weight:800;margin-bottom:6px}
.form-card .fc-sub{color:#9FB3D4;font-size:13.8px;margin-bottom:28px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field.full{grid-column:1/-1}
.f-field label{color:#BFD0EA;font-size:13px;font-weight:700}
.f-field label em{color:var(--cyan);font-style:normal}
.f-field input,.f-field select,.f-field textarea{background:rgba(6,13,31,.5);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 16px;color:#fff;font-size:14.5px;font-family:inherit;outline:none;transition:.25s;width:100%}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,194,255,.15)}
.f-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300C2FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.f-field select option{color:#111;background:#fff}
.f-field textarea{min-height:96px;resize:vertical}
.f-attach{border:1.5px dashed rgba(0,194,255,.4);border-radius:12px;padding:18px;text-align:center;color:#9FB3D4;font-size:13.5px;cursor:pointer;transition:.25s;background:rgba(0,194,255,.04)}
.f-attach:hover{border-color:var(--cyan);background:rgba(0,194,255,.09)}
.f-attach b{color:var(--cyan)}
.f-agree{display:flex;align-items:center;gap:9px;color:#9FB3D4;font-size:12.8px;margin:16px 0 22px}
.f-agree input{width:16px;height:16px;accent-color:var(--cyan)}
.form-card .btn-primary{width:100%;justify-content:center;font-size:16.5px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .counter-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .step-track{grid-template-columns:repeat(3,1fr);gap:26px 14px}
  .step-track::before{display:none}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .about-visual .main-img{height:420px}
  .review-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .counters{margin-top:-70px}
  .counter-card{padding:22px 14px}
  .about{padding:100px 0 80px}
  .chip-grid{grid-template-columns:1fr}
  .about-float{left:12px;bottom:16px;padding:16px 20px}
  .about-visual .main-img{height:330px}
  .cat-grid{grid-template-columns:1fr}
  .cat-card{height:300px}
  .why-grid{grid-template-columns:1fr 1fr;gap:12px}
  .step-track{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .case-inner{padding:34px 28px}
  .form-card{padding:32px 24px}
  .f-row{grid-template-columns:1fr}
}

/* ---------- 운영 보강 (시안 외형 불변) ---------- */

/* 마퀴 일시정지 — :hover 규칙 '뒤'에 있어야 특이도 동점에서 이긴다 */
.marquee.paused,.b-marquee.paused{animation-play-state:paused}

/* 서브페이지 하단 CTA 로 case-banner 를 재활용할 때의 버튼 묶음 */
.case-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}

@media (hover:none){
  /* 시안은 hover 로만 열려 터치 기기에서 세부 품목 태그가 통째로 안 보였다 */
  .cat-tags{max-height:120px;opacity:1}
  .cat-card .grad{background:linear-gradient(185deg,rgba(11,31,58,.32) 12%,rgba(6,13,31,.78) 55%,rgba(6,13,31,.97) 100%)}
}
@media (hover:none) and (max-width:768px){
  .cat-card{height:340px}
}
@media (prefers-reduced-motion:reduce){
  .marquee,.b-marquee{animation:none}
}