/* =============================================================================
   기존 루리판 시스템 UI 디자인 — Steam 전연령 데이터 연결판
   ============================================================================= */

:root {
    --legacy-modal-bg-top: rgba(27, 34, 45, 0.99);
    --legacy-modal-bg-bottom: rgba(10, 15, 23, 0.99);
    --legacy-card: rgba(29, 36, 47, 0.9);
    --legacy-card-hover: rgba(40, 51, 65, 0.96);
    --legacy-border: rgba(180, 210, 239, 0.2);
    --legacy-border-strong: rgba(109, 184, 247, 0.55);
    --legacy-blue: #67b7ff;
    --legacy-pink: #ff82b4;
    --legacy-orange: #ffb45d;
    --legacy-red: #ff6978;
    --legacy-green: #77d1a1;
    --legacy-text: rgba(255, 255, 255, 0.95);
    --legacy-subtext: rgba(207, 219, 232, 0.74);
}

/* 우측 공용 메뉴 */

#system-menu {
    top: 28px;
    right: 32px;
    gap: 0;
    padding: 7px 9px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(29, 39, 51, 0.96),
            rgba(12, 20, 30, 0.96)
        );
    border: 1px solid rgba(188, 218, 239, 0.28);
    border-radius: 13px;
    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#system-menu button {
    position: relative;
    min-height: 39px;
    padding: 0 15px;
    color: rgba(236, 246, 252, 0.9);
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

#system-menu button + button::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 1px;
    background: rgba(211, 229, 240, 0.12);
}

#system-menu button:hover {
    color: #fff;
    background: rgba(103, 183, 255, 0.16);
}

/* 공용 시스템 모달 */

#modal-layer {
    background: rgba(2, 7, 12, 0.76);
    backdrop-filter: blur(9px);
}

#modal-content {
    color: var(--legacy-text);
    background:
        radial-gradient(
            circle at 84% 8%,
            rgba(103, 183, 255, 0.11),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--legacy-modal-bg-top),
            var(--legacy-modal-bg-bottom)
        );
    border: 1px solid var(--legacy-border-strong);
    box-shadow:
        0 34px 86px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--legacy-blue),
            var(--legacy-pink),
            transparent
        );
    opacity: 0.82;
}

#modal-title {
    color: #f7fbff;
    border-bottom-color: rgba(155, 199, 225, 0.22);
    letter-spacing: 0.02em;
}

#modal-body {
    color: var(--legacy-text);
}

#modal-body::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--legacy-blue),
            rgba(103, 183, 255, 0.3)
        );
}

.modal-x-btn {
    color: rgba(231, 241, 248, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(185, 216, 233, 0.22);
}

.modal-x-btn:hover {
    color: #fff;
    background: rgba(255, 105, 120, 0.3);
    border-color: rgba(255, 133, 145, 0.62);
}

/* 상태창 */

#modal-content.status-wide {
    width: min(1420px, calc(100vw - 70px));
    height: min(900px, calc(100vh - 70px));
    padding: 38px 42px 40px;
}

#modal-content.status-wide #modal-body {
    height: calc(100% - 83px);
    max-height: none;
    padding: 0;
    overflow: hidden;
}

.status-modal-layout {
    display: grid;
    grid-template-columns: 365px minmax(0, 1fr);
    gap: 24px;
    height: 100%;
    min-height: 0;
}

.status-profile-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(121, 198, 239, 0.17),
            transparent 47%
        ),
        linear-gradient(
            160deg,
            rgba(45, 60, 75, 0.94),
            rgba(15, 25, 36, 0.96)
        );
    border: 1px solid rgba(160, 202, 225, 0.25);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 32px rgba(0, 0, 0, 0.3);
}

.status-profile-panel::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(220, 237, 247, 0.08);
    border-radius: 13px;
    pointer-events: none;
}

.status-profile-kicker {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin: 20px 22px 0;
    padding: 6px 12px;
    color: #d9effb;
    background: rgba(95, 173, 216, 0.16);
    border: 1px solid rgba(142, 207, 241, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.status-portrait-zone {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 5px 18px 0;
    overflow: hidden;
}

.status-portrait-glow {
    position: absolute;
    top: 16%;
    right: 7%;
    bottom: 0;
    left: 7%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(124, 204, 244, 0.2),
            transparent 67%
        );
    filter: blur(10px);
}

.status-portrait-zone img {
    position: absolute;
    right: 0;
    bottom: -110px;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% + 130px);
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.3));
}

