/* 해치움 공용 스타일. 색은 변수로만 쓰고, 모션은 transform/opacity만 움직인다. */
:root{color-scheme:light dark;--bg:#fff;--fg:#16141f;--muted:#5b586b;--line:#e4e2ee;--card:#f5f4fa;--edge:#16141f;--accent:#4130f5;--brand:#4130f5;--hot:#ff3366;--danger:#c2133a;--glow:rgba(65,48,245,.13);--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.6,.5,1)}
@media (prefers-color-scheme:dark){:root{--bg:#0e0d16;--fg:#eeecf8;--muted:#a7a4ba;--line:#2b2940;--card:#191825;--edge:#45426a;--accent:#a49bff;--hot:#ff4f7b;--danger:#ff8099;--glow:rgba(120,100,255,.3)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;word-break:keep-all;overflow-wrap:anywhere;background:var(--bg);color:var(--fg);font:16px/1.65 "Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
header,main,footer{max-width:760px;margin:0 auto;padding:16px}
header{padding-block:8px 0}

/* 브랜드 마크: favicon.svg를 로고 앞에 붙인다 (모든 페이지 공통) */
.logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:900;font-size:1.2rem;letter-spacing:-.04em;color:var(--fg);text-decoration:none}
.logo::before{content:"";width:30px;height:30px;background:url(favicon.svg) center/contain no-repeat;transition:transform .3s var(--spring)}
.logo:hover::before{transform:rotate(-10deg) scale(1.1)}

/* 제목: h1 아래 분홍 스우시가 쓱 그어진다 */
h1,h2,h3{line-height:1.25;letter-spacing:-.03em}
h1{font-size:clamp(1.75rem,7vw,2.5rem);font-weight:850;margin:.45em 0 .35em}
h1::after{content:"";display:block;width:56px;height:6px;margin-top:12px;border-radius:2px;background:var(--hot);transform:skewX(-24deg);transform-origin:left;animation:swipe .5s .15s var(--ease) both}
h2{font-size:1.3rem;font-weight:800;margin:1.6em 0 .5em}
h3{font-size:1.05rem;font-weight:700;margin:1.4em 0 .3em}
.sub,.muted{color:var(--muted)}
section{margin-top:40px}

/* 홈 히어로: "귀찮은 일"에 줄이 그어지고 "해치움"이 튀어나온다 */
.hero{font-size:clamp(2.4rem,11vw,4.25rem);font-weight:900;line-height:1.12;letter-spacing:-.05em;margin:.45em 0 .3em}
.hero::after{content:none}
.chore{position:relative;display:inline-block;color:var(--muted)}
.chore::after{content:"";position:absolute;left:-.06em;right:-.06em;top:50%;height:.13em;margin-top:-.03em;border-radius:.06em;background:var(--hot);transform:rotate(-4deg);transform-origin:left;animation:strike .5s .35s cubic-bezier(.7,0,.3,1) both}
.done{display:inline-block;font-style:normal;color:var(--accent);transform-origin:50% 80%;animation:pop .6s .8s var(--spring) both}
.hero+.sub{font-size:1.05rem;max-width:34em}

/* 홈 인트로: 3D 일러스트가 튀어나와 둥실 떠 있다. 모바일은 그림 위, 넓은 화면은 오른쪽 */
.intro{--at:50% 125px;--r:160px 150px;display:grid;justify-items:center;background:radial-gradient(var(--r) at var(--at),var(--glow),transparent 70%)}
.intro>div{justify-self:stretch}
.hero-art{width:min(80%,330px);height:auto;margin:4px 0 -10px;animation:art-in .8s var(--spring) both,bob 6s 1.2s ease-in-out infinite}
@media (min-width:760px){
  .intro{--at:calc(100% - 150px) 50%;--r:180px 170px;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center}
  .hero-art{order:1;width:100%;margin:0}
  .hero{font-size:3.3rem}
}

/* 도구 페이지 머리 아이콘 (장식, alt="") */
.tool-icon{float:right;width:clamp(72px,20vw,104px);height:auto;margin:4px 0 8px 12px;animation:art-in .7s var(--spring) both}

/* 도구 카드: 순서대로 올라오고, 누르면 아래 판으로 꾹 눌린다 */
.grid{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:18px 22px}
.grid li{position:relative;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + .2s)}
.grid li:nth-child(2){--i:1}.grid li:nth-child(3){--i:2}.grid li:nth-child(4){--i:3}.grid li:nth-child(5){--i:4}.grid li:nth-child(n+6){--i:5}
.grid li::before{content:"";position:absolute;inset:0;border-radius:18px;background:var(--brand);transform:translate(5px,5px)}
.grid a{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-content:center;height:100%;min-height:96px;padding:14px 58px 14px 14px;background:var(--bg);border:2px solid var(--edge);border-radius:18px;color:var(--fg);text-decoration:none;transition:transform .18s var(--ease)}
.grid a:hover{transform:translate(-2px,-2px)}
.grid a:active{transform:translate(5px,5px);transition-duration:.05s}
.grid a::after{content:"→";position:absolute;right:16px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;transition:transform .2s var(--ease)}
.grid a:hover::after,.grid a:focus-visible::after{transform:translateX(4px)}
.grid img{grid-row:span 2;width:64px;height:64px;align-self:center;transition:transform .3s var(--spring)}
.grid a:hover img,.grid a:focus-visible img{transform:rotate(-8deg) scale(1.1)}
.grid b{position:relative;justify-self:start;align-self:end;font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
.grid b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:2px;background:var(--hot);transform:skewX(-24deg) scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.grid a:hover b::after,.grid a:active b::after,.grid a:focus-visible b::after{transform:skewX(-24deg) scaleX(1)}
.grid span{align-self:start;color:var(--muted);font-size:.92rem;line-height:1.5}

/* 입력 요소 */
textarea,input,select,button{font:inherit;color:inherit;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;min-height:44px}
textarea{width:100%;min-height:220px;resize:vertical;padding:14px 16px;line-height:1.7}
input[type=number]{width:120px;font-variant-numeric:tabular-nums}
input[type=checkbox],input[type=radio],input[type=range]{padding:0;border:0;background:none;accent-color:var(--brand)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0}
input[type=file]{width:100%;padding:18px 14px;border:2px dashed var(--line);border-radius:18px;cursor:pointer}
input[type=file]::file-selector-button{margin-right:12px;min-height:44px;padding:8px 16px;border:0;border-radius:12px;background:var(--brand);color:#fff;font:inherit;font-weight:700;cursor:pointer}
label{display:inline-flex;gap:8px;align-items:center;min-height:44px;margin:0 16px 0 0}
output{min-width:3em;font-weight:700;font-variant-numeric:tabular-nums}

/* 버튼: 기본은 브랜드색, 보조는 .chip. 누르면 살짝 눌린다 */
button{padding:8px 16px;border:0;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;transition:transform .15s var(--ease)}
button:hover{transform:translateY(-1px)}
button:active{transform:scale(.95);transition-duration:.05s}
.chip{background:var(--card);color:var(--fg);border:1.5px solid var(--line)}

/* 도구 본체 묶음 */
.panel{margin:16px 0;padding:16px;background:var(--card);border:1.5px solid var(--line);border-radius:20px}

/* 양방향 변환기 (평 = ㎡ 같은 것) */
.convert{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;color:var(--muted);font-size:1.5rem;font-weight:800}
.convert label{margin:0;color:var(--fg);font-size:1rem}
.convert input{width:100%;min-width:0;padding:8px 10px;background:var(--bg);font-size:1.5rem;font-weight:800}

/* 결과 숫자 카드. 가장 중요한 하나는 .key */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
@media (min-width:600px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{padding:12px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;color:var(--muted);font-size:.85rem;line-height:1.4}
.stats b{display:block;margin-top:4px;color:var(--fg);font-size:1.75rem;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform-origin:left bottom}
.stats .key{grid-column:1/-1;background:var(--brand);border-color:var(--brand);color:#fff}
.stats .key b{color:#fff;font-size:2.6rem}

/* 결과 목록 (이미지 등): 하나씩 미끄러져 들어온다 */
.results{list-style:none;padding:0;display:grid;gap:10px}
.results li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;animation:slide .4s var(--ease) both}
.results a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;transition:transform .15s var(--ease)}
.results a:active{transform:scale(.95)}

/* 광고 코드는 <div class="ad">로 감싼다. 버튼·링크·입력칸과 떨어뜨리는 여백 */
.ad{margin:48px 0}

footer{margin-top:56px;padding-block:20px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.foot-links b{color:var(--fg)}

/* 값이 바뀐 칸 (motion.js가 .flash를 다시 붙인다) */
.flash{animation:flash .4s var(--ease)}
.stats b.flash{animation:tick .3s var(--ease)}

@keyframes swipe{from{transform:skewX(-24deg) scaleX(0)}}
@keyframes strike{from{transform:rotate(-4deg) scaleX(0)}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-10deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes slide{from{opacity:0;transform:translateX(-24px)}}
@keyframes flash{0%{opacity:.3;transform:scale(.94)}60%{opacity:1;transform:scale(1.03)}}
@keyframes tick{from{opacity:.2;transform:translateY(.35em)}}
@keyframes art-in{from{transform:translateY(20px) scale(.85) rotate(-6deg)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{50%{transform:scale(1.05)}}
@keyframes ring{50%{opacity:1}}

@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}