/* 도입 안내 3쪽(도입 절차 · 요금 · 비용 계산) 전용. 상자·카드 없이 여백 · 숫자 · 가는 선만.
   파랑(--brand)은 버튼과 체크 · 선택 같은 조작 요소에만 쓴다. */

/* 페이지 안 바로가기 */
.st-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;margin-top:36px;font-size:15px}
.st-jump a{color:var(--gray);padding:6px 0;transition:color .2s}
.st-jump a:hover{color:var(--ink)}
.st-jump a span{font-weight:300;margin-right:6px;font-variant-numeric:tabular-nums}
[id]{scroll-margin-top:96px}

/* 진행 순서: 번호 | 단계 · 누가 | 하는 일 */
.st-flow{list-style:none;margin-top:8px}
.st-flow>li{display:grid;grid-template-columns:72px minmax(220px,300px) 1fr;gap:16px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--line)}
.st-flow .n{font-weight:300;font-size:20px;color:var(--gray);font-variant-numeric:tabular-nums}
.st-flow b{display:block;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em}
.st-who{display:block;margin-top:6px;font-size:14px;color:var(--gray)}
.st-flow p{color:var(--gray);font-size:16px;line-height:1.75}
.st-flow p strong{color:var(--ink)}
.st-when{display:block;margin-top:8px;font-size:14px;color:var(--ink);font-weight:700}

