@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");
/* 홍라이프 손그림 테마 v1 — 짙은 풀밭(펠트) 바탕 + 색연필 동물. 한국 페이지에만 연결됨 */
html:root{--paper:#FFFCF4;--soft:#F6F1E3;--line:#E6DFCB;--gold-soft:#FBF3DE;--hl-grass:#2F5520;--hl-grass-d:#244419;--hl-cream:#FFF8E7;--hl-hand:"Gaegu","Gowun Dodum",var(--f,"Pretendard Variable"),system-ui,sans-serif}
html body{background:var(--hl-grass) url(/assets/art/felt.svg) repeat!important;background-attachment:scroll!important}
html body .brandbar{background:rgba(22,42,15,.72)!important;border-bottom:1px solid rgba(255,248,231,.12)!important}
/* 손글씨 제목 */
html body h1{font-family:var(--hl-hand)!important;font-weight:700!important;letter-spacing:0!important}
html body h1{font-size:clamp(30px,6.4vw,42px)!important;line-height:1.2!important}
/* 머리말 오른쪽에 앉아 있는 강아지 */
html body header.top:has(h1)::after{content:"";display:block;flex:0 0 100%;width:100%;height:76px;margin:6px 0 -26px;position:relative;z-index:3;background:url(/assets/art/pet-retr.svg) no-repeat right 10px bottom/auto 100%;pointer-events:none}
html.hl-pet-black body header.top::after{background-image:url(/assets/art/pet-black.svg)}
html.hl-pet-siam body header.top::after{background-image:url(/assets/art/pet-siam.svg)}
/* 페이지 맨 아래 풀밭과 친구들 */
html body::after{content:"";display:block;height:150px;margin-top:24px;background:url(/assets/art/grass-pets.svg) no-repeat center bottom/auto 150px;pointer-events:none}
html body footer{position:relative;z-index:1}
/* 카드 살짝 크림색 + 둥글게 */
html body .hl-rel{background:var(--hl-cream);border-color:#E6DFCB;border-top-color:#C9A227;border-radius:18px}
html body .hl-rel a.hl-rel-a{background:#FFFDF6;border-color:#EAE2CC}
@media (prefers-reduced-motion:reduce){html body::after{background-image:url(/assets/art/grass-pets.svg)}}
@media print{html body{background:#fff!important}html body::after,html body header.top::after{display:none}}
/* 간식·내 방 (hl-pets.js) */
.hlp-fab{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:898;width:62px;height:62px;border-radius:50%;background:#FFF8E7 url(/assets/art/pet-retr.svg) no-repeat 50% 70%/78%;box-shadow:0 6px 18px rgba(20,30,10,.35),inset 0 0 0 2px #C9A227;border:0;padding:0;cursor:pointer;text-decoration:none}
.hlp-fab b{position:absolute;top:-6px;right:-4px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:#E8834A;color:#fff;font:700 12px/22px var(--f,system-ui);text-align:center}
.hlp-fab:focus-visible{outline:3px solid #F0C75E;outline-offset:3px}
.hlp-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:2147483000;transform:translateX(-50%);width:min(380px,calc(100% - 28px));box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:18px;background:#FFFDF5;color:#2B2A22;box-shadow:0 10px 28px rgba(20,30,10,.35);font:15px/1.4 var(--f,system-ui);animation:hlpPop .6s cubic-bezier(.3,1.6,.5,1) both}
.hlp-toast i{flex:none;width:54px;height:54px;background:url(/assets/art/pet-retr.svg) no-repeat center/contain}
.hlp-toast div{flex:1;min-width:0}
.hlp-toast strong{display:block;font:700 21px/1.15 var(--hl-hand)}
.hlp-toast span{font-size:13px;color:#5B5644}
.hlp-toast a{flex:none;padding:9px 12px;border-radius:12px;background:#2F5520;color:#FFF8E7;text-decoration:none;font-size:14px;font-weight:700}
.hlp-toast.out{animation:hlpOut .4s ease-in both}
@keyframes hlpPop{from{opacity:0;transform:translate(-50%,18px) scale(.92)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes hlpOut{to{opacity:0;transform:translate(-50%,14px)}}
@media (prefers-reduced-motion:reduce){.hlp-toast,.hlp-toast.out{animation:none}}
html.hl-embed .hlp-fab,html.hl-embed .hlp-toast,html.hl-embed body::after{display:none!important}
/* 삼성 인터넷 등 '강제 다크 모드' 방지: 다크 모드를 지원한다고 알리고 같은 밝은 색을 그대로 씀 */
:root{color-scheme:only light}
@media (prefers-color-scheme:dark){:root{color-scheme:only light}html body{background-color:#2F5520!important}.hlp-fab{background-color:#FFF8E7}.hlp-toast{background:#FFFDF5;color:#2B2A22}}
/* 결과 공유하기 — 색연필 아이콘 + 크림색 버튼 */
html body .hl-share{background:#FFF8E7!important;border-color:#E6DFCB!important;border-top-color:#C9A227!important;border-radius:18px!important}
html body .hl-share button.hl-share-btn,html body .hl-share button.hl-share-btn.hl-alt{background:#FFFDF6!important;color:#2B2A22!important;box-shadow:0 0 0 1.5px #E6DFCB!important;filter:none!important}
html body .hl-share button.hl-share-btn:hover{background:#FBF3DE!important;box-shadow:0 0 0 2px #C9A227!important}
html body .hl-share button.hl-share-btn svg{display:none!important}
html body .hl-share button.hl-share-btn::before{content:"";flex:none;width:34px;height:34px;background:no-repeat center/contain}
.hl-share button.hl-share-btn[data-hl=threads]::before{background-image:url(/assets/art/sh-threads.svg)}
.hl-share button.hl-share-btn[data-hl=instagram]::before{background-image:url(/assets/art/sh-instagram.svg)}
.hl-share button.hl-share-btn[data-hl=x]::before{background-image:url(/assets/art/sh-x.svg)}
.hl-share button.hl-share-btn[data-hl=facebook]::before{background-image:url(/assets/art/sh-facebook.svg)}
.hl-share button.hl-share-btn[data-hl=copy]::before{background-image:url(/assets/art/sh-copy.svg)}
.hl-share button.hl-share-btn[data-hl=save]::before{background-image:url(/assets/art/sh-save.svg)}
.hl-share button.hl-share-btn[data-hl=more]::before{background-image:url(/assets/art/sh-more.svg)}
html body .hl-share-fab{background:#FFF8E7 url(/assets/art/sh-share.svg) no-repeat center/30px!important;box-shadow:0 4px 14px rgba(20,30,10,.35),inset 0 0 0 2px #C9A227!important}
html body .hl-share-fab svg{display:none!important}
html body .hl-embed-btn{background:#FFFDF6!important;color:#2B2A22!important;box-shadow:inset 0 0 0 1.5px #E6DFCB!important}
html body .hl-embed-btn svg{display:none!important}
html body .hl-embed-btn::before{content:"";flex:none;width:24px;height:24px;background:url(/assets/art/sh-embed.svg) no-repeat center/contain}
/* 최근 쓴 계산기 */
.hlp-recent{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.hlp-recent a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#FFF8E7;box-shadow:0 0 0 1px #E6DFCB;color:#2B2A22!important;text-decoration:none;font-size:13.5px;font-weight:700}
.hlp-recent a::before{content:"";width:18px;height:18px;background:url(/assets/art/ic-math.svg) no-repeat center/contain}
.hlp-recent a:hover{box-shadow:0 0 0 2px #C9A227}
/* 탭·소목차·버튼: 남색 → 크림/풀색, 둥근 손글씨 느낌 글꼴 */
html:root{--btn:#2F5520;--navy:#2F5520}
html body nav.tabs{background:transparent!important;border-bottom:0!important;box-shadow:none!important}
html body nav.tabs .subtabs button,html body nav.tabs .subtabs a,html body nav.tabs .row a{font-family:"Gowun Dodum",var(--f,system-ui),sans-serif!important;font-weight:700!important;background:#FFF8E7!important;color:#3A3428!important;border:1.5px solid #E6DFCB!important;border-radius:999px!important;box-shadow:none!important;text-decoration:none!important}
html body nav.tabs .subtabs button:hover,html body nav.tabs .subtabs a:hover,html body nav.tabs .row a:hover{border-color:#C9A227!important}
html body nav.tabs .subtabs button[aria-selected="true"],html body nav.tabs .row a[aria-current="page"]{background:#E8834A!important;border-color:#E8834A!important;color:#FFF8E7!important}
html body nav.tabs .groups button{font-family:"Gowun Dodum",var(--f,system-ui),sans-serif!important}
html body .btn{font-family:"Gowun Dodum",var(--f,system-ui),sans-serif}
html body .btn:not(.ghost):hover{background:#244419}
html body .btn.ghost{background:#FFF8E7;color:#2F5520;border-color:#2F5520}
html body .btn.ghost:hover{background:#FBF3DE}
html body .hl-rel,html body .hl-rel .hl-rel-t,html body .hl-rel a.hl-rel-a b{color:#2B2A22}
html body .hl-share .hl-share-t{color:#2B2A22}
/* 메인 플래시 배너(새로 나온 계산기) */
html body .flash{background:#FFF8E7!important;border-color:#E6DFCB!important;box-shadow:0 10px 26px rgba(20,30,10,.25)!important}
html body .flash .fs{background:#FFF8E7!important}
html body .fs h2{font-family:var(--hl-hand)!important;font-weight:700!important;color:#2B2A22!important;letter-spacing:0!important}
html body .fs h2 em{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#C9701E!important;animation:none!important}
html body .fs p{color:#5B5644!important}
html body .fs .k{color:#6B4F12!important;background:#FBF3DE!important;border-color:#E6CF8E!important}
html body .fs .cta{font-family:"Gowun Dodum",var(--f,system-ui),sans-serif!important;background:#E8834A!important;color:#FFF8E7!important;box-shadow:0 6px 16px rgba(120,60,20,.25)!important}
html body .fs .cta2{color:#2F5520!important;border-bottom-color:#C9A227!important}
html body .fs .glass{background:linear-gradient(160deg,#2F5520,#3E6B2C)!important;border-color:#C9A227!important}
html body .fs .glass .lb{color:#E3EED6!important}
html body .fs .orb{background:conic-gradient(from 0deg,rgba(240,199,94,0),rgba(240,199,94,.9),rgba(47,85,32,.5),rgba(240,199,94,0))!important}
html body .fnav button.d{background:rgba(47,85,32,.25)!important}
html body .fnav button.d[aria-current=true]{background:#2F5520!important}
/* 최근 본 계산기(app.js) */
html body .hl-recent{background:#FFF8E7!important;color:#2B2A22!important;box-shadow:0 0 0 1px #E6DFCB}
html body .hl-recent b{color:#8A6414!important;font-family:"Gowun Dodum",var(--f,system-ui),sans-serif}
html body .hl-recent a{background:#FFFDF6!important;border:1.5px solid #E6DFCB!important;color:#2B2A22!important;font-family:"Gowun Dodum",var(--f,system-ui),sans-serif}
html body .hl-recent a:hover{border-color:#C9A227!important}
/* 캘린더·바로가기 띠(인라인 남색) */
html body a.hl-dlink{background:#FFF8E7!important;color:#2B2A22!important;border-left-color:#E8834A!important;box-shadow:0 0 0 1px #E6DFCB}
html body nav.tabs{background:rgba(255,248,231,.97)!important;border-radius:0 0 14px 14px;padding-left:8px!important;padding-right:8px!important}
html body .fnav button:not(.d){background:#2F5520!important;color:#FFF8E7!important;border-color:#2F5520!important}
html body .farr button{background:#2F5520!important;color:#FFF8E7!important;border-color:#2F5520!important}
/* 추천 칸 · 내 정보 채우기 · 연말정산 시즌 */
.hl-reco{box-sizing:border-box;width:min(1080px,calc(100% - 32px));margin:18px auto 0;padding:14px 16px;background:#FFFBEF;border:1.5px dashed #D9C79C;border-radius:16px;color:#3B3B3B}
main .hl-reco,.wrap .hl-reco{width:auto}
.hl-reco-tag{display:inline-block;font-size:11.5px;font-weight:800;color:#8A6417;background:#F3E6C4;border-radius:999px;padding:2px 9px;margin-bottom:8px}
.hl-reco a{display:block;text-decoration:none;color:#2F5520}.hl-reco a img{display:block;max-width:100%;height:auto;border-radius:10px;margin:0 auto}
.hl-reco a b{display:block;font-size:16px}.hl-reco a span{display:block;font-size:13.5px;color:#5B5B5B;margin-top:2px}.hl-reco a em{display:inline-block;margin-top:8px;font-style:normal;font-weight:800;color:#fff;background:#E8834A;border-radius:999px;padding:6px 14px;font-size:13.5px}
.hl-reco-disc{margin:8px 0 0;font-size:11.5px;color:#8A8A8A;line-height:1.5}
.hl-prof{box-sizing:border-box;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;padding:10px 12px;background:#EAF2E3;border:1px solid #CFE0C2;border-radius:12px;font-size:14px;color:#2F5520}
.hl-prof span{flex:1;min-width:180px}.hl-prof button{font:inherit;font-weight:800;border:0;border-radius:999px;background:#2F5520;color:#fff;padding:6px 14px;cursor:pointer}.hl-prof button.x{background:transparent;color:#2F5520;padding:4px 8px;font-size:18px}
.hl-season{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#E8834A;color:#fff!important;text-decoration:none;font-size:14.5px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.hl-season b{font-size:15.5px}
html.hl-embed .hl-reco,html.hl-embed .hl-prof,html.hl-embed .hl-season{display:none!important}
