@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f5f3ee;color:#24372c;font-family:'Noto Sans KR',sans-serif;letter-spacing:-.035em}a{color:inherit}button,input,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}header,main,footer{max-width:1180px;margin:auto}header{padding:30px 24px;display:flex;justify-content:space-between;gap:15px;align-items:center}header a{text-decoration:none;font-size:13px}.brand{font-size:23px;font-weight:900}.brand span{margin-left:14px;font-size:10px;letter-spacing:.1em;font-weight:500}main{padding:0 24px}.hero{padding:65px 0 62px;position:relative}.eyebrow{font-size:13px;font-weight:700;letter-spacing:.02em;color:#647463}h1{font-size:clamp(40px,5.6vw,72px);line-height:1.16;font-weight:800;margin:25px 0;letter-spacing:-.07em}.intro{font-size:18px;line-height:1.8;color:#5a685b}.steps{display:flex;gap:14px;align-items:center;margin-top:32px;font-size:12px}.steps span{border:1px solid #ccd1c7;padding:9px 14px;border-radius:24px}.steps i{color:#8c998d}.url-panel{background:#e6ecdf;border-radius:24px;padding:34px}.num{font-size:12px;font-weight:800;color:#5d735b}h2{font-size:26px;letter-spacing:-.045em;margin:8px 0 10px}.url-panel p{color:#697564;font-size:14px}.url-panel label{font-size:12px;display:block;margin:26px 0 8px}input[type=url]{width:100%;border:1px solid #c0cabb;border-radius:12px;padding:17px 19px;background:#fff;font-size:16px;min-width:0}#error{color:#b22e2e}.design-section{margin-top:70px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:24px}.section-top>p{font-size:13px;line-height:1.7;color:#6a7468}.caption{font-size:12px;line-height:1.8;color:#72796c}.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-top:24px}.card{border:1px solid #dcded5;border-radius:19px;overflow:hidden;background:#fff;position:relative;transition:box-shadow .2s}.card:has(input:checked){box-shadow:0 0 0 3px #355e45}.choice{cursor:pointer;display:block;padding:12px 12px 0}.choice>input{position:absolute;opacity:0;width:1px;height:1px}.card:focus-within{outline:3px solid #96ac81;outline-offset:4px}.card-title{display:flex;gap:12px;align-items:center;margin:16px 9px 0}.card-title>span{font-size:12px;color:#84907e}.card h3{font-size:18px;margin:0}.tick{margin-left:auto;border-radius:50%;background:#edf0e9;color:transparent;width:25px;height:25px;text-align:center}.card:has(input:checked) .tick{background:#355e45;color:white}.choice>p{font-size:12px;color:#6e786a;margin:7px 9px 12px}.reference{display:inline-block;font-size:11px;margin:0 21px 19px;text-decoration:underline;text-underline-offset:4px}.action{margin:35px 0 60px;padding:25px;background:#e6ecdf;border-radius:16px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}.action div{flex:1;min-width:160px}.action span{display:block;font-size:11px;color:#65765f}.action strong{font-size:19px}.action small{width:100%;font-size:11px;color:#61745f}button{border:0;background:#31563f;color:white;padding:15px 23px;border-radius:9px;font-size:14px;font-weight:700}button:hover{background:#254532}button:disabled{opacity:.6}.secondary{background:white;color:#31563f;border:1px solid #c6d1c4}#result{background:#fff;border-radius:22px;padding:35px;margin-bottom:65px;scroll-margin-top:20px}#result>p{line-height:1.8}#result[hidden]{display:none}.result-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.result-actions a{font-size:12px}#copy-status{font-size:13px;color:#31563f}summary{cursor:pointer;padding:15px 0;font-size:13px}textarea{width:100%;height:260px;border:1px solid #ddd;padding:14px;border-radius:8px;font-size:13px}.notes{border-top:1px solid #d7dccf;padding:38px 0 65px}.notes>div{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:30px 0}.notes b{font-size:15px}.notes p{font-size:13px;line-height:1.8;color:#707a6a}.notes a{font-size:13px}footer{border-top:1px solid #d7dccf;padding:25px 24px 40px;font-size:12px;display:flex;justify-content:space-between;gap:20px;color:#697564}:focus-visible{outline:3px solid #829e6c;outline-offset:4px}.guide{max-width:820px;padding-bottom:60px}.guide section{background:white;border-radius:16px;padding:25px;margin:18px 0}.guide p,.guide li{font-size:15px;line-height:1.9}.guide li{margin:12px 0}.guide h1{font-size:45px}.guide h2{font-size:23px}.guide code{font-size:13px;overflow-wrap:anywhere}.guide table{width:100%;border-collapse:collapse;font-size:13px}.guide td,.guide th{padding:13px 8px;border-bottom:1px solid #ddd;text-align:left}
@media(max-width:650px){header{padding:23px 20px}.brand span{display:none}header a{font-size:11px}.brand{font-size:22px}main{padding:0 20px}.hero{padding:35px 0 40px}.intro{font-size:15px}.steps{gap:6px;font-size:10px}.steps span{padding:8px}.steps i{display:none}.url-panel{padding:23px;border-radius:16px}h2{font-size:22px}.section-top{display:block}.design-section{margin-top:43px}.cards{gap:20px;grid-template-columns:1fr}.preview{height:230px}.mini-body{height:150px}.mini-body strong{font-size:29px}.action{padding:20px;gap:15px}.action button{width:100%;font-size:13px}#result{padding:23px}.notes>div{grid-template-columns:1fr;gap:10px}.notes{padding-bottom:35px}footer{display:block;line-height:2}footer span{display:block}.guide h1{font-size:34px}.guide section{padding:20px}.guide ul,.guide ol{padding-left:20px}}
h1,h2,h3{word-break:keep-all}@media(max-width:650px){h1{font-size:clamp(32px,8.8vw,48px)}}

/* Reference gallery: actual site screenshots, no synthetic mockups. */
.real-preview{aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#ededed;border:1px solid #e4e4df}
.real-preview img{display:block;width:100%;height:auto;object-fit:contain}
.card-links{display:flex;align-items:center;gap:20px;margin:0 21px 19px}.card-links .reference{margin:0}.zoom-preview{padding:0;background:none;color:#24372c;font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:4px;border-radius:0}.zoom-preview:hover{background:none;color:#17271c}
.preview-dialog{width:min(1280px,96vw);max-width:96vw;max-height:94vh;border:0;border-radius:12px;padding:16px;background:white;color:#24372c}.preview-dialog::backdrop{background:#101710bf}.dialog-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.dialog-bar button{padding:8px 15px;font-size:12px}.preview-dialog img{width:100%;height:auto;display:block}.preview-dialog>p{font-size:11px;color:#6a7167;margin:12px 0 0}
.hero{padding:25px 0 30px}.hero h1{font-size:46px;margin:16px 0;line-height:1.2}.hero .intro{font-size:15px}.steps{margin-top:20px}.url-panel{padding:25px 30px}.url-panel label{margin-top:16px}.design-section{margin-top:45px}
@media(max-width:650px){.hero h1{font-size:34px}.url-panel{padding:22px}.preview-dialog{padding:10px}.card-links{gap:18px}.card-title h3{font-size:21px}}