@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#111318; --sub:#5c6470; --faint:#9aa3af;
  --line:#e9ebee; --bg:#f7f7f8; --card:#ffffff;
  --accent:#ff5c35; --accent-deep:#e8431c; --accent-soft:#fff1ec;
  --dark:#14161c; --dark-2:#1e2129;
  --radius:16px;
}
html { scroll-behavior:smooth; }
body {
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.72; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:840px; margin:0 auto; padding:0 22px; }

/* header */
header.site { position:sticky; top:0; z-index:50; background:rgba(247,247,248,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo { font-size:19px; font-weight:800; letter-spacing:-0.02em; text-decoration:none; color:var(--ink); }
.logo em { color:var(--accent); font-style:normal; }
.nav-cta { font-size:13.5px; font-weight:700; color:#fff; background:var(--ink); padding:9px 16px; border-radius:999px; text-decoration:none; transition:.2s; }
.nav-cta:hover { background:var(--accent); transform:translateY(-1px); }

/* hero */
.hero { background:var(--dark); color:#fff; padding:84px 0 76px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; width:560px; height:560px; right:-180px; top:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,92,53,.35), transparent 65%); }
.hero::after { content:''; position:absolute; width:420px; height:420px; left:-160px; bottom:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.25), transparent 65%); }
.hero .wrap { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:44px; }
.hero-copy { min-width:0; }
.hero-visual { position:relative; }
.hero-visual img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:20px; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.5); display:block; transform:rotate(1.2deg); }
.hero-visual .float-tag { position:absolute; left:-14px; bottom:22px; background:#fff; color:var(--ink); font-size:13px; font-weight:800; padding:11px 15px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.25); display:flex; align-items:center; gap:8px; }
.hero-visual .float-tag .dot { width:9px; height:9px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.15); }
@media (max-width:760px){
  .hero .wrap { grid-template-columns:1fr; gap:32px; }
  .hero-visual img { transform:none; }
}
.hero .badge { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#ffd9cd;
  background:rgba(255,92,53,.14); border:1px solid rgba(255,92,53,.35); padding:6px 13px; border-radius:999px; margin-bottom:22px; }
