:root{
 --softfont:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Times New Roman",serif;--bg:#fbfaf2;--cream:#fffdf5;--leaf:#6f9d62;--deep:#31543b;--sage:#dcead2;--mint:#e9f4ec;--sky:#d8edf4;--snow:#f7fbff;--bark:#8a6b45;--soil:#5d4a36;--gold:#c59b56;--line:rgba(88,117,67,.18);--card:rgba(255,255,255,.72);--ink:#263227;--muted:#71806f;--shadow:rgba(85,105,72,.14);--accent:#77a95c;--glow:rgba(119,169,92,.28);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Pretendard","SUIT","Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.68}
body:before{content:"";position:fixed;inset:0;z-index:-5;background:
 radial-gradient(circle at 18% 4%,rgba(202,231,188,.75),transparent 26%),
 radial-gradient(circle at 85% 10%,rgba(195,229,241,.64),transparent 30%),
 radial-gradient(circle at 60% 86%,rgba(238,218,173,.50),transparent 34%),
 linear-gradient(150deg,#fffef8,#eef7ec 48%,#f8f1df);}
body:after{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;background-image:
 radial-gradient(circle,rgba(70,100,54,.08) 0 1px,transparent 1.4px),
 linear-gradient(115deg,rgba(255,255,255,.6),transparent 46%,rgba(255,255,255,.26));background-size:24px 24px,100% 100%;opacity:.78}
#particles{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.leaf{position:absolute;width:12px;height:7px;border-radius:90% 10% 90% 10%;background:rgba(111,157,98,.22);animation:drift linear infinite;transform:rotate(24deg)}
.leaf:nth-child(3n){background:rgba(255,255,255,.65);width:5px;height:5px;border-radius:50%}
.leaf:nth-child(4n){background:rgba(197,155,86,.18)}
@keyframes drift{from{transform:translate3d(0,-12vh,0) rotate(0deg)}to{transform:translate3d(var(--x),110vh,0) rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-9px) rotate(-1deg)}}
@keyframes breathe{50%{transform:scale(1.035);filter:saturate(1.08)}}
#splash{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(155deg,rgba(255,253,244,.95),rgba(231,244,226,.93));transition:.68s cubic-bezier(.22,1,.36,1)}
#splash.hide{opacity:0;pointer-events:none;filter:blur(10px);transform:scale(1.02)}
.gate{width:min(460px,100%);text-align:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.82);background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(241,249,235,.58));border-radius:34px;padding:32px 21px 26px;box-shadow:0 30px 90px var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.gate:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 110deg,transparent,rgba(119,169,92,.18),transparent,rgba(197,155,86,.12),transparent);animation:spin 16s linear infinite}
.gate>*{position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
.icon{width:98px;height:98px;margin:0 auto 18px;border-radius:34px;display:grid;place-items:center;font-size:44px;background:linear-gradient(145deg,#fff,#eef8e9);border:1px solid rgba(119,169,92,.24);box-shadow:0 18px 45px rgba(111,157,98,.22),inset 0 0 26px rgba(255,255,255,.85);animation:float 4.5s ease-in-out infinite}
.kicker{font-size:10px;letter-spacing:.28em;color:var(--leaf);font-weight:900;text-transform:uppercase}
h1{font-family:"Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(34px,9vw,48px);letter-spacing:-.06em;line-height:1.05;margin:12px 0 8px;color:#2d402c}
.subtitle{font-family:"Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px;letter-spacing:.12em;color:#7c8b76;font-style:italic}
.notice{margin:21px 0;text-align:center;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.56);padding:16px;color:#64715f;font-size:13px;line-height:1.85}
button{font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
button:active{transform:translateY(1px) scale(.985)}
.enter,.primary{position:relative;overflow:hidden;width:100%;border:0;border-radius:18px;padding:15px 16px;color:white;font-weight:900;letter-spacing:.16em;background:linear-gradient(105deg,#6f9d62,#8fb977 52%,#c59b56);box-shadow:0 15px 36px rgba(111,157,98,.24)}
#app{display:none;min-height:100vh;padding-bottom:84px}
#app.show{display:block;animation:fadeUp .56s cubic-bezier(.22,1,.36,1)}
.top{position:sticky;top:0;z-index:30;padding:10px 12px env(safe-area-inset-top);background:rgba(255,253,247,.76);backdrop-filter:blur(22px);border-bottom:1px solid rgba(105,132,84,.14)}
.toprow{display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto}
.logo{width:44px;height:44px;border-radius:17px;display:grid;place-items:center;background:white;border:1px solid var(--line);box-shadow:0 10px 26px rgba(85,105,72,.1);color:var(--leaf);font-size:22px}
.brand{flex:1;min-width:0}.brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;letter-spacing:-.035em}.brand span{font-size:10px;color:var(--muted);letter-spacing:.14em;font-weight:800}
.mainbtn{border:1px solid rgba(111,157,98,.22);background:rgba(255,255,255,.65);color:var(--deep);border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900;letter-spacing:.1em}
.nav{display:flex;gap:7px;overflow-x:auto;max-width:1180px;margin:10px auto 0;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav button{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.62);color:#637260;border-radius:999px;padding:12px 16px;font-size:12px;font-weight:900;min-height:42px}
.nav button.active{background:linear-gradient(105deg,var(--leaf),#95b879);color:white;border-color:transparent}
.view{display:none;max-width:1180px;margin:0 auto;padding:16px 14px}.view.active{display:block}
.hero{position:relative;overflow:hidden;border-radius:34px;border:1px solid rgba(255,255,255,.9);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(239,248,232,.52));box-shadow:0 24px 60px var(--shadow)}
.heroImg{height:auto;position:relative;overflow:hidden;background:#eef5e8;display:flex;align-items:center;justify-content:center}
.heroImg img{width:100%;height:auto;display:block;object-fit:contain;object-position:center center;filter:saturate(1.04) contrast(1.02)}
.heroImg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(251,250,242,.10) 58%,rgba(251,250,242,.52));pointer-events:none}
@media(max-width:560px){.heroImg{height:auto}.heroImg img{object-position:center center}}
.heroMark{display:none}
.heroMark .paw{font-size:58px}.heroMark .hm{font-family:Georgia,serif;font-size:30px;font-weight:900;letter-spacing:-.04em}
.heroText{padding:20px}.heroText p{font-family:var(--softfont);color:#68765f;font-size:14px;margin-top:8px;letter-spacing:-.015em}.quote{font-family:Georgia,"Noto Serif KR",serif;font-size:25px;letter-spacing:-.04em;color:#2d402c}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.stat{border:1px solid var(--line);border-radius:22px;padding:13px;background:rgba(255,255,255,.6);text-align:center}.stat b{display:block;font-size:22px;color:var(--leaf)}.stat span{font-size:10px;color:var(--muted);letter-spacing:.12em;font-weight:900}
.sectionTitle{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:18px 2px 12px}.sectionTitle h2{font-size:23px;letter-spacing:-.05em}.sectionTitle p{font-size:12px;color:var(--muted);font-weight:800}
.panel,.charCard,.loreControls{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.82);background:linear-gradient(150deg,rgba(255,255,255,.76),rgba(248,253,245,.5));box-shadow:0 18px 42px var(--shadow);border-radius:28px}
.panel{padding:17px;margin-bottom:14px}
.copyArea,.ctitle,.tags,.body,.situation,.copyall,.bookcopy{position:relative;overflow:hidden;border:1px solid transparent}
.copyArea{font-family:var(--softfont);white-space:pre-wrap;cursor:pointer;padding:15px;border-radius:22px;background:rgba(255,255,255,.48);line-height:1.82;color:#3f4a3d;letter-spacing:.01em;font-size:13px;font-weight:500}
.copyHint{font-size:11px;color:var(--leaf);font-weight:900;letter-spacing:.1em;margin-bottom:8px}
.credit{font-size:12px;color:#766f63;background:rgba(255,248,226,.68);border-color:rgba(197,155,86,.25)}
.charHero{display:grid;gap:14px}.mascot{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center}.avatar{width:92px;height:92px;border-radius:30px;background:linear-gradient(145deg,#fff,#eaf4ff);display:grid;place-items:center;border:1px solid rgba(150,180,200,.3);box-shadow:0 14px 30px rgba(74,104,82,.16),inset 0 0 28px rgba(255,255,255,.85);overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.profile b{font-size:25px;letter-spacing:-.05em}.profile p{color:var(--muted);font-size:13px}
.charActions,.bookActions{display:grid;grid-template-columns:1fr;gap:9px;margin:12px 0}
.loreControls{padding:14px;margin-bottom:14px}
.bookTabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.bookTabs::-webkit-scrollbar{display:none}
.bookTab{border:1px solid var(--line);background:rgba(255,255,255,.62);color:#60745a;border-radius:999px;padding:12px 16px;font-size:12px;font-weight:900;white-space:nowrap;min-height:42px}.bookTab.active{background:linear-gradient(105deg,#6f9d62,#9fbd7b);color:white;border-color:transparent}
.search{position:relative;margin:12px 0}.search input{width:100%;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.74);padding:14px 15px 14px 42px;color:var(--ink);font-size:15px;outline:0}.search i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--leaf);font-style:normal;font-weight:900}
.count{font-size:11px;color:var(--muted);letter-spacing:.12em;font-weight:900;margin-top:7px}
.selectPanel{padding:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(234,246,228,.52))}
.selectPanel label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;color:#53644d}
.selectPanel input{accent-color:#78a75b;width:18px;height:18px}.bulkbtn,.bookcopy,.copyall{border:1px solid rgba(111,157,98,.24);background:rgba(255,255,255,.58);color:#4e7044;border-radius:14px;padding:9px 11px;font-size:11px;font-weight:900;white-space:nowrap}
.bulkbtn:disabled{opacity:.46}
.loreList{display:grid;gap:14px}
.card{position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.84);background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(249,253,246,.52));box-shadow:0 18px 42px var(--shadow);content-visibility:auto;contain-intrinsic-size:260px;contain:layout paint style}
.chead{display:flex;gap:10px;align-items:flex-start;padding:14px;border-bottom:1px solid var(--line)}.badge{min-width:62px;border:1px solid rgba(111,157,98,.24);background:rgba(255,255,255,.56);border-radius:18px;padding:9px 6px;text-align:center;color:var(--leaf);font-size:11px;font-weight:950;letter-spacing:.07em}.ctxt{flex:1;min-width:0}.ctitle{display:inline-block;font-size:18px;font-weight:950;letter-spacing:-.04em;cursor:pointer;padding:3px 4px;border-radius:10px}.cat{font-size:11px;color:#9a7e49;margin-top:2px;font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}.tag{border:1px solid rgba(111,157,98,.17);background:rgba(111,157,98,.09);color:#527549;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}
.body{padding:15px 14px 18px;white-space:pre-wrap;line-height:1.92;color:#3e4a3d;font-size:14px;cursor:pointer;border-radius:0 0 26px 26px}
.galleryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.78);border-radius:26px;padding:6px;box-shadow:0 18px 42px var(--shadow);overflow:hidden}.photo{position:relative;aspect-ratio:1/1;overflow:hidden;border:0;background:#eef5e7;box-shadow:none;border-radius:8px;cursor:pointer;touch-action:manipulation;padding:0}.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease,filter .18s ease}.photo:active img{transform:scale(.97);filter:brightness(.92)}.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.24));opacity:0;transition:.2s}.photo:hover:after{opacity:1}.galleryHint{text-align:center;color:var(--muted);font-size:12px;margin:8px 0 14px;letter-spacing:-.02em}.galleryModal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(39,51,38,.46);backdrop-filter:blur(14px)}.galleryModal.show{display:flex}.galleryPost{width:min(520px,100%);max-height:88vh;overflow:auto;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.86);border-radius:28px;box-shadow:0 28px 80px rgba(45,65,40,.28)}.galleryPost img{width:100%;height:auto;display:block;border-radius:28px 28px 0 0}.galleryCaption{padding:17px 18px 20px}.galleryCaption b{display:block;font-family:var(--softfont);font-size:20px;letter-spacing:-.05em;color:var(--deep);margin-bottom:7px}.galleryCaption p{font-family:var(--softfont);font-size:14px;line-height:1.85;color:#52624f;white-space:pre-line}.galleryCaption .hashTags{display:block;margin-top:12px;color:#7a936c;font-weight:700;letter-spacing:-.02em}.galleryClose{position:sticky;top:10px;float:right;margin:10px 10px -48px 0;z-index:2;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.76);backdrop-filter:blur(12px);font-size:18px;color:var(--deep);box-shadow:0 8px 22px rgba(45,65,40,.16)}@media(max-width:420px){.galleryGrid{gap:3px;padding:4px;border-radius:22px}.photo{border-radius:6px}.galleryCaption b{font-size:18px}}
.copyfx{animation:borderGlow 2.15s cubic-bezier(.22,1,.36,1)}
.copyfx:after{content:"";position:absolute;inset:-35%;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 37%,rgba(255,255,255,.86) 50%,rgba(255,255,255,.22) 62%,transparent 76%);transform:translateX(-95%) rotate(6deg);animation:glass 2.15s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none}
@keyframes glass{0%{transform:translateX(-100%) rotate(6deg);opacity:0}18%{opacity:.95}80%{opacity:.72}100%{transform:translateX(100%) rotate(6deg);opacity:0}}
@keyframes borderGlow{0%{border-color:rgba(119,169,92,0);box-shadow:inset 0 0 0 rgba(119,169,92,0)}35%{border-color:rgba(119,169,92,.9);box-shadow:inset 0 0 22px rgba(119,169,92,.12),0 0 20px rgba(119,169,92,.12)}100%{border-color:rgba(119,169,92,0);box-shadow:inset 0 0 0 rgba(119,169,92,0)}}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%) translateY(14px);opacity:0;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border:1px solid rgba(111,157,98,.28);color:#4e7044;border-radius:999px;padding:11px 18px;font-size:13px;font-weight:900;box-shadow:0 15px 35px var(--shadow);transition:.24s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.empty{padding:45px 12px;text-align:center;border:1px dashed var(--line);border-radius:24px;color:var(--muted);background:rgba(255,255,255,.44)}
.situation,.situation p,.situation b{font-family:var(--softfont);letter-spacing:-.015em}
@media(min-width:760px){.hero{display:grid;grid-template-columns:1.1fr .9fr}.heroImg{height:auto;min-height:0}.charHero{grid-template-columns:.82fr 1.18fr}.loreList{grid-template-columns:repeat(2,minmax(0,1fr))}.bookActions{grid-template-columns:repeat(2,1fr)}.charActions{grid-template-columns:repeat(2,1fr)}}

/* 소담한 자연 기록집 톤 + 모바일 터치 영역 보강 */
body{
 font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-weight:500;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;word-break:keep-all;
}
h1,.quote,.sectionTitle h2,.profile b,.heroMark .hm{
 font-family:"Noto Serif KR","AppleMyungjo","Nanum Myeongjo","Batang",serif;
 font-weight:800;
}
.ctitle,.copyHint,.brand b{font-weight:850}
button,.copyArea,.ctitle,.tags,.body,.situation{touch-action:manipulation}
button{
 min-height:44px;
 padding-top:12px;
 padding-bottom:12px;
 transition:box-shadow .18s ease,filter .18s ease,border-color .18s ease;
}
.nav button,.bookTab,.mainbtn,.bookcopy,.copyall,.primary,.enter{min-height:44px}
.mainbtn{padding-left:13px;padding-right:13px}
.soundbtn{
 width:42px!important;
 min-width:42px!important;
 height:42px!important;
 min-height:42px!important;
 padding:0!important;
 display:inline-grid!important;
 place-items:center!important;
 border-radius:16px!important;
 font-size:19px!important;
 line-height:1!important;
 flex:0 0 42px!important;
}
.copyArea,.body,.tags,.ctitle,.situation{cursor:pointer}
.situation.noCopy{cursor:default}
.profile p{white-space:normal;line-height:1.65}
.copyfx{animation:borderGlow 2.15s cubic-bezier(.22,1,.36,1)}
.copyfx:after{animation:glass 2.15s cubic-bezier(.22,1,.36,1) forwards}
.toast.show{transform:translateX(-50%) translateY(0)}

.soundbtn.on{filter:saturate(1.08) brightness(1.04);box-shadow:0 10px 22px rgba(111,157,98,.18),inset 0 0 0 1px rgba(111,157,98,.22)!important}

/* 최종 폰트 조정: 상단 AU 안내문 톤에 맞춤 */
.copyArea,
.body,
.situation,
.situation p{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  line-height:1.86!important;
  letter-spacing:.005em!important;
  font-weight:500!important;
  color:#4d544a!important;
}
.credit{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  line-height:1.86!important;
  letter-spacing:.005em!important;
  font-weight:500!important;
  color:#766f63!important;
}
.situation b{
  display:block;
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:13px!important;
  line-height:1.45!important;
  letter-spacing:-.015em!important;
  font-weight:760!important;
  color:#5f7d59!important;
  margin:0 0 8px!important;
}
#introBox b{margin-bottom:0!important}
.sectionTitle.softTitle{
  margin-top:16px!important;
  margin-bottom:9px!important;
  align-items:center!important;
}
.sectionTitle.softTitle h2{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:18px!important;
  line-height:1.35!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
  color:#63845d!important;
}
.sectionTitle.softTitle p{
  font-size:10px!important;
  letter-spacing:.06em!important;
  color:#8ea080!important;
  font-weight:700!important;
}


/* CHAR 탭 제목/본문 최종 통일 */
#char .sectionTitle{
  margin-top:16px!important;
  margin-bottom:9px!important;
  align-items:center!important;
}
#char .sectionTitle h2{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:18px!important;
  line-height:1.35!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
  color:#63845d!important;
}
#char .sectionTitle p{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:.06em!important;
  color:#8ea080!important;
  font-weight:700!important;
}
#char .profile b{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:21px!important;
  line-height:1.25!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
  color:#4f6d4b!important;
}
#char .profile p{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  line-height:1.72!important;
  letter-spacing:.005em!important;
  font-weight:500!important;
  color:#65715f!important;
}
#char .copyArea,
#char .situation,
#char .situation p{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  line-height:1.86!important;
  letter-spacing:.005em!important;
  font-weight:500!important;
}
#char .copyArea{color:#4d544a!important}
#char .credit{color:#766f63!important}
#char .situation b{
  display:block!important;
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  line-height:1.86!important;
  letter-spacing:.005em!important;
  font-weight:500!important;
  color:#4d544a!important;
  margin:0 0 8px!important;
}


