/* 바쿠다 스킨 (2026-10): 한지 바탕, 남색 먹·주황 단청, 색동 장식, 업로드 상자 위 바쿠미.
   site.css 다음에 불러와서 색과 바탕만 덮어씁니다. 레이아웃은 site.css가 그대로 맡습니다. */
:root{
  --navy:#22356F; --navy-2:#3651A0; --link:#2B4590; --orange:#B4561F; --orange-edge:#7A3912; --gold:#E3A33B; --red:#C2412D;
  --blue:#22356F; --blue-2:#3651A0; --cream:#F4EBDD;
  --ground:#F4EBDD; --surface:#FFFBF4; --sunk:#F1E6D4; --ink:#1E2A4A; --muted:#675D4D; --faint:#978B78;
  --line:#E2D3BB; --accent:#B4561F; --accent-ink:#ffffff; --accent-soft:#F7E4D2;
  --paper-shadow:0 1px 2px rgba(90,60,25,.07),0 10px 30px rgba(90,60,25,.10);
  --hanji:url(/assets/hanji.webp);
  --display:'Nanum Myeongjo','IBM Plex Sans KR',serif;
  --saekdong:linear-gradient(90deg,#22356F 0 20%,#C2412D 20% 40%,#E3A33B 40% 60%,#FFFBF4 60% 70%,#3E7CC0 70% 85%,#2F8A62 85% 100%);
}
@media (prefers-color-scheme: dark){
  :root{
    --navy:#AFC2F5; --navy-2:#8EA7EE; --link:#AFC2F5; --orange-edge:#2A1608;
    --ground:#141A2C; --surface:#1C2338; --sunk:#171D30; --ink:#F2E9DA; --muted:#B9AE9B; --faint:#857C6E;
    --line:#30385A; --accent:#E8935A; --accent-ink:#1B1006; --accent-soft:#3A2617;
    --paper-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
    --hanji:url(/assets/hanji-dark.webp);
  }
}
body{background:var(--ground) var(--hanji) repeat;color:var(--ink)}
.visitors{color:var(--muted)}
.visitors b{color:#1E2A4A}
@media (prefers-color-scheme: dark){.visitors b{color:#fff}}
a{color:var(--link)}
::selection{background:#F2C79B;color:#1E2A4A}

/* ---------- header ---------- */
.top,body[data-hero] .top{position:relative;background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--saekdong)}
body[data-hero] .top{position:absolute;inset:0 0 auto}
.brand,body[data-hero] .brand,body[data-hero] .menu > a,body[data-hero] .tools-menu summary,body[data-hero] .nav a,body[data-hero] .lang summary{color:var(--ink)}
body[data-hero] .menu > a:hover,body[data-hero] .tools-menu summary:hover,body[data-hero] .nav a:hover,body[data-hero] .lang summary:hover{background:var(--sunk)}
body[data-hero] .nav .who{color:var(--muted)}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em}
.brand .mark{border-radius:9px;box-shadow:0 0 0 1.5px var(--orange-edge)}
.nav a.cta,body[data-hero] .nav a.cta{background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--orange-edge);box-shadow:0 2px 0 var(--orange-edge);font-weight:700}
.nav a.cta:hover,body[data-hero] .nav a.cta:hover{background:var(--accent);filter:brightness(1.07)}
.tools-menu ul,.lang ul,.lang-menu{background:var(--surface);border-color:var(--line)}

/* ---------- buttons ---------- */
.btn{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn:hover{border-color:var(--navy);color:var(--navy)}
.btn.primary,dialog:not(.fs) .btn.primary{background:var(--accent)!important;border:1.5px solid var(--orange-edge)!important;color:var(--accent-ink)!important;box-shadow:0 2px 0 var(--orange-edge)}
.btn.primary:hover,dialog:not(.fs) .btn.primary:hover{filter:brightness(1.07)!important;color:var(--accent-ink)!important}
.btn:focus-visible,.nav a:focus-visible,.pill:focus-visible{outline-color:var(--navy)}

/* ---------- hero (all tool pages + home) ---------- */
.hero{background:transparent;color:var(--ink);min-height:auto;padding:118px 0 76px;isolation:isolate}
.hero-bg{background:none!important;z-index:-1}
.hero-bg::before{display:none}
.hero-bg::after{background:url(/assets/bk-disc.svg) left -120px top 58%/240px no-repeat,url(/assets/bk-disc.svg) right -110px top 30%/210px no-repeat,radial-gradient(60% 50% at 50% 0%,rgba(227,163,59,.16),transparent 70%);opacity:.9}
@media (prefers-color-scheme: dark){.hero-bg::after{opacity:.55}}
@media (max-width:720px){.hero-bg::after{background-position:left -80px top 70%,right -80px top 20%,0 0;background-size:150px,140px,auto}}
.hero h1,.hero .home-title{color:var(--ink);font-family:var(--display);font-weight:800;letter-spacing:-.04em}
.hero .lede,.home-lede{color:var(--muted)!important}
.hero .fmt{color:var(--ink)}
.ghost{color:var(--navy);opacity:.18}
.pills a{color:var(--ink);background:var(--surface);border:1px solid var(--line)}
.pills a:hover{background:var(--sunk)}
.pills a[aria-current="page"]{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-color-scheme: dark){.pills a[aria-current="page"]{color:#141A2C}}
.pills a:focus-visible{outline-color:var(--navy)}
.hero-meta,.hero .quota,.hero .linkish,.hero .quota a,.hero .quota b{color:var(--ink)}
.hero .quota-invite-row{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:0}
.hero .quota-invite-row[hidden]{display:none}
.hero .quota-connector{color:var(--ink);font-size:19px;line-height:1}
.hero .quota-invite{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;padding:5px 13px}
.hero .quota-invite:hover{border-color:var(--accent);transform:translateY(-1px)}
.hero .private,.private{color:var(--muted)}
.cue{color:var(--muted)}

/* route cards (원본 → 바꿀 형식) */
.rcard{background:var(--surface);border:1px solid var(--line);box-shadow:var(--paper-shadow)}
.rcard:hover{background:var(--surface);border-color:#C9B48F}
.rcard.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(180,86,31,.25),var(--paper-shadow)}
.rcard:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(180,86,31,.22)}
.rc-k,.rc-v{color:var(--ink)}
.rcard.on .rc-v{color:var(--accent)}
.rc-h{color:var(--muted)}
.rc-line{background:var(--sunk)}
.rcard.on .rc-line{background:linear-gradient(90deg,var(--accent),var(--gold))}
.rc-btn{color:var(--ink);background:var(--sunk)}
.route .to-ar{color:var(--accent)}
.util-cat{color:var(--muted)!important}
.util-hero .hero-bg::after{background-size:170px,150px,auto;background-position:left -90px top 60%,right -80px top 25%,0 0;opacity:.8}
.summary-eyebrow{color:var(--accent)}

/* login */
.auth-stage{background:transparent;color:var(--ink)}
.social a{background:var(--surface);border-color:var(--line);color:var(--ink)}
.social a:hover{background:var(--sunk);border-color:#C9B48F}
.social.social-circles a{color:var(--ink);background:none;border:0;box-shadow:none}
.social.social-circles a:hover .sc-ic{box-shadow:0 10px 22px rgba(90,60,25,.22)}
.auth-stage::before,.auth-stage::after{display:none}
.auth-brand{color:var(--ink)}
.auth-brand .mark{border-radius:12px}
.auth h1{font-family:var(--display);font-weight:800}
.auth-stage .or{color:var(--muted)}.auth-stage .or::before,.auth-stage .or::after{background:var(--line)}
.auth-stage .tabs{background:var(--sunk)}.auth-stage .tabs button{color:var(--muted)}.auth-stage .tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
.auth-stage .card{background:var(--surface);border-color:var(--line)}
.auth-stage label.f{color:var(--ink)}.auth-stage input.i{background:var(--surface);border-color:var(--line);color:var(--ink)}.auth-stage input.i::placeholder{color:var(--faint)}
.auth-stage .linkish{color:var(--link)}.auth-stage .msg.ok{color:var(--ok)}.auth-stage .msg.bad{color:var(--bad)}
.auth-stage .auth>p,.auth-stage .auth>p a{color:var(--muted)!important}

/* drop box */
.drop{background:var(--surface);border:2px dashed #A9B3CF;color:var(--ink);box-shadow:var(--paper-shadow)}
.drop:hover,.drop.over{border-color:var(--accent)}
.drop.over{box-shadow:0 0 0 5px rgba(180,86,31,.16),var(--paper-shadow)}
.drop:focus-within{outline:2px solid var(--navy)}
.drop-ic{color:var(--navy)}
.drop-t strong{color:var(--ink);font-weight:600}
.drop-t span{color:var(--muted)}
.drop-btn{background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--orange-edge);box-shadow:0 2px 0 var(--orange-edge)}
.drop:hover .drop-btn{background:var(--accent);filter:brightness(1.07)}
@media (prefers-color-scheme: dark){.drop{border-color:#56608A}}

/* home: big drop card with Bakumi peeking over the top edge */
.home-hero{padding-top:96px;background:radial-gradient(70% 55% at 0% 0%,rgba(217,119,58,.20),transparent 60%),radial-gradient(60% 50% at 100% 0%,rgba(217,119,58,.16),transparent 60%),radial-gradient(80% 40% at 50% 100%,rgba(227,163,59,.12),transparent 70%)}
.home-hero .home-title{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;border:0!important;margin:0!important}
.home-hero .home-lede{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home-hero .drop{background:var(--surface);min-height:0;flex-direction:column;justify-content:center;text-align:center;gap:10px;width:min(100%,640px);margin:244px auto 4px;padding:44px 24px 30px;border-radius:30px;border-width:2.5px;border-color:#7F8DB8}
.home-hero .drop input{border-radius:30px}
.home-hero .drop-ic{width:46px;height:46px;stroke-width:2.1}
.home-hero .drop-t{align-items:center;gap:4px;flex:none}
.home-hero .drop-t strong{word-break:keep-all;font-family:var(--display);font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.03em}
.home-hero .drop-t span{font-size:13px}
.home-hero .drop-btn{font-size:15px;padding:12px 28px;margin-top:6px}
.home-hero .drop:hover,.home-hero .drop.over{border-color:var(--accent)}
.home-hero .homecats-head h2{color:var(--ink);font-family:var(--display);font-weight:800}
.home-hero .drop-demo,.home-hero .ghost{display:none!important}
.home-hero:not(.summary-page) .hero-bg::after{background:radial-gradient(60% 50% at 50% 0%,rgba(227,163,59,.16),transparent 70%)}
#work{scroll-margin-top:28px}

/* Bakumi */
.bakumi{position:absolute;left:50%;bottom:calc(100% - 38px);width:220px;margin-left:-110px;z-index:3;cursor:pointer}
.bk-body{position:relative;display:block;width:220px;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bk-body img{display:block;width:220px;height:auto;filter:drop-shadow(0 8px 12px rgba(30,42,74,.2))}
.bk-face{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bk-iris{transition:transform .12s ease-out}
.bk-lid{transform:scaleY(0);transform-origin:50% 0;transform-box:fill-box;transition:transform .07s}
.bakumi.blink .bk-lid{transform:scaleY(1)}
.bk-mouth{transform:scaleY(0);transform-origin:50% 0;transform-box:fill-box;transition:transform .14s}
.bk-cheek{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;transition:opacity .2s,transform .2s}
.bk-sweat{opacity:0;transition:opacity .2s}
.bakumi-say{position:absolute;left:calc(100% - 4px);top:22px;white-space:nowrap;background:#FFFBF4;color:#1E2A4A;border:2px solid #1E2A4A;border-radius:18px;padding:9px 14px;font:700 14px/1.3 var(--sans);box-shadow:0 3px 0 #1E2A4A;pointer-events:none}
.bakumi-say::after{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;margin-top:-7px;background:#FFFBF4;border-left:2px solid #1E2A4A;border-bottom:2px solid #1E2A4A;transform:rotate(45deg)}
.bakumi-say.pop{animation:bkPop .35s cubic-bezier(.3,1.6,.5,1)}
:is(.bakumi,.bk-pop)[data-mood="hungry"] .bk-mouth{transform:scaleY(1)}
:is(.bakumi,.bk-pop)[data-mood="hungry"] .bk-body{transform:scale(1.06) translateY(-6px)}
:is(.bakumi,.bk-pop)[data-mood="chomp"] .bk-mouth{transform:scaleY(1)}
:is(.bakumi,.bk-pop)[data-mood="chew"] .bk-cheek,:is(.bakumi,.bk-pop)[data-mood="chomp"] .bk-cheek{opacity:.85;transform:scale(1)}
:is(.bakumi,.bk-pop)[data-mood="spit"] .bk-mouth{transform:scaleY(.8)}
:is(.bakumi,.bk-pop)[data-mood="spit"] .bk-body{transform:translateY(-10px) rotate(-4deg)}
:is(.bakumi,.bk-pop)[data-mood="full"] .bk-body{transform:scale(1.2,1.08)}
:is(.bakumi,.bk-pop)[data-mood="full"] .bk-cheek{opacity:.9;transform:scale(1.25)}
:is(.bakumi,.bk-pop)[data-mood="full"] .bk-sweat{opacity:1}
:is(.bakumi,.bk-pop)[data-mood="full"] .bk-lid{transform:scaleY(.42)}
:is(.bakumi,.bk-pop)[data-mood="full"] .bk-mouth{transform:scaleY(.25)}
.bk-nom{position:fixed;z-index:62;font:900 22px/1 var(--display);color:var(--accent);text-shadow:0 2px 0 #FFFBF4,0 -2px 0 #FFFBF4,2px 0 0 #FFFBF4,-2px 0 0 #FFFBF4;pointer-events:none;white-space:nowrap;animation:bkNom 1.1s ease-out forwards}
.bk-flyer{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:40px;height:48px;will-change:transform}
.bk-flyer b{position:absolute;left:0;right:4px;bottom:9px;text-align:center;font:800 9.5px/1 var(--sans);color:#B4561F}
.bk-crumb{position:fixed;z-index:59;width:7px;height:7px;border-radius:2px;background:#E3A33B;pointer-events:none}
.bk-crumb:nth-child(3n){background:#FFFBF4;border:1px solid #1E2A4A}
.bk-crumb:nth-child(3n+1){background:#C2412D}
@media (prefers-reduced-motion:no-preference){
  :is(.bakumi,.bk-pop)[data-mood="idle"] .bk-body{animation:bkIdle 4.6s ease-in-out infinite}
  :is(.bakumi,.bk-pop)[data-mood="hungry"] .bk-body{animation:bkHungry .5s ease-in-out infinite alternate}
  :is(.bakumi,.bk-pop)[data-mood="chomp"] .bk-mouth{animation:bkChomp .2s ease-in-out infinite alternate}
  :is(.bakumi,.bk-pop)[data-mood="chew"] .bk-mouth{animation:bkChew .26s ease-in-out infinite alternate}
  :is(.bakumi,.bk-pop)[data-mood="chew"] .bk-body{animation:bkWobble .52s ease-in-out infinite}
  :is(.bakumi,.bk-pop)[data-mood="full"] .bk-body{animation:bkFull 1.2s ease-in-out infinite}
  .bakumi.tickle .bk-body{animation:bkTickle .5s ease-in-out}
}
@keyframes bkIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bkHungry{from{transform:scale(1.04) translateY(-4px)}to{transform:scale(1.08) translateY(-10px)}}
@keyframes bkChomp{from{transform:scaleY(1)}to{transform:scaleY(.15)}}
@keyframes bkChew{from{transform:scaleY(.15)}to{transform:scaleY(.55)}}
@keyframes bkWobble{0%,100%{transform:scale(1,1)}50%{transform:scale(1.05,.96)}}
@keyframes bkFull{0%,100%{transform:scale(1.2,1.08)}50%{transform:scale(1.23,1.05)}}
@keyframes bkTickle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes bkPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bkNom{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-24px) scale(1.15);opacity:1}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.bk-pop{position:fixed;z-index:58;width:200px;height:212px;pointer-events:none;transform-origin:50% 50%}
.bk-pop[hidden]{display:none}
.bk-pop .bk-body,.bk-pop .bk-body img{width:200px}
.bakumi-say.bk-pop-say{position:fixed;z-index:61;left:0;top:0;translate:-50% -50%;white-space:nowrap}
.bakumi-say.bk-pop-say::after{display:none}
.bakumi-say.bk-pop-say[hidden]{display:none}

/* decoration around the home drop box */
.bk-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#FFFBF4;color:#1E2A4A;border:2px solid #1E2A4A;box-shadow:0 3px 0 #1E2A4A;font:800 14px/1 var(--sans);white-space:nowrap;pointer-events:none}
.bk-chip.l{right:calc(100% + 34px);top:46%}
.bk-chip.r{left:calc(100% + 34px);top:30%}
.bk-swoosh{position:absolute;width:150px;height:110px;pointer-events:none;overflow:visible}
.bk-swoosh.l{right:calc(100% + 20px);top:-6%}
.bk-swoosh.r{left:calc(100% - 4px);top:58%}
.bk-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bk-rings{position:absolute;width:440px;height:117px;background:url(/assets/bk-rings.svg) center bottom/100% 100% no-repeat}
.bk-rings.tl{left:-70px;top:64px;transform:scaleY(-1)}
.bk-rings.tr{right:-70px;top:64px;transform:scale(-1,-1)}
.bk-disc{position:absolute;width:280px;height:280px;background:url(/assets/bk-disc.svg) center/100% 100% no-repeat}
.bk-disc.d1{left:-150px;top:520px;width:300px;height:300px}
.bk-disc.d2{right:-140px;top:430px;width:260px;height:260px}
.bk-disc.d3{left:-120px;top:1180px;width:240px;height:240px}
.bk-disc.d4{right:-150px;top:1450px;width:300px;height:300px}
.bk-cloud{position:absolute;width:220px;height:102px;background:url(/assets/bk-cloud.svg) center/contain no-repeat;opacity:.95}
.bk-cloud.c1{left:4%;top:300px}
.bk-cloud.c2{right:3%;top:150px;transform:scaleX(-1);width:180px}
.bk-cloud.c3{left:12%;bottom:120px;width:160px}
.bk-spark{position:absolute;width:26px;height:26px}
.bk-spark path{fill:var(--c,#E3A33B)}
.bk-spark.s1{left:31%;top:210px;--c:#E3A33B}
.bk-spark.s2{left:34%;top:250px;width:14px;height:14px;--c:#C2412D}
.bk-spark.s3{right:30%;top:230px;width:18px;height:18px;--c:#22356F}
.bk-spark.s4{left:24%;top:520px;width:22px;height:22px;--c:#E3A33B}
.bk-spark.s5{right:24%;top:470px;--c:#C2412D}
.bk-spark.s6{right:27%;top:520px;width:14px;height:14px;--c:#E3A33B}
@media (prefers-reduced-motion:no-preference){
  .bk-spark{animation:bkTwinkle 2.8s ease-in-out infinite}
  .bk-spark.s2,.bk-spark.s5{animation-delay:-1.2s}.bk-spark.s3,.bk-spark.s6{animation-delay:-2s}
  .bk-cloud{animation:bkDrift 9s ease-in-out infinite alternate}
  .bk-cloud.c2{animation-name:bkDriftR}
  .bk-chip.l{animation:bkFloat 3.6s ease-in-out infinite}
  .bk-chip.r{animation:bkFloat 3.6s ease-in-out -1.8s infinite}
}
@keyframes bkTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.6) rotate(25deg);opacity:.55}}
@keyframes bkDrift{from{translate:0 0}to{translate:26px 0}}
@keyframes bkDriftR{from{translate:0 0}to{translate:-24px 0}}
@keyframes bkFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-color-scheme: dark){.bk-rings,.bk-disc{opacity:.5}.bk-cloud{opacity:.25}.bk-swoosh path{stroke:#E9DFCE}.bk-swoosh circle{fill:#E9DFCE}}
@media (max-width:1120px){.bk-chip,.bk-swoosh{display:none}}
@media (max-width:720px){.bk-rings{width:250px;height:66px}.bk-rings.tl,.bk-rings.tr{top:96px}.bk-disc{width:170px!important;height:170px!important}.bk-disc.d1{left:-110px;top:560px}.bk-disc.d2{right:-110px;top:470px}.bk-cloud{display:none}.bk-spark.s4,.bk-spark.s5,.bk-spark.s6{display:none}}

/* Bakumi's recommendation card (top of the work area) */
.bk-reco{margin-top:22px;margin-bottom:6px}
.bk-reco[hidden]{display:none}
.bk-reco-in{position:relative;display:flex;gap:16px;align-items:flex-start;padding:16px 46px 16px 16px;background:var(--surface);border:2px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 var(--ink)}
.bk-mini{flex:none;width:64px;height:auto;margin-top:-26px;filter:drop-shadow(0 4px 6px rgba(30,42,74,.18))}
.bk-reco.tasting .bk-mini{animation:bkWobble .5s ease-in-out infinite}
.bk-reco-main{flex:1;min-width:0;display:grid;gap:8px}
.bk-reco-say{margin:0;font-weight:800;font-size:15.5px;color:var(--ink)}
.bk-reco-ai{margin:0;font-size:14.5px;color:var(--ink);background:var(--accent-soft);border-radius:12px;padding:8px 12px}
.bk-reco.full .bk-reco-ai{background:var(--sunk)}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chips .btn{font-size:13.5px;padding:8px 14px;text-decoration:none}
.bk-ask{display:grid;gap:8px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px}
.bk-ask p{margin:0;font-size:13.5px;color:var(--muted)}
.bk-ask div{display:flex;gap:8px;flex-wrap:wrap}
.bk-reco-foot{margin:0;font-size:12.5px}
.bk-reco-foot .linkish{color:var(--muted)}
.bk-x{position:absolute;right:10px;top:8px;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer;border-radius:50%}
.bk-x:hover{background:var(--sunk)}
@media (max-width:640px){
  .home-hero .drop{margin-top:214px;padding:40px 16px 24px}
  .home-hero .drop-t strong{font-size:19px}
  .bakumi{width:170px;margin-left:-85px;bottom:calc(100% - 30px)}.bk-body,.bk-body img{width:170px}
  .bakumi-say{left:calc(100% - 26px);top:-10px;white-space:normal;width:max-content;max-width:124px;word-break:keep-all;font-size:12.5px;padding:7px 10px;text-align:center}
  .bakumi-say::after{left:14px;top:auto;bottom:-9px;margin-top:0;transform:rotate(-45deg)}
  .bk-reco-in{padding:14px 40px 14px 12px;gap:10px}.bk-mini{width:48px}
}

/* home tabs (변환 / 편집 / 요약) */
.home-tabs{background:var(--surface);border:1px solid var(--line);box-shadow:var(--paper-shadow)}
.home-tabs button{color:var(--muted)}
.home-tabs button[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:none}
@media (prefers-color-scheme: dark){.home-tabs button[aria-selected="true"]{color:#141A2C}}
.home-tabs button:focus-visible,.summary-demo button:focus-visible,.summary-choose:focus-visible{outline-color:var(--navy)}

/* ---------- sections ---------- */
.hero h1,.hero .home-title{font-family:var(--display)!important}
.cat-hwp,.cat{--cat:#22356F;--cat-soft:#E5E9F4;--cat-ink:#22356F;--cat-solid:#22356F;--cat-on:#fff}
.cat-pdf{--cat:#B23C29;--cat-soft:#F7E2DC;--cat-ink:#952F1F;--cat-solid:#B23C29;--cat-on:#fff}
.cat-word{--cat:#3A6CAB;--cat-soft:#E2ECF7;--cat-ink:#2B5A93;--cat-solid:#3A6CAB;--cat-on:#fff}
.cat-img{--cat:#2E7656;--cat-soft:#E0EFE6;--cat-ink:#245E45;--cat-solid:#2E7656;--cat-on:#fff}
@media (prefers-color-scheme: dark){
  .cat-hwp,.cat{--cat:#8EA7EE;--cat-soft:rgba(142,167,238,.14);--cat-ink:#AFC2F5;--cat-solid:#2C4384}
  .cat-pdf{--cat:#F08A74;--cat-soft:rgba(240,138,116,.14);--cat-ink:#F5A592;--cat-solid:#9A3524}
  .cat-word{--cat:#86B2EA;--cat-soft:rgba(134,178,234,.14);--cat-ink:#A6C6F0;--cat-solid:#32609A}
  .cat-img{--cat:#7CC6A2;--cat-soft:rgba(124,198,162,.14);--cat-ink:#98D4B6;--cat-solid:#2A6A4E}
}
.bigcat{background:var(--surface);border-color:var(--line);box-shadow:var(--paper-shadow)}
.bigcat-top{border-bottom:3px solid var(--gold)}
.plansec,.catsec{background:transparent}
.plans-title,.catsec h2,.article h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em}
.card,.cat,.plan{background:var(--surface);border-color:var(--line)}

/* ---------- footer ---------- */
.foot{position:relative;background:color-mix(in srgb,var(--surface) 70%,transparent);border-top:0}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--saekdong)}

/* summary tab: drop box by default, text box behind a checkbox */
.vb-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:170px;padding:22px 16px;text-align:center;border:2.5px dashed #7F8DB8;border-radius:20px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.vb-drop:hover,.vb-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.vb-drop:focus-within{outline:2px solid var(--navy);outline-offset:3px}
.vb-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.vb-drop svg{color:var(--navy)}
.vb-drop b{font-family:var(--display);font-size:clamp(16px,2.2vw,19px);font-weight:800;word-break:keep-all}
.vb-drop small{color:var(--muted);font-size:12.5px}
.vb-drop .vb-file{margin-top:6px;padding:7px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-size:13.5px;font-weight:600;word-break:keep-all}
.vb-drop.done{border-style:solid;border-color:var(--accent)}
.vb-drop.slim{min-height:0;padding:12px 16px}
.vb-drop.slim svg,.vb-drop.slim small{display:none}
.vb-typed{display:inline-flex;align-items:center;gap:8px;margin:10px 0 6px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.vb-typed input{width:17px;height:17px;accent-color:var(--accent)}
.hero.summary-active .vb-drop{background:#FFFBF4;color:#1E2A4A}
.hero.summary-active .vb-typed{color:#1E2A4A}

/* ---------- Bakumi v3: hide / peek / hello, trotting walker, pop-in beside a box ---------- */
.bakumi{clip-path:inset(-140% -160% 0 -160%)}
.bakumi-say{transition:opacity .2s,transform .2s}
.bakumi[data-mood="hide"] .bk-body{transform:translateY(104%)!important;animation:none!important}
.bakumi[data-mood="peek"] .bk-body{transform:translateY(46%)!important;animation:none!important}
.bakumi[data-mood="hide"] .bakumi-say,.bakumi[data-mood="peek"] .bakumi-say{opacity:0;transform:scale(.85)}
.bakumi[data-mood="hello"] .bk-mouth{transform:scaleY(.55)}
.bakumi[data-mood="hello"] .bk-cheek{opacity:.85;transform:scale(1)}
@media (prefers-reduced-motion:no-preference){.bakumi[data-mood="hello"] .bk-body{animation:bkHello .55s ease-in-out 3}}
@keyframes bkHello{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg) translateY(-8px)}70%{transform:rotate(8deg) translateY(-8px)}}
.bk-walker{position:absolute;left:0;bottom:calc(100% - 8px);width:190px;height:150px;z-index:4;pointer-events:none}
.bk-walker[hidden]{display:none}
.bk-fig{position:relative;width:190px;height:150px;transform-origin:50% 100%}
.bk-torso{position:absolute;left:0;bottom:0;width:150px;height:113px;overflow:visible}
.bk-walk-head{position:absolute;right:0;bottom:-2px;width:118px;height:auto;filter:drop-shadow(0 4px 6px rgba(30,42,74,.18));transform-origin:50% 90%}
.bk-leg,.bk-tail,.bk-pat{transform-box:fill-box}
.bk-leg{transform-origin:50% 0}
.bk-tail{transform-origin:100% 100%}
.bk-pat{transform-origin:50% 100%;opacity:0}
.bk-walk-say{left:50%!important;top:auto!important;bottom:calc(100% + 2px);translate:-50% 0}
.bk-walk-say::after{left:50%!important;top:auto!important;bottom:-9px;margin-top:0!important;margin-left:-7px;transform:rotate(-45deg)!important}
.bk-walk-say[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .bk-walker .bk-tail{animation:bkWag .4s ease-in-out infinite alternate}
  .bk-walker.walking .bk-fig>*{animation:bkTrot .24s ease-in-out infinite alternate}
  .bk-walker.walking .bk-leg.l1{animation:bkLeg .24s ease-in-out infinite alternate}
  .bk-walker.walking .bk-leg.l2{animation:bkLeg .24s ease-in-out infinite alternate-reverse}
  .bk-walker.walking .bk-walk-head{animation:bkHead .24s ease-in-out infinite alternate}
  .bk-walker.patting .bk-pat{opacity:1;animation:bkPat .28s ease-in-out infinite alternate}
  .bk-walker.patting .bk-walk-head{animation:bkHead .56s ease-in-out infinite alternate}
}
.bk-walker.patting .bk-pat{opacity:1}
@keyframes bkTrot{from{translate:0 0}to{translate:0 -5px}}
@keyframes bkLeg{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes bkHead{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes bkWag{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
@keyframes bkPat{from{transform:translate(0,0)}to{transform:translate(-6px,-9px)}}
.bk-pop{transform-origin:50% 100%}
.bk-pop .bk-body,.bk-pop .bk-body img{width:100%}
.bakumi-say.bk-pop-say{translate:-50% -100%}

/* AI summary / AI tools: list of loaded documents, each with a remove button */
.vb-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.vb-list[hidden]{display:none}
.vb-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #D9C9AE;border-radius:14px;background:#FFFBF4;color:#1E2A4A}
.vb-ic{flex:none;min-width:44px;padding:5px 6px;border-radius:8px;background:#22356F;color:#fff;font:800 11px/1 var(--sans);text-align:center}
.vb-nm{flex:1;min-width:0;font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vb-list small{flex:none;color:#675D4D;font-size:13px}
.vb-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:#F1E6D4;color:#1E2A4A;font-size:20px;line-height:1;cursor:pointer}
.vb-x:hover{background:#B4561F;color:#fff}
.vb-x:focus-visible{outline:2px solid #22356F;outline-offset:2px}
.ait .vb-drop{margin-bottom:4px}
.ait .vb-typed{color:inherit}

/* bigger tool buttons above the preview */
.bar-act .btn,.bar-act .btn.small{font-size:14.5px!important;padding:9px 15px!important;font-weight:700}
.smart-tools .btn.small{font-size:13.5px;padding:7px 12px}
.bk-chips .btn{font-size:14.5px;padding:9px 16px}

/* header: the word only */
.brand{font-size:24px}
.auth-brand .mark{width:72px;height:72px;box-shadow:none;border-radius:0}

/* ---------- Bakumi v4: 반쯤 올라왔다 살짝 숨고 등장, 눈웃음, 무언 표정 변화, '콱!' 깨물기 ---------- */
.bakumi, .bakumi * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.bakumi {
  clip-path: inset(-160% -180% 0 -180%);
}
.bakumi-say {
  transition: opacity .2s, transform .2s;
}
.bk-body {
  transition: transform .42s cubic-bezier(.25, 1.15, .4, 1);
}
/* 1) 처음 숨어있음 -> 2) 반쯤 올라옴(peek) -> 3) 조금만 숨음(dip) -> 4) 기본(idle) */
.bakumi[data-mood="hide"] .bk-body {
  transform: translateY(104%) !important;
  animation: none !important;
}
.bakumi[data-mood="peek"] .bk-body {
  transform: translateY(48%) !important;
  animation: none !important;
}
.bakumi[data-mood="dip"] .bk-body {
  transform: translateY(58%) !important;
  animation: none !important;
  transition: transform .22s ease-in-out;
}
.bakumi[data-mood="arrive"] .bk-body {
  transform: translateY(0) !important;
  animation: none !important;
  transition: transform .68s cubic-bezier(.45,0,.55,1);
}
.bakumi[data-mood="hide"] .bakumi-say,
.bakumi[data-mood="peek"] .bakumi-say,
.bakumi[data-mood="dip"] .bakumi-say {
  opacity: 0;
  transform: scale(.88);
}
.bakumi[data-mood="arrive"] .bakumi-say{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.bakumi .bk-body{transition:none!important}}

/* 눈웃음 레이어 (.bk-happy) */
.bk-happy {
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}

.bakumi.smile .bk-happy { opacity: 1; }
.bakumi.smile .bk-lid { visibility: hidden; }

.bakumi.smile .bk-cheek {
  opacity: .75;
  transform: scale(.95);
}

/* 클릭 시 대사 없이 표정만 살짝씩 변경 (poke-1 ~ poke-4) */
.bakumi.poke-1 .bk-cheek {
  opacity: .9;
  transform: scale(1.05);
}
.bakumi.poke-1 .bk-mouth {
  transform: scaleY(.38);
}
.bakumi.poke-1 .bk-body {
  transform: translateY(-4px) !important;
}

.bakumi.poke-2 .bk-mouth {
  transform: scaleY(.75);
}
.bakumi.poke-2 .bk-cheek {
  opacity: .85;
  transform: scale(1);
}
.bakumi.poke-2 .bk-body {
  transform: scale(1.03) translateY(-3px) !important;
}

.bakumi.poke-3 .bk-cheek {
  opacity: 1;
  transform: scale(1.15);
}
.bakumi.poke-3 .bk-body {
  transform: rotate(-4deg) translateY(-2px) !important;
}

.bakumi.poke-4 .bk-lid {
  transform: scaleY(.38);
}
.bakumi.poke-4 .bk-sweat {
  opacity: 1;
}
.bakumi.poke-4 .bk-mouth {
  transform: scaleY(.22);
}
.bakumi.poke-4 .bk-body {
  transform: rotate(3deg) translateY(2px) !important;
}

/* 문서를 먹을 때: 1) 뒤로 젖히며 입 크게 벌리기(windup) -> 2) 앞으로 돌진하며 '콱!' 물어뜯기(snap-bite) -> 3) 우적우적 씹기 */
:is(.bakumi, .bk-pop)[data-mood="windup"] .bk-body {
  transform: translateY(-14px) scale(1.14, 1.18) rotate(-6deg) !important;
  transition: transform .15s ease-out !important;
}
:is(.bakumi, .bk-pop)[data-mood="windup"] .bk-mouth {
  transform: scaleY(1.42) scaleX(1.22) !important;
  transition: transform .12s ease-out !important;
}
:is(.bakumi, .bk-pop)[data-mood="hungry"] .bk-mouth {
  transform: scaleY(1.25) scaleX(1.12) !important;
}

@media (prefers-reduced-motion: no-preference) {
  :is(.bakumi, .bk-pop).snap-bite .bk-body {
    animation: bkBiteSnap .32s cubic-bezier(.15, .9, .25, 1.3) !important;
  }
  :is(.bakumi, .bk-pop)[data-mood="chomp"] .bk-mouth {
    animation: bkChompHard .16s ease-in-out infinite alternate !important;
  }
  :is(.bakumi, .bk-pop)[data-mood="chew"] .bk-mouth {
    animation: bkChewHard .22s ease-in-out infinite alternate !important;
  }
  :is(.bakumi, .bk-pop)[data-mood="chew"] .bk-body {
    animation: bkWobbleHard .36s ease-in-out infinite !important;
  }
  .drop.bk-box-shake {
    animation: bkBoxShake .32s ease-in-out;
  }
}
@keyframes bkBiteSnap {
  0%   { transform: translateY(-16px) scale(1.18, 1.2) rotate(-7deg); }
  42%  { transform: translateY(14px) scale(1.28, .82) rotate(5deg); }
  72%  { transform: translateY(-6px) scale(.94, 1.08) rotate(-2deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes bkChompHard {
  from { transform: scaleY(1.4) scaleX(1.2); }
  to   { transform: scaleY(.05) scaleX(1.28); }
}
@keyframes bkChewHard {
  from { transform: scaleY(.1) scaleX(1.15); }
  to   { transform: scaleY(.85) scaleX(.92); }
}
@keyframes bkWobbleHard {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  25%      { transform: translateY(4px) scale(1.09, .91) rotate(-3deg); }
  75%      { transform: translateY(-4px) scale(.94, 1.07) rotate(3deg); }
}
@keyframes bkBoxShake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-4px, 5px); }
  50%      { transform: translate(4px, -3px); }
  75%      { transform: translate(-2px, 2px); }
}

/* Larger Bakumi, emerging from behind the active upload panel. */
.bk-pop-layer{position:fixed;inset:0;z-index:58;pointer-events:none}
.bk-pop-layer .bk-pop{z-index:auto}
.bakumi{width:270px;margin-left:-135px}
.bakumi .bk-body,.bakumi .bk-body img{width:100%}
.brand,.auth-brand{font-weight:900;text-shadow:.35px 0 currentColor,-.35px 0 currentColor}
@media(max-width:640px){.bakumi{width:205px;margin-left:-102.5px}}
/* Rest the classic paws on the upload card's top edge on desktop and mobile. */
html[data-bakumi="classic"] body[data-home] .home-hero .bakumi{bottom:calc(100% - 44px);margin-bottom:0!important}
@media(max-width:640px){html[data-bakumi="classic"] body[data-home] .home-hero .bakumi{bottom:calc(100% - 34px)}}
html[data-bakumi="classic"] body[data-home] .home-hero #drop:not(.quick-active){border-top-style:solid}
/* Cut out the ledge baked into the classic image, preserving both paws. */
html[data-bakumi="classic"] body[data-home] .home-hero .bakumi .bk-body>img:not(.bk-alt){clip-path:polygon(0 0,100% 0,100% 100%,61% 100%,61% 90%,40% 90%,40% 100%,0 100%)}
html[data-bakumi="classic"] body[data-home] .home-hero .bakumi[data-mood="idle"] .bk-body{animation:bkClassicRest 4.6s ease-in-out infinite}
@keyframes bkClassicRest{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.006)}}
@media(prefers-reduced-motion:reduce){html[data-bakumi="classic"] body[data-home] .home-hero .bakumi[data-mood="idle"] .bk-body{animation:none}}

/* ---------- Login Readability Fix ---------- */
.auth-stage .card {
  border: 1.5px solid #D8C9B2;
  box-shadow: var(--paper-shadow);
  padding: 24px 22px;
}

/* 1. 핵심 라벨: 명조체 + 진한 남색으로 포인트 */
.auth-stage label.f {
  font-family: var(--display);
  color: var(--ink) !important;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  gap: 6px;
}

/* 입력창: 깔끔한 화이트 + 부드러운 테두리 */
.auth-stage input.i {
  font-family: var(--sans);
  background: #FFFFFF !important;
  border: 1.5px solid #C8B89E !important;
  color: var(--ink) !important;
  font-weight: 500;
  font-size: 15px;
}
.auth-stage input.i:focus {
  border-color: var(--accent) !important;
  outline: 2px solid rgba(180, 86, 31, 0.22) !important;
}

/* 2. 보조 옵션(아이디 저장, 소셜 라벨): 산세리프 + 한 톤 부드러운 브라운그레이 */
.auth-remember {
  font-family: var(--sans);
  color: #5C5243 !important;
  font-weight: 500;
  font-size: 13.5px;
}
.ar-box {
  border: 1.5px solid #978B78 !important;
  background: #FFFFFF;
}
.auth-remember input:checked + .ar-box {
  background: var(--accent) !important;
  border-color: var(--orange-edge) !important;
  color: #FFFFFF !important;
}

.social.social-circles a small {
  font-family: var(--sans);
  color: #4A4236 !important;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

/* 구분선(또는 이메일): 작고 은은하게 */
.auth-stage .or {
  color: #8C7F6C !important;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.auth-stage .or::before,
.auth-stage .or::after {
  background: #DCCEB8 !important;
}

/* 3. 하단 링크: 찾기(차분한 보조색) vs 회원가입(주황 단청 강조색) 분리 + 왼쪽 잉여 구분선 제거 */
.auth-links {
  margin-top: 10px;
}
.auth-links button {
  font-family: var(--sans);
  color: #675D4D !important;
  font-weight: 500;
  font-size: 13.5px;
  padding: 4px 14px;
}
.auth-links button[data-view="signup"] {
  color: var(--accent) !important;
  font-weight: 700;
}
.auth-links button:hover {
  color: var(--ink) !important;
  text-decoration: underline;
}
.auth-links button + button {
  border-left: 1px solid #C8B89E !important;
}
#emailAuth[data-view="login"] .auth-links [data-view="forgot"] {
  border-left: 0 !important;
}

@media (prefers-color-scheme: dark) {
  .auth-stage .card {
    border-color: var(--line);
  }
  .auth-stage input.i {
    background: var(--sunk) !important;
    border-color: #4A5578 !important;
    color: var(--ink) !important;
  }
  .auth-remember,
  .social.social-circles a small,
  .auth-links button {
    color: var(--muted) !important;
  }
  .auth-links button[data-view="signup"] {
    color: var(--accent) !important;
  }
  .ar-box {
    border-color: #857C6E !important;
    background: var(--sunk);
  }
  .auth-links button + button {
    border-left-color: #4A5578 !important;
  }
  .auth-stage .or::before,
  .auth-stage .or::after {
    background: var(--line) !important;
  }
}

a.admin-badge { text-decoration: none !important; padding: 0 9px 0 7px !important; height: 24px !important; display: inline-flex !important; align-items: center !important; cursor: pointer !important; }
a.admin-badge:hover { background: #efe2be !important; transform: translateY(-1px); }

/* ---------- Golden Admin Badge ---------- */
.nav a.admin-badge,
body[data-hero] .nav a.admin-badge,
.admin-badge {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 26px !important;
  padding: 0 11px 0 8px !important;
  margin-left: 4px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #FFF3B0 0%, #F7C948 35%, #D99B16 70%, #FBE27A 100%) !important;
  color: #3B2300 !important;
  border: 1.5px solid #B87D0B !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 2px 0 #8F5E05, 0 0 12px rgba(247, 201, 72, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
.nav a.admin-badge svg,
body[data-hero] .nav a.admin-badge svg,
.admin-badge svg {
  flex: none !important;
  width: 13px !important;
  height: 13px !important;
  color: #5C3700 !important;
  stroke-width: 2.6 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}
.nav a.admin-badge::after,
.admin-badge::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -60% !important;
  width: 45% !important;
  height: 200% !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%) !important;
  transform: rotate(25deg) !important;
  animation: goldBadgeShimmer 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  pointer-events: none !important;
}
.nav a.admin-badge:hover,
body[data-hero] .nav a.admin-badge:hover,
.admin-badge:hover {
  transform: translateY(-1.5px) scale(1.03) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 3px 0 #8F5E05, 0 0 18px rgba(255, 210, 60, 0.95), inset 0 1px 0 #FFFFFF !important;
  color: #2A1800 !important;
}
@keyframes goldBadgeShimmer {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 130%; opacity: 1; }
  46%, 100% { left: 130%; opacity: 0; }
}

/* === MANUAL_THEME_OVERRIDE === */

html[data-theme="light"] {
  color-scheme: light !important;
  --navy:#22356F; --navy-2:#3651A0; --link:#2B4590; --orange:#B4561F; --orange-edge:#7A3912; --gold:#E3A33B; --red:#C2412D;
  --blue:#22356F; --blue-2:#3651A0; --cream:#F4EBDD;
  --ground:#F4EBDD; --surface:#FFFBF4; --sunk:#F1E6D4; --ink:#1E2A4A; --muted:#675D4D; --faint:#978B78;
  --line:#E2D3BB; --accent:#B4561F; --accent-ink:#ffffff; --accent-soft:#F7E4D2;
  --paper-shadow:0 1px 2px rgba(90,60,25,.07),0 10px 30px rgba(90,60,25,.10);
  --hanji:url(/assets/hanji.webp);
}
html[data-theme="dark"] {
  color-scheme: dark !important;
}
/* 다크모드 토글 버튼 스타일 */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 13px var(--sans); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
}
.theme-toggle:hover { background: var(--sunk); border-color: var(--navy); transform: translateY(-1px); }
.theme-toggle svg { width: 15px; height: 15px; flex: none; }
.theme-toggle .ic-sun { display: none; color: #F5B800; }
.theme-toggle .ic-moon { display: block; color: var(--navy); }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

html[data-theme="dark"]{
    --navy:#AFC2F5; --navy-2:#8EA7EE; --link:#AFC2F5; --orange-edge:#2A1608;
    --ground:#141A2C; --surface:#1C2338; --sunk:#171D30; --ink:#F2E9DA; --muted:#B9AE9B; --faint:#857C6E;
    --line:#30385A; --accent:#E8935A; --accent-ink:#1B1006; --accent-soft:#3A2617;
    --paper-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
    --hanji:url(/assets/hanji-dark.webp);
  }

html[data-theme="dark"] .visitors b{color:#fff}
html[data-theme="dark"] .hero-bg::after{opacity:.55}
html[data-theme="dark"] .pills a[aria-current="page"]{color:#141A2C}
html[data-theme="dark"] .drop{border-color:#56608A}
html[data-theme="dark"] .bk-rings, html[data-theme="dark"] .bk-disc{opacity:.5}html[data-theme="dark"] .bk-cloud{opacity:.25}html[data-theme="dark"] .bk-swoosh path{stroke:#E9DFCE}html[data-theme="dark"] .bk-swoosh circle{fill:#E9DFCE}
html[data-theme="dark"] .home-tabs button[aria-selected="true"]{color:#141A2C}
html[data-theme="dark"] .cat-hwp, html[data-theme="dark"] .cat{--cat:#8EA7EE;--cat-soft:rgba(142,167,238,.14);--cat-ink:#AFC2F5;--cat-solid:#2C4384}html[data-theme="dark"] .cat-pdf{--cat:#F08A74;--cat-soft:rgba(240,138,116,.14);--cat-ink:#F5A592;--cat-solid:#9A3524}html[data-theme="dark"] .cat-word{--cat:#86B2EA;--cat-soft:rgba(134,178,234,.14);--cat-ink:#A6C6F0;--cat-solid:#32609A}html[data-theme="dark"] .cat-img{--cat:#7CC6A2;--cat-soft:rgba(124,198,162,.14);--cat-ink:#98D4B6;--cat-solid:#2A6A4E}

html[data-theme="dark"] .auth-stage .card{
    border-color: var(--line);
  }html[data-theme="dark"] .auth-stage input.i{
    background: var(--sunk) !important;
    border-color: #4A5578 !important;
    color: var(--ink) !important;
  }html[data-theme="dark"] .auth-remember, html[data-theme="dark"] .social.social-circles a small, html[data-theme="dark"] .auth-links button{
    color: var(--muted) !important;
  }html[data-theme="dark"] .auth-links button[data-view="signup"]{
    color: var(--accent) !important;
  }html[data-theme="dark"] .ar-box{
    border-color: #857C6E !important;
    background: var(--sunk);
  }html[data-theme="dark"] .auth-links button + button{
    border-left-color: #4A5578 !important;
  }html[data-theme="dark"] .auth-stage .or::before, html[data-theme="dark"] .auth-stage .or::after{
    background: var(--line) !important;
  }

/* ---------- Excel Category Card ---------- */
.cat-excel {
  --cat: #107C41;
  --cat-soft: #E2F3EA;
  --cat-ink: #0B5C2E;
  --cat-solid: #107C41;
  --cat-on: #ffffff;
}
html[data-theme="dark"] .cat-excel {
  --cat: #5CD692;
  --cat-soft: rgba(16, 124, 65, 0.2);
  --cat-ink: #8CE6B3;
  --cat-solid: #107C41;
}
@media (min-width: 1120px) {
  .bigcats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
  .bigcat-top { padding: 15px 14px !important; gap: 10px !important; }
  .bigcat-tt b { font-size: 17px !important; }
  .bigcat-tt small { font-size: 12px !important; }
  .trow { padding: 9px 10px !important; }
  .trow-t b { font-size: 14px !important; }
}

/* ---------- Yellow Image Card & Upgraded Bottom SEO Section ---------- */
/* 이미지 도구 카드: 노란색(골드 옐로우) 테마 유지 */
.cat-img {
  --cat: #B45309 !important;
  --cat-soft: #FEF3C7 !important;
  --cat-ink: #92400E !important;
  --cat-solid: #EAB308 !important;
  --cat-on: #1E293B !important;
}
.cat-img .bigcat-top {
  background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%) !important;
  color: #1E293B !important;
  border-bottom: 3px solid #CA8A04 !important;
}
.cat-img .bigcat-ic {
  background: rgba(30, 41, 59, 0.12) !important;
  color: #1E293B !important;
}
.cat-img .bigcat-tt b { color: #141B2B !important; }
.cat-img .bigcat-tt small { color: #334155 !important; opacity: 0.95 !important; }
.cat-img .trow em, .cat-img em {
  background: #FF8800 !important;
  color: #111827 !important;
}
html[data-theme="dark"] .cat-img {
  --cat: #FACC15 !important;
  --cat-soft: rgba(250, 204, 21, 0.16) !important;
  --cat-ink: #FDE047 !important;
  --cat-solid: #EAB308 !important;
  --cat-on: #141B2B !important;
}

/* 하단 비교표: 예전처럼 여백 있고 깔끔한 미니멀 스타일 */
.format-comparison {
  max-width: 820px !important;
  padding-top: 32px !important;
  padding-bottom: 24px !important;
}
.format-comparison table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--paper-shadow) !important;
}
.format-comparison thead th {
  background: var(--sunk) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--line) !important;
}
.format-comparison tbody th,
.format-comparison tbody td {
  padding: 13px 18px !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}
.format-comparison tbody tr:last-child th,
.format-comparison tbody tr:last-child td {
  border-bottom: 0 !important;
}
.format-comparison tbody th:first-child {
  width: 175px !important;
  white-space: nowrap !important;
}
.format-comparison tbody th a {
  color: var(--navy) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.format-comparison tbody th a:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
}
.format-samples {
  margin-top: 14px !important;
  font-size: 14px !important;
}

/* 하단 가이드: 군더더기 없는 깔끔한 2열 타이틀 리스트 */
.guide-index {
  max-width: 820px !important;
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}
.gi-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
}
.gi-head h2 {
  margin: 0 !important;
}
.gi-head h2 a {
  color: var(--ink) !important;
  text-decoration: none !important;
}
.gi-more {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}
.gi-more:hover {
  text-decoration: underline !important;
}
.guide-index > p {
  margin: 6px 0 16px !important;
  color: var(--muted) !important;
}
.guide-index ul.gi-list {
  columns: unset !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 12px !important;
}
@media (max-width: 680px) {
  .guide-index ul.gi-list { grid-template-columns: 1fr !important; }
}
.guide-index ul.gi-list li {
  margin: 0 !important;
}
.guide-index ul.gi-list a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 11px 15px !important;
  border-radius: 11px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  word-break: keep-all !important;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.12s ease !important;
}
.guide-index ul.gi-list a i {
  font-style: normal !important;
  color: var(--faint) !important;
  font-weight: 700 !important;
  flex: none !important;
  transition: transform 0.14s ease, color 0.14s ease !important;
}
.guide-index ul.gi-list a:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.guide-index ul.gi-list a:hover i {
  color: var(--accent) !important;
  transform: translateX(3px) !important;
}
/* === MANUAL_THEME_OVERRIDE === */

html[data-theme="light"] {
  color-scheme: light !important;
  --navy:#22356F; --navy-2:#3651A0; --link:#2B4590; --orange:#B4561F; --orange-edge:#7A3912; --gold:#E3A33B; --red:#C2412D;
  --blue:#22356F; --blue-2:#3651A0; --cream:#F4EBDD;
  --ground:#F4EBDD; --surface:#FFFBF4; --sunk:#F1E6D4; --ink:#1E2A4A; --muted:#675D4D; --faint:#978B78;
  --line:#E2D3BB; --accent:#B4561F; --accent-ink:#ffffff; --accent-soft:#F7E4D2;
  --paper-shadow:0 1px 2px rgba(90,60,25,.07),0 10px 30px rgba(90,60,25,.10);
  --hanji:url(/assets/hanji.webp);
}
html[data-theme="dark"] {
  color-scheme: dark !important;
}
/* 다크모드 토글 버튼 스타일 */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 13px var(--sans); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
}
.theme-toggle:hover { background: var(--sunk); border-color: var(--navy); transform: translateY(-1px); }
.theme-toggle svg { width: 15px; height: 15px; flex: none; }
.theme-toggle .ic-sun { display: none; color: #F5B800; }
.theme-toggle .ic-moon { display: block; color: var(--navy); }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

html[data-theme="dark"]{
    --navy:#AFC2F5; --navy-2:#8EA7EE; --link:#AFC2F5; --orange-edge:#2A1608;
    --ground:#141A2C; --surface:#1C2338; --sunk:#171D30; --ink:#F2E9DA; --muted:#B9AE9B; --faint:#857C6E;
    --line:#30385A; --accent:#E8935A; --accent-ink:#1B1006; --accent-soft:#3A2617;
    --paper-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
    --hanji:url(/assets/hanji-dark.webp);
  }

html[data-theme="dark"] .visitors b{color:#fff}
html[data-theme="dark"] .hero-bg::after{opacity:.55}
html[data-theme="dark"] .pills a[aria-current="page"]{color:#141A2C}
html[data-theme="dark"] .drop{border-color:#56608A}
html[data-theme="dark"] .bk-rings, html[data-theme="dark"] .bk-disc{opacity:.5}html[data-theme="dark"] .bk-cloud{opacity:.25}html[data-theme="dark"] .bk-swoosh path{stroke:#E9DFCE}html[data-theme="dark"] .bk-swoosh circle{fill:#E9DFCE}
html[data-theme="dark"] .home-tabs button[aria-selected="true"]{color:#141A2C}
html[data-theme="dark"] .cat-hwp, html[data-theme="dark"] .cat{--cat:#8EA7EE;--cat-soft:rgba(142,167,238,.14);--cat-ink:#AFC2F5;--cat-solid:#2C4384}html[data-theme="dark"] .cat-pdf{--cat:#F08A74;--cat-soft:rgba(240,138,116,.14);--cat-ink:#F5A592;--cat-solid:#9A3524}html[data-theme="dark"] .cat-word{--cat:#86B2EA;--cat-soft:rgba(134,178,234,.14);--cat-ink:#A6C6F0;--cat-solid:#32609A}html[data-theme="dark"] .cat-img{--cat:#7CC6A2;--cat-soft:rgba(124,198,162,.14);--cat-ink:#98D4B6;--cat-solid:#2A6A4E}

html[data-theme="dark"] .auth-stage .card{
    border-color: var(--line);
  }html[data-theme="dark"] .auth-stage input.i{
    background: var(--sunk) !important;
    border-color: #4A5578 !important;
    color: var(--ink) !important;
  }html[data-theme="dark"] .auth-remember, html[data-theme="dark"] .social.social-circles a small, html[data-theme="dark"] .auth-links button{
    color: var(--muted) !important;
  }html[data-theme="dark"] .auth-links button[data-view="signup"]{
    color: var(--accent) !important;
  }html[data-theme="dark"] .ar-box{
    border-color: #857C6E !important;
    background: var(--sunk);
  }html[data-theme="dark"] .auth-links button + button{
    border-left-color: #4A5578 !important;
  }html[data-theme="dark"] .auth-stage .or::before, html[data-theme="dark"] .auth-stage .or::after{
    background: var(--line) !important;
  }

/* ---------- Excel Category Card ---------- */
.cat-excel {
  --cat: #107C41;
  --cat-soft: #E2F3EA;
  --cat-ink: #0B5C2E;
  --cat-solid: #107C41;
  --cat-on: #ffffff;
}
html[data-theme="dark"] .cat-excel {
  --cat: #5CD692;
  --cat-soft: rgba(16, 124, 65, 0.2);
  --cat-ink: #8CE6B3;
  --cat-solid: #107C41;
}
@media (min-width: 1120px) {
  .bigcats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
  .bigcat-top { padding: 15px 14px !important; gap: 10px !important; }
  .bigcat-tt b { font-size: 17px !important; }
  .bigcat-tt small { font-size: 12px !important; }
  .trow { padding: 9px 10px !important; }
  .trow-t b { font-size: 14px !important; }
}

/* ---------- Yellow Image Card & Upgraded Bottom SEO Section ---------- */
/* 이미지 도구 카드: 선명하고 따뜻한 노란색(골드 옐로우) 테마 */
.cat-img {
  --cat: #B45309 !important;
  --cat-soft: #FEF3C7 !important;
  --cat-ink: #92400E !important;
  --cat-solid: #EAB308 !important;
  --cat-on: #1E293B !important;
}
.cat-img .bigcat-top {
  background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%) !important;
  color: #1E293B !important;
  border-bottom: 3px solid #CA8A04 !important;
}
.cat-img .bigcat-ic {
  background: rgba(30, 41, 59, 0.12) !important;
  color: #1E293B !important;
}
.cat-img .bigcat-tt b { color: #141B2B !important; }
.cat-img .bigcat-tt small { color: #334155 !important; opacity: 0.95 !important; }
.cat-img .trow em, .cat-img em {
  background: #FF8800 !important;
  color: #111827 !important;
}
html[data-theme="dark"] .cat-img {
  --cat: #FACC15 !important;
  --cat-soft: rgba(250, 204, 21, 0.16) !important;
  --cat-ink: #FDE047 !important;
  --cat-solid: #EAB308 !important;
  --cat-on: #141B2B !important;
}

/* 하단 '작업별 문서 변환 · 편집 · AI 도구 비교' 섹션 고대비 카드화 */
.format-comparison {
  max-width: 1120px !important;
  margin: 28px auto 12px !important;
  padding: 28px 26px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--paper-shadow) !important;
}
.format-comparison h2 {
  margin: 0 0 8px !important;
  font-size: clamp(22px, 2.6vw, 26px) !important;
  color: var(--ink) !important;
}
.format-comparison > p {
  margin: 0 0 18px !important;
  color: var(--muted) !important;
  font-size: 14.5px !important;
}
.format-comparison-scroll {
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  background: var(--surface) !important;
}
.format-comparison table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}
.format-comparison thead th {
  background: #1E2A4A !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 13px 16px !important;
  border-bottom: 0 !important;
}
.format-comparison tbody th,
.format-comparison tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  vertical-align: middle !important;
}
.format-comparison tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--sunk) 55%, transparent) !important;
}
.format-comparison tbody tr:hover {
  background: var(--accent-soft) !important;
}
.format-comparison tbody th:first-child {
  width: 230px !important;
  white-space: nowrap !important;
}
.format-comparison tbody th a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: var(--sunk) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  border: 1px solid var(--line) !important;
  transition: background 0.15s, border-color 0.15s, transform 0.12s !important;
}
.format-comparison tbody th a:hover {
  background: var(--navy) !important;
  color: #FFFFFF !important;
  border-color: var(--navy) !important;
  transform: translateX(2px) !important;
}
.format-samples {
  margin: 18px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: var(--sunk) !important;
  font-size: 13.5px !important;
}
.format-samples a {
  display: inline-block !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.format-samples a:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* 하단 '한글 · PDF · 엑셀 · AI 문서 활용 가이드' 카드 그리드 */
.guide-index {
  max-width: 1120px !important;
  margin: 24px auto 48px !important;
  padding: 28px 26px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--paper-shadow) !important;
}
.gi-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1.5px solid var(--line) !important;
}
.gi-head h2 {
  margin: 0 0 6px !important;
  font-size: clamp(22px, 2.6vw, 26px) !important;
}
.gi-head h2 a {
  color: var(--ink) !important;
  text-decoration: none !important;
}
.gi-head h2 a:hover {
  color: var(--accent) !important;
}
.gi-head p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 14.5px !important;
}
.guide-index ul.gi-grid {
  columns: unset !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 960px) {
  .guide-index ul.gi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .guide-index ul.gi-grid { grid-template-columns: 1fr !important; }
  .format-comparison, .guide-index { padding: 20px 16px !important; }
}
.guide-index ul.gi-grid li {
  margin: 0 !important;
}
.gi-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 100% !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: var(--ground) !important;
  border: 1.5px solid var(--line) !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.gi-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--accent) !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 20px rgba(30, 42, 74, 0.08) !important;
}
.gi-card strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  word-break: keep-all !important;
}
.gi-card span {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  word-break: keep-all !important;
}
.gi-card small {
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--line) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}

/* === VIVID_YELLOW_IMG_CARD === */
.cat-img {
  --cat: #D97706 !important;
  --cat-soft: #FFFBEB !important;
  --cat-ink: #92400E !important;
  --cat-solid: #FFCC00 !important;
  --cat-on: #111827 !important;
}
.cat-img .bigcat-top {
  background: linear-gradient(135deg, #FFE600 0%, #FFCC00 100%) !important;
  color: #111827 !important;
  border-bottom: 3px solid #E6AC00 !important;
}
.cat-img .bigcat-ic {
  background: rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08) !important;
}
.cat-img .bigcat-tt b {
  color: #111827 !important;
  font-weight: 800 !important;
}
.cat-img .bigcat-tt small {
  color: #1F2937 !important;
  font-weight: 600 !important;
  opacity: 0.92 !important;
}
.cat-img .trow:hover {
  background: #FEF9C3 !important;
}
.cat-img .trow em,
.cat-img em {
  background: #FF8800 !important;
  color: #111827 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .cat-img .trow:hover {
  background: rgba(255, 214, 0, 0.16) !important;
}

/* === VISITORS_LIGHT_READABILITY === */
.visitors {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.visitors b {
  color: var(--ink) !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .visitors {
  color: #675D4D !important;
}
html[data-theme="light"] .visitors b {
  color: #1E2A4A !important;
}
html[data-theme="dark"] .visitors {
  color: #B9AE9B !important;
}
html[data-theme="dark"] .visitors b {
  color: #F2E9DA !important;
}
/* 라이트 모드에서 좌우 장식 화살표(.bk-swoosh)도 선명한 남색으로 고정 */
html[data-theme="light"] .bk-swoosh path {
  stroke: #1E2A4A !important;
}
html[data-theme="light"] .bk-swoosh circle {
  fill: #1E2A4A !important;
}
html[data-theme="light"] .bk-rings,
html[data-theme="light"] .bk-disc {
  opacity: 0.9 !important;
}

/* === PILLS_ACTIVE_AND_SIZE_FIX === */
.pills {
  gap: 6px !important;
  max-width: 900px !important;
}
.pills a {
  font-size: 12px !important;
  padding: 7.5px 12px !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}
.pills a:hover {
  background: var(--sunk) !important;
  border-color: var(--navy) !important;
}
/* 라이트 모드 선택된 버튼: 진한 남색 배경 + 순백색 글자 강제 고정 */
.pills a[aria-current="page"],
html[data-theme="light"] .pills a[aria-current="page"] {
  background: #22356F !important;
  color: #FFFFFF !important;
  border-color: #22356F !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(34, 53, 111, 0.22) !important;
}
/* 다크 모드 선택된 버튼: 밝은 연청색 배경 + 진한 남색 글자 */
html[data-theme="dark"] .pills a[aria-current="page"] {
  background: #AFC2F5 !important;
  color: #141A2C !important;
  border-color: #AFC2F5 !important;
  font-weight: 700 !important;
}

/* === MEGA_MENU_5COL === */
@media (min-width: 960px) {
  .mega { width: min(880px, calc(100vw - 32px)) !important; }
  .mega-cats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
}

/* === MONO_ICONS_AND_READY_CHIP === */
/* '● 변환 준비됨' 배지: 깔끔한 배지 + 초록색 점이 깜빡깜빡거리는 효과 */
.chip.ok,
html[data-theme="light"] .chip.ok {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #EAFBF0 !important;
  color: #0B6E31 !important;
  border: 1px solid #A7E9C0 !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
}
html[data-theme="dark"] .chip.ok {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6EE7B7 !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
}
.chip.ok::before {
  content: "" !important;
  display: inline-block !important;
  width: 7.5px !important;
  height: 7.5px !important;
  border-radius: 50% !important;
  background: #12B850 !important;
  box-shadow: 0 0 6px #12B850 !important;
  animation: bkGreenBlink 1.25s ease-in-out infinite !important;
  flex: none !important;
}
@keyframes bkGreenBlink {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 7px #12B850; }
  50%      { opacity: 0.22; transform: scale(0.82); box-shadow: 0 0 0 transparent; }
}

/* 단색 픽토그램(ico-m) 수직 정렬 및 간격 */
.ico-m {
  display: inline-block;
  vertical-align: -2.5px;
  margin-right: 5px;
  flex: none;
  stroke: currentColor;
}
.btn .ico-m {
  margin-right: 4px;
}

/* === BAKUMI_SMOOTH_BUBBLE_AND_EYES === */


/* 2. 바쿠미 말풍선: 깨지던 왼쪽 ::before / ::after 꼬리를 완전히 제거하고, 왼쪽 아래 모서리만 살짝 좁아지는 매끄러운 일체형 곡선 말풍선으로 고정! */
html .bakumi-say,
html[data-theme="light"] .bakumi-say {
  padding: 9px 18px !important;
  border-radius: 28px !important;
  background: #FFFBF4 !important;
  color: #1E2A4A !important;
  border: 1.5px solid #1E2A4A !important;
  box-shadow: 0 5px 16px rgba(30, 42, 74, 0.12) !important;
}
html[data-theme="dark"] .bakumi-say {
  padding: 9px 18px !important;
  border-radius: 28px !important;
  background: #1C233A !important;
  color: #F2E9DA !important;
  border: 1.5px solid #AFC2F5 !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25) !important;
}
/* 깨짐의 원인이던 ::before, ::after 가상 요소 꼬리를 완전히 제거 */
html .bakumi-say::before,
html .bakumi-say::after,
html[data-theme="light"] .bakumi-say::before,
html[data-theme="light"] .bakumi-say::after,
html[data-theme="dark"] .bakumi-say::before,
html[data-theme="dark"] .bakumi-say::after {
  display: none !important;
  content: none !important;
}

/* Bakumi's bite and completed-file light use the monochrome scene palette. */
.bk-flyer b{color:#202936}
.bk-result-file{filter:drop-shadow(0 0 10px rgba(209,238,255,.9)) drop-shadow(0 0 22px rgba(100,170,225,.5))}
.bk-result-glow{position:fixed;z-index:59;width:26px;height:26px;border:1px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 22px 8px rgba(216,240,255,.82),0 0 56px 14px rgba(108,173,225,.34);animation:bkResultGlow .85s ease-out both}
@keyframes bkResultGlow{0%{opacity:0;scale:.2}28%{opacity:1;scale:1.2}100%{opacity:0;scale:3.6}}
.bk-crumb,.bk-crumb:nth-child(3n),.bk-crumb:nth-child(3n+1){width:4px;height:4px;border:0;border-radius:50%;background:#f3f8ff;box-shadow:0 0 8px rgba(183,224,255,.8)}
@keyframes bkBoxShake{0%,100%{transform:none}35%{transform:translateY(2px)}70%{transform:translateY(-1px)}}
@keyframes bkBiteSnap{0%{transform:translateY(-8px) scale(1.05)}45%{transform:translateY(5px) scale(1.08,.96)}100%{transform:none}}



/* Image tools: bright lemon yellow banner in both themes. */
.cat-img{--cat:#e3c62e!important;--cat-soft:#fff9cd!important;--cat-ink:#6a5600!important;--cat-solid:#f5d934!important;--cat-on:#242000!important}
.cat-img .bigcat-top{background:linear-gradient(135deg,#fff28a,#f5d334)!important;color:#252000!important;border-bottom:3px solid #d0ac18!important}
.cat-img .bigcat-ic{background:#3028001a!important;color:#252000!important}
.cat-img .bigcat-tt b,.cat-img .bigcat-tt small{color:#252000!important}
.cat-img .trow:hover{background:#fff5b5!important}
.cat-img .trow em,.cat-img em{background:#FF8800!important;color:#111827!important}
:is(.new-badge,.trow em,.tile em,.cat em){background:#FF8800!important;color:#111827!important;font-size:9.5px!important;font-weight:800!important;line-height:1!important;letter-spacing:.04em!important;padding:3px 6.5px!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
html[data-theme="dark"] .cat-img{--cat:#ffe465!important;--cat-soft:#3f3716!important;--cat-ink:#ffe994!important;--cat-solid:#f5d934!important}
html[data-theme="dark"] .cat-img .trow:hover{background:#3f3716!important}

/* ===== 2026-10 polish: slightly smaller controls + springy motion everywhere ===== */
:root{--bk-spring:cubic-bezier(.34,1.56,.64,1);--bk-soft:cubic-bezier(.22,1,.36,1)}
body .home-hero .drop-btn{font-size:14.5px;padding:11px 22px}
body .home-hero .drop{padding:36px 22px 26px}
body .home-hero .drop-ic{width:38px;height:38px}
body .theme-toggle{height:30px;padding:0 10px;font-size:12.5px}
body .tsearch{height:38px;padding:6px 14px;font-size:14px}
body .ai-go{padding:9px 15px;font-size:14px}
body .ai-chip{padding:6px 11px;font-size:13px}
body .pill{height:38px;font-size:13.5px}
body .donate{padding:6px 13px;font-size:13px}
body .bk-lc-fab{height:36px;padding:0 14px;font-size:12.5px}
body .drop-btn,body .theme-toggle,body .ai-go,body .ai-chip,body .pill,body .donate,body .bk-lc-fab,body .bk-lc-chip,body .bk-lc-send,
body .tsearch,body .bigcat-top,body .lang summary,body .account-link,body details>summary,body button{
  transition:transform .4s var(--bk-spring),background-color .25s var(--bk-soft),border-color .25s var(--bk-soft),color .25s var(--bk-soft),box-shadow .3s var(--bk-soft)}
body .drop-btn:hover,body .ai-go:hover,body .pill:hover,body .donate:hover,body .bk-lc-fab:hover,body .ai-chip:hover{transform:translateY(-1px)}
body .drop-btn:active,body .theme-toggle:active,body .ai-go:active,body .ai-chip:active,body .pill:active,body .donate:active,body .bk-lc-fab:active,body .bk-lc-chip:active,body .bk-lc-send:active,body button:active{transform:scale(.95)}
body .bigcat-top:hover{transform:translateY(-2px)}
body .home-hero .drop:not(.quick-active):hover{transform:translateY(-2px)}
body details[open]:not(.lang)>summary~*{animation:bkReveal .45s var(--bk-soft) both}
@keyframes bkReveal{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){body *{transition-duration:.01ms!important;animation-duration:.01ms!important}}
html[data-theme="dark"] body[data-home] .home-hero .drop:not(.quick-active){background:rgba(255,255,255,.035);border:1.5px dashed rgba(230,239,250,.24);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px rgba(0,0,0,.35)}
html[data-theme="dark"] body[data-home] .home-hero .drop:not(.quick-active):hover,html[data-theme="dark"] body[data-home] .home-hero .drop.over:not(.quick-active){border-color:#E8935A;box-shadow:0 0 0 4px rgba(232,147,90,.12),0 24px 60px rgba(0,0,0,.35)}
/* Bakumi: softer, see-through red blush instead of hot pink */
body .bk-cheek{fill:#FF5E5E;fill-opacity:.55}
/* ===== Bakumi motion sheet (01 idle · 02 mouth wide · 03 chomp · 04 spit · 05 wave) ===== */
.bk-face{overflow:visible}
.bk-squint,.bk-buzz,.bk-shreds,.bk-twinkle,.bk-paw,.bk-orbit>g{opacity:0;pointer-events:none}
.bk-shreds path{opacity:0;fill:#F3EBDD;stroke:#141A33;stroke-width:1.6;transform-box:fill-box}
.bk-paw,.bk-twinkle path,.bk-orbit>g{transform-box:fill-box;transform-origin:50% 100%}
.bk-twinkle path{transform-origin:50% 50%}
/* 01 대기·탐색: 가끔 파일들이 주변을 둥실 떠다님 (큰 바쿠미에만) */
.bk-orbit>g:nth-child(1){transform:translate(22px,96px) scale(1.5)}.bk-orbit>g:nth-child(2){transform:translate(330px,66px) scale(1.5)}
.bk-orbit>g:nth-child(3){transform:translate(-4px,262px) scale(1.5)}.bk-orbit>g:nth-child(4){transform:translate(362px,252px) scale(1.5)}
:is(.bakumi,#heroBk,#emptyBk)[data-mood="idle"] .bk-orbit>g{animation:bkOrbit 15s ease-in-out infinite}
:is(.bakumi,#heroBk,#emptyBk)[data-mood="idle"] .bk-orbit>g:nth-child(2){animation-delay:.35s}
:is(.bakumi,#heroBk,#emptyBk)[data-mood="idle"] .bk-orbit>g:nth-child(3){animation-delay:.7s}
:is(.bakumi,#heroBk,#emptyBk)[data-mood="idle"] .bk-orbit>g:nth-child(4){animation-delay:1.05s}
@keyframes bkOrbit{0%,62%{opacity:0;translate:0 14px;rotate:-8deg;scale:.6}68%{opacity:1;translate:0 0;rotate:6deg;scale:1}76%{translate:0 -7px;rotate:-5deg}84%{opacity:1;translate:0 2px;rotate:4deg}90%,100%{opacity:0;translate:0 -18px;rotate:0deg;scale:.7}}
/* 02 입 벌리기: 눈 동그랗게 */
:is(.bakumi,.bk-pop,.bk)[data-mood="hungry"] .bk-iris,:is(.bakumi,.bk-pop,.bk)[data-mood="windup"] .bk-iris{scale:1.1;transform-box:fill-box;transform-origin:center}
/* 03 콱! 냠냠: 눈 질끈 웃고 종이 부스러기 튐 */
:is(.bakumi,.bk-pop,.bk):is([data-mood="chew"],[data-mood="chomp"]) .bk-happy{opacity:1}
:is(.bakumi,.bk-pop,.bk):is([data-mood="chew"],[data-mood="chomp"]) .bk-lid{visibility:hidden}
:is(.bakumi,.bk-pop,.bk)[data-mood="chew"] .bk-shreds{opacity:1}
:is(.bakumi,.bk-pop,.bk)[data-mood="chew"] .bk-shreds path{animation:bkShred .62s cubic-bezier(.2,.7,.3,1) infinite backwards}
.bk-shreds path:nth-child(1){--x:62px;--y:120px;--tx:-46px;--ty:-70px}.bk-shreds path:nth-child(2){--x:290px;--y:118px;--tx:50px;--ty:-64px;animation-delay:.1s!important}
.bk-shreds path:nth-child(3){--x:40px;--y:200px;--tx:-58px;--ty:-18px;animation-delay:.2s!important}.bk-shreds path:nth-child(4){--x:316px;--y:206px;--tx:60px;--ty:-24px;animation-delay:.31s!important}
.bk-shreds path:nth-child(5){--x:120px;--y:60px;--tx:-20px;--ty:-62px;animation-delay:.42s!important}.bk-shreds path:nth-child(6){--x:236px;--y:56px;--tx:24px;--ty:-66px;animation-delay:.5s!important}
@keyframes bkShred{0%{transform:translate(var(--x),var(--y)) scale(.8) rotate(0);opacity:0}20%{opacity:1}100%{transform:translate(calc(var(--x) + var(--tx)),calc(var(--y) + var(--ty))) scale(2) rotate(200deg);opacity:0}}
/* 04 뱉기·거절 (못 먹는 파일, 한도 초과, 오류): >< 찡그림 + 부르르 + 땀 */
:is(.bakumi,.bk-pop,.bk):is([data-mood="yuck"],[data-mood="error"]) .bk-squint{opacity:1}
:is(.bakumi,.bk-pop,.bk):is([data-mood="yuck"],[data-mood="error"]) :is(.bk-lid,.bk-happy,.bk-cheek){opacity:0!important}
:is(.bakumi,.bk-pop,.bk):is([data-mood="yuck"],[data-mood="error"]) .bk-sweat{opacity:1}
:is(.bakumi,.bk-pop,.bk):is([data-mood="yuck"],[data-mood="error"]) .bk-mouth{transform-origin:50% 40%!important;transform:scale(.62,-.3)!important}
:is(.bakumi,.bk-pop,.bk):is([data-mood="yuck"],[data-mood="error"]) .bk-buzz{animation:bkBuzz .16s linear 7}
:is(.bakumi,.bk-pop,.bk):is([data-mood="yuck"],[data-mood="error"]) .bk-body{animation:bkYuck .55s ease-in-out 2!important}
@keyframes bkBuzz{0%,100%{opacity:.9;translate:-2px 0}50%{opacity:.4;translate:2px 0}}
@keyframes bkYuck{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) translateX(-4px)}75%{transform:rotate(7deg) translateX(4px)}}
/* 05 변환 완료: 눈웃음 + 오른발 흔들기 + 반짝 */
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-happy{opacity:1}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-lid{visibility:hidden}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-cheek{opacity:.9;transform:scale(1.1)}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-mouth{transform:scaleY(.5)}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-body>img{-webkit-mask:var(--bk-paw-hole) 0 0/100% 100% no-repeat;mask:var(--bk-paw-hole) 0 0/100% 100% no-repeat}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-paw{opacity:1;animation:bkWave 1.9s cubic-bezier(.3,1.4,.5,1) both}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-twinkle{opacity:1}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-twinkle path{animation:bkTwinkle .9s ease-in-out 2 both}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-twinkle path:nth-child(2){animation-delay:.2s}
:is(.bakumi,.bk-pop,.bk):is([data-mood="wave"],[data-mood="happy"]) .bk-twinkle path:nth-child(3){animation-delay:.4s}
:root{--bk-paw-hole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 382' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H360V382H0Z M221 382V350Q221 313 259 313Q297 313 297 350V382Z'/%3E%3C/svg%3E")}
@keyframes bkWave{0%{transform:translate(0,0) rotate(0)}18%{transform:translate(42px,-150px) rotate(10deg)}30%{transform:translate(42px,-150px) rotate(-14deg)}42%{transform:translate(42px,-150px) rotate(16deg)}54%{transform:translate(42px,-150px) rotate(-14deg)}66%{transform:translate(42px,-150px) rotate(12deg)}80%{transform:translate(42px,-150px) rotate(0)}100%{transform:translate(0,0) rotate(0)}}
@keyframes bkTwinkle{0%,100%{scale:0;opacity:0}50%{scale:1;opacity:1;rotate:45deg}}
/* 그려 둔 표정 컷: 배빵빵(한도·너무 큼) · 갸웃(모르는 파일) · 빼꼼(첫 등장) */
.bk-body{position:relative}
.bk-alt{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .14s;filter:inherit}
:is(.bakumi,.bk-pop,.bk):is([data-mood="full"],[data-mood="puzzled"],[data-mood="peekin"]) .bk-body>:is(img:not(.bk-alt),.bk-face){opacity:0;transition:opacity .1s}
:is(.bakumi,.bk-pop,.bk)[data-mood="full"] .bk-alt-stuffed,:is(.bakumi,.bk-pop,.bk)[data-mood="puzzled"] .bk-alt-puzzled,:is(.bakumi,.bk-pop,.bk)[data-mood="peekin"] .bk-alt-peekin{opacity:1}
:is(.bakumi,.bk-pop,.bk)[data-mood="full"] .bk-body{animation:bkPat .9s ease-in-out infinite!important}
:is(.bakumi,.bk-pop,.bk)[data-mood="puzzled"] .bk-body{animation:bkTilt .5s cubic-bezier(.3,1.5,.5,1) both!important}
@keyframes bkPat{0%,100%{transform:scale(1,1)}50%{transform:scale(1.035,.975)}}
@keyframes bkTilt{0%{transform:rotate(0)}60%{transform:rotate(5deg)}100%{transform:rotate(2deg)}}
/* 첫 등장: 빼꼼 → 좌우를 살짝 살핌 → 쏙 들어갔다가 → 뿅! */
:is(.bakumi,.bk-pop,.bk)[data-mood="duck"] .bk-body>:is(img:not(.bk-alt),.bk-face){opacity:0}
:is(.bakumi,.bk-pop,.bk):is([data-mood="peekin"],[data-mood="duck"]) :is(.bk-alt-peekin,.bk-alt-peekeyes){opacity:1}
:is(.bakumi,.bk-pop,.bk)[data-mood="pop"] .bk-alt{opacity:0;transition:none}
:is(.bakumi,#heroBk)[data-mood="peekin"] .bk-body{animation:bkPeekIn .45s cubic-bezier(.2,1.25,.4,1) both!important}
:is(.bakumi,#heroBk)[data-mood="duck"] .bk-body{animation:bkDuck .26s cubic-bezier(.5,0,.9,.5) both!important}
:is(.bakumi,#heroBk)[data-mood="pop"] .bk-body{animation:bkPop .55s cubic-bezier(.2,1.45,.4,1) both!important}
:is(.bakumi,#heroBk)[data-mood="pop"] .bk-twinkle{opacity:1}
:is(.bakumi,#heroBk)[data-mood="pop"] .bk-twinkle path{animation:bkTwinkle .6s .12s ease-out both}
.bk-pk-iris{transition:none}
:is(.bakumi,.bk-pop,.bk)[data-mood="peekin"] .bk-pk-iris{animation:bkRoll 1.15s .4s ease-in-out both}
#heroBk:is([data-mood="peekin"],[data-mood="duck"],[data-mood="pop"]){clip-path:inset(-80% -80% 0 -80%)}
@keyframes bkPeekIn{0%{transform:translateY(62%)}100%{transform:translateY(0)}}
@keyframes bkDuck{0%{transform:translateY(0)}100%{transform:translateY(80%)}}
@keyframes bkPop{0%{transform:translateY(90%) scale(.92,1.1)}55%{transform:translateY(-9%) scale(1.05,.95)}78%{transform:translateY(2%) scale(.98,1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes bkRoll{0%,100%{transform:translate(0,0)}24%,42%{transform:translate(-4px,0)}68%,84%{transform:translate(3px,0)}}
:is(.bakumi,#heroBk):is([data-mood="peekin"],[data-mood="duck"],[data-mood="pop"]) .bakumi-say{opacity:0}
@media (prefers-reduced-motion:reduce){.bk-orbit,.bk-shreds,.bk-buzz{display:none}.bk-paw,.bk-twinkle path{animation:none!important}}

/* Keep the cancel control within the dialog's painted bounds. */
#working{overflow:visible}
#working .in{position:relative;padding-top:50px!important}
#working #workingCancel{position:absolute!important;top:10px!important;right:10px!important;display:grid!important;place-items:center!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border:1px solid #c9cdd4!important;border-radius:50%!important;background:#e7e9ed!important;color:#667080!important;font:500 20px/1 Arial,sans-serif!important;text-align:center!important;box-shadow:0 2px 8px #0002!important;cursor:pointer}
#working #workingCancel:hover{background:#d7dbe1!important;color:#374151!important;transform:none!important}
#working #workingCancel:focus-visible{outline:2px solid #2450ac;outline-offset:2px}
#limitPlans.btn.primary{color:#fff!important}
.referral-actions [data-ref-message]{width:100%;min-height:98px;resize:vertical;padding:10px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#334155;font:13px/1.5 inherit}
.referral-actions [data-ref-message][hidden]{display:none}
.referral-actions [data-ref-status]{min-height:1.4em;color:#334155;font-size:13px}
/* ===== 오늘 무료 횟수 다 씀 창 (2026-10 리디자인) ===== */
dialog#limit.lm{width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:0;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px -20px rgba(10,14,30,.45)}
dialog#limit.lm[open]{animation:lmIn .42s cubic-bezier(.2,1.25,.4,1)}
dialog#limit.lm::backdrop{background:rgba(8,12,24,.55);backdrop-filter:blur(3px)}
#limit.lm .in{position:relative;padding:22px 22px 16px;gap:14px}
#limit.lm .lm-xf{position:absolute;top:12px;right:12px;margin:0}
#limit.lm .lm-xf .lm-x{all:unset;border:0!important;background:transparent!important;padding:0!important;border-radius:50%!important;color:var(--muted)!important;text-align:center!important;box-sizing:border-box;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
#limit.lm .lm-xf .lm-x:hover{background:rgba(127,127,127,.12)!important;color:var(--ink)!important}
#limit.lm .lm-head{display:flex;align-items:center;gap:14px;padding-right:26px}
#limit.lm .lm-bk{flex:0 0 auto;width:84px;height:auto;margin:-6px 0 -8px -6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));animation:lmPat 1.6s ease-in-out infinite;transform-origin:50% 100%}
#limit.lm h2{word-break:keep-all;margin:0 0 4px;font-size:20px;line-height:1.3;letter-spacing:-.02em}
#limit.lm .lm-lead{font-size:13px;line-height:1.5}
#limit.lm .lm-msg{padding:9px 12px;border-radius:10px;background:rgba(127,127,127,.08);font-size:13px}
#limit.lm .lm-msg[hidden]{display:none}
#limit.lm .lm-invite{position:relative;display:grid;gap:10px;padding:16px;border:1.5px solid rgba(232,147,90,.55);border-radius:18px;background:linear-gradient(150deg,#FFF3E8,#FFFDF9 70%)}
#limit.lm .lm-invite[hidden]{display:none}
#limit.lm .lm-tag{justify-self:start;padding:3px 9px;border-radius:999px;background:#E8935A;color:#fff;font-size:11.5px;font-weight:800}
#limit.lm h3{margin:0;font-size:16.5px;letter-spacing:-.01em;color:#1E2A4A}
#limit.lm .lm-rewards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#limit.lm .lm-rewards span{display:flex;align-items:baseline;gap:6px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid rgba(232,147,90,.3);color:#5B6474;font-size:12.5px;font-weight:700}
#limit.lm .lm-rewards b{color:#E07B3C;font-size:22px;font-weight:900;letter-spacing:-.02em}
#limit.lm .lm-steps{margin:0;padding:0;list-style:none;display:grid;gap:5px;counter-reset:lm}
#limit.lm .lm-steps li{position:relative;padding-left:26px;color:#4B5565;font-size:12.5px;line-height:1.45;counter-increment:lm}
#limit.lm .lm-steps li::before{content:counter(lm);position:absolute;left:0;top:-1px;width:18px;height:18px;border-radius:50%;background:#1E2A4A;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
#limit.lm .lm-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
#limit.lm .lm-btns .btn{margin:0;min-height:44px;border-radius:12px;font-weight:800;font-size:14px}
#limit.lm .lm-btns .btn.primary{background:#E8935A!important;border-color:#E8935A!important;color:#fff!important}
#limit.lm .lm-btns .btn.primary:hover{background:#DD7F41!important}
#limit.lm .lm-btns .btn:not(.primary){background:#fff;border:1px solid rgba(30,42,74,.18);color:#1E2A4A}
#limit.lm [data-ref-status]:empty{display:none}
#limit.lm [data-ref-status]{color:#2F7A4F;font-size:12.5px;font-weight:600}
#limit.lm .lm-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:600}
#limit.lm .lm-or::before,#limit.lm .lm-or::after{content:"";flex:1;height:1px;background:var(--line)}
#limit.lm #referralActions[hidden]+.lm-or{display:none}
#limit.lm .lm-plans{display:grid;gap:10px}
#limit.lm .lm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#limit.lm .lm-tile{position:relative;display:grid;gap:2px;padding:12px;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.3,1.5,.5,1),border-color .2s}
#limit.lm .lm-tile:hover{transform:translateY(-2px);border-color:#2450AC}
#limit.lm .lm-tile span{font-size:12px;font-weight:700;color:var(--muted)}
#limit.lm .lm-tile b{font-size:17px;font-weight:900;letter-spacing:-.02em}
#limit.lm .lm-tile small{font-size:12px;color:var(--muted)}
#limit.lm .lm-tile.hot{border:1.5px solid #2450AC;background:rgba(36,80,172,.05)}
#limit.lm .lm-tile i{position:absolute;top:-9px;right:10px;padding:2px 8px;border-radius:999px;background:#2450AC;color:#fff;font-style:normal;font-size:11px;font-weight:800}
#limit.lm #limitPlans{margin:0;min-height:46px;border-radius:12px;font-weight:800}
#limit.lm .lm-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px;font-size:12px}
#limit.lm .lm-foot a{color:var(--ink);font-weight:600}
#limit.lm .lm-foot a[hidden]{display:none}
#limit.lm .in>.lm-later{all:unset;border:0!important;background:transparent!important;padding:8px 14px!important;border-radius:999px!important;color:var(--muted)!important;text-align:center!important;box-sizing:border-box;justify-self:center;margin-top:2px;padding:8px 14px;border-radius:999px;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#limit.lm .in>.lm-later:hover{color:var(--ink)!important;background:rgba(127,127,127,.1)!important}
@keyframes lmIn{0%{opacity:0;transform:translateY(16px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes lmPat{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.97)}}
@media (max-width:420px){#limit.lm .in{padding:18px 16px 12px}#limit.lm .lm-head{gap:10px}#limit.lm .lm-bk{width:60px;margin:-4px 0 -6px -4px}#limit.lm h2{font-size:17px}#limit.lm .lm-btns .btn{font-size:13px}}
@media (prefers-reduced-motion:reduce){dialog#limit.lm[open],#limit.lm .lm-bk{animation:none}}



/* === [ROOT CSS V100] === */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
}
#bkFullViewportFx {
  width: 100% !important;
  max-width: 100% !important;
  overflow: clip !important;
  contain: strict !important;
}
html header a[href*="login"],
html nav a[href*="login"],
html .topbar a[href*="login"],
html .site-header a[href*="login"],
html a[href^="/login"],
html a[href*="/login"],
html form button[type="submit"],
html .login-card button[type="submit"],
html .auth-card button[type="submit"],
html .btn-login,
html .nav-login-btn {
  background: #1D74F5 !important;
  background-color: #1D74F5 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(29, 116, 245, 0.3) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 999px !important;
}
html header a[href*="login"]::before,
html header a[href*="login"]::after,
html a[href*="/login"]::before,
html a[href*="/login"]::after,
html form button[type="submit"]::before,
html form button[type="submit"]::after {
  display: none !important;
  content: none !important;
}




/* === [PRICING PAGE SILVER BOX + STAR MOTION] === */
@keyframes bkSilverStarTwinkle {
  0%, 100% { transform: scale(0.88) rotate(0deg); opacity: 0.65; }
  50%      { transform: scale(1.18) rotate(18deg); opacity: 1; }
}
.bk-pricing-silver-box {
  background: #EEF2F6 !important;
  background-color: #EEF2F6 !important;
  background-image: none !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: inset 0 1px 0 #FFFFFF !important;
  color: #0F172A !important;
  position: relative !important;
}
.bk-pricing-silver-box * {
  color: #0F172A !important;
}
.bk-pricing-silver-box .bk-credit-star,
.bk-pricing-silver-box svg:last-of-type {
  color: #64748B !important;
  fill: #64748B !important;
  animation: bkSilverStarTwinkle 2.4s ease-in-out infinite !important;
}

/* ── 후원하기: 단정한 흰 버튼 + 형광 글자 ── */
html body .foot .donate,html body .foot button.donate{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px!important;border-radius:10px;cursor:pointer;
  font:inherit;font-weight:800;font-size:15px!important;letter-spacing:.01em;
  background:#fff!important;border:1px solid #fff!important;
  color:#0a66ff!important;-webkit-text-fill-color:#0a66ff;
  text-shadow:0 0 6px rgba(10,102,255,.35);
  box-shadow:0 1px 2px rgba(0,0,0,.25)!important;
  transition:transform .2s,box-shadow .2s}
html body .foot .donate::before,html body .foot .donate::after{content:none!important}
html body .foot .donate:hover{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(10,102,255,.18),0 4px 14px rgba(0,0,0,.25)!important}
html body .foot .donate:active{transform:scale(.97)}
html body .foot .donate:focus-visible{outline:2px solid #0a66ff;outline-offset:3px}
html[data-theme="light"] body .foot .donate{border-color:#e6e6e6!important}

/* ── 스크롤 성능: 레이아웃을 매 프레임 다시 계산하던 애니메이션을 GPU용(transform)으로 교체 ── */
@media (prefers-reduced-motion:no-preference){
  .bigcat-top::after{left:-40%;animation-name:bkBladeCat!important;will-change:transform,opacity}
  .ai-card::after{left:-40%;animation-name:bkBladeAi!important;will-change:transform,opacity}
  .hero-bg{animation:none!important}
}
@keyframes bkBladeCat{0%{transform:translateX(0) rotate(28deg);opacity:0}4%{opacity:1}30%{transform:translateX(550%) rotate(28deg);opacity:1}31%,100%{transform:translateX(550%) rotate(28deg);opacity:0}}
@keyframes bkBladeAi{0%{transform:translateX(0) rotate(28deg);opacity:0}4%{opacity:1}30%{transform:translateX(917%) rotate(28deg);opacity:1}31%,100%{transform:translateX(917%) rotate(28deg);opacity:0}}

/* ── 메인 정리: 가격표 아래 긴 설명은 "더 알아보기"로 접음 ── */
.home-faq{margin-top:56px}
.home-more{margin:32px auto 56px;padding:0;border:0;background:none}
.home-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  width:max-content;margin:0 auto;padding:10px 18px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:14px;font-weight:600;transition:color .2s,border-color .2s}
.home-more>summary::-webkit-details-marker{display:none}
.home-more>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.home-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.home-more>summary:hover{color:var(--ink);border-color:var(--accent,var(--line))}
.home-more-body{margin-top:24px}
.home-more-body>.container{width:auto;max-width:none;padding-left:0;padding-right:0}

/* ── 광고 뒤 카드 배경 제거 ── */
.result-ad{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:56px!important;margin-bottom:48px!important}

/* ── 디자인 메이커(AI 디자인) 패널: 가독성 정리 ── */
.dm-panel{width:min(100%,880px);margin-top:16px;padding:24px;border-radius:20px;background:#fff;color:#141b2b;
  box-shadow:0 20px 55px rgba(0,0,0,.32);text-align:left;display:grid;gap:26px;font-family:var(--sans);box-sizing:border-box}
.dm-panel *{box-sizing:border-box}
.dm-panel h2{margin:0;font-size:18px;line-height:1.35;font-weight:800;color:#101a33;letter-spacing:-.01em}
.dm-panel .dm-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:12px}
.dm-panel .dm-sub{font-size:13px;color:#5b6576;line-height:1.5}
.dm-panel .dm-chip{font-size:12.5px;font-weight:700;color:#1F459A;background:#eef3ff;padding:5px 11px;border-radius:999px;white-space:nowrap}
/* 입력칸: 다크·네온 테마 색이 스며들지 않게 고정 */
.dm-panel textarea,.dm-panel select,.dm-panel input[type=number]{background:#fff!important;color:#141b2b!important;-webkit-text-fill-color:#141b2b!important;
  border:1.5px solid #c9d5ec!important;border-radius:12px!important;font:500 15px/1.5 var(--sans)!important;box-shadow:none!important;outline:none}
.dm-panel textarea:focus,.dm-panel select:focus,.dm-panel input[type=number]:focus{border-color:#1F5FE0!important;box-shadow:0 0 0 3px rgba(31,95,224,.15)!important}
.dm-panel textarea{display:block;width:100%;min-height:96px;padding:13px 15px!important;resize:vertical}
.dm-panel textarea::placeholder{color:#8a94a8;-webkit-text-fill-color:#8a94a8}
.dm-panel .dm-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dm-panel select{flex:1 1 240px;min-width:0;height:46px;padding:0 12px!important;cursor:pointer}
.dm-panel .dm-ref{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 14px;border-radius:12px;
  border:1.5px dashed #9fb3dc;background:#f6f8fd;color:#1e3a78;font:600 14px var(--sans);cursor:pointer;white-space:nowrap;flex:0 0 auto}
.dm-panel .dm-ref:hover{border-color:#1F5FE0;background:#eef3ff}
.dm-panel .dm-refprev{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:5px 6px 5px 5px;border-radius:10px;background:#eef3ff;font-size:13px;font-weight:600;color:#14234a}
.dm-panel .dm-refprev[hidden]{display:none}
.dm-panel .dm-refprev img{width:30px;height:30px;object-fit:cover;border-radius:6px}
.dm-panel .dm-refprev span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-panel .dm-refprev button{border:0;background:none;color:#c92a2a;font-size:18px;font-weight:800;cursor:pointer;padding:0 6px;line-height:1}
.dm-panel .dm-go{display:block;width:100%;height:52px;margin-top:12px;border:0!important;border-radius:12px!important;background:#1F5FE0!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;font:800 16px var(--sans)!important;cursor:pointer;box-shadow:0 6px 18px rgba(31,95,224,.28)!important;text-shadow:none!important}
.dm-panel .dm-go:hover{background:#1a52c4!important}
.dm-panel .dm-go:disabled{opacity:.7;cursor:progress}
.dm-panel .dm-status{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#3b4d71;min-height:0}
.dm-panel .dm-status:empty{display:none}
/* 규격 카드: 모바일 2개, 태블릿 3개, PC 4개씩 */
.dm-panel .dm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dm-panel .dm-size{container-type:inline-size}
.hero-in:has(> .dm-panel){width:100%;max-width:900px}
@container (min-width:560px){.dm-panel .dm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:760px){.dm-panel .dm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dm-panel .canvas-preset-card{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;
  min-height:68px;padding:12px!important;border-radius:12px!important;border:1.5px solid #dbe3f1!important;background:#f8faff!important;
  text-align:left;cursor:pointer;color:#14213b;box-shadow:none!important;transition:border-color .15s,background .15s}
.dm-panel .canvas-preset-card:hover{border-color:#9fb3dc!important}
.dm-panel .canvas-preset-card.is-on{border:2px solid #1F5FE0!important;background:#eef3ff!important;padding:11.5px!important}
.dm-panel .dm-shape{grid-row:1/3;justify-self:center;display:block;border:2px solid #7f93c2;border-radius:3px;background:#fff}
.dm-panel .canvas-preset-card.is-on .dm-shape{border-color:#1F5FE0;background:#dbe6ff}
.dm-panel .canvas-preset-card b{font-size:14px;line-height:1.3;font-weight:700;color:#14213b;word-break:keep-all}
.dm-panel .canvas-preset-card small{font-size:12px;color:#66708a;font-variant-numeric:tabular-nums}
/* 직접 입력 */
.dm-panel .dm-custom{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding-top:18px;border-top:1px solid #e6ebf4}
.dm-panel .dm-custom-label{font-size:14px;font-weight:700;color:#263657}
.dm-panel .dm-wh{display:flex;align-items:center;gap:8px;color:#5b6576;font-weight:600}
.dm-panel input[type=number]{width:92px;height:44px;padding:0 8px!important;text-align:center;font-weight:700!important;font-variant-numeric:tabular-nums}
.dm-panel .dm-px{font-size:14px}
.dm-panel .dm-blank{margin-left:auto;height:44px;padding:0 18px;border-radius:12px!important;border:1.5px solid #1F5FE0!important;background:#fff!important;
  color:#1F5FE0!important;-webkit-text-fill-color:#1F5FE0!important;font:700 14.5px var(--sans)!important;cursor:pointer;box-shadow:none!important}
.dm-panel .dm-blank:hover{background:#eef3ff!important}
@media(max-width:560px){
  .dm-panel{padding:18px 16px;gap:22px;border-radius:18px}
  .dm-panel h2{font-size:17px}
  .dm-panel .dm-ref{flex:1 1 100%}
  .dm-panel .dm-wh{flex:1 1 100%}
  .dm-panel .dm-wh input[type=number]{flex:1}
  .dm-panel .dm-blank{flex:1 1 100%;margin-left:0}
  .dm-panel .canvas-preset-card{grid-template-columns:1fr;row-gap:4px;min-height:84px}
  .dm-panel .dm-shape{grid-row:auto;justify-self:start;margin-bottom:2px;transform:scale(.8);transform-origin:left center}
}

/* 자주 묻는 질문 답변: 줄바꿈을 그대로 보여 줌 (지원 형식 목록용) */
.faq details p{white-space:pre-line}