.status-profile-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 18px 18px;
    padding: 15px 17px;
    background: rgba(7, 15, 23, 0.78);
    border: 1px solid rgba(169, 207, 228, 0.17);
    border-radius: 13px;
}

.status-profile-footer > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-profile-footer strong {
    color: #fff;
    font-size: 21px;
}

.status-profile-footer span {
    color: var(--legacy-subtext);
    font-size: 12px;
}

.status-profile-footer em {
    padding: 6px 10px;
    color: #ffd8e6;
    background: rgba(255, 130, 180, 0.13);
    border: 1px solid rgba(255, 145, 188, 0.24);
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.status-details-zone {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 7px;
}

.status-box-card {
    padding: 17px 19px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(14, 24, 36, 0.72)
        );
    border: 1px solid rgba(179, 212, 230, 0.16);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.status-box-card h3 {
    margin: 0 0 12px;
    color: #bce7fb;
    font-size: 17px;
}

.status-box-card p {
    margin: 4px 0 0;
    color: rgba(234, 242, 247, 0.83);
    font-size: 14px;
    line-height: 1.55;
}

.dashboard-stat-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.db-stat-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--legacy-blue);
    border-radius: 11px;
}

.db-stat-badge.love_b {
    border-left-color: var(--legacy-pink);
}

.db-stat-badge.anger_b {
    border-left-color: var(--legacy-red);
}

.db-stat-name {
    color: #eef8fd;
    font-size: 15px;
    font-weight: 900;
}

.db-stat-value {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.db-stat-num {
    color: #fff;
    font-size: 25px;
    font-variant-numeric: tabular-nums;
}

.db-stat-title {
    color: var(--legacy-subtext);
    font-size: 12px;
}

.dashboard-dev-flex {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.db-dev-badge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 12px 13px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(166, 205, 226, 0.13);
    border-radius: 10px;
}

.db-dev-icon {
    font-size: 20px;
}

.db-dev-name {
    overflow: hidden;
    color: #dcebf3;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-dev-val {
    color: #fff;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.status-lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

/* 드레스룸 */

#modal-content.wardrobe-modal {
    width: min(1440px, calc(100vw - 70px));
    height: min(900px, calc(100vh - 70px));
    padding: 38px 42px 40px;
}

#modal-content.wardrobe-modal #modal-body {
    height: calc(100% - 83px);
    max-height: none;
    padding: 0;
    overflow: hidden;
}

.wardrobe-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 22px;
    height: 100%;
    min-height: 0;
}

.wardrobe-preview-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255, 130, 180, 0.12),
            transparent 45%
        ),
        linear-gradient(
            155deg,
            rgba(50, 55, 70, 0.95),
            rgba(16, 24, 35, 0.98)
        );
    border: 1px solid rgba(212, 183, 214, 0.22);
    border-radius: 18px;
}

.wardrobe-preview-label {
    align-self: flex-start;
    padding: 6px 11px;
    color: #ffd9e8;
    background: rgba(255, 130, 180, 0.12);
    border: 1px solid rgba(255, 151, 191, 0.2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.wardrobe-preview-image {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 8px 0 12px;
    overflow: hidden;
    background: rgba(5, 10, 16, 0.2);
    border-radius: 13px;
}

.wardrobe-preview-fallback,
.wardrobe-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.12);
    font-size: 50px;
}

.wardrobe-preview-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.wardrobe-current-info,
.wardrobe-owned-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(4, 12, 20, 0.46);
    border: 1px solid rgba(178, 208, 226, 0.12);
}

.wardrobe-current-info {
    border-radius: 10px 10px 0 0;
}

