@charset "utf-8";



/* ===== VISUAL SECTION ===== */
.visual-section { position: relative; width: 100%; overflow: hidden; background: #5a6fc0; }
.visual-slides { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.visual-slide { position: relative; min-width: 100%; height: 420px; display: flex; align-items: center; overflow: hidden; flex-shrink: 0; }
.visual-slide::before { content: ''; position: absolute; inset: 0; z-index: 0; }
.slide-1 { background: linear-gradient(120deg, #5a6fc0 0%, #6b7fd4 40%, #8090d8 70%, #9ba8e0 100%); }
.slide-2 { background: linear-gradient(120deg, #4a7c6f 0%, #5a9080 40%, #6ba090 100%); }
.slide-3 { background: linear-gradient(120deg, #3a4a7a 0%, #4a5a8a 40%, #5a6a9a 100%); }
.slide-deco { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,0.07); z-index: 0; }
.slide-deco-2 { position: absolute; right: 80px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); z-index: 0; }
.slide-inner { position: relative; z-index: 2; width: 100%; margin: 0 auto; padding: 0 60px; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.slide-content { flex: 1; padding-right: 40px; }
.slide-label { display: inline-block; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; margin-bottom: 14px; line-height: 1; }
.slide-title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; color: #fff; line-height: 1.35; letter-spacing: -0.02em; margin-bottom: 32px; word-break: keep-all; }
.slide-title em { font-style: normal; color: #ffeaa7; }
.slide-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: #1a1a2e; border: none; border-radius: 50px; color: #fff; letter-spacing: 0.1em; text-decoration: none; cursor: pointer; transition: background 0.25s, transform 0.2s; }
.slide-btn:hover { background: #0f0f1e; transform: translateX(3px); }
.slide-btn-arrow { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.slide-btn-arrow svg { width: 20px; height: 20px; }
.slide-image-wrap { flex-shrink: 0; width: 45%; max-width: 535px; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.slide-image { width: 100%; height: 105%; object-fit: contain; object-position: center bottom; position: absolute; bottom: 0; }
.slide-image-placeholder { width: 100%; height: 340px; border-radius: 16px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; backdrop-filter: blur(4px); border: 1px dashed rgba(255,255,255,0.3); }
.slide-image-placeholder svg { width: 48px; height: 48px; opacity: 0.5; }
.slide-image-placeholder span { font-size: 12px; color: rgba(255,255,255,0.5); }
.visual-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.2s; backdrop-filter: blur(4px); }
.visual-arrow:hover { background: rgba(255,255,255,0.32); transform: translateY(-50%) scale(1.05); }
.visual-arrow svg { width: 14px; height: 14px; }
.visual-arrow-prev { left: 12%; }
.visual-arrow-next { right: 12%; }
.visual-indicators { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 7px; align-items: center; }
.indicator-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; padding: 0; cursor: pointer; transition: all 0.3s; }
.indicator-dot.active { width: 22px; border-radius: 4px; background: #fff; }
.visual-counter { position: absolute; bottom: 18px; right: 28px; z-index: 10; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; }
.visual-counter .current { color: #fff; font-weight: 600; }
.slide-image-wrap2 {width: 60%; max-width: 835px; }


/* ===== EQUIPMENT NAV ===== */
.equip-nav { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 24px 100px; padding: 50px 20px; }
.equip-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.equip-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: #f4f4f5; color: #9a9a9a; transition: background 0.2s ease, color 0.2s ease; }
.equip-icon svg { width: 30px; height: 30px; }
.equip-label { color: #333; letter-spacing: -0.02em; transition: color 0.2s ease; }
.equip-item:hover .equip-icon { background: #ececed; color: #666; }
.equip-item.active .equip-icon { background: #035272; color: #fff; }
.equip-item.active .equip-label { color: #111; }

@media (max-width: 768px) { .equip-nav { gap: 18px 14px; padding: 20px 10px; } .equip-icon { width: 40px; height: 40px; border-radius: 14px; } .equip-icon svg { width: 26px; height: 26px; } }



/* ===== (Âü°í¿ë) °¡À̵å Ä«µå - ±âÁ¸ À¯Áö ===== */
.guide-card-wrap { display: flex; flex-direction: column; cursor: pointer; }
.guide-card-wrap:hover .guide-badge { background: #024460; }
.class-card-guide { display: flex; cursor: pointer; border-radius: 8px; overflow: hidden; background: #f5f5f5; margin-bottom: 12px; aspect-ratio: 4 / 3; }
.guide-badge { flex-shrink: 0; width: 48%; background: #035272; display: flex; flex-direction: column; justify-content: center; padding: 16px 14px; gap: 6px; }
.guide-category { color: #fff; line-height: 1.3; }
.guide-seq { color: rgba(255,255,255,0.7); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.guide-num { color: rgba(255,255,255,0.2); line-height: 1; margin-top: 4px; }
.guide-thumb { flex: 1; overflow: hidden; position: relative; }
.guide-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.guide-placeholder { width: 100%; height: 100%; background: #ddd; display: flex; align-items: center; justify-content: center; }
.guide-placeholder svg { width: 28px; height: 28px; opacity: 0.35; }


/* ===== CURATION SECTION ===== */
html, body { overflow: initial; }
.curation-section { position: relative; }
.curation-scroll-track { height: 300vh; position: relative; }
.curation-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.curation-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #7a8fb0 0%, #8fa0be 30%, #a8b8cc 60%, #c5cfd8 100%); }
.curation-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% center; }
.curation-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(100,120,150,0.3) 0%, rgba(100,120,150,0.1) 50%, rgba(100,120,150,0) 100%); }
.curation-inner { position: relative; z-index: 2; width: 100%; margin: 0 auto; padding: 0 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; height: 100%; }
.curation-left { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.curation-label { color: rgba(255,255,255,0.85); letter-spacing: 0.05em; margin-bottom: 16px; }
.curation-title { font-family: 'GFS Didot', serif; font-size: clamp(52px, 7vw, 88px); font-weight: 400; font-style: italic; color: #fff; line-height: 1; letter-spacing: 0; text-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.curation-card { background: #fff; border-radius: 20px; padding: 60px 0; box-shadow: 0 20px 60px rgba(0,0,0,0.15); position: absolute; width: 45%; top: 50%; transform: translateY(-50%); right: 60px; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.curation-card.active { opacity: 1; transform: translateY(-50%) translateY(0); pointer-events: auto; }
.curation-card.exit-up { opacity: 0; transform: translateY(calc(-50% - 30px)); }
.curation-card.exit-down { opacity: 0; transform: translateY(calc(-50% + 30px)); }
.card-thumb { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 16px; text-align: center; }
.card-sub { margin-bottom: 8px; line-height: 1.5; }
.card-title { color: #1a1a1a; line-height: 1.5; margin-bottom: 20px; word-break: keep-all; }
.card-btn-wrap { display: flex; align-items: center; justify-content: center; }
.card-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 6px 6px 6px 20px; background: #fff; border: 1.5px solid #222; border-radius: 50px; color: #222; letter-spacing: 0.1em; cursor: pointer; text-decoration: none; transition: border-color 0.2s; }
.card-btn:hover { border-color: #035272; }
.card-btn:hover .card-btn-arrow { background: #035272; }
.card-btn-arrow { width: 30px; height: 30px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.card-btn-arrow svg { width: 12px; height: 12px; }
.curation-progress { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.progress-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; padding: 0; cursor: pointer; transition: all 0.3s; }
.progress-dot.active { height: 20px; border-radius: 3px; background: #fff; }


/* ===== BEST MOTIONCARE SECTION ===== */
.best-motion-section { padding: 0 0 120px 0; background: #fff; }
.best-motion-inner { margin: 0 auto; padding: 0 40px; }
.bm-label { display: block; color: #035272; letter-spacing: 0.02em; margin-bottom: 10px; }
.bm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.bm-title { color: #222; letter-spacing: -0.02em; }
.bm-head-actions { display: flex; align-items: center; gap: 8px; }
.bm-vid-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 6px 6px 18px; background: #fff; border: 1.5px solid #222; border-radius: 50px; font-size: 11px; font-weight: 600; color: #222; letter-spacing: 0.1em; cursor: pointer; text-decoration: none; transition: border-color 0.2s; }
.bm-vid-btn:hover { border-color: #035272; }
.bm-vid-btn:hover .bm-vid-arrow { background: #035272; }
.bm-vid-arrow { width: 26px; height: 26px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.bm-vid-arrow svg { width: 12px; height: 12px; }
.bm-help-btn { width: 26px; height: 26px; border-radius: 50%; background: #222; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
.bm-help-btn:hover { background: #035272; }
.bm-help-btn svg { width: 12px; height: 12px; }
.bm-swiper { overflow: visible; }
.bm-swiper-wrap { position: relative; }
.bm-swiper-wrap::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0), #fff); z-index: 2; pointer-events: none; }
.bm-card { display: flex; flex-direction: column; cursor: pointer; }
.bm-card:hover .bm-thumb-img { transform: scale(1.04); }
.bm-thumb { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #f2f2f2; margin-bottom: 14px; }
.bm-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.bm-thumb-placeholder { width: 100%; height: 100%; background: #ebebeb; display: flex; align-items: center; justify-content: center; }
.bm-thumb-placeholder svg { width: 36px; height: 36px; opacity: 0.3; }
.bm-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: #035272; border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; }
.bm-card-info { padding: 0 2px; }
.bm-card-title { color: #333; line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.bm-card-price { color: #222; letter-spacing: -0.01em; }
.bm-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.bm-btn-prev, .bm-btn-next { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #ddd; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.bm-btn-prev:hover, .bm-btn-next:hover { background: #222; border-color: #222; }
.bm-btn-prev:hover svg path, .bm-btn-next:hover svg path { stroke: #fff; }
.bm-btn-prev svg, .bm-btn-next svg { width: 12px; height: 12px; }
.bm-pagination { display: flex; align-items: center; gap: 6px; }
.bm-pagination .swiper-pagination-bullet { width: 6px; height: 6px; background: #ddd; opacity: 1; margin: 0; transition: all 0.3s; }
.bm-pagination .swiper-pagination-bullet-active { width: 20px; border-radius: 3px; background: #222; }

/* ===================== CLASS SHOWCASE LAYOUT ===================== */
.class-showcase-section { padding: 60px 0; background: #fff; }
.class-showcase-inner { margin: 0 auto; padding: 0 40px; }
.class-showcase-layout { display: flex; align-items: flex-start; gap: 24px; }
.class-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.class-col-left { flex: 1; }
.class-col-right { flex-shrink: 0; width: 430px; }

/* ¹Ú½º °øÅë (¶ó¿îµå Å׵θ®) */
.best-class-box { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 30px 30px 36px; }
.nc-box { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 30px 36px 40px; }
.best-rank-box { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 30px; }
.nc-rank-box { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 30px; }

/* ===== BEST CLASS (¿ÞÂÊ »ó´Ü) ===== */
.section-label { display: block; color: #035272; letter-spacing: 0.02em; margin-bottom: 8px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.section-title { color: #222; letter-spacing: -0.02em; }
.class-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tab-btn { padding: 6px 14px; height: 32px; color: #666; background: none; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.tab-btn:hover { border-color: #035272; color: #035272; }
.tab-btn.active { background: #222; border-color: #222; color: #fff; }
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.class-card { display: flex; flex-direction: column; cursor: pointer; }
.class-card:hover .class-thumb img { transform: scale(1.04); }
.class-thumb { position: relative; width: 100%; aspect-ratio: 1.5 / 1; border-radius: 8px; overflow: hidden; background: #f0f0f0; margin-bottom: 12px; }
.class-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.thumb-badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; background: #ff5c8a; color: #fff; text-align: left; }
.class-info { padding: 0 2px; }
.class-title { color: #222; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.class-desc { color: #999; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== ¿ù°£ º£½ºÆ® Ŭ·¡½º (¿À¸¥ÂÊ »ó´Ü) ===== */
.rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.rank-head-title { color: #222; letter-spacing: -0.02em; }
.rank-period { flex-shrink: 0; color: #aaa; }
.rank-list { display: flex; flex-direction: column; padding-left: 0; }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f2f2f2; }
.rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rank-num { flex-shrink: 0; width: 18px; text-align: center; color: #222; }
.rank-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.rank-thumb { position: relative; flex-shrink: 0; width: 100px; height: 72px; border-radius: 8px; overflow: hidden; background: #f0f0f0; }
.rank-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.rank-item:hover .rank-thumb img { transform: scale(1.04); }
.rank-badge { position: absolute; left: 0; bottom: 0; padding: 3px 7px; background: #ff5c8a; color: #fff; border-radius: 0 6px 0 0; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { color: #222; line-height: 1.35; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.rank-sub { color: #999; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== NEW CLASS (¿ÞÂÊ ÇÏ´Ü) ===== */
.nc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.nc-title { color: #222; letter-spacing: -0.02em; }
.nc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nc-card { display: flex; flex-direction: column; cursor: pointer; border-radius: 12px; overflow: hidden; border: 1px solid #ebebeb; transition: box-shadow 0.25s; }
.nc-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10); }
.nc-card:hover .nc-thumb-img { transform: scale(1.04); }
.nc-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.nc-thumb { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; position: relative; flex-shrink: 0; }
.nc-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.nc-thumb-placeholder { width: 100%; height: 100%; background: #2a2a2a; display: flex; align-items: center; justify-content: center; }
.nc-thumb-placeholder svg { width: 36px; height: 36px; opacity: 0.4; }
.nc-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; background: #fff; }
.nc-badge { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 10px; background: #e6f0f5; border-radius: 4px; color: #035272; letter-spacing: 0.04em; }
.nc-card-title { color: #222; line-height: 1.45; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-card-desc { color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nc-card-date { color: #bbb; margin-top: auto; padding-top: 4px; }
.nc-empty { grid-column: 1 / -1; text-align: center; padding: 48px 0; color: #999; }

/* ===== ¿ù°£ º£½ºÆ® ½Å±ÔŬ·¡½º (¿À¸¥ÂÊ ÇÏ´Ü) ===== */
.nc-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.nc-rank-head-title { color: #222; letter-spacing: -0.02em; }
.nc-rank-period { flex-shrink: 0; color: #aaa; }
.nc-rank-list { display: flex; flex-direction: column; padding-left: 0; }
.nc-rank-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f2f2f2; }
.nc-rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.nc-rank-num { flex-shrink: 0; width: 18px; text-align: center; color: #222; }
.nc-rank-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; }
.nc-rank-thumb { position: relative; flex-shrink: 0; width: 100px; height: 72px; border-radius: 8px; overflow: hidden; background: #f0f0f0; }
.nc-rank-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.nc-rank-item:hover .nc-rank-thumb img { transform: scale(1.04); }
.nc-rank-badge { position: absolute; left: 0; bottom: 0; padding: 3px 7px; background: #ff5c8a; color: #fff; border-radius: 0 6px 0 0; }
.nc-rank-info { flex: 1; min-width: 0; }
.nc-rank-cat { display: block; color: #ff5c8a; margin-bottom: 3px; }
.nc-rank-name { color: #222; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.nc-rank-sub { color: #999; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== ¹ÝÀÀÇü ===== */
@media (max-width: 1100px) { .class-showcase-layout { flex-direction: column; } .class-col-right { width: 100%; } }
@media (max-width: 768px) { .class-showcase-section { padding: 40px 0; } .class-showcase-inner { padding: 0 16px; } .best-class-box, .nc-box, .best-rank-box, .nc-rank-box { padding: 20px; } .class-grid { grid-template-columns: repeat(2, 1fr); } .nc-grid { grid-template-columns: 1fr; } .nc-head { margin-bottom: 20px; } }
/* ===== BOARD SECTION ===== */
.board-section { padding: 20px 0 100px; background: #fff; }
.board-inner { margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.board-col{ border: 1px solid #ececec; border-radius: 16px; padding: 30px 36px 40px; }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #222; }
.board-head-text { display: flex; flex-direction: column; gap: 6px; }
.board-label { color: #035272; letter-spacing: 0.06em; margin-bottom: 10px; }
.board-title { color: #222; letter-spacing: -0.02em; line-height: 1; }
.board-more { width: 32px; height: 32px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.board-more:hover { background: #035272; }
.board-more svg { width: 14px; height: 14px; }
.notice-list { list-style: none; display: flex; flex-direction: column; }
.notice-item { border-bottom: 1px solid #efefef; }
.notice-item:last-child { border-bottom: none; }
.notice-link { display: flex; align-items: center; gap: 16px; padding: 20px 0; text-decoration: none; transition: opacity 0.2s; }
.notice-link:hover { opacity: 0.7; }
.notice-thumb { width: 120px; height: 70px; border-radius: 6px; overflow: hidden; background: #e8e8e8; flex-shrink: 0; position: relative; }
.notice-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.notice-thumb-placeholder { position: absolute; inset: 0; background: #e0e0e0; }
.notice-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.notice-title { color: #222; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-date { color: #bbb; }
.review-list { list-style: none; display: flex; flex-direction: column; }
.review-item { border-bottom: 1px solid #efefef; }
.review-item:last-child { border-bottom: none; }
.review-link { display: flex; align-items: center; gap: 14px; padding: 20px 0; text-decoration: none; transition: opacity 0.2s; }
.review-link:hover { opacity: 0.7; }
.review-stars { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.star { font-size: 20px; color: #ddd; line-height: 1; }
.star.on { color: #f5b800; }
.review-text { color: #333; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }


/* ===== FOOTER ===== */
.site-footer { position: relative; overflow: hidden; padding: 70px 0 40px; }
.footer-bg { position: absolute; inset: 0; z-index: -1; background: #1c1e22; }
.footer-bg-img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.footer-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(20,22,26,0.82); }
.footer-inner { position: relative; z-index: 2; margin: 0 auto; padding: 0 40px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.footer-logo { display: flex; align-items: center; text-decoration: none; }
.footer-logo-img { width: auto; }
.footer-logo-text { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-sns { display: flex; align-items: center; gap: 10px; }
.footer-sns-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.footer-sns-btn:hover { background: #035272; border-color: #035272; }
.footer-sns-btn svg { width: 18px; height: 18px; }
.footer-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.12); margin-bottom: 28px; }
.footer-bottom { display: flex; flex-direction: column; gap: 12px; }
.footer-info { display: flex; flex-direction: column; gap: 8px; }
.footer-info-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.5); line-height: 1.6; }
.footer-bar { font-style: normal; margin: 0 8px; color: rgba(255,255,255,0.2); }
.footer-copy { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.3); margin-top: 8px; }
/* ¸ð¹ÙÀÏ Swiper ±âº» ¼û±è */
.curation-mo-wrap { display: none; }


/* ===========================================
   MEDIA QUERIES
=========================================== */

/* ===== 1024px ===== */
@media (max-width: 1024px) {
  .class-grid { grid-template-columns: repeat(3, 1fr); }
  .nc-grid { grid-template-columns: repeat(2, 1fr); }
  .board-inner { gap: 40px; }
  .best-motion-inner { padding: 0 30px; }
}

/* ===== 900px ===== */
@media (max-width: 900px) {
  .visual-slide { height: 340px; }
  .slide-inner { padding: 0 50px; }
  .slide-image-wrap { width: 40%; }
  .curation-inner { padding: 0 30px; }
  .curation-card { width: 280px; right: 30px; }
}

/* ===== 768px ===== */
@media (max-width: 768px) {
  /* °øÅë */
  html, body { overflow: initial; }
  html { overflow-y: scroll; }

  /* ºñÁÖ¾ó */
  .visual-section { overflow: hidden; }
  .visual-arrow-prev { left: 4%; }
  .visual-arrow-next { right: 4%; }

  /* º£½ºÆ® Ŭ·¡½º */
  .best-class-section { padding: 60px 0; }
  .best-class-inner { padding: 0 20px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .class-tabs { gap: 6px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Å¥·¹ÀÌ¼Ç */
  .curation-card { width: calc(100% - 60px); right: 30px; }

  /* º£½ºÆ® ¸ð¼ÇÄɾî */
  .best-motion-section { padding: 60px 0; }
  .best-motion-inner { padding: 0 20px; }
  .bm-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bm-swiper-wrap::after { width: 40px; }

  /* ½Å±Ô Ŭ·¡½º */
  .new-class-section { padding: 60px 0; }
  .new-class-inner { padding: 0 20px; }
  .nc-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* °Ô½ÃÆÇ */
  .board-section { padding: 60px 0; }
  .board-inner { grid-template-columns: 1fr; gap: 50px; padding: 0 20px; }
  .board-title { font-size: 26px; }
  .notice-thumb { width: 90px; height: 60px; }

  /* ǪÅÍ */
  .site-footer { padding: 50px 0 30px; }
  .footer-inner { padding: 0 20px; }
  .footer-logo-text { font-size: 17px; }
  .footer-info-row { font-size: 12px; }

   /* PC ½ºÅ©·Ñ ±¸Á¶ ÇØÁ¦ */
  .curation-pc-wrap { display: none; }

  .curation-scroll-track { height: auto; }
  .curation-sticky { position: relative; height: auto; min-height: 75svh; flex-direction: column; justify-content: center; padding: 60px 20px 50px; }
  .curation-inner { flex-direction: column; justify-content: center; gap: 28px; padding: 0; height: auto; }
  .curation-left { flex: none; }
  .curation-title { font-size: 48px; }

  /* PC Ä«µå ¡¤ ÀεðÄÉÀÌÅÍ ¼û±è */
  .curation-card { display: none !important; }
  .curation-progress { display: none; }

  /* ¸ð¹ÙÀÏ Swiper ³ëÃâ */
  .curation-mo-wrap { display: block; width: 100%; }
  .curation-mo-swiper { overflow: hidden; }
  .curation-mo-card { background: #fff; border-radius: 16px; padding: 24px 20px 20px; }
  .curation-mo-card .card-thumb { margin-bottom: 14px; border-radius: 10px; overflow: hidden; }
  .curation-mo-card .card-title { margin-bottom: 16px; }

  /* ÆäÀÌÁö³×ÀÌ¼Ç */
  .curation-mo-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .curation-mo-pagination .swiper-pagination-bullet { width: 6px; height: 6px; background: rgba(255,255,255,0.4); opacity: 1; transition: all 0.3s; }
  .curation-mo-pagination .swiper-pagination-bullet-active { width: 20px; border-radius: 3px; background: #fff; }
}

/* ===== 680px ===== */
@media (max-width: 680px) {
  /* ºñÁÖ¾ó */
  .visual-slide { height: auto; min-height: 300px; padding: 48px 0 40px; }
  .slide-inner { flex-direction: column; align-items: flex-start; padding: 0 24px; gap: 24px; }
  .slide-content { padding-right: 0; }
  .slide-label { font-size: 14px; }
  .slide-title { font-size: 22px; margin-bottom: 20px; }
  .slide-image-wrap { width: 100%; max-width: 100%; height: 200px; position: relative; }
  .slide-image { object-position: center center; }
  .visual-arrow { display: none; }

  /* Å¥·¹ÀÌ¼Ç */
  .curation-scroll-track { height: 400vh; }
  .curation-sticky { height: 75svh; }
  .curation-inner { flex-direction: column; justify-content: flex-end; padding: 0 20px 40px; gap: 20px; }
  .curation-left { flex: none; }
  .curation-label { font-size: 15px; }
  .curation-title { font-size: 48px; }
  .curation-card { position: static; width: 100%; transform: none; right: auto; top: auto; opacity: 0; padding: 30px 20px; transition: opacity 0.5s; }
  .curation-card.active { opacity: 1; transform: none; }
  .curation-progress { display: none; }
  .card-sub { font-size: 14px; }
  .card-title { font-size: 16px; }

  /* º£½ºÆ® Ŭ·¡½º */
  .section-title { font-size: 28px; }
  .class-tabs { gap: 4px; }
  .tab-btn { padding: 5px 10px; height: 30px; font-size: 12px; }

  /* °Ô½ÃÆÇ */
  .review-link { gap: 10px; }
  .review-text { font-size: 14px; }
  .star { font-size: 16px; }
}

/* ===== 480px ===== */
@media (max-width: 480px) {
  /* ºñÁÖ¾ó */
  .slide-title { font-size: 20px; }
  .visual-indicators { bottom: 12px; }
  .visual-counter { display: none; }

  /* º£½ºÆ® Ŭ·¡½º */
  .best-class-section { padding: 48px 0; }
  .best-class-inner { padding: 0 16px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .class-title { font-size: 14px; }
  .class-desc { font-size: 12px; }

  /* º£½ºÆ® ¸ð¼ÇÄɾî */
  .best-motion-section { padding: 48px 0; }
  .best-motion-inner { padding: 0 16px; }
  .bm-title { font-size: 28px; }

  /* ½Å±Ô Ŭ·¡½º */
  .new-class-section { padding: 48px 0; }
  .new-class-inner { padding: 0 16px; }
  .nc-grid { grid-template-columns: repeat(1, 1fr); gap: 16px; }
  .nc-title { font-size: 28px; }
  .nc-card-title { font-size: 15px; }

  /* °Ô½ÃÆÇ */
  .board-section { padding: 48px 0; }
  .board-inner { padding: 0 16px; gap: 40px; }
  .board-title { font-size: 22px; }
  .notice-title { font-size: 14px; }
  .notice-thumb { width: 80px; height: 54px; }
  .notice-link { gap: 12px; padding: 14px 0; }
  .review-link { padding: 14px 0; }

  /* ǪÅÍ */
  .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-sns-btn { width: 34px; height: 34px; }
  .footer-info-row { font-size: 11px; }
  .footer-copy { font-size: 12px; }
}

/* ===== 360px ===== */
@media (max-width: 360px) {
  .slide-title { font-size: 18px; }
  .class-grid { gap: 10px; }
  .class-title { font-size: 13px; }
  .bm-title { font-size: 24px; }
  .nc-title { font-size: 24px; }
  .board-title { font-size: 20px; }
}