/* 펭귄 툴즈 — 오방색(청·적·황·흑·백)에서 가져온 팔레트, 뽑기 카드처럼 두꺼운 테두리와 그림자 없는 면 */
:root{
  --white:#fff; --ink:#141414; --ink-2:#3d3d3d; --ink-3:#767676; --line:#141414; --soft:#f2f1ec;
  --cheong:#2346d8; --jeok:#e5372b; --hwang:#ffc21a; --heuk:#141414; --nok:#1e9e5a;
  --bd:2.5px solid var(--ink); --drop:5px 5px 0 var(--ink); --radius:14px;
  --display:"Black Han Sans","Pretendard Variable",sans-serif;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);line-height:1.7;font-size:16px;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--cheong);text-underline-offset:3px}
img,svg{max-width:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
.wrap.wide{max-width:1080px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.site-header{background:var(--white);border-bottom:var(--bd);position:sticky;top:0;z-index:5}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;flex-wrap:wrap;max-width:1080px}
.logo{font-family:var(--display);font-weight:400;font-size:26px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--jeok);color:#fff;font-size:17px;transform:rotate(-8deg)}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav a{white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;padding:6px 10px;border-radius:8px}
.nav a:hover{background:var(--hwang)}

main{padding:20px 18px 56px}
.crumbs{font-size:13px;color:var(--ink-3);margin:4px 0 14px}.crumbs a{color:var(--ink-3);text-decoration:none}

/* headings */
h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,5.8vw,38px);line-height:1.25;letter-spacing:-.01em;margin:.2em 0 .4em}
h1 small{font-family:"Pretendard Variable",sans-serif;font-size:.5em;color:var(--ink-3);font-weight:700}
h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:1.8em 0 .6em;line-height:1.4}
h3{font-size:17px;margin:1.4em 0 .4em}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;color:var(--ink);background:var(--hwang);border:2px solid var(--ink);padding:2px 9px;border-radius:6px}
.lead{color:var(--ink-2);font-size:17px;margin:0 0 10px}
.fun-badge{display:inline-block;font-size:12px;color:var(--ink-3);margin:0}
.fun-badge::before{content:"※ "}
.hint{font-size:13px;color:var(--ink-3)}
.center{text-align:center}
.page-head{margin-bottom:18px}

/* buttons */
.btn{appearance:none;border:var(--bd);border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-weight:800;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:3px 3px 0 var(--jeok);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--jeok)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--jeok)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn.ghost:hover{box-shadow:4px 4px 0 var(--ink)}
.btn.big{width:100%;padding:14px 20px;font-size:17px}
.text-link{font-weight:700;color:var(--ink)}