.wardrobe-owned-count {
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.wardrobe-current-info span,
.wardrobe-owned-count span {
    color: var(--legacy-subtext);
    font-size: 12px;
}

.wardrobe-current-info strong,
.wardrobe-owned-count strong {
    color: #fff;
    font-size: 14px;
}

.wardrobe-list-panel {
    min-width: 0;
    min-height: 0;
    padding: 2px 8px 2px 2px;
    overflow-y: auto;
}

.wardrobe-section {
    padding: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(178, 211, 229, 0.13);
    border-radius: 15px;
}

.wardrobe-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.wardrobe-section-title div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wardrobe-section-title strong {
    color: #f8dfeb;
    font-size: 18px;
}

.wardrobe-section-title span {
    color: var(--legacy-subtext);
    font-size: 13px;
}

.wardrobe-section-title em {
    flex: 0 0 auto;
    padding: 5px 10px;
    color: #cbe9f8;
    background: rgba(103, 183, 255, 0.12);
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.wardrobe-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.wardrobe-card {
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: var(--legacy-text);
    background:
        linear-gradient(
            150deg,
            rgba(55, 63, 77, 0.93),
            rgba(20, 29, 40, 0.97)
        );
    border: 1px solid rgba(185, 212, 229, 0.16);
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    transition:
        transform 0.17s ease,
        border-color 0.17s ease,
        box-shadow 0.17s ease;
}

.wardrobe-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 139, 183, 0.5);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.wardrobe-card-image {
    position: relative;
    height: 230px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, 0.1),
            transparent 58%
        );
}

.wardrobe-card-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transition: transform 0.18s ease;
}

.wardrobe-card:hover .wardrobe-card-image img {
    transform: scale(1.035);
}

.wardrobe-card-status {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 2;
    padding: 4px 8px;
    color: #f2f7fa;
    background: rgba(5, 13, 21, 0.78);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.wardrobe-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px 13px;
}

.wardrobe-card-info strong {
    color: #fff;
    font-size: 14px;
}

.wardrobe-card-info span {
    color: var(--legacy-subtext);
    font-size: 11px;
}

.wardrobe-card.wardrobe-equipped {
    border-color: rgba(255, 130, 180, 0.74);
    box-shadow:
        0 0 0 2px rgba(255, 130, 180, 0.13),
        0 14px 28px rgba(0, 0, 0, 0.26);
}

.wardrobe-card.wardrobe-equipped::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 220, 233, 0.2);
    border-radius: inherit;
    pointer-events: none;
}

/* 보유품 */

#modal-content.inventory-modal {
    width: min(1340px, calc(100vw - 70px));
    height: min(900px, calc(100vh - 70px));
}

#modal-content.inventory-modal #modal-body {
    max-height: 750px;
}

.inventory-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 14px;
    margin-bottom: 17px;
}

.inventory-summary-copy,
.inventory-summary-total {
    padding: 16px 18px;
    background:
        linear-gradient(
            145deg,
            rgba(103, 183, 255, 0.13),
            rgba(20, 34, 50, 0.72)
        );
    border: 1px solid rgba(143, 203, 235, 0.19);
    border-radius: 13px;
}

.inventory-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inventory-summary-copy > span {
    color: #91cfee;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.inventory-summary-copy > strong {
    color: #fff;
    font-size: 20px;
}

.inventory-summary-copy > p {
    margin: 2px 0 0;
    color: var(--legacy-subtext);
    font-size: 13px;
    line-height: 1.55;
}

.inventory-summary-total {
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: center;
    column-gap: 4px;
    text-align: center;
}

.inventory-summary-total strong {
    color: #fff;
    font-size: 34px;
}

.inventory-summary-total > span {
    align-self: end;
    padding-bottom: 7px;
    color: var(--legacy-subtext);
    font-size: 15px;
}

.inventory-summary-total em {
    grid-column: 1 / -1;
    color: #9dd8f2;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.inventory-category-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.inventory-category {
    padding: 15px 17px 17px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(173, 208, 226, 0.13);
    border-radius: 13px;
}

.inventory-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.inventory-category-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.inventory-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 20px;
}

.inventory-category-heading strong {
    display: block;
    color: #fff;
    font-size: 16px;
}

.inventory-category-heading p {
    margin: 2px 0 0;
    color: var(--legacy-subtext);
    font-size: 12px;
}

.inventory-category-count {
    padding: 5px 10px;
    color: #d5edf8;
    background: rgba(103, 183, 255, 0.11);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.inventory-item-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.inventory-item-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    min-width: 0;
    padding: 12px 13px 31px;
    background:
        linear-gradient(
            145deg,
            rgba(54, 63, 76, 0.9),
            rgba(19, 28, 39, 0.96)
        );
    border: 1px solid rgba(180, 210, 228, 0.14);
    border-left: 3px solid var(--legacy-blue);
    border-radius: 11px;
}

.inventory-item-memory {
    border-left-color: var(--legacy-pink);
}

.inventory-item-achievement {
    border-left-color: var(--legacy-orange);
}

.inventory-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.065);
    border-radius: 10px;
    font-size: 24px;
}

