html, body {
    margin: 0;
    background: #050608;
    color: #ddd;
    font-family: "Malgun Gothic", "Noto Sans KR", sans-serif;
}

#l2shinhwa-theme,
.l2-main {
    width: 100%;
    min-height: 100vh;
    background: #050608;
}

.l2-stage {
    position: relative;
    width: min(100vw, 2048px);
    aspect-ratio: 2048 / 1359;
    margin: 0 auto;
    overflow: hidden;
    background: #050608;
}

.l2-design-bg {
    position: absolute;
    inset: 0;
    background: url("../img/main-design.jpg") center top / 100% 100% no-repeat;
    pointer-events: none;
    user-select: none;
}

/* 상단 메뉴 투명 클릭 영역 */
.l2-click-nav a,
.hotspot {
    position: absolute;
    display: block;
    z-index: 4;
}

.nav-news      { left:24.170%; top:2.943%; width:6.104%; height:5.887%; }
.nav-info      { left:31.494%; top:2.943%; width:6.592%; height:5.887%; }
.nav-guide     { left:38.574%; top:2.943%; width:5.859%; height:5.887%; }
.nav-community { left:44.922%; top:2.943%; width:7.324%; height:5.887%; }
.nav-ranking   { left:52.734%; top:2.943%; width:5.859%; height:5.887%; }
.nav-download  { left:59.326%; top:2.943%; width:7.568%; height:5.887%; }
.nav-support   { left:67.139%; top:2.943%; width:6.836%; height:5.887%; }

/* 로그인 패널 - 배경 이미지의 로그인 박스를 완전히 덮어 기능화 */
.l2-login-live {
    position: absolute;
    left: 8.65%;
    top: 15.95%;
    width: 18.35%;
    min-height: 25.3%;
    z-index: 7;
    color: #c9c0ae;
    background:
      linear-gradient(180deg, rgba(15,16,18,.985), rgba(6,7,9,.985));
    border: 1px solid rgba(175,133,62,.66);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.92),
      inset 0 0 24px rgba(0,0,0,.75),
      0 10px 34px rgba(0,0,0,.5);
}

.l2-login-title {
    height: 15.5%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d6b36c;
    font: 700 clamp(12px, .95vw, 18px) Georgia, serif;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(119,89,44,.36);
}

.l2-login-live form {
    padding: 8% 8.5% 7%;
}

.l2-field {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(32px, 3.2vw, 54px);
    margin-bottom: 3.2%;
    background: rgba(4,5,7,.95);
    border: 1px solid #2d2d2e;
    box-shadow: inset 0 0 15px rgba(0,0,0,.72);
}

.l2-field input {
    width: 100%;
    height: 100%;
    padding: 0 7% 0 18%;
    border: 0;
    outline: 0;
    color: #d6d0c4;
    background: transparent;
    font-size: clamp(11px, .92vw, 16px);
}

.l2-field input::placeholder { color: #77746e; }

.l2-icon {
    position: absolute;
    left: 7%;
    color: #8c8880;
    font-size: clamp(8px, .7vw, 13px);
}

.l2-login-button {
    width: 100%;
    height: clamp(34px, 3.45vw, 58px);
    border: 1px solid #d0a34f;
    color: #fff;
    background: linear-gradient(#c2933f, #7b551e);
    box-shadow: inset 0 1px rgba(255,255,255,.16);
    text-shadow: 0 1px 2px #3e290d;
    font-size: clamp(11px, .95vw, 17px);
    font-weight: 700;
    cursor: pointer;
}

.l2-login-button:hover { filter: brightness(1.12); }

.l2-auto {
    display: flex;
    align-items: center;
    gap: 4%;
    margin-top: 5%;
    color: #9a958c;
    font-size: clamp(9px, .72vw, 13px);
}

.l2-auto input {
    appearance: none;
    width: clamp(12px, 1vw, 17px);
    aspect-ratio: 1;
    border: 1px solid #555149;
    background: #08090b;
}

.l2-auto input:checked {
    background: #ad7e31;
    box-shadow: inset 0 0 0 3px #0b0c0d;
}

.l2-login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7%;
    margin-top: 7%;
    color: #918c84;
    font-size: clamp(9px, .72vw, 13px);
}

.l2-login-links a { color: inherit; text-decoration: none; }
.l2-login-links a:hover { color: #d6b36c; }
.l2-login-links i { width: 1px; height: 12px; background: #4c4943; }

.l2-member-box {
    padding: 8% 8.5%;
    text-align: center;
}

.l2-member-box strong {
    color: #e1bd72;
    font-size: clamp(13px, 1vw, 18px);
}

.l2-member-box p {
    margin: 7% 0;
    font-size: clamp(9px, .72vw, 13px);
    color: #aaa49a;
}

.l2-member-box dl { margin: 0 0 8%; }
.l2-member-box dl div {
    display: flex;
    justify-content: space-between;
    padding: 4% 0;
    border-bottom: 1px solid #28282a;
    font-size: clamp(9px, .72vw, 13px);
}
.l2-member-box dt { color: #8e8981; }
.l2-member-box dd { margin: 0; color: #d8c49e; }
.l2-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* 이미지 안 버튼을 실제 링크로 만드는 투명 영역 */
.hotspot.start     { left:9.766%; top:43.046%; width:15.137%; height:14.496%; }
.hotspot.account   { left:9.766%; top:58.499%; width:15.137%; height:6.990%; }
.hotspot.guide     { left:9.766%; top:66.225%; width:15.137%; height:6.990%; }
.hotspot.community { left:9.766%; top:73.584%; width:15.137%; height:6.990%; }
.hotspot.promo     { left:27.344%; top:43.046%; width:41.748%; height:16.188%; }
.hotspot.itemshop  { left:68.604%; top:62.914%; width:20.508%; height:6.990%; }
.hotspot.clan      { left:68.604%; top:70.272%; width:20.508%; height:6.990%; }
.hotspot.support   { left:68.604%; top:77.631%; width:20.508%; height:6.623%; }

.l2-click-nav a:hover,
.hotspot:hover {
    outline: none;
    background: transparent;
}

@media (max-width: 900px) {
    .l2-stage {
        width: 100%;
        min-width: 720px;
    }
    body {
        overflow-x: auto;
    }
}


/* 투명 클릭 영역은 어떤 상태에서도 화면에 사각형을 표시하지 않습니다. */
.l2-click-nav a,
.hotspot,
.l2-click-nav a:hover,
.hotspot:hover,
.l2-click-nav a:focus,
.hotspot:focus,
.l2-click-nav a:active,
.hotspot:active,
.l2-click-nav a:focus-visible,
.hotspot:focus-visible {
    outline: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}


/* 4차 수정: 배경 이미지(2048x1359)의 실제 버튼 좌표와 클릭 영역을 1:1로 맞춤 */
.l2-click-nav a,
.hotspot {
    cursor: pointer;
}


/* 5차 수정: 좌측 상단 L2 SHINHWA 로고를 홈 버튼으로 사용 */
.l2-home-logo {
    position: absolute;
    left: 5.55%;
    top: 0.80%;
    width: 9.35%;
    height: 9.20%;
    z-index: 8;
    display: block;
    cursor: pointer;
    outline: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   7차: 메인과 동일한 품질의 서브페이지/게시판 공통 디자인
   ========================================================= */

body {
    min-width: 320px;
}

.l2-sub-header {
    position: relative;
    z-index: 30;
    height: 96px;
    background:
        linear-gradient(180deg, rgba(5,7,11,.98), rgba(8,10,15,.94));
    border-bottom: 1px solid rgba(198,151,71,.38);
    box-shadow: 0 8px 30px rgba(0,0,0,.48);
}

.l2-sub-header-inner {
    width: min(1380px, calc(100% - 40px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 68px;
}

.l2-sub-logo {
    min-width: 205px;
    display: flex;
    align-items: center;
    color: #e4c782;
    text-decoration: none !important;
}

.l2-sub-logo-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(208,165,80,.75);
    border-radius: 50%;
    font: 35px Georgia, serif;
    box-shadow: inset 0 0 20px rgba(201,151,66,.12), 0 0 20px rgba(0,0,0,.6);
}

.l2-sub-logo-text {
    margin-left: 13px;
    font: 23px Georgia, serif;
    letter-spacing: 4px;
}

.l2-sub-logo-text small {
    display: block;
    margin-top: 4px;
    color: #887a60;
    font: 8px Arial, sans-serif;
    letter-spacing: 2px;
}

.l2-sub-nav {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.l2-sub-nav a {
    position: relative;
    min-width: 90px;
    padding: 28px 12px 0;
    color: #d8d0c0;
    text-align: center;
    text-decoration: none !important;
    font-size: 14px;
    transition: .2s;
}

.l2-sub-nav a small {
    display: block;
    margin-top: 7px;
    color: #887758;
    font-size: 9px;
    letter-spacing: 1px;
}

.l2-sub-nav a::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    height: 2px;
    background: transparent;
}

.l2-sub-nav a:hover,
.l2-sub-nav a.active {
    color: #f0d48f;
    background: linear-gradient(180deg, transparent, rgba(192,141,54,.07));
}

.l2-sub-nav a:hover::after,
.l2-sub-nav a.active::after {
    background: linear-gradient(90deg, transparent, #cda04c, transparent);
}

.l2-sub-hero {
    position: relative;
    height: 250px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(4,6,10,.9), rgba(4,6,10,.22), rgba(4,6,10,.78)),
        url("../img/main-design.jpg") center 21% / cover no-repeat;
    border-bottom: 1px solid rgba(198,151,71,.3);
}

.l2-sub-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(213,171,91,.1), transparent 38%),
        linear-gradient(180deg, transparent 25%, #08090c 110%);
}

.l2-sub-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-shadow: 0 3px 18px #000;
}

.l2-sub-hero-inner p {
    margin: 0 0 9px;
    color: #bd9853;
    font: 11px Georgia, serif;
    letter-spacing: 7px;
}

.l2-sub-hero-inner h1 {
    margin: 0;
    color: #f0dfb4;
    font: 700 42px Georgia, "Malgun Gothic", serif;
    letter-spacing: 2px;
}

.l2-sub-hero-inner span {
    margin-top: 13px;
    color: #a8a194;
    font-size: 13px;
}

.l2-sub-main {
    min-height: 620px;
    padding: 48px 20px 76px;
    background:
        radial-gradient(circle at 50% 0, rgba(91,72,41,.11), transparent 42%),
        linear-gradient(180deg, #090a0d, #050608);
}

.l2-sub-frame {
    position: relative;
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 26px;
    color: #d7d2c9;
    background:
        linear-gradient(180deg, rgba(15,16,20,.98), rgba(7,8,11,.99));
    border: 1px solid rgba(194,146,67,.42);
    box-shadow:
        0 20px 70px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 0 40px rgba(0,0,0,.35);
}

.l2-sub-frame::before,
.l2-sub-frame::after {
    content: "◆";
    position: absolute;
    top: -11px;
    color: #bb8c3f;
    font-size: 17px;
    text-shadow: 0 0 12px rgba(196,146,59,.35);
}

.l2-sub-frame::before { left: 18px; }
.l2-sub-frame::after { right: 18px; }

/* 그누보드 기본 게시판 레이아웃 보정 */
.l2-sub-frame #bo_list,
.l2-sub-frame #bo_v,
.l2-sub-frame #bo_w,
.l2-sub-frame #bo_gall,
.l2-sub-frame #bo_cate,
.l2-sub-frame .bo_fx,
.l2-sub-frame .tbl_head01,
.l2-sub-frame .tbl_frm01 {
    width: 100%;
    max-width: none;
    color: #d6d0c4;
}

.l2-sub-frame #bo_list {
    background: transparent;
}

.l2-sub-frame #bo_list_total {
    margin: 0 0 15px;
    color: #908a80;
    font-size: 12px;
}

.l2-sub-frame .tbl_head01 {
    overflow: hidden;
    border: 1px solid #26282c;
    background: #090a0d;
}

.l2-sub-frame .tbl_head01 table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.l2-sub-frame .tbl_head01 thead th {
    height: 51px;
    padding: 0 12px;
    color: #d3b16e;
    background:
        linear-gradient(180deg, #17191e, #0d0e12);
    border-top: 1px solid rgba(211,168,82,.23);
    border-bottom: 1px solid rgba(211,168,82,.3);
    font-size: 13px;
    font-weight: 600;
}

.l2-sub-frame .tbl_head01 tbody tr {
    transition: .18s;
}

.l2-sub-frame .tbl_head01 tbody tr:hover {
    background: rgba(178,129,48,.075);
}

.l2-sub-frame .tbl_head01 tbody td {
    height: 55px;
    padding: 9px 12px;
    color: #aaa69e;
    border-top: 1px solid #222429;
    border-bottom: 0;
    background: transparent;
}

.l2-sub-frame .tbl_head01 tbody td a {
    color: #ddd6c8;
    text-decoration: none;
}

.l2-sub-frame .tbl_head01 tbody td a:hover {
    color: #e4bd6c;
}

.l2-sub-frame .bo_tit {
    color: #e0d8ca !important;
    font-size: 14px;
}

.l2-sub-frame .bo_tit:hover {
    color: #edc87d !important;
}

.l2-sub-frame .sv_member,
.l2-sub-frame .sv_guest {
    color: #c2b69e;
}

.l2-sub-frame .bo_notice td,
.l2-sub-frame tr.bo_notice {
    background: rgba(142,101,37,.11) !important;
}

.l2-sub-frame .bo_notice .notice_icon {
    color: #e0b65e;
}

.l2-sub-frame .empty_table,
.l2-sub-frame .empty_list {
    height: 230px !important;
    color: #77736c !important;
    background:
        radial-gradient(circle, rgba(181,134,52,.06), transparent 55%);
    font-size: 14px;
}

/* 게시판 상단 도구 버튼 */
.l2-sub-frame .bo_fx {
    margin: 0 0 18px;
}

.l2-sub-frame .bo_fx::after {
    content: "";
    display: block;
    clear: both;
}

.l2-sub-frame .btn_bo_user li,
.l2-sub-frame .btn_bo_adm li {
    margin-left: 6px;
}

.l2-sub-frame .btn_bo_user a,
.l2-sub-frame .btn_bo_user button,
.l2-sub-frame .btn_bo_adm a,
.l2-sub-frame .btn_bo_adm button,
.l2-sub-frame .btn_b01,
.l2-sub-frame .btn_b02,
.l2-sub-frame .btn_admin,
.l2-sub-frame .btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 40px;
    padding: 0 16px;
    color: #eee6d5 !important;
    background: linear-gradient(180deg, #4f3a1b, #24190d) !important;
    border: 1px solid #8e6930 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.07);
    text-decoration: none !important;
    font-size: 12px;
    transition: .18s;
}

.l2-sub-frame .btn_bo_user a:hover,
.l2-sub-frame .btn_bo_user button:hover,
.l2-sub-frame .btn_bo_adm a:hover,
.l2-sub-frame .btn_bo_adm button:hover,
.l2-sub-frame .btn_b01:hover,
.l2-sub-frame .btn_b02:hover,
.l2-sub-frame .btn_admin:hover,
.l2-sub-frame .btn_submit:hover {
    filter: brightness(1.22);
    border-color: #c79543 !important;
}

/* 검색 */
.l2-sub-frame #bo_sch {
    margin: 28px auto 0;
    padding: 18px;
    background: #0b0c0f;
    border: 1px solid #292a2e;
}

.l2-sub-frame #bo_sch select,
.l2-sub-frame #bo_sch input[type="text"],
.l2-sub-frame .frm_input,
.l2-sub-frame select {
    height: 41px;
    color: #d8d2c7;
    background: #08090b;
    border: 1px solid #343438;
    border-radius: 0;
    outline: none;
}

.l2-sub-frame #bo_sch input[type="text"],
.l2-sub-frame .frm_input {
    padding: 0 12px;
}

.l2-sub-frame #bo_sch select:focus,
.l2-sub-frame #bo_sch input:focus,
.l2-sub-frame .frm_input:focus {
    border-color: #9d7334;
}

.l2-sub-frame #bo_sch .btn_submit {
    height: 41px;
}

/* 페이징 */
.l2-sub-frame .pg_wrap {
    margin: 30px 0 5px;
}

.l2-sub-frame .pg_page,
.l2-sub-frame .pg_current {
    min-width: 37px;
    height: 37px;
    line-height: 35px;
    margin: 0 2px;
    border-radius: 0;
}

.l2-sub-frame .pg_page {
    color: #918c82;
    background: #0c0d10;
    border: 1px solid #2c2d31;
}

.l2-sub-frame .pg_page:hover {
    color: #e4c37d;
    border-color: #815f2c;
}

.l2-sub-frame .pg_current {
    color: #fff;
    background: linear-gradient(#ac7c31, #6e4a1a);
    border: 1px solid #c6984a;
}

/* 게시글 보기 */
.l2-sub-frame #bo_v {
    border: 1px solid #292b30;
    background: #090a0d;
}

.l2-sub-frame #bo_v_title {
    padding: 25px 27px;
    color: #eed8a7;
    background: linear-gradient(180deg, #17191e, #0f1014);
    border-bottom: 1px solid rgba(195,148,69,.35);
}

.l2-sub-frame #bo_v_info {
    padding: 15px 27px;
    color: #89857d;
    background: #0a0b0e;
    border-bottom: 1px solid #25262a;
}

.l2-sub-frame #bo_v_con {
    min-height: 280px;
    padding: 35px 30px;
    color: #cec8bc;
    line-height: 1.8;
}

.l2-sub-frame #bo_v_atc {
    background: transparent;
}