.hero .badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.hero h1 { font-size:clamp(30px,5.4vw,44px); font-weight:800; line-height:1.28; letter-spacing:-0.03em; margin-bottom:18px; }
.hero h1 .hl { background:linear-gradient(92deg,#ff8a63,#ff5c35 55%,#ff7eb0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:16.5px; color:#b6bcc6; max-width:520px; margin-bottom:32px; }
.hero .btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; font-size:15px; font-weight:700; text-decoration:none; padding:14px 24px; border-radius:12px; transition:.2s; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(255,92,53,.35); }
.btn-primary:hover { background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost { color:#e6e8ec; border:1px solid #3a3f4b; }
.btn-ghost:hover { border-color:#e6e8ec; transform:translateY(-2px); }

/* sections */
section { padding:64px 0; }
.sec-head { margin-bottom:28px; }
.sec-head .kicker { font-size:13px; font-weight:800; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.sec-head h2 { font-size:26px; font-weight:800; letter-spacing:-0.02em; }
.sec-head p { color:var(--sub); margin-top:8px; font-size:15px; }

/* service cards */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.svc { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; position:relative; transition:.25s; }
.svc:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(17,19,24,.08); border-color:#dfe2e7; }
.svc .icon { width:44px; height:44px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:16px; }
.svc h3 { font-size:17px; font-weight:800; margin-bottom:7px; letter-spacing:-0.01em; }
.svc p { font-size:14px; color:var(--sub); margin-bottom:14px; }
.svc .price { font-size:14.5px; font-weight:800; color:var(--ink); }
.svc .price small { font-weight:500; color:var(--faint); font-size:12.5px; margin-left:5px; }
.svc .soon { position:absolute; top:18px; right:18px; font-size:11.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:999px; }
.svc-note { margin-top:16px; font-size:13px; color:var(--faint); }

/* tool banner */
.tool-banner { display:flex; align-items:center; gap:18px; background:linear-gradient(120deg,#fff5f1,#fff1ec); border:1px solid #ffd9cd; border-radius:var(--radius); padding:20px 24px; text-decoration:none; color:var(--ink); transition:.25s; }
.tool-banner:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(255,92,53,.18); border-color:var(--accent); }
.tool-ico { flex:none; width:52px; height:52px; border-radius:14px; background:#fff; border:1px solid #ffd9cd; display:flex; align-items:center; justify-content:center; font-size:26px; }
.tool-body { flex:1; min-width:0; }
.tool-title { font-size:17px; font-weight:800; letter-spacing:-0.01em; margin-bottom:3px; }
.tool-desc { font-size:13.5px; color:var(--sub); }
.tool-go { flex:none; font-size:14px; font-weight:800; color:var(--accent); white-space:nowrap; }
@media (max-width:600px){ .tool-banner { flex-wrap:wrap; } .tool-go { width:100%; } }

/* post list */
.post-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; text-decoration:none; color:var(--ink); transition:.25s; margin-bottom:14px; }
.post-card:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(17,19,24,.08); }
.post-card .tags { display:flex; gap:8px; margin-bottom:10px; }
.post-card .tag { font-size:11.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:3px 10px; border-radius:999px; }
.post-card h3 { font-size:19px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
.post-card p { font-size:14px; color:var(--sub); margin-bottom:10px; }
.post-card .meta { font-size:12.5px; color:var(--faint); }
.post-card .go { float:right; color:var(--accent); font-weight:700; font-size:14px; }

/* article */
.article-hero { background:var(--dark); color:#fff; padding:64px 0 52px; }
.article-hero .tags { display:flex; gap:8px; margin-bottom:14px; }
.article-hero .tag { font-size:12px; font-weight:700; color:#ffd9cd; background:rgba(255,92,53,.16); padding:4px 11px; border-radius:999px; }
.article-hero h1 { font-size:clamp(26px,4.6vw,36px); font-weight:800; line-height:1.3; letter-spacing:-0.03em; margin-bottom:12px; }
.article-hero .meta { font-size:13.5px; color:#8f97a3; }
article.post { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:44px 40px; margin-top:-26px; position:relative; z-index:2; }
article.post > p { margin-bottom:16px; font-size:16px; }
article.post h2 { font-size:21px; font-weight:800; letter-spacing:-0.02em; margin:44px 0 14px; padding-top:6px; }
article.post h2 .num { color:var(--accent); margin-right:8px; }
article.post ul, article.post ol { margin:0 0 16px 22px; font-size:15.5px; }
article.post li { margin-bottom:7px; }
article.post table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin:18px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
article.post th, article.post td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); }
article.post tr:last-child td { border-bottom:none; }
article.post th { background:#f3f4f6; font-weight:700; }
.callout { background:var(--accent-soft); border-left:3px solid var(--accent); padding:16px 20px; border-radius:0 12px 12px 0; margin:20px 0; font-size:14.5px; }
.good { color:#0a7d4f; font-weight:700; } .bad { color:#c2372a; font-weight:700; }
a.back { display:inline-block; margin-top:36px; font-size:14.5px; font-weight:700; color:var(--accent); text-decoration:none; }

/* cta card */
.cta-card { background:linear-gradient(120deg,#1a1d25,#14161c 60%); color:#fff; border-radius:20px; padding:38px 36px; margin-top:40px; position:relative; overflow:hidden; }
.cta-card::before { content:''; position:absolute; width:300px; height:300px; right:-100px; top:-140px; border-radius:50%; background:radial-gradient(circle, rgba(255,92,53,.4), transparent 65%); }
.cta-card h3 { font-size:21px; font-weight:800; margin-bottom:9px; letter-spacing:-0.02em; position:relative; }
.cta-card p { font-size:14.5px; color:#b6bcc6; margin-bottom:20px; max-width:460px; position:relative; }
.cta-card .btn { position:relative; }

/* footer */
footer.site { border-top:1px solid var(--line); padding:34px 0 48px; font-size:13px; color:var(--faint); background:#fff; }
footer.site .wrap { display:flex; flex-direction:column; gap:5px; }
footer.site b { color:var(--sub); }

/* motion */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero .wrap > *, .rise { animation:rise .6s ease both; }
.hero .wrap > *:nth-child(2){ animation-delay:.08s } .hero .wrap > *:nth-child(3){ animation-delay:.16s } .hero .wrap > *:nth-child(4){ animation-delay:.24s }

@media (max-width:640px){
  article.post { padding:30px 22px; }
  section { padding:48px 0; }
}