/* 포고 캐치 — 화면 스타일
 *
 * 기본 CSS 가 곧 핸드폰이다. @media (min-width: …) 안은 넓은 화면용이고,
 * @media (max-width: …) 안은 더 좁은 화면용 보정이다.
 * 폰에서 글씨를 키우려면 미디어 쿼리 밖을 고친다 — 안에 넣었다가 데스크톱만 커진 적이 있다.
 */

  :root {
    /*
     * 오래 보면 눈이 아프다고 해서 낮췄다. 손댄 건 화면을 덮는 큰 면 넷이다.
     *
     *  - 카드에서 순백을 뺐다(#fff → 미색). 흰 종이가 화면 대부분을 차지하던 게 제일 컸다
     *  - 본문색을 거의 검정에서 진회색으로. 대비 17.4 → 13.1 (기준 4.5보다 한참 위)
     *  - 중성색의 푸른기를 덜어 따뜻하게 — 청색광 쪽이 오래 보기 더 피로하다
     *  - 강조색의 채도를 낮췄다. 대비는 오히려 4.53 → 4.85 로 올랐다
     *
     * muted 4.67, muted-2 2.51(보조 표기 전용)로 읽기 기준은 그대로 지킨다.
     */
    /* 2026-09-26 레몬블랙 연하게 — 검정 강조. 바탕은 노란 기를 뺀 아이보리 회색(레몬 크림은 "누리끼리하다"), 카드는 순백 대신 한 톤 낮은 미색(흰색은 눈이 아프다). 남색은 다른 사이트들이 써서 피했다. 무리 색은 채도를 조금 낮춤 */
    /* 2026-09-25 명암 올림 — "다 밝은 톤이라 흐리다". 바탕 한 톤 어둡게·카드 흰색·보조 글씨와 테두리·그림자 진하게 */
    --bg: #efeee9;
    --card: #faf9f5;
    --line: #e0ded6;
    --line-soft: #e9e7e0;
    --text: #1d1c17;
    --muted: #525044;
    --muted-2: #7b7868;
    --accent: #2a2a28;
    /* 제목 옆 날짜용. 회색(--muted-2)이라 안 읽혔다 — 제목보다 약하되 읽히는 진한 남색 */
    --sub-ink: #44443a;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(40,38,30,.08), 0 6px 18px rgba(40,38,30,.07);

    --g-raid: #c4604e;
    --g-max: #8666d6;
    --g-community: #d26a3a;
    --g-spotlight: #c48c00;
    --g-battle: #3f6fd8;
    --g-live: #1f8f70;
    --g-event: #2a93c7;
    /* 섀도우 — 맥스(밝은 보라)와 헷갈리지 않게 훨씬 어둡게 잡는다 */
    --g-shadow: #312e81;
    --g-research: #64748b;
    --g-etc: #98a2b3;

    --t-normal: #9fa19f; --t-fire: #e62829; --t-water: #2980ef; --t-electric: #d9a400;
    --t-grass: #3fa129; --t-ice: #2bb8dd; --t-fighting: #e97400; --t-poison: #9141cb;
    --t-ground: #a06a2c; --t-flying: #6ba7e0; --t-psychic: #ef4179; --t-bug: #86960f;
    --t-rock: #9c9668; --t-ghost: #704170; --t-dragon: #5060e1; --t-dark: #5d4a4b;
    --t-steel: #5a93ab; --t-fairy: #e46ae4;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* hidden 은 UA 스타일이라 display 를 주는 규칙 하나면 뚫린다(.dash 가 그랬다).
     화면을 숨기는 근거가 한 군데(hidden)뿐이어야 하므로 여기서 못박는다. */
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
          "Malgun Gothic", system-ui, sans-serif;
    padding-bottom: env(safe-area-inset-bottom);
  }
  button, select { font-family: inherit; }

  /* ── 헤더 / 탭 ─────────────────────────── */
  header { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
  /* 오른쪽 묶음은 좁아지면 아랫줄로 내려간다. 어디로 내려갈지는 아래 모바일 규칙이 못박는다. */
  .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
              flex-wrap: wrap; row-gap: 2px; }
  /* 오른쪽 묶음(언어·로그인). 한 덩어리로 묶어야 로그인 상태가 바뀌어도 언어 토글이 제자리에 있다. */
  .head-right { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; margin-left: auto; }
  .lang { display: flex; gap: 2px; background: var(--line-soft); border-radius: 999px; padding: 3px; }
  .lang button {
    border: 0; background: none; border-radius: 999px; padding: 5px 11px;
    font-size: 15.2px; font-weight: 700; color: var(--muted); cursor: pointer;
  }
  .lang button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
  nav.tabs { display: flex; gap: 2px; }
  nav.tabs button {
    border: 0; background: none; cursor: pointer; padding: 13px 15px;
    font-size: 19px; font-weight: 800; color: var(--muted);
    border-bottom: 3px solid transparent; letter-spacing: -.3px;
  }
  nav.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
  /* TCG 탭을 메뉴(설정 밑)로 옮기고 남은 하나는 사이트 이름 — 탭 밑줄 없이 이름처럼 */
  nav.tabs button.brand, nav.tabs button.brand.on { display: inline-flex; align-items: center; gap: 8px;
                                                    color: var(--text); border-bottom-color: transparent; letter-spacing: -.5px; }
  /* 브라우저 탭의 아이콘(파비콘)과 같은 그림 — 사이트 이름 옆 */
  .tcg-back { display: inline-flex; align-items: center; margin: 4px 0 12px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
              font: inherit; font-size: 14.5px; font-weight: 800; color: var(--text); background: var(--card); border: 1px solid var(--line); }
  .brand-logo { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; }
  @media (min-width: 1024px) { .brand-logo { width: 36px; height: 36px; } }

  /* 로그인 — 구글 버튼과 로그인 후 칩의 높이를 맞춰 둔다(안 맞으면 줄이 들썩인다) */
  .auth { display: flex; align-items: center; gap: 6px; min-height: 34px; }
  .auth .who {
    display: flex; align-items: center; gap: 7px; max-width: 160px;
    background: var(--line-soft); border-radius: 999px; padding: 3px 11px 3px 3px;
    font-size: 15.2px; font-weight: 700; color: var(--text);
  }
  .auth .who img { width: 28px; height: 28px; border-radius: 999px; background: #e3e7ee; flex: 0 0 auto; }
  .auth .who .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth .out {
    border: 1px solid var(--line); background: var(--card); color: var(--muted);
    border-radius: 999px; padding: 6px 11px; font-size: 15.2px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
  }
  .auth .out:hover { border-color: #c9cedb; color: var(--text); }
  /* 로컬 전용 로그인 — 운영에서는 서버가 안 열어 줘서 아예 안 그려진다.
     그래도 보이면 바로 알아채게 점선으로 둔다. */
  .auth .out.dev { border-style: dashed; border-color: #c9a0a0; color: #a04747; }

  /* 게시판 글쓰기 — 상세 패널 안에 뜬다. 한 칸에 하나씩 세로로 쌓는다 */
  .bd-form { display: flex; flex-direction: column; gap: 9px; }
  .bd-form select, .bd-form input, .bd-form textarea {
    border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
    font-size: 15.7px; font-family: inherit; background: var(--card); color: var(--text);
    min-height: 40px; width: 100%; box-sizing: border-box;
  }
  .bd-form textarea { resize: vertical; line-height: 1.6; }
  .bd-form .note { margin: 0; font-size: 14px; color: var(--muted-2); }
  .bd-row2 { display: flex; gap: 8px; }
  .bd-row2 input { flex: 1; min-width: 0; }
  .bd-cap { display: flex; align-items: center; gap: 8px; }
  .bd-cap img { height: 40px; width: 112px; flex: 0 0 auto;
                border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
  .bd-cap button { flex: 0 0 auto; min-height: 40px; padding: 0 11px; }
  .bd-cap input { flex: 1; min-width: 0; }
  .bd-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

  /* 올린 사진 — 상세에서는 가로로 나열하고, 누르면 원본이 새 탭에서 열린다 */
  /* 글에 붙은 사진 — 세로로 쌓지 않고 옆으로 넘긴다.
     세 장이 쌓이면 본문이 화면 세 배가 되고, 아래 댓글까지 내려가는 길이 멀어진다. */
  .bd-gal { position: relative; margin-top: 12px; }
  .bd-gal-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
                  scrollbar-width: none; border-radius: 12px; }
  .bd-gal-track::-webkit-scrollbar { display: none; }
  .bd-gal-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0; border: 0;
                  background: var(--line-soft); border-radius: 12px; cursor: zoom-in;
                  display: flex; align-items: center; justify-content: center;
                  overflow: hidden; min-width: 0; }

  /* 한 장뿐이면 줄 맞출 상대가 없다. 자르지 않고 생긴 대로 둔다 */
  .bd-gal:not(.many) .bd-gal-slide { background: transparent; }
  .bd-gal:not(.many) img { width: 100%; max-height: 380px; object-fit: contain; display: block; }

  /* 여러 장이면 정사각으로 맞춰 채운다.
     높이가 제각각이면 넘길 때마다 아래 댓글이 위아래로 튀어 보던 자리를 잃는다.
     비율을 맞추느라 여백을 두면 세로 사진 옆이 반쯤 빈 칸이 된다 — 그래서 자른다.
     잘린 부분은 눌러서 보는 큰 화면에서 전부 나온다(거기는 자르지 않는다). */
  .bd-gal.many .bd-gal-slide { aspect-ratio: 1 / 1; max-height: 420px; }
  .bd-gal.many img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* 좌우 단추. 손가락으로는 밀면 되고, 마우스에는 밀 곳이 없다 */
  .bd-gal-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
                width: 34px; height: 34px; border-radius: 999px; border: 0;
                background: rgba(18,20,26,.55); color: #fff; font-size: 21px; line-height: 1;
                cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .bd-gal-nav.prev { left: 8px; }
  .bd-gal-nav.next { right: 8px; }
  .bd-gal-nav:active { background: rgba(18,20,26,.78); }
  /* 끝에서는 감춘다. 눌리지도 않는 단추가 사진을 가리고 있으면 고장으로 보인다 */
  .bd-gal-nav[hidden], .pv-nav[hidden] { display: none; }
  /* 손가락으로 미는 기계에서는 단추가 사진을 가리기만 한다 */
  @media (hover: none) { .bd-gal-nav { display: none; } }

  /* 몇 장 중 몇 번째인지. 점이 없으면 옆에 더 있는 줄을 모른다 */
  .bd-gal-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
  .bd-gal-dots span { width: 6px; height: 6px; border-radius: 999px; background: #d3cfc6; }
  .bd-gal-dots span.on { background: var(--muted); width: 18px; }

  /* ── 사진 크게 보기 ──
     새 탭으로 원본을 띄우면 앱을 떠난다. 덮개로 씌우면 닫았을 때 보던 글 그대로다. */
  /* 배경은 비치지 않게 둔다. 뒤 글자가 어른거리면 사진이 안 읽힌다 */
  /* dvh 로 재는 이유: 아이폰은 주소창이 접히면 100vh 가 화면보다 커져서 아래가 잘린다.
     z-index 는 200 — 시트(50)·하단 바(40)·헤더(30) 어느 것보다 확실히 위에 둔다 */
  .pv { position: fixed; inset: 0; height: 100dvh; z-index: 200; background: #0b0c0e;
        display: flex; flex-direction: column; }
  /* 그래도 뚫고 나오는 것이 없게, 사진을 보는 동안은 아래를 통째로 감춘다.
     display 가 아니라 visibility 다 — 스크롤 위치와 입력 중이던 값이 그대로 남는다 */
  body.photo-open header,
  body.photo-open .bottomnav,
  body.photo-open .sheet,
  body.photo-open .detail,
  body.photo-open .detail-veil { visibility: hidden; }
  .pv-bar { display: flex; align-items: center; justify-content: space-between;
            padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 18px;
            flex: 0 0 auto; }
  .pv-count { color: #fff; font-size: 14.5px; font-weight: 700; opacity: .85; }
  /* 어두운 사진 위에서도 보여야 한다. 흰 원으로 못 박고 손가락 크기(44px)로 둔다 */
  .pv-x { width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
          background: #fff; color: #14161c; flex: 0 0 auto;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 2px 10px rgba(0,0,0,.45); }
  .pv-x svg { width: 20px; height: 20px; }
  .pv-x:active { background: #e6e6e6; }
  .pv-track { flex: 1; min-height: 0; display: flex; overflow-x: auto;
              scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pv-track::-webkit-scrollbar { display: none; }
  .pv-slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0;
              display: flex; align-items: center; justify-content: center;
              padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pv-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .pv-nav { position: absolute; top: 50%; translate: 0 -50%;
            width: 44px; height: 44px; border-radius: 999px; border: 0;
            background: rgba(255,255,255,.18); color: #fff; font-size: 26px; line-height: 1;
            cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .pv-nav.prev { left: 10px; }
  .pv-nav.next { right: 10px; }
  .pv-nav:active { background: rgba(255,255,255,.34); }
  @media (hover: none) { .pv-nav { display: none; } }
  /* 목록 줄의 미리보기. 글자를 밀어내지 않게 오른쪽 끝에 작게 */
  .bd-row { position: relative; }
  .bd-thumb { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
              width: 46px; height: 46px; object-fit: cover; border-radius: 8px;
              border: 1px solid var(--line); }
  .bd-row:has(.bd-thumb) .bd-head, .bd-row:has(.bd-thumb) .bd-meta { padding-right: 56px; }

  /* 글 삭제 — 쓴 사람과 주인장에게만 보인다 */
  .bd-del { margin-left: 8px; border: 1px solid #e0a3a3; background: var(--card); color: #b42318;
            border-radius: 8px; padding: 2px 9px; font-size: 13px; font-weight: 700;
            cursor: pointer; }
  .bd-del:active { background: #fdecec; }

  /* 신고 — 삭제 옆에 붙지만 색을 뺀다. 눌러야 할 버튼처럼 보이면 안 된다 */
  .bd-report { margin-left: 6px; border: 1px solid var(--line); background: var(--card);
               color: var(--muted); border-radius: 8px; padding: 2px 9px;
               font-size: 13px; font-weight: 700; cursor: pointer; }
  .bd-report:active { background: var(--line-soft); }

  /* 게시판 말머리 — 제목 앞에 작게. 목록에서 줄을 훑을 때 먼저 걸린다 */
  .bd-cat { flex: 0 0 auto; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
            font-size: 12.5px; font-weight: 700;
            background: var(--line-soft); color: var(--muted); }
  #google-btn { display: flex; align-items: center; min-height: 34px; }
  /* 로그인 전후로 오른쪽 덩어리 폭이 달라지면 언어 토글이 좌우로 움직인다 — 자리를 미리 잡아 둔다 */
  @media (min-width: 701px) { .auth { min-width: 200px; justify-content: flex-end; } }

  main { max-width: 1080px; margin: 0 auto; padding: 14px 16px 64px; }

  /* ── 툴바 / 칩 ─────────────────────────── */
  .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .month { display: flex; align-items: center; gap: 4px; }
  .month .title { margin: 0; font-size: 18px; font-weight: 800; min-width: 118px; text-align: center; letter-spacing: -.3px; }
  button.ghost, select.ghost {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    min-height: 38px; padding: 0 12px; cursor: pointer; font-size: 15.5px; color: var(--text);
  }
  button.ghost:active { background: var(--line-soft); }
  button.icon { width: 38px; padding: 0; font-size: 16px; }
  .spacer { flex: 1; }
  .chips { display: flex; gap: 6px; margin: 0 -16px 12px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); border-radius: 999px;
    padding: 7px 14px; font-size: 15.5px; cursor: pointer; color: var(--muted); white-space: nowrap;
  }
  .chip.on { background: var(--text); border-color: var(--text); color: #fff; font-weight: 700; }
  .chip.region.on { background: var(--accent); border-color: var(--accent); }
  .chip .cnt { font-weight: 800; opacity: .55; margin-left: 2px; font-size: 14.7px; }
  .chip.on .cnt { opacity: .8; }
  #pogo-regions, #tcg-regions { margin-top: -6px; }

  /* ── 캘린더 ────────────────────────────── */
  /* 캘린더 컨트롤 (월 이동 + 필터) */
  .controls {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .controls-top { display: flex; align-items: center; gap: 10px; }
  .month { display: flex; align-items: center; gap: 2px; }
  .month .nav {
    width: 34px; height: 34px; border: 1px solid var(--line); background: var(--card);
    border-radius: 9px; cursor: pointer; font-size: 17px; color: var(--muted); line-height: 1;
  }
  .month .nav:hover { border-color: #c9cedb; color: var(--text); }
  .month .title {
    font-size: 19px; font-weight: 800; min-width: 118px; text-align: center; letter-spacing: -.4px;
  }
  /* 달력 칸도 .today를 쓰기 때문에 버튼으로만 한정한다 (안 그러면 칸이 알약 모양으로 깎인다) */
  button.today {
    border: 1px solid var(--line); background: var(--card); color: var(--muted);
    border-radius: 999px; padding: 6px 13px; font-size: 15.7px; font-weight: 700; cursor: pointer;
  }
  button.today:hover { border-color: #c9cedb; color: var(--text); }
  .result { font-size: 15.2px; color: var(--muted-2); white-space: nowrap; }
  .result b { color: var(--text); font-weight: 800; }
  .empty .reset {
    display: block; margin: 10px auto 0; border: 1px solid var(--line); background: var(--card);
    color: var(--accent); border-radius: 999px; padding: 7px 15px; font-size: 15.7px;
    font-weight: 700; cursor: pointer;
  }
  .result .reset {
    margin-left: 8px; border: 0; background: none; color: var(--accent);
    font-size: 15.2px; font-weight: 700; cursor: pointer; padding: 0;
  }

  .filter-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .filter-label {
    flex: 0 0 auto; font-size: 14.2px; font-weight: 800; color: var(--muted-2);
    letter-spacing: .5px; width: 26px;
  }
  /* 세그먼트: 회색 트랙 위에 버튼을 얹어 "고른 것"이 분명하게 보이도록 */
  .segment {
    display: flex; gap: 3px; background: var(--line-soft); border-radius: 999px; padding: 3px;
    overflow-x: auto; scrollbar-width: none; min-width: 0;
  }
  .segment::-webkit-scrollbar { display: none; }
  /* 오른쪽에 더 있다는 걸 알 수 있게 끝을 흐린다 */
  .segment { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
             mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
  .segment.full { -webkit-mask-image: none; mask-image: none; }
  .segment button {
    flex: 0 0 auto; border: 0; background: none; border-radius: 999px;
    padding: 6px 13px; font-size: 15.7px; font-weight: 600; color: var(--muted);
    cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  }
  .segment button:hover { color: var(--text); }
  .segment button.on {
    background: var(--card); color: var(--text); font-weight: 800;
    box-shadow: 0 1px 2px rgba(16,24,40,.12);
  }
  .segment button .cnt {
    font-size: 14.2px; font-weight: 700; color: var(--muted-2);
    background: #e9ecf2; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
  }
  .segment button.on .cnt { background: #eaf1ff; color: var(--accent); }
  .segment button.zero { opacity: .45; }

  /* 요일 가이드 — 접었을 때도 한 줄 요약이 보이게 */
  .weekly { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
            padding: 11px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
  .weekly summary { font-size: 15.7px; font-weight: 800; color: #334155; cursor: pointer; list-style: none;
                    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .weekly summary::-webkit-details-marker { display: none; }
  .weekly .teaser { font-size: 14.7px; font-weight: 600; color: var(--muted-2); }
  /* 접기 표시 — 있는지 없는지 모를 작은 삼각형 대신 눌러지는 덩어리로.
     요약과 요일 가이드가 같이 쓴다. */
  .weekly .fold {
    margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; background: #eef2f8; border: 1px solid var(--line);
  }
  .weekly .fold i {
    width: 9px; height: 9px; border-right: 2.4px solid #475569; border-bottom: 2.4px solid #475569;
    transform: rotate(45deg) translate(-2px, -2px);           /* ▾ */
  }
  .weekly[open] .fold i { transform: rotate(-135deg) translate(-2px, -2px); }   /* ▴ */
  .weekly summary:hover .fold { background: #e3eaf6; }
  .weekly-body { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
  /* 이번 주 — 껍데기는 .weekly(접이식 카드)를 그대로 쓴다 */
  /* 며칠씩 걸친 것들 — 날짜 칸마다 되풀이하지 않고 여기 한 줄로 모은다 */
  .week-all { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; align-items: center; }
  .week-all .lead { font-size: 14.2px; font-weight: 800; color: var(--muted-2); }
  /* 제목이 긴 공지가 섞여 있어 한 줄로 자른다 — 안 자르면 이 줄이 화면을 덮는다 */
  .week-all .tag { border-radius: 999px; padding: 4px 10px; font-size: 14.7px; font-weight: 700;
                   background: color-mix(in srgb, var(--c, var(--g-etc)) 13%, #fff);
                   color: color-mix(in srgb, var(--c, var(--g-etc)) 68%, #0f172a);
                   max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .week-all .tag i { font-style: normal; font-weight: 800; opacity: .6; margin-left: 4px; }
  .week-days { display: flex; flex-direction: column; gap: 3px; }
  .wd { display: flex; gap: 9px; align-items: flex-start; padding: 5px 7px; border-radius: 9px; }
  .wd.today { background: #eaf0f9; }
  .wd .d { flex: 0 0 46px; font-size: 15.2px; font-weight: 800; color: #334155; padding-top: 4px; }
  .wd.today .d { color: var(--accent); }
  .wd .d.sun { color: #e0574f; } .wd .d.sat { color: #3f7fe0; }
  .wd .evs { flex: 1; min-width: 0; }
  .wd .none { font-size: 14.7px; color: var(--muted-2); display: block; padding-top: 4px; }
  .we { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
        padding: 3px 0; font-size: 15.7px; color: #475569; line-height: 1.45; overflow-wrap: anywhere; }
  .we .t { font-weight: 800; color: var(--muted); margin-right: 5px; font-size: 14.7px; }
  .we b { font-weight: 800; color: color-mix(in srgb, var(--c, var(--g-etc)) 72%, #0f172a); }
  .we:active { background: var(--line-soft); border-radius: 6px; }

  .wk { display: flex; gap: 10px; align-items: baseline; padding: 7px 9px; border-radius: 9px;
        background: var(--line-soft); background: color-mix(in srgb, var(--c, var(--g-etc)) 9%, #fff); }
  .wk .day { flex: 0 0 auto; width: 26px; text-align: center; font-size: 15.7px; font-weight: 800;
             color: #334155; }
  .wk .day.sun { color: #e0574f; } .wk .day.sat { color: #3f7fe0; }
  .wk .when { flex: 0 0 auto; font-size: 14.2px; font-weight: 700; color: var(--muted); width: 86px; }
  .wk .what { flex: 1; min-width: 0; font-size: 15.2px; color: #475569; line-height: 1.5; }
  .wk .what b { font-weight: 800; color: color-mix(in srgb, var(--c, var(--g-etc)) 72%, #0f172a); }
  .wk .next { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--muted-2); }
  @media (max-width: 700px) {
    .wk { flex-wrap: wrap; row-gap: 3px; }
    .wk .what { flex: 1 1 100%; }
    .wk .next { margin-left: auto; }
  }

  /* 보스가 떠 있는 기간 — 이름 바로 아래. 마지막 날이면 색을 세운다 */
  .boss .bwhen { display: flex; align-items: center; justify-content: center; gap: 5px;
                 flex-wrap: wrap; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
  .boss .bwhen .r { font-size: 14.2px; font-weight: 800; color: #334155; }
  .boss .bwhen .l { font-size: 13.5px; font-weight: 800; color: #0a7a52; background: #e7f6ef;
                    border: 1px solid #c2e7d6; border-radius: 999px; padding: 1px 7px; }
  .boss .bwhen.last .r { color: #a33a2a; }
  .boss .bwhen.last .l { color: #a33a2a; background: #fdecea; border-color: #f5c9c2; }
  @media (min-width: 1024px) {
    .boss .bwhen .r { font-size: 14.5px; }
    .boss .bwhen .l { font-size: 13.5px; }
  }

  /* ── 이번 달 요약 ────────────────────────
     색은 손으로 켠 것(pogo_event.pick_month='Y')에만 준다. 전부 칠하면 아무것도 도드라지지 않는다. */
  /* 기본은 닫혀 있다. 그래서 제목 줄 하나로 "여기 뭔가 있다"가 보여야 한다 —
     펼침 표시(.fold)만으로는 약해서 제목 자체에 색을 준다. */
  .sum summary { gap: 10px; font-size: 16px; color: var(--accent); }
  .sum .teaser { color: #7d93bb; font-weight: 700; }
  .sum .fold { background: #e8effc; border-color: #cfdcfb; }
  .sum .fold i { border-color: var(--accent); }
  .sum summary:hover .fold { background: #d9e5fb; }
  @media (min-width: 1024px) { .sum summary { font-size: 17px; } }

  .sum-group { margin-top: 4px; }
  .sum-group + .sum-group { margin-top: 14px; }
  .sum-group h4 {
    margin: 0 0 6px; font-size: 14.2px; font-weight: 800; color: var(--muted-2);
    letter-spacing: .2px; display: flex; align-items: baseline; gap: 6px;
  }
  .sum-group h4 .cnt { font-weight: 700; color: var(--line); }
  .sum-list { display: flex; flex-direction: column; gap: 5px; }

  .sm {
    width: 100%; text-align: left; font-family: inherit; cursor: pointer;
    display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px;
    border: 1px solid transparent; border-radius: 9px; background: var(--line-soft);
  }
  .sm:hover { border-color: var(--line); background: #eef2f8; }
  /* 진짜 챙길 것 — 커뮤니티 데이·레이드 데이·페스트 */
  .sm.hot { background: color-mix(in srgb, var(--c, var(--g-etc)) 12%, #fff);
            border-color: color-mix(in srgb, var(--c, var(--g-etc)) 26%, #fff); }
  .sm.hot .s { color: #334155; }
  .sm.past { opacity: .45; }
  .sm.past .k { color: var(--muted-2); }

  /* 날짜는 위, 시간은 아래 — 한 줄에 붙이면 "9/12(토) 14–17시"가 잘린다 */
  .sm .d { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; line-height: 1.35;
           font-variant-numeric: tabular-nums; }
  .sm .d b { font-size: 15.2px; font-weight: 800; color: #334155; }
  .sm .d i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--muted-2); }
  .sm .k { flex: 0 0 auto; width: 78px; font-size: 14.2px; font-weight: 800; line-height: 1.35;
           color: color-mix(in srgb, var(--c, var(--g-etc)) 72%, #0f172a); }
  .sm .s { flex: 1; min-width: 0; font-size: 15.2px; color: #475569; line-height: 1.4;
           overflow-wrap: anywhere; }
  .sm .b { color: var(--muted-2); }
  .sm .kr { flex: 0 0 auto; font-size: 13.5px; font-weight: 800; color: #1d4ed8;
            background: #eaf1ff; border: 1px solid #cfdcfb; border-radius: 999px; padding: 1px 7px; }
  @media (max-width: 700px) {
    .sm { flex-wrap: wrap; row-gap: 2px; }
    .sm .d { width: auto; flex-direction: row; gap: 5px; align-items: baseline; }
    .sm .k { width: auto; }
    .sm .s { flex: 1 1 100%; }
  }
  @media (min-width: 1024px) {
    .sm .d { width: 108px; }
    .sm .d b { font-size: 15px; }
    .sm .d i { font-size: 13.5px; }
    .sm .k, .sm .s { font-size: 15px; }
  }

  .cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  .dow, .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dow > div, .cell { min-width: 0; }
  .dow div { padding: 9px 0; text-align: center; font-size: 14.2px; font-weight: 600; color: var(--muted-2); background: var(--line-soft); border-bottom: 1px solid var(--line); }
  .dow div:first-child { color: #e0574f; }
  .dow div:last-child { color: #3f7fe0; }
  .cell {
    /* 글자를 키운 만큼 칸도 키운다. min- 이라 넘치면 알아서 늘어나지만, 줄마다 높이가
       들쭉날쭉하면 달력으로 안 보인다 */
    min-height: 104px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
    padding: 5px 5px 7px; cursor: pointer; background: var(--card); overflow: hidden;
  }
  .cell:nth-child(7n) { border-right: 0; }
  /* 지난달·다음달 자투리는 한 겹 뒤로 물린다 — 이번 달이 먼저 읽히게 */
  .cell.out { background: var(--line-soft); }
  .cell.out .dnum { color: #c8cdd8; }
  .cell.out .ev { opacity: .5; }
  /* 선택한 날 — 테두리로만 표시한다(배경은 '오늘'에 양보) */
  .cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
  .dnum { font-size: 14.7px; font-weight: 700; color: var(--muted); margin-bottom: 3px; display: inline-block; }

  /* 오늘 — 칸 전체를 옅은 파랑으로 깔고 배지를 꽉 채운다.
     칩 색을 낮췄기 때문에(아래 .ev) 이 정도면 한눈에 찾힌다. 테두리는 선택 표시가 쓰므로 건드리지 않는다. */
  .cell.today { background: #e3ecff; }
  .cell.today .dnum { color: var(--accent); font-weight: 800; }
  .cell.today .dnum::after {
    content: '오늘'; margin-left: 4px; padding: 1.5px 6px; border-radius: 999px; vertical-align: 1.5px;
    background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -.2px;
  }

  /* 이벤트 칩 — 색은 '종류 구분'이 목적이라 배경은 옅게 깔고 색은 글자와 왼쪽 띠에 남긴다.
     원색으로 꽉 채우면 칸마다 색 덩어리가 생겨서 정작 오늘이 묻힌다. */
  .ev {
    font-size: 13.5px; line-height: 1.4; padding: 2px 5px; border-radius: 5px; margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
    border-left: 3px solid var(--c, var(--g-etc));
    background: var(--line-soft);                                          /* color-mix 미지원 대비 */
    background: color-mix(in srgb, var(--c, var(--g-etc)) 12%, #fff);
    color: #475569;
    color: color-mix(in srgb, var(--c, var(--g-etc)) 72%, #0f172a);
  }
  /* 오늘 칸은 배경이 파래서 칩이 뜨지 않게 흰 바탕을 준다 */
  .cell.today .ev { background: #fff; background: color-mix(in srgb, var(--c, var(--g-etc)) 10%, #fff); }
  .dots { display: none; flex-wrap: wrap; gap: 3px; min-width: 0; }
  .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c, var(--g-etc)); }
  .cell .more { font-size: 13px; color: var(--muted-2); padding-left: 2px; }

  /* ── 섹션 / 카드 ───────────────────────── */
  section { margin-top: 22px; }
  /* 첫 섹션은 위가 이미 탭 밑줄이다. 22px 을 또 두면 화면을 열자마자 빈 띠가 보인다 */
  .dash > section:first-child, main > div > section:first-child { margin-top: 0; }
  section :is(h1, h2) { font-size: 16.5px; margin: 0 0 4px; font-weight: 800; letter-spacing: -.3px; }
  section .desc { color: var(--muted-2); font-size: 15.2px; margin: 0 0 10px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
  .cards > * { min-width: 0; }
  .card { min-width: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
  }
  .card .top { display: flex; gap: 11px; align-items: flex-start; }
  .thumb { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; background: #eef1f6; flex: 0 0 auto; }
  .star {
    flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0; font-size: 18px;
    line-height: 1.3; color: var(--muted-2);
  }
  .star.on { color: #f0a91b; }
  .star:disabled { opacity: .5; }
  /* 별이 글줄 안에 섞여 있어서, 제목이 두 줄이 되면 둘째 줄이 별 밑으로 파고들어
     들쭉날쭉했다. 별은 옆 칸으로 빼고 제목만 제 폭을 쓴다. */
  .name { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 3px; }
  .name .ntxt { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: keep-all;
                font-weight: 800; font-size: 16.5px; letter-spacing: -.3px; line-height: 1.35; }
  /* 기간 — 카드에서 제목 다음으로 많이 보는 값이라 회색 잔글씨로 두지 않는다 */
  .card .when { display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap; margin-top: 2px;
          font-variant-numeric: tabular-nums; }
  .card .when .wdate { font-size: 15.5px; font-weight: 800; color: #1f2937; letter-spacing: -.3px;
                       white-space: nowrap; }
  .card .when .wkst { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
  .card .when .wtag { font-size: 14px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
                border: 1px solid transparent; white-space: nowrap; }
  .card .when .wtag em { font-style: normal; font-weight: 700; opacity: .75; }
  .card .when .wtag.live { background: #e7f6ef; color: #0a7a52; border-color: #c2e7d6; }
  .card .when .wtag.soon { background: #eaf1ff; color: #1d4ed8; border-color: #cfdcfb; }
  .card .when .wtag.done { background: var(--line-soft); color: var(--muted-2); border-color: #e0e4ec; }
  .badges { display: flex; flex-wrap: wrap; gap: 5px; }
  /* 배지가 커서 한 줄에 하나씩 떨어졌다. 상세 팝업은 배지만 넉 줄이 되면 정작 내용이 안 보인다 */
  .badge { font-size: 13px; padding: 3px 9px; border-radius: 999px; font-weight: 700;
           border: 1px solid transparent; line-height: 1.45; }
  .badge.kind { color: #fff; }
  .badge.yes { background: #e7f6ef; color: #0a7a52; border-color: #c2e7d6; }
  .badge.no { background: var(--line-soft); color: #5b6474; border-color: #e0e4ec; }
  .badge.oversea { background: #fff5e6; color: #96600a; border-color: #ffe1ad; }
  .badge.kr { background: #eaf1ff; color: #1d4ed8; border-color: #cfdcfb; }
  .badge.fixed { background: #edf1ff; color: #3a4ea8; border-color: #d6ddfb; }

  /* 포켓몬 그리드 */
  .pokes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(78px, 100%), 1fr)); gap: 8px; }
  .poke { text-align: center; position: relative; background: var(--line-soft); border-radius: 10px; padding: 6px 3px 7px; }
  .poke img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto; }
  /* "자마젠타 (역전의 용사)" 처럼 괄호가 붙은 이름이 두 줄에서 잘렸다. 세 줄까지 준다 */
  .poke .pname {
    font-size: 13px; color: #475569; margin-top: 3px; line-height: 1.25; word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .poke .shiny { position: absolute; top: 3px; right: 5px; font-size: 14px; }
  .poke .ptypes { display: flex; justify-content: center; gap: 2px; margin-top: 3px; }

  /* 타입 칩 */
  .t { font-size: 13.5px; font-weight: 700; color: #fff; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
  .t.mini { font-size: 12px; padding: 1px 4px; border-radius: 4px; }
  .t-normal{background:var(--t-normal)} .t-fire{background:var(--t-fire)} .t-water{background:var(--t-water)}
  .t-electric{background:var(--t-electric)} .t-grass{background:var(--t-grass)} .t-ice{background:var(--t-ice)}
  .t-fighting{background:var(--t-fighting)} .t-poison{background:var(--t-poison)} .t-ground{background:var(--t-ground)}
  .t-flying{background:var(--t-flying)} .t-psychic{background:var(--t-psychic)} .t-bug{background:var(--t-bug)}
  .t-rock{background:var(--t-rock)} .t-ghost{background:var(--t-ghost)} .t-dragon{background:var(--t-dragon)}
  .t-dark{background:var(--t-dark)} .t-steel{background:var(--t-steel)} .t-fairy{background:var(--t-fairy)}

  .bonus span { display: inline-block; background: var(--line-soft); border-radius: 7px; padding: 3px 8px; margin: 0 4px 4px 0; font-size: 14.7px; color: #3b465c; }
  /* 전용기 — 그날 놓치면 얻기 어려운 값이라 보너스보다 위에, 한 줄로 도드라지게 둔다 */
  .move { margin-top: 8px; display: flex; align-items: center; gap: 7px; background: #fdf3e7;
          border: 1px solid #f2e0c6; border-radius: 9px; padding: 6px 10px; font-size: 15.7px; }
  .move .k { font-size: 14px; font-weight: 800; color: #a8710f; background: #f8e6ca;
             border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
  .move b { color: #7c5310; letter-spacing: -.2px; }
  .move i { font-style: normal; font-size: 13px; font-weight: 800; color: #a8710f; }
  .badge.bg { background: #efe7fb; color: #6d4aab; }
  /* 목록의 이로치 표시(.miss.shiny)와 같은 색. 같은 뜻이 화면마다 다른 색이면 다른 것으로 읽힌다 */
  .badge.shiny { background: #fdf0d2; color: #8a6510; }

  /* 추천 포켓몬 — 약점 표 아래. 접어 두는 이유는 약점이 먼저 보여야 해서다 */
  .counters { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); text-align: left; }
  .counters summary { font-size: 14.7px; font-weight: 800; color: var(--accent); cursor: pointer;
                      list-style: none; text-align: center; padding: 4px 0; }
  .counters summary::-webkit-details-marker { display: none; }
  .counters summary::after { content: ' ▾'; color: var(--muted-2); }
  .counters[open] summary::after { content: ' ▴'; }
  /* 번호를 떼고 그림을 앞에 세운다. 그림이 곧 "몇 번째"보다 알아보기 쉽다 */
  .clist { margin: 6px 0 0; padding: 0; list-style: none;
           display: flex; flex-direction: column; gap: 6px; }
  /* 위쪽 맞춤 + 줄 높이 고정. 가운데 맞춤이던 때는 기술 이름이 두 줄이 되는 줄만
     그림이 내려앉아 목록이 들쭉날쭉했다 */
  .clist li { display: flex; align-items: flex-start; gap: 8px;
              font-size: 14.7px; line-height: 1.35; min-width: 0; }
  /* 자리를 미리 잡아 둔다(flex: 0 0) — 그림이 늦게 와도 글자가 안 튄다.
     도트 원본이 96px 이라 24px 로 줄이면 또렷하다. 흐려지면 없느니만 못하다 */
  .clist .cimg { flex: 0 0 26px; width: 26px; height: 26px; object-fit: contain;
                 image-rendering: -webkit-optimize-contrast; }
  /* min-width:0 이 없으면 긴 기술 이름이 칸을 밀어내 카드가 가로로 터진다 */
  .clist .cinfo { min-width: 0; }
  .clist b { font-weight: 800; }
  /* 이름과 폼 표시(메가·원시)는 글씨 크기가 달라서, 밑선을 맞춰야 한 줄로 읽힌다.
     폼이 있는 줄만 이름이 살짝 떠 보이던 것이 이것 때문이다 */
  .clist .cname { display: flex; align-items: baseline; gap: 4px; min-height: 21px; }
  .clist .cform { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted-2); }
  /* 줄여서 "하이드로..." 로 자르지 않는다 — 기술 이름이 잘리면 보여 주는 뜻이 없다.
     넘치면 두 줄이 될 뿐이고, 카드는 세로로 늘어나니 틀은 그대로다 */
  .clist .cmv { display: block; font-size: 13px; color: var(--muted-2); overflow-wrap: anywhere; }
  .counters .csub { margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--muted-2); }

  /* 등급·계급 탭 — 핸드폰에서 긴 목록을 건너뛰는 지름길. 위에 붙어 따라다닌다 */
  .subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
             margin: 0 0 12px; padding: 2px 0 4px;
             position: sticky; top: 0; z-index: 8; background: var(--bg); }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card);
                    color: var(--muted); border-radius: 999px; padding: 8px 14px;
                    font-size: 15.7px; font-weight: 700; cursor: pointer; white-space: nowrap;
                    min-height: 38px; font-family: inherit; }
  .subtabs button i { font-style: normal; margin-left: 5px; font-size: 14.2px;
                      color: var(--muted-2); font-weight: 700; }
  .subtabs button.on { background: var(--text); border-color: var(--text); color: #fff; }
  .subtabs button.on i { color: rgba(255,255,255,.72); }
  .longtog { margin-left: 10px; font-size: 14.7px; color: var(--muted); cursor: pointer;
             white-space: nowrap; user-select: none; }
  .longtog input { vertical-align: -1px; margin-right: 2px; }
  .longtog i { font-style: normal; color: var(--muted-2); }
  /* 놓치면 끝인 것들 — 전용기·이로치·배경. 목록 어디에 있든 같은 모양으로 둔다.
     flex 줄(오늘 목록) 안에서는 제목이 줄어들더라도 배지는 안 줄어야 한다 */
  .miss { flex: 0 0 auto; display: inline-block; font-size: 12.5px; font-weight: 800;
          border-radius: 5px; padding: 1px 5px; margin-left: 4px; white-space: nowrap;
          vertical-align: middle; }
  .miss.move { background: #f8e6ca; color: #8a5d0c; }
  .miss.shiny { background: #fdf0d2; color: #8a6510; }
  .miss.bg { background: #efe7fb; color: #6d4aab; }
  /* 주인장 추천 — 가장 눈에 띄게(진한 바탕) */
  .miss.pick { background: #e0632d; color: #fff; }
  .cmv .cmax { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted-2); }
  /* ── 레이드 모집 ───────────────────────── */
  .parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
  .party {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow);
  }
  .party .pt-top { display: flex; align-items: baseline; gap: 8px; }
  .party .pt-boss { font-weight: 800; font-size: 16.5px; letter-spacing: -.3px; overflow-wrap: anywhere; }
  /* 남은 시간은 이 글이 아직 유효한지를 말해 주는 값이라 제일 눈에 띄어야 한다 */
  .party .pt-left { margin-left: auto; flex: 0 0 auto; font-size: 14.2px; font-weight: 800;
                    color: #0a7a52; background: #e7f6ef; border: 1px solid #c2e7d6;
                    border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
  .party .pt-left.soon { color: #96600a; background: #fff5e6; border-color: #ffe1ad; }
  .party .pt-host { font-size: 15.2px; color: var(--muted); }
  .party .pt-host b { color: #334155; }
  .party .pt-note { font-size: 15.2px; color: #475569; overflow-wrap: anywhere; }
  .party .pt-code {
    display: flex; align-items: center; gap: 8px; background: var(--line-soft);
    border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px;
  }
  .party .pt-code .num { font-weight: 800; font-size: 16px; letter-spacing: .6px;
                         font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
  .party .pt-code .locked { font-size: 14.7px; color: var(--muted-2); flex: 1; }
  .party .pt-code button {
    border: 0; background: #eef2f8; color: #475569; border-radius: 8px;
    padding: 5px 10px; font-size: 14.7px; font-weight: 700; cursor: pointer;
  }
  .party .pt-act { display: flex; gap: 6px; }
  .party .pt-act button {
    border: 1px solid var(--line); background: var(--card); color: var(--muted);
    border-radius: 8px; padding: 5px 11px; font-size: 14.7px; font-weight: 700; cursor: pointer;
  }
  .party .pt-act button:hover { color: #c0392b; border-color: #f0c9c2; }

  .party-form {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 13px 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    box-shadow: var(--shadow); margin-bottom: 12px;
  }
  .party-form input, .party-form select {
    border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 15.2px;
    font-family: inherit; background: var(--card); color: var(--text); min-height: 38px;
  }
  .party-form .boss { flex: 1 1 150px; min-width: 0; }
  .party-form .memo { flex: 1 1 100%; }
  .party-form .code { flex: 0 0 150px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
  .party-form button {
    border: 0; background: var(--accent); color: #fff; border-radius: 9px;
    padding: 0 16px; font-size: 15.7px; font-weight: 700; cursor: pointer; min-height: 38px;
  }
  .party-form .hint { flex: 1 1 100%; font-size: 14px; color: var(--muted-2); }

  /* 상성표 */
  .matchup { background: #fffaf5; border: 1px solid #f2e4d6; border-radius: 11px; padding: 10px 12px; }
  .matchup summary { font-size: 15.2px; font-weight: 800; color: #7c4a17; cursor: pointer; list-style: none; }
  .matchup summary::-webkit-details-marker { display: none; }
  .matchup summary::after { content: ' ▾'; color: var(--muted-2); }
  .matchup[open] summary::after { content: ' ▴'; }
  .mx-body { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
  .mx-row { display: flex; gap: 8px; align-items: flex-start; }
  .mx-label { flex: 0 0 auto; font-size: 14.2px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
  .mx-label.good { background: #e7f6ec; color: #1a7f4b; }
  .mx-label.bad { background: var(--line-soft); color: #64748b; }
  .mx-list { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .mx.t { font-size: 14px; }
  .mx.t b { font-weight: 800; opacity: .85; }

  .remote { background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 11px; padding: 10px 12px; }
  .remote summary { font-size: 15.2px; font-weight: 800; color: #334155; cursor: pointer; list-style: none; }
  .remote summary::-webkit-details-marker { display: none; }
  .remote summary::after { content: ' ▾'; color: var(--muted-2); }
  .remote[open] summary::after { content: ' ▴'; }
  .remote ul { margin: 8px 0 0; padding-left: 17px; }
  .remote li { font-size: 15.2px; line-height: 1.65; color: #4a5568; margin-bottom: 4px; word-break: keep-all; }
  /* 칩으로 둔다. 맨글자로 두면 글자가 커질수록 두 개가 한 줄에 안 들어가 세로로 갈라진다 */
  a.src { font-size: 14.7px; color: var(--accent); text-decoration: none; font-weight: 700;
          border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
          background: var(--card); white-space: nowrap; line-height: 1.2; }
  a.src:active { background: var(--line-soft); }
  .srcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
  .warn { font-size: 14.7px; color: #92400e; background: #fff7ea; border: 1px solid #ffe1ad; border-radius: 9px; padding: 8px 10px; line-height: 1.5; }
  /* 영어 원문. 한국어 제목이 이미 위에 있어서 확인용이다 —
     세 줄씩 차지하면 정작 기간과 배지가 화면 밖으로 밀린다 */
  .orig { font-size: 13px; color: var(--muted-2); margin: 0 0 4px; line-height: 1.35;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden; overflow-wrap: anywhere; }

  /* 레이드 보스 */
  .tier { margin-bottom: 18px; }
  /* 등급(5성·메가·섀도우)은 이 화면에서 제일 먼저 찾는 단서다. 13px 회색이라 묻혀 있었다. */
  .tier h3 { display: flex; align-items: center; gap: 7px; font-size: 16px; margin: 0 0 10px;
             color: var(--text); font-weight: 800; letter-spacing: -.3px; }
  .tier h3::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px;
                     border-radius: 2px; background: var(--g-raid); }
  .bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr)); gap: 10px; }
  .bosses > * { min-width: 0; }
  /* 카드 안 칸 높이를 격자가 맞춘다.
     카드 높이는 격자가 늘려 주지만 그 안의 내용은 안 맞춰 줘서, 이름이 두 줄인 보스나
     약점 태그가 두 줄인 보스 옆에서는 "추천 포켓몬"이 30px씩 내려가 계단처럼 보였다.
     subgrid 를 쓰면 같은 줄의 카드끼리 칸마다 같은 높이를 나눠 갖는다 — 어떤 칸이
     늘어나든 숫자를 외워 둘 필요가 없다. */
  .boss { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 9px 10px; text-align: center; box-shadow: var(--shadow); }
  @supports (grid-template-rows: subgrid) {
    .bosses { grid-auto-rows: auto; }
    .boss { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start;
            justify-items: stretch; }
    /* 격자 항목이 되면 text-align: center 로는 이미지가 안 가운데 온다 —
       폭이 정해진 요소라 stretch 가 start 처럼 굴어서 왼쪽에 붙는다 */
    .boss > img { justify-self: center; }
    /* 빈 칸도 자리를 지킨다. 안 그러면 그 카드만 위로 당겨진다 */
    .boss > .slot { min-width: 0; }
    .boss > .slot:empty { display: block; }
  }
  .boss img { width: 56px; height: 56px; object-fit: contain; }
  .boss .bname { overflow-wrap: anywhere; font-size: 15.7px; font-weight: 800; margin: 2px 0 3px; letter-spacing: -.3px; word-break: keep-all; }
  /* 이로치·배경 — 이름 뒤에 붙는 글자 태그. 이름이 길면 태그째 다음 줄로 간다 */
  .boss .bmarks { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: 2px; }
  .boss .bmarks .miss { margin-left: 0; }
  .boss .line { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
  /* 종족값 막대 — 도감 막대를 카드 폭(폰 2열이면 142px)에 맞게 줄인다 */
  .boss .bstats { margin: 6px 0 0; text-align: left; }
  .boss .bstats .dex-bar { gap: 6px; margin-bottom: 3px; }
  .boss .bstats .dex-bar-k { width: 26px; font-size: 12.5px; }
  .boss .bstats .dex-bar-t { height: 7px; }
  .boss .bstats .dex-bar-v { width: 30px; font-size: 13px; }
  /* 포획 CP — 숫자를 오른쪽에 맞춰 세로로 훑히게. 100% 줄만 강조한다. */
  .boss .cpbox { margin: 5px 0 3px; display: flex; flex-direction: column; gap: 2px;
                 font-variant-numeric: tabular-nums; cursor: help; }
  /* 날씨 이름이 길면("부스트 안개 · 맑음") .k 가 nowrap 이라 값을 카드 밖으로 밀어냈다.
     줄을 바꿔 값은 지킨다 — 숫자가 이 칸의 전부다. */
  /* 폰에서 보스 카드가 2열이라 이 줄에 쓸 수 있는 폭이 142px 뿐이다.
     "포획 CP" + "2,100–2,188" 은 어떻게 해도 한 줄에 안 들어간다. 넘치게 두는 대신
     줄을 바꾸되, 줄 사이를 붙여 두 줄이 한 덩어리로 보이게 한다. */
  .boss .cprow { display: flex; align-items: baseline; column-gap: 6px; row-gap: 0;
                 flex-wrap: wrap; min-width: 0; font-size: 14px;
                 padding: 2px 7px; border-radius: 6px; background: var(--line-soft); line-height: 1.35; }
  .boss .cprow .k { color: var(--muted-2); font-weight: 700; white-space: nowrap; }
  .boss .cprow .k em { font-style: normal; font-weight: 600; opacity: .75; }
  .boss .cprow .v { flex: 0 0 auto; margin-left: auto; font-weight: 800; color: #475569; }
  .boss .cprow.best { background: #eaf1ff; }
  .boss .cprow.best .k { color: var(--accent); }
  .boss .cprow.best .v { color: var(--accent); font-size: 15.2px; }
  .boss .cprow.boost { background: #fff8ec; }
  /* 소스가 아직 CP 를 안 준 보스. 숫자 자리를 비워 두되 왜 비었는지는 말해 준다 */
  .boss .cprow.pending { background: var(--line-soft); }
  .boss .cprow.pending .k, .boss .cprow.pending .v { color: #9aa1ad; font-weight: 700; }
  .boss .cprow.boost .k, .boss .cprow.boost .v { color: #a8710f; }
  .boss .sub { font-size: 13.5px; color: var(--muted-2); margin-bottom: 3px; }
  .boss.past { opacity: .62; }
  .boss .maxwhen { font-size: 14.2px; font-weight: 700; color: var(--muted); margin: 3px 0 2px; }
  /* "지남" 두 글자가 줄 끝에서 쪼개져 "지 / 남" 으로 갈라졌다 */
  .boss .maxwhen .done { background: #eef1f6; color: var(--muted-2); border-radius: 999px;
                         padding: 1px 6px; font-size: 13.5px;
                         white-space: nowrap; display: inline-block; }
  .boss .weak { margin-top: 4px; padding-top: 5px; border-top: 1px dashed var(--line); }
  /* 추천 칸은 다른 화면과 같이 쓴다. 보스 카드 안에서만 틈을 줄인다 */
  .boss .counters { margin-top: 5px; padding-top: 4px; }
  .boss .counters summary { padding: 2px 0; }
  /* 공략 그림 버튼 — 추천 아래. 카드 폭을 다 쓰는 얇은 단추 */
  .boss .guide-btn { display: block; width: 100%; margin-top: 6px; padding: 6px 0; border-radius: 8px;
                     border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
                     background: color-mix(in srgb, var(--accent) 7%, var(--card));
                     color: var(--accent); font-size: 13.5px; font-weight: 800; cursor: pointer; }
  .boss .guide-btn:hover { background: color-mix(in srgb, var(--accent) 13%, var(--card)); }

  /* 공략 모음 — 그림이 주인공이라 카드는 그림 + 이름 + 등급·기간 한 줄뿐 */
  .guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  @media (min-width: 1024px) { .guides { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } }
  /* 무리 제목(지금 도는 · 지난 보스) — 레이드 예고의 주차 제목과 같은 꼴 */
  .guides-h { font-size: 18px; font-weight: 800; margin: 22px 0 10px; color: var(--text); letter-spacing: -.3px;
              padding-left: 11px; border-left: 4px solid var(--g-raid); line-height: 1.3; }
  .guides-h:first-of-type { margin-top: 6px; }
  .gcard { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; text-align: left;
           background: var(--card); border: 1px solid var(--line); border-radius: 12px;
           box-shadow: var(--shadow); cursor: pointer; min-width: 0; }
  .gcard:hover { border-color: #cfcabd; }
  .gcard img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px;
               background: #1B2233; display: block; }
  .gcard .gname { font-size: 15px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gcard .gmeta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
                  color: var(--muted); white-space: nowrap; overflow: hidden; }
  .gcard .gmeta .btier { margin-left: 0; }
  .gcard.past { opacity: .78; }
  /* 지난 보스 머리줄 — 제목 바로 옆 알약이 날짜 고르기(PC 에서 오른쪽 끝에 두니 안 보였다). 진짜 입력칸은 알약 위에 투명하게 덮여 있어
     어디를 눌러도 폰의 날짜 선택창이 뜬다 */
  /* 알 — 지금 노릴 만한 것 · 드묾 */
  .egg-picks { margin: 0 0 16px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #fbbf24 12%, var(--card));
               border: 1px solid #efd9a0; }
  .egg-picks-h { font-size: 16px; font-weight: 800; margin: 0 0 8px; } .egg-picks-h i { font-style: normal; font-size: 12.5px; color: var(--muted); margin-left: 6px; }
  .egg-picks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .egg-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
  .egg-pick img { width: 40px; height: 40px; object-fit: contain; }
  .egg-pick span { display: flex; flex-direction: column; min-width: 0; }
  .egg-pick b { font-size: 14px; font-weight: 800; } .egg-pick i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
  .poke.rare { border-color: #e6b94a; box-shadow: 0 0 0 1px #e6b94a inset; }
  .rare-tag { font-size: 11px; font-weight: 800; color: #7a4d00; background: #fde68a; border-radius: 6px; padding: 0 6px; margin-top: 2px; }
  /* 리서치 — 보상으로 찾기 */
  .rs-find { margin: 0 0 14px; }
  .rs-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin: 0 0 8px; }
  .rs-h i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .rs-clear { margin-left: auto; font: inherit; font-size: 13px; font-weight: 800; color: var(--accent); background: var(--card);
              border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
  .rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  /* 모양은 도감 검색칸과 같다(.dex-search input 규칙에 같이 묶었다) — 여기엔 자리만 */
  .rs-q { width: 100%; margin: 0 0 8px; }
  .rs-chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
             padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
  .rs-chip img { width: 28px; height: 28px; object-fit: contain; }
  .rs-chip i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
  .rs-chip.shiny { border-color: #e6b94a; }
  .rs-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .rs-chip.on i { color: #fff; }
  .task.has-shiny { border-color: #e6b94a; }
  /* 전용기(레거시 기술) 딱지 */
  .legacy { font-style: normal; display: inline-block; font-size: 10.5px; font-weight: 800; padding: 0 6px; border-radius: 6px;
            background: #fde7d8; color: #9c4a1f; vertical-align: 1px; line-height: 1.5; margin-left: 3px; white-space: nowrap; }
  .rk-pick .legacy { margin: 2px auto 0; }
  /* 메가 "+" 기술 딱지 — 전용기와 모양은 같고 색만 메가 보라 */
  .legacy.plus { background: #ece4fb; color: #5b3aa8; }
  .rank-how-g div.plus { grid-column: 1 / -1; }
  .rank-how-g div.plus dt { flex-basis: auto; }
  .rank-more { display: block; width: 100%; margin: 6px 0 0; padding: 8px 0; border: 1px solid var(--line); border-radius: 10px;
               background: var(--card); color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; }
  .rank-more:hover { color: var(--text); }
  /* 전설·메가 목록의 메가 레벨 버튼 — 기본 / 슈퍼 맥스 */
  .rank-mega { display: flex; gap: 6px; margin: 0 0 8px; }
  .rank-mega button { flex: 1; padding: 6px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
                      color: var(--muted); font-size: 12.5px; font-weight: 800; cursor: pointer; }
  .rank-mega button.on { background: #5b3aa8; border-color: #5b3aa8; color: #fff; }
  .rank-mega.gap { visibility: hidden; }
  .rank-mega-note { margin: -2px 0 8px; font-size: 12px; font-weight: 800; color: #5b3aa8; text-align: center; }
  .rank-mega-note.gap { visibility: hidden; }
  /* 타입 순위 — 오른쪽 숫자(ER 크게, DPS·TDO 작게) */
  /* 타입 순위 — 오른쪽 ER 한 칸(크게), DPS·TDO 는 기술 아래 작은 한 줄. 숫자 셋을 한 덩어리로 쌓으니 읽기 어려웠다 */
  .rank-er { margin-left: auto; flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
             padding: 5px 0 6px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
  .rank-er i { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .6px; line-height: 1.2;
               color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
  .rank-row .rank-er b { font-size: 19px; font-weight: 900; line-height: 1.15; color: color-mix(in srgb, var(--accent) 55%, var(--text));
                         font-variant-numeric: tabular-nums; }
  /* DPS·TDO — 흐린 글씨 한 줄은 안 보였다. 이름표 붙은 작은 칸 둘 */
  .rank-st { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .rank-st > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px; border-radius: 6px;
                    background: var(--line-soft); font-size: 12.5px; font-weight: 800; color: var(--text);
                    font-variant-numeric: tabular-nums; line-height: 1.35; }
  .rank-st i { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .3px; color: var(--muted); }
  /* 360px 폰에서 두 칸이 두 줄로 갈렸다 — 좁은 폰은 칸을 작게 */
  @media (max-width: 380px) {
    .rank-st { flex-wrap: nowrap; }
    .rank-st > span { font-size: 11.5px; padding: 1px 5px; gap: 3px; }
    .rank-st i { font-size: 9.5px; }
  }
  /* 보스 카드 — 키우면 몇 위 한 칸(제일 나은 하나). 누르면 타입별 순위로. 약점 칸에 붙지 않게 위아래 여백 */
  .brank { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; width: 100%;
           margin: 12px 0 10px; padding: 9px 11px; font: inherit; color: inherit; text-align: left; cursor: pointer;
           border-radius: 12px; border: 1px solid #efd9a0; background: color-mix(in srgb, #fbbf24 12%, var(--card)); }
  .brank:hover { border-color: #e0b85a; }
  .brank-top { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .brank-k { font-size: 12px; font-weight: 800; color: #7a4d00; }
  .brank-top b { font-size: 16px; font-weight: 900; color: #7a4d00; }
  .brank-go { font-size: 12px; font-weight: 800; color: #9a6a10; white-space: nowrap; }
  /* 폰 레이드 카드는 폭이 좁아 "순위 보기" 가 순위 글자를 덮었다 — 🏆 · 타입 · 순위 · 화살표만 */
  @media (max-width: 560px) { .brank-go-t, .brank-kt { display: none; } .brank-go { font-size: 18px; line-height: 1; } }
  .brank-m { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             font-size: 12.5px; font-weight: 700; color: var(--muted); }
  /* 홈 작은 칸 — "전기 3위" 한 마디 */
  /* 홈 작은 칸 — "불꽃 3위" 알약. 앞은 타입 색 바탕, 뒤는 옅은 타입 색 */
  .rk-mini { display: inline-flex; align-items: center; margin-top: 3px; text-decoration: none; white-space: nowrap;
             border-radius: 999px; overflow: hidden; font-size: 10.5px; font-weight: 900; line-height: 1;
             color: color-mix(in srgb, var(--tc) 55%, #1b1f27); background: color-mix(in srgb, var(--tc) 14%, var(--card));
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); padding-right: 6px; }
  .rk-mini s { text-decoration: none; background: var(--tc); color: #fff; padding: 3px 5px 3px 6px; margin-right: 4px; }
  .max-chip .rk-mini { margin-top: 4px; }
  /* 도감 — 다이맥스·거다이맥스 딱지(맥스 배틀 보라) */
  .dex-max { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
  .dex-max[hidden] { display: none; }
  .dmax { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #fff;
          background: var(--g-max); }
  .dmax.g { background: linear-gradient(135deg, #b9375e, var(--g-max)); }
  .dmax-go { font: inherit; font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--g-max) 75%, var(--text));
             background: none; border: 0; padding: 2px 0; cursor: pointer; }
  /* 도감 — 공격수 순위 칩. 레이드 추천 칸 안(그 타입 줄 끝 · "그 밖의 순위" 줄)에 붙는다 */
  .dex-rank { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
              padding: 3px 10px; border-radius: 999px; border: 1px solid #ecd9a8; background: #faf1dc; color: #7a5608; white-space: nowrap; }
  .dex-rank:hover { background: #f5e6c0; }
  .dex-rank b { font-size: 13px; font-weight: 900; color: #7a4d00; }
  .dex-rank i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
  /* 로켓단 — 데려갈 셋 */
  .rk-picks { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
  .rk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rk-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px;
             background: color-mix(in srgb, #3fa169 10%, var(--card)); border: 1px solid color-mix(in srgb, #3fa169 28%, var(--line));
             text-align: center; min-width: 0; }
  .rk-pick img { width: 44px; height: 44px; image-rendering: pixelated; }
  .rk-pick span { display: flex; flex-direction: column; min-width: 0; width: 100%; }
  .rk-pick b { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rk-pick b i { font-style: normal; font-size: 11px; color: var(--muted); }
  .rk-pick em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 도감 레벨별 CP — 두 줄씩 짝지어 폭을 아낀다 */
  .dex-cps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .dex-cp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 0;
                border-bottom: 1px solid var(--line-soft); font-size: 14px; }
  .dex-cp-row span { font-weight: 700; color: var(--muted); }
  .dex-cp-row span i { font-style: normal; font-size: 11.5px; color: var(--muted-2); }
  .dex-cp-row b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .dex-cp-row.key b { color: var(--accent); }
  /* 타입별 순위 — 18타입 칩을 한 화면에(폰 여섯 칸 × 세 줄), 고른 타입은 진하게 */
  .rank-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 4px 0 16px; }
  @media (min-width: 900px) { .rank-types { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
  .rank-type { font: inherit; font-size: 14px; font-weight: 800; padding: 8px 0; border: 0; border-radius: 10px;
               cursor: pointer; opacity: .55; text-align: center; }
  .rank-type.on { opacity: 1; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--text); }
  .rank-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; margin: 0 2px 12px; }
  .rank-title .t { font-size: 16px; padding: 3px 12px; border-radius: 8px; }
  .rank-img { margin-left: auto; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--accent);
              border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; }
  .rank-starter { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
                  background: color-mix(in srgb, #3fa169 12%, var(--card)); border: 1px solid color-mix(in srgb, #3fa169 30%, var(--line)); }
  .rank-starter img { width: 52px; height: 52px; image-rendering: pixelated; }
  .rank-starter span { display: flex; flex-direction: column; gap: 1px; }
  .rank-starter i { font-style: normal; font-size: 12.5px; font-weight: 800; color: #1a6b46; }
  .rank-starter b { font-size: 17px; font-weight: 900; }
  .rank-starter em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
  .rank-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
  /* 폰 — 전설·메가 / 일반을 탭으로. 위아래로 스무 줄이면 일반 순위까지 한참 내려야 했다 */
  .rank-seg { display: none; }
  @media (max-width: 899px) {
    .rank-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 10px; }
    .rank-seg button { font: inherit; font-size: 14.5px; font-weight: 800; padding: 9px 0; border-radius: 10px; cursor: pointer;
                       border: 1px solid var(--line); background: var(--card); color: var(--muted); }
    .rank-seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
    .rank-cols .rank-h { display: none; }
    .rank-cols > .rank-col { display: none; }
    .rank-cols.side-rare > .rank-col:nth-child(1), .rank-cols.side-common > .rank-col:nth-child(2),
    .rank-cols.side-shadow > .rank-col:nth-child(3), .rank-cols.side-max > .rank-col:nth-child(4) { display: block; }
  }
  @media (min-width: 900px) { .rank-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    /* 다이맥스는 세 목록 아래 한 줄 전체 — 네 칸을 나란히 두면 줄이 너무 좁다. 안에서 두 줄로 */
    .rank-cols > .rank-col.max { grid-column: 1 / -1; margin-top: 8px; }
    .rank-col.max .rank-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
  .rank-max-note { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .rank-list.max .rank-er i { font-style: normal; }
  /* PC 표 모양 — 기본(폰)에서는 머리·숫자 칸을 숨긴다 */
  .rank-thead, .rank-c, .rank-row .lg-pc, .rank-thead2 { display: none; }
  @media (min-width: 900px) {
    /* 줄과 같은 간격(10px) — 줄은 뒤쪽 기본 규칙의 gap 10px 이 이겨서, 머리만 5px 이던 동안 DPS·TDO 글자가 숫자와 어긋났다 */
    /* 표 머리 — 따로 뜬 띠 대신 바탕과 같은 색에 밑줄 하나(목록 제목 아래 글자처럼).
       내려도 머리가 위에 붙어 있게 — 윗부분이 화면 밖으로 나가면 숫자가 뭔지 몰랐다. 맨 위 머리줄(header) 바로 아래 */
    .rank-thead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 7px 11px 6px;
                  background: var(--bg); border-bottom: 2px solid var(--line);
                  font-size: 11.5px; font-weight: 900; letter-spacing: .3px; color: var(--muted);
                  position: sticky; top: var(--rank-stick, 60px); z-index: 5; }
    .rank-thead span:first-child { flex: 1; padding-left: 91px; }
    .rank-thead span:not(:first-child) { flex: 0 0 36px; text-align: right; }
    .rank-thead span:nth-child(4) { flex-basis: 44px; color: var(--accent); text-align: center; }
    .rank-list { gap: 4px; }
    .rank-row { position: relative; overflow: hidden; padding: 6px 11px 8px; }
    .rank-row::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--er, 0);
                        background: color-mix(in srgb, var(--accent) 45%, transparent); }
    .rank-row.go::after { display: none; }
    .rank-row img { width: 36px; height: 36px; }
    .rank-no { flex-basis: 24px; height: 24px; font-size: 12.5px; }
    /* 이름 줄은 한 줄로 — 전용기 딱지가 붙으면 줄이 바뀌어 칸 높이가 들쭉날쭉했다.
       섀도우 목록은 머리에 이미 "섀도우" 라 딱지를 뺀다 */
    .rank-row .mid b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rank-row .rank-sh { display: none; }
    .rank-row .lg-pc .legacy { font-size: 10px; padding: 0 5px; }
    .rank-row .mv { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* 기술이 말줄임으로 잘려도 전용기 딱지는 보이게 — PC 는 이름 옆에 */
    .rank-row .mv .legacy { display: none; }
    .rank-row .lg-pc { display: inline; }
    .rank-st { display: none; }
    .rank-c { display: block; flex: 0 0 36px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--muted);
              font-variant-numeric: tabular-nums; }
    .rank-er { flex: 0 0 44px; margin-left: 0; padding: 0; background: none; align-items: center; }
    .rank-er i { display: none; }
    .rank-row .rank-er b { font-size: 16px; }
  }
  /* 목록 한 칸이 좁을 때(화면 1024~1400, 왼쪽 메뉴가 있으면 한 목록 250px 안팎) — DPS·TDO 칸을 빼고 기술 아래 한 줄로.
     칸째로 두었더니 이름 칸이 0px 로 눌려 글자가 세로로 한 자씩 깨졌다 */
  .rank-col { container-type: inline-size; }
  .rank-row .rank-sub2 { display: none; }
  @media (min-width: 900px) {
    @container (max-width: 339px) {
      /* 이름 칸을 넓힌다 — 숫자 칸(DPS·TDO·ER)을 모두 빼고 기술 아래 한 줄로 모은다. 1위 대비 막대는 그대로 */
      /* 머리는 "ER · DPS · TDO" 순서 한 줄만 — 줄마다 이름표를 붙이니 TDO 가 잘렸다 */
      .rank-thead span { display: none; }
      .rank-thead span.rank-thead2 { display: block; flex: 1 1 auto; padding-left: 60px; text-align: left; color: var(--muted); }
      .rank-thead2 b { color: var(--accent); font-weight: 900; }
      .rank-c, .rank-er { display: none; }
      .rank-row img { width: 30px; height: 30px; }
      .rank-no { flex-basis: 20px; height: 20px; font-size: 11.5px; }
      .rank-row .rank-sub2 { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); white-space: nowrap;
                             overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
      .rank-row .rank-sub2 .er { font-style: normal; font-size: 12.5px; font-weight: 900; color: var(--accent); }
    }
  }
  }
  .rank-h { font-size: 16px; font-weight: 800; margin: 0 2px 8px; padding-left: 10px; border-left: 4px solid var(--accent); }
  .rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--card);
              border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  /* 순위 읽는 법 — 바탕색 위 맨글씨라 안 보였다. 흰 카드에 숫자 셋을 칸으로 */
  .rank-how { margin: 16px 0 0; padding: 14px; border-radius: 14px; background: var(--card);
              border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); }
  .rank-how-h { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.45; }
  .rank-how-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
  .rank-how-g div { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
  .rank-how-g dt { font-size: 14px; font-weight: 900; color: var(--accent); }
  .rank-how-g dd { margin: 1px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--text); }
  @media (max-width: 560px) {
    .rank-how-g { grid-template-columns: minmax(0, 1fr); }
    .rank-how-g div { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; }
    .rank-how-g dt { flex: 0 0 36px; }
  }
  .rank-how-f { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--muted); }
  .rank-row.go, .rank-starter.go { cursor: pointer; }
  .rank-row.go:hover { border-color: var(--accent); }
  .rank-row.go::after { content: "›"; margin-left: auto; font-size: 20px; font-weight: 800; color: var(--muted-2); }
  .rank-no { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 14px;
             font-weight: 900; background: var(--line-soft); color: var(--text); }
  .rank-no.top { background: #fde68a; color: #7a4d00; }
  .rank-row img { width: 44px; height: 44px; flex: 0 0 auto; image-rendering: pixelated; }
  .rank-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rank-row b { font-size: 15px; font-weight: 800; }
  .rank-sh { font-style: normal; font-size: 11.5px; font-weight: 800; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
             background: #ece9f6; color: var(--g-shadow); vertical-align: 1px; }
  .rank-row .mv { font-size: 12.5px; font-weight: 700; color: var(--muted); }
  /* 타입 순위 색 — 한 곳에서. 2026-09-29 차분한 파랑(초록·테라코타·보라·파랑 네 안 중 사용자가 고름). ink: 고른 탭·버튼·알약·제목 막대 / soft: ER 칸 바탕 / top: 1위 줄 바탕 / bar: 1위 대비 막대 */
  #pogo-ranks { --rk-ink: #2f5d8a; --rk-soft: #e4edf6; --rk-top: #f0f5fb; --rk-bar: linear-gradient(90deg, #b9d3ec, #2a93c7); }
  #pogo-ranks .rank-seg button.on { background: var(--rk-ink); border-color: var(--rk-ink); }
  .rank-row .rank-er b, .rank-er i { color: var(--rk-ink); }
  .rank-st > span { background: none; padding: 0; }
  /* 폰 — 타입 칩·탭·메가 버튼이 두꺼워 목록이 한참 아래서 시작했다 */
  @media (max-width: 899px) {
    .rank-er { background: var(--rk-soft); }
    .rank-types { gap: 5px; margin-bottom: 12px; }
    .rank-type { font-size: 13px; padding: 3px 0; border-radius: 7px; }
    #pogo-ranks .rank-seg { gap: 5px; margin-bottom: 8px; }
    #pogo-ranks .rank-seg button { font-size: 13.5px; padding: 4px 0; border-radius: 7px; }
    .rank-mega button { padding: 2px 0; font-size: 12px; }
    .rank-starter { padding: 6px 12px; margin-bottom: 10px; }
    .rank-starter img { width: 40px; height: 40px; }
  }
  /* 타입 순위 목록 — 한 목록을 카드 한 장으로(줄마다 뜬 카드 10장이 길고 어수선했다), 줄 사이는 가는 선.
     1~3위 금·은·동 · 1위 대비 ER 막대는 폰에서도 · 전용기·메가 기술 딱지는 이름 옆(기술 줄이 두 줄로 갈렸다).
     다이맥스 목록(PC 두 칸 격자)은 그대로 둔다 */
  .rank-list:not(.max) { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
                         box-shadow: var(--shadow); overflow: hidden; }
  .rank-list:not(.max) .rank-row { position: relative; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .rank-list:not(.max) .rank-row + .rank-row { border-top: 1px solid var(--line-soft); }
  .rank-list:not(.max) .rank-row:first-child { background: var(--rk-top); }
  /* 1위 대비 막대 — 타입 색(불꽃 빨강)은 경고처럼 보였다. 모든 타입에 같은 --rk-bar */
  .rank-list:not(.max) .rank-row::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--er, 0);
                                           border-radius: 0 3px 3px 0; background: var(--rk-bar); }
  .rank-list:not(.max) .rank-row.go:hover { background: var(--line-soft); }
  .rank-no.m1 { background: linear-gradient(135deg, #fde68a, #f2b705); color: #6b4200; }
  .rank-no.m2 { background: linear-gradient(135deg, #f1f3f6, #b9c1cc); color: #3b4452; }
  .rank-no.m3 { background: linear-gradient(135deg, #f7d6b6, #c98546); color: #5a2f0c; }
  .rank-row img { border-radius: 50%; background: var(--line-soft); }
  .rank-row .lg-pc { display: inline; }
  .rank-row .mv .legacy { display: none; }
  .rank-st { gap: 12px; }
  /* 목록 제목 — "전설·메가" 크게 + "TOP 10" 작은 알약. 막대는 사이트 다른 제목과 같은 검정, 알약만 --rk-ink */
  .rank-col .rank-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; padding-left: 10px;
                      border-left: 4px solid var(--accent); font-size: 17px; font-weight: 900; letter-spacing: -.3px; }
  .rank-col .rank-h small { font-size: 11.5px; font-weight: 900; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px;
                            background: var(--rk-ink); color: #fff; }
  @media (max-width: 899px) { .rank-col .rank-h { display: none; } }   /* 폰은 위 탭이 제목 */
  /* 메가 레벨 버튼 — 보라 덩어리가 혼자 튀었다. 폰 탭(전설·메가/일반…)과 같은 --rk-ink. 보라는 "메가 기술" 딱지에만 */
  .rank-mega button.on { background: var(--rk-ink); border-color: var(--rk-ink); }
  .rank-mega-note { color: var(--text); }
  /* 페이지 전체를 같은 두 색으로 — 제목·틀은 사이트 검정, 고른 것·강조·수치는 --rk-ink 파랑.
     "처음이라면" 칸(연두)·다이맥스 막대(회색)·읽는 법 칸(검정 틴트)이 저마다 다른 색이라 흩어져 보였다 */
  .rank-starter { background: var(--rk-top); border-color: var(--rk-soft); }
  .rank-starter i { color: var(--rk-ink); }
  .rank-list.max .rank-row::before { background: var(--rk-bar); border-radius: 0 3px 3px 0; }
  .rank-how { border-left-color: var(--rk-ink); }
  .rank-how-g div { background: var(--rk-top); }
  .rank-how-g dt { color: var(--rk-ink); }
  @media (min-width: 900px) {
    /* 표 머리를 카드 윗단으로 붙인다 — 바탕 위에 떠 있던 글자줄 + 밑줄이 목록과 따로 놀았다.
       "포켓몬 · 기술" 은 뻔해서 뺀다. ER 은 순위를 가르는 값이라 알약으로 */
    .rank-list:not(.max) { border-top: 0; border-radius: 0 0 14px 14px; }
    .rank-thead { margin-bottom: 0; padding: 8px 11px; background: var(--line-soft); border: 1px solid var(--line);
                  border-bottom: 0; border-radius: 14px 14px 0 0; font-size: 11px; letter-spacing: .6px; }
    .rank-thead span:first-child { font-size: 0; }
    .rank-thead span:nth-child(4) { padding: 1px 0; border-radius: 999px; background: var(--rk-ink); color: #fff; }
  }
  /* 타입 상성표 — 위 요약 두 칸(공격할 때 / 방어할 때), 아래 18×18 표.
     새 색은 고정 hex 로만 — color-mix 는 iOS 16.2 아래 사파리가 줄째 버린다 */
  /* 상성표 색 — 한 곳에서. good: 유리(×1.6 공격·×0.625 방어) · bad: 불리 · zero: ×0.39 · hl: 고른 줄의 빈 칸 */
  /* 색은 처음 판(옅은 초록·옅은 빨강에 진한 글자, 고른 줄 연노랑) — 파랑·벽돌·흰 머리 칸도 해 봤고 사용자가 처음 색으로 되돌렸다(9/29) */
  #pogo-types { --tc-good: #9fd9ae; --tc-good-soft: #bfe5c9; --tc-good-ink: #155c2e;
                --tc-bad: #f5cdc5; --tc-bad-soft: #f5cdc5; --tc-bad-ink: #8a2a1a; --tc-zero: #4b4a45; --tc-hl: #f7e6ae; }
  .tc-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
  @media (min-width: 900px) { .tc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
  .tc-box { padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  /* 머리 — "⚔️ 공격할 때" 크게, 옆에 "불꽃 기술로 때리면" */
  .tc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
  .tc-h em { font-style: normal; font-size: 17px; font-weight: 900; letter-spacing: -.3px; }
  .tc-h span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
  .tc-h .t { font-size: 13px; padding: 2px 9px; border-radius: 7px; color: #fff; }
  /* 줄 셋 — 왼쪽은 뜻을 색 알약으로(세다·아프다), 오른쪽은 해당 타입을 큰 칩으로. 줄 바탕은 흰색이라 칩 색이 살아난다 */
  .tc-line { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; }
  .tc-line + .tc-line { border-top: 1px solid var(--line-soft); }
  /* 뜻 칸 — 알약 하나에 뜻(세다)과 배율(×1.6)을 같이. 전에는 알약 밑에 배율이 따로 떠서 두 덩어리로 보였다.
     늘 두 줄(뜻 위 · 배율 아래)로 — 글자 길이에 따라 한 줄/두 줄이 섞이면 들쭉날쭉했다. 왼쪽 굵은 띠가 좋다·나쁘다 색 */
  .tc-k { flex: 0 0 132px; display: flex; flex-direction: column; align-items: flex-start;
          gap: 3px; padding: 7px 10px; border-radius: 9px; border-left: 4px solid; line-height: 1.2; }
  .tc-k b { font-size: 14px; font-weight: 900; white-space: nowrap; }
  .tc-k i { font-style: normal; font-size: 12px; font-weight: 900; padding: 1px 6px; border-radius: 6px;
            background: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
  .tc-line.good .tc-k { background: var(--tc-good-soft); border-color: #5aa06c; color: var(--tc-good-ink); }
  .tc-line.best .tc-k { background: var(--tc-good); border-color: #2f7d45; color: var(--tc-good-ink); }
  .tc-line.bad .tc-k { background: var(--tc-bad-soft); border-color: #cf6a55; color: var(--tc-bad-ink); }
  .tc-line.worst .tc-k { background: #e7e5df; border-color: var(--tc-zero); color: #2b2a26; }
  .tc-v { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .tc-chip { font: inherit; font-size: 14.5px; font-weight: 800; padding: 5px 12px; border: 0; border-radius: 8px; cursor: pointer; color: #fff; }
  .tc-none { font-size: 13.5px; font-weight: 700; color: var(--muted-2); }
  @media (max-width: 560px) { .tc-k { flex-basis: 104px; padding: 6px 8px; }
                              .tc-k b { font-size: 13px; }
                              .tc-chip { font-size: 13.5px; padding: 4px 10px; } }
  .tc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 2px 8px;
               font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .tc-legend b { color: var(--text); font-weight: 900; }
  /* 칸을 눌러 두 타입이 다를 때 맨 앞에 그 칸의 답 한 줄 */
  /* 강조한 칸의 답 — 문장 하나 + 큰 결과 글자 + 배율 */
  .tc-answer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; padding: 10px 14px;
               border-radius: 12px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
  .tc-answer > span { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 14px; font-weight: 800; color: var(--muted); }
  .tc-answer b { font-size: 17px; font-weight: 900; }
  .tc-answer i { font-style: normal; font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: 7px; }
  .tc-answer.up b { color: var(--tc-good-ink); } .tc-answer.up i { background: var(--tc-good-soft); color: var(--tc-good-ink); }
  .tc-answer.down b { color: var(--tc-bad-ink); } .tc-answer.down i { background: var(--tc-bad-soft); color: var(--tc-bad-ink); }
  .tc-answer.zero b { color: #2b2a26; } .tc-answer.zero i { background: var(--tc-zero); color: #fff; }
  .tc-answer.even b { color: var(--text); } .tc-answer.even i { background: #f1f0eb; color: var(--text); }
  .tc-how { font-weight: 800; color: var(--text); margin-right: 4px; }
  .tc-legend .tc-cell.even { background: #f1f0eb; color: var(--muted); }
  .tc-grid td { cursor: pointer; }
  .tc-legend .tc-cell { display: inline-block; padding: 2px 9px; border-radius: 6px; font-weight: 900; }
  .tc-legend .t { font-size: 12px; padding: 1px 7px; border-radius: 6px; color: #fff; }
  /* 표는 칸 안에서만 옆으로 민다 — 폰 폭(390)에 19칸이 안 들어간다. 페이지는 밀리지 않는다 */
  .tc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--line);
               border-radius: 14px; box-shadow: var(--shadow); }
  .tc-grid { border-collapse: separate; border-spacing: 2px; margin: 4px; font-variant-numeric: tabular-nums; }
  @media (min-width: 900px) { .tc-grid { width: calc(100% - 8px); } }
  .tc-grid th { padding: 0; font-weight: 800; }
  .tc-grid th .t { display: block; width: 100%; min-width: 40px; font: inherit; font-size: 11.5px; font-weight: 800;
                   padding: 4px 3px; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; opacity: .8; }
  .tc-grid thead th .t { writing-mode: horizontal-tb; }
  .tc-grid tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); padding-right: 2px; }
  .tc-grid tbody th .t { min-width: 50px; text-align: left; padding-left: 7px; }
  .tc-grid .tc-corner { font-size: 10.5px; font-weight: 800; color: var(--muted); white-space: nowrap; padding: 0 4px;
                        position: sticky; left: 0; z-index: 2; background: var(--card); }
  /* 칸 — 옅은 바탕에 진한 숫자 */
  .tc-grid td { min-width: 44px; height: 32px; text-align: center; font-size: 13px; font-weight: 900; border-radius: 6px;
                background: #f1f0eb; color: transparent; transition: opacity .12s; }
  .tc-grid td.up, .tc-cell.up { background: var(--tc-good-soft); color: var(--tc-good-ink); }
  .tc-grid td.down, .tc-cell.down { background: var(--tc-bad-soft); color: var(--tc-bad-ink); }
  .tc-grid td.zero, .tc-cell.zero { background: var(--tc-zero); color: #fff; }
  /* 고른 타입의 가로줄(공격)·세로줄(방어)만 또렷하게, 나머지는 흐리게 — 19×19 칸 가운데 볼 줄이 바로 보인다 */
  .tc-grid.tc-focus td { opacity: .45; }
  .tc-grid.tc-focus tr.sel td, .tc-grid.tc-focus td.sel { opacity: 1; }
  .tc-grid tr.sel td:not(.up):not(.down):not(.zero), .tc-grid td.sel:not(.up):not(.down):not(.zero) { background: var(--tc-hl); }
  .tc-grid tr.sel td.sel { box-shadow: inset 0 0 0 3px #1d1c17; }
  .tc-grid:hover td { opacity: 1; }        /* PC 에서 표 위에 올리면 전체가 다시 또렷하게 */
  .tc-grid tr.sel th .t, .tc-grid th.sel .t { opacity: 1; box-shadow: 0 0 0 2px #1d1c17; }
  /* 지난 레이드 — 같은 기간끼리 묶고 한 줄씩. 왼쪽 막대 색이 등급 */
  .hist-group { margin: 0 0 16px; }
  .hist-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 2px 8px; padding-left: 11px;
            border-left: 4px solid var(--g-raid); font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
  .hist-h small { font-size: 13px; font-weight: 800; color: var(--muted); }
  .hist-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  /* PC — 표 한 장. 왼쪽 칸에 기간, 오른쪽에 그 기간 보스들을 한 줄로.
     날짜 제목과 카드가 위아래로 따로 놀고, 반쪽 폭 카드가 좌우를 오가 오른쪽이 비어 날짜·보스가 한눈에 안 들어왔다 */
  @media (min-width: 900px) {
    .hist-groups { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
                   overflow: hidden; }
    .hist-group { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 16px;
                  margin: 0; padding: 10px 14px; }
    .hist-group + .hist-group { border-top: 1px solid var(--line-soft); }
    .hist-h { flex-direction: column; align-items: flex-start; gap: 1px; margin: 0; font-size: 16px; }
    .hist-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .hist-row { box-shadow: none; background: var(--bg); padding: 6px 10px; }
    .hist-row img, .hist-row .noimg { width: 40px; height: 40px; }
  }
  .hist-row { --c: var(--g-raid); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px;
              background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px;
              box-shadow: var(--shadow); }
  .hist-row.mega { --c: var(--g-max); } .hist-row.max { --c: var(--g-max); } .hist-row.shadow { --c: var(--g-shadow); }
  .hist-row.low { --c: var(--g-event); }
  .hist-row img, .hist-row .noimg { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: var(--line-soft); object-fit: contain; }
  .hist-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .hist-row b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-row .tag { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px;
                   background: color-mix(in srgb, var(--c) 12%, var(--card)); color: color-mix(in srgb, var(--c) 80%, #0f172a); }
  .hist-back { font-style: normal; font-size: 11.5px; font-weight: 800; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
               background: #e4f1e9; color: #155c3b; vertical-align: 1px; }
  .hist-guide { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 800; color: var(--accent); cursor: pointer;
                background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }
  .guides-past-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
  .guides-past-head .guides-h { margin: 0; display: flex; align-items: center; gap: 6px;
                                border-left-color: var(--muted-2); }
  .guides-past-head .guides-h i { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--muted);
                                  background: var(--line); border-radius: 999px; padding: 1px 8px; }
  .gday { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px;
          background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
  .gday-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px;
               font-size: 13.5px; font-weight: 800; color: var(--text); cursor: pointer; white-space: nowrap; }
  .gday-pick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
                   stroke-linecap: round; color: var(--muted); }
  .gday-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
                     border: 0; padding: 0; margin: 0; }
  .gday-pick input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto;
                                                        cursor: pointer; }
  .gday:hover { border-color: #cfcabd; }
  .gday.on { border-color: #3c6cc9; background: #eef3fc; }
  .gday.on .gday-pick, .gday.on .gday-pick svg { color: #2f5bb0; }
  .gday-x { border: 0; border-left: 1px solid #c9d7f2; background: transparent; color: #2f5bb0; font-size: 12px;
            font-weight: 800; padding: 8px 12px 8px 10px; cursor: pointer; align-self: stretch; }
  .mult { font-size: 12.5px; opacity: .85; }


  /* ═══ #pogo 개편 (디자인_v2) ═══════════════════════════
     "게임 정보 포털 + 일정 관리" 쪽으로 잡는다. 공식 앱 UI는 따라가지 않는다 —
     몬스터볼·게임풍 장식 없이, 대시보드처럼 정보 밀도와 위계로 읽힌다.

     폭 기준:  모바일 ~767  ·  태블릿 768~1023  ·  데스크톱 1024~
     데스크톱만 좌측 내비를 쓰고, 그 아래로는 하단 고정 바가 대신한다. */

  .shell { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) {
    .shell { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
  }

  /* ── 좌측 내비 (데스크톱 전용) ── */
  .side { display: none; }
  @media (min-width: 1024px) {
    /* 본문만 스크롤되도록 붙여 둔다. 메뉴가 화면보다 길어(스무 개 남짓) 아래 메뉴를 보려면 본문까지
       같이 내려야 했다 — 메뉴에 제 스크롤을 준다. 끝에 닿아도 본문으로 넘어가지 않게(overscroll) */
    .side { display: block; position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto;
            overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
            padding-bottom: 12px; }
  }
  /* 묶음 사이를 선으로 끊지 않는다 — 여섯 묶음에 선을 다 그으면 메뉴가 표처럼 보인다.
     제목이 곧 구분선이고, 제목이 없는 묶음(홈·설정)만 여백을 더 준다 */
  .side-group + .side-group { margin-top: 18px; }
  .side-group + .side-group:not(:has(h4)) { margin-top: 20px; }
  /* 묶음 제목. --muted-2 는 이 배경(--bg) 위에서 대비가 2.5:1 이라 안 읽혔다 —
     --muted 로 올리고, 제목 뒤로 실선을 흘려 "여기서 묶음이 바뀐다"를 눈에 걸리게 한다.
     선을 항목 위에 긋는 것과 다르다: 제목에 붙어 있어야 표처럼 보이지 않는다 */
  /* 메뉴 글씨는 본문 글씨색 — 회색(--muted)이라 흐리게 보였다. 묶음 제목만 한 단계 옅게 */
  .side-group h4 { display: flex; align-items: center; gap: 8px;
                   margin: 0 0 5px 12px; font-size: 13.4px; font-weight: 800;
                   color: var(--gc, var(--sub-ink)); letter-spacing: .04em; }
  /* 묶음 제목 옆 줄도 그 색으로 옅게 — 제목과 줄이 한 덩어리로 보인다 */
  .side-group h4::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--gc, var(--line)) 30%, var(--line)); }
  .side-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
               min-height: 38px; border: 0; background: none; border-radius: 10px;
               padding: 0 10px; cursor: pointer;
               font-size: 15.7px; font-weight: 700; color: var(--text); text-align: left;
               transition: background .14s, color .14s; }
  /* 아이콘을 옅은 타일에 앉힌다. 이모지는 폭이 제각각이라 그냥 두면 글자 시작점이 들쭉날쭉하다 */
  .side-item .ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
                    background: var(--card); display: grid; place-items: center;
                    font-size: 14.5px; line-height: 1; transition: background .14s; }
  a.side-item { text-decoration: none; }
  a.side-item .tag { margin-left: auto; font-size: 14px; color: var(--muted-2); }
  .side-item:hover { background: var(--line-soft); color: var(--text); }
  .side-item:hover .ico { background: var(--card); }
  .side-item.on { background: color-mix(in srgb, var(--accent) 11%, transparent);
                  color: var(--accent); font-weight: 800; }
  .side-item.on .ico { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  /* 켜진 자리에 왼쪽 막대. 배경 색만으로는 옅어서 훑을 때 안 걸린다 */
  .side-item.on::before { content: ""; position: absolute; left: -8px; top: 50%; translate: 0 -50%;
                          width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .side-item .badge-n { margin-left: auto; min-width: 19px; height: 19px; border-radius: 999px;
                        background: var(--g-raid); color: #fff; font-size: 14px; font-weight: 800;
                        display: grid; place-items: center; padding: 0 5px; }

  /* ── 하단 고정 바 (태블릿·모바일) ── */
  .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
               display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
               background: var(--card); border-top: 1px solid var(--line);
               padding-bottom: env(safe-area-inset-bottom, 0px); }
  @media (min-width: 1024px) { .bottomnav { display: none; } }
  /* 높이를 못 박는다. min-height 로 두면 아이콘(이모지)의 줄 높이가 기기마다 달라
     칸마다 글자 위치가 어긋나 보인다 — "높이가 깨진 느낌"의 정체가 이것이었다. */
  /* 칸이 여섯이라 360px 폰에서 한 칸이 60px 다. 글자는 세 자까지만 들어간다 —
     "레이드 예고"를 "예고"로 줄이는 건 BOTTOM_LABEL 이 맡는다 */
  .bottomnav button { border: 0; background: none; cursor: pointer; color: var(--muted);
                      height: 56px; padding: 0 1px; min-width: 0;
                      display: flex; flex-direction: column; align-items: center;
                      justify-content: center; gap: 4px;
                      font-size: 12.8px; font-weight: 700; position: relative;
                      font-family: inherit; }
  @media (max-width: 370px) { .bottomnav button { font-size: 11.6px; } }
  .bottomnav button .ico { font-size: 20px; line-height: 1; height: 20px;
                           display: flex; align-items: center; }
  /* 줄바꿈을 막는다. 한 칸이라도 두 줄이 되면 그 칸만 글자가 위로 올라붙어 바가 어긋나 보인다 */
  .bottomnav button .lbl { line-height: 1; white-space: nowrap; }
  .bottomnav button.on { color: var(--accent); }
  .bottomnav button.on::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
                                 width: 22px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .bottomnav .dot-n { position: absolute; top: 6px; margin-left: 16px; width: 7px; height: 7px;
                      border-radius: 999px; background: var(--g-raid); }
  /* 하단 바에 본문이 가리지 않게 */
  /* 하단 바에 가리지 않게 두는 여백인데, 바로 아래 푸터가 같은 이유로 또 여백을 둔다.
     둘이 겹쳐서 본문과 푸터 사이에 100px 넘는 빈 띠가 생겼다. 가리기는 푸터가 맡는다. */
  @media (max-width: 1023px) { body.pogo-on main { padding-bottom: 14px; } }

  /* 더보기 시트 */
  .sheet { position: fixed; inset: 0; z-index: 50; display: none; }
  .sheet[open] { display: block; }
  .sheet .veil { position: absolute; inset: 0; background: rgba(20,22,28,.34); }
  .sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card);
                  border-radius: 16px 16px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
                  max-height: 78vh; overflow-y: auto; }
  /* 상세 시트와 같은 꼴. 손잡이·제목·닫기가 같은 자리에 있어야 매번 찾지 않는다 */
  .sheet .panel { padding-top: 0; }
  .sheet-head { display: flex; align-items: center; gap: 8px;
                position: sticky; top: 0; z-index: 2; background: var(--card);
                padding: 14px 0 10px; margin-bottom: 4px;
                border-bottom: 1px solid var(--line-soft); }
  .sheet-head::before { content: ""; position: absolute; top: 4px; left: 50%; translate: -50% 0;
                        width: 40px; height: 4px; border-radius: 999px; background: #d8d5cd; }
  .sheet-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; }
  .sheet-x { margin-left: auto; border: 0; background: var(--text); color: #fff;
             border-radius: 999px; width: 42px; height: 42px; cursor: pointer; line-height: 1;
             display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .sheet-x svg { width: 19px; height: 19px; }
  .sheet-x:active { opacity: .78; }
  /* 세 칸 격자였다가 줄 목록으로 바꿨다 — 여덟 칸을 평평하게 늘어놓으니
     "설정"과 "로켓단"이 같은 무게로 읽혔다. 좌측 메뉴와 같은 묶음·같은 위계를 쓴다 */
  .sheet .grid-items { display: block; }
  .sheet-group + .sheet-group { margin-top: 15px; }
  .sheet-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 2px;
                    font-size: 13.4px; font-weight: 800; color: var(--gc, var(--muted)); letter-spacing: .04em; }
  .sheet-group h4::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--gc, var(--line)) 30%, var(--line)); }
  .sheet-group button,
  .sheet-group a { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px;
                   border: 0; background: none; border-radius: 11px; padding: 0 8px; cursor: pointer;
                   font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text);
                   text-align: left; text-decoration: none; }
  .sheet-group button:active { background: var(--line-soft); }
  .sheet-group .ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
                      background: var(--line-soft); display: grid; place-items: center;
                      font-size: 16.5px; line-height: 1; }
  /* 바깥으로 나가는 링크는 어디로 가는지 적어 둔다 — 눌렀더니 새 탭이 뜨면 놀란다 */
  .sheet-group a.out .ico { background: none; border: 1px dashed var(--line); }
  .sheet-group .tag { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--muted-2); }
  /* 공지를 더보기로 옮겼다. 안 읽은 수를 여기서도 보여 줘야 눌러 볼 이유가 생긴다 */
  .sheet-group .tag.n { background: var(--g-raid); color: #fff; border-radius: 999px;
                        padding: 2px 8px; font-size: 12.5px; font-weight: 800; }

  /* 오늘 핵심 — 스크롤 전에 답이 오는 자리. 여기만 살짝 강조한다 */
  /* 제목은 다른 섹션처럼 카드 밖(.sec-head)에 둔다. 이 칸만 제목이 안에 있어서
     핸드폰에서 훑으면 어떤 건 제목이 상자 안, 어떤 건 밖이라 짜임이 흐트러져 보였다. */
  .keybox { padding: 8px 9px; }
  /* 오늘 할 것 — 한눈에. 지금 레이드는 줄 전체로 낮게, 나머지는 작은 칸(폰 두 칸 · PC 네 칸)에 큰 글자로 "언제".
     밀어서 보는 판(슬라이드)도 해 봤지만 폰에서 한 번에 하나밖에 안 보여서 한눈에가 안 됐다 */
  .today-tiles { display: grid; grid-template-columns: repeat(var(--m, 2), minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 720px) { .today-tiles { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; } }
  .tt { --c: var(--g-event); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
        min-width: 0; min-height: 96px; padding: 10px 10px 10px 11px; text-align: left; cursor: pointer; font: inherit; color: inherit;
        background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px;
        box-shadow: var(--shadow); overflow: hidden; }
  .tt:hover { border-color: #cfcabd; border-left-color: var(--c); }
  .tt.raid { --c: var(--g-raid); } .tt.spot { --c: var(--g-spotlight); } .tt.max { --c: var(--g-max); }
  .tt.pick { --c: var(--g-spotlight); } .tt.done { --c: #b8bcc4; opacity: .75; }
  /* 홈 "이번 주 보너스" — 오늘 할 것 바로 위, 금색 줄. 오늘 켜진 것이 앞 */
  /* auto-fit — 둘뿐이면 줄을 반씩 나눠 채운다(auto-fill 이라 PC 에서 왼쪽에 몰려 오른쪽이 비었다) */
  .bonus-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px; margin: 0 0 12px; }
  .bonus-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
                background: color-mix(in srgb, #fbbf24 16%, var(--card)); border: 1px solid #efd9a0;
                border-left: 4px solid #d99400; box-shadow: var(--shadow); min-width: 0; }
  .bonus-card .bwhen { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
                       min-width: 54px; padding: 5px 8px; border-radius: 10px; background: var(--card);
                       font-size: 12px; font-weight: 800; color: #8a5f10; line-height: 1.25; text-align: center; }
  .bonus-card .bwhen b { font-size: 16px; font-weight: 900; color: #7a4d00; }
  .bonus-card.today .bwhen { background: #d99400; color: #fff; } .bonus-card.today .bwhen b { color: #fff; }
  .bonus-card .bmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .bonus-card .bmid b { font-size: 15.5px; font-weight: 800; color: var(--text); }
  .bonus-card .bmid span { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.35; }
  .bonus-card .bmid i { font-style: normal; font-size: 12px; font-weight: 800; color: #8a5f10; }
  /* 폰 — 보너스가 둘이면 칸 두 개가 반 화면을 먹어 지금 레이드가 밀렸다. 낮게: 설명은 한 줄, 규칙은 제목 옆 */
  @media (max-width: 560px) {
    .bonus-strip { gap: 6px; margin-bottom: 10px; }
    .bonus-card { padding: 7px 10px; gap: 9px; }
    .bonus-card .bwhen { min-width: 46px; padding: 3px 6px; font-size: 11px; }
    .bonus-card .bwhen b { font-size: 14px; }
    .bonus-card .bmid { gap: 1px; }
    .bonus-card .bmid b { font-size: 14.5px; line-height: 1.3; }
    .bonus-card .bmid span { font-size: 12.5px; }   /* 자르지 않는다 — 설명이 곧 내용이다 */
    .bonus-card .bmid i { font-size: 11.5px; }
  }
  .bonus-admin { margin: 10px 0 0; background: var(--card); border: 1px dashed #d9c38a; border-radius: 12px; padding: 10px 12px; }
  .bonus-admin > summary { cursor: pointer; font-size: 14px; font-weight: 800; color: #8a5f10; list-style: none; }
  .bonus-admin > summary::-webkit-details-marker { display: none; }
  .bonus-admin > summary i { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-left: 6px; }
  .ba-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .ba-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--muted); }
  .ba-form input, .ba-form select { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line);
                                    border-radius: 8px; background: var(--card); color: var(--text); }
  .ba-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 900px) { .ba-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .ba-time { display: flex; align-items: center; gap: 4px; } .ba-time input { min-width: 0; flex: 1; }
  .ba-acts { display: flex; align-items: center; gap: 10px; }
  .ba-acts button, .ba-list button { font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; border-radius: 8px;
                                     padding: 7px 14px; border: 1px solid var(--line); background: var(--card); color: var(--accent); }
  .ba-acts button { background: var(--accent); color: #fff; border-color: var(--accent); }
  #ba-msg { font-size: 13px; color: #b4372b; font-weight: 700; } #ba-msg.ok { color: #1a6b46; }
  .ba-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .ba-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; padding: 6px 0;
                border-top: 1px solid var(--line-soft); }
  .ba-list li span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
  .ba-list li .ba-btns { margin-left: auto; display: flex; gap: 6px; }
  .ba-list li button { padding: 4px 10px; font-size: 12.5px; }
  .ba-list li button.del { color: #b4372b; }
  .ba-acts button.ghost { background: var(--card); color: var(--text); border-color: var(--line); }
  .ba-list li.over { opacity: .6; }
  .tt-k { font-size: 12px; font-weight: 800; color: var(--muted); }
  .tt-big { font-size: 20px; font-weight: 900; letter-spacing: -.4px; line-height: 1.15;
            color: color-mix(in srgb, var(--c) 80%, #0f172a); }
  .tt-nm { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text); word-break: keep-all;
           overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tt-img { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
  .tt.has-img .tt-k, .tt.has-img .tt-big { padding-right: 42px; }
  .tt-move { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--g-community); word-break: keep-all; }
  .tt.spot .tt-move { color: #8a6200; }
  .tt.tt-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; min-height: 0; padding: 10px 12px; }
  .tt-lead { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
  .tt.tt-wide .tt-big { font-size: 23px; }
  .tt-sub { font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .tt-mons { display: flex; gap: 2px; margin-left: auto; min-width: 0; overflow: hidden; }
  .tt-mon { display: flex; flex-direction: column; align-items: center; width: 52px; flex: 0 0 auto; }
  .tt-mon img { width: 40px; height: 40px; border-radius: 50%; background: var(--line-soft); object-fit: contain; }
  /* 섀도우는 보라 테두리 — 이름에서 "섀도우" 를 떼어 짧게 쓰는 대신 색으로 알린다 */
  /* 테두리는 안쪽으로 — 바깥(box-shadow 퍼짐)으로 두니 보스 줄의 overflow:hidden 에 잘려 동그라미가 깨졌다 */
  .tt-mon.shadow img { box-shadow: inset 0 0 0 2px var(--g-shadow); outline: 2px solid var(--g-shadow); outline-offset: -2px; background: #ece9f6; }
  .tt-mon.shadow i { color: var(--g-shadow); }
  /* 한국에선 안 나오는 보스 — 그림은 조금 흐리게, 이름 아래 "원격" 딱지(그림 위에 얹었더니 동그라미가 깨져 보였다) */
  .tt-mon.far img { opacity: .6; }
  /* 원격 딱지는 이름 바로 옆(PC) */
  .tt-nm { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; min-width: 0; margin-top: 2px; }
  .tt-nm i { margin-top: 0 !important; min-width: 0; }
  .tt-mon em { flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1.3;
               background: #fdeee6; color: #8a3b14; border-radius: 999px; padding: 1px 5px; }
  /* 폰은 칸이 좁아 옆에 붙이면 이름이 "페로…" 로 잘렸다 — 폰만 이름 아래로 */
  @media (max-width: 560px) { .tt-nm { flex-direction: column; gap: 2px; } }
  /* 레이드 카드 — 나오는 지역(지역 한정 보스만). 흐린 회색 한 줄이라 안 보였다 — 색 딱지 + 진한 지역 이름 */
  .bregion { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; }
  .bregion .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; line-height: 1.3; }
  .bregion .where { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; word-break: keep-all; }
  .bregion.kr .pill { background: #e4f1e9; color: #155c3b; }
  .bregion.far .pill { background: #fdeee6; color: #8a3b14; }
  .hist-row .bregion { align-items: flex-start; margin-top: 2px; }
  /* PC 는 칸이 넓어 오른쪽 끝에 붙이면 "며칠 남음" 과 멀어져 안 보였다 — 글자 바로 옆에, 그림을 키워서 */
  @media (min-width: 561px) {
    .tt.tt-wide { gap: 28px; padding: 12px 18px; }
    .tt.tt-wide .tt-mons { margin-left: 0; gap: 10px; }
    .tt.tt-wide .tt-mon { width: 80px; }
    .tt.tt-wide .tt-mon img { width: 54px; height: 54px; }
    .tt.tt-wide .tt-mon i { font-size: 12.5px; max-width: 80px; }
  }
  /* 폰은 폭이 모자라 보스가 다섯이면 끝이 잘렸다 — 보스 줄을 아랫줄로 내린다 */
  @media (max-width: 560px) {
    .tt.tt-wide { flex-wrap: wrap; row-gap: 8px; }
    .tt.tt-wide .tt-mons { margin-left: 0; width: 100%; justify-content: space-between; }
    /* 순위 알약("전기 10위")이 52px 칸을 넘어 첫 칸 왼쪽이 잘렸다 — 폭을 나눠 쓴다 */
    .tt.tt-wide .tt-mon { width: auto; flex: 1 1 0; min-width: 0; }
    .tt.tt-wide .tt-mon i { max-width: 100%; }
  }
  .tt-mon i { font-style: normal; font-size: 11px; font-weight: 700; margin-top: 2px; max-width: 52px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sk-tt { background: var(--line-soft); border-color: transparent; box-shadow: none; cursor: default; }
  .sk-tt.tt-wide { min-height: 70px; }
  .key-list { display: flex; flex-direction: column; gap: 2px; }
  .key-row { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px;
             border: 0; background: none; border-radius: 10px; padding: 6px 7px; cursor: pointer;
             text-align: left; }
  .key-row:hover { background: var(--line-soft); }
  /* 태그가 커서 제목이 "파이리 (프리드의 고글) 스..." 까지 잘렸다. 종류 태그는 색으로도
     구분되니 글자를 줄여도 읽힌다 — 그만큼을 제목에 돌려준다 */
  .key-tag { flex: 0 0 auto; border-radius: 999px; padding: 2px 7px; font-size: 12.5px;
             font-weight: 800; white-space: nowrap; }
  .key-tag.live { background: #e4f1e9; color: #1a6b46; }
  .key-tag.soon { background: #fdeee6; color: #9c4a1f; }
  .key-tag.ends { background: #fbe9e7; color: #a33a2a; }
  .key-tag.pick { background: #fdf2dd; color: #8a5f10; }
  .key-at { flex: 0 0 auto; font-size: 15.2px; font-weight: 800; color: var(--muted); }
  /* 한 줄로 잘라 "…스포트라이트 ..." 로 끝나면 무슨 이벤트인지가 안 남는다.
     두 줄까지 내주고, 그래도 넘치면 그때 자른다. 줄이 길어져도 목록이니 문제없다. */
  .key-txt { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--text);
             line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; }
  .key-none { font-size: 15.7px; color: var(--muted-2); padding: 4px 2px; }

  /* 불러오는 동안 자리만 잡아 둔다. 깜빡이는 효과는 쓰지 않는다 */
  .sk { background: var(--line-soft); border-radius: 8px; height: 13px; margin: 7px 0; }
  .sk.w60 { width: 60%; } .sk.w40 { width: 40%; } .sk.w80 { width: 80%; }
  .sk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
             padding: 12px; }
  .sk-thumb { background: var(--line-soft); border-radius: 10px; height: 92px; }
  .load-fail { padding: 14px 13px; font-size: 15.7px; color: var(--muted); }

  /* ── 푸터 ──
     내용보다 푸터가 길면 아래로 내려갈수록 읽을 게 없다는 뜻이다. 줄 간격과 여백을
     줄이고, 이름만 키운다. 아래 여백은 하단 바(64px)에 가리지 않을 만큼만 둔다. */
  .foot { max-width: 1400px; margin: 16px auto 0; padding: 16px 16px 22px;
          border-top: 1px solid var(--line); color: var(--muted); font-size: 15.2px; line-height: 1.55; }
  /* 폰·태블릿은 하단 바(56px + 홈 막대)가 푸터 끝을 덮었다 — 검색용 요약(.seo)이 여백을 맡는 줄 알았지만 그건 noscript 안이라 안 그려진다 */
  @media (max-width: 1023px) { .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
  /* 도움 주신 분들 — 푸터 링크 줄 맨 앞, 금색 알약으로 눈에 띄게(페이지는 /thanks.html) */
  .foot .links a.thanks-link { padding: 2px 12px; border-radius: 999px; color: #7a4d00; border: 1px solid #efd9a0;
                               background: linear-gradient(135deg, #fde68a, #fbcfe8); }
  .foot h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--text);
             letter-spacing: -.3px; }
  .foot p { margin: 0 0 6px; }
  .foot .made { color: #3f4756; }
  .foot .made b { font-weight: 800; color: color-mix(in srgb, var(--accent) 78%, #0f172a); }
  .foot .fine { font-size: 14px; color: var(--muted-2); margin-top: 10px; line-height: 1.5; }
  /* ── 검색용 요약 ──
     서버가 오늘 일정·레이드 보스를 글로 박아 넣는 자리다. 예전에는 <noscript> 안에
     두었는데, 구글은 자바스크립트를 돌리므로 그 안을 본문으로 세지 않는다.
     그래서 보이는 자리로 꺼냈다 — 숨기면 다시 같은 문제로 돌아간다.

     화면 본문과 내용이 겹치므로 푸터 아래에 조용히 깐다. 작고 흐리게 두되
     display:none 은 절대 쓰지 않는다. 그건 검색엔진이 속임수로 본다. */
  .seo { max-width: 1400px; margin: 0 auto; padding: 4px 16px 22px;
         color: var(--muted-2); font-size: 13.5px; line-height: 1.7; }
  @media (max-width: 1023px) { .seo { padding-bottom: 76px; } }  /* 하단 바에 가리지 않게 */
  .seo h1 { margin: 10px 0 6px; font-size: 15px; font-weight: 800; color: var(--muted); }
  .seo h3 { margin: 12px 0 4px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
  .seo p { margin: 0 0 6px; }
  .seo ul, .seo ol { margin: 0 0 6px; padding-left: 18px; }
  .seo li { margin-bottom: 2px; }
  .seo a { color: var(--accent); text-decoration: none; }

  /* 구글 로그인을 쓰면 동의 화면 심사에서 이 주소들을 요구한다. 눈에 띄는 자리에 둔다 */
  .foot .links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; }
  .foot .links a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
  .foot .links a:hover { text-decoration: underline; }

  /* ── 홈 대시보드 ── */
  /* 누른 항목의 상세는 홈을 떠나지 않고 오른쪽에 편다. 캘린더로 넘겨 버리면 보던 자리를 잃는다. */
  .dash-wrap { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .detail { display: none; }
  .detail[open] { display: block; }
  /* 아무것도 안 골랐으면 칸 자체가 없다 — 빈 상자에 안내 문구를 채워 두면 자리만 먹는다 */
  /* 넓은 화면에서는 오른쪽 서랍으로 연다.
     전에는 홈의 2단 배치 오른쪽 칸이었는데, 그러려면 상세가 홈 화면 안에 있어야 했고
     그래서 주간 요약·공지에서 누르면 열리기만 하고 안 보였다. 서랍은 어느 화면에서든
     같은 자리에 뜬다 — 보던 목록을 떠나지 않는다는 원래 뜻은 그대로다. */
  @media (min-width: 1024px) {
    .detail[open] { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 50;
                    background: var(--card); overflow-y: auto; overscroll-behavior: contain;
                    padding: 14px 18px 24px;
                    box-shadow: -2px 0 0 rgba(16,24,40,.06), -18px 0 44px rgba(16,24,40,.18); }
    .detail-veil[open] { position: fixed; inset: 0; z-index: 49;
                         background: rgba(18,20,26,.32); }
  }
  /* 좁으면 아래에서 올라오는 시트로.
     배경을 var(--bg) 로 두고 있었다 — 페이지 배경과 똑같은 색이라 올라와도 티가 안 났다.
     흰 판으로 바꾸고 덮개를 진하게 해서 "위에 떠 있다"가 보이게 한다. */
  @media (max-width: 1023px) {
    .detail[open] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
                    background: var(--card); max-height: 86vh; overflow-y: auto;
                    overscroll-behavior: contain;
                    border-radius: 20px 20px 0 0;
                    box-shadow: 0 -2px 0 rgba(16,24,40,.06), 0 -18px 44px rgba(16,24,40,.30);
                    /* 위쪽 패딩이 0 인 이유: sticky 는 패딩 *안쪽*에 달라붙는다.
                       8px 를 주면 시트 맨 위에 머리줄이 없는 띠가 생기고,
                       스크롤되는 사진이 그 틈으로 손잡이를 뚫고 지나갔다.
                       그만큼은 아래 .detail-head 의 padding-top 이 대신 낸다 */
                    padding: 0 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
    .detail-veil[open] { position: fixed; inset: 0; z-index: 49;
                         background: rgba(18,20,26,.52); backdrop-filter: blur(2px); }
    /* 시트가 열린 동안 뒤 페이지를 붙들어 둔다. top 은 JS가 넣어 스크롤 위치를 지킨다 */
    body.sheet-open { position: fixed; left: 0; right: 0; width: 100%; }
  }
  .detail-veil { display: none; }
  .detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .detail-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
  /* 패널과 같은 색이라 어디가 닫기인지 안 보였다. 진한 원으로 못 박는다 */
  .detail-x { margin-left: auto; border: 0; background: var(--text); color: #fff;
              border-radius: 999px; width: 34px; height: 34px; cursor: pointer;
              line-height: 1;
              display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .detail-x:active { opacity: .78; }
  @media (max-width: 1023px) {
    /* 손잡이. 시트 자체가 스크롤되므로 머리줄에 붙여 같이 고정한다 —
       패널에 절대배치하면 스크롤할 때 위로 밀려 올라가 사라진다 */
    .detail-head { position: sticky; top: 0; z-index: 2; background: var(--card);
                   padding: 22px 0 10px; margin-bottom: 6px;
                   border-bottom: 1px solid var(--line-soft); }
    .detail-head::before { content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0;
                           width: 40px; height: 4px; border-radius: 999px; background: #d8d5cd; }
    .detail-head h3 { font-size: 16.5px; }
    .detail-x { width: 42px; height: 42px; }
    .detail-x svg { width: 19px; height: 19px; }
  }

  .dash { display: flex; flex-direction: column; gap: 18px; }
  .dash section { min-width: 0; }
  /* 줄바꿈이 없어 좁은 화면에서 오른쪽 버튼("모두 읽음"·"전체 보기")이 화면 밖으로 밀려
     아예 안 보였다. 글자를 키우면서 더 심해졌다. 자리가 모자라면 아랫줄로 내린다. */
  .sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
  .sec-head :is(h1, h2) { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
  /* 날짜가 제목 옆 회색이라 안 읽혔다. 제목만큼은 아니어도 "언제"는 읽혀야 한다 */
  .sec-head .sub { font-size: 16px; font-weight: 700; color: var(--sub-ink); }
  /* 누를 수 있다는 게 보여야 한다. 맨글자로 두면 제목의 일부처럼 읽힌다 */
  .sec-head .more { margin-left: auto; cursor: pointer; white-space: nowrap;
                    border: 1px solid var(--line); background: var(--card);
                    border-radius: 999px; padding: 7px 13px; min-height: 36px;
                    font-size: 14.2px; font-weight: 700; color: var(--accent); font-family: inherit; }
  .sec-head .more:active { background: var(--line-soft); }
  /* PC 는 화면이 넓어 오른쪽 끝에 붙이면 제목과 멀어져 안 보였다(주인장 일기 "전체 보기") — 제목 바로 옆에 둔다.
     폰은 폭이 좁아 오른쪽 끝이 곧 제목 옆이라 그대로 둔다 */
  @media (min-width: 1024px) {
    .sec-head :is(h1, h2) { font-size: 19px; }
    .sec-head { gap: 6px 12px; }
    .sec-head .more { margin-left: 0; }
  }

  .card { background: var(--card); border: 1px solid var(--line);
          border-radius: var(--radius); box-shadow: var(--shadow); }

  /* 이번 주 추천 — 좁으면 가로 스크롤, 넓으면 격자. 자동으로 움직이지 않는다.
     가로 스크롤은 grid(grid-auto-flow:column)가 아니라 flex 로 만든다 —
     grid + scroll-snap 조합은 사파리에서 마지막 카드에 못 닿는 일이 있었다. */
  /* 화면 끝까지 흐르게 하려고 좌우로 12px 씩 빼고 그만큼 안쪽 여백을 준다.
     scroll-padding 이 없으면 스냅이 그 안쪽 여백을 무시하고 첫 카드를 화면 끝(0)에 붙인다 —
     그래서 이 줄만 왼쪽이 다른 칸보다 12px 더 나가 있었다. */
  .recs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
          scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 6px;
          scroll-padding-left: 12px; }
  .recs::-webkit-scrollbar { display: none; }
  .recs > .rec { flex: 0 0 74%; }
  @media (min-width: 560px) { .recs > .rec { flex-basis: 46%; } }
  /* 마우스로 보는 사람에게는 스크롤바를 남긴다. 숨기면 끌 수단이 아예 없다 */
  @media (pointer: fine) {
    .recs { scrollbar-width: thin; padding-bottom: 2px; }
    .recs::-webkit-scrollbar { display: block; height: 8px; }
    .recs::-webkit-scrollbar-thumb { background: #cfcabd; border-radius: 99px; }
    .recs::-webkit-scrollbar-track { background: transparent; }
  }
  /* 넓어져도 격자로 바꾸지 않는다 — 몇 장이 보이느냐만 달라진다.
     다음 카드가 조금 걸쳐 보이게 남겨서 "더 있다"가 드러난다. */
  @media (min-width: 768px) { .recs { margin: 0; padding: 2px 0 6px; scroll-padding-left: 0; }
                              .recs > .rec { flex-basis: 31%; } }
  @media (min-width: 1280px) { .recs > .rec { flex-basis: 23.5%; } }

  /* 마우스로는 가로로 끌 방법이 마땅치 않다. 그래서 버튼을 둔다(자동으로 넘기지는 않는다) */
  .recs-wrap { position: relative; }
  .recs-nav { display: none; }
  @media (pointer: fine) {
    .recs-nav { display: grid; place-items: center; position: absolute; top: 58px; z-index: 2;
                width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line);
                background: var(--card); box-shadow: var(--shadow); cursor: pointer;
                font-size: 18px; line-height: 1; color: var(--muted); padding: 0 0 2px; }
    .recs-nav.prev { left: -7px; }
    .recs-nav.next { right: -7px; }
    .recs-nav:hover:not(:disabled) { color: var(--text); border-color: #cfcabd; }
    .recs-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
  }
  .rec { scroll-snap-align: start; display: flex; flex-direction: column; gap: 7px;
         background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
         box-shadow: var(--shadow); padding: 12px; cursor: pointer; text-align: left;
         min-height: 44px; }
  .rec:hover { border-color: #cfcabd; }
  .rec .thumb-box { display: grid; place-items: center; height: 92px; border-radius: 10px; overflow: hidden;
                    background: color-mix(in srgb, var(--c, var(--g-etc)) 9%, var(--line-soft)); }
  /* 이벤트 그림은 가로로 긴 배너다. 80% 안에 통째로 넣었더니 칸 한가운데 작게 떴다 — 칸을 채운다 */
  .rec .thumb-box img { width: 100%; height: 100%; object-fit: cover; }
  .rec .thumb-box .noimg { font-size: 14.2px; font-weight: 700; color: var(--muted-2); }
  /* 카드마다 "⭐ 이번 주 추천" 이 있기도 없기도 하고 제목이 한 줄이기도 두 줄이기도 하다.
     그대로 두면 옆 카드와 날짜·시간 줄이 어긋나 목록이 계단처럼 보인다.
     두 칸 모두 자리를 고정해서 어느 카드를 봐도 같은 높이에서 같은 것을 읽게 한다. */
  .rec .hot-slot { display: flex; align-items: center; min-height: 23px; }
  .rec .nm { font-size: 16px; font-weight: 800; letter-spacing: -.2px; line-height: 1.35;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rec .when { font-size: 14.7px; font-weight: 700; color: var(--muted); }
  .rec .at { font-size: 14.7px; font-weight: 800; color: color-mix(in srgb, var(--c, var(--g-etc)) 70%, #0f172a); }
  .rec .thumb-box .noimg { font-size: 17px; font-weight: 900; color: color-mix(in srgb, var(--c, var(--g-etc)) 75%, #0f172a); }
  /* 내용은 위에서부터 쌓고 남는 여백은 카드 아래에 둔다.
     제목에 두 줄 자리를 늘 잡아 카드끼리 줄을 맞춰 봤더니, 제목이 한 줄인 카드에
     빈 줄이 생겨 제목과 날짜 사이가 뻥 뚫렸다. 가로로 넘겨 보는 목록이라
     옆 카드와 줄을 맞추는 것보다 카드 하나가 멀쩡한 게 낫다. */
  .rec .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .tag { border-radius: 999px; padding: 3px 8px; font-size: 14px; font-weight: 800;
         background: var(--line-soft); color: var(--muted); }
  .tag.kind { background: color-mix(in srgb, var(--c, var(--g-etc)) 13%, #fff);
              color: color-mix(in srgb, var(--c, var(--g-etc)) 70%, #0f172a); }
  .tag.hot { background: color-mix(in srgb, var(--g-raid) 14%, #fff);
             color: color-mix(in srgb, var(--g-raid) 72%, #0f172a); align-self: flex-start; }

  /* 오늘의 일정 + 공지 — 넓으면 2열 */
  .two-col { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  /* 홈 섹션 제목 — 메뉴 맨 위 제목(띠)보다 한 단계 가볍게, 무리 제목과 같은 왼쪽 막대. 홈은 섹션이 여덟이라 띠는 무겁다 */
  #pane-home .sec-head :is(h1, h2) { padding-left: 11px; border-left: 4px solid var(--accent); line-height: 1.25; }
  /* 반쪽 칸(오늘의 일정 · 놓치면 안 되는 소식)은 머리줄을 한 줄로 — 버튼만 아랫줄로 떨어져 보였다.
     자리가 모자라면 날짜·안 읽은 수 쪽이 말줄임으로 준다 */
  @media (min-width: 900px) {
    .two-col .sec-head { flex-wrap: nowrap; }
    .two-col .sec-head .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .two-col .sec-head h2, .two-col .sec-head .more { flex-shrink: 0; }
  }
  @media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

  .sched { display: flex; flex-direction: column; }
  .sched .row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
                border-top: 1px solid var(--line-soft); min-height: 44px; width: 100%;
                border-left: 0; border-right: 0; border-bottom: 0; background: none;
                cursor: pointer; text-align: left; }
  .sched .row:first-child { border-top: 0; }
  .sched .row:hover { background: var(--line-soft); }
  .sched .at { flex: 0 0 46px; font-size: 15.2px; font-weight: 800; color: var(--muted); padding-top: 1px; }
  .sched .mid { flex: 1; min-width: 0; }
  .sched .nm { font-size: 15.5px; font-weight: 700; color: var(--text);
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sched .meta { font-size: 14.7px; color: var(--muted); margin-top: 2px; }
  .sched .bar { flex: 0 0 3px; align-self: stretch; border-radius: 2px;
                background: var(--c, var(--g-etc)); opacity: .75; }

  /* 상태 pill — 색만으로 구분하지 않도록 글자를 함께 둔다 */
  .pill { flex: 0 0 auto; border-radius: 999px; padding: 3px 9px; font-size: 14px; font-weight: 800;
          white-space: nowrap; background: var(--line-soft); color: var(--muted); }
  .pill.live { background: #e4f1e9; color: #1a6b46; }
  .pill.soon { background: #e7eefa; color: #2c568f; }
  .pill.done { background: var(--line-soft); color: var(--muted-2); }

  /* 공지 */
  .notices { display: flex; flex-direction: column; }
  .nt { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 44px;
        padding: 11px 13px; border: 0; border-top: 1px solid var(--line-soft); background: none;
        cursor: pointer; text-align: left; }
  .nt:first-child { border-top: 0; }
  .nt:hover { background: var(--line-soft); }
  .nt .body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nt .lv { flex: 0 0 auto; margin-top: 3px; width: 8px; height: 8px; border-radius: 999px;
            background: var(--c, var(--g-etc)); }
  .nt .body { flex: 1; min-width: 0; border: 0; background: none; padding: 0;
              text-align: left; cursor: pointer; display: block; }
  .nt .side-meta .mute { border: 0; background: none; cursor: pointer; padding: 4px 0;
                         font-size: 14px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
  /* 홈 미리보기는 좁은 화면에서 세 건까지만 */
  @media (max-width: 767px) { #notice-list .nt:nth-child(n+4) { display: none; } }
  .nt .ttl { font-size: 15.5px; font-weight: 700; color: var(--text); }
  .nt.read .ttl { font-weight: 600; color: var(--muted); }
  .nt .desc { font-size: 14.7px; color: var(--muted); margin-top: 2px;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .nt .side-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .nt .when { font-size: 14px; font-weight: 700; color: var(--muted-2); }
  .nt .new { border-radius: 999px; padding: 2px 6px; font-size: 13px; font-weight: 800;
             background: color-mix(in srgb, var(--g-raid) 13%, #fff);
             color: color-mix(in srgb, var(--g-raid) 72%, #0f172a); }
  .lv-tag { border-radius: 4px; padding: 1px 5px; font-size: 13.5px; font-weight: 800; margin-right: 5px;
            background: color-mix(in srgb, var(--c, var(--g-etc)) 14%, #fff);
            color: color-mix(in srgb, var(--c, var(--g-etc)) 72%, #0f172a); }

  /* 지금 확인할 것 — 내용이 적으니 카드 높이를 억지로 맞추지 않는다 */
  .now-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr);
              align-items: start; }
  @media (min-width: 768px) { .now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .now-card { padding: 13px; }
  /* 홈 다음 커뮤니티 데이 띠. 색은 고정값 — iOS 16.2 아래 사파리가 color-mix 줄을 버려 배경이 회색 단추로 떨어졌다 */
  .cd-strip { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0 0 18px; padding: 12px 14px; cursor: pointer;
              font: inherit; color: inherit; text-align: left; border-radius: 14px; box-shadow: var(--shadow);
              background: #fbf0e9; border: 1px solid #ecc6b2; border-left: 5px solid var(--g-community); }
  .cd-strip[hidden] { display: none; }
  .cd-strip img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
  .cd-strip .cd-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cd-strip .cd-top { display: flex; align-items: center; gap: 8px; }
  .cd-strip .cd-top i { flex: 1; min-width: 0; font-style: normal; font-size: 12.5px; font-weight: 800; color: #9a4a22;
                        word-break: keep-all; }
  .cd-strip .cd-mid b { font-size: 18px; font-weight: 900; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-strip .cd-move { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .cd-strip .cd-move em { font-style: normal; font-size: 13px; font-weight: 800; color: #9a4a22; word-break: keep-all; }
  .cd-strip .cd-move .miss { margin-left: 0; }
  .cd-strip .cd-when { flex: 0 0 auto; font-size: 14px; font-weight: 900; padding: 4px 11px; border-radius: 999px;
                       background: #fff; color: #9a4a22; border: 1px solid #ecc6b2; }
  .cd-strip .cd-when.hot { background: var(--g-community); color: #fff; border-color: var(--g-community); }
  /* 홈 맥스 배틀 — 가로 한 줄 칩, 옆으로 민다 */
  .max-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  .max-chips::-webkit-scrollbar { display: none; }
  /* 해외 현지 맥스 배틀 — 국내 줄 아래 따로 */
  .max-far { margin-top: 12px; }
  .max-far-h { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
  .max-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; cursor: pointer;
              font: inherit; color: inherit; text-align: left; background: var(--card); border: 1px solid var(--line);
              border-left: 4px solid var(--g-max); border-radius: 12px; box-shadow: var(--shadow); }
  .max-chip:hover { border-color: #cfcabd; border-left-color: var(--g-max); }
  .max-chip img { width: 40px; height: 40px; border-radius: 50%; background: var(--line-soft); object-fit: contain; }
  .max-chip b { display: block; font-size: 14px; font-weight: 800; }
  .max-chip.picked { border-color: #f3b28f; border-left-color: #e0632d; background: color-mix(in srgb, #e0632d 7%, var(--card)); }
  .mc-pick { display: inline-block; margin-left: 5px; font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 1.5;
             padding: 0 6px; border-radius: 6px; background: #e0632d; color: #fff; vertical-align: 1px; }
  .max-chip i { display: block; font-style: normal; font-size: 12.5px; font-weight: 800;
                color: color-mix(in srgb, var(--g-max) 80%, #0f172a); white-space: nowrap; }
  /* 오늘의 일정 — 한 줄씩, 오래 도는 것은 접어 둔다 */
  .sched .row.one { align-items: center; min-height: 44px; }
  /* 해외 현장 이벤트 한 줄 — 한국에서는 못 가서 줄마다 펼치지 않는다 */
  .sched-abroad { margin: 6px 13px 10px; padding: 8px 11px; border-radius: 10px; background: var(--line-soft);
                  font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--muted); word-break: keep-all; }
  .sched .row.one .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sched-bg { border-top: 1px solid var(--line-soft); }
  .sched-bg:first-child { border-top: 0; }   /* 오늘 줄이 모두 위 "오늘 할 것" 으로 가 이것만 남을 때 — 맨 위 선이 떠 보였다 */
  .sched-bg > summary { list-style: none; cursor: pointer; padding: 11px 13px; font-size: 14px; font-weight: 800; color: var(--accent); }
  .sched-bg > summary::-webkit-details-marker { display: none; }
  .sched-bg > summary::after { content: " ▾"; } .sched-bg[open] > summary::after { content: " ▴"; }
  .sched-bg .row .nm { color: var(--muted); font-weight: 600; }
  /* 놓치면 안 되는 소식 — 홈에서는 설명 줄 없이 */
  #notice-list .nt .desc { display: none; }
  /* 이번 달 한눈에 제목줄 — 폰에서 한 줄(제목 · 달 넘기기 · 전체 일정 · 접기). 해는 숨기고 버튼을 줄인다 */
  @media (max-width: 560px) {
    #home-month .sec-head { flex-wrap: nowrap; gap: 6px; }
    #home-month .sec-head h2 { font-size: 17px; white-space: nowrap; }
    #home-month .monthnav .y { display: none; }
    #home-month .monthnav .label { min-width: 0; padding: 0 4px; font-size: 14.5px; }
    #home-month .monthnav button { width: 26px; height: 26px; }
    #home-month .sec-head .more { padding: 5px 9px; min-height: 30px; font-size: 13px; }
    #home-month .sec-head .more:not(.fold) { margin-left: auto; }
    #home-month .monthnav .label { white-space: nowrap; }
  }
  /* 360px 급 좁은 폰 — 그래도 넘쳐서 "9월" 이 두 줄로 꺾였다 */
  @media (max-width: 380px) {
    #home-month .sec-head { gap: 4px; }
    #home-month .sec-head h2 { font-size: 16px; padding-left: 9px; }
    #home-month .monthnav button { width: 24px; height: 26px; }
    #home-month .sec-head .more { padding: 5px 7px; font-size: 12.5px; }
  }
  /* 홈에서 레이드 보스 칸으로 바로 올 때 위 고정 머리줄에 가리지 않게 */
  #raid-section, #pogo-raids .boss, #pogo-raids .tier-group { scroll-margin-top: 72px; }
  /* 레이드 화면 등급 묶음 — 무리 제목(왼쪽 막대)에 기간을 붙인다 */
  .tier-group { margin: 0 0 18px; }
  .tier-group .tier-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 6px 2px 10px;
                        padding-left: 11px; border-left: 4px solid var(--g-raid); font-size: 18px; font-weight: 800;
                        letter-spacing: -.3px; line-height: 1.3; }
  .tier-group.mega .tier-h { border-left-color: var(--g-max); }
  .tier-group.low .tier-h { border-left-color: var(--g-event); }
  .tier-group .tier-h small { font-size: 13.5px; font-weight: 800; color: var(--muted); }
  .tier-group .tier-h small.hot { color: #b4372b; }
  .now-card h3 { margin: 0 0 9px; font-size: 15.5px; font-weight: 800; }
  .now-card .more { display: inline-block; margin-top: 10px; border: 0; background: none;
                    cursor: pointer; padding: 6px 0; font-size: 15.2px; font-weight: 700;
                    color: var(--accent); }

  /* 이번 달 한눈에 */
  .month-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr);
                align-items: start; }
  @media (min-width: 768px) { .month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* 날짜 고르기 — 큰 달력 대신 한 줄. 화살표나 밀기로 넘긴다 */
  /* 월 이동 — 글자만 있으면 바꿀 수 있는지 알 수가 없다 */
  .monthnav { display: flex; align-items: center; gap: 2px; }
  .monthnav button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
                     background: var(--card); cursor: pointer; color: var(--muted);
                     font-size: 15.5px; line-height: 1; padding: 0 0 2px; }
  .monthnav button:hover { color: var(--text); border-color: #cfcabd; }
  .monthnav .label { min-width: 86px; text-align: center; font-size: 15.5px; font-weight: 800;
                     color: var(--text); }

  .pick-hint { margin: -4px 0 10px; font-size: 14.2px; color: var(--muted-2); line-height: 1.5; }
  .strip-wrap { display: flex; align-items: center; gap: 4px; margin-bottom: 11px; }
  /* 화살표는 겹치지 않게 나란히 둔다 — 첫 칸·마지막 칸을 가리면 고를 수가 없다 */
  .strip-nav { flex: 0 0 auto; width: 26px; height: 60px; border: 1px solid var(--line);
               background: var(--card); border-radius: 9px; cursor: pointer; padding: 0 0 2px;
               font-size: 17px; line-height: 1; color: var(--muted); }
  .strip-nav:hover:not(:disabled) { color: var(--text); border-color: #cfcabd; }
  .strip-nav:disabled { opacity: .3; cursor: default; }
  .datestrip { flex: 1; min-width: 0; display: flex; gap: 5px; overflow-x: auto;
               scrollbar-width: none; scroll-behavior: smooth; padding: 2px 0 4px; }
  .datestrip::-webkit-scrollbar { display: none; }
  .datestrip button { flex: 0 0 auto; width: 46px; min-height: 60px; border-radius: 10px;
                      border: 1px solid var(--line); background: var(--card); cursor: pointer;
                      display: flex; flex-direction: column; align-items: center; justify-content: center;
                      gap: 2px; padding: 6px 0 5px; color: var(--text); }
  .datestrip .dw { font-size: 14px; font-weight: 700; color: var(--muted-2); }
  .datestrip .dd { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
  .datestrip .dot { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); }
  .datestrip .dot.off { background: transparent; }
  .datestrip button.today .dd { color: var(--accent); }
  .datestrip button.on { background: var(--accent); border-color: var(--accent); }
  .datestrip button.on .dd, .datestrip button.on .dw { color: #fff; }
  .datestrip button.on .dot { background: #fff; }
  .datestrip button.sun .dd { color: #e0574f; }
  .datestrip button.sat .dd { color: #3f7fe0; }
  .datestrip button.on.sun .dd, .datestrip button.on.sat .dd { color: #fff; }

  .picked { display: flex; flex-direction: column; gap: 1px; }
  .picked button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px;
                   border: 0; background: none; border-radius: 9px; padding: 7px 8px; cursor: pointer;
                   text-align: left; }
  .picked button:hover { background: var(--line-soft); }
  .picked .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .picked .at { font-size: 14.2px; font-weight: 800; color: var(--muted); }
  .picked .nm { font-size: 15.7px; font-weight: 700; color: var(--text);
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; }

  /* 목록용 썸네일. 이벤트 그림은 가로로 길어서 정사각으로 잘라 쓴다 */
  .thumb-sq { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 9px; object-fit: cover;
              background: var(--line-soft); }
  .thumb-sq.none { display: grid; place-items: center; font-size: 16px; color: var(--muted-2); }
  .month-card { padding: 12px 13px; }
  .month-card h3 { margin: 0 0 9px; font-size: 15.5px; font-weight: 800; }
  .mlist { display: flex; flex-direction: column; gap: 2px; }
  /* 날짜에 요일까지 붙어 "9/5(토)~9/6(일)" 처럼 길어졌다. 글자는 위아래로 쌓고 그림을 왼쪽에 둔다 */
  .mlist button { display: flex; align-items: center; gap: 10px;
                  width: 100%; min-height: 52px; border: 0; background: none; border-radius: 9px;
                  padding: 7px 8px; cursor: pointer; text-align: left; font-size: 15.7px; color: var(--text); }
  .mlist button:hover { background: var(--line-soft); }
  .mlist .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mlist .top { display: flex; align-items: center; gap: 5px; }
  .mlist .when { font-size: 14.2px; font-weight: 800; color: var(--muted); }
  /* 지금 확인할 것 — 이름만 늘어놓으면 뭘 말하는지 안 와닿는다. 생김새와 타입을 같이 보여 준다 */
  .nowrow { display: flex; gap: 10px; align-items: center; padding: 7px 8px; min-height: 48px;
            border-radius: 10px; border-top: 1px solid var(--line-soft);
            width: 100%; border-left: 0; border-right: 0; border-bottom: 0;
            background: none; cursor: pointer; text-align: left; }
  .nowrow:first-child { border-top: 0; }
  .nowrow:hover { background: var(--line-soft); }
  .nowrow img { flex: 0 0 auto; width: 38px; height: 38px; object-fit: contain; padding: 2px;
                background: var(--line-soft); border-radius: 9px; }
  .nowrow .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .nowrow .nm { font-size: 15.7px; font-weight: 700; color: var(--text);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nowrow .line { display: flex; gap: 3px; flex-wrap: wrap; }
  .nowrow .rank { flex: 0 0 auto; border-radius: 999px; padding: 4px 9px; font-size: 14px;
                  font-weight: 800; white-space: nowrap;
                  background: color-mix(in srgb, var(--c, var(--g-etc)) 13%, #fff);
                  color: color-mix(in srgb, var(--c, var(--g-etc)) 72%, #0f172a); }
  .nowrow.dim { opacity: .5; }
  /* 클래스 이름에 .t 를 쓰면 안 된다 — 전역 .t 가 흰 글씨 배지라 글자가 사라진다 */
  .mlist .nm { width: 100%; font-weight: 700; color: var(--text);
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .names { display: flex; flex-wrap: wrap; gap: 5px; }
  .names span { border-radius: 999px; padding: 4px 9px; font-size: 14.7px; font-weight: 700;
                background: var(--line-soft); color: var(--text); }

  /* 알림 설정 — UI만 둔다. 실제 발송은 붙이지 않았다 */
  .prefs { padding: 13px; }
  .prefs .note { font-size: 14.7px; color: var(--muted); margin: 0 0 10px; }
  .pref-row { display: flex; align-items: center; gap: 10px; min-height: 44px;
              border-top: 1px solid var(--line-soft); }
  .pref-row:first-of-type { border-top: 0; }
  .pref-row .lb { flex: 1; font-size: 15.5px; font-weight: 700; }
  .switch { flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; border: 0; cursor: pointer;
            background: #d8d4ca; position: relative; }
  .switch[aria-checked="true"] { background: var(--accent); }
  .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
                   border-radius: 999px; background: #fff; transition: translate .15s; }
  .switch[aria-checked="true"]::after { translate: 18px 0; }
  .radio-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
  .radio-row button { border: 1px solid var(--line); background: var(--card); border-radius: 999px;
                      min-height: 36px; padding: 0 13px; cursor: pointer; font-size: 15.2px;
                      font-weight: 700; color: var(--muted); }
  .radio-row button[aria-checked="true"] { border-color: var(--accent); color: var(--accent);
                                           background: color-mix(in srgb, var(--accent) 9%, #fff); }

  .empty-soft { padding: 16px 13px; font-size: 15.7px; color: var(--muted-2); }

  /* 키보드 이동이 보이게 */
  .side-item:focus-visible, .bottomnav button:focus-visible, .rec:focus-visible,
  .sched .row:focus-visible, .nt:focus-visible, .mini .c:focus-visible, .mlist button:focus-visible,
  .switch:focus-visible, .radio-row button:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  /* 레이드 화면의 두 섹션 — 맥스 배틀과 레이드가 나란히 있어 제목만으로는 구분이 안 됐다.
     왼쪽 막대와 글자 색을 종류 색으로 맞춰 어느 쪽 이야기인지 바로 보이게 한다. */
  /* 제목이 카드 사이에 묻혀 안 보였다 — 종류 색을 옅게 깐 띠로 올리고 글자를 키운다 */
  /* 메뉴마다 맨 위 제목은 전부 이 꼴이다. 색은 그 화면이 든 메뉴 묶음 색(--pane-c, 01-core.js SIDE_GROUPS.tone), 없으면 사이트 검정 */
  :is(h1, h2).mark { --c: var(--pane-c, var(--accent)); color: color-mix(in srgb, var(--c) 78%, #0f172a);
            display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 20px;
            padding: 10px 14px; border-radius: 12px;
            background: color-mix(in srgb, var(--c) 9%, var(--card));
            border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); }
  :is(h1, h2).mark::before { content: ""; flex: 0 0 auto; width: 5px; height: 22px; border-radius: 3px;
                    background: var(--c); }
  :is(h1, h2).mark span { font-size: 14.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
  /* 머리줄에 다른 것(기간·안 읽은 수·버튼)이 같이 서면 띠를 머리줄 전체에 깐다 — 제목만 띠면 반쪽짜리가 된다 */
  .sec-head:has(> :is(h1, h2).mark) { --c: var(--pane-c, var(--accent)); padding: 8px 10px 8px 14px; border-radius: 12px;
      background: color-mix(in srgb, var(--c) 9%, var(--card));
      border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); min-height: 50px; }
  .sec-head:has(> :is(h1, h2).mark.raid) { --c: var(--g-raid); }
  .sec-head:has(> :is(h1, h2).mark.max) { --c: var(--g-max); }
  .sec-head:has(> :is(h1, h2).mark.shadow) { --c: var(--g-shadow); }
  .sec-head > :is(h1, h2).mark { padding: 0; background: none; border: 0; border-radius: 0; }
  :is(h1, h2).mark.max { --c: var(--g-max); color: color-mix(in srgb, var(--g-max) 78%, #0f172a); }
  :is(h1, h2).mark.raid { --c: var(--g-raid); color: color-mix(in srgb, var(--g-raid) 78%, #0f172a); }
  :is(h1, h2).mark.shadow { --c: var(--g-shadow); color: color-mix(in srgb, var(--g-shadow) 78%, #0f172a); }
  /* 등급이 카드마다 다를 때만 이름 옆에 붙인다 — 섀도우 칸, 레이드 예고의 주차 칸.
     색은 중립으로 둔다. 종류 색을 쓰면 메가 카드에 섀도우 색이 붙는다. */
  .btier { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
           font-size: 12.5px; font-weight: 700; vertical-align: 2px;
           background: var(--line-soft); color: var(--muted); }
  @media (min-width: 1024px) { :is(h1, h2).mark { font-size: 21px; } :is(h1, h2).mark::before { height: 24px; } }

  /* 하위 탭 */
  .subbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .subtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button {
    flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--muted);
    border-radius: 999px; padding: 7px 14px; font-size: 15.5px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .subtabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

  /* ── 포켓몬 도감 ──────────────────────────
     천 마리를 늘어놓는 화면이라 한 칸이 작다. 작을수록 "그림 · 이름 · 숫자" 셋만 남기고
     나머지를 덜어내야 훑을 수 있다. 상세로 들어가면 그때 다 편다. */

  /* 세대 칩. 열 개라 좁은 폰에서 두 줄이 되는데, 타입 열아홉 개와 달리 그 정도는 괜찮다 */
  .dex-gens { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
  .dex-gens button { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card);
                     color: var(--muted); border-radius: 999px; padding: 7px 13px;
                     font-family: inherit; font-size: 14.5px; font-weight: 700;
                     white-space: nowrap; cursor: pointer;
                     transition: background .14s, color .14s, border-color .14s; }
  .dex-gens button:hover { border-color: #c9cedb; color: var(--text); }
  .dex-gens button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* 지역 폼 칩 — 세대가 아니라 따로 모아 보는 칸이라 세대 칩들과 한 칸 띄운다 */
  .dex-gens button.regional { margin-left: 8px; }

  .dex-search { display: flex; gap: 8px; margin: 2px 0 10px; }
  /* 검색칸은 세대 칩·고르개·카드와 같은 흰 바탕·회색 테두리라 묻혔다 — 돋보기와 강조색 테두리로 따로 보이게 */
  /* color-mix 는 iOS 16.2 아래 사파리가 몰라 줄째 버려지고 얇은 테두리로 돌아갔다 — 고정 색만 쓴다 */
  .dex-search input, .rs-q { flex: 1; min-width: 0; border: 2px solid var(--accent);
                      background: #fffbe0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 14px 50% / 20px 20px;
                      border-radius: 14px; padding: 12px 14px 12px 44px; font-size: 16px; font-weight: 700; font-family: inherit;
                      color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .10); }
  /* 16px 아래로 내리지 않는다 — 아이폰이 입력칸을 누를 때 화면을 확대해 버린다 */
  .dex-search input::placeholder, .rs-q::placeholder { color: var(--muted); }
  .dex-search input:focus, .rs-q:focus { outline: none; border-color: var(--accent); background-color: #fff;
                            box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }
  /* 고르개 한 줄. 좁으면 둘이 나란히, 마릿수는 아랫줄로 내려간다 */
  .dex-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
  .dex-tools select { border: 1px solid var(--line); background: var(--card); color: var(--text);
                      border-radius: 10px; padding: 9px 11px; font-size: 15px; font-weight: 700;
                      font-family: inherit; cursor: pointer; min-width: 0; }
  .dex-tools select:focus { outline: none; border-color: var(--accent); }
  .dex-count { margin: 0 0 0 auto; font-size: 14px; font-weight: 700; color: var(--muted-2);
               font-variant-numeric: tabular-nums; }

  .dex-grid { display: grid; gap: 10px;
              grid-template-columns: repeat(auto-fill, minmax(min(150px, 47%), 1fr)); }
  .dex-card { display: flex; flex-direction: column; align-items: center; gap: 3px;
              border: 1px solid var(--line); background: var(--card); border-radius: 14px;
              padding: 12px 8px 11px; cursor: pointer; font-family: inherit; text-align: center;
              transition: border-color .14s, transform .14s, box-shadow .14s; }
  .dex-card:hover { border-color: #c9cedb; transform: translateY(-2px);
                    box-shadow: 0 6px 18px rgba(16,24,40,.10); }
  .dex-card:active { transform: none; }
  /* 그림이 제각각 커서 칸을 못 박는다. 안 그러면 줄마다 이름 위치가 어긋난다 */
  .dex-card img { width: 78px; height: 78px; object-fit: contain; }
  .dex-no { font-size: 12.5px; font-weight: 800; color: var(--muted-2);
            font-variant-numeric: tabular-nums; }
  .dex-name { font-size: 15.7px; font-weight: 800; color: var(--text); line-height: 1.25; }
  .dex-types { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
  .dex-cp { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 3px;
            font-variant-numeric: tabular-nums; }
  .dex-more { display: flex; justify-content: center; margin: 14px 0 4px; }

  /* ── 상세 ── */
  .dex-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .dex-back { border: 1px solid var(--line); background: var(--card); color: var(--muted);
              border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 700;
              cursor: pointer; font-family: inherit; }
  .dex-back:hover { border-color: #c9cedb; color: var(--text); }
  .dex-tag { margin-left: auto; background: color-mix(in srgb, var(--accent) 12%, transparent);
             color: var(--accent); border-radius: 999px; padding: 4px 11px;
             font-size: 13px; font-weight: 800; }

  .dex-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
  .dex-hero img { width: 124px; height: 124px; object-fit: contain; flex: 0 0 auto; }
  .dex-hero-t { min-width: 0; }
  .dex-hero-no { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted-2);
                 font-variant-numeric: tabular-nums; }
  .dex-hero-t h2 { margin: 1px 0 0; font-size: 26px; letter-spacing: -.6px; }
  .dex-hero-en { margin: 0 0 7px; font-size: 14.5px; font-weight: 700; color: var(--muted-2); }

  .dex-now { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
  /* 도감 레이드 추천 기술 — 그림 밑 한 칸. 왼쪽 막대는 메뉴 "포켓몬" 묶음 색(황토). 폰에서도 한 줄에 타입·기술·순위 */
  .dex-pick { margin: 0 0 14px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line);
              border-left: 4px solid #a0720a; border-radius: 12px; box-shadow: var(--shadow); }
  .dex-pick-h { margin: 0 0 6px; font-size: 13px; font-weight: 900; color: #7a5608; letter-spacing: .02em; }
  .dex-pick[hidden] { display: none; }
  /* 줄 하나 = 타입 · 기술 조합(왼쪽) + 그 타입 순위 칩(오른쪽). 전용기 줄은 밑에 "전용기 없이" 한 줄 */
  .dex-pick-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .dex-pick-row + .dex-pick-row { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
  .dex-pick-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
  .dex-pick-mv { font-size: 16.5px; font-weight: 900; letter-spacing: -.2px; }
  .dex-pick-mv > span { color: var(--muted-2); font-weight: 700; margin: 0 2px; }
  .dex-pick-ranks { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
  .dex-pick-ranks:empty { display: none; }
  .dex-pick-plain { flex-basis: 100%; order: 3; margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
  .dex-pick-plain b { color: var(--text); font-weight: 800; }
  .dex-pick-more { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 8px; padding-top: 7px;
                   border-top: 1px solid var(--line-soft); }
  .dex-pick-more-h { font-size: 12px; font-weight: 800; color: var(--muted); }
  .dex-pick-more-t { display: inline-flex; align-items: center; gap: 4px; }
  .dex-now button { border: 1px dashed var(--accent); background: none; color: var(--accent);
                    border-radius: 999px; padding: 8px 14px; font-size: 14.5px; font-weight: 700;
                    cursor: pointer; font-family: inherit; }

  /* 넓으면 두 칸, 좁으면 한 칸. 종족값과 CP 는 나란히 봐야 감이 온다 */
  .dex-cards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 720px) { .dex-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .dex-box { border: 1px solid var(--line); background: var(--card); border-radius: 14px;
             padding: 14px 15px; margin-bottom: 10px; }
  .dex-cards .dex-box { margin-bottom: 0; }
  .dex-box h3 { margin: 0 0 9px; font-size: 15px; font-weight: 800; color: var(--muted); }
  .dex-box h3 + h3 { margin-top: 13px; }
  .dex-sub { font-weight: 700; color: var(--muted-2); }
  .dex-none { font-size: 14.5px; font-weight: 700; color: var(--muted-2); }

  /* 종족값 막대. 숫자만 적으면 223 이 큰 건지 작은 건지 모른다 */
  .dex-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  .dex-bar-k { width: 30px; flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--muted); }
  .dex-bar-t { flex: 1; height: 9px; border-radius: 999px; background: var(--line-soft);
               overflow: hidden; }
  .dex-bar-t i { display: block; height: 100%; border-radius: 999px; }
  .dex-bar-t i.atk { background: #e06c5a; }
  .dex-bar-t i.def { background: #5b8bd0; }
  .dex-bar-t i.sta { background: #61ab77; }
  .dex-bar-v { width: 36px; flex: 0 0 auto; text-align: right; font-size: 14.5px; font-weight: 800;
               font-variant-numeric: tabular-nums; }

  .dex-kv { display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
            border-bottom: 1px solid var(--line-soft); font-size: 15px; }
  .dex-kv:last-child { border-bottom: 0; }
  .dex-kv span { color: var(--muted); font-weight: 700; }
  .dex-kv span i { font-style: normal; font-size: 12.5px; color: var(--muted-2); }
  .dex-kv b { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
  .dex-kv.boost b { color: #b4761d; }
  /* 다른 모습 — 이름·타입 한 줄, 메가 기술·종족값 한 줄. 지역 폼은 그 폼 페이지로 */
  .dex-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; margin: 0 0 8px;
              border: 1px solid var(--line); border-radius: 12px; background: #faf9f5; }
  .dex-form:last-child { margin-bottom: 0; }
  /* 원래 모습 ↔ 오리진폼 나란히 */
  .dex-form-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
  .dfc-side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 12px;
              border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .dfc-side img { width: 112px; height: 112px; object-fit: contain; }
  .dfc-n { font-size: 15px; font-weight: 900; margin: 2px 0 4px; }
  .dfc-r { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
  .dfc-r i { font-style: normal; color: var(--muted); font-weight: 700; font-size: 13px; }
  .dfc-r b { font-weight: 900; }
  .dfc-r em { font-style: normal; font-size: 12.5px; font-weight: 900; }
  .dfc-r em.up { color: #1a7a43; } .dfc-r em.down { color: #c0392b; }
  .dfc-cp { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
  .dex-form.go { cursor: pointer; border-width: 2px; }
  .dex-form.go:hover { border-color: var(--accent); }
  .dex-form-n { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .dex-form-n b { font-size: 15px; font-weight: 900; margin-right: 2px; }
  .dex-form-go { font-style: normal; font-weight: 900; color: var(--muted-2); }
  .dex-form-mv { font-size: 13px; font-weight: 700; color: #5b3aa8; background: #ece4fb; border-radius: 8px; padding: 2px 8px; }
  .dex-form-s { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* 모습 줄 — 원래 종과 지역 폼을 그림·이름·타입 카드로 나란히. 지금 보는 것은 진하게, 나머지는 눌러서 간다.
     버튼 하나(원래 모습 ›)와 기술 표 밑 "다른 모습" 칸으로는 못 찾았다 */
  .dex-looks { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
  .dex-look { flex: 1 0 auto; min-width: 140px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
              border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text);
              font: inherit; text-align: left; cursor: pointer; }
  .dex-look img { width: 44px; height: 44px; object-fit: contain; }
  .dex-look-t { display: flex; flex-direction: column; gap: 3px; }
  .dex-look-t b { font-size: 14px; font-weight: 900; }
  .dex-look-t > span { display: flex; gap: 3px; }
  .dex-look.on { border-color: var(--accent); background: #fff6c2; cursor: default; }
  button.dex-look:hover { border-color: var(--accent); }

  /* 약점·저항 칩. 기본 .line 은 gap 3px 이라 여덟 개가 붙어 한 덩어리로 보였다 —
     "물×1.6 전기×1.6" 이 한 낱말처럼 읽힌다. 칩을 키우고 사이를 벌린다 */
  /* 이름 아래 타입 — 간격이 없어 "불꽃고스트" 처럼 붙어 보였다 */
  .dex-hero-t .line { display: flex; flex-wrap: wrap; gap: 6px; }
  .dex-hero-t .line .t { font-size: 14px; padding: 3px 10px; border-radius: 7px; }
  .dex-box .line { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
  .dex-box .line .t { font-size: 14px; padding: 4px 10px; border-radius: 8px; }
  .dex-box .line .t .mult { font-weight: 700; opacity: .88; }
  .dex-weather { margin: 0; font-size: 15.5px; font-weight: 700; }
  .dex-best { background: color-mix(in srgb, var(--accent) 7%, var(--card));
              border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
  .dex-combo { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
  .dex-combo span { color: var(--muted-2); font-weight: 700; margin: 0 2px; }
  .dex-dps { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--accent); }
  .dex-combo.sm { font-size: 15.5px; }
  /* 레거시 배지. 종결기인데 못 배우는 경우가 있어 제목 옆에서 바로 알려 준다 */
  .dex-legacy { margin-left: 6px; font-size: 11.5px; font-weight: 800; color: #8a5a10;
                background: #f6e6c6; border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }
  .dex-legacy-why { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--muted-2);
                    line-height: 1.5; }
  /* 종결기 밑에 붙는 단서. 작게 두되 "왜 다를 수 있는지" 까지 적는다 —
     "확실하지 않습니다" 만 있으면 읽는 사람이 무엇을 조심해야 할지 모른다 */
  /* 모습 바꾸기 조건. 종결기가 전용기인데 "그건 어디서 배우나" 를 모르면 쓸모가 없다 */
  .dex-formmove { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
  .dex-formmove h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--muted-2); }
  .dex-fm { background: var(--card); border: 1px solid var(--line); border-radius: 11px;
            padding: 10px 12px; margin-bottom: 7px; }
  .dex-fm-to { margin: 0 0 3px; font-size: 15px; font-weight: 800; }
  .dex-fm-mv { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
  .dex-fm-mv b { color: var(--text); }
  .dex-fm-cost { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--muted-2); }
  .dex-fm-warn { margin: 0; font-size: 12.8px; line-height: 1.55; font-weight: 700;
                 color: #8a5a10; }
  .dex-maybe { margin: 11px 0 0; font-size: 12.3px; line-height: 1.55; color: var(--muted-2); }
  .dex-common { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
  .dex-common h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--muted-2); }
  .dex-move-n i.lg { color: #8a5a10; background: #f6e6c6; }

  /* 기술표. 폰에서 표로 만들면 가로로 넘쳐서, 줄마다 왼쪽 정렬로 쌓는다 */
  /* 다가오는 핵심 일정 — 날짜순이라 위가 빠르고 아래가 늦다.
     멀수록 흐리게 둬서 어느 것이 코앞인지 바로 걸리게 한다 */
  .mlist .m-far { opacity: .62; }
  .mlist .m-done { opacity: .42; }
  .mlist .m-done .nm { text-decoration: line-through; text-decoration-thickness: 1px; }

  /* 진화 — 앞 단계 → 지금 → 다음 단계 한 줄. 갈래가 여덟인 이브이는 다음 단계 묶음 안에서 줄을 바꾼다 */
  .dex-chain { display: flex; align-items: center; gap: 6px; }
  .dex-arrow { flex: 0 0 auto; font-size: 18px; font-weight: 900; color: var(--muted-2); }
  .dex-evos { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .dex-chain > .dex-evos:last-child { flex: 1 1 0; }
  /* 갈래가 셋 이상(이브이)이면 지금 모습 아래로 내려 폭을 다 쓴다 */
  .dex-chain.many { flex-wrap: wrap; }
  .dex-chain.many > .dex-evos:last-child { flex-basis: 100%; }
  .dex-evo { width: 96px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
             border: 1px solid var(--line); background: var(--bg); border-radius: 12px;
             padding: 9px 7px; font-family: inherit; text-align: center; cursor: pointer;
             transition: border-color .14s, background .14s; }
  button.dex-evo:hover { border-color: var(--accent); background: var(--card); }
  .dex-evo img { width: 48px; height: 48px; object-fit: contain; }
  .dex-evo.now { cursor: default; background: var(--card); border: 2px solid var(--accent); }
  .dex-evo-n { font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.25; }
  .dex-evo-c { font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .dex-evo-w { font-size: 11.8px; font-weight: 700; line-height: 1.45; color: #8a5a10; }

  /* 칸 자리를 하나하나 못 박는다. 자동 배치에 맡겼더니 타입 칩이 한 줄을 다 먹었다 */
  .dex-moves { display: flex; flex-direction: column; }
  .dex-move { display: grid; gap: 2px 9px; padding: 9px 0;
              grid-template-columns: auto minmax(0, 1fr) auto;
              grid-template-areas: "type name dps" ".    meta dps";
              align-items: center; border-bottom: 1px solid var(--line-soft); }
  .dex-move:last-child { border-bottom: 0; }
  .dex-move > .t { grid-area: type; justify-self: start; align-self: center; }
  .dex-move-n { grid-area: name; font-size: 15.5px; font-weight: 800; }
  .dex-move-n i { font-style: normal; margin-left: 5px; font-size: 11.5px; font-weight: 800;
                  color: var(--accent);
                  background: color-mix(in srgb, var(--accent) 12%, transparent);
                  border-radius: 999px; padding: 1px 6px; }
  .dex-move-m { grid-area: meta; font-size: 12.8px; font-weight: 700; color: var(--muted-2);
                font-variant-numeric: tabular-nums; }
  .dex-move-d { grid-area: dps; justify-self: end; align-self: center; text-align: right;
                font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
                line-height: 1.1; }
  .dex-move-d i { display: block; font-style: normal; font-size: 11px; font-weight: 700;
                  color: var(--muted-2); }

  /* 기술 표 읽는 법 — 흐린 글 세 단락이라 안 읽혔다. 카드 안에 말(딱지) · 뜻 두 칸으로 */
  .dex-note { margin: 12px 0 0; padding: 14px; border-radius: 14px; background: var(--card);
              border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); }
  .dex-note-h { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--text); }
  .dex-note dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .dex-note dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline;
                       padding: 8px 10px; border-radius: 10px; background: var(--line-soft); }
  .dex-note dt i { display: inline-block; font-style: normal; font-size: 12.5px; font-weight: 900; padding: 2px 8px;
                   border-radius: 6px; white-space: nowrap; }
  .dex-note .dn-stab { background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); }
  .dex-note .dn-lg { background: #f6e6c6; color: #8a5a10; }
  .dex-note .dn-dps { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
  .dex-note dd { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--text); word-break: keep-all; }
  .dex-note dd b { font-weight: 800; }

  /* 필드 리서치 */
  .tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
  .tasks > * { min-width: 0; }
  .task {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px;
  }
  .task .q { font-size: 15.5px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
  /* 보상 — 그림 + 이름 알약을 옆으로(CP 두 줄 달린 세로 칸이 과제를 길게 늘였다). 누르면 도감 */
  .rs-rewards { display: flex; flex-wrap: wrap; gap: 6px; }
  .rs-mon { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; font: inherit; cursor: pointer;
            border: 1px solid var(--line); border-radius: 999px; background: var(--line-soft); color: var(--text); }
  .rs-mon:hover { border-color: #c9c6bb; }
  .rs-mon img { width: 30px; height: 30px; object-fit: contain; }
  .rs-mon span { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
  .rs-mon.shiny { background: #fdf6e3; border-color: #ecd9a4; }
  .rs-mon .t { font-size: 11px; }

  /* 알 */
  .egg-group { margin-bottom: 18px; }
  .egg-group h3 {
    font-size: 15.5px; margin: 0 0 9px; display: flex; align-items: center; gap: 7px;
  }
  .egg-badge {
    background: var(--accent); color: #fff; border-radius: 999px;
    padding: 3px 11px; font-size: 14.7px; font-weight: 700;
  }
  .egg-badge.sync { background: var(--g-live); }
  .egg-count { color: var(--muted-2); font-size: 14.7px; font-weight: 500; }

  /* 로켓단 */
  .rockets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 12px; }
  .rockets > * { min-width: 0; }
  .rocket {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 13px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
  }
  .rocket .rname { font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; }
  .rocket .rtitle { font-size: 14.2px; color: var(--muted-2); font-weight: 500; }
  .slot { }
  .slot-label { font-size: 14px; color: var(--muted-2); font-weight: 700; margin-bottom: 5px; }
  .poke.catch { background: #eaf7f0; box-shadow: inset 0 0 0 1.5px #7fc9a6; }
  .poke .catch-tag { font-size: 12px; font-weight: 800; color: #0a7a52; margin-top: 3px; letter-spacing: -.2px; }

  /* 로켓단 조직원 — 작은 줄 칸(보스·리더만 큰 칸). 폰은 한 줄에 하나, PC 는 두세 칸.
     잡을 수 있는 포켓몬은 큰 칸(.poke.catch)과 같은 초록 테두리 */
  .rockets.grunts { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 10px; }
  .rocket.grunt { padding: 10px 12px; gap: 6px; }
  .rg-head { display: flex; align-items: center; gap: 6px; }
  .rg-head .rname { font-size: 15px; }
  .rg-slot, .rg-picks { display: flex; align-items: flex-start; gap: 8px; }
  .rg-picks { margin-top: 2px; padding-top: 7px; border-top: 1px dashed var(--line); }
  .rg-no { flex: 0 0 auto; min-width: 20px; height: 20px; margin-top: 4px; display: grid; place-items: center; border-radius: 50%;
           background: var(--line-soft); font-size: 11.5px; font-weight: 900; color: var(--muted); }
  .rg-no.pk { min-width: 0; padding: 0 7px; border-radius: 999px; background: #e4f1e9; color: #155c3b; }
  .rg-mons { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
  .rg-mon { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 2px; border-radius: 999px;
            background: var(--line-soft); font-size: 13px; font-weight: 700; white-space: nowrap; }
  .rg-mon img { width: 26px; height: 26px; object-fit: contain; }
  .rg-mon i { font-style: normal; font-size: 11px; margin-left: 1px; }
  .rg-mon.catch { background: #eaf7f0; box-shadow: inset 0 0 0 1.5px #7fc9a6; color: #0a5c3d; }
  .rg-pk { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; }
  .rg-pk img { width: 30px; height: 30px; image-rendering: pixelated; }
  .rg-pk b { font-weight: 800; white-space: nowrap; }
  .rg-pk em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .rg-pk .legacy { margin-left: 2px; }
  @media (max-width: 560px) { .rg-pk em { display: none; } }   /* 폰은 이름만 — 기술까지 넣으면 추천 셋이 세 줄로 갈렸다 */
  .pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
  .pager button[disabled] { opacity: .4; cursor: default; }
  .pinfo { font-size: 15.7px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .ptotal { color: var(--muted-2); font-weight: 500; }

  /* 접근 코드 화면 */
  #gate {
    position: fixed; inset: 0; z-index: 100; background: rgba(17, 22, 31, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    backdrop-filter: blur(3px);
  }
  #gate[hidden] { display: none; }
  .gate-box {
    background: var(--card); border-radius: 16px; padding: 24px 22px; width: 100%; max-width: 340px;
    box-shadow: 0 12px 40px rgba(16,24,40,.28); display: flex; flex-direction: column; gap: 10px;
  }
  .gate-box h2 { margin: 0; font-size: 18px; letter-spacing: -.4px; }
  .gate-box p { margin: 0; font-size: 15.7px; color: var(--muted); }
  .gate-box input {
    border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
    font-size: 16px; font-family: inherit; background: var(--card); color: var(--text);
  }
  .gate-box button {
    border: 0; background: var(--accent); color: #fff; border-radius: 10px;
    padding: 11px; font-size: 16px; font-weight: 700; cursor: pointer;
  }

  /* ── 주간 요약 ──
     그림을 한 장도 안 쓴다. 위계를 색이 아니라 글자 크기와 굵기로 만든다 —
     색으로만 나누면 흑백으로 캡처하거나 색약인 사람에게는 그냥 평평한 목록이 된다.
     급한 두 묶음(하루만·이번 주에 끝남)에만 왼쪽 선을 둬서 "여기부터 보라"를 만든다. */
  .sm-sec { margin-bottom: 20px; }
  /* 무리 제목 — 레이드 예고의 주차 제목과 같은 꼴(왼쪽 막대) */
  .sm-sec h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; padding-left: 11px;
               border-left: 4px solid var(--accent); line-height: 1.3;
               font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
  .sm-sec .note { padding-left: 15px; }
  .sm-sec h3 b { font-size: 13.5px; font-weight: 800; color: var(--muted-2); }
  .sm-sec .note { margin: 0 0 9px; font-size: 13.5px; color: var(--muted-2); }
  .sm-sec.oneday .sm-list { border-left: 3px solid var(--g-raid); padding-left: 10px; }
  .sm-sec.ends .sm-list { border-left: 3px solid var(--g-spotlight); padding-left: 10px; }
  .sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .sm-row { display: flex; align-items: flex-start; gap: 10px; width: 100%;
            border: 1px solid var(--line); background: var(--card); border-radius: 11px;
            padding: 10px 11px; cursor: pointer; text-align: left; }
  .sm-row:hover { border-color: #cfcabd; }
  /* 날짜·시간은 폭을 고정한다. 줄마다 제목 시작점이 달라지면 훑을 수가 없다 */
  .sm-when { flex: 0 0 74px; display: flex; flex-direction: column; gap: 1px;
             font-variant-numeric: tabular-nums; }
  .sm-when b { font-size: 14.5px; font-weight: 800; color: #1f2937; white-space: nowrap; }
  /* 기간의 끝날짜 줄. 시작날짜보다 한 톤 낮춰 "여기부터 저기까지"가 한눈에 읽히게 */
  .sm-when b.to { font-weight: 700; color: var(--muted); }
  .sm-when i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--sub-ink); }
  .sm-img { flex: 0 0 34px; width: 34px; height: 34px; object-fit: contain; margin-top: 1px; }
  .sm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .sm-title { font-size: 15.5px; font-weight: 800; color: var(--text); line-height: 1.32;
              word-break: keep-all; overflow-wrap: anywhere; }
  .sm-sub { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
  .sm-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
  .sm-mark { font-size: 12px; font-weight: 800; color: #8a5d0c; background: #fdf0d2;
             border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
  /* 레이드 줄 — 이름표 폭을 맞춰 두 줄이 표처럼 읽히게 한다 */
  .sm-raid { display: flex; flex-direction: column; gap: 1px; margin-top: 3px;
             font-size: 13px; color: #475569; line-height: 1.45; }
  .sm-raid .r { display: flex; gap: 6px; }
  .sm-raid .k { flex: 0 0 66px; font-size: 11.5px; font-weight: 800; color: var(--muted-2);
                padding-top: 1px; }
  .sm-sub b { font-weight: 800; color: #475569; }
  .sm-bonus { font-size: 12.5px; color: #0a7a52; font-weight: 700; }
  /* 카드가 넓어지면 한 줄에 들어간다. 줄바꿈을 막아 두 줄로 갈라지지 않게 */
  @media (min-width: 560px) {
    .boss .cprow { flex-wrap: nowrap; }
  }

  @media (min-width: 1024px) {
    .sm-sec h3 { font-size: 19px; }
    .sm-title { font-size: 16.5px; }
    .sm-when { flex-basis: 86px; }
    .sm-when b { font-size: 15.5px; }
    .sm-img { flex-basis: 42px; width: 42px; height: 42px; }
  }

  /* ── 자유게시판 (아직 열지 않았다) ──
     목록은 제목이 먼저 읽히게 둔다. 쓴 사람·시각·조회는 그 아래 작게 — 글을 고르는 기준은
     제목이지 누가 썼는지가 아니다. */
  .bd-list { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: 6px; }
  .bd-row { display: flex; flex-direction: column; gap: 3px; width: 100%;
            border: 1px solid var(--line); background: var(--card); border-radius: 11px;
            padding: 12px 13px; cursor: pointer; text-align: left; }
  .bd-row:hover { border-color: #cfcabd; }
  .bd-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .bd-title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; color: var(--text);
              line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
              overflow: hidden; }
  /* 댓글 수는 "말이 오간 글"이라는 표시라 제목 옆에 붙인다 */
  .bd-cnt { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--accent);
            background: #eaf1ff; border-radius: 999px; padding: 1px 7px; }
  .bd-pin { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #a33a2a;
            background: #fbe9e7; border-radius: 5px; padding: 1px 6px; }
  .bd-meta { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }

  /* 글 하나 — 상세 패널 안에 그린다 */
  .bd-post h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.3px;
                word-break: keep-all; overflow-wrap: anywhere; }
  .bd-post .bd-meta { margin: 0 0 12px; }
  .bd-body { font-size: 15px; line-height: 1.7; color: var(--text);
             white-space: pre-wrap; overflow-wrap: anywhere; }

  /* 댓글 — 본문과 확실히 갈라 놓는다. 이어 붙이면 본문이 길어 보인다 */
  .bd-cmts { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
  .bd-cmts h4 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
  .bd-cmt-list { list-style: none; margin: 0 0 14px; padding: 0;
                 display: flex; flex-direction: column; gap: 10px; }
  .bd-cmt { border: 1px solid var(--line); background: var(--card);
            border-radius: 10px; padding: 9px 11px; }
  .bd-cmt .bd-meta { margin: 0 0 4px; }
  .bd-cmt-body { font-size: 14.5px; line-height: 1.65; color: var(--text);
                 overflow-wrap: anywhere; }
  /* 지운 댓글도 자리는 남긴다 — 아래 답이 무엇에 대한 답인지 알아야 한다 */
  .bd-cmt.gone .bd-cmt-body { color: var(--muted-2); font-style: italic; }
  @media (min-width: 1024px) {
    .bd-title { font-size: 16.5px; }
    .bd-post h3 { font-size: 19.5px; }
  }

  /* ── 주인장 꿀팁 ── */
  /* ── 프로모션 코드 ── */
  .promo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
  /* 지난 코드도 지우지 않는다. "이거 아직 되나" 를 보러 오는 사람이 있다 */
  .promo.off { opacity: .55; }
  .pr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  /* 코드는 손으로 옮겨 적는 값이라 한 글자도 뭉개지면 안 된다 — 고정폭으로 크게 */
  .pr-code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             font-size: 15.5px; font-weight: 700; letter-spacing: .2px; color: var(--text);
             background: var(--line-soft); border-radius: 8px; padding: 7px 10px;
             overflow-wrap: anywhere; }
  .pr-head .ghost { flex: none; font-size: 13.5px; padding: 0 11px; min-height: 34px; }
  .promo h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.45; }
  .pr-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13.5px; }
  .pr-due { font-weight: 700; color: var(--text); }
  /* 하루 이틀 남은 것. 이 화면을 여는 이유가 이것이라 색으로 먼저 잡는다 */
  .pr-due.soon { color: #b42318; }
  /* 등록일은 순서를 읽는 데만 쓴다 — 기한보다 한 톤 뒤로 */
  .pr-seen { font-weight: 500; color: var(--muted); }
  .pr-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .pr-item { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px;
             background: var(--line-soft); border-radius: 8px; padding: 5px 9px; }
  .pr-item img { width: 20px; height: 20px; object-fit: contain; }
  .pr-item b { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
  /* 보상 칩 바로 밑에 링크가 붙어 있으면 칩의 일부처럼 보인다. 띄우고 선을 하나 긋는다.
     링크 모양(알약)은 다른 화면과 같은 a.src 를 그대로 쓴다 — 여기만 다르면 눈에 걸린다 */
  .promo .srcs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
                 gap: 10px; }
  .promo-gone > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted);
                          padding: 10px 2px; }
  .promo-gone[open] > summary { margin-bottom: 8px; }

  .tip { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 15px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
  .tip h3 { margin: 0 0 4px; font-size: 17.5px; font-weight: 800; letter-spacing: -.3px; }
  .tip .tsum { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
  .tip ul { margin: 0; padding-left: 18px; }
  .tip li { font-size: 15px; line-height: 1.65; color: var(--text); margin-bottom: 3px; }
  /* 짝으로 된 내용(이브이 별명 등). 좁으면 두 칸, 넓으면 네 칸으로 접힌다 */
  /* 홈의 주인장 일기 — 두 편을 나란히(폰은 위아래). 사진이 있으면 오른쪽에 작게 */
  /* auto-fill — 한 편뿐이어도 칸이 화면 폭으로 늘어나지 않는다 */
  .diary-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
  /* .card 는 세로 배치라 가로로 덮어쓴다 — 글은 왼쪽, 사진은 오른쪽 */
  /* 한 편뿐이면 줄 전체를 쓴다 — 왼쪽 반만 차고 오른쪽이 비어 보였다 */
  .diary-home .diary-card:only-child { grid-column: 1 / -1; }
  /* 주인장이 잡으려는 포켓몬 한 줄 — 여섯 편 위에 줄 전체로 */
  .catch-pick { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
      border-radius: 14px; background: #fff4ec; border: 1px solid #f3c9ad; color: inherit; text-decoration: none; }
  .catch-pick .cp-k { flex: none; font-size: 13px; font-weight: 800; color: #c2410c; }
  .catch-pick b { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; line-height: 1.4; word-break: keep-all;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .catch-pick i { font-style: normal; font-size: 20px; color: #c2410c; }
  .catch-pick:hover { border-color: #e9a77e; }
  /* 폰은 이름표를 위 줄로 — 옆에 두면 제목 자리가 반밖에 안 남는다 */
  @media (max-width: 600px) { .catch-pick { flex-wrap: wrap; row-gap: 2px; } .catch-pick .cp-k { flex-basis: 100%; } .catch-pick b { flex: 1 1 0; } }
  .diary-home .diary-card { flex-direction: row; align-items: center; gap: 12px; padding: 14px;
      text-decoration: none; color: inherit; text-align: left; }
  .diary-card:hover { border-color: #cfcabd; }
  .diary-card .dc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
  .diary-card b { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .diary-card .dc-sum { font-size: 14px; color: var(--muted); line-height: 1.5;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .diary-card .dc-date { font-size: 12.5px; color: var(--muted-2); }
  /* 홈은 여섯 편이라 한 줄로 — 두 줄이면 폰에서 한 화면을 다 먹는다 */
  #home-diary .diary-card .dc-sum { -webkit-line-clamp: 1; }
  #home-diary .diary-home .diary-card { padding: 11px 14px; }
  /* 폰은 요약을 빼고 제목을 두 줄까지 — 제목이 한 줄에서 잘리고 요약이 자리만 먹어 여섯 편이 700px 이었다 */
  @media (max-width: 560px) {
    #home-diary .diary-card .dc-sum { display: none; }
    #home-diary .diary-card b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                                font-size: 15px; line-height: 1.4; }
    #home-diary .diary-home { gap: 8px; }
  }
  .diary-card img { flex: 0 0 76px; width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
  /* 주인장 글 — 읽는 글이라 줄 간격을 넉넉히, 목록형 꿀팁과 같은 카드 안에 */
  .tip .tarticle { margin-top: 8px; }
  .tip .tarticle p { font-size: 15.5px; line-height: 1.8; margin: 0 0 12px; color: var(--text); }
  .tip .tarticle h4 { font-size: 16.5px; font-weight: 800; margin: 18px 0 8px; }
  /* 주인장 글은 제목 · 한 줄 요약 · 본문이 붙어 보였다 — 요약은 옅은 띠로, 본문은 선을 그어 뗀다 */
  .tip.post { padding: 20px 18px; }
  .post-back { font: inherit; font-size: 14px; font-weight: 800; color: var(--accent); cursor: pointer;
               background: var(--card); border: 1px solid var(--line); border-radius: 999px;
               padding: 7px 14px; margin: 0 0 12px; }
  .tip.post h3 { font-size: 20px; line-height: 1.4; margin: 0 0 10px; padding-right: 52px; }
  .tip.post h1.post-title { font-size: 20px; font-weight: 800; line-height: 1.4; margin: 0 0 10px; padding-right: 52px; }
  a.post-back { display: inline-block; text-decoration: none; }
  /* 글 아래 다른 글 셋 — 진짜 링크라 구글이 글과 글 사이를 따라간다 */
  .post-more { margin: 16px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .post-more h2 { margin: 0; padding: 12px 16px 6px; font-size: 15px; font-weight: 900; }
  .post-more a { display: block; padding: 11px 16px; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--text); }
  .post-more a:hover { background: var(--line-soft); }
  .post-more b { display: block; font-size: 15px; font-weight: 800; line-height: 1.4; }
  .post-more span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.5;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tip.post .tsum { margin: 0; padding: 10px 14px; background: var(--bg); border-left: 3px solid var(--accent);
                    border-radius: 0 8px 8px 0; font-size: 14.5px; line-height: 1.6; color: var(--muted);
                    white-space: pre-line; }
  .tip.post .tarticle { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .tip.post .tarticle > :first-child { margin-top: 0; }
  .tip .tarticle ul { margin: 0 0 12px; }
  /* 꿀팁 목차 — 분류마다 색 칸, 글은 누르는 줄(›). 폰은 한 줄에 하나, PC 는 나란히 */
  .tip-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin: 0 0 20px; }
  .ti-card { border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line);
             border-top: 4px solid var(--tc); box-shadow: var(--shadow); }
  .ti-k { display: flex; align-items: center; gap: 8px; padding: 11px 14px 8px; font-size: 15px; font-weight: 900;
          color: color-mix(in srgb, var(--tc) 80%, var(--text)); }
  .ti-ico { font-size: 17px; }
  .ti-k i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px;
            color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--card)); }
  .ti-go { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line-soft);
           text-decoration: none; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
  .ti-go small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                 margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--muted); }
  .ti-go:hover, .ti-go:active { background: color-mix(in srgb, var(--tc) 8%, var(--card)); }
  .ti-go b { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
             font-size: 17px; color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--card)); }
  /* 목록의 글 칸 — 소제목을 목차로, 오른쪽 아래 "더보기" */
  .tip.post.brief .tsum { margin-bottom: 12px; }
  .ptoc { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 3px; font-size: 14.5px; font-weight: 700; color: var(--text); }
  .ptoc li::marker { color: var(--muted-2); font-weight: 800; }
  .pfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
  .pfoot .tby { margin: 0 !important; font-size: 13px; color: var(--muted-2); }
  .pmore { margin-left: auto; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none;
           color: var(--card); background: var(--accent); }
  .pmore:hover { opacity: .88; }
  .tmore { margin-top: 4px; }
  .tmore > summary { list-style: none; display: flex; justify-content: flex-end; cursor: pointer; }
  .tmore > summary::-webkit-details-marker { display: none; }
  .tmore[open] > summary .pmore { background: var(--line-soft); color: var(--text); }
  .tmore[open] > summary .pmore::after { content: ""; }
  .tmore > ul, .tmore > .tpairs { margin-top: 10px; }
  .tmore .m-c, .tmore[open] > summary .m-o { display: none; }
  .tmore[open] > summary .m-c { display: inline; }
  /* 주인장 글 — 목차와 더보기가 한 덩어리(summary). 펼치면 목차는 접고 본문이 그 아래로 */
  .pbody > summary { display: block; }
  .pbody > summary .pfoot { display: flex; }
  .pbody[open] > summary .ptoc { display: none; }
  .pbody[open] > summary .pmore { background: var(--line-soft); color: var(--text); }
  .pbody .tarticle { margin-top: 14px; }
  .tip .tarticle .tby { font-size: 13px; color: var(--muted-2); margin-top: 14px; }
  .tip h3 .tlink { color: inherit; text-decoration: none; }
  .tip h3 .tlink:hover { text-decoration: underline; }
  /* 글자 꾸밈 — 형광펜·빨강·파랑. 다크 모드에서도 읽히는 진하기로 */
  /* 형광펜 — 중요한 문장에 연한 노랑. 진한 노랑(#fde68a)은 문장째 칠하면 눈이 아팠다 */
  .tip mark, .te-fmt mark { background: #fef3c7; color: inherit; padding: 1px 3px; border-radius: 4px;
                            -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* 글 속 표 — 종족값 비교처럼 숫자를 나란히 볼 때. 폰에서 넘치면 표만 옆으로 민다 */
  .tip .t-table { overflow-x: auto; margin: 4px 0 14px; }
  /* 폭은 내용만큼 — PC 에서 100% 로 두니 칸이 1,100px 로 벌어져 숫자끼리 멀어졌다 */
  .tip .t-table table { border-collapse: collapse; width: auto; max-width: 100%; font-size: 15px; background: var(--card); }
  /* 10/20 글자 긴 표(언제 · 할 것)가 폰에서 오른쪽이 잘렸다. 낱말 단위로 줄을 바꾸고, 숫자는 안 끊는다 */
  .tip .t-table th, .tip .t-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
  .tip .t-table th { background: #f4f1ea; font-weight: 800; }
  .tip .t-table td.nw { overflow-wrap: normal; }
  /* 폰은 칸 안 여백을 줄여 이름이 글자 중간에서 안 끊기게(크레세리/아) */
  @media (max-width: 600px) { .tip .t-table th, .tip .t-table td { padding: 8px 6px; } }
  /* 포켓몬 카드 묶음 {{번호|이름|설명}} — 폰 3칸 */
  .tip .pk-cards { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tip .pk-cards li { background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px 10px; text-align: center; min-width: 0; }
  .tip .pk-cards img { width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: contain; display: block; margin: 0 auto; }
  .tip .pk-cards b { display: block; font-size: 17px; font-weight: 800; margin-top: 2px; word-break: keep-all; }
  .tip .pk-cards.wide { grid-template-columns: repeat(2, 1fr); }
  .tip .pk-cards.wide span { font-size: 15px; text-align: left; padding: 0 4px; }
  .tip .pk-cards span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; word-break: keep-all; }
  /* 글 안 작은 포켓몬 아이콘 {{번호}} */
  .tip .pkm { width: 30px; height: 30px; vertical-align: middle; margin: -6px 0 -4px; image-rendering: auto; }
  .tip .t-table td:first-child { font-weight: 700; text-align: left; }
  .tip .t-red, .te-fmt .t-red { color: #dc2626; font-weight: 700; }
  .tip .t-blue, .te-fmt .t-blue { color: #2563eb; font-weight: 700; }
  .te-fmt { padding: 6px 11px !important; font-size: 13.5px !important; }
  .tip .tfig { margin: 6px 0 16px; }
  /* 세로로 긴 사진이 화면 하나를 다 먹지 않게 폭을 줄여 가운데에 */
  .tip .tfig img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 10px; border: 1px solid var(--line); }
  .tip .tfig figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
  /* 주인장 글쓰기 — 주인장에게만 보인다 */
  .tip { position: relative; }
  .tip-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
  .tip-write, .tip-edit, .tip-editor button { font: inherit; font-weight: 800; cursor: pointer; border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--accent);
      background: color-mix(in srgb, var(--accent) 7%, var(--card)); padding: 7px 14px; font-size: 14px; }
  .tip-edit { position: absolute; top: 12px; right: 12px; padding: 4px 10px; font-size: 13px; }
  .tip-editor { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
  .tip-editor h3 { margin: 0 0 12px; }
  .tip-editor label { display: block; font-size: 14px; font-weight: 800; margin: 0 0 12px; }
  .tip-editor label i { font-style: normal; font-weight: 600; color: var(--muted-2); font-size: 12.5px; margin-left: 4px; }
  .tip-editor input:not([type=file]), .tip-editor textarea, .tip-editor select { display: block; width: 100%; margin-top: 5px; font: inherit;
      font-weight: 500; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
      background: var(--bg); color: var(--text); box-sizing: border-box; }
  .tip-editor textarea { line-height: 1.7; resize: vertical; }
  .tip-editor .te-slug { display: flex; align-items: center; gap: 2px; font-weight: 600; color: var(--muted); font-size: 14px; }
  .tip-editor .te-slug input { margin-top: 0; }
  .te-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 14px; }
  .te-photo { display: inline-block !important; margin: 0 !important; cursor: pointer; padding: 7px 14px; border-radius: 8px;
      border: 1px dashed var(--accent); color: var(--accent); }
  .te-status { font-size: 13px; color: var(--muted); }
  .te-draft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px;
      border-radius: 10px; background: #fff7e0; color: #7a5a00; font-size: 13.5px; font-weight: 700; }
  .te-draft button { padding: 4px 10px; font-size: 13px; background: #fff; border: 1px solid #e3c766; color: #7a5a00; }
  .te-preview-h { font-size: 13px; font-weight: 800; color: var(--muted-2); margin: 4px 0 6px; }
  .te-preview { background: var(--bg); }
  .te-actions { display: flex; gap: 8px; margin-top: 12px; }
  .te-actions .te-save { background: var(--accent); color: #fff; border-color: var(--accent); }
  .te-actions .te-del { margin-left: auto; color: #c0392b; border-color: #e6b0aa; background: transparent; }
  .tpairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
            gap: 6px; margin-top: 12px; }
  /* 한글+영문 이름이 같이 들어가는 줄이 있어 접히게 둔다. 안 접으면 칩 밖으로 넘친다 */
  .tp { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
        background: var(--line-soft); border-radius: 9px; padding: 7px 11px; min-width: 0; }
  .tp b { font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
  /* 영문 별명은 대소문자가 뜻이라 줄이지 않는다 — Rainer 를 rainer 로 쓰면 안 통한다 */
  .tp span { margin-left: auto; font-size: 14.5px; font-weight: 700; color: var(--accent);
             font-variant-numeric: tabular-nums; }
  @media (min-width: 1024px) {
    .tip h3 { font-size: 19px; }
    .tip li, .tp b, .tp span { font-size: 15.5px; }
  }

  /* ── 레이드 예고 ──
     주차 머리 하나에 보스 카드 여러 장. 레이드 화면과 카드는 같고 묶는 단위만 다르다. */
  .soon-week { margin-bottom: 26px; }
  /* 넓은 화면에서 margin-left:auto 로 밀었더니 "33일 뒤" 가 본문 끝까지 날아가
     날짜와 따로 노는 두 덩이가 됐다. 한 덩이로 읽히게 날짜 바로 옆에 둔다. */
  /* 이제 머리줄이 "10월 1주차"로 시작한다. 주차가 주인공이고 날짜는 그 근거라
     색을 나눠 준다 — 둘 다 회색이면 어느 쪽을 먼저 읽어야 할지 모른다 */
  .soon-week h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
                  margin: 0 2px 10px; padding-left: 11px; border-left: 4px solid var(--g-raid);
                  font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.3px; line-height: 1.3; }
  .soon-range { font-size: 14.5px; font-weight: 700; color: var(--muted); }
  .soon-left { font-size: 13.5px; font-weight: 700;
               color: color-mix(in srgb, var(--g-raid) 70%, #0f172a);
               background: color-mix(in srgb, var(--g-raid) 11%, #fff);
               border-radius: 999px; padding: 2px 9px; }
  @media (min-width: 1024px) { .soon-week h3 { font-size: 19px; } }

  /* 광고 자리. 비어 있으면 높이도 0 이라 화면에 자국이 안 남는다.
     폰은 하단 고정 메뉴바 위에 겹치지 않게 아래 여백을 둔다. */
  /* 반응형 단위라 폭을 채우게 둔다. 728px 를 넘기면 PC 에서 띠처럼 길어져 지저분하다 */
  /* 좌우 16px 는 본문과 같은 여백이다. 이게 없으면 폰에서 광고만 화면 끝까지 붙는다 */
  .ad-slot { display: block; max-width: 760px; margin: 22px auto 6px;
             padding: 0 16px; box-sizing: border-box; }
  .ad-slot:empty { display: none; }
  .ad-slot ins { display: block; width: 100%; }
  @media (max-width: 1023px) { .ad-slot { margin-bottom: 14px; } }

  /* 바이럴 지시문 고르개 — 주인장만 본다 */
  .pr-form { display: flex; flex-wrap: wrap; gap: 10px; }
  .pr-form label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px;
                   font-size: 13.5px; font-weight: 700; color: var(--muted); }
  .pr-form select { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
                    font-size: 15.2px; font-family: inherit; min-height: 38px;
                    background: var(--card); color: var(--text); width: 100%;
                    box-sizing: border-box; }
  .pr-form label.pr-check { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 7px;
                            font-weight: 600; }
  .pr-form label.pr-check input { width: 17px; height: 17px; }
  /* 클립보드가 막혔을 때 여기에 펴 준다. 길어서 스크롤되게 둔다 */
  .pr-out { margin: 12px 0 0; padding: 11px 12px; max-height: 260px; overflow: auto;
            background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px;
            font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-all;
            color: #334155; }

  /* ── 설정 ──
     탈퇴는 되돌릴 수 없어서 다른 칸과 눈에 띄게 갈라 둔다. 로그아웃 바로 아래에
     같은 모양으로 두면 손이 먼저 움직인다. */
  .set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
              padding: 15px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
  /* 제목을 누르면 접힌다. 카드가 길어져 아래 칸이 화면 밖으로 밀리는 걸 막는다 */
  .set-card h3 { margin: 0 0 10px; font-size: 17.5px; font-weight: 800; letter-spacing: -.3px;
                 display: flex; align-items: center; gap: 8px; cursor: pointer;
                 user-select: none; }
  .set-card h3::after { content: ""; margin-left: auto; flex: 0 0 auto;
                        width: 9px; height: 9px; border-right: 2.4px solid var(--muted-2);
                        border-bottom: 2.4px solid var(--muted-2); border-radius: 1px;
                        rotate: 45deg; translate: 0 -3px; transition: rotate .15s, translate .15s; }
  .set-card h3:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;
                               border-radius: 4px; }
  /* 접힌 카드 — 제목만 남는다 */
  .set-card.off h3 { margin-bottom: 0; }
  .set-card.off h3::after { rotate: -45deg; translate: 0 2px; }
  .set-card.off .set-body { display: none; }
  .set-card .note { margin: 0 0 6px; font-size: 14.8px; color: var(--muted); line-height: 1.6; }
  .set-me { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .set-me img { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); }
  .set-name { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; }
  .set-list { margin: 8px 0 0; padding-left: 18px; }
  .set-list li { font-size: 14.8px; line-height: 1.65; color: var(--muted); margin-bottom: 4px; }
  .set-acts { display: flex; gap: 8px; margin-top: 14px; }
  /* 단추 셋이 한 줄에 안 들어간다. 좁으면 내려 쌓되 제일 많이 누르는 것을 앞에 둔다 */
  .pc-acts { flex-wrap: wrap; }
  .pc-acts .primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .pc-acts .primary:active { opacity: .85; }

  /* 제목은 손으로 고칠 수 있다. 고르개 밑에 한 줄로 길게 둔다 */
  .pc-title { display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
              font-size: 14px; font-weight: 700; color: var(--muted); }
  /* 닉네임 칸 + 저장 단추를 한 줄로 */
  .nick-row { display: flex; gap: 8px; align-items: stretch; }
  .nick-row input { flex: 1; min-width: 0; }
  .nick-row button { flex: 0 0 auto; min-height: 40px; padding: 0 16px; }

  .pc-title input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
                    font-weight: 600; color: var(--text); padding: 9px 11px;
                    border: 1px solid var(--line); border-radius: 9px; background: var(--card); }

  /* 고를 것들. 한 줄에 제목, 그 아래 날짜와 보스 — 같은 이름 레이드를 가르는 건 아랫줄이다 */
  .pc-head { display: flex; align-items: baseline; justify-content: space-between;
             margin: 12px 0 6px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
  .pc-n { font-weight: 800; color: var(--accent); }
  .pc-pick { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
             padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
             background: var(--card); margin-bottom: 6px; }
  .pc-pick input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
  .pc-pick span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pc-pick b { font-size: 14.8px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
  .pc-pick i { font-style: normal; font-size: 13px; color: var(--muted-2); line-height: 1.4; }
  .pc-pick:has(input:checked) { border-color: var(--accent); background: var(--line-soft); }

  /* 올리기 전에 눈으로 보는 자리. 카드가 세로(4:5)라 폭에 맞춰 줄인다 */
  .pc-box { margin-top: 12px; background: var(--line-soft); border-radius: 12px;
            min-height: 120px; display: flex; align-items: center; justify-content: center;
            overflow: hidden; }
  .pc-box img { width: 100%; max-width: 360px; display: block; border-radius: 12px; }
  .pc-cap { width: 100%; margin-top: 12px; box-sizing: border-box;
            border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
            font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical;
            background: var(--card); color: var(--text); }
  .set-card.danger { border-color: #f0c9c9; }
  .set-card.danger h3 { color: #b42318; }
  /* 크기는 ghost 를 그대로 쓰고 색만 바꾼다. 따로 재면 로그아웃 버튼과 높이가 어긋난다 */
  button.ghost.danger { border-color: #e0a3a3; color: #b42318; font-weight: 700; }
  button.ghost.danger:active { background: #fdecec; }
  @media (min-width: 1024px) {
    .set-card h3 { font-size: 19px; }
    .set-list li, .set-card .note { font-size: 15.3px; }
  }

  /* 패치 노트 — 날짜 머리글 하나에 카드 여러 장이 붙는다 */
  .patch-date { font-weight: 800; font-size: 15.5px; color: var(--muted); margin: 18px 2px 8px; }
  .patch-date:first-child { margin-top: 0; }
  .card.patch { padding: 14px 16px; margin-bottom: 10px; }
  .card.patch h3 { margin: 0 0 8px; font-size: 16px; }
  .card.patch ul { margin: 0; padding-left: 18px; }
  .card.patch li { font-size: 15.7px; line-height: 1.65; color: var(--text); margin-bottom: 3px; }

  .empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px 16px; text-align: center; color: var(--muted); font-size: 15.5px; }
  table.tcg { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  table.tcg th, table.tcg td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 15.5px; }
  table.tcg th { background: var(--line-soft); color: var(--muted); font-weight: 700; font-size: 14.7px; }

  /* 폰에서는 다섯 칸이 안 들어간다. 제목이 눌려 한 글자씩 끊기고 줄이 밀린다.
     표를 버리고 줄마다 카드로 세운다 — 제목을 크게 두고 나머지를 밑에 붙인다. */
  @media (max-width: 700px) {
    table.tcg { border-radius: var(--radius); }
    table.tcg thead { display: none; }
    table.tcg, table.tcg tbody, table.tcg tr { display: block; width: 100%; }
    table.tcg tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
                   padding: 12px 13px; border-bottom: 1px solid var(--line-soft); }
    table.tcg tr:last-child { border-bottom: 0; }
    table.tcg td { display: block; border: 0; padding: 0; font-size: 13.5px; }
    table.tcg td.c-title { flex: 1 0 100%; order: -1; font-size: 16px; font-weight: 800;
                           line-height: 1.4; letter-spacing: -.3px; color: var(--text);
                           overflow-wrap: anywhere; }
    table.tcg td.c-game { font-weight: 800; color: var(--muted); }
    table.tcg td.c-region, table.tcg td.c-date { color: var(--muted-2); }
    table.tcg td.c-game::after, table.tcg td.c-region::after { content: "·"; margin-left: 8px;
                                                              color: var(--line); }
    table.tcg td.c-src { margin-left: auto; }
  }
  /* 지역 표기의 글자 부분. 좁은 화면에서는 아이콘만 남겨 제목에 너비를 넘긴다 */
  .wide { font-style: normal; }
  @media (max-width: 700px) { .wide { display: none; } }

  /* ── 반응형 ────────────────────────────
     기본은 1단(모바일 우선), 넓어지면 캘린더 + 상세 패널 2단으로 벌린다. */
  .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .layout > * { min-width: 0; }
  .col-day .day-panel { margin-top: 22px; }

  /* 태블릿 이상 — 칸을 키우고 카드 2열 */
  @media (min-width: 701px) {
    .cell { min-height: 108px; }
  }

  /* 데스크톱 — 2단. 상세 패널은 스크롤 따라오게 고정 */
  @media (min-width: 1024px) {
    main { padding: 18px 20px 72px; }
    .layout { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.85fr); align-items: start; }
    .col-day .day-panel { margin-top: 0; }
    .col-day {
      position: sticky; top: 108px;
      max-height: calc(100vh - 130px); overflow-y: auto;
      padding-right: 2px;
    }
    .cards { grid-template-columns: minmax(0, 1fr); }
    .cell { min-height: 118px; }
    .bosses { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  }

  /* 데스크톱 글자 크기 — 화면이 넓으면 모바일 기준 크기는 너무 작다 */
  @media (min-width: 1024px) {
    body { font-size: 18px; }
    nav.tabs button { font-size: 22px; padding: 14px 20px; }
    .subtabs button, .linkout { font-size: 17px; padding: 9px 18px; }
    button.ghost, select.ghost { font-size: 17px; min-height: 44px; padding: 0 14px; }
    button.icon { width: 44px; }
    .month .title { font-size: 22px; min-width: 146px; }
    .chip { font-size: 16.5px; padding: 9px 17px; }
    .chip .cnt { font-size: 15px; }
    .controls { padding: 14px 16px; gap: 12px; }
    .month .title { font-size: 21px; min-width: 132px; }
    .month .nav { width: 38px; height: 38px; font-size: 19px; }
    button.today, .result, .result .reset { font-size: 15px; }
    .filter-label { font-size: 14px; width: 30px; }
    .segment button { font-size: 15.5px; padding: 7px 15px; }
    .segment button .cnt { font-size: 14px; }
    .dow div { font-size: 15px; padding: 11px 0; }
    .dnum { font-size: 15px; }
    .ev { font-size: 14px; padding: 3px 7px; border-radius: 6px; }
    .cell { min-height: 128px; }
    section :is(h1, h2) { font-size: 20px; }
    .tier h3 { font-size: 19px; }
    .tier h3::before { height: 18px; }
    section .desc { font-size: 15.5px; }
    .name { font-size: 19px; }
    .orig { font-size: 14.5px; }
    .card .when .wdate { font-size: 16.5px; }
    .card .when .wtag { font-size: 14px; }
    .badge { font-size: 15px; padding: 4px 11px; }
    .remote summary, .remote li { font-size: 15.5px; }
    .bonus span, .warn { font-size: 15px; }
    .poke { padding: 8px 4px 9px; }
    .poke img { width: 52px; height: 52px; }
    .poke .pname { font-size: 14px; }
    .t { font-size: 14px; padding: 2px 7px; }
    .t.mini { font-size: 12.5px; }

    /* 레이드 보스 카드: 한 줄에 5개 (기존 6개) */
    .bosses { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
    .boss { padding: 11px 11px 12px; }
    .boss img { width: 72px; height: 72px; }
    .boss .bname { font-size: 17px; }
    .boss .cprow { font-size: 14.5px; padding: 2px 9px; }
    .boss .cprow.best .v { font-size: 16px; }
    .boss .sub { font-size: 14px; }
    .slot-label { font-size: 14px; }

    /* 추천 포켓몬 — 넓은 화면에서는 한 뼘 더 */
    .counters summary { font-size: 14.5px; padding: 5px 0; }
    .boss .counters summary { padding: 3px 0; }
    .clist li { font-size: 14.5px; gap: 9px; }
    .clist .cimg { flex: 0 0 30px; width: 30px; height: 30px; }
    .clist .cform { font-size: 12.5px; }
    .clist .cmv { font-size: 13px; }
    .counters .csub { font-size: 13px; }

    .task .q { font-size: 16px; }
    .egg-group h3, .egg-badge { font-size: 16px; }
    .egg-count { font-size: 15px; }
    .rocket .rname { font-size: 17.5px; }
    .rocket .rtitle { font-size: 15px; }
    table.tcg th { font-size: 15px; }
    table.tcg td { font-size: 16.5px; padding: 13px; }
    a.src { font-size: 15.5px; }
    .pinfo { font-size: 16px; }
    .star { font-size: 22px; }
    .empty { font-size: 16.5px; }
    .card.patch h3 { font-size: 17px; }
    .card.patch li, .patch-date { font-size: 16px; }
  }

  /* 아주 넓은 화면 — 가운데 정렬 유지하며 여백만 키움 */
  @media (min-width: 1400px) {
    .wrap, main { max-width: 1400px; }
  }

  /* 모바일 — 캘린더 칸은 점으로, 카드/보스는 좁게 */
  @media (max-width: 700px) {
    main { padding: 12px 12px 16px; }   /* 아래 여백은 푸터가 맡는다 */
    .wrap { padding: 0 12px; }

    /* 헤더 — 좁으면 줄바꿈에 맡기지 않고 세 줄로 못박는다.
       맡겨 두면 언어·로그인 묶음이 탭 옆에 붙었다 떨어졌다 하면서 자리가 어긋난다.
       순서도 [언어·로그인] → [탭] 으로 뒤집어, 탭 밑줄이 본문에 바로 닿게 한다. */
    .head-row { align-items: center; row-gap: 0; }
    /* 로그인을 탭과 같은 줄 오른쪽에 둔다.
       전에는 제 줄을 차지하고 탭 위에 있었다 — 위에서부터 [로그인 줄][탭 줄][본문] 로
       가로줄이 셋이라 눈이 어디를 봐야 할지 흩어졌다. 한 줄로 합치면 머리가 한 덩어리다.
       옆에 있던 "프로모 코드"는 더보기로 옮겼다. 그게 있을 때는 셋이 한 줄에 안 들어갔다. */
    .head-row { flex-wrap: nowrap; align-items: center; }
    .head-right { order: 0; flex: 0 0 auto; justify-content: flex-end;
                  margin: 0 0 0 auto; padding: 0; }
    nav.tabs { flex: 0 1 auto; min-width: 0; }
    nav.tabs button { padding: 12px 10px; }

    /* 카테고리 — 옆으로 밀어야 보이면 있는 줄도 모른다. 좁으면 줄을 바꿔 전부 내놓는다. */
    .subbar { flex-wrap: wrap; row-gap: 8px; }
    .subtabs { flex: 1 0 100%; flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
    .chips { margin: 0 -12px 12px; padding: 0 12px 2px; }
    .cards { grid-template-columns: minmax(0, 1fr); }
    .cell { min-height: 62px; padding: 4px 3px 5px; }
    .cell.today .dnum::after { display: none; }   /* 칸이 좁아 배지는 빼고 액센트 선·색으로만 */
    .ev { display: none; }
    .dots { display: flex; }
    /* 달력 칸의 "+2" 만 숨긴다. 통짜 `.more` 로 두었다가 같은 class 를 쓰는
       "모두 읽음"·"전체 보기 →" 버튼이 폰에서 통째로 사라져 있었다 */
    .cell .more { display: none; }
    .thumb { width: 56px; height: 56px; }
    .month .title { min-width: 100px; font-size: 17px; }
    .controls { padding: 11px 12px; }
    .controls-top { flex-wrap: wrap; }
    .result { width: 100%; order: 3; }
    .filter-row { align-items: center; }
    .filter-label { width: 24px; font-size: 12.5px; }
    /* 칩이 종류마다 넷이라 한 줄(276px)에 안 들어가 오른쪽이 잘렸다. 옆으로 밀어야
       보이는 것은 있는 줄도 모른다. 줄을 바꿔 전부 내놓는다.

       그러면서 회색 캡슐 배경을 뺀다. 한 줄짜리 토글이라고 보고 999px 로 둥글려
       놓은 것이라, 두 줄이 되면 위아래가 불룩한 이상한 덩어리가 된다.
       칩마다 테두리를 주고 고른 것만 파랗게 — 모서리는 살짝만 둥글린다. */
    .segment { flex-wrap: wrap; gap: 6px; overflow-x: visible; background: none; padding: 0;
               -webkit-mask-image: none; mask-image: none; }
    .segment button { border: 1px solid var(--line); background: var(--card);
                      border-radius: 9px; padding: 7px 11px; font-size: 13.5px; }
    .segment button.on { border-color: var(--accent); color: var(--accent);
                         background: color-mix(in srgb, var(--accent) 7%, #fff);
                         box-shadow: none; }
    .segment button .cnt { font-size: 12.5px; }
    .bosses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* 작은 폰 — 타입 칩과 포켓몬 칸을 더 촘촘히 */
  @media (max-width: 400px) {
    nav.tabs button { padding: 13px 12px; font-size: 18px; }
    .auth .who { padding: 3px; }
    .auth .who .nick { display: none; }        /* 폭이 모자라면 사진만 남긴다 */
    .pokes { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
    .poke img { width: 38px; height: 38px; }
    .bosses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .boss img { width: 56px; height: 56px; }
  }

  /* 문답 글(숫자로 보는 포켓몬고) — 질문은 굵은 한 줄, 답은 연한 상자. 답 밑 문단·목록도 상자 안에 든다 */
  .tarticle .qa-q, .tarticle .qa-a { display: flex; gap: 10px; align-items: flex-start; }
  .tarticle .qa-q { margin: 20px 0 8px; font-size: 16px; font-weight: 800; line-height: 1.6; color: var(--text); }
  .tarticle .qa-a { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #eef3fb; border: 1px solid #d5e0f2; }
  .tarticle .qa-a > div { min-width: 0; flex: 1; }
  .tarticle .qa-a > div > :last-child { margin-bottom: 0; }
  .tarticle .qa-k { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
                    font-size: 14px; font-weight: 900; line-height: 1; }
  .tarticle .qa-q .qa-k { background: #3c6cc9; color: #fff; }
  .tarticle .qa-a .qa-k { background: #fff; color: #3c6cc9; border: 1px solid #c3d3ee; }
  /* 주인장이 직접 찾아본 데이터("> " 줄) — 출처. 본문과 구분되게 점선 테두리 */
  .tarticle .t-note { margin: 18px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed #b9b29a;
                      background: #f6f3e8; }
  .tarticle .t-note-h { font-size: 13.5px; font-weight: 800; color: #6b5d2e; margin: 0 0 6px; }
  .tarticle .t-note ul { margin: 0; padding-left: 18px; }
  .tarticle .t-note li { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
  .tarticle .t-note-h span { margin-left: 8px; font-weight: 700; color: var(--muted); }

/* ── 해외 이벤트 ── 위 로케이션 배경 카드(그림 + 장소·기간·얻는 법), 아래 해외 현장 이벤트 줄(국기 · 이름 · 장소 · 시각) */
.ab-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 10px; font-size: 17px; font-weight: 900; }
.ab-h i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
/* 카드 한 장이 화면 너비 — 박물관마다 다른 배경 스크린샷을 여러 장 나란히 보려면 넓어야 한다 */
.ab-bgs { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ab-bgs .ab-bg { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.ab-bgs .ab-bg + .ab-bg { border-top: 1px solid var(--line-soft); }
.ab-bghead { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
             font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; }
.ab-bghead:hover { background: var(--line-soft); }
.ab-bghead[aria-expanded="true"] .ab-go { transform: rotate(180deg); }
.ab-thumb { flex: 0 0 auto; width: 72px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--line-soft); }
.ab-bg .ab-body { padding: 4px 16px 16px; }
.ab-bg .ab-img { border-radius: 12px; margin-bottom: 10px; }
.ab-bg { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.ab-img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; object-fit: cover; background: var(--line-soft); }
.ab-body { padding: 14px 16px 16px; }
@media (min-width: 900px) { .ab-body { padding: 18px 22px 20px; } .ab-body h4 { font-size: 20px; } }
.ab-body h4 { margin: 0 0 6px; font-size: 17px; font-weight: 900; line-height: 1.35; }
.ab-body p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.ab-place span { color: var(--muted); font-weight: 600; }
.ab-how b { display: inline-block; margin-right: 6px; font-size: 12.5px; color: #8a5f10; }
.ab-src { font-size: 13px; font-weight: 700; color: var(--muted); }
.ab-when, .ab-time { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ab-when .wdate, .ab-time .wdate { font-weight: 700; }
.ab-time .wkst { font-size: 11px; font-weight: 800; color: var(--muted-2); }
.ab-when .wtag, .ab-time .wtag { font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px; border: 1px solid transparent; }
.ab-when .wtag em, .ab-time .wtag em { font-style: normal; font-weight: 700; opacity: .75; }
.ab-when .wtag.live, .ab-time .wtag.live { background: #e7f6ef; color: #0a7a52; border-color: #c2e7d6; }
.ab-when .wtag.soon, .ab-time .wtag.soon { background: #eaf1ff; color: #1d4ed8; border-color: #cfdcfb; }
.ab-when .wtag.done, .ab-time .wtag.done { background: var(--line-soft); color: var(--muted-2); border-color: #e0e4ec; }
.ab-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ab-ev { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
         font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; }
.ab-item + .ab-item { border-top: 1px solid var(--line-soft); }
.ab-rmons { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.ab-rtag { font-style: normal; font-size: 12.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #eaf1ff; color: #1d4ed8; }
.ab-rmon { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; }
.ab-rmon img { width: 40px; height: 40px; object-fit: contain; }
.ab-rmon i { font-style: normal; }
.ab-ev[aria-expanded="true"] .ab-go { transform: rotate(180deg); }
.ab-notice { padding: 2px 16px 16px; font-size: 14.5px; line-height: 1.65; }
.ab-notice h5 { margin: 14px 0 6px; font-size: 15px; font-weight: 900; }
.ab-notice p { margin: 0 0 8px; }
.ab-notice ul { margin: 0 0 8px; padding-left: 20px; }
.ab-banner { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin: 4px 0 10px; }
.ab-remote b { display: inline-block; font-size: 13px; padding: 2px 10px; border-radius: 999px; background: #eaf1ff; color: #1d4ed8; }
.ab-wait { color: var(--muted-2); }
.ab-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 12px; }
.ab-shot { position: relative; margin: 0; }
.ab-shot img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--line-soft); }
.ab-shot figcaption { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ab-shot-del { position: absolute; top: 6px; right: 6px; font: inherit; font-size: 12px; font-weight: 800; padding: 3px 8px;
               border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.ab-shot-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px;
                 border: 1px dashed #d9c38a; border-radius: 10px; }
.ab-shot-admin .ab-cap { flex: 1 1 200px; font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ab-shotmsg { font-size: 13px; color: var(--muted); }
.lb-auto { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.lb-auto p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; }
.lb-auto input { flex: 1 1 260px; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
#lb-automsg { display: block; margin-top: 6px; font-weight: 700; color: var(--muted); }
#lb-new { margin-left: 8px; font-size: 12.5px; color: #fff; background: #d9534f; border-radius: 999px; padding: 1px 8px; }
#lb-new:empty { display: none; }
.lb-found { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #fffbea; border: 1px solid #f0e2a8; font-size: 13px; line-height: 1.6; }
.lb-found b { display: block; margin-bottom: 4px; }
.lb-found a { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent); }
.lb-st { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.lb-st.DRAFT { background: #fff1d6; color: #9a5b00; }
.lb-st.LIVE { background: #e7f6ef; color: #0a7a52; }
.lb-st.HIDDEN { background: var(--line-soft); color: var(--muted-2); }
.ab-shot-tip { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.ab-shot-tip a { color: var(--accent); font-weight: 700; }
.ab-notice .ab-sub { margin: 10px 0 5px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
.ab-mons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ab-mon { display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
          background: var(--line-soft); }
.ab-mon b { color: #c58a00; font-size: 12px; }
.ab-mon i { font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); }
.ab-detail { margin-top: 6px; font-size: 14px; }
.ab-ev:hover, .ab-ev:active { background: var(--line-soft); }
.ab-flag { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.ab-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; }
.ab-main b { font-size: 15px; line-height: 1.4; word-break: keep-all; }
.ab-loc { color: var(--muted); font-weight: 600; }
.ab-bgtag { font-style: normal; font-size: 12px; font-weight: 800; color: #7456c4; background: #f1ecff; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.ab-go { margin-left: auto; flex: 0 0 auto; font-size: 20px; color: var(--muted-2); }

  /* ── 폰 브라우저에서 누르기 (2026-10-19 점검) ──────────────────────────────
     손가락으로 누르는 기기에서만 — 44px 안 되는 단추가 화면마다 수십 개였다
     (상성표·순위 타입 칩 26px, 달력 ☆ 18px, 공지 "오늘은 그만" 26px …). 세로만 키워서 줄 수는 그대로 둔다 */
  @media (pointer: coarse) {
    button, a, select, summary { touch-action: manipulation; }   /* 연타해도 화면이 확대되지 않게 */
    button.t, #pogo-ranks .rank-seg button, .rank-mega button, .dex-rank, .dex-gens button,
    .nt .side-meta .mute, a.src, .guide-btn, .foot .links a {
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
    .star { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    #home-month .monthnav button { width: 44px; height: 44px; }
    .strip-nav { width: 40px; }
    button.ghost { min-height: 44px; }
    .foot .links { gap: 4px 16px; }
    .subtabs button, button.more, .rank-img, .rank-more { min-height: 44px; }
    .counters > summary, .sched-bg > summary { min-height: 44px; display: flex; align-items: center; }
    .sec-head .more, #home-month .sec-head .more, .nt .body, .month .nav, .controls-top .today,
    .segment button { min-height: 44px; }
    .weekly > summary, .matchup > summary, .promo-gone > summary { min-height: 44px; display: flex; align-items: center; }
    .dex-tools select, .rs-chip, .rs-mon, .pr-head button.ghost { min-height: 44px; }
  }
  /* iOS 는 16px 보다 작은 선택칸을 누르면 화면을 확대한다(도감 타입·정렬 15px 이었다) */
  .dex-tools select { font-size: 16px; }
  /* 시트 높이 — iOS 의 vh 는 주소창이 접힌 높이라 주소창이 보일 때 시트가 화면을 넘었다 */
  .sheet .panel { max-height: 78vh; max-height: 78dvh; }
  /* 레이드 등급 칩이 폰에서 세 줄로 꺾이는데 위에 붙어 따라다녀 화면 1/4 을 먹었다.
     칩은 다 보이게 그대로 두고, 따라다니는 것만 끈다 */
  @media (max-width: 640px) { .subtabs { position: static; } }
  /* PC 왼쪽 메뉴 — 높이 900px 화면에서 "주인장 일기"가 반 잘리고 공지·프로모션·설정이 안 보였다.
     낮은 화면에서만 칸과 묶음 간격을 줄여 한 화면에 다 넣는다(마우스라 32px 로 충분) */
  @media (min-width: 1024px) and (max-height: 1000px) {
    .side-item { min-height: 32px; }
    .side-group + .side-group, .side-group + .side-group:not(:has(h4)) { margin-top: 9px; }
    .side-group h4 { margin-bottom: 2px; }
  }
  /* 레이드 등급에 보스가 한 마리면 줄을 다 쓴다 — 폰에서 반쪽 카드 옆이 비고 포획 CP 가 두 줄로 꺾였다 */
  @media (max-width: 640px) { .bosses:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } }
  /* 폰 홈 — 가로로 밀어야 보이던 두 줄을 펼친다(2026-10-19 점검: 맥스 배틀 셋째 칩이 11px 만 보여
     더 있는 줄 몰랐고, 이번 주 추천은 일곱 장 중 두 장만 보였다). 한눈에 보이는 게 먼저다 */
  @media (max-width: 559px) {
    .recs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible;
            scroll-snap-type: none; margin: 0; padding: 0; }
    .recs > .rec { flex: none; display: grid; grid-template-columns: 72px minmax(0, 1fr);
                   column-gap: 12px; row-gap: 2px; align-items: start; text-align: left; padding: 10px 12px; }
    .rec .thumb-box { grid-row: 1 / span 5; width: 72px; height: 72px; }
    .rec .hot-slot { min-height: 0; }
    .rec .hot-slot:empty { display: none; }
    .rec .nm { font-size: 15.5px; }
    .recs-nav { display: none; }
    .max-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    /* 해외 칩은 도시·기간·원격 줄이 길어 두 칸에 넣으면 날짜가 잘렸다 — 한 줄에 하나 */
    .max-far .max-chips { grid-template-columns: minmax(0, 1fr); }
    .max-chips > .max-chip { flex: none; min-width: 0; }
  }
  /* 달 넘기기 단추를 44px 로 키우니 "이번 달 한눈에" 머리줄이 폰 폭을 15px 넘었다 — 넘치면 둘째 줄로 */
  @media (max-width: 559px) { #home-month .sec-head { flex-wrap: wrap; row-gap: 6px; } }
  /* 추천 포켓몬 위 셋 — 접힌 칸과 같은 자리에 펼쳐 둔다 */
  .counters-top { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); text-align: left; }
  .counters-top .csub { margin-top: 0; }
  .counters-top + .counters { border-top: 0; margin-top: 2px; padding-top: 0; }
  .weekly summary .wk-today { margin-left: 8px; font-size: 14px; font-weight: 700; color: var(--muted);
                              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* 달력 점 색 범례 */
  .cal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 2px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
  .cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .cal-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  /* 달력 카드 출처 — 본문 단추처럼 큰 두 개였다. 글자 링크 한 줄로(카드 높이를 줄여 하루 목록이 짧아진다) */
  .card .srcs.mini { align-items: center; gap: 2px 12px; font-size: 13.5px; color: var(--muted-2); font-weight: 700; }
  .card .srcs.mini a.src { border: 0; background: none; padding: 0; font-size: 13.5px; color: var(--muted);
                           text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
  /* 고른 칩은 어느 화면이든 같은 꼴 — 검은 알약(레이드·로켓단 탭·현장 이벤트와 같게).
     달력 필터만 흰 알약이라 화면마다 "지금 고른 것" 표시가 달랐다(2026-10-19 점검). 타입 순위 파랑은 따로 고른 색이라 둔다 */
  .segment button.on { background: var(--text); color: #fff; box-shadow: none; }
  .segment button.on .cnt { background: rgba(255,255,255,.18); color: #fff; }
  /* 한국에선 안 나오는 맥스 배틀 보스(엠라이트·아그놈) — 초대받아 원격으로만 */
  .max-chip .mc-far { font-style: normal; margin-left: 5px; font-size: 12px; font-weight: 800; padding: 1px 6px;
                      border-radius: 6px; background: #eef0f3; color: #5b6472; vertical-align: 1px; }
  /* 해외 현지 맥스 배틀 — 원격 되나 */
  .max-chip i.mc-remote { font-size: 12px; color: #2f7a4f; }
  .max-chip i.mc-remote.no { color: #b4432c; }
  /* 내 포켓몬 */
  .mine-form { padding: 13px 14px; margin-bottom: 12px; }
  .mine-form form { display: flex; flex-direction: column; gap: 9px; }
  .mine-h { font-size: 15.5px; font-weight: 800; }
  .mine-form input, .mine-form select {
    border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; font-size: 15.2px;
    font-family: inherit; background: var(--card); color: var(--text); min-height: 38px; min-width: 0; }
  .mine-kind { display: flex; gap: 6px; }
  .mine-kind label { flex: 1; }
  .mine-kind input { position: absolute; opacity: 0; pointer-events: none; }
  .mine-kind span { display: block; text-align: center; padding: 7px 0; border: 1px solid var(--line); border-radius: 999px;
                    font-size: 13.5px; font-weight: 800; color: var(--muted); cursor: pointer; }
  .mine-kind input:checked + span { background: var(--text); border-color: var(--text); color: var(--card); }
  .mine-nums { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; }
  .mine-nums label, .mine-moves label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .mine-nums label > span, .mine-moves label > span { font-size: 12px; font-weight: 800; color: var(--muted); }
  .mine-moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  @media (max-width: 560px) { .mine-moves { grid-template-columns: 1fr; } }
  .mine-lv { font-size: 14px; font-weight: 800; color: var(--muted); }
  .mine-lv.ok { color: #1d7f63; }
  .mine-lv.bad { color: #b42318; }
  .mine-act { display: flex; gap: 6px; }
  .mine-act .primary { flex: 1; min-height: 48px; font-size: 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff;
                       font-size: 15px; font-weight: 800; cursor: pointer; }
  .mine-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
  .mine-bar input { flex: 1; min-width: 0; }
  .mine-bar input, .mine-bar select { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font-size: 14.5px;
                                      font-family: inherit; background: var(--card); color: var(--text); min-height: 36px; }
  .mine-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
  @media (max-width: 420px) { .mine-list { grid-template-columns: 1fr; } }
  .mine-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--card);
               border: 1px solid var(--line); border-radius: 12px; }
  .mine-card.shadow { border-color: #c9b6e8; background: #faf7fe; }
  .mine-card > img, .mine-noimg { width: 56px; height: 56px; object-fit: contain; flex: none; }
  .mine-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mine-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; }
  .mine-kind-tag { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 6px; }
  .mine-kind-tag.shadow { background: #ece4fb; color: #5b3aa8; }
  .mine-kind-tag.purified { background: #e4f1f8; color: #1f6a8f; }
  .mine-st { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; font-weight: 700; color: var(--muted);
             font-variant-numeric: tabular-nums; }
  .mine-st b { color: var(--text); font-size: 14.5px; }
  .mine-st small { font-size: 11.5px; }
  .mine-st .hundo { color: #a0720a; }
  .mine-mvs { display: flex; flex-wrap: wrap; gap: 4px; }
  .mine-mv { font-size: 12px; font-weight: 800; color: #fff; padding: 1px 7px; border-radius: 6px; }
  .mine-btns { display: flex; flex-direction: column; gap: 4px; flex: none; }
  .mine-btns .ghost { min-height: 36px; padding: 0 11px; font-size: 13px; }
  /* 이름 찾기 — 앞글자만 쳐도 고른다 */
  .mine-name-wrap { position: relative; }
  .mine-form .mine-name { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; font-weight: 700; }
  .mine-form .mine-cp input { min-height: 44px; font-size: 17px; font-weight: 800; }
  .mine-kind span { min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .mine-sugg { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
               background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
               max-height: 360px; overflow-y: auto; }
  .mine-sugg button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 8px; border: 0;
                      border-radius: 9px; background: transparent; font: inherit; font-size: 15px; text-align: left; cursor: pointer; color: var(--text); }
  .mine-sugg button:hover, .mine-sugg li:first-child button { background: var(--line-soft); }
  .mine-sugg img { width: 36px; height: 36px; object-fit: contain; }
  .mine-sugg b { font-weight: 800; }
  .mine-sugg .none { padding: 10px; font-size: 14px; color: var(--muted); }
  .mine-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mine-last { font-size: 13px; font-weight: 800; color: #1d7f63; }
  .mine-btns .del { color: #b42318; }
  /* 레이드 계산기 */
  .calc-btn { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
              padding: 8px 0; border-radius: 10px; border: 1px solid #e8b9ae;
              background: #fbf1ee; color: #9e4a3b; }   /* 레이드 색(--g-raid) 옅게 — color-mix 는 옛 아이폰 사파리가 버린다 */
  .calc { padding: 4px 2px 12px; }
  .calc-h { font-size: 19px; font-weight: 800; margin: 0 0 10px; display: flex; flex-direction: column; gap: 3px; }
  .calc-h small { font-size: 13px; font-weight: 700; color: var(--muted); }
  .calc-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
  .calc-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .calc-seg button { font: inherit; font-size: 13.5px; font-weight: 800; padding: 7px 12px; border: 0; background: var(--card);
                     color: var(--muted); cursor: pointer; }
  .calc-seg button + button { border-left: 1px solid var(--line); }
  .calc-seg button.on { background: var(--accent); color: #fff; }
  /* 결론 — 맨 위에 크게. 내 포켓몬이 있으면 둘을 나란히(내 쪽이 진하게) */
  .calc-verdicts { display: grid; gap: 8px; margin: 0 0 12px; }
  .calc-verdicts.two { grid-template-columns: 1.25fr 1fr; }
  .calc-verdict { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px;
                  background: #e4f1e9; color: #155c3b; font-size: 13px; font-weight: 800; }
  .calc-verdict b { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; }
  .calc-verdict small { font-size: 13px; font-weight: 700; }
  .calc-verdict.no { background: #fdeee6; color: #8a3b14; }
  .calc-verdict.me { background: #1d4ed8; color: #fff; }
  .calc-verdict.me.no { background: #8a3b14; color: #fff; }
  .calc-rows { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .calc-rows li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
  .calc-rows .n { flex: 0 0 34px; }
  .calc-rows .bar { position: relative; flex: 1; height: 12px; border-radius: 6px; background: var(--line-soft); }
  .calc-rows .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #3fa169; }
  .calc-rows li.over .bar i { background: #e08a5d; }
  .calc-rows .bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
  .calc-rows .sec { flex: 0 0 74px; text-align: right; font-variant-numeric: tabular-nums; }
  .calc-rows li.over .sec { color: #b4372b; }
  .calc-sub { font-size: 15px; font-weight: 800; margin: 0 0 8px; } .calc-sub small { font-size: 12.5px; color: var(--muted); margin-left: 4px; }
  .calc-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
  .calc-team li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .calc-team img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
  .calc-team span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .calc-team b { font-size: 14px; } .calc-team i { font-style: normal; font-size: 12px; color: var(--muted); }
  .calc-team em { font-style: normal; font-size: 15px; font-weight: 900; color: var(--text); display: flex; flex-direction: column;
                  align-items: flex-end; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .calc-team em small { font-size: 10.5px; font-weight: 800; color: var(--muted-2); }
  .calc-team li.mega { border-color: #e7b6d6; background: #fdf4fa; }
  .calc-team .calc-mg { color: #b0306f; }
  .calc-team li.empty-slot { justify-content: center; border-style: dashed; background: transparent; color: var(--muted-2);
                             font-size: 13px; font-weight: 800; min-height: 44px; }
  .calc-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; }
  /* 내 포켓몬 ↔ 추천 여섯 나란히 */
  .calc-verdict.sub { background: var(--line-soft); color: var(--muted); }
  .calc-verdict.sub b { font-size: 24px; color: var(--text); }
  .calc-verdict.sub.no b { color: #8a3b14; }
  .calc-opt-l { align-self: center; font-size: 12.5px; font-weight: 800; color: var(--muted); }
  .calc-tbl { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
  .calc-tbl th, .calc-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; }
  .calc-tbl th:first-child { text-align: left; width: 56px; }
  .calc-tbl thead th { font-size: 12.5px; font-weight: 800; color: var(--muted); border-bottom: 1px solid var(--line); }
  .calc-tbl thead th.me { color: #1d4ed8; }
  .calc-tbl td { font-weight: 800; }
  .calc-tbl td.ok { color: #155c3b; }
  .calc-tbl td.over { color: #b4372b; font-weight: 700; }
  .calc-teams { display: grid; gap: 16px; }   /* 상세 칸은 PC 에서도 좁다 — 두 팀은 위아래, 나란히는 위 시간 표가 맡는다 */
  .calc-sub.me { color: #1d4ed8; }
  .calc-team small { font-size: 11.5px; font-weight: 700; color: var(--muted-2); }
  .calc-team .calc-sh { color: #6d3fb5; }
  .calc-mine-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 13px;
                   border-radius: 12px; border: 1px dashed #b9c8ea; background: #f3f6fd; font-size: 13.5px; line-height: 1.5; }
  .calc-mine-cta button { font: inherit; font-size: 14px; font-weight: 800; min-height: 44px; padding: 8px 14px; border-radius: 10px;
                          border: 0; background: #1d4ed8; color: #fff; cursor: pointer; }
  /* 계산기 — 맨 위 한 문장이 결론. 막대의 세로선이 제한시간 */
  .calc-head h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.4px; }
  .calc-head p { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 4px 0 12px; }
  .calc-head p span { font-size: 13.5px; font-weight: 700; color: var(--muted); }
  .calc-hero { padding: 14px 14px 13px; margin: 0 0 14px; border-radius: 16px; background: #e8f3ec; color: #14532d; }
  .calc-hero.me { background: #1d4ed8; color: #fff; }
  .calc-hero.no { background: #fbe9df; color: #7c2d12; }
  .calc-hero.me.no { background: #7c2d12; color: #fff; }
  /* 투닥투닥 — 내 쪽이 달려들고 보스가 움찔, 체력 줄은 걸리는 시간(--pace)에 맞춰 준다 */
  .calc-fight { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 80px;
                margin: -4px 0 10px; padding: 0 6px; }
  /* 발밑 그림자 — 땅 띠를 깔았더니 회색 상자로 보였다 */
  .cf-me::after, .cf-boss::after { content: ''; position: absolute; z-index: -1; bottom: 0; left: 10%; right: 10%; height: 10px;
                                   border-radius: 50%; background: rgba(0,0,0,.16); }
  .cf-me, .cf-boss { z-index: 0; }
  .cf-me { position: relative; display: flex; align-items: flex-end; height: 100%; animation: cf-lunge 1.1s ease-in-out infinite; }
  /* 그림이 왼쪽을 보고 있어 뒤집는다. transform 으로 뒤집으면 깡총 애니메이션(transform)이 덮어써서 뒤돌아 섰다 */
  .cf-me img { width: 64px; height: 64px; object-fit: contain; scale: -1 1; margin-bottom: 4px; image-rendering: auto; }
  .cf-me .cf-a1, .cf-me .cf-a2 { width: 44px; height: 44px; margin-left: -12px; opacity: .9; animation: cf-hop .55s ease-in-out infinite alternate; }
  .cf-me .cf-a2 { animation-delay: .25s; }
  .cf-me .cf-a0 { order: 3; position: relative; z-index: 1; }
  .cf-boss { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end;
             animation: cf-hit 1.1s ease-in-out infinite; }
  .cf-boss img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 2px; }
  .cf-hp { position: absolute; top: 4px; left: 50%; width: 64px; height: 7px; margin-left: -32px; border-radius: 99px;
           background: rgba(0,0,0,.18); overflow: hidden; }
  .cf-hp i { display: block; height: 100%; border-radius: 99px; background: #22c55e; transform-origin: left;
             animation: cf-drain var(--pace, 5s) linear infinite; }
  .cf-pow { position: absolute; left: 50%; top: 22px; margin-left: -18px; font-size: 18px; font-weight: 900; color: #f59e0b;
            text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255,255,255,.8); opacity: 0; animation: cf-pow 1.1s ease-out infinite; }
  @keyframes cf-lunge { 0%, 45% { transform: translateX(0); } 58% { transform: translateX(34%); } 70%, 100% { transform: translateX(0); } }
  @keyframes cf-hit { 0%, 55% { transform: none; filter: none; } 60% { transform: translateX(6px) rotate(6deg); filter: brightness(1.8); }
                      68% { transform: translateX(-3px) rotate(-3deg); filter: none; } 76%, 100% { transform: none; } }
  @keyframes cf-pow { 0%, 55% { opacity: 0; transform: scale(.4); } 62% { opacity: 1; transform: scale(1.15) rotate(-8deg); }
                      80% { opacity: 1; transform: scale(1) rotate(-8deg); } 92%, 100% { opacity: 0; transform: scale(1.1) translateY(-6px); } }
  @keyframes cf-hop { from { transform: translateY(0); } to { transform: translateY(-6px); } }
  @keyframes cf-drain { 0% { transform: scaleX(1); background: #22c55e; } 60% { background: #eab308; }
                        88% { transform: scaleX(.04); background: #ef4444; } 100% { transform: scaleX(.04); background: #ef4444; } }
  @media (prefers-reduced-motion: reduce) { .calc-fight *, .calc-fight { animation: none !important; } }
  .calc-login { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px; }
  .calc-login .out { font: inherit; font-size: 14px; font-weight: 800; min-height: 44px; padding: 8px 14px; border-radius: 10px;
                     border: 0; background: #1d4ed8; color: #fff; cursor: pointer; }
  .calc-hero p { margin: 0; }
  .calc-hero-l { font-size: 13.5px; font-weight: 800; opacity: .85; }
  .calc-hero-n { font-size: 20px; font-weight: 800; line-height: 1.25; margin-top: 2px !important; word-break: keep-all; }
  .calc-hero-n b { font-size: 34px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
  .calc-hero-s { font-size: 14px; font-weight: 700; opacity: .9; margin-top: 6px !important; }
  .calc-sec { margin: 0 0 18px; }
  .calc-sec > h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 900; }
  .calc-sec > h4 small { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .calc-bars { list-style: none; margin: 0; padding: 0; }
  .calc-bars li { display: grid; grid-template-columns: 34px 1fr 78px; align-items: center; gap: 8px; padding: 6px 0;
                  border-bottom: 1px solid var(--line-soft); }
  .calc-bars li.pick { background: linear-gradient(90deg, rgba(29,78,216,.07), transparent); }
  .calc-bars .cn { font-size: 14px; font-weight: 900; }
  .calc-bars li.pick .cn { color: #1d4ed8; }
  .calc-hero:not(.me) ~ .calc-sec .calc-bars li.pick .cn { color: #14532d; }
  .cbars { position: relative; display: flex; flex-direction: column; gap: 3px; }
  .cbars em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
  .cb { display: block; height: 14px; border-radius: 4px; background: transparent; }
  .cb i { display: block; height: 100%; border-radius: 4px; }
  .cb.main.ok i { background: #2f9e60; }
  .cb.main.over i { background: #e0794a; }
  .calc-hero.me ~ .calc-sec .cb.main.ok i { background: #1d4ed8; }
  .cb.cmp { height: 6px; }
  .cb.cmp i { background: #b9bfc8; }
  .cb.clip i { border-radius: 4px 0 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .calc-bars .ct { text-align: right; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.2; }
  .calc-bars .ct.ok { color: #14532d; } .calc-bars .ct.over { color: #b4372b; }
  .calc-bars .ct small { font-size: 11.5px; font-weight: 700; color: var(--muted-2); }
  .calc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
  .calc-legend .k { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: -6px; }
  .calc-legend .k.main { background: #1d4ed8; } .calc-legend .k.cmp { height: 4px; background: #b9bfc8; }
  .calc-legend .k.lim { width: 2px; height: 14px; background: var(--text); }
  /* 내 여섯 — 카드 대신 줄 목록 */
  .calc-mine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
  .calc-mine li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 2px; border-bottom: 1px solid var(--line-soft); }
  .calc-mine img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
  .calc-mine .cm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .calc-mine b { font-size: 15px; font-weight: 800; } .calc-mine i { font-style: normal; font-size: 13.5px; color: var(--muted); }
  .calc-mine i small, .calc-mine b small { font-size: 11px; font-weight: 800; color: var(--muted-2); }
  .calc-mine em { font-style: normal; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
  .calc-mine li.mega { background: #fdf4fa; }
  .calc-skip { flex: none; width: 44px; height: 44px; margin-right: -6px; border: 0; border-radius: 10px; background: transparent;
               color: var(--muted-2); font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; }
  .calc-skip:hover, .calc-skip:active { background: var(--line-soft); color: #b4372b; }
  .calc-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
  .calc-sec-h h4 { margin: 0; font-size: 15.5px; font-weight: 900; }
  .calc-sec-h h4 small { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .calc-sec-h button { flex: none; font: inherit; font-size: 14px; font-weight: 800; min-height: 44px; padding: 8px 14px;
                       border-radius: 10px; border: 1.5px solid #1d4ed8; background: #fff; color: #1d4ed8; cursor: pointer; }
  .calc-skipped { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: 800; color: var(--muted); }
  .calc-skipped button { font: inherit; font-size: 13.5px; font-weight: 800; min-height: 44px; padding: 4px 14px; border-radius: 999px;
                         border: 1px dashed var(--muted-2); background: var(--line-soft); color: var(--ink, #1e293b); cursor: pointer; }
  .calc-login-cta { flex-direction: column; align-items: stretch; padding: 14px 16px; border: 2px solid #1d4ed8;
                    background: #e8efff; box-shadow: 0 2px 10px rgba(29, 78, 216, .14); }
  .calc-login-cta > span { color: #334155; }
  .calc-login-cta > span b { display: inline-block; margin-bottom: 2px; font-size: 17px; font-weight: 900; letter-spacing: -0.3px; color: #1d4ed8; }
  .calc-login-cta .calc-login { margin-top: 2px; }
  /* 내 포켓몬 0마리 — 추천 포켓몬 줄에 CP 칸만 */
  .calc-quick { margin: 0 0 16px; padding: 14px 14px 10px; border-radius: 14px; border: 1.5px solid #b9c8ea; background: #f6f8fe; }
  .calc-quick h4 { margin: 0; font-size: 16px; font-weight: 900; color: #1d4ed8; }
  .calc-quick > p { margin: 3px 0 8px; font-size: 13px; color: var(--muted); }
  .calc-quick ul { list-style: none; margin: 0; padding: 0; }
  .calc-quick li { display: flex; align-items: center; gap: 8px; min-height: 56px; border-top: 1px solid #e1e8f6; }
  .calc-quick li img { width: 44px; height: 44px; flex: none; image-rendering: pixelated; }
  .calc-quick li b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; }
  .calc-quick form { display: flex; gap: 6px; flex: none; }
  .calc-quick input { width: 84px; height: 44px; box-sizing: border-box; padding: 0 10px; border: 1.5px solid #c7d2ea; border-radius: 10px;
                      font: inherit; font-size: 16px; font-weight: 800; background: #fff; }
  .calc-quick form button { height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: #1d4ed8; color: #fff;
                            font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
  .calc-quick form button:disabled { opacity: .5; }
  .calc-quick-more { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; border-top: 1px solid #e1e8f6;
                     background: none; font: inherit; font-size: 14px; font-weight: 800; color: #1d4ed8; cursor: pointer; }
  .calc-quick-foot { margin: 6px 0 0 !important; font-size: 13px; color: var(--muted); }
  .calc-quick-foot button { border: 0; padding: 0; background: none; font: inherit; font-weight: 800; color: #1d4ed8; text-decoration: underline; cursor: pointer; }
  .calc-skip-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
  .calc-mine .calc-sh { color: #6d3fb5 !important; }
  /* 추천 여섯 — 그림 한 줄 */
  .calc-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .calc-strip li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; text-align: center; }
  .calc-strip img { width: 44px; height: 44px; image-rendering: pixelated; }
  /* 이름이 두 줄로 꺾이는 칸(메가 레쿠쟈·펄기아 (오리진폼))이 있어도 DPS 줄이 나란하게 — 이름 칸을 늘 두 줄 높이로 */
  .calc-strip b { display: flex; align-items: center; justify-content: center; min-height: 2.5em;
                  font-size: 12.5px; font-weight: 800; line-height: 1.25; word-break: keep-all; }
  .calc-strip i { font-style: normal; font-size: 14px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
  /* PC 도 상세 칸은 380px 남짓이라 여섯 칸이면 이름이 꺾이고 붙는다 — 화면 폭이 아니라 칸 폭으로 */
  .calc { container-type: inline-size; }
  @container (min-width: 560px) { .calc-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  /* 여섯이 안 될 때 — 표 위에서 바로 보이게 */
  .calc-short { margin: 0 0 10px; padding: 8px 12px;
                border-radius: 12px; background: #fff7e0; color: #7a5200; font-size: 13.5px; line-height: 1.5; }
  .calc-short b { color: #5c3d00; }
  /* 메가 고르기 */
  .calc-mega { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; padding: 11px 13px; border-radius: 12px;
               background: #fdf4fa; border: 1px solid #f0cfe3; }
  .calc-mega > span { font-size: 13px; font-weight: 800; color: #b0306f; }
  .calc-mega select { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 10px; border-radius: 10px;
                      border: 1px solid #e7b6d6; background: #fff; color: var(--text); }
  .calc-mega small { font-size: 13px; color: var(--muted); }
  .calc-teams .calc-opts { margin: 0 0 8px; }
  .calc-seg button { min-height: 44px; }
  .mine-noiv { color: var(--muted-2); }
  /* 캡처로 넣기 */
  .mine-shot { margin-bottom: 12px; }
  .mine-shot p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
  .mine-shot-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px;
                   background: #1d4ed8; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; }
  .shot-reading { margin: 10px 0 0; font-size: 14px; font-weight: 800; color: #1d4ed8; }
  .shots { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .shot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--line);
          border-radius: 12px; background: var(--card); }
  .shot.saved { opacity: .6; }
  .shot.err { color: #b4372b; font-size: 13.5px; font-weight: 700; border-style: dashed; }
  .shot-mid { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--muted); }
  .shot-mid b { font-size: 15px; color: var(--text); }
  .shot-mid small { font-weight: 600; color: var(--muted-2); }
  .shot-warn { color: #b4372b; font-weight: 700; }
  .shot-btns { display: flex; gap: 6px; }
  .shot-btns button { min-height: 40px; }
  .shot-btns .primary, .shot-all { border: 0; border-radius: 10px; background: #1d4ed8; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
  .shot-btns .primary { padding: 0 16px; }
  .shot-btns .primary:disabled { background: var(--line); color: var(--muted-2); }
  .shot-done { font-size: 13px; font-weight: 800; color: #155c3b; }
  .shot-all { width: 100%; min-height: 48px; margin-top: 10px; font-size: 15.5px; }

  /* 새 기능 안내 띠 — 홈 맨 위 한 줄. 팝업 대신 */
  .new-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 8px 10px 14px;
             border-radius: 14px; border: 1.5px solid #1d4ed8; background: #e8efff; }
  .new-bar .new-tag { flex: none; padding: 3px 8px; border-radius: 999px; background: #1d4ed8; color: #fff;
                      font-size: 12px; font-weight: 900; letter-spacing: .3px; }
  .new-bar p { flex: 1; min-width: 0; margin: 0; word-break: keep-all; font-size: 14px; line-height: 1.45; color: #334155; }
  .new-bar p b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 900; color: #1d4ed8; }
  .new-bar .new-go { flex: none; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; cursor: pointer;
                     background: #1d4ed8; color: #fff; font: inherit; font-size: 14px; font-weight: 800; }
  .new-bar .new-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
                    background: transparent; color: #475569; display: flex; align-items: center; justify-content: center; }
  .new-bar .new-x:active { background: rgba(29, 78, 216, .1); }
  @media (max-width: 560px) {
    .new-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px 10px; padding: 12px 6px 12px 14px; }
    .new-bar .new-tag { margin-top: 2px; }
    .new-bar .new-x { margin: -8px 0 -8px; }
    .new-bar .new-go { grid-column: 1 / -1; grid-row: 2; margin-right: 8px; }
  }

/* ══ 레이드·레이드 예고 카드 (11/5, 코드·UI·디자인 검토 반영해 한 덩어리로) ══════════════
   규칙: 머리는 한 부품(.soon-head) · 카드 종류는 위 색 띠 하나 · 카드 안 칸은 subgrid 행으로 옆 카드와 맞춘다 ·
   진행 중은 "N일 남음"(빨강), 시작 전은 "N일 뒤"(회색). 앞쪽 옛 규칙을 덮는 값만 여기 둔다. */

:root { --g-mega: #0e7c86; }

/* 카드 종류 — 위 색 띠 + 이름 위 종류 글자 */
.boss[data-kind] { border-top: 4px solid var(--kind); }
.boss[data-kind="raid"]   { --kind: var(--g-raid); }
.boss[data-kind="mega"]   { --kind: var(--g-mega); }
.boss[data-kind="shadow"] { --kind: var(--g-shadow); background: color-mix(in srgb, var(--g-shadow) 6%, var(--card)); }
.boss[data-kind="max"],
.boss[data-kind="gmax"]   { --kind: var(--g-max); background: color-mix(in srgb, var(--g-max) 7%, var(--card)); }
.boss .bkind { display: block; margin: 0 auto 2px; font-size: 13.5px; font-weight: 800; color: var(--kind, var(--muted-2)); }
.boss[data-kind="shadow"] .bkind { color: color-mix(in srgb, var(--g-shadow) 80%, var(--text)); }
.boss[data-kind="gmax"] .bkind em { font-style: normal; display: inline-block; padding: 0 7px; border-radius: 999px; color: #fff; background: var(--g-max); }
/* 지금 레이드 등급 묶음 안에서는 머리가 이미 "5성 레이드" 라 카드마다 또 적지 않는다 */
.tier-group .boss[data-kind="raid"] .bkind,
.tier-group .boss[data-kind="mega"] .bkind { display: none; }

/* 사진 */
.boss > img { width: 112px; height: 112px; }
@media (min-width: 900px) { .boss > img { width: 124px; height: 124px; } }
.tt-mon img { width: 58px; height: 58px; }
@media (min-width: 900px) { .tt.tt-wide .tt-mon img { width: 68px; height: 68px; } }

/* 칸 줄 맞춤 — img·이름 + 칸 6개 = 8행 */
@supports (grid-template-rows: subgrid) { .boss { grid-row: span 8; row-gap: 0; } }
.boss > .slot:not(:empty) { padding-top: 6px; }

/* 포획 CP — 한 줄: 라벨 · 100% 값 · 최저값 */
.boss .cprow { flex-wrap: wrap; }
.boss .cprow .v { white-space: nowrap; }
.boss .cprow .v em { font-style: normal; font-weight: 600; font-size: 12.5px; opacity: .7; margin-left: 3px; }

/* 약점 — ×1.6 은 머리에 한 번, 2중 약점만 칩에. 점선은 뺀다 */
.boss .weak { border-top: 0; margin-top: 10px; padding-top: 0; }
.boss .weak .sub span { font-weight: 800; }
.boss .weak .t.dbl { font-weight: 900; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }

/* 키우면 순위 — 이모지 없이 "키우면 [타입] 2위 ›". 폰에서는 "순위 보기" 글자만 접고 화살표는 남긴다 */
.brank-top { flex-wrap: nowrap; }

/* 추천 포켓몬 — 연한 우물 하나, 바닥에 "기술 보기 ›" (시트로 연다) */
.boss .cwell { margin-top: 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, var(--card)); overflow: hidden; }
.boss .cwell .counters-top { margin: 0; padding: 8px 8px 6px; border: 0; text-align: center; }
.boss .cwell .csub { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--muted-2); }
.boss .cchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.boss .cchips li { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; }
.boss .cchips img { width: 34px; height: 34px; object-fit: contain; }
.boss .cchips b { font-weight: 800; white-space: nowrap; }
.boss .cmore { display: block; width: 100%; min-height: 40px; border: 0; cursor: pointer; font: inherit;
               font-size: 14px; font-weight: 800; color: var(--g-battle); background: color-mix(in srgb, var(--g-battle) 10%, var(--card)); }
.csheet { padding: 4px 16px 20px; }
.csheet-t { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.csheet .bstat-line { justify-content: flex-start; margin: 0 0 10px; }
.csheet-h { margin: 14px 0 4px; font-size: 15px; font-weight: 800; }
.clist .cimg { flex: 0 0 36px; width: 36px; height: 36px; }

/* 종족값 한 줄 (시트 안) */
.bstat-line { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13.5px; color: var(--muted-2); font-weight: 600; }
.bstat-line span { white-space: nowrap; }
.bstat-line b { color: var(--text); font-weight: 800; }

/* 버튼 — 필요 인원이 먼저(채움), 공략 보기는 테두리. 같은 크기·반지름 */
.boss .bact { display: flex; gap: 6px; margin-top: 10px; }
.boss .bact:empty { display: none; }
.boss .bact > * { flex: 1 1 0; min-width: 0; min-height: 42px; margin: 0; padding: 0 4px; border-radius: 10px;
                  white-space: nowrap; font-size: 14px; font-weight: 800; }
.boss .bact .calc-btn { background: var(--text); border: 1px solid var(--text); color: #fff; }
.boss .bact .guide-btn { background: var(--card); border: 1px solid var(--line); color: var(--text); }

/* 1성·3성 작은 카드 3열 */
.bosses.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .bosses.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.boss.mini { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 9px; }
.boss.mini > img { width: 88px; height: 88px; }
.boss.mini .bname { font-size: 14px; margin: 0; }
.boss.mini .bmarks { display: flex; justify-content: center; margin: 2px 0 0; }
.boss.mini .mini-cp { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.boss.mini .mini-cp b { color: var(--text); font-size: 14.5px; font-weight: 900; }
.boss.mini .mini-weak { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12.5px; color: var(--muted-2); font-weight: 700; }
.boss.mini .mini-weak .t { font-size: 12px; padding: 1px 5px; }

/* 머리 부품 — 지금 레이드 등급 머리 · 섀도우 · 맥스 배틀 · 예고 주차 머리가 다 이것 */
.soon-head { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.soon-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; background: none; border: 0;
                font-size: 19px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--text); }
.soon-dday { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
             font-size: 14px; font-weight: 800; letter-spacing: 0;
             background: color-mix(in srgb, var(--g-raid) 18%, var(--card)); color: color-mix(in srgb, var(--g-raid) 60%, #1f0a06); }
.soon-dday.upcoming { background: var(--card); border: 1.5px solid var(--line); color: var(--text); }
.soon-dday.now { background: var(--g-raid); border-color: var(--g-raid); color: #fff; }
.soon-meta { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; color: var(--muted-2); }
.soon-meta span::before { content: ' · '; }
.soon-week { margin: 0 0 32px; }
.tier-group { margin-bottom: 26px; }
#shadow-section, #max-section { margin-top: 8px; }
/* 전체 탭에서 레이드 카드 밑에 섀도우·맥스가 이어 붙어 한 덩어리로 보였다 — 구획 사이에 선과 여백 */
#raid-section:not([hidden]) ~ #shadow-section,
#raid-section:not([hidden]) ~ #max-section,
#shadow-section:not([hidden]) ~ #max-section { margin-top: 36px; padding-top: 28px; border-top: 2px dashed var(--line); }
@media (min-width: 1024px) { .soon-head h3 { font-size: 20px; } }

/* 탭 — 폰에서도 엄지 44px (PC 에만 있었다) */
.subtabs button { min-height: 44px; }
#raid-tabs { margin: 4px 0 16px; }

/* 오늘 맥스 배틀이 없을 때 다음 것 한 줄 */
.max-next { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; font-size: 15px; color: var(--text);
            background: color-mix(in srgb, var(--g-max) 8%, var(--card)); border-left: 4px solid var(--g-max); }
.max-next b { color: color-mix(in srgb, var(--g-max) 85%, var(--text)); }

/* PC: 보스가 적은 등급끼리 한 줄에 — 묶음이 제 카드 수만큼만 폭을 쓴다 */
@media (min-width: 900px) {
  #pogo-raids { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; }
  #pogo-raids > .tier-group { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  #pogo-raids > .tier-group > .bosses { grid-template-columns: repeat(var(--n, 4), minmax(0, 240px)); }
  #pogo-raids > .tier-group > .bosses.mini { grid-template-columns: repeat(var(--n, 4), minmax(0, 160px)); }
}

/* 머리 판에 종류 색 — 흰 판이라 밋밋하고 카드와 구분이 약했다(11/5). 카드 위 색 띠와 같은 색을 옅게 */
.soon-head.k-raid   { --hk: var(--g-raid); }
.soon-head.k-mega   { --hk: var(--g-mega); }
.soon-head.k-shadow { --hk: var(--g-shadow); }
.soon-head.k-max    { --hk: var(--g-max); }
.soon-head.k-week   { --hk: var(--g-raid); }
.soon-head[class*="k-"]:not(.k-low) { background: color-mix(in srgb, var(--hk) 11%, var(--card));
                                      border-color: color-mix(in srgb, var(--hk) 28%, var(--card)); }
.soon-head[class*="k-"]:not(.k-low) .soon-week-name { color: color-mix(in srgb, var(--hk) 70%, #111); }
.soon-head[class*="k-"]:not(.k-low) .soon-meta { color: color-mix(in srgb, var(--hk) 35%, var(--muted)); }
.soon-head.k-low { background: color-mix(in srgb, var(--text) 5%, var(--card)); }
/* 색 판 위에서는 남은 날 알약을 진하게 — 옅은 알약은 판에 묻힌다 */
.soon-head .soon-dday:not(.upcoming) { background: var(--g-raid); color: #fff; }
.soon-head .soon-dday.upcoming { background: var(--card); border-color: color-mix(in srgb, var(--hk, var(--line)) 35%, var(--card)); }
/* 필요 인원 — 검정 채움이 사이트 어디에도 없는 색이었다(11/5). 카드 위 색 띠와 같은 종류 색으로 채운다.
   공략 보기는 같은 색의 옅은 테두리 */
.boss .bact .calc-btn { background: var(--kind, var(--g-raid)); border-color: var(--kind, var(--g-raid)); color: #fff; }
.boss .bact .guide-btn { border-color: color-mix(in srgb, var(--kind, var(--g-raid)) 35%, var(--card));
                         color: color-mix(in srgb, var(--kind, var(--g-raid)) 75%, #111); }
/* 기술 보기도 카드 종류 색 — 혼자 파랑이었다 */
.boss .cmore { color: color-mix(in srgb, var(--kind, var(--g-raid)) 80%, #111); background: color-mix(in srgb, var(--kind, var(--g-raid)) 10%, var(--card)); }

/* 예고 한 주 안에서 레이드 카드 뒤에 맥스 배틀이 그냥 이어 붙어 있었다 — 종류 이름 + 가는 선으로 끊는다 */
.soon-split { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; font-size: 15px; font-weight: 800;
              color: color-mix(in srgb, var(--hk) 75%, #111); }
.soon-split::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--hk) 30%, transparent); }
.soon-split.k-raid { --hk: var(--g-raid); }
.soon-split.k-max { --hk: var(--g-max); }
.bosses + .soon-split { margin-top: 28px; }