:root {
    --collection-paper: #f7ecd3;
    --collection-ink: var(--figma-brown);
    --collection-card: #fffaf0;
    --collection-border: #d4b58b;
    --collection-accent: var(--figma-deep-mint);
    --collection-card-border: #cbb08e;
    --collection-locked: #eee0c8;
    --collection-muted: #866653;
    --collection-placeholder: #f3e5db;
    --collection-lock-icon: #8e7657;
    --collection-gold: #a57928;
    --collection-completed: #fff3c9;
    --collection-frame: #bc9665;
    --collection-symbol: #805719;
    --collection-backdrop: rgb(0 0 0 / 65%);
    --collection-text-26: 26px;
    --collection-text-14: 14px;
    --collection-text-12: 12px;
    --collection-text-42: 42px;
    --collection-text-34: 34px;
    --collection-text-16: 16px;
    --collection-text-13: 13px;
    --collection-text-18: 18px;
    --collection-text-64: 64px;
    --achievement-green: #3e7860;
    --achievement-blue: #3e718f;
    --achievement-red: #a45139;
    --achievement-purple: #795e99;
    --collection-shadow: rgb(67 89 91 / 18%);
    --collection-progress-track: #e8d9ca;
}

.collection-page {
    background: var(--collection-paper);
    color: var(--collection-ink);
    min-height: 0;
}

.collection-page-content {
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
    width: min(1100px, 94%);
    margin: 0 auto;
    padding: 22px 10px 32px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

/* 큰 PC 화면: 위쪽 메뉴 배율에 맞춰 업적·책장 본문을 키운다 (10/28 Kay님 승인 시안 ①) */
@media screen and (orientation: landscape) and (min-width: 1600px) {
    .collection-page-content { width: min(1375px, 94%); }
    .collection-page-content > * { zoom: 1.25; }
    .bookshelf-preview { --bookshelf-zoom: 1.25; }
}

@media screen and (orientation: landscape) and (min-width: 1900px) {
    .collection-page-content { width: min(1540px, 94%); }
    .collection-page-content > * { zoom: 1.4; }
    .bookshelf-preview { --bookshelf-zoom: 1.4; }
}

/* These overrides bridge the existing !important viewport and painted navigation rules. */
/* stylelint-disable declaration-no-important */
body #game-container > .collection-page {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

body #game-container > #global-top-bar > .top-menu > .menu-btn {
    flex: 1 1 0 !important;
    width: 0 !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
}

/* stylelint-enable declaration-no-important */