.inventory-item-content {
    min-width: 0;
}

.inventory-item-name {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-item-effect {
    margin: 3px 0 0;
    color: var(--legacy-subtext);
    font-size: 11px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.inventory-item-status {
    position: absolute;
    right: 11px;
    bottom: 8px;
    color: #9edaf5;
    font-size: 10px;
    font-weight: 900;
}

.inventory-item-locked {
    opacity: 0.48;
    filter: saturate(0.45);
}

/* 대사 로그 */

#modal-content.dialogue-log-modal {
    width: min(1080px, calc(100vw - 70px));
    height: min(820px, calc(100vh - 70px));
}

#modal-content.dialogue-log-modal #modal-body {
    display: flex;
    flex-direction: column;
    height: calc(100% - 82px);
    max-height: none;
    overflow: hidden;
}

.dialogue-log-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding-right: 8px;
    overflow-y: auto;
}

.dialogue-log-entry {
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(169, 207, 228, 0.11);
    border-left: 3px solid var(--legacy-blue);
    border-radius: 9px;
}

.dialogue-log-entry strong {
    display: block;
    margin-bottom: 4px;
    color: #9fdcf4;
    font-size: 13px;
}

.dialogue-log-entry p {
    margin: 0;
    color: rgba(237, 245, 249, 0.88);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.dialogue-log-empty {
    margin: auto;
    color: var(--legacy-subtext);
}

.dialogue-log-close,
.help-close-btn,
.save-load-back-button,
.game-menu-close-button,
.settings-apply-button,
.settings-back-button {
    min-height: 45px;
    padding: 9px 22px;
    color: #eaf6fb;
    background:
        linear-gradient(
            145deg,
            rgba(62, 119, 153, 0.72),
            rgba(34, 72, 97, 0.84)
        );
    border: 1px solid rgba(132, 201, 232, 0.44);
    border-radius: 9px;
    cursor: pointer;
    font-weight: 900;
}

.dialogue-log-close {
    align-self: center;
    min-width: 150px;
    margin-top: 15px;
}

/* 메인 시스템 메뉴 */

#modal-content.game-menu-modal {
    width: min(1050px, calc(100vw - 70px));
}

.game-menu-screen {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.game-menu-guide,
.save-load-guide,
.settings-guide {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 15px 17px;
    background:
        linear-gradient(
            145deg,
            rgba(103, 183, 255, 0.14),
            rgba(20, 34, 50, 0.75)
        );
    border: 1px solid rgba(147, 205, 235, 0.2);
    border-radius: 13px;
}

.game-menu-guide-icon,
.save-load-guide-icon,
.settings-guide-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #d8f1fc;
    background: rgba(103, 183, 255, 0.13);
    border: 1px solid rgba(154, 211, 240, 0.2);
    border-radius: 12px;
    font-size: 25px;
}

.game-menu-guide-copy strong,
.save-load-guide strong,
.settings-guide strong {
    color: #fff;
    font-size: 17px;
}

.game-menu-guide-copy p,
.save-load-guide p,
.settings-guide p {
    margin: 3px 0 0;
    color: var(--legacy-subtext);
    font-size: 12px;
}

.game-menu-current-state {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.game-menu-current-state span {
    color: var(--legacy-subtext);
    font-size: 10px;
}

.game-menu-current-state strong {
    color: #bfe9fb;
    font-size: 17px;
}

.game-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.game-menu-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 86px;
    padding: 14px 16px;
    color: var(--legacy-text);
    background:
        linear-gradient(
            145deg,
            rgba(55, 65, 78, 0.92),
            rgba(20, 29, 40, 0.97)
        );
    border: 1px solid rgba(180, 211, 228, 0.14);
    border-left: 4px solid var(--legacy-blue);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.game-menu-card:hover {
    transform: translateY(-2px);
    background: var(--legacy-card-hover);
    border-color: rgba(125, 202, 241, 0.5);
}

.game-menu-card-load {
    border-left-color: #86c5ef;
}

.game-menu-card-settings {
    border-left-color: #b99be8;
}

.game-menu-card-delete,
.game-menu-card-exit {
    border-left-color: var(--legacy-red);
}

.game-menu-card-title {
    border-left-color: var(--legacy-orange);
}

.game-menu-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 11px;
    font-size: 23px;
}

.game-menu-card-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.game-menu-card-copy strong {
    color: #fff;
    font-size: 16px;
}

