/* 고대신(신과의 계약) — 신 고르기 · 각인판 · 고른 칸 (076) */

.god-search { width: 14rem; }

/* ── 신 고르기 ─────────────────────────────────────────────────────────── */
.god-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.god-tab {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .7rem;
    border: 1px solid var(--ls-border);
    border-radius: .3rem;
    background: var(--ls-surface);
    color: var(--ls-text-2);
    font-size: .8125rem;
    cursor: pointer;
}
.god-tab:hover { border-color: var(--ls-primary); color: var(--ls-accent); }
.god-tab.is-on { background: var(--ls-primary); border-color: var(--ls-primary); color: #fff; font-weight: 600; }
.god-tab em { font-style: normal; opacity: .65; font-size: .75rem; }

/* ── 본문 — 왼쪽 각인판, 오른쪽 설명 ─────────────────────────────────── */
/* 오른쪽 칸은 **줄어들 수 있어야** 한다 (2026-10-04 제보 "안보여" — 창 밖으로 나가 잘렸다).
   `17rem` 으로 못박아 두면 글꼴이 크거나 창이 좁을 때 칸 안의 글이 칸 밖으로 비어져 나가
   문서가 창보다 넓어진다. minmax 로 바꾸고 min-width 를 풀어 둔다. */
.god-body {
    display: flex; flex-wrap: wrap;
    gap: 1rem; align-items: flex-start;
    max-width: 100%;
}
/* **자리가 모자라면 오른쪽 칸이 저절로 아래로 내려간다.** 전에는 격자로 두 칸을
   못박아 둬서, 창이 좁거나 글꼴이 크면 오른쪽 칸이 창 밖으로 밀려 잘렸다
   (2026-10-04 제보 "안보여"). 분기점을 손으로 정하지 않는다 — 폭이 얼마든
   둘이 못 들어가면 접힌다. */
/* 가운데 판만 늘어난다 — 양옆은 제 폭만 쓰고 **줄어들 수 있어야** 한다.
   `min-width: 0` 과 `flex-grow: 0` 이 없으면 긴 이름(「프레이야의 성혼」) 때문에 칸이
   17rem 을 훌쩍 넘겨 자리를 먹고, 1920 아래에서 오른쪽 칸이 통째로 아래로 접혔다
   (2026-10-04 에 재 보니 오른쪽이 430px 를 차지하고 있었다). */
.god-board-wrap { flex: 1 1 24rem; order: 2; }
/* 왼쪽 = 정해진 참고값(검색 · 스텟 합계) · 오른쪽 = 누를 때마다 바뀌는 것 (2026-10-04 제보).
   자리가 모자라면 둘 다 판 아래로 내려가되 **왼쪽이 먼저** 온다 (order). */
.god-ref  { flex: 0 1 15rem; max-width: 100%; min-width: 0; order: 1;
            display: flex; flex-direction: column; gap: .75rem; overflow-wrap: anywhere; }
.god-ref ul, .god-ref li { min-width: 0; }
.god-actions { display: grid; gap: .4rem; }
/* 게임 규칙 토글 (2026-10-05) — 단추들과 같은 자리에 선다 */
.god-rule {
    display: flex; align-items: center; gap: .45rem;
    padding: .35rem .5rem; border: 1px solid var(--ls-border); border-radius: .4rem;
    background: var(--ls-surface); font-size: .82rem; cursor: pointer; user-select: none;
}
.god-rule input { cursor: pointer; margin: 0; flex: 0 0 auto; }
.god-rule span { min-width: 0; overflow-wrap: anywhere; }
.god-side { flex: 0 1 17rem; max-width: 100%; order: 3; }
.god-sum-stat { display: flex; flex-direction: column; gap: .75rem; }
.god-stat-box { border: 1px solid var(--ls-border); border-radius: .4rem; background: var(--ls-surface); }
.god-stat-box .god-sum-list { max-height: 28rem; overflow-y: auto; }
/* 판은 가운데로 모은다. 크기는 JS 가 가운데 영역 폭에 맞춰 줄이므로 이 래퍼는
   스크롤 컨테이너로 만들지 않는다. overflow-x:hidden 은 overflow-y 를 auto 로 바꿔
   세로 스크롤바를 만들고, 판 위로 나온 칸/배경도 잘라 버렸다. */
.god-board-wrap { min-width: 0; overflow: visible; }
.god-board-wrap > .god-board { margin-inline: auto; }

/* ── 서브 각인판 (마부, 145) ───────────────────────────────────────────
   석판 위에 셋을 나란히. 좁아지면 아래로 접힌다. 값이 범위라 합계가 없어,
   숫자를 칩으로 늘어놓기만 한다 (칸 넷 = 왼쪽부터 밝히는 차례). */
.god-sub {
    display: grid;
    /* 셋이 한 줄에 서야 한다 (72 · 78 · 75). rem 은 20px 라 13rem = 260px —
       석판 자리가 900px 안팎이라 셋이 들어간다. 좁아지면 min(…, 100%) 로 접힌다 */
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: .6rem;
    margin-bottom: .9rem;
}
.god-sub-card {
    border: 1px solid var(--ls-border);
    border-radius: .45rem;
    background: var(--ls-surface);
    padding: .55rem .7rem;
}
.god-sub-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.god-sub-need { font-weight: 600; }
.god-sub-list { list-style: none; margin: 0; padding: 0; }
.god-sub-list li { padding: .18rem 0; line-height: 1.35; }
.god-sub-list li + li { border-top: 1px dashed var(--ls-border-2); }
.god-sub-list b { display: inline-block; min-width: 4.6rem; }
.god-sub-steps { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .3rem; }
.god-sub-step {
    padding: 0 .35rem;
    border: 1px solid var(--ls-border-2);
    border-radius: .25rem;
    background: var(--ls-soft);
    font-size: var(--pg-font-badge, .8rem);
    white-space: nowrap;
}
/* 마지막 칸이 제일 세다 — 눈에 띄게 */
.god-sub-step:last-child { border-color: var(--ls-primary); }
.god-sub-fx { display: block; }
/* 스탯 한 줄의 전체 폭 — '0.5% ~ 3%' (칸 넷을 통틀어) */
.god-sub-span { color: var(--ls-muted); margin-left: .3rem; }
/* 78칸 판은 셋 중 하나를 고른다.
   글자는 다른 판과 같게 둔다 — <label> 은 Velzon 에서 굵기 500 을 받아 혼자 도드라졌다 */
.god-sub-opt {
    display: flex; align-items: baseline; gap: .4rem;
    cursor: pointer; margin: 0;
    font-weight: 400;
}
.god-sub-opt input { margin-top: .25rem; flex: 0 0 auto; }

/* 고른 전투 버프 — 오른쪽 칸의 스텟 합계 바로 위 */
.god-buff-body { line-height: 1.35; padding-bottom: .35rem; }

/* 칸은 자리(X/Y)대로 놓는다 — 게임 각인판과 같은 모양 */
/* width 는 칸 수만큼만 — 늘어나 있으면 판 그림이 가운데를 못 잡는다 (082) */
.god-board { --god-cell: 3.1rem; --god-pitch: calc(var(--god-cell) + .2rem); display: grid; gap: .2rem; width: max-content; }
.god-cell {
    display: flex; align-items: center; justify-content: center;
    padding: .1rem;
    border: 1px solid var(--ls-border-2);
    border-radius: .35rem;
    background: var(--ls-soft);
    color: var(--ls-text-2);
    font-size: .68rem; line-height: 1.15;
    text-align: center;
    word-break: keep-all;
    cursor: pointer;
    transition: border-color .12s, background .12s, opacity .12s;
}
.god-cell:hover { border-color: var(--ls-primary); background: var(--ls-primary-soft); }
.god-cell.is-on { border-color: var(--ls-primary); background: var(--ls-primary); color: #fff; font-weight: 600; }
.god-cell.is-special { border-color: var(--ls-warn-text-2); background: var(--ls-warn-bg-2); }
.god-cell.is-dim { opacity: .25; }        /* 검색에 안 걸린 칸 */
/* 게임 규칙을 켰을 때 아직 이어지지 않아 못 밝히는 칸 (2026-10-05). 검색에서 흐려진 것과
   달리 **누르면 효과는 보여 주므로** 완전히 지우지 않고 반쯤 둔다 */
.god-cell.is-locked { opacity: .45; filter: grayscale(.6); }
.god-cell.is-locked:hover { border-color: var(--ls-border); background: transparent; }

/* ── 오른쪽 ────────────────────────────────────────────────────────────── */
/* 긴 이름(「프레이야의 성혼」)이 칸보다 길면 **줄을 바꿔** 넘긴다 — 전에는 그대로
   비어져 나가 창 밖으로 잘렸다 (2026-10-04 제보) */
.god-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; overflow-wrap: anywhere; }
.god-side ul, .god-side li { min-width: 0; }
.god-pick {
    padding: .7rem;
    border: 1px solid var(--ls-border);
    border-radius: .4rem;
    background: var(--ls-surface);
    min-height: 7rem;
}
.god-pick-head { display: flex; align-items: center; gap: .6rem; }
.god-pick-name { flex: 1 1 auto; min-width: 0; font-size: .95rem; }
.god-pick-head .god-pick-cost { margin: 0 0 0 auto; flex: 0 0 auto; justify-content: flex-end; }
.god-pick-desc { margin-top: .4rem; font-size: .85rem; line-height: 1.5; word-break: keep-all; }
.god-pick-meta { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .74rem; color: var(--ls-muted); }
.god-special { color: var(--ls-warn-text-2); font-weight: 600; }

.god-sum { border: 1px solid var(--ls-border); border-radius: .4rem; background: var(--ls-surface); }
.god-sum-head { padding: .45rem .7rem; border-bottom: 1px solid var(--ls-border); font-size: .8rem; font-weight: 600; }
.god-sum-list { list-style: none; margin: 0; padding: .3rem .7rem .5rem; font-size: .8rem; }
.god-sum-list li { display: flex; align-items: center; gap: .5rem; padding: .12rem 0; }
.god-sum-list li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ls-text-2); }
.god-sum-list li em { font-style: normal; color: var(--ls-muted); }

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .god-board { --god-cell: 2.6rem; }
    .god-search { width: 100%; }
}

