@charset "utf-8";

/* Noto Sans KR은 base_sub.html에서 비차단 방식으로 불러온다. */

:root {
    --primaryColor: #4989bc;
    --react-good: #ff484f;
    --react-nogood: #217aee;
    /* 기본값: 다크모드 (color-theme 미설정 시 적용) */
    --lightVisible: inline-block;
    --darkVisible: none;
    --inputBg: #323235;
    --inputBgGray: #2a2a2a;
    --bodyBg: #151616;
    --contBg: #252525;
    --gnbBg: rgba(0,0,0,0.4);
    --menuBg: #323235;
    --joinBg: #151616;
    --prHover: #151616;
    --pointBg: #1f1d1d;
    --bovHover: #1f1d1d;
    --boNoticeBg: #1b1716;
    --ftCopyBg: #2b2727;
    --evenTdBg: #1f1d1d;
    --copyHvBg: #1f1d1d;
    --newBg: #1f1d1d;
    --priThBg: #242424;
    --pgBg: #323235;
    --autoBg: #3a3a3a;
    --pgHvBg: #1f1d1d;
    --scrapBg: #493937;
    --boListBg: #38393b;
    --btnPrvBg: #363636;
    --noImgBg: #1f1d1d;
    --gnbShadowBg: #0e0e0e66;
    --autoPopBg: #3a3a3a;
    --autoHvBg: #4a4a4a;
    --fontColor: #dbdbdb;
    --gnbFontColor: #fff;
    --prFontColor: #adb5bd;
    --btnColor: #fff;
    --bovColor: #c5c5c5;
    --tdColor: #ddd;
    --bovTitColor: #b8bcc2;
    --iconColor: #90959c;
    --ptStatusColor: #9c9c9c;
    --moreOptColor: #9fa7ab;
    --ftColor: #9fa7ab;
    --boListColor: #9e8582;
    --moreColor: #605a59;
    --border: 1px solid #353535;
    --topBtnBorder: 2px solid #ffffff32;
    --inputBorder: 1px solid #555;
    --gnbBorder: 1px solid #151616;
    --olBorder: 1px solid #3b3b3b;
    --scrabBorder: 1px solid #4d4a48;
    --moreUlBorder: 1px solid #494b4e;
    --moreLiBorder: 1px solid #3c3c3c;
    --afterBorder: transparent transparent #252525 transparent;
    --beforeBorder: transparent transparent #535353 transparent;
    --priTableBorder: 1px solid #444;
    --qaBorder: 1px solid #3b3232;
    --fileBorder: 2px solid #ffffff10;
    --shareBorder: 1px solid #444;
    --autoLiBorder: 1px solid #3a3a3a;
    --autoUlBorder: 1px solid #3a3a3a;
}

:root[color-theme='light'] { /* 스위치 버튼 */
    --lightVisible: none;
    --darkVisible: inline-block;
    /* background */
    --inputBg: #fff;
    --inputBgGray: #f6f6f6;
    --bodyBg: #f6f6f6;
    --contBg: #fff;
    --gnbBg: rgba(0,0,0,0.1);
    --menuBg: #4158d1;
    --joinBg: #f7f7f7;
    --prHover: #f7f7f7;
    --pointBg: #edf3fc;
    --bovHover: #f7f7f7;
    --boNoticeBg: #fff6fa;
    --ftCopyBg: #f1e7e5;
    --evenTdBg: #fbfbfb;
    --copyHvBg: #f4f4f4;
    --newBg: #f7f7f7;
    --priThBg: #f7f7f9;
    --pgBg: #eee;
    --autoBg: #eee;
    --pgHvBg: #fafafa;
    --scrapBg: #f8ebea;
    --boListBg: #ccd1d9;
    --btnPrvBg: #eeeeee;
    --noImgBg: #eaeaea;
    --gnbShadowBg: #37370566;
    --autoPopBg: #e8e8e8;
    --autoHvBg: #dbdbdb;
    /* 폰트색상 */
    --fontColor: #000;
    --gnbFontColor: #080808;
    --prFontColor: #465168;
    --btnColor: #000;
    --bovColor: #666;
    --tdColor: #666;
    --bovTitColor: #555;
    --iconColor: #4b5259;
    --ptStatusColor: #737373;
    --moreOptColor: #6b757c;
    --ftColor: #525252;
    --boListColor: #6f534e;
    --moreColor: #c4bab8;
    /* border */
    --border: 1px solid #e5ecee;
    --topBtnBorder: 2px solid #00000032;
    --inputBorder: 1px solid #d0d3db;
    --gnbBorder: 1px solid #e0e2e5;
    --olBorder: 1px solid #d5d9dd;
    --scrabBorder: 1px solid #e5ecee;
    --moreUlBorder: 1px solid #b8bfc4;
    --moreLiBorder: 1px solid #f1f1f1;
    --afterBorder: transparent transparent #fff transparent;
    --beforeBorder: transparent transparent #e5ecee transparent;
    --priTableBorder: 1px solid #d8dbdf;
    --qaBorder: 1px solid #ffded8;
    --fileBorder: 2px solid #00000010;
    --shareBorder: 1px solid #d5d5d5;
    --autoLiBorder: 1px solid #ffffff;
    --autoUlBorder: 1px solid #e8e8e8;
}

:root[color-theme='dark'] { /* 스위치 버튼 */
    --lightVisible: inline-block;
    --darkVisible: none;
    /* background */
    --inputBg: #323235;
    --bodyBg: #151616;
    --contBg: #252525;
    --gnbBg: rgba(0,0,0,0.4);
    --menuBg: #323235;
    --joinBg: #151616;
    --prHover: #151616;
    --pointBg: #1f1d1d;
    --bovHover: #1f1d1d;
    --boNoticeBg: #1b1716;
    --ftCopyBg: #2b2727;
    --evenTdBg: #1f1d1d;
    --copyHvBg: #1f1d1d;
    --newBg: #1f1d1d;
    --priThBg: #242424;
    --pgBg: #323235;
    --autoBg: #3a3a3a;
    --pgHvBg: #1f1d1d;
    --scrapBg: #493937;
    --boListBg: #38393b;
    --btnPrvBg: #363636;
    --noImgBg: #1f1d1d;
    --gnbShadowBg: #00000080;
    --autoPopBg: #ffffff40;
    --autoHvBg: #525252;
    /* 폰트색상 */
    --fontColor: #fff;
    --gnbFontColor: #a0a0a0;
    --prFontColor: #a0a0a0;
    --btnColor: #4158d1;
    --bovColor: #b9b9b9;
    --tdColor: #a0a0a0;
    --bovTitColor: #bababa;
    --iconColor: #fff;
    --ptAllColor: #8d8c8c;
    --ptStatusColor: #2c2c2c;
    --moreOptColor: #a0a0a0;
    --ftColor: #999999;
    --boListColor: #a08a85;
    --moreColor: #646464;
    /* border */
    --border: 1px solid #383838;
    --topBtnBorder: 2px solid #ffffff50;
    --inputBorder: none;
    --gnbBorder: 1px solid #383838;
    --olBorder: 1px solid #383838;
    --scrabBorder: 1px solid #616161;
    --moreUlBorder: 1px solid #646464;
    --moreLiBorder: 1px solid #383838;
    --afterBorder: transparent transparent #212020 transparent;
    --beforeBorder: transparent transparent #383838 transparent;
    --priTableBorder: 1px solid #414141;
    --qaBorder: 1px solid #504544;
    --fileBorder: 2px solid #ffffff24;
    --shareBorder: 1px solid #4d4d4d;
    --autoLiBorder: 1px solid #252525;
    --autoUlBorder: 1px solid #ffffff40;
    /* filter */
    --invert: invert(92%);
    --moreInvert: invert(86%);
}

/* 초기화 */
html { overflow-y:scroll; font-size:62.5%; }
body { margin:0; padding:0; font-size:1.2rem; font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; background:#151616; background:var(--bodyBg); color:#dbdbdb; color:var(--fontColor) }
#pc_menu a.is-pending,
#mobile_menu a.is-pending,
#gnb a.is-pending,
#game_mobile_menu_panel a.is-pending,
.game-mobile-bottom-nav a.is-pending { color: #2ee6a6 !important; background: rgba(46, 230, 166, .1) !important; }
html.game-category-navigation-pending :is(#pc_menu, #mobile_menu, #gnb, #game_mobile_menu_panel, .game-mobile-bottom-nav) a.active:not(.is-pending) { color: var(--fontColor) !important; background: transparent !important; }
html, form, fieldset, img { margin:0; padding:0; border:0 }
h1, h2, h3, h4, h5, h6 { font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
ul, dl,dt,dd { margin:0; padding:0; list-style:none }
legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
label, input, button, select, img { vertical-align:middle; font-size:1.2rem }

@keyframes gpSkeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Keep the current page geometry and skeletonize its existing content in place. */
html.game-category-navigation-pending :is(
    .lt_img, .item_img, .lt_thumbnail, .search_game_thumb,
    .game_thumbnail_wrap, .steam-card-thumb-wrap
) {
    background-color: #222 !important;
    background-image: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
    background-size: 200% 100% !important;
    animation: gpSkeletonShimmer 1.15s linear infinite !important;
}
html.game-category-navigation-pending :is(
    .lt_img, .item_img, .lt_thumbnail, .search_game_thumb,
    .game_thumbnail_wrap, .steam-card-thumb-wrap
) img {
    opacity: 0 !important;
}
html.game-category-navigation-pending :is(.home_guide_card, .guide_hub_card) img {
    object-position: -9999px 0 !important;
    background: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
    background-size: 200% 100% !important;
    animation: gpSkeletonShimmer 1.15s linear infinite !important;
}
html.game-category-navigation-pending #container { pointer-events: none; }
@media (max-width: 768px) {
html.game-category-navigation-pending #container:not(.gp-destination-shell):not(:has(.ranking_container)) :is(
    h1, h2, h3, h4, p, figcaption, dt, dd, th, td, small,
    .game_title, .game_meta, .game_genre, .game_platforms, .game_release,
    .rank_number, .rank_position, .metascore, .metascore_box,
    .item_subject, .item_writer, .item_footer,
    .guide_hub_meta, .guide_hub_labels, .guide_column_meta, .guide_column_kicker,
    .release-count, .release-description
) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    border-color: transparent !important;
    border-radius: 6px;
    background-color: #222 !important;
    background-image: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
    background-size: 200% 100% !important;
    animation: gpSkeletonShimmer 1.15s linear infinite !important;
}
html.game-category-navigation-pending #container :is(a, button, input, select) { pointer-events: none !important; }
/* Destination layouts retain their own banner, filters and responsive geometry.
   Only data slots are hidden until the real destination document arrives. */
.gp-destination-shell .gp-destination-card:not(.ranking_item),
.gp-destination-shell .gp-destination-card:not(.ranking_item) * {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}
.gp-destination-shell .gp-destination-card:not(.ranking_item) img,
.gp-destination-shell .gp-destination-card:not(.ranking_item) svg,
.gp-destination-shell .gp-destination-card:not(.ranking_item) i { visibility: hidden !important; }
.gp-destination-shell .gp-destination-card:not(.ranking_item) :is(
    .item_img, .game_thumbnail_wrap, .steam-card-thumb-wrap,
    .item_subject, .item_footer, .game_title, .game_meta, .game_genre,
    .game_release, .metascore, .metascore_box, .rank_number,
    .deal-price-box, h2, h3, p
),
.gp-destination-shell .gp-destination-card > img,
.gp-destination-shell .list_header .total,
.gp-destination-shell .release-count {
    visibility: visible !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
    background-size: 200% 100% !important;
    animation: gpSkeletonShimmer 1.15s linear infinite !important;
}
}
/* Mobile uses the desktop shimmer and the real responsive slot dimensions.
   Do not resize text, covers or scores while loading: that moves the cards
   again when the response arrives. Ranking filters keep their existing rows. */
@media (max-width: 768px) {
    .gp-destination-shell .gp-destination-card :is(
        .metascore-badge, .platform-box, .subscription-badge,
        .deal-discount-badge, .item_icon
    ) {
        visibility: hidden !important;
    }
    .gp-destination-shell .gp-destination-card :is(
        strong, .guide_hub_meta, .guide_hub_cta, .guide_column_meta,
        .gp-news-date, .gp-news-count
    ),
    .gp-destination-shell .home_guide_card > div > span,
    .gp-destination-shell .home_editorial_card > span,
    .gp-destination-shell .gp-news-title > span {
        background: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
        background-size: 200% 100% !important;
        animation: gpSkeletonShimmer 1.15s linear infinite !important;
    }
    .ranking_container.is-loading .ranking_list,
    .ranking_container.is-loading .ranking_item {
        opacity: 1 !important;
    }
    .ranking_container.is-loading .ranking_item,
    .gp-destination-shell .gp-destination-card {
        transform: none !important;
        transition: none !important;
        pointer-events: none !important;
    }
    /* Ranking and popularity retain text, scores and platform icons, just as
       desktop does. Only covers are pending, for both menu and filter changes. */
    .ranking_container.is-loading .ranking_item :is(
        .game_thumbnail_wrap, .game_thumbnail_placeholder
    ),
    .gp-destination-shell .ranking_item :is(
        .game_thumbnail_wrap, .game_thumbnail_placeholder
    ) {
        background: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
        background-size: 200% 100% !important;
        animation: gpSkeletonShimmer 1.15s linear infinite !important;
    }
    .ranking_container.is-loading .game_thumbnail_wrap img,
    .ranking_container.is-loading .game_thumbnail_placeholder i,
    .gp-destination-shell .ranking_item .game_thumbnail_wrap img,
    .gp-destination-shell .ranking_item .game_thumbnail_placeholder i {
        opacity: 0 !important;
    }
}
/* A document navigation can suspend main-thread background-position painting.
   Keep mobile pending surfaces on the compositor until the response arrives. */
@keyframes gpSkeletonSlide {
    from { transform: translate3d(-100%, 0, 0); }
    to { transform: translate3d(100%, 0, 0); }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    html body #container :is(
        .gp-destination-card:not(.ranking_item) :is(
            .item_img, .steam-card-thumb-wrap, .item_subject, .item_footer,
            .deal-price-box, h2, h3, p, strong, .guide_hub_meta,
            .guide_hub_cta, .guide_column_meta, .gp-news-date, .gp-news-count
        ),
        .home_guide_card.gp-destination-card > div > span,
        .home_editorial_card.gp-destination-card > span,
        .gp-destination-card .gp-news-title > span,
        .ranking_item.gp-destination-card :is(.game_thumbnail_wrap, .game_thumbnail_placeholder),
        .ranking_container.is-loading :is(.game_thumbnail_wrap, .game_thumbnail_placeholder)
    ) {
        position: relative !important;
        overflow: hidden !important;
        background: #222 !important;
        animation: none !important;
    }
    html body #container :is(
        .gp-destination-card:not(.ranking_item) :is(
            .item_img, .steam-card-thumb-wrap, .item_subject, .item_footer,
            .deal-price-box, h2, h3, p, strong, .guide_hub_meta,
            .guide_hub_cta, .guide_column_meta, .gp-news-date, .gp-news-count
        ),
        .home_guide_card.gp-destination-card > div > span,
        .home_editorial_card.gp-destination-card > span,
        .gp-destination-card .gp-news-title > span,
        .ranking_item.gp-destination-card :is(.game_thumbnail_wrap, .game_thumbnail_placeholder),
        .ranking_container.is-loading :is(.game_thumbnail_wrap, .game_thumbnail_placeholder)
    )::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg, transparent 0%, #3b424a 50%, transparent 100%);
        transform: translate3d(-100%, 0, 0);
        will-change: transform;
        animation: gpSkeletonSlide 1.15s linear infinite !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    html body #container.gp-destination-shell .gp-destination-card *,
    html body #container .ranking_container.is-loading .ranking_item * {
        animation: none !important;
    }
    .gp-destination-shell *,
    .gp-destination-shell *::before,
    .gp-destination-shell *::after { animation: none !important; }
    html.game-category-navigation-pending #container :is(
        h1, h2, h3, h4, p, figcaption, dt, dd, th, td, small,
        .game_title, .game_meta, .game_genre, .game_platforms, .game_release,
        .rank_number, .rank_position, .metascore, .metascore_box,
        .item_subject, .item_writer, .item_footer,
        .guide_hub_meta, .guide_hub_labels, .guide_column_meta, .guide_column_kicker,
        .release-count, .release-description
    ) { animation: none !important; }
}

.lt_img,
.item_img,
.lt_thumbnail,
.search_game_thumb,
.game_thumbnail_wrap,
.steam-card-thumb-wrap {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #222 8%, #2f343a 18%, #222 33%);
    background-size: 200% 100%;
    animation: gpSkeletonShimmer 1.15s linear infinite;
}

.pic_lt .lt_img,
.pic_li_lt li:first-child .lt_img {
    display: block;
    aspect-ratio: 297 / 212;
}

.bo_list .grid_item .item_img {
    aspect-ratio: 2 / 3;
}

.lt_img img,
.item_img img,
.lt_thumbnail img,
.search_game_thumb img,
.game_thumbnail_wrap img,
.steam-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.lt_img img.gp-image-loaded,
.item_img img.gp-image-loaded,
.lt_thumbnail img.gp-image-loaded,
.search_game_thumb img.gp-image-loaded,
.game_thumbnail_wrap img.gp-image-loaded,
.steam-card-thumb-wrap img.gp-image-loaded {
    opacity: 1;
}

