* { box-sizing:border-box; }
  body {
    margin:0; min-height:100vh;
    background:#171a20; color:#dfe1e5;
    font-family:"Pretendard","맑은 고딕","Malgun Gothic",
                -apple-system,BlinkMacSystemFont,sans-serif;
    line-height:1.75; font-size:15px;
    -webkit-font-smoothing:antialiased;
  }
  /* 제목·상단 이름·큰 숫자에만 명조를 쓴다. 본문은 지금이 읽기 좋다. */
  h1, h2, .차례, .상자 h1, .쪽지 .값, .큰값 {
    font-family:"Gowun Batang","나눔명조","Nanum Myeongjo",
                "바탕","Batang",serif;
  }

  /* 배경 사진을 아주 은은하게 깔아준다.
     그림 이름은 서버 설정(상단이름 자리)마다 달라서 여기 못 박아 넣는다 —
     core/page.js 가 <div class="배경"> 에 background-image 를 style= 로 얹는다. */
  .배경 { position:fixed; inset:0; z-index:-2;
          background-position:center; background-size:cover;
          background-repeat:no-repeat; background-attachment:fixed;
          /* 0.10 은 거의 안 보였다. 살짝 비치되 글을 가리지는 않는 자리가 이쯤이다. */
          opacity:0.22; }
  .배경덮개 { position:fixed; inset:0; z-index:-1;
          background:
            radial-gradient(1000px 600px at 50% -10%, rgba(232,192,122,.07), transparent 70%),
            /* 위는 조금 열어 그림이 비치게, 아래로 갈수록 덮어 글이 또렷하게 */
            linear-gradient(180deg, rgba(23,26,32,.62), rgba(23,26,32,.90)); }

  .wrap { max-width:760px; margin:0 auto; padding:26px 18px 70px; }

  h1 { color:#e8c07a; font-size:26px; margin:0; letter-spacing:3px; font-weight:700; }
  h2 { font-size:18px; font-weight:700; color:#dfe1e5; margin:34px 0 14px 4px;
       display:flex; align-items:center; gap:9px; }
  h2::before { content:''; width:3px; height:15px; border-radius:2px;
               background:linear-gradient(#e8c07a,#c99a4e); }

  a { color:#9ec5e8; text-decoration:none; }
  a:hover { text-decoration:underline; }

  /* 부드러운 카드 */
  .카드 {
    background:rgba(255,255,255,.038);
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px; padding:17px 19px; margin-bottom:11px;
    box-shadow:0 2px 14px rgba(0,0,0,.22);
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .카드:hover { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11); }

  .흐린글 { color:#8b929e; font-size:13.5px; }
  .작은글 { font-size:12.5px; color:#8b929e; }

  input, textarea, select {
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
    color:#dfe1e5; padding:12px 14px; border-radius:12px;
    font-size:15px; width:100%; font-family:inherit;
    transition:border-color .18s ease, background .18s ease;
  }
  input:focus, textarea:focus {
    outline:none; border-color:rgba(232,192,122,.55); background:rgba(255,255,255,.07);
  }
  input::placeholder, textarea::placeholder { color:#767d89; }

  button {
    background:linear-gradient(180deg,#e8c07a,#d8ab5f); border:0; color:#241c0e;
    font-weight:700; padding:11px 20px; border-radius:12px;
    font-size:14.5px; cursor:pointer; font-family:inherit;
    transition:filter .18s ease, transform .12s ease;
  }
  button:hover { filter:brightness(1.08); }
  button:active { transform:translateY(1px); }

  .연한버튼 { background:rgba(255,255,255,.07); color:#cdd2da;
              border:1px solid rgba(255,255,255,.11); font-weight:500; }
  .연한버튼:hover { background:rgba(255,255,255,.11); }
  .빨간버튼 { background:rgba(190,80,80,.16); color:#e79a9a;
              border:1px solid rgba(190,80,80,.3); font-weight:500; }
  .빨간버튼:hover { background:rgba(190,80,80,.26); }
  .작은버튼 { padding:7px 14px; font-size:13px; border-radius:10px; }

  /* ---------- 등급 딱지 ---------- */
  .등급딱지 {
    display:inline-block; font-size:11px; font-weight:700;
    padding:1px 7px; border-radius:6px; margin-right:3px;
    vertical-align:middle; line-height:1.5; letter-spacing:.2px;
  }
  .회색딱지 { color:#9aa2ae; background:rgba(154,162,174,.13);
              border:1px solid rgba(154,162,174,.26); }
  .파란딱지 { color:#8fb8e8; background:rgba(143,184,232,.13);
              border:1px solid rgba(143,184,232,.28); }
  .금딱지   { color:#e8c07a; background:rgba(232,192,122,.15);
              border:1px solid rgba(232,192,122,.34); }
  .빨간딱지 { color:#e59a9a; background:rgba(226,120,120,.15);
              border:1px solid rgba(226,120,120,.34); }
  .접속줄.꺼짐 .등급딱지 { opacity:.45; }

  /* ---------- 칭호 ---------- */
  .칭호 {
    display:inline-block; font-size:11.5px; font-weight:600;
    color:#e8c07a; background:rgba(232,192,122,.13);
    border:1px solid rgba(232,192,122,.28);
    padding:1px 7px; border-radius:6px; margin-right:2px;
    vertical-align:middle; line-height:1.5;
  }

  /* ---------- 오른쪽 접속 목록 ---------- */
  .접속판 {
    position:fixed; top:26px; right:20px; width:186px; max-height:calc(100vh - 52px);
    overflow-y:auto; padding:14px 14px 16px;
    background:rgba(26,29,36,.72); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.075); border-radius:16px;
    box-shadow:0 4px 22px rgba(0,0,0,.3);
  }
  .접속머리 { font-size:11.5px; font-weight:600; color:#8b929e;
              letter-spacing:.5px; margin-bottom:9px; }
  .흐린머리 { margin-top:15px; color:#5f656f; }
  .접속수 { color:#5f656f; font-weight:500; }
  /* 표로 그린다 — 등급 딱지 칸을 가장 긴 딱지에 맞춰, 이름이 한 줄로 서게 한다 */
  .접속목록 { width:100%; border-collapse:collapse; }
  .접속목록 td { padding:4px 0; vertical-align:middle; }
  .접속줄 { font-size:13.5px; color:#cdd2da; }
  .접속줄 .불칸 { width:15px; }
  /* width:1% + nowrap : 칸이 제 속(가장 긴 딱지)만큼만 커진다 */
  .접속줄 .등급칸 { width:1%; white-space:nowrap; padding-right:7px; }
  .접속줄 .이름칸 { overflow-wrap:anywhere; }
  .접속줄 .불 { display:inline-block; width:8px; height:8px; border-radius:50%;
                background:#6cc47f; box-shadow:0 0 6px rgba(108,196,127,.6); }
  .접속줄.꺼짐 { color:#6b717b; }
  .접속줄.꺼짐 .불 { background:#4a4f58; box-shadow:none; }
  .접속줄.꺼짐 .칭호 { opacity:.45; }
  .접속줄.나 { color:#e8c07a; font-weight:600; }
  .접속없음 { font-size:12.5px; color:#5f656f; padding:3px 0; }

  /* 본문과 접속판이 겹치면 접속판을 접어 아래로 내린다 */
  @media (max-width: 1180px) {
    .접속판 {
      position:static; width:auto; max-height:none;
      max-width:760px; margin:26px auto 0; backdrop-filter:none;
    }
    .접속목록, .접속목록 tbody { display:flex; flex-wrap:wrap; gap:4px 16px; }
    .접속줄 { display:flex; align-items:center; gap:6px; }
    .접속목록 td { padding:3px 0; }
    .접속줄 .불칸, .접속줄 .등급칸 { width:auto; padding-right:0; }
  }

  /* ---------- 휴대폰 화면 ---------- */
  @media (max-width: 560px) {
    body { font-size:14.5px; line-height:1.7; }
    .wrap { padding:16px 12px 56px; }

    h1 { font-size:21px; letter-spacing:1px; }
    h2 { font-size:15.5px; margin:26px 0 11px 2px; }

    .카드 { padding:14px 15px; border-radius:14px; margin-bottom:9px; }

    /* 글자 크기가 16px 보다 작으면 아이폰이 칸을 누를 때 화면을 확대해버린다 */
    input, textarea, select { font-size:16px; padding:11px 12px; border-radius:11px; }

    button { padding:11px 17px; font-size:14px; }
    .작은버튼 { padding:7px 12px; font-size:12.5px; }

    table { display:block; overflow-x:auto; }
  }

  .머리 { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:0 4px; }
  .머리 .글씨 { margin-left:auto; text-align:right; }

  /* 메뉴 - 살짝 배경을 깐 부드러운 띠 */
  .메뉴 {
    display:flex; align-items:center; gap:5px; flex-wrap:wrap;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px; padding:7px; margin-bottom:8px;
    box-shadow:0 2px 16px rgba(0,0,0,.25);
    backdrop-filter:blur(10px);
  }
  .메뉴칸 {
    color:#c2c8d2; padding:9px 12px; border-radius:11px;
    font-size:14.5px; text-decoration:none; transition:background .18s ease, color .18s ease;
  }
  .메뉴칸:hover { background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
  .메뉴칸.지금 { background:rgba(232,192,122,.15); color:#e8c07a; font-weight:600; }
  .메뉴끝 { margin-left:auto; display:flex; align-items:center; gap:10px;
            padding-right:8px; font-size:12.5px; color:#8b929e; }

  /* ---------- 앱으로 설치 (public/js/app-install.js) ----------
     단추는 브라우저가 설치할 수 있다고 알려줄 때만 보인다. 앱 창 안에서는 설치 안내를 감춘다.
     hidden 이 .큰단추 같은 display 꾸밈에 지지 않게 못박는다. */
  .앱설치단추[hidden], .앱설치안내[hidden], .앱설치칸[hidden] { display:none !important; }
  html.앱창 .앱설치칸, html.앱창 .앱설치단추 { display:none !important; }
  .메뉴설치 { padding:5px 11px; font-size:12px; border-radius:9px; cursor:pointer;
              background:rgba(232,192,122,.14); color:#e8c07a; border:1px solid rgba(232,192,122,.35); }
  .메뉴설치:hover { background:rgba(232,192,122,.22); }
  .메뉴미니 { padding:5px 11px; font-size:12px; border-radius:9px; text-decoration:none; color:#cdd2da;
             background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
  .메뉴미니:hover { color:#e8c07a; text-decoration:none; }

  /* [관리 ▾] 묶음 — 자바스크립트 없이 details 로만 여닫는다 */
  .관리묶음 { position:relative; }
  .관리묶음 > summary {
    list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  }
  .관리묶음 > summary::-webkit-details-marker { display:none; }
  .메뉴세모 { font-size:10px; opacity:.6; transition:transform .15s ease; }
  .관리묶음[open] .메뉴세모 { transform:rotate(180deg); }
  .관리속 {
    position:absolute; top:calc(100% + 7px); left:0; z-index:30;
    display:flex; flex-direction:column; gap:2px; padding:6px; min-width:132px;
    background:#20242c; border:1px solid rgba(255,255,255,.1);
    border-radius:13px; box-shadow:0 8px 26px rgba(0,0,0,.45);
  }
  .관리속 .메뉴칸 { padding:8px 13px; border-radius:9px; white-space:nowrap; }
  /* 좁은 화면에서는 떠 있지 말고 아래로 펼친다 */
  @media (max-width: 560px) {
    .관리묶음 { width:100%; }
    .관리속 { position:static; margin-top:6px; background:rgba(255,255,255,.04);
              box-shadow:none; }
  }

  /* ---------- 표 ----------
     여러 화면이 함께 쓰는 살림살이다. 늘 실리는 여기에 둔다 —
     예전에는 cash.css 에 있어서, cash 를 안 부르는 화면에서는
     표에 줄이 하나도 안 그려졌다. */
  .표 { width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
  .표 th { text-align:left; font-size:12px; color:#767d89; font-weight:500;
           padding:0 8px 7px; border-bottom:1px solid rgba(255,255,255,.09); }
  .표 td { padding:8px; border-bottom:1px solid rgba(255,255,255,.05); }
  .표 tr:last-child td { border-bottom:0; }
  .오른 { text-align:right; white-space:nowrap; }
  /* 머리 칸은 .표 th 의 왼쪽 맞춤이 .오른 보다 세다 — 숫자 칸 머리글이 숫자와 같은 쪽에 서게 */
  .표 th.오른 { text-align:right; }
  /* 이름이 길면 한 글자씩 세로로 접혀 읽을 수가 없다. 접지 말고 표를 옆으로 밀게 한다. */
  .표 th:first-child, .표 td:first-child { white-space:nowrap; }
  .표담기 { overflow-x:auto; }
  /* 칸 안의 작은 글은 제 줄로 내려 접히게 한다.
     .오른 의 nowrap 을 그대로 두면 한 줄로 늘어나 표가 넘친다. */
  .표 td .작은글 { display:block; white-space:normal; }
  .표 td { vertical-align:top; }

  /* ---------- 등록 칸 조각 (core/form-parts.js) ---------- */
  .아이템줄들 { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
  .아이템줄 { display:flex; gap:6px; }
  .아이템줄 input:first-child { flex:1; min-width:0; }
  .아이템줄 input:last-child { flex:0 0 84px; text-align:right; }
  .아이템줄들 .한줄더 { align-self:flex-start; }
  /* 아이템 그림 (게임 아이콘 그림판의 한 칸 · public/js/item-icons.js) */
  .템그림 { display:inline-block; flex:0 0 auto; vertical-align:middle; margin-right:4px; background-repeat:no-repeat; }
  .템빈칸 { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:8px; color:#6f7784; font-weight:700;
    background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.15); }
  /* 사냥 줄 : 이름 | 마리 | 지상·공중 */
  .공중고름줄 input[type=number], .떠있는속 .공중고름줄 input[type=number] { flex:0 0 72px; width:72px; text-align:right; }
  .공중고름줄 select { flex:0 0 72px; width:72px; }

  /* 스크롤해도 따라오는 등록 상자 : 오른쪽 아래 단추 → 작은 창 */
  .떠있는단추 { position:fixed; right:22px; bottom:22px; z-index:40; padding:12px 18px; border-radius:24px;
               font-size:14px; font-weight:700; cursor:pointer; color:#14171c; background:#e8c07a; border:0;
               box-shadow:0 6px 18px rgba(0,0,0,.45); }
  .떠있는단추.켬 { background:#cdd2da; }
  .떠있는상자 { position:fixed; right:22px; bottom:78px; z-index:41; width:min(390px, calc(100vw - 32px));
               max-height:calc(100vh - 120px); overflow:auto; border-radius:14px; padding:12px 14px 14px;
               background:#1a1e25; border:1px solid rgba(232,192,122,.35); box-shadow:0 10px 30px rgba(0,0,0,.55); }
  .떠있는상자[hidden] { display:none; }
  .떠있는머리 { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#e8c07a; font-size:14.5px; }
  .떠있는닫기 { margin-left:auto; background:transparent; border:0; color:#8b929e; font-size:15px; cursor:pointer; }
  .떠있는속 input, .떠있는속 select, .떠있는속 textarea { width:100%; box-sizing:border-box; }
  .떠있는속 .고르는줄 { gap:6px; margin-bottom:6px; }
  .떠있는속 .고르는줄 > * { flex:1 1 120px; min-width:0; }
  .떠있는속 .아이템줄 input:first-child { width:auto; }
  .떠있는속 .아이템줄 input:last-child { width:84px; }
  .떠있는속 textarea { margin-top:8px; font-family:inherit; }
  .떠있는속 .떠있는말 { font-size:12px; color:#8b929e; margin:4px 0 6px; }

  /* 퀘스트 메모 = 팁 (아이템 표 아래) */
  .팁상자 { margin:12px 0 0; padding:10px 13px; border-radius:11px; font-size:13.5px; line-height:1.7; color:#dfe1e5;
           background:rgba(143,209,158,.07); border:1px solid rgba(143,209,158,.28); white-space:pre-wrap; }
  .팁상자 b { color:#8fd19e; }