@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Play:400,700&display=swap');
/* GmarketSans */
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    overflow-x: hidden;
    background-color: #fff;
}

body, div, dl, dt, dd, ul, ol, li, i, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, legend, button, select, p, blockquote, th, td, table {
    font-family: 'GmarketSansMedium', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif !important;
    font-size: 100%;
    padding: 0;
    margin: 0;
    word-break: keep-all;
    -webkit-text-size-adjust: none;
    color: #181818;
}

/* loading-box S */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 9999;
    display: none;
}

#status {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 49.5%;
    top: 44.5%;
    margin: -40px 0 0 -40px;
    display: none;
}
/* loading-box E */

a {
    text-decoration: none !important;
    cursor: pointer !important;
}

li {
    list-style: none;
}

caption { display: none;}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

.br-pc {
    display: block !important;
}

@media all and (min-width: 641px) and (max-width: 992px) {
    .br-m {
        display: inline-block !important;
    }
}

@media all and (max-width: 640px) {
    .br-m {
        display: block !important;
    }

    .br-pc {
        display: inline-block !important;
    }
}

.cont-wrap {
    width: 1400px;
    margin: 0 auto;
}

@media all and (max-width: 1400px) {
    .cont-wrap {
        width: 93%;
    }
}

.header {
    height: 90px;
    padding-top: 2rem;
    box-sizing: border-box;
}

.header h1 img {
    width: 174px;
    margin-left: 1rem;
}

.header .tell {
    display: inline-block;
    border-radius: 5rem;
    padding: 0.1rem 1.1rem;
    border: 2px solid #ffea00;
}

.header .tell span {
    font-family: 'Play', sans-serif !important;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: -0.04em;
}

.header .tell span i {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: #ffea00;
}

.header .youtube-pc {
    width: 130px;
    margin: 0 0.5rem 0.2rem 0;
}

.header .youtube-m {
    display: none;
}

@media screen and (max-width: 992px) {
    .header {
        height: 65px;
        padding-top: 1rem;
    }

    .header h1 img {
        width: 119px;
        margin-top: 0.2rem;
    }

    .header .tell {
        padding: 0.1rem 0.6rem;
    }

    .header .tell span {
        font-size: 0.95rem;
    }

    .header .tell span i {
        margin-right: 0.3rem;
        font-size: 0.7rem;
    }

    .header .youtube-pc {
        display: none;
    }

    .header .youtube-m {
        display:inline-block;
        width: 35px;
        margin-right: 0.5rem;
    }
}

.visual-bg {
    width: 100%;
    /* height: 100vh; */
    background:#f3f7ff url(../images/main/bg-main.jpg)center top/cover;
    box-sizing: border-box;
}

@media screen and (max-width: 1400px) {
    .main-visual {
        height: 100%;
    }

    .visual-bg {
        height: 100% !important;
    }
}

.question .main-q {
    position: relative;
    background:#753fe3;
    border-radius: 1rem;
    padding: 2rem 2rem 1rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.question .main-q img {
    position: absolute;
    right: 1rem;
    bottom: -0.01rem;
    width: 150px;
}

.hero-catch {
    position: relative;
    display: block;
    margin: 0 0 1.5rem;
    padding: 1.8rem 1.8rem 1.4rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 2rem;
    line-height: 1.25;
    color: #fff;
    text-align: center;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a0a4a 0%, #3a1b8f 50%, #0f2a6e 100%);
    border-radius: 1rem;
    box-shadow: 0 0 24px rgba(2, 255, 213, 0.5), inset 0 1px 40px rgba(2, 255, 213, 0.15);
    animation: hero-catch-glow 2.8s ease-in-out infinite;
    overflow: hidden;
}

.hero-catch em {
    font-style: normal;
}

.hero-catch em:first-of-type {
    margin-right: 0.3rem;
    color: #fff82e;
    text-shadow: 0 0 12px rgba(255, 248, 46, 0.7);
    font-family: 'GmarketSansBold', sans-serif !important;
}

.hero-catch em:last-of-type {
    color: #02ffd5;
    text-shadow: 0 0 12px rgba(2, 255, 213, 0.7);
}

@keyframes hero-catch-glow {
    0%, 100% { box-shadow: 0 0 18px rgba(2, 255, 213, 0.4), inset 0 1px 30px rgba(2, 255, 213, 0.1); }
    50%      { box-shadow: 0 0 36px rgba(2, 255, 213, 0.75), inset 0 1px 45px rgba(2, 255, 213, 0.25); }
}

@media screen and (max-width: 1280px) {
    .hero-catch {
        font-size: 1.45rem;
        padding: 1.3rem 1.2rem 1rem;
        margin: 0 0 1rem;
    }
}

@media screen and (max-width: 640px) {
    .hero-catch {
        font-size: 1.15rem;
        padding: 1.1rem 0.9rem 0.85rem;
        letter-spacing: -0.03em;
        margin: 0 0 0.8rem;
    }
    .hero-catch em:first-of-type {
        margin-right: 0.2rem;
    }
}

.question .main-q .left-box {
    height: 100%;
    min-height: 210px;
    background: #8752ef;
    border-radius: 1rem;
    border: 1px solid #b390ff;
    padding: 1.8rem 2rem 1.5rem !important;
    box-sizing: border-box;
}

.question .main-q p.b-tit, .question .main-q .game-cont .g-tit  {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.35rem;
    color: #fff;
    padding-bottom: 0.5rem;
}

.question .main-q p.b-tit i {
    font-size: 1.1rem;
    color: #fff;
}

.question .main-q .left-box ul,
.question .main-q .right-box ul {
    padding-left: 0;
    margin-left: -0.3rem;
}

.question .main-q .tip {
    margin-left: -0.3rem;
}

.question .main-q ul li {
    color: #fff;
    padding: 0.15rem 0;
}

.question .main-q ul li span {
    font-family: 'GmarketSansBold', sans-serif !important;
}

.question .main-q ul li i {
    color: #fff !important;
}

.question .main-q ul li span.rent-values {
    display: block;
    font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif !important;
    padding-left: 1em;
}

.question .main-q ul li span.rent-values span.rent-row {
    display: block;
    font-family: inherit !important;
    white-space: nowrap;
}

.question .main-q .left-box ul li.rent-gap {
    margin-top: 0.8rem;
}

.question .main-q ul li em.rent-day {
    display: inline-block;
    min-width: 2.6em;
    margin-right: 0.1rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-style: normal;
    color: #fff82e;
    font-variant-numeric: tabular-nums;
}

.question .main-q .right-box {
    height: 100%;
    min-height: 210px;
    background: #9561fd;
    border-radius: 1rem;
    border: 1px solid #b390ff;
    padding: 1.8rem 2rem 1.5rem !important;
    box-sizing: border-box;
}

.question .main-q .left-box ul li.net-line {
    margin-top: 0.8rem;
    color: #fff82e;
}

.question .main-q .left-box ul {
    margin-bottom: 0;
}

.question .main-q .tip {
    font-size: 0.9rem;
    color: #02ffd5 !important;
    line-height: 1.5 !important;
    margin-top: 0.8rem;
}

.question .main-q .tip i {
    color: #02ffd5 !important;
}

/* 오른쪽 아래 icon-q01.png 은 .main-q 기준 absolute(right:1rem, width:150px)라 글 위에 뜬다.
   게임 목록이 길어지면 그 아래로 파고들므로 이미지 폭만큼 오른쪽을 비워 둔다(2026-08-10). */
.question .main-q .game-cont {
    padding: 1.5rem;
    padding-right: 170px;
    color: #fff !important;
}

.question .main-q .game-cont .g-tit i {
    font-size: 1.6rem;
    color: #fff;
}

.question .main-q .game-cont span {
    color: #fff82e !important;
}

@media all and (min-width: 1281px) and (max-width: 1320px) {
    .question .main-q {
        padding: 2rem;
    }

    .question .main-q .left-box, .question .main-q .right-box {
        padding: 1.5rem 1.5rem 1rem !important;
    }

    .question .main-q .left-box ul li {
        font-size: 0.9rem !important;
    }
}

@media all and (min-width: 993px) and (max-width: 1280px) {
    .question .main-q .tip {
        font-size: 0.85rem;
        line-height: 1.2rem !important;
    }

    .mt-1-m {
        margin-top: 0rem;
    }

    .pe-5-m {
        padding-right: 1rem !important;
    }
}

@media screen and (max-width: 1280px) {
    .question .main-q {
        padding: 1rem;
    }

    .question .main-q img {
        right: 1rem;
        width: 100px;
    }

    .question .main-q .left-box, .question .main-q .right-box {
        height: 100%;
        padding: 1.5rem 1.5rem 1rem !important;
    }

    .question .main-q p.b-tit, .question .main-q .game-cont .g-tit {
        font-size: 1.1rem;
    }

    .question .main-q p.b-tit i {
        font-size: 1rem;
    }

    .question .main-q ul li {
        padding: 0.1rem 0;
        font-size: 0.9rem;
    }

    .question .main-q .left-box ul li {
        font-size: 0.9rem !important;
    }

    .question .main-q .tip {
        font-size: 0.85rem !important;
        line-height: 1.5rem !important;
    }

    .question .main-q .game-cont {
        padding: 1rem;
        padding-right: 115px;   /* 이 구간은 이미지가 100px 로 줄어든다 */
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 992px) {
    .t-w100 {
        width: 100% !important
    }

    .mt-1-m {
        margin-top: 1rem;
    }

    .pe-5-m {
    padding-right: 0rem !important;
    }

    .question .main-q ul li {
        font-size: 0.92rem;
    }

    .question .main-q .left-box ul li {
        font-size: 0.82rem !important;
    }

    .question .main-q ul li span.rent-values {
        font-size: 0.92rem;
        padding-left: 1em;
    }

    .question .main-q ul li span.rent-values span.rent-row {
        white-space: normal;
    }
}

.q-box {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    height: 155px;
}

.q-box p {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.35rem;
    line-height: 1.7rem;
    letter-spacing: -0.04em;
}

.q-box p span {
    color: #4d1bb3;
}

.q-box p + p {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.97rem;
    line-height: 1.4rem;
    padding-top: 0.5rem;
    color: #1f1f1f;
}

.pc-guide {
    height: 230px;
    background: rgba(0, 0, 0, 0.6) url(../images/main/icon-q5.png) no-repeat right 1rem bottom;
    background-size: 100px;
    border: 2px solid #ff9600;
    box-shadow: 0 0 18px rgba(255, 150, 0, 0.35);
    border-radius: 1rem;
    padding: 2.5rem 2.5rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.6rem;
    color: #fff;
}

.pc-apply {
    background: linear-gradient(135deg, #16a34a 0%, #0a5d2a 100%) url(../images/main/icon-q3.png) no-repeat right 1rem bottom !important;
    background-size: 100px !important;
    border: 2px solid #00ff68 !important;
    box-shadow: 0 0 24px rgba(0, 255, 104, 0.45);
    animation: pc-apply-pulse 2.2s ease-in-out infinite;
}

@keyframes pc-apply-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(0, 255, 104, 0.35); }
    50%      { box-shadow: 0 0 30px rgba(0, 255, 104, 0.7); }
}

.pc-notice {
    background: rgba(0, 0, 0, 0.8) url(../images/main/icon-q6.png) no-repeat right 1rem bottom !important;
    background-size: 100px !important;
    height: auto !important;
    min-height: 180px !important;
    border: none !important;
    box-shadow: none !important;
}

.pc-notice p i {
    color: #fff !important;
}

.pc-notice .notice-list {
    padding-right: 100px;
}

.pc-notice .notice-item {
    display: block;
    position: relative;
    padding-left: 0;
}

/* 🔴 2026-09-09 고객사 캡처 반영 — 번호(①②③④)를 본문에 직접 넣었으므로 · 불릿을 없앤다.
   되돌릴 때는 padding-left: 0.9rem + ::before{content:"·"} 였다. */
.pc-notice .notice-foot {
    margin-top: 0.8rem;
}

@media all and (max-width: 640px) {
    .pc-notice .notice-list {
        padding-right: 85px;
    }
}

.pc-guide p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff !important;
    margin-top: 1rem;
}

/* 임대안내 박스 높이(2026-08-10): 본문이 4줄이 되어 230px 고정으로는 약 5px 넘친다.
   옆 정액제 박스(.pc-price)가 쓰는 방식과 동일하게 내용에 맞춰 늘리되 최소 높이는 유지한다.
   문구를 더 늘리면 두 박스 높이가 함께 커질 뿐 글자가 테두리를 넘지 않는다. */
.pc-guide-row .pc-guide:not(.pc-price) {
    height: auto;
    min-height: 230px;
}

/* 임대안내 박스 제목(2026-08-10): 한 줄 유지용.
   🔴 color 를 반드시 명시할 것 — 28행 전역 리셋이 모든 div 에 color:#181818 을 걸어
   .pc-guide 의 #fff 상속을 이긴다(직접 규칙 > 상속). 빼면 제목이 검게 나온다.
   font-size: 기본 1.6rem 이면 제목이 약 355px 라 1366px 노트북(내용폭 약 348px)에서 2줄로 접힌다.
   nowrap 은 작은 휴대폰에서 넘치므로 쓰지 않고 글자만 살짝 줄여 자연스럽게 한 줄이 되게 한다. */
.pc-guide .pc-lead-tit {
    font-size: 1.5rem;
    color: #fff;
}

/* 제목 바로 다음 문단만 조금 더 띄운다(제목 블록과 본문 블록의 구분).
   인접 형제 선택자라 임대안내·정액제 두 박스에 동일하게 걸려 나란한 높이가 어긋나지 않는다. */
.pc-guide .pc-lead-tit + .pc-lead {
    margin-top: 1.6rem;
}

/* 제목이 두 줄일 때 둘째 줄(정액제 박스의 초록 문구) 위 여백.
   임대안내 박스 제목은 안쪽이 span 이라 이 규칙에 걸리지 않는다. */
.pc-guide .pc-lead-tit > div {
    margin-top: 0.4rem;
}

/* 임대안내 박스 본문(2026-08-10): 3줄 문구 가독성 확보.
   .pc-guide p 전체를 키우면 정액제·공지사항 박스까지 따라 커지므로 이 블록만 지정한다.
   높이 계산: 제목 1줄 약 31px + margin-top 16px + 3줄×28.8px = 약 133px < 내용영역 150px(230 - padding 80). */
.pc-guide .pc-lead {
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin-top: 1.25rem;
}

.pc-guide div {
    display: block;
    font-family: 'GmarketSansBold', sans-serif !important;
    line-height: 1.5rem;
}

.pc-guide .txt-orange {
    color: #ff9600 !important;
}

.pc-guide .txt-green {
    color: #00ff68;
}

.pc-guide .txt-yellow {
    color: #ffde00;
}

.pc-guide .txt-mint {
    color: #00ffe4;
}

/* 정액제 요금제 박스 (다크 글래스 + 그린, 요금 3칸 카드) */
.pc-price {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 2px solid #00ff68 !important;
    box-shadow: 0 0 18px rgba(0, 255, 104, 0.3);
    height: auto !important;
    min-height: 230px;
}
.pc-price .rate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 1rem;
}
.pc-price .rate {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 104, 0.4);
    border-radius: 0.6rem;
    padding: 0.7rem 0.3rem;
    text-align: center;
}
.pc-price .rate .d {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.15rem;
    color: #00ff68;
}
.pc-price .rate .w {
    font-size: 0.85rem;
    color: #e8ffe8;
    margin-top: 0.2rem;
}
.pc-price .price-foot {
    font-size: 0.92rem !important;
    line-height: 1.45rem !important;
    margin-top: 0.9rem !important;
}
/* 임대안내·정액제 박스 높이 동일 (md 이상: col을 flex로 만들어 박스가 같은 높이로 채움) */
@media (min-width: 768px) {
    .pc-guide-row > .col {
        display: flex;
        flex-direction: column;
    }
    .pc-guide-row .pc-guide {
        flex: 1;
        height: auto;
    }
    /* 임대안내 박스: 내용을 세로로 펼치고 연락처를 하단으로 */
    .pc-guide-row .pc-guide:not(.pc-price) {
        display: flex;
        flex-direction: column;
    }
    .pc-guide-row .pc-contact {
        margin-top: auto;
    }
}
/* 모바일: 임대안내 박스는 내용 높이로 (하단 여백 제거) */
@media (max-width: 767.98px) {
    .pc-guide-row .pc-guide:not(.pc-price) {
        height: auto !important;
        min-height: 0 !important;
    }
}


@media all and (min-width: 993px) and (max-width: 1280px) {
    .q-box {
        padding: 1.5rem 2rem;
        height: 175px;
    }
}

@media screen and (max-width: 1280px) {
    .q-box {
        /* 🔴 종전 `1.5rem 2rem 0.5rem` 은 상단 24px / 하단 8px 로 비대칭이었다
           (2026-09-08 🙋 지적 · 실측). 모바일은 두 박스가 세로로 쌓여 그 차이가 그대로 보인다. */
        padding: 1.5rem 2rem;
        height: 100%;
    }

    .q-box p {
        font-size: 1.1rem;
    }

    .q-box p + p {
        font-size: 0.9rem;
        line-height: 1.3rem;
    }

    .pc-guide {
        background-size: 85px;
        padding: 2rem 2rem;
        font-size: 1.3rem;
        height: 100% !important;
    }

    .pc-apply {
        background-size: 85px !important;
    }

    .pc-notice {
        background: rgba(0, 0, 0, 0.6) url(../images/main/icon-q6.png) no-repeat right 1rem bottom !important;
        background-size: 85px !important;
        box-sizing: border-box;
        height: 100% !important
    }

    .pc-guide p {
        font-size: 0.9rem;
        line-height: 1.5rem;
        margin-top: 0.5rem;
    }

    .pc-guide div {
        display: inline-block;
    }

    .mb-1-m {
        margin-bottom: 1rem;
    }
}

.btn-modal {
    width: 100% !important;
    text-align: left !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 0.86rem;
}

.mobile-apply {
    margin: 1.5rem 0 1rem;
}

/* 🙋 [2026-09-14] 모바일 다운로드·쌀먹용 PC 카드를 보라 박스(.main-q) 밖, 공지사항 위로 옮겼다(_pages/main.php).
   .main-q 의 margin-bottom 1rem 이 이미 위 간격을 만들므로 위 여백은 0, 아래는 공지 행과 1rem.
   🔴 main2(콘솔 시안)의 .mobile-apply 는 여전히 박스 안이라 이 클래스를 붙이지 않았다. */
.mobile-apply.mobile-apply-out {
    margin: 0 0 1rem;
}

/* 🙋 [2026-09-14] "모바일에서 각 영역마다 간격 동일하게" — 영역 사이를 전부 1rem(16px)으로 맞춘다.
   🔴 실측(430px) 간격이 16·8·16·32·16·32·32·32·16·16 이었다. 32 의 원인은 **박스 자신의 margin-bottom 1rem + 감싼 .mb-1-m 1rem 이 겹친 것**,
      q-box 는 height: calc(100% - 1rem) 로 줄어든 1rem 이 col 안에 빈칸으로 남은 것, 8 은 카드의 mt-2(0.5rem)였다.
   🎯 간격은 바깥 래퍼(.mb-1-m · .view-cont 의 margin-top) 한 벌만 남기고 박스 자신의 여백은 0 으로 둔다.
   🔴 데스크톱(≥993px)은 손대지 않는다 · main2(.console-ui)도 제외. */
@media all and (max-width: 992px) {
    .main-visual:not(.console-ui) .pc-guide-row .pc-guide,
    .main-visual:not(.console-ui) .q-box,
    .main-visual:not(.console-ui) .pc-notice {
        margin-bottom: 0 !important;
    }
    .main-visual:not(.console-ui) .q-box {
        height: 100%;
    }
    .main-visual:not(.console-ui) .col-lg-9 > .mb-1-m:last-child {
        margin-bottom: 0;
    }
}

.mobile-apply .free-test {
    padding-right: 6rem;
}

.mobile-apply .free-test p {
    display: block;
    width: fit-content;
    margin-top: 0.3rem;
}

/* 2026-08-10: 하단 padding 이 0 이라 상하 여백이 어긋나 있었다. 2rem 으로 맞추고,
   그만큼 내용이 175px 를 넘으므로 높이를 내용에 맞춘다(데스크톱 실제 약 193px). */
.free-test {
    height: auto;
    background:#ffea00 url(../images/main/icon-q2.png) no-repeat right 0.5rem bottom;
    background-size: 90px;
    border-radius: 1rem;
    padding: 2rem;
    box-sizing: border-box;
    letter-spacing: -0.04em;
    font-size: 1.4rem;
}