/* ── 칸 석판·신 얼굴 (080) ────────────────────────────────────────────────
   칸 배경은 등급별 석판 그림이다 (밝힘=밝은 것, 아니면 어두운 것). 그림은 여덟 장뿐이라
   칸이 76개여도 브라우저는 여덟 번만 받는다. 글자가 묻히지 않게 살짝 그림자를 준다. */
.god-cell {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-color: transparent;
    /* 석판이 어두운 돌이라 글자는 밝게 — 밝을 때도 어두울 때도 같다 */
    color: rgb(255 255 255 / .92);
    text-shadow: 0 1px 2px rgb(0 0 0 / .85);
}
.god-cell.is-lit { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .7); font-weight: 600; }
.god-cell:hover { border-color: var(--ls-primary); background-color: transparent; }
.god-cell.is-on { outline: 2px solid var(--ls-primary); outline-offset: 1px; background-color: transparent; }

/* 신 고르기 단추의 얼굴 */
.god-face { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }

.god-sum-head { display: flex; align-items: center; gap: .4rem; }
.god-sum-lit { margin-left: auto; font-weight: 400; font-size: .74rem; color: var(--ls-accent); }
.god-sum-clear {
    display: block; width: 100%;
    padding: .3rem;
    border: 0; border-top: 1px solid var(--ls-border);
    background: none; color: var(--ls-muted);
    font-size: .75rem; cursor: pointer;
}
.god-sum-clear:hover { color: var(--ls-accent); background: var(--ls-soft); }

