* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #fbf9f8; color: #1b1c1c; font-family: "Noto Sans SC", sans-serif; font-size: 14px; line-height: 20px; overflow-x: hidden; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.active-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #003399; }

.page-main { width: 100%; max-width: 768px; margin: 0 auto; }
.breadcrumbs { padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.25rem; font-family: "Work Sans", sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 500; color: #444653; background: transparent; }
.breadcrumbs .current { color: #002068; font-weight: bold; }

.section-header { padding: 0 1rem; margin-top: 1rem; margin-bottom: 1.5rem; }
.section-title-box { display: flex; align-items: center; gap: 0.5rem; border-left: 4px solid #003399; padding-left: 0.75rem; }
.section-title { font-family: "Noto Serif SC", serif; font-size: 22px; line-height: 30px; font-weight: 700; color: #1b1c1c; }

.audio-container { padding: 0 1rem; display: flex; flex-direction: column; gap: 1rem; }
.audio-card { background-color: #ffffff; border: 1px solid #c4c5d5; padding: 1rem; display: flex; gap: 1rem; transition: transform 0.1s; cursor: pointer; }
.audio-card:active { transform: scale(0.98); }
.thumb-box { width: 6rem; height: 6rem; flex-shrink: 0; position: relative; overflow: hidden; background-color: #eae8e7; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder { width: 6rem; height: 6rem; flex-shrink: 0; position: relative; overflow: hidden; background-color: #eae8e7; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #747684; }
.thumb-placeholder .ph-icon { color: #747684; font-size: 40px; }
.thumb-placeholder .ph-text { font-size: 10px; color: #747684; margin-top: 0.25rem; font-family: "Work Sans", sans-serif; font-weight: 500; }

.card-info { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; flex: 1; }
.card-title { font-family: "Noto Serif SC", serif; font-size: 20px; line-height: 28px; font-weight: 600; color: #1b1c1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-desc { color: #444653; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.25rem; }
.card-tag { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; color: #002068; }
.card-tag .tag-icon { font-size: 18px; }
.card-tag .tag-text { font-family: "Work Sans", sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 500; }

.pagination { padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.page-btn, .page-num { height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; font-size: 14px; border: none; cursor: pointer; text-decoration: none; }
.page-num { width: 2rem; }
.page-num.active { background-color: #e90614; color: #ffffff; font-weight: bold; }
.page-num.inactive, .page-btn { background-color: #eae8e7; color: #1b1c1c; }
.page-btn { padding: 0 0.75rem; }

.recom-container { padding: 0 1rem; display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 1.5rem; }
.recom-section { background-color: #f6f3f2; padding: 1rem; border-radius: 0.75rem; border: 1px solid #c4c5d5; }
.recom-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.recom-title-box { display: flex; align-items: center; gap: 0.5rem; }
.recom-indicator { width: 0.25rem; height: 1.25rem; background-color: #bc000c; }
.recom-title { font-family: "Noto Serif SC", serif; font-size: 20px; line-height: 28px; font-weight: 600; color: #1b1c1c; }
.recom-more { color: #002068; font-family: "Work Sans", sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 500; display: flex; align-items: center; text-decoration: none; }
.recom-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.recom-item { display: flex; align-items: start; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid #c4c5d5; cursor: pointer; transition: color 0.2s; }
.recom-item:hover { color: #bc000c; }
.recom-item:last-child { border-bottom: 0; }
.recom-item .active-dot { margin-top: 0.5rem; flex-shrink: 0; }
.recom-text { color: #1b1c1c; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

.promo-container { padding: 0 1rem; margin-bottom: 1.5rem; }
.promo-banner { position: relative; width: 100%; height: 8rem; border-radius: 0.75rem; overflow: hidden; background-color: #003399; display: flex; align-items: center; padding: 1.5rem; transition: transform 0.1s; cursor: pointer; }
.promo-banner:active { transform: scale(0.99); }
.promo-content { z-index: 10; color: #ffffff; }
.promo-title { font-family: "Noto Serif SC", serif; font-size: 22px; line-height: 30px; font-weight: 700; }
.promo-desc { opacity: 0.9; margin-top: 0.25rem; }
.promo-badge { margin-top: 0.75rem; padding: 0.375rem 1rem; background-color: #bc000c; border-radius: 9999px; display: inline-block; color: #ffffff; font-weight: bold; font-family: "Work Sans", sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; }
.promo-qr-wrapper { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 5rem; height: 5rem; background-color: #ffffff; padding: 4px; border-radius: 0.5rem; }
.promo-qr-img { width: 100%; height: 100%; }
.promo-deco-circle { position: absolute; left: -2.5rem; bottom: -2.5rem; width: 10rem; height: 10rem; background-color: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(40px); }