.l2-sub-frame #bo_v_file,
.l2-sub-frame #bo_v_link {
    padding: 16px 27px;
    background: #0c0d10;
    border-bottom: 1px solid #24262a;
}

.l2-sub-frame #bo_v_file a,
.l2-sub-frame #bo_v_link a {
    color: #cfa754;
}

/* 글쓰기 */
.l2-sub-frame #bo_w {
    padding: 5px;
    background: transparent;
}

.l2-sub-frame .tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
    background: #0b0c0f;
    border: 1px solid #292b30;
}

.l2-sub-frame .tbl_frm01 th {
    width: 150px;
    padding: 15px;
    color: #c8a55d;
    background: #121317;
    border-bottom: 1px solid #292b30;
}

.l2-sub-frame .tbl_frm01 td {
    padding: 15px;
    color: #bbb5aa;
    background: #0a0b0e;
    border-bottom: 1px solid #24262a;
}

.l2-sub-frame textarea {
    color: #d8d2c7;
    background: #08090b;
    border: 1px solid #343438;
}

/* 카테고리 */
.l2-sub-frame #bo_cate {
    margin: 0 0 20px;
    border-bottom: 1px solid #2b2c31;
}

.l2-sub-frame #bo_cate ul {
    margin: 0;
    padding: 0;
}

.l2-sub-frame #bo_cate li {
    display: inline-block;
    margin-right: 5px;
}

.l2-sub-frame #bo_cate a {
    display: block;
    padding: 11px 18px;
    color: #969188;
    background: #0b0c0f;
    border: 1px solid #292a2e;
    border-bottom: 0;
    text-decoration: none;
}

.l2-sub-frame #bo_cate a:hover,
.l2-sub-frame #bo_cate #bo_cate_on {
    color: #efd18e;
    background: #21170b;
    border-color: #775724;
}

/* 체크박스 */
.l2-sub-frame input[type="checkbox"] {
    accent-color: #a8782d;
}

/* 하단 */
.l2-sub-footer {
    padding: 31px 20px;
    color: #746f67;
    background: #060709;
    border-top: 1px solid rgba(189,144,66,.25);
}

.l2-sub-footer-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 30px;
    align-items: center;
    font-size: 11px;
}

.l2-sub-footer-inner p {
    margin: 4px 0;
}

.l2-sub-footer-logo {
    color: #c9af78;
    font: 26px Georgia, serif;
}

.l2-sub-footer-logo span {
    color: #756b57;
}

.l2-sub-footer-links {
    display: flex;
    gap: 18px;
}

.l2-sub-footer-links a {
    color: #827c72;
    text-decoration: none;
}

.l2-sub-footer-links a:hover {
    color: #c9a55c;
}

/* 그누보드에서 고정 폭으로 설정한 기본 요소 제거 */
.l2-sub-frame #container,
.l2-sub-frame #wrapper,
.l2-sub-frame .container {
    width: 100% !important;
    max-width: none !important;
}

