@charset "UTF-8";
/* ============================================================
 * 등급제 바꿔 보기 서랍 · 5등급제 성적 안내 창 (2026-10-28) — grade-scale.js 가 그림
 * 4개년 수시입결 · 내점수 학과찾기 · 대학별 내 위치 공용. 본문 숫자 표시(글자색·작은 제목·바탕)는 각 화면 CSS 에서
 * ============================================================ */
.gs{--gs-body:#eef1f5; --gs-box:#dfe4ea; --gs-navy:#1e3a5f; --gs-c:#006fff; --gs-cl:#eaf2ff; --gs-ink:#202020; --gs-ink2:#4b5563; --gs-mut:#6b7280; --gs-line:#d6dce6; --gs-line2:#e8ecf2; --gs-bg:#f5f7fa}
.gs.gs-voc{--gs-c:#0891b2; --gs-cl:#ecfeff}   /* 전문대 */

/* 서랍 — 사이트 머리 아래부터 화면 오른쪽 끝에 붙음 (top 은 grade-scale.js 가 머리 높이로) */
.gs-sp{position:fixed; top:5.6rem; right:0; bottom:0; z-index:890; width:40rem; background:var(--gs-body); border-left:1px solid var(--gs-line);   /* 몸통 연회색 · 안 칸은 흰색 — 뒤 흰 화면과 구분 */ transform:translateX(100%); transition:transform .25s ease, box-shadow .25s ease}
.gs.open .gs-sp{transform:none; box-shadow:-2rem 0 6rem rgba(15,23,42,.30)}
.gs-in{display:flex; flex-direction:column; height:100%}
/* 손잡이 — 서랍 왼쪽 가장자리에 붙어 같이 움직임, 닫혀 있으면 화면 끝에 남음 */
.gs-tab{position:absolute; top:50%; right:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; width:6.4rem; height:15.6rem; padding:0; transform:translateY(-50%); color:#fff; background:var(--gs-navy); border:0; border-radius:6px 0 0 6px; box-shadow:-1rem 0 2.4rem rgba(15,23,42,.25); cursor:pointer}
.gs-tab > span{padding:1rem 0; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3); font-size:1.4rem; font-weight:800; white-space:nowrap}   /* 「등급변환」 한 줄을 위아래 가는 선으로 */
.gs-tab .gs-tab-ic{margin-bottom:1rem; font-size:2rem; color:#8fb3e8}
.gs-tab .gs-tab-ar{margin-top:1rem; font-size:2rem; color:#fff; transition:transform .25s}
.gs.open .gs-tab .gs-tab-ar{transform:rotate(180deg)}
.gs-tab:hover{background:#16304f}
.gs:not(.open) .gs-tab{margin-right:0.8rem}   /* 닫혀 있으면 오른쪽 끝 선(.gs-rail) 왼쪽에 붙음 */
/* 닫혀 있으면 문처럼 비스듬히 접혀 끝만 보임 → 마우스가 가까이 오면(grade-scale.js 가 .near) 화면 끝을 축으로 돌아 나옴 (2026-10-28) */
.gs-tab{transform:translateY(-50%) perspective(500px) rotateY(0); transform-origin:100% 50%; transition:transform .4s ease, background .2s}
.gs-tab > span, .gs-tab .gs-tab-ic{transition:opacity .2s .08s}
.gs-tab .gs-tab-ar{transition:transform .25s, opacity .2s .08s}
.gs-tab .gs-tab-pk{position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; width:2.4rem; font-size:1.8rem; opacity:0; transition:opacity .15s}
.gs:not(.open) .gs-tab{transform:translateY(-50%) perspective(500px) rotateY(-68deg)}
.gs:not(.open) .gs-tab > :not(.gs-tab-pk){opacity:0; transition-delay:0s}
.gs:not(.open) .gs-tab .gs-tab-pk{opacity:1; transition-delay:.1s}
.gs:not(.open).near .gs-tab, .gs:not(.open) .gs-tab:focus-visible{transform:translateY(-50%) perspective(500px) rotateY(0)}
.gs:not(.open).near .gs-tab > :not(.gs-tab-pk), .gs:not(.open) .gs-tab:focus-visible > :not(.gs-tab-pk){opacity:1; transition-delay:.08s}
.gs:not(.open).near .gs-tab .gs-tab-pk, .gs:not(.open) .gs-tab:focus-visible .gs-tab-pk{opacity:0; transition-delay:0s}
/* 화면 오른쪽 끝 남색 선 — 머리 아래부터 바닥까지 (top 은 grade-scale.js 가 머리 높이로) */
.gs-rail{position:fixed; top:5.6rem; right:0; bottom:0; z-index:885; width:0.8rem; background:var(--gs-navy)}

/* 머리 — 사이트 경로 줄과 같은 남색, 탭은 머리 아래에 붙은 칸 */
.gs-hd{padding:1.4rem 2rem 0; background:var(--gs-navy); color:#fff}
.gs-hd-t{display:flex; align-items:center; justify-content:space-between}
.gs-hd h3{margin:0; font-size:1.8rem; font-weight:800; color:#fff}
.gs-hd p{margin:0.2rem 0 1.2rem; font-size:1.3rem; color:#c9d6ea}
.gs-x{width:4rem; height:4rem; margin-right:-1rem; padding:0; color:#fff; background:transparent; border:0; font-size:2.2rem; cursor:pointer}
.gs-tabs{display:flex; gap:0.4rem}
.gs-tabs button{flex:1; display:flex; align-items:center; justify-content:center; gap:0.6rem; height:4rem; padding:0; font-size:1.4rem; font-weight:700; color:#c9d6ea; background:rgba(255,255,255,.08); border:0; border-radius:6px 6px 0 0; cursor:pointer}
.gs-tabs button:hover{color:#fff}
.gs-tabs button.on{color:var(--gs-navy); background:var(--gs-body)}
.gs-tabs em{width:0.7rem; height:0.7rem; background:#5aa2ff; border-radius:50%}
.gs-tabs em[hidden]{display:none}
.gs-bd{flex:1; overflow-y:auto; padding:1.4rem 2rem 1.6rem}
.gs-ft{display:flex; gap:0.8rem; padding:1.2rem 2rem; border-top:1px solid var(--gs-line)}
.gs-noopen{display:flex; align-items:center; gap:0.8rem; margin:0 auto 0 0; font-size:1.4rem; color:var(--gs-ink2); cursor:pointer}
.gs-noopen input{width:1.8rem; height:1.8rem; margin:0; accent-color:var(--gs-c)}
.gs-reset{flex:none; width:12rem; height:4.4rem; font-size:1.5rem; font-weight:700; color:var(--gs-ink); background:#fff; border:1px solid var(--gs-line); border-radius:6px; cursor:pointer}
.gs-reset:disabled{color:#9aa1ab; background:var(--gs-bg); border-color:var(--gs-line2); cursor:default}   /* 되돌릴 것이 없을 때 */
.gs-close{display:none; flex:2; height:4.4rem; font-size:1.5rem; font-weight:700; color:#fff; background:var(--gs-c); border:0; border-radius:6px; cursor:pointer}   /* 모바일에서만 */
.gs-bar{display:none}   /* 모바일 아래 고정 띠 */
body.gs-open .page-top{display:none}   /* 서랍이 열려 있으면 오른쪽 맨 위로 단추 숨김 */
.gs-pane{display:none}
.gs-pane.on{display:block}
.gs-u{display:none}
.gs-u.on{display:block}

.gs-sw{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0; padding:1.2rem 1.4rem; border:1px solid var(--gs-c); border-radius:6px; background:#fff; font-size:1.5rem; font-weight:700; color:var(--gs-ink); cursor:pointer}
/* 켜고 끄기 (susi.css .toggle-switch 와 같은 크기) */
.gs-tg{position:relative; flex:none; width:3.4rem; height:1.9rem}
.gs-tg input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1}
.gs-tg span{position:absolute; inset:0; background:#c4cad3; border-radius:1rem; transition:background .15s}
.gs-tg span::before{content:""; position:absolute; left:0.2rem; bottom:0.2rem; width:1.5rem; height:1.5rem; background:#fff; border-radius:50%; transition:transform .15s}
.gs-tg input:checked + span{background:var(--gs-c)}
.gs-tg input:checked + span::before{transform:translateX(1.5rem)}
.gs-fill{margin:0.6rem 0 0; font-size:1.2rem; line-height:1.6; color:var(--gs-mut); text-align:justify; word-break:normal}
.gs-desc{margin:0.8rem 0 0; font-size:1.3rem; line-height:1.6; color:var(--gs-ink2); text-align:justify; word-break:normal}
.gs-lb{margin:2rem 0 0.6rem; font-size:1.3rem; font-weight:700; color:var(--gs-ink2)}
.gs-info{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.2rem 1.4rem; background:#fff; border:1px solid var(--gs-box); border-radius:6px; font-size:1.4rem; color:var(--gs-ink)}
.gs-info b{font-weight:700}
.gs-lk{font-size:1.3rem; font-weight:600; color:var(--gs-c); text-decoration:none}
.gs-btn{height:4rem; padding:0 1.4rem; font-size:1.4rem; font-weight:600; color:#fff; background:var(--gs-c); border:0; border-radius:6px; cursor:pointer}
.gs-seg{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--gs-line); border-radius:6px; overflow:hidden}
.gs-seg button{height:4rem; padding:0 0.8rem; font-size:1.4rem; font-weight:600; color:var(--gs-ink2); background:#fff; border:0; cursor:pointer}
.gs-seg button + button{border-left:1px solid var(--gs-line)}
.gs-seg button.on{color:var(--gs-c); font-weight:700; background:var(--gs-cl); box-shadow:inset 0 0 0 1px var(--gs-c)}

/* 변환 기준 — 예시 크게 · 두 줄 설명 · 막대 두 줄 · 유의 한 줄 · 자세히 접기 */
.gs-nb{margin-top:1.4rem; padding:1.6rem; background:#fff; border:1px solid var(--gs-box); border-radius:6px}
.gs-nb-lb{font-size:1.4rem; font-weight:800; color:var(--gs-ink)}
.gs-big{display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1rem; padding:1.2rem 1rem; background:#fff; border:1px solid var(--gs-line2); border-radius:6px}
.gs-big > div{text-align:center}
.gs-big small{display:block; font-size:1.2rem; color:var(--gs-mut)}
.gs-big strong{display:block; margin-top:0.1rem; font-size:2.4rem; font-weight:800; line-height:1.2; color:var(--gs-ink)}
.gs-big .to strong{color:var(--gs-c)}
.gs-big > i{font-size:2.2rem; color:var(--gs-mut)}
/* 바꿔 보는 칸: 아래 · 숫자 · 위 */
.gs-step{display:flex; align-items:stretch; margin-top:0.2rem; border:1px solid var(--gs-c); border-radius:6px; overflow:hidden; background:#fff}
.gs-step button{display:flex; align-items:center; justify-content:center; width:3.2rem; padding:0; color:var(--gs-c); background:var(--gs-cl); border:0; cursor:pointer}
.gs-step button i{font-size:2rem}
.gs-step button:hover{color:#fff; background:var(--gs-c)}
.gs-step button:disabled{color:#b8c0cc; background:#f5f7fa; cursor:default}
.gs-step .gs-in9{width:7.2rem; height:4rem; padding:0 0.2rem; font:inherit; font-size:2.4rem; font-weight:800; color:var(--gs-ink); text-align:center; background:#fff; border:0; border-left:1px solid var(--gs-line); border-right:1px solid var(--gs-line); -moz-appearance:textfield}
.gs-step .gs-in9::-webkit-outer-spin-button, .gs-step .gs-in9::-webkit-inner-spin-button{margin:0; -webkit-appearance:none}
.gs-step .gs-in9:focus{outline:0; background:#fffbea}
.gs-same{margin:0.6rem 0 0; font-size:1.3rem; color:var(--gs-ink2); text-align:center}
.gs-same b{font-weight:700; color:var(--gs-ink)}
/* 예시 영역 — 옅은 파랑 칸으로 아래 「변환 기준」 설명(흰 칸)과 나눔 */
.gs-try{margin-top:1.4rem; padding:1.4rem 1.6rem 1.2rem; background:var(--gs-cl); border:1px solid var(--gs-c); border-radius:6px}
.gs-try .gs-nb-lb{color:var(--gs-ink)}
.gs-try .gs-nb-lb span{font-weight:500; color:var(--gs-c)}
.gs-say{margin:1.4rem 0 0; font-size:1.3rem; line-height:1.65; color:var(--gs-ink); text-align:justify; word-break:normal}
.gs-bars{margin-top:1.4rem}
.gs-barr{display:flex; align-items:center; gap:1rem}
.gs-barr + .gs-barr{margin-top:0.6rem}
.gs-barr > span{flex:none; width:5.2rem; font-size:1.2rem; font-weight:700; color:var(--gs-ink2)}
.gs-barr .seg{flex:1; display:flex; height:2.2rem; border-radius:3px; overflow:hidden}
.gs-barr .seg i{display:flex; align-items:center; justify-content:center; font-style:normal; font-size:1.1rem; font-weight:700; color:#fff; border-right:1px solid rgba(255,255,255,.7)}
.gs-barr .seg i:last-child{border-right:0}
.b9 i:nth-child(1){background:#1e3a5f} .b9 i:nth-child(2){background:#2a4d78} .b9 i:nth-child(3){background:#386292} .b9 i:nth-child(4){background:#4a77a8} .b9 i:nth-child(5){background:#6189b6}
.b9 i:nth-child(6){background:#7c9dc3} .b9 i:nth-child(7){background:#98b2d0} .b9 i:nth-child(8){background:#b4c7dd; color:#1e3a5f} .b9 i:nth-child(9){background:#cfdbe9}
.b5 i:nth-child(1){background:#00489f} .b5 i:nth-child(2){background:#006fff} .b5 i:nth-child(3){background:#4b98ff} .b5 i:nth-child(4){background:#93c0ff; color:#0b3d91} .b5 i:nth-child(5){background:#cfe2ff; color:#0b3d91}
.gs-scale{display:flex; justify-content:space-between; margin:0.4rem 0 0 6.2rem; font-size:1.1rem; color:var(--gs-mut)}
.gs-note{margin:1.4rem 0 0; font-size:1.2rem; line-height:1.6; color:var(--gs-mut)}
/* 자세히 — 펼침 줄(위 가는 선 · 왼쪽 이름 · 오른쪽 +/−), 바탕색·테두리 단추 아님 */
.gs-more{margin-top:1.4rem; border-top:1px solid var(--gs-line)}
.gs-more > button{display:flex; align-items:center; justify-content:space-between; width:100%; height:4rem; padding:0; font-size:1.4rem; font-weight:700; color:var(--gs-ink); background:none; border:0; cursor:pointer}
.gs-more > button i{display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; font-size:1.6rem; color:var(--gs-ink2); border:1px solid var(--gs-line); border-radius:3px; background:#fff}
.gs-more > button:hover{color:var(--gs-c)}
.gs-more.open > button i::before{content:"\f1af"}   /* remixicon subtract-line */
.gs-more .in{display:none; padding:0.2rem 0 0.4rem}
.gs-more.open .in{display:block}
.gs-more .in p{margin:0; font-size:1.3rem; line-height:1.65; color:var(--gs-ink); text-align:justify; word-break:normal}
.gs-more .in p + p{margin-top:0.6rem}
.gs-more .in .gs-ct{margin:1rem 0 0}
.gs-more .in p.unit{margin-top:0.4rem; font-size:1.2rem; color:var(--gs-ink2); text-align:right}
.gs-ct{width:100%; margin:0.6rem 0; border-collapse:collapse; table-layout:fixed; font-size:1.1rem; text-align:center; font-variant-numeric:tabular-nums; background:#fff}
.gs-ct th, .gs-ct td{padding:0.5rem 0; border:1px solid var(--gs-line2); color:var(--gs-ink2); text-align:center; vertical-align:middle}
.gs-ct th:first-child{width:5.4rem}   /* 「9등급제」 칸 — 나머지 9칸은 같은 폭(table-layout:fixed)이라 오른쪽으로 넘치지 않음 */
.gs-ct thead th{font-weight:700; color:var(--gs-ink); background:var(--gs-body)}   /* 제목 칸(위·왼쪽)은 바탕색으로 숫자 칸과 구분 */
.gs-ct tbody th{color:var(--gs-ink); font-weight:700; white-space:nowrap; background:var(--gs-body)}
.gs-ct td.na{background:var(--gs-bg)}

/* 5등급제 성적 안내 창 — 사이트 창 틀(위 남색 선 · 모서리 6px · 왼쪽 정렬 · 오른쪽 아래 단추) */
.gs-modal{position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:2rem; background:rgba(15,23,42,.5)}
.gs-modal[hidden]{display:none}
.gs-box{width:100%; max-width:46rem; background:#fff; border-top:3px solid #1e3a5f; border-radius:6px}
.gs-box-hd{display:flex; align-items:center; justify-content:space-between; padding:2rem 2.4rem 0}
.gs-box-hd h4{margin:0; font-size:2rem; font-weight:700; color:var(--gs-ink)}
.gs-box-x{width:3.6rem; height:3.6rem; margin-right:-0.8rem; padding:0; color:var(--gs-ink2); background:transparent; border:0; font-size:2.2rem; cursor:pointer}
.gs-box-bd{padding:1.4rem 2.4rem 2.4rem; font-size:1.5rem; line-height:1.7; color:var(--gs-ink2)}
.gs-box-bd p{margin:0; text-align:justify; word-break:normal}
.gs-box-bd b{font-weight:700; color:var(--gs-ink)}
.gs-box-ft{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.2rem 2.4rem; border-top:1px solid var(--gs-line2)}
.gs-box-ft label{display:flex; align-items:center; gap:0.8rem; margin:0; font-size:1.4rem; color:var(--gs-ink2); cursor:pointer}
.gs-box-ft input{width:1.8rem; height:1.8rem; margin:0; accent-color:var(--gs-c)}
.gs-done .gs-box-ft{justify-content:flex-end}
.gs-ok{height:4rem; padding:0 2.4rem; font-size:1.5rem; font-weight:700; color:#fff; background:var(--gs-c); border:0; border-radius:6px; cursor:pointer}

.gs-dim{display:none}
/* PC 세로가 짧은 화면(노트북 등): 머리 설명 줄을 빼고 간격을 더 좁혀 세로 스크롤이 생기지 않게 */
/* ── 내점수 학과찾기 · 대학별 내 위치 (2026-10-28) ── */
/* 등급제 표시: 바꾼 값 = 빨강 「5등급제 변환」 · 원래 값 = 노랑 「9등급제」 (4개년 수시입결 susi.css 와 같은 모양) */
.gs-tag{display:inline-block; margin-left:0.6rem; padding:0.1rem 0.6rem; font-size:1.2rem; font-weight:700; line-height:1.6; color:#fff; background:#e03131; border-radius:3px; vertical-align:0.1rem; white-space:nowrap}
.gs-tag.g9{color:#202020; background:#ffe066}
.cmp-table-section thead th .gs-tag{display:table; margin:0.4rem auto 0}   /* 좁은 컷 칸: 표시는 글자 아래 줄에 */
/* 입결 5등급제 그래프: 1~5 밖(6~9 자리)은 빗금으로 비워 둠 */
.cdot-track .gs-rest{position:absolute; top:0; bottom:0; right:0; background:repeating-linear-gradient(135deg,transparent 0,transparent 6px,rgba(148,163,184,.12) 6px,rgba(148,163,184,.12) 12px)}
/* 비교하지 않을 때 「내 등급 범위」 단추는 누를 수 없음 */
.cmp-toggle-btn.gs-off{opacity:.45; pointer-events:none}
/* 안내 카드 — 그래프 빈 자리(.gs-rcard 안, grade-scale.js 가 위치를 맞춤) · 그래프 위(.gs-ncard) */
.gs-rcard{position:absolute; z-index:5; pointer-events:none}
.gs-rcard > div{position:absolute; top:2.4rem; left:2.4rem; width:30rem; box-sizing:border-box; pointer-events:auto}
.gs-rcard > div, .gs-ncard{padding:1.4rem 1.6rem; background:#fff; border:1px solid #d6dce6; border-radius:6px; text-align:left}
.gs-ncard{margin-top:1.6rem}
.gs-rcard b, .gs-ncard b{display:block; font-size:1.4rem; font-weight:700; line-height:1.5; color:#202020; word-break:keep-all}
.gs-rcard small, .gs-ncard small{display:block; margin-top:0.4rem; font-size:1.3rem; line-height:1.5; color:#4b5563; word-break:keep-all}
.gs-rcard button, .gs-ncard button{margin-top:0.8rem; padding:0; font-size:1.3rem; font-weight:700; color:#006fff; background:none; border:0; text-decoration:underline; text-underline-offset:0.3rem; cursor:pointer}
.gs-voc .gs-rcard button, body.cmpfv-v2 .gs-rcard button, body.cmpfv-v2 .gs-ncard button, body.cmpuv-v2 .gs-rcard button, body.cmpuv-v2 .gs-ncard button{color:#0891b2}   /* 전문대 색 */
@media all and (min-width:801px) and (max-height:760px){
    .gs-hd{padding-top:1rem}
    .gs-hd p{display:none}
    .gs-hd-t{margin-bottom:1rem}
    .gs-bd{padding-top:1rem}
    .gs-nb{margin-top:1.2rem; padding:1.2rem 1.4rem}
    .gs-try{margin-top:1rem; padding:1rem 1.4rem 0.8rem}
    .gs-big{margin-top:0.6rem; padding:0.8rem}
    .gs-step .gs-in9{height:3.4rem; font-size:2rem}
    .gs-big strong{font-size:2rem}
    .gs-same{margin-top:0.4rem}
    .gs-say{font-size:1.2rem; line-height:1.55}
    .gs-barr .seg{height:1.8rem}
    .gs-note{margin-top:0.8rem}
    .gs-sw{padding:1rem 1.4rem}
    .gs-tabs button{height:3.6rem}
    .gs-bd{padding-bottom:1rem}
    .gs-more > button{height:3.4rem}
    .gs-ft{padding:0.8rem 2rem}
    .gs-reset{height:4rem}
    .gs-big{padding:1rem}
    .gs-say, .gs-bars, .gs-note{margin-top:1.2rem}
    .gs-more{margin-top:1rem}
}

/* 모바일: 아래에서 올라오는 창, 여는 단추는 화면 아래 고정 띠 */
@media all and (max-width:800px){
    /* 휴대전화 화면 높이에 맞춤: 보이는 화면(svh — 주소창 포함 작은 높이) 기준 85%, 위로 뒤 화면이 늘 7rem 이상 남게 · 손잡이는 모바일에서 안 쓰므로 transform 으로 내림 */
    .gs-sp{top:auto; bottom:0; width:100%; height:85vh; height:85svh; max-height:calc(100vh - 7rem); max-height:calc(100svh - 7rem); z-index:1010; border-left:0; border-top:1px solid var(--gs-line); border-radius:6px 6px 0 0; transform:translateY(calc(100% + 2rem)); transition:transform .25s ease}
    .gs.open .gs-sp{transform:none}
    .gs-tab, .gs-rail{display:none}   /* 모바일은 손잡이·끝 선 대신 아래 고정 띠 */
    .gs.open .gs-dim{display:block; position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.6)}   /* 뒤 화면(사이트 머리 z 999 까지)을 어둡게 덮어 서랍과 구분 */
    .gs-bd{padding:1.2rem 1.6rem 1rem}
    .gs-hd{padding:1.4rem 1.6rem 0; border-radius:6px 6px 0 0}
    .gs-ft{padding:1.2rem 1.6rem}
    .gs-close{display:block}
    /* 창이 열려 있는 동안 뒤 화면 스크롤 막음 (grade-scale.js 가 html 에 gs-lock) · 창 안 스크롤이 뒤로 넘어가지 않게 */
    html.gs-lock, html.gs-lock body{overflow:hidden; overscroll-behavior:none}
    .gs-bd{overscroll-behavior:contain}
    .gs-dim{touch-action:none}
    .gs-noopen{display:none}   /* 모바일은 늘 닫힌 채로 시작 */
    .gs-reset{flex:1; width:auto}
    /* 화면 아래 고정 띠 — 스크롤해도 같은 자리, 오른쪽은 지금 보는 기준 */
    .gs-bar{position:fixed; left:0; right:0; bottom:0; z-index:940; display:flex; align-items:center; justify-content:space-between; gap:1rem; height:4.8rem; padding:0 1.6rem; color:#fff; background:var(--gs-navy); border:0; font-size:1.4rem; font-weight:700; cursor:pointer}
    .gs-bar > span{display:flex; align-items:center; gap:0.6rem}
    .gs-bar > span i{font-size:1.6rem}
    .gs-bar em{display:flex; align-items:center; gap:0.2rem; font-style:normal; font-size:1.3rem; font-weight:500; color:#c9d6ea}
    .gs-bar em i{font-size:1.6rem}
    .gs-bar.on em{font-weight:700; color:#8fc1ff}
    body.gs-on{padding-bottom:4.8rem}
    body.gs-on .page-top{bottom:6.4rem}   /* 맨 위로 단추를 띠 위로 */
}