.free-test p {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.6rem;
    display: inline-block;
    border-bottom: solid 2px #000;
    line-height: 1.3em;
    padding-top: 0.3rem;
}

/* 임대신청 버튼 문구(2026-08-10): CTA 아래 보조 문구 + 카카오톡 ID.
   .free-test 는 175px 고정이라 세 요소 합계를 약 124px 로 잡았다(내용영역 143px).
   카카오 배지는 왼쪽 폭 약 150px 이라 오른쪽 배경 아이콘(90px)과 겹치지 않는다. */
.apply-sub {
    display: block;
    font-size: 1.05rem;
    line-height: 1.35;
    margin-top: 1.3rem;   /* 위쪽은 CTA 밑줄 때문에 좁아 보여 아래(.apply-kakao 0.9rem)보다 조금 크게 잡았다 */
}

.apply-kakao {
    display: inline-block;
    margin-top: 0.9rem;
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 한 벌) — 상하 합은 그대로 두고 위아래로만 재분배한다.
       근거·재는 법은 형제 `rules/frontend.md` 「한글은 baseline 아래 획이 없어…」 절. */
    padding: 0.4rem 0.7rem 0.1rem;
    border-radius: 0.4rem;
    background: #000;
    color: #fff;
    font-size: 0.95rem;
    font-family: 'GmarketSansBold', sans-serif !important;
}

.apply-kakao b {
    color: #ffea00;
}

.bg-icon01 {
    background: rgba(0, 0, 0, 0.6) url(../images/main/icon-q5.png) no-repeat right 1rem bottom;
}

.bg-icon02 {
    background: rgba(0, 0, 0, 0.6) url(../images/main/icon-q3.png) no-repeat right 1rem bottom;
}

.bg-icon03 {
    background: rgba(0, 0, 0, 0.6) url(../images/main/icon-q4.png) no-repeat right 1rem bottom;
}

.bg-icon04 {
    background: rgba(0, 0, 0, 0.6) url(../images/main/icon-q6.png) no-repeat right 0.5rem bottom -1px;
    font-size: 0.95rem !important;
    line-height: 1.3rem;
}

.view-cont {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 1rem;
    color: #fff;
    padding: 1.8rem 1.5rem 1.1rem;
    box-sizing: border-box;
    font-size: 1.25rem;
    margin-top: 1rem;
}

.view-cont p {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.3rem;
    color: #fff;
    padding: 0 0.5rem 1rem;
    text-align: center;
}

.fac-slide {
    position: relative;
    padding-bottom: 2.5rem !important;
}

.fac-cont .thumb img {
    width: 100%;
    /* height: 360px;
    object-fit: cover; */
    border-radius: 0.5rem;
}

.fac-cont .thumb iframe {
    width: 100%;
    border-radius: 0.5rem;
}

.fac-cont .video-thumb {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    aspect-ratio: 5 / 6;
    background: #000;
}

.fac-cont .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    display: block;
    transition: transform 0.3s ease;
}

.fac-cont .video-thumb .video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
    transition: background 0.2s ease;
    pointer-events: none;
}

.fac-cont .video-thumb .play-btn {
    display: block;
    width: 38%;
    max-width: 96px;
    aspect-ratio: 68 / 48;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.fac-cont .video-thumb .play-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fac-cont .video-thumb:hover img,
.fac-cont .video-thumb:focus-visible img {
    transform: scale(1.04);
}

.fac-cont .video-thumb:hover .video-overlay,
.fac-cont .video-thumb:focus-visible .video-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.fac-cont .video-thumb:hover .play-btn,
.fac-cont .video-thumb:focus-visible .play-btn {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 18px rgba(255, 0, 0, 0.4));
}

.fac-cont .swiper-button-prev {
    top: 96%;
    left: 30%;
}

.fac-cont .swiper-button-next {
    top: 96% !important;
    right: 30%;
}

.fac-cont .swiper-button-prev:after, .fac-cont .swiper-button-next:after {
    font-family: bootstrap-icons !important;
    font-size: 1.8rem;
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #ffffff !important;
}

.fac-cont .swiper-button-prev:after {
    left: 0;
    content: "\F129";
}

.fac-cont .swiper-button-next:after {
    right: 0;
    content: "\F133";
}

.qr-code {
    text-align: center;
}

.qr-code img {
    width: 140px;
    margin: 0 auto;
    border-radius: 0.5rem;
}
/* WeChat QR 박스 높이 미세 조정 (우측 컬럼 하단 라인 정렬) */
.col-lg-3 .mb-1-m .view-cont {
    padding: 1.5rem 1.5rem 1.1rem;
}
.col-lg-3 .mb-1-m .view-cont p {
    padding-bottom: 0.7rem;
}
.col-lg-3 .mb-1-m .qr-code span {
    padding: 0.4rem 0.5rem 0;
}

.qr-code span {
    display: block;
    font-family: 'GmarketSansLight', sans-serif !important;
    font-size: 0.85rem;
    color: #00ff68;
    padding: 0.5rem;
}

/* SNS 채널 박스 — WeChat + TikTok QR 2열 */
.qr-two {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.qr-two .qr-item {
    flex: 1;
    text-align: center;
}

.qr-two .qr-item img {
    width: 100% !important;
    max-width: 125px;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
}

.qr-two .qr-nm {
    display: block;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-style: normal;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    color: #fff;
}

.qr-two .qr-nm.wc {
    color: #00ff68;
}

.qr-two .qr-nm.tk {
    color: #ff3b5c;
}

@media all and (min-width: 993px) and (max-width: 1280px) {
    .fac-cont .swiper-button-prev, .fac-cont .swiper-button-next  {
        top: 95% !important;
    }
}

@media screen and (max-width: 1280px) {
    .free-test {
        height: 100%;
        padding: 1.5rem 2rem;
        font-size: 1.2rem;
        background-size: 80px;
    }

    .free-test p {
        font-size: 1.4rem;
    }

    .view-cont {
        padding: 1.8rem 1.5rem 1.5rem;
    }

    .view-cont p {
        font-size: 1.2rem;
        padding: 0 0.5rem 1rem;
    }

    .qr-code span {
        font-size: 0.85rem;
        padding: 1rem 0 0;
    }
}

@media screen and (max-width: 992px) {
    .free-test {
        height: 100%;
        padding: 1.5rem 2rem;
        font-size: 1.2rem;
    }

    .fac-cont .swiper-button-prev:after, .fac-cont .swiper-button-next:after {
        font-size: 1.6rem;
    }

    .fac-cont .swiper-button-prev, .fac-cont .swiper-button-next  {
        top: 97% !important;
    }
}

.box-modal {
    max-width: 750px !important
}

.box-modal img {
    width: 100% !important
}

.foot-links {
    margin: 0.8rem 0 0.3rem;
    font-size: 0.9rem;
}

.foot-links .terms-link {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.foot-links .terms-link:hover {
    opacity: 1;
    color: #fff82e;
}

.policy-box .policy {
    font-family: 'GmarketSansLight', 'Noto Sans KR', sans-serif !important;
    font-weight: 300;
}

.policy-box .policy strong {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-weight: 700;
    color: #222;
    display: inline-block;
    margin-top: 0.25rem;
}

.policy-box .policy h4 {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-weight: 700;
    color: #222;
}

#termsModal .policy-box {
    height: auto !important;
    overflow: visible !important;
    background-color: #fff !important;
}

#termsModal .policy-box .policy {
    padding: 0.5rem 0.5rem 1rem;
    font-size: 0.9rem;
    color: #585858;
    line-height: 1.65rem;
}

.box-modal .h-600 {
    max-height: 600px !important
}

.box-modal h5 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.05em;
}

.btn-close {
    width: 2em !important;
    height: 2em !important;
    padding: 0 !important;
    margin-top: -1rem !important;
    font-size: 1.3rem !important;
}

@media screen and (max-width: 992px) {
    .box-modal h5 {
        font-size: 1.05rem;
    }

    .btn-close {
        font-size: 1rem !important;
    }

    .p-0-m {
        padding: 0 0 0.7rem !important;
    }
}

.inquiry-form {
    width: 95%;
    margin: 1rem auto 0;
}

.inquiry-form .tit-label {
    font-size: 1rem;
    line-height: 2rem;
}

.inquiry-form .tit-label span {
    color: #a62625;
    font-size: 1.1rem;
}

.inquiry-form .bg-input {
    border: 1px solid #d7d7d7;
    padding: 0.56rem;
    font-size: 1.1rem;
    color: #171c1c;
}

.inquiry-form .bg-input::placeholder {
    color: #8a9292;
    font-size: 0.9rem;
}

.inquiry-form .policy-box {
    font-size: 0.9rem;
    border-radius: 0.5rem;
    background-color: #f5f5f5 !important;
    box-sizing: border-box;
    height: 110px;
    overflow-y: scroll;
}

.inquiry-form .policy-box .policy {
    padding: 1.2rem 2rem;
    box-sizing: border-box;
    font-size: 0.85rem;
    color: #585858 !important;
    line-height: 1.5rem;
}

.inquiry-form .policy-box .policy h4 {
    font-size: 0.9rem;
    padding: 0.5rem 0 0.5rem 0;
    font-weight: 600;
}

.inquiry-form .policy-box .policy div {
    color: #585858 !important;
}

.inquiry-form .agree-box {
    width: 260px;
    margin: 0 auto 1rem;
    padding-top: 1rem;
}

.inquiry-form .check-style {
    /* width: 1.3em !important;
    height: 1.3em !important; */
    margin-right: 0.7rem;
    margin-top: 0.2rem;
}

.inquiry-form .form-check-input {
    border-color:#000 !important;
    width: 1.2em !important;
    height: 1.2em !important;
}

.inquiry-form .form-check-label {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

.form-checkbox-danger .form-check-input:checked {
  background-color: #0d6efd !important;
  border: 1px solid #0d6efd !important;
}

.btn-inquiry {
    border: 1px solid #232529;
    background: #232529;
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 한 벌) — 상하 합은 그대로 두고 위아래로만 재분배한다.
       근거·재는 법은 형제 `rules/frontend.md` 「한글은 baseline 아래 획이 없어…」 절. */
    padding: 0.925rem 1rem 0.675rem;
    box-sizing: border-box;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    width: 50%;
    margin: 0 auto;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.7rem;
}

/* 🔴 2026-09-08 🙋 — [상담 신청하기] 와 [결제하기] 가 둘 다 흑백이고 hover 에서 서로
   반전돼 방문자가 두 버튼을 혼동했다. 결제는 사이트 포인트 보라로 고정하고,
   hover 는 '반전' 이 아니라 '같은 색의 명암 변화' 로 바꾼다(#7a4de0 은 PC방 배너 테두리색).
   🔴 흰 글자 대비 5.35:1 로 AA 를 넘는다 — 더 밝은 보라로 바꾸지 마라. */
.btn-inquiry {
    background: #7a4de0;
    border-color: #7a4de0;
}

.btn-inquiry:hover {
    background: #6a3fd0;
    border-color: #6a3fd0;
    color: #fff;
}

.mb-4-m {
    margin-bottom: 1rem !important;
}

@media all and (max-width:767px) {
    .inquiry-form {
        width: 100%;
    }
    .inquiry-form .tit-label {
        font-size: 0.85rem;
        line-height: 2rem;
    }

    .inquiry-form .bg-input {
        padding: 0.6rem;
        font-size: 1rem;
    }

    .inquiry-form .bg-input::placeholder {
        font-size: 0.8rem;
    }

    .inquiry-form .policy-box .policy {
        padding: 1.5rem;
    }

    .col-3-m {
        width: 35%;
    }

    .col-9-m {
        width: 65%;
    }

    .btn-inquiry {
        /* 🔴 위 기본 선언과 같은 광학 보정값이어야 한다 — 한쪽만 고치면 767px 이하에서 되돌아간다. */
        padding: 0.925rem 1rem 0.675rem;
        width: 100%;
        font-size: 1rem;
    }
}

.privacy-box {
    width: 85%;
    margin: 0 auto 8rem
}

.privacy-anchor-box {
    padding: 2.5rem 3.5rem;
    background: #fafafa;
    text-align: left;
    font-size: 1rem;
    line-height: 1.7;
    box-sizing: border-box;
    overflow: hidden
}

.privacy-anchor-box strong {
    font-weight: 700
}

.privacy-terms-content {
    padding: 0 2rem
}

.privacy-terms-content h3 {
    padding: 60px 0 20px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #111
}

.privacy-terms-content p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7em
}

.privacy-terms-content p.align-center {
    width: 80%;
    margin: 0 auto
}

.privacy-terms-content .bu-list {
    padding-top: 15px
}

.privacy-terms-content .bu-list>li {
    position: relative;
    margin-left: 1rem;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5rem;
    list-style: none;
    padding-bottom: 0.7rem
}

.privacy-terms-content .bu-list>li:before {
    content: '-';
    position: absolute;
    margin-left: -1rem;
    font-size: 1.5rem;
    color: #333;
    font-weight: 200
}

.privacy-terms-content .bu-list>li ul li {
    position: relative;
    margin-left: 0.8rem;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5rem;
    list-style: none;
    padding-top: 0.4rem
}

.privacy-terms-content .bu-list>li ul li:before {
    content: 'ㆍ';
    position: absolute;
    margin-left: -0.8rem;
    font-size: 0.9rem;
    color: #333
}

.privacy-terms-content hr {
    margin-top: 50px;
    border-top: solid 1px #dbdbdb;
    position: static;
    width: 100%;
    visibility: visible
}

@media all and (max-width: 767px) {
    .privacy-box {
        width: 100%;
        margin: 2rem auto 4rem;
    }

    .privacy-anchor-box {
        padding: 2em 1.5rem;
        font-size: 1.2rem;
    }

    .privacy-terms-content {
        padding: 0 1rem;
    }

    .privacy-terms-content h3 {
        padding: 40px 0 20px;
        font-size: 1.6rem;
    }

    .privacy-terms-content p, .privacy-terms-content .bu-list>li, .privacy-terms-content .bu-list>li ul li {
        font-size: 1.3rem;
        line-height: 2rem;
    }
}

.foot-cont {
    position: relative;
    width: 100%;
    background-color: #232529;
    padding: 1.8rem 0;
}

.foot-cont .foot-logo {
    flex: none;
    margin: 0;
}

.foot-cont .foot-logo img {
    width: 174px
}

.foot-cont .biz-info {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2.5rem;
}

.foot-cont .foot-text {
    flex: 1;
    min-width: 0;
}

.foot-cont .biz-info ul {
    overflow: hidden;
    margin: 0;
}

.foot-cont .biz-info li {
    float: left;
    margin: 0.15rem 1.4rem 0.15rem 0;
    font-size: 0.8rem;
    color: #bcbcbc !important;
}

.foot-cont .biz-info li span {
    display: inline-block;
    padding-right: 0.5rem;
    color: #848484 !important;
    font-weight: 700;
}

.foot-cont .foot-text .foot-links {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
}

.foot-cont .biz-info .copy-txt {
    display: block !important;
    width: 100%;
    font-size: 0.7rem;
    color: #6b6b6b !important;
    text-align: center;
    padding-top: 0.9rem;
}

@media all and (min-width: 991px) and (max-width: 1280px) {
    .foot-cont {
        padding: 1rem 0;
    }

    .foot-cont .foot-logo img {
        width: 131px;
    }

    .foot-cont .biz-info {
        width: 85%;
        column-gap: 1.8rem;
    }

    .foot-cont .biz-info ul {
        margin: 0;
    }

    .foot-cont .biz-info li {
        margin: 0.15rem 1rem 0.15rem 0;
    }
}

@media all and (max-width: 990px) {
    .foot-cont {
        padding: 1rem 0;
    }

    .foot-cont .foot-logo img {
        width: 109px;
    }

    .foot-cont .biz-info {
        width: 80%;
        flex-direction: column;
        align-items: flex-start;
        column-gap: 0;
    }

    .foot-cont .foot-text {
        width: 100%;
    }

    .foot-cont .biz-info ul {
        margin: 1.2rem 0 0 0;
    }

    .foot-cont .biz-info li {
        float: none !important;
        margin: 0.2rem 0;
        font-size: 0.75rem !important;
    }

    .foot-cont .foot-text .foot-links {
        margin: 0.6rem 0 0;
    }

    .foot-cont .copy-txt {
        font-size: 0.5rem;
        margin: 0.5rem 0;
        text-align: left !important;
    }
}

/* ===== 결제 모달 ===== */
.pay-amount-box {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    background: #f5f7fb;
    border-radius: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'GmarketSansBold', sans-serif;
}
.pay-amount-box strong {
    color: #172a4e;
    font-size: 1.3rem;
}
.pay-notice {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: #fff6e5;
    border: 1px solid #ffe0a3;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #8a6d3b;
    line-height: 1.5;
}
/* 임대신청 모달(2026-09-08 통합 — 1단계 신청 + 2단계 결제): 너비는 기본(750px), 높이만 키움
   🔴 90vh 를 쓰지 마세요 (2026-08-13 모바일 잘림 사고).
   iOS Safari 의 1vh 는 「주소창·하단 툴바가 없을 때」 기준이라 실제 보이는 높이보다 큽니다
   → 90vh 가 화면을 넘겨 모달 위아래가 잘렸습니다.
   .modal-dialog-scrollable 이 이미 height:calc(100% - 여백*2) 를 계산하므로
   max-height:100% 로 그 계산을 그대로 따릅니다(app.min.css 의 부트스트랩 규칙). */
#inquiry .box-modal .h-600 {
    max-height: 100% !important;
}
/* 결제수단 위젯 영역 공간 미리 확보 → 로딩 시 박스 흔들림 최소화 */
#inquiry #payment-method {
    min-height: 280px;
}
/* 모달 스크롤바 모던하게 (얇고 둥글게, hover 강조) */
#inquiry .modal-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd2e0 transparent;
}
#inquiry .modal-body::-webkit-scrollbar {
    width: 8px;
}
#inquiry .modal-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
#inquiry .modal-body::-webkit-scrollbar-thumb {
    background: #cbd2e0;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s;
}
#inquiry .modal-body::-webkit-scrollbar-thumb:hover {
    background: #9aa3b8;
    background-clip: padding-box;
}
/* 스크롤바를 모달 우측 끝에 붙이고 내용은 padding으로 분리 (modal-content p-2 상쇄) */
#inquiry .modal-body {
    margin-right: -0.5rem !important;
    padding-right: 1.5rem !important;
}
/* 위젯 로딩 오버레이 */
#inquiry .modal-content {
    position: relative;
}
.pay-loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: #fff;
    border-radius: 1rem;
    color: #555;
    font-size: 0.95rem;
    transition: opacity 0.3s ease;
}
.pay-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.pay-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e3e7ef;
    border-top-color: #172a4e;
    border-radius: 50%;
    animation: pay-spin 0.8s linear infinite;
}
@keyframes pay-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   2026-09-08 고객사 시안 반영 — 사양/요금 박스 재구성
   🔴 왼쪽=사양 / 오른쪽=요금 으로 좌우를 바꿨다. 클래스(.left-box/.right-box)는
      '위치' 기준이라 그대로 두고, 내용에 결합돼 있던 규칙(.net-line·.tip)만 위에서 옮겼다.
      되돌릴 때는 그 규칙들도 함께 되돌려야 색이 맞는다.
   ============================================================ */
.question .main-q .left-box ul li.spec-sub {
    padding-top: 0;
    padding-left: 1.15rem;
    font-size: 0.92rem;
    color: #e6d8ff;
}

.question .main-q .tip-sub {
    margin: 0.15rem 0 0 -0.3rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #fff !important;
}