/* 모바일 */
@media (max-width: 1000px) {
    .l2-sub-header {
        height: auto;
    }

    .l2-sub-header-inner {
        padding: 18px 0;
        flex-wrap: wrap;
        gap: 15px;
    }

    .l2-sub-logo {
        margin: 0 auto;
    }

    .l2-sub-nav {
        width: 100%;
        flex: none;
        overflow-x: auto;
    }

    .l2-sub-nav a {
        min-width: 105px;
        padding: 15px 10px;
    }

    .l2-sub-hero {
        height: 205px;
    }

    .l2-sub-frame {
        padding: 16px;
    }

    .l2-sub-frame .tbl_head01 {
        overflow-x: auto;
    }

    .l2-sub-frame .tbl_head01 table {
        min-width: 760px;
    }

    .l2-sub-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .l2-sub-footer-links {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .l2-sub-main {
        padding: 28px 10px 45px;
    }

    .l2-sub-hero-inner h1 {
        font-size: 31px;
    }

    .l2-sub-frame {
        padding: 10px;
    }

    .l2-sub-frame .tbl_frm01 th {
        width: 90px;
        padding: 10px;
    }

    .l2-sub-frame .tbl_frm01 td {
        padding: 10px;
    }
}


/* =========================================================
   8차: 게임 계정 생성 페이지 디자인
   ========================================================= */
.l2-account-page {
    padding: 8px 4px 22px;
}

.l2-account-heading {
    padding: 10px 10px 30px;
    text-align: center;
    border-bottom: 1px solid rgba(195,148,69,.24);
}

.l2-account-heading p {
    margin: 0 0 8px;
    color: #b88d45;
    font: 11px Georgia, serif;
    letter-spacing: 6px;
}

.l2-account-heading h2 {
    margin: 0;
    color: #eed6a3;
    font: 700 31px Georgia, "Malgun Gothic", serif;
}

.l2-account-heading span {
    display: block;
    margin-top: 12px;
    color: #8e8980;
    font-size: 13px;
}

.l2-account-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 24px;
    margin-top: 26px;
}

.l2-account-guide,
.l2-account-form-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(18,19,23,.97), rgba(7,8,11,.99));
    border: 1px solid #313238;
    box-shadow: inset 0 0 28px rgba(0,0,0,.45);
}

.l2-account-guide {
    padding: 34px 27px;
    border-color: rgba(178,132,55,.42);
}

.l2-account-emblem {
    width: 92px;
    height: 92px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    color: #e5c77f;
    background:
        radial-gradient(circle, rgba(183,132,46,.2), transparent 64%);
    border: 1px solid #83602a;
    transform: rotate(45deg);
    font: 30px Georgia, serif;
    box-shadow: inset 0 0 24px rgba(0,0,0,.65);
}

.l2-account-emblem::first-line {
    transform: rotate(-45deg);
}

.l2-account-emblem {
    line-height: 92px;
    text-align: center;
}

.l2-account-emblem {
    color: transparent;
}

.l2-account-emblem::after {
    content: "L2";
    color: #e5c77f;
    transform: rotate(-45deg);
    font: 30px Georgia, serif;
}

.l2-account-guide h3 {
    margin: 0 0 22px;
    color: #dfbe77;
    text-align: center;
    font-size: 19px;
}

.l2-account-guide ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l2-account-guide li {
    position: relative;
    padding: 12px 0 12px 19px;
    color: #99948a;
    border-bottom: 1px solid #24252a;
    font-size: 12px;
    line-height: 1.65;
}

.l2-account-guide li::before {
    content: "◆";
    position: absolute;
    left: 0;
    top: 14px;
    color: #99712f;
    font-size: 8px;
}

.l2-account-coupon {
    margin-top: 25px;
    padding: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #958f84;
    background: #090a0d;
    border: 1px solid #2a2b30;
    font-size: 12px;
}

.l2-account-coupon strong {
    color: #e1bd6f;
}

.l2-account-form-panel {
    padding: 30px 34px 35px;
}

.l2-account-member {
    margin-bottom: 25px;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    color: #8e8980;
    background: rgba(151,107,39,.08);
    border: 1px solid rgba(172,126,48,.26);
    font-size: 12px;
}

.l2-account-member strong {
    color: #e0bf76;
}

.l2-account-login-notice {
    margin-bottom: 25px;
    padding: 19px 21px;
    background: rgba(148,100,32,.09);
    border: 1px solid rgba(171,125,48,.3);
}

.l2-account-login-notice strong {
    color: #e0bc72;
    font-size: 15px;
}

.l2-account-login-notice p {
    margin: 8px 0 14px;
    color: #918c83;
    font-size: 12px;
}

.l2-account-login-notice a {
    display: inline-flex;
    height: 35px;
    padding: 0 15px;
    align-items: center;
    color: #e9ddc5;
    background: #24190c;
    border: 1px solid #795625;
    text-decoration: none;
    font-size: 11px;
}

.l2-account-field {
    margin-bottom: 22px;
}

.l2-account-field > label {
    display: block;
    margin-bottom: 9px;
    color: #c7aa69;
    font-size: 13px;
    font-weight: 600;
}

.l2-account-input {
    height: 52px;
    display: flex;
    align-items: center;
    background: #07080a;
    border: 1px solid #35363b;
    transition: .18s;
}

.l2-account-input:focus-within {
    border-color: #9b7132;
    box-shadow: 0 0 0 1px rgba(168,120,45,.12);
}

.l2-account-input span {
    width: 57px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #8f6e38;
    border-right: 1px solid #303136;
    font: 11px Georgia, serif;
}

.l2-account-input input {
    flex: 1;
    height: 100%;
    padding: 0 15px;
    color: #e0dbd1;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 13px;
}

.l2-account-input input::placeholder {
    color: #5f5d59;
}

.l2-account-field small {
    display: block;
    margin-top: 7px;
    color: #686661;
    font-size: 11px;
}

.l2-account-field small.is-success {
    color: #58b76b;
}

.l2-account-field small.is-error {
    color: #d66b60;
}

.l2-account-agree {
    margin: 5px 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8d8981;
    font-size: 12px;
}

.l2-account-agree input {
    width: 16px;
    height: 16px;
    accent-color: #a6772e;
}

