/* 잉크 만화 — 게임의 유일한 디자인(index.html의 body.skin-toon). 레퍼런스: 펜선으로 그린 아이소메트릭 도시 그림
   (먹색 외곽선 · 셀 음영 · 올리브 잔디 · 벽돌빛 빨강 · 슬레이트 지붕 · 모래빛 보도 · 흰 연기 뭉치).
   화면 틀은 기본 배치 그대로 두고, 색 변수를 바꾼 뒤 「종이 + 먹선 + 어긋난 그림자」를 입힌다. */
body.skin-toon {
  --sky-1: #9fb2b6; --sky-2: #b9c6c3; --sky-3: #e2ddcd;
  --ink: #26221f; --ink-2: #5a524a; --ink-3: #8a8174;
  --panel: #f4eedf; --panel-2: #e9e1cc; --line: #cfc4ab;
  --blue: #4f6b7d; --blue-e: #33495a; --blue-s: #dde3e0;
  --green: #6f8f4a; --green-e: #4b6630; --green-s: #e2e7cf;
  --yellow: #e2b44a; --yellow-e: #a47a22; --yellow-s: #f3e6c2;
  --pink: #b5492f; --pink-e: #7c2e1c; --pink-s: #f0d8cd;
  --purple: #7a5c7e; --purple-e: #533e57; --purple-s: #e7dce4;
  --orange: #c8743a; --orange-e: #8f4c1f;
  --red: #b5492f;
  --t-line: 2px solid var(--ink);
  --t-pop: 3px 3px 0 var(--ink);
  --t-dots: radial-gradient(rgba(38, 34, 31, 0.07) 1px, transparent 1.3px) 0 0 / 6px 6px;
  color: var(--ink);
}
html:has(body.skin-toon), body.skin-toon { background: linear-gradient(180deg, #9fb2b6, #e2ddcd); }
body.skin-toon .nx { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 100%); }

/* ---- 공통: 종이 + 먹선 + 어긋난 그림자 ---- */
body.skin-toon :is(.gems, .iconbtn, .quest, .sidebtn, .boss, .btn, .row, .note, .gcard, .lg, .sch, .invitebox, .invite-hero, .shop__item, .cmp > div, .hist > div, .empty, .contrib, .gloss, .tablewrap, .skinopt, .sharesheet__tabs button, .seg button, .field) {
  border: var(--t-line);
  box-shadow: var(--t-pop);
  border-radius: 8px;
}
body.skin-toon :is(.row, .note, .gcard, .lg, .sch, .shop__item, .cmp > div, .hist > div, .empty, .gloss, .tablewrap, .skinopt) { background: var(--panel); }
body.skin-toon :is(.dock, .sheet, .modal) { background: var(--t-dots), var(--panel); }

/* ---- 위 ---- */
body.skin-toon .money__n { color: #f8f3e6; -webkit-text-stroke: 6px var(--ink); }
body.skin-toon .money__txt small { color: #f8f3e6; text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); }
body.skin-toon .coin {
  border: var(--t-line);
  background: radial-gradient(circle at 38% 34%, #f6e7b8 0 18%, var(--yellow) 19% 62%, var(--yellow-e) 63%);
  box-shadow: 2px 2px 0 var(--ink);
}
body.skin-toon .gems { background: var(--panel); color: var(--purple-e); border-radius: 999px; }
body.skin-toon .iconbtn { background: var(--panel); }
body.skin-toon .sharebtn { background: var(--pink); color: #f8f3e6; border: var(--t-line); box-shadow: var(--t-pop); border-radius: 8px; }
body.skin-toon .quest { background: var(--panel); }
body.skin-toon .quest__tag { background: var(--blue); color: #f8f3e6; border: 1.5px solid var(--ink); border-radius: 5px; }
body.skin-toon .quest__bar { background: var(--panel-2); border: 1.5px solid var(--ink); height: 8px; border-radius: 3px; }
body.skin-toon .quest__bar i { background: var(--blue); border-radius: 0; }
body.skin-toon .quest.is-done { background: var(--yellow-s); box-shadow: var(--t-pop); }
body.skin-toon .quest.is-done .quest__go { background: var(--green); color: #f8f3e6; border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 6px; }
body.skin-toon .rival { background: rgba(38, 34, 31, 0.78); border: var(--t-line); border-radius: 8px; color: #f4eedf; }
body.skin-toon .rival__vs { color: var(--yellow); }
body.skin-toon .rival__bar { background: var(--red); height: 4px; }
body.skin-toon .rival__bar i { background: var(--green); box-shadow: 1px 0 0 #f4eedf; }
body.skin-toon .rival__sos { background: var(--red); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---- 캠퍼스 위 버튼 ---- */
body.skin-toon .sidebtn { background: var(--panel); }
body.skin-toon .sidebtn--exam.is-ready { background: var(--red); color: #f8f3e6; box-shadow: var(--t-pop); }
body.skin-toon .sidebtn--exam.is-ready small { color: #f3dccf; }
body.skin-toon .sidebtn--gacha.is-ready { background: var(--purple); color: #f8f3e6; box-shadow: var(--t-pop); }
body.skin-toon .sidebtn--gacha.is-ready small { color: var(--purple-s); }
body.skin-toon .sidebtn--boost { background: var(--yellow); box-shadow: var(--t-pop); }
body.skin-toon .sidebtn--boost small { color: #5e4410; }
body.skin-toon .sidebtn--boost.is-on { background: var(--green); color: #f8f3e6; box-shadow: var(--t-pop); }
body.skin-toon .boss { background: rgba(38, 34, 31, 0.9); color: #f4eedf; }
body.skin-toon .boss__hp { background: #4a2a22; border: 1.5px solid #f4eedf; }
body.skin-toon .boss__hp i { background: linear-gradient(90deg, var(--red), var(--orange)); }
body.skin-toon .fever__lbl { color: #f8f3e6; text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink); }
body.skin-toon .fever__bar { background: rgba(38, 34, 31, 0.55); border: var(--t-line); box-shadow: 2px 2px 0 var(--ink); border-radius: 4px; }
body.skin-toon .fever__bar i { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
body.skin-toon .fever.is-on .fever__bar i { background: linear-gradient(90deg, var(--red), var(--yellow), var(--green), var(--blue)); background-size: 200% 100%; }
body.skin-toon .fever.is-on .fever__lbl { color: var(--yellow); }
body.skin-toon .hand { filter: drop-shadow(2px 2px 0 var(--ink)); }
body.skin-toon .banner { background: var(--panel); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); }
body.skin-toon .banner b { color: var(--pink); }
body.skin-toon .brag { background: var(--pink); color: #f8f3e6; border: var(--t-line); box-shadow: var(--t-pop); }
body.skin-toon .toast { background: var(--ink); color: #f4eedf; border-radius: 8px; box-shadow: 3px 3px 0 rgba(38, 34, 31, 0.35); }
body.skin-toon .pop { color: #f8f3e6; }

/* ---- 아래: 시설 카드 ---- */
body.skin-toon .dock { border-top: 3px solid var(--ink); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 0 rgba(38, 34, 31, 0.18); }
body.skin-toon .card__ico { border: var(--t-line); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
body.skin-toon .card__lv { color: var(--blue); }
body.skin-toon .card__ms span:first-child { border: 1.5px solid var(--ink); border-radius: 3px; background: var(--panel-2); }
body.skin-toon .card__ms i { border-radius: 0; background: var(--yellow); }
body.skin-toon .btn { color: #f8f3e6; }
body.skin-toon .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
body.skin-toon .btn--yellow { color: var(--ink); }
body.skin-toon .btn--ghost { background: var(--panel-2); color: var(--ink-2); }
body.skin-toon :is(.btn:disabled, .btn.is-off) { background: #d9d1bf; color: #8a8174; border-color: #8a8174; box-shadow: 3px 3px 0 #8a8174; }
body.skin-toon .tabs { border-top: 2px dashed rgba(38, 34, 31, 0.25); padding-top: 6px; }
body.skin-toon .tab.has-dot::after { box-shadow: 0 0 0 2px var(--ink); }

/* ---- 시트·모달 ---- */
body.skin-toon .sheet-host, body.skin-toon .modal-host { background: rgba(38, 34, 31, 0.5); }
body.skin-toon .sheet { border: 3px solid var(--ink); border-bottom: 0; border-radius: 14px 14px 0 0; }
body.skin-toon .modal { border: 3px solid var(--ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--ink); }
body.skin-toon .modal .big { color: var(--pink); }
body.skin-toon .row.is-sel, body.skin-toon .skinopt.is-on { background: var(--yellow-s); box-shadow: var(--t-pop), inset 0 0 0 2px var(--yellow-e); }
body.skin-toon .row__ico { background: var(--panel-2); border: 1.5px solid var(--ink); border-radius: 6px; }
body.skin-toon .gacha-top { background: var(--t-dots), linear-gradient(150deg, var(--purple), var(--pink)); color: #f8f3e6; border: var(--t-line); box-shadow: var(--t-pop); border-radius: 10px; }
body.skin-toon .gcard__r { border: 1px solid var(--ink); }
body.skin-toon .lg.is-me { background: var(--yellow-s); box-shadow: var(--t-pop), inset 0 0 0 2px var(--yellow-e); }
body.skin-toon .sch.is-on { background: var(--green-s); }
body.skin-toon .invitebox { background: var(--yellow-s); }
body.skin-toon .invite-hero { background: linear-gradient(135deg, var(--pink-s), var(--blue-s)); }
body.skin-toon .friends span { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.skin-toon .sharesheet__tabs button.is-on, body.skin-toon .seg button.is-on { background: var(--ink); color: #f4eedf; }
body.skin-toon .shop__item.is-hot { background: var(--pink-s); box-shadow: var(--t-pop), inset 0 0 0 2px var(--pink); }
body.skin-toon .field { background: var(--panel); }
body.skin-toon .field:focus { border-color: var(--blue); background: #fbf8f0; }
body.skin-toon .sheet__ad.is-on { border-top: 2px dashed rgba(38, 34, 31, 0.25); }
body.skin-toon .ad { background: #26221f; }