/* ════════════════════════════════════════════════════════════════════════
   하위 페이지 (2026-10-22 2차 «소대 색띠») — 게임소식 · 게임가이드 · 게임랭킹 · 자료실 · 고객지원
   ════════════════════════════════════════════════════════════════════════ */
.sub-main > * + * { margin-top: 26px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sec-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 27px; line-height: 1.2; }
.sec-h h2 img { width: 44px; height: 44px; }
.sec-h p { margin: 0; color: var(--ink-3); font-size: 14px; }
.soon { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow-l); color: var(--ink); font-size: 12.5px; font-weight: 800; }

/* ── 게임소식 ─────────────────────────────────────────────────────── */
.board-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 20px 12px; border-bottom: 2px solid var(--line-2); }
.board-tabs button { height: 34px; padding: 0 15px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 800; }
.board-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.board-tabs button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.board-tabs .n { margin-left: 5px; opacity: 0.7; font-size: 12px; }
/* 2026-10-24 이벤트 진행중/종료 — 분류 탭 아래 한 줄. 분류 탭보다 한 단계 조용하게 */
.board-tabs-sub { padding: 10px 20px; background: var(--lime-l); }
.board-tabs-sub button { height: 30px; padding: 0 13px; font-size: 13px; }
.nb-head .evb { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.nb-head .evb.live { background: var(--lime); color: var(--ink); }
.nb-head .evb.ended { background: var(--line); color: #fff; }
.nb-body .nb-period { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink); opacity: 0.85; }
.nb-list { list-style: none; margin: 0; padding: 6px 14px 10px; }
.nb-item + .nb-item { border-top: 1px dashed var(--line); }
.nb-head { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto 26px; align-items: center; gap: 12px; width: 100%; padding: 15px 8px; border: 0; background: none; text-align: left; }
.nb-head .tag { justify-self: start; }
.nb-head .tt { font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-head:hover .tt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nb-head .hot { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.nb-head .dt { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-head .chev { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: transform 0.2s, border-color 0.15s; }
.nb-head .chev::before { content: ''; width: 7px; height: 7px; margin-top: -3px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.nb-item.open .chev { transform: rotate(180deg); border-color: var(--ink); }
.nb-body { display: none; margin: 0 8px 16px 106px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--lime-l); color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.nb-item.open .nb-body { display: block; animation: pg-in 0.2s ease; }
.nb-body p { margin: 0; max-width: 70ch; white-space: pre-line; }

/* 게임소식 관리(2026-10-23 · 관리자 슬롯에게만 보인다) */
.nb-admin { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border: 2px dashed var(--ink); border-radius: 14px; background: var(--yellow-l); }
.nb-admin-tx { color: var(--ink-2); font-size: 14.5px; }
.nb-admin-tx b { margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; }
.nb-editor { margin-bottom: 18px; }
.nb-ed-in { padding: 4px 22px 20px; }
.nb-ed-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.nb-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.nb-fld > span { font-size: 14px; font-weight: 800; color: var(--ink); }
.nb-fld > span em { margin-left: 6px; color: var(--ink-3); font-size: 12px; font-style: normal; font-weight: 400; }
.nb-grow { flex: 1 1 320px; }
.nb-fld input, .nb-fld select, .nb-fld textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15.5px; }
.nb-fld input, .nb-fld select { height: 46px; padding-top: 0; padding-bottom: 0; }
.nb-fld select { min-width: 130px; }
.nb-fld textarea { min-height: 220px; line-height: 1.7; resize: vertical; }
.nb-fld input:focus, .nb-fld select:focus, .nb-fld textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(249, 190, 11, 0.5); }
.nb-ed-opts { align-items: center; }
.nb-ed-opts .ck { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; font-weight: 800; cursor: pointer; }
.nb-ed-opts .ck input { width: 18px; height: 18px; accent-color: var(--lime-d); }
.nb-date input { width: 180px; }
.nb-editor .form-msg { min-height: 20px; margin: 0 0 10px; color: var(--pink-d); font-size: 14px; font-weight: 800; }
.nb-ed-go { display: flex; gap: 10px; }
.nb-tools { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(11, 22, 89, 0.25); }
.nb-tools .nb-del { color: var(--pink-d); }
/* 글 첨부(2026-10-24) — 편집판 목록 + 본문 사진·동영상 */
.nb-att-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.nb-att-pick { position: relative; overflow: hidden; }
.nb-att-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nb-att-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nb-att-it { position: relative; width: 88px; height: 66px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--mist); }
.nb-att-it img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-att-it.err { border-color: var(--pink-d); }
.nb-att-ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.nb-att-bar { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--lime-d); transition: width 0.15s; }
.nb-att-err { position: absolute; left: 4px; top: 4px; padding: 0 6px; border-radius: 6px; background: var(--pink-d); color: #fff; font-size: 11px; font-weight: 800; }
.nb-att-x { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 22, 89, 0.8); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.nb-editor.drop { box-shadow: 0 0 0 4px var(--orange); }
.nb-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 900px; margin-top: 12px; }
.nb-media.one { grid-template-columns: minmax(0, 640px); }
.nb-media a { display: block; }
.nb-media img, .nb-media video { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.nb-media video { background: #000; }
.nb-body p + .nb-media { margin-top: 14px; }
@keyframes pg-in { from { opacity: 0; transform: translateY(-4px); } }

/* ── 게임랭킹 ─────────────────────────────────────────────────────── */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 16px; margin-top: 30px; padding: 0 20px 6px; }
.pd { position: relative; padding: 26px 14px 18px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; text-align: center; box-shadow: var(--drop); }
.pd .medal { width: 56px; height: 56px; display: grid; place-items: center; margin: -54px auto 8px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; font-family: var(--font-display); font-size: 26px; }
.pd b { display: block; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd span { display: inline-block; margin-top: 8px; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--pink-l); font-size: 13px; font-weight: 800; }
.pd.p1 { padding-top: 34px; background: var(--yellow-l); }
.pd.p1 .medal { width: 68px; height: 68px; margin-top: -66px; background: var(--yellow); font-size: 30px; }
.pd.p1 b { font-size: 21px; }
.pd.p2 .medal { background: #dfe4ee; }
.pd.p3 .medal { background: #f3c79a; }
.rk-table { width: 100%; border-collapse: collapse; }
.rk-table th { padding: 10px 14px; border-bottom: 2px solid var(--ink); color: var(--ink-2); font-size: 13px; font-weight: 800; text-align: left; }
.rk-table td { padding: 12px 14px; border-bottom: 1px dashed var(--line); font-size: 15px; }
.rk-table tr:nth-child(even) td { background: var(--mist); }
.rk-table .pos { width: 80px; font-family: var(--font-display); font-size: 19px; }
.rk-table .nk { font-weight: 800; }
.rk-table .rkname { display: inline-block; padding: 1px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--pink-l); font-size: 13px; font-weight: 800; }
.rk-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 20px 18px; color: var(--ink-3); font-size: 13px; }
.rk-meta b { color: var(--ink); }
/* ── 2026-10-23 랭킹 탭 6개 + 내 순위 ── */
.mine-who { color: var(--ink-2); font-size: 14px; font-weight: 800; }
.mine-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 4px 20px 20px; }
.mine-grid > .empty { grid-column: 1 / -1; }
.mine { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 108px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(11, 22, 89, 0.12); }
.mine .m-lb { padding: 1px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.mine .m-big { margin-top: 6px; font-family: var(--font-display); font-weight: normal; font-size: 30px; line-height: 1.1; }
.mine .m-sub { color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.mine .mr { position: absolute; right: 12px; top: 12px; }
.mine .tm { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; object-fit: cover; object-position: 50% 28%; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
.mine-out { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: 14px; }
.mine-out p { margin: 0; color: var(--ink-2); font-weight: 700; }
.rk-board .board-tabs { border-bottom: 2px solid var(--line-2); }
.rk-desc { margin: 16px 20px 0; color: var(--ink-2); font-size: 14.5px; font-weight: 700; }
.rk-panel .card-b { padding-top: 10px; }
.rk-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-table td.num { font-weight: 800; }
.rk-table td.rec { color: var(--ink-2); font-weight: 700; font-size: 14px; }
.nkw { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nkw .nkt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier { display: inline-flex; align-items: center; gap: 8px; padding: 2px 12px 2px 3px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tier .tm { width: 28px; height: 28px; object-fit: cover; object-position: 50% 28%; border-radius: 50%; }
.tier.t-bronze { background: #fbe3d4; } .tier.t-silver { background: #e6edf7; } .tier.t-gold { background: #fdf0c8; }
.tier.t-platinum { background: #d5f2f6; } .tier.t-diamond { background: #dce6ff; } .tier.t-master { background: #ecdcff; }
.tier.t-grandmaster { background: #ffddd4; } .tier.t-legend { background: #fff1b8; box-shadow: 0 0 0 2px #ffc828 inset; }
.rk-table tr.is-me td { background: var(--yellow-l); }
.rk-table tr.me-row td { border-top: 3px double var(--ink); background: var(--yellow-l); font-weight: 800; }
.pd .mr { margin: 0 auto 6px; }
.pd.is-me { box-shadow: 0 0 0 4px var(--orange); }

.tiers { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; padding: 6px 20px 22px; }
.tiers figure { margin: 0; text-align: center; }
.tiers img { width: 100%; max-width: 110px; height: auto; margin: 0 auto; transition: transform 0.15s; }
.tiers figure:hover img { transform: translateY(-4px) rotate(-2deg); }

/* ── 게임가이드(2026-10-24) — 위 탭(초보자 가이드 / 게임 정보) + 가이드 8단계 ─────────────── */
.gd-top { gap: 10px; margin: 0 0 20px; padding: 0; border-bottom: 0; }
.gd-top button { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-width: 3px; font-family: var(--font-display); font-weight: normal; font-size: 19px; }
.gd-top button small { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; opacity: 0.75; }
.gd-top button[aria-selected="true"] { box-shadow: 0 4px 0 rgba(11, 22, 89, 0.18); }
.gd-intro { margin-bottom: 18px; }
.gd-intro-in { display: flex; align-items: center; gap: 16px; padding: 18px 22px 6px; }
.gd-intro-face { flex: none; width: 64px; height: 64px; }
.gd-intro h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 27px; line-height: 1.25; color: var(--ink); }
.gd-intro p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.gd-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 18px; }
.gd-toc a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 6px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; }
.gd-toc a:hover { border-color: var(--ink); }
.gd-toc a b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: normal; font-size: 14px; }
.gd-toc a.hot { border-color: var(--orange); background: var(--yellow-l); }
.gd-toc a.hot b { background: var(--orange-d); }
.gd-steps { display: grid; gap: 16px; margin: 0 0 22px; padding: 0; list-style: none; }
.gd-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 20px 22px; scroll-margin-top: 96px; }
.gd-step.gd-hot { border-color: var(--orange-d); background: linear-gradient(180deg, var(--yellow-l), #fff 160px); }
.gd-num { display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--font-display); font-size: 26px; box-shadow: 0 3px 0 var(--ink); }
.gd-hot .gd-num { background: var(--orange); }
.gd-body { min-width: 0; }
.gd-body h3 { margin: 6px 0 6px; font-family: var(--font-display); font-weight: normal; font-size: 24px; line-height: 1.3; color: var(--ink); }
.gd-body h4 { margin: 16px 0 8px; font-family: var(--font-display); font-weight: normal; font-size: 18px; color: var(--ink); }
.gd-body p { margin: 0 0 10px; max-width: 76ch; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.gd-body p b, .gd-list b { color: var(--ink); }
.gd-body a:not(.btn) { color: var(--blue-d); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.gd-body code { padding: 1px 6px; border-radius: 6px; background: var(--mist); color: var(--ink); font-family: Consolas, 'D2Coding', monospace; font-size: 13.5px; }
.gd-list { display: grid; gap: 8px; margin: 4px 0 10px; padding: 0; list-style: none; }
.gd-list li { position: relative; padding: 9px 12px 9px 14px; border-left: 4px solid var(--lime); border-radius: 0 10px 10px 0; background: var(--mist); color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.gd-list li > b:first-child { display: inline-block; min-width: 84px; margin-right: 8px; }
.gd-hot .gd-list li { border-left-color: var(--orange); background: #fff; }
.gd-tip { padding: 10px 14px; border: 2px dashed var(--teal); border-radius: 12px; background: var(--teal-l); }
.gd-tip b { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: var(--teal-d); color: #fff; font-size: 12.5px; }
.gd-note { color: var(--ink-3) !important; font-size: 13.5px !important; }
.gd-more { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.gd-apt { display: flex; flex-wrap: wrap; gap: 4px; }
.gd-apt em { padding: 0 7px; border-radius: 6px; background: var(--mist); color: var(--ink); font-size: 12.5px; font-style: normal; font-weight: 800; }
.gd-apt em.a5 { background: var(--lime); }
.gd-apt em.a4 { background: var(--lime-l); }
.gd-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.gd-char { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.gd-char img { flex: none; }
.gd-char div { display: grid; gap: 3px; min-width: 0; }
.gd-char b { font-family: var(--font-display); font-weight: normal; font-size: 19px; color: var(--ink); }
.gd-char small { color: var(--ink-3); font-size: 12px; }
.gd-train { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 6px 0 8px; }
.gd-tstage { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.gd-tsh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gd-tno { padding: 0 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.gd-tsh b { color: var(--ink); font-size: 14.5px; }
.gd-tstage ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gd-tstage li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.gd-tstage li span { flex: 1; min-width: 0; }
.gd-tstage li em { color: var(--blue-d); font-style: normal; font-weight: 800; }
.gd-pang { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 11px; font-style: normal; font-weight: 800; }
.gd-r13 { margin-top: 8px; }
#gd-rank13 { display: grid; gap: 4px; }
.gd-cur { padding-left: 9px; background: var(--yellow-l); border-color: var(--orange); }
.gd-rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gd-recc { display: grid; gap: 6px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.gd-rech { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gd-rech b { font-family: var(--font-display); font-weight: normal; font-size: 20px; color: var(--ink); }
.gd-price { color: var(--pink-d); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.gd-recc small { color: var(--ink-3); font-size: 12px; }
.gd-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gd-ways li { display: flex; gap: 10px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.gd-ways li img { flex: none; }
.gd-ways li div { display: grid; gap: 2px; }
.gd-ways b { color: var(--ink); font-size: 15px; }
.gd-ways span { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.gd-ways a { justify-self: start; margin-top: 2px; font-size: 13px; }
.gd-bars { display: grid; gap: 7px; max-width: 620px; margin: 6px 0 14px; }
.gd-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.gd-bar .t { height: 16px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.gd-bar .t i { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.gd-bar b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.gd-bar.hot { color: var(--ink); font-weight: 800; }
.gd-bar.hot .t i { background: var(--orange-d); }
.gd-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.gd-tier { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 6px 4px; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.gd-tier img { width: 46px; height: 46px; object-fit: contain; }
.gd-tier small { color: var(--ink-2); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
@media (max-width: 620px) {
	.gd-top button { flex: 1 1 0; justify-content: center; height: 46px; padding: 0 10px; font-size: 17px; }
	.gd-top button small { display: none; }
	.gd-step { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; }
	.gd-num { width: 40px; height: 40px; font-size: 21px; }
	.gd-intro-in { padding: 16px 16px 4px; }
	.gd-intro-face { width: 48px; height: 48px; }
	.gd-intro h2 { font-size: 22px; }
	.gd-toc { padding: 10px 16px 16px; }
	.gd-list li > b:first-child { display: block; min-width: 0; margin: 0 0 2px; }
	.gd-bar { grid-template-columns: 76px minmax(0, 1fr) 44px; }
}
.callout { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--blue-l); }
.callout img { width: 64px; height: 64px; flex: none; }
.callout div { flex: 1; min-width: 0; }
.callout b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 21px; }
.callout span { color: var(--ink-2); font-size: 14.5px; }
.callout a:not(.btn) { color: var(--blue-d); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ── 자료실 ───────────────────────────────────────────────────────── */
.dl-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 26px 28px; }
.dl-icon { width: 124px; height: 124px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 28px; background: var(--yellow); background-image: var(--pat-yellow); background-size: 40px 40px; box-shadow: var(--drop); }
.dl-icon img { width: 108px; height: auto; }
.dl-tx b { display: block; font-family: var(--font-display); font-weight: normal; font-size: 29px; line-height: 1.25; }
.dl-tx p { margin: 6px 0 10px; color: var(--ink-2); font-size: 15px; }
.dl-go .btn { height: 58px; padding: 0 30px; font-size: 22px; }
.dl-go { display: flex; flex-direction: column; gap: 10px; }
.dl-go .btn-white { height: 46px; font-size: 17px; }
.dl-go .btn.is-off { opacity: 0.5; pointer-events: none; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.dl-meta li { padding: 3px 11px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.dl-meta li b { color: var(--ink); font-family: inherit; font-size: inherit; display: inline; }
.howto em, .dl-qa em { font-style: normal; font-weight: 800; color: var(--ink); }
.dl-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dl-qa .qa { padding: 18px 20px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; }
.dl-qa b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: normal; font-size: 19px; color: var(--ink); }
.dl-qa span { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: hw; }
.howto li { padding: 18px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; }
.howto b { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: normal; font-size: 20px; }
.howto b::before { counter-increment: hw; content: counter(hw); width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime); font-size: 16px; }
.howto span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ── 고객지원(2026-10-24 게임소식과 같은 관리자 게시판) — 분류 이름이 길어 분류 칸만 넓힌다 ── */
.nb-wtag .nb-head { grid-template-columns: 124px minmax(0, 1fr) auto 26px; }
.nb-wtag .nb-body { margin-left: 144px; }
:target { scroll-margin-top: 96px; }

@media (max-width: 1000px) {
	.mine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-card { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 620px) {
	.mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 16px; }
	.mine-out { flex-direction: column; align-items: stretch; text-align: center; }
	/* 탭 6개 = 3칸 × 2줄(가로 스크롤로 숨기지 않는다 · 글자가 세로로 쪼개지지 않게) */
	.rk-board .board-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 12px 12px; }
	.rk-board .board-tabs button { height: 42px; padding: 0 6px; white-space: nowrap; font-size: 15px; }
	.rk-table th, .rk-table td { padding: 10px 8px; }
	.rk-table td.rec { white-space: normal; }
	.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.howto, .dl-qa { grid-template-columns: 1fr; }
	.dl-go { width: 100%; }
	.dl-go .btn { width: 100%; }
	.podium { grid-template-columns: 1fr; gap: 46px; margin-top: 44px; }
	.pd.p1 { order: -1; }
	.nb-head, .nb-wtag .nb-head { grid-template-columns: minmax(0, 1fr) 26px; gap: 6px; }
	.nb-head .tag, .nb-head .tt, .nb-head .dt { grid-column: 1; }
	.nb-head .tt { white-space: normal; }
	.nb-head .chev { grid-column: 2; grid-row: 1 / span 3; }
	.nb-body, .nb-wtag .nb-body { margin-left: 8px; }
}

/* ── 2026-10-24 게임가이드 «게임 정보» — 확률표·능력치·보상·명령어 ───────────── */
.gi-board { margin-top: 26px; }
.gi-board .card-h { flex-wrap: wrap; row-gap: 2px; }
.gi-board .card-h h2 { white-space: nowrap; }
.gi-meta { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.gi-lead { margin: -4px 20px 4px; color: var(--ink-2); font-size: 14px; }
.gi-pane { padding: 16px 20px 20px; }
.gi-lead2 { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.gi-sub { margin: -16px -20px 16px; }
.gi-sub button { display: inline-flex; align-items: center; gap: 6px; }
.gi-tic { width: 22px; height: 22px; object-fit: contain; }
.gi-ic { width: 32px; height: 32px; flex: none; object-fit: contain; }
.gi-ic.none, .gi-cic.none, .gi-tic.none { display: inline-block; width: 32px; height: 32px; border-radius: 8px; background: var(--mist); }
.gi-tic.none { display: none; }
.gi-cic { width: 22px; height: 22px; flex: none; object-fit: contain; }
.gi-cic.none { width: 0; height: 0; }
.gi-bigic { width: 60px; height: 60px; flex: none; object-fit: contain; padding: 4px; border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow-l); }
.gi-boxhead { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.gi-boxhead h3 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 22px; }
.gi-sub-tx { margin: 2px 0 6px; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.gi-how { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.gi-band { margin-bottom: 16px; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; }
.gi-bandh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 2px solid var(--line); background: var(--mist); }
.gi-bandh b { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: normal; font-size: 18px; color: var(--ink); }
.gi-bandh span { color: var(--ink-3); font-size: 13px; font-weight: 700; }
.gi-table td { padding: 8px 14px; font-size: 14.5px; }
.gi-table th { padding: 8px 14px; }
.gi-it { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gi-it span { min-width: 0; overflow-wrap: anywhere; }
.gi-p { font-weight: 800; color: var(--ink); }
.gi-dim { color: var(--ink-3); font-size: 13px; }
.gi-note { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.gi-notes { margin: 12px 0 0; padding: 12px 14px 12px 32px; border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.gi-h4, .gi-pane h4 { margin: 18px 0 8px; font-family: var(--font-display); font-weight: normal; font-size: 18px; color: var(--ink); }

/* 낚시 */
.gi-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.gi-seg button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.gi-seg button b { font-size: 14px; color: var(--ink); }
.gi-seg button span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.gi-seg button:hover { border-color: var(--ink); }
.gi-seg button[aria-checked="true"] { border-color: var(--ink); background: var(--teal-l); box-shadow: 0 3px 0 var(--ink); }
.gi-stack { display: flex; height: 26px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; }
.gi-stack span { min-width: 3px; flex-basis: 0; transition: flex-grow 0.25s ease; }
.gi-stack span + span { border-left: 2px solid #fff; }
.t0 { background: #a8adc4; } .t1 { background: #7fc8e8; } .t2 { background: var(--lime); }
.t3 { background: var(--orange); } .t4 { background: var(--pink); } .t5 { background: #e7c24a; }
.gi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 16px; padding: 0; list-style: none; font-size: 13.5px; }
.gi-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gi-legend i, .gi-dot { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; }
.gi-legend span { color: var(--ink-2); font-weight: 800; }

/* 캐릭터 */
.gi-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gi-q { flex: 1 1 200px; min-width: 0; height: 38px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 12px; font: inherit; font-size: 14px; }
.gi-toggle { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 800; }
.gi-toggle i { position: relative; width: 30px; height: 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mist); }
.gi-toggle i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); transition: left 0.15s; }
.gi-toggle[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--lime-l); }
.gi-toggle[aria-pressed="true"] i { background: var(--lime); }
.gi-toggle[aria-pressed="true"] i::after { left: 13px; background: var(--ink); }
.gi-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--line); border-radius: 14px; }
.gi-scroll > table { min-width: 100%; }
.gi-ctable { white-space: nowrap; }
.gi-ctable td, .gi-ctable th { padding: 8px 10px; font-size: 14px; }
.gi-apt-h { font-size: 12px !important; }
.gi-crow { cursor: pointer; }
.gi-crow:hover td { background: var(--yellow-l) !important; }
.gi-crow.open td { background: var(--yellow-l) !important; }
.gi-cname { display: flex; align-items: center; gap: 6px; }
.gi-kitb { padding: 0 6px; border: 2px solid var(--ink); border-radius: 6px; background: var(--lime); font-size: 10.5px; font-weight: 800; }
.gi-crow.kit .gi-cname b { color: var(--lime-d); }
.gi-apt { font-weight: 800; }
.gi-apt.a1 { color: #b3b8cc; } .gi-apt.a2 { color: #8e94ad; } .gi-apt.a3 { color: var(--ink-2); }
.gi-apt.a4 { color: var(--blue-d); } .gi-apt.a5 { color: var(--pink-d); }
.gi-apt.up { box-shadow: inset 0 -3px 0 var(--lime-d); } .gi-apt.down { box-shadow: inset 0 -3px 0 var(--pink); }
.gi-ctable td em { margin-left: 3px; font-style: normal; font-size: 10px; }
.gi-ctable td em.up { color: var(--lime-d); } .gi-ctable td em.down { color: var(--pink-d); }
.gi-detail td { padding: 12px 14px 16px !important; background: #fff !important; white-space: normal; }
.gi-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gi-dgrid h4 { margin: 0 0 8px; font-size: 16px; }
.gi-kitbox { padding: 12px 14px; border: 2px solid var(--lime-d); border-radius: 12px; background: var(--lime-l); }
.gi-kitdesc { margin: 0 0 4px; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.gi-kitdesc2 { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.gi-bonus { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.gi-bonus li { display: grid; grid-template-columns: 26px 64px 1fr; align-items: center; gap: 8px; font-size: 13.5px; }
.gi-bonus .w { font-weight: 800; color: var(--ink); }
.gi-bonus .g { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 7px; font-size: 12px; }
.g.gA { background: var(--pink); color: #fff; } .g.gB { background: var(--orange); } .g.gC { background: var(--yellow-l); }
.g.gD { background: var(--mist); color: var(--ink-2); } .g.gE { background: #dfe2ee; color: var(--ink-3); }

/* 펫 */
.gi-ptable td { vertical-align: top; }
.gi-famrow td { padding: 7px 14px !important; background: var(--teal-l) !important; font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.gi-kind { display: inline-block; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 7px; font-size: 12px; font-weight: 800; }
.gi-kind.buff { background: var(--lime-l); } .gi-kind.atk { background: var(--pink-l); }
.gi-eff { min-width: 150px; font-size: 13.5px !important; }
.gi-exp small { display: block; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.gi-food { max-width: 520px; }

/* 진급 · 기부 */
.gi-rk { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.gi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gi-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 4px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
.gi-chip em { font-style: normal; color: var(--blue-d); font-weight: 800; }
.gi-dtiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.gi-dtier { border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; }
.gi-dth { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 2px solid var(--ink); background: var(--yellow-l); font-weight: 800; font-size: 14px; }
.gi-dtier.r1 .gi-dth { background: var(--yellow); } .gi-dtier.r2 .gi-dth { background: #e3e7f2; } .gi-dtier.r3 .gi-dth { background: #f6d9b8; }
.gi-medal { padding: 0 9px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--font-display); font-weight: normal; font-size: 16px; }
.gi-dlist { margin: 0; padding: 6px 12px 10px; list-style: none; }
.gi-dlist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.gi-dlist li:last-child { border-bottom: 0; }
.gi-dlist li span { flex: 1; min-width: 0; }
.gi-dlist em { font-style: normal; color: var(--blue-d); font-weight: 800; white-space: nowrap; }

/* 명령어 */
.gi-cmds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.gi-cmdg { padding: 4px 16px 12px; border: 2px solid var(--line); border-radius: 14px; }
.gi-cmdg dl { margin: 0; }
.gi-cmdg dt { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gi-cmdg code { padding: 2px 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; }
.gi-alias { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.gi-cmdg dd { margin: 5px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 720px) {
	.gi-pane { padding: 14px 12px 16px; }
	.gi-sub { margin: -14px -12px 14px; }
	.gi-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gi-hide-s { display: none; }
	.gi-table td, .gi-table th { padding: 7px 9px; }
	.gi-lead { margin: -4px 12px 4px; }
}

/* 2026-10-24 펫 표가 좁게 눌려 이름·형태가 세로로 꺾였다 — 표에 최소 폭을 주고(틀 안에서 가로로 넘긴다) 그 칸은 안 꺾는다 */
.gi-ptable { min-width: 1080px; }
.gi-ptable .gi-it span, .gi-ptable .gi-kind { white-space: nowrap; }
.gi-ptable .gi-it { min-width: 150px; }
.gi-rtable { min-width: 760px; }
/* 계급표(2026-10-24) — 묶음(이등병~사령관)마다 tbody 하나 · 묶음 칸은 세로로 합친다 · 넓은 화면은 정원 상자를 오른쪽에 붙박이로 */
.gi-mlayout { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 1fr); gap: 18px; align-items: start; margin-top: 12px; }
.gi-mtable thead th { white-space: nowrap; }
.gi-mtable .gi-mic { width: 64px; padding-left: 6px; padding-right: 6px; text-align: center; }
.gi-mtable td.gi-mic img { display: inline-block; vertical-align: middle; }
.gi-mtable thead .gi-mgh { width: 96px; text-align: center; }
.gi-mtable th.gi-mgroup { width: 96px; padding: 6px 8px; border-bottom: 0; border-right: 1px dashed var(--line); background: var(--yellow-l); color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: normal; text-align: center; vertical-align: middle; white-space: nowrap; }
.gi-mtable tbody.gi-mgrp + tbody.gi-mgrp tr:first-child > * { border-top: 2px solid var(--line); }
.gi-mtable td { padding-top: 6px; padding-bottom: 6px; }
.gi-mname b { font-weight: 800; color: var(--ink); white-space: nowrap; }
.gi-quota { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1.5px solid var(--orange); border-radius: 999px; background: var(--yellow-l); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; vertical-align: 1px; }
.gi-qbox { position: sticky; top: 92px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--yellow-l); }
.gi-qbox h4 { margin: 0 0 10px; }
.gi-qbox ul { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.gi-qbox li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.gi-qbox li b { min-width: 58px; color: var(--ink); }
.gi-qbox p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 1000px) {
	.gi-mlayout { grid-template-columns: minmax(0, 1fr); }
	.gi-qbox { position: static; }
}
@media (max-width: 620px) {
	.gi-mtable td, .gi-mtable th { padding-left: 7px; padding-right: 7px; }
	.gi-mtable .gi-mic { width: 40px; padding-left: 4px; padding-right: 4px; }
	.gi-mtable thead .gi-mgh, .gi-mtable th.gi-mgroup { width: 58px; }
	.gi-mtable th.gi-mgroup { padding: 6px 4px; font-size: 15px; }
	.gi-mname .gi-quota { display: block; width: max-content; margin: 2px 0 0; }
}
i.gi-ic.none, i.gi-cic.none { font-style: normal; }

/* ════════ 2026-10-24 고객지원 AI 상담사 쿠루루 ════════════════════════════ */
.ai-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px 8px; }
.ai-face { width: 64px; height: 64px; flex: none; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow-l); }
.ai-ht { flex: 1; min-width: 0; }
.ai-ht h2 { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: 24px; line-height: 1.2; color: var(--ink); }
.ai-ht p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; word-break: keep-all; }
.ai-log { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; margin: 6px 22px 0; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--mist); overscroll-behavior: contain; }
.ai-m { display: flex; align-items: flex-start; gap: 8px; }
.ai-m.me { justify-content: flex-end; }
.ai-mface { width: 36px; height: 36px; flex: none; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow-l); }
.ai-bw { display: grid; gap: 6px; max-width: min(640px, 86%); }
.ai-b { padding: 10px 14px; border: 2px solid var(--ink); border-radius: 4px 16px 16px 16px; background: #fff; color: var(--ink); font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.ai-m.me .ai-b { max-width: min(520px, 82%); border-radius: 16px 4px 16px 16px; background: var(--lime-l); }
.ai-b.refused { background: var(--yellow-l); }
.ai-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-links .btn-xs { height: 28px; padding: 0 11px; font-size: 13px; border-radius: 999px; box-shadow: 0 2px 0 var(--ink); }
.ai-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12.5px; }
.ai-fb-b { padding: 3px 10px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 12px; font-weight: 800; cursor: pointer; }
.ai-fb-b:hover { border-color: var(--ink); color: var(--ink); }
.ai-fb-done { color: var(--lime-d); font-weight: 800; }
.ai-m.typing .ai-b { display: inline-flex; align-items: center; gap: 5px; padding: 14px; }
.ai-m.typing .ai-b i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: ai-dot 1s infinite ease-in-out; }
.ai-m.typing .ai-b i:nth-child(2) { animation-delay: 0.15s; }
.ai-m.typing .ai-b i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-m.typing .ai-b i { animation: none; opacity: 0.6; } }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 22px 0; }
.ai-chip { padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.ai-chip:hover { background: var(--yellow-l); }
.ai-form { display: flex; align-items: flex-end; gap: 8px; margin: 10px 22px 0; padding: 7px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
.ai-form:focus-within { box-shadow: 0 3px 0 var(--ink), 0 0 0 4px rgba(249, 190, 11, 0.45); }
.ai-form textarea { flex: 1; min-width: 0; max-height: 140px; padding: 8px 6px; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; }
.ai-note { margin: 8px 22px 18px; color: var(--ink-3); font-size: 12px; line-height: 1.55; word-break: keep-all; }
.ai-admin { padding: 12px 18px; }
.ai-admin summary { cursor: pointer; font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.ai-admin summary em { margin-left: 6px; font-family: var(--font-body); font-size: 12px; font-style: normal; color: var(--ink-3); }
.ai-admin-list { list-style: none; display: grid; gap: 2px; max-height: 440px; overflow-y: auto; margin: 10px 0 0; padding: 0; }
.ai-al { display: grid; grid-template-columns: 96px 76px minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ai-al-t { color: var(--ink-3); }
.ai-al-c { font-weight: 800; color: var(--ink-2); }
.ai-al.refused .ai-al-c { color: var(--pink-d); }
.ai-al.fb { background: var(--mist); }
.ai-al-q { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.ai-al-a { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
	.ai-head { padding: 14px 12px 8px; }
	.ai-face { width: 52px; height: 52px; }
	.ai-log, .ai-chips, .ai-form, .ai-note { margin-left: 12px; margin-right: 12px; }
	.ai-log { max-height: 60vh; padding: 10px; }
	.ai-al { grid-template-columns: 1fr; gap: 2px; }
}