/* 탭 compact + 입장 발자국 로딩 */
.nav{gap:6px!important;margin-top:8px!important}
.nav button{
 min-height:32px!important;
 padding:6px 11px!important;
 border-radius:13px!important;
 font-size:11px!important;
 line-height:1.1!important;
 letter-spacing:-.02em!important;
 box-shadow:0 5px 14px rgba(85,105,72,.055)!important;
}
.nav button.active{box-shadow:0 7px 18px rgba(111,157,98,.18)!important}
@media(max-width:420px){
 .nav button{min-height:30px!important;padding:6px 10px!important;border-radius:12px!important;font-size:11px!important}
 .nav{gap:5px!important}
}
.pawLoad{
 position:absolute;
 inset:0;
 display:none;
 align-items:center;
 justify-content:center;
 z-index:5;
 background:rgba(251,250,242,.72);
 backdrop-filter:blur(10px);
}
#splash.loading .pawLoad{display:flex}
#splash.loading .gate > :not(.pawLoad){filter:blur(2px);opacity:.28;transform:scale(.985);transition:.25s ease}
.pawLoadBox{
 width:min(280px,86%);
 border:1px solid rgba(111,157,98,.22);
 background:rgba(255,255,255,.72);
 border-radius:24px;
 padding:20px 18px;
 text-align:center;
 box-shadow:0 20px 50px rgba(85,105,72,.16), inset 0 1px 0 rgba(255,255,255,.88);
}
.pawLoadText{
 font-family:var(--softfont);
 color:var(--deep);
 font-size:14px;
 letter-spacing:-.03em;
 font-weight:800;
 margin-bottom:14px;
}
.pawTrail{
 position:relative;
 height:86px;
 width:170px;
 margin:0 auto;
}
.pawTrail i{
 position:absolute;
 font-style:normal;
 opacity:0;
 transform:translateY(18px) scale(.72) rotate(var(--r));
 animation:pawStep 1.05s cubic-bezier(.22,1,.36,1) forwards;
 font-size:23px;
 filter:drop-shadow(0 6px 8px rgba(85,105,72,.16));
}
.pawTrail i:nth-child(1){left:12px;bottom:0;--r:-18deg;animation-delay:.02s}
.pawTrail i:nth-child(2){left:70px;bottom:14px;--r:14deg;animation-delay:.16s}
.pawTrail i:nth-child(3){left:38px;bottom:33px;--r:-12deg;animation-delay:.30s}
.pawTrail i:nth-child(4){left:100px;bottom:48px;--r:16deg;animation-delay:.44s}
.pawTrail i:nth-child(5){left:66px;bottom:68px;--r:-8deg;animation-delay:.58s}
@keyframes pawStep{
 0%{opacity:0;transform:translateY(20px) scale(.68) rotate(var(--r))}
 45%{opacity:1;transform:translateY(0) scale(1.05) rotate(var(--r))}
 100%{opacity:.9;transform:translateY(-2px) scale(1) rotate(var(--r))}
}