/* cards (홈·추천 공통) */
.cards{display:grid;gap:16px}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.card{display:flex;gap:14px;align-items:center;border:var(--bd);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--drop);transition:transform .12s,box-shadow .12s;background:var(--white)}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.card-art{flex:none;width:64px;height:64px;display:block}
.card-art svg{width:100%;height:100%;display:block}
.card-body{display:flex;flex-direction:column;min-width:0}
.card-cat{font-size:12px;font-weight:800;opacity:.75}
.card-body strong{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.25}
.card-body small{font-size:14px;line-height:1.55;margin-top:3px}
.card-meta{align-self:flex-start;margin-top:8px;font-size:12px;font-weight:800;border:2px solid currentColor;border-radius:6px;padding:0 7px}
.c-me{background:var(--cheong);color:#fff}
.c-love{background:var(--jeok);color:#fff}
.c-luck{background:var(--hwang);color:var(--ink)}
.c-arcade{background:var(--heuk);color:#fff}
.c-story{background:var(--nok);color:#fff}
.c-arcade:hover{box-shadow:7px 7px 0 var(--hwang)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:5px 11px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700}
.chip:hover{background:var(--hwang)}

/* ---------- 홈 ---------- */
.hero{display:grid;gap:28px;align-items:center;padding:26px 0 36px}
@media(min-width:880px){.hero{grid-template-columns:1.05fr 1fr;padding:48px 0 56px}}
.hero-kicker{font-weight:800;font-size:14px;margin:0 0 6px;color:var(--jeok)}
.hero h1{font-size:clamp(36px,7.4vw,62px);line-height:1.12;margin:0 0 16px}
.hero .lead{font-size:18px;max-width:30em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.hero-actions .btn.big{width:auto}

.deck{position:relative;height:330px;margin:0 auto;width:100%;max-width:520px}
.deck-card{--dx:var(--x);position:absolute;left:50%;bottom:10px;width:168px;height:236px;margin-left:-84px;border:var(--bd);border-radius:16px;box-shadow:var(--drop);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;text-decoration:none;transform-origin:50% 120%;transform:translateX(var(--dx)) rotate(var(--r));transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;z-index:calc(var(--i) + 1)}
.deck-card .card-art{width:96px;height:96px}
.deck-card strong{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.2}
.deck-card:hover,.deck-card:focus-visible{transform:translateX(var(--dx)) translateY(-26px) rotate(var(--r));z-index:9;outline:none}
.deck.shuffling .deck-card{animation:shuffle .65s ease-in-out}
.deck.shuffling .deck-card:nth-child(even){animation-direction:reverse}
@keyframes shuffle{0%,100%{transform:translateX(var(--dx)) rotate(var(--r))}30%{transform:translateX(calc(var(--dx) * -1)) rotate(calc(var(--r) * -1.4))}65%{transform:translateX(0) rotate(0)}}
.deck.drawn .deck-card{opacity:.25}
.deck.drawn .deck-card.picked{opacity:1;z-index:10;transform:translateY(-40px) rotate(0) scale(1.12)}
@media(max-width:480px){.deck{height:270px}.deck-card{width:130px;height:186px;margin-left:-65px}.deck-card .card-art{width:70px;height:70px}.deck-card strong{font-size:16px}.deck-card{--dx:calc(var(--x) * .5)}}
@media(prefers-reduced-motion:reduce){.deck-card,.card,.btn{transition:none}.deck.shuffling .deck-card{animation:none}}

.home-block{margin-top:44px}
.home-h{font-family:var(--display);font-weight:400;font-size:clamp(26px,4.4vw,34px);margin:0 0 16px;line-height:1.2}
.cards-home{gap:18px}
@media(min-width:880px){.cards-home{grid-template-columns:repeat(3,1fr)}.cards-home .card{flex-direction:column;align-items:flex-start;padding:18px}.cards-home .card-art{width:84px;height:84px}}
.band-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px;margin-bottom:16px}
.band-head .home-h{margin:0}
.band-head p{margin:0;color:var(--ink-2)}
.band{border:var(--bd);border-radius:20px;padding:24px 20px;margin-left:-4px;margin-right:-4px}
.band-red{background:var(--soft)}

.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px}
@media(min-width:620px){.stamps{grid-template-columns:repeat(6,1fr)}}
@media(min-width:880px){.stamps{grid-template-columns:repeat(12,1fr)}}
.stamp{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13px}
.stamp-hanja{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:3px solid var(--jeok);color:var(--jeok);background:var(--white);font-family:"Noto Serif KR","Batang","AppleMyungjo",serif;font-size:28px;font-weight:700;transition:transform .15s}
.stamp:nth-child(odd) .stamp-hanja{transform:rotate(-6deg)}
.stamp:nth-child(even) .stamp-hanja{transform:rotate(5deg)}
.stamp:hover .stamp-hanja{background:var(--jeok);color:#fff;transform:rotate(0) scale(1.06)}
.stamp.on .stamp-hanja{background:var(--jeok);color:#fff}

.types{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.types{grid-template-columns:repeat(4,1fr)}}
.type{display:flex;flex-direction:column;border:var(--bd);border-radius:12px;padding:12px 14px;text-decoration:none;transition:transform .12s,box-shadow .12s}
.type b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:.02em}
.type span{font-size:13px;font-weight:700;opacity:.9}
.type:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.type.c-arcade:hover{box-shadow:4px 4px 0 var(--hwang)}
.home-about{display:grid;gap:18px 32px;border:var(--bd);border-radius:20px;padding:26px 24px;background:var(--hwang);box-shadow:var(--drop)}
@media(min-width:880px){.home-about{grid-template-columns:.9fr 1.1fr;padding:32px}}
.about-head .home-h{margin-bottom:16px}
.about-points{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.about-points li{background:var(--white);border:2px solid var(--ink);border-radius:10px;padding:8px 12px;font-size:15px;font-weight:600}
.about-points b{font-family:var(--display);font-weight:400;font-size:19px;margin-right:8px}
.about-body p{margin:0 0 10px;font-size:16px;line-height:1.8;color:var(--ink)}
.about-body p:last-child{margin:0;font-size:14px;color:var(--ink-2)}

/* tool box & forms */
.tool-box{background:var(--white);border:var(--bd);border-radius:18px;padding:20px;box-shadow:var(--drop);margin:8px 0 18px}
.form{display:grid;gap:14px}
fieldset{border:0;padding:0;margin:0}
legend,label{font-weight:800;font-size:14px;color:var(--ink)}
.row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.row3 legend{grid-column:1/-1;margin-bottom:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2 label{display:grid;gap:6px}
select,input{font:inherit;font-size:16px;width:100%;padding:12px;border-radius:10px;border:2px solid var(--ink);background:#fff;color:var(--ink)}
select:focus,input:focus{outline:3px solid var(--hwang);outline-offset:1px}
details.opt summary{cursor:pointer;color:var(--cheong);font-weight:700;font-size:14px;margin-bottom:8px}
.sub{font-size:17px;margin:26px 0 10px}
.tti-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:620px){.tti-grid{grid-template-columns:repeat(6,1fr)}}
.tti-grid a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:2px solid var(--ink);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;background:#fff}
.tti-grid a span{font-size:26px}.tti-grid a:hover{background:var(--hwang)}

/* result */
.result{margin-top:18px;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result-card{background:var(--cheong);color:#fff;border:var(--bd);border-radius:18px;padding:26px 20px;text-align:center;box-shadow:var(--drop);margin:6px 0 16px}
.result-card p{margin:.4em auto 0;max-width:30em}
.rc-emoji{font-size:44px;line-height:1.1;font-family:"Noto Serif KR","Batang","AppleMyungjo",serif;font-weight:700}
.rc-emoji svg{width:72px;height:72px}
.card-soon{background:var(--white);border-style:dashed;box-shadow:none;color:var(--ink-3)}
.card-soon:hover{transform:none;box-shadow:none}
.card-soon strong{color:var(--ink)}
.rc-main{font-family:var(--display);font-weight:400;font-size:clamp(28px,6vw,38px);line-height:1.2}
.rc-main small{font-family:"Pretendard Variable",sans-serif;font-size:.45em;opacity:.85;font-weight:700}
.rc-code{font-weight:800;letter-spacing:.04em}
.rc-score{font-family:var(--display);font-size:72px;line-height:1}
.rc-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0}
.rc-meta div{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:6px 12px;min-width:92px}
.rc-meta dt{font-size:12px;color:var(--ink-3);font-weight:700}.rc-meta dd{margin:0;font-weight:800;font-size:17px}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.tags span{background:var(--hwang);color:var(--ink);border-radius:6px;padding:2px 9px;font-size:13px;font-weight:700}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.stat{background:var(--white);border:2px solid var(--ink);border-radius:12px;padding:12px}
.stat b{display:block;font-size:20px;color:var(--ink)}.stat span{font-size:13px;color:var(--ink-2)}
.stat a{font-size:13px;font-weight:700;text-decoration:none}
.axes{display:grid;gap:8px;margin:16px auto 0;max-width:420px;text-align:left}
.axis-row{font-size:13px;font-weight:700}
.axis-labels{display:flex;justify-content:space-between}
.axis-bar{height:12px;background:rgba(255,255,255,.3);border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin-top:3px}
.axis-bar i{display:block;height:100%;background:var(--hwang)}

/* share */
.share{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 6px}
.share .btn{flex:1 1 auto;min-width:110px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:20;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}

/* quiz */
.quiz-start p{margin-top:0}
.q-progress{height:10px;background:var(--soft);border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.q-progress i{display:block;height:100%;background:var(--cheong);transition:width .25s}
.q-count{font-size:13px;color:var(--ink-3);margin:8px 0 2px;font-weight:700}
.q-text{font-size:20px;font-weight:800;line-height:1.5;margin:6px 0 18px;min-height:3em;letter-spacing:-.02em}
.q-scale{display:grid;gap:8px}
.q-scale button{font:inherit;text-align:left;padding:12px 14px;border-radius:10px;border:2px solid var(--ink);background:#fff;cursor:pointer;font-weight:700;color:var(--ink)}
.q-scale button:hover,.q-scale button:focus-visible{background:var(--hwang);outline:none}
.q-scale button.sel{background:var(--cheong);color:#fff}
.q-nav{display:flex;justify-content:space-between;margin-top:14px}
.q-nav button{background:none;border:0;color:var(--ink-3);font:inherit;cursor:pointer;padding:6px}

/* name pyramid */
.pyramid{font-variant-numeric:tabular-nums;text-align:center;margin:14px 0 4px;font-size:14px;overflow-x:auto}
.pyramid div{white-space:nowrap;letter-spacing:.35em;line-height:1.9}
.pyramid .letters{font-weight:800;letter-spacing:.2em}

/* reaction */
.rt{user-select:none;-webkit-user-select:none;touch-action:manipulation;border-radius:16px;border:var(--bd);min-height:260px;display:grid;place-items:center;text-align:center;cursor:pointer;background:var(--heuk);color:#fff;transition:background .05s;padding:20px;outline:none}
.rt:focus-visible{box-shadow:0 0 0 4px var(--hwang)}
.rt-inner strong{display:block;font-family:var(--display);font-weight:400;font-size:30px;margin-bottom:6px}
.rt-inner span{opacity:.9;font-size:15px}
.rt.wait{background:var(--jeok)}.rt.go{background:var(--nok)}.rt.early{background:var(--hwang);color:var(--ink)}
.rt-progress{display:flex;gap:6px;justify-content:center;margin:12px 0 0}
.rt-progress i{width:34px;height:8px;border-radius:9px;border:2px solid var(--ink);background:var(--white)}
.rt-progress i.done{background:var(--ink)}

/* prose & faq */
.prose{margin-top:10px}
.prose p{margin:.6em 0;color:#262626}
.prose ul{padding-left:1.2em}
.two-col{display:grid;gap:4px}
@media(min-width:620px){.two-col{grid-template-columns:1fr 1fr;gap:20px}}
.faq{margin-top:28px}
.faq details{background:var(--white);border:2px solid var(--ink);border-radius:12px;padding:2px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:800;padding:10px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q. ";color:var(--jeok)}
.faq details p{margin:0 0 12px;color:var(--ink-2)}
.reco{margin-top:32px}.reco h2{margin-top:0}
.pager{display:flex;justify-content:space-between;gap:8px;margin:24px 0;font-weight:800;font-size:14px}
.pager a{text-decoration:none;color:var(--ink)}
.legal{font-size:12.5px;color:var(--ink-3);border-top:2px solid var(--ink);padding-top:14px;margin-top:28px}
.doc h2{font-size:18px}
.contact-mail{font-size:18px;font-weight:800}
.ad{margin:28px 0;min-height:120px;text-align:center}

/* footer */
.site-footer{border-top:var(--bd);background:var(--soft);padding:28px 0 40px;font-size:13.5px;color:var(--ink-3)}
.site-footer .wrap{max-width:1080px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0}
.foot-links a{color:var(--ink);text-decoration:none}
.notice{margin:0}
.copy{margin:0}
.result,#tool{scroll-margin-top:76px}

/* 홈 탭: 인기 / 전체 */
.tabs{display:flex;gap:6px;border-bottom:var(--bd);margin-bottom:20px}
.tabs button{appearance:none;font:inherit;font-family:var(--display);font-size:clamp(22px,3.6vw,30px);background:none;border:var(--bd);border-bottom:0;border-radius:12px 12px 0 0;padding:6px 18px 4px;margin-bottom:-2.5px;cursor:pointer;color:var(--ink-3);background:var(--soft)}
.tabs button small{font-family:"Pretendard Variable",sans-serif;font-size:14px;font-weight:800;vertical-align:middle}
.tabs button[aria-selected="true"]{background:var(--white);color:var(--ink);padding-bottom:6.5px}
.tabs button:focus-visible{outline:3px solid var(--hwang)}
.tab-cat+.tab-cat{margin-top:28px}
.tab-cat h3{margin:0 0 12px;font-size:18px}
.tab-cat h3 a{color:var(--ink);text-decoration:none}
.tab-cat h3 small{color:var(--ink-3)}
.card{position:relative}
.rank{position:absolute;top:-12px;left:-12px;width:36px;height:36px;border-radius:50%;background:var(--white);color:var(--ink);border:var(--bd);display:grid;place-items:center;font-family:var(--display);font-size:19px;z-index:1}

/* 오늘의 띠별 운세 */
.today-find{display:flex;gap:8px;flex-wrap:wrap}
.today-find label{flex:1 1 220px}
.today-date{font-family:var(--display);font-size:26px;margin:18px 0 8px}
.today-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--hwang);border:var(--bd);border-radius:12px;padding:10px 12px;font-weight:800;font-size:14px}
.today-top a{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:3px 10px;color:var(--ink);text-decoration:none}
.today-top b{color:var(--jeok);font-family:"Noto Serif KR","Batang",serif}
.today-list{display:grid;gap:14px;margin-top:16px}
.today-card{border:var(--bd);border-radius:14px;padding:16px 18px;scroll-margin-top:80px;background:var(--white)}
.today-card:target,.today-card.mine{box-shadow:var(--drop);background:#fffbea}
.today-card header{display:flex;align-items:center;gap:12px}
.today-card .stamp-hanja{width:50px;height:50px;font-size:24px;flex:none}
.today-card h2{margin:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
.stars{color:var(--jeok);letter-spacing:2px;font-size:15px}
.today-head{font-weight:800;font-size:18px;margin:12px 0 4px}
.today-card p{margin:.4em 0}
.today-detail{display:grid;gap:6px;margin:10px 0}
.today-detail div{display:grid;grid-template-columns:64px 1fr;gap:8px;font-size:15px}
.today-detail dt{font-weight:800}
.today-detail dd{margin:0;color:var(--ink-2)}
.today-years{list-style:none;padding:10px 12px;margin:10px 0;background:var(--soft);border-radius:10px;display:grid;gap:4px}
.today-years li{display:grid;grid-template-columns:4.6em 1fr;gap:8px;font-size:15px}
.today-years b{color:var(--jeok)}
.today-lucky{font-size:14px;color:var(--ink-2);border-top:2px dashed var(--ink);padding-top:8px}

/* 1분 인생 */
.life-pix{display:block;width:100%;max-width:576px;margin:0 auto 12px;aspect-ratio:96/60;image-rendering:pixelated;image-rendering:crisp-edges;border:var(--bd);border-radius:10px;background:#000}
.life-pix.end{max-width:360px;margin-bottom:14px}
/* 반응속도 결과 */
.rt-bars{display:grid;gap:6px;margin:12px 0}
.rt-bars div{display:grid;grid-template-columns:3.2em 1fr 4.4em;align-items:center;gap:8px;font-size:14px;font-weight:700}
.rt-bars i{display:block;height:12px;border:2px solid var(--ink);border-radius:99px;background:var(--hwang)}
.rt-bars div.best i{background:var(--nok)}
.rt-new{display:inline-block;background:var(--jeok);color:#fff;border-radius:6px;padding:0 8px;font-size:13px;font-weight:800;margin-left:6px}

.life-start p{margin:0 0 10px}
.life-start .btn{margin-top:8px}
#life-intro{cursor:pointer}
.life-setup{display:grid;gap:14px;margin-top:14px;padding-top:14px;border-top:2px dashed var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg legend{width:100%;margin-bottom:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.seg span{display:inline-block;padding:8px 16px;border:2px solid var(--ink);border-radius:99px;font-weight:800;font-size:15px;background:var(--white);cursor:pointer}
.seg input:checked+span{background:var(--cheong);color:var(--white)}
.seg input:focus-visible+span{outline:3px solid var(--hwang);outline-offset:2px}
.life-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.life-row label{display:grid;gap:6px}
.life-start-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.life-start-btns .btn{margin-top:0}
.life-hud{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.life-clock{font-weight:800;font-size:15px;border:2px solid var(--ink);border-radius:99px;padding:4px 12px;background:var(--white)}
.life-clock span{font-size:13px;color:var(--ink-2)}
.life-clock b{font-family:var(--display);font-weight:400;font-size:20px;display:inline-block;min-width:1.4em;text-align:right}
.life-clock.stop{background:var(--hwang)}
.life-fast{font:inherit;font-weight:800;font-size:14px;border:2px solid var(--ink);border-radius:99px;padding:6px 12px;background:var(--white);cursor:pointer}
.life-fast[aria-pressed="true"]{background:var(--jeok);color:var(--white)}
.life-wait{margin:8px 0 0;font-size:13px;font-weight:700}
.life-log li.mile{color:var(--cheong);font-weight:700}
.life-name{font-family:var(--display);font-size:26px;margin:0 0 2px}
.life-run{min-height:420px;display:flex;flex-direction:column}
.life-age{font-family:var(--display);font-size:22px;text-align:center}
.life{scroll-margin-top:104px}
.life-age b{font-weight:400;font-size:clamp(52px,13vw,100px);line-height:1;display:inline-block;min-width:1.4em}
.life-bar{height:10px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin:10px 0 14px;background:var(--soft)}
.life-bar i{display:block;height:100%;width:0;background:var(--nok)}
.life-log{list-style:none;padding:0;margin:0;display:grid;gap:4px;min-height:120px}
.life-log li{font-size:15px;color:var(--ink-2);animation:pop .3s ease}
.life-log li:nth-child(n+3){opacity:.45}
.life-log li b{display:inline-block;min-width:3.2em;color:var(--ink)}
.life-log li.pick{color:var(--ink);font-weight:700}
.life-event{margin-top:14px;border:var(--bd);border-radius:14px;padding:16px;background:var(--hwang);box-shadow:var(--drop);animation:pop .2s ease}
.life-scene{font-weight:800;font-size:19px;margin:0 0 12px}
.life-choices{display:grid;gap:10px}
@media(min-width:620px){.life-choices{grid-template-columns:1fr 1fr}}
.life-timer{height:8px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin-top:14px;background:var(--white)}
.life-timer i{display:block;height:100%;width:100%;background:var(--jeok)}
.life-card{background:var(--nok)}
.life-years{font-weight:800;letter-spacing:.08em;margin:0 0 4px;opacity:.9}
.life-timeline{list-style:none;padding:0;margin:0 0 16px 8px;border-left:3px solid var(--ink)}
.life-timeline li{position:relative;padding:6px 0 6px 18px;display:grid;grid-template-columns:3.4em 1fr;gap:2px 8px;font-size:15px}
.life-timeline li::before{content:"";position:absolute;left:-8.5px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2.5px solid var(--ink)}
.life-timeline li span{color:var(--ink-2)}
.life-timeline li strong{grid-column:2}
.life-timeline em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3);border:1.5px solid var(--ink-3);border-radius:5px;padding:0 5px;margin-left:4px}
@media(prefers-reduced-motion:reduce){.life-log li,.life-event{animation:none}}

/* ===================== 펭귄 툴즈 (P2-10) ===================== */
.logo svg.logo-mark{display:block;width:34px;height:34px;background:none;border-radius:0;transform:none;flex:none}
.nav a[aria-current]{background:var(--hwang)}
@media(max-width:620px){.header-inner{padding-top:6px;padding-bottom:4px;min-height:0}.nav{width:100%;margin:0 -6px}.nav a{font-size:14px;padding:5px 8px}}

/* 홈: 검색 */
.hero-tools{padding:22px 0 8px}
@media(min-width:880px){.hero-tools{grid-template-columns:1fr 1fr;padding:36px 0 12px}}
.hero-tools h1{font-size:clamp(34px,6.4vw,54px)}
.search{border:var(--bd);border-radius:18px;padding:18px;background:var(--hwang);box-shadow:var(--drop)}
.search label{display:block;font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:8px}
.search-row{position:relative}
.search input{font-size:17px;padding:14px 46px 14px 14px;border-width:2.5px}
.search-ico{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-11px;border:3px solid var(--ink);border-radius:50%;pointer-events:none}
.search-ico::after{content:"";position:absolute;width:3px;height:9px;background:var(--ink);right:-5px;bottom:-8px;transform:rotate(-45deg)}
.search .hint{margin:6px 0 0;min-height:1.2em;color:var(--ink-2)}
.hits{list-style:none;margin:6px 0 0;padding:0;background:var(--white);border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.hits li+li{border-top:2px solid var(--soft)}
.hits a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;text-decoration:none;color:var(--ink)}
.hits a:hover,.hits a:focus-visible{background:var(--soft);outline:none}
.hits small{color:var(--ink-3);font-size:13px}
.hits .none{padding:10px 14px;font-size:14px;color:var(--ink-2)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.quick .chip{font-size:13px;padding:3px 9px}
.cat-h{font-size:20px;margin:0 0 12px}.cat-h a{color:var(--ink);text-decoration:none}.cat-h small{color:var(--ink-3);font-size:15px}
.beta{font-style:normal;font-size:11px;font-weight:800;background:var(--jeok);color:#fff;border-radius:5px;padding:0 6px;vertical-align:middle}
.c-pdf{background:var(--jeok);color:#fff}
.c-image{background:var(--cheong);color:#fff}
.c-text{background:var(--hwang);color:var(--ink)}
.c-calc{background:var(--nok);color:#fff}
.c-pdf .beta{background:var(--white);color:var(--jeok)}
/* 홈: 놀이터(면적 20% 이하) */
.home-play{border:2px dashed var(--ink);border-radius:16px;padding:16px 16px 14px}
.home-play .home-h{font-size:clamp(22px,3.4vw,26px)}
.home-play .band-head{margin-bottom:10px}
.play-row{display:grid;gap:12px;align-items:center}
@media(min-width:880px){.play-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.play-row .card{padding:10px 14px}
.play-row .card-art{width:48px;height:48px}
.play-row .card-body strong{font-size:18px}
.play-row .card-meta{display:none}
.play-row .chips{margin:0}

/* 툴 공통 틀 */
.tk{display:grid;gap:12px}
.drop{position:relative;border:3px dashed var(--ink);border-radius:16px;background:var(--soft);padding:22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:background .12s}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0;font-size:0}
.drop:focus-within{outline:3px solid var(--cheong);outline-offset:2px}
.drop.over,.drop:hover{background:#fff6d6}
.drop-art{width:52px;height:52px}.drop-art svg{width:100%;height:100%}
.drop strong{font-size:18px;font-weight:800}
.drop-or{font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.drop-btn{pointer-events:none;padding:6px 14px;font-size:14px}
.drop small{font-size:12.5px;color:var(--ink-3)}
.tk.is-busy .drop{opacity:.55}
.safe{margin:-4px 0 0;font-size:13px;font-weight:700;color:var(--ink-2)}
.safe::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--nok);margin-right:6px;vertical-align:1px}
.tk-msg{margin:0;border:2px solid var(--ink);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700;background:#ffe9e6;color:#8a1209}
.tk-msg.note{background:#fff6d6;color:var(--ink)}
.flist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.flist li{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:10px;padding:6px 8px;background:var(--white)}
.flist img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1.5px solid var(--ink);flex:none}
.fl-no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.fl-name{flex:1;min-width:0;font-size:14px;font-weight:700;overflow-wrap:anywhere;line-height:1.35}
.fl-name small{display:block;font-weight:500;color:var(--ink-3);font-size:12.5px}
.fl-btns{display:flex;gap:4px;flex:none}
.fl-b{font:inherit;font-size:13px;font-weight:800;min-width:34px;height:34px;border:2px solid var(--ink);border-radius:8px;background:var(--white);cursor:pointer;color:var(--ink)}
.fl-b:hover{background:var(--hwang)}.fl-b:disabled{opacity:.3;cursor:default;background:var(--white)}
.fl-x{padding:0 8px}
.flist.done li{flex-wrap:wrap}
.flist.done .pct{font-family:var(--display);font-weight:400;font-size:20px;color:var(--jeok)}
.flist.done .btn{padding:6px 12px;font-size:14px}
.tk-opts{display:grid;gap:12px;border-top:2px dashed var(--ink);padding-top:12px}
.tk-opts label{display:grid;gap:6px}
.tk-opts .seg label{display:inline-block}
.tk-opts input[type=range]{padding:0;border:0;accent-color:var(--jeok)}
.tk-info{margin:0;font-size:15px}
.tk-progress{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:800;font-size:15px}
.tk-progress[hidden],.tk-result[hidden],.tk-next[hidden],.tk-opts[hidden],.flist[hidden],.hits[hidden]{display:none}
.spin{width:20px;height:20px;border:3px solid var(--soft);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tk-bar{flex:1 1 100%;height:10px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--white)}
.tk-bar i{display:block;height:100%;width:0;background:var(--nok);transition:width .15s}
.tk-result{border:var(--bd);border-radius:14px;padding:14px;background:#effaf3}
.tk-result .tk-done{margin:0 0 10px;font-size:16px}
.tk-result .hint{margin:8px 0 0}
.tk-result .tk-warn{margin:0 0 10px}
.tk-dl{display:grid;gap:8px}
.tk-each{margin-top:10px}.tk-each summary{cursor:pointer;font-weight:700;color:var(--cheong)}
.tk-each .chips{list-style:none;padding:0}
.tk-next{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;border-top:2px dashed var(--ink);padding-top:12px;font-size:14px}
.tk-next b{margin-right:4px}
.tk-next .chip{font-size:13.5px}
.tk-warn{margin:0;border:2px solid var(--ink);border-left:8px solid var(--jeok);border-radius:10px;padding:10px 12px;background:#fff6d6;font-size:14px}
.beta-tag{background:var(--jeok);color:#fff}
.ad-fixed{min-height:280px;margin:22px 0}
.util .prose ol{padding-left:1.3em}.util .prose li{margin:.3em 0}
@media(prefers-reduced-motion:reduce){.spin{animation:none}.tk-bar i{transition:none}}

/* 글자수 세기 */
.cc-text{font:inherit;font-size:16px;line-height:1.7;width:100%;min-height:220px;padding:14px;border:2.5px solid var(--ink);border-radius:12px;resize:vertical;background:#fff;color:var(--ink)}
.cc-text:focus{outline:3px solid var(--hwang);outline-offset:1px}
.cc-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}
@media(min-width:620px){.cc-stats{grid-template-columns:repeat(4,1fr)}}
.cc-stats div{border:2px solid var(--ink);border-radius:10px;padding:8px 10px;background:var(--white)}
.cc-stats div.main{background:var(--hwang)}
.cc-stats dt{font-size:12.5px;font-weight:800;color:var(--ink-2)}
.cc-stats dd{margin:0;font-size:14px}
.cc-stats b{font-family:var(--display);font-weight:400;font-size:26px;margin-right:2px}
.cc-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.cc-tools label{display:grid;gap:4px;flex:1 1 160px}
.cc-limit{margin:0;font-weight:800;color:var(--nok)}.cc-limit.over{color:var(--jeok)}

/* 디데이 */
.dd-form{display:grid;gap:12px}
.dd-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;padding:0;accent-color:var(--jeok)}
.dd-result{border:var(--bd);border-radius:14px;padding:14px;background:var(--white)}
.dd-result p{margin:.4em 0}
.dd-big{font-family:var(--display);font-size:clamp(44px,10vw,64px);line-height:1;color:var(--jeok)}
.dd-h{margin:8px 0 0;font-size:18px}
.dd-table,.lic{width:100%;border-collapse:collapse;font-size:14.5px}
.dd-table th,.dd-table td,.lic th,.lic td{border:2px solid var(--ink);padding:6px 8px;text-align:left}
.dd-table thead th,.lic thead th{background:var(--soft)}
.dd-table tr.on td,.dd-table tr.on th{background:var(--hwang)}
.table-wrap{overflow-x:auto}

/* 워드 미리보기 + 인쇄 */
.w2p{margin:18px 0}
.w2p-note{font-size:13px;font-weight:800;color:var(--jeok);margin:0 0 8px}
.w2p-paper{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:28px 26px;color:#111;font-size:15px;line-height:1.6;overflow-x:auto;max-width:794px;margin:0 auto}
.w2p-paper h1,.w2p-paper h2,.w2p-paper h3{font-family:inherit;font-weight:800;letter-spacing:0}
.w2p-paper h1{font-size:26px}.w2p-paper h2{font-size:21px;margin-top:1.2em}.w2p-paper h3{font-size:17px}
.w2p-paper p{margin:.5em 0}
.w2p-paper img{max-width:100%;height:auto}
.w2p-paper table{border-collapse:collapse;margin:10px 0;max-width:100%}
.w2p-paper td,.w2p-paper th{border:1px solid #555;padding:4px 8px;vertical-align:top}
.w2p-paper .doc-subtitle{color:#555;font-size:17px}
@page{size:A4;margin:16mm}
@media print{
  html.print-doc .site-header,html.print-doc .site-footer,html.print-doc .crumbs,html.print-doc .page-head,html.print-doc .tool-box,html.print-doc .prose,html.print-doc .faq,html.print-doc .reco,html.print-doc .ad,html.print-doc .w2p-note,html.print-doc .skip,html.print-doc .toast{display:none!important}
  html.print-doc main{padding:0}
  html.print-doc .wrap{max-width:none;padding:0}
  html.print-doc .w2p{margin:0}
  html.print-doc .w2p-paper{border:0;padding:0;max-width:none;font-size:11pt;overflow:visible}
  html.print-doc .w2p-paper tr{page-break-inside:avoid}
}

/* 홈 「전체」: 툴이 1개인 카테고리는 한 줄에 나란히 */
.tab-cats:not([hidden]){display:grid;gap:28px 18px}
.tab-cats .tab-cat+.tab-cat{margin-top:0}
@media(min-width:880px){.tab-cats:not([hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}.tab-cat.wide{grid-column:1/-1}.tab-cat:not(.wide) .cards-home{grid-template-columns:1fr}}
@media(min-width:620px) and (max-width:879px){.tab-cats:not([hidden]){grid-template-columns:1fr 1fr}.tab-cat.wide{grid-column:1/-1}.tab-cat:not(.wide) .cards-home{grid-template-columns:1fr}}

/* 만 나이·평수 (P2-12) */
.age-big{font-family:var(--display);line-height:1.1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.age-big b{font-weight:400;font-size:clamp(44px,10vw,64px);color:var(--jeok)}
.age-big span{font-size:22px}
.age-big .eq{color:var(--ink-3)}
.age-stats{margin:10px 0}
.py-form .chip{font:inherit;font-size:13.5px;cursor:pointer}

/* ===================== P2-14 서랍 시스템 (홈 「펭귄 공구함」 · 카테고리 · 놀이터 공통) =====================
   원칙: 바탕은 흰색·연한 톤, 원색은 카테고리 표시(손잡이·윗줄·아이콘)에만. 행 목록이라 개수와 상관없이 빈칸 없음 */
.t-pdf,.c-pdf{--tone:var(--jeok)} .t-image,.c-image{--tone:var(--cheong)} .t-text,.c-text{--tone:var(--hwang)} .t-calc,.c-calc{--tone:var(--nok)}
.t-me,.c-me{--tone:var(--cheong)} .t-love,.c-love{--tone:var(--jeok)} .t-luck,.c-luck{--tone:var(--hwang)} .t-story,.c-story{--tone:var(--nok)} .t-arcade,.c-arcade{--tone:var(--heuk)}

.drawers{columns:1;column-gap:20px;margin:6px 0 0}
@media(min-width:700px){.drawers{columns:2}}
@media(min-width:1000px){.drawers{columns:3}}
.drawers-1,.drawers-1.drawers{columns:1}
.drawer{break-inside:avoid;page-break-inside:avoid;display:block;width:100%;background:var(--white);border:var(--bd);border-top:8px solid var(--tone);border-radius:14px;box-shadow:var(--drop);margin:0 0 20px;overflow:hidden}
.drawer-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:10px 14px 9px;background:var(--soft);border-bottom:2px solid var(--ink)}
.drawer-pull{flex:none;width:30px;height:10px;border-radius:99px;background:var(--tone);border:2px solid var(--ink)}
.drawer-name{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;margin:0;letter-spacing:-.01em}
.drawer-name a{color:var(--ink);text-decoration:none}
.drawer-name a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--tone)}
.drawer-head small{margin-left:auto;font-size:12px;font-weight:800;color:var(--ink-3)}
.drawer-head p{flex-basis:100%;margin:0;font-size:13px;color:var(--ink-2)}
.drawer-head .more{margin-left:auto;font-weight:800;font-size:14px;color:var(--ink);text-decoration:none}

.rows{list-style:none;margin:0;padding:0}
.rows li{break-inside:avoid}
.rows li+li{border-top:2px solid var(--soft)}
.row{display:flex;align-items:center;gap:12px;padding:9px 14px;min-height:62px;text-decoration:none;color:var(--ink)}
.row:hover,.row:focus-visible{background:#fffbea;outline:none}
.row:focus-visible{box-shadow:inset 0 0 0 3px var(--cheong)}
.row-art{flex:none;width:42px;height:42px;display:block}
.row-art svg{width:100%;height:100%;display:block}
.row-body{flex:1;min-width:0;display:flex;flex-direction:column}
.row-body b{font-size:16px;font-weight:800;line-height:1.3}
.row-body small{font-size:13px;color:var(--ink-2);line-height:1.45}
.row-go{flex:none;font-size:24px;line-height:1;font-weight:800;color:var(--ink-3)}
.row:hover .row-go{color:var(--ink)}
/* 서랍 밖에서 쓰는 행 목록(추천·놀이터 띠) */
.rows-flow{background:var(--white);border:var(--bd);border-radius:14px;box-shadow:var(--drop);overflow:hidden}
@media(min-width:700px){.rows-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.rows-flow li+li{border-top:0}.rows-flow li{border-bottom:2px solid var(--soft)}.rows-flow li:nth-child(odd){border-right:2px solid var(--soft)}}
@media(min-width:1000px){.wide .rows-flow,.util .rows-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 홈 */
.hero-tools{padding:18px 0 22px;gap:18px}
@media(min-width:880px){.hero-tools{grid-template-columns:1fr 1fr;padding:28px 0 26px;align-items:end}}
.hero-tools h1{font-size:clamp(30px,5.4vw,48px);margin-bottom:10px}
.hero-tools .lead{font-size:16px;margin:0}
@media(max-width:620px){.hero-tools .lead{display:none}.hero-tools h1 br{display:none}}
.hero-kicker{letter-spacing:.02em}
.toolbox{margin-top:4px}
.play-strip{background:var(--white);border:var(--bd);border-top:8px solid var(--tone);border-radius:14px;box-shadow:var(--drop);overflow:hidden;margin-top:12px}
.play-strip .rows-flow{border:0;border-radius:0;box-shadow:none}
@media(min-width:1000px){.play-strip .rows-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.play-strip .rows-flow li:nth-child(odd){border-right:0}.play-strip .rows-flow li+li{border-left:2px solid var(--soft)}}
.home-about{background:var(--soft)}

/* 카테고리 허브: 펼친 서랍 + 다른 서랍 */
@media(min-width:700px){.drawers-1.open .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.drawers-1.open .rows li+li{border-top:0}.drawers-1.open .rows li{border-bottom:2px solid var(--soft)}.drawers-1.open .rows li:nth-child(odd){border-right:2px solid var(--soft)}}
.drawers-mini .row{min-height:52px;padding:7px 12px}
.drawers-mini .row-body small{display:none}
.drawers-mini .row-art{width:32px;height:32px}
.drawers-mini .drawer-name{font-size:18px}
@media(min-width:1000px){main:not(.wide) .drawers-mini{columns:3}}
@media(min-width:700px) and (max-width:999px){.drawers-mini{columns:3}}

/* 놀이터 허브 */
.play-head .hero-actions{margin-top:12px}
.play-head .fun-badge{font-size:12.5px}
.drawers-3{margin-top:8px}
@media(min-width:1000px){.drawers-3{columns:3}}
.drawer-extra{display:block;padding:10px 14px 12px;border-top:2px dashed var(--ink)}
.drawer-extra summary{cursor:pointer;font-weight:800;font-size:14px;color:var(--ink)}
.drawer-extra .chips{margin:10px 0 0}
.drawer-extra .chip{font-size:13px;padding:3px 9px}
.drawer-extra .hint{margin:0 0 8px}
.mini-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 4px}
.mini-stamps a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--ink);text-decoration:none}
.mini-stamps b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--jeok);color:var(--jeok);background:var(--white);font-family:"Noto Serif KR","Batang","AppleMyungjo",serif;font-size:18px}
.mini-stamps a:hover b{background:var(--jeok);color:var(--white)}

/* 놀이터 기존 카드(툴 페이지 추천 등)도 원색 바탕 대신 흰 바탕 + 왼쪽 색 띠 */
.card[class*=" c-"],.card[class^="c-"]{background:var(--white);color:var(--ink);border-left:12px solid var(--tone)}
.card.c-arcade:hover{box-shadow:7px 7px 0 var(--ink)}
.card .card-cat{opacity:1;color:var(--ink-3)}
/* P2-14 보정: 2열 행 목록에서 홀수 개면 마지막 행을 두 칸으로(빈칸 없음), 모바일 홈은 행을 촘촘하게 */
@media(min-width:700px){.rows-flow li:last-child:nth-child(odd),.drawers-1.open .rows li:last-child:nth-child(odd){grid-column:1/-1;border-right:0}}
@media(min-width:1000px){.play-strip .rows-flow li:last-child:nth-child(odd){grid-column:auto}}
.play-strip .drawer-head p{flex:1 1 auto;flex-basis:auto}
.reco:last-child,.drawers-mini{margin-bottom:8px}
@media(max-width:620px){.toolbox .row{min-height:48px;padding:7px 12px}.toolbox .row-body small{display:none}.toolbox .row-art{width:34px;height:34px}.toolbox .drawer{margin-bottom:14px}.hero-tools{padding:12px 0 16px}}
.home-about{margin-bottom:8px}

/* ===================== P2-16 타이머·스톱워치 / P2-17 다른 서비스 링크 ===================== */
.t-time,.c-time{--tone:var(--heuk)}
.tm-face{text-align:center;border:var(--bd);border-radius:16px;background:var(--soft);padding:14px 10px 16px}
.tm-state{display:inline-block;font-size:13px;font-weight:800;color:var(--ink-2);background:var(--white);border:2px solid var(--ink);border-radius:99px;padding:1px 10px}
.clock{font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(56px,19vw,150px);line-height:1.05;margin:6px 0 2px;color:var(--ink)}
.tm-bar{height:10px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--white);max-width:520px;margin:8px auto 0}
.tm-bar i{display:block;height:100%;width:0;background:var(--nok)}
.tm-form{display:grid;gap:12px}
.tm-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-head{margin:4px 0 0;font-weight:800}
.tm-field{display:grid;grid-template-rows:auto auto auto auto;gap:4px;text-align:center}
.tm-lab{font-weight:800;font-size:14px}
.tm-inputs input{text-align:center;font-size:24px;font-weight:800;padding:10px 4px;width:100%}
.tm-step{font:inherit;font-weight:800;background:var(--white);border:2px solid var(--heuk);border-radius:10px;padding:4px 0;cursor:pointer}
.tm-step:disabled,.tm-quick .chip:disabled,.tm-inputs input:disabled{opacity:.45;cursor:not-allowed}
.tm-qlab{font-weight:800;font-size:14px;align-self:center;margin-right:4px}
.tm-quick .chip.on{background:var(--hwang)}
.tm-btns .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.tm-quick{display:flex;flex-wrap:wrap;gap:6px}
.tm-quick .chip{font:inherit;font-weight:800;cursor:pointer}
.tm-btns{display:flex;flex-wrap:wrap;gap:8px}
.tm-btns .btn.big{flex:1 1 120px;width:auto}
[hidden]{display:none!important}
.tm-silence{background:var(--jeok)}
[data-state="run"] .tm-state{background:var(--nok);color:var(--white)}
[data-state="pause"] .tm-state{background:var(--hwang)}
[data-state="done"] .tm-state{background:var(--jeok);color:var(--white)}
.tk.ringing .tm-face{animation:ring .5s steps(2) infinite}
@keyframes ring{0%{background:var(--jeok);color:var(--white)}50%{background:var(--soft)}}
.tk.ringing .tm-face .clock{color:inherit}
@media(prefers-reduced-motion:reduce){.tk.ringing .tm-face{animation:none;background:var(--jeok)}.tk.ringing .clock{color:var(--white)}}
.laps tr.best td,.laps tr.best th{background:#e8f7ee}
.laps tr.worst td,.laps tr.worst th{background:#ffe9e6}
.laps em{font-style:normal;font-size:11.5px;font-weight:800;border:1.5px solid currentColor;border-radius:5px;padding:0 5px;margin-left:4px}
.laps td{font-variant-numeric:tabular-nums}
/* 전체 화면: 숫자만 크게 */
.tk:fullscreen{background:var(--white);padding:4vh 4vw;display:flex;flex-direction:column;justify-content:center;overflow:auto}
.tk:fullscreen .clock{font-size:min(24vw,40vh)}
.tk:fullscreen .tk-next,.tk:fullscreen .safe{display:none}
/* P2-17 외부 링크 행·하단 한 줄 */
.ext-tag{font-style:normal;font-size:11px;font-weight:800;border:1.5px solid var(--ink);border-radius:5px;padding:0 5px;margin-left:4px;vertical-align:middle;color:var(--ink-2)}
.site-footer .family{margin:0 0 8px;font-size:13.5px}
.site-footer .family a{color:var(--ink);font-weight:700}
.clock{white-space:nowrap}
[data-tool="stopwatch"] .clock{font-size:clamp(40px,14.5vw,140px)}

/* ===================== P2-20 블록 쌓기 게임 (랜덤7942 대기 화면 게임 이식) ===================== */
.stack-stage{position:relative;height:min(62vh,480px);min-height:340px;border-radius:14px;overflow:hidden;border:var(--bd);background:var(--soft);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;overscroll-behavior:contain}
.stack-stage:focus-visible{outline:3px solid var(--cheong);outline-offset:2px}
#stack-canvas{position:absolute;inset:0;width:100%;height:100%}
.stack-score{position:absolute;top:12px;left:0;right:0;text-align:center;pointer-events:none;font-family:var(--display);font-weight:400;font-size:48px;line-height:1.1;color:var(--ink)}
.stack-pop{position:absolute;top:70px;left:0;right:0;text-align:center;pointer-events:none;font-family:var(--display);font-weight:400;font-size:20px;color:var(--jeok);opacity:0}
.stack-pop.show{animation:gpop .8s ease forwards}
@keyframes gpop{0%{opacity:0;transform:translateY(6px) scale(.9)}20%{opacity:1;transform:translateY(0) scale(1.06)}100%{opacity:0;transform:translateY(-14px) scale(1)}}
.stack-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;overflow-y:auto;background:var(--white)}
.stack-overlay.show{display:flex}
.stack-overlay .go-title{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.15}
.stack-overlay .go-sub{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.stack-overlay .go-best{font-size:14px;color:var(--ink-2)}
.stack-overlay .go-best b{color:var(--ink)}
.stack-overlay .go-new{display:inline-block;font-size:14px;font-weight:800;color:var(--ink);background:var(--hwang);border:2px solid var(--ink);border-radius:6px;padding:1px 9px}
.stack-overlay .go-btn{max-width:240px;margin:6px 0 4px}
.go-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0;width:100%;max-width:340px}
.go-stats div{border:2px solid var(--ink);border-radius:10px;padding:6px 4px;background:var(--soft)}
.go-stats dt{font-size:11.5px;font-weight:800;color:var(--ink-2)}
.go-stats dd{margin:0;font-family:var(--display);font-size:20px}
@media(prefers-reduced-motion:reduce){.stack-pop.show{animation:none;opacity:1}}

/* === COO 홈 배치 개편 (2026-11-02) === */
.cabinet{display:grid;gap:20px;margin:6px 0 0;grid-template-columns:minmax(0,1fr)}
.cab{display:flex}
.cab .drawer{margin:0;flex:1}
@media(min-width:700px){.cabinet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cabinet{grid-template-columns:repeat(6,minmax(0,1fr))}.cab-big{grid-column:span 2}.cab-wide{grid-column:span 3}
  .cab-wide .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.cab-wide .rows li+li{border-top:0}.cab-wide .rows li:nth-child(2n){border-left:2px solid var(--soft)}.cab-wide .rows li:nth-child(n+3){border-top:2px solid var(--soft)}
  .cabinet .row-body small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}}
.fun-band{margin:34px 0 8px;background:var(--heuk);color:var(--white);border-radius:20px;padding:22px 18px 24px;box-shadow:var(--drop)}
@media(min-width:880px){.fun-band{padding:28px 28px 30px}}
.fun-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 16px}
.fun-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1.1}
.fun-head h2 a{color:var(--hwang);text-decoration:none}
.fun-head p{margin:0;color:#d9d9d4;font-weight:600}
.fun-head .more{margin-left:auto;color:var(--white);font-weight:800;text-decoration:none;border:2px solid var(--white);border-radius:999px;padding:4px 12px}
.fun-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:880px){.fun-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.fun-tile{display:flex;flex-direction:column;gap:4px;height:100%;box-sizing:border-box;background:var(--white);color:var(--ink);text-decoration:none;border:var(--bd);border-top:8px solid var(--tone);border-radius:14px;padding:12px 12px 14px;transition:transform .12s}
.fun-tile:hover,.fun-tile:focus-visible{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--hwang)}
.fun-art{width:52px;height:52px;display:block}
.fun-art svg{width:100%;height:100%}
.fun-tile b{font-size:16px;line-height:1.3}
.fun-tile b .ext{font-size:11px;font-weight:700;color:var(--ink-3)}
.fun-tile span:last-child{font-size:13px;line-height:1.45;color:var(--ink-2)}
@media(max-width:620px){.fun-tile span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fun-art{width:42px;height:42px}}
.fun-feature{display:flex;align-items:center;gap:14px;background:var(--hwang);color:var(--ink);text-decoration:none;border:var(--bd);border-radius:14px;padding:14px 16px;margin:0 0 14px;transition:transform .12s}
.fun-feature:hover,.fun-feature:focus-visible{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--white)}
.fun-feature .fun-art{width:60px;height:60px;flex:none}
.ff-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ff-body em{font-style:normal;font-size:12px;font-weight:800;color:var(--jeok)}
.ff-body b{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,26px);line-height:1.15}
.ff-body span{font-size:14px;color:var(--ink-2)}
.ff-go{margin-left:auto;flex:none;background:var(--heuk);color:var(--white);font-weight:800;border-radius:999px;padding:8px 14px}
@media(max-width:620px){.ff-go{display:none}.fun-feature .fun-art{width:48px;height:48px}}
.home-about{margin-top:26px}

/* === P2-23 타이머 === 가상 전체 화면(전체 화면 기능이 없는 iPhone 등) · 닫기 버튼 · PiP 영상 숨김 */
.tm-view{margin-top:-4px}
.tm-view .btn{flex:1 1 auto}
.tm-fs-close{display:none}
.tk.vfs .tm-fs-close:not([hidden]),.tk:fullscreen .tm-fs-close:not([hidden]){display:inline-flex;align-items:center;gap:6px;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:2;font:inherit;font-weight:800;font-size:15px;padding:8px 14px;border:2.5px solid var(--ink);border-radius:10px;background:var(--white);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
html.vfs-lock,html.vfs-lock body{overflow:hidden}
.tk.vfs{position:fixed;inset:0;z-index:60;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;border-radius:0;border:0;box-shadow:none;background:var(--white);overflow-y:auto;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:max(56px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.tk.vfs .clock,.tk:fullscreen .clock{font-size:min(26vw,40vh);font-size:min(26vw,40dvh)}
.tk.vfs .tm-face,.tk:fullscreen .tm-face{border:0;background:transparent}
.tk.vfs .safe,.tk.vfs .tk-next,.tk.vfs .tm-head,.tk.vfs .tm-inputs,.tk.vfs .tm-quick,.tk.vfs .pip-hint,.tk.vfs [data-preview],
.tk:fullscreen .tm-head,.tk:fullscreen .tm-inputs,.tk:fullscreen .tm-quick,.tk:fullscreen [data-preview]{display:none}
.tk.vfs .laps{max-height:24vh;overflow:auto}
.tk.vfs.ringing,.tk:fullscreen.ringing{animation:ring .5s steps(2) infinite}
@media(orientation:landscape) and (max-height:560px){
  .tk.vfs,.tk:fullscreen{padding-top:max(12px,env(safe-area-inset-top))}
  .tk.vfs .clock,.tk:fullscreen .clock{font-size:min(20vw,58vh);font-size:min(20vw,58dvh)}
  .tk.vfs .tm-bar,.tk.vfs .laps{display:none}
  .tk.vfs .tm-btns{justify-content:center}
  .tk.vfs .tm-btns .btn.big{flex:0 1 220px;padding:10px 16px}
}
@media(prefers-reduced-motion:reduce){.tk.vfs.ringing,.tk:fullscreen.ringing{animation:none;background:var(--jeok)}}
.pip-video{position:fixed;right:0;bottom:0;width:1px;height:1px;opacity:.01;pointer-events:none} /* iOS PiP: 숨기거나 0×0이면 거부되므로 화면 안에 1px로 둠 */

/* === P2-22 사주 === */
.sj-form .sj-leap{margin-left:6px}.sj-form .sj-leap.off{opacity:.4}
.sj-form .sj-time{grid-template-columns:1fr 1fr}
.sj-form legend small,.sj-form label small{font-weight:600;color:var(--ink-3)}
.sj-place{display:grid;gap:6px}
.sj-adv summary{cursor:pointer;color:var(--cheong);font-weight:700;font-size:14px}
.sj-adv[open]{display:grid;gap:12px}
.sj-jasi span{font-size:14px;padding:7px 12px}
.sj-top-note{margin-top:0;border-top:0;padding-top:0}
.sj-out{display:grid;gap:4px;grid-template-columns:minmax(0,1fr)}
.sj-out>*,.sj-sec{min-width:0}
.sj-hz,.sj-eight,.sj-char b{font-family:"Noto Serif KR","Batang","AppleMyungjo",serif}
.sj-card .sj-eyebrow{margin:0;font-weight:800;font-size:14px;opacity:.9}
.sj-eight{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:34px;font-weight:700;margin:.2em 0 .1em!important;letter-spacing:.04em}
.sj-eight span{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:0 8px;line-height:1.35}
.sj-eight .sj-q{color:var(--ink-3)}
.sj-sub{font-weight:700}
.sj-basis{border:2px solid var(--ink);border-radius:12px;padding:10px 14px;background:var(--soft);margin:6px 0 10px;font-size:14px}
.sj-basis summary{cursor:pointer;font-weight:800}
.sj-basis dl{margin:8px 0 0;display:grid;gap:6px}
.sj-basis dl div{display:grid;grid-template-columns:7.5em 1fr;gap:8px}
.sj-basis dt{font-weight:800;color:var(--ink-2)}.sj-basis dd{margin:0}
@media(max-width:480px){.sj-basis dl div{grid-template-columns:1fr;gap:0}}
.sj-warn{margin:10px 0 0;padding:8px 10px;border:2px solid var(--ink);border-radius:8px;background:#fff6d6;font-weight:700}
.sj-sec{margin:14px 0 6px}
.sj-sec h2{font-size:20px;margin:0 0 10px}
.sj-sec h3{font-size:16px;margin:14px 0 6px}
.sj-sec h3 small,.sj-sec h2 small{font-weight:600;color:var(--ink-3);font-size:13px}
.sj-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:13px;min-width:320px}
.sj-table th,.sj-table td{border:1.5px solid var(--ink);padding:5px 2px}
.sj-table thead th{background:var(--ink);color:#fff;font-size:13px}
.sj-table thead th:first-child{width:3.6em;background:var(--white)}
.sj-table tbody th{font-size:12px;color:var(--ink-2);background:var(--soft)}
.sj-table .sj-god td{font-weight:800;color:var(--cheong)}
.sj-char{display:flex;flex-direction:column;align-items:center;border-radius:8px;padding:3px 0;line-height:1.15}
.sj-char b{font-size:30px;font-weight:700}
.sj-char small{font-size:11px;font-weight:700}
.sj-hidden td span{margin:0 1px;font-family:"Noto Serif KR","Batang",serif;color:var(--ink-3)}
.sj-hidden td span.main{color:var(--ink);font-weight:800}
.sj-none{color:var(--ink-3)}
.e0{background:#d6f0df;color:#0d5a32}.e1{background:#ffdcd6;color:#9b1b10}.e2{background:#fff0bf;color:#6b4b00}.e3{background:#ececec;color:#333}.e4{background:#1f2a44;color:#fff}
.sj-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sj-bars li{display:grid;grid-template-columns:3.4em 1fr 1.6em;align-items:center;gap:8px;font-size:14px}
.sj-bl{font-weight:800}.sj-bl small{margin-left:3px;color:var(--ink-3);font-family:"Noto Serif KR","Batang",serif}
.sj-bt{height:16px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:#fff}
.sj-bt i{display:block;height:100%;border-right:2px solid var(--ink)}
.sj-bt i[style*="width:0%"]{border-right:0}
.sj-gbars .sj-bt i{background:var(--cheong)}
.sj-two{display:grid;gap:4px 20px}
@media(min-width:620px){.sj-two{grid-template-columns:1fr 1fr}}
.sj-meter{position:relative;height:18px;border:2px solid var(--ink);border-radius:99px;background:#fff;overflow:hidden}
.sj-meter i{display:block;height:100%;background:var(--hwang);border-right:2px solid var(--ink)}
.sj-meter span{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--ink-3)}
.sj-rel{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sj-rel li{border:2px solid var(--ink);border-radius:99px;padding:3px 12px;font-size:13px;font-weight:700}
.sj-rel li.good{background:#d6f0df}.sj-rel li.bad{background:#ffdcd6}
.sj-pc{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}.sj-pc b{color:var(--jeok);margin-right:4px}
.sj-daeun{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px}
.sj-dw{flex:0 0 76px;display:grid;justify-items:center;gap:3px;border:2px solid var(--ink);border-radius:12px;padding:6px 4px;background:#fff;font-size:12px;text-align:center}
.sj-dw .sj-char{width:46px}.sj-dw .sj-char b{font-size:24px}
.sj-dw em{font-style:normal;font-weight:700;color:var(--ink-2);font-size:11px}
.sj-dw.now{background:var(--hwang);box-shadow:3px 3px 0 var(--ink)}
.sj-dw strong{font-size:11px;background:var(--ink);color:#fff;border-radius:99px;padding:0 8px}
.sj-stars{color:var(--jeok);letter-spacing:1px;font-size:15px;white-space:nowrap}
.sj-year{border:var(--bd);border-radius:14px;padding:12px 16px;background:#fffbea}
.sj-year h2{font-size:18px}
.sj-fortunes{display:grid;gap:12px}
@media(min-width:640px){.sj-fortunes{grid-template-columns:1fr 1fr}}
.sj-f{border:2px solid var(--ink);border-radius:14px;padding:12px 14px;background:#fff}
.sj-f h3{margin:0 0 6px;font-size:17px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.sj-f p{margin:.35em 0;font-size:15px}
.sj-why{font-size:12.5px!important;color:var(--ink-3);border-top:1px dashed var(--ink-3);padding-top:6px;margin-top:8px!important}
.sj-f-health p:nth-last-of-type(2){font-weight:700}

/* === P2-25 즐겨찾기 === 별 버튼(제목·서랍 행·오락실 타일), 상단 메뉴 별 + 팝오버, 홈 「내 즐겨찾기」 줄 */
.fav{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:2px solid var(--ink);border-radius:9px;background:var(--white);color:var(--ink);cursor:pointer;flex:none;line-height:1;vertical-align:middle}
.fav .fav-ico{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.fav[aria-pressed="true"] .fav-ico{fill:var(--hwang)}
.fav:hover{background:#fffbea}
.fav:focus-visible{outline:3px solid var(--cheong);outline-offset:2px}
.fav-title{width:38px;height:38px;margin-left:4px;position:relative;top:-3px}
.fav-title .fav-ico{width:22px;height:22px}
li.has-fav{position:relative}
.fav-row{position:absolute;right:38px;top:50%;transform:translateY(-50%);z-index:1;width:32px;height:32px;border-width:1.5px}
.has-fav>.row{padding-right:78px}
.fav-tile{position:absolute;top:6px;right:6px;z-index:1;width:30px;height:30px;border-width:1.5px}
.fav-tile .fav-ico{width:17px;height:17px}
/* 상단 메뉴 별 */
.fav-menu{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:2px solid var(--ink);border-radius:10px;background:var(--white);cursor:pointer;order:2;flex:none}
.header-inner .nav{order:1}
.fav-menu .fav-ico{width:22px;height:22px;fill:var(--hwang);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.fav-menu[aria-expanded="true"]{background:var(--hwang)}
.fav-count{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--jeok);color:#fff;border:2px solid var(--ink);font-size:11.5px;font-weight:800;line-height:16px;text-align:center}
@media(max-width:620px){.fav-menu{order:1;margin-left:auto;width:36px;height:36px}.header-inner .nav{order:2}}
.fav-pop{position:fixed;z-index:70;right:max(12px,calc((100vw - 1080px) / 2 + 18px));width:min(340px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;background:var(--white);border:var(--bd);border-radius:14px;box-shadow:var(--drop)}
.fav-pop-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--soft)}
.fav-pop-head small{color:var(--ink-3);font-size:12px}
.fav-pop-body{padding:6px 0}
.fav-pop .fav-empty{margin:0;padding:12px 14px;font-size:14px;color:var(--ink-2)}
.fav-list{list-style:none;margin:0;padding:0;counter-reset:fav}
.fav-list li{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 14px}
.fav-list li+li{border-top:2px solid var(--soft)}
.fav-list a{flex:1;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.fav-list a:hover b{text-decoration:underline}
.fav-list b{font-size:15px}
.fav-list small{font-size:12px;color:var(--ink-3)}
.fav-x{appearance:none;font:inherit;font-size:12.5px;font-weight:800;padding:4px 9px;border:1.5px solid var(--ink);border-radius:7px;background:var(--white);cursor:pointer}
.fav-x:hover{background:#ffe9e6}
/* 홈 검색창 아래 한 줄(높이 고정 — 개수가 바뀌어도 아래 내용이 밀리지 않음) */
.fav-bar{display:flex;align-items:center;gap:8px;margin-top:10px;height:40px}
.fav-bar-h{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:13px;font-weight:800;color:var(--ink)}
.fav-bar-h .fav-ico{width:16px;height:16px;fill:var(--white);stroke:var(--ink);stroke-width:2}
.fav-bar-list{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:40px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}
.fav-bar .fav-empty{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-chip{display:inline-flex;align-items:center;gap:4px;flex:none;height:30px;padding:0 10px;border:2px solid var(--ink);border-radius:99px;background:var(--white);color:var(--ink);text-decoration:none;font-size:13px;font-weight:800}
.fav-chip .fav-ico{width:14px;height:14px;fill:var(--hwang);stroke:var(--ink);stroke-width:2}
.fav-chip:hover{background:#fffbea}
@media print{.fav,.fav-menu,.fav-pop,.fav-bar{display:none!important}}
.hero-tools>*,.search,.fav-bar{min-width:0;max-width:100%}

/* === P2-26 배경 지우기 === */
[data-tool="removebg"] .drop[hidden],.rb[hidden],.rb [hidden]{display:none!important}
.rb-first{margin:-6px 0 0}
.rb{display:grid;gap:12px;border-top:2px dashed var(--ink);padding-top:12px}
.rb label{display:grid;gap:6px;font-weight:700}
.rb .seg label{display:inline-block}
.rb input[type=range]{padding:0;border:0;accent-color:var(--jeok);width:100%}
.rb-hint{margin:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.rb-view{--hmax:70vh;position:relative;width:min(100%,calc(var(--hmax) * var(--ar,1)));aspect-ratio:var(--ar,1);margin:0 auto;border:2px solid var(--ink);border-radius:10px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background-color:#fff;background-image:linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 75%,#d6d6d6 75%),linear-gradient(45deg,#d6d6d6 25%,transparent 25%,transparent 75%,#d6d6d6 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.rb-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rb-view[data-mode="pick"],.rb-view[data-mode="add"]{cursor:pointer}
.rb-view[data-mode="erase"],.rb-view[data-mode="restore"]{cursor:crosshair}
.rb-line{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--hwang);box-shadow:0 0 0 1.5px var(--ink);pointer-events:none}
.rb-tag{position:absolute;top:8px;padding:2px 8px;border:2px solid var(--ink);border-radius:99px;background:var(--white);font-size:12px;font-weight:800;pointer-events:none}
.rb-tag-b{left:8px}.rb-tag-a{right:8px}
.rb-custom{display:inline-flex!important;align-items:center;gap:6px}
.rb-custom input[type=color]{position:static;opacity:1;width:36px;height:34px;padding:0;border:2px solid var(--ink);border-radius:8px;background:var(--white);cursor:pointer}
.rb-actions{display:flex;flex-wrap:wrap;gap:8px}
.rb-actions .btn.big{flex:1 1 220px}
.rb-stat{margin:0}
.tk.is-busy .rb-view,.tk.is-busy .rb-actions,.tk.is-busy .rb-modes{opacity:.6;pointer-events:none}
@media(max-width:480px){.rb .seg span{padding:7px 12px;font-size:14px}.rb-view{--hmax:60vh}.rb-actions .btn.ghost{flex:1 1 0;padding-left:6px;padding-right:6px;font-size:14px}}