/* 요금표 3단(10/15/20일). 좁은 폭에서 가로 스크롤이 생기지 않게 100% 로 편다. */
.question .main-q .rent-table {
    width: 100%;
    margin: 0.2rem 0 0.6rem;
    border-collapse: collapse;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.question .main-q .rent-table th,
.question .main-q .rent-table td {
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 한 벌) — 상하 합은 그대로 두고 위아래로만 재분배한다.
       근거·재는 법은 형제 `rules/frontend.md` 「한글은 baseline 아래 획이 없어…」 절. */
    padding: 0.45rem 0.2rem 0.19rem;
    text-align: center;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.question .main-q .rent-table thead th {
    font-family: 'GmarketSansBold', sans-serif !important;
    color: #fff82e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.question .main-q .rent-table tbody th {
    font-family: 'GmarketSansBold', sans-serif !important;
    color: #fff82e;
}

/* 🔴 style02.css:27 의 전역 리셋이 `th, td, table` 에 color:#181818 을 **직접** 건다.
   `.rent-table{color:#fff}` 는 table 에 걸린 것이라 td 의 직접 규칙에 진다 —
   그래서 이용 요금·1일 평균이 보라 배경(#9561fd) 위에 **검게** 나왔다(2026-09-08 실측 rgb(24,24,24)).
   🔴 td 에 직접 색을 주지 않으면 재발한다. 다크 박스에 표를 새로 넣을 때도 같다. */
.question .main-q .rent-table tbody td {
    color: #fff;
}

/* 이용 요금 = 주정보(굵게) / 1일 평균 = 보조(한 단 낮춤) */
.question .main-q .rent-table tbody td:first-of-type {
    font-family: 'GmarketSansBold', sans-serif !important;
    color: #fff;
}

.question .main-q .rent-table tbody td:last-child {
    color: rgba(255, 255, 255, 0.85);
}

.question .main-q .rent-table tbody tr:last-child th,
.question .main-q .rent-table tbody tr:last-child td {
    border-bottom: 0;
}

.question .main-q .rent-pay {
    margin: 0 0 0.2rem -0.3rem;
    font-size: 0.92rem;
    color: #fff !important;
}

.question .main-q .rent-pay i {
    color: #fff !important;
}

/* 회선 소구 박스 — .game-cont 의 레이아웃(오른쪽 아이콘 회피 padding)을 그대로 물려받는다. */
.question .main-q .net-cont .g-tit {
    font-size: 1.15rem;
    line-height: 1.4;
}

.question .main-q .net-cont .net-target {
    display: block;
    margin-top: 0.6rem;
    font-style: normal;
    font-size: 0.9rem;
    color: #d9c9ff !important;
}

@media screen and (max-width: 1280px) {
    .question .main-q .net-cont .g-tit {
        font-size: 1rem;
    }

    .question .main-q .rent-table th,
    .question .main-q .rent-table td {
        font-size: 0.85rem;
        /* 🔴 보정량을 글자크기 비례식으로 추정하면 과보정한다(형제 실측 +2.5px) — 이 단은 재산출값이다(합 0.52rem 유지). */
        padding: 0.32rem 0.1rem 0.2rem;
    }
}

/* ===== 하단 Q&A — 문답이 2쌍 들어가 높이 고정(155px)을 풀었다 ===== */
/* 🔴 나란한 두 박스의 높이를 맞춘다 — 1rem 은 .q-box 자신의 margin-bottom 몫이다. */
.q-box {
    height: calc(100% - 1rem);
    min-height: 155px;
}

.q-box p.q-q {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.15rem;
    line-height: 1.6rem;
    color: #181818;
}

.q-box p.q-q.q-q2 {
    margin-top: 0.9rem;
}

.q-box p.q-a {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.45rem;
    padding-top: 0.35rem;
    color: #1f1f1f;
}

.q-box p.q-a b {
    color: #4d1bb3;
}

/* 윈도우 IME 표시(A → 가) 재현 — 저해상도 캡처 대신 마크업으로 그린다. */
.q-box p.ime-demo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.7rem;
    padding-top: 0;
}

.q-box .ime-key {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid #c9cede;
    border-radius: 0.4rem;
    background: #f3f5fa;
    color: #1f1f1f;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.95rem;
    line-height: 1;
}

.q-box .ime-key i {
    font-size: 0.9rem;
    color: #6b7280;
}

.q-box .ime-key b {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.05rem 0.25rem;
    border: 1px solid #d63384;
    border-radius: 0.25rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    text-align: center;
    color: #d63384;
}

.q-box .ime-key.is-kr b {
    border-color: #1b6ef3;
    color: #1b6ef3;
}

.q-box .ime-arrow {
    font-size: 1.2rem;
    color: #d63384;
}

/* ===== PC방 안내 배너 (2026-09-08 신설) =====
   ⏹️ [2026-09-10] 이 배너 마크업은 메인 개편으로 사라졌고 .pcroom-link 핸들러도
      다운로드 안내창(.dl-prepare)으로 대체됐다. 규칙만 남아 있으니 되살리려면
      마크업부터 다시 넣어야 한다. */
.btn-pcroom {
    width: 100% !important;
    text-align: left !important;
    border: 0 !important;
    padding: 0 !important;
}

.pcroom-banner {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    /* 🔴 2026-09-08 확대 — 같은 열에 있던 카드결제 배너를 없애고 그 자리를 이 배너가 채운다(🙋 요청).
       되돌릴 때는 padding 1.3rem 1.5rem · big 1.1rem · small 0.9rem 이었다. */
    /* 🔴 2026-09-10 좌우 1.6rem → 1rem — 본문을 한 줄로 담을 안쪽폭을 19.2px 확보한다. */
    padding: 2.4rem 1rem;
    /* 🔴 글자크기를 이 배너의 실제 폭(cqi)에 연동시키기 위한 선언이다 — 지우면 cqi 값이 뷰포트 기준으로 바뀌다. */
    container-type: inline-size;
    background: #21123f;
    border: 1px solid #7a4de0;
    color: #fff;
    letter-spacing: -0.04em;
}

.pcroom-banner .pcroom-big {
    display: block;
    font-family: 'GmarketSansBold', sans-serif;
    /* 🔴 2026-09-09 문구가 길어져 1.5rem 에서는 제목이 3줄로 접혔다(350px 열). */
    /* 🔴 2026-09-10 한 줄 고정 — 가장 긴 줄의 필요폭 = 글자크기 x 12.63 이라 100/12.63 = 7.92cqi 가 상한이다(7.7 은 여유분).
       🔴 앞줄 1.25rem 을 지우지 마라 — cqi 미지원 브라우저가 이 줄로 떨어진다(종전 동작). */
    font-size: 1.25rem;
    font-size: min(1.25rem, 7.7cqi);
    line-height: 1.3;
    color: #fff;
}

.pcroom-banner .pcroom-big i {
    margin-right: 0.25rem;
    color: #ffb43a;
}

.pcroom-banner .pcroom-small {
    display: block;
    margin-top: 0.7rem;
    /* 🔴 2026-09-10 정본 병목은 4행(대구 북구 침산동 …)이다 — 필요폭 = 글자크기 x 19.85 → 100/19.85 = 5.04cqi 가 상한(4.9 는 여유분).
       🔴 하한 0.6rem 은 너무 좁은 단말에서 글자가 읽히지 않게 되는 것을 막는다(거기서는 다시 접힌다). */
    font-size: 1rem;
    font-size: clamp(0.6rem, 4.9cqi, 1rem);
    line-height: 1.4;
    color: #c9b6ff;
}

/* 🔴 2026-09-09 전역 리셋(28행)의 선택자에 `i` 가 들어 있어 color:#181818 을 **직접** 건다.
   그래서 다크 배너 안 아이콘은 inherit 를 명시해야 본문색을 따른다(안 하면 검게 나온다). */
.pcroom-banner .pcroom-small i {
    margin-right: 0.25rem;
    color: inherit;
}

@media screen and (max-width: 992px) {
    .pcroom-banner {
        padding: 1.9rem 1rem;
    }

    .pcroom-banner .pcroom-big {
        font-size: 1.25rem;
        font-size: min(1.25rem, 7.7cqi);
    }

    .pcroom-banner .pcroom-small {
        font-size: 0.95rem;
        font-size: clamp(0.6rem, 4.9cqi, 0.95rem);
    }
}

/* ============================================================
   2026-09-08 카드결제 모달 2단계 재구성 (form1.jpg / form2.jpg)
   1단계 = 주문 신청(신청자 정보 · 수량/기간 · 약관 동의)
   2단계 = 주문 현황 및 결제 안내(확인표 + 토스 위젯)
   🔴 단계 전환은 [hidden] 로 한다 — app.min.css 의 부트스트랩 reboot 에
      [hidden]{display:none!important} 가 있지만, 번들 판본에 따라 없을 수 있어
      아래 규칙으로 못 박는다(없으면 두 단계가 동시에 보인다).
   ============================================================ */
.pay-step[hidden] {
    display: none !important;
}

/* 소제목 — 시안의 "1. 신청자 정보" / "2. PC 임대 수량 및 기간 선택" */
.pay-sec-tit {
    margin: 1.2rem 0 0.6rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid #172a4e;
    font-family: 'GmarketSansBold', sans-serif;
    font-size: 1rem;
    color: #172a4e;
}
.pay-sec-tit:first-child {
    margin-top: 0;
}

/* 수량 입력 + 단위 '대' */
.pay-qty-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pay-qty-wrap .form-control {
    width: 7rem;
    flex: 0 0 auto;
}
.pay-qty-unit {
    font-size: 0.95rem;
    color: #333;
}

/* ※ 안내 문구 — 상한을 막지 않는다(100대 유지). 문의를 유도하는 안내다. */
.pay-note {
    margin: 0.45rem 0 0;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #d24b4b;
}
.pay-note b {
    font-weight: 700;
}

/* 🔴 2026-09-10 🙋 고객사 캡처 — 이 모달은 「일반 PC」 상품이고 PC방 프리미엄 혜택·PC 는 pcbang.it 이다.
   두 안내는 상단(진입 전 오해 차단)·하단(대안 제시) 짝이라 한쪽만 지우지 마라. */
.pay-lead-note {
    margin: 0 0 0.3rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #6b6f76;
}
/* 🔴 2026-09-10 🙋 시안 A — 안내 문구와 바로가기를 「카드 하나」로 묶는다.
   🔴 카드 전체가 링크다(`<a class="pcbang-card">`) — 안쪽에 버튼 요소를 따로 넣지 마라(a 안의 button 은 중첩 오류).
   🔴 CTA 를 보라 채움으로 둔 것은 의도다 — 연보라 카드 배경이 구역을 갈라 주므로 위 [결제하기]와 안 헷갈린다.
      🎯 카드 배경을 없애려면 CTA 도 테두리형으로 함께 내려라(배경 없이 채움만 남기면 결제 버튼과 무게가 같아진다). */
.pcbang-card {
    display: block;
    margin-top: 1rem;
    padding: 0.95rem 1.05rem;
    border: 1px solid #d9c9ff;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #faf7ff 0%, #f3ecff 100%);
    transition: all 0.25s;
}
.pcbang-card:hover,
.pcbang-card:focus {
    border-color: #7a4de0;
    box-shadow: 0 4px 14px rgba(122, 77, 224, 0.18);
}
.pcbang-head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
/* 🔴 전역 리셋(28행)의 선택자 목록에 `i` 가 있어 색을 명시하지 않으면 아이콘이 #181818 로 나온다. */
.pcbang-ico {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #7a4de0;
}
.pcbang-txt {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #4b4550;
}
.pcbang-txt b {
    font-weight: 700;
    color: #7a4de0;
}
.pcbang-go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.7rem;
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 한 벌) — 상하 합은 그대로 두고 위아래로만 재분배한다.
       근거·재는 법은 형제 `rules/frontend.md` 「한글은 baseline 아래 획이 없어…」 절. */
    padding: 0.75rem 0.8rem 0.49rem;
    border-radius: 0.6rem;
    background: #7a4de0;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
}
.pcbang-go i {
    color: inherit;
    transition: transform 0.25s;
}
.pcbang-card:hover .pcbang-go i {
    transform: translateX(3px);
}

/* 🔴 2026-09-10 🙋 "위 문구 위 여백 조금만 더 줄여줘" — 헤더~안내 40px → 28px.
   🔴 `.inquiry-form`(1199행 margin-top 1rem)을 직접 줄이지 마라 — 다른 폼도 그 값을 쓴다.
      이 모달 1단계로만 스코프한다. */
#rent-step1.inquiry-form {
    margin-top: 0.25rem;
}

/* 2단계 확인표 */
.pay-confirm-table {
    width: 100%;
    margin: 0 0 1rem;
    border-top: 2px solid #172a4e;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
}
.pay-confirm-table th,
.pay-confirm-table td {
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 한 벌) — 상하 합은 그대로 두고 위아래로만 재분배한다.
       근거·재는 법은 형제 `rules/frontend.md` 「한글은 baseline 아래 획이 없어…」 절. */
    padding: 0.81rem 0.6rem 0.59rem;
    border-bottom: 1px solid #e3e7ef;
    vertical-align: middle;
    line-height: 1.45;
    word-break: keep-all;
}
.pay-confirm-table thead th {
    background: #f5f7fb;
    color: #172a4e;
    font-family: 'GmarketSansBold', sans-serif;
    text-align: center;
}
.pay-confirm-table tbody th {
    width: 28%;
    color: #172a4e;
    font-weight: 700;
    text-align: left;
}
.pay-confirm-table tbody td:first-of-type {
    width: 30%;
    text-align: center;
    font-weight: 700;
}
.pay-confirm-table tbody td:last-child {
    font-size: 0.82rem;
    color: #777;
}
.pay-confirm-table .pay-total-row td:first-of-type {
    color: #d24b4b;
    font-family: 'GmarketSansBold', sans-serif;
    font-size: 1.15rem;
}

/* 2단계 버튼 행 — [이전] + [결제하기] */
.pay-btn-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 1rem;
}
/* 🔴 .btn-inquiry 는 width:50% · margin:0 auto 라 flex 안에서 그대로 두면 폭이 어긋난다 */
.pay-btn-row .btn-inquiry {
    width: auto;
    min-width: 45%;
    margin: 0;
}
/* 1단계 [상담 신청하기] — [결제하기](.btn-inquiry) 와 폭을 반반으로 나눈다.
   🔴 flex:1 을 둘 다 주지 않으면 .btn-inquiry 의 min-width:45% 때문에 한쪽이 커진다. */
#rent-step1 .pay-btn-row .btn-consult,
#rent-step1 .pay-btn-row .btn-inquiry {
    flex: 1 1 0;
    min-width: 0;
}
.btn-consult {
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 한 벌) — 상하 합은 그대로 두고 위아래로만 재분배한다.
       근거·재는 법은 형제 `rules/frontend.md` 「한글은 baseline 아래 획이 없어…」 절. */
    padding: 0.925rem 1rem 0.675rem;
    border: 1px solid #232529;
    border-radius: 0.7rem;
    background: #fff;
    color: #232529;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.3s;
}
/* 🔴 상담은 보조 버튼이다 — hover 에서 반전시키지 마라(결제 버튼과 헷갈린다). */
.btn-consult:hover {
    background: #f2f2f4;
    color: #232529;
    border-color: #232529;
}
.btn-pay-prev {
    min-width: 25%;
    /* 🔴 형제 .btn-inquiry([결제하기])와 **같은 광학 보정값**이어야 나란한 두 버튼의 글자 높이가 맞는다. */
    padding: 0.925rem 1rem 0.675rem;
    border: 1px solid #a9b1c2;
    border-radius: 0.7rem;
    background: #fff;
    color: #555;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.3s;
}
.btn-pay-prev:hover {
    background: #f0f2f7;
    color: #232529;
    border-color: #7d879b;
}

@media all and (max-width:767px) {
    .pay-sec-tit {
        font-size: 0.95rem;
    }
    .pay-confirm-table {
        font-size: 0.85rem;
    }
    .pay-confirm-table th,
    .pay-confirm-table td {
        /* 🔴 위 기본 선언과 같은 광학 보정 — 이 단은 글자가 13.6px 이라 1.65px 씩이다(합 19.2px 유지). */
        padding: 0.7rem 0.35rem 0.5rem;
    }
    .pay-confirm-table tbody td:last-child {
        font-size: 0.75rem;
    }
    .pay-confirm-table .pay-total-row td:first-of-type {
        font-size: 1rem;
    }
    /* 🔴 .btn-inquiry 는 모바일에서 width:100% 다 — flex 행에서 다시 잡아 준다 */
    .pay-btn-row .btn-inquiry {
        width: auto;
        min-width: 0;
        flex: 1 1 60%;
    }
    .btn-pay-prev {
        flex: 0 0 32%;
        min-width: 0;
        /* 🔴 좌우만 좁힌다 — 상하는 기본 선언과 같은 보정값을 유지한다. */
        padding: 0.925rem 0.5rem 0.675rem;
    }
}

/* ═══ [2026-09-10 pcbang] 메인 개편 — PC방 원격 이용 안내 ═══
   🔴 이 블록만 이 사이트 고유다. 위쪽은 pcrental Clone 에서 온 공통분이므로
      되돌릴 일이 생기면 이 블록만 지우면 종전 화면으로 돌아간다.
   🔴🔴 이 파일 27행의 전역 리셋이 `th, td, table` 에 color:#181818 을 **직접** 건다 —
      table 에 color 를 줘도 td 의 직접 규칙에 진다. 그래서 아래 표들은 전부
      **th·td 에 직접** 색을 준다. 다크 박스에 표를 새로 넣을 때마다 같은 함정이다. */

/* ── 좌측 상단 안내 박스 (보라 배경 위) ── */
.question .main-q .lead-copy {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #fff;
    padding-bottom: 0.4rem;
}
.question .main-q .store-line {
    font-size: 0.95rem;
    line-height: 1.5rem;
    color: #fff;
    padding: 0.5rem 0 0.2rem;
}
.question .main-q .store-line b {
    color: #ffe14d;
}
.question .main-q .dot-list {
    padding-left: 0.1rem;
    list-style: none;
}
.question .main-q .dot-list li {
    font-size: 0.95rem;
    line-height: 1.6rem;
    letter-spacing: -0.02em;
    color: #fff;
}
.question .main-q .dot-list li b {
    color: #ffe14d;
}
.question .main-q .qa-answer {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.97rem;
    line-height: 1.65rem;
    color: #fff;
    padding-bottom: 0.2rem;
}
.question .main-q .qa-answer b {
    color: #ffe14d;          /* 보라 배경 위 — 주황은 대비가 낮아 노랑으로 */
    font-family: 'GmarketSansBold', sans-serif !important;
}
/* ===== 좌·우 안내 박스를 같은 줄에 맞춘다 (2026-09-10) =====
   🔴 원인은 「설명이 몇 줄인가」가 아니었다 — 양쪽 다 3줄인데 글자·줄간격이 제각각이라
      높이가 갈렸다(실측 좌 16px/25.6 + 15.2px/24 = 91.2px · 우 15.52px/26.4 = 82.4px).
      그 8.8px 이 소제목(.tip)을 좌 296 / 우 287 로 어긋나게 했다.
   🎯 설명부를 `.qb-desc` 로 묶고 그 안 글자값을 통일한다 — 줄 수가 같으면 높이가 저절로 같아진다.
      min-height 는 폭이 좁아져 한쪽만 줄이 늘 때를 위한 보조 바닥이다. */
.question .main-q .left-box,
.question .main-q .right-box {
    display: flex;
    flex-direction: column;
}
.question .main-q .qb-desc {
    min-height: 5.1rem;
}
.question .main-q .qb-desc .lead-copy,
.question .main-q .qb-desc .store-line,
.question .main-q .qb-desc .qa-answer {
    font-size: 0.95rem;
    line-height: 1.7rem;
    padding: 0;
    margin: 0;
}
/* 🔴 이 자리에 `padding-top` 을 두면 좌측만 그만큼 커져 소제목이 다시 어긋난다(실측 5.6px).
   좌측은 두 문단, 우측은 한 문단 3줄이라 우측에 같은 간격을 줄 자리가 없다 —
   줄간격 1.7rem 이 이미 문단 구분을 해 준다. */
.question .main-q .qb-desc .store-line {
    padding-top: 0;
}

/* [서비스 이용안내] 머리글 — 아이콘이 글자보다 위로 떠 있었다.
   🔴 `vertical-align: baseline` 이라 25.6px 글리프의 밑선이 18.4px 글자 밑선에 맞고 위로 솟는다.
      크기를 글자에 맞추고 flex 로 세로 중앙을 잡는다(그러면 광학 중심이 맞는다). */
/* 소제목 아래 본문도 같은 줄에서 시작시킨다 — 표에만 위 여백 0.2rem 이 있어 2.4px 어긋났다. */
.question .main-q .qb-body-align .rent-table { margin-top: 0; }
.question .main-q .right-box .rent-table { margin-top: 0; }