.l2-account-submit {
    width: 100%;
    height: 55px;
    color: #fff7e7;
    background:
        linear-gradient(180deg, #c49643, #77511b);
    border: 1px solid #d1a555;
    box-shadow:
        inset 0 1px rgba(255,255,255,.15),
        0 7px 19px rgba(0,0,0,.22);
    text-shadow: 0 1px 2px #3f290c;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s;
}

.l2-account-submit:hover {
    filter: brightness(1.13);
}

.l2-account-ready {
    margin: 13px 0 0;
    color: #66645f;
    text-align: center;
    font-size: 10px;
}

@media (max-width: 850px) {
    .l2-account-layout {
        grid-template-columns: 1fr;
    }

    .l2-account-guide {
        order: 2;
    }
}

@media (max-width: 550px) {
    .l2-account-form-panel {
        padding: 23px 17px 27px;
    }

    .l2-account-heading h2 {
        font-size: 26px;
    }
}


/* 11차: 실제 게임 계정 생성 결과 메시지 */
.l2-account-message {
    margin-bottom: 23px;
    padding: 17px 20px;
    border: 1px solid;
    background: #0a0b0e;
}

.l2-account-message strong {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
}

.l2-account-message ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.l2-account-message li,
.l2-account-message p {
    margin: 5px 0;
    color: #aaa59c;
    font-size: 12px;
    line-height: 1.6;
}

.l2-account-message.is-error {
    border-color: rgba(183,78,67,.52);
    background: rgba(94,28,24,.12);
}

.l2-account-message.is-error strong {
    color: #dc8177;
}

.l2-account-message.is-success {
    border-color: rgba(73,163,92,.45);
    background: rgba(27,84,40,.12);
}

.l2-account-message.is-success strong {
    color: #73c987;
}


/* 게임 계정 쿠폰 시스템 */
.l2-coupon-buy-link{display:block;margin-top:12px;padding:13px 15px;color:#f2d18a!important;text-align:center;text-decoration:none!important;background:linear-gradient(180deg,#2d2110,#171006);border:1px solid #7f5d29;font-size:12px}.l2-coupon-buy-link:hover{filter:brightness(1.18)}
.l2-account-submit:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.45}.l2-coupon-shop-panel{max-width:780px;margin:28px auto 8px;padding:34px;background:linear-gradient(180deg,rgba(18,19,23,.98),rgba(7,8,11,.99));border:1px solid rgba(194,146,67,.42)}
.l2-coupon-stat{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;margin-bottom:12px;background:#090a0d;border:1px solid #2c2d32;color:#969087}.l2-coupon-stat strong{color:#edc978;font-size:20px}.l2-coupon-product{display:flex;justify-content:space-between;align-items:center;margin:24px 0;padding:24px;background:rgba(151,107,39,.08);border:1px solid rgba(172,126,48,.3)}.l2-coupon-product b{color:#e5c47d;font-size:17px}.l2-coupon-product p{margin:8px 0 0;color:#89857d;font-size:12px}.l2-coupon-product em{color:#f1d08a;font-size:21px;font-style:normal;font-weight:700}.l2-coupon-back{display:block;margin-top:17px;color:#89857d!important;text-align:center;text-decoration:none!important;font-size:12px}.l2-coupon-back:hover{color:#d6b66e!important}
\n\n/* 메인 공지사항 최신글 */\n.l2-main-news{position:absolute;left:27.8%;top:62.7%;width:38.8%;height:16.5%;z-index:6;overflow:hidden}\n.l2-news-box{height:100%;padding:1.2% 2.2%;box-sizing:border-box;color:#c9c0ae}\n.l2-news-head{display:flex;justify-content:space-between;align-items:center;height:22%;border-bottom:1px solid rgba(180,139,68,.35)}\n.l2-news-head strong{color:#d8b96f;font:700 clamp(10px,.85vw,16px) Georgia,serif;letter-spacing:.08em}\n.l2-news-head a{color:#817867;text-decoration:none;font-size:clamp(8px,.6vw,11px)}\n.l2-news-box ul{list-style:none;margin:1.5% 0 0;padding:0}\n.l2-news-box li{height:14%;min-height:20px;border-bottom:1px solid rgba(255,255,255,.04)}\n.l2-news-box li a{display:flex;justify-content:space-between;gap:15px;color:#b8b1a5;text-decoration:none;font-size:clamp(8px,.68vw,13px);line-height:1.8}\n.l2-news-box li a:hover span{color:#e0bf78}\n.l2-news-box li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.l2-news-box time{flex:none;color:#6e6a64}\n.l2-news-box .empty{color:#76716a;padding-top:3%;font-size:clamp(8px,.68vw,13px)}\n\n/* 아이템샵/가이드/혈맹/고객지원 공통 페이지 */\n.l2-portal-page{padding:18px 8px 50px}\n.l2-portal-heading{text-align:center;margin:0 0 35px}\n.l2-portal-heading>p{margin:0 0 8px;color:#b58a45;font:700 12px Georgia,serif;letter-spacing:4px}\n.l2-portal-heading h2{margin:0;color:#ead9b7;font:700 30px Georgia,'Malgun Gothic',serif}\n.l2-portal-heading>span{display:block;margin-top:12px;color:#8f8a81;font-size:14px}\n.l2-portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\n.l2-portal-card{min-height:190px;padding:30px;box-sizing:border-box;border:1px solid rgba(177,132,61,.42);background:linear-gradient(145deg,rgba(26,28,32,.96),rgba(9,11,14,.98));text-decoration:none!important;box-shadow:inset 0 0 25px rgba(0,0,0,.45);transition:.2s}\n.l2-portal-card:hover{transform:translateY(-3px);border-color:#b88b45}\n.l2-portal-card b{color:#dfbd78;font-size:19px}\n.l2-portal-card p{min-height:52px;margin:16px 0;color:#aaa399;line-height:1.7;font-size:13px}\n.l2-portal-card span{color:#8c7a5b;font-size:12px}\n@media(max-width:800px){.l2-portal-grid{grid-template-columns:1fr}.l2-main-news{display:none}}\n

/* =========================================================
   메인 UI 인터랙션 업데이트: 팝업 실행 + 고급 Hover 효과
   ========================================================= */
.l2-click-nav a,
.hotspot,
.l2-home-logo {
    transition: transform .22s ease, filter .22s ease;
    transform-origin: center;
    isolation: isolate;
}

.l2-click-nav a::after,
.hotspot::after,
.l2-home-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease, box-shadow .22s ease, background .22s ease;
}

/* 상단 메뉴: 은은한 금빛과 하단 라인 */
.l2-click-nav a::after {
    inset: 8% 7% 4%;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(240,205,128,.08), rgba(157,101,27,.03)),
        linear-gradient(90deg, transparent 8%, rgba(224,177,83,.72) 50%, transparent 92%) bottom / 100% 2px no-repeat;
    box-shadow: 0 7px 18px rgba(202,145,48,.18);
}
.l2-click-nav a:hover,
.l2-click-nav a:focus-visible {
    transform: translateY(-1px) scale(1.025);
    filter: brightness(1.28) saturate(1.12);
}
.l2-click-nav a:hover::after,
.l2-click-nav a:focus-visible::after { opacity: 1; }

/* 좌우 메인 버튼: 밝기, 금빛 외곽, 살짝 떠오르는 효과 */
.hotspot::after {
    border: 1px solid rgba(225,177,84,.75);
    border-radius: 3px;
    background: linear-gradient(120deg, rgba(255,224,153,.13), rgba(188,113,27,.06) 48%, rgba(255,213,119,.12));
    box-shadow:
        inset 0 0 22px rgba(244,193,91,.12),
        0 0 18px rgba(196,132,37,.24),
        0 8px 20px rgba(0,0,0,.4);
}
.hotspot:hover,
.hotspot:focus-visible {
    transform: translateY(-2px) scale(1.018);
    filter: brightness(1.24) saturate(1.12);
    z-index: 9;
}
.hotspot:hover::after,
.hotspot:focus-visible::after { opacity: 1; }

/* GAME START는 붉은빛과 황금 Glow를 더 강하게 */
.hotspot.start:hover,
.hotspot.start:focus-visible {
    transform: translateY(-3px) scale(1.025);
    filter: brightness(1.36) saturate(1.22);
}
.hotspot.start::after {
    border-color: rgba(255,203,103,.95);
    background:
        radial-gradient(circle at 50% 55%, rgba(187,45,24,.20), transparent 68%),
        linear-gradient(120deg, rgba(255,220,139,.17), rgba(115,19,13,.12));
    box-shadow:
        inset 0 0 30px rgba(255,181,67,.18),
        0 0 26px rgba(235,154,43,.42),
        0 10px 28px rgba(0,0,0,.52);
}

/* 메인 배너는 크기가 크므로 과한 확대 없이 은은하게 */
.hotspot.promo:hover,
.hotspot.promo:focus-visible {
    transform: scale(1.006);
    filter: brightness(1.12) saturate(1.06);
}
.hotspot.promo::after {
    border-color: rgba(215,170,83,.42);
    background: linear-gradient(90deg, rgba(239,197,113,.05), transparent 48%, rgba(239,197,113,.06));
    box-shadow: inset 0 0 28px rgba(224,170,70,.07), 0 0 14px rgba(176,119,37,.12);
}

/* 좌측 상단 로고 홈 버튼 */
.l2-home-logo:hover,
.l2-home-logo:focus-visible {
    transform: scale(1.045);
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(228,181,86,.48));
}
.l2-home-logo::after {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238,197,109,.12), transparent 70%);
}
.l2-home-logo:hover::after,
.l2-home-logo:focus-visible::after { opacity: 1; }

/* 최신글 제목과 MORE 링크 */
.l2-news-head a,
.l2-news-box li a {
    transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}
.l2-news-head a:hover,
.l2-news-box li a:hover {
    color: #f0cf86;
    text-shadow: 0 0 9px rgba(225,174,77,.42);
}
.l2-news-box li a:hover { transform: translateX(4px); }

/* 로그인 및 서브페이지 버튼도 동일한 손맛 적용 */
.l2-login-button,
.l2-portal-card,
.l2-sub-nav a {
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.l2-login-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.18) saturate(1.08);
    box-shadow: inset 0 1px rgba(255,255,255,.2), 0 0 18px rgba(201,145,51,.25);
}

@media (prefers-reduced-motion: reduce) {
    .l2-click-nav a,
    .hotspot,
    .l2-home-logo,
    .l2-news-head a,
    .l2-news-box li a,
    .l2-login-button,
    .l2-portal-card,
    .l2-sub-nav a,
    .l2-click-nav a::after,
    .hotspot::after,
    .l2-home-logo::after { transition: none !important; }
}


/* 메인 상단 홍보센터: 배경 이미지에 문구를 직접 반영하고 클릭영역만 유지 */
.nav-promotion { background: transparent !important; border: 0 !important; box-shadow: none !important; }


/* =========================================================
   FINAL VISUAL FIX — 상단 메뉴 중복 제거 / 메인 모션 / 파티클
   ========================================================= */

/* 배경 이미지는 최종 메뉴가 포함된 단일 이미지 한 장만 사용 */
.l2-design-bg {
    z-index: 1;
    transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.006);
    transform-origin: 55% 33%;
    transition: transform .18s ease-out;
    animation: l2BackgroundBreath 13s ease-in-out infinite alternate;
    will-change: transform;
}

/* 상단 메뉴는 텍스트를 다시 올리지 않고 클릭 영역만 유지 */
.l2-click-nav a {
    background: transparent !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    border-radius: 5px;
    transition: box-shadow .22s ease, filter .22s ease, transform .22s ease;
}
.l2-click-nav a:hover {
    background: radial-gradient(ellipse at center, rgba(225,177,80,.13), rgba(225,177,80,0) 70%) !important;
    box-shadow: inset 0 -2px 0 rgba(222,177,86,.62), 0 0 20px rgba(206,152,57,.22) !important;
    transform: translateY(-1px);
}