/* 서류 체크리스트 */
.st-docs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:80px;margin-top:48px;align-items:start}
.st-side{position:sticky;top:100px}
.st-q{font-size:14px;color:var(--gray);margin-bottom:12px}
.st-q+.st-q,.st-opts+.st-q{margin-top:32px}
.st-opts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.st-opt{display:grid;grid-template-columns:22px 1fr;gap:4px 14px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer}
.st-opt input{position:absolute;opacity:0;width:1px;height:1px}
.st-opt i{grid-row:1/3;width:18px;height:18px;border:1.5px solid var(--gray);border-radius:50%;align-self:start;margin-top:3px;transition:background-color .16s,border-color .16s,color .16s}
.st-opt.box i{border-radius:5px}
.st-opt b{font-size:18px;letter-spacing:-.01em}
.st-opt small{font-size:14px;color:var(--gray);line-height:1.5}
.st-opt input:checked~i{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.st-opt.box input:checked~i{box-shadow:none;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.st-opt input:focus-visible~i{outline:2px solid var(--brand);outline-offset:3px}
.st-perk{margin-top:32px;padding-top:24px;border-top:1px solid var(--ink)}
.st-perk b{display:block;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st-perk b s{font-weight:300;color:var(--gray);margin-right:10px;text-decoration-thickness:1px}
.st-perk p{color:var(--gray);font-size:15px;margin-top:6px}
.st-prog{margin-top:32px}
.st-prog p{font-size:15px;color:var(--gray)}
.st-prog p b{color:var(--ink);font-variant-numeric:tabular-nums}
.st-bar{height:3px;background:var(--line);margin-top:10px;border-radius:2px;overflow:hidden}
.st-bar span{display:block;height:100%;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.st-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.st-acts .btn{height:50px;padding:0 24px;font-size:15px}
.st-acts .link-plain{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.st-msg{font-size:14px;color:var(--gray);min-height:22px;margin-top:14px}
.st-msg.ok{color:var(--ink);font-weight:700}
.st-copybox{display:block;width:100%;min-height:200px;margin-top:12px;padding:12px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:inherit;font-size:14px;line-height:1.7;color:var(--ink);background:none;resize:vertical}
.st-copybox[hidden]{display:none}
.coarse-only{display:none}
.st-end{display:none}
@media (pointer:coarse){.coarse-only{display:inline-flex}}

.st-group+.st-group{margin-top:40px}
.st-group[hidden]{display:none}
.st-gh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--gray);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.st-gh b{font-size:17px;color:var(--ink)}
.st-list{list-style:none}
.st-list li[hidden]{display:none}
.st-item{display:grid;grid-template-columns:26px 1fr;gap:2px 14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer}
.st-item input{position:absolute;opacity:0;width:1px;height:1px}
.st-item i{grid-row:1/3;width:20px;height:20px;border:1.5px solid var(--gray);border-radius:6px;align-self:start;margin-top:2px;transition:background .2s,border-color .2s}
.st-item input:checked~i{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--brand)}
.st-item input:focus-visible~i{outline:2px solid var(--brand);outline-offset:3px}
.st-item b{font-size:17px;transition:color .2s}
.st-item small{font-size:14px;color:var(--gray);line-height:1.5}
.st-item input:checked~b{color:var(--gray)}

/* 매장 사진 4장 */
.st-shots{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-top:48px}
.st-shots li{padding-top:0}
.st-shots svg{display:block;width:100%;max-width:220px;height:auto;aspect-ratio:4/3;color:var(--ink);margin-bottom:24px}
.st-shots .n{display:block;font-weight:300;color:var(--gray);font-variant-numeric:tabular-nums;margin-bottom:10px}
.st-shots b{display:block;font-size:20px;letter-spacing:-.02em}
.st-shots p{color:var(--gray);font-size:15px;margin-top:8px;line-height:1.65}

/* 위아래로 쌓는 목록(설치 전 · 후) */
.st-stack li{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}
.st-stack span{text-align:left;line-height:1.6}
.st-stack b{white-space:normal}

/* 요금표 */
.st-tbl td:nth-child(2){font-weight:700;white-space:nowrap}
.st-tbl td:nth-child(3){color:var(--gray);font-size:15px}
.st-tbl td.ask{color:var(--gray);font-weight:400}
.st-tbl td.ask a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink);margin-left:8px;white-space:nowrap}
.st-tbl td.ask a:hover{color:var(--brand);border-color:var(--brand)}
.st-tbl small.st-was{font-weight:400;color:var(--gray);font-size:14px;margin-left:6px}
.st-tbl small.st-was::before{content:"("}.st-tbl small.st-was::after{content:")"}
.st-src{font-size:13px;color:var(--gray);margin-top:16px;line-height:1.7}
.st-sub{font-size:17px;font-weight:700;margin-top:64px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.st-sub small{font-size:14px;font-weight:400;color:var(--gray);margin-left:10px}
.st-sub+.rows{border-top:0}
.st-sub+.tbl{margin-top:0}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.st-two>div>.st-sub:first-child{margin-top:48px}
.st-asks{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:40px}
.st-asks li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.st-asks b{font-size:17px}
.st-asks span{font-size:14px;color:var(--gray);white-space:nowrap}

/* 계산기 */
.st-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"in out" "note out";grid-template-rows:auto 1fr;gap:56px 88px;margin-top:48px;align-items:start}
.st-in{grid-area:in;display:flex;flex-direction:column;gap:32px}
.st-out{grid-area:out}
.st-note{grid-area:note;border-top:1px solid var(--line)}
.st-note .st-cav-h:first-child{margin-top:24px}
.st-field{display:flex;flex-direction:column;gap:4px}
.st-field>span{font-size:14px;color:var(--gray)}
.st-field input{border:0;border-bottom:1px solid var(--line);padding:12px 0;font:inherit;font-size:22px;font-weight:700;color:var(--ink);background:none;outline:none;border-radius:0;font-variant-numeric:tabular-nums;width:100%;transition:border-color .2s}
.st-field input:focus{border-color:var(--ink)}
.st-field input:disabled{color:var(--line);border-color:var(--line)}
.st-field input::placeholder{color:#B9BEC8;font-weight:400}
.st-unit{position:relative}
.st-unit input{padding-right:48px}
.st-unit em{position:absolute;right:0;bottom:14px;font-style:normal;font-size:16px;color:var(--gray)}
.st-field small{font-size:13px;color:var(--gray)}
.st-field.off{opacity:.45}
.st-seg{display:flex;flex-wrap:wrap;gap:8px 28px}
.st-seg label{display:inline-flex;align-items:center;gap:10px;font-size:17px;color:var(--gray);cursor:pointer;padding:6px 0}
.st-seg input{position:absolute;opacity:0;width:1px;height:1px}
.st-seg i{width:16px;height:16px;border:1.5px solid var(--gray);border-radius:50%;flex:none;transition:background-color .16s,border-color .16s,color .16s}
.st-seg input:checked~i{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.st-seg input:checked~span{color:var(--ink);font-weight:700}
.st-seg input:focus-visible~i{outline:2px solid var(--brand);outline-offset:3px}

.st-out{border-top:1px solid var(--ink)}
.st-total strong.dim{color:#C4C8D0}
.st-total{padding:28px 0 24px;border-bottom:1px solid var(--line)}
.st-total>span{display:block;font-size:14px;color:var(--gray)}
.st-total strong{display:block;font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.st-total strong small{font-size:.5em;font-weight:400;color:var(--gray);margin-left:4px;letter-spacing:-.01em}
.st-total p{font-size:14px;color:var(--gray);margin-top:8px}
.st-lines{list-style:none}
.st-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.st-lines li span{color:var(--gray)}
.st-lines li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.st-lines li.sum b{font-size:17px}
.st-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.st-pair .st-total strong{font-size:clamp(28px,3vw,40px)}
.st-flag{padding:20px 0;border-bottom:1px solid var(--line)}
.st-flag b{display:block;font-size:17px}
.st-flag p{font-size:15px;color:var(--gray);margin-top:4px}
.st-flag b.yes::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:10px;vertical-align:middle;position:relative;top:-2px}
.st-cav{list-style:none;margin-top:28px}
.st-cav-h{font-size:15px;font-weight:700;margin-top:28px}
.st-cav-h+.st-cav{margin-top:10px}
.st-cav li{position:relative;padding-left:14px;font-size:14px;color:var(--gray);line-height:1.7;margin-top:6px}
.st-cav li::before{content:"";position:absolute;left:0;top:.75em;width:4px;height:4px;border-radius:50%;background:var(--gray)}
.st-cav li strong{color:var(--ink)}
.st-bars{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:14px}
.st-bars li{display:grid;grid-template-columns:150px 1fr 96px;align-items:center;gap:16px;font-size:15px;color:var(--gray)}
.st-bars .bt{height:8px}
.st-bars .bf{width:var(--w);transition:background .16s}
.st-bars b{text-align:right;font-weight:400;font-variant-numeric:tabular-nums}
.st-bars li.on{color:var(--ink)}
.st-bars li.on b{font-weight:700}
.st-bars li.on .bf{background:linear-gradient(90deg,var(--brand),var(--brand2))}

.st-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink);margin-top:32px;max-width:760px}
.st-lead span{color:var(--gray)}

@media (max-width:900px){
  .st-calc{grid-template-columns:1fr;grid-template-areas:"in" "out" "note";gap:48px}
  .st-end{display:flex;justify-content:space-between;margin-top:32px}
  .st-end .st-msg{margin:0}
  .st-flow>li{grid-template-columns:48px 1fr}
  .st-flow p{grid-column:2}
  .st-docs,.st-two{grid-template-columns:1fr;gap:56px}
  .st-side{position:static}
  .st-shots{grid-template-columns:1fr 1fr;gap:40px 24px}
  .st-asks{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .st-jump{gap:2px 18px;font-size:14px;margin-top:28px}
  .st-flow>li{grid-template-columns:36px 1fr;padding:24px 0;gap:10px}
  .st-flow .n{font-size:16px}
  .st-flow p{font-size:15px}
  .st-docs{margin-top:32px;gap:48px}
  .st-shots{gap:32px 16px;margin-top:32px}
  .st-shots b{font-size:17px}
  .st-shots p{font-size:14px}
  .st-asks{grid-template-columns:1fr}
  .st-calc{margin-top:32px;gap:40px}
  .st-lines li.sum{flex-direction:column;gap:4px}
  .st-lines li.sum b{white-space:normal}
  .st-pair{grid-template-columns:1fr}
  .st-bars li{grid-template-columns:1fr auto;gap:6px 12px}
  .st-bars .bt{grid-column:1/-1;grid-row:2}
  .st-tbl td:nth-child(2){white-space:normal}
  .st-acts .btn{flex:1 1 auto}
}

/* ===== 전자계약: 휴대폰 화면 3장 (실제 사진 대신 HTML로 그린 예시 화면) ===== */
.st-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;margin-top:48px}
.st-ph{margin:0}
.ph-frame{width:min(250px,100%);margin:0 auto;aspect-ratio:9/18.5;border-radius:42px;background:#191F28;padding:9px;box-shadow:0 24px 50px rgba(25,31,40,.16)}
.ph-scr{height:100%;border-radius:34px;background:#fff;overflow:hidden;padding:0 16px;display:flex;flex-direction:column;font-size:12px;color:var(--ink)}
.ph-top{display:flex;justify-content:space-between;align-items:center;height:34px;font-size:11px;font-weight:700;padding:0 6px}
.ph-top i{width:20px;height:9px;border:1.4px solid var(--ink);border-radius:3px}
.ph-title{font-size:15px;font-weight:700;margin:10px 2px 14px}
.ph-day{font-size:10px;color:var(--gray);text-align:center;margin-bottom:10px}
.ph-bubble{background:var(--g100,#F2F4F6);border-radius:16px 16px 16px 4px;padding:12px 13px;line-height:1.55;font-size:11.5px}
.ph-link{display:block;margin-top:10px;color:var(--brand);font-weight:700}
.ph-rows{margin:0;display:flex;flex-direction:column}
.ph-rows div{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line);font-size:11.5px}
.ph-rows dt{color:var(--gray)}.ph-rows dd{margin:0;font-weight:700}
.ph-btn{margin-top:auto;margin-bottom:22px;height:40px;border-radius:12px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ph-sign{position:relative;height:120px;border-radius:14px;background:var(--g100,#F2F4F6);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.ph-sign svg{width:78%}
.ph-sign span{position:absolute;left:12px;top:10px;font-size:10px;color:var(--gray)}
.ph-check{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:11.5px;font-weight:600}
.ph-check i{width:16px;height:16px;border-radius:5px;background:var(--brand);position:relative}
.ph-check i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.st-ph figcaption{margin-top:28px;text-align:left}
.st-ph figcaption .n{display:block;font-size:14px;color:var(--gray);font-weight:300}
.st-ph figcaption b{display:block;font-size:19px;margin-top:6px}
.st-ph figcaption p{font-size:15px;color:var(--gray);margin-top:8px;line-height:1.6}
.st-sign-more{margin-top:56px}
.st-ic{display:block;width:40px;height:40px;color:var(--ink);margin-bottom:18px}
.st-ic svg{width:100%;height:100%}
@media(max-width:860px){.st-phones{grid-template-columns:1fr;gap:56px}.ph-frame{width:230px}}

/* 진행 순서: 단계마다 사진 (번호 · 제목 · 설명 · 사진) */
.st-flow>li:has(.st-pic){grid-template-columns:64px minmax(200px,250px) 1fr 260px;align-items:center;gap:16px 28px}
.st-pic{margin:0;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 14px 32px rgba(25,31,40,.10)}
.st-pic img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1100px){.st-flow>li:has(.st-pic){grid-template-columns:48px 1fr 220px}.st-flow>li:has(.st-pic) p{grid-column:2}.st-flow>li:has(.st-pic) .st-pic{grid-column:3;grid-row:1/span 2}}
@media(max-width:700px){.st-flow>li:has(.st-pic){grid-template-columns:36px 1fr}.st-flow>li:has(.st-pic) .st-pic{grid-column:2;grid-row:auto;margin-top:8px}}

/* 필요 서류: 기본 서류 4가지 그림 */
.st-doclead{margin-top:32px}
.st-docpics{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:40px 0 56px}
.st-docpics li{display:flex;flex-direction:column;gap:6px}
.st-docic{display:block;width:88px;height:88px;color:var(--ink);margin-bottom:10px}
.st-docic svg{width:100%;height:100%}
.st-docpics b{font-size:17px}
.st-docpics small{font-size:14px;color:var(--gray)}
@media(max-width:860px){.st-docpics{grid-template-columns:1fr 1fr;gap:20px 14px}}

/* 매장 사진 찍는 법: 예시 사진 + 카메라 프레임 모서리 */
.st-shot{position:relative;margin:0 0 22px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 14px 32px rgba(25,31,40,.10)}
.st-shot img{width:100%;height:100%;object-fit:cover;display:block}
.st-shot::before,.st-shot::after{content:"";position:absolute;inset:12px;pointer-events:none;border:2px solid rgba(255,255,255,.95);
  -webkit-mask:linear-gradient(#000 0 0) top left/22px 22px no-repeat,linear-gradient(#000 0 0) top right/22px 22px no-repeat,linear-gradient(#000 0 0) bottom left/22px 22px no-repeat,linear-gradient(#000 0 0) bottom right/22px 22px no-repeat;
  mask:linear-gradient(#000 0 0) top left/22px 22px no-repeat,linear-gradient(#000 0 0) top right/22px 22px no-repeat,linear-gradient(#000 0 0) bottom left/22px 22px no-repeat,linear-gradient(#000 0 0) bottom right/22px 22px no-repeat;border-radius:6px}
.st-shot::after{display:none}
.st-ok{position:absolute;left:14px;bottom:14px;font-size:12px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);padding:5px 10px 5px 24px;border-radius:999px}
.st-ok::before{content:"";position:absolute;left:10px;top:50%;width:4px;height:8px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-65%) rotate(45deg)}
/* 10/10: 모바일에선 휴대폰 3대를 옆으로 넘겨 보기 (세로로 1,500px 쌓이지 않게) */
@media(max-width:860px){
  .st-phones{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .st-phones::-webkit-scrollbar{display:none}
  .st-ph{scroll-snap-align:start}
}
.st-col-pic{margin:0 0 20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden}
.st-col-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* 검수 2026-10-10: 휴대폰은 내용 높이만큼 · 모바일은 작게 세로로 · '좋은 예'는 촬영 틀 안쪽에 */
.ph-frame{aspect-ratio:9/15.5}
.st-ok{left:24px;bottom:24px}
@media(max-width:860px){
  .st-phones{grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;gap:36px;overflow:visible;margin-right:0;padding-right:0}
  .st-ph{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
  .st-ph .ph-frame{width:230px;zoom:.62}
  .st-ph figcaption{margin-top:0}
}
.st-ph figcaption b{color:var(--ink)}
.ph-frame{aspect-ratio:9/14.5}
.ph-card{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.ph-card b{font-size:11.5px}.ph-card span{font-size:10px;color:var(--gray)}
.ph-card i{display:block;height:54px;border-radius:8px;background:var(--g100,#F2F4F6);margin-bottom:6px}
.ph-btn{flex:none}
.ph-rows div{padding:8px 2px}
.ph-card i{height:40px}
@media(max-width:860px){.st-ph .ph-frame{width:250px;zoom:.58}}
.ph-card{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.ph-card i{grid-row:span 2;width:34px;height:34px;margin:0;border-radius:9px;background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand);display:flex;align-items:center;justify-content:center}