:root{
  --pink:#FF5C9A; --blue:#2FA8F0; --mint:#4FD6B0; --mint2:#37b89a;
  --amber:#FFCE3A; --amber2:#E0A92E; --ink:#1F2540; --paper:#fff;
  --foot:#FCE6EF; --ph:#EDEBF2;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff;font-family:'Pretendard',sans-serif;color:var(--ink);}
body{min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;}
img{display:block;}

/* 스플래시(로딩) — 폰트가 다 준비될 때까지 페이지를 가려 깜빡임을 숨김 */
#splash{position:fixed;inset:0;z-index:99999;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease;}
#splash.hide{opacity:0;pointer-events:none;}
html.seen #splash{display:none;}  /* 이미 첫 진입을 본 경우: 스플래시 생략 */
#splash .ring{width:40px;height:40px;border-radius:50%;border:4px solid #FCE6EF;border-top-color:var(--pink);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 셀프호스팅 Black Han Sans — 큰 타이틀 FOUT 방지 (preload와 함께) */
@font-face{font-family:'Black Han Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/black-han-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Black Han Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/black-han-sans-korean.woff2') format('woff2');
  unicode-range:U+1100-11FF,U+3001-3003,U+3008-3011,U+3013-301F,U+302E-3030,U+3037,U+30FB,U+3131-318E,U+3200-321E,U+3260-327E,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF,U+FF01-FF60,U+FFE0-FFE6;}

@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-7px) rotate(3deg);}}
@keyframes reelspin{to{transform:rotate(360deg);}}

