/* 이 파일의 규칙은 모두 #p-<화면이름> 안쪽에만 걸립니다.
   접두사를 떼면 특이도가 낮아져 base.css 의 반응형 규칙을 덮어쓰게 되므로 그대로 둡니다. */
#p-solution h1, #p-solution h2, #p-solution h3, #p-solution h4{margin:0;font-weight:700;line-height:.95;color:var(--ink)}
#p-solution p{margin:0}
#p-solution :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#p-solution .display-xl{font-size:clamp(32px, 20.4px + 3.09vw, 56px);font-weight:700;line-height:1.2}
#p-solution .display-lg{font-size:clamp(26px, 19.2px + 1.80vw, 40px);font-weight:700;line-height:1}
#p-solution .display-md{font-size:clamp(22px, 17.2px + 1.29vw, 32px);font-weight:700;line-height:1}
#p-solution .heading-lg{font-size:24px;font-weight:700;line-height:.95}
#p-solution .subtitle{font-size:19.2px;font-weight:600;line-height:1.3}
#p-solution .body-lg{font-size:18px;line-height:1.5}
#p-solution .body-md{font-size:16px;line-height:1.4}
#p-solution .body-sm{font-size:14px;line-height:1.57}
#p-solution .caption{font-size:12px;line-height:1.4}
#p-solution .overline{font-size:12px;font-weight:700;line-height:1.45;letter-spacing:0}
#p-solution  
.band{padding:var(--s-section) 64px}
#p-solution .band.light{background:var(--canvas)}
#p-solution .band.soft{background:var(--surface-soft)}
#p-solution .band.dark{background:var(--surface-dark);color:var(--on-dark)}
#p-solution .band.dark h1, #p-solution .band.dark h2, #p-solution .band.dark h3{color:var(--on-dark)}
#p-solution .inner{max-width:1152px;margin:0 auto}
@media(max-width:900px){#p-solution .band{padding:96px 24px}}
#p-solution .btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.144px;line-height:1;
  padding:14px 24px;border-radius:var(--r-xs);border:1px solid transparent;min-height:50px}
