:root{--paper:#fffdfb;--ink:#66566d;--lavender:#cab4da;--line:#e5d8e5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(#eecbe3 1px,transparent 1px) 0 0/32px 32px,#faf3f9;color:var(--ink);font-family:'Noto Sans KR','Malgun Gothic',sans-serif}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit}
.nav{background:#fffafde9;border-bottom:1px solid #eadce9;padding:20px max(5vw,16px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{font:italic 30px Georgia,serif;color:#9676a3}
.nav a:last-child{font-size:12px;color:#947b9a}
.wrap{max-width:1130px;margin:auto;padding:35px 20px 75px}
.crumb{font-size:12px;color:#a98db0;margin:0 0 22px}
.hero,.preset{border:1px solid var(--line);background:var(--paper);box-shadow:0 10px 35px #8b6d9220;border-radius:22px;overflow:hidden}
.banner{height:210px;background:linear-gradient(120deg,#d9c4e9,#f6e6ef,#f0e5d8);display:grid;place-items:center}
.banner img{width:100%;height:100%;object-fit:cover}
.banner span{font:italic clamp(24px,5vw,48px) Georgia,serif;color:#8d6d98}
.hero-body{text-align:center;padding:38px 20px 44px}
.eyebrow{color:#b08db6;font-size:11px;letter-spacing:.21em;font-weight:bold}
.hero h1{font:600 clamp(39px,6vw,75px) Georgia,serif;margin:12px 0;color:#79617d}
.hero h1 em{font-weight:400;color:#ad83b7}
.hero p{font-size:13px;line-height:2;color:#908093}
.pill{display:inline-block;padding:8px 12px;margin:10px 4px 0;border:1px solid #dfcde4;border-radius:24px;font-size:10px;color:#a185ad}
.intro{text-align:center;margin:63px 0 35px}
.intro h2{font:italic 44px Georgia,serif;color:#896d91;margin:9px}
.intro a{display:inline-block;margin:15px 6px 0;border:1px solid #d6bfdf;background:#fffaff;padding:10px 18px;border-radius:25px;font-size:12px}
.preset{margin:0 0 34px;scroll-margin-top:20px}
.preset-head{background:linear-gradient(120deg,#fffafd,#f7effa);padding:24px 29px;border-bottom:1px solid var(--line)}
.preset-head h2{font-size:30px;margin:7px 0}
.preset-head p{margin:0;color:#a48eaa;font-size:11px;letter-spacing:.12em}
.preset-inner{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px}
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.sample{aspect-ratio:832/1216;border:1px solid #e4d5e5;background:linear-gradient(130deg,#e4d8ed,#f9e9ed);border-radius:12px;overflow:hidden;display:grid;place-items:center;color:#9a7eaa;text-align:center;font-size:12px}
.sample img{height:100%;width:100%;object-fit:cover}
.sample-hint{grid-column:1/-1;font-size:11px;color:#a48ba7;text-align:center}
.explain{color:#807080;font-size:13px;line-height:2;word-break:keep-all}
.safe{font-size:11px;color:#a385a6;margin:17px 0}
.prompt{margin:9px 0;border:1px solid #dfcde3;background:#fffaff;border-radius:12px;overflow:hidden}
.prompt summary{padding:13px 16px;cursor:pointer;font-weight:bold;color:#80668d}
.prompt-body{border-top:1px solid #e6d9e9;padding:14px}
.copy{float:right;border:1px solid #c9b2d3;background:#f5ecfa;border-radius:16px;padding:5px 12px;color:#80608e;font-size:11px}
.prompt pre{background:#f5f0f7;border:1px solid #ebe1ee;border-radius:9px;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font:11px/1.8 Consolas,monospace;clear:both}
.footer{text-align:center;color:#aa90aa;margin:54px 0 5px;font:italic 20px Georgia,serif}
@media(max-width:750px){
.preset-inner{grid-template-columns:1fr}
.samples{max-width:520px;margin:auto}
.banner{height:150px}
}
@media(max-width:450px){
.wrap{padding:20px 12px 55px}
.preset-inner{padding:14px;gap:18px}
.preset-head{padding:19px}
.preset-head h2{font-size:26px}
.hero-body{padding:28px 15px}
.intro h2{font-size:33px}
.prompt pre{font-size:10px}
}