/* 온라인 마도서 입구. 색은 site.css 의 --clr-* 만 쓴다. */

.gm { max-width: 720px; --clr-live: #f5a623; --clr-live-ink: #241a06; }  /* 실시간은 botc 처럼 주황 */
/* 고르는 화면의 강조색: 실시간은 주황, 클래식은 사이트 보라 */
.gm, .gm[data-mode="live"] { --gm-pick: var(--clr-live); --gm-pick-ink: var(--clr-live-ink); --gm-pick-hover: #e2940e; }
.gm[data-mode="classic"] { --gm-pick: var(--clr-accent); --gm-pick-ink: #fff; --gm-pick-hover: var(--clr-accent-hover); }
.gm-title { font-size: 1.35rem; font-weight: 800; margin: .25rem 0 1rem; }

.gm-current { display: none; padding: 1rem 1.1rem; border-radius: 14px; background: var(--clr-surface); border: 1px solid var(--clr-border); }
.gm[data-mode="live"] .gm-current[data-for="live"],
.gm[data-mode="classic"] .gm-current[data-for="classic"] { display: block; }
.gm-current-head { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; }
.gm-current-head i { color: var(--clr-accent); }
.gm-current[data-for="live"] .gm-current-head i { color: var(--clr-live); }
.gm-current p { margin: .5rem 0 0; color: var(--clr-muted); font-size: .9rem; line-height: 1.6; }
.gm-badge {
    margin-left: auto; padding: .15rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
    color: var(--clr-accent); background: color-mix(in srgb, var(--clr-accent) 15%, transparent);
}
.gm-hint { margin: .9rem 0 0; font-size: .82rem; color: var(--clr-muted); }
.gm-hint i { margin-right: .3rem; }

/* ── 처음 묻는 창 */
.gm-dialog {
    /* 공통 CSS 가 dialog 의 기본 margin:auto 를 지워 왼쪽 위에 붙는다. 가운데를 직접 잡는다. */
    position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto;
    width: min(560px, calc(100vw - 32px)); padding: 1.4rem; border: 1px solid var(--clr-border); border-radius: 16px;
    background: var(--clr-bg); color: var(--clr-text);
}
.gm-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.gm-dialog h2:focus { outline: 0; }
.gm-dialog h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 800; text-align: center; }
.gm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 520px) { .gm-choices { grid-template-columns: 1fr; } }
.gm-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem; text-align: left;
    border-radius: 12px; border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text);
    font: inherit; cursor: pointer; transition: border-color .12s;
}
.gm-choice:hover, .gm-choice:focus-visible { border-color: var(--clr-accent); outline: 0; }
.gm-choice i { font-size: 1.3rem; color: var(--clr-accent); }
.gm-choice-live i { color: var(--clr-live); }
.gm-choice-live:hover, .gm-choice-live:focus-visible { border-color: var(--clr-live); background: color-mix(in srgb, var(--clr-live) 8%, var(--clr-surface)); }
.gm-choice strong { font-size: 1rem; }
.gm-choice span { font-size: .8rem; line-height: 1.55; color: var(--clr-muted); }
.gm-dialog-note { margin: 1rem 0 0; font-size: .8rem; color: var(--clr-muted); text-align: center; }
.gm-dialog-note i { margin-right: .3rem; }

/* ── 캐릭터 고르기 (실시간·클래식 공통) */
.gm[data-mode="live"], .gm[data-mode="classic"] { max-width: none; }
.gm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .9rem; }
.gm-head .gm-title { margin: 0; display: flex; align-items: center; gap: .5rem; }
.gm-head .gm-title i { color: var(--gm-pick); font-size: 1.1rem; }
.gm-head .gm-hint { margin: 0; }

