:root{--ink:#202629;--muted:#58636a;--line:#dce1e4;--g:#245544;--g-soft:#eef4f0;--bad:#c2412d;--canvas:#f7f8f9}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
main{max-width:1080px;margin:0 auto;padding:20px 20px 64px}
a{color:inherit}
.top{padding:4px 0 8px}
.logo img{display:block;height:23px;width:auto}
.hero{padding:28px 0 22px}
.hero h1{margin:0;font-size:clamp(28px,4vw,42px);letter-spacing:-.035em;line-height:1.25}
.hero p{margin:10px 0 0;color:var(--muted);max-width:40em}

/* 도구 카드: 그림이 주인공. 누르기 전에 무엇을 해 주는지 그림으로 보인다 */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tool{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.tool.wide{grid-column:1/-1;flex-direction:row;align-items:center}
.tool .pic{display:block;width:100%;height:auto;background:var(--g-soft);padding:14px 18px}
.tool.wide .pic{width:56%;flex:none;padding:18px 24px}
.tool .txt{padding:18px 22px 22px}
.tool h2{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}
.tool.wide h2{font-size:28px}
.tool p{margin:0;color:var(--muted)}
.go{display:inline-block;margin-top:14px;background:var(--g);color:#fff;font-weight:700;font-size:15px;padding:9px 16px;border-radius:8px}
.tool:hover,.tool:focus-visible{border-color:var(--g);box-shadow:0 8px 24px -12px #24554466}
.tool:focus-visible,.form:focus-visible{outline:3px solid var(--g);outline-offset:3px}

/* SVG 글자 */
.t-s{font-size:12px;fill:var(--muted)}
.t-b{font-size:30px;font-weight:800;fill:var(--ink)}
.t-n{font-size:13px;font-weight:700;fill:var(--ink)}
.t-big{font-size:18px;font-weight:800;fill:var(--g)}
.t-w{font-size:11.5px;font-weight:700;fill:#fff}
.t-tag{font-size:12.5px;font-weight:700;fill:#fff}
.t-chalk{font-size:15px;fill:#e9efe9;font-weight:600}
.bad{fill:var(--bad)}
.old{text-decoration:line-through;fill:#9aa6ac}

/* 마우스를 올리면(휴대폰은 누를 때) 그림이 한 번 움직여 결과를 보여 준다. 평소엔 결과가 보이는 상태로 멈춰 있다 */
.slip,.mag,.ring,.tag,.row,.receipt,.total,.pricetag,.newp,.alert,.line{transform-box:fill-box;transform-origin:center}
.s1{transform:rotate(-4deg)} .s3{transform:rotate(3deg)}
.mag{transform:translate(170px,36px)}
.tool:is(:hover,:focus-visible) .mag{animation:mag 1.6s ease-in-out both}
.tool:is(:hover,:focus-visible) .ring{animation:pop .4s 1.1s both}
.tool:is(:hover,:focus-visible) .tag{animation:drop .4s 1.3s both}
@keyframes mag{0%{transform:translate(0,0)}45%{transform:translate(250px,30px)}100%{transform:translate(170px,36px)}}
@keyframes pop{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.tool:is(:hover,:focus-visible) .row{animation:fly .9s ease-in both}
.tool:is(:hover,:focus-visible) .r2,.tool:is(:hover,:focus-visible) .r5{animation-delay:.12s}
.tool:is(:hover,:focus-visible) .r3,.tool:is(:hover,:focus-visible) .r6{animation-delay:.24s}
.tool:is(:hover,:focus-visible) .total{animation:pop .45s 1s both}
@keyframes fly{0%{transform:none;opacity:1}70%{transform:translateX(150px);opacity:.2}71%{opacity:0}100%{transform:none;opacity:1}}

.tool:is(:hover,:focus-visible) .pricetag{animation:shake .5s both}
.tool:is(:hover,:focus-visible) .newp{animation:pop .4s .45s both}
.tool:is(:hover,:focus-visible) .line{animation:draw 1s .2s ease-out both}
.tool:is(:hover,:focus-visible) .alert{animation:drop .4s 1s both}
.line{stroke-dasharray:300}
@keyframes draw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes shake{0%,100%{transform:none}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

/* 양식 */
.forms{margin-top:44px}
.sec{font-size:24px;letter-spacing:-.03em;margin:0 0 14px}
.sec small{font-size:14px;font-weight:400;color:var(--muted);margin-left:8px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.form{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 0 14px;overflow:hidden;transition:transform .2s,border-color .2s}
.form .pic{display:block;width:100%;height:auto;background:#f1f4f2;padding:12px 18px;margin-bottom:10px;transition:transform .25s}
.form b{padding:0 14px;font-size:16px}
.form span{padding:2px 14px 0;font-size:13.5px;color:var(--muted)}
.form:hover{border-color:var(--g);transform:translateY(-3px)}
.form:hover .pic{transform:scale(1.05)}

footer{margin-top:48px;font-size:13px;color:var(--muted)}

@media (max-width:760px){
  .tools{grid-template-columns:1fr}
  .tool.wide{flex-direction:column}
  .tool.wide .pic{width:100%}
  .grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}