.lt_img:has(img.gp-image-loaded),
.item_img:has(img.gp-image-loaded),
.lt_thumbnail:has(img.gp-image-loaded),
.search_game_thumb:has(img.gp-image-loaded),
.game_thumbnail_wrap:has(img.gp-image-loaded),
.lt_img.gp-image-ready,
.item_img.gp-image-ready,
.lt_thumbnail.gp-image-ready,
.search_game_thumb.gp-image-ready,
.game_thumbnail_wrap.gp-image-ready,
.steam-card-thumb-wrap.gp-image-ready {
    animation: none;
    background: transparent;
}
/* Guide cards keep their existing image dimensions while the cover loads. */
.home_guide_card img.gp-image-loading,
.guide_hub_card img.gp-image-loading {
    object-position: -9999px 0;
    background: linear-gradient(110deg, #222 8%, #3b424a 18%, #222 33%) !important;
    background-size: 200% 100% !important;
    animation: gpSkeletonShimmer 1.15s linear infinite;
}
img.gp-image-error {
    object-position: -9999px 0;
    background: #222 !important;
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .lt_img, .item_img, .lt_thumbnail, .search_game_thumb,
    .game_thumbnail_wrap, .steam-card-thumb-wrap, .steam-card-thumb-wrap::before,
    .home_guide_card img.gp-image-loading, .guide_hub_card img.gp-image-loading {
        animation: none !important;
    }
    img.gp-image-loaded { transition: none !important; }
    html.game-category-navigation-pending :is(
        .lt_img, .item_img, .lt_thumbnail, .search_game_thumb,
        .game_thumbnail_wrap, .steam-card-thumb-wrap,
        .home_guide_card img, .guide_hub_card img
    ) { animation: none !important; }
}
input, button { margin:0; padding:0; font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:1.2rem }
input[type="submit"] { cursor:pointer }
button { cursor:pointer }
textarea, select { font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:1.2rem }
select { margin:0 }
p { margin:0; padding:0; word-break:break-all }
hr { display:none }
pre { overflow-x:scroll; font-size:1.3rem }
a { color:var(--fontColor); text-decoration:none }

*, :after, :before { box-sizing:border-box; }

input[type=text],input[type=password], textarea { outline:none; }

.placeholdersjs { color:#aaa !important }

.chk_box {position:relative}
.chk_box input[type="radio"] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box input[type="radio"] + label {position:relative;padding-left:23px;display:inline-block;color:var(--fontColor)}
.chk_box input[type="radio"] + label span {position:absolute;top:0;left:0;width:15px;height:15px;display:block;background:#f7f8f9;border:1px solid #cdd6df;border-radius:50%}
.chk_box input[type="radio"]:checked + label {color:var(--primaryColor)}
.chk_box input[type="radio"]:checked + label span {border-color:var(--primaryColor)}
.chk_box input[type="radio"]:checked + label span:before {width:7px;height:7px;background:var(--primaryColor);content:'';position:absolute;top:3px;left:3px;border-radius:50%}

.chk_box input[type="checkbox"] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box input[type="checkbox"] + label {position:relative;padding-left:20px;color:#676e70}
.chk_box input[type="checkbox"] + label:hover{color:var(--primaryColor)}
.chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:var(--fontColor)}
.chk_box input[type="checkbox"]:checked + label span {background:url("/gamepunch/static/img/chk.png") no-repeat 50% 50% var(--primaryColor);border-color:var(--primaryColor);border-radius:3px}

#skip_to_container a { z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden }
#skip_to_container a:focus,
#skip_to_container a:active { width:100%; height:75px; background:#21272e; color:#fff; font-size:2.4rem; font-weight:bold; text-align:center; text-decoration:none; line-height:4rem }

html.remodal-is-locked {overflow-y:scroll !important}

#darkmode-toggle-switch { position:fixed; bottom:20px; right:80px; width:50px; height:50px; border:0; text-align:center; border-radius: 3px; background: var(--primaryColor); color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; }
#darkmode-toggle-switch .visible { width:24px; height:24px; vertical-align:middle; }
#darkmode-toggle-switch .visible.dark { display: var(--lightVisible) }
#darkmode-toggle-switch .visible.bright { display: var(--darkVisible) }

.elip { display: inline-block; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media ( max-width: 1100px ) {
    .elip { max-width: 100px; }
}

#hd_pop { z-index:1000; position:relative; margin:0 auto; height:0 }
.hd_pops { position:absolute; border:1px solid #e9e9e9; background:#fff }
.hd_pops img { max-width:100% }
.hd_pops_con { }
.hd_pops_footer { padding:0; background:#000; color:#fff; text-align:left; position:relative }
.hd_pops_footer:after { display:block; visibility:hidden; clear:both; content:"" }
.hd_pops_footer button { padding:10px; border:0; color:#fff }
.hd_pops_footer .hd_pops_reject { background:#000; text-align:left }
.hd_pops_footer .hd_pops_close { background:#393939; position:absolute; top:0; right:0 }

#hd { padding: 10px 0 0 0; box-sizing: border-box; }
#hd_h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }

#tnb { 
    margin: 0 auto 15px; 
    max-width: 1400px;
}
#tnb:after { display:block; visibility:hidden; clear:both; content:"" }
#tnb .inner { 
    margin: 0 auto; 
    padding: 12px 20px;
    background: transparent;
    border: none;
    box-shadow: none;
}

#hd_wrapper { 
    max-width: 1400px; 
    width: 96%;
    margin: 0 auto; 
    padding: 0;
    box-sizing: border-box;
    position: relative; 
    background: rgba(102, 126, 234, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 16px 16px 0 0; 
    height: 85px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0px 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: visible !important;
    z-index: 100;
}
#hd_wrapper:hover {
    background: rgba(102, 126, 234, 0.12);
    border-color: rgba(102, 126, 234, 0.25);
}

#logo { 
    float: left; 
    width: auto; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}
#logo:hover {
    opacity: 0.8;
}
#logo img { 
    width: auto !important;
    max-height: 48px !important;
}

#header_search { 
    width: 320px;
    position: relative;
    flex: 1;
    max-width: 320px;
    margin: 0 0 0 auto;
}
#header_search fieldset { 
    text-align: center; 
    padding: 0px; 
    border: none; 
}
#header_search form { 
    position: relative; 
    padding: 0;
    display: flex;
    align-items: center;
}
#header_search #sch_stx { 
    width: 100%; 
    height: 45px; 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    padding: 0 18px; 
    border-radius: 50px;
    font-size: 14px;
    transition: all 0.3s ease;
}
#header_search #sch_stx:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
#header_search #sch_stx::placeholder { 
    color: rgba(255, 255, 255, 0.6); 
}
#header_search #sch_submit { 
    position: absolute; 
    top: 50%;
    right: 8px; 
    transform: translateY(-50%);
    width: 45px; 
    height: 45px; 
    border: 0; 
    border-radius: 50%;
    cursor: pointer; 
    color: #fff; 
    background: transparent;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header_search #sch_submit:hover {
    background: rgba(255, 255, 255, 0.15);
}
#header_search_backdrop {
    display: none;
}

#hd_define { float:left }
#hd_define:after { display:block; visibility:hidden; clear:both; content:"" }
#hd_define li { float:left; font-size:1.3rem; line-height:14px; border-right:1px solid #4a4a4a; position:relative; text-align:center; margin:15px 10px 15px 0; padding-right:10px }
#hd_define li:last-child { padding-right:0; margin-right:0; border-right:0 }
#hd_define li a { display:inline-block; color:#919191 }
#hd_define li.active a { color:var(--primaryColor) }

#hd_qnb { 
    float: right; 
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
#hd_qnb:after { display:block; visibility:hidden; clear:both; content:"" }
#hd_qnb li { 
    float: left; 
    font-size: 13px; 
    line-height: 13px; 
    border-right: none;
    position: relative; 
    text-align: center; 
    margin: 0;
    padding: 0;
}
#hd_qnb li:last-child { padding-right:0; margin-right:0; border-right:0 }
#hd_qnb li span { display:none; }
#hd_qnb li a { 
    display: inline-block; 
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}
#hd_qnb li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    transition: left 0.3s ease;
    z-index: -1;
}
#hd_qnb li a:hover::before {
    left: 0;
}
#hd_qnb li a:hover { 
    color: #fff;
    transform: translateY(-1px);
}
#hd_qnb .visit .visit-num { 
    display: inline-block; 
    line-height: 18px; 
    padding: 2px 8px; 
    margin-left: 6px; 
    border-radius: 10px; 
    background: rgba(244, 114, 182, 0.9);
    color: #fff; 
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.3);
}

.profile_wrap { 
    position: relative;
    margin-left: 30px;
    flex-shrink: 0;
    z-index: 300;
}
.profile_wrap .profile_img { 
    display: inline-block; 
    width: 48px; 
    height: 48px; 
    border-radius: 50%; 
    overflow: hidden; 
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
.profile_wrap .profile_img:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.profile_wrap .profile_img img { 
    width: 100%; 
    height: 100%;
    object-fit: cover;
}

.hd_login { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    right: -10px; 
    top: 68px; 
    background: #2d3748;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 99999; 
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    min-width: 180px;
    transform: translateY(-10px);
}
.hd_login.active { 
    visibility: visible; 
    opacity: 1;
    transform: translateY(0);
}
.hd_login a { 
    color: rgba(255, 255, 255, 0.9); 
    font-size: 13px; 
    padding: 12px 18px; 
    display: block; 
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
}
.hd_login a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: rgba(102, 126, 234, 0.8);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}
.hd_login a:hover::before {
    transform: scaleY(1);
}
.hd_login a:hover { 
    background: rgba(102, 126, 234, 0.15); 
    color: #fff;
    padding-left: 21px;
}

#hd_login_msg,
.msg_blind,
.blind { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }

#hd .opener { 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    text-align: center;
    line-height: 1;
}
#hd .opener:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}
#hd .opener svg,
#hd .opener i { 
    color: #fff; 
    margin: 0;
    padding: 0;
    line-height: 1;
}

#hd .opener .blind {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

#wrapper { margin: 20px auto; padding: 0; box-sizing: border-box; max-width: 1400px; width: 96%; }

#container { position:relative; min-height:500px; height:auto !important; border-radius: 8px; border: 1px solid #353535; border: var(--border); background: #252525; background: var(--contBg); color: #dbdbdb; color: var(--fontColor); font-size:1.2rem; padding: 20px; box-sizing: border-box; }

#container_title { margin:0 auto; color: var(--primaryColor); font-size:1.6rem; font-weight:bold; }
#container_title span { display:block; margin:0 auto 24px; line-height:30px }

#aside .member_sign { border: var(--border); }

#gnb_list { font-size: 1.3rem; }

#gnb { position:relative; margin-bottom: 15px; border: var(--border); background:var(--contBg); overflow: hidden; }
#gnb_list { font-size:1.3rem; }
#gnb_list .list_item { position:relative; }
#gnb_list a { display:block; position:relative; padding: 0 15px; line-height:55px; }
#gnb_list .list_item_parents .item_link { padding-right: 40px; font-weight: bold; }
#gnb_list .list_item_parents .opener_gnb_sub { position: absolute; top:0; right: 0; width: 55px; height: 55px; border: 0; background: 0; }
#gnb_list a:hover,
#gnb_list .list_item_parents .opener_gnb_sub:hover { -webkit-transition: all 2s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out }
#gnb_list a:hover { color: #fff; background: var(--primaryColor); }
#gnb_list .list_item_parents .opener_gnb_sub:hover { background: var(--bovHover); }
#gnb .gnb_sub_list { display: none; background: var(--bovHover); }

#aside #poll {border:var(--border);background:var(--contBg);position:relative;margin-bottom:15px}
#aside #poll header {position:relative;border-bottom:var(--border);padding:15px}
#aside #poll header:after {display:block;visibility:hidden;clear:both;content:""}
#aside #poll header h2 {display:inline-block;margin:0;padding:0;float:left;font-size:1.4rem;color:var(--fontColor);line-height:28px}
#aside #poll header h2:after {display:block;visibility:hidden;clear:both;content:""}
#aside #poll header .btn_result {float:right;display:inline-block;line-height:20px;height:28px;border:var(--border);color:var(--primaryColor);border-radius:2px;padding:2px 5px;}
#aside #poll header .btn_admin {float:right;margin-left:5px;line-height:28px;font-size:1.7rem}
#aside #poll ul {padding:0 20px;list-style:none}
#aside #poll li {padding:5px 0}

#aside #poll .poll_con {}
#aside #poll .poll_con p {font-weight:bold;padding:15px 20px;color:var(--fontColor);font-size:1.4rem}
#aside #poll_btn {padding:10px 20px 20px;text-align:center}
#aside #poll_btn:after {display:block;visibility:hidden;clear:both;content:""}
#aside #poll_btn .btn_poll {display:block;width:100%;height:40px;line-height:40px;padding:0 10px;border:0;font-weight:bold;background:var(--primaryColor);color:#fff;border-radius:3px}

/* 사이드바 회원 메뉴 */
#aside #aside_member { border: var(--border); background: var(--contBg); margin-bottom: 15px; }
#aside #aside_member .aside_title { margin: 0; padding: 15px; border-bottom: var(--border); font-size: 1.4rem; color: var(--fontColor); }
#aside #aside_member .aside_title i { margin-right: 8px; color: var(--primaryColor); }
#aside #aside_member .aside_menu { list-style: none; padding: 0; margin: 0; }
#aside #aside_member .aside_menu li { border-bottom: 1px solid rgba(255,255,255,0.05); }
#aside #aside_member .aside_menu li:last-child { border-bottom: none; }
#aside #aside_member .aside_menu a { display: block; padding: 12px 15px; color: var(--fontColor); text-decoration: none; transition: all 0.2s; }
#aside #aside_member .aside_menu a:hover { background: var(--bovHover); color: var(--primaryColor); padding-left: 20px; }
#aside #aside_member .aside_menu a i { margin-right: 10px; width: 16px; text-align: center; color: #888; }
#aside #aside_member .aside_menu a:hover i { color: var(--primaryColor); }

/* 사이드바 게시판 카테고리 */
#aside #aside_boards { border: var(--border); background: var(--contBg); margin-bottom: 15px; }
#aside #aside_boards .aside_title { margin: 0; padding: 15px; border-bottom: var(--border); font-size: 1.4rem; color: var(--fontColor); }
#aside #aside_boards .aside_title i { margin-right: 8px; color: var(--primaryColor); }
#aside #aside_boards .aside_menu { list-style: none; padding: 0; margin: 0; }
#aside #aside_boards .aside_menu li { border-bottom: 1px solid rgba(255,255,255,0.05); }
#aside #aside_boards .aside_menu li:last-child { border-bottom: none; }
#aside #aside_boards .aside_menu a { display: block; padding: 12px 15px; color: var(--fontColor); text-decoration: none; transition: all 0.2s; }
#aside #aside_boards .aside_menu a:hover { background: var(--bovHover); color: var(--primaryColor); padding-left: 20px; }
#aside #aside_boards .aside_menu a i { margin-right: 10px; width: 16px; text-align: center; color: #888; }
#aside #aside_boards .aside_menu a:hover i { color: var(--primaryColor); }
#aside #aside_boards .aside_menu .aside_menu_icon { width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; object-fit: contain; }

#aside #visit { position: relative; border: var(--border); background: var(--contBg); }
#aside #visit h2 { margin: 0 15px; padding:15px 0; border-bottom:1px solid rgba(0, 0, 0, 0.1); font-size:1.4rem; }
#aside #visit ul { padding: 15px 20px; }
#aside #visit li { display: flex; justify-content: space-between; align-items: center; height: 32px; }
#aside #visit li span::before { display: inline-block; margin: 0 10px 0 0; width: 5px; height: 5px; border-radius:5px; background: var(--primaryColor); content:""; }
#aside #visit .btn_admin { position: absolute; top: 15px; right: 25px; }

#ft { margin:0 auto; text-align:center }
#ft_wr { display: flex; flex-direction: column; position:relative; margin:0 auto; padding:40px 0; text-align:left; }
#ft_wr:after { display:block; visibility:hidden; clear:both; content:"" }
#ft_wr .ft_cnt { padding:0 20px; }
#ft_wr .ft_cnt_wrap { display: flex; }
#ft_wr .ft_cnt_wrap .ft_cnt { width: 25%; }

#ft_link { text-align:left; margin-bottom: 24px; display: flex; }
#ft_link a { display:block; color:var(--ftColor); line-height:2.4rem; font-weight:bold; margin-right: 24px; font-size: 1.4rem; }
#ft_company h2 { font-size:1.4rem; margin-bottom:20px }
#ft_company { font-weight:normal; color:var(--ftColor); line-height:2.4rem }
#ft_catch { margin:20px 0 10px }
#ft_copy { text-align:center; margin:0 auto; padding:16px 0; color:#999999; font-size:1.1rem; background: var(--ftCopyBg); font-weight: bold; }

#top_btn { position:fixed; bottom:20px; right:20px; width:50px; height:50px; line-height:46px; border:var(--topBtnBorder); color:var(--primaryColor); text-align:center; font-size:1.5rem; z-index:90; background:var(--bodyBg); border-radius: 3px; }
#top_btn:hover { border-color:var(--primaryColor); background:var(--primaryColor); color:#fff }