.game-menu-card-copy small {
    overflow: hidden;
    color: var(--legacy-subtext);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-menu-card-arrow {
    color: rgba(190, 222, 239, 0.52);
    font-size: 30px;
}

.game-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--legacy-subtext);
    font-size: 11px;
}

/* 도움말 */

#modal-content.help-modal {
    width: min(980px, calc(100vw - 70px));
    max-height: calc(100vh - 60px);
}

.help-screen {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.help-intro {
    padding: 14px 17px;
    color: rgba(233, 244, 251, 0.94);
    background:
        linear-gradient(
            135deg,
            rgba(82, 146, 214, 0.28),
            rgba(25, 42, 67, 0.72)
        );
    border: 1px solid rgba(165, 210, 255, 0.26);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.55;
}

.help-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.help-section {
    min-width: 0;
    padding: 14px 16px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(12, 22, 36, 0.52)
        );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
}

.help-section h3 {
    margin: 0 0 6px;
    color: #f3cf8a;
    font-size: 15px;
}

.help-section p {
    margin: 0;
    color: rgba(241, 246, 255, 0.84);
    font-size: 12px;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
}

.help-section-wide {
    border-left: 3px solid var(--legacy-orange);
}

.help-close-btn {
    align-self: center;
    min-width: 150px;
}

/* 저장·불러오기·삭제 */

#modal-content.save-load-modal {
    width: min(1260px, calc(100vw - 70px));
    height: min(900px, calc(100vh - 70px));
}

#modal-content.save-load-modal #modal-body {
    height: calc(100% - 82px);
    max-height: none;
    overflow: hidden;
}

.save-load-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 0;
}

.save-slot-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
    padding-right: 7px;
    overflow-y: auto;
}

.save-slot-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    min-height: 190px;
    padding: 13px 14px 34px;
    color: var(--legacy-text);
    background:
        linear-gradient(
            150deg,
            rgba(55, 64, 77, 0.93),
            rgba(19, 28, 39, 0.97)
        );
    border: 1px solid rgba(183, 212, 228, 0.15);
    border-left: 3px solid var(--legacy-blue);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}

.save-slot-entry:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(124, 201, 240, 0.48);
}

.save-slot-delete {
    border-left-color: var(--legacy-red);
}

.save-slot-autosave {
    border-left-color: var(--legacy-orange);
}

.save-slot-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.save-slot-entry-header strong {
    color: #fff;
    font-size: 15px;
}

.save-slot-entry-header > span {
    max-width: 125px;
    overflow: hidden;
    color: var(--legacy-subtext);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.save-slot-main-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    background: rgba(5, 13, 21, 0.35);
    border-radius: 9px;
}

.save-slot-day,
.save-slot-money {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.save-slot-day strong,
.save-slot-money strong {
    color: #fff;
    font-size: 14px;
}

.save-slot-day span,
.save-slot-money span {
    color: var(--legacy-subtext);
    font-size: 10px;
}

.save-slot-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.save-slot-stat-row > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.save-slot-stat-row span {
    color: var(--legacy-subtext);
    font-size: 10px;
}

.save-slot-stat-row strong {
    color: #fff;
    font-size: 13px;
}

.save-slot-action {
    position: absolute;
    right: 13px;
    bottom: 9px;
    color: #9ddbf6;
    font-size: 10px;
    font-weight: 900;
}

.save-slot-delete .save-slot-action {
    color: #ff9ca6;
}

.save-slot-empty-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--legacy-subtext);
}

.save-slot-empty-icon {
    font-size: 29px;
}

.save-slot-empty-content p {
    margin: 0;
    font-size: 11px;
}

.save-slot-entry:disabled {
    cursor: default;
    opacity: 0.47;
}

.save-load-back-button {
    align-self: center;
}

/* 환경설정 */

#modal-content.settings-modal {
    width: min(1100px, calc(100vw - 70px));
    max-height: calc(100vh - 60px);
}

.settings-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-auto-save {
    color: #8ee0b4;
    font-size: 11px;
    font-weight: 900;
}

.settings-card {
    padding: 15px 17px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(177, 209, 228, 0.14);
    border-radius: 12px;
}

.settings-card-header > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.settings-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    font-size: 20px;
}

.settings-card-header strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.settings-card-header p {
    margin: 2px 0 0;
    color: var(--legacy-subtext);
    font-size: 11px;
}