/* ── 각인판 배경 · 드는 자원 · 스텟 합계 (082) ───────────────────────────
   판 그림은 칸 하나를 늘 100px 로 그렸는데 그림 자체의 크기·여백은 신마다 다르다.
   그래서 배경으로 깔지 않고, DB 가 재 둔 네 값으로 칸 뒤에 정확히 놓는다 (085 에서 다시 쟀다).
   board_x · board_y 는 **첫 칸의 한가운데** 기준이라 여기서 한 칸의 절반을 더한다.
   칸보다 뒤(z-index 0)에 두고 마우스는 통과시킨다. */
.god-board.has-board { position: relative; }
.god-board.has-board::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: calc(var(--god-cell) / 2 + var(--god-board-x) * var(--god-pitch));
    top: calc(var(--god-cell) / 2 + var(--god-board-y) * var(--god-pitch));
    width: calc(var(--god-board-w) * var(--god-pitch));
    height: calc(var(--god-board-h) * var(--god-pitch));
    background: var(--god-board-img) center / 100% 100% no-repeat;
}
.god-cell { position: relative; z-index: 1; }

.god-cost { border: 1px solid var(--ls-border); border-radius: .4rem; background: var(--ls-surface); }
.god-res { list-style: none; margin: 0; padding: .35rem .7rem .5rem; font-size: .8rem; }
.god-res li { display: flex; align-items: center; gap: .45rem; padding: .15rem 0; }
.god-res li img, .god-chip-blank { width: 1.15rem; height: 1.15rem; flex: none; object-fit: contain; }
.god-res li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ls-text-2); }
.god-res li em { font-style: normal; font-weight: 600; color: var(--ls-text); }