.collection-page-heading { margin-bottom: 18px; }
.collection-page-heading h1 {
    display: inline-block; margin: 0 0 10px; padding: 10px 32px;
    border: 0 solid transparent;
    border-image: url('../resources/figma-v2/imgFrStageNumber1.png') 50 fill / 22px / 0 stretch;
    color: var(--figma-deep-mint); font-size: var(--collection-text-26); font-weight: 800;
}
.collection-page-heading p { margin: 0; font-size: var(--collection-text-14); color: var(--collection-muted); line-height: 1.5; }
.collection-summary, .bookshelf-card, .achievement-card, .bookshelf-preview {
    border: 0 solid transparent; border-radius: 0; background: none;
    border-image: url('../resources/figma-v2/imgFrMapSelect.png') 40 fill / 20px / 0 stretch;
    filter: drop-shadow(0 3px 2px var(--collection-shadow));
    color: var(--collection-ink);
}
.collection-summary {
    padding: 22px 24px; margin-bottom: 20px;
    border-image-source: url('../resources/figma-v2/imgFrCollectionList2.png');
}
.collection-summary > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.collection-summary strong { color: var(--figma-deep-mint); }
.collection-page progress { display: block; width: 100%; height: 12px; appearance: none; border: 0; border-radius: 8px; overflow: hidden; background: var(--collection-progress-track); accent-color: var(--figma-mint); }
.collection-page progress::-webkit-progress-bar { background: var(--collection-progress-track); border-radius: 8px; }
.collection-page progress::-webkit-progress-value { background: linear-gradient(var(--figma-mint), var(--achievement-green)); border-radius: 8px; }
.collection-page progress::-moz-progress-bar { background: var(--figma-mint); border-radius: 8px; }
.bookshelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 18px; }
.bookshelf-card { display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 14px 14px 18px; font: inherit; }
.bookshelf-card.is-owned { cursor: pointer; }
/* stylelint-disable declaration-no-important -- override the legacy global disabled-button border and yellow fill */
.bookshelf-card:disabled {
    opacity: 1;
    color: var(--collection-muted) !important;
    background: none !important;
    border: 0 solid transparent !important;
    border-image: url('../resources/figma-v2/imgFrMapSelect.png') 40 fill / 20px / 0 stretch !important;
    cursor: default !important;
}
/* stylelint-enable declaration-no-important */
.bookshelf-card strong { font-size: var(--collection-text-14); line-height: 1.4; word-break: keep-all; }
.bookshelf-art { position: relative; width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: var(--collection-placeholder); }
.bookshelf-art img { width: 100%; height: 100%; object-fit: cover; }
.bookshelf-number { position: absolute; top: 7px; left: 7px; z-index: 1; display: grid; place-items: center; min-width: 54px; height: 28px; padding: 0 12px; border: 0 solid transparent; border-image: url('../resources/figma-v2/imgFrStageNumber1.png') 50 fill / 12px / 0 stretch; font-size: var(--collection-text-14); font-weight: 800; color: var(--figma-deep-mint); }
.bookshelf-count { position: absolute; bottom: 7px; right: 7px; z-index: 1; display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border: 0 solid transparent; border-image: url('../resources/figma-v2/imgObMainMenuUnselected.png') 40 fill / 10px / 0 stretch; font-size: var(--collection-text-14); font-weight: 800; color: var(--figma-deep-mint); }
.bookshelf-lock { font-size: var(--collection-text-42); color: var(--figma-muted-brown); }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.achievement-card { display: flex; align-items: center; gap: 16px; padding: 24px; }
.achievement-card > div { flex: 1; min-width: 0; }
.achievement-mark { position: relative; display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 68px; border: 0 solid transparent; border-image: url('../resources/figma-v2/imgFrRewardItem1.png') 35 fill / 10px / 0 stretch; color: var(--collection-accent); }
.achievement-mark svg { width: 32px; height: 32px; margin-bottom: 6px; }
.achievement-tier { position: absolute; bottom: -8px; min-width: 36px; padding: 5px 10px; border: 0 solid transparent; border-image: url('../resources/figma-v2/imgFrStageNumber1.png') 50 fill / 10px / 0 stretch; color: var(--figma-deep-mint); text-align: center; font-size: var(--collection-text-12); font-weight: 800; }
.achievement-mark--easy { color: var(--achievement-green); }
.achievement-mark--normal, .achievement-mark--collect { color: var(--achievement-blue); }
.achievement-mark--hard { color: var(--achievement-red); }
.achievement-mark--master { color: var(--achievement-purple); }
.achievement-category { display: block; margin-bottom: 6px; font-size: var(--collection-text-12); color: var(--collection-muted); }
.achievement-card.is-complete .achievement-mark { border-image: url('../resources/figma-v2/imgBtnBase.png') 48 fill / 16px / 0 stretch; color: var(--collection-card); }
.achievement-card.is-complete p { color: var(--figma-deep-mint); }
.achievement-card h2 { font-size: var(--collection-text-16); margin: 0 0 8px; word-break: keep-all; color: var(--collection-ink); }
.achievement-card p { font-size: var(--collection-text-13); margin: 0 0 12px; color: var(--collection-muted); }
/* 창 폭은 그림 폭에 맞춘다. 큰 PC 는 --bookshelf-zoom 배로 키우되, zoom 이 dvh 까지 키우므로 높이 제한은 배율로 나눈다 (10/29 승인) */
.bookshelf-preview { zoom: var(--bookshelf-zoom, 1); width: fit-content; max-width: min(900px, 90vw / var(--bookshelf-zoom, 1)); max-height: calc(90dvh / var(--bookshelf-zoom, 1)); padding: 24px; margin: auto; }
.bookshelf-preview::backdrop { background: var(--collection-backdrop); }
.bookshelf-preview-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-bottom: 16px; }
.bookshelf-preview form { grid-column: 3; grid-row: 1; margin: 0; }
.bookshelf-preview button, .collection-retry { padding: 10px 22px; cursor: pointer; border: 0 solid transparent; border-image: url('../resources/figma-v2/imgBtnBase.png') 48 fill / 16px / 0 stretch; background: none; color: var(--collection-card); font: inherit; font-weight: 800; }
.bookshelf-preview h2 { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-size: var(--collection-text-18); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.bookshelf-preview-header button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
.bookshelf-preview-header button svg { width: 22px; height: 22px; }
.bookshelf-preview img { display: block; max-width: 100%; max-height: min(65dvh / var(--bookshelf-zoom, 1), 90dvh / var(--bookshelf-zoom, 1) - 108px); margin: auto; object-fit: contain; }
.bookshelf-card:focus-visible, .bookshelf-preview button:not([data-quiet-focus]):focus-visible, .collection-retry:focus-visible { outline: 3px solid var(--figma-deep-mint); outline-offset: 3px; }
@media (hover: hover) {
    .bookshelf-card.is-owned:hover { transform: translateY(-2px); }
}
.direct-reward-symbol { display: grid; place-items: center; height: 100%; font-size: var(--collection-text-64); font-weight: bold; color: var(--collection-symbol); }
#global-top-bar .top-menu { flex-wrap: wrap; }

#global-top-bar {
    --navigation-control-size: calc(var(--figma-frame-height) * 0.1259 * 0.712);
}