#p-solution .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#p-solution .band.dark .btn-primary{background:var(--accent-on-dark);color:var(--ink);border-color:var(--accent-on-dark)}
#p-solution .btn-outline-dark{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong);padding:13px 23px}
#p-solution .btn-outline-light{background:var(--surface-dark);color:var(--on-dark);border-color:var(--on-dark);padding:13px 23px}
#p-solution .btns{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
#p-solution .more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
#p-solution .band.dark .more{color:var(--on-dark);border-bottom-color:var(--on-dark)}
#p-solution  
.hero{background:var(--surface-dark);color:var(--on-dark);padding:var(--s-section) 64px}
#p-solution .hero .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-xxxl)}
#p-solution .hero .stack{display:flex;flex-direction:column;align-items:center;gap:var(--s-lg)}
#p-solution .hero h1{color:var(--on-dark);max-width:18ch}
#p-solution .hero .subtitle{color:var(--on-dark-mute);max-width:46ch}
@media(max-width:900px){#p-solution .hero{padding:96px 24px}}
#p-solution  
.filmband{background:var(--surface-dark);padding:0 64px var(--s-section)}
@media(max-width:900px){#p-solution .filmband{padding:0 24px 96px}}
#p-solution .film{max-width:1152px;margin:0 auto;height:542px;background:var(--surface-deep);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-lg)}
@media(max-width:900px){#p-solution .film{height:340px}}
#p-solution .film .lb{font-size:11px;color:rgba(255,255,255,.35)}
#p-solution  
.cloud{display:flex;flex-wrap:wrap;gap:var(--s-lg) 56px;align-items:center;margin-top:var(--s-xl);
  padding-top:var(--s-xl);border-top:1px solid var(--hairline-strong)}
#p-solution .cloud .c{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
#p-solution  
.frow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-xxxl)}
@media(max-width:900px){#p-solution .frow{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-solution .fcopy{display:flex;flex-direction:column;gap:var(--s-md)}
#p-solution .fcopy .d{font-size:17px;line-height:1.6;color:var(--charcoal)}
#p-solution .band.dark .fcopy .d{color:var(--on-dark-mute)}
#p-solution .fcopy ul{list-style:none;margin:var(--s-xs) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
#p-solution .fcopy li{font-size:16px;font-weight:700;color:var(--ink);border-top:1px solid var(--hairline);padding-top:var(--s-xs)}
#p-solution .band.dark .fcopy li{color:var(--on-dark);border-top-color:var(--divider-dark)}
#p-solution .fimg{height:440px;background:var(--surface-soft);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-md)}
#p-solution .band.dark .fimg{background:var(--surface-deep)}
#p-solution .fimg .lb{font-size:11px;color:var(--ash)}
#p-solution .band.dark .fimg .lb{color:rgba(255,255,255,.35)}
@media(max-width:900px){#p-solution .fimg{height:260px}
#p-solution .frow.rev .fimg{order:-1}}
#p-solution  
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xxxl);margin-top:var(--s-xxl)}
@media(max-width:767px){#p-solution .nums{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-solution .nums .n{border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-xs)}
#p-solution .nums .v{font-size:40px;font-weight:700;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
#p-solution .nums .t{font-size:16px;font-weight:700;color:var(--ink);margin-top:4px}
#p-solution .nums .d{font-size:14px;line-height:1.6;color:var(--mute)}
#p-solution  
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-lg)}
#p-solution .cta p{color:var(--on-dark-mute);max-width:50ch}
#p-solution  
a{text-decoration:none;color:inherit}
#p-solution .btn{transition:background-color .15s,color .15s,border-color .15s;cursor:pointer}
#p-solution .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
#p-solution .band.dark .btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}
#p-solution .btn-outline-light:hover{background:var(--on-dark);color:var(--ink)}
#p-solution .more{transition:opacity .15s}
#p-solution .more:hover{opacity:.6}
#p-solution  
.readmore{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-xxxl);align-items:center;
  border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxl);padding-top:var(--s-xl)}
@media(max-width:900px){#p-solution .readmore{grid-template-columns:1fr;gap:var(--s-lg)}}
#p-solution .readmore .meta{display:flex;gap:var(--s-sm);align-items:center;margin-bottom:var(--s-sm)}
#p-solution .readmore .dt{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ash);font-variant-numeric:tabular-nums}
#p-solution .readmore .cat{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--mute);
  border:1px solid var(--stone);padding:3px 8px;line-height:1}