@media (min-width:1101px) {
    #hd_pop,
    #tnb .inner,
    #ft_wr { max-width: 1400px; width: 96%; margin-left: auto; margin-right: auto; }

    #hd .opener { display: none; }

    #wrapper { display:grid; gap: 20px; grid-template-columns: 270px 1fr; max-width: 1400px; width: 96%; }

    #container { order: 1; margin:0 0 50px; padding: 20px; }

    #aside { order: 0; }

    #gnb { border-radius: 8px; }

    #aside .member_sign { position: relative; margin-bottom: 15px; border-radius: 8px; border: var(--border); background: var(--contBg); color: var(--fontColor); }
    #aside .member_sign .login-sns{ padding-bottom: 0px; }

    #aside #member_signed_out .sign_tab { display: grid; grid-template-columns: 1fr 1fr; }
    #aside #member_signed_out .sign_tab h2 { margin: 0; padding: 15px 0; font-size: 1.2rem; text-align:center; }
    #aside #member_signed_out .sign_tab .join { padding: 15px 0; background: var(--bovHover); color: #6e6e6e; text-align: center; }
    #aside #member_signed_out .sign_tab .in { display: none; }
    #aside #member_signed_out form { padding: 20px; }
    #aside #member_signed_out input[type=text],
    #aside #member_signed_out input[type=password] { margin-bottom:5px; padding:0 10px; width:100%; height:35px; border-radius:3px; border:var(--inputBorder); background: var(--inputBg); color: var(--fontColor); }
    #aside #member_signed_out #ol_submit { width: 100%; height: 35px; border-radius: 3px; border-left: 1px solid #ccc; background: var(--primaryColor); color: #fff; font-weight: bold; font-size: 1.4rem; }
    #aside #member_signed_out .sign_option { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; }
    #aside #member_signed_out .sign_option label {color:var(--shareColor);vertical-align:baseline}
    #aside #member_signed_out .sign_option input {width:13px;height:13px}
    #aside #member_signed_out .sign_option a { display:inline-block; padding:2px 5px; border-radius:2px; border:var(--border); color:var(--primaryColor); }

    #aside #sns_login { margin-top: 0 !important; border-top: 0 !important; }
    #aside #sns_login h3 {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}

    #aside #member_signed_in h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
    #aside #member_signed_in .sign_info { display: grid; grid-template-columns: 50px 1fr; gap: 10px; position: relative; padding: 15px 15px 0; }
    #aside #member_signed_in .sign_info .profile_img { display: block; grid-row: 1/4; position: relative; }
    #aside #member_signed_in .sign_info .profile_img::after { display: flex; align-items: center; justify-content: center; position: absolute; top: 35px; left: 35px; width: 15px; height: 15px;  border-radius: 100%; background: var(--contBg); color: var(--fontColor); font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1.1rem; content: '\f013'; }
    #aside #member_signed_in .sign_info .profile_img img { width: 50px; height: 50px; border-radius: 100%; border: var(--border); }
    #aside #member_signed_in .sign_info strong { margin: 5px 0 0; }
    #aside #member_signed_in .sign_info .btn_admin { position: absolute; top: 5px; right: 0; }
    #aside #member_signed_in .sign_info .info_link { display: inline; color:var(--primaryColor); }

    #aside #member_signed_in .btn_b04 {line-height:23px;padding:0 5px}
    #aside #member_signed_in .sign_menu:after {display:block;visibility:hidden;clear:both;content:""}
    #aside #member_signed_in .sign_menu li {text-align:left;position:relative;text-align:left}
    #aside #member_signed_in .sign_menu li:first-child a {border-left:0}
    #aside #member_signed_in .sign_menu a {display:block;color:var(--prFontColor);line-height:18px;padding:10px 10px 10px 20px}
    #aside #member_signed_in .sign_menu a strong {display:inline-block;float:right;max-width:87px;overflow:hidden;white-space:nowrap;text-overflow:clip;color:var(--primaryColor);padding:0 5px;border-radius:15px;font-size:1.1rem}
    #aside #member_signed_in .sign_menu a:hover strong {background:#4b8bff}
    #aside #member_signed_in .sign_menu li a:hover {color:var(--primaryColor);background:var(--bovHover)}
    #aside #member_signed_in .sign_menu li a:hover:after {position:absolute;left:-1px;top:0;width:2px;height:38px;background:var(--primaryColor);content:""}
    #aside #member_signed_in .sign_menu li svg {width:12px;color:#8c9eb0;margin-right:16px}
    #aside #member_signed_in .sign_menu li:hover svg {color:var(--primaryColor)}
    #aside #member_signed_in .sign_menu .win_point:hover strong {background:#37bc9b;color:#fff}
    #aside #member_signed_in .sign_menu .win_memo:hover strong {background:#8cc152;color:#fff}
    #aside #member_signed_in .sign_menu .win_scrap:hover strong {background:#ff8b77;color:#fff}

    #aside #member_signed_in a.btn_admin {display:inline-block;padding:0 10px;height:25px;text-decoration:none;line-height:25px;vertical-align:middle}
    #aside #member_signed_in a.btn_admin:focus,
    #aside #member_signed_in a.btn_admin:hover {text-decoration:none}

    #aside #ol_after_logout {text-align:center;font-weight:bold;display:block;padding:15px 0;color:#a0a0a1;border-top:var(--border)}
    #aside #ol_after_logout:hover {color:#285981}
    #aside #ol_after_memo {margin-right:1px}
    #aside #ol_after_pt {margin-right:1px}

    #aside #poll { border-radius:8px; }

    #aside #visit { margin: 0 0 20px; border-radius: 8px; }

    #aside #closer_aside { display: none; }
}

@media (max-width:1100px) {
    #tnb,
    #hd_wrapper,
    #wrapper { width: 96%; }

    #tnb,
    .profile_wrap { display: none; }

    #hd .opener { display: block; }

    #logo { position: absolute; left: 50%; transform: translateX(-50%); width: 48px; }

    #opener_header_search { margin: 0 0 0 auto; width: 50px; height: 50px; border: none; background: transparent; font-size: 2.6rem; display: flex; align-items: center; justify-content: center; padding: 0; }
    #header_search_backdrop.active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9990;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    #header_search {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        width: min(88vw, 500px);
        max-width: 500px;
        height: 60px;
        margin: 0;
        transform: translate(-50%, -50%);
        z-index: 10000;
        box-shadow: 0 18px 46px rgba(0,0,0,0.58);
        border-radius: 12px;
        overflow: hidden;
    }
    #header_search #sch_stx { height: 60px; background: var(--inputBg); color: var(--fontColor); border-radius: 12px; text-align: center; padding: 0 62px; }
    #header_search #sch_stx:focus { background: var(--inputBg); border-color: #3b82f6; }
    #header_search #sch_submit { width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 10px; }
    #header_search #sch_stx::placeholder { color: var(--fontColor); }
    #header_search.active { display: block; }

    #opener_aside { margin-right: auto; width: 50px; height: 50px; border: none; background: transparent; font-size: 3.1rem; display: flex; align-items: center; justify-content: center; padding: 0; }

    #container { margin: 0 0 15px; padding: 15px; width: 100%; box-sizing: border-box; }

    /* 모바일 사이드바 - PC 프로필 메뉴 스타일 적용 */
    #aside {
        display: none;
        z-index: 99999;
        position: fixed;
        top: 80px;
        left: 10px;
        max-width: 280px;
        width: calc(100% - 20px);
        height: auto;
        max-height: calc(100vh - 100px);
        background: #2d3748;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        overflow-y: auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }

    #closer_aside {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        border: 0;
        background: rgba(255,255,255,0.1);
        color: #fff;
        font-size: 1.2rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100000;
    }
    #closer_aside:hover {
        background: rgba(255,255,255,0.2);
    }

    #aside .member_sign { display: none; }

    /* 모바일 사이드바 회원 메뉴 - PC 프로필 스타일 */
    #aside #aside_member {
        border: none;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }
    #aside #aside_member .aside_title {
        padding: 15px 18px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255,255,255,0.5);
        background: transparent;
        border: none;
    }
    #aside #aside_member .aside_menu { padding: 0 0 8px; }
    #aside #aside_member .aside_menu li { border: none; }
    #aside #aside_member .aside_menu a {
        padding: 12px 18px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        position: relative;
        transition: all 0.2s ease;
    }
    #aside #aside_member .aside_menu a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: rgba(102, 126, 234, 0.8);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }
    #aside #aside_member .aside_menu a:hover::before {
        transform: scaleY(1);
    }
    #aside #aside_member .aside_menu a:hover {
        background: rgba(102, 126, 234, 0.15);
        color: #fff;
        padding-left: 21px;
    }
    #aside #aside_member .aside_menu a i {
        font-size: 14px;
        width: 20px;
        margin-right: 10px;
        color: rgba(255,255,255,0.6);
    }
    #aside #aside_member .aside_menu a:hover i {
        color: #fff;
    }

    /* 모바일 사이드바 게시판 카테고리 - PC 프로필 스타일 */
    #aside #aside_boards {
        border: none;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }
    #aside #aside_boards .aside_title {
        padding: 15px 18px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255,255,255,0.5);
        background: transparent;
        border: none;
    }
    #aside #aside_boards .aside_menu { padding: 0 0 8px; }
    #aside #aside_boards .aside_menu li { border: none; }
    #aside #aside_boards .aside_menu a {
        padding: 12px 18px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        position: relative;
        transition: all 0.2s ease;
    }
    #aside #aside_boards .aside_menu a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: rgba(102, 126, 234, 0.8);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }
    #aside #aside_boards .aside_menu a:hover::before {
        transform: scaleY(1);
    }
    #aside #aside_boards .aside_menu a:hover {
        background: rgba(102, 126, 234, 0.15);
        color: #fff;
        padding-left: 21px;
    }
    #aside #aside_boards .aside_menu a i {
        font-size: 14px;
        width: 20px;
        margin-right: 10px;
        color: rgba(255,255,255,0.6);
    }
    #aside #aside_boards .aside_menu a:hover i {
        color: #fff;
    }
    #aside #aside_boards .aside_menu .aside_menu_icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        vertical-align: middle;
    }

    #ft_wr .ft_cnt { margin-bottom: 40px; }
    #ft_wr .ft_cnt:last-child { margin-bottom: 0px; }
    #ft_wr .ft_cnt_wrap { flex-direction: column; }
    #ft_wr .ft_cnt_wrap .ft_cnt { width: 100%; }
    #ft_link { flex-direction: column; }
}

.lt_wr { 
    width:32%; 
    max-width: 100%; 
    overflow: hidden; 
    box-sizing: border-box;
}
.lt_wr:nth-child(3n+1) { clear:both }
.latest_wr { 
    margin-bottom:0; 
    max-width: 100%; 
    overflow: hidden; 
    box-sizing: border-box; 
}
.latest_wr.boards { display: flex; flex-wrap: wrap; }
.latest_wr:after { display:block; visibility:hidden; clear:both; content:"" }
.latest_top_wr { 
    width: 100%; 
    max-width: 100%; 
    overflow: hidden; 
    box-sizing: border-box;
}
.latest_top_wr:after { display:block; visibility:hidden; clear:both; content:"" }

