:root { --bg:#FBF5EE; --ink:#2A2420; --sub:#7C7468; --gold:#C9A96E; --rose:#C99085; --deep:#1F2B26; --line:#E7D5C8; --card:#fff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif; line-height:1.6; }
a { color:inherit; }
.top { max-width:640px; margin:0 auto; padding:18px 16px 0; }
.brand { font-size:13px; letter-spacing:.3em; color:var(--rose); text-decoration:none; font-weight:700; }
main { max-width:640px; margin:0 auto; padding:16px 16px 48px; display:grid; gap:14px; }
.hero { padding:18px 2px 6px; }
.eyebrow { font-size:13px; color:#8a7550; letter-spacing:.12em; }
.hero h1 { font-size:26px; line-height:1.35; margin:6px 0 10px; word-break:keep-all; }
.lead { color:var(--sub); margin:0; font-size:15px; word-break:keep-all; }
.box { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
form.box { display:grid; gap:14px; }
label { font-size:14px; font-weight:600; display:grid; gap:6px; }
.lbl { font-size:14px; font-weight:600; }
input, select { font:inherit; font-size:16px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%; min-width:0; }
input[type=radio] { width:auto; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row { display:flex; gap:18px; align-items:center; } .row label { font-weight:400; display:flex; gap:6px; align-items:center; }
.row.wrap { flex-wrap:wrap; gap:10px; } .row.wrap input[type=date] { width:auto; flex:1 1 160px; }
button { font:inherit; border:0; border-radius:8px; padding:12px 14px; cursor:pointer; background:var(--ink); color:#fff; font-weight:700; }
button:disabled { opacity:.55; cursor:default; }
button.sub { background:#fff; color:var(--ink); border:1px solid var(--line); font-weight:600; }
button.wide { width:100%; }
.err { color:#a3342a; font-size:14px; }
.fine, small { color:var(--sub); font-size:12px; }
.sm { font-size:13px; color:var(--sub); margin:6px 0 10px; word-break:keep-all; }
.loading { text-align:center; padding:28px 16px; }
.spin { width:38px; height:38px; margin:0 auto 12px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--rose); animation:sp 0.9s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.lt { font-weight:700; margin-bottom:4px; }
#view p { margin:0 0 14px; line-height:1.75; word-break:keep-all; }
#view blockquote { margin:0 0 14px; padding:6px 0 6px 14px; border-left:4px solid var(--gold); font-weight:600; }
table { width:100%; border-collapse:collapse; font-size:13px; }
td, th { border-bottom:1px solid var(--line); padding:6px 4px; text-align:left; vertical-align:top; }
.pay { background:var(--deep); color:#F2EEE6; border:0; text-align:center; }
.pay .ph { font-size:13px; letter-spacing:.2em; color:var(--gold); }
.pay .pl { font-size:16px; font-weight:700; margin:12px 0 2px; }
.pay .pl2 { font-size:14px; color:#CFC6B8; }
.pay .price { font-size:24px; font-weight:800; margin:10px 0 12px; color:#fff; }
.pay .chips span { display:inline-block; background:var(--gold); color:var(--deep); font-weight:700; border-radius:99px; padding:3px 12px; margin:0 4px 6px 0; font-size:13px; }
.pay button { background:var(--rose); color:#fff; width:100%; margin-top:6px; }
.paynote { display:block; color:#CFC6B8; margin-top:8px; }
.dev { background:var(--deep); color:#F2EEE6; border-radius:12px; padding:16px; margin:0 0 16px; }
.dev .t { font-weight:700; font-size:16px; margin:0 0 10px; }
.dev .lock, .lockw { font-size:12px; color:var(--gold); margin-top:8px; }
.lockw { color:#8a7550; }
.mg { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mg div { border-radius:6px; padding:9px 0; text-align:center; font-weight:700; font-size:12px; background:#26342E; color:#6E8077; filter:blur(3px); }
.mg div.on { background:var(--rose); color:#fff; }
.mg .badge { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; filter:none; background:none; padding:0; }
.mg .badge span { background:#F7F2EC; color:var(--deep); border-radius:99px; padding:6px 14px; font-size:13px; font-weight:700; }
.why1 { display:flex; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); margin:0 0 16px; }
.why1 .n { flex:none; width:52px; background:var(--deep); color:var(--rose); font-size:30px; font-weight:700; display:flex; justify-content:center; padding-top:10px; }
.why1 .b { padding:12px 14px; }
.bl { filter:blur(5px); user-select:none; }
.wait { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin:0 0 16px; }
.wait .row2 { padding:9px 0; border-bottom:1px solid #EFE8DD; }
.wait .row2:last-child { border-bottom:0; }
.wait .k { font-size:12px; color:#8a7550; }
.facts { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 16px; }
.facts .h { font-size:13px; letter-spacing:.12em; color:#8a7550; margin:0 0 8px; }
.facts .f { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid #EFE8DD; line-height:1.7; }
.facts .f:last-child { border-bottom:0; }
.facts .n { flex:none; color:var(--rose); font-weight:700; font-size:20px; width:30px; }
.more { background:#F7F2EC; border:1px dashed var(--gold); border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:14px; }
.bonus { background:#EFE3DC; border-radius:8px; padding:12px; margin-top:10px; display:none; line-height:1.7; }
.tg { display:grid; grid-template-columns:repeat(13,1fr); gap:4px; }
.tg button { padding:0; height:34px; border-radius:4px; border:1px solid #ddd0b4; background:#1a1614; }
.tg button.on { background:var(--gold); }
.code { margin-top:10px; background:#F7F2EC; border-radius:8px; padding:10px; font-size:13px; word-break:break-all; }
canvas { width:100%; max-width:270px; border:1px solid var(--line); border-radius:8px; display:block; margin-top:10px; }
footer.biz { max-width:640px; margin:0 auto; padding:20px 16px 36px; color:var(--sub); font-size:12px; line-height:1.8; border-top:1px solid var(--line); word-break:keep-all; }
footer.biz nav { margin-bottom:8px; display:flex; flex-wrap:wrap; gap:4px 14px; }
footer.biz nav a { color:var(--ink); font-weight:600; text-decoration:none; }
.doc h1 { font-size:22px; margin:8px 0 4px; }
.doc h2 { font-size:16px; margin:20px 0 6px; }
.doc p, .doc li { font-size:14px; line-height:1.8; word-break:keep-all; }
.doc table { font-size:13px; margin:8px 0; }
.doc .draft { background:#FFF4E5; border:1px solid #F0D3A8; border-radius:8px; padding:10px; font-size:13px; }
@media (max-width:380px) { .two { grid-template-columns:1fr; } .tg { grid-template-columns:repeat(8,1fr); } }