.question .main-q .game-cont .g-tit {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.question .main-q .game-cont .g-tit i {
    font-size: 1.3rem;
    line-height: 1;
}

/* 🔴 이 구간엔 이미 축소 규칙(0.88rem/1.55rem)이 있었는데 `.qb-desc` 를 낀 새 셀렉터(클래스 4)가
   그것(클래스 3)을 명시도로 이겨 무효가 됐다 — 그래서 좁은 폭에서 좌측만 한 줄 늘어
   소제목이 27px 어긋났다(실측 1100px: 좌 287 / 우 260). 같은 값을 같은 명시도로 다시 건다. */
@media screen and (max-width: 1380px) {
    .question .main-q .qb-desc .lead-copy,
    .question .main-q .qb-desc .store-line,
    .question .main-q .qb-desc .qa-answer {
        font-size: 0.88rem;
        line-height: 1.55rem;
    }
    .question .main-q .qb-desc { min-height: 4.7rem; }
}

/* lg 시작~1150px 은 두 칸이 가장 좁다 — 좌측 매장 안내가 3줄로 늘어 다시 한 줄 어긋난다
   (실측 1100px: 소제목 좌 277 / 우 253). 이 구간만 한 단계 더 줄인다.
   🟢 992px 이하는 두 박스가 세로로 쌓이므로 맞출 상대가 없다 — 손대지 않는다. */
@media screen and (min-width: 993px) and (max-width: 1150px) {
    .question .main-q .qb-desc .lead-copy,
    .question .main-q .qb-desc .store-line,
    .question .main-q .qb-desc .qa-answer {
        font-size: 0.8rem;
        line-height: 1.42rem;
    }
    .question .main-q .qb-desc { min-height: 4.3rem; }
}

/* lg 시작 직후(993~1060px)가 가장 좁다 — 1010px 에서 아직 한 줄 더 늘었다(좌 269 / 우 247). */
@media screen and (min-width: 993px) and (max-width: 1060px) {
    .question .main-q .qb-desc .lead-copy,
    .question .main-q .qb-desc .store-line,
    .question .main-q .qb-desc .qa-answer {
        font-size: 0.74rem;
        line-height: 1.34rem;
    }
    .question .main-q .qb-desc { min-height: 4.05rem; }

    /* 993px 에서는 제목까지 갈렸다 — 좌 「아직도 PC방에 직접 가시나요?」만 2줄이 되어
       설명 시작선부터 어긋났다(좌 192 / 우 165). 제목도 이 구간에서 함께 줄인다. */
    .question .main-q p.b-tit { font-size: 0.95rem; letter-spacing: -0.03em; }
    .question .main-q p.b-tit i { font-size: 0.85rem; }
}

.question .main-q .right-box .tip-sub {
    color: #efe6ff !important;
    font-size: 0.9rem;
    line-height: 1.45rem;
}

/* 우측 박스의 유료게임 표 — td 에 직접 색 */
.question .main-q .right-box .rent-table tbody td,
.question .main-q .right-box .rent-table tbody td:last-child {
    color: #fff;
}

/* ── 서비스 이용안내 ── */
.question .main-q .use-guide .use-steps {
    padding: 0.3rem 0 0.2rem;
    margin: 0;
    list-style: none;
}
.question .main-q .use-guide .use-steps li {
    font-size: 0.95rem;
    line-height: 1.75rem;
    letter-spacing: -0.02em;
    color: #fff;
}
.question .main-q .use-guide .use-steps li b {
    color: #ffe14d;
    font-family: 'GmarketSansBold', sans-serif !important;
}
.question .main-q .use-guide .use-steps li i {
    font-size: 0.85rem;
    color: #d9c9ff;
    padding: 0 0.2rem;
}
.question .main-q .use-guide .use-video {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    padding: 0.45rem 1.1rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 2rem;
    color: #fff;
    font-size: 0.92rem;
    text-decoration: none;
}
.question .main-q .use-guide .use-video:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* ── 공지사항 / 충전 요금표 (다크 박스 안) ── */
.pc-guide.notice-board,
.pc-guide.charge-guide {
    height: auto;
    /* 🙋 [2026-09-10] "아래 여백이 너무 많다" — min-height 250px 이 내용보다 커서
       공지 박스 밑이 비었다. 두 박스는 같은 row 라 어차피 서로 높이를 맞춘다
       (stretch). 그러므로 최소높이를 걸 이유가 없다. */
    min-height: 0;
    background-image: none;
    padding: 1.6rem 1.7rem 1.3rem;
    font-size: 1.05rem;
}
.pc-guide.notice-board .pc-lead-tit,
.pc-guide.charge-guide .pc-lead-tit {
    font-size: 1.2rem;
    line-height: 1.7rem;
    padding-bottom: 0.7rem;
}
.charge-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
/* 🔴 th·td 에 직접 — table 에만 주면 27행 전역 리셋(#181818)에 진다 */
.charge-table th {
    color: #fff82e;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    text-align: center;
}
.charge-table td {
    color: #fff;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.93rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}
/* 🙋🙋 [2026-09-10 2회 지적] "행마다 위아래 여백 균등하게 — 어떤 건 위에 붙어 있다".
   🔴🔴 원인은 값이 아니라 선택자였다 — 위 `.charge-table th` 는 **머리행 전용이 아니라**
   `tbody` 의 금액 칼럼(`<th scope="row">`)에도 걸린다. 그래서 같은 행 안에서
   th 와 td 의 상하 여백이 서로 달랐다.
   🎯 그러므로 padding 은 위 규칙에서 빼고 여기서 thead / tbody 로 갈라 준다.
   🔴 이 표에 칼럼을 더할 때 `<th scope="row">` 를 쓰면 자동으로 아래 규칙에 걸린다 —
      머리행 규칙(.notice-table thead th …)에 tbody 용 값을 섞지 마라. */
.charge-table thead th {
    padding: 0.4rem 0.25rem 0.75rem;
}
.charge-table tbody th,
.charge-table tbody td {
    /* 🔴 광학 보정(2026-09-11 · 형제 pcrental 과 같은 축) — 상하 합(1.44rem)은 그대로 두고 재분배한다.
       🔴 형제 값을 그대로 복사하지 않았다 — 이 표는 글자가 0.93rem 이라 보정량이 다르다.
          이 폭에서 직접 재서 산출한 값이다(실측 차 −1.33px → ±0.665px = 0.042rem). */
    padding-top: 0.76rem;
    padding-bottom: 0.68rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    line-height: 1.5rem;
    vertical-align: middle;
}
/* 🙋🙋 [2026-09-10 3회 지적] "6번만 세로 중앙이고 나머지는 위로 붙었다" — 맞다.
   🔴 종전엔 첫 행에만 padding-top 을 더 줬다(0.9rem vs 0.62rem). 머리행과 띄우려던 것인데,
      그 행만 위아래가 비대칭이 되어 혼자 중앙에 놓이고 나머지는 위로 붙어 보였다.
   🎯 **본문 행에는 어떤 예외도 두지 않는다** — 전 행이 같은 상하 여백을 갖는다.
      머리행 아래 간격은 thead th 의 padding-bottom 으로만 만든다(아래 규칙).
   🔴 `tr:first-child`·`tr:last-child` 로 여백을 보정하고 싶어지면 멈춰라 — 그게 이 결함이다. */
.charge-table tbody tr:last-child td {
    border-bottom: 0;
}
/* ── 입금확인·이용 수칙 안내 (2026-09-14 🙋 · main 공지사항 옆 박스) ──
   종전 충전표 자리다. 항목 이름(dt)은 표 머리칸처럼 노랑, 내용(dd)은 흰색.
   🔴 전역 리셋(27행)이 dl·dt·dd 를 #181818 로 되돌리므로 색을 직접 준다. */
.rule-guide .rule-list {
    margin: 0;
}
/* 괄호 문구가 제목 중간에서 끊겨 보이지 않게 제목 아래 한 줄로 내린다 */
.rule-guide .pc-lead-tit .rule-tit-sub {
    display: block;
    font-size: 0.95rem;
    line-height: 1.4rem;
    margin-top: 0.15rem;
}
.rule-guide .rule-item {
    display: grid;
    grid-template-columns: 6.6rem 1fr;
    gap: 0.8rem;
    align-items: baseline;
    padding: 0.8rem 0.1rem 0.72rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.rule-guide .rule-item:last-child {
    border-bottom: 0;
    padding-bottom: 0.2rem;
}
.rule-guide .rule-item dt {
    color: #fff82e;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.92rem;
    line-height: 1.5rem;
}
.rule-guide .rule-item dd {
    color: #fff;
    font-size: 0.93rem;
    line-height: 1.5rem;
}
.rule-guide .rule-item dd b {
    color: #00ff68;
    font-family: 'GmarketSansBold', sans-serif !important;
}
.rule-guide .rule-item dd a {
    color: #fff;
    font-family: 'GmarketSansBold', sans-serif !important;
    text-decoration: none;
}
.rule-guide .rule-sub {
    display: block;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.85rem;
    line-height: 1.35rem;
    margin-top: 0.15rem;
}
@media screen and (max-width: 992px) {
    .rule-guide .rule-item {
        grid-template-columns: 5.4rem 1fr;
        gap: 0.6rem;
        padding: 0.62rem 0.05rem 0.56rem;
    }
    .rule-guide .rule-item dt,
    .rule-guide .rule-item dd {
        font-size: 0.84rem;
        line-height: 1.35rem;
    }
    .rule-guide .rule-sub {
        font-size: 0.78rem;
        line-height: 1.25rem;
    }
}
/* ── 공지사항 카드 리스트 (2026-09-10) ──
   🙋 사용자 결정: "항목이 의미가 없어서 표보다 카드 리스트" → 번호 칼럼과 머리행을 없앴다.
   🔴 표(.notice-table)는 통째로 사라졌다 — 그 셀렉터를 다시 쓰지 마라.
   🔴 다크 박스 안이라 글자색을 직접 준다(전역 리셋 27행이 #181818 로 되돌린다). */
.notice-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.notice-cards .nc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.6rem;
    padding: 0.72rem 0.85rem;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.notice-cards .nc-item:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 248, 46, 0.6);
    transform: translateX(2px);
}
.notice-cards .nc-item.is-notice {
    background: rgba(255, 150, 0, 0.13);
    border-color: rgba(255, 150, 0, 0.45);
}
.notice-cards .nc-item.is-notice:hover {
    background: rgba(255, 150, 0, 0.2);
    border-color: rgba(255, 150, 0, 0.75);
}
.notice-cards .nc-tit {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff !important;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.45rem;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 🙋 [2026-09-10] "제목이 왜 위로 살짝 올라가 있는 것 같지?" — 맞다.
       🔴🔴 padding 문제가 아니다. flex 가 span 박스는 12.5px/12.5px 로 완벽히 중앙에
          놓는데, **GmarketSansMedium 의 baseline 이 비대칭**이라 그 박스 *안에서*
          글자가 위 14.5px / 아래 15.7px 로 1.2px 위로 치우친다(실측).
       🎯 그래서 박스가 아니라 글자를 반값(0.6px)만큼 내린다. transform 이라
          말줄임(text-overflow)·레이아웃에 영향을 주지 않는다.
       🔴 padding 이나 line-height 로 고치려 들지 마라 — 그건 박스를 움직이는 것이라
          이미 대칭인 화살표(.nc-go)까지 함께 어긋난다. */
    /* 🙋 [2026-09-14 재지적] "제목과 화살표가 위로 기울어 보인다" — 0.6px 는 **박스**로 잰 값이라 절반만 보정됐다.
       🔴 판정은 박스가 아니라 **글자 잉크**로 해야 한다 — 카드 배경을 단색(마젠타)으로 칠한 시험 화면을 2배 캡처해
          잉크 위·아래 여백을 픽셀로 쟀다(좌표 맞춤에 기대면 모바일에서 3px 어긋난 거짓값이 나온다).
       실측: 전 1400px 1.8px 위 · 504px 1.2px 위 → 후 0.2px 위 · 0.2px 아래(측정 분해능 0.5px).
       em 단위라 모바일 글자 크기가 달라져도 같은 비율로 따라간다. */
    transform: translateY(0.125em);
}
.notice-cards .nc-item:hover .nc-tit {
    color: #fff82e !important;
}
.notice-cards .nc-lock {
    color: #ffd76a !important;
    font-size: 0.85rem;
    margin-right: 0.1rem;
}
.notice-cards .nc-go {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.85rem;
    /* 🔴 [2026-09-14] 박스는 중앙(13.9/13.9px)인데 **글리프가 위로 뜬다** — bootstrap-icons ::before 가
       vertical-align:-.125em 으로 놓이고 감싼 <i> 가 GmarketSans 의 비대칭 줄 규격(위 12 : 아래 5)을 물려받기 때문이다.
       실측(잉크): 전 1400px 2.0px 위 · 504px 2.5px 위 → 0.12em 은 0.5/1.0px 위로 모자랐고 0.16em 에서 0.0/0.5px. */
    transform: translateY(0.16em);
}
.notice-cards .nc-item:hover .nc-go {
    color: #fff82e !important;
}
.notice-cards .nc-empty {
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.95rem;
    text-align: center;
    padding: 2.2rem 0;
}
/* 공지글 배지 — 카드와 모달이 같은 모양을 쓴다 */
.notice-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #ff5f6d 0%, #ff9600 100%);
    color: #fff !important;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -0.02em;
    padding: 0.28rem 0.45rem;
    border-radius: 0.35rem;
    white-space: nowrap;
}
.notice-badge i {
    font-size: 0.68rem;
    color: #fff !important;
}
/* 충전표 — 금액 칼럼 강조, 보너스 초록 */
.charge-table tbody th {
    color: #ffd76a;
    font-size: 0.93rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}
.charge-table tbody tr:last-child th {
    border-bottom: 0;
}
.charge-table td.bonus {
    color: #7dffb0;
    font-family: 'GmarketSansBold', sans-serif !important;
}

/* ── 환불 불가 / 유효기간 박스 (밝은 배경) ── */
.q-box .q-warn span,
.q-box .q-warn i {
    color: #d11a1a;
}
.q-box .ban-list {
    font-family: 'GmarketSansBold', sans-serif !important;
    color: #d11a1a !important;
}
.q-box .ban-list .sep {
    color: #aaa !important;
    padding: 0 0.35rem;
}
/* 🙋 [2026-09-14] 다계정 이용 제한 박스의 항목 이름(제한 대상·조치 사항) */
.q-box p.q-a b.q-label {
    color: #d11a1a;
    font-family: 'GmarketSansBold', sans-serif !important;
    margin-right: 0.35rem;
}
/* 🙋 [2026-09-14] 내용이 두 줄로 넘어가도 둘째 줄이 항목 이름 아래가 아니라 내용 첫 글자에 열맞춤되게 한다 */
.q-box p.q-a.q-a-row {
    display: flex;
    align-items: baseline;
}
.q-box p.q-a.q-a-row b.q-label {
    flex-shrink: 0;
    white-space: nowrap;
}
/* 🔴 내용을 span 으로 감쌌더니 `.q-box p span`(보라 강조색)이 걸렸다 — 본문색으로 되돌린다 */
.q-box p.q-a.q-a-row > span {
    color: #1f1f1f;
}
.q-box p b {
    color: #4d1bb3;
}

/* ── 우측 사이드 배너 2종 — 시안 A '네온 다크' (🙋 2026-09-10 사용자 선택) ──
   🔴 종전의 노란 그라데이션 카드(.btn-side-card 계열)를 통째로 대체했다.
      마크업도 함께 바뀌었으니(_pages/main.php · PC/모바일 2곳) 한쪽만 되돌리지 마라.
   🔴 배경이 비치는 반투명 카드라 글자색을 반드시 직접 준다 — 전역 리셋(27행)이
      color 를 #181818 로 되돌리면 다크 배경에서 통째로 안 보인다.
   🔴🔴 이 두 버튼에 `btn-modal` 클래스를 붙이지 마라 — 그 규칙(780행)이
      `padding:0 !important; border:0 !important` 라서 아래 padding·border 를
      통째로 0 으로 만든다(2026-09-10 실측: 계산값 padding=0px·border=0px).
      모달은 `data-bs-toggle="modal"` 이 여는 것이고 `btn-modal` 은 순수 스타일
      클래스다(JS 참조 0건) — 빼도 동작은 그대로다.                              */