#p-solution .readmore h3{font-size:28px;line-height:1.1;color:var(--ink)}
@media(max-width:767px){#p-solution .readmore h3{font-size:23px}}
#p-solution .readmore .d{font-size:16px;line-height:1.7;color:var(--charcoal)}
#p-solution .readmore .cta2{display:flex;flex-direction:column;gap:var(--s-md);align-items:flex-start}
#p-solution  
.bc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:rgba(255,255,255,.45);margin-bottom:var(--s-xl)}
#p-solution .bc a{color:rgba(255,255,255,.45);transition:color .15s}
#p-solution .bc a:hover{color:var(--on-dark)}
#p-solution .bc .sep{color:rgba(255,255,255,.25)}
#p-solution .bc .cur{color:var(--on-dark)}
@media(max-width:900px){#p-solution .steps3{grid-template-columns:1fr}}
/* 손이 얹히면 바탕이 옅은 회색으로 깔립니다. 손가락으로 누르는 기기에서는
   눌린 상태가 남으므로 hover 를 실제로 쓸 수 있는 환경에만 겁니다. */
#p-solution .steps3 .s{background:var(--canvas);padding:var(--s-xl);display:flex;flex-direction:column;gap:var(--s-sm)}
#p-solution .steps3 .k{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--mute)}
#p-solution .steps3 .t{font-size:20px;font-weight:700;line-height:1.1;color:var(--ink)}
#p-solution .steps3 .d{font-size:14px;line-height:1.7;color:var(--mute)}
/* 계약 조건 세 가지를 카드로 놓습니다. 제목과 설명이 한 벌씩 묶여
   세 조건을 나란히 견주기가 쉬워집니다. */
#p-solution .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
/* 솔루션 제안 카드도 셋입니다. 900px 아래에서 두 열로 접히며 하나가 남았습니다. */
@media(max-width:900px){#p-solution .cards3{grid-template-columns:1fr}}
#p-solution .cards3 .c{background:var(--surface-deep);padding:var(--s-xl);display:flex;flex-direction:column;gap:var(--s-sm)}
#p-solution .cards3 .ph{height:150px;background:var(--surface-dark);display:flex;align-items:flex-end;padding:var(--s-sm);margin-bottom:var(--s-xs)}
#p-solution .cards3 .ph span{font-size:11px;color:rgba(255,255,255,.35)}
#p-solution .cards3 .t{font-size:22px;font-weight:700;line-height:1;color:var(--on-dark)}
#p-solution .cards3 .d{font-size:14px;line-height:1.7;color:var(--on-dark-mute)}
#p-solution .proof{border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxl)}
#p-solution .proof .r{display:grid;grid-template-columns:1fr 1.4fr auto;gap:var(--s-lg);align-items:center;
  padding:var(--s-lg) 0;border-bottom:1px solid var(--hairline)}
@media(max-width:767px){#p-solution .proof .r{grid-template-columns:1fr;gap:6px}}
#p-solution .proof .c{font-size:20px;font-weight:700;color:var(--ink)}
#p-solution .proof .w{font-size:15px;color:var(--charcoal)}
#p-solution .badge{display:inline-flex;align-items:center;padding:6px 14px;border-radius:46px;
  font-size:13px;font-weight:700;background:var(--ink);color:var(--canvas)}
#p-solution .badge.soon{background:transparent;color:var(--mute);border:1px solid var(--stone)}
#p-solution .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-solution .flow{grid-template-columns:1fr}}
#p-solution .flow .f{border-top:2px solid var(--on-dark);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-xs)}
#p-solution .flow .n{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--on-dark-mute)}
#p-solution .flow .t{font-size:20px;font-weight:700;line-height:1;color:var(--on-dark)}
#p-solution .flow .d{font-size:14px;line-height:1.7;color:var(--on-dark-mute)}
#p-solution a{text-decoration:none;color:inherit}
#p-solution .steps3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-solution .steps3{grid-template-columns:1fr}}
#p-solution .why{margin-top:var(--s-xxxl);padding-top:var(--s-lg);
  border-top:1px solid var(--hairline-strong);display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--s-xl);align-items:start}
@media(max-width:900px){#p-solution .why{grid-template-columns:1fr;gap:var(--s-sm)}}
#p-solution .why .k{font-size:16px;font-weight:700;color:var(--ink)}
#p-solution .why p{font-size:16px;line-height:1.7;color:var(--charcoal);margin:0}
#p-solution .why .more{grid-column:2;margin-top:var(--s-md)}
@media(max-width:900px){#p-solution .why .more{grid-column:1}}
/* 도입 절차가 흰 밴드로 옮겨 왔습니다. 검은 밴드용 색을 밝은 바탕용으로 바꿉니다. */
#p-solution .flow .f{border-top-color:var(--hairline-strong)}
#p-solution .flow .n{color:var(--ash)}
#p-solution .flow .t{color:var(--ink)}
#p-solution .flow .d{color:var(--mute)}
#p-solution .offergrid{display:flex;flex-direction:column;
  gap:var(--s-xxxl)}
/* 제안 섹션 — 왼쪽에 말, 오른쪽에 계약 조건 목록. 조건을 읽다가 눈을 왼쪽으로
   옮기면 왜 그렇게 정했는지가 바로 있습니다. */
#p-solution .ocopy{display:flex;flex-direction:column;align-items:flex-start}
#p-solution .ocopy .wd{color:var(--charcoal);
  margin:var(--s-lg) 0 var(--s-xl)}
