:root{font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-weight:400;color:#202c29;background:#fff;line-height:1.65;font-synthesis:none}*{box-sizing:border-box}body{margin:0}img{max-width:100%;display:block}a{color:inherit}button,.button{font:inherit;background:var(--primary,#24594a);color:#fff;border:0;border-radius:6px;padding:13px 24px;cursor:pointer;display:inline-block;text-decoration:none;text-align:center}button:disabled{opacity:.5;cursor:wait}input,select,textarea{font:inherit;width:100%;padding:12px;border:1px solid #ccd5d1;border-radius:5px;background:#fff;color:inherit}label{display:block;margin:14px 0}textarea{min-height:90px}h1{font-size:clamp(24px,6.4vw,56px);line-height:1.34;white-space:normal;word-break:keep-all}h2{font-size:clamp(21px,5.4vw,36px);line-height:1.36;word-break:keep-all}p{overflow-wrap:anywhere}.container{padding-inline:max(20px,calc((100% - 1100px)/2))}.brand{display:flex;justify-content:space-between;gap:20px;padding:18px max(20px,calc((100% - 1100px)/2));font-weight:700}.section{padding-block:50px}.notice{text-align:center;background:var(--dark);color:white;padding:12px 20px}.image-block{position:relative}.image-block picture,.image-block img{width:100%}.image-cta.overlay{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);max-width:90%;min-width:180px}.image-cta.bottom{display:block;margin:18px auto;width:max-content;max-width:90%}.full-bleed{width:100%}.form-section{padding-block:60px 100px}.form-section.container{padding-inline:max(20px,calc((100% - 650px)/2))}.check{display:flex;align-items:flex-start;gap:10px}.form-section .check{gap:8px;min-height:32px;margin:4px 0}.form-section .consent-title{margin:4px 0}.form-section .detail-link{min-height:32px;padding:4px 0;margin-top:0}.form-section .submit-image{background:none;border:0;padding:0}.submit-image img{width:100%;height:auto}.privacy-body{overflow:auto;max-height:60vh}.privacy-close{float:right;background:none;color:#202c29;width:auto;margin:0;padding:0 8px;font-size:24px}.check input{width:20px;height:20px;flex-shrink:0;margin-top:4px}details{border-bottom:1px solid #e0e7e3;padding:14px 0}summary{cursor:pointer}.detail-link{display:block;width:100%;background:none;border:0;border-bottom:1px solid #e0e7e3;color:#4a6b60;padding:13px 0;text-align:left;text-decoration:underline;cursor:pointer;font-size:14px}.consent-dialog{border:0;border-radius:10px;padding:24px;max-width:min(520px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);overflow:auto;color:inherit}.consent-dialog::backdrop{background:rgba(0,0,0,.45)}.consent-dialog h3{margin:0 0 12px;font-size:18px}.consent-dialog p{margin:8px 0;font-size:14px}.consent-dialog .button{margin-top:18px;width:100%}form button{width:100%;margin-top:24px}.honeypot{position:absolute;left:-9999px;opacity:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0}.grid>article,.grid>div,.grid>blockquote{margin:0;padding:20px;background:#f4f7f5;border-radius:6px}dd{font-size:30px;font-weight:700;margin:0}.hero-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}.hero-layout img{width:100%}.icon{width:28px;height:28px}table{border-collapse:collapse;width:100%;table-layout:fixed}th,td{padding:12px;border-bottom:1px solid #dfe6e2;overflow-wrap:anywhere;text-align:left}figure{margin:0}footer{background:#f5f7f6;padding:30px 20px 100px;text-align:center;font-size:12px;line-height:1.4;color:#607168}.floating{position:fixed;right:20px;bottom:24px;z-index:90;background:var(--primary);color:#fff;padding:15px;border-radius:6px}.floating img{max-width:240px}#form-success p{white-space:pre-line}.floating .floating-cta{display:block;padding:0;background:none;color:inherit;border-radius:0;text-align:center}.mobile-cta{display:none}.pixel-frame{display:none;width:0;height:0;border:0}[hidden]{display:none!important}@media(max-width:767px){.grid{grid-template-columns:1fr}.hero-layout{grid-template-columns:1fr}.section{padding-block:32px}.brand{font-size:14px}.mobile-cta{display:flex;position:fixed;bottom:0;left:0;right:0;padding-bottom:env(safe-area-inset-bottom);z-index:100;background:var(--dark)}.mobile-cta a{flex:1;min-width:0;padding:16px 8px;text-align:center;color:white;text-decoration:none}.floating{bottom:80px}.form-section{padding-bottom:100px}.container,.form-section.container{padding-inline:16px}th,td{padding:8px;font-size:14px}}
.note{font-size:14px;line-height:1.65;color:#5a6b63;margin:10px 0}.prose-body{margin:14px 0;white-space:normal;font-size:18px}.table-caption{font-size:14px;color:#5a6b63;margin:0 0 8px}table.spec{table-layout:fixed}table.spec th{width:38%;font-weight:400;color:#5a6b63;text-align:left;vertical-align:top}table.spec td{font-weight:600}.person{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:start;margin:18px 0}.person img{width:100%;border-radius:6px;object-fit:cover;aspect-ratio:3/4}.person h3{margin:0 0 6px;font-size:22px}.person-role{margin:0 0 8px;font-weight:600}.person-lines{margin:0;padding-left:18px}.person-lines li{margin:3px 0}@media(max-width:767px){.person{grid-template-columns:1fr}.person img{max-width:180px}table.spec th{width:42%}}.eyebrow{font-size:15px;color:#5a6b63;margin:0 0 6px}.hero-layout ul{list-style:none;padding:0;margin:14px 0}.hero-layout ul li{margin:8px 0}.process .grid>li{padding:14px 20px}.process .grid>li h3{margin:0}
h1,.serif h2{font-family:'Noto Serif KR','Pretendard Variable',Pretendard,serif;font-weight:600}h2,h3,button,.button,.detail-link{font-weight:600}strong,.person-role,dd,th{font-weight:500}dd{font-weight:700}.bg-cream{background:#f3f0e9}.bg-gray{background:#eceae6}.bg-dark{background:var(--dark);color:#f4f1ea}.bg-dark h1,.bg-dark h2,.bg-dark h3{color:#fff}.bg-dark .note,.bg-dark .eyebrow,.bg-dark .table-caption{color:#c3cec7}.bg-dark a{color:inherit}.bg-dark .button{background:#f4f1ea;color:var(--dark)}.bg-dark table.spec th{color:#c3cec7}.bg-dark table.spec td,.bg-dark th,.bg-dark td{border-color:#37544a}.bg-dark input,.bg-dark select,.bg-dark textarea{background:#fff;color:#1d2320;border-color:#37544a}.bg-dark .detail-link{color:#c3cec7;border-bottom-color:#37544a}.bg-dark .grid>article,.bg-dark .grid>div,.bg-dark .grid>blockquote{background:#244136}.brand-mark .logo{height:26px;width:auto;display:block}.brand-mark .logo-light{display:none}.brand.on-dark .logo-dark{display:none}.brand.on-dark .logo-light{display:block}@media(max-width:767px){.brand-mark .logo{height:22px}}.brand.on-dark{background:var(--dark);color:#f4f1ea}.product-name{font-size:clamp(18px,4.6vw,24px);font-weight:600;margin:20px 0 6px}
footer p{margin:4px 0}footer .privacy-link{font-weight:700;font-size:12px}
/* 동의 상세 창은 섹션 배경과 무관하게 흰 바탕·어두운 글자로 고정한다. 어두운 섹션(bg-dark)의 글자색·버튼색이 창 안으로 상속돼 흰 바탕에 흰 글씨가 되던 문제(10/1 시연 중 발견) */
.consent-dialog,.bg-dark .consent-dialog{background:#fff;color:#202c29}.bg-dark .consent-dialog h3{color:#202c29}.bg-dark .consent-dialog .button{background:var(--primary,#24594a);color:#fff}

/* 10/2 레이아웃 수정안 — 강조 표기([[ ]], lib/render.php emphasis)와 숨은 표현 옵션(section_style). 옵션이 없는 섹션에는 아래 규칙이 걸리지 않는다. 강조색은 밝은 배경 #C88C2E, 어두운 배경(bg-dark·배경 이미지) #fff5b5. 첫 화면 제목·강조 키운 제목은 360~430px 폰에서 시안 줄바꿈이 깨지지 않게 글자 크기를 화면 폭에 묶는다(첫 줄 실측 15.1em·15.5em). */
.em{color:#C88C2E;font-weight:700}.em-lg{font-size:1em}.em-scale-lg .em-lg{font-size:1em}.em-semibold .em{font-weight:600}.bg-dark .em,.hero-bgimg .em{color:#fff5b5}.al-center{text-align:center}.al-left{text-align:left}.al-center .hero-layout,.hero-bgimg .hero-layout{grid-template-columns:1fr}.al-center.hero h1{font-size:min(56px,calc((100vw - 40px)/16))}.em-scale-lg h2{font-size:min(36px,calc((100vw - 40px)/16.5))}.body-lg .prose-body{font-size:18px}.note-sm .note{font-size:14px}.hero-bgimg{position:relative;overflow:hidden;isolation:isolate}.hero-bgimg .hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2}.hero-bgimg::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--dark) 3%,transparent 45%),rgba(8,18,13,.6)}.product-serif .product-name{font-family:'Noto Serif KR','Pretendard Variable',Pretendard,serif;font-weight:500}.chip-lead .hero-layout li:first-child::after{content:'';display:block;width:64px;height:1px;background:currentColor;opacity:.75;margin:24px 0 20px}.al-center.chip-lead .hero-layout li:first-child::after{margin-inline:auto}.notice.nt-compact{padding:8px 16px;font-size:14px;line-height:1.5}.image-block.fit-screen picture{display:block}.image-block.fit-screen img{width:auto;max-width:100%;max-height:90vh;max-height:90svh;margin-inline:auto}.image-block.pad-b{padding-bottom:50px}.photo-natural .person img{aspect-ratio:auto;height:auto;object-fit:contain}
@media(max-width:767px){.notice.nt-compact{font-size:13px}.nt-compact .nt-text{display:block}.image-block.pad-b{padding-bottom:32px}}

/* CTA 버튼 이미지(10/12 발주처 요청 — 첫 화면·이미지 블록 ctaImage, 플로팅 buttonImage). 배경·안쪽 여백 없이 이미지 비율 그대로. 표시 폭 상한 360px(이미지 블록은 블록 폭 90%와 360px 중 작은 값, 플로팅은 기존 .floating img 의 240px)이라 상한의 2배로 만든 이미지가 고해상도 화면에서 선명하다. 위치 클래스(overlay·bottom)는 그대로 쓰고 가운데 정렬만 폭 계산이 이미지 기준이 되게 바꾼다. */
.button.cta-image,.bg-dark .button.cta-image{background:none;padding:0;border-radius:0;max-width:min(100%,360px);vertical-align:top}
.cta-image img,.hero-layout .cta-image img,.image-block .cta-image img{display:block;width:auto;height:auto;max-width:100%;max-height:none;margin:0}
.image-cta.overlay.cta-image{left:0;right:0;margin-inline:auto;transform:none;width:max-content;max-width:min(90%,360px);min-width:0}
.image-cta.bottom.cta-image{max-width:min(90%,360px)}
.floating .cta-image img{max-width:240px}
/* 버튼 이미지를 쓰는 플로팅 배너는 주 색상 상자·안쪽 여백 없이 이미지만 보인다(이미지로 만든 버튼 둘레에 색 테두리가 남지 않게). */
.floating.floating-image{background:none;padding:0}
/* 10/15 LP 수정 요청(발주처 메일) — 승인 문안·레이아웃은 그대로 두고 가독성만 보완한다. 위쪽 규칙에서 바꾼 값: 강조 크기 1em(같은 제목 안에서 크기를 맞추고 색·굵기로만 강조), 본문 18px, 각주 14px·행간 1.65, 하단 12px, 첫 화면 특징 문장 고딕 통일·간격 8px. */
h1,.serif h2{letter-spacing:-.02em}
.form-section button[type=submit]:not(.submit-image){background:#F4F1EA;color:#14291F;min-height:56px;font-size:18px;font-weight:700;padding:0 24px}
.em-b{font-weight:700}
/* 본문·각주는 단어 단위로 줄을 바꾼다(한글 글자 사이 줄바꿈 방지 — 모바일에서 "(2025년 02월)" 날짜·"않습니다" 가 중간에 끊기던 문제). 날짜 안 공백은 관리자 구성에서 줄바꿈 없는 공백(U+00A0) */
.prose-body,.note{word-break:keep-all}
sup.fn{font-size:.55em;line-height:0;position:relative;top:-.75em;vertical-align:baseline;margin-left:.04em}
.note-link{text-decoration:underline;text-underline-offset:2px}
.person{grid-template-columns:200px minmax(0,1fr);gap:28px}
.person h3{font-size:26px}
.person-role,.person-lines{font-size:18px}
.person-lines li{margin:5px 0}
.personCard .note{font-size:15px}
/* 첫 화면 설명 목록도 데스크탑에서는 본문과 같은 18px. 모바일은 줄 구성(한 줄 문장)이 깨지지 않게 기존 크기 */
@media(min-width:768px){.hero-layout ul{font-size:18px}
}
@media(max-width:767px){.person{grid-template-columns:1fr;gap:20px}
.person img{max-width:220px}
.person h3{font-size:24px}
}