/* ===== 셀프호스팅 폰트 (Jua·Fredoka·Space Grotesk·Nanum Pen·Yomogi). Pretendard는 CDN 사용 ===== */
@font-face{font-family:'Jua';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jua-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jua';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jua-korean.woff2') format('woff2');unicode-range:U+1100-11FF,U+3001-3003,U+3008-3011,U+3013-301F,U+302E-3030,U+3037,U+30FB,U+3131-318E,U+3200-321E,U+3260-327E,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF,U+FF01-FF60,U+FFE0-FFE6;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fredoka-latin-400.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fredoka-latin-500.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fredoka-latin-600.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/fredoka-latin-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-latin-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700.woff2') format('woff2');}
@font-face{font-family:'Nanum Pen Script';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/nanum-pen-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Nanum Pen Script';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/nanum-pen-korean.woff2') format('woff2');unicode-range:U+1100-11FF,U+3001-3003,U+3008-3011,U+3013-301F,U+302E-3030,U+3037,U+30FB,U+3131-318E,U+3200-321E,U+3260-327E,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF,U+FF01-FF60,U+FFE0-FFE6;}
@font-face{font-family:'Yomogi';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/yomogi-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Yomogi';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/yomogi-japanese.woff2') format('woff2');unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+3220-3243,U+3280-337F,U+4E00-9FFF,U+FF00-FFEF;}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:10px 0;}
.marquee .track{display:inline-flex;animation:mq 18s linear infinite;will-change:transform;}
.marquee .track span{font-family:'Black Han Sans',sans-serif;font-size:14px;letter-spacing:.05em;}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #F1EEF2;}
.nav .inner{max-width:1180px;width:100%;margin:0 auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between;}
.brand{text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:25px;color:var(--ink);display:flex;align-items:center;gap:7px;}
.brand span{color:var(--pink);font-size:19px;}
.nav nav{display:flex;align-items:center;gap:6px;font-size:14px;}
.nav nav a{text-decoration:none;color:#6c6f84;padding:8px 13px;display:flex;align-items:center;gap:6px;}
.nav nav a .dot{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:transparent;}
.nav nav a.info{background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;font-weight:600;margin-left:6px;}

/* section + headings */
.wrap{max-width:1180px;width:100%;margin:0 auto;padding:40px 32px 22px;}
.eyebrow{font-family:'Jua',sans-serif;font-size:16px;transform:rotate(-2deg);display:inline-block;margin-bottom:8px;}
.h1row{display:flex;align-items:flex-end;gap:16px;}
.h1row h1{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:56px;line-height:1;margin:0;letter-spacing:-.01em;}
.h1row .cnt{font-family:'Jua',sans-serif;font-size:18px;padding-bottom:6px;}
.lead{font-size:14.5px;color:#6c6f84;margin:14px 0 0;line-height:1.7;}

/* thumbnails as background images (no load distortion) */
.thumb{background-color:var(--ph);background-size:cover;background-position:center;}

/* footer */
.foot{margin-top:auto;background:var(--foot);padding:22px 32px;}
.foot .inner{max-width:1180px;width:100%;margin:0 auto;text-align:center;}
.foot .links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.foot .links a{text-decoration:none;font-size:13px;padding:9px 18px;border-radius:999px;}
.foot .copy{font-size:12px;color:#b58a9c;margin-top:18px;}

/* generic card hover */
.lift{transition:transform .2s, box-shadow .2s;}
.lift:hover{transform:translateY(-5px);}

/* ===== 모바일 네비 토글 (데스크톱에선 숨김) ===== */
.navcur{display:none;}
.navtoggle{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;position:relative;padding:0;flex:none;}
.navtoggle .nbar,.navtoggle .nbar::before,.navtoggle .nbar::after{content:'';position:absolute;left:9px;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, top .25s ease, background .15s;}
.navtoggle .nbar{top:19px;}
.navtoggle .nbar::before{top:-7px;}
.navtoggle .nbar::after{top:7px;}
.nav.open .navtoggle .nbar{background:transparent;}
.nav.open .navtoggle .nbar::before{top:0;transform:rotate(45deg);}
.nav.open .navtoggle .nbar::after{top:0;transform:rotate(-45deg);}

/* ===== 모바일 반응형 ===== */
@media (max-width:760px){
  /* 공통 여백·타이포 — 인라인 padding(…32px)을 덮어써 좌우 여백을 줄여 폭을 꽉 채움 */
  .wrap{padding-left:18px !important;padding-right:18px !important;}
  .foot{padding-left:18px;padding-right:18px;}
  .h1row{flex-wrap:wrap;gap:10px;}
  .h1row h1{font-size:38px;}

  /* 네비: 브랜드 | (우측) 현재 탭 · 햄버거 — 현재 탭을 햄버거 옆에 붙여 한 묶음으로 보이게 */
  .nav .inner{padding:11px 16px;position:relative;}
  .navcur{display:block;margin-left:auto;margin-right:12px;cursor:pointer;font-family:'Pretendard',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;}
  .navtoggle{display:block;}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid #F1EEF2;padding:8px 14px 14px;box-shadow:0 14px 26px rgba(31,37,64,.10);}
  .nav.open nav{display:flex;}
  .nav nav a{padding:13px 12px;font-size:15.5px;border-radius:10px;color:var(--ink);}
  .nav nav a .dot{display:none;}
  .nav nav a.info{margin-left:0;margin-top:8px;}

  /* index 히어로: 세로 스택 + 이미지를 타이틀 위로 + 축소 */
  .herorow{flex-direction:column;}
  .heroimg{order:-1;width:100% !important;max-width:300px;margin:0 auto 22px;}
  .herotitle{font-size:58px;}

  /* index 카테고리: 모바일 2열 (최근 그림은 JS가 컬럼 수를 조정) */
  .catgrid{grid-template-columns:repeat(2,1fr) !important;}

  /* 가이드 본문: 목차(TOC) 숨기고 본문 전체 폭 */
  .docwrap{padding-left:18px !important;padding-right:18px !important;gap:0 !important;}
  .toc{display:none !important;}

  /* 도구 카드 */
  .appcard{padding:24px 18px !important;gap:24px !important;}
  .appinfo{padding-left:0 !important;}
  .appname{font-size:34px !important;}
  .appgrid{grid-template-columns:1fr !important;}

  /* 캐릭터챗 상세 */
  .cbdcover{width:100% !important;max-width:240px;margin:0 auto;}
  .cbdtitle{font-size:36px !important;}
}

@media (max-width:480px){
  .wrap{padding-left:16px;padding-right:16px;}
  .h1row h1{font-size:32px;}
  .herotitle{font-size:46px;}
}