#global-top-bar .navigation-icon {
    display: block;
    width: clamp(24px, 2.4vw, 34px);
    height: clamp(24px, 2.4vw, 34px);
    flex: none;
}

#global-top-bar .header-settings-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1.69979%;
    width: var(--navigation-control-size);
    height: var(--navigation-control-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0 solid transparent;
    border-image: url('../resources/figma-v2/imgObMainMenuUnselected.png') 40 fill / 20px / 0 stretch;
    background: none;
    color: var(--figma-muted-brown);
    cursor: pointer;
    pointer-events: auto;
}

#global-top-bar .header-settings-btn:hover { filter: brightness(1.03); }
#global-top-bar .header-settings-btn.active {
    border-image: url('../resources/figma-v2/imgBtnBase.png') 48 fill / 18px / 0 stretch;
    color: var(--collection-card);
}

#global-top-bar .header-settings-btn .navigation-icon {
    width: 60%;
    height: 60%;
}

#global-top-bar button:focus-visible {
    outline: 3px solid var(--collection-accent);
    outline-offset: 3px;
}

/* stylelint-disable declaration-no-important -- reserve space in the legacy important header layout */
#global-top-bar #go-stage-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body #game-container > #global-top-bar > .top-menu > #go-stage-btn {
    flex: 0 0 var(--navigation-control-size) !important;
    height: var(--navigation-control-size) !important;
    margin-top: 2.95% !important;
    padding: 0 !important;
    border: 0 solid transparent !important;
    border-image: url('../resources/figma-v2/imgObMainMenuUnselected.png') 40 fill / 20px / 0 stretch !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--figma-muted-brown) !important;
}

body #game-container > #global-top-bar > .top-menu > #go-stage-btn.active {
    border-image: url('../resources/figma-v2/imgBtnBase.png') 48 fill / 18px / 0 stretch !important;
    color: var(--collection-card) !important;
}

@media (orientation: landscape) {
    body #game-container > #global-top-bar > .top-status-right { right: calc(var(--navigation-control-size) + 12px) !important; }
}

@media (orientation: portrait) {
    #global-top-bar { --navigation-control-size: max(44px, 12.5802vw); }
    /* flex 고정: 탭 데스크톱 모드(터치 미인식, 폭 761~900)에서 style.css 의 flex:1 이 메뉴를 톱니 밑까지 늘렸다(10/26 탭 세로 실측) */
    body #game-container > #global-top-bar > .top-menu { width: calc(100% - var(--navigation-control-size) - 12px) !important; flex: 0 0 auto !important; }
    body #game-container > #global-top-bar > .top-menu > .menu-btn,
    body #game-container > #global-top-bar > .top-menu > #go-stage-btn {
        height: var(--navigation-control-size) !important;
        margin-top: 0 !important;
    }
    #global-top-bar .header-settings-btn { top: 0; right: 6px; margin-top: 0; }
}
/* stylelint-enable declaration-no-important */

@media (max-width: 600px) {
    .bookshelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .collection-page-content { padding-top: 14px; }
    /* stylelint-disable declaration-no-important -- existing mobile navigation uses important sizing */
    #global-top-bar .top-menu { gap: 2px !important; }
    #global-top-bar .top-menu .menu-btn { padding-inline: 6px !important; font-size: var(--collection-text-14) !important; }
    /* stylelint-enable declaration-no-important */
}

/* 폰 세로(플립 360×880 등): top 20% 는 긴 화면에서 알약 아래 96px 공백이 된다(2026-10-26 Kay님 승인 시안).
   24.1vw = 화면 위 ~ 알약 아래 끝. + 10px + padding-top 14px = 알약 아래 24px 에서 상자가 시작한다. */
@media (orientation: portrait) and (max-width: 599px) {
    .collection-page-content { top: calc(24.1vw + 10px); }
}