#p-solution .olist{display:flex;flex-direction:column;gap:var(--s-xl)}
#p-solution .olist .s{display:grid;
  grid-template-columns:64px minmax(0,1fr);gap:var(--s-md);
  border-top:1px solid var(--hairline-strong);padding-top:var(--s-md)}
#p-solution .olist .k{font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--ash);padding-top:3px}
#p-solution .olist .t{font-size:20px;font-weight:700;
  line-height:1.2;color:var(--ink)}
#p-solution .olist .d{grid-column:2;font-size:14px;
  line-height:1.7;color:var(--mute);margin-top:4px}
#p-solution .olist .caption{margin-top:0;text-align:right}
@media(max-width:560px){#p-solution .olist .s{grid-template-columns:1fr;gap:var(--s-xs)}
#p-solution .olist .d{grid-column:1}}
#p-solution .ocards{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-lg)}
@media(max-width:900px){#p-solution .ocards{
  grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#p-solution .ocards{grid-template-columns:1fr}}
#p-solution .oc{border:1px solid var(--stone);padding:var(--s-xl);
  display:flex;flex-direction:column;gap:var(--s-sm);
  transition:background-color .18s,border-color .18s}
@media(hover:hover){#p-solution .oc:hover{
    background:var(--surface-soft);border-color:var(--surface-soft)}}
#p-solution .oc h3{font-size:20px;font-weight:700;line-height:1.3;
  color:var(--ink);margin:0}
#p-solution .oc p{font-size:14px;line-height:1.7;color:var(--mute);margin:0}
/* 적용 현장 표 — 셋째 칸을 auto 로 두면 줄마다 배지 너비가 달라서
   가운데 설명 칸의 시작점이 줄마다 어긋납니다. 폭을 고정해 세 칸을 맞춥니다. */
#p-solution .proof .r{grid-template-columns:1fr 1.4fr 136px}
#p-solution .proof .badge{justify-self:end}
@media(max-width:767px){#p-solution .proof .r{grid-template-columns:1fr}}
/* 도입 절차 — 구분선을 왼쪽에서 오른쪽으로 그립니다. 테두리는 길이를 줄 수 없어
   같은 자리에 얇은 층을 하나 깔고 가로로 늘립니다. 네 줄이 저마다 그어집니다. */
#p-solution .flow .f{position:relative;border-top:0}
#p-solution .flow .f::before{content:"";position:absolute;
  top:0;left:0;width:100%;height:1px;background:var(--hairline-strong);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
#p-solution .flow .f.drawn::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){#p-solution .flow .f::before{
    transition:none;transform:scaleX(1)}}
#p-solution .hero{position:relative;overflow:hidden}
/* 솔루션 첫 화면의 배경 영상. 글이 읽혀야 하므로 영상 위에 어둠막을 한 겹 덮고,
   글 묶음을 그 위로 올립니다. 영상이 없으면 지금까지처럼 검은 바탕만 남습니다. */
#p-solution .hero .hbg{position:absolute;inset:0;z-index:0}
#p-solution .hero .hbg::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
#p-solution .hero .inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#p-solution .hero .hbg::after{background:rgba(0,0,0,.66)}}
@media(max-width:900px){#p-solution .ocards{grid-template-columns:1fr}}
/* ── 작업반 카드의 영상 칸 ──────────────────────────────────────────
   머신텐딩 영상이 540×960 세로 영상입니다. 가로로 긴 150px 칸에 넣으면
   960px 가운데 150px, 곧 전체의 16%만 보였습니다. 칸을 세로형 3:4로
   바꾸어 세로 영상이 제 모습에 가깝게 들어가도록 합니다. */
#p-solution .cards3 .ph{
  height:auto;aspect-ratio:3/4}