.settings-volume-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
}

.settings-volume-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 55px;
    align-items: center;
    gap: 13px;
    padding: 9px 11px;
    background: rgba(6, 14, 23, 0.32);
    border-radius: 9px;
}

.settings-volume-label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.settings-volume-label > span:first-child {
    font-size: 20px;
}

.settings-volume-label strong,
.settings-volume-label small {
    display: block;
}

.settings-volume-label strong {
    color: #fff;
    font-size: 13px;
}

.settings-volume-label small {
    color: var(--legacy-subtext);
    font-size: 9px;
}

.settings-volume-row input[type="range"] {
    width: 100%;
    accent-color: var(--legacy-blue);
}

.settings-volume-value {
    color: #bde9fb;
    font-size: 13px;
    text-align: right;
}

.settings-lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-option-button,
.settings-language-select {
    width: 100%;
    min-height: 60px;
    margin-top: 12px;
    padding: 10px 13px;
    color: #edf7fc;
    background: rgba(50, 82, 105, 0.34);
    border: 1px solid rgba(123, 194, 227, 0.3);
    border-radius: 10px;
}

.settings-option-button {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    cursor: pointer;
    text-align: left;
}

.settings-option-button > span {
    grid-row: 1 / 3;
    font-size: 22px;
    text-align: center;
}

.settings-option-button strong {
    color: #fff;
    font-size: 13px;
}

.settings-option-button small {
    color: var(--legacy-subtext);
    font-size: 9px;
}

.settings-footer {
    display: flex;
    justify-content: center;
    gap: 11px;
}

/* CG 앨범 */

#modal-content.gallery-modal {
    width: min(1400px, calc(100vw - 70px));
    height: min(900px, calc(100vh - 70px));
}

#modal-content.gallery-modal #modal-body {
    height: calc(100% - 82px);
    max-height: none;
    overflow: hidden;
}

.cg-gallery-shell {
    display: flex;
    flex-direction: column;
    gap: 13px;
    height: 100%;
}

.cg-gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cg-gallery-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    color: var(--legacy-subtext);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    font-size: 11px;
}

.cg-gallery-summary strong {
    color: #fff;
}

.cg-gallery-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    min-height: 0;
    padding-right: 7px;
    overflow-y: auto;
}

.cg-gallery-card {
    position: relative;
    min-width: 0;
    min-height: 170px;
    overflow: hidden;
    color: var(--legacy-subtext);
    background:
        linear-gradient(
            145deg,
            rgba(52, 61, 74, 0.92),
            rgba(18, 27, 38, 0.97)
        );
    border: 1px solid rgba(178, 210, 228, 0.14);
    border-radius: 11px;
}

.cg-gallery-card.is-unlocked {
    cursor: pointer;
}

.cg-gallery-card.is-unlocked:hover {
    transform: translateY(-2px);
    border-color: rgba(119, 197, 237, 0.54);
}

.cg-gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cg-gallery-card-number {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 7px;
    color: #fff;
    background: rgba(5, 12, 19, 0.74);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
}

.cg-gallery-card.is-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0.54;
}

.cg-gallery-lock-icon {
    font-size: 29px;
}

.cg-gallery-lock-text {
    font-size: 11px;
    font-weight: 900;
}

.cg-gallery-empty {
    grid-column: 1 / -1;
    margin: auto;
    color: var(--legacy-subtext);
}

.cg-gallery-viewer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cg-gallery-viewer img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cg-gallery-viewer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: rgba(5, 12, 19, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
}

@media (max-width: 1100px) {
    .status-modal-layout,
    .wardrobe-layout {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .wardrobe-grid,
    .inventory-item-grid,
    .save-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cg-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #system-menu {
        right: 12px;
        left: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #system-menu button {
        padding: 0 9px;
        font-size: 11px;
    }

    .status-modal-layout,
    .wardrobe-layout {
        display: block;
        overflow-y: auto;
    }

    .status-profile-panel,
    .wardrobe-preview-panel {
        min-height: 470px;
        margin-bottom: 14px;
    }

    .dashboard-dev-flex,
    .inventory-item-grid,
    .save-slot-grid,
    .cg-gallery-grid,
    .game-menu-grid,
    .help-section-grid,
    .settings-lower-grid {
        grid-template-columns: 1fr;
    }

    .settings-volume-row {
        grid-template-columns: 1fr;
    }
}