/* 시트 줄: 넓으면 한 줄에 펼치고, 좁으면 옆으로 넘긴다 */
.gl-sheets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .55rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gl-sheets::-webkit-scrollbar { display: none; }
.gl-sheet {
    display: flex; flex-direction: column; justify-content: center; gap: .2rem; min-height: 64px; padding: .7rem .9rem;
    border-radius: 12px; border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text);
    text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: border-color .12s, background .12s;
}
.gl-sheet:hover { color: var(--clr-text); }
.gl-sheet b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-sheet span { font-size: .72rem; color: var(--clr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-sheet:hover { border-color: var(--gm-pick); }
.gl-sheet.is-on { border-color: var(--gm-pick); background: color-mix(in srgb, var(--gm-pick) 14%, var(--clr-surface)); box-shadow: inset 0 0 0 1px var(--gm-pick); }
.gl-liked b i { color: #ff6b8a; margin-right: .35rem; }
.gl-liked { border-style: dashed; }

.gm [hidden] { display: none !important; }
.gl-empty { margin: 3rem 0; text-align: center; color: var(--clr-muted); }

/* 좋아요한 시트 창 */
.gl-dialog { padding: 0; }
.gl-dhead { position: sticky; top: 0; display: flex; align-items: center; padding: .9rem 1rem; background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); }
.gl-dhead h2 { flex: 1; margin: 0; font-size: 1rem; font-weight: 800; text-align: left; }
.gl-dhead h2 i { color: #ff6b8a; margin-right: .4rem; }
.gl-dclose { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--clr-muted); font-size: 1.1rem; cursor: pointer; }
.gl-dclose:hover { color: var(--clr-text); background: var(--clr-surface2); }
.gl-dmsg { margin: 1.2rem 1rem .8rem; font-size: .88rem; line-height: 1.6; color: var(--clr-muted); text-align: center; }
.gl-dbtn {
    display: block; width: fit-content; margin: 0 auto 1.2rem; padding: .55rem 1.1rem; border-radius: 10px;
    background: var(--clr-accent); color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none;
}
.gl-dbtn:hover { background: var(--clr-accent-hover); color: #fff; }
.gl-dlist { list-style: none; margin: 0; padding: .4rem; }
.gl-dlist a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .75rem; border-radius: 10px; color: var(--clr-text); text-decoration: none; }
.gl-dlist a:hover { background: var(--clr-surface); }
.gl-dlist a[aria-current] { background: color-mix(in srgb, var(--clr-accent) 14%, var(--clr-surface)); }
.gl-dlist b { font-size: .92rem; }
.gl-dlist span { font-size: .75rem; color: var(--clr-muted); }

/* 검색 · 랜덤 */
.gl-bar { display: flex; gap: .5rem; margin-bottom: .6rem; }
.gl-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .85rem; margin: 0;
    background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; color: var(--clr-muted); cursor: text;
}
.gl-search:focus-within { border-color: var(--gm-pick); }
.gl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--clr-text); font: inherit; font-size: .92rem; }
.gl-btn {
    display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1rem; border-radius: 10px; border: 0; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 700; white-space: nowrap;
}
.gl-random { background: var(--clr-surface); color: var(--gm-pick); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gm-pick) 55%, transparent); }
.gl-random:hover { background: color-mix(in srgb, var(--gm-pick) 12%, var(--clr-surface)); }
.gl-custom { background: var(--clr-surface); color: var(--clr-text); box-shadow: inset 0 0 0 1px var(--clr-border); }
.gl-custom:hover { box-shadow: inset 0 0 0 1px var(--gm-pick); }
.gl-custom[aria-pressed="true"] { color: var(--gm-pick); box-shadow: inset 0 0 0 1px var(--gm-pick); background: color-mix(in srgb, var(--gm-pick) 12%, var(--clr-surface)); }
.gl-custom:disabled { opacity: .6; cursor: progress; }
.gl-start { background: var(--gm-pick); color: var(--gm-pick-ink); }
.gl-start:hover:not(:disabled) { background: var(--gm-pick-hover); }
.gl-start:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
    .gl-bar { flex-wrap: wrap; }
    .gl-search { flex-basis: 100%; }
    .gl-btn { flex: 1; justify-content: center; }
}

/* 고른 캐릭터 요약 */
.gl-picked { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: .9rem 0 .2rem; font-size: .8rem; color: var(--clr-muted); }
.gl-picked > b { font-size: .92rem; color: var(--clr-text); }
.gl-picked > b span { color: var(--gm-pick); }
.gl-pt { display: inline-flex; align-items: center; gap: .3rem; }
.gl-pt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.gl-pt span { color: var(--clr-text); font-weight: 700; }
.gl-clear { margin-left: auto; height: 28px; padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-muted); font: inherit; font-size: .76rem; cursor: pointer; }
.gl-clear:hover { color: var(--clr-text); border-color: var(--gm-pick); }
#glList { --pick: var(--gm-pick); --pick-ink: var(--gm-pick-ink); }
#glList .cd-card { cursor: pointer; }

/* ── 단계 표시 (1단계 /grimoire · 2단계 /step2 · /live/{코드}/ready 가 같이 쓴다). 색은 방식의 강조색. */
.cs-steps { display: flex; gap: .4rem; margin: -.2rem 0 1rem; padding: 0; list-style: none; }
.cs-step { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; gap: .45rem; padding: .5rem .65rem; border-radius: 10px;
    background: var(--clr-surface); border: 1px solid var(--clr-border); color: var(--clr-muted); font-size: .8rem; }
.cs-step a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.cs-step a::after { content: ""; position: absolute; inset: 0; }
.cs-step.is-done:has(a):hover { border-color: var(--gm-pick); color: var(--clr-text); }
.cs-n { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    font-size: .72rem; font-weight: 800; background: var(--clr-surface2); color: var(--clr-muted); }
.cs-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cs-step.is-on { border-color: var(--gm-pick); color: var(--clr-text); background: color-mix(in srgb, var(--gm-pick) 10%, var(--clr-surface)); }
.cs-step.is-on .cs-n { background: var(--gm-pick); color: var(--gm-pick-ink); }
.cs-step.is-done .cs-n { background: color-mix(in srgb, var(--gm-pick) 22%, transparent); color: var(--gm-pick); }
@media (max-width: 520px) { .cs-step { padding: .45rem .5rem; font-size: .74rem; gap: .35rem; } .cs-n { width: 20px; height: 20px; } }