/* 고른 칸이 먹는 자원 — 칩으로 나란히 */
.god-pick-cost { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.god-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .1rem .4rem;
    border: 1px solid var(--ls-border-2); border-radius: .8rem;
    background: var(--ls-soft);
    font-size: .74rem; color: var(--ls-text-2);
}
.god-chip img { width: 1rem; height: 1rem; object-fit: contain; }
.god-chip b { color: var(--ls-text); }
.god-stat li em { color: var(--ls-accent); font-weight: 600; }

/* 칸 갈래 아이콘 (083) — 석판 위에 얹는다. 석판에 테두리 여백이 있어 조금 줄여 넣는다 */
.god-cell-icon { width: 72%; height: 72%; object-fit: contain; pointer-events: none; }

/* [이 칸 밝히기] — 칸을 두 번 눌러야 하는 것을 모르는 사람이 많아 단추로도 둔다 */
.god-light {
    display: block; width: 100%;
    margin-top: .55rem;
    padding: .3rem;
    border: 1px solid var(--ls-primary); border-radius: .3rem;
    background: var(--ls-surface); color: var(--ls-accent);
    font-size: .8rem; font-weight: 600; cursor: pointer;
}
.god-light:hover { background: var(--ls-primary-soft); }
.god-light.is-on { background: var(--ls-primary); border-color: var(--ls-primary); color: #fff; }

/* ── 시뮬레이터 ↔ 스텟 (2026-10-04 제보) ────────────────────────────────
   "고대신 찍는거 시뮬레이터는 시뮬만 딱 두고 / 스탯은 스탯끼리 분류하는 방식으로".
   마부(72·75판) 값은 범위에서 굴리는 것이라 사람마다 다르다 — 적는 칸을 주고
   풀스텟 대비 달성도를 센다. 적은 값은 이 기계에만 남는다. */
.god-views { display: flex; gap: .3rem; margin-bottom: .75rem; }
.god-view {
    padding: .3rem .9rem;
    border: 1px solid var(--ls-border);
    border-radius: .3rem;
    background: var(--ls-surface);
    color: var(--ls-text-2);
    font-size: .8125rem;
    cursor: pointer;
}
.god-view:hover { border-color: var(--ls-primary); color: var(--ls-accent); }
.god-view.is-on { background: var(--ls-primary); border-color: var(--ls-primary); color: #fff; font-weight: 600; }

.god-stat-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.god-stat-top .god-views { margin-bottom: 0; }
.god-stat-help { flex: 0 1 auto; }

/* 카드를 폭에 맞춰 흘린다 — 스텟별이든 신별이든 같은 꼴이다 */
.gs-wrap {
    display: grid;
    /* min(…, 100%) 이라야 아주 좁은 창에서도 칸이 밖으로 안 나간다 */
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: .6rem;
}
.gs-card {
    border: 1px solid var(--ls-border);
    border-radius: .35rem;
    background: var(--ls-surface);
    padding: .5rem .6rem;
}
.gs-head {
    display: flex; align-items: center; gap: .4rem;
    padding-bottom: .35rem; margin-bottom: .35rem;
    border-bottom: 1px solid var(--ls-border);
    font-size: .8125rem;
}
.gs-head b { flex: 1 1 auto; }
.gs-head span { color: var(--ls-text-2); font-size: .75rem; }
.gs-list { list-style: none; margin: 0; padding: 0; }
.gs-list + .gs-list { margin-top: .4rem; border-top: 1px dashed var(--ls-border); padding-top: .4rem; }
.gs-list li { display: flex; align-items: center; gap: .35rem; padding: .12rem 0; font-size: .8rem; }
.gs-who { flex: 1 1 auto; color: var(--ls-text-2); }
.gs-full { color: var(--ls-muted); font-size: .75rem; min-width: 3.2rem; }
.gs-sub { color: var(--ls-muted); font-size: .72rem; font-weight: 600; }
.gs-total { border-top: 1px dotted var(--ls-border); margin-top: .15rem; padding-top: .25rem; }
.gs-in {
    width: 3.6rem; padding: .1rem .3rem;
    border: 1px solid var(--ls-border); border-radius: .25rem;
    background: var(--ls-bg, var(--ls-surface)); color: var(--ls-text);
    font-size: .8rem; text-align: right;
}
.gs-in:focus { outline: none; border-color: var(--ls-primary); }
.gs-pct { font-style: normal; font-weight: 600; min-width: 2.6rem; text-align: right; color: var(--ls-text-2); }
.gs-pct.is-high { color: var(--ls-accent); }
.gs-pct.is-low { color: var(--vz-danger, #f06548); }

/* 가운데 '신과 계약하기' 칸 — 끌 수 없으니 단추가 아니라 글이다 (2026-10-04) */
.god-light.is-fixed {
    border-style: dashed;
    background: var(--ls-soft);
    color: var(--ls-text-2);
    font-weight: 400; font-size: .75rem;
    cursor: default;
    line-height: 1.35;
}

/* 스텟 화면의 두 덩이 — 석판 스텟 · 마부 스텟 (2026-10-04) */
.gs-sec + .gs-sec { margin-top: 1.1rem; }
.gs-sec-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding-bottom: .35rem; margin-bottom: .55rem;
    border-bottom: 1px solid var(--ls-border);
}
.gs-sec-head b { font-size: .9rem; }
.gs-sec-btns { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
/* 석판 스텟은 적는 칸이 아니라 센 값이다 — 입력칸과 자리를 맞춰 오른쪽으로 민다 */
.gs-cur { width: 3.6rem; text-align: right; font-weight: 600; }

/* 게임 레벨 조건 안내 (256) — 막지는 않고 적어만 준다 */
.god-pick-note {
    margin-top: .4rem; padding: .35rem .5rem; border-radius: .35rem;
    background: var(--ls-warn-bg-2); color: var(--ls-warn-text-2);
    font-size: .76rem; line-height: 1.45; overflow-wrap: anywhere;
}