:root{color-scheme:light;--ink:#20323d;--muted:#53646b;--paper:#fffdf8;--line:#dce3da;--teal:#235b5d;--sand:#faead5}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 84% 5%,#fae9ce,transparent 56%),#edf2ef;font:16px/1.65 system-ui,sans-serif;word-break:keep-all}
nav{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;padding:13px;background:#fffdf8;border-bottom:1px solid var(--line);font-size:13px}a{color:var(--teal)}nav a{text-decoration:none;font-weight:750}nav [aria-current]{text-decoration:underline;text-underline-offset:4px}
main{width:min(100% - 24px,880px);margin:20px auto 0}.panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 42px #294b4712;overflow:hidden}
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center}.cover{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;object-position:center 45%}.hero-copy{padding:26px}.hero-copy p:not(.eyebrow){color:var(--muted);margin:10px 0 15px}.eyebrow{margin:0 0 9px;color:#3b6662;font-size:11px;font-weight:800;letter-spacing:.12em}.eyebrow span{color:#a76633}.date{display:inline-block;color:#385a55;background:#e9f0e7;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700}
h1,h2{line-height:1.2;letter-spacing:-.045em;margin:5px 0 8px}h1{font-size:clamp(32px,5vw,46px)}h2{font-size:25px}.studio{display:grid;grid-template-columns:1fr 1.35fr;margin-top:16px}.settings,.draft{min-width:0;padding:22px}.settings{background:#f1f5ed}.draft{background:var(--paper)}
fieldset{min-width:0;border:0;padding:0;margin:16px 0 0}legend,.draft-head label{font-weight:800;font-size:14px}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.options.tones{grid-template-columns:repeat(3,minmax(0,1fr))}.options label{position:relative;min-width:0;cursor:pointer}.options input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.options span{display:grid;place-items:center;min-height:44px;background:#fff;border:1px solid #cfdcd1;border-radius:10px;font-size:13px;font-weight:650;padding:5px;text-align:center}.options input:checked+span{background:#dcece2;border-color:#639588;color:#194746}.options input:focus-visible+span,button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #b06a36;outline-offset:2px}
button,textarea{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;min-height:44px;border-radius:10px;background:#fffdf8;border:1px solid #c9d7d1;font-weight:750;padding:9px 11px}button:hover:not(:disabled){filter:brightness(.96)}button:disabled{opacity:.55;cursor:default}.draft-head{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:10px}.draft-head button{font-size:12px;color:var(--teal)}
textarea{display:block;width:100%;min-height:132px;padding:14px;border:1px solid #d9ccae;border-radius:13px;background:#fff7e8;resize:vertical;line-height:1.65;overflow-wrap:anywhere}.draft-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;margin-top:7px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.actions button{min-height:48px;font-size:14px}.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.example{margin-top:16px;padding:20px 22px}.example ul{list-style:none;padding:0;margin:12px 0 16px}.example li{padding:9px 0;border-bottom:1px solid #e5e7df;font-size:14px}.example li span{display:inline-block;margin-right:9px;color:#3b6662;font-weight:750}.kakao-button{background:#fee500;border-color:#fee500;color:#211b0d}.example button{font-size:14px}#status,#share-status{font-size:13px;color:var(--teal);margin:8px 0 0}#status:empty,#share-status:empty{display:none}
.ad-container{overflow:hidden}.ad-top{margin-bottom:14px}.ad-bottom{margin-top:20px}.coupang-ad{margin:15px auto 0;text-align:center;overflow:clip}.coupang-ad iframe{max-width:100%}.coupang-ad p{text-align:left;overflow-wrap:anywhere;font-size:11px;color:var(--muted);margin:8px 0}footer{text-align:center;padding:19px;font-size:12px;color:var(--muted)}
@media(max-width:680px){main{margin-top:12px}.hero,.studio{grid-template-columns:1fr}.cover{aspect-ratio:1.6;min-height:0;height:auto;object-fit:cover}.hero-copy,.settings,.draft,.example{padding:18px 16px}.options{grid-template-columns:repeat(4,minmax(0,1fr))}.settings{border-bottom:1px solid var(--line)}}