#copymove { }
#copymove .win_desc { text-align:center; display:block }
#copymove .tbl_wrap { margin:20px }
#copymove .win_btn { padding:0 20px 20px }
.copymove_current { float:right; background:#ff3061; padding:5px; color:#fff; border-radius:3px }
.copymove_currentbg { background:var(--copyHvBg) }

/* ckeditor 단축키 */
.cke_sc { margin:0 0 5px; text-align:right }
.btn_cke_sc { display:inline-block; padding:0 10px; height:23px; border:1px solid #ccc; background:#fafafa; color:#000; text-decoration:none; line-height:2.3rem; vertical-align:middle; cursor:pointer }
.cke_sc_def { margin:0 0 5px; padding:10px; border:1px solid #ccc; background:#f7f7f7; text-align:center }
.cke_sc_def dl { margin:0 0 5px; text-align:left; }
.cke_sc_def dl:after { display:block; visibility:hidden; clear:both; content:"" }
.cke_sc_def dt, .cke_sc_def dd { float:left; margin:0; padding:5px 0; border-bottom:1px solid #e9e9e9 }
.cke_sc_def dt { width:20%; font-weight:bold }
.cke_sc_def dd { width:30% }

/* 버튼 */
a.btn,.btn { line-height:35px; height:35px; padding:0 10px; text-align:center; font-weight:bold; border:0; font-size:1.7rem;transition:background-color 0.3s ease-out }

a.btn01 { display:inline-block; padding:7px; border:1px solid #ccc; background:#fafafa; color:#000; text-decoration:none; vertical-align:middle }
a.btn01:focus, a.btn01:hover { text-decoration:none }
button.btn01 { display:inline-block; margin:0; padding:7px; border:1px solid #ccc; background:#fafafa; color:#000; text-decoration:none }
a.btn02 { display:inline-block; padding:7px; border:1px solid #3b3c3f; background:#4b545e; color:#fff; text-decoration:none; vertical-align:middle }
a.btn02:focus, .btn02:hover { text-decoration:none }
button.btn02 { display:inline-block; margin:0; padding:7px; border:1px solid #3b3c3f; background:#4b545e; color:#fff; text-decoration:none }

.btn_confirm { text-align:right }/* 서식단계 진행 */

.btn_submit { border:0; background:var(--primaryColor); color:#fff; cursor:pointer; border-radius:3px }
.btn_submit:hover { background:#285981 }
.btn_close { border:var(--border); cursor:pointer; border-radius:3px; background:var(--inputBg); color: var(--fontColor); }
a.btn_close { text-align:center; line-height:50px }

a.btn_cancel { display:inline-block; background:#969696; color:#fff; text-decoration:none; vertical-align:middle }
button.btn_cancel { display:inline-block; background:#969696; color:#fff; text-decoration:none; vertical-align:middle }
.btn_cancel:hover { background:#aaa }
a.btn_frmline, button.btn_frmline { display:inline-block; width:128px; padding:0 5px; height:40px; border:0; background:#434a54; border-radius:3px; color:#fff; text-decoration:none; vertical-align:top }/* 우편번호검색버튼 등 */
a.btn_frmline { }
button.btn_frmline { font-size:1.2rem }

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 { display:inline-block; color:#bababa; text-decoration:none; vertical-align:middle; border:0; background:transparent }
.btn_b01:hover, .btn_b01:hover { color:var(--fontColor) }
a.btn_b02,.btn_b02 { display:inline-block; background:var(--primaryColor); height: 45px; padding:0 10px; color:#fff; text-decoration:none; border:0; vertical-align:middle }
a.btn_b02:hover, .btn_b02:hover { background:#285981 }
a.btn_b03, .btn_b03 { display:inline-block; background:var(--contBg); border:1px solid #b9bdd3; color:#646982; text-decoration:none; vertical-align:middle }
a.btn_b03:hover, .btn_b03:hover { background:#ebedf6 }
a.btn_b04, .btn_b04 { display:inline-block; background:#fff; border:1px solid #ccc; color:#707070; text-decoration:none; vertical-align:middle }
a.btn_b04:hover, .btn_b04:hover { color:#333; background:#f9f9f9 }
a.btn_admin,.btn_admin { display:inline-block; color:#d13f4a; text-decoration:none; vertical-align:middle }/* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover { color:#ff3746 }


/* 기본테이블 */
.tbl_wrap table { width:100%; border-collapse:collapse; border-spacing:0 5px; background:var(--contBg); border-top:var(--border); border-bottom:var(--border) }
.tbl_wrap caption { padding:10px 0; font-weight:bold; text-align:left }
.tbl_head01 { margin:0 0 10px }
.tbl_head01 caption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.tbl_head01 thead th { padding:20px 0; font-weight:normal; text-align:center; border-bottom:var(--border); height:40px; color: var(--fontColor); }
.tbl_head01 thead th input { vertical-align:top }/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td { padding:10px 0; border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; background:#d7e0e2; text-align:center }
.tbl_head01 tbody th { padding:8px 0; border-bottom:1px solid #e8e8e8 }
.tbl_head01 td { color:var(--tdColor); padding:10px 5px; border-top:var(--border); border-bottom:var(--border); line-height:1.6rem; height:60px; word-break:break-all }
.tbl_head01 tbody tr:hover td { background:var(--bovHover) }
.tbl_head01 a:hover { text-decoration:underline }

.tbl_head02 { margin:0 0 10px }
.tbl_head02 caption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.tbl_head02 thead th { padding:5px 0; border-top:1px solid #d1dee2; border-bottom:1px solid #d1dee2; background:#e5ecef; color:#383838; font-size:1.1rem; text-align:center; letter-spacing:-0.1rem }
.tbl_head02 thead a { color:#383838 }
.tbl_head02 thead th input { vertical-align:top }/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td { padding:10px 0; border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; background:#d7e0e2; text-align:center }
.tbl_head02 tbody th { padding:5px 0; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:#fff }
.tbl_head02 td { padding:5px 3px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:#fff; line-height:1.6rem; word-break:break-all }
.tbl_head02 a { }

/* 폼 테이블 */
.tbl_frm01 { margin:0 0 20px }
.tbl_frm01 table { width:100%; border-collapse:collapse; border-spacing:0 }
.tbl_frm01 th { width:70px; padding:7px 13px; border:1px solid #e9e9e9; border-left:0; background:#f5f8f9; text-align:left }
.tbl_frm01 td { padding:7px 10px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:transparent }
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input { border: var(--inputBorder); background:var(--inputBg); color:var(--fontColor); vertical-align:middle; border-radius: 3px; padding:5px; }
.tbl_frm01 textarea { padding:2px 2px 3px }
.frm_input { height:45px }

.full_input { width: 100%; }
.half_input { width:49.5% }
.twopart_input { width:385px; margin-right:10px }
.tbl_frm01 textarea, .write_editor textarea { width:100%; min-height:400px; background: var(--inputBg); border: var(--inputBorder); color: var(--fontColor); }
.tbl_frm01 a { text-decoration:none }
.tbl_frm01 .frm_file { display:block; margin-bottom:5px }
.tbl_frm01 .frm_info { display:block; padding:0 0 5px; line-height:1.6rem }

/*기본 리스트*/
.list_01 ul { border-top:1px solid #ececec }
.list_01 li { border-bottom:1px solid #ececec; background:#fff; padding:10px 15px; list-style:none; position:relative }
.list_01 li:nth-child(odd) { background:#f6f6f6 }
.list_01 li:after { display:block; visibility:hidden; clear:both; content:"" }
.list_01 li:hover { background:#f9f9f9 }
.list_01 li.empty_li { text-align:center; padding:20px 0; color:#666 }

/*폼 리스트*/
.form_01 h2 { margin:0; padding:0; font-size:1.4rem }
.form_01 li { margin-bottom:24px }
.form_01 .chk_box { margin-bottom: 0px; padding: 14px 20px; background: var(--newBg); }
.form_01 ul:after,
.form_01 li:after { display:block; visibility:hidden; clear:both; content:"" }
.form_01 .margin_input { margin-right:1% }
.form_01 textarea { height:100px; width:100% }
.form_01 .frm_label { display:inline-block; width:130px }
.form_01 ul li input[type="file"]::file-selector-button { width: 150px; height: 30px; background: var(--primaryColor); color: #fff; border-radius: 4px; border: none; cursor: pointer; margin-right: 10px; }
.form_01 ul li input[type="file"]::file-selector-button:hover { background: #285981; }

/* 자료 없는 목록 */
.empty_table { padding:50px 0 !important; text-align:center }
.empty_list { padding:20px 0 !important; color:#666; text-align:center }

/* 필수입력 */
.required, textarea.required { background-image:url('/gamepunch/static/img/require.png') !important; background-repeat:no-repeat !important; background-position:right top !important }

/* 테이블 항목별 정의 */
.txt_active { color:#5d910b }
.txt_done { color:#e8180c }
.txt_expired { color:#ccc }
.txt_rdy { color:#8abc2a }
.td_board {width:120px;text-align:center}
.td_chk { width:30px; text-align:center }
.td_date { width:60px; text-align:center }
.td_group { width:80px; text-align:center }
.td_name { width:100px; text-align:center }

/* 새창 기본 스타일 */
.new_win { position:relative }
.new_win ul { margin-bottom: 15px; }
.new_win .tbl_wrap { margin:0 20px }
.new_win #win_title { font-size:1.5rem; height:50px; line-height:30px; margin:0; padding:10px 20px; background:var(--contBg); color:var(--fontColor);box-shadow:0 1px 10px rgba(0,0,0,.1) }
.new_win #win_title .sv { font-size:1.1rem; line-height:1.4rem }
.new_win .win_ul { margin-bottom:15px; padding:0 20px }
.new_win .win_ul:after { display:block; visibility:hidden; clear:both; content:"" }
.new_win .win_ul li { float:left; background:var(--contBg); text-align:center; padding:0 10px; border:1px solid var(--primaryColor)60; border-radius:30px; margin-left:5px }
.new_win .win_ul li:first-child { margin-left:0 }
.new_win .win_ul li a { display:block; padding:8px 0; color:var(--primaryColor) }
.new_win .win_ul .selected { background:var(--primaryColor); border-color:var(--primaryColor); position:relative; z-index:5 }
.new_win .win_ul .selected a { color:#fff; font-weight:bold }
.new_win .win_desc { position:relative; margin:10px; border-radius:5px; font-size:1.2rem; background:#f2838f; color:#fff; line-height:50px; text-align:left; padding:0 20px }
.new_win .win_desc svg { font-size:1.4rem; vertical-align:baseline }
.new_win .win_desc:after { content:""; position:absolute; left:0; top:0; width:4px; height:50px; background:#da4453; border-radius:3px 0 0 3px }
.new_win .frm_info { font-size:1.1rem; color:#919191 }
.new_win .win_total { float:right; display:inline-block; line-height:30px; font-weight:normal; font-size:1.1rem; color:var(--primaryColor); padding:0 10px; border-radius:5px }
.new_win .new_win_con { margin:20px 0; padding:20px }
.new_win .new_win_con:after { display:block; visibility:hidden; clear:both; content:"" }
.new_win .new_win_con2 { margin:20px 0 }
.new_win .btn_confirm:after { display:block; visibility:hidden; clear:both; content:"" }
.new_win .win_btn { text-align:center }
.new_win .cert_btn { margin-bottom:30px; text-align:center }
.new_win .btn_close { padding:0 20px; height:45px; overflow:hidden; cursor:pointer }
.new_win .btn_submit { padding:0 20px; height:45px; font-weight:bold; font-size:1.3rem }

/* 검색결과 색상 */
.sch_word { color:#fff; background:#ff005a; padding:2px 5px 3px; line-height:18px; margin:0 2px }

/* 자바스크립트 alert 대안 */
#validation_check { margin:100px auto; width:500px }
#validation_check h1 { margin-bottom:20px; font-size:1.5rem }
#validation_check p { margin-bottom:20px; padding:30px 20px; border:1px solid #e9e9e9; background:#fff }

/* 사이드뷰 */
.sv_wrap { position:relative; font-weight:normal }
.sv_wrap .sv { z-index:1000; display:none; position:absolute; top:23px; left:0px; margin:5px 0 0; width:100px; font-size:1.1rem; background:#333;box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2) }
.sv_wrap .sv:before { content:""; position:absolute; top:-6px; left:15px; width:0; height:0; border-style:solid; border-width:0 6px 6px 6px; border-color:transparent transparent #333 transparent }
.sv_wrap .sv a { display:block; margin:0; padding:0 10px; line-height:30px; font-weight:normal; color:#bbb }
.sv_wrap .sv a:hover { background:#000; color:#fff }
.sv_wrap .sv_member { color:var(--fontColor) }
.sv_wrap .sv_on { display:block !important; }
.sv_nojs .sv { display:block }

/* 페이징 */
.pagination { display:flex; justify-content: center; align-items: center; gap:3px; flex-wrap: wrap; }
.pagination .page { display:inline-block; padding:0 5px; min-width:30px; height:30px; line-height:28px; border-radius:3px; border:1px solid var(--pgBg); background:var(--pgBg); color:#959595; font-size:1.3rem; text-align:center; text-decoration:none }
.pagination .page:hover,
.pagination .page:focus { background-color:var(--pgHvBg); border:1px solid var(--pgBg) }
.pagination .current,
.pagination .current:hover,
.pagination .current:focus { background:var(--primaryColor); border:1px solid var(--primaryColor); color:#fff; font-weight:bold; }
@media (max-width: 576px) {
    .pagination { gap: 1px; margin: 8px 0; }
    .pagination .page { min-width: 24px; height: 24px; line-height: 22px; font-size: 1.05rem; padding: 0 2px; border-radius: 2px; }
    .pagination .page.start,
    .pagination .page.end,
    .pagination .page.prev,
    .pagination .page.next { display: none; }
}
@media (max-width: 380px) {
    .pagination .page { min-width: 22px; height: 22px; line-height: 20px; font-size: 0.95rem; padding: 0 1px; }
}

/* Mobile화면으로 */
#device_change { display:block; margin:0.4rem; padding:0.6rem 0; border:1px solid #eee; border-radius:2.4rem; background:#fff; color:#000; font-size:2.4rem; text-decoration:none; text-align:center }

.errors { color:#ff0000; }

/* 현재접속자 */
#current_connect ul { margin:0; padding:0; list-style:none; }
#current_connect ul:after { display:block; visibility:hidden; clear:both; content:"" }
#current_connect li:after { display:block; visibility:hidden; clear:both; content:"" }
#current_connect li { position:relative; padding:18px 0; border-bottom:var(--border); min-height:1px; box-sizing:border-box; margin-left:0 }
#current_connect li:first-child { border-top:var(--border) }
#current_connect .crt_num { float:left; line-height:45px; margin-right:20px; color:#777; font-weight:bold }
#current_connect .crt_profile { float:left; margin-right:20px; line-height:45px }
#current_connect .crt_profile > img { width:45px; height:45px; border-radius:50% }
#current_connect .crt_info { float:left; margin-top:5px }
#current_connect .crt_name { display:block; color: var(--fontColor); }
#current_connect .sv_member { font-weight:bold; line-height:20px; font-size:1.4rem }
#current_connect .profile_img { display:none }
#current_connect .crt_lct { display:block }
#current_connect .crt_lct a { color:#797979 }
#current_connect li.empty_li { width:100%; padding:200px 0; border:0; color:#666; text-align:center }

/* FAQ */
#faq_wrap { margin:10px 0 30px }
#faq_wrap h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.faq_admin { text-align:right }
#faq_wrap ol { margin:0; padding:0; list-style:none }
#faq_wrap li { border-bottom:var(--border); background:var(--contBg); position:relative }
#faq_wrap li:first-child { border-top:var(--border) }
#faq_wrap li h3 { min-height:50px; line-height:30px; padding:15px; padding-left:50px; position:relative }
#faq_wrap li h3 .tit_btn { position:absolute; right:15px; top:15px; border:0; width:30px; height:30px; background:var(--contBg); color:#c5cdd8; font-size:1.4rem }
#faq_wrap li h3 .tit_bg { display:inline-block; position:absolute; top:15px; left:15px; text-align:center; color:var(--primaryColor); font-size:1.9rem }
#faq_wrap li h3.faq_li_open a { color:var(--primaryColor) }

#faq_con .con_inner { display:none; padding:5px 5px 20px 50px; color: var(--fontColor); }
#faq_con .con_inner .tit_bg { display:inline-block; position:absolute; top:10px; left:10px; text-align:center; background:#777; color:#fff; border-radius:50%; width:30px; line-height:30px; height:30px }
#faq_con .con_inner .closer_btn { position:absolute; right:15px; top:15px; border:0; width:30px; height:30px; background:var(--contBg); color:var(--primaryColor); font-size:1.4rem }

#faq_sch { background:var(--newBg); padding:30px; text-align:center; margin:0 0 10px }
#faq_sch .sch_tit { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
#faq_sch .frm_input { border:var(--inputBorder); max-width: 300px; width:calc(100% - 100px); height:45px; border-radius:0; border-radius:3px }
#faq_sch .btn_submit { padding:0 10px; height:45px; width:88px; font-size:1.3rem; font-weight:bold; color:#fff; background:#434a54 }

/* FAQ board_common.css 참조 { */
.bo_list .list_category { margin:25px 0 }
.bo_list .list_category h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.bo_list .list_category ul:after { display:block; visibility:hidden; clear:both; content:"" }
.bo_list .list_category li { display:inline-block; padding:2px }
.bo_list .list_category a { display:block; line-height:28px; padding:5px 15px; border-radius:30px; border:1px solid #d6e9ff; color:#6794d3 }
.bo_list .list_category a:focus,
.bo_list .list_category a:hover,
.bo_list .list_category a:active { text-decoration:none; background:var(--primaryColor); color:#fff }
.bo_list .list_category .active { z-index:2; background:var(--primaryColor); color:#fff; font-weight:bold; }
/* } FAQ board_common.css 참조 */

/* 새글 */
.pic_lt { position:relative; margin-bottom:20px; background:var(--contBg) }
.pic_lt .lat_title { 
    display: flex !important;
    align-items: center !important;
    margin: 0 0 24px 0 !important; 
    padding: 0 0 16px 0 !important; 
    line-height: 1.2 !important; 
    font-size: 2.6rem !important; 
    font-weight: 700 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    color: var(--fontColor) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    letter-spacing: -0.02em !important;
}
.pic_lt .lat_title a { 
    color: #fff !important; 
    display: inline-block !important; 
    position: relative !important;
    font-weight: 700 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    transition: all 0.3s ease !important;
}
.pic_lt .lat_title a:hover {
    transform: translateX(4px) !important;
    opacity: 0.8 !important;
}

.pic_lt .lt_more { position:absolute; top:11px; right:10px; display:block; width:25px; line-height:25px; color:#aaa; border-radius:3px; text-align:center; }
.pic_lt .lt_more:hover { color:#777 }
.pic_lt ul:after { display:block; visibility:hidden; clear:both; content:"" }
.pic_lt ul { margin: 0 -10px }
.pic_lt li { float:left; width:25%; padding:0 10px; color: var(--fontColor); }
.pic_lt li.gallery_li:nth-child(4n+1) { clear: both!important }
.pic_lt li .lt_img { display:block; position:relative; margin:5px 0; }
.pic_lt li .lt_img .is_label { display:flex; justify-content: center; align-items: center; position:absolute; top:0; right:0; bottom:0; left:0; }
.pic_lt li .lt_img img, .pic_lt li .lt_img video { width:100%; height:auto }
.pic_lt li a:hover { color:#a22121 }
.pic_lt li .fa-heart { display:inline-block; width:10px;height: 10px;padding: 3px; color:#ff0000; background:#ffb9b9; text-align:center; border-radius:2px; vertical-align:middle }
.pic_lt li .fa-lock { display:inline-block; line-height:14px; width:10px; height: 10px; padding: 3px; background:#cbe3e8; text-align:center; border-radius:2px; font-size:1.2rem; border:1px solid #cbe3e8; vertical-align:middle }
.pic_lt li .new_icon { display:inline-block; width:16px; line-height:16px; font-size:1rem; color:#23db79; background:#b9ffda; text-align:center; border-radius:2px; margin-left:2px; font-weight:bold; vertical-align:middle }
.pic_lt li .fa-caret-right { color:#bbb }
.pic_lt li .fa-download { display:inline-block; width:10px; height: 10px; padding: 3px; color:#daae37; background:#ffefb9; text-align:center; border-radius:2px; vertical-align:middle }
.pic_lt li .fa-link { display:inline-block; width:10px; height: 10px; padding: 3px; color:#b451fd; background:#edd3fd; text-align:center; border-radius:2px; vertical-align:middle }

.pic_lt .profile_img img { border-radius:50% }

.lt_info { padding:10px 0 }
.lt_info .lt_nick { }
.lt_info .lt_date { color:#888 }

.pic_lt .empty_li { float: none; padding:0; width: 100%; line-height:145px; color:#666; text-align:center; }
.pic_lt .empty_li:before { background:none; padding:0 }

.pic_lt .lt_cmt { display: none !important; }
.pic_lt .hot_icon { display: none !important; }
.pic_lt .lt_more { position:absolute; top:11px; right:0; display:block; width:40px; line-height:25px; color:var(--primaryColor); border-radius:3px; text-align:center }
.pic_lt .lt_more:hover { color:#777 }

/* latest_list.css */
/* 새글 스킨 (latest) */
.pic_li_lt { position:relative; width:33.3333%; float:left; padding:0 10px; background:var(--contBg) }
.pic_li_lt .lat_title { 
    display: flex !important;
    align-items: center !important;
    margin: 0 0 24px 0 !important; 
    padding: 0 0 16px 0 !important; 
    line-height: 1.2 !important; 
    font-size: 2.6rem !important; 
    font-weight: 700 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    color: var(--fontColor) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    letter-spacing: -0.02em !important;
}
.pic_li_lt .lat_title a { 
    color: #fff !important; 
    display: inline-block !important; 
    position: relative !important;
    font-weight: 700 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    transition: all 0.3s ease !important;
}
.pic_li_lt .lat_title a:hover {
    transform: translateX(4px) !important;
    opacity: 0.8 !important;
}
.latest_top_wr .pic_li_lt:nth-child(3n+1) { clear: both!important }

.pic_li_lt .lt_more { position:absolute; top:11px; right:10px; display:block; width:25px; line-height:25px; color:#aaa; border-radius:3px; text-align:center }
.pic_li_lt .lt_more:hover { color:#777 }
.pic_li_lt ul:after { display:block; visibility:hidden; clear:both; content:"" }
.pic_li_lt li { border-bottom:var(--border); margin-bottom:10px; color: var(--fontColor); }
.pic_li_lt li .lt_img { display:none }
.pic_li_lt li:first-child .lt_img { display:block; position:relative; margin:0 0 10px; }
.pic_li_lt li:first-child .lt_img .is_label { display:flex; justify-content: center; align-items: center; position:absolute; top:0; right:0; bottom:0; left:0; }
.pic_li_lt li:first-child .lt_img img, .pic_li_lt li .lt_img video { width:100%; height:auto }
.pic_li_lt li .pic_li_tit { font-weight:bold; font-size:1.4rem; line-height:20px; vertical-align:middle }

.pic_li_lt li .fa-heart { display:inline-block; width:10px;height: 10px;padding: 3px; color:#ff0000; background:#ffb9b9; text-align:center; border-radius:2px; vertical-align:middle }
.pic_li_lt li .fa-lock { display:inline-block; width:10px; height: 10px; padding: 3px; color:#4f818c; background:#cbe3e8; text-align:center; border-radius:2px; font-size:1.2rem; border:1px solid #cbe3e8; vertical-align:middle }
.pic_li_lt li .new_icon { display:inline-block; width:16px; line-height:16px; font-size:1rem; color:#23db79; background:#b9ffda; text-align:center; border-radius:2px; margin-left:2px; font-weight:bold; vertical-align:middle }
.pic_li_lt li .fa-caret-right { color:#bbb }
.pic_li_lt li .fa-download { display:inline-block; width:10px; height: 10px; padding: 3px; color:#daae37; background:#ffefb9; text-align:center; border-radius:2px; vertical-align:middle }
.pic_li_lt li .fa-link { display:inline-block; width:10px; height: 10px; padding: 3px; color:#b451fd; background:#edd3fd; text-align:center; border-radius:2px; vertical-align:middle }

.pic_li_lt .profile_img img { border-radius:50% }

.lt_info { padding:10px 0 }
.lt_info .lt_nick { }
.lt_info .lt_date { color:#888 }

.pic_li_lt .empty_li { line-height:145px; color:#666; text-align:center; padding:0 }
.pic_li_lt .empty_li:before { background:none; padding:0 }

.pic_li_lt .lt_cmt { display: none !important; }
.pic_li_lt .hot_icon { display: none !important; }
.pic_li_lt .lt_more { position:absolute; top:11px; right:10px; display:block; width:40px; line-height:25px; color:var(--primaryColor); border-radius:3px; text-align:center }
.pic_li_lt .lt_more:hover { color:#777 }

/* latest_notice.css */
/* 새글 스킨 (latest) */
.notice { position:relative; padding:15px 50px }
.notice h2 { margin:0 0 20px; padding:0; }
.notice h2 a { font-size:1.4rem; color:#fff }
.notice li { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border-bottom:1px solid #343434 }
.notice li a, .notice li.empty_li { color:#e3e3e3; padding:11px 0; display:inline-block }
.notice li .lock_icon { display:inline-block; line-height:14px; width:16px; font-size:1rem; color:#4f818c; background:#cbe3e8; text-align:center; border-radius:2px; font-size: 1.2rem; border:1px solid #a2c6ce; vertical-align:baseline }
.notice li .new_icon { display:inline-block; line-height:16px; width:16px; font-size:1rem; color:#ffff00; background:#6db142; text-align:center; margin-right:3px; border-radius:2px; vertical-align:baseline }
.notice .cnt_cm { background:#5c85c1; color:#fff; font-size:1.1rem; height:16px; line-height:16px; padding:0 5px; border-radius:3px; white-space:nowrap; margin-left:5px }
.notice li.empty_li { border-bottom:0; line-height:120px }

/* latest.css */
/* 새글 스킨 (latest) */
.lat { 
    position:relative; 
    margin-bottom:20px; 
    background:var(--contBg);
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.lat .lat_title { 
    display: flex !important;
    align-items: center !important;
    margin: 0 0 24px 0 !important; 
    padding: 0 0 16px 0 !important; 
    line-height: 1.2 !important; 
    font-size: 2.6rem !important; 
    font-weight: 700 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    color: var(--fontColor) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    letter-spacing: -0.02em !important;
}
.lat .lat_title a { 
    position: relative !important; 
    color: #fff !important; 
    display: inline-block !important;
    font-weight: 700 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    transition: all 0.3s ease !important;
}
.lat .lat_title a:hover {
    opacity: 0.8 !important;
}

.lat ul { 
    padding: 10px 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    margin: 0 !important;
    list-style: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.lat ul::-webkit-scrollbar {
    display: none !important;
}

.lat li { 
    position: static !important;
    line-height: auto !important;
    border: none !important;
    border-bottom: none !important;
    color: inherit !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
}
.lat li a { font-weight:bold; font-size:1.4rem; line-height:20px; vertical-align:middle }
.lat li a:hover { color:var(--primaryColor) }
.lat li .fa-heart { display:inline-block; width:10px;height: 10px;padding: 3px; color:#ff0000; background:#ffb9b9; text-align:center; border-radius:2px; vertical-align:middle }
.lat li .fa-lock { display:inline-block; width:10px; height: 10px; padding: 3px; color:#4f818c; background:#cbe3e8; text-align:center; border-radius:2px; font-size:1.2rem; border:1px solid #cbe3e8; vertical-align:middle }
.lat li .new_icon { display:inline-block; width:16px; line-height:16px; font-size:1rem; color:#23db79; background:#b9ffda; text-align:center; border-radius:2px; margin-left:2px; font-weight:bold; vertical-align:middle }
.lat li .fa-caret-right { color:#bbb }
.lat li .fa-download { display:inline-block; width:10px; height: 10px; padding: 3px; color:#daae37; background:#ffefb9; text-align:center; border-radius:2px; vertical-align:middle }
.lat li .fa-link { display:inline-block; width:10px; height: 10px; padding: 3px; color:#b451fd; background:#edd3fd; text-align:center; border-radius:2px; vertical-align:middle }

.lat .profile_img img { border-radius:50% }

.lt_info { padding:10px 0 }
.lt_info .lt_nick { }
.lt_info .lt_date { color:#888 }

.lat .empty_li { line-height:145px; color:#666; text-align:center; padding:0 }
.lat .empty_li:before { background:none; padding:0 }

.lat .lt_cmt { display: none !important; }
.lat .hot_icon { display: none !important; }
.lat .lt_more { display: none !important; }

/* 더보기 버튼 - 제목 옆 인라인 (원래 스타일 유지) */
.lat .lat_title .lt_more_inline {
    margin-left: 15px;
    padding: 0 10px;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--primaryColor) !important;
    text-decoration: none !important;
    white-space: nowrap;
    border-radius: 3px;
    vertical-align: baseline !important;
    line-height: inherit !important;
}
.lat .lat_title .lt_more_inline:hover { color: #777 !important; }

/* main_list.css */
/* 메인 슬라이드 */
.con { margin:0 auto; }
.img-box > img { width:100%; display:block; }
.row::after { content:""; display:block; clear:both; }
.cell { float:left; box-sizing:border-box; }
.cell-right { float:right; box-sizing:border-box; }
.margin-0-auto { margin:0 auto; }
.block { display:block; }
.inline-block { display:inline-block; }
.text-align-center { text-align:center; }
.line-height-0-ch-only { line-height:0; }
.line-height-0-ch-only > * { line-height:normal; }
.relative { position:relative; }
.absolute-left { position:absolute; left:0; }
.absolute-right { position:absolute; right:0; }
.absolute-middle { position:absolute; top:50%; transform:translateY(-50%); }
.table { display:table; }
.table-cell { display:table-cell; }
button { cursor:pointer; padding:0; font-size:inherit; }
.con-min-width { min-width:320px; }
.main_bn { width: 100%; border-radius: 16px; overflow: hidden; }

/* 메인 배너 슬라이더 */
.slider-wrap { position:relative; margin-top:-24px; }
.main-slider { position:relative; margin-bottom:0 !important; }
.main-slider .slide-item .slide-con { position:relative; height: 548px; }
.main-slider .slide-item .slide-con .img-box img { width: 100%; height: 100%; object-fit: cover; }
.main-slider .slide-item > .slide-con > .slide-txt { position:absolute; bottom: 7%; left: 4%; width: 100%; max-width: 500px; z-index:50; color: #fff; text-align: left; }
.main-slider .slide-item .slide-con .img-box::after { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 47.92%, rgba(0, 0, 0, 0.8) 100%); }
.main-slider .slide-item-1 > .slide-con > .slide-txt { left:50%; transform:translatex(-50%); padding:0; text-align:center; }
.main-slider .slide-item > .slide-con > .slide-txt > h2.txt-tt { margin:0; padding:0; font-size:2.4rem; }
.main-slider .slide-item > .slide-con > .slide-txt > h2.txt-tt a { color: #ffffff; }
.main-slider .slide-item > .slide-con > .slide-txt > p.txt-desc { font-size:1.6rem; font-weight:300; margin-top:16px; width: 100%; line-height: 1.4; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn { margin-top:32px; border: 1px solid #eeeeee60; display: inline-block; border-radius: 4px; transition: all 0.3s; cursor: pointer; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn:hover { background: var(--primaryColor); color: #000000; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn a { display: block; padding: 8px 24px; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn > a { font-size:1.4rem; display:inline-block; color: #ffffff; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn > a.txt-btn-1 { position:relative; margin-right:31px; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn > a.txt-btn-1::after { content:""; width:0; height:1px; position:absolute; left:50%; bottom:0; transform:translatex(-50%); background-color:#555; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn > a.txt-btn-2 { padding:12px 38px; border:1px solid #fff; border-radius:45px; line-height:1; letter-spacing:.05rem; color:#fff; transition:all .5s; }
.main-slider .slide-item > .slide-con > .slide-txt > .txt-btn > a.txt-btn-2:hover { background-color:#555; }

/* 사이드 버튼 */
.main-slider .slick-arrow { display: none !important; }
/* 페이지 버튼 */
.main-slider .slick-dots { font-size:0; position:absolute; right: 0; top: 0; max-width: 240px; width:100%; height: 100%; background: rgba(46, 42, 42, 0.8); z-index:50; }
.main-slider .slick-dots > li { width:100%; height: 25%; margin:0; box-sizing:border-box; }
.main-slider .slick-dots > li > button { width:100%; height:1px; background-color:rgba(255,255,255,.3); outline:none; position:relative; padding:0; color:inherit; line-height:normal; border: none; }
.main-slider .slick-dots > li > button::before { display:none; }
.main-slider .slick-dots > li > button > .s-line-fill { content:""; width:0; height:100%; background-color:#fff; position:absolute; top:0; left:0; opacity:1; }
.slider-wrap .slick-dots .slick-active { background: var(--primaryColor); }
.slider-wrap .slick-dots .slick-active > button > .s-line-fill { animation:slick-progressbar 4s 1; animation-fill-mode: forwards; }
.slider-wrap[data-slick-autoplay-status="N"] .slick-dots .slick-active > button > .s-line-fill { animation-play-state:paused; }

@keyframes slick-progressbar { 
    0% { width:0%; }
    100% { width:100%; }
}

.main-slider .slick-dots > li > button > .s-indicator { margin-top: 10px; width:100%; overflow:hidden; }
.main-slider .slick-dots > li > button > .s-indicator > .inner-txt { font-size:1.4rem; font-weight:bold; display:block; color:#ffffff75; text-align: left; }
.main-slider .slick-dots > li > button > .s-indicator > .inner-txt:first-child { margin: 8px 18px; }
.main-slider .slick-dots .slick-active > button > .s-indicator > .inner-txt { color:#ffffff; }
.slider-wrap[data-slick-autoplay-status="Y"] .s-autoplay-btn:after { content:"■"; display:block; }
.slider-wrap[data-slick-autoplay-status="N"] .s-autoplay-btn:after { content:"▶"; display:block; font-size:1.5rem; }
.slider-wrap .slide-dummy { position:absolute; top:0; left:0; width:100%; height:90%; }

.mbskin {position:relative;margin:40px auto 0;width:360px;text-align:center}
.mbskin:after {right:10px;left:auto;
  -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
     -o-transform:skew(8deg) rotate(3deg);
      transform:skew(8deg) rotate(3deg)}
.mbskin .mbskin_box{border:1px solid #dde7e9;background:var(--contBg);border: var(--border);color: var(--fontColor);}
.mbskin .frm_input {width:100%}
.mbskin .btn_submit {width:100%;margin:10px 0 0;height:45px;font-weight:bold;font-size:1.5rem}
.mbskin h1 {margin:60px 0 30px;font-size:2.4rem}
.mbskin .tbl_frm01 th {width:85px}

.register_wrap {max-width: 400px;margin: 0 auto;}
.register_wrap.input_form {max-width: 400px;}
.register {margin:0 auto;padding-bottom: 40px;}
.register:after {display:block;visibility:hidden;clear:both;content:""}
.register .btn_confirm .btn_submit,
.register .btn_confirm .btn_close {float:left;height:50px !important;width:49.5%;font-weight:bold;font-size:1.3rem}
.register .btn_confirm {text-align:left}
.register .btn_confirm .btn_submit {margin-left:1%}

.register_tit { text-align: center; }

.social_register {margin:0 auto}
.social_register:after {display:block;visibility:hidden;clear:both;content:""}
.social_register .btn_confirm .btn_submit,
.social_register .btn_confirm .btn_close {float:left;height:50px !important;width:49.5%;font-weight:bold;font-size:1.3rem}
.social_register .btn_confirm {text-align:left}
.social_register .btn_confirm .btn_submit {margin-left:1%}

#fregister p {position:relative;text-align:left;color:#fff;padding: 20px 10px;font-size:1.3rem;background:#f2838f;margin:0 0 10px;border-radius:5px;font-weight:bold}
#fregister p:before {content:"";position:absolute;top:0;left:0;width:5px;height:100%;border-radius:5px 0 0 5px;background:#da4453}
#fregister p svg {font-size:1.4rem;vertical-align:middle}
#fregister section {margin:10px auto 15px;position:relative;border-radius:3px}
#fregister_chkall {position:relative;text-align:left;line-height:50px;border-radius:3px;margin-bottom:15px}

#fregister h2 {text-align:left;margin:0;padding:20px 0px;font-size:1.4rem;font-weight: bold;color: var(--fontColor);}
#fregister textarea {display:block;padding:10px;width:100%;height:150px;background:var(--inputBg);border:var(--priTableBorder);line-height:1.9rem;color: var(--fontColor);}
#fregister_private {position:relative}
#fregister_private div {background:#fff}
#fregister_private table {width:100%;border-collapse:collapse;font-size:1.2rem;}
#fregister_private table th {background:#f7f7f9;width:33.33%;color:#000;padding:10px;border:1px solid #d8dbdf}
#fregister_private table td {border:1px solid #e7e9ec;padding:10px;border-top:0}

.fregister_agree {position:absolute;top:0;right:0}
.fregister_agree input[type="checkbox"] + label span {position:absolute;top:20px;right:15px;width:17px;height:17px;display:block;background:#fff;border:1px solid #999;border-radius:3px}

#fregister_chkall label {position:static;padding:0;}
#fregister_chkall label span {left:auto}

.chk_li {padding-left:20px}

#sns_register .login-sns,
#sns_register h2 {border:0 !important}

#sns_register {margin:0 0 10px;padding:0;text-align:center;border-radius:3px}
#sns_register:after {display:block;visibility:hidden;clear:both;content:""}
#sns_register h2 {float:left;display:inline-block;text-align:left;width:50%;height:56px;padding:0 20px;font-size:1.4rem;line-height: 4.8rem;}
#sns_register .sns-wrap {display:inline-block;float:left;width:50%;height:56px;line-height:53px;margin:0;text-align:right;padding:0 20px}
#sns_register .sns-wrap:after {display:block;visibility:hidden;clear:both;content:""}
#sns_register .sns-icon {display:inline-block;height:30px;line-height:30px;width:30px;margin:0 3px;text-align:right;color:#fff;border-radius:2px}
#sns_register .sns-naver {background-color:#1fc800;background-position:0 0}
#sns_register .sns-kakao {background-color:#ffeb00;background-position:0 0}
#sns_register .sns-facebook {background-color:#3b579d;background-position:0 0}
#sns_register .sns-google {background-color:#fff;background-position:0 0;border-radius:2px;border:1px solid #999}
#sns_register .sns-google .ico {background:url('/gamepunch/static/img/social/sns_gp_s.png') no-repeat;height:30px}
#sns_register .sns-twitter {background-color:#1ea1f2;background-position:0 0}
#sns_register .sns-payco {background-color:#df0b00;background-position:0 0}
#sns_register .txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }

#sns_register .login-sns,
#sns_register h2 {border:0 !important}

#register_form {background:var(--contBg);margin-bottom:20px}
#register_form h2 {margin:0; padding:40px 0px 20px;color: var(--fontColor);}
.register_form_inner {border-radius:3px}
.register_form_inner ul {padding:10px 0px 0px;}
.register_form_inner ul li {position: relative;padding-top: 20px;color: var(--fontColor);}
.register_form_inner ul li.reg_mb_icon_file {border-top: var(--border)}
.register_form_inner label {display:block;margin-bottom:0px;}
.register_form_inner label.inline {display:inline}
.register_form_inner .frm_input {padding: 5px 0px;border: none;border-bottom: 1px solid #d0d3db;border-radius: 0px;background: transparent;}
.register_form_inner label.text_input {position:absolute;left:0%; bottom:50%; width:100%; line-height: 45px; text-align:left;transition: all 0.2s;cursor: pointer;color: var(--bovColor);}
.register_form_inner .frm_input:focus,
.register_form_inner .frm_input:-webkit-autofill {border:0 !important;border-bottom: 2px solid var(--primaryColor) !important;box-shadow: none;}
.register_form_inner .frm_input:placeholder-shown {border-bottom: 1px solid #d0d3db}
.register_form_inner .frm_input:focus + label.text_input, 
.register_form_inner .frm_input:valid + label.text_input,
.register_form_inner .frm_input:-webkit-autofill + label.text_input {bottom:50%;font-size:1.2rem;color: var(--primaryColor);}
.register_form_inner .frm_input:placeholder-shown + label.text_input {bottom: 0;color: var(--bovColor);}
.register_form_inner .frm_input:read-only {background: var(--pgBg);}
p input:focus + label::after,
p input:valid + label::after { width:100%; transform:translateX(0); }

#fregisterform .cert_desc {color:var(--primaryColor);}
#fregisterform .cert_req {margin-left:5px;line-height:35px;}
#fregisterform #msg_certify {margin:5px 0;padding:5px;border:1px solid #dbecff;background:#eaf4ff;text-align:center}
#fregisterform .frm_address {margin:5px 0 0}
#fregisterform #mb_addr3 {display:inline-block;margin:5px 0 0;vertical-align:middle}
#fregisterform #mb_addr_jibeon {display:block;margin:5px 0 0;}
#fregisterform .btn_confirm {text-align:center;max-width: 600px;}
#fregisterform .form_01 div {margin:0 0 20px}
#fregisterform .captcha {display:block;margin:5px 0 0}
#fregisterform .reg_mb_img_file img {max-width:100%;height:auto}
#reg_mb_icon, #reg_mb_img {float:right}

.register_form_inner label {display:block;margin-bottom:10px;line-height:24px}
.register_form_inner label.inline {display:inline}

#reg_result {padding:40px 30px;text-align:center;background:var(--contBg);border:var(--border);border-radius:5px}
#reg_result h2 {font-size:2.4rem;margin:0 0 20px}
#reg_result h2 strong {color:#ed6478}
#reg_result #result_email {margin:20px 0;padding:10px 50px;border-top:1px solid #e9e9e9;border-bottom:1px solid #dde4e9;background:#fff;line-height:2.4rem}
#reg_result #result_email span {display:inline-block;width:150px}
#reg_result #result_email strong {color:#e8180c;font-size:1.4rem}
#reg_result p {line-height:2.2rem}
#reg_result .result_txt {text-align:center;color: var(--fontColor);}
#reg_result .btn_confirm {margin:50px 0}
#reg_result svg {font-size:3.6rem}
#reg_result .reg_result_p {font-size:1.5rem;margin:0 0 10px;color:var(--primaryColor)}

.btn_confirm_reg {margin:20px 0;text-align:center}
.reg_btn_submit {display:inline-block;background:var(--primaryColor);color:#fff;text-align:center;border-radius:3px;width:280px;height:57px;line-height:57px;font-size:1.4rem;margin:0 auto;font-weight:bold}

.mb_log_cate h2 {width:50%;float:left;margin:0;padding:20px 0;text-align:center}
.mb_log_cate .join {width:50%;float:left;padding:20px 0;text-align:center;background:var(--bovHover);color:#6e6e6e}
.mb_log_cate:after {display:block;visibility:hidden;clear:both;content:""}

.tooltip_icon {display:inline-block;vertical-align:baseline;color:#b3b5b8;border:0;font-size:1.7rem;background:transparent;cursor:pointer}
.tooltip_icon:hover {color:#448bf5}
.tooltip {position:relative;width:auto;color:#fff;background:#383838;padding:10px;font-size:small;line-height:18px;display:none;position:absolute;z-index:9;font-weight:normal;margin-left:15px;margin-top:10px;border-radius: 0px 4px 4px 4px;}
.tooltip:before {content:"";position:absolute;top:0;left:-10px;width:0;height:0;border-style:solid;border-top:0px solid transparent;border-bottom:10px solid transparent;border-left:0;border-right:10px solid #383838}

#find_info h3 {display:none;margin:0 0 30px;padding:0;text-align:center;font-size:1.3rem;}
#find_info .new_win_con {background:var(--newBg);}
#find_info.cert .new_win_con {width:460px;float:left;}
#find_info.cert .new_win_con:nth-child(2) {margin-left:10px;}
#find_info.cert h3 {display:block;}
#find_info #mb_hp_label {display:inline-block;margin-left:10px}
#find_info p {line-height:1.8rem;color: var(--fontColor);}
#find_info #mb_email {margin:10px 0}
#find_info .find_btn .btn_submit {width:30%;word-break:keep-all;}

/* 로그인 */
#mb_login {}
#mb_login h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
#login_fs {padding:35px}
#mb_login #login_fs .frm_input {margin:0 0 10px;}
#mb_login #login_fs .btn_submit {margin:0 0 15px}

#login_info {}
#login_info:after {display:block;visibility:hidden;clear:both;content:""}
#login_info .login_if_auto {float:left}
#login_info .login_if_auto label {vertical-align:baseline;padding-left:24px}
#login_info .login_if_lpl {float:right}
#login_password_lost {display:inline-block;border:1px solid #d5d9dd;color:var(--primaryColor);border-radius:2px;padding:2px 5px;line-height:20px}

#mb_login_notmb {margin:30px auto;padding:20px 30px}
#mb_login_notmb h2 {font-size:1.5rem;margin:20px 0 10px}
#guest_privacy {border:1px solid #ccc;text-align:left;line-height:1.9rem;color:#666;background:#fafafa;padding:10px;height:150px;margin:10px 0;overflow-y:auto}
#mb_login_notmb .btn_submit {display:block;text-align:center;line-height:45px}

#mb_login_od_wr {margin:30px auto;padding:20px 30px}
#mb_login_od_wr h2 {font-size:1.5rem;margin:20px 0 10px}
#mb_login_od_wr .frm_input {margin:10px 0 0}
#mb_login_od_wr p {background:#f3f3f3;margin:20px 0 0;padding:15px 20px;line-height:1.8rem}

#mb_login #sns_login {margin-top:0;padding:25px}
#mb_login #sns_login:after {display:block;visibility:hidden;clear:both;content:""}
#mb_login #sns_login h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
#mb_login #sns_login .sns-wrap {margin:0 !important}
#mb_login #sns_login .sns-icon {width:49% !important;float:left !important}
#mb_login #sns_login .sns-icon:nth-child(odd) {margin-right:2%}
#mb_login #sns_login .txt {font-size:1.1rem;padding-left:5px !important;border-left:0 !important}

.memo_list {border-top:var(--border)}
.memo_list li {border-bottom:var(--border);background:var(--contBg);color: var(--fontColor);padding:10px 15px;list-style:none;position:relative}
.memo_list li:after {display:block;visibility:hidden;clear:both;content:""}
.memo_list li.read {background:var(--bovHover)}
.memo_list li.empty_li {text-align:center;padding:20px 0;color:#666}

.memo_list .memo_li {float:left}
.memo_list .profile_big_img {position:relative;margin-right:15px}
.memo_list .profile_big_img img {border-radius:50%;width:52px;height:52px}
.memo_list .memo_li.memo_name {padding-top:5px;float:none}
.memo_list .memo_preview a{display:block;margin-right:30px;padding-top:10px;font-weight:normal !important;font-size:1.4rem}
.memo_list .memo_preview a:hover{text-decoration:underline}
.memo_list .memo_name a,
.memo_list .memo_name .sv_wrap {font-weight:bold}
.memo_list .no_read {position:absolute;bottom:0;right:0;display:inline-block;background:var(--primaryColor);border:1px solid #e1edff;text-indent:-9999px;border-radius:10px;width:10px;height:10px;box-shadow:0 0 10px 3px #9ec3f9}
.memo_list .no_read {animation:blinker 1s linear infinite}

@keyframes blinker {
    50% {opacity:0}
}

#memo_list h1#win_title {padding:10px 10px 10px 20px}
#memo_list .memo_datetime {font-size:1.1rem;color:#888d92}
#memo_list .memo_del {position:absolute;right:15px;top:15px;padding:10px;color:#c7c9cb;font-size:1.7rem}
#memo_list .memo_cnt {margin-top:5px;font-weight:normal;display:inline-block;font-size:1.4rem}
#memo_list .pagination {margin-top:10px;width:100%;float:inherit;text-align:center}

#memo_view_contents {margin-bottom:20px;border-top:1px solid #ececec;border-bottom:1px solid #ececec}
#memo_view_contents h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
#memo_view_ul {margin:0;list-style:none;background:#f6f6f6}
#memo_view_ul:after {display:block;visibility:hidden;clear:both;content:""}
.memo_view_li {position:relative;/*padding:10px;float:left;width:50%*/}

.memo_view_li .profile_img img {display:none}
.memo_from {position:relative;background:#fff;border-bottom:1px solid #ececec;padding:15px 20px}
.memo_from li {float:left}
.memo_from li.memo_profile img {width:40px;height:40px;border-radius:50%}
.memo_from li:first-child {margin-right:10px}
.memo_from li.memo_view_nick {width:80%}
.memo_from li.memo_view_nick a {font-weight:bold !important}
.memo_from li.memo_view_date {display:block;color:#555;line-height:24px}
.memo_from li.memo_op_btn {position:absolute}
.memo_from li.list_btn {right:53px;}
.memo_from li.del_btn {right:15px;}
.memo_from:after {display:block;visibility:hidden;clear:both;content:""}

.memo_btn {width:100%}
.memo_btn a {display:inline-block;width:50%;font-size:1.2rem;color:#888d92;padding:20px}
.memo_btn a.btn_right {float:right;text-align:right}
.memo_btn a svg {font-size:1.4rem;color:#acabab;vertical-align:bottom}

#memo_view p {padding:10px;min-height:150px;height:auto !important;height:150px;background:#fff;line-height:2.1rem}
#memo_view textarea {height:100px}

#memo_write .form_01 {padding:20px;border-top:var(--border)}

.reply_btn {display:inline-block;width:150px;height:45px;line-height:50px;padding:0 10px;font-weight:bold;background:var(--primaryColor);color:#fff;border-radius:3px;vertical-align:bottom;margin-right:5px}
#memo_write .reply_btn {font-size:1.2rem}

#scrap li:after {display:block;visibility:hidden;clear:both;content:""}
#scrap li {position:relative;padding:20px;border-bottom:var(--border);color: var(--fontColor);}
#scrap .scrap_tit {font-weight:bold;display:block;font-size:1.3rem;margin-bottom:10px;line-height:1.5rem}
#scrap .scrap_cate {float:left;display:block;color:#ac92ec;background:var(--scrapBg);padding:3px;border-radius:3px;font-size:1.1rem;margin-right:10px}
#scrap .scrap_datetime {color:#777;line-height:18px}
#scrap .scrap_del {position:absolute;top:15px;right:15px;font-size:1.8rem;color:#c7c9cb}
#scrap .scrap_del:hover {color:var(--primaryColor)}

#scrap_do .new_win_con {padding:0 20px}
#scrap_do textarea {width:100%;height:100px;background: var(--inputBg);border: var(--inputBorder);color: var(--fontColor);}
#scrap_do .scrap_tit {margin-bottom:10px;background:var(--inputBg);border: var(--inputBorder);color: var(--fontColor);padding:10px 15px;font-size:1.4rem;font-weight:bold}
#scrap_do label {display:block;margin:0 0 5px;font-size:1.2rem}
#scrap_do .win_btn:after {display:block;visibility:hidden;clear:both;content:""}
#scrap .win_btn, #scrap_do .win_btn {margin:20px 0;text-align:center}
#scrap_do .win_btn .btn_submit {float:inherit}
#scrap_do .win_desc {margin:0 20px}

#point {text-align:center}
#point h1 {text-align:left}
#point .point_all {margin:20px 20px 15px;border-radius:5px;background:var(--primaryColor);color:#fff;font-size:1.3rem}
#point .point_all:after {display:block;visibility:hidden;clear:both;content:""}
#point .point_all li {float:left;width:50%;padding:20px;text-align:left}
#point .point_all li span {float:right;color:#485172;font-weight:bold}
#point .point_all li:last-child {}
#point .point_all .full_li {width:100%;text-align:left}
#point .point_all .full_li span {color:#fff;font-weight:bold;font-size:1.4rem}
#point .point_status{background:#737373;border:0;color:#fff;font-weight:bold;font-size:1.3rem;text-align:left}
#point .point_status:after {display:block;visibility:hidden;clear:both;content:""}
#point .point_status span{margin-left:10px;float:right}

.point_list {}
.point_list li:first-child {border-top:var(--border)}
.point_list li {border-bottom:var(--border);background:var(--contBg);padding:15px 30px;list-style:none;position:relative}
.point_list li:after {display:block;visibility:hidden;clear:both;content:""}

.point_list .point_use {background:var(--bovHover)}
.point_list .point_use .point_num {font-size:1.5rem;color:#ff4f76;font-weight:bold;float:right}
.point_list .point_num {font-size:1.5rem;color:var(--primaryColor);font-weight:bold;position:absolute;right:30px;top:25px}
.point_list .point_top {line-height:15px;margin:0 0 5px}
.point_list .point_top:after {display:block;visibility:hidden;clear:both;content:""}
.point_list .point_tit {font-weight:bold;float:left;font-size:1.3rem;display:block;color: var(--fontColor);}
.point_list .point_date1 {float:left;color:#888d92}
.point_list .point_date {float:left;color:#888d92}
.point_list .txt_expired {color:red;margin-left:5px}

#point .pagination {width:100%;float:inherit;text-align:center}
#point .btn_close {margin:20px auto}

#mb_confirm {}
#mb_confirm h1 {margin:60px 0 30px;padding:0;font-size:2.4rem;color: var(--fontColor);}
#mb_confirm p {padding:0 20px 40px;border-bottom:var(--border);font-size:1.3rem;line-height:1.6rem;color:#656565}
#mb_confirm p strong {display:block;color:var(--primaryColor);font-size:1.4rem;margin:0 0 5px}
#mb_confirm fieldset {padding:50px;text-align:left}
#mb_confirm fieldset .frm_input {background-color:var(--inputBg) !important}
#mb_confirm label {letter-spacing:-0.1rem}
#mb_confirm_id {display:block;margin:5px 0 10px;font-weight:bold;color: var(--fontColor);}
#mb_confirm .confirm_id {font-size:1.1rem;color:#666}

#pw_confirm h1 {margin:60px 20px 30px;padding:0;font-size:2.4rem;color: var(--fontColor);}
#pw_confirm p {padding:0 20px 40px;border-bottom:var(--border);font-size:1.3rem;line-height:1.6rem;color:#656565}
#pw_confirm p strong {display:block;color:var(--primaryColor);font-size:1.4rem;margin:0 0 5px}
#pw_confirm fieldset {padding:50px;text-align:center}
#pw_confirm fieldset .frm_input {background-color:var(--inputBg);border: var(--inputBorder);color: var(--fontColor);}
#pw_confirm label {letter-spacing:-0.1rem}
#pw_confirm_id {display:inline-block;margin-right:20px;font-weight:bold}
#mb_confirm_id {}

#formmail textarea {height:100px}
#formmail .formmail_flie {position:relative}
#formmail .formmail_flie .file_wr {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:40px;margin:0}
#formmail .lb_icon {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;background:#fff;text-align:center;color:#b2b2b2}
#formmail .frm_file {padding-left:50px}
#formmail .frm_info {color:#3497d9;font-size:1.1rem}

#profile h1 a {}
#profile table {margin-bottom:0}
#profile table th {text-align:left;padding:10px;width:100px}
#profile section {color:#6794d3;background:#fff;padding:10px;border:1px solid #eee;margin:10px 0}
#profile h2 {margin:0 0 5px;padding:0;}
#profile .profile_name {text-align:center;font-weight:bold}
#profile .my_profile_img {display:block;margin:20px 0 5px}
#profile .my_profile_img img {border-radius:50%}
#profile .profile_img img {border-radius:50%}
#profile .profile_name .sv_wrap {font-weight:bold;text-align:left}

#new_sch {background:var(--newBg);padding:30px;text-align:center;margin:0 0 10px}
#new_sch select {background: var(--inputBg);border:var(--inputBorder);color: var(--fontColor);width:175px;height:45px;padding:0 5px;border-radius:3px}
#new_sch .frm_input {border:var(--inputBorder);width:calc(100% - 451px);height:45px;border-radius:0;border-radius:3px}
#new_sch .sch_wr {position:relative;display:inline-block}
#new_sch .btn_submit {padding:0 10px;height:45px;width:88px;font-size:1.3rem;font-weight:bold;color:#fff;background:#434a54}
#new_sch p {padding:10px 0 0;font-size:1.1rem;text-align:center;letter-spacing:-0.1rem;color: var(--fontColor);}

#fnewlist .profile_img img {border-radius:50%}
#fnewlist .td_group a {background:#edfbde;color:#8cc152;padding:3px 4px;border-radius:5px;font-weight:normal}
#fnewlist .td_board a {background:#eeeaf8;color:#ac92ec;padding:3px 4px;border-radius:5px;font-weight:normal}

.admin_new_btn {float:right;margin-bottom:10px}

#poll_result .win_btn {text-align:center}

#poll_result {}
#poll_result section {}
#poll_result .tbl_wrap {margin:0}
#poll_result .sv_member,
#poll_result .sv_guest {font-weight:bold}
#poll_result .poll_all {position:absolute;top:10px;right:10px;display:inline-block;margin:0 0 10px;line-height:30px;font-size:1.1rem;color:var(--primaryColor);padding:0 10px;border-radius:5px}
#poll_result_list {clear:both;margin:20px;border:var(--border);border-top:0;background:var(--contBg);border-radius:5px}
#poll_result_list h2 {font-size:1.5rem;padding:15px;margin:0 0 15px;text-align:center;background:var(--pointBg);color:var(--fontColor);border-radius:5px}
#poll_result_list dt {margin-right:5%;color:#e8180d;text-align:right}
#poll_result_list ol {margin:0;padding:0 20px}
#poll_result_list li {margin:20px 0;position:relative;list-style-position:inside;color: var(--fontColor);}

.poll_1st .poll_result_graph span {background:var(--primaryColor)}
.poll_result_graph {position:relative;width:90%;margin:5px 0;height:15px;background:#fff;border-radius:10px;-moz-box-shadow:inset 0px 2px 8px #dadada;-webkit-box-shadow:inset 0px 2px 8px #dadada;box-shadow:inset 0px 2px 8px #dadada}
.poll_result_graph span {position:absolute;top:0;left:0;height:15px;background:#8395b3;border-radius:10px 10px;white-space:nowrap}

.poll_numerical {display:inline-block;position:absolute;top:0;right:0;text-align:center}
.poll_numerical .poll_percent {display:block;font-size:1.4rem;color:var(--primaryColor);font-weight:bold;letter-spacing:-0.5px}
.poll_numerical .poll_cnt {font-size:1.2rem;text-align:right;color:#8d8d8d}

#poll_result_cmt {margin:20px}
#poll_result_cmt h2 {position:absolute;font-size:0;line-height:0;overflow:hidden;color: var(--fontColor);}
#poll_result_cmt article {margin:15px 0;position:relative;border-bottom:var(--border)}
#poll_result_cmt h1 {position:absolute;margin:0;padding:0;border:0;font-size:0;text-indent:-9999rem;line-height:0;overflow:hidden}
#poll_result_cmt header {margin:0 0 5px}
#poll_result_cmt .poll_datetime {display:inline-block;font-size:1.1rem;color:#777}
#poll_result_cmt .profile_img img {border-radius:50%}
#poll_result_cmt p {padding:10px;line-height:1.8rem}

#poll_other_q h3 {margin:0;font-size:1.5rem;padding:10px !important;border-bottom:var(--inputBorder);color: var(--fontColor);text-align:left}
#poll_other_q h3 span {background:#f7f8e3;color:#c97600;padding:3px;display:inline-block;border-radius:5px;margin-right:5px;font-weight:normal;font-size:1.1rem}
#poll_result_wcmt {border:var(--inputBorder);margin-bottom:10px}
#poll_result_wcmt h3 {margin:0; padding:0}
#poll_result_wcmt input {border:0;height:80px;padding:10px;background: var(--inputBg);color: var(--fontColor);}
#poll_result_cmt .btn_submit {padding:0 20px;float:right}

.poll_guest input {border: 1px solid #cfd4db;padding:10px;margin-bottom:10px;display:inline-block}

.poll_cmt_del {float:right}
.poll_cmt_del a {display:inline-block;margin:0 0 5px 10px;color:#c7c9cb;font-size:1.5rem}
.poll_cmt_del:hover a {color:var(--primaryColor)}

#poll_result_oth {clear:both;margin:20px}
#poll_result_oth h2 {padding:0 0 10px;color: var(--fontColor);}
#poll_result_oth ul {margin:0;padding:0;list-style:none;border:var(--border);background:var(--contBg);border-top:0}
#poll_result_oth ul li{border-top:var(--border);position:relative;line-height:20px}
#poll_result_oth a {display:block;padding:10px}
#poll_result_oth li span {position:absolute;bottom:10px;right:15px;color:#777;font-size:1.1rem}

#popular {position:relative;margin:5px 0 0;}
#popular h2 {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}
#popular .popular_inner {width:400px;height:20px;overflow:hidden}
#popular ul {padding:0;margin:0}
#popular ul:after {display:block;visibility:hidden;clear:both;content:""}
#popular li {float:left;width:auto !important;height:18px;line-height:18px;padding-right:20px}
#popular li a {color:#fff}
#popular li:first-child {border-left:0}
#popular li a:hover {text-decoration:underline}

.popular_inner .popular_btns{display:none}
.popular_btns .pp-next {position:absolute;top:60%;right:10px;width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #ffffff;margin-top:-12px;color:#d3d2d2}
.popular_btns .pp-prev {position:absolute;top:60%;right:27px;width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #ffffff;margin-top:-12px;color:#d3d2d2}

#sch_res_detail {background:var(--newBg);padding:30px;text-align:center;margin:0 0 10px}
#sch_res_detail select {background: var(--inputBg);border:var(--inputBorder);color: var(--fontColor);width:175px;height:45px;padding:0 5px;border-radius:3px}
#sch_res_detail .frm_input {border:var(--inputBorder);width:calc(100% - 93px);height:45px;border-radius:3px}
#sch_res_detail .sch_wr {position:relative;display:inline-block;width: calc(100% - 360px);}
#sch_res_detail .btn_submit {padding:0 10px;height:45px;width:88px;font-size:1.3rem;font-weight:bold;color:#fff;background:#434a54}

.switch_field {display:inline-block;vertical-align:middle;padding:10px 5px}
.switch_field input {position:absolute !important;clip:rect(0, 0, 0, 0);height:1px;width:1px;border:0;overflow:hidden}
.switch_field label {float:left}
.switch_field label {display:inline-block;width:50px;background-color:var(--contBg);color:rgba(0, 0, 0, 0.6);font-size:1.2rem;font-weight:normal;text-align:center;text-shadow:none;padding:6px 14px;border:var(--border);color: var(--fontColor);
transition:all 0.1s ease-in-out}
.switch_field label:hover {cursor:pointer}
.switch_field input:checked + label {background-color:var(--primaryColor);border:1px solid var(--primaryColor);color:#fff;box-shadow:none}
.switch_field label:first-of-type {border-radius:4px 0 0 4px;border-right:0}
.switch_field label:last-of-type {border-radius:0 4px 4px 0}

#sch_res_ov {text-align:center;height:55px;line-height:55px;background:var(--pointBg);border-radius:5px;border:var(--border);margin-bottom:15px;padding:0 20px}
#sch_res_ov:after {display:block;visibility:hidden;clear:both;content:""}
#sch_res_ov h2 {float:left;display:inline-block;margin:0;padding:0;font-size:1.5rem;color:var(--fontColor);font-weight:normal}
#sch_res_ov h2 strong {color:#ff005a}
#sch_res_ov ul {display:inline-block;float:right;line-height:12px;font-size:1.1rem;color:var(--primaryColor);margin-top:20px}
#sch_res_ov ul:after {display:block;visibility:hidden;clear:both;content:""}
#sch_res_ov li {float:left;margin-right:5px;padding-right:5px;border-right:1px solid var(--primaryColor)}
#sch_res_ov li:last-child {margin:0;padding:0;border:0}

#sch_res_board {margin-bottom:28px}
#sch_res_board h2 {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}
#sch_res_board ul:after {display:block;visibility:hidden;clear:both;content:""}
#sch_res_board li {display:inline-block;padding:2px}
#sch_res_board a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #b1b1b1;color:var(--primaryColor)}
#sch_res_board a:focus, #sch_res_board a:hover {text-decoration:none;background:var(--primaryColor);color:#fff}
#sch_res_board .cnt_cmt {font-weight:normal !important;display:inline-block;margin-left:3px;color:var(--primaryColor);line-height:18px;font-size:1.1rem}
#sch_res_board a:hover .cnt_cmt {color:#fff}
#sch_res_board .sch_on .cnt_cmt {color:#fff}
#sch_res_board .sch_on {z-index:2;background:var(--primaryColor);color:#fff;font-weight:bold;border:1px solid var(--primaryColor);}

.sch_res_list {position:relative;margin-bottom:10px}
.sch_res_list .search_board_result{position:relative}
.sch_res_list h2 {display: flex;justify-content: space-between;margin:0 0 15px;padding:0;font-size:1.4rem}
.sch_res_list ul {margin:0 0 20px 0;padding:0;list-style:none; border-top: var(--border);}
.sch_res_list li {border-bottom:var(--border);background:var(--contBg);position:relative}
.sch_res_list .sch_tit {display:block;padding:20px 0 10px}
.sch_res_list .pop_a {display:inline-block;background:#e8eeef;color:#6f777f;border-radius:50%;text-align:center;width:26px;height:26px;line-height:26px}
.sch_res_title {display:inline-block;margin:0 0 5px;font-size:1.4rem}
.sch_res_list p {padding-bottom:10px;color:#666;line-height:1.8rem}
.sch_res_list .sch_info {padding:10px 0;color:#777}
.sch_res_list .sch_info:after {display:block;visibility:hidden;clear:both;content:""}
.sch_res_list .profile_img img {border-radius:50%}
.sch_res_list .sch_datetime {margin-left:5px}
.sch_more {display:flex;justify-content: flex-end;text-align:right;font-weight:normal;font-size:1.1rem;color:var(--primaryColor)}

.social_info_guide {background:#f3f3f3;border:1px solid #ddd;margin:0 10px 10px;padding:10px 15px;line-height:1.8rem}
.bg-warning {margin:0 10px 10px;padding:10px 15px;line-height:1.8rem}
.bg-warning1 {background:#f7dfe4;border:1px solid #eac3cb}
.bg-warning2 {background:#deeabf;border:1px solid #bde498}
.bg-warning3 {background:#fff8dc;border:1px solid #f1e4b2}

.login-sns {padding-bottom:10px;margin-top:5px;border:var(--border);border-bottom:var(--border);clear:both;color: var(--fontColor);}
.login-sns h3 {padding-top:10px;text-align:center;color:#777;font-weight:normal}
.sns-wrap {margin:10px 0 0;text-align:center}
.sns-icon {display:inline-block;vertical-align:middle;text-decoration:none}
.sns-icon:hover {text-decoration:none}
.sns-icon .ico {display:block;vertical-align:middle}
.sns-icon .txt svg {font-style:normal}

#fregisterform .form_01 .reg-form {margin-bottom:20px}
#fregisterform .form_01 .reg-form .sns-wrap {margin:10px 0 0;text-align:left}
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none;border-width:1px;border-style:solid;overflow:hidden;margin:0 1px}
.reg-form .sns-icon:hover {text-decoration:none}
.reg-form .sns-icon .ico {display:block;background:url('/gamepunch/static/img/social/sns_logo.png') no-repeat;vertical-align:middle;width:24px;height:24px}
.reg-form .sns-icon-not .ico {display:block;background:url('/gamepunch/static/img/social/sns_logo_not.png') no-repeat;vertical-align:middle}
.reg-form .sns-icon .txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.reg-form .sns-icon .txt svg {font-style:normal}

.sns-wrap-reg .sns-naver {border-color:#18a400;background:#2db400}
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-reg .sns-google {border-color:#ca2c19;background:#4285F4}
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
.sns-wrap-reg .sns-facebook {border-color:#2e5393;background:#3a5897}
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }

.sns-wrap-reg .sns-icon {border-color:#dcdcdc}
.sns-wrap-reg .sns-icon-not {border-color:#8b8b8b}
.sns-wrap-reg .sns-naver {border-color:#18a400}
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
.sns-wrap-reg .sns-google {border-color:#ca2c19}
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
.sns-wrap-reg .sns-facebook {border-color:#2e5393}
.sns-wrap-reg .sns-kakao .ico {background-position:-87px 0}
.sns-wrap-reg .sns-twitter {border-color:#488FC9}
.sns-wrap-reg .sns-twitter .ico {background-position:-145px 0}
.sns-wrap-reg .sns-payco {border-color:#C44646}
.sns-wrap-reg .sns-payco .ico {background-position:-116px 0}
.sns-wrap-reg .sns-kakao {border-color:#f2df00}

.sns-wrap-over .sns-naver {background:url('/gamepunch/static/img/social/sns_naver_s.png') no-repeat}
.sns-wrap-over .sns-google {}
.sns-wrap-over .sns-facebook {background:url('/gamepunch/static/img/social/sns_fb_s.png') no-repeat}
.sns-wrap-over .sns-twitter {background:url('/gamepunch/static/img/social/sns_twitter_s.png') no-repeat}
.sns-wrap-over .sns-payco {background:url('/gamepunch/static/img/social/sns_payco_s.png') no-repeat}
.sns-wrap-over .sns-kakao {background:url('/gamepunch/static/img/social/sns_kakao_s.png') no-repeat}
.reg-form .sns-icon-not {border-color:#8b8b8b}

.social-login-loading {width:100%;height:auto;text-align:center}
.social-login-loading p {display:inline-block;margin-top:10px;padding:40px 0 0;line-height:30px}

#sns_outlogin .sns-icon {overflow:hidden;margin:0 1px}
#sns_outlogin .sns-icon .txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
#sns_outlogin .sns-icon .ico {width:30px;height:30px}

#sns_login {border:0;margin-top:15px;border-top:var(--border)}
#sns_login h3 {padding:10px 0 0;text-align:left;font-weight:bold}
#sns_login form {padding:5px 20px 0px 20px}
#sns_login .sns-icon {position:relative;display:block;height:40px;line-height:40px;width:100%;margin:0 0 5px;padding-left:40px;text-align:left;color:#fff;border-radius:2px}
#sns_login .sns-naver {background-color:#1fc800;background-position:5px 5px;border:1px solid #1ea505}
#sns_login .sns-kakao {background-color:#ffeb00;background-position:5px 5px;border:1px solid #e2c10a}
#sns_login .sns-kakao {color:#3c1e1e}
#sns_login .sns-facebook {background-color:#3b579d;background-position:5px 5px;border-bottom:1px solid #28458f}
#sns_login .sns-google {background-color:#4285F4;background-position:5px 5px;border-bottom:1px solid #3567c6;letter-spacing:-0.5px}
#sns_login .sns-google .ico {position:absolute;top:3px;left:3px;width:33px;height:33px;background:url('/gamepunch/static/img/social/sns_gp_s.png') no-repeat center center;background-color:#fff;background-size:28px 28px!important;border-radius:2px}
#sns_login .sns-twitter {background-color:#1ea1f2;background-position:5px 5px;border-bottom:1px solid #1e82c0}
#sns_login .sns-payco {background-color:#df0b00;background-position:5px 5px;border-bottom:1px solid #9d0800}
#sns_login .txt {text-align:left;padding-left:10px;border-left:1px solid rgba(0,0,0,0.1);display:block;font-weight:bold}
#sns_login .txt:hover {background:rgba(0,0,0,0.07)}

.tooltip_icon {position: relative;display:inline-block;vertical-align:baseline;color:#b3b5b8;border:0;font-size:1.6rem;background:transparent;cursor:pointer;}
.tooltip_icon:hover {color:var(--primaryColor)}
.tooltip {position:absolute;display: inline-block;opacity: 0;width:auto;color:#fff;background:#464646;padding:10px;font-size:small;line-height:18px;visibility: hidden;z-index:9;font-weight:normal;margin-left:15px;margin-top:10px;white-space: nowrap;transition: all 0.2s;}
.tooltip:before {content:"";position:absolute;top:0;left:-10px;width:0;height:0;border-style:solid;border-top:0px solid transparent;border-bottom:10px solid transparent;border-left:0;border-right:10px solid #464646}
.tooltip_icon:hover .tooltip {visibility: visible;opacity: 1;}

.mbskin .toggle {position:relative;display:block;border:1px solid #c6cacc;margin-top:-1px;background-color:#fcfcfc}
.mbskin .toggle .toggle-title {padding:13px 15px;line-height:20px}
.mbskin .toggle .title-name {display:block}
.mbskin .toggle .toggle-inner {padding:15px;line-height:1.8rem;display:none;background:#fff;border-top:1px solid #e2e2e2}
.mbskin .toggle .toggle-inner div {max-width:100%}
.mbskin .right_i {position:absolute;font-size:1.1rem;top:10px;right:10px;padding:0 10px 0 0;border-radius:3px;display:inline-block;z-index:2;background:#3497d9;color:#fff;border-bottom-color:#1977b5;cursor:pointer}
.mbskin .toggle .toggle-title .right_i svg {background:url("/gamepunch/static/img/social/plus_minus.png") 0 -24px no-repeat;width:20px;height:24px;display:inline-block;vertical-align:middle}
.mbskin .toggle .toggle-title.active .right_i svg {background:url("/gamepunch/static/img/social/plus_minus.png") 0 0 no-repeat}
.mbskin .all_agree {position:relative;display:block;margin-bottom:6px;background:#fff;border:1px solid #c6cacc;border-top:0;padding:13px 15px;line-height:20px}

.sns_tbl {background:#fff;margin:10px 0;border:1px solid #c6cacc}
.sns_tbl table {border:0}
.sns_tbl caption {padding:0 20px;line-height:45px;font-size:1.3rem;border-bottom:1px solid #e2e2e2;color:#253dbe;background:#fcfcfc}
.sns_tbl th {width:100px;text-align:right;padding:10px}
.sns_tbl td {padding:10px}
.sns_tbl .email_msg {color:#777;margin:5px 0 0}

#fregisterform .btn_confirm {text-align:center;margin:20px 0}
#fregisterform .btn_confirm .btn_submit {height:45px;padding:0 30px;font-weight:bold;font-size:1.3rem}
#fregisterform .btn_confirm .btn_cancel {line-height:45px;height:45px;padding:0 30px;font-weight:bold;font-size:1.3rem}

#sns-link-pnl .connect-close {position:absolute;top:10px;right:10px;margin:0;padding:0;width:30px;height:30px;border:0;background:transparent;color:#383838;cursor:pointer;font-size:1.5rem}
#sns-link-pnl .connect-close:hover {color:#ff5191}
#sns-link-pnl .connect-close .fa {margin:0 0 0 1px}
#sns-link-pnl .connect-close .txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }

#sns-link-pnl #login_fs {margin:0 auto;width:100%;text-align:left}
#sns-link-pnl #login_fs label {display:block;display:block;font-size:1.1rem;color:#7a7a7a;margin:5px 0}
#sns-link-pnl #login_fs .lg_id,#sns-link-pnl #login_fs .lg_pw {width:100%;margin-bottom:5px}
#sns-link-pnl #login_id,#sns-link-pnl #login_pw {width:100%}
#sns-link-pnl #login_fs .login_submit {width:100%;height:44px;font-size:1.4rem;margin:10px auto 0;font-weight:bold;cursor:pointer;display:block}
#sns-link-pnl .connect-fg {height:320px;text-align:left}
#sns-link-pnl .login_fs {margin:0 auto;width:260px}
#sns-link-pnl .connect-fg .connect-desc {margin:0 0 10px;padding:15px;border:1px solid #d6e9c6;background:#dff0d8;color:#3c763d}
#sns-link-pnl .connect-fg .connect-title {margin-top:25px;margin-bottom:10px;font-size:2rem;font-weight:bold;text-align:center}

.member_connect:after {display:block;visibility:hidden;clear:both;content:""}
.member_connect {margin-top:80px;background:#d9d9d9;border-radius:3px;padding:10px;text-align:left}
.member_connect .strong {font-size:1.2rem;font-weight:bold;margin:0 0 10px}
.member_connect button {color:#fff;border:0;padding:6px 20px 7px;border:1px solid #6446e7;font-weight:bold;background:#6f50e7;border-radius:3px;font-size:1.1rem}
.member_connect button:hover {background:#6446e7}

@media all and (max-width: 1100px){
    #visit { margin-top: 0px; }

    .latest_wr.boards { flex-direction: column; }
    .lt_wr { width: 100%; margin-left: 0% !important; }
    .pic_li_lt { width: 100%; padding: 0px; }

    #new_sch select {width: calc(50% - 2.2px);}
    #new_sch .frm_input {width: 100%;margin-top: 5px;}
    #new_sch .btn_submit {margin-top: 20px;}

    #popular {background: #38383890;padding: 10px;}

    #sch_res_detail select {width: calc(50% - 2.2px);}
    #sch_res_detail .sch_wr {width: 100%;margin-top: 5px;}

    .main_bn { border-radius: 0px; }
    .main-slider .slick-dots { max-width: 200px; }
    .main-slider .slick-dots { visibility: hidden; }
    .main-slider .slide-item > .slide-con > .slide-txt { width: 90%; }
    
    /* game 테마 최신글 가로 정렬 유지 - 한 줄 스크롤 */
    .lat ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    .lat li {
        display: flex !important;
        flex-direction: column !important;
        float: none !important;
        flex-shrink: 0 !important;
    }
}

@media all and (min-width:641px) {
    #sns-link-pnl.remodal {max-width:400px;padding:50px}
}

@media all and (max-width: 501px) { /* board */
    #sch_res_detail .frm_input {width: 100%;}
    #sch_res_detail .btn_submit {margin-top: 20px;}

    #faq_sch .frm_input { width: 100%; max-width: 100%; }
    #faq_sch .btn_submit { margin-top: 20px; }

    /* 게시판 목록 모바일 2개씩 */
    .pic_lt li { width: 50% !important; }
    .pic_lt li.gallery_li:nth-child(4n+1) { clear: none !important; }
    .pic_lt li.gallery_li:nth-child(2n+1) { clear: both !important; }
    
    /* game 테마 최신글 가로 정렬 유지 - 한 줄 스크롤 */
    .lat ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    .lat li {
        display: flex !important;
        flex-direction: column !important;
        float: none !important;
        flex-shrink: 0 !important;
    }
}

/* 최신글 목록 커스텀 스타일 (게임 테마) */
.lat ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    justify-content: flex-start !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.lat li,
.lat .basic_li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: static !important;
    line-height: 0 !important;
    border: none !important;
    border-bottom: none !important;
    color: inherit !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

.lat .lt_thumbnail {
    overflow: hidden !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 8px 8px 0 0 !important;
    line-height: 0 !important;
    width: 100% !important;
}

.lt_thumbnail_overlay {
    display: none !important;
}

.lat .lt_thumbnail:hover,
.lat .lt_card:hover .lt_thumbnail {
    transform: translateY(-4px) !important;
}

.lat .lt_thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.lat .lt_content {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.lat .lt_content a {
    display: block !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-weight: bold !important;
    font-size: 1.6rem !important;
    line-height: 22px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lat .lt_info {
    display: none !important;
}

.lat li .lt_nick,
.lat li .lt_date {
    display: none !important;
}

.lat .lt_thumbnail {
    overflow: hidden !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
    border-radius: 8px 8px 0 0 !important;
}

.lat .lt_thumbnail img {
    width: 100% !important;
    height: auto !important;
}

.lat .lt_content {
    text-align: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}

.lat .lt_content a {
    display: block !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-weight: bold !important;
    font-size: 1.6rem !important;
    line-height: 22px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lat .lt_info {
    display: none !important;
}

.lat li .lt_nick,
.lat li .lt_date {
    display: none !important;
}

/* 모든 화면 크기에서 최신글 목록 가로 정렬 최우선 - 한 줄 스크롤 */
.lat {
    width: 100% !important;
}

/* 게시판 간 간격 (아래 여백) */
.latest_wr .lat {
    margin-bottom: 100px !important;
}

.lt_wr .lat {
    margin-bottom: 100px !important;
}

/* 모바일에서 게시판 간격 줄이기 */
@media (max-width: 768px) {
    .latest_wr .lat {
        margin-bottom: 60px !important;
    }
    .lt_wr .lat {
        margin-bottom: 60px !important;
    }
    
    /* 모바일 게시판 제목 스타일 */
    .lat .lat_title {
        font-size: 1.8rem !important;
        padding-left: 10px !important;
        margin-bottom: 16px !important;
    }
    
    /* 모바일 더보기 버튼 - 제목 옆 인라인 (PC와 동일) */
    .lat .lat_title .lt_more_inline {
        position: static !important;
        margin-left: 10px !important;
        font-size: 14px !important;
        line-height: inherit !important;
    }
}

/* 마지막 게시판은 아래 간격 없음 */
.latest_wr .lat:last-child {
    margin-bottom: 0 !important;
}

.lt_wr .lat:last-child {
    margin-bottom: 0 !important;
}

.lat ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.lat ul::-webkit-scrollbar {
    display: none !important;
}

.lat li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    float: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* 모든 .lat ul이 한 줄 스크롤이 되도록 */
.latest_wr .lat ul {
    flex-wrap: nowrap !important;
}

.lt_wr .lat ul {
    flex-wrap: nowrap !important;
}

/* .lt_wr float 제거 */
.lt_wr {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* .latest_wr flex 레이아웃 */
.latest_wr {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* .lt_wr 내부의 .lat ul도 가로 정렬 강제 */
.lt_wr .lat {
    width: 100% !important;
}

.lt_wr .lat ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
    min-width: 100% !important;
}

.lt_wr .lat li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
    float: none !important;
    border: none !important;
    margin-bottom: 0 !important;
}

/* 방문자 집계 숨기기 */
#visit {
    display: none !important;
}

/* 사이드바 숨기기 및 컨테이너 전체 너비로 */
/* 데스크탑에서만 사이드바 숨기기, 모바일에서는 햄버거 메뉴로 열 수 있음 */
@media (min-width: 1101px) {
    #aside {
        display: none !important;
    }
}

@media (min-width:1101px) {
    #wrapper {
        display: grid !important;
        gap: 20px !important;
        grid-template-columns: 1fr !important;
        max-width: 1400px !important;
        width: 96% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 20px auto !important;
    }
    
    #container {
        order: 1 !important;
        margin: 0 0 50px !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ========== 헤더 반응형 미디어 쿼리 ========== */

/* 인기 검색어 숨기기 */
#popular {
    display: none !important;
}

/* 다크모드 토글 숨기기 */
#darkmode-toggle-switch {
    display: none !important;
}

/* 상단 네비게이션 숨기기 (FAQ, Q&A, 새글, 접속자) */
#tnb {
    display: none !important;
}

/* PC 메뉴바 - 기본 숨김 */
#pc_menu {
    display: none;
}

/* PC 모드에서 메뉴바 표시 */
@media (min-width: 1101px) {
    #pc_menu {
        display: flex !important;
        justify-content: center;
        align-items: center;
        max-width: 1400px;
        width: 96%;
        margin: 0 auto;
        background: #323232;
        border: 1px solid rgba(102, 126, 234, 0.15);
        border-top: none;
        border-radius: 0 0 16px 16px;
        padding: 12px 0;
        box-sizing: border-box;
        overflow: visible;
    }
    
    /* PC에서 햄버거 메뉴 숨기기 */
    #hd .opener {
        display: none !important;
    }
}

#pc_menu .pc_menu_list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 4px 8px;
    list-style: none;
    margin: 0 auto;
    padding: 0 10px;
    background: transparent;
}

@media (min-width: 1101px) and (max-width: 1500px) {
    #pc_menu .pc_menu_list {
        max-width: 880px;
    }
}

#pc_menu .pc_menu_list li {
    position: relative;
    flex: 0 0 auto;
}

#pc_menu .pc_menu_list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.3s ease;
    border-radius: 12px;
    position: relative;
}

#pc_menu .pc_menu_list li a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
#pc_menu .pc_menu_list li a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

#pc_menu .pc_menu_list li.has_submenu:hover .submenu,
#pc_menu .pc_menu_list li.has_submenu:focus-within .submenu {
    display: grid;
}

#pc_menu .pc_menu_list .submenu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    min-width: 170px;
    padding: 8px;
    margin: 0;
    list-style: none;
    border: 1px solid rgba(102, 126, 234, 0.18);
    border-radius: 12px;
    background: #2d2d2d;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

#pc_menu .pc_menu_list .submenu li a {
    width: 100%;
    justify-content: flex-start;
    padding: 9px 10px;
    font-size: 13px;
}

#pc_menu .pc_menu_list li a i {
    font-size: 15px;
}

#pc_menu .pc_menu_list li a .menu_icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

#pc_menu .pc_menu_list li a i.menu_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: initial;
    font-size: 18px;
}

#pc_menu .pc_menu_list li a i.ai_finder_menu_icon,
#mobile_menu .mobile_menu_list li a i.ai_finder_menu_icon {
    color: #44d7b6 !important;
    background: none !important;
    -webkit-text-fill-color: #44d7b6 !important;
    filter: drop-shadow(0 0 5px rgba(68, 215, 182, .32));
}
#pc_menu .pc_menu_list li a i.ai_finder_menu_icon::before,
#mobile_menu .mobile_menu_list li a i.ai_finder_menu_icon::before {
    color: #44d7b6 !important;
    -webkit-text-fill-color: #44d7b6 !important;
}

#pc_menu .pc_menu_list li a .mobile_menu_icon {
    color: #44d7b6;
}

#pc_menu .pc_menu_list li a .popularity_menu_icon {
    color: #34d399;
}

#pc_menu .pc_menu_list li a .free_menu_icon {
    color: #fbbf24;
}

#pc_menu .pc_menu_list li a .release_menu_icon {
    color: #38bdf8;
}

#pc_menu .pc_menu_list li a .news_menu_icon {
    color: #a78bfa;
}

#pc_menu .pc_menu_list li a .free_games_menu_icon {
    color: #f59e0b;
}

#pc_menu .pc_menu_list li a svg.mobile_menu_icon,
#pc_menu .pc_menu_list li a svg.mobile_menu_icon path {
    color: #44d7b6;
    fill: #44d7b6;
}

/* 모바일 메뉴바 - 기본적으로 숨김 */
#mobile_menu {
    display: none;
}

/* 태블릿 및 그 이하 (1100px 이하) */
@media (max-width: 1100px) {
    /* 모바일 메뉴 표시 - PC와 동일한 레이아웃 */
    #mobile_menu {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96%;
        margin: 0 auto;
        background: #323232;
        border: 1px solid rgba(102, 126, 234, 0.15);
        border-top: none;
        border-radius: 0 0 16px 16px;
        padding: 10px 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #mobile_menu .mobile_menu_list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        max-width: 880px;
        gap: 5px 8px;
        list-style: none;
        margin: 0 auto;
        padding: 0 10px;
        background: transparent;
    }

    #mobile_menu .mobile_menu_list li {
        position: relative;
    }

    #mobile_menu .mobile_menu_list li a {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 12px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        transition: all 0.3s ease;
        border-radius: 10px;
        position: relative;
    }

    #mobile_menu .mobile_menu_list li a:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    #mobile_menu .mobile_menu_list li a.active {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    #mobile_menu .mobile_menu_list li.has_submenu {
        display: grid;
        gap: 5px;
    }

    #mobile_menu .mobile_menu_list .submenu {
        display: flex;
        gap: 5px;
        padding: 0;
        margin: 0;
        list-style: none;
        justify-content: center;
        flex-wrap: wrap;
    }

    #mobile_menu .mobile_menu_list .submenu li a {
        padding: 7px 10px;
        font-size: 11px;
        background: rgba(255, 255, 255, 0.06);
    }

    #mobile_menu .mobile_menu_list li a .menu_icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    #mobile_menu .mobile_menu_list li a i.menu_icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        object-fit: initial;
        font-size: 16px;
    }

    #mobile_menu .mobile_menu_list li a .mobile_menu_icon {
        color: #44d7b6;
    }

    #mobile_menu .mobile_menu_list li a .popularity_menu_icon {
        color: #34d399;
    }

    #mobile_menu .mobile_menu_list li a .free_menu_icon {
        color: #fbbf24;
    }

    #mobile_menu .mobile_menu_list li a .release_menu_icon {
        color: #38bdf8;
    }

    #mobile_menu .mobile_menu_list li a .news_menu_icon {
        color: #a78bfa;
    }

    #mobile_menu .mobile_menu_list li a .free_games_menu_icon {
        color: #f59e0b;
    }

    #mobile_menu .mobile_menu_list li a svg.mobile_menu_icon,
    #mobile_menu .mobile_menu_list li a svg.mobile_menu_icon path {
        color: #44d7b6;
        fill: #44d7b6;
    }

    #hd_wrapper {
        padding: 0px 20px;
        height: 80px;
    }
    
    #logo {
        font-size: 22px;
        letter-spacing: 2px;
    }
    
    .profile_wrap .profile_img {
        width: 44px;
        height: 44px;
    }
    
    #hd .opener {
        width: 44px;
        height: 44px;
    }
}

/* 데스크탑 (1025px 이상) - 0.8배 사이즈 */
@media (min-width: 1025px) {
    .lat .basic_li {
        flex: 0 0 176px !important;
        width: 176px !important;
        min-width: 176px !important;
        max-width: 176px !important;
    }
    
    .lat .lt_thumbnail {
        width: 176px !important;
    }

    .lat .lt_content {
        width: 176px !important;
    }
}

/* 태블릿 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 게임 카드 반응형 크기 */
    .lat .basic_li {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }

    .lat .lt_thumbnail {
        width: 200px !important;
    }
    
    .lat .lt_content {
        width: 200px !important;
    }
    
    /* 중간 사이즈 게시판 제목 왼쪽 여백 */
    .lat .lat_title {
        padding-left: 15px !important;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    #hd_wrapper {
        padding: 0px 15px;
        min-height: 75px;
    }
    
    #logo {
        font-size: 18px;
        letter-spacing: 1px;
    }
    
    .profile_wrap .profile_img {
        width: 40px;
        height: 40px;
    }
    
    #hd .opener {
        width: 42px;
        height: 42px;
    }
}

/* 아주 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
    #hd_wrapper {
        padding: 0px 10px;
        min-height: 70px;
    }
    
    #logo {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    
    .profile_wrap .profile_img {
        width: 38px;
        height: 38px;
    }
    
    #hd .opener {
        width: 40px;
        height: 40px;
    }
}

/* 메인 리스트 이미지 오버레이 */
.main_img_overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 150px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.5) 100%) !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 15px 15px !important;
    box-sizing: border-box !important;
}

.main_overlay_title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* img-box 위치 설정 */
.img-box {
    position: relative !important;
}

/* 이전글/다음글 네비게이션 숨기기 */
#view_move {
    display: none !important;
}

/* 유저 평점 배지 스타일 (10점 만점) */
.metascore-badge {
    position: static;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000 !important;
    z-index: auto;
    box-shadow: none;
    box-sizing: border-box;
    background: #ffbd3f !important;
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
}
/* <5.0: 빨간색 */
.metascore-badge.score-red { background: #ff6873 !important; color: #fff !important; }
/* 5.0~7.9: 노란색 (기본값) */
/* >=8.0: 초록색 */
.metascore-badge.score-green { background: #00ce7a !important; }
/* 스코어 없음 */
.metascore-badge.score-na { background: #888 !important; color: #fff !important; }

/* 스마트폰 고정 바텀 메뉴 */
.game-mobile-bottom-nav,
.game-mobile-menu-panel,
.game-mobile-search-panel,
.game-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 768px) {
    #mobile_menu {
        display: none;
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    html.game-mobile-menu-open,
    html.game-mobile-menu-open body {
        overflow: hidden;
    }

    .game-mobile-menu-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 1190;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .62);
    }

    .game-mobile-menu-panel:not([hidden]) {
        position: fixed;
        right: 10px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        left: 10px;
        z-index: 1195;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        max-height: min(64vh, 520px);
        padding: 14px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 14px;
        background: #252525;
        box-shadow: 0 -16px 46px rgba(0, 0, 0, .5);
        box-sizing: border-box;
    }

    .game-mobile-search-panel:not([hidden]) {
        position: fixed;
        right: 10px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        left: 10px;
        z-index: 1195;
        display: block;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 14px;
        background: #252525;
        box-shadow: 0 -16px 46px rgba(0, 0, 0, .5);
        box-sizing: border-box;
    }

    .game-mobile-search-panel label {
        display: block;
        margin-bottom: 9px;
        color: #eef2f5;
        font-size: 13px;
        font-weight: 900;
    }

    .game-mobile-search-panel form > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 66px;
        gap: 7px;
    }

    .game-mobile-search-panel input {
        min-width: 0;
        height: 44px;
        padding: 0 12px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 8px;
        outline: 0;
        background: #171717;
        color: #fff;
        font: inherit;
        font-size: 16px;
        box-sizing: border-box;
    }

    .game-mobile-search-panel input:focus {
        border-color: #63dfc3;
        box-shadow: 0 0 0 2px rgba(99, 223, 195, .14);
    }

    .game-mobile-search-panel form button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0;
        border-radius: 8px;
        background: #63dfc3;
        color: #07120f;
        font: inherit;
        font-size: 13px;
        font-weight: 900;
    }

    .game-mobile-menu-panel a {
        display: flex;
        min-width: 0;
        min-height: 42px;
        padding: 8px 11px;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 8px;
        background: rgba(255, 255, 255, .04);
        color: #d4d7dc;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        box-sizing: border-box;
    }

    .game-mobile-menu-panel a i {
        width: 18px;
        font-size: 15px;
        text-align: center;
    }

    .game-mobile-menu-panel .game-menu-icon-ranking { color: #f6c453 !important; }
    .game-mobile-menu-panel .game-menu-icon-popularity { color: #34d399 !important; }
    .game-mobile-menu-panel .game-menu-icon-new { color: #fb7185 !important; }
    .game-mobile-menu-panel .game-menu-icon-upcoming { color: #60a5fa !important; }
    .game-mobile-menu-panel .game-menu-icon-gamepass { color: #54c76b !important; }
    .game-mobile-menu-panel .game-menu-icon-psplus { color: #6ba6ff !important; }
    .game-mobile-menu-panel .game-menu-icon-steam { color: #8dc8ea !important; }
    .game-mobile-menu-panel .game-menu-icon-finder { color: #c084fc !important; }
    .game-mobile-menu-panel .game-menu-icon-news { color: #f59e0b !important; }

    .game-mobile-menu-panel a.active,
    .game-mobile-menu-panel a:focus-visible {
        border-color: rgba(99, 223, 195, .5);
        background: rgba(99, 223, 195, .1);
        color: #63dfc3;
        outline: none;
    }

    .game-mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: 58px;
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .12);
        background: rgba(31, 31, 31, .98);
        box-shadow: 0 -5px 18px rgba(0, 0, 0, .22);
        box-sizing: content-box;
    }

    .game-mobile-bottom-nav a,
    .game-mobile-bottom-nav button {
        display: flex;
        min-width: 0;
        min-height: 48px;
        padding: 4px 2px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #aeb4bc;
        font: inherit;
        font-size: 10px;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    .game-mobile-bottom-nav i {
        color: currentColor !important;
        font-size: 17px;
        line-height: 1;
    }

    html:not(.game-mobile-menu-open) .game-mobile-bottom-nav a.active,
    .game-mobile-bottom-nav button[aria-expanded="true"] {
        color: #63dfc3;
        background: rgba(99, 223, 195, .09);
    }

    .game-mobile-bottom-nav a:focus-visible,
    .game-mobile-bottom-nav button:focus-visible {
        outline: 2px solid #63dfc3;
        outline-offset: -2px;
    }

    #top_btn,
    #darkmode-toggle-switch {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
}