/* 움직이는 캐릭터 복제 레이어 — 가장자리 마스킹으로 자연스럽게 합성 */
.l2-hero-motion {
    position: absolute;
    z-index: 2;
    left: 61.5%;
    top: 6.5%;
    width: 38.5%;
    height: 44.5%;
    pointer-events: none;
    background: url("../img/main-design.jpg") 100% 0 / 259.7% 224.7% no-repeat;
    opacity: .92;
    filter: brightness(1.025) saturate(1.04);
    -webkit-mask-image: radial-gradient(ellipse at 62% 50%, #000 20%, rgba(0,0,0,.92) 48%, transparent 78%);
    mask-image: radial-gradient(ellipse at 62% 50%, #000 20%, rgba(0,0,0,.92) 48%, transparent 78%);
    animation: l2HeroBreath 7.5s ease-in-out infinite;
    transform-origin: 68% 54%;
    will-change: transform, filter;
}

/* 성 뒤 빛기둥 */
.l2-castle-glow {
    position: absolute;
    z-index: 2;
    left: 22%;
    top: 8%;
    width: 53%;
    height: 38%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 48% 55%, rgba(255,207,110,.25), rgba(255,193,62,.08) 30%, transparent 68%),
        linear-gradient(90deg, transparent 34%, rgba(255,224,154,.10) 47%, rgba(255,224,154,.18) 50%, rgba(255,224,154,.10) 53%, transparent 66%);
    mix-blend-mode: screen;
    filter: blur(8px);
    animation: l2GlowPulse 5.8s ease-in-out infinite;
}

/* 안개 레이어 */
.l2-fog {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    left: -12%;
    width: 124%;
    height: 18%;
    opacity: .23;
    filter: blur(18px);
    background:
        radial-gradient(ellipse at 18% 50%, rgba(218,229,238,.46), transparent 34%),
        radial-gradient(ellipse at 54% 55%, rgba(196,211,224,.38), transparent 37%),
        radial-gradient(ellipse at 86% 47%, rgba(214,220,226,.32), transparent 32%);
}
.l2-fog-a { top: 26%; animation: l2FogMoveA 19s linear infinite alternate; }
.l2-fog-b { top: 42%; opacity: .14; animation: l2FogMoveB 26s linear infinite alternate; }

/* 파티클 레이어 */
.l2-particles {
    position: absolute;
    inset: 8% 0 15% 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}
.l2-particle {
    position: absolute;
    bottom: -4%;
    border-radius: 50%;
    background: #ffd67a;
    box-shadow: 0 0 7px #ffbf43, 0 0 14px rgba(255,169,44,.76);
    opacity: 0;
    animation-name: l2ParticleRise, l2ParticleTwinkle;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    will-change: transform, opacity;
}

/* 버튼 Hover — 실제 이미지 버튼 위에 은은하게만 표시 */
.hotspot {
    border-radius: 4px;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.hotspot:hover {
    background: linear-gradient(135deg, rgba(255,222,145,.08), rgba(255,137,42,.05)) !important;
    box-shadow:
        inset 0 0 25px rgba(255,205,104,.14),
        0 0 18px rgba(202,148,51,.28) !important;
    transform: scale(1.012);
    filter: brightness(1.10);
}
.hotspot:active {
    transform: scale(.992);
    filter: brightness(.96);
}
.hotspot.start:hover {
    background: radial-gradient(ellipse at center, rgba(255,84,34,.16), rgba(255,183,72,.07) 55%, transparent 78%) !important;
    box-shadow:
        inset 0 0 34px rgba(255,105,42,.18),
        0 0 28px rgba(219,139,40,.36) !important;
}

/* 상단 우측의 HOME/JOIN/SITEMAP는 배경에서 제거되었고 클릭 요소도 생성하지 않음 */

@keyframes l2BackgroundBreath {
    0%   { transform: translate3d(var(--bg-x,0px), var(--bg-y,0px),0) scale(1.004); }
    100% { transform: translate3d(calc(var(--bg-x,0px) - 2px), calc(var(--bg-y,0px) - 1px),0) scale(1.012); }
}
@keyframes l2HeroBreath {
    0%,100% { transform: translate3d(0,0,0) scale(1); filter: brightness(1.01) saturate(1.03); }
    50%     { transform: translate3d(-1px,-3px,0) scale(1.008); filter: brightness(1.055) saturate(1.07); }
}
@keyframes l2GlowPulse {
    0%,100% { opacity: .46; transform: scale(.97); }
    50%     { opacity: .92; transform: scale(1.035); }
}
@keyframes l2FogMoveA {
    0% { transform: translateX(-5%) scaleX(1); }
    100% { transform: translateX(8%) scaleX(1.08); }
}
@keyframes l2FogMoveB {
    0% { transform: translateX(9%) scaleX(1.06); }
    100% { transform: translateX(-8%) scaleX(.98); }
}
@keyframes l2ParticleRise {
    0%   { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
    10%  { opacity: var(--p-opacity,.72); }
    82%  { opacity: calc(var(--p-opacity,.72) * .72); }
    100% { transform: translate3d(var(--p-drift,30px), -920px, 0) scale(1.25); opacity: 0; }
}
@keyframes l2ParticleTwinkle {
    0%,100% { filter: brightness(.72); }
    50% { filter: brightness(1.75); }
}

@media (prefers-reduced-motion: reduce) {
    .l2-design-bg, .l2-hero-motion, .l2-castle-glow, .l2-fog, .l2-particle {
        animation: none !important;
    }
}
@media (max-width: 900px) {
    .l2-hero-motion { display: none; }
    .l2-particles { opacity: .58; }
    .l2-fog { opacity: .10; }
}


/* =========================================================
   EMERGENCY STRUCTURE FIX
   - 메인 메뉴 이미지 글자 가림
   - HTML 메뉴 한 세트만 출력
   - 복제 캐릭터 이미지 제거
   - 서브페이지 로그인 배경 노출 제거
   ========================================================= */

/* 메인 상단에 박혀 있던 기존 메뉴 및 HOME/JOIN/SITEMAP를 완전히 가리는 단일 바 */
.l2-stage::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 19.2%;
    right: 0;
    top: 0;
    height: 8.85%;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5,9,15,.985) 0%, rgba(7,12,20,.972) 72%, rgba(7,12,20,.94) 100%);
    border-bottom: 1px solid rgba(171,132,65,.17);
    box-shadow: 0 5px 20px rgba(0,0,0,.22);
}

/* 복제 이미지가 다시 나타나지 않도록 완전 비활성화 */
.l2-hero-motion { display: none !important; }

/* 메뉴를 실제 텍스트 버튼으로 한 번만 출력 */
.l2-click-nav {
    position: absolute;
    z-index: 20;
    left: 22.5%;
    top: 0;
    width: 52.7%;
    height: 8.55%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.l2-click-nav a,
.l2-click-nav a:hover,
.l2-click-nav a:focus,
.l2-click-nav a:active,
.l2-click-nav a:focus-visible {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 100% !important;
    flex: 1 1 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 .35vw;
    color: #dfd2b4 !important;
    text-indent: 0 !important;
    overflow: visible !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none;
    cursor: pointer;
}

.l2-click-nav a span {
    display: block;
    color: #e5d5af;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(11px, 1.04vw, 19px);
    font-weight: 700;
    line-height: 1.05;
    text-shadow: 0 2px 3px #000;
    transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}

.l2-click-nav a small {
    display: block;
    margin-top: .38em;
    color: #9b7c45;
    font-size: .56em;
    font-weight: 600;
    letter-spacing: .04em;
    transition: color .2s ease;
}

.l2-click-nav a::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, #d9a84b, transparent);
    transition: opacity .2s ease;
}

.l2-click-nav a:hover {
    background: linear-gradient(180deg, rgba(210,158,66,.02), rgba(210,158,66,.10)) !important;
}

.l2-click-nav a:hover span {
    color: #fff0bf;
    text-shadow: 0 0 11px rgba(225,170,71,.72), 0 2px 3px #000;
    transform: translateY(-1px);
}

.l2-click-nav a:hover small { color: #d7aa56; }
.l2-click-nav a:hover::after { opacity: 1; }

/* 서브페이지 배너는 로그인 박스가 없는 전용 크롭 이미지만 사용 */
.l2-sub-hero {
    background:
        linear-gradient(90deg, rgba(4,6,10,.90), rgba(4,6,10,.30), rgba(4,6,10,.80)),
        url("../img/sub-hero-clean.jpg") center center / cover no-repeat !important;
}

/* 모바일에서는 메뉴 간격을 좁히고 모션 부하를 낮춤 */
@media (max-width: 1100px) {
    .l2-click-nav { left: 21.5%; width: 55%; }
    .l2-click-nav a span { font-size: clamp(10px, 1.28vw, 15px); }
}


/* =========================================================
   TOP BAR FINAL ALIGNMENT
   기존 배경 메뉴 흔적을 완전히 가리고 새 메뉴를 아래로 정렬
   ========================================================= */

/* 기존 이미지 메뉴와 아래쪽 잔상까지 완전히 덮는 불투명 상단 바 */
.l2-stage::before {
    left: 19.2% !important;
    right: 0 !important;
    top: 0 !important;
    height: 11.9% !important;
    background:
        linear-gradient(
            180deg,
            #050910 0%,
            #070c14 70%,
            #080e17 88%,
            rgba(8,14,23,.985) 100%
        ) !important;
    border-bottom: 1px solid rgba(184,143,70,.22) !important;
    box-shadow:
        0 10px 26px rgba(0,0,0,.38),
        inset 0 -1px 0 rgba(218,171,82,.07) !important;
}

/* 기존 메뉴의 아래쪽 반사/잔상을 한 번 더 부드럽게 차단 */
.l2-stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 19.2%;
    right: 0;
    top: 10.8%;
    height: 2.2%;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(8,14,23,.99) 0%,
        rgba(8,14,23,.93) 48%,
        rgba(8,14,23,.48) 78%,
        rgba(8,14,23,0) 100%
    );
}

/* 새 메뉴를 넓어진 검은 바의 중앙보다 살짝 아래쪽으로 이동 */
.l2-click-nav {
    left: 23.1% !important;
    top: 1.25% !important;
    width: 51.8% !important;
    height: 8.65% !important;
    align-items: center !important;
}

/* 메뉴 글자 간격 및 세로 위치 정돈 */
.l2-click-nav a,
.l2-click-nav a:hover,
.l2-click-nav a:focus,
.l2-click-nav a:active,
.l2-click-nav a:focus-visible {
    height: 100% !important;
    padding-top: .55% !important;
    align-items: center !important;
}

.l2-click-nav a span {
    line-height: 1.08 !important;
}

.l2-click-nav a small {
    margin-top: .42em !important;
}

/* Hover 밑줄은 검은 바 하단이 아니라 메뉴 글자 바로 아래 표시 */
.l2-click-nav a::after {
    bottom: 13% !important;
}

/* 로고 우측과 메뉴바 사이 경계가 튀지 않도록 연결 음영 */
.l2-home-logo::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 100%;
    width: 16%;
    height: 100%;
    background: linear-gradient(90deg, rgba(5,9,16,.18), transparent);
}

/* 해상도 축소 시에도 기존 글자가 비치지 않게 바 높이 유지 */
@media (max-width: 1100px) {
    .l2-stage::before { height: 12.1% !important; }
    .l2-stage::after  { top: 10.9% !important; height: 2.4% !important; }
    .l2-click-nav {
        left: 21.8% !important;
        top: 1.3% !important;
        width: 55.4% !important;
        height: 8.7% !important;
    }
}


/* =========================================================
   FINAL PIXEL ALIGNMENT
   1) 상단 검은 바를 왼쪽 로고 영역 하단선에 맞춤
   2) 좌우 버튼 Hover 영역을 실제 이미지 프레임에 맞춤
   ========================================================= */

/* 상단 바: 로고 영역과 동일한 하단선, 추가 그라데이션 꼬리 제거 */
.l2-stage::before {
    left: 19.20% !important;
    right: 0 !important;
    top: 0 !important;
    height: 11.72% !important;
    background: linear-gradient(
        180deg,
        #050910 0%,
        #070c14 72%,
        #080e17 100%
    ) !important;
    border-bottom: 1px solid rgba(184,143,70,.20) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,.24),
        inset 0 -1px 0 rgba(218,171,82,.06) !important;
}

/* 이전에 추가된 아래쪽 잔상 차단 레이어가 단차를 만들지 않게 제거 */
.l2-stage::after {
    display: none !important;
}

/* 메뉴는 현 위치 유지, 바 안에서 수직 중앙 정렬 */
.l2-click-nav {
    top: 1.20% !important;
    height: 8.75% !important;
}

/* 실제 이미지 프레임 좌표에 맞춘 클릭/Hover 영역 */
.hotspot.start {
    left: 9.912% !important;
    top: 43.194% !important;
    width: 15.039% !important;
    height: 13.687% !important;
}
.hotspot.account {
    left: 9.912% !important;
    top: 58.793% !important;
    width: 15.039% !important;
    height: 6.328% !important;
}
.hotspot.guide {
    left: 9.912% !important;
    top: 65.489% !important;
    width: 15.039% !important;
    height: 6.328% !important;
}
.hotspot.community {
    left: 9.912% !important;
    top: 72.553% !important;
    width: 15.039% !important;
    height: 6.328% !important;
}
.hotspot.itemshop {
    left: 69.482% !important;
    top: 62.472% !important;
    width: 19.043% !important;
    height: 6.917% !important;
}
.hotspot.clan {
    left: 69.482% !important;
    top: 69.978% !important;
    width: 19.043% !important;
    height: 6.917% !important;
}
.hotspot.support {
    left: 69.482% !important;
    top: 77.557% !important;
    width: 19.043% !important;
    height: 6.917% !important;
}