/* 카테고리/상단 버튼 최종 정리: 레퍼런스 비율 */
.toprow{gap:10px}
.mainbtn{
  min-height:44px!important;
  height:44px!important;
  border-radius:22px!important;
  padding:0 24px!important;
  border:1.5px solid rgba(98,117,133,.26)!important;
  background:rgba(255,255,255,.58)!important;
  color:#61716d!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
.soundbtn{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border-radius:22px!important;
  font-size:18px!important;
  letter-spacing:0!important;
  flex:0 0 44px!important;
}
.soundbtn.on{
  background:linear-gradient(105deg,#6f9d62,#9fc083)!important;
  color:#fff!important;
  border-color:transparent!important;
  filter:none!important;
  box-shadow:0 8px 18px rgba(111,157,98,.18)!important;
}
.nav{
  gap:10px!important;
  margin:12px auto 0!important;
  padding:0 2px 6px!important;
}
.nav button{
  min-height:46px!important;
  height:46px!important;
  padding:0 24px!important;
  border-radius:22px!important;
  border:1.5px solid rgba(98,117,133,.24)!important;
  background:rgba(255,255,255,.56)!important;
  color:#61716d!important;
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  box-shadow:none!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.nav button.active{
  background:linear-gradient(105deg,#6fa05f,#9cc27f)!important;
  color:white!important;
  border-color:transparent!important;
  box-shadow:0 8px 20px rgba(111,157,98,.16)!important;
}
.nav button:active,.mainbtn:active{
  transform:translateY(1px);
}
@media(max-width:560px){
  .top{padding-left:12px!important;padding-right:12px!important}
  .brand b{font-size:16px!important}
  .brand span{font-size:9px!important;letter-spacing:.13em!important}
  .mainbtn{height:42px!important;min-height:42px!important;border-radius:21px!important;padding:0 18px!important;font-size:13px!important}
  .soundbtn{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;border-radius:21px!important;padding:0!important;font-size:17px!important}
  .nav{gap:8px!important;margin-top:10px!important;padding-bottom:6px!important}
  .nav button{height:44px!important;min-height:44px!important;border-radius:21px!important;padding:0 22px!important;font-size:15px!important}
}


/* final compact header controls */
.top{padding:8px 10px env(safe-area-inset-top)!important}
.toprow{gap:8px!important}
.logo{width:42px!important;height:42px!important;min-width:42px!important;border-radius:15px!important;font-size:20px!important}
.brand b{font-size:17px!important;line-height:1.18!important}
.brand span{font-size:10px!important;letter-spacing:.12em!important}
.mainbtn{
  height:40px!important;
  min-height:40px!important;
  padding:0 18px!important;
  border-radius:20px!important;
  font-size:13px!important;
  line-height:40px!important;
  letter-spacing:.18em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
}
#mainBtn{width:104px!important;min-width:104px!important;max-width:104px!important}
.soundbtn,#bgmBtn{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0!important;
  border-radius:20px!important;
  font-size:18px!important;
  line-height:1!important;
  letter-spacing:0!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 40px!important;
}
.nav{
  gap:8px!important;
  margin-top:9px!important;
  padding:0 0 6px 0!important;
}
.nav button{
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0 17px!important;
  border-radius:19px!important;
  font-size:15px!important;
  line-height:38px!important;
  letter-spacing:-.01em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  transform:none!important;
}
.nav button.active{transform:none!important}
@media (max-width:420px){
  .top{padding-left:9px!important;padding-right:9px!important}
  .toprow{gap:7px!important}
  .logo{width:40px!important;height:40px!important;min-width:40px!important;border-radius:14px!important}
  .brand b{font-size:16px!important}
  .brand span{font-size:9.5px!important}
  .mainbtn{height:38px!important;min-height:38px!important;line-height:38px!important;border-radius:19px!important;font-size:12px!important;padding:0 14px!important}
  #mainBtn{width:96px!important;min-width:96px!important;max-width:96px!important}
  .soundbtn,#bgmBtn{width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important;border-radius:19px!important;font-size:17px!important}
  .nav{gap:7px!important;margin-top:8px!important}
  .nav button{height:36px!important;min-height:36px!important;max-height:36px!important;border-radius:18px!important;padding:0 15px!important;font-size:14.5px!important;line-height:36px!important}
}


/* 요청 반영: 상단 버튼/카테고리 탭 더 슬림하게 */
.mainbtn,#mainBtn{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0 10px!important;
  border-radius:18px!important;
  font-size:11px!important;
  line-height:36px!important;
  letter-spacing:.12em!important;
}
.soundbtn,#bgmBtn{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border-radius:18px!important;
  font-size:16px!important;
}
.nav{
  gap:6px!important;
  margin-top:7px!important;
  padding-bottom:5px!important;
}
.nav button{
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  padding:0 13px!important;
  border-radius:17px!important;
  font-size:13.5px!important;
  line-height:34px!important;
  letter-spacing:-.02em!important;
}
@media(max-width:420px){
  .mainbtn,#mainBtn{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    border-radius:17px!important;
    font-size:10.5px!important;
    line-height:34px!important;
    padding:0 8px!important;
  }
  .soundbtn,#bgmBtn{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    border-radius:17px!important;
    font-size:15px!important;
  }
  .nav{gap:6px!important;margin-top:7px!important}
  .nav button{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    border-radius:16px!important;
    padding:0 12px!important;
    font-size:13px!important;
    line-height:32px!important;
  }
}