.btn-side-dl {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    text-align: left;
    background: rgba(10, 6, 24, 0.72);
    border: 2px solid #00e7ff;
    border-radius: 0.9rem;
    box-shadow: 0 0 20px rgba(0, 231, 255, 0.35), inset 0 0 24px rgba(0, 231, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* 🙋 [2026-09-10] 배너를 세로로 키우고 글자도 키웠다. */
    padding: 1.5rem 1.3rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
/* 🙋 [2026-09-10 사용자 지시] 이 배너만 hover 를 되살린다 — 클릭되는 쪽이라 반응이 있어야 한다.
   🔴 짝인 .side-pc-card 에는 넣지 마라(클릭 없는 표시 전용이다 — 위 절 참조). */
.btn-side-dl:hover {
    background: rgba(10, 6, 24, 0.86);
    border-color: #5ff2ff;
    box-shadow: 0 0 30px rgba(0, 231, 255, 0.65), inset 0 0 26px rgba(0, 231, 255, 0.14);
    transform: translateY(-2px);
}
.btn-side-dl:hover .sd-ic {
    background: rgba(0, 231, 255, 0.24);
    border-color: rgba(0, 231, 255, 0.85);
}
.btn-side-dl .sd-ic {
    flex: 0 0 3.1rem;
    height: 3.1rem;
    border-radius: 0.8rem;
    background: rgba(0, 231, 255, 0.14);
    border: 1px solid rgba(0, 231, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00e7ff !important;
    font-size: 1.5rem;
}
.btn-side-dl .sd-ic i {
    color: #00e7ff !important;
}
.btn-side-dl .sd-tx {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.15rem;
    line-height: 1.7rem;
    letter-spacing: -0.03em;
    color: #ffffff !important;
}
.btn-side-dl .sd-tx em {
    display: block;
    font-style: normal;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.86rem;
    line-height: 1.3rem;
    color: #8fe9ff !important;
    margin-top: 0.28rem;
}

/* ── 서비스 게임 카드 리스트 (🙋 2026-09-14 · main 우측 / 모바일 다운로드 배너 아래) ──
   위 다운로드 배너와 같은 네온 다크 카드. 클릭하지 않는 표시 전용이라 hover 가 없다.
   🔴 전역 리셋(27행)이 ul·li 를 #181818 로 되돌리므로 글자색을 직접 준다. */
.game-card {
    background: rgba(10, 6, 24, 0.72);
    border: 2px solid #b06bff;
    border-radius: 0.9rem;
    box-shadow: 0 0 20px rgba(176, 107, 255, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 1.25rem 1rem 1rem;
}
.game-card .gc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.game-card .gc-tit {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.2rem;
    line-height: 1.75rem;
    letter-spacing: -0.03em;
    color: #fff !important;
}
.game-card .gc-tit i {
    color: #c79bff !important;
    margin-right: 0.3rem;
}
.game-card .gc-count {
    flex-shrink: 0;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.8rem;
    line-height: 1rem;
    /* 광학 보정: 한글·숫자는 아래 획이 없어 위를 조금 더 준다 */
    padding: 0.34rem 0.65rem 0.24rem;
    border-radius: 2rem;
    background: rgba(0, 231, 255, 0.14);
    border: 1px solid rgba(0, 231, 255, 0.5);
    color: #8fe9ff !important;
}
.game-card .gc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
.game-card .gc-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.game-card .gc-item img {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.game-card .gc-nm {
    min-width: 0;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.98rem;
    line-height: 1.3rem;
    padding-top: 0.12rem;
    letter-spacing: -0.02em;
    color: #efe6ff !important;
    /* 🙋 [2026-10-12] 고객사가 제목을 'XX PC방 혜택'처럼 늘려 한 줄 말줄임이면 430px 에서 18개 중 15개가 잘렸다 → 세 줄까지 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* 🙋 [2026-09-14] 게시판 연동 — 내용이 있는 게임은 a.gc-item.game-open(누르면 안내 모달), 없는 게임은 span.gc-item */
.game-card .gc-list > li {
    min-width: 0;
}
.game-card a.gc-item {
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.game-card a.gc-item:hover,
.game-card a.gc-item:focus-visible {
    background: rgba(176, 107, 255, 0.16);
    border-color: rgba(199, 155, 255, 0.55);
}
.game-card .gc-go {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #a894c9 !important;
}
.game-card .gc-noimg {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(176, 107, 255, 0.18);
    color: #c79bff !important;
    font-size: 1.2rem;
}
.game-card .gc-noimg i {
    color: #c79bff !important;
}
/* 모바일은 폭이 넓어 한 줄 목록이면 너무 길어진다 — 칸을 채워 2~4열로 흘린다 */
@media screen and (max-width: 992px) {
    .game-card .gc-list {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    }
    .game-card .gc-item {
        gap: 0.45rem;
        padding: 0.35rem 0.45rem;
    }
    .game-card .gc-item img {
        flex-basis: 2rem;
        width: 2rem;
        height: 2rem;
    }
    .game-card .gc-nm {
        font-size: 0.86rem;
        line-height: 1.12rem;
    }
}

/* 🙋 [2026-09-10 사용자 결정] 이 카드는 **클릭하지 않는다** — 안내 표시 전용이다.
   그래서 button 이 아니라 div 이고 hover·transition·cursor 가 없다.
   🔴 다시 button 으로 바꾸거나 hover 효과를 넣지 마라. */
.side-pc-card {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(10, 6, 24, 0.72);
    border: 2px solid #b06bff;
    border-radius: 0.9rem;
    box-shadow: 0 0 20px rgba(176, 107, 255, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* 🙋 [2026-09-10] 세로·폰트 확대(위 다운로드 배너와 같은 축) */
    padding: 1.5rem 1.35rem;
}
.side-pc-card .sp-h {
    display: block;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.2rem;
    line-height: 1.75rem;
    letter-spacing: -0.03em;
    color: #ffffff !important;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.side-pc-card .sp-h i {
    color: #c79bff !important;
    margin-right: 0.25rem;
}
.side-pc-card .sp-list {
    display: block;
    padding-top: 0.9rem;
    font-family: 'GmarketSansMedium', sans-serif !important;
}
.side-pc-card .sp-li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 2.1rem;
    letter-spacing: -0.02em;
    color: #efe6ff !important;
}
.side-pc-card .sp-li i {
    color: #c79bff !important;
    font-size: 1rem;
    width: 1.2rem;
}
.side-pc-card .sp-li em {
    font-style: normal;
    font-size: 0.85rem;
    color: #a894c9 !important;
}
.side-pc-card .sp-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.6rem;
    background: linear-gradient(90deg, rgba(176, 107, 255, 0.28), rgba(0, 231, 255, 0.16));
}
.side-pc-card .sp-price .d {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.95rem;
    color: #efe6ff !important;
}
.side-pc-card .sp-price .w {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: #00e7ff !important;
}

/* ── 공지사항 모달 (2026-09-10) ──
   🙋 목록을 클릭하면 게시판으로 나가지 않고 여기에 제목·내용을 띄운다.
   🔴 다크 배경이라 글자색을 직접 준다 — 전역 리셋(27행)이 #181818 로 되돌린다.
   🔴 본문(.modal-body) 안은 에디터 HTML 이라 자식 요소에도 색을 상속시켜야 한다. */
.notice-modal {
    background: #16112b;
    border: 2px solid #b06bff;
    border-radius: 1rem;
    box-shadow: 0 0 34px rgba(176, 107, 255, 0.45);
}
.notice-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1.2rem 1.5rem 1rem;
    align-items: flex-start;
}
.notice-modal .nm-head {
    flex: 1 1 auto;
    min-width: 0;
}
.notice-modal .nm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: linear-gradient(135deg, #ff5f6d 0%, #ff9600 100%);
    color: #fff !important;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: 0.35rem;
    margin-bottom: 0.5rem;
}
.notice-modal .modal-title {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.25rem;
    line-height: 1.8rem;
    letter-spacing: -0.03em;
    color: #ffffff !important;
    word-break: break-all;
}
/* 🙋 [2026-09-14] 서비스 게임 모달 — 대표 이미지(게시판 목록이미지)를 게임명 왼쪽에 둔다. 공지사항은 hidden 이라 영향 없다 */
.notice-modal .nm-thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #0d0a1c;
    vertical-align: middle;
    margin-right: 0.8rem;
}
.notice-modal .nm-thumb:not([hidden]) + .modal-title {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 3.9rem);
}
.notice-modal .nm-empty {
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0;
}
.notice-modal .modal-body {
    padding: 1.4rem 1.5rem 1.6rem;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 1rem;
    line-height: 1.8rem;
    color: #efe6ff !important;
    word-break: break-all;
}
.notice-modal .modal-body *,
.notice-modal .modal-body p,
.notice-modal .modal-body span,
.notice-modal .modal-body div,
.notice-modal .modal-body li,
.notice-modal .modal-body td,
.notice-modal .modal-body th {
    color: #efe6ff !important;
}
.notice-modal .modal-body a {
    color: #8fe9ff !important;
    text-decoration: underline;
}
/* 🙋 [2026-09-17] 모바일 이 수정 — 전역 리셋(28행)의 word-break: keep-all 이 <p> 에 직접 걸려
   공백 없는 긴 주소(다운로드 URL)가 줄바꿈되지 않고 본문을 가로로 밀어냈다.
   한글 낱말은 keep-all 그대로 두고, 안 들어가는 낱말만 아무 곳에서나 끊는다. */
.notice-modal .modal-body,
.notice-modal .modal-body * {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
.notice-modal .modal-body video {
    max-width: 100%;
    height: auto;
}
.notice-modal .modal-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* 🙋 [2026-09-17] iOS 는 Bootstrap 의 body{overflow:hidden} 을 무시해 모달 뒤 화면이 스크롤된다 —
   main.php 스크립트가 열 때 body 를 현재 위치에 고정하고 닫을 때 되돌린다. */
body.pcb-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    /* 🔴 Bootstrap 이 스크롤바 폭만큼 주는 보정 — 스크롤바를 남기므로 0 이어야 안 밀린다 */
    padding-right: 0 !important;
}
/* 🙋 [2026-09-17] "모달이 뜰 때 스크롤바가 사라졌다 닫으면 생겨 화면이 왔다갔다 한다" — 데스크톱은 스크롤바(약 15px)가
   없어지면 가운데 정렬된 화면 전체가 옆으로 밀린다. 루트에 스크롤바를 **남겨 두고**(body 가 fixed 라 굴릴 내용이 없어
   비활성처럼 보인다) Bootstrap 의 보정 padding 을 지운다. 모바일(오버레이 스크롤바)은 원래 폭 변화가 없다. */
html.pcb-scroll-lock {
    overflow-y: scroll;
}
/* 🙋 [2026-09-17] "모달 스크롤바 UI 가 별로" — 기본 흰 스크롤바가 어두운 모달·페이지에서 튀었다.
   얇은 보라 손잡이 + 투명 트랙으로 바꾼다. 페이지 스크롤바도 같은 톤(모달이 열려 있을 때 옆에 나란히 보인다).
   🔴 크롬 121+ 는 scrollbar-color 가 있으면 ::-webkit-scrollbar 를 무시한다 — 둘 다 두되 값을 맞춰라. */
html {
    scrollbar-color: #5b4592 #0d0a1c;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #0d0a1c; }
html::-webkit-scrollbar-thumb { background: #5b4592; border-radius: 12px; border: 3px solid #0d0a1c; }
html::-webkit-scrollbar-thumb:hover { background: #7a5cc0; }
.notice-modal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(176, 107, 255, 0.65) transparent;
}
.notice-modal .modal-body::-webkit-scrollbar { width: 8px; }
.notice-modal .modal-body::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.notice-modal .modal-body::-webkit-scrollbar-thumb { background: rgba(176, 107, 255, 0.65); border-radius: 8px; }
.notice-modal .modal-body::-webkit-scrollbar-thumb:hover { background: #b06bff; }
html.pcb-scroll-lock .modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.notice-modal .modal-body img {
    max-width: 100%;
    height: auto;
}
.notice-modal .modal-body:empty::before {
    content: "내용이 없습니다.";
    color: rgba(239, 230, 255, 0.6) !important;
}

@media screen and (max-width: 992px) {
    .pc-guide.notice-board,
    .pc-guide.charge-guide {
        min-height: 0;
        padding: 1.2rem 1.1rem;
    }
    .charge-table th,
    .charge-table td,
    .charge-table tbody th {
        font-size: 0.82rem;
        /* 🔴 상하가 같은 shorthand 다 — 한쪽만 바꾸면 데스크톱에서 고친 불균등이 모바일에 되살아난다. */
        padding: 0.42rem 0.15rem;
    }
    .notice-cards {
        gap: 0.4rem;
    }
    .notice-cards .nc-item {
        padding: 0.6rem 0.7rem;
    }
    .notice-cards .nc-tit {
        font-size: 0.88rem;
    }
    .question .main-q .use-guide .use-steps li,
    .question .main-q .dot-list li,
    .question .main-q .qa-answer,
    .question .main-q .lead-copy,
    .question .main-q .store-line {
        font-size: 0.88rem;
        line-height: 1.55rem;
    }
    .btn-side-dl {
        padding: 1.25rem 1.1rem;
    }
    .btn-side-dl .sd-tx {
        font-size: 1.05rem;
    }
    .side-pc-card {
        padding: 1.25rem 1.15rem;
    }
    .side-pc-card .sp-h {
        font-size: 1.08rem;
    }
    .side-pc-card .sp-li {
        font-size: 0.95rem;
        line-height: 1.95rem;
    }
    .side-pc-card .sp-price .w {
        font-size: 1.45rem;
    }
    .notice-modal .modal-title {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }
    .notice-modal .modal-body {
        font-size: 0.95rem;
        line-height: 1.7rem;
    }
}

/* ═══ [2026-09-10 pcbang] 두 줄로 넘어간 항목의 둘째 줄 정렬 ═══
   둘째 줄("가능합니다.")이 불릿 자리까지 밀려나와 첫 줄 텍스트와 어긋났다.
   🔴 `text-indent` 음수(걸이 들여쓰기)로 하지 마라 — `bi-dot` 은 글리프가 ::before 라
      인라인 박스 폭이 0으로 잡혀 첫 줄이 되레 왼쪽으로 튀어나간다(실측: 적용 [0, 13.95]).
   🎯 불릿을 절대배치로 빼면 텍스트 두 줄이 같은 padding 자리에서 시작해 계산이 확정된다.
      값 0.9em(≒13.7px)은 규칙 해제 상태의 첫 줄 텍스트 시작 x 실측치(13.72px)다.
   🔴 li 를 flex 로 바꾸지 마라 — 안의 <b> 가 별도 flex item 이 되어 줄바꿈이 깨진다. */
.question .main-q .dot-list li {
    position: relative;
    padding-left: 0.9em;
}

/* 🔴 `top` 을 주지 마라 — 값을 비워 두면 absolute 가 원래(static) 세로 위치를 그대로 쓴다.
      `top: 0` 을 주면 불릿이 글자 baseline 위로 떠오른다. */
.question .main-q .dot-list li i {
    position: absolute;
    left: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   [2026-09-10 pcbang] 메인 안내영역 「콘솔」 스킨 — /front/main2 전용
   🙋 사용자가 시안 3종 중 B(콘솔)를 골랐고 "main.php 에 적용하기는 아쉬우니
      main2 에 적용" 하라고 했다. 그래서 스킨 전체를 `.main-q.q-console`
      안쪽으로만 건다 — _pages/main.php(=/front/main) 는 이 규칙에 닿지 않는다.
   🔴 전역 리셋(:27 color:#181818)과 `.question .main-q ul li`(:310) 계열이
      명시도로 이기므로 이 블록은 글자색을 전부 직접 준다.
   🔴 리스트에 ul/li 를 쓰지 마라 — :310/:319 가 색·여백을 덮는다.
      그래서 마크업이 div/span(.qc-rows > .qc-row)이다.
   ═══════════════════════════════════════════════════════════════════════ */

/* 🙋 [2026-09-10] "뒷배경(보라색)을 제거하는게 나을듯" — 어두운 판 셋이 이미
   각자 테두리를 가지고 있어서 바깥 보라 카드(#753fe3)는 액자 하나를 덧씌우는 꼴이었다.
   🔴 `background: none` 이 아니라 `transparent` 로 준다 — 이 규칙이 상속받는
      `.question .main-q`(:배경 #753fe3 · padding 2rem · radius 1rem)를 전부 되돌려야 한다. */
/* 🙋 [2026-09-11] 네 박스(머리띠·패널 2·이용안내)를 **바깥 박스 하나로 묶는다**.
   🔴 안쪽 박스와 같은 색이면 경계가 안 보인다 — 바깥은 더 어둡게 깔고 안쪽이 떠 보이게 한다.
   🔴🔴 바깥 패딩이 생기면 좌측 요소가 그만큼 밀려 **우측 컬럼과 맞춰 둔 두 쌍(배너·패널)이 통째로 어긋난다**.
      그래서 우측 `.col-lg-3` 에 같은 값을 padding-top 으로 되돌려준다(아래 규칙) — 한 쌍으로 움직인다. */
.console-ui { --pcb-box-pad: 1.25rem; }

/* 🙋 [2026-09-14] "연한 검은색 배경 삭제" — 바깥 박스의 배경·테두리를 지웠다.
   🙋 [2026-09-14] "모바일에서 서비스 이용안내와 공지사항 박스 너비가 다르다" — 투명해진 박스의 padding·border 가
      안쪽 카드만 그만큼 들여 넣고 있었다(공지사항은 박스 밖). 박스가 안 보이므로 치수도 0 으로 둔다.
   🔴 그래서 우측 컬럼의 padding-top 보정(종전 calc(box-pad + 1px))도 함께 0 이다 — 하나만 되돌리면 윗선이 어긋난다. */
.question .main-q.q-console {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 좌·우 첫 배너의 공통 높이 — 아래 두 규칙이 이 값 하나를 함께 본다 */
.console-ui {
    --pcb-banner-h: 6.55rem;
}

/* ── 머리띠 ── */
.question .main-q.q-console .qc-bar {
    box-sizing: border-box;
    height: var(--pcb-banner-h);
    background: rgba(10, 7, 22, 0.82);
    border: 1px solid rgba(2, 255, 213, 0.22);
    border-radius: 0.7rem;
    padding: 1rem 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.question .main-q.q-console .qc-bar .qc-tit {
    margin: 0;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.35rem;
    color: #fff;
    line-height: 1.4;
}
.question .main-q.q-console .qc-bar .qc-tit i {
    color: #02ffd5;
    margin-right: 0.35rem;
}
.question .main-q.q-console .qc-bar .qc-lead {
    margin: 0.3rem 0 0;
    font-size: 1rem;
    color: #b0a3d2;
    line-height: 1.5;
}

.question .main-q.q-console .qc-bar .qc-loc {
    margin: 0;
    font-size: 1rem;
    color: #b0a3d2;
}
.question .main-q.q-console .qc-bar .qc-loc b {
    color: #02ffd5;
    font-family: 'GmarketSansMedium', sans-serif !important;
}

/* ── 두 판 ── */
.question .main-q.q-console .qc-grid {
    --bs-gutter-y: 0.9rem;
}
.question .main-q.q-console .qc-panel {
    height: 100%;
    background: rgba(10, 7, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    padding: 1.5rem 1.5rem 1.6rem;
    box-sizing: border-box;
}

/* 소제목 — 🙋 "색상과 크기가 어색하다" 던 그 자리다.
   본문과 크기로 겨루지 않고 작게 · 자간 넓게 · 민트 단색 라벨로 내린다. */
.question .main-q.q-console .qc-label {
    margin: 0 0 0.9rem;
    /* 🙋 [2026-09-10] "'쌀먹용 PC' 헤더처럼 전부 동일하게" — 그 카드만 헤더 아래 구분선을
       가지고 있었다(실측 pb 14.4px + 1px rgba(255,255,255,.08), 본문은 pt 14.4px).
       🔴 이 값 셋이 한 벌이다 — 선만 긋고 여백을 안 주면 글자가 선에 붙는다. */
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: #02ffd5;
    line-height: 1.4;
}

.question .main-q.q-console .qc-price {
    margin: 0 0 0.2rem;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
}
.question .main-q.q-console .qc-price .num {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 2.7rem;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.question .main-q.q-console .qc-price .won {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.2rem;
    color: #fff;
}
.question .main-q.q-console .qc-price .unit {
    font-size: 1rem;
    color: #b0a3d2;
    margin-left: 0.15rem;
}
.question .main-q.q-console .qc-sub {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    color: #b0a3d2;
    line-height: 1.7;
}

.question .main-q.q-console .qc-rows {
    display: block;
}
.question .main-q.q-console .qc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    padding: 0.8rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    color: #d3c8ea;
}
.question .main-q.q-console .qc-row .v {
    color: #fff;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.question .main-q.q-console .qc-row .v.mint {
    color: #02ffd5;
}

/* ── 유료게임 표 ── */
.question .main-q.q-console .qc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.question .main-q.q-console .qc-table th {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    color: #8d81ad;
    font-weight: normal;
    text-align: right;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: none;
}
.question .main-q.q-console .qc-table thead th:first-child {
    text-align: left;
}
.question .main-q.q-console .qc-table tbody th {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1rem;
    letter-spacing: 0;
    color: #fff;
    text-align: left;
    /* 🔴 광학 보정 — 아래 td 와 **같은 값이어야 한다**(같은 행이라 한쪽만 고치면 행 안에서 어긋난다).
       실측 차 −1.50px → ±0.75px = 0.047rem · 합 1.7rem 유지. */
    padding: 0.9rem 0 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.question .main-q.q-console .qc-table td {
    /* 🔴 위 tbody th 와 같은 광학 보정값 — 합 1.7rem 유지. */
    padding: 0.9rem 0 0.8rem;
    font-size: 1rem;
    text-align: right;
    color: #d3c8ea;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.question .main-q.q-console .qc-table td.hi {
    color: #02ffd5;
    font-family: 'GmarketSansMedium', sans-serif !important;
}
.question .main-q.q-console .qc-table tbody tr:last-child th,
.question .main-q.q-console .qc-table tbody tr:last-child td {
    border-bottom: 0;
}

.question .main-q.q-console .qc-hint {
    margin: 0.9rem 0 0;
    font-size: 0.95rem;
    color: #9d92bb;
    line-height: 1.55;
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
}
.question .main-q.q-console .qc-hint .dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #02ffd5;
    margin-top: 0.5rem;
}

/* ── 이용안내 레일 ── */
.question .main-q.q-console .qc-rail {
    margin-top: 0.9rem;
    background: rgba(10, 7, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    padding: 1.5rem 1.5rem 1.6rem;
}
.question .main-q.q-console .qc-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0.2rem;
}
.question .main-q.q-console .qc-node {
    position: relative;
    padding-right: 1.1rem;
}
/* 단계를 잇는 가로선 — 마지막 칸은 점까지만 긋는다 */
.question .main-q.q-console .qc-node::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 1px;
    background: rgba(2, 255, 213, 0.25);
}
.question .main-q.q-console .qc-node:last-child::before {
    right: auto;
    width: 15px;
}
.question .main-q.q-console .qc-node .pin {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #02ffd5;
    background: #140f26;
    margin-bottom: 0.8rem;
}
.question .main-q.q-console .qc-node .k {
    display: block;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: #8d81ad;
    margin-bottom: 0.25rem;
}
.question .main-q.q-console .qc-node .d {
    display: block;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.08rem;
    color: #fff;
    line-height: 1.45;
}
.question .main-q.q-console .qc-node .d em {
    display: block;
    font-style: normal;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.95rem;
    color: #9d92bb;
    margin-top: 0.3rem;
    line-height: 1.7;
}
.question .main-q.q-console .qc-node .d em i {
    color: #6f6391;
    font-size: 0.78rem;
    padding: 0 0.1rem;
}
/* 🙋 [2026-09-14] STEP 02 '회원가입 시 지점은 그린타임으로 입력' — 지점명만 콘솔 강조색(민트)으로 */
.question .main-q.q-console .qc-node .d em b.qc-hl {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-weight: normal;
    color: #02ffd5;
}

.question .main-q.q-console .qc-video {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.2rem;
    padding: 0.6rem 1.3rem;
    border-radius: 0.4rem;
    background: #02ffd5;
    color: #140f26 !important;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.15s;
}
.question .main-q.q-console .qc-video:hover {
    background: #6affe4;
}
/* 🙋 [2026-09-10] "왼쪽 유튜브 이모티콘 왜이리 작아보임?" — 실측 아이콘 16px, 글자 14.08px 로
   숫자상으론 아이콘이 더 큰데도 작아 보인다. `bi-play-btn-fill` 은 글리프가 em 박스 안쪽에
   여백을 두고 그려져서, 굵은 한글 옆에서는 실제 잉크 면적이 작기 때문이다.
   🎯 그래서 값을 키운다. 🔴 `line-height: 1` 을 같이 줘라 — 안 주면 아이콘 줄상자가 24px 로
      늘어 버튼 높이(40px)가 함께 커진다. */
.question .main-q.q-console .qc-video i {
    color: #140f26 !important;
    font-size: 1.35rem;
    line-height: 1;
}

/* 태블릿 이하 — 3단 레일을 세로로 편다(가로선은 끈다) */
@media all and (max-width: 992px) {
    .question .main-q.q-console .qc-bar .qc-tit {
        font-size: 1.1rem;
    }
    .question .main-q.q-console .qc-price .num {
        font-size: 2.3rem;
    }
    .question .main-q.q-console .qc-track {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .question .main-q.q-console .qc-node {
        padding-right: 0;
    }
    .question .main-q.q-console .qc-node::before {
        display: none;
    }
    .question .main-q.q-console .qc-node .pin {
        margin-bottom: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   [2026-09-10 pcbang] `/front/main2` 전면 콘솔 스킨 — 🙋 "나머지 UI도 콘솔 느낌처럼"
   🔴 스코프는 `_pages/main2.php` 최상위 `.main-visual.console-ui` 하나다.
      _pages/main.php(=/front/main)에는 그 클래스가 없으므로 이 블록 전체가 닿지 않는다.
   🎯 규칙 하나로 통일한다 — 판: rgba(10,7,22,.82) + 1px rgba(255,255,255,.1) + radius .7rem
      라벨: 0.78rem / letter-spacing .14em / #02ffd5 · 본문: #d3c8ea · 흐린 글: #9d92bb
   🔴 강조색은 민트 하나뿐이다. 종전의 주황 네온·노랑·연두는 전부 걷어낸다 —
      경고(환불 불가)만 의미색으로 따로 둔다(#ff6b6b). 그건 액센트가 아니라 상태다.
   🔴 전역 리셋(:27 color:#181818)이 상속을 이기므로 글자색은 요소마다 직접 준다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 공통 판 ── */
.console-ui .pc-guide,
.console-ui .q-box {
    background: rgba(10, 7, 22, 0.82) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    border-radius: 0.7rem !important;
    padding: 1.5rem 1.5rem 1.6rem !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

/* 두 칸짜리 행은 판 높이를 맞춘다(공지 6건 ↔ 충전표 6행) */
.console-ui .pc-guide-row > .col,
.console-ui .row > .col:has(> .q-box) {
    display: flex;
}
.console-ui .pc-guide-row > .col > .pc-guide,
.console-ui .row > .col > .q-box {
    width: 100%;
}

/* ── 판 제목 = 민트 라벨 ── */
.console-ui .pc-guide .pc-lead-tit,
.console-ui .pc-notice .pn-tit {
    display: block;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.06em;
    color: #02ffd5 !important;
    text-align: left !important;
    margin: 0 0 0.9rem !important;
    padding: 0 0 0.9rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.console-ui .pc-guide .pc-lead-tit i,
.console-ui .pc-notice .pn-tit i {
    color: #02ffd5 !important;
    letter-spacing: 0;
    margin-right: 0.3rem;
}
.console-ui .pc-guide .pc-lead-tit .txt-yellow {
    color: #8d81ad !important;
}

/* ── 공지사항: 카드 → 하이라인 목록 ── */
.console-ui .notice-cards {
    gap: 0;
}
.console-ui .notice-cards .nc-item,
.console-ui .notice-cards .nc-item.is-notice {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    /* 🙋 [2026-09-14] "main2 공지 게시물마다 좌우여백이 너무 없다" — 종전 0.1rem(1.6px)이라 hover 배경이 글자에 붙었다.
       main 의 카드 여백과 같게 준다(데스크톱 0.85rem · ≤992px 0.7rem — 실측 main 13.6 / 11.2px). */
    padding: 0.7rem 0.85rem;
    transform: none;
}
@media all and (max-width: 992px) {
    .console-ui .notice-cards .nc-item,
    .console-ui .notice-cards .nc-item.is-notice {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
}
.console-ui .notice-cards li:first-child .nc-item {
    border-top: 0;
}
.console-ui .notice-cards .nc-item:hover,
.console-ui .notice-cards .nc-item.is-notice:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    transform: none;
}
.console-ui .notice-cards .nc-item:hover .nc-tit,
.console-ui .notice-cards .nc-item:hover .nc-go {
    color: #02ffd5 !important;
}
.console-ui .notice-cards .nc-tit {
    font-size: 1rem;
    line-height: 1.6rem;
}
.console-ui .notice-cards .nc-go {
    color: #6f6391 !important;
}
.console-ui .notice-cards .nc-lock {
    color: #8d81ad !important;
}
/* 공지 0건 — 판은 옆 칸 높이에 맞춰 늘어나므로 빈 문구를 가운데로 보낸다 */
.console-ui .pc-guide.notice-board {
    display: flex;
    flex-direction: column;
}
.console-ui .notice-cards:has(.nc-empty) {
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
}

.console-ui .notice-cards .nc-empty {
    color: #9d92bb !important;
    text-align: left;
    padding: 1.4rem 0 !important;
    font-size: 1rem;
}
/* 배지도 채움 → 테두리로. 판 안에서 색 덩어리가 하나면 충분하다 */
.console-ui .notice-badge {
    background: none;
    border: 1px solid rgba(2, 255, 213, 0.45);
    color: #02ffd5 !important;
    font-size: 0.68rem;
    padding: 0.22rem 0.4rem;
    border-radius: 0.25rem;
    letter-spacing: 0.04em;
}
.console-ui .notice-badge i {
    color: #02ffd5 !important;
}

/* ── 충전표 ── */
.console-ui .charge-table thead th {
    color: #8d81ad !important;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.console-ui .charge-table tbody th {
    color: #fff !important;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.console-ui .charge-table tbody td {
    color: #d3c8ea !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.console-ui .charge-table td.bonus {
    color: #02ffd5 !important;
}
.console-ui .charge-table tbody tr:last-child th,
.console-ui .charge-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* ── 환불 불가 / 유효기간 ── */
.console-ui .q-box p.q-q {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.06em;
    color: #02ffd5 !important;
    margin: 0 0 0.9rem;
    /* 🙋 [2026-09-10] "'쌀먹용 PC' 헤더처럼 전부 동일하게" — 그 카드만 헤더 아래 구분선을
       가지고 있었다(실측 pb 14.4px + 1px rgba(255,255,255,.08), 본문은 pt 14.4px).
       🔴 이 값 셋이 한 벌이다 — 선만 긋고 여백을 안 주면 글자가 선에 붙는다. */
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* 🙋 [2026-09-14] "환불 불가 대상이랑 밑에 문구가 왜 이렇게 떨어져 있지" — 카드 머리글용 구분선(pb 14.4 + 선 + mb 14.4)이
   박스 중간의 둘째 제목(.q-q2)에도 걸려 제목이 아래 문구와 29px 떨어지고, 위 문구와는 8px 로 붙었다.
   둘째 제목은 소제목이다 — 선을 없애고 위는 띄우고 아래는 붙인다(실측 전 위 8/아래 14+선 → 후 아래 문구에 붙음). */
.console-ui .q-box p.q-q.q-q2 {
    margin: 1.1rem 0 0.35rem;
    padding-bottom: 0;
    border-bottom: 0;
}
.console-ui .q-box p.q-q i {
    letter-spacing: 0;
    margin-right: 0.2rem;
    color: #02ffd5 !important;
}
.console-ui .q-box p.q-q span {
    color: #02ffd5 !important;
}
/* 경고는 액센트가 아니라 상태다 — 민트와 분리한다 */
.console-ui .q-box p.q-q.q-warn,
.console-ui .q-box p.q-q.q-warn span,
.console-ui .q-box p.q-q.q-warn i {
    color: #ff6b6b !important;
}
.console-ui .q-box p.q-a {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.9rem !important;
    color: #d3c8ea !important;
    padding-top: 0;
    margin-bottom: 0.5rem;
}
.console-ui .q-box p.q-a:last-child {
    margin-bottom: 0;
}
.console-ui .q-box p.q-a b,
.console-ui .q-box p b {
    color: #fff !important;
}
/* 🙋 [2026-09-14] main2 에 main 의 '다계정 이용 제한' 을 옮겼다 — 공용 `.q-a-row > span`(#1f1f1f · 밝은 판용)이
   어두운 판에서 글자를 지운다. 콘솔 본문색으로 되돌리고 항목 이름만 경고색으로 둔다. */
/* 🔴 main2 의 모바일 다운로드·게임 카드는 보라 박스(.main-q) **안**에 있다 — 장식 그림용 `.question .main-q img`
   (position:absolute · 우하단)가 게임 아이콘 18장에 모두 걸려 목록에서 사라지고 한 장만 카드 모서리에 떴다(430px 실측). */
.question .main-q .game-card img {
    position: static;
    right: auto;
    bottom: auto;
}
.console-ui .q-box p.q-a.q-a-row > span {
    color: #d3c8ea !important;
}
.console-ui .q-box p.q-a.q-a-row b.q-label {
    color: #ff6b6b !important;
}
/* 🙋 [2026-09-14] 993~1280px 에서 공용 `.mt-1-m{margin-top:0}` 이 둘째 패널의 gutter 윗여백만 지워
   두 패널 윗선이 14.4px 어긋났다(실측 1100px 90 vs 75.6) — 콘솔 그리드에서는 gutter 값으로 되돌린다. */
@media all and (min-width: 993px) and (max-width: 1280px) {
    .question .main-q.q-console .qc-grid > .mt-1-m {
        margin-top: var(--bs-gutter-y);
    }
}
.console-ui .q-box .ban-list {
    color: #ff6b6b !important;
    font-size: 1rem !important;
}
.console-ui .q-box .ban-list .sep {
    color: #6f6391 !important;
}

/* ── 이용 금지 및 신고 안내 ── */
.console-ui .pc-notice {
    font-size: 1rem !important;
}
.console-ui .pc-notice .notice-list {
    padding-right: 0 !important;
    margin: 0 !important;
    color: #d3c8ea !important;
}
.console-ui .pc-notice .notice-item {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 1rem !important;
    line-height: 2rem !important;
    color: #d3c8ea !important;
    letter-spacing: 0;
}
.console-ui .pc-notice .notice-foot {
    color: #9d92bb !important;
    margin-top: 0.7rem !important;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== 둘째 줄 — 좌측 「유료게임 이용 시」 패널과 우측 「쌀먹용 PC」 카드를 같은 높이로 (2026-09-11) =====
   🙋 사용자 요청. 첫 배너(`--pcb-banner-h`)와 같은 패턴이다.
   🔴 여기서도 `min-height` 가 아니라 `height` 다 — min 은 내용이 넘치면 늘어나서 못 맞춘다.
   실측(수정 전): 1600px 좌 297.3 / 우 294.7 · 1100px 좌 311.6 / 우 339.9 · 1010px 좌 311.6 / 우 373.5.
   🎯 값은 둘 중 큰 쪽(좁은 폭의 좌패널 311.6px)으로 잡는다 — 넓은 폭에서는 패널이 조금 커질 뿐이고,
      좁은 폭에서 넘치는 것은 우측 카드이므로 그쪽 글자를 줄여 넣는다(아래 미디어쿼리).
   🔴 좌패널은 둘이 같은 행이라 하나만 고정하면 짝이 어긋난다 — `.qc-panel` 전체에 건다. */
.console-ui { --pcb-panel-h: 19.5rem; }

@media all and (min-width: 993px) {
    /* 🙋 [2026-09-14] main2 내용을 main 과 맞추며 우측 '쌀먹용 PC' 카드가 빠졌다 — 좌패널은 더 이상 고정 높이로 묶지 않는다
       (충전표 7행이 19.5rem 을 넘친다 · 두 패널은 같은 행이라 height:100% 로 서로 맞춰진다). */
    .console-ui .col-lg-3 .side-pc-card {
        box-sizing: border-box;
        height: var(--pcb-panel-h);
    }
    /* 우측 카드의 윗 간격을 좌측 그리드와 맞춘다 — 16px 이라 2px 아래에서 시작했다(0.9rem = 14.4px). */
    .console-ui .col-lg-3 .side-pc-card { margin-top: 0.9rem !important; }

    /* 🔴 좌측 그리드의 세로 시작선은 폭에 따라 갈린다(실측 ≥1281px 209 · 993~1280px 195) —
       `.qc-grid` 의 gutter(col padding-top + row 음수 margin)가 좁은 폭에서 0 이 되기 때문이다.
       🔴 그 한 쌍을 직접 고정하려다 오히려 15px 밀렸다(음수 마진이 배너 margin-bottom 과 상쇄되던 것을 깼다) —
          건드리지 말고 **우측 카드의 윗 간격을 그 값에 맞춘다**. */
}

/* 🔴 [2026-09-11] 종전엔 이 구간만 `margin-top: 0` 이었다 — 좌측 그리드의 gutter 가 좁은 폭에서
   0 이 되어 패널이 배너에 붙었기 때문이다. **바깥 박스를 두르면서 그 gutter 가 전 폭에서 살아났다**
   (실측 1100px: 좌패널 top 195 → 230). 그래서 이 예외는 이제 거꾸로 14px 을 어긋나게 한다 — 지웠다.
   🎯 우측 카드는 기본 선언(`margin-top: 0.9rem`) 하나로 전 폭이 맞는다. */

/* 🔴 993~1280px 에서는 우측 카드 내용이 고정 높이를 넘친다
   (실측 1100px 1.9px · 1010px 35.5px — 「쌀먹용 PC 찾고 계신가요?」가 2줄 → 3줄이 되고 가격줄도 커진다).
   높이를 고정했으므로 글자를 줄여 그 안에 넣는다. */
@media all and (min-width: 993px) and (max-width: 1280px) {
    .console-ui .col-lg-3 .side-pc-card { padding: 1.1rem 1rem; }
    .console-ui .col-lg-3 .side-pc-card .sp-h {
        font-size: 0.92rem;
        line-height: 1.4rem;
    }
    .console-ui .col-lg-3 .side-pc-card .sp-li {
        font-size: 0.82rem;
        line-height: 1.75rem;
    }
    .console-ui .col-lg-3 .side-pc-card .sp-price {
        margin-top: 0.7rem;
        padding: 0.6rem 0.8rem;
    }
    .console-ui .col-lg-3 .side-pc-card .sp-price .d { font-size: 0.8rem; }
    .console-ui .col-lg-3 .side-pc-card .sp-price .w { font-size: 1.2rem; }
}

/* 다운로드 배너만 높이를 좌측 머리띠와 묶는다 — 외형(네온 테두리·글로우)은 그대로 둔다.
   🔴 `.col-lg-3` 으로 한정하라. 같은 버튼이 모바일용(.mobile-apply)에도 한 벌 있는데
      그쪽은 세로로 쌓이므로 높이를 맞출 상대가 없다. */
.console-ui .col-lg-3 .btn-side-dl {
    box-sizing: border-box;
    height: var(--pcb-banner-h);
}

/* 🔴 993~1280px 구간에서는 좌·우 칸이 좁아 문구가 줄바꿈되고, 높이를 고정해 뒀으므로 그대로 잘린다.
   실측(우측 배너): 1400·1280px 104.8px → 1200px 125.3px → 1100px 이하 152.4px.
   실측(좌측 머리띠): 1024px 에서 「대구 북구 …」 가 wrap 돼 아래 줄로 내려갔다(top 130 → 182).
   🔴 원 규칙이 `.qc-bar .qc-tit`(클래스 4)라 `.qc-tit`(클래스 3)로 쓰면 명시도에서 진다 — 셀렉터를 맞춰라. */
@media all and (min-width: 993px) and (max-width: 1280px) {
    /* 글자만 줄이는 것으로는 부족하다 — 폭이 모자라면 flex-wrap 이 그대로 줄을 내린다. */
    .question .main-q.q-console .qc-bar {
        gap: 0.7rem;
        padding: 0.9rem 1rem;
        flex-wrap: nowrap;
    }
    .question .main-q.q-console .qc-bar .qc-bar-l { min-width: 0; }
    .question .main-q.q-console .qc-bar .qc-loc {
        font-size: 0.72rem;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .question .main-q.q-console .qc-bar .qc-tit { font-size: 1.1rem; line-height: 1.34; }
    .question .main-q.q-console .qc-bar .qc-lead { font-size: 0.85rem; line-height: 1.35; }

    .console-ui .col-lg-3 .btn-side-dl {
        gap: 0.6rem;
        padding: 1rem 1rem;
    }
    .console-ui .col-lg-3 .btn-side-dl .sd-ic {
        flex: 0 0 2.4rem;
        height: 2.4rem;
    }
    .console-ui .col-lg-3 .btn-side-dl .sd-tx {
        font-size: 0.95rem;
        line-height: 1.35rem;
    }
    .console-ui .col-lg-3 .btn-side-dl .sd-tx em { font-size: 0.72rem; }
}

/* lg 시작 직후(993~1060px)가 좌측 칸이 가장 좁다 — 제목이 3줄이 되어 고정 높이를 넘친다. */
@media all and (min-width: 993px) and (max-width: 1060px) {
    .question .main-q.q-console .qc-bar .qc-tit { font-size: 0.95rem; line-height: 1.3; }
    .question .main-q.q-console .qc-bar .qc-lead { font-size: 0.76rem; line-height: 1.3; }
    .question .main-q.q-console .qc-bar .qc-loc { font-size: 0.66rem; }
}

/* 🙋 [2026-09-10] 우측 박스 4종(PC방 접속 프로그램 · 쌀먹용 PC · 시설사진 · SNS 채널)은
   **콘솔 스킨을 걸지 않는다** — 사용자가 종전 네온 카드 쪽이 낫다고 했다.
   🔴 다시 콘솔 판으로 바꾸지 마라. 여기서 지운 것은 `.view-cont`·`.qr-*`·`.btn-side-dl`·
      `.side-pc-card` 의 배경·테두리·라벨 규칙이고, **모바일 간격 통일은 아래 미디어쿼리에 남겨 뒀다**
      (그건 외형이 아니라 배치다 — 되돌리면 8·24px 들쭉날쭉이 되살아난다). */

@media all and (max-width: 992px) {
    /* 🔴 세로로 쌓이는 구간이라 높이를 맞출 상대가 없다 —
       고정 높이를 풀지 않으면 좁을수록 내용이 잘린다(실측 415px 뷰포트에서 29.6px 넘침). */
    .question .main-q.q-console .qc-bar,
    .console-ui .col-lg-3 .btn-side-dl { height: auto; min-height: 0; }

    .console-ui .pc-guide,
    .console-ui .q-box {
        padding: 1.1rem 1.15rem 1.2rem !important;
    }
    .console-ui .pc-guide-row > .col,
    .console-ui .row > .col:has(> .q-box) {
        display: block;
    }

    /* 🙋 [2026-09-10] "모바일은 박스마다 간격이 제각각이네" — 맞다. 실측 8·15·16·24·30·32px.
       🔴 출처가 넷이다: ⓐ 판 자신의 `margin-bottom:1rem` ⓑ 열의 `.mb-1-m`/`.mt-1-m`/`.mt-2`
          ⓒ `.qc-grid` 의 `--bs-gutter-y` ⓓ `.qc-rail`·`.view-cont` 의 `margin-top`.
       🔴🔴 그런데 마진을 한 값으로 맞추는 것만으로는 **안 된다** — 1차 시도에서 두 자리가
          0px 이 됐다. 판의 아래 마진이 `.col`(위아래 padding·border 가 없다)을 통과해
          **마진 상쇄**로 밖으로 빠져나가기 때문이다. 값을 아무리 맞춰도 사라지는 자리가 남는다.
       🎯 그래서 여백을 마진이 아니라 **세로 컨테이너의 `gap`** 으로 옮긴다 — flex gap 은
          상쇄되지 않는다. 자식의 위아래 마진은 전부 0 으로 눕히고 gap 하나가 전담한다.
       🔴 `margin: 0` 이 아니라 **`margin-top`/`margin-bottom` 만** 0 으로 해라 —
          부트스트랩 `.row` 의 좌우 음수 마진까지 지우면 가로 폭이 어긋난다.
       🟢 값 0.9rem 은 데스크톱 `.qc-grid` 세로 간격과 같아 두 화면의 리듬이 맞는다. */
    .console-ui .main-q.q-console,
    .console-ui .mobile-apply,
    .console-ui .cont-wrap > .row,
    .console-ui .col-lg-9,
    .console-ui .col-lg-3,
    .console-ui .col-lg-9 > .row,
    .console-ui .qc-grid {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        --bs-gutter-y: 0;
    }
    .console-ui .main-q.q-console > *,
    .console-ui .mobile-apply > *,
    .console-ui .col-lg-9 > *,
    .console-ui .col-lg-3 > *,
    .console-ui .col-lg-9 > .row > .col,
    .console-ui .qc-grid > .col,
    .console-ui .cont-wrap > .row > [class*="col"],
    .console-ui .main-q.q-console,
    .console-ui .qc-panel,
    .console-ui .pc-guide,
    .console-ui .q-box,
    .console-ui .view-cont,
    .console-ui .btn-side-dl,
    .console-ui .side-pc-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ── 게시글 상세 전용 화면 (🙋 2026-09-14 · _pages/board/article-pcbang-view.php) ──
   메인과 같은 배경·헤더를 쓰고 가운데 네온 카드 하나에 글을 싣는다(공지 모달과 같은 색).
   🔴 전역 리셋(27행)이 글자색을 #181818 로 되돌리므로 본문 자식까지 색을 직접 준다. */
.pcb-article .visual-bg {
    min-height: calc(100vh - 150px);
    padding-bottom: 3.5rem;
}
.pcb-article .pa-logo img {
    width: 174px;
    margin-left: 1rem;
}
.pcb-article .pa-wrap {
    max-width: 920px;
    margin: 1.2rem auto 0;
}
.pcb-article .pa-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.9rem 0.2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.pcb-article .pa-crumb a,
.pcb-article .pa-crumb span {
    color: rgba(255, 255, 255, 0.85) !important;
}
.pcb-article .pa-crumb a:hover {
    color: #ffea00 !important;
}
.pcb-article .pa-crumb > i {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5) !important;
}
.pcb-article .pa-card {
    background: rgba(18, 12, 40, 0.88);
    border: 2px solid #b06bff;
    border-radius: 1rem;
    box-shadow: 0 0 34px rgba(176, 107, 255, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: hidden;
}
.pcb-article .pa-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.8rem 2rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.pcb-article .pa-thumb {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #0d0a1c;
}
.pcb-article .pa-head-tx {
    min-width: 0;
}
.pcb-article .pa-badge,
.pcb-article .pa-board {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.78rem;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    border-radius: 0.35rem;
    margin-bottom: 0.55rem;
}
.pcb-article .pa-badge {
    background: linear-gradient(135deg, #ff5f6d 0%, #ff9600 100%);
    color: #fff !important;
}
.pcb-article .pa-board {
    background: rgba(176, 107, 255, 0.18);
    border: 1px solid rgba(176, 107, 255, 0.55);
    color: #d9c2ff !important;
}
.pcb-article .pa-badge i,
.pcb-article .pa-board i {
    color: inherit !important;
}
.pcb-article .pa-title {
    margin: 0;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.75rem;
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: #fff !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.pcb-article .pa-meta {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: rgba(239, 230, 255, 0.6) !important;
}
.pcb-article .pa-meta time {
    color: inherit !important;
}
.pcb-article .pa-body {
    padding: 1.7rem 2rem 2rem;
    font-size: 1rem;
    line-height: 1.85;
    color: #efe6ff !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.pcb-article .pa-body *,
.pcb-article .pa-body p,
.pcb-article .pa-body span,
.pcb-article .pa-body div,
.pcb-article .pa-body li,
.pcb-article .pa-body td,
.pcb-article .pa-body th {
    color: #efe6ff !important;
}
.pcb-article .pa-body a {
    color: #8fe9ff !important;
    text-decoration: underline;
}
.pcb-article .pa-body img {
    max-width: 100%;
    height: auto;
}
.pcb-article .pa-body .pa-empty {
    margin: 0;
    color: rgba(239, 230, 255, 0.7) !important;
}
.pcb-article .pa-files {
    list-style: none;
    margin: 0;
    padding: 0.9rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pcb-article .pa-files li + li {
    margin-top: 0.4rem;
}
.pcb-article .pa-files a,
.pcb-article .pa-files a * {
    font-size: 0.9rem;
    color: #8fe9ff !important;
}
.pcb-article .pa-files a span {
    color: rgba(239, 230, 255, 0.55) !important;
}
.pcb-article .pa-admin {
    padding: 0 2rem 1.3rem;
    text-align: right;
}
.pcb-article .pa-admin a,
.pcb-article .pa-admin a i {
    font-size: 0.85rem;
    color: #ffea00 !important;
}
.pcb-article .pa-nav {
    margin-top: 1rem;
    background: rgba(10, 6, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    overflow: hidden;
}
.pcb-article .pa-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    transition: background 0.12s ease;
}
.pcb-article .pa-nav-item + .pa-nav-item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pcb-article .pa-nav-item:hover {
    background: rgba(176, 107, 255, 0.16);
}
.pcb-article .pa-nav-lb {
    flex: none;
    width: 3.6rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.85rem;
    color: #b98cff !important;
}
.pcb-article .pa-nav-lb i {
    color: inherit !important;
}
.pcb-article .pa-nav-tx {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    color: #fff !important;
}
.pcb-article .pa-cta {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}
.pcb-article .pa-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.6rem;
    padding: 0.85rem 1rem 0.65rem;
    border-radius: 0.9rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1rem;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pcb-article .pa-btn i {
    color: inherit !important;
}
.pcb-article .pa-btn:hover {
    transform: translateY(-2px);
}
.pcb-article .pa-btn-dl {
    background: rgba(10, 6, 24, 0.72);
    border: 2px solid #00e7ff;
    box-shadow: 0 0 20px rgba(0, 231, 255, 0.35);
    color: #8ff4ff !important;
}
.pcb-article .pa-btn-home {
    background: #753fe3;
    border: 2px solid #9d70ff;
    color: #fff !important;
}

@media screen and (max-width: 992px) {
    .pcb-article .visual-bg {
        padding-bottom: 2rem;
    }
    .pcb-article .pa-logo img {
        width: 119px;
        margin-top: 0.2rem;
    }
    .pcb-article .pa-wrap {
        margin-top: 0.6rem;
    }
    .pcb-article .pa-head {
        gap: 0.85rem;
        padding: 1.3rem 1.1rem 1.1rem;
    }
    .pcb-article .pa-thumb {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 0.75rem;
    }
    .pcb-article .pa-title {
        font-size: 1.3rem;
    }
    .pcb-article .pa-body {
        padding: 1.2rem 1.1rem 1.5rem;
        font-size: 0.95rem;
    }
    .pcb-article .pa-files {
        padding: 0.8rem 1.1rem;
    }
    .pcb-article .pa-admin {
        padding: 0 1.1rem 1.1rem;
    }
    .pcb-article .pa-nav-item {
        padding: 0.85rem 1.1rem;
    }
    .pcb-article .pa-cta {
        flex-direction: column;
    }
}

/* ── 게시판 목록 전용 화면 (🙋 2026-09-14 · _pages/board/article-pcbang-list.php) — 상세 .pcb-article 블록을 그대로 쓰고 목록 부분만 더한다 */
.pcb-article .pl-head {
    justify-content: space-between;
}
.pcb-article .pl-count {
    flex: none;
    font-size: 0.9rem;
    color: rgba(239, 230, 255, 0.7) !important;
}
.pcb-article .pl-count b {
    font-family: 'GmarketSansBold', sans-serif !important;
    color: #ffea00 !important;
}
.pcb-article .pl-empty {
    margin: 0;
    padding: 3rem 1rem;
    text-align: center;
    color: rgba(239, 230, 255, 0.65) !important;
}
.pcb-article .pl-list {
    list-style: none;
    margin: 0;
    padding: 0.6rem 1.2rem 1.2rem;
}
.pcb-article .pl-list > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pcb-article .pl-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0.8rem;
    border-radius: 0.6rem;
    transition: background 0.12s ease;
}
.pcb-article .pl-item:hover {
    background: rgba(176, 107, 255, 0.16);
}
.pcb-article .pl-thumb {
    flex: none;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #0d0a1c;
}
.pcb-article .pl-tx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pcb-article .pl-tit {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    color: #fff !important;
}
.pcb-article .pl-badge {
    margin: 0 0.35rem 0 0;
    vertical-align: 0.1em;
}
.pcb-article .pl-lock {
    margin-right: 0.25rem;
    color: #b98cff !important;
}
.pcb-article .pl-date {
    flex: none;
    font-size: 0.85rem;
    color: rgba(239, 230, 255, 0.55) !important;
}
.pcb-article .pl-go {
    flex: none;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45) !important;
}
/* 서비스 게임은 두 줄 격자 */
.pcb-article .pl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.8rem;
}
.pcb-article .pl-grid > li + li {
    border-top: 0;
}
.pcb-article .pl-grid > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pcb-article .pl-paging {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 1.4rem;
}
.pcb-article .pl-pg {
    min-width: 2.2rem;
    padding: 0.45rem 0.6rem 0.3rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: 0.9rem;
    color: #efe6ff !important;
}
.pcb-article .pl-pg.is-on {
    background: #753fe3;
    border-color: #9d70ff;
    color: #fff !important;
}

@media screen and (max-width: 992px) {
    .pcb-article .pl-list {
        padding: 0.3rem 0.6rem 0.8rem;
    }
    .pcb-article .pl-item {
        padding: 0.85rem 0.5rem;
    }
    .pcb-article .pl-tx {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    .pcb-article .pl-tit {
        max-width: 100%;
        font-size: 0.95rem;
    }
    .pcb-article .pl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   🙋 [2026-09-16] 데스크톱 세로 압축 — "이용 요금 / 충전 금액별 이용 시간 / 서비스 이용안내
   세로 간격을 줄여서 PC에서 공지사항과 입금확인 안내가 더 보이게"
   🔴 ≥993px 에서만 건다 — 모바일(≤992px)은 🙋 2026-09-14 로 전 구간 16px 로 맞춰 뒀다.
   🔴 충전표 행의 상/하 padding 은 **th·td 가 같은 값이어야 한다**(광학 보정 ±0.047rem
      차이를 유지한 채 합만 1.7rem → 1.1rem 으로 줄였다 — 한쪽만 고치면 행 안에서 어긋난다).
   실측(1440×900): 좌측 콘솔 블록 868 → 725px · 입금확인/공지 박스 y 959 → 816(첫 화면 진입).
   ============================================================ */
@media (min-width: 993px) {
    .question .main-q.q-console .qc-panel,
    .question .main-q.q-console .qc-rail {
        padding: 1.05rem 1.5rem 1.1rem;
    }
    .question .main-q.q-console .qc-label {
        margin-bottom: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .question .main-q.q-console .qc-sub {
        margin-bottom: 0.7rem;
    }
    .question .main-q.q-console .qc-row {
        padding: 0.55rem 0;
    }
    .question .main-q.q-console .qc-table th {
        padding: 0 0 0.45rem;
    }
    .question .main-q.q-console .qc-table tbody th {
        padding: 0.573rem 0 0.527rem;   /* 합 1.1rem · 광학 보정차 0.046rem 유지 */
    }
    .question .main-q.q-console .qc-table td {
        padding: 0.573rem 0 0.527rem;
    }
    .question .main-q.q-console .qc-hint {
        margin-top: 0.55rem;
    }
    .question .main-q.q-console .qc-rail {
        margin-top: 0.6rem;
    }
    .question .main-q.q-console .qc-node .d em {
        margin-top: 0.2rem;
    }
    .question .main-q.q-console .qc-video {
        margin-top: 0.75rem;
        padding: 0.5rem 1.2rem;
    }
}

/* ═══ 🙋 [2026-09-17] '이용 요금은 어떻게 되나요?' 판 안 하단 안내 배너 2종 (누르면 공지사항 해당 글을 공지 모달로) ═══
   🙋 처음엔 판 *아래*에 넣었다가 "박스 *안* 하단" 으로 옮겼고, 세로형 카드(153px)가 "너무 크다" 해서
   아이콘 + 두 줄 제목 + 작은 화살표의 가로형(약 64px)으로 줄였다. 판은 세로 flex, 배너는 margin-top:auto 로 바닥에 붙는다.
   🔴 전역 리셋(27행)이 글자색을 #181818 로 되돌리므로 색은 전부 직접 준다.
   🔴 btn-modal 클래스를 붙이지 마라(padding·border 가 0 이 된다). */
.question .main-q.q-console .qc-panel:has(> .qc-banners) {
    display: flex;
    flex-direction: column;
}
.question .main-q.q-console .qc-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
}
.qc-banners .qb-card {
    text-decoration: none !important;
    --qb-c: #02ffd5;
    --qb-c2: #00b3ff;
    --qb-rgb: 2, 255, 213;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0.65rem 0.7rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background:
        linear-gradient(145deg, rgba(34, 24, 64, 0.95), rgba(14, 10, 30, 0.95)) padding-box,
        linear-gradient(135deg, rgba(var(--qb-rgb), 0.8), rgba(255, 255, 255, 0.08) 55%, rgba(var(--qb-rgb), 0.3)) border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qc-banners .qb-card.qb-end {
    --qb-c: #ff7a8a;
    --qb-c2: #ffb347;
    --qb-rgb: 255, 122, 138;
}
/* 마우스를 올리면 빛줄기가 한 번 지나간다 */
.qc-banners .qb-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
}
.qc-banners .qb-card:hover,
.qc-banners .qb-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(var(--qb-rgb), 0.3);
    outline: none;
}
.qc-banners .qb-card:focus-visible {
    box-shadow: 0 0 0 2px var(--qb-c), 0 8px 20px rgba(0, 0, 0, 0.4);
}
.qc-banners .qb-card:hover::after { left: 130%; }
.qc-banners .qb-ic {
    flex: 0 0 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--qb-c), var(--qb-c2));
    box-shadow: 0 4px 12px rgba(var(--qb-rgb), 0.3);
}
.qc-banners .qb-ic i {
    color: #120d24 !important;
    font-size: 1.05rem;
    line-height: 1;
}
.qc-banners .qb-tit {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.9rem;
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: #ffffff !important;
}
.qc-banners .qb-go {
    flex: 0 0 auto;
    color: var(--qb-c) !important;
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.qc-banners .qb-card:hover .qb-go { transform: translateX(3px); }
/* 993~1280px 는 한 칸이 약 150px 라 글자·아이콘을 줄이고 화살표를 뺀다 */
@media screen and (min-width: 993px) and (max-width: 1280px) {
    .qc-banners .qb-card { padding: 0.6rem 0.6rem; gap: 0.5rem; }
    .qc-banners .qb-ic { flex-basis: 1.8rem; height: 1.8rem; }
    .qc-banners .qb-ic i { font-size: 0.92rem; }
    .qc-banners .qb-tit { font-size: 0.8rem; }
    .qc-banners .qb-go { display: none; }
}
/* 휴대폰(≤767px)도 한 칸이 약 170px 라 같은 축소를 준다(안 주면 제목이 세 줄로 넘친다) */
@media screen and (max-width: 767px) {
    .qc-banners .qb-card { padding: 0.6rem 0.6rem; gap: 0.5rem; }
    .qc-banners .qb-ic { flex-basis: 1.9rem; height: 1.9rem; }
    .qc-banners .qb-ic i { font-size: 0.95rem; }
    .qc-banners .qb-tit { font-size: 0.82rem; }
    .qc-banners .qb-go { display: none; }
}
@media screen and (max-width: 359px) {
    .question .main-q.q-console .qc-banners { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .qc-banners .qb-card,
    .qc-banners .qb-card::after,
    .qc-banners .qb-go { transition: none; }
    .qc-banners .qb-card:hover { transform: none; }
}

/* ═══ 🙋 [2026-09-17] 서비스 게임 아래 '다클라·부캐 육성 전용 PC' 배너 (클릭 → pcrental.kr 새 창) ═══
   고객사 요청 "크게 시원시원하게" — 골드 톤. 🙋 첫 판(629px)이 좌측 박스보다 260px 내려가 "너무 크다" →
   기간 칩을 빼고 사양을 2×2 타일로 묶어 약 350px(1440 기준 좌측 끝선 안)으로 줄였다.
   PC 는 우측 게임 카드 아래(.rent-card-wrap.mt-3), 모바일은 좌측 맨 끝(.d-lg-none.rent-card-wrap).
   🔴 전역 리셋(27행)이 글자색을 #181818 로 되돌리므로 색은 전부 직접 준다. */
.rent-card {
    --rc-c: #ffc94d;
    --rc-c2: #ff8a3d;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: block;
    text-decoration: none !important;
    border-radius: 1rem;
    padding: 1.05rem 1.05rem 1.05rem;
    border: 2px solid transparent;
    background:
        linear-gradient(160deg, rgba(38, 24, 58, 0.96) 0%, rgba(14, 9, 28, 0.96) 60%) padding-box,
        linear-gradient(140deg, #ffd66b, rgba(255, 138, 61, 0.55) 45%, rgba(176, 107, 255, 0.5)) border-box;
    box-shadow: 0 0 22px rgba(255, 180, 70, 0.25), 0 10px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.rent-card .rc-glow {
    position: absolute;
    z-index: -1;
    width: 13rem;
    height: 13rem;
    right: -5rem;
    top: -6rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 190, 80, 0.33), transparent 68%);
    transition: transform 0.4s ease;
}
.rent-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s ease;
}
.rent-card:hover,
.rent-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0 34px rgba(255, 180, 70, 0.42), 0 14px 30px rgba(0, 0, 0, 0.4);
    outline: none;
}
.rent-card:hover .rc-glow { transform: scale(1.25); }
.rent-card:hover::after { left: 130%; }
.rent-card .rc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.rent-card .rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.36rem 0.62rem 0.28rem;
    border-radius: 999px;
    color: #1a1026 !important;
    background: linear-gradient(135deg, var(--rc-c), var(--rc-c2));
}
.rent-card .rc-badge i { color: #1a1026 !important; }
.rent-card .rc-ext {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.rent-card .rc-ext i { color: #fff !important; font-size: 0.8rem; line-height: 1; }
.rent-card:hover .rc-ext { background: var(--rc-c); border-color: var(--rc-c); }
.rent-card:hover .rc-ext i { color: #1a1026 !important; }
.rent-card .rc-tit {
    display: block;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1.35rem;
    line-height: 1.35;
    letter-spacing: -0.04em;
    color: #ffffff !important;
}
.rent-card .rc-tit b {
    font-weight: normal;
    background: linear-gradient(90deg, #ffe08a, #ff9a4a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}
.rent-card .rc-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.75rem;
}
.rent-card .rc-spec {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.55rem 0.65rem 0.5rem;
    border-radius: 0.6rem;
    background: rgba(255, 201, 77, 0.07);
    border: 1px solid rgba(255, 201, 77, 0.22);
}
.rent-card .rc-spec .k {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #bfb3dc !important;
}
.rent-card .rc-spec .k i {
    color: var(--rc-c) !important;
    margin-right: 0.15rem;
}
.rent-card .rc-spec .v {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #ffffff !important;
    margin-top: 0.2rem;
    white-space: nowrap;
}
.rent-card .rc-spec small {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #ffd98a !important;
    opacity: 0.85;
}
.rent-card .rc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem 0.65rem;
    border-radius: 0.7rem;
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 1rem;
    line-height: 1;
    color: #1a1026 !important;
    background: linear-gradient(135deg, var(--rc-c), var(--rc-c2));
    box-shadow: 0 6px 16px rgba(255, 150, 60, 0.32);
}
.rent-card .rc-cta i {
    color: #1a1026 !important;
    transition: transform 0.2s ease;
}
.rent-card:hover .rc-cta i { transform: translateX(4px); }
/* 993~1280px 는 우측 칸이 약 230~260px 라 타일을 한 줄씩 쌓고 부가 문구를 오른쪽에 붙인다 */
@media screen and (min-width: 993px) and (max-width: 1280px) {
    .rent-card .rc-tit { font-size: 1.12rem; }
    .rent-card .rc-specs { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
    .rent-card .rc-spec { padding: 0.45rem 0.6rem 0.4rem; }
    .rent-card .rc-spec .v { white-space: normal; font-size: 0.88rem; }
    .rent-card .rc-cta { font-size: 0.92rem; }
}
@media screen and (max-width: 359px) {
    .rent-card .rc-specs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .rent-card, .rent-card::after, .rent-card .rc-glow, .rent-card .rc-cta i { transition: none; }
    .rent-card:hover { transform: none; }
}

/* ═══ 🙋 [2026-09-18] 헤더 카카오톡 ID(ev3337) — 전화번호 알약 옆 · 누르면 복사 ═══
   카카오 노랑으로 채워 전화(노란 테두리)보다 한 단계 더 눈에 띄게. 모바일은 '카카오톡' 글자를 빼고 아이콘 + ID.
   🔴 전역 리셋(27행)이 글자색을 #181818 로 되돌리므로 색은 직접 준다. */
/* 반반 칸이면 993~1095px 에서 카카오 알약이 둘째 줄로 떨어진다 — 로고 칸은 내용만큼, 나머지를 오른쪽에 준다 */
@media (min-width: 993px) {
    .header .row > .col:not(.text-end) { flex: 0 0 auto; width: auto; }
    .header .row > .col.text-end { flex: 1 1 0; white-space: nowrap; }
}
.header .kakao-id {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    vertical-align: top; /* middle 은 전화번호 알약보다 1.9px 내려앉는다 — 윗선을 맞추고 높이는 padding 으로 맞춘다(37.2px) */
    margin-left: 0.5rem;
    padding: 0.3rem 1rem 0.275rem 0.85rem;
    border: 2px solid #fee500;
    border-radius: 5rem;
    background: #fee500;
    cursor: default;
    box-shadow: 0 0 16px rgba(254, 229, 0, 0.35);
    line-height: 1.5;
}
.header .kakao-id i {
    color: #3c1e1e !important;
    font-size: 1rem;
    line-height: 1;
}
.header .kakao-id .kk-lb {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-size: 0.85rem;
    line-height: 1;
    color: #3c1e1e !important;
    padding-top: 0.1rem;
}
.header .kakao-id b {
    font-family: 'Play', sans-serif !important;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #191919 !important;
}
/* 모바일은 헤더의 유튜브·전화·카카오를 숨기고 하단 고정 바(.m-dock)로 옮긴다 — 헤더엔 로고만 */
@media screen and (max-width: 992px) {
    .header .youtube-m,
    .header .tell,
    .header .kakao-id { display: none !important; }
}

/* ═══ 🙋 [2026-09-18] 모바일 하단 고정 바 — 유튜브 · 카카오톡(ID 복사) · 전화걸기 ═══
   마크업 _layout/head02.php(메인·게시판 목록·상세 공통). 떠 있는 유리 알약 · 가운데 카카오를 노랑으로 강조.
   🔴 본문 끝이 가려지지 않게 body 아래 여백을 바 높이만큼 준다. 모달(z 1050+)이 바(z 1030)를 덮는다. */
.m-dock {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(0.6rem, env(safe-area-inset-bottom));
    z-index: 1030;
    display: grid;
    grid-template-columns: 1fr 1.45fr 1fr;
    gap: 0.3rem;
    padding: 0.3rem;
    border-radius: 0.95rem;
    background: rgba(16, 11, 32, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(176, 107, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.m-dock .md-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.1rem 0.3rem 0;
    border: 0;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, background 0.15s ease;
}
.m-dock .md-item:active { transform: scale(0.96); }
.m-dock .md-kakao { cursor: default; }
.m-dock .md-kakao:active { transform: none; }
.m-dock .md-ic { display: inline-flex; }
.m-dock .md-ic i { font-size: 1.02rem; line-height: 1; }
.m-dock .md-tx {
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.74rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #e9e2ff !important;
    white-space: nowrap;
}
.m-dock .md-yt .md-ic i { color: #ff3b3b !important; }
.m-dock .md-call .md-ic i { color: #02ffd5 !important; }
.m-dock .md-kakao {
    background: #fee500;
    box-shadow: 0 0 18px rgba(254, 229, 0, 0.35);
}
.m-dock .md-kakao .md-ic i { color: #3c1e1e !important; }
.m-dock .md-kakao .md-tx { color: #3c1e1e !important; font-family: 'GmarketSansBold', sans-serif !important; }
.m-dock .md-kakao .md-tx b {
    font-family: 'Play', sans-serif !important;
    font-weight: 700;
    font-size: 0.84rem;
    color: #191919 !important;
    margin-left: 0.1rem;
}
@media screen and (max-width: 992px) {
    body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .m-dock .md-item { transition: none; }
}

/* ═══ 🙋 [2026-10-01] 검색 문구 '지피방 원격PC방' — 헤더 로고 아래 · 요금 판 제목 2개 · 푸터 로고 아래 ═══
   🔴 헤더 높이(90px · 모바일 65px)는 그대로다 — 로고 img 를 block 으로 바꿔 글줄 아래 여백(약 4px)을 걷어 낸 자리에 한 줄을 얹는다.
   🔴 전역 리셋(27행)이 h1·h2·p 글자색을 #181818 로 되돌리므로 색은 전부 직접 준다. */
.header h1 img {
    display: block;
}
.header h1 .logo-tag {
    display: block;
    margin: 0.35rem 0 0 1rem;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-size: 0.82rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.85) !important;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(20, 10, 40, 0.55);   /* 모바일 상단 배경이 밝은 보라라 그림자가 없으면 글자가 묻힌다 */
}
/* 한 줄을 얹은 만큼 윗여백을 줄여 문구와 아래 판 사이를 띄운다(헤더 높이 90px · 아래 배치는 불변) */
@media (min-width: 993px) {
    .header {
        padding-top: 1.6rem;
    }
}
.header h1 .logo-tag b {
    font-family: 'GmarketSansBold', sans-serif !important;
    font-weight: normal;
    color: #02ffd5 !important;
}
.header h1 .logo-tag .lt-sep {
    display: inline-block;
    margin: 0 0.45rem;
    color: rgba(255, 255, 255, 0.45) !important;
}
@media screen and (max-width: 992px) {
    .header h1 .logo-tag {
        margin-top: 0.2rem;
        font-size: 0.7rem;
    }
    .header h1 .logo-tag .lt-sep {
        margin: 0 0.3rem;
    }
    /* 모바일 상단은 밝은 보라라 민트가 묻힌다 — 흰색 굵게로 */
    .header h1 .logo-tag b {
        color: #fff !important;
    }
}

/* 요금 판 제목 — 「지피방 | …」 의 앞 조각은 작은 머리글, 뒤 조각은 민트 제목으로 두 층에 놓는다(한 줄이면 가운데 판이 넘친다) */
.question .main-q.q-console .qc-label .ql-eb {
    display: block;
    margin-bottom: 0.2rem;
    font-family: 'GmarketSansMedium', sans-serif !important;
    font-weight: normal;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #a99fca;
}
.question .main-q.q-console .qc-label .ql-sep {
    display: none;
}
.question .main-q.q-console .qc-label .ql-main {
    display: block;
    letter-spacing: 0.01em;
}

/* 푸터 로고 아래 한 줄 */
.foot-cont .foot-brand {
    flex: none;
}
.foot-cont .foot-brand .foot-tag {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #a5a5a5 !important;
    white-space: nowrap;
}
.foot-cont .foot-brand .foot-tag .ft-sep {
    display: inline-block;
    margin: 0 0.4rem;
    color: #5f5f5f !important;
}
@media all and (max-width: 990px) {
    .foot-cont .foot-brand .foot-tag {
        margin-top: 0.35rem;
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   지피방 요금 비교 배너 (.gpb-)
   - 놓일 자리: 메인 우측 사이드바 다운로드 버튼(.btn-side-dl) 바로 아래 · 모바일은 .mobile-apply 의 같은 버튼 아래
   - 폭: 사이드바 100% (실측 298px@1280 · 350px@1440/1920 · 349px@375)
   - 🙋 [2026-10-22] 시안 F2 스티커형 채택 — 제목 → 인건비 문구 두 줄 → 기본·유료게임 두 칸(같은 크기) · CTA·링크 없음
       (550 하나만 크게 두면 좌측 요금 카드와 같아 보인다) · 원본·다른 겉모양(티켓·영수증)은 banner-price/src/
       마크업은 _pages/main.php 의 $price_banner_html
   - 크기는 컨테이너 기준(cqi)이라 폭이 바뀌어도 비율이 유지된다
   - 🔴 사이트 전역 리셋이 div·p 에 font-family(!important)와 color:#181818 을 건다
       → 굵은 서체는 !important 로, 글자색은 요소마다 직접 준다
   - 폰트는 사이트가 이미 싣는 GmarketSansMedium / GmarketSansBold 를 재사용한다(새 로딩 없음)
   ========================================================================== */

.gpb {
    --gpb-pad: clamp(16px, 5.71cqi, 20px);

    container-type: inline-size;
    display: block;
    line-height: normal;   /* 사이트 body 1.5 를 끊는다(칸이 커진다) */
    width: 100%;
    margin-top: 16px;
}
.gpb *,
.gpb *::before,
.gpb *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.gpb p,
.gpb span,
.gpb em,
.gpb ul.gpb-why li span {   /* 메인 .question .main-q ul li span(Bold !important)을 이긴다 */
    font-family: 'GmarketSansMedium', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    font-style: normal;
    word-break: keep-all;
}
.gpb .gpb-b,
.gpb .gpb-b span,
.gpb em,
.gpb .gpb-num,
.gpb .gpb-won,
.gpb .gpb-plus {
    font-family: 'GmarketSansBold', sans-serif !important;
}
.gpb ul { list-style: none; }
.gpb svg { display: block; flex: 0 0 auto; }

/* ==========================================================================
   공통 배치
   ========================================================================== */
.gpb .gpb-tag span {
    display: block;
    line-height: 1.15;
    letter-spacing: -0.04em;
}
.gpb .gpb-tag .gpb-t1 { font-size: clamp(17px, 6cqi, 21px); }
.gpb .gpb-tag .gpb-t2 { font-size: clamp(28px, 10.3cqi, 36px); margin-top: 2px; }

.gpb .gpb-why {
    margin-top: 20px;
    display: grid;
    gap: 8px;
}
.gpb ul.gpb-why li {   /* .question .main-q ul li(0.92rem · padding)보다 특이도 높게 */
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(14px, 4.57cqi, 16px);
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.gpb .gpb-why svg { width: 20px; height: 20px; }

.gpb .gpb-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.gpb .gpb-tile {
    padding: 12px 8px 10px;
    text-align: center;
}
.gpb .gpb-tl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: clamp(13px, 4cqi, 14px);
}
.gpb .gpb-tl svg { width: 16px; height: 16px; }
.gpb .gpb-tv {
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.gpb .gpb-num {
    font-size: clamp(32px, 11.4cqi, 40px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.gpb .gpb-plus { font-size: clamp(20px, 6.86cqi, 24px); margin-right: 1px; }
.gpb .gpb-won { font-size: clamp(15px, 5.14cqi, 18px); margin-left: 2px; }
.gpb .gpb-ts { margin-top: 6px; font-size: 12px; }

/* ==========================================================================
   F. 스티커 — 어두운 자주 + 사선 결 + 코랄→앰버 테두리 · 노란 기울인 스티커 제목
   ========================================================================== */
.gpb--sticker {
    --c-coral: #ff7a8a;
    --c-amber: #ffb347;
    --c-text: #f6eef7;
    --c-text-2: #e3d2e6;
}
.gpb--sticker .gpb-card {
    border-radius: 14px;
    padding: var(--gpb-pad);
    border: 2px solid transparent;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 10px, transparent 10px 20px) padding-box,
        radial-gradient(120% 70% at 100% 0%, rgba(255, 122, 138, 0.18), transparent 60%) padding-box,
        linear-gradient(160deg, #1f102e, #120a1f) padding-box,
        linear-gradient(135deg, var(--c-coral), var(--c-amber)) border-box;
}
.gpb--sticker .gpb-tag {
    display: inline-block;
    transform: rotate(-3deg);
    transform-origin: left center;
    margin: 2px 0 0 2px;
    padding: 12px 16px 10px;   /* 한글 광학 보정: 위를 조금 더 */
    border-radius: 8px;
    background: #ffe14d;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.gpb--sticker .gpb-tag span { color: #160c24; }
.gpb--sticker ul.gpb-why li { color: var(--c-text); }
.gpb--sticker .gpb-why svg { color: var(--c-coral); }
.gpb--sticker .gpb-why em.is-a { color: var(--c-coral); }
.gpb--sticker .gpb-why em.is-b { color: var(--c-amber); }
.gpb--sticker .gpb-bottom { margin-top: 20px; }
.gpb--sticker .gpb-tile {
    border-radius: 10px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) padding-box,
        linear-gradient(#170c25, #170c25) padding-box,
        linear-gradient(135deg, rgba(255, 122, 138, 0.7), rgba(255, 179, 71, 0.7)) border-box;
}
.gpb--sticker .gpb-tl,
.gpb--sticker .gpb-ts { color: var(--c-text-2); }
.gpb--sticker .gpb-tl svg { color: var(--c-coral); }
.gpb--sticker .gpb-num {
    background: linear-gradient(90deg, var(--c-coral), var(--c-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gpb--sticker .gpb-plus { color: var(--c-coral); }
.gpb--sticker .gpb-won { color: var(--c-amber); }

/* ==========================================================================
   모바일(.gpb--row) — 제목 한 줄 · 문구 · 두 칸
   ========================================================================== */
.gpb--row { --gpb-pad: 16px; }
.gpb--row .gpb-tag span { display: inline; }
.gpb--row .gpb-tag .gpb-t1,
.gpb--row .gpb-tag .gpb-t2 { font-size: 19px; margin-top: 0; }
.gpb--row .gpb-tag .gpb-t2::before { content: " "; }
.gpb--row.gpb--sticker .gpb-tag { padding: 10px 14px 8px; }
.gpb--row .gpb-why { margin-top: 16px; gap: 6px; }
.gpb--row ul.gpb-why li { font-size: 14px; }
.gpb--row.gpb--sticker .gpb-bottom { margin-top: 16px; }
.gpb--row .gpb-num { font-size: 32px; }

/* ==========================================================================
   지피방 「사용한 시간만 차감」 안내 배너 (.gtb-)
   - 놓일 자리: 요금 비교 배너(.gpb) 바로 아래 — PC 우측 사이드바 · 모바일 .mobile-apply
   - 폭: 사이드바 100% (실측 298px@1280 · 350px@1440/1920 · 349px@375)
   - 🙋 [2026-10-22] 고객사 캡처(사용한 시간만 차감 · 남은 시간 저장 · 다음 이용 시 사용) — 시안 D 팝 채택
       다른 시안(A 콘솔 · B 스티커 · C 시간 막대)은 banner-time/src/ · 마크업은 _pages/main.php 의 $time_banner_html
   - CTA·링크 없음(요금 배너와 같은 결정) — 누르지 않는 안내 배너
   - 🔴 사이트 전역 리셋이 div·p 에 font-family(!important)와 color:#181818 을 건다
       → 굵은 서체는 !important 로, 글자색은 요소마다 직접 준다
   - 🔴 메인 모바일은 이 배너가 .question .main-q 안에 들어간다 — `ul li`(0.92rem·padding)·`li span`(Bold !important)
       규칙을 피하려고 목록을 ul/li 가 아니라 div 로 짠다
   ========================================================================== */

.gtb {
    --gtb-pad: clamp(16px, 5.71cqi, 20px);

    container-type: inline-size;
    display: block;
    width: 100%;
    margin-top: 16px;
    line-height: normal;
}
.gtb *,
.gtb *::before,
.gtb *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.gtb p,
.gtb span,
.gtb em {
    font-family: 'GmarketSansMedium', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    font-style: normal;
    word-break: keep-all;
}
.gtb .gtb-b,
.gtb .gtb-b span,
.gtb .gtb-b em,
.gtb em,
.gtb .gtb-st,
.gtb .gtb-no {
    font-family: 'GmarketSansBold', sans-serif !important;
}
.gtb svg { display: block; flex: 0 0 auto; }

/* ── 공통 글자 ── */
.gtb .gtb-title {
    font-size: clamp(21px, 7.43cqi, 26px);
    line-height: 1.2;
    letter-spacing: -0.04em;
}
.gtb .gtb-desc {
    margin-top: 8px;
    font-size: clamp(13px, 4cqi, 14px);
    line-height: 1.55;
    letter-spacing: -0.02em;
}
.gtb .gtb-steps { display: grid; }
.gtb .gtb-step { display: flex; align-items: center; }
.gtb .gtb-st {
    font-size: clamp(14px, 4.57cqi, 16px);
    line-height: 1.25;
    letter-spacing: -0.03em;
}
.gtb .gtb-sd {
    margin-top: 2px;
    font-size: clamp(12px, 3.71cqi, 13px);
    line-height: 1.45;
    letter-spacing: -0.02em;
}
.gtb .gtb-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: clamp(14px, 4.57cqi, 16px);
    letter-spacing: -0.03em;
}
.gtb .gtb-foot svg { width: 18px; height: 18px; }

/* ==========================================================================
   모바일(.gtb--row) — 바깥 여백만 줄인다(폭이 PC 350 과 같다)
   ========================================================================== */
.gtb--row { --gtb-pad: 16px; }
.gtb--row .gtb-title { font-size: 22px; }

/* ==========================================================================
   D. 팝 — 🙋 [10-22] "스티커 세트처럼 화려하고 시원시원하게 눈에 잘 들어오게"
      블루→바이올렛 판(고객사 캡처의 파랑 + 사이트 보라) · 큰 제목(차감! 노랑) · 흰 시트에 설명·3단계 · 노란 맺음말
   ========================================================================== */
.gtb--pop {
    --c-lemon: #ffe14d;
    --c-ink: #1b1838;
    --c-sub: #4a4766;
}
.gtb--pop .gtb-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: var(--gtb-pad);
    background:
        radial-gradient(70% 45% at 100% 0%, rgba(255, 255, 255, 0.28), transparent 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px),
        linear-gradient(160deg, #2f5bff 0%, #5b3cff 55%, #8a2be2 100%);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(60, 40, 200, 0.35);
}
.gtb--pop .gtb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gtb--pop .gtb-title span { display: block; }
.gtb--pop .gtb-title .gtb-t1 {
    font-size: clamp(22px, 7.71cqi, 27px);
    color: #ffffff;
    text-shadow: 0 3px 0 rgba(20, 16, 90, 0.55);
}
.gtb--pop .gtb-title .gtb-t2 {
    margin-top: 2px;
    font-size: clamp(42px, 14.9cqi, 52px);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--c-lemon);
    text-shadow: 0 4px 0 rgba(20, 16, 90, 0.6);
}
.gtb--pop .gtb-clock {
    flex: 0 0 auto;
    width: clamp(64px, 22.9cqi, 80px);
    height: clamp(64px, 22.9cqi, 80px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #2f5bff;
    border: 4px solid var(--c-lemon);
    box-shadow: 0 4px 0 rgba(20, 16, 90, 0.45);
    transform: rotate(8deg);
}
.gtb--pop .gtb-clock svg { width: 60%; height: 60%; stroke-width: 2.2; }

.gtb--pop .gtb-sheet {
    margin-top: 16px;
    padding: 16px 14px 14px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 0 rgba(20, 16, 90, 0.3);
}
.gtb--pop .gtb-desc {
    margin-top: 0;
    text-align: center;
    color: var(--c-ink);
    font-size: clamp(13px, 4.29cqi, 15px);
    line-height: 1.6;
}
.gtb--pop .gtb-desc em.is-a { color: var(--c-ink); background: linear-gradient(transparent 55%, rgba(255, 225, 77, 0.85) 55%); }
.gtb--pop .gtb-desc em.is-b { color: #d6194f; }
.gtb--pop .gtb-steps { margin-top: 14px; gap: 8px; }
.gtb--pop .gtb-step {
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
}
.gtb--pop .gtb-step:nth-child(1) { background: #eaf1ff; }
.gtb--pop .gtb-step:nth-child(2) { background: #e6f8ee; }
.gtb--pop .gtb-step:nth-child(3) { background: #f1ebff; }
.gtb--pop .gtb-no {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding-top: 2px;
    font-size: 17px;
    color: #ffffff;
}
.gtb--pop .gtb-step:nth-child(1) .gtb-no { background: #2f5bff; }
.gtb--pop .gtb-step:nth-child(2) .gtb-no { background: #12924a; }
.gtb--pop .gtb-step:nth-child(3) .gtb-no { background: #7b3ff2; }
.gtb--pop .gtb-st { font-size: clamp(15px, 4.86cqi, 17px); }
.gtb--pop .gtb-step:nth-child(1) .gtb-st { color: #1d3fc4; }
.gtb--pop .gtb-step:nth-child(2) .gtb-st { color: #0b6b35; }
.gtb--pop .gtb-step:nth-child(3) .gtb-st { color: #5b21b6; }
.gtb--pop .gtb-sd { color: var(--c-sub); }
.gtb--pop .gtb-foot {
    margin-top: 14px;
    font-size: clamp(17px, 5.43cqi, 19px);
    color: var(--c-lemon);
}
.gtb--pop .gtb-foot span {
    font-family: 'GmarketSansBold', sans-serif !important;
    text-shadow: 0 2px 0 rgba(20, 16, 90, 0.5);
    background: linear-gradient(transparent 82%, rgba(255, 225, 77, 0.55) 82%);
}
.gtb--pop .gtb-foot svg { width: 22px; height: 22px; color: var(--c-lemon); }
.gtb--row.gtb--pop .gtb-title .gtb-t2 { font-size: 46px; }