/* 확대/이동 때문에 테두리가 프레임 밖으로 벗어나지 않도록 고정 */
.hotspot:hover,
.hotspot:focus-visible,
.hotspot.start:hover,
.hotspot.start:focus-visible {
    transform: none !important;
}

/* 테두리는 실제 버튼 프레임 안쪽 2px에 정확히 표시 */
.hotspot::after,
.hotspot.start::after {
    inset: 2px !important;
    border-radius: 4px !important;
}

/* Hover는 위치 변화 없이 밝기와 Glow만 적용 */
.hotspot:hover,
.hotspot:focus-visible {
    filter: brightness(1.20) saturate(1.10) !important;
    z-index: 9;
}
.hotspot.start:hover,
.hotspot.start:focus-visible {
    filter: brightness(1.30) saturate(1.18) !important;
}

/* 클릭 시에도 좌표가 흔들리지 않고 밝기만 낮아짐 */
.hotspot:active,
.hotspot.start:active {
    transform: none !important;
    filter: brightness(.94) !important;
}

@media (max-width: 1100px) {
    .l2-stage::before {
        height: 11.72% !important;
    }
    .l2-stage::after {
        display: none !important;
    }
    .l2-click-nav {
        top: 1.20% !important;
        height: 8.75% !important;
    }
}


/* =========================================================
   COUPON + HOVER FINAL FIX
   - 메인 쿠폰 실제 지갑 연동
   - Hover 영역을 원본 버튼 프레임 좌표로 복구
   ========================================================= */

.hotspot.start {
    left: 9.766% !important;
    top: 43.046% !important;
    width: 15.137% !important;
    height: 14.496% !important;
}
.hotspot.account {
    left: 9.766% !important;
    top: 58.499% !important;
    width: 15.137% !important;
    height: 6.990% !important;
}
.hotspot.guide {
    left: 9.766% !important;
    top: 66.225% !important;
    width: 15.137% !important;
    height: 6.990% !important;
}
.hotspot.community {
    left: 9.766% !important;
    top: 73.584% !important;
    width: 15.137% !important;
    height: 6.990% !important;
}
.hotspot.itemshop {
    left: 68.604% !important;
    top: 62.914% !important;
    width: 20.508% !important;
    height: 6.990% !important;
}
.hotspot.clan {
    left: 68.604% !important;
    top: 70.272% !important;
    width: 20.508% !important;
    height: 6.990% !important;
}
.hotspot.support {
    left: 68.604% !important;
    top: 77.631% !important;
    width: 20.508% !important;
    height: 6.623% !important;
}

/* 시각 테두리는 클릭영역 안쪽에만 표시 */
.hotspot::after,
.hotspot.start::after {
    content: "";
    position: absolute;
    inset: 1px !important;
    border-radius: 3px !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, filter .18s ease;
}

/* 좌표 흔들림 없이 밝기/Glow만 적용 */
.hotspot,
.hotspot:hover,
.hotspot:focus-visible,
.hotspot:active,
.hotspot.start:hover,
.hotspot.start:focus-visible,
.hotspot.start:active {
    transform: none !important;
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
    opacity: 1 !important;
}

.hotspot:hover,
.hotspot:focus-visible {
    filter: brightness(1.17) saturate(1.08) !important;
}

.hotspot.start:hover,
.hotspot.start:focus-visible {
    filter: brightness(1.26) saturate(1.14) !important;
}

.hotspot:active,
.hotspot.start:active {
    filter: brightness(.93) !important;
}


/* =========================================================
   L2 SHINHWA CUSTOMER SUPPORT
   ========================================================= */
