@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
:root{ --ink:#241a12; --mut:#736357; --line:#f0e2d4; --bg:#fdf9f5; --card:#fff; --accent:#ea580c; --accent-ink:#fff;
  --accent-soft:color-mix(in srgb, var(--accent) 12%, transparent); }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); position:relative; overflow-x:hidden;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; }
body::before{ content:''; position:fixed; top:-260px; left:50%; transform:translateX(-50%); width:640px; height:420px;
  background:radial-gradient(circle, var(--accent) 0%, transparent 68%); opacity:.10; filter:blur(50px);
  pointer-events:none; z-index:0; }
a{ color:inherit; text-decoration:none; }
.site-header{ display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.logo{ font-weight:800; font-size:16.5px; display:flex; align-items:center; gap:8px; }
.logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); display:inline-block;
  box-shadow:0 0 0 4px var(--accent-soft); }
.site-header nav a{ margin-left:18px; font-size:13.5px; color:var(--mut); font-weight:600; transition:color .15s; }
.site-header nav a:hover{ color:var(--accent); }
.wrap{ max-width:820px; margin:0 auto; padding:40px 20px 60px; position:relative; z-index:1; }
h1{ font-size:31px; font-weight:800; letter-spacing:-.03em; margin:0 0 10px; }
.grad{ background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), white 45%));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:var(--mut); margin:0 0 8px; font-size:15px; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding:6px 12px; border-radius:999px; margin-bottom:16px; }
.tabs{ display:flex; gap:8px; margin:20px 0 18px; flex-wrap:wrap; }
.tabs button{ font:inherit; font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--mut);
  transition:all .2s cubic-bezier(.4,0,.2,1); }
.tabs button:hover{ border-color:var(--accent); color:var(--accent); }
.tabs button.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  box-shadow:0 4px 14px -4px var(--accent); }
.tabs button.active:hover{ color:var(--accent-ink); }
.panel{ display:none; } .panel.show{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.calc-wrap{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px;
  margin-bottom:24px; box-shadow:0 2px 10px rgba(36,26,18,.04), 0 12px 32px -12px rgba(36,26,18,.10); }
.calc-wrap h2{ font-size:17px; margin:0 0 6px; }
.calc-wrap .desc{ font-size:13px; color:var(--mut); margin:0 0 18px; }
.drop{ border:2px dashed var(--line); border-radius:16px; padding:32px 20px; text-align:center;
  color:var(--mut); font-size:13.5px; cursor:pointer; background:#fffaf5; transition:all .2s; display:block; }
.drop:hover, .drop.drag{ border-color:var(--accent); background:var(--accent-soft); transform:scale(1.005); }
.drop input{ display:none; }
.opts{ display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin:16px 0; }
.field{ min-width:150px; }
.field label{ display:block; font-size:12.5px; color:var(--mut); margin-bottom:6px; font-weight:700; }
.field select,.field input[type=range]{ width:100%; }
.field select{ padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; background:#fff; }
.btn{ font:inherit; font-size:14px; font-weight:700; padding:11px 22px; border-radius:12px; border:none;
  background:var(--accent); color:#fff; cursor:pointer; transition:all .2s; }
.btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 16px -4px var(--accent); }
.btn:disabled{ background:#e0d5c9; cursor:not-allowed; }
.filelist{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.frow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px;
  background:#fffaf5; border:1px solid var(--line); border-radius:12px; font-size:13.5px; }
.frow .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frow .dl{ font-weight:700; color:var(--accent); flex-shrink:0; transition:opacity .15s; }
.frow .dl:hover{ opacity:.7; }
.hint{ font-size:12.5px; color:var(--mut); margin-top:10px; }
.soon{ opacity:.55; }
.soon-badge{ font-size:11px; font-weight:700; color:#9a6b00; background:#fff3d6; padding:3px 8px; border-radius:999px; margin-left:8px; }
.note{ font-size:13.5px; color:#3a3a3a; margin-top:18px; line-height:1.85; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:22px 24px; }
.note h2{ font-size:15.5px; margin:16px 0 6px; } .note h2:first-child{ margin-top:0; }
.related{ margin-top:28px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.related h3{ font-size:13px; color:var(--mut); margin:0 0 10px; }
.related a{ display:inline-block; margin:0 10px 6px 0; font-size:13.5px; font-weight:700; color:var(--accent); transition:opacity .15s; }
.related a:hover{ opacity:.7; }
.site-footer{ border-top:1px solid var(--line); background:#fff; padding:24px;
  text-align:center; font-size:12.5px; color:var(--mut); position:relative; z-index:1; }
.site-footer a{ color:var(--accent); }