:root{
    --bg:#161923; --card:#2e3548; --tile:#3b4359; --line:#4d5570;
    --hair:rgba(224,218,204,.10); --hair-2:rgba(224,218,204,.18);
    --ink:#e0dacc; --ink-2:#c6c0b0; --muted:#aca697; --dim:#8f8a79;
    --gold:#d9c191;
    --r:20px; --r-sm:14px; --r-lg:26px;
    --scrim:linear-gradient(to top, rgba(7,9,14,.94), rgba(7,9,14,.74) 32%, rgba(7,9,14,.26) 62%, rgba(7,9,14,0));
    --ease:cubic-bezier(.2,.7,.3,1);
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
    font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
  }
  body::before{content:"";position:fixed;left:0;right:0;top:0;height:56vh;z-index:0;pointer-events:none;
    background:radial-gradient(58% 62% at 50% 0%, rgba(217,193,145,.07), transparent 72%)}
  .wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 28px 120px}
  h1,h2,h3{font-family:"Nanum Myeongjo",serif;font-weight:700;margin:0;letter-spacing:-.01em;text-wrap:balance}
  p{margin:0}
  a{color:var(--gold);text-decoration:none}
  a:hover{color:#eddcb4}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

  /* 상단바 */
  .topbar{position:sticky;top:0;z-index:30;background:rgba(22,25,35,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
  .topbar-in{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .brand{color:var(--ink);font-family:"Gaegu",cursive;font-weight:700;font-size:1.5rem;line-height:1}
  .topnav{display:flex;gap:22px;margin-left:auto;font-size:.82rem;color:var(--dim);flex-wrap:wrap}
  .topnav .on{color:var(--gold)}

  /* 공통 이미지 타일 */
  .media{display:block;position:relative;overflow:hidden;border-radius:var(--r);background:var(--tile);isolation:isolate;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
  .media .spots{position:absolute;inset:0;background-color:#e0dacc;opacity:.05;
    -webkit-mask-image:var(--spot);mask-image:var(--spot);-webkit-mask-size:150px 150px;mask-size:150px 150px}
  .media .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:"Nanum Myeongjo",serif;
    font-size:2.4rem;color:rgba(224,218,204,.22)}
  .media .scrim{position:absolute;inset:0;background:var(--scrim)}
  .media .mark{position:absolute;left:11px;top:11px;z-index:2;font-family:"Gaegu",cursive;font-size:.74rem;
    line-height:1.7;color:rgba(240,236,226,.62);background:rgba(7,9,14,.42);border-radius:99px;padding:1px 9px}
  .media .cap{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;text-align:left}
  .media .cap .t{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.1rem;line-height:1.35;
    color:#f4f0e7;text-shadow:0 1px 14px rgba(0,0,0,.5)}
  .media .cap .s{display:block;font-size:.75rem;line-height:1.6;color:rgba(244,240,231,.7);margin-top:1px}
  .media .cap .e{display:block;font-size:.71rem;letter-spacing:.02em;color:rgba(226,205,163,.92);margin-bottom:1px}

  /* 캐릭터 카드 */
  .chr{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left}
  .chr .media{aspect-ratio:3/4;transition:transform .3s var(--ease)}
  .chr .media .cap .t{font-size:1.15rem}
  .chr:hover .media{transform:translateY(-3px)}
  .chr .nm{font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.02rem;line-height:1.35}
  .tags{display:flex;flex-wrap:wrap;gap:5px}
  .tg{font-size:.71rem;line-height:1.85;padding:0 9px;border-radius:99px;border:1px solid var(--hair);
    color:var(--muted);white-space:nowrap}

  /* 그리드 */
  .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:16px;align-items:start}
  @media (max-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  @media (max-width:900px){.worlds{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.worlds{grid-template-columns:1fr}}
  .world{width:100%;text-align:left}
  .world .media{aspect-ratio:4/3;transition:transform .3s var(--ease)}
  .world:hover .media{transform:translateY(-3px)}
  .world .media .cap .t{font-size:1.25rem}

  /* 섹션 헤더 */
  .sec-head{display:flex;align-items:center;gap:13px;margin:52px 0 18px}
  .sec-head:first-child{margin-top:34px}
  .sec-head h2{font-size:1.45rem}
  .sec-head .count{font-size:.78rem;color:var(--dim);font-variant-numeric:tabular-nums}
  .rule{flex:1;height:1px;background:var(--hair);min-width:12px}
  .more{font-size:.84rem;color:var(--gold);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .more:hover{color:#eddcb4}

  /* 소제목 */
  .sub{display:flex;align-items:center;gap:12px;margin:44px 0 0;font-family:"Gowun Dodum",sans-serif;
    font-weight:400;font-size:.75rem;letter-spacing:.1em;color:var(--gold)}
  .sub .cnt{letter-spacing:0;font-size:.78rem;color:var(--dim)}
  .act{font-size:.8rem;letter-spacing:0;color:var(--ink-2);border:1px solid var(--hair);border-radius:99px;
    padding:3px 14px;white-space:nowrap;transition:border-color .2s var(--ease),color .2s var(--ease)}
  .act:hover{border-color:var(--hair-2);color:var(--ink)}

  /* 캐러셀 */
  .rail-wrap{position:relative}
  .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    padding:2px 2px 16px;scrollbar-width:thin;scrollbar-color:#3b4359 transparent}
  .rail::-webkit-scrollbar{height:6px}
  .rail::-webkit-scrollbar-thumb{background:#3b4359;border-radius:99px}
  .rail>*{scroll-snap-align:start;flex:0 0 184px}
  .rail-btn{position:absolute;top:34%;width:38px;height:38px;border-radius:50%;background:rgba(22,25,35,.9);
    border:1px solid var(--hair-2);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:3;
    color:var(--ink-2);transition:background .2s var(--ease)}
  .rail-btn:hover{background:var(--card);color:var(--ink)}
  .rail-prev{left:-16px} .rail-next{right:-16px}
  @media (max-width:820px){.rail-btn{display:none}}

  /* 히어로 */
  .hero{margin-top:18px;aspect-ratio:21/8;border-radius:var(--r-lg)}
  .hero .cap{left:28px;right:28px;bottom:22px}
  .hero .cap .t{font-size:2rem}
  .hero .cap .e{font-size:.7rem;letter-spacing:.28em;margin-bottom:4px}
  @media (max-width:640px){.hero{aspect-ratio:3/2}.hero .cap{left:18px;right:18px;bottom:16px}.hero .cap .t{font-size:1.5rem}}
  .desc{margin-top:20px;color:var(--ink-2);max-width:62ch}
  .ph{color:var(--dim)}

  /* 뒤로 */
  .back{font-size:.84rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px;margin-top:28px}
  .back:hover{color:var(--ink)}

  /* 세계관 상세 팀 블록 */
  .team{margin-top:12px}
  .team .sub{margin-top:40px}
  .team .tname{font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;color:var(--ink)}

  /* 소속 세계관 카드 */
  .wcard{display:flex;gap:16px;align-items:center;width:100%;text-align:left;background:var(--card);
    border-radius:var(--r);padding:12px;margin-top:14px;transition:background .2s var(--ease)}
  .wcard:hover{background:var(--tile)}
  .wcard .media{width:148px;aspect-ratio:16/9;flex:0 0 auto;border-radius:var(--r-sm)}
  .wcard .wtxt{display:flex;flex-direction:column;min-width:0}
  .wcard .wt{font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.12rem;line-height:1.4}
  .wcard .wm{font-size:.79rem;color:var(--muted)}
  .wcard .arw{margin-left:auto;color:var(--dim);padding-right:8px;flex:0 0 auto;display:flex}
  @media (max-width:520px){.wcard .media{width:104px}}
  .teamrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
    .teamrow .tl{font-size:.75rem;letter-spacing:.02em;color:var(--dim);margin-right:2px}

  /* 칩 */
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .chip{font-size:.8rem;line-height:1.9;padding:2px 13px;border-radius:99px;border:1px solid var(--hair);
    color:var(--ink-2);transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
  .chip:hover{border-color:var(--hair-2);color:var(--ink)}
  .chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--gold);border-color:var(--gold);color:#161923;font-weight:700}
  .chip.small{font-size:.77rem;padding:1px 11px}
  .chip.zero{opacity:.34}
  .chip .n{font-size:.71rem;opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}

  /* 관련 인물 */
  .relwrap{position:relative}
  .relwrap .rl{display:block;margin-top:5px;font-family:"Gaegu",cursive;font-size:1.02rem;line-height:1.45;color:var(--gold)}
  .relwrap .rb{display:block;font-size:.71rem;line-height:1.5;color:var(--dim)}
  .rmx{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:50%;
    background:rgba(7,9,14,.6);backdrop-filter:blur(6px);color:rgba(244,240,231,.8);display:grid;place-items:center;
    font-size:.9rem;line-height:1;opacity:0;transition:opacity .2s var(--ease)}
  .relwrap:hover .rmx,.rmx:focus-visible{opacity:1}
  .relform{margin:16px 0 4px;background:var(--card);border-radius:var(--r);padding:18px;display:grid;gap:10px;
    grid-template-columns:minmax(150px,190px) minmax(0,1fr) minmax(0,1fr) auto auto;align-items:center}
  @media (max-width:780px){.relform{grid-template-columns:1fr 1fr}}
  .relform select,.relform input{font:inherit;font-size:.85rem;color:var(--ink);background:var(--tile);
    border:1px solid transparent;border-radius:12px;padding:8px 12px;width:100%}
  .relform select:focus,.relform input:focus{border-color:var(--hair-2);outline:none}
  .relform input::placeholder{color:var(--dim)}
  .relform .go{background:var(--gold);color:#161923;font-weight:700;border-radius:99px;padding:7px 20px;font-size:.85rem}
  .relform .no{color:var(--muted);font-size:.85rem;padding:7px 10px}
  .relform .hint{grid-column:1/-1;font-size:.76rem;color:var(--dim);margin-top:-2px}
  .none{color:var(--dim);font-size:.87rem;margin-top:14px}

  /* 캐릭터 상세 */
    .dhero{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:start;margin-top:22px}
  @media (max-width:640px){.dhero{grid-template-columns:1fr;gap:22px}}
  .dhero .media{aspect-ratio:3/4;border-radius:var(--r-lg)}
  .dhero .media .ini{font-size:3.6rem}
  .eyebrow{font-size:.7rem;letter-spacing:.32em;color:var(--gold)}
  .dname{font-size:2.1rem;margin-top:10px;line-height:1.25}
  .dsub{font-size:.86rem;color:var(--muted);margin-top:8px}
  .dsub .dot{opacity:.4;margin:0 9px}
  .ddesc{margin-top:18px;color:var(--ink-2);max-width:58ch}

  /* 필터 */
  .page-head{margin-top:30px}
  .page-head h1{font-size:2.1rem;margin-top:10px}
  .filters{margin-top:30px;display:flex;flex-direction:column;gap:20px}
  .flabel{font-size:.75rem;letter-spacing:.1em;color:var(--gold)}
  .fbar{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--hair)}
  .fbar .res{font-size:.88rem;color:var(--muted)}
  .fbar .res b{color:var(--ink);font-variant-numeric:tabular-nums}
  .reset{margin-left:auto;font-size:.83rem;color:var(--muted);border:1px solid var(--hair);border-radius:99px;padding:3px 15px}
  .reset:hover{color:var(--ink);border-color:var(--hair-2)}
  .empty{margin-top:46px;text-align:center;color:var(--dim);font-family:"Gaegu",cursive;font-size:1.3rem}
  .note{margin-top:26px;font-size:.79rem;color:var(--dim)}
  [hidden]{display:none!important}

  /* ===== 사이트 공통: 홈 / 공지 / 출현지 / 저장소 ===== */
  .topnav a{color:var(--dim);text-decoration:none}
  .topnav a:hover{color:var(--ink-2)}
  .topnav a[aria-current="page"]{color:var(--gold)}

  /* 홈 */
  .home{padding:min(16vh,140px) 0 120px;text-align:center}
  .home h1{font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.3}
  .home .moo{margin-top:14px;font-family:"Gaegu",cursive;font-size:1.35rem;color:var(--gold)}
  .home .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;text-align:left}
  @media (max-width:760px){.home .cards{grid-template-columns:1fr;gap:16px}}
  .hcard{display:block;background:var(--card);border-radius:var(--r);padding:22px 24px;text-decoration:none;
    transition:background .2s var(--ease),transform .25s var(--ease)}
  .hcard:hover{background:var(--tile);transform:translateY(-3px)}
  .hcard .n{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.18rem;color:var(--ink);letter-spacing:-.01em}
  .hcard .d{display:block;font-size:.83rem;color:var(--muted);margin-top:6px}
  .hcard .go{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--gold);margin-top:14px}

  /* 속지 공통 */
  .lead{margin-top:14px;color:var(--muted);font-size:.92rem}
  .entries{margin-top:34px;display:flex;flex-direction:column}
  .entry{display:block;padding:20px 0;border-top:1px solid var(--hair);text-decoration:none}
  .entry:last-child{border-bottom:1px solid var(--hair)}
  .entry .d{font-size:.76rem;color:var(--dim);letter-spacing:.04em}
  .entry .t{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin-top:5px}
  .entry .s{display:block;font-size:.87rem;color:var(--muted);margin-top:5px}
  .entry:hover .t{color:#f2eee3}

  /* 출현지 */
  .plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
  @media (max-width:900px){.plats{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.plats{grid-template-columns:1fr}}
  .plat{background:var(--card);border-radius:var(--r);padding:20px 22px;text-decoration:none;display:block;
    transition:background .2s var(--ease)}
  .plat:hover{background:var(--tile)}
  .plat .p{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:1.08rem;color:var(--ink)}
  .plat .h{display:block;font-size:.84rem;color:var(--gold);margin-top:5px}
  .plat .m{display:block;font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.6}

  footer.foot{border-top:1px solid var(--hair);margin-top:70px;padding:26px 0 0;font-size:.78rem;color:var(--dim)}