.l2-support-page{padding:34px 26px 60px;color:#d7dde7}
.l2-support-intro{padding:35px 40px;border:1px solid rgba(190,145,65,.35);background:linear-gradient(135deg,rgba(13,20,31,.96),rgba(6,10,17,.96));box-shadow:0 18px 50px rgba(0,0,0,.25)}
.l2-support-intro .eyebrow,.l2-support-title>p,.l2-support-info>p{margin:0 0 8px;color:#d4a63d;letter-spacing:.25em;font-size:12px}
.l2-support-intro h2{margin:0;color:#fff;font-size:36px;line-height:1.2}
.l2-support-intro>p:last-child{margin:13px 0 0;color:#9ba8ba;font-size:15px}
.l2-support-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 34px}
.l2-support-quick-card{position:relative;display:flex;align-items:center;gap:15px;padding:18px 20px;border:1px solid #263245;background:#0b121d;color:#fff;transition:.2s}
.l2-support-quick-card:hover{border-color:#b88a34;background:#111b29;transform:translateY(-2px)}
.l2-support-quick-card .quick-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #a97d2d;color:#edc568;font:700 18px Georgia,serif}
.l2-support-quick-card strong{display:block;font-size:16px}
.l2-support-quick-card small{display:block;margin-top:4px;color:#8794a8}
.l2-support-section{margin-top:34px;padding:34px 36px;border:1px solid rgba(190,145,65,.28);background:rgba(6,11,18,.88)}
.l2-support-title{margin-bottom:24px}
.l2-support-title.centered{text-align:center}
.l2-support-title h3{margin:0;color:#fff;font-size:28px}
.l2-support-title span{display:block;margin-top:8px;color:#8592a5}
.l2-faq-list{border-top:1px solid #283241}
.l2-faq-list details{border-bottom:1px solid #283241;background:rgba(13,20,31,.55)}
.l2-faq-list details[open]{background:#101927}
.l2-faq-list summary{position:relative;display:flex;align-items:center;gap:14px;padding:19px 52px 19px 18px;color:#e8edf4;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.l2-faq-list summary::-webkit-details-marker{display:none}
.l2-faq-list summary span{color:#d9aa43;font:bold 20px Georgia,serif}
.l2-faq-list summary:after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#d2a13e;font-size:24px;font-weight:300}
.l2-faq-list details[open] summary:after{content:"−"}
.l2-faq-list .answer{display:flex;gap:15px;padding:0 48px 21px 51px;color:#aeb8c7;line-height:1.75}
.l2-faq-list .answer b{color:#7fa8d9;font:italic 20px Georgia,serif}
.l2-faq-list .answer p{margin:0}
.l2-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.l2-contact-card{position:relative;display:grid;grid-template-columns:92px 1fr;gap:22px;align-items:center;min-height:180px;padding:26px 28px;border:1px solid #2b3748;background:linear-gradient(135deg,#101a28,#080e17);overflow:hidden;transition:.22s}
.l2-contact-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#be8f34}
.l2-contact-card:hover{border-color:#c99a3f;transform:translateY(-3px);box-shadow:0 14px 35px rgba(0,0,0,.3)}
.l2-contact-card .brand-icon{grid-row:1/3;display:block;width:88px;height:88px}
.l2-contact-card .brand-icon svg{width:100%;height:100%}
.l2-contact-card.telegram .brand-icon svg circle{fill:#31a8df}
.l2-contact-card.telegram .brand-icon svg path{fill:#fff}
.l2-contact-card.kakao .brand-icon svg rect{fill:#fee500}
.l2-contact-card.kakao .brand-icon svg path{fill:#3b1e1e}
.l2-contact-card .contact-copy small{display:block;color:#c99a3f;letter-spacing:.13em;font-size:11px}
.l2-contact-card .contact-copy strong{display:block;margin-top:5px;color:#fff;font-size:22px}
.l2-contact-card .contact-copy em{display:block;margin-top:8px;color:#919db0;font-style:normal;line-height:1.5}
.l2-contact-card .contact-button{grid-column:2;justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-width:180px;height:42px;padding:0 18px;border:1px solid #a77b2b;background:linear-gradient(#d4aa4b,#a97825);color:#12100b;font-weight:700}
.l2-contact-card:hover .contact-button{filter:brightness(1.12)}
.l2-support-bottom{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-top:20px}
.l2-support-info,.l2-support-action{padding:28px 32px;border:1px solid #283447;background:#0c1420}
.l2-support-info h3{margin:0 0 15px;color:#fff;font-size:22px}
.l2-support-info ul{margin:0;padding:0;list-style:none}
.l2-support-info li{position:relative;padding:7px 0 7px 20px;color:#aab4c4}
.l2-support-info li:before{content:"◆";position:absolute;left:0;top:9px;color:#b98935;font-size:9px}
.l2-support-action{display:flex;flex-direction:column;justify-content:center;text-align:center}
.l2-support-action p{margin:0;color:#8d9aae}
.l2-support-action strong{margin:8px 0 18px;color:#fff;font-size:18px}
.l2-support-action a{display:inline-flex;align-items:center;justify-content:center;height:48px;border:1px solid #b48734;background:linear-gradient(#d4aa4b,#9f6f20);color:#14110a;font-weight:700}
@media(max-width:900px){
 .l2-support-page{padding:22px 12px 40px}
 .l2-support-intro{padding:28px 22px}
 .l2-support-intro h2{font-size:29px}
 .l2-support-quick,.l2-contact-grid,.l2-support-bottom{grid-template-columns:1fr}
 .l2-support-section{padding:26px 18px}
}
@media(max-width:560px){
 .l2-support-quick{grid-template-columns:1fr}
 .l2-contact-card{grid-template-columns:70px 1fr;padding:22px 18px;gap:15px}
 .l2-contact-card .brand-icon{width:68px;height:68px}
 .l2-contact-card .contact-copy strong{font-size:19px}
 .l2-contact-card .contact-button{grid-column:1/3;width:100%}
 .l2-faq-list summary{padding:17px 42px 17px 12px;font-size:14px}
 .l2-faq-list .answer{padding:0 16px 18px 34px}
}

/* =========================================================
   L2 SHINHWA 게시판 상세보기 가독성 개선 (2026-08-04)
   작성자/IP/댓글/조회수/작성일 및 댓글 영역 공통 적용
   ========================================================= */
.l2-sub-frame #bo_v_info {
    padding: 22px 27px;
    color: #e2d5bb;
}

.l2-sub-frame #bo_v_info .profile_info {
    margin: 0;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
}

.l2-sub-frame #bo_v_info .profile_info .pf_img {
    margin-right: 16px;
}

.l2-sub-frame #bo_v_info .profile_info .pf_img img {
    width: 54px;
    height: 54px;
    border: 2px solid rgba(211, 166, 75, .55);
    box-shadow: 0 0 12px rgba(211, 166, 75, .12);
}

.l2-sub-frame #bo_v_info .profile_info .profile_info_ct {
    padding: 0;
    line-height: 1.65;
    font-size: 17px;
    color: #e0d7c7;
}

/* 작성자명과 IP */
.l2-sub-frame #bo_v_info .profile_info_ct > strong:first-of-type,
.l2-sub-frame #bo_v_info .sv_member,
.l2-sub-frame #bo_v_info .sv_guest,
.l2-sub-frame #bo_v_info .member,
.l2-sub-frame #bo_v_info .guest {
    color: #f2c86d !important;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .1px;
    text-shadow: 0 0 8px rgba(218, 167, 63, .12);
}

/* 댓글·조회·작성일 */
.l2-sub-frame #bo_v_info .profile_info_ct strong {
    margin-right: 15px;
    color: #d9c79f;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.l2-sub-frame #bo_v_info .profile_info_ct strong a {
    color: #d9c79f;
}

.l2-sub-frame #bo_v_info .profile_info_ct strong a:hover {
    color: #ffd982;
}

.l2-sub-frame #bo_v_info .profile_info_ct i {
    margin-right: 4px;
    color: #d3a64b;
    font-size: 16px;
}

.l2-sub-frame #bo_v_info .if_date {
    color: #cfc6b5 !important;
    font-size: 16px !important;
}

/* 게시글 상단 동작 버튼과 정보가 겹치지 않도록 */
.l2-sub-frame #bo_v_info #bo_v_top {
    min-height: 58px;
    display: flex;
    align-items: center;
}

/* 댓글 제목 막대 */
.l2-sub-frame #bo_vc h2,
.l2-sub-frame #bo_vc .cmt_btn {
    color: #f0c76f !important;
    background: linear-gradient(180deg, #15171c, #0d0e12) !important;
    border-top: 1px solid rgba(211, 166, 75, .42) !important;
    border-bottom: 1px solid rgba(211, 166, 75, .28) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.l2-sub-frame #bo_vc .cmt_btn span,
.l2-sub-frame #bo_vc h2 span {
    color: #e9b84f !important;
}

/* 댓글 본문 작성자·날짜도 어두운 배경에서 보이도록 */
.l2-sub-frame #bo_vc article header,
.l2-sub-frame #bo_vc article header a,
.l2-sub-frame #bo_vc article .member,
.l2-sub-frame #bo_vc article .guest,
.l2-sub-frame #bo_vc article .sv_member,
.l2-sub-frame #bo_vc article .sv_guest {
    color: #e7c779 !important;
    font-size: 15px;
}

.l2-sub-frame #bo_vc article .bo_vc_hdinfo,
.l2-sub-frame #bo_vc article .bo_vc_act {
    color: #bdb6aa !important;
}

/* 모바일/좁은 화면 */
@media (max-width: 760px) {
    .l2-sub-frame #bo_v_info {
        padding: 18px 16px;
    }

    .l2-sub-frame #bo_v_info .profile_info {
        display: flex;
        float: none;
        width: 100%;
    }

    .l2-sub-frame #bo_v_info .profile_info .profile_info_ct {
        font-size: 15px;
    }

    .l2-sub-frame #bo_v_info .profile_info_ct > strong:first-of-type,
    .l2-sub-frame #bo_v_info .sv_member,
    .l2-sub-frame #bo_v_info .sv_guest,
    .l2-sub-frame #bo_v_info .member,
    .l2-sub-frame #bo_v_info .guest {
        font-size: 17px;
    }

    .l2-sub-frame #bo_v_info .profile_info_ct strong,
    .l2-sub-frame #bo_v_info .if_date {
        font-size: 14px !important;
        margin-right: 9px;
    }
}


/* L2 SHINHWA SERVER GUIDE PAGE */
.sh-guide{color:#d7dbe3;font-family:"Noto Sans KR",sans-serif}.sh-guide *{box-sizing:border-box}.sh-guide-intro{text-align:center;padding:38px 22px 46px;border-bottom:1px solid rgba(207,164,75,.28);background:radial-gradient(circle at 50% 0,rgba(207,164,75,.12),transparent 58%)}.sh-guide-kicker{margin:0 0 14px;color:#d2a64c;font-size:13px;letter-spacing:5px}.sh-guide-intro h2{margin:0;color:#f3e2b2;font-family:serif;font-size:36px;line-height:1.35}.sh-guide-intro>p:not(.sh-guide-kicker){max-width:760px;margin:16px auto 0;color:#aeb7c6;font-size:16px;line-height:1.8}.sh-guide-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}.sh-guide-actions a,.sh-guide-bottom a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border:1px solid #8a6220;color:#f3d58e;background:linear-gradient(180deg,#4b3514,#231706);font-weight:700;transition:.25s}.sh-guide-actions a:hover,.sh-guide-bottom a:hover{border-color:#e0b65e;box-shadow:0 0 18px rgba(214,164,62,.24);transform:translateY(-2px)}.sh-guide-poster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:44px 28px}.sh-guide-poster{position:relative;margin:0;overflow:hidden;border:1px solid rgba(207,164,75,.45);background:#05070b;box-shadow:0 16px 45px rgba(0,0,0,.42)}.sh-guide-poster img{display:block;width:100%;height:660px;object-fit:cover;object-position:top;transition:transform .55s,filter .55s}.sh-guide-poster:hover img{transform:scale(1.025);filter:brightness(1.08)}.sh-guide-poster figcaption{position:absolute;left:0;right:0;bottom:0;padding:54px 26px 22px;background:linear-gradient(transparent,rgba(0,0,0,.96));text-align:center}.sh-guide-poster strong{display:block;color:#f0cc78;font-family:serif;font-size:28px}.sh-guide-poster span{color:#c8c8c8}.sh-guide-poster-war{border-color:rgba(190,54,31,.55)}.sh-guide-poster-war strong{color:#ef694e}.sh-guide-section,.sh-guide-faq{margin:0 28px 38px;padding:32px;border:1px solid rgba(207,164,75,.28);background:linear-gradient(145deg,rgba(14,18,27,.98),rgba(5,7,11,.98));box-shadow:inset 0 0 45px rgba(0,0,0,.32)}.sh-guide-heading{display:flex;align-items:center;gap:18px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid rgba(207,164,75,.25)}.sh-guide-heading>span{font-family:serif;font-size:42px;color:rgba(207,164,75,.58)}.sh-guide-heading p{margin:0 0 4px;color:#b88b38;font-size:11px;letter-spacing:4px}.sh-guide-heading h3{margin:0;color:#f1dfb0;font-size:28px}.sh-guide-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.sh-guide-card{min-height:196px;padding:24px;border:1px solid rgba(207,164,75,.2);background:linear-gradient(180deg,rgba(27,31,40,.8),rgba(8,10,15,.86));transition:.25s}.sh-guide-card:hover{border-color:#b5842d;transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.35)}.sh-guide-card i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:18px;border:1px solid #806020;color:#e1b85d;font-style:normal;font-size:22px;background:rgba(207,164,75,.08)}.sh-guide-card h4{margin:0 0 10px;color:#edcf88;font-size:20px}.sh-guide-card p{margin:0;color:#aeb5c0;line-height:1.75}.sh-guide-section-war{border-color:rgba(167,52,35,.35)}.sh-guide-section-war .sh-guide-heading>span,.sh-guide-section-war .sh-guide-heading p{color:#b84d39}.sh-guide-section-war .sh-guide-card{border-color:rgba(180,59,38,.22)}.sh-guide-section-war .sh-guide-card i{border-color:#8f392a;color:#ed654d;background:rgba(195,60,37,.08)}.sh-guide-section-war .sh-guide-card h4{color:#ee735c}.sh-guide-steps{display:grid;gap:12px}.sh-guide-steps article{display:flex;align-items:center;gap:20px;padding:20px;border:1px solid rgba(207,164,75,.18);background:rgba(0,0,0,.2)}.sh-guide-steps b{display:flex;align-items:center;justify-content:center;flex:0 0 48px;height:48px;border-radius:50%;background:#33230d;border:1px solid #a77a27;color:#f1ca72;font-size:20px}.sh-guide-steps h4{margin:0 0 5px;color:#ead5a1;font-size:18px}.sh-guide-steps p{margin:0;color:#aab1bd;line-height:1.65}.sh-guide-faq details{border-top:1px solid rgba(207,164,75,.18)}.sh-guide-faq details:last-child{border-bottom:1px solid rgba(207,164,75,.18)}.sh-guide-faq summary{position:relative;padding:20px 46px 20px 10px;color:#e6d2a0;font-size:17px;font-weight:700;cursor:pointer;list-style:none}.sh-guide-faq summary::-webkit-details-marker{display:none}.sh-guide-faq summary:after{content:'+';position:absolute;right:14px;top:15px;color:#d5a64b;font-size:25px}.sh-guide-faq details[open] summary:after{content:'−'}.sh-guide-faq details p{margin:0;padding:0 18px 20px;color:#aeb5c0;line-height:1.8}.sh-guide-bottom{margin:0 28px 8px;padding:36px 28px;text-align:center;border:1px solid rgba(207,164,75,.4);background:radial-gradient(circle at center,rgba(207,164,75,.12),rgba(5,6,9,.96) 65%)}.sh-guide-bottom p{margin:0 0 22px;color:#f0d48d;font-family:serif;font-size:28px}.sh-guide-bottom div{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:1000px){.sh-guide-poster img{height:520px}.sh-guide-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.sh-guide-intro h2{font-size:28px}.sh-guide-poster-grid{grid-template-columns:1fr;padding:24px 12px}.sh-guide-poster img{height:auto}.sh-guide-section,.sh-guide-faq{margin:0 12px 24px;padding:22px 16px}.sh-guide-card-grid{grid-template-columns:1fr}.sh-guide-heading h3{font-size:23px}.sh-guide-heading>span{font-size:34px}.sh-guide-bottom{margin:0 12px}.sh-guide-bottom p{font-size:23px}}


/* L2 SHINHWA SERVER GUIDE - 운영정보 배율 섹션 */
.sh-guide-rates{position:relative;overflow:hidden;border-color:rgba(207,164,75,.46);background:radial-gradient(circle at 50% 0,rgba(207,164,75,.13),transparent 42%),linear-gradient(145deg,rgba(15,20,30,.99),rgba(5,7,11,.99))}.sh-guide-rates:before,.sh-guide-rates:after{content:"";position:absolute;top:18px;width:13px;height:13px;background:#c99a3e;transform:rotate(45deg);box-shadow:0 0 18px rgba(207,164,75,.35)}.sh-guide-rates:before{left:20px}.sh-guide-rates:after{right:20px}.sh-guide-rates-intro{margin:-6px 0 24px;color:#aeb7c6;font-size:15px;line-height:1.75;text-align:center}.sh-guide-rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sh-guide-rate-card{min-height:142px;padding:22px 18px;border:1px solid rgba(207,164,75,.24);background:linear-gradient(180deg,rgba(28,34,45,.82),rgba(8,10,15,.9));text-align:center;transition:.25s}.sh-guide-rate-card:hover{transform:translateY(-4px);border-color:#c39139;box-shadow:0 14px 30px rgba(0,0,0,.34)}.sh-guide-rate-card span{display:block;margin-bottom:10px;color:#8e98a8;font-size:10px;font-weight:700;letter-spacing:2px}.sh-guide-rate-card h4{margin:0 0 10px;color:#d8c28d;font-size:16px}.sh-guide-rate-card strong{display:block;color:#f1c969;font-family:serif;font-size:34px;line-height:1}.sh-guide-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.sh-guide-policy{display:flex;align-items:center;gap:20px;min-height:148px;padding:24px;border:1px solid rgba(207,164,75,.3);background:linear-gradient(145deg,rgba(45,31,10,.38),rgba(8,10,15,.95))}.sh-guide-policy-icon{display:flex;align-items:center;justify-content:center;flex:0 0 76px;height:76px;border:1px solid #9f762c;color:#f1c969;background:rgba(207,164,75,.08);font-family:serif;font-size:24px;font-weight:700}.sh-guide-policy p{margin:0 0 5px;color:#b88b38;font-size:10px;letter-spacing:3px}.sh-guide-policy h4{margin:0 0 8px;color:#f0d79a;font-size:22px}.sh-guide-policy span{display:block;color:#afb7c4;font-size:14px;line-height:1.65}.sh-guide-policy-maintenance{border-color:rgba(87,139,184,.35);background:linear-gradient(145deg,rgba(15,43,65,.4),rgba(8,10,15,.95))}.sh-guide-policy-maintenance .sh-guide-policy-icon{border-color:#527da0;color:#89b8dc;background:rgba(80,133,177,.09)}.sh-guide-policy-maintenance p{color:#6fa5cf}.sh-guide-policy-maintenance h4{color:#c6e1f6}
@media(max-width:1000px){.sh-guide-rate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.sh-guide-rate-grid,.sh-guide-policy-grid{grid-template-columns:1fr}.sh-guide-rate-card{min-height:125px}.sh-guide-policy{align-items:flex-start;padding:20px 16px}.sh-guide-policy-icon{flex-basis:64px;height:64px;font-size:19px}.sh-guide-policy h4{font-size:19px}}

/* =========================================================
   메인 기능형 패널: 공지사항 / PvP·PK / 서버 상태 / 슬라이드
   ========================================================= */
.l2-main-slider,
.l2-main-news,
.l2-main-ranking,
.l2-main-status {
    position: absolute;
    z-index: 8;
    box-sizing: border-box;
}

.l2-main-slider {
    left: 27.85%;
    top: 43.95%;
    width: 40.65%;
    height: 15.02%;
    overflow: hidden;
}
.l2-slider-track,
.l2-slide { position: absolute; inset: 0; }
.l2-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility .55s ease;
}
.l2-slide.is-active { opacity: 1; visibility: visible; }
.l2-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.88) contrast(1.04);
}
.l2-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,7,10,.88) 0%, rgba(5,7,10,.58) 42%, rgba(5,7,10,.10) 74%, rgba(5,7,10,.32) 100%);
    pointer-events: none;
}
.l2-slide-copy {
    position: absolute;
    z-index: 2;
    left: 8.5%;
    top: 18%;
    width: 55%;
    color: #eee5d4;
    text-shadow: 0 2px 6px #000;
}
.l2-slide-copy small {
    display: block;
    margin-bottom: 1.2%;
    color: #c89a45;
    font: 700 clamp(8px,.62vw,12px) Georgia,serif;
    letter-spacing: .19em;
}
.l2-slide-copy strong {
    display: block;
    color: #e4d5b6;
    font-size: clamp(15px,1.5vw,29px);
    line-height: 1.2;
}
.l2-slide-copy p {
    margin: 2.4% 0 4%;
    color: #aaa295;
    font-size: clamp(8px,.72vw,13px);
}
.l2-slide-copy a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: clamp(24px,2.1vw,36px);
    padding: 0 14px;
    border: 1px solid rgba(184,137,59,.7);
    background: rgba(7,8,10,.62);
    color: #d8c49e;
    text-decoration: none;
    font-size: clamp(8px,.68vw,12px);
}
.l2-slide-copy a:hover { background: rgba(151,105,39,.42); color:#fff; }
.l2-slide-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    width: 6%;
    height: 42%;
    border: 0;
    background: transparent;
    color: rgba(205,164,88,.82);
    font: 300 clamp(28px,3.1vw,58px)/1 Georgia,serif;
    cursor: pointer;
    text-shadow: 0 2px 5px #000;
}
.l2-slide-arrow:hover { color:#f0ca7d; }
.l2-slide-arrow.is-prev { left: 0; }
.l2-slide-arrow.is-next { right: 0; }
.l2-slide-dots {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 5.8%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(5px,.55vw,10px);
}
.l2-slide-dots button {
    width: clamp(7px,.68vw,12px);
    height: clamp(7px,.68vw,12px);
    padding: 0;
    border: 1px solid rgba(219,199,156,.55);
    border-radius: 50%;
    background: rgba(174,168,154,.78);
    cursor: pointer;
}
.l2-slide-dots button.is-active { background:#c79845; border-color:#e7ca8e; box-shadow:0 0 9px rgba(215,165,76,.55); }

.l2-main-news {
    left: 28.35%;
    top: 61.95%;
    width: 23.30%;
    height: 21.35%;
    padding: 1.25% 1.45% 1.15%;
    color: #bdb5a7;
}
.l2-main-news > header,
.l2-main-ranking > header {
    height: 18%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(125,95,49,.25);
}
.l2-main-news .is-title,
.l2-main-ranking header strong {
    color: #d7ae62;
    font: 700 clamp(11px,.95vw,18px) Georgia,"Malgun Gothic",serif;
    text-decoration: none;
}
.l2-main-news .is-more,
.l2-main-ranking header a {
    color: #8f836f;
    font-size: clamp(7px,.58vw,11px);
    text-decoration: none;
}
.l2-main-news .l2-news-head { display:none; }
.l2-main-news .l2-news-box,
.l2-main-news .l2-news-box ul { margin:0; padding:0; }
.l2-main-news .l2-news-box ul { list-style:none; }
.l2-main-news .l2-news-box li { border-bottom: 1px solid rgba(255,255,255,.035); }
.l2-main-news .l2-news-box li:last-child { border-bottom:0; }
.l2-main-news .l2-news-box li a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height: clamp(26px,2.28vw,41px);
    color:#b7afa1;
    text-decoration:none;
    font-size:clamp(8px,.71vw,13px);
}
.l2-main-news .l2-news-box li a::before {
    content:'공지';
    flex:0 0 auto;
    padding:2px 6px;
    color:#bd9149;
    border:1px solid rgba(173,126,52,.4);
    font-size:clamp(6px,.5vw,9px);
}
.l2-main-news .l2-news-box li a span {
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.l2-main-news .l2-news-box time { flex:0 0 auto; color:#766e63; font-size:clamp(7px,.58vw,11px); }
.l2-main-news .l2-news-box li a:hover span { color:#e0c182; }

.l2-main-ranking {
    left: 52.55%;
    top: 61.95%;
    width: 15.65%;
    height: 21.35%;
    padding: 1.25% 1.2% 1.1%;
}
.l2-rank-tabs {
    height: 17%;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-bottom:1px solid rgba(128,96,48,.26);
}
.l2-rank-tabs button {
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:#756d63;
    font:700 clamp(8px,.7vw,13px) Georgia,serif;
    cursor:pointer;
}
.l2-rank-tabs button.is-active { color:#d9ae60; border-bottom-color:#b48338; }
.l2-rank-list {
    display:none;
    margin:0;
    padding:2.2% 0 0;
    list-style:none;
}
.l2-rank-list.is-active { display:block; }
.l2-rank-list li {
    display:grid;
    grid-template-columns:12% 1fr auto;
    align-items:center;
    min-height:clamp(22px,1.95vw,35px);
    color:#aaa194;
    font-size:clamp(8px,.66vw,12px);
}
.l2-rank-list li b { color:#d3a04a; font:700 clamp(10px,.86vw,16px) Georgia,serif; }
.l2-rank-list li em { color:#c5a76f; font-style:normal; }
.l2-rank-list li.is-empty { grid-template-columns:1fr; padding-top:12%; text-align:center; color:#746d63; }

.l2-main-status {
    left: 69.58%;
    top: 44.50%;
    width: 19.30%;
    height: 16.55%;
    padding: 1.05% 1.35% 1.2%;
}
.l2-main-status header {
    height:31%;
    display:flex;
    align-items:center;
    color:#d1a85e;
    font:700 clamp(10px,.9vw,17px) Georgia,serif;
    border-bottom:1px solid rgba(136,103,49,.26);
}
.l2-status-list { padding-top:3.2%; }
.l2-status-row {
    display:grid;
    grid-template-columns:1fr auto 10px;
    align-items:center;
    gap:8px;
    min-height:clamp(34px,3.1vw,54px);
    border-bottom:1px solid rgba(255,255,255,.055);
    color:#c5beb2;
    font-size:clamp(9px,.75vw,14px);
}
.l2-status-row:last-child { border-bottom:0; }
.l2-status-row strong { font-size:clamp(8px,.66vw,12px); }
.l2-status-row i {
    width:clamp(6px,.58vw,10px);
    aspect-ratio:1;
    border-radius:50%;
}
.l2-status-row.is-online strong { color:#72b85b; }
.l2-status-row.is-online i { background:#78d05d; box-shadow:0 0 10px rgba(105,210,80,.8); }
.l2-status-row.is-offline strong { color:#9b665f; }
.l2-status-row.is-offline i { background:#8e514b; box-shadow:0 0 8px rgba(150,65,58,.5); }

/* 기존 통이미지 위의 중앙 프로모션 투명 링크는 실제 슬라이더 조작을 방해하므로 제거 */
.hotspot.promo { display:none !important; }