/* 새 메인 시안 — automation.css(작업대·종이·먹·인주) 위에 얹는다. 유리·그라데이션 글자·알약 버튼 없음. */
.home-next .desk{height:230vh}
.desk-end{pointer-events:none;border-bottom:1px solid rgba(244,237,226,.5);padding-bottom:3px}
.desk-end.on{pointer-events:auto}
.desk-end.on:hover{border-bottom-color:var(--cream)}

/* 종이 구역 공통 */
.sheet-sec{position:relative;padding:clamp(80px,10vw,140px) clamp(20px,5vw,72px);border-top:1.5px solid var(--rule)}
.sheet-sec::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sheet-sec>*{position:relative}
.line-btn{display:inline-block;background:none;border:0;border-bottom:1.5px solid var(--ink);padding:4px 0;font-weight:700;font-size:15px;cursor:pointer}
.line-btn:hover{color:var(--seal);border-color:var(--seal)}

/* 01 만드는 것 — 기둥 셋 */
.pillar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--hair)}
.pillar:first-of-type{border-top:0;padding-top:0}
.pillar.flip .pillar-copy{order:2}
.pillar-tag{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink2)}
.pillar-tag b{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--seal);color:var(--seal);font-family:var(--serif);font-size:15px;letter-spacing:0}
.pillar-copy h3{margin-top:22px;font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.4vw,50px);line-height:1.16;letter-spacing:-.045em}
.pillar-copy>p{margin-top:18px;font-size:16.5px;line-height:1.75;color:#3a372f;max-width:27em}
.pillar-links{list-style:none;margin-top:26px;border-top:1.5px solid var(--ink)}
.pillar-links li{border-bottom:1px solid var(--hair)}
.pillar-links a{display:flex;justify-content:space-between;gap:12px;padding:15px 2px;font-weight:700;font-size:15.5px}
.pillar-links a:hover{color:var(--seal)}
.pick{margin-top:22px;background:none;border:0;padding:0;font-family:var(--mono);font-size:13px;color:var(--ink2);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pick:hover{color:var(--seal)}
.pillar-stage{min-width:0}
.pillar-stage figcaption{margin-top:10px;font-size:11.5px;color:var(--ink2);letter-spacing:.04em}

/* A. 견적 시트 */
.quote-sheet{background:var(--sheet);box-shadow:0 1px 1px rgba(0,0,0,.06),0 26px 44px -26px rgba(40,30,15,.5);border-top:3px solid var(--ink)}
.quote-sheet figcaption{margin:0;padding:10px 20px 14px}
.sheet-bar{display:flex;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--hair);font-size:11.5px;letter-spacing:.06em;color:var(--ink2)}
.sheet-bar span:last-child{color:var(--seal)}
.quote-sheet .stage{position:relative;height:clamp(260px,26vw,380px);overflow:hidden;background:#E9E3D7;touch-action:pan-y;cursor:grab}
.quote-sheet .stage canvas{position:absolute;inset:0;width:100%;height:100%}
.quote-sheet .demo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote-sheet .stage-tag{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;background:var(--sheet);padding:4px 9px;pointer-events:none}
.quote-sheet .stage .act{position:absolute;right:16px;bottom:12px;z-index:2;background:var(--ink);color:var(--paper);border:0;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;min-height:40px}
.quote-sheet .stage .act:hover{background:var(--seal)}
.quote-sheet .start-demo{position:absolute;left:16px;top:16px;z-index:2;font-size:14px;padding:12px 16px}
.quote-controls{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;padding:18px 20px 6px;align-items:end}
.quote-options .og{display:grid;grid-template-columns:66px 1fr;align-items:center;gap:10px;padding:5px 0}
.quote-options .og>b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink2)}
.quote-options .ob{display:flex;flex-wrap:wrap;gap:5px}
.quote-options button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 11px;border:1px solid var(--hair);background:transparent;font-size:13px;font-weight:600;cursor:pointer}
.quote-options button:hover{border-color:var(--ink)}
.quote-options button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.quote-options button i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.quote-total{border-left:1px solid var(--hair);padding-left:18px}
.quote-total small{display:block;font-family:var(--mono);font-size:11px;color:var(--ink2)}
.quote-total b{display:block;margin:6px 0 10px;font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quote-total .line-btn{font-size:13.5px}
.quote-error{padding:0 20px 14px;font-size:13px;color:var(--seal)}

/* B. 자동화 — 보고서 위에 전표 한 장 */
.auto-desk{position:relative;padding:0 0 60px}
.auto-report{display:block;background:var(--sheet);padding:10px 10px 12px;box-shadow:0 1px 1px rgba(0,0,0,.06),0 26px 44px -26px rgba(40,30,15,.5);transform:rotate(-1.2deg);width:84%}
.auto-report img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.auto-report span{display:block;margin-top:9px;font-size:11.5px;color:var(--ink2);letter-spacing:.04em}
.auto-report:hover span{color:var(--seal)}
.slip.auto-slip{position:absolute;right:0;bottom:0;width:min(290px,48%);transform:rotate(2.4deg);display:block;transition:transform .3s}
.slip.auto-slip:hover{transform:rotate(0) translateY(-6px)}
.slip.auto-slip .stamp{top:auto;bottom:74px;right:14px;cursor:inherit}

/* C. 전후 비교 */
.cmp-frame{--cut:52%;position:relative;aspect-ratio:3/2;overflow:hidden;background:#2a241d;cursor:ew-resize;touch-action:pan-y;user-select:none;box-shadow:0 26px 44px -26px rgba(40,30,15,.55)}
.cmp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cmp-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:var(--sheet);pointer-events:none}
.cmp-line i{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--sheet);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cmp-line i::before{content:"◀ ▶";position:absolute;inset:0;display:grid;place-items:center;font-size:9px;letter-spacing:2px;color:var(--ink)}
.cmp-label{position:absolute;top:14px;padding:4px 9px;background:rgba(27,26,22,.78);color:var(--cream);font-size:11px;letter-spacing:.06em;pointer-events:none}
.cmp-label.l{left:14px}.cmp-label.r{right:14px}
.cmp-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px}
.cmp-range{display:flex;align-items:center;gap:12px;flex:1;font-size:11.5px;color:var(--ink2)}
.cmp-range input{flex:1;accent-color:var(--seal);min-width:0}
.cmp-mode{display:flex}
.cmp-mode button{min-height:40px;padding:8px 14px;border:1px solid var(--ink);background:transparent;font-weight:700;font-size:13.5px;cursor:pointer}
.cmp-mode button+button{border-left:0}
.cmp-mode button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* 02 작업 목록 — 목차 */
.works{background:var(--paper2)}
.idx-filter{display:flex;flex-wrap:wrap;gap:0;margin-bottom:26px;border:1.5px solid var(--ink);width:max-content;max-width:100%}
.idx-filter button{display:flex;align-items:baseline;gap:7px;min-height:44px;padding:10px 16px;border:0;border-right:1px solid var(--hair);background:transparent;font-weight:700;font-size:14.5px;cursor:pointer}
.idx-filter button:last-child{border-right:0}
.idx-filter button small{font-family:var(--mono);font-size:11px;color:var(--ink2);font-weight:500}
.idx-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.idx-filter button[aria-pressed="true"] small{color:var(--tan)}
.idx{list-style:none;border-top:2px solid var(--ink)}
.idx li{border-bottom:1px solid var(--hair)}
.idx a{display:grid;grid-template-columns:48px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 28px;align-items:center;gap:18px;min-height:64px;padding:10px 6px;transition:background .15s,padding .2s}
.idx a:hover,.idx a:focus-visible{background:var(--sheet);padding-left:14px}
.i-no{font-size:12px;color:var(--seal)}
.i-name{font-family:var(--serif);font-weight:900;font-size:clamp(18px,1.7vw,23px);letter-spacing:-.03em}
.i-kind{font-size:14.5px;color:#3a372f}
.i-tech{font-size:12px;color:var(--ink2)}
.i-badge{justify-self:start;font-size:12px;font-weight:700;color:var(--ink2);border:1px solid var(--hair);padding:3px 8px}
.i-badge.own{color:var(--seal);border-color:var(--seal)}
.i-go{font-size:18px;text-align:right}
.idx a:hover .i-go{color:var(--seal)}
.i-thumb{display:none}
.idx-more{margin-top:24px}
.idx-more[hidden]{display:none}
.honest{margin-top:34px;max-width:52em;font-size:13.5px;line-height:1.8;color:var(--ink2)}
.honest b{display:inline-block;margin-right:6px;padding:1px 7px;border:1px solid var(--hair);font-size:12px;color:var(--ink2)}
.honest b.own{margin-left:10px;color:var(--seal);border-color:var(--seal)}
.idx-peek{position:fixed;left:0;top:0;z-index:20;width:340px;padding:8px;background:var(--sheet);box-shadow:0 24px 40px -18px rgba(30,20,10,.55);pointer-events:none;opacity:0;transition:opacity .18s;will-change:transform}
.idx-peek.on{opacity:1}
.idx-peek img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper2)}

/* 03 운영 사이트 */
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.live-card{display:block}
.live-shot{background:var(--sheet);padding:10px;box-shadow:0 1px 1px rgba(0,0,0,.06),0 26px 44px -26px rgba(40,30,15,.5);transition:transform .3s}
.live-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--hair)}
.live-card:hover .live-shot{transform:translateY(-6px)}
.live-meta{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;margin-top:22px;padding-top:16px;border-top:1.5px solid var(--ink)}
.own-tag{grid-row:1;font-size:11.5px;color:var(--seal);border:1px solid var(--seal);padding:2px 7px}
.live-meta h3{grid-row:1;font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.04em}
.live-meta p{grid-column:1/-1;margin-top:10px;font-size:15.5px;line-height:1.7;color:#3a372f}
.live-meta .url{grid-column:1/-1;margin-top:10px;font-size:13px}
.live-card:hover .url{color:var(--seal)}
.live-flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--hair);counter-reset:f}
.live-flow li{counter-increment:f;padding:16px 12px;font-size:13px;border-left:1px solid var(--hair)}
.live-flow li:first-child{border-left:0}
.live-flow li::before{content:"0" counter(f) "  ";color:var(--seal)}

/* 04 비용 — 장부 줄 (카드는 home.js 가 .price-ledger .price-card 로 그린다) */
.price-ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.price-ledger .price-card{position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-left:1px solid var(--hair)}
.price-ledger .price-card:first-child{border-left:0;padding-left:0}
.price-ledger .price-number{font-family:var(--mono);font-size:12px;color:var(--seal)}
.price-ledger .price-card h3{margin-top:14px;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:-.03em}
.price-ledger .price-card>p{margin-top:10px;font-size:14.5px;line-height:1.65;color:#3a372f;min-height:3.3em}
.price-ledger .price-card strong{margin-top:20px;font-family:var(--serif);font-weight:900;font-size:clamp(30px,2.8vw,40px);letter-spacing:-.04em}
.price-ledger .price-card ul{list-style:none;margin-top:16px;border-top:1px dashed #9a9486;padding-top:12px;display:grid;gap:7px;font-size:14px}
.price-ledger .price-card li::before{content:"— ";color:var(--ink2)}
.price-ledger .price-link{margin-top:auto;padding-top:22px;font-weight:700;font-size:14.5px}
.price-ledger .price-link:hover{color:var(--seal)}
.price-extra{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:30px 0;border-bottom:1px solid var(--hair)}
.price-extra .mono{font-size:12px;color:var(--seal)}
.price-extra h3{margin-top:8px;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:-.03em}
.price-extra p:not(.mono){margin-top:8px;font-size:14.5px;line-height:1.65;color:#3a372f;max-width:36em}
.price-extra b{display:block;margin-bottom:10px;font-family:var(--serif);font-size:24px;text-align:right}
.fine{margin-top:18px;font-size:13px;line-height:1.7;color:var(--ink2);max-width:52em}

/* 05 상담 문의 */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.contact-summary-wrap{border-top:1.5px solid var(--ink);padding-top:14px}
.contact-summary-wrap .mono{font-size:12px;color:var(--seal)}
.contact-summary{margin-top:10px;white-space:pre-line;font-size:15.5px;line-height:1.75;color:#3a372f}
.selection-reset{margin-top:14px;background:none;border:0;padding:0;font-size:13px;color:var(--ink2);text-decoration:underline;cursor:pointer}
.contact-pad fieldset{border:0;padding:16px 0 12px;border-bottom:1px solid rgba(80,120,170,.28)}
.contact-pad legend{font-family:var(--mono);font-size:12px;color:var(--ink2);padding:0}
.contact-pad legend small{margin-left:6px;font-size:11px}
.need-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.need-options button{min-height:40px;padding:8px 13px;border:1px solid var(--hair);background:transparent;font-weight:700;font-size:14px;cursor:pointer}
.need-options button:hover{border-color:var(--ink)}
.need-options button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.contact-pad .ink-btn{margin-top:22px}
.contact-pad .note{margin-top:14px;font-weight:700;color:var(--seal)}
.form-note{margin-top:12px;font-size:12.5px;color:var(--ink2)}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding:44px clamp(20px,5vw,72px);border-top:1.5px solid var(--rule);background:var(--paper)}
.foot img{height:18px;width:auto}
.foot p{font-size:14px;color:var(--ink2)}
.foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px;font-size:14px;font-weight:600}
.foot nav a:hover{color:var(--seal)}

@media (max-width:1100px){
  .pillar{grid-template-columns:1fr}
  .pillar.flip .pillar-copy{order:0}
  .pillar-copy>p{max-width:36em}
  .idx a{grid-template-columns:40px minmax(0,1.4fr) minmax(0,1fr) 22px}
  .i-tech{display:none}
  .price-ledger{grid-template-columns:1fr}
  .price-ledger .price-card{border-left:0;border-top:1px solid var(--hair);padding-left:0}
  .price-ledger .price-card:first-child{border-top:0}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .home-next .desk{height:210vh}
  .quote-controls{grid-template-columns:1fr;gap:10px}
  .quote-total{border-left:0;border-top:1px solid var(--hair);padding:12px 0 0}
  .quote-options .og{grid-template-columns:1fr;gap:6px}
  .quote-options button{min-height:44px}
  .auto-desk{padding-bottom:0}
  .auto-report{width:100%;transform:none}
  .slip.auto-slip{position:relative;width:88%;margin:-14px 0 0 auto;transform:rotate(1.6deg)}
  .cmp-controls{flex-direction:column;align-items:stretch}
  .cmp-mode button{flex:1;min-height:44px}
  .idx-filter{width:auto}
  .idx-filter button{flex:1 1 33%;justify-content:center;border-bottom:1px solid var(--hair);padding:10px 8px;font-size:13.5px}
  .idx a{grid-template-columns:28px minmax(0,1fr) 84px;grid-template-areas:"no name thumb" "no kind thumb";row-gap:3px;column-gap:12px;padding:14px 0}
  .idx a:hover{padding-left:0}
  .i-no{grid-area:no;align-self:start;padding-top:4px}.i-name{grid-area:name}.i-kind{grid-area:kind;font-size:13.5px}.i-badge{grid-area:badge;font-size:11px;margin-top:4px}
  .i-go{display:none}
  .i-thumb{display:block;grid-area:thumb;width:84px;aspect-ratio:16/10;object-fit:cover;background:var(--paper)}
  .live-grid{grid-template-columns:1fr;gap:48px}
  .live-flow{grid-template-columns:1fr 1fr 1fr}
  .live-flow li:nth-child(4){border-left:0}
  .price-extra{grid-template-columns:1fr}
  .price-extra b{text-align:left}
  .foot nav{margin-left:0}
}
@media (max-width:360px){
  .idx a{grid-template-columns:26px minmax(0,1fr) 72px}
  .i-thumb{width:72px}
  .cmp-range span{display:none}
}
@media (prefers-reduced-motion:reduce){.home-next .desk{height:auto}}