:root { color-scheme: light; --ink:#15392f; --muted:#6a756f; --paper:#f4f1e8; --card:#fffdf7; --accent:#ee6c42; --line:#dcd8cc; --ok:#276749; --bad:#a33a2b; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(180deg,#dfe9e2 0,#f4f1e8 260px); color:var(--ink); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif; }
.shell { width:min(100%,640px); margin:0 auto; padding:env(safe-area-inset-top) 18px calc(40px + env(safe-area-inset-bottom)); }
.hero { padding:38px 6px 22px; }
.eyebrow { font-size:12px; letter-spacing:.16em; font-weight:800; text-transform:uppercase; color:#517064; }
h1 { font-size:36px; line-height:1.08; margin:7px 0 10px; letter-spacing:-.045em; }
h2 { font-size:22px; margin:4px 0 18px; letter-spacing:-.03em; }
p { color:var(--muted); line-height:1.55; }
.badge { display:inline-block; margin-top:10px; padding:7px 11px; border-radius:99px; background:#ffffffaa; font-size:12px; font-weight:700; }
.badge.online { color:var(--ok); }.badge.offline { color:var(--bad); }
.card { background:var(--card); border:1px solid #ffffff; border-radius:22px; padding:20px; margin:14px 0; box-shadow:0 12px 34px #28443813; }
label { display:block; color:#40544c; font-size:13px; font-weight:750; margin:14px 0; }
input,select { width:100%; margin-top:7px; min-height:50px; border:1px solid var(--line); border-radius:13px; background:white; padding:0 14px; font:inherit; color:var(--ink); }
input:focus,select:focus { outline:3px solid #ee6c4230; border-color:var(--accent); }
button,.camera-button { min-height:52px; border:0; border-radius:14px; font:inherit; font-weight:800; cursor:pointer; }
.primary { width:100%; background:var(--ink); color:white; padding:0 18px; margin-top:10px; }
.primary:disabled { opacity:.4; cursor:not-allowed; }
.camera-button { display:flex; align-items:center; justify-content:center; gap:10px; background:#f7dfd4; color:#873a24; margin:18px 0 12px; }
.photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.photo-actions .camera-button { margin:0 0 12px; padding:0 10px; text-align:center; }
.album-button { background:#e5ebe7; color:var(--ink); }
.camera-icon { width:18px; height:18px; border:4px solid white; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.text-button { min-height:auto; padding:6px; background:transparent; color:var(--muted); font-size:12px; }
.preview { background:#ebe8df; border-radius:15px; overflow:hidden; margin:12px 0; }
.preview img { display:block; width:100%; max-height:320px; object-fit:contain; background:#1e2d27; }
.preview div { padding:10px 12px; font-size:12px; color:var(--muted); }
.message { min-height:21px; margin:10px 0 0; font-size:13px; }.message.error { color:var(--bad); }.message.success { color:var(--ok); }
.optional { font-weight:500; color:#89938e; }.count { display:grid; place-items:center; min-width:34px; height:34px; border-radius:50%; background:#e5ebe7; font-weight:900; }
.empty { color:var(--muted); font-size:13px; }.queue-item { padding:12px 0; border-top:1px solid var(--line); font-size:13px; }.queue-item strong { display:block; margin-bottom:4px; }
.hidden { display:none!important; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:390px) { h1{font-size:31px}.shell{padding-left:13px;padding-right:13px}.card{padding:17px} }