/* 게임라운지 포털형 겉테 (2026-10-06)
   style.css 뒤에 읽힌다. 옛 왼쪽 사이드바 뼈대를 상단 메뉴 + 조밀한 상자 격자로 덮어쓴다.
   색은 style.css 의 토큰(--bg --surface --soft --ink --sub --faint --key --line …)만 쓴다.
   게임 표시색은 .gc-<slug> 의 --gc (base.html 의 <style> 이 siteconf.GAMES 에서 찍는다). */

:root { --wrap: 1240px; --gnb-h: 56px; --gc: var(--key); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 뼈대 ── */
.shell.shell--portal { display: block; min-height: 100vh; }
.shell--portal .body { display: block; }
.shell--portal .body__in { max-width: var(--wrap); padding: 18px var(--gutter) 40px; gap: 14px; }
.shell--portal main { gap: 14px; }
.gnb__wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── 상단 메뉴 ── */
.gnb { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.gnb__bar { border-bottom: 1px solid var(--line); }
.gnb__row { display: flex; align-items: center; gap: 16px; height: var(--gnb-h); }
.gnb__logo { flex: none; display: flex; align-items: center; font-family: var(--font-display); font-size: 21px; color: var(--ink); letter-spacing: -.5px; }
.gnb__logo em { font-style: normal; color: var(--key); }
.gnb__logo::before { content: ""; flex: none; width: 30px; height: 30px; margin-right: 7px; background: url("img/logo-mark.png?v=1") center / contain no-repeat; }
.gnb__search { flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; height: 38px; border: 1.5px solid var(--key); border-radius: 19px; background: var(--surface); overflow: hidden; }
.gnb__search input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.gnb__search button { flex: none; width: 40px; height: 100%; border: 0; background: transparent; color: var(--key); cursor: pointer; display: grid; place-items: center; }
.gnb__search svg, .gnb__icon svg { width: 18px; height: 18px; }
.gnb__end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.gnb__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.gnb__icon:hover { background: var(--soft); }
.gnb__searchlink { display: none; }
/* 회원 단추 — 옛 .topbar__acct 규칙을 모든 폭에서 보이게 다시 정한다 */
.gnb .gnb__acct { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  height: 36px; min-width: 36px; padding: 0 14px; border: 1px solid var(--key-line); border-radius: 18px;
  background: var(--key-soft); color: var(--key); font-size: 13px; font-weight: 700; }
.gnb .gnb__acct:hover { border-color: var(--key); }
.gnb .gnb__acct .member__avatar { width: 26px; height: 26px; font-size: 12px; }
.gnb .gnb__acct.is-in { padding: 0 4px; background: var(--surface); border-color: var(--line); }
.gnb .gnb__acct.is-in .topbar__acct-txt { display: none; }

/* 게임 줄 — 가로로 밀린다 */
.gnb__games { background: var(--surface); }
.gnb__tabs { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gnb__tabs::-webkit-scrollbar { display: none; }
.gtab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px;
  font-size: 14.5px; font-weight: 700; color: var(--sub); border-bottom: 3px solid transparent; white-space: nowrap; }
.gtab:hover { color: var(--ink); }
.gtab.is-on { color: var(--ink); border-bottom-color: var(--gc, var(--key)); }
.gtab--site { font-weight: 600; font-size: 13.5px; }
.gtab__sep { flex: 1 0 12px; }
.gtab__new { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; color: #fff; background: #e5484d; border-radius: 4px; padding: 1px 4px; line-height: 1.4; }

/* 게임 메뉴 줄 */
.gnb__sub { background: var(--soft); border-top: 1px solid var(--line); }
.gnb__subrow { display: flex; align-items: center; gap: 2px; height: 42px; overflow-x: auto; scrollbar-width: none; }
.gnb__subrow::-webkit-scrollbar { display: none; }
.gnb__subname { flex: none; display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; padding-right: 14px; border-right: 1px solid var(--line);
  font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; }
.stab { flex: none; padding: 6px 11px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--sub); white-space: nowrap; }
.stab:hover { color: var(--ink); background: var(--surface); }
.stab.is-on { color: #fff; background: var(--gc); }

/* 게임 아이콘(한 글자) · 칩 · 상태 */
.gmark { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--gc); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; font-family: var(--font-display); }
.gmark--lg { width: 44px; height: 44px; border-radius: 11px; font-size: 21px; }
.gmark--xl { width: 64px; height: 64px; border-radius: 16px; font-size: 30px; }
.gchip { flex: none; display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 700; line-height: 1.6;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); white-space: nowrap; }
.gstat { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.7; color: var(--sub); background: var(--soft); border: 1px solid var(--line); }
.gstat--new { color: #fff; background: #e5484d; border-color: #e5484d; }

/* ── 서랍(회원 · 전체 메뉴) — 모든 폭에서 오른쪽에서 들어온다 ── */
.shell--portal .side.drawer { position: fixed; top: 0; right: 0; left: auto; bottom: 0; height: auto; width: 340px; max-width: calc(100vw - 40px);
  z-index: 50; transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; visibility: hidden;
  display: flex; flex-direction: column; gap: 18px; padding: 18px; background: var(--surface); border-left: 1px solid var(--line); border-right: 0; box-shadow: none; }
.shell--portal .side.drawer.is-open { transform: none; visibility: visible; box-shadow: -8px 0 32px rgba(0,0,0,.28); }
.shell--portal .side.drawer .side__close { display: grid; }
body.is-drawer { overflow: hidden; }
.dgames { display: flex; flex-direction: column; gap: 10px; }
.dgame { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dgame__hd { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--ink); }
.dgame__hd small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--faint); }
.dgame__links { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.dgame__links a { font-size: 13px; color: var(--sub); padding: 3px 8px; border-radius: 6px; background: var(--soft); }
.dgame__links a:hover { color: var(--key); }
.shell--portal .side__nav { margin-top: 0; }

/* ── 상자 격자 ── */
.portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pbox { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; }
.pbox--games { grid-column: span 2; }
.pbox__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.pbox__hd h2 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); font-family: var(--font-body); }
.pbox__hd a { flex: none; font-size: 12.5px; color: var(--sub); }
.pbox__hd a:hover { color: var(--key); }
.pbox__hd--page h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.5px; font-family: var(--font-body); }
.pbox__count { font-size: 12.5px; color: var(--faint); }
.pbox__sub { display: flex; align-items: center; gap: 7px; margin: 12px 0 2px; font-size: 13.5px; font-weight: 800; }
.pbox__p { font-size: 13.5px; color: var(--sub); line-height: 1.7; margin: 8px 0 0; }
.pbox__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--gc, var(--key)); color: #fff; font: inherit; font-size: 13px; font-weight: 700; }
.pbtn:hover { filter: brightness(1.08); color: #fff; }

/* 글줄 목록 */
.rows { list-style: none; margin: 0; padding: 0; }
.rows__i { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rows__i:last-child { border-bottom: 0; }
.rows__t { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows__t:hover { color: var(--key); text-decoration: underline; text-underline-offset: 2px; }
.rows__d, .rows__c { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rows__c { color: #e5484d; font-weight: 700; }
.rows__k { flex: none; min-width: 58px; text-align: center; font-size: 11.5px; color: var(--sub); background: var(--soft); border-radius: 4px; padding: 1px 4px; }
.rows__b { flex: none; font-size: 12px; color: var(--faint); }
.rows__empty { padding: 14px 0; font-size: 13px; color: var(--faint); list-style: none; }
.rows--tight .rows__i { min-height: 34px; font-size: 13.5px; }
.rows__i.is-on .rows__t { color: var(--key); font-weight: 700; }

/* 게임 카드(홈) */
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.gcard { border: 1px solid var(--line); border-top: 3px solid var(--gc); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.gcard__main { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.gcard__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gcard__txt b { font-size: 16px; font-weight: 800; }
.gcard__txt > span { font-size: 13px; color: var(--sub); line-height: 1.55; word-break: keep-all; }
.gcard__main:hover b { color: var(--gc); }
.gcard__meta { display: flex; flex-wrap: wrap; gap: 5px; }
.gcard__meta a { font-size: 12.5px; padding: 3px 8px; border-radius: 5px; background: var(--soft); color: var(--sub); }
.gcard__meta a:hover { color: var(--ink); }

/* 출시 일정 */
.launch { list-style: none; margin: 0; padding: 0; }
.launch__i { display: flex; align-items: center; gap: 10px; padding: 12px 0 4px; }
.launch__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.launch__txt b { font-size: 14.5px; color: var(--ink); }
.launch__txt small { font-size: 12px; color: var(--faint); }
.launch__cd { flex: none; font-size: 13px; font-weight: 800; color: var(--gc); font-variant-numeric: tabular-nums; text-align: right; }

/* 필드 보스 */
.boss__today { font-size: 13px; color: var(--sub); margin: 8px 0; }
.boss__today b { color: var(--gc, var(--key)); }
.boss__t { width: 100%; border-collapse: collapse; font-size: 13px; }
.boss__t th { text-align: left; font-size: 11.5px; color: var(--faint); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.boss__t td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.boss__t td:first-child { white-space: normal; }
.boss__t td b { display: block; font-size: 13.5px; color: var(--ink); }
.boss__t td small { font-size: 11.5px; color: var(--faint); }
.boss__t tr.is-today td { background: color-mix(in srgb, var(--gc) 9%, transparent); }
.boss__t tr.is-today td:first-child b::after { content: "오늘"; margin-left: 6px; font-size: 10.5px; color: #fff; background: var(--gc); border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
.boss__go { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gc, var(--key)); }

/* 도구 줄 */
.trows { list-style: none; margin: 0; padding: 0; }
.trows__i { padding: 9px 0; border-bottom: 1px solid var(--line); }
.trows__i:last-child { border-bottom: 0; }
.trows__main { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.trows__ic { flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--soft); }
.trows__ic--txt { display: grid; place-items: center; font-size: 18px; color: var(--key); }
.trows__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.trows__txt b { font-size: 14px; }
.trows__txt span { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.trows__main:hover b { color: var(--key); }
.trows__sub { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0 46px; }
.trows__sub a { font-size: 12px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--sub); }
.trows__sub a:hover { color: var(--key); border-color: var(--key-line); }
.trows__sub--spec { margin: 8px 0 12px; }

/* 게시판 최신글 */
.blatest__links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.blatest__links a { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; background: var(--soft); color: var(--sub); }
.blatest__links a:hover { color: var(--key); }

/* ── 게임 쪽 띠 ── */
.ghero { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(110deg, color-mix(in srgb, var(--gc) 16%, var(--surface)), var(--surface) 70%); }
.ghero__txt { min-width: 0; flex: 1; }
.ghero__k { margin: 0 0 2px; }
.ghero__k .gstat { margin-left: 0; }
.ghero h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.8px; font-family: var(--font-body); color: var(--ink); }
.ghero__txt > p:last-child { margin: 4px 0 0; font-size: 14px; color: var(--sub); word-break: keep-all; }
.ghero__cd { flex: none; text-align: right; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.ghero__cd small { display: block; font-size: 12px; color: var(--faint); }
.ghero__cd b { font-size: 20px; font-weight: 800; color: var(--gc); font-variant-numeric: tabular-nums; }
.portal-grid--game { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── 공략 목록 표 ── */
.glist { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 14px; }
.glist th { font-size: 12px; font-weight: 600; color: var(--faint); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.glist td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.glist__no { width: 52px; text-align: center !important; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.glist__g { width: 110px; }
.glist__d { width: 92px; color: var(--faint); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.glist__t a { font-weight: 700; color: var(--ink); }
.glist__t a:hover { color: var(--key); text-decoration: underline; text-underline-offset: 2px; }
.glist__t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.glist__more { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; font-size: 13px; }
.glist__more a { color: var(--key); font-weight: 600; }

/* ── 공략 본문 ── */
.read { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.read__main { padding: 20px 28px 24px; }
.read__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--gnb-h) + 100px); }
.crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--faint); margin-bottom: 12px; }
.crumb a { color: var(--sub); }
.crumb a:hover { color: var(--key); }
.read__hd { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.read__hd h1 { margin: 10px 0 8px; font-size: 26px; line-height: 1.4; font-weight: 800; letter-spacing: -.7px; font-family: var(--font-body); color: var(--ink); word-break: keep-all; }
.read__sum { margin: 0 0 8px; font-size: 15px; color: var(--sub); line-height: 1.7; }
.read__meta { margin: 0; font-size: 12.5px; color: var(--faint); }
.read__meta a { color: var(--key); font-weight: 600; }
.toc { padding: 12px 16px; border-radius: 8px; background: var(--soft); margin-bottom: 18px; font-size: 13.5px; }
.toc b { font-size: 12.5px; color: var(--faint); }
.toc ol { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 2px; }
.toc a { color: var(--sub); }
.toc a:hover { color: var(--key); }
.read__body { font-size: 15.5px; line-height: 1.85; }
.read__body p, .read__body ul, .read__body ol { max-width: none; color: var(--ink); }
.read__body h2 { font-family: var(--font-body); font-size: 19px; font-weight: 800; margin: 30px 0 10px; padding-left: 10px; border-left: 4px solid var(--gc, var(--key)); scroll-margin-top: 130px; }
.read__body h3 { font-size: 16px; font-weight: 800; margin: 20px 0 8px; }
.read__body b { color: var(--ink); }
.read__body .tbl { overflow-x: auto; margin: 6px 0 16px; border: 1px solid var(--line); border-radius: 8px; }
.read__body table { margin: 0; font-size: 13.5px; min-width: 100%; }
.read__body th { background: var(--soft); font-size: 12.5px; white-space: nowrap; }
.read__body th, .read__body td { padding: 8px 10px; }
.read__body .note { max-width: none; font-size: 14px; color: var(--sub); background: var(--key-soft); border-left: 3px solid var(--key); border-radius: 6px; padding: 10px 14px; }
.read__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding: 16px 18px; border-radius: 10px;
  background: var(--gc); color: #fff; }
.read__cta small { display: block; font-size: 12px; opacity: .85; }
.read__cta b { font-size: 17px; }
.read__cta:hover { filter: brightness(1.07); color: #fff; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pn a { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pn a:hover { border-color: var(--key-line); color: var(--key); }
.pn small { display: block; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.pn__n { text-align: right; grid-column: 2; }

/* 검색 */
.sform { display: flex; gap: 8px; margin: 12px 0 6px; }
.sform input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.sform input:focus { border-color: var(--key); outline: none; }
.sres__state { font-size: 13px; color: var(--faint); margin: 8px 0; }
.rows__i .rows__sum { display: block; font-size: 12.5px; color: var(--sub); white-space: normal; }
.rows__i--search { align-items: flex-start; }
.rows__i--search .rows__t { white-space: normal; }

/* 도구 모음 머리 */
.tools-hd { display: flex; align-items: center; gap: 8px; }
.tools-hd__go { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--sub); font-family: var(--font-body); }

/* ── 폭별 ── */
@media (max-width: 1099px) {
  .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbox--games { grid-column: 1 / -1; }
  .read { grid-template-columns: minmax(0, 1fr); }
  .read__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .gnb__search { display: none; }
  .gnb__searchlink { display: grid; }
}
@media (max-width: 720px) {
  :root { --gnb-h: 52px; }
  .portal-grid, .portal-grid--game { grid-template-columns: minmax(0, 1fr); }
  .gcards { grid-template-columns: minmax(0, 1fr); }
  .read__side { grid-template-columns: minmax(0, 1fr); }
  .read__main { padding: 16px 16px 20px; }
  .read__hd h1 { font-size: 22px; }
  .read__body { font-size: 15px; }
  .ghero { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .ghero h1 { font-size: 23px; }
  .gmark--xl { width: 52px; height: 52px; font-size: 25px; }
  .ghero__cd { width: 100%; text-align: left; display: flex; align-items: baseline; justify-content: space-between; }
  .glist thead { display: none; }
  .glist__no { display: none; }
  .glist tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .glist td { padding: 0; border: 0; width: auto !important; }
  .glist__t { grid-column: 1 / -1; }
  .glist__g { grid-column: 1; }
  .glist__d { grid-column: 2; text-align: right; }
  .pn { grid-template-columns: 1fr; }
  .pn__n { grid-column: 1; }
}
@media (max-width: 480px) {
  .gnb__logo { font-size: 18px; }
  .gnb__logo::before { width: 26px; height: 26px; margin-right: 5px; }
  .gnb__row { gap: 8px; }
  .gnb__end { gap: 5px; }
  .gnb__icon { width: 34px; height: 34px; }
  .gnb .theme button { width: 30px; height: 30px; }
  .gnb .gnb__acct { height: 34px; padding: 0 10px; font-size: 12.5px; }
  .gtab { height: 42px; padding: 0 10px; font-size: 14px; }
  .shell--portal .body__in { padding-top: 12px; }
  .pbox { padding: 12px 13px 14px; }
}

/* 게임 한 글자 아이콘은 본문 글꼴로 — 표시 글꼴(에사만루)에 없는 글자가 있다 */
.gmark { font-family: var(--font-body); }
/* 공식 게임 아이콘 — 글자 배지와 같은 칸, 앱 아이콘처럼 둥근 모서리. 배경·글자 꾸밈은 없다 */
.gmark--img { display: inline-block; padding: 0; background: none; object-fit: cover; border-radius: 22%; vertical-align: middle; }
/* 공략 제목은 두 줄까지 */
.pbox--guides .rows__t, .read__side .rows__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
.ghero__cd b { white-space: nowrap; }

/* 2026-10-08 도술 아이콘 줄(md 「::도술」). 깨비지지 빌더의 사용 순서 띠와 같은 모양. 궁극기는 육각형. */
.skrow { margin: 8px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.skrow__h { display: block; font-size: 12.5px; font-weight: 800; color: var(--sub); margin-bottom: 6px; }
.read__body .skrow__l, .skrow__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; max-width: none; }
.skrow__l li { margin: 0; padding: 0; }
.sk { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; line-height: 1.3; color: var(--ink); }
.sk img { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; object-fit: cover; display: block; }
.sk__n { overflow-wrap: anywhere; }
.sk--ult { border-color: #e8a33a; }
.sk--ult img { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sk--ult .sk__n { font-weight: 800; }
.skrow__a { color: var(--faint, var(--sub)); font-weight: 800; font-size: 15px; padding: 0 1px; }
@media (max-width: 480px) { .sk { font-size: 12.5px; padding-right: 7px; } .sk img { width: 30px; height: 30px; flex-basis: 30px; } }

/* ── 홈 정보 레이아웃 (2026-10-11) ───────────────────────── */
.shell--portal .body:has(.lounge-home) { background:var(--bg); }
.lounge-home { max-width:1180px; margin:0 auto; padding:30px 0 48px; font-family:Pretendard,"Malgun Gothic",system-ui,sans-serif; }
.lounge-home a:focus-visible { outline:3px solid var(--key); outline-offset:3px; border-radius:10px; }
.lounge-home .lh-section-title { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin:0 0 14px; }
.lounge-home .lh-section-title p, .lounge-home .lh-kicker { margin:0; color:var(--key); font-size:12px; font-weight:800; letter-spacing:.045em; }
.lounge-home .lh-section-title h2 { margin:0; color:var(--ink); font-size:24px; line-height:1.3; letter-spacing:-.045em; }
.lounge-home .lh-toolcards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.lounge-home .lh-toolcard { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--gc); border-radius:16px; box-shadow:0 7px 22px rgba(29,48,83,.07); }
.lounge-home .lh-toolcard__head { display:flex; gap:11px; align-items:center; padding:20px 21px 15px; }
.lounge-home .lh-toolcard__head h3 { margin:0; color:var(--ink); font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.04em; }
.lounge-home .lh-toolcard__head p { margin:4px 0 0; color:var(--sub); font-size:13px; line-height:1.45; }
.lounge-home .lh-tooltiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 16px 17px; }
.lounge-home .lh-tooltiles--four { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lounge-home .lh-tooltiles:not(.lh-tooltiles--four) .lh-tile:last-child { grid-column:1 / -1; }
.lounge-home .lh-tile { display:flex; align-items:center; gap:10px; min-width:0; min-height:82px; padding:11px; color:var(--ink); background:var(--soft); border:1px solid transparent; border-radius:12px; text-decoration:none; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.lounge-home .lh-tile:hover { background:var(--surface); border-color:color-mix(in srgb,var(--gc) 42%,var(--line)); box-shadow:0 6px 16px color-mix(in srgb,var(--gc) 15%,transparent); transform:translateY(-2px); }
.lounge-home .lh-tile__icon { flex:0 0 40px; width:40px; height:40px; padding:9px; color:var(--gc); background:color-mix(in srgb,var(--gc) 13%,var(--surface)); border-radius:11px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lounge-home .lh-tile__copy { display:block; min-width:0; }
.lounge-home .lh-tile__copy b, .lounge-home .lh-tile__copy span { display:block; overflow:visible; white-space:normal; word-break:keep-all; }
.lounge-home .lh-tile__copy b { font-size:16px; font-weight:800; letter-spacing:-.035em; }
.lounge-home .lh-tile__copy span { margin-top:4px; color:var(--sub); font-size:13px; line-height:1.3; }
.lounge-home .lh-content-grid { display:grid; grid-template-columns:minmax(0,1.72fr) minmax(315px,.95fr); gap:18px; align-items:start; margin-top:28px; }
.lounge-home .lh-main-column, .lounge-home .lh-side { display:grid; gap:18px; align-content:start; }
.lounge-home .pbox { min-width:0; padding:21px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 18px rgba(29,48,83,.055); }
.lounge-home .pbox__hd { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:0 0 11px; padding:0 0 12px; border-bottom:1px solid var(--line); }
.lounge-home .pbox__hd h2 { margin:0; color:var(--ink); font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.045em; }
.lounge-home .pbox__hd a { flex:none; color:var(--sub); font-size:13px; font-weight:700; text-decoration:none; }
.lounge-home .pbox__hd a:hover { color:var(--key); }
.lounge-home .lh-list-game { display:inline-flex; margin:0 0 4px; color:var(--gc); font-size:12px; font-weight:800; text-decoration:none; }
.lounge-home .rows { margin:0; padding:0; list-style:none; }
.lounge-home .rows__i { display:flex; align-items:center; gap:10px; min-width:0; min-height:52px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px; }
.lounge-home .rows__i:last-child { border-bottom:0; }
.lounge-home .rows__t { flex:1 1 auto; min-width:0; color:var(--ink); font-size:15px; font-weight:650; line-height:1.5; text-decoration:none; }
.lounge-home .rows__t:hover { color:var(--key); text-decoration:underline; text-underline-offset:3px; }
.lounge-home .rows__d, .lounge-home .rows__c { flex:none; color:var(--faint); font-size:12px; font-weight:600; }
.lounge-home .lh-side .pbox { padding:20px; }
.lounge-home .lh-side .pbox__hd h2 { font-size:18px; }
.lounge-home .boss__today { margin:0 0 11px; color:var(--sub); font-size:14px; line-height:1.5; }
.lounge-home .boss__t { width:100%; border-collapse:collapse; font-size:13px; }
.lounge-home .boss__t th { padding:6px; color:var(--faint); font-size:12px; text-align:left; }
.lounge-home .boss__t td { padding:9px 6px; border-top:1px solid var(--line); }
.lounge-home .boss__t td b { font-size:14px; }
.lounge-home .boss__t td small { color:var(--sub); font-size:12px; }
.lounge-home .boss__go { display:inline-block; margin-top:12px; color:var(--gc); font-size:13px; font-weight:800; text-decoration:none; }
.lounge-home .pbox--board .rows__i { align-items:flex-start; min-height:57px; }
.lounge-home .pbox--board .rows__t { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
.lounge-home .pbox--board .gchip { flex:none; margin-top:2px; font-size:10px; }
.lounge-home .pbox--board .rows__b { flex:none; padding-top:3px; color:var(--sub); font-size:12px; }
.lounge-home .blatest__links { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.lounge-home .blatest__links a { padding:6px 9px; color:var(--sub); background:var(--soft); border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; }
.lounge-home .lh-doclinks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.lounge-home .lh-doclinks li + li { border-left:1px solid var(--line); }
.lounge-home .lh-doclinks a { display:block; padding:5px 15px; color:var(--ink); text-decoration:none; }
.lounge-home .lh-doclinks a:hover { color:var(--key); }
.lounge-home .lh-doclinks b, .lounge-home .lh-doclinks span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lounge-home .lh-doclinks b { font-size:15px; font-weight:750; }
.lounge-home .lh-doclinks span { margin-top:5px; color:var(--sub); font-size:13px; }
.lounge-home .lh-invite { display:flex; justify-content:space-between; align-items:center; gap:24px; background:linear-gradient(120deg,var(--surface),var(--key-soft)); }
.lounge-home .lh-content-grid > .lh-invite { grid-column:1 / -1; }
.lounge-home .lh-invite h2 { margin:2px 0 0; color:var(--ink); font-size:20px; letter-spacing:-.04em; }
.lounge-home .lh-invite p:not(.lh-kicker) { margin:7px 0 0; color:var(--sub); font-size:14px; line-height:1.55; }
.lounge-home .pbox__btns { display:flex; flex:0 1 460px; gap:9px; }
.lounge-home .pbtn { flex:1; padding:11px 12px; border-radius:9px; color:#fff; font-size:13px; font-weight:800; text-align:center; text-decoration:none; }
@media (max-width:1099px) { .lounge-home { padding:26px 0 40px; } .lounge-home .lh-content-grid { grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr); } }
@media (max-width:720px) { .lounge-home { padding:19px 0 30px; } .lounge-home .lh-section-title h2 { font-size:22px; } .lounge-home .lh-toolcards, .lounge-home .lh-content-grid { grid-template-columns:1fr; gap:13px; } .lounge-home .lh-toolcard__head { padding:17px 17px 13px; } .lounge-home .lh-toolcard__head h3 { font-size:18px; } .lounge-home .lh-tooltiles { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 13px 14px; gap:8px; } .lounge-home .lh-tile { min-height:78px; gap:8px; padding:9px; border-radius:10px; } .lounge-home .lh-tile__icon { flex-basis:36px; width:36px; height:36px; padding:8px; border-radius:9px; } .lounge-home .lh-tile__copy b { font-size:14px; } .lounge-home .lh-tile__copy span { font-size:12px; } .lounge-home .lh-content-grid { margin-top:22px; } .lounge-home .lh-main-column, .lounge-home .lh-side { display:contents; } .lounge-home .pbox { padding:18px; } .lounge-home .lh-side .pbox { padding:18px; } .lounge-home .pbox--boss { order:1; } .lounge-home .lh-guides { order:2; } .lounge-home .pbox--board { order:3; } .lounge-home .pbox--docs { order:4; } .lounge-home .lh-invite { order:5; display:block; } .lounge-home .pbox__hd h2 { font-size:19px; } .lounge-home .rows__i { min-height:55px; } .lounge-home .rows__t { font-size:15px; } .lounge-home .pbox--board .rows__i { min-height:59px; } .lounge-home .lh-doclinks { grid-template-columns:1fr; } .lounge-home .lh-doclinks li + li { border-top:1px solid var(--line); border-left:0; } .lounge-home .lh-doclinks a { padding:11px 0; } .lounge-home .lh-doclinks li:first-child a { padding-top:0; } .lounge-home .lh-doclinks li:last-child a { padding-bottom:0; } .lounge-home .pbox__btns { margin-top:15px; } }
@media (max-width:420px) { .lounge-home .lh-tile { flex-direction:column; align-items:flex-start; min-height:116px; } .lounge-home .lh-tile__icon { flex-basis:36px; } .lounge-home .lh-tile__copy span { line-height:1.35; } }
:root[data-theme="dark"] .lounge-home .gc-dokkaebi { --gc:#b69cff; }
:root[data-theme="dark"] .lounge-home .pbtn.gc-dokkaebi, :root[data-theme="dark"] .lounge-home .boss__t tr.is-today td:first-child b::after { color:#20162d; }


/* 홈 외 포털 본문도 같은 글꼴·여백 리듬을 쓴다. */
.shell--portal main:not(:has(.lounge-home)) .pbox{padding:20px;border-radius:14px;box-shadow:0 5px 18px rgba(29,48,83,.055)}
.shell--portal main:not(:has(.lounge-home)) .pbox__hd{padding-bottom:11px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.shell--portal main:not(:has(.lounge-home)) .pbox__hd h2{font-size:20px;font-weight:800}
.shell--portal main:not(:has(.lounge-home)) .rows__i{min-height:46px;padding:8px 0;font-size:15px}
.shell--portal main:not(:has(.lounge-home)) .rows__t{font-size:15px;font-weight:650}
.shell--portal main:not(:has(.lounge-home)) .trows__i{padding:12px 0}
.shell--portal main:not(:has(.lounge-home)) .trows__txt b{font-size:16px;font-weight:750}
.shell--portal main:not(:has(.lounge-home)) .trows__txt span{font-size:13px;line-height:1.55}
.lounge-home .lh-toolcard__head .gmark{width:28px;height:28px;border-radius:8px;font-size:14px}