.student-shop-token-page { scroll-behavior: smooth; font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.student-shop-token-page .student-shop-shell { width: 100%; max-width: none; margin: 0; padding: 36px 0 48px; transform: none; }
.student-shop-tabs { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 2px; margin: 10px 24px -1px; }
.student-shop-tabs button { display: grid; min-height: 62px; grid-template-columns: 34px minmax(0, 1fr); align-items: center; justify-items: start; gap: 8px; border: 1px solid rgba(42, 61, 88, .22); border-bottom-color: rgba(42, 61, 88, .38); border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #72a9e9, #4f84c8); padding: 8px 12px; color: #203957; box-shadow: 0 -2px 0 rgba(34, 68, 111, .38), inset 0 1px 0 rgba(255, 255, 255, .68); font: inherit; font-size: clamp(17px, 1.35vw, 21px); font-weight: 950; letter-spacing: -.01em; line-height: 1.08; text-align: left; }
.student-shop-tabs button[data-shop-tab="products"] { background: linear-gradient(180deg, #9bd36e, #71b24e); }
.student-shop-tabs button[data-shop-tab="coupons"] { background: linear-gradient(180deg, #b59ae9, #8d70cf); }
.student-shop-tabs button[data-shop-tab="emoticons"] { background: linear-gradient(180deg, #ef9db6, #d87395); }
.student-shop-tabs button[data-shop-tab="friends"] { background: linear-gradient(180deg, #efc178, #d99b45); }
.student-shop-tabs button.is-active { z-index: 2; min-height: 72px; border-bottom-color: #fffdf6; color: #fff; }
.student-shop-tabs button.is-active[data-shop-tab="today"] { background: linear-gradient(180deg, #21589c, #12366f); box-shadow: 0 -3px 0 #0d2a58; }
.student-shop-tabs button.is-active[data-shop-tab="products"] { background: linear-gradient(180deg, #3e9b4e, #1f6e2c); box-shadow: 0 -3px 0 #255c34; }
.student-shop-tabs button.is-active[data-shop-tab="coupons"] { background: linear-gradient(180deg, #7655bc, #53368f); box-shadow: 0 -3px 0 #3f2c72; }
.student-shop-tabs button.is-active[data-shop-tab="emoticons"] { background: linear-gradient(180deg, #c94f78, #963351); box-shadow: 0 -3px 0 #76253f; }
.student-shop-tabs button.is-active[data-shop-tab="friends"] { background: linear-gradient(180deg, #da8d1d, #ae5a05); box-shadow: 0 -3px 0 #854304; }
.student-shop-tabs img { width: 32px; height: 44px; object-fit: contain; }
.student-shop-tabs > button > i { display: grid; width: 32px; height: 44px; place-items: center; color: #fff7fb; font-size: 30px; }
.student-shop-tabs button:focus-visible,
.student-shop-summary button:focus-visible,
.student-shop-filter-row button:focus-visible,
.student-shop-filter-panel button:focus-visible,
.student-shop-market-toolbar button:focus-visible { outline: 3px solid #f0b94f; outline-offset: 3px; }
.student-shop-fullscreen { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0; border: 0; border-radius: 999px; background: rgba(48, 40, 31, .72); color: #fffdf1; font: inherit; font-size: 13px; font-weight: 1000; cursor: pointer; }
.student-shop-fullscreen:focus-visible { outline: 3px solid #f0b94f; outline-offset: 2px; }
.student-shop-notebook-sheet { position: relative; min-width: 0; min-height: calc(100vh - 100px); container-type: inline-size; box-sizing: border-box; isolation: isolate; margin-top: 0; overflow: clip; background: transparent; padding: 0 32px 38px 58px; }
.student-shop-notebook-frame { position: absolute; z-index: 0; display: block; width: 100%; pointer-events: none; }
.student-shop-notebook-frame--top { inset: 0 0 auto; aspect-ratio: 2048 / 306; background: url('/token-assets/shop-notebook-shell-top.png') center / 100% 100% no-repeat; }
.student-shop-notebook-frame--body { inset: 14.94140625cqi 0 12.353515625cqi; background: url('/token-assets/shop-notebook-shell-body.png') top center / 100% auto repeat-y; }
.student-shop-notebook-frame--bottom { inset: auto 0 0; aspect-ratio: 2048 / 253; background: url('/token-assets/shop-notebook-shell-bottom.png') center / 100% 100% no-repeat; }
.student-shop-notebook-sheet > :not(.student-shop-notebook-frame) { position: relative; z-index: 1; }
.student-shop-token-page .student-shop-header { display: flex; height: 146px; min-height: 146px; align-items: center; justify-content: space-between; gap: 14px; margin: 0; border: 1px solid #c8d5e4; border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(255, 253, 246, .94); padding: 14px 20px 16px; }
.student-shop-title-wrap { display: flex; min-width: 0; align-items: center; gap: 14px; }
.student-shop-title-icon { width: 68px; height: 68px; object-fit: contain; }
.student-shop-header .eyebrow { margin: 0; color: #2e61ae; font-size: 14px; font-weight: 1000; }
.student-shop-header h1 { margin: 3px 0 5px; color: #21477f; font-size: clamp(34px, 3vw, 48px); line-height: 1; }
.student-shop-header p:last-child { max-width: 390px; margin: 0; color: #5d6e84; font-size: 14px; font-weight: 800; }
.student-shop-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.student-shop-mascot { width: 116px; height: 108px; object-fit: contain; }
.student-shop-mascot.is-icon { width: 58px; height: 58px; }
.student-shop-header-actions .student-shop-date { display: grid; min-width: 136px; min-height: 60px; box-sizing: border-box; align-content: center; gap: 2px; border: 1px solid #cfdae7; border-radius: 10px; background: #fff; padding: 9px 13px; color: #52647a; white-space: nowrap; }
.student-shop-header-actions small { font-size: 11px; font-weight: 800; }
.student-shop-header-actions .student-shop-date strong { color: #2e4e78; font-size: 14px; }
.student-shop-header-actions button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d49b31; border-radius: 10px; background: #fff4cc; padding: 0 10px; color: #4b3a25; font: inherit; font-size: 11px; font-weight: 900; white-space: nowrap; }
.student-shop-header-actions button:last-child { border-color: #cfd8e6; background: #fff; }
.student-shop-token-page .student-home-status { margin: 0; border-right: 1px solid #c8d5e4; border-left: 1px solid #c8d5e4; background: rgba(255, 253, 246, .94); padding: 8px 20px; color: #2e633a; font-size: 12px; font-weight: 900; }
#studentShopWorkspace { border: 1px solid #c8d5e4; border-top: 0; border-radius: 0 0 16px 16px; background: rgba(255, 253, 246, .94); padding: 0 20px 24px; }
.student-shop-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin: 0 -20px 14px; border: 1px solid #dccfc7; border-radius: 12px; background: rgba(255, 253, 248, .9); }
.student-shop-summary button { display: grid; min-width: 0; min-height: 64px; grid-template-columns: 50px auto max-content; align-content: center; align-items: center; justify-content: center; gap: 2px 9px; border: 0; border-right: 1px dashed #d7beb8; background: transparent; padding: 5px 12px; color: #263b57; font: inherit; text-align: left; }
.student-shop-summary button:last-child { border-right: 0; }
.student-shop-summary img { width: 50px; height: 50px; object-fit: contain; }
.student-shop-summary button > span { font-size: 13px; font-weight: 800; white-space: nowrap; }
.student-shop-summary button > strong { overflow: hidden; color: #202735; font-size: clamp(18px, 1.35vw, 22px); text-overflow: ellipsis; white-space: nowrap; }
.student-shop-page { display: grid; gap: 12px; margin-top: 0; }
.student-shop-page[hidden] { display: none; }
.student-shop-today-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 14px; }
.student-shop-choice-card,
.student-shop-quick-card,
.student-shop-insight-grid article,
.student-shop-ledger { border: 1px solid #cdd9e7; border-radius: 12px; background: rgba(255, 255, 255, .82); padding: 15px; box-shadow: 0 4px 10px rgba(48, 67, 92, .05); }
.student-shop-card-heading,
.student-shop-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.student-shop-card-heading span,
.student-shop-ledger > div > span,
.student-shop-insight-grid article span,
.student-shop-section-heading span { color: #2f6fc6; font-size: 11px; font-weight: 950; }
.student-shop-card-heading h2,
.student-shop-ledger h2,
.student-shop-insight-grid h3,
.student-shop-section-heading h2 { margin: 4px 0 0; color: #2f486a; font-size: 20px; }
.student-shop-section-heading p { margin: 5px 0 0; color: #68788e; font-size: 13px; }
.student-shop-card-heading em { border-radius: 999px; background: #e9f1fc; padding: 4px 8px; color: #315f9c; font-size: 10px; font-style: normal; font-weight: 900; }
.student-shop-choice-card ol { display: grid; gap: 0; margin: 11px 0 7px; padding: 0; list-style: none; }
.student-shop-choice-card li { display: grid; min-height: 40px; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; border-top: 1px solid #e2e9f1; color: #334963; font-size: 15px; font-weight: 850; }
.student-shop-choice-card li b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #2f67a7; color: #fff; font-size: 11px; }
.student-shop-choice-card li i { color: #49a26d; }
.student-shop-choice-card > p { margin: 0; color: #68778c; font-size: 13px; font-weight: 750; }
.student-shop-quick-card > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.student-shop-quick-card button,
.student-shop-quick-card a { display: flex; min-height: 44px; align-items: center; justify-content: flex-start; gap: 9px; border: 1px solid #c9d7e9; border-radius: 9px; background: #fff; padding: 0 14px; color: #334968; font: inherit; font-size: 12px; font-weight: 900; text-decoration: none; }
.student-shop-quick-card button:first-child { background: #2d65a6; color: #fff; }
.student-shop-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.student-shop-insight-grid article { display: flex; height: 108px; min-height: 108px; align-items: center; justify-content: space-between; padding: 10px 13px; }
.student-shop-insight-grid h3 { font-size: 15px; }
.student-shop-insight-grid p { margin: 5px 0 0; color: #68778c; font-size: 11px; font-weight: 750; }
.student-shop-insight-grid article > div > strong { display: block; margin-top: 3px; color: #76501e; font-size: 10px; }
.student-shop-insight-grid article > img { width: 62px; height: 62px; object-fit: contain; }
.student-shop-ledger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.student-shop-ledger > button { min-height: 44px; border: 0; background: transparent; color: #2d66a7; font: inherit; font-size: 11px; font-weight: 900; }
.student-shop-ledger > div:last-child { grid-column: 1 / -1; }
.student-shop-recent-empty { margin: 8px 0 0; border-top: 1px solid #dfe7f0; padding: 12px 0 0; color: #68778c; font-size: 12px; }
.student-shop-recent-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 11px; }
.student-shop-recent-table td { border-top: 1px solid #e1e8f0; padding: 9px 5px; color: #455970; }
.student-shop-recent-table td:last-child { color: #b24c3e; font-weight: 900; text-align: right; }
/* Product ledger */
.student-catalog-stage { display: grid; gap: 12px; }
.student-shop-product-controls { display: grid; gap: 10px; }
.student-shop-price-signal,
.student-shop-price-notice,
#studentShopProductPriceStrip { display: grid; min-height: 68px; grid-template-columns: minmax(145px, .42fr) minmax(0, 1.58fr); align-items: center; gap: 14px; border: 1px solid #cbdccf; border-radius: 11px; background: #f2faf5; padding: 9px 14px; color: #344d41; }
.student-shop-price-signal h3,
.student-shop-price-notice h3,
#studentShopProductPriceStrip h3 { margin: 0; color: #37684e; font-size: 17px; }
.student-shop-price-signal p,
.student-shop-price-notice p,
#studentShopProductPriceStrip p { margin: 2px 0 0; font-size: 12px; }
.student-shop-price-signal strong,
.student-shop-price-notice strong,
#studentShopProductPriceStrip strong { color: #1f5da9; font-size: 14px; }
.student-shop-price-signal img,
.student-shop-price-notice img,
#studentShopProductPriceStrip img { width: 58px; height: 58px; object-fit: contain; }
.student-shop-filter-row,
.student-shop-filter-panel,
#studentShopProductFilters { display: flex; min-height: 62px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border: 1px solid #d8e2ef; border-radius: 10px; background: rgba(255, 255, 255, .84); padding: 9px 12px; }
.student-shop-filter-row > div,
.student-shop-filter-panel > div,
.student-shop-filter-chips,
#studentShopProductFilters > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.student-shop-filter-panel input[type="search"],
#studentShopProductFilters input[type="search"] { width: min(220px, 100%); min-height: 44px; box-sizing: border-box; border: 1px solid #d8dce3; border-radius: 9px; background: #fff; padding: 0 13px; color: #334867; font: inherit; font-size: 12px; }
.student-shop-filter-row button,
.student-shop-filter-row select,
.student-shop-filter-panel button,
.student-shop-filter-panel select,
#studentShopProductFilters button,
#studentShopProductFilters select { min-height: 44px; box-sizing: border-box; border: 1px solid #d8dce3; border-radius: 9px; background: #fff; padding: 0 13px; color: #334867; font: inherit; font-size: 12px; font-weight: 850; }
.student-shop-filter-row button.is-active,
.student-shop-filter-panel button.is-active,
#studentShopProductFilters button.is-active { border-color: #3d8e51; background: #eef9f0; color: #236c36; }
.student-shop-token-page .shop-product-grid,
.student-shop-product-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: 0; }
.student-shop-token-page .shop-product-card,
.student-shop-product-card { position: relative; display: grid; min-width: 0; gap: 7px; border: 1px solid #e1d9cf; border-radius: 11px; background: rgba(255, 255, 255, .9); padding: 10px 12px; box-shadow: 0 4px 10px rgba(61, 65, 72, .04); }
.student-shop-token-page .shop-image-preview,
.student-shop-product-visual img { width: 100%; height: 104px; max-height: 104px; aspect-ratio: auto; border-radius: 0; background: #f5f3ef; object-fit: contain; }
.student-shop-token-page .shop-card-heading { min-width: 0; align-items: center; }
.student-shop-token-page .shop-card-heading h3 { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.student-shop-token-page .shop-card-price { color: #202735; font-size: 20px; }
.student-shop-token-page .shop-card-description { display: none; }
.student-shop-token-page .shop-policy-list { display: flex; min-height: 20px; align-items: center; flex-wrap: wrap; gap: 8px; color: #24713a; font-size: 13px; }
.student-shop-token-page .shop-card-actions { gap: 6px; }
.student-shop-product-card > .shop-card-actions { position: absolute; z-index: 2; inset: 0; }
.student-shop-product-card > .shop-card-actions button { width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.student-shop-token-page .shop-card-actions button { min-height: 44px; border-radius: 8px; font-size: 12px; }
.student-shop-product-visual { display: grid; height: 104px; place-items: center; overflow: hidden; background: #f5f3ef; }
.student-shop-product-badge { width: fit-content; border-radius: 999px; background: #e8f7ec; padding: 3px 8px; color: #24713a; font-size: 11px; font-weight: 900; }
.student-shop-product-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; color: #24713a; font-size: 13px; }
.student-shop-product-pagination,
.student-shop-pagination,
#studentShopProductPager { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; color: #4f5660; font-size: 12px; }
.student-shop-product-pagination button,
.student-shop-pagination button,
#studentShopProductPager button { min-width: 44px; min-height: 44px; border: 1px solid #d9dfe7; border-radius: 9px; background: #fff; color: #41536b; font: inherit; font-weight: 900; }
.student-shop-product-pagination .is-active,
.student-shop-pagination .is-active,
#studentShopProductPager .is-active { border-color: #168843; background: #168843; color: #fff; }
/* Coupon ledger */
.student-shop-coupon-ledger,
.student-shop-coupon-sections,
#studentShopCouponLedger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid #d4dce7; border-radius: 12px; background: rgba(255, 255, 255, .72); }
.student-shop-coupon-status,
.student-shop-coupon-folder,
.shop-coupon-ledger-state { display: grid; min-width: 0; min-height: 94px; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; border: 0; border-right: 1px solid #d4dce7; background: transparent; padding: 11px 14px; color: #2c3140; text-align: left; }
.student-shop-coupon-status:last-child,
.student-shop-coupon-folder:last-child,
.shop-coupon-ledger-state:last-child { border-right: 0; }
.student-shop-coupon-status.is-active,
.student-shop-coupon-folder.is-active,
.shop-coupon-ledger-state.is-active { background: #f8f4ff; box-shadow: inset 0 0 0 2px #7650ca; }
.student-shop-coupon-status img,
.student-shop-coupon-folder img,
.shop-coupon-ledger-state img { width: 50px; height: 50px; object-fit: contain; }
.student-shop-coupon-status > span,
.student-shop-coupon-folder > span,
.shop-coupon-ledger-state > span { display: grid; gap: 4px; min-width: 0; }
.student-shop-coupon-status small,
.student-shop-coupon-folder small,
.shop-coupon-ledger-state small { color: #6d2fca; font-size: 11px; font-weight: 950; }
.student-shop-coupon-status strong,
.student-shop-coupon-folder strong,
.shop-coupon-ledger-state strong { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; }
.student-shop-coupon-status[data-status="pending"] small,
.student-shop-coupon-folder[data-status="pending"] small,
.shop-coupon-ledger-state[data-status="pending"] small { color: #0875d8; }
.student-shop-coupon-status[data-status="listed"] small,
.student-shop-coupon-folder[data-status="listed"] small,
.shop-coupon-ledger-state[data-status="listed"] small { color: #e64b27; }
.student-shop-coupon-status[data-status="done"] small,
.student-shop-coupon-folder[data-status="done"] small,
.shop-coupon-ledger-state[data-status="done"] small { color: #244b78; }
.student-shop-coupon-preview { overflow: hidden; border: 1px solid #cfd9e5; border-radius: 12px; background: rgba(255, 255, 255, .76); padding: 13px 15px; }
.student-shop-coupon-preview h3 { margin: 0 0 8px; color: #6840bd; font-size: 17px; }
.student-shop-coupon-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 14px; }
.student-shop-token-page .student-purchase-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0; overflow: visible; }
.student-shop-coupon-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 4px; }
.student-shop-token-page .student-purchase-card { display: grid; min-height: 62px; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px 12px; border: 0; border-bottom: 1px dotted #cbd6e2; border-radius: 0; background: transparent; padding: 8px 6px; box-shadow: none; }
.student-shop-token-page .student-purchase-card:last-child { border-bottom: 0; }
.student-shop-token-page .student-purchase-card img { width: 46px; height: 46px; object-fit: contain; }
.student-shop-token-page .student-purchase-card strong,
.student-shop-token-page .student-purchase-card span,
.student-shop-token-page .student-purchase-card em { display: block; color: #18385f; font-style: normal; font-weight: 1000; }
.student-shop-token-page .student-purchase-card span,
.student-shop-token-page .student-purchase-card em { color: #5a7393; font-size: 12px; }
.student-shop-coupon-row-copy { min-width: 0; }
.student-shop-coupon-row-copy .shop-policy-list { margin: 4px 0 0; }
.student-shop-coupon-row-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-start; gap: 8px; }
.student-shop-coupon-row-actions .secondary-button { width: auto; min-height: 44px; flex: 0 0 auto; margin-top: 0; padding: 0 14px; }
.student-shop-coupon-guide { display: grid; align-content: start; gap: 12px; border: 1px solid #dccbaf; border-radius: 10px; background: #fffaf0; padding: 12px; }
.student-shop-coupon-guide > strong { color: #6540ae; font-size: 14px; }
.student-shop-coupon-guide ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.student-shop-coupon-guide li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 7px; color: #5d6270; font-size: 12px; }
.student-shop-coupon-guide li b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #7650ca; color: #fff; }
.student-shop-coupon-guide img { width: 86px; height: 72px; justify-self: center; object-fit: contain; }
.student-shop-token-page .student-login-submit,
.student-shop-token-page .secondary-button,
.student-shop-token-page .student-use-form input { min-height: 44px; }
.student-shop-token-page .student-login-submit { margin: 0; }
/* Friend market ledger */
.student-shop-page[data-shop-page="friends"],
.student-shop-market-content { display: grid; gap: 12px; }
.student-shop-market-overview { display: grid; gap: 10px; }
.student-shop-market-summary { display: grid; min-height: 64px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; overflow: hidden; border: 1px solid #d8d3cc; border-radius: 12px; background: rgba(255, 255, 255, .86); color: #344d41; }
.student-shop-market-summary > div { display: grid; min-height: 64px; align-content: center; justify-items: center; border-right: 1px dashed #d8d3cc; padding: 6px 12px; text-align: center; }
.student-shop-market-summary > div:last-child { border-right: 0; }
.student-shop-market-summary small { color: #68778c; font-size: 11px; }
.student-shop-market-summary strong { margin: 3px 0 0; color: #243453; font-size: 19px; }
.student-shop-market-best { display: flex; min-height: 72px; align-items: center; gap: 16px; border: 1px solid #c9ded4; border-radius: 12px; background: linear-gradient(135deg, #f2faf5, #fff); padding: 8px 18px; }
.student-shop-market-best img { width: 64px; height: 56px; object-fit: contain; }
.student-shop-market-best div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.student-shop-market-best small { color: #68778c; font-size: 11px; }
.student-shop-market-best strong { color: #168843; font-size: 19px; }
.student-shop-market-best button { min-height: 44px; border: 1px solid #168843; border-radius: 9px; background: #fff; padding: 0 14px; color: #168843; font: inherit; font-size: 12px; font-weight: 900; }
.student-shop-market-best button.is-active { background: #168843; color: #fff; }
.student-shop-market-toolbar { display: flex; min-height: 78px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border: 1px solid #d8e2ef; border-radius: 10px; background: rgba(255, 255, 255, .86); padding: 10px; }
.student-shop-market-toolbar label,
.student-shop-market-toolbar > div,
.student-shop-market-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.student-shop-market-toolbar input[type="search"],
#studentMarketSearch { width: min(250px, 100%); min-height: 44px; box-sizing: border-box; border: 1px solid #d9dfe7; border-radius: 10px; background: #fff; padding: 0 14px; color: #334867; font: inherit; font-size: 12px; }
.student-shop-market-toolbar button,
.student-shop-market-toolbar select,
#studentMarketFilters button,
#studentMarketFilters select { min-height: 44px; box-sizing: border-box; border: 1px solid #d9dfe7; border-radius: 9px; background: #fff; padding: 0 13px; color: #334867; font: inherit; font-size: 12px; font-weight: 850; }
.student-shop-market-toolbar button.is-active,
#studentMarketFilters button.is-active { border-color: #168843; background: #168843; color: #fff; }
.student-shop-market-grid,
#studentMarketGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.student-shop-market-grid > article,
.student-shop-market-grid .student-shop-market-card,
.student-shop-market-grid .shop-market-card,
#studentMarketGrid > article,
#studentMarketGrid .student-shop-market-card,
#studentMarketGrid .shop-market-card { display: grid; min-width: 0; min-height: 250px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px 12px; border: 1px solid #e1d7cd; border-radius: 12px; background: #fff; padding: 14px; box-shadow: 0 4px 10px rgba(55, 69, 91, .06); }
.student-shop-market-grid .student-shop-market-card > :first-child,
.student-shop-market-grid .shop-market-card > :first-child,
#studentMarketGrid .student-shop-market-card > :first-child,
#studentMarketGrid .shop-market-card > :first-child { grid-column: 1 / -1; }
.shop-market-card h3,
.student-shop-market-card h3 { overflow: hidden; margin: 0; color: #243453; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.shop-market-card p,
.student-shop-market-card p { margin: 0; color: #637188; font-size: 14px; }
.shop-market-card img,
.student-shop-market-visual img { width: 70px; height: 70px; object-fit: contain; }
.student-shop-market-visual { display: grid; place-items: center; }
.shop-market-card strong,
.student-shop-market-card strong { color: #168843; }
.shop-market-card [data-market-tone="cheap"],
.student-shop-market-card [data-market-tone="cheap"] { color: #168843; }
.shop-market-card [data-market-tone="fair"],
.student-shop-market-card [data-market-tone="fair"] { color: #c67011; }
.shop-market-card [data-market-tone="expensive"],
.student-shop-market-card [data-market-tone="expensive"] { color: #e2493b; }
.student-shop-market-signal { width: fit-content; border-radius: 999px; padding: 5px 9px; font-size: 13px; font-weight: 950; }
.student-shop-market-signal[data-tone="cheap"] { background: #e3f6e8; color: #168843; }
.student-shop-market-signal[data-tone="fair"] { background: #fff1d9; color: #c67011; }
.student-shop-market-signal[data-tone="expensive"] { background: #ffe5e3; color: #e2493b; }
.student-shop-market-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; color: #637188; font-size: 13px; }
.student-shop-market-expiry { grid-column: 1 / -1; color: #7d8795; font-size: 12px; }
.student-shop-market-register,
.student-shop-market-card [data-market-action],
.shop-market-card [data-market-action] { display: flex; grid-column: 1 / -1; align-self: end; gap: 7px; }
.student-shop-market-register button,
.student-shop-market-card [data-market-action],
.shop-market-card [data-market-action],
.shop-market-card button[data-market-action] { min-height: 44px; border: 1px solid #176edc; border-radius: 8px; background: linear-gradient(180deg, #3479ed, #1760d4); padding: 0 15px; color: #fff; font: inherit; font-size: 12px; font-weight: 950; }
.student-shop-market-pagination,
.student-shop-pagination,
#studentMarketPager { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; }
.student-shop-market-pagination button,
.student-shop-pagination button,
#studentMarketPager button { min-width: 44px; min-height: 44px; border: 1px solid #d9dfe7; border-radius: 9px; background: #fff; color: #41536b; font: inherit; font-weight: 900; }
.student-shop-market-pagination .is-active,
.student-shop-pagination .is-active,
#studentMarketPager .is-active { border-color: #168843; background: #168843; color: #fff; }

body.student-shop-modal-open { overflow: hidden; }
.student-shop-purchase-modal { position: fixed; inset: 0; z-index: 10080; display: grid; box-sizing: border-box; place-items: center; overflow: auto; padding: clamp(18px, 3vw, 42px); background: rgba(33, 22, 10, .48); backdrop-filter: blur(6px); }
.student-shop-purchase-modal .economy-shop-purchase-card { position: relative; display: grid; width: min(720px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 36px)); box-sizing: border-box; gap: 10px; overflow: auto; border: 1px solid #8599b0; border-radius: 15px; background: linear-gradient(90deg, rgba(79, 110, 145, .055) 1px, transparent 1px) 0 0 / 28px 28px, #fffdf7; color: #34200c; box-shadow: 0 24px 60px rgba(25, 37, 54, .28); }
.student-shop-purchase-modal :is(.economy-shop-coupon-modal-card,.economy-shop-ledger-modal-card) { position: relative; width: min(720px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 36px)); box-sizing: border-box; overflow: auto; border: 1px solid #8599b0; border-radius: 15px; background-color: #fffdf7; background-image: linear-gradient(90deg, rgba(79, 110, 145, .055) 1px, transparent 1px); background-size: 28px 28px; color: #34200c; box-shadow: 0 24px 60px rgba(25, 37, 54, .28); }
.student-shop-purchase-modal .economy-shop-modal-head { position: sticky; top: 0; z-index: 4; display: flex; min-height: 88px; box-sizing: border-box; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #264b77; border-radius: 14px 14px 0 0; background: linear-gradient(135deg, #315e91, #24496f); padding: 17px 20px; color: #fff; }
.student-shop-purchase-modal .economy-shop-modal-head > div { min-width: 0; }
.student-shop-purchase-modal .economy-shop-modal-head .economy-kicker { color: #fff; font-size: 12px; font-weight: 950; }
.student-shop-purchase-modal .economy-shop-modal-head h3 { margin: 4px 0; color: #fff; font-size: 27px; line-height: 1.15; }
.student-shop-purchase-modal .economy-shop-modal-head p { margin: 0; color: #fff; font-size: 13px; font-weight: 750; }
.student-shop-purchase-modal .economy-shop-modal-close { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 24px; font-weight: 950; }
.student-shop-purchase-modal .economy-shop-modal-product-head { display: flex; align-items: center; gap: 14px; margin: 16px 20px 10px; border: 1px solid #d2dce7; border-radius: 11px; background: rgba(255,255,255,.82); padding: 12px 14px; }
.student-shop-purchase-modal .economy-shop-modal-thumb { display: grid; width: 84px; height: 84px; flex: 0 0 84px; place-items: center; }
.student-shop-purchase-modal .economy-shop-modal-thumb img { width: 100%; height: 100%; object-fit: contain; }
.student-shop-purchase-modal .economy-shop-modal-product-head > div:last-child { display: grid; min-width: 0; gap: 3px; }
.student-shop-purchase-modal .economy-shop-modal-product-head span { color: #5d7b9a; font-size: 12px; font-weight: 900; }
.student-shop-purchase-modal .economy-shop-modal-product-head strong { color: #294c76; font-size: 19px; }
.student-shop-purchase-modal .economy-shop-modal-product-head p { margin: 0; color: #6b7989; font-size: 13px; }
.student-shop-purchase-modal .economy-shop-money-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 20px 10px; border: 1px solid #c8d6e5; border-radius: 11px; background: #edf5fc; padding: 12px; }
.student-shop-purchase-modal .economy-shop-money-flow > div { display: grid; gap: 4px; text-align: center; }
.student-shop-purchase-modal .economy-shop-money-flow small { color: #607287; font-size: 12px; font-weight: 800; }
.student-shop-purchase-modal .economy-shop-money-flow strong { color: #244f83; font-size: 21px; }
.student-shop-purchase-modal .economy-shop-money-flow .is-price strong { color: #a55748; }
.student-shop-purchase-modal .economy-shop-money-flow .is-after strong { color: #34735f; }
.student-shop-purchase-modal .economy-shop-modal-detail,
.student-shop-purchase-modal .economy-shop-opportunity,
.student-shop-purchase-modal .economy-shop-checklist,
.student-shop-purchase-modal .economy-shop-choice-grid,
.student-shop-purchase-modal .economy-result { margin-inline: 20px; }
.student-shop-purchase-modal .economy-shop-modal-detail { border: 1px solid #d2dce7; border-radius: 10px; background: #fff; padding: 8px 12px; }
.student-shop-purchase-modal .economy-shop-modal-detail-list { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 5px 12px; margin: 0; font-size: 13px; }
.student-shop-purchase-modal .economy-shop-modal-detail-list dt { color: #6b7989; font-weight: 850; }
.student-shop-purchase-modal .economy-shop-modal-detail-list dd { margin: 0; color: #34735f; font-weight: 950; text-align: right; }
.student-shop-purchase-modal .economy-shop-opportunity { display: flex; gap: 8px; border: 1px solid #dfcda7; border-radius: 10px; background: #fff8e8; padding: 11px 13px; color: #294d78; font-size: 13px; }
.student-shop-purchase-modal .economy-shop-opportunity span { color: #765f38; }
.student-shop-purchase-modal .economy-shop-modal-section-title { margin: 4px 20px -3px; color: #294d78; font-size: 15px; }
.student-shop-purchase-modal .economy-shop-checklist,
.student-shop-purchase-modal .economy-shop-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.student-shop-purchase-modal .economy-shop-checklist label,
.student-shop-purchase-modal .economy-shop-choice-grid label { display: flex; min-height: 44px; box-sizing: border-box; align-items: center; gap: 8px; border: 1px solid #d2dce7; border-radius: 10px; background: rgba(255,255,255,.88); padding: 8px 12px; color: #3f4e63; font-size: 13px; font-weight: 850; }
.student-shop-purchase-modal .economy-shop-checklist label:last-child { grid-column: 1 / -1; }
.student-shop-purchase-modal input { width: 18px; height: 18px; accent-color: #2563eb; }
.student-shop-purchase-modal .economy-shop-modal-status { min-height: 0; border-radius: 8px; color: #a34030; font-size: 13px; font-weight: 850; }
.student-shop-purchase-modal .economy-shop-modal-status:not(:empty) { border: 1px solid #e6b8b0; background: #fff2ef; padding: 9px 12px; }
.student-shop-purchase-modal .economy-shop-modal-actions { position: sticky; bottom: 0; z-index: 3; display: flex; min-height: 72px; box-sizing: border-box; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; border-top: 1px solid #c7d3df; background: rgba(255,253,247,.97); padding: 13px 20px; }
.student-shop-purchase-modal .economy-button { min-height: 44px; border: 1px solid #9aaabd; border-radius: 9px; background: #fff; padding: 0 16px; color: #3d516d; font: inherit; font-weight: 900; }
.student-shop-purchase-modal .economy-button.primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.student-shop-purchase-modal .economy-button:disabled { cursor: not-allowed; opacity: .55; }
.student-shop-listing-modal .economy-shop-listing-card { position: relative; display: grid; width: min(760px, calc(100vw - 30px)); max-height: min(880px, calc(100vh - 30px)); box-sizing: border-box; gap: 10px; overflow: auto; border: 1px solid #8599b0; border-radius: 15px; background: linear-gradient(90deg, rgba(79, 110, 145, .055) 1px, transparent 1px) 0 0 / 28px 28px, #fffdf7; color: #34200c; box-shadow: 0 24px 60px rgba(25, 37, 54, .28); }
.student-shop-listing-modal .economy-shop-listing-product { display: grid; gap: 6px; margin: 16px 20px 10px; border: 1px solid #d2dce7; border-radius: 11px; background: rgba(255,255,255,.82); padding: 12px 14px; }
.student-shop-listing-modal .economy-shop-listing-product-label { color: #5d7b9a; font-size: 12px; font-weight: 900; }
.student-shop-listing-modal .economy-shop-listing-product select { min-height: 46px; border: 1px solid #c8d6e5; border-radius: 9px; background: #fff; padding: 0 12px; color: #294c76; font: inherit; font-size: 17px; font-weight: 900; }
.student-shop-listing-modal .economy-shop-listing-product small { color: #6b7989; font-size: 13px; }
.student-shop-listing-modal .economy-shop-listing-price-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 20px; border: 1px solid #cbd7e3; border-radius: 11px; background: #f3f7fb; padding: 11px; }
.student-shop-listing-modal .economy-shop-listing-price-ledger > div,
.student-shop-listing-modal .economy-shop-listing-price-ledger label { display: grid; gap: 5px; margin: 0; border-right: 1px solid #d4dce5; padding: 8px; }
.student-shop-listing-modal .economy-shop-listing-price-ledger label { border-right: 0; }
.student-shop-listing-modal .economy-shop-listing-price-ledger small,
.student-shop-listing-modal .economy-shop-listing-price-ledger span { color: #607287; font-size: 12px; font-weight: 850; }
.student-shop-listing-modal .economy-shop-listing-price-ledger strong { color: #315b8b; font-size: 19px; }
.student-shop-listing-modal .economy-shop-listing-price-ledger input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; border: 1px solid #aebed0; border-radius: 8px; background: #fff; padding: 0 9px; color: #294c76; font: inherit; font-weight: 900; }
.student-shop-listing-modal .economy-shop-listing-settlement { display: flex; align-items: baseline; gap: 12px; margin: 0 20px; border: 1px solid #bcd8ca; border-radius: 10px; background: #eff8f3; padding: 13px 15px; }
.student-shop-listing-modal .economy-shop-listing-settlement span { color: #5b6f65; font-size: 13px; font-weight: 850; }
.student-shop-listing-modal .economy-shop-listing-settlement strong { color: #2f735b; font-size: 23px; }
.student-shop-listing-modal .economy-shop-listing-settlement em { margin-left: auto; color: #708077; font-size: 12px; }
.student-shop-listing-modal .economy-shop-fee-note { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 7px; font-weight: 950; }
.student-shop-listing-modal .economy-shop-fee-note.is-warning { border: 1px solid rgba(185,28,28,.22); background: rgba(254,226,226,.86); color: #b91c1c; }
.student-shop-market-purchase-modal .economy-shop-market-modal-body { display: grid; gap: 12px; padding: 14px 20px 0; }
.student-shop-market-purchase-modal .economy-shop-market-modal-summary { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #d2dce7; border-radius: 11px; background: rgba(255,255,255,.82); padding: 12px; }
.student-shop-market-purchase-modal .economy-shop-market-modal-thumb { display: grid; width: 76px; height: 76px; place-items: center; }
.student-shop-market-purchase-modal .economy-shop-market-modal-thumb img { width: 100%; height: 100%; object-fit: contain; }
.student-shop-market-purchase-modal .economy-shop-market-modal-copy h4,
.student-shop-market-purchase-modal .economy-shop-market-checklist h4,
.student-shop-market-purchase-modal .economy-shop-market-reason h4 { margin: 0; color: #294c76; font-size: 17px; }
.student-shop-market-purchase-modal .economy-shop-market-modal-copy p { margin: 4px 0 0; color: #6b7989; font-size: 13px; }
.student-shop-market-purchase-modal .economy-shop-market-modal-signal { display: grid; justify-items: end; gap: 5px; text-align: right; }
.student-shop-market-purchase-modal .economy-shop-market-modal-signal strong { color: #52647b; font-size: 12px; }
.student-shop-market-purchase-modal .economy-shop-market-modal-pill { border-radius: 999px; background: #e3f6e8; padding: 5px 9px; color: #168843; font-size: 13px; font-weight: 950; }
.student-shop-market-purchase-modal .economy-shop-market-modal-pill[data-tone="fair"] { background: #fff1d9; color: #c67011; }
.student-shop-market-purchase-modal .economy-shop-market-modal-pill[data-tone="expensive"] { background: #ffe5e3; color: #e2493b; }
.student-shop-market-purchase-modal .economy-shop-market-price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.student-shop-market-purchase-modal .economy-shop-market-price-grid article { display: grid; min-height: 76px; gap: 5px; border: 1px solid #d2dce7; border-radius: 11px; background: #fff; padding: 10px; }
.student-shop-market-purchase-modal .economy-shop-market-price-grid span { color: #6b7989; font-size: 12px; font-weight: 850; }
.student-shop-market-purchase-modal .economy-shop-market-price-grid strong { align-self: end; color: #34735f; font-size: 19px; }
.student-shop-market-purchase-modal .economy-shop-market-price-grid .is-after strong { color: #c67011; }
.student-shop-market-purchase-modal .economy-shop-market-decision { display: flex; align-items: center; gap: 8px; border: 1px solid #dfcda7; border-radius: 10px; background: #fff8e8; padding: 11px 13px; color: #765f38; font-size: 13px; }
.student-shop-market-purchase-modal .economy-shop-market-decision strong { color: #294d78; }
.student-shop-market-purchase-modal .economy-shop-market-checklist,
.student-shop-market-purchase-modal .economy-shop-market-reason { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; border: 1px solid #d2dce7; border-radius: 11px; background: rgba(255,255,255,.86); padding: 12px; }
.student-shop-market-purchase-modal .economy-shop-market-checklist label { display: flex; min-height: 44px; box-sizing: border-box; align-items: center; gap: 8px; border: 1px solid #d9e1e9; border-radius: 9px; background: #fff; padding: 8px 10px; color: #3f4e63; font-size: 13px; font-weight: 850; }
.student-shop-market-purchase-modal .economy-shop-market-reason textarea { width: 100%; min-height: 78px; box-sizing: border-box; resize: vertical; border: 1px solid #c8d6e5; border-radius: 9px; padding: 10px; color: #294c76; font: inherit; }
.student-shop-market-purchase-modal .economy-shop-market-modal-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; border-top: 1px solid #c7d3df; background: rgba(255,253,247,.97); padding: 13px 20px; }
.student-shop-market-purchase-modal .economy-shop-market-modal-note { color: #6b7989; font-size: 12px; font-weight: 800; }
.student-shop-market-purchase-modal .economy-shop-market-modal-foot .economy-shop-modal-actions { position: static; min-height: 0; margin: 0; border: 0; background: transparent; padding: 0; }

/* Latest v2 notebook presentation: product chooser, coupon ledger, friend market. */
.student-shop-price-main { display: grid; gap: 2px; }
.student-shop-price-main > span { color: #37684e; font-size: 12px; font-weight: 950; }
.student-shop-price-changes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-shop-price-changes p { display: grid; gap: 2px; margin: 0; border-left: 1px dotted #afc9b8; padding: 2px 14px; }
.student-shop-price-changes p strong { overflow: hidden; color: #344d41; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.student-shop-price-changes p span { color: #1f5da9; font-size: 14px; font-weight: 900; }
.student-shop-product-toolbar,
.student-shop-view-toggle { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.student-shop-sort-select::after { margin-left: 7px; color: #b86d16; content: "⌄"; }
.student-shop-view-toggle button { min-width: 44px; padding-inline: 0 !important; }
.student-shop-token-page .student-shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); gap: 13px; }
.student-shop-token-page .student-shop-product-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); }
.student-shop-token-page .student-shop-product-card { display: block; min-height: 240px; overflow: hidden; border-color: #cddced; border-radius: 17px; background: #fff; padding: 12px; box-shadow: 0 7px 16px rgba(43, 67, 101, .08); }
.student-shop-token-page .student-shop-product-visual { display: grid; width: min(100%, 168px); height: 142px; place-items: center; margin: 0 auto; overflow: hidden; background: transparent; }
.student-shop-token-page .student-shop-product-visual img { width: 92%; height: 92%; max-width: 92%; max-height: 92%; background: transparent; object-fit: contain; }
.student-shop-token-page .economy-shop-card-title { overflow: hidden; margin: 8px 3px 7px; color: #293b5a; font-size: clamp(15px, 1.22vw, 18px); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.student-shop-token-page .student-shop-product-meta { border-top: 1px dashed #d7e2ef; padding: 8px 3px 1px; }
.student-shop-token-page .student-shop-product-meta strong { color: #285db9; font-size: 17px; }
.student-shop-token-page .student-shop-product-meta span { border-radius: 999px; background: #edf5ee; padding: 4px 8px; color: #38704d; font-size: 12px; font-weight: 800; }
.student-shop-product-pagination span { color: #202735; font-size: 14px; font-weight: 900; }
.student-shop-product-pagination em { color: #6a7380; font-size: 12px; font-style: normal; }
.student-shop-coupon-expiry { display: flex; min-height: 44px; box-sizing: border-box; align-items: center; gap: 9px; border: 1px solid #cbdccf; border-radius: 10px; background: #f2faf5; padding: 10px 14px; color: #436a56; }
.student-shop-coupon-expiry span { color: #6f7c89; font-size: 13px; }
.student-shop-coupon-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d6e0ea; padding-bottom: 9px; }
.student-shop-coupon-preview-heading span { color: #6840bd; font-size: 11px; font-weight: 950; }
.student-shop-coupon-preview .student-shop-coupon-preview-heading h3 { margin: 3px 0 0; color: #294d7d; font-size: 20px; }
.student-shop-coupon-preview-heading > button { min-height: 44px; border: 0; background: transparent; color: #37689f; font: inherit; font-size: 12px; font-weight: 850; }
.student-shop-coupon-preview-body { grid-template-columns: minmax(0, 1fr); }
.student-shop-coupon-modal-list { display: grid; max-height: min(58vh, 520px); gap: 0; overflow: auto; padding: 2px 4px 2px 0; }
@media (min-width: 1261px) {
  .student-shop-notebook-frame { width: auto; inset-inline: -4%; }
  .student-shop-notebook-frame--top { transform: translateY(-7.5%); }
}
.student-shop-market-head { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); align-items: center; border: 1px solid #f0d9c4; border-radius: 12px; background: linear-gradient(135deg, #fff7ec, #fff); padding: 13px 16px; }
.student-shop-market-head-copy > span { color: #af6b38; font-size: 11px; font-weight: 950; }
.student-shop-market-head-copy h3 { margin: 4px 0 6px; color: #64462d; font-size: 20px; }
.student-shop-market-head-copy p { margin: 0; color: #68778c; font-size: 12px; }
.student-shop-market-summary-wrap { display: grid; gap: 8px; }
.student-shop-market-summary-wrap > button { min-height: 44px; justify-self: end; border: 1px solid #168843; border-radius: 9px; background: #fff; padding: 0 14px; color: #168843; font: inherit; font-size: 12px; font-weight: 900; }
.student-shop-market-summary-wrap > button.is-active { background: #168843; color: #fff; }
.student-shop-market-summary-wrap > button:disabled { cursor: not-allowed; opacity: .5; }
.student-shop-market-row-item { display: flex; min-width: 0; align-items: center; gap: 10px; border-bottom: 1px dashed #dddfe6; padding-bottom: 9px; }
.student-shop-market-row-seller::before,
.student-shop-market-row-friend::before,
.student-shop-market-row-official::before { display: block; margin-bottom: 2px; color: #8791a2; font-size: 11px; font-weight: 800; }
.student-shop-market-row-seller::before { content: "판매자"; }
.student-shop-market-row-friend::before { content: "친구가"; }
.student-shop-market-row-official::before { content: "공식가"; }
.student-shop-market-row-compare { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 5px; }
.student-shop-market-row-diff { overflow: hidden; color: #637188; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.student-shop-quest-remain { display: inline-grid; min-width: 38px; min-height: 29px; grid-template-rows: 1fr auto; place-items: center; margin-left: auto; box-sizing: border-box; border: 1px solid rgba(119, 70, 20, .45); border-radius: 11px; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 236, .98), rgba(255, 223, 132, .9) 58%, rgba(184, 105, 28, .72)); padding: 2px 6px 3px; color: #5d3107; font-style: normal; font-weight: 1000; line-height: 1; text-align: center; }
.student-shop-quest-remain b { color: #0f4f9f; font-size: 16px; }
.student-shop-quest-remain small { font-size: 8px; white-space: nowrap; }
.student-shop-tutorial { width: min(560px, calc(100vw - 32px)); border: 1px solid #c8d5e4; border-radius: 22px; background: #fffdf6; padding: 24px; box-shadow: 0 26px 70px rgba(18, 43, 79, .25); }
.student-shop-tutorial::backdrop { background: rgba(25, 43, 67, .58); backdrop-filter: blur(3px); }
.student-shop-tutorial > form:first-child { display: flex; justify-content: flex-end; }
.student-shop-tutorial > form:first-child button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #edf3fb; color: #294d78; font-size: 24px; }
.student-shop-tutorial > p { margin: 0; color: #2e61ae; font-weight: 900; }
.student-shop-tutorial h2 { margin: 4px 0 18px; color: #21477f; }
.student-shop-tutorial ol { display: grid; gap: 9px; margin: 0 0 20px; padding: 0; list-style: none; }
.student-shop-tutorial li { display: flex; align-items: center; gap: 12px; border: 1px solid #d9e3ef; border-radius: 12px; padding: 10px; }
.student-shop-tutorial li > b { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; background: #2f67a7; color: #fff; }
.student-shop-tutorial li span { display: grid; color: #617188; font-size: 12px; }
.student-shop-tutorial li strong { color: #2f486a; font-size: 14px; }
.student-shop-tutorial-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.student-shop-tutorial-actions form { margin: 0; }
@media (max-width: 1399px) {
  .student-shop-token-page .student-shop-shell { padding-top: 32px; }
  .student-shop-tabs { margin-inline: 30px 18px; transform: none; }
  .student-shop-tabs button { min-height: 58px; font-size: 13px; }
  .student-shop-tabs button.is-active { min-height: 66px; }
  .student-shop-notebook-sheet { margin-top: 0; padding: 0 28px 92px 50px; }
  .student-shop-token-page .student-shop-header { height: auto; min-height: 132px; }
  .student-shop-title-icon { width: 56px; height: 56px; }
  .student-shop-mascot { width: 78px; height: 72px; }
  .student-shop-header-actions .student-shop-date { min-width: 124px; overflow: hidden; padding-inline: 11px; }
}
@media (max-width: 1100px) {
  .student-shop-token-page .student-shop-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .student-shop-header-actions { justify-content: flex-end; }
  .student-shop-mascot { display: none; }
  .student-shop-token-page .shop-product-grid,
  .student-shop-product-grid,
  .student-shop-market-grid,
  #studentMarketGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .student-shop-tabs { margin-left: 18px; }
  .student-shop-tabs button { min-height: 56px; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; padding: 5px; font-size: 11px; text-align: center; }
  .student-shop-tabs button.is-active { min-height: 62px; }
  .student-shop-tabs img { width: 20px; height: 30px; }
  .student-shop-tabs > button > i { width: 20px; height: 30px; font-size: 20px; }
  .student-shop-notebook-sheet { padding: 0 20px 80px 36px; }
  .student-shop-title-icon { width: 52px; height: 52px; }
  .student-shop-header h1 { font-size: 34px; }
  .student-shop-header-actions { display: flex; }
  .student-shop-header-actions .student-shop-date { min-width: 0; }
  .student-shop-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-shop-summary button:nth-child(2) { border-right: 0; }
  .student-shop-summary button:nth-child(-n + 2) { border-bottom: 1px dashed #d7beb8; }
  .student-shop-today-grid,
  .student-shop-insight-grid { grid-template-columns: minmax(0, 1fr); }
  .student-shop-price-signal,
  .student-shop-price-notice,
  #studentShopProductPriceStrip { grid-template-columns: minmax(0, 1fr); }
  .student-shop-coupon-ledger,
  .student-shop-coupon-sections,
  #studentShopCouponLedger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-shop-coupon-status:nth-child(2n),
  .student-shop-coupon-folder:nth-child(2n),
  .shop-coupon-ledger-state:nth-child(2n) { border-right: 0; }
  .student-shop-coupon-status:nth-child(-n + 2),
  .student-shop-coupon-folder:nth-child(-n + 2),
  .shop-coupon-ledger-state:nth-child(-n + 2) { border-bottom: 1px solid #d4dce7; }
  .student-shop-coupon-preview-body { grid-template-columns: minmax(0, 1fr); }
  .student-shop-market-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-shop-market-summary > div:nth-child(2) { border-right: 0; }
  .student-shop-market-summary > div:nth-child(-n + 2) { border-bottom: 1px dashed #d8d3cc; }
  .student-shop-market-toolbar { align-items: stretch; flex-direction: column; }
  .student-shop-market-toolbar input[type="search"],
  #studentMarketSearch { width: 100%; }
}
@media (max-width: 760px) { .student-shop-token-page .shop-product-grid,
  .student-shop-product-grid,
  .student-shop-market-grid,
  #studentMarketGrid { grid-template-columns: minmax(0, 1fr); }
  .student-shop-filter-row,
  .student-shop-filter-panel,
  #studentShopProductFilters { align-items: stretch; flex-direction: column; }
  .student-shop-token-page .student-purchase-card { grid-template-columns: 46px minmax(0, 1fr); }
  .student-shop-purchase-modal { padding: 10px; }
  .student-shop-purchase-modal .economy-shop-purchase-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .student-shop-purchase-modal :is(.economy-shop-coupon-modal-card,.economy-shop-ledger-modal-card) { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .student-shop-purchase-modal .economy-shop-money-flow { grid-template-columns: 1fr; }
  .student-shop-purchase-modal .economy-shop-money-flow > i { transform: rotate(90deg); justify-self: center; }
  .student-shop-purchase-modal .economy-shop-checklist,
  .student-shop-purchase-modal .economy-shop-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .student-shop-purchase-modal .economy-shop-checklist label:last-child { grid-column: auto; }
  .student-shop-purchase-modal .economy-shop-modal-actions { align-items: stretch; flex-direction: column-reverse; }
  .student-shop-purchase-modal .economy-shop-modal-actions button { width: 100%; }
  .student-shop-listing-modal .economy-shop-listing-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .student-shop-listing-modal .economy-shop-listing-price-ledger { grid-template-columns: minmax(0, 1fr); }
  .student-shop-listing-modal .economy-shop-listing-price-ledger > div { border-right: 0; border-bottom: 1px solid #d4dce5; }
  .student-shop-listing-modal .economy-shop-listing-settlement { align-items: flex-start; flex-direction: column; gap: 4px; }
  .student-shop-listing-modal .economy-shop-listing-settlement em { margin-left: 0; }
  .student-shop-market-purchase-modal .economy-shop-market-modal-summary,
  .student-shop-market-purchase-modal .economy-shop-market-price-grid { grid-template-columns: minmax(0, 1fr); }
  .student-shop-market-purchase-modal .economy-shop-market-modal-signal { justify-items: start; text-align: left; }
  .student-shop-market-purchase-modal .economy-shop-market-modal-foot { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .student-shop-token-page { scroll-behavior: auto; }
}