/* 조합형 배치는 슬롯만 정렬하고 글자 스타일·배경은 각 콘텐츠가 담당한다. */.section-stack{display:flex;flex-direction:column;gap:var(--stack-gap, var(--space-section))}.section-stack--compact{--stack-gap:var(--space-xl)}.split-layout{display:grid;grid-template-columns:var(--split-columns, repeat(2, minmax(0, 1fr)));align-items:var(--split-align, center);gap:var(--split-gap, var(--space-xl))}.split-layout > *{min-width:0}.split-layout--balanced{--split-columns:minmax(0, .92fr) minmax(0, 1.08fr);--split-gap:40px}.split-layout--sidebar{--split-columns:minmax(0, 300px) minmax(0, 1fr);--split-gap:20px 40px}.split-layout--index{--split-columns:minmax(0, 280px) minmax(0, 1fr);--split-gap:60px;--split-align:start}.split-layout__aside-note{grid-column:2}.feature-grid{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);align-items:center;gap:20px 24px}.feature-grid__primary{grid-column:1;grid-row:1/4}.feature-grid__item{grid-column:2}/* 강조 문구와 섹션 제목에 사용하는 공통 스타일. */.display-heading{font-size:var(--font-size-display);line-height:1.3;letter-spacing:-0.04em;text-wrap:balance}.display-heading--hero{font-size:var(--font-size-display-hero);line-height:1.12;letter-spacing:-0.045em}.display-heading--hero > strong{display:block;color:inherit;font-weight:inherit}.display-heading--hero strong > span{display:block}.section-heading{text-align:left;margin-bottom:32px}.section-heading p{color:var(--muted);margin:12px 0 0;max-width:760px;font-size:15px}.section-heading > .eyebrow{background:none;padding:0;color:var(--muted);font-size:11px;letter-spacing:.04em;margin-bottom:10px}.section-heading > .text-link{margin-top:24px}.section-heading--center{text-align:center}.section-heading--center p{margin-inline:auto}.section-heading--showcase{margin:0}.section-heading--showcase p{margin-top:20px}.section-heading--index{margin:16px 0 0}.action-group{display:flex;justify-content:var(--action-align, center);flex-wrap:wrap;align-items:center;gap:var(--action-gap, 24px);margin:var(--action-space, 24px) 0 0}.action-group > .text-link{color:var(--muted)}.action-group > .text-link:hover{color:var(--ink)}/* 소개 콘텐츠는 분할 배치뿐 아니라 어떤 배치에도 넣을 수 있다. */.feature-intro{--action-align:flex-start;--action-gap:20px;--action-space:28px;padding:72px 0 48px}.feature-intro__copy{text-align:left}.brand-lettering{width:min(100%, 280px);margin:0 0 24px}.brand-lettering img{display:block;width:100%;height:auto}@media (max-width: 920px){.brand-lettering{margin-inline:auto}}@media (max-width: 800px){.brand-lettering{width:min(100%, 120px)}}.feature-intro__promise{display:block;margin-bottom:16px;font-size:20px;font-weight:500;line-height:1.5;letter-spacing:-.03em;color:var(--muted)}.feature-intro__description{max-width:36ch;margin:24px 0 0;color:var(--muted);text-wrap:pretty;word-break:keep-all}.feature-intro__trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:var(--action-align);gap:8px 18px;margin-top:14px;font-size:12px;color:var(--muted)}.feature-intro__trust > span{display:inline-flex;align-items:center;gap:6px}.feature-intro__trust .icon{flex:0 0 16px;width:16px;height:16px}/* 겹침 배치는 문서·도장 종류나 내부 마크업에 의존하지 않는다. */.layered-preview{position:relative;isolation:isolate;width:100%;max-width:520px;margin-inline:auto;padding:64px 12px 28px}.layered-preview::before{content:"";position:absolute;inset:44px 0 8px 28px;z-index:-1;border-radius:var(--radius);background:var(--soft);transform:rotate(5deg)}.layered-preview__main{position:relative;box-shadow:var(--shadow-overlay);transform:rotate(-3deg)}.layered-preview__detail{position:absolute;top:0;right:0;z-index:2;width:132px;box-shadow:var(--shadow-popover);transform:rotate(7deg)}/* 문서와 투명 이미지의 외형은 각 컴포넌트가 담당한다. */.document-preview{padding:24px;border:1px solid var(--color-border-interactive);border-radius:var(--radius);background:var(--surface)}.document-preview__toolbar{display:flex;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}.document-preview__toolbar .icon{width:15px;height:15px;color:var(--red)}.document-preview__body{padding:26px 0 4px;background:var(--surface);border-radius:var(--radius-badge)}.document-preview__body h2{font-size:19px;text-align:center}.document-preview__body > p{font-size:13px;color:var(--muted);margin-top:12px}.document-preview__lines{display:grid;gap:8px;margin:16px 0}.document-preview__lines span{height:5px;background:var(--color-document-line);border-radius:3px}.document-preview__lines span:last-child{width:82%}.document-preview .signature-row{--seal-size:72px;min-height:120px;padding:0;margin-top:20px;background:transparent;font-size:19px}.document-preview .seal-target img{animation:seal-arrive .45s .12s both}.document-preview__caption{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--border);padding-top:12px;margin-top:12px;color:var(--muted);font-size:12px;line-height:1.6}.document-preview__caption > .icon{flex:0 0 18px;width:18px;height:18px;margin-top:1px}.document-preview__caption small{display:block;margin-top:6px;font-size:11px}.image-preview{padding:8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-align:center;font-size:12px;color:var(--muted)}.image-preview__checker{overflow:hidden;margin-bottom:6px;border-radius:var(--radius-badge)}.image-preview__checker img{width:100%}.image-preview__badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink)}.image-preview__badge .icon{width:15px;height:15px}.image-preview figcaption > small{display:block;font-size:9px}@keyframes seal-arrive{from{opacity:0;transform:scale(1.16) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}/* 번호가 붙은 단계는 제작 카드의 배치·테두리 규칙을 상속하지 않는다. */.steps-overview{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));list-style:none;padding:0;margin:0;gap:24px}.steps-overview__item{padding:12px 8px;text-align:center}.steps-overview__symbol{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;color:var(--ink)}.steps-overview__symbol > .icon{width:32px;height:32px}.steps-overview__number{display:inline-grid;place-items:center;flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted)}.steps-overview h3{font-size:16px}.steps-overview__item p{margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}/* 예시 카드의 크기는 명시적으로 선택하며 배치 순서로 외형을 결정하지 않는다. */.showcase-band{padding-block:64px;background:var(--panel-wash);box-shadow:0 0 0 100vmax var(--panel-wash);clip-path:inset(0 -100vmax)}.sample-card{display:flex;align-items:center;gap:14px;text-align:left}.sample-card--featured{--sample-size:244px;--sample-padding:24px;--sample-image-size:188px;flex-direction:column;align-items:stretch;gap:8px;text-align:center}.sample-card--compact{--sample-size:84px;--sample-padding:10px;--sample-image-size:60px}.sample-card__preview{display:grid;place-items:center;width:min(100%, var(--sample-size));aspect-ratio:1;padding:var(--sample-padding);border:1px solid var(--border);border-radius:var(--radius);align-self:center}.sample-card--featured .sample-card__preview{margin-bottom:4px}.sample-card--compact .sample-card__preview{flex:0 0 var(--sample-size)}.sample-card__preview img{width:var(--sample-image-size);height:auto;aspect-ratio:1;object-fit:contain;border-radius:var(--radius-control)}.sample-card h3{margin:0;font-size:16px}.sample-card p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}.caption-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted)}.caption-note .icon{flex:0 0 15px}/* 연결 자료는 행으로 구성하며 상위 선택자로 카드 규칙을 되돌리지 않는다. */.resource-list{display:flex;flex-direction:column}.resource-link{display:flex;align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid var(--border);overflow:hidden;text-decoration:none}.resource-link:first-child{padding-top:0}.resource-link:last-child{border-bottom:0;padding-bottom:0}.resource-link__media{display:grid;place-items:center;width:52px;flex:0 0 52px;height:52px;overflow:hidden;border-radius:var(--radius)}.resource-link__copy{display:flex;flex-direction:column;flex:1;min-width:0}.resource-link__copy .app-label{align-self:flex-start}.resource-link__copy h3{margin:8px 0;font-size:17px}.resource-link__copy .text-link{margin-top:auto;font-size:13px}.resource-link:hover h3{color:var(--red)}.faq-section{width:100%;background:var(--surface);border-radius:var(--radius)}.faq-section .faq{padding:0;background:transparent}.cta-panel--statement{--cta-padding:48px 0;--cta-border-width:0;--cta-title-size:var(--font-size-display-statement);--cta-title-line-height:1.3;--cta-title-max-width:24ch;--cta-title-wrap:balance;--cta-eyebrow-color:var(--muted);--cta-button-spacing:28px}/* 이전 배치를 되돌리는 규칙을 쌓지 않고 반응형 변경을 한곳에 모은다. */@media (max-width: 1023px){.split-layout--balanced{--split-columns:1fr;--split-gap:32px}.split-layout--sidebar{--split-columns:minmax(0, 260px) minmax(0, 1fr);--split-gap:20px}.split-layout--index{--split-columns:minmax(0, 240px) minmax(0, 1fr);--split-gap:32px}.feature-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}.display-heading--hero strong > span{display:inline}.feature-intro{--action-align:center;padding:40px 0 16px}.feature-intro__copy{max-width:620px;margin-inline:auto;text-align:center}.feature-intro__description{max-width:44ch;margin-inline:auto}.sample-card--featured{--sample-size:160px;--sample-padding:14px;--sample-image-size:112px}.sample-card--compact{--sample-size:56px;--sample-padding:6px;--sample-image-size:40px;gap:10px}.sample-card--compact p{display:none}}@media (max-width: 800px){.section-stack{gap:var(--stack-gap, var(--space-section-mobile))}.steps-overview{grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px 12px}.steps-overview__item{padding:8px 4px}.steps-overview__symbol{gap:8px;margin-bottom:12px}.steps-overview h3{font-size:14px}.steps-overview__item p{font-size:12px}.sample-card h3{font-size:14px}.sample-card p{font-size:12px}.resource-link__copy h3{line-height:1.5}}@media (max-width: 600px){.split-layout--balanced{--split-gap:12px}.split-layout--sidebar,.split-layout--index{--split-columns:1fr;--split-gap:0}.split-layout__aside-note{grid-column:auto;margin-top:24px;justify-content:flex-start}.section-heading--showcase{margin-bottom:28px}.section-heading--showcase > .text-link{margin-top:16px}.section-heading--index{margin:0 0 24px}.feature-intro{--action-gap:16px;--action-space:22px;padding-top:32px}.feature-intro__promise{font-size:16px;margin-bottom:10px}.feature-intro__description{margin-top:18px}.feature-intro__trust{margin-top:10px}.layered-preview{padding:48px 10px 20px}.layered-preview::before{inset:44px 8px 8px 20px;transform:rotate(3deg)}.layered-preview__main{transform:rotate(-2deg);box-shadow:var(--shadow-popover)}.layered-preview__detail{width:92px;right:4px}.document-preview{padding:16px}.document-preview__body{padding-top:18px}.document-preview__body h2{font-size:16px}.document-preview__lines{margin:12px 0}.document-preview .signature-row{--seal-size:56px;min-height:88px;margin-top:10px;font-size:16px}.document-preview__caption{padding-top:10px;margin-top:8px;font-size:11px}.image-preview{padding:6px}.image-preview__badge{font-size:9px;gap:3px}.image-preview__badge .icon{width:12px;height:12px}.showcase-band{padding-block:36px}.feature-grid{grid-template-columns:minmax(0, max-content) minmax(0, max-content);justify-content:center}.sample-card--featured{--sample-size:148px}.sample-card--compact h3{font-size:12px}.resource-link{gap:16px;padding-block:16px}.resource-link__copy h3{font-size:15px}.cta-panel--statement{--cta-padding:32px 0}}@media (prefers-reduced-motion: reduce){.document-preview .seal-target img{animation:none}}/* 자체 마진이 있는 컴포넌트도 포함해 세로 간격은 스택의 gap이 담당한